+ {/* Main Menu */}
+
+
+
Visual Novel Editor
+
+
+
+ {/* Main Content Area */}
+
+ {/* Top Section - Left, Main, Right Panels */}
+
+ {/* Left Panel - Node Tree */}
+
+
+ {/* Main Panel */}
+
+
+ {/* Action Buttons */}
+ {selectedNode && selectedNode.actions.length > 0 && (
+
+
+ {selectedNode.actions.map((action, index) => (
+
+ {action.name}
+
+ ))}
+
+
+ )}
+
+ {/* Preview Canvas */}
+
+
+
+
+
Preview
+
+ {selectedNode ? `Selected: ${pathString}` : "No node selected"}
+
+
+
+
+
+
+
+ {/* Right Panel - Info */}
+
+
+
+
+
Node Information
+
+ {selectedNode ? (
+ <>
+
+ Node Type: {selectedNode.type}
+
+
+ This section contains help information about {selectedNode.type} nodes and how they work within
+ the visual novel engine. Each node type has specific properties and behaviors that affect how
+ the story flows.
+
+
+
+
+
+ Current Path: {pathString}
+
+
+ ) : (
+
Select a node to view information about it.
+ )}
+
+
+
+
+
+ {/* Bottom Panel - Object Properties (Full Width) */}
+
+
+
+
+
{selectedNode?.type || "No Selection"}
+
+ {selectedNode ? pathString : "Select a node to view its properties"}
+
+
+ {selectedNode && Object.keys(selectedNode.properties).length > 0 && (
+ <>
+
+
+ {Object.entries(selectedNode.properties).map(([key, property]) => (
+
+ {property.label}:
+ {String(property.value)}
+
+ ))}
+
+
+ )}
+
+
+
+
+
setIsOpen(false)} />}
+
+ {/* Menu Panel */}
+
+
+
Menu
+ setIsOpen(false)}>
+
+
+
+
+ {menuItems.map((item) => (
+
+
+
+ )
+}
diff --git a/components/resizable-panel.tsx b/components/resizable-panel.tsx
new file mode 100644
index 0000000..2dc0950
--- /dev/null
+++ b/components/resizable-panel.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import type React from "react"
+
+import { type ReactNode, useRef, useEffect, useState } from "react"
+
+interface ResizablePanelProps {
+ children: ReactNode
+ direction: "horizontal" | "vertical"
+ initialSize: number
+ minSize: number
+ maxSize: number
+ onResize?: (size: number) => void
+ className?: string
+ handlePosition?: "start" | "end"
+}
+
+export function ResizablePanel({
+ children,
+ direction,
+ initialSize,
+ minSize,
+ maxSize,
+ onResize,
+ className = "",
+ handlePosition = "end",
+}: ResizablePanelProps) {
+ const [size, setSize] = useState(initialSize)
+ const [isResizing, setIsResizing] = useState(false)
+ const panelRef = useRef
(null)
+
+ useEffect(() => {
+ const handleMouseMove = (e: MouseEvent) => {
+ if (!isResizing || !panelRef.current) return
+
+ e.preventDefault()
+
+ const rect = panelRef.current.getBoundingClientRect()
+ let newSize: number
+
+ if (direction === "horizontal") {
+ if (handlePosition === "start") {
+ newSize = rect.right - e.clientX
+ } else {
+ newSize = e.clientX - rect.left
+ }
+ } else {
+ if (handlePosition === "start") {
+ newSize = rect.bottom - e.clientY
+ } else {
+ newSize = rect.bottom - e.clientY
+ }
+ }
+
+ newSize = Math.max(minSize, Math.min(maxSize, newSize))
+ setSize(newSize)
+ onResize?.(newSize)
+ }
+
+ const handleMouseUp = () => {
+ setIsResizing(false)
+ document.body.style.userSelect = ""
+ document.body.style.cursor = ""
+ }
+
+ if (isResizing) {
+ document.body.style.userSelect = "none"
+ document.body.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize"
+ document.addEventListener("mousemove", handleMouseMove)
+ document.addEventListener("mouseup", handleMouseUp)
+ }
+
+ return () => {
+ document.removeEventListener("mousemove", handleMouseMove)
+ document.removeEventListener("mouseup", handleMouseUp)
+ }
+ }, [isResizing, direction, minSize, maxSize, onResize, handlePosition])
+
+ // Update size when initialSize changes (for panel visibility changes)
+ useEffect(() => {
+ setSize(initialSize)
+ }, [initialSize])
+
+ const style = direction === "horizontal" ? { width: `${size}px` } : { height: `${size}px` }
+
+ const getHandleClasses = () => {
+ const baseClasses = "absolute bg-border hover:bg-primary/50 transition-colors z-10"
+ const cursorClass = direction === "horizontal" ? "cursor-col-resize" : "cursor-row-resize"
+
+ if (direction === "horizontal") {
+ return handlePosition === "start"
+ ? `${baseClasses} ${cursorClass} top-0 left-0 w-1 h-full`
+ : `${baseClasses} ${cursorClass} top-0 right-0 w-1 h-full`
+ } else {
+ return handlePosition === "start"
+ ? `${baseClasses} ${cursorClass} top-0 left-0 w-full h-1`
+ : `${baseClasses} ${cursorClass} bottom-0 left-0 w-full h-1`
+ }
+ }
+
+ const handleMouseDown = (e: React.MouseEvent) => {
+ e.preventDefault()
+ setIsResizing(true)
+ }
+
+ return (
+
+ )
+}
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
new file mode 100644
index 0000000..55c2f6e
--- /dev/null
+++ b/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+ ThemeProvider as NextThemesProvider,
+ type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+ return {children}
+}
diff --git a/components/tree-node.tsx b/components/tree-node.tsx
new file mode 100644
index 0000000..6d6ef69
--- /dev/null
+++ b/components/tree-node.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import { ChevronDown, ChevronRight } from "lucide-react"
+import type { Node } from "@/types/node"
+import { Button } from "@/components/ui/button"
+
+interface TreeNodeProps {
+ node: Node
+ selectedNodeId: string | null
+ onNodeSelect: (node: Node, path: string[]) => void
+ path: string[]
+ expandedNodes: Set
+ onToggleExpanded: (nodeId: string) => void
+}
+
+export function TreeNode({ node, selectedNodeId, onNodeSelect, path, expandedNodes, onToggleExpanded }: TreeNodeProps) {
+ const hasChildren = node.children && node.children.length > 0
+ const isExpanded = expandedNodes.has(node.id)
+ const isSelected = selectedNodeId === node.id
+ const currentPath = [...path, node.type]
+
+ return (
+
+
onNodeSelect(node, currentPath)}
+ >
+ {hasChildren ? (
+
{
+ e.stopPropagation()
+ onToggleExpanded(node.id)
+ }}
+ >
+ {isExpanded ?
+ ) : (
+
+ )}
+
{node.type}
+
+ {hasChildren && isExpanded && (
+
+ {node.children!.map((child) => (
+
+ )}
+
) {
+ return ) {
+ return (
+ ) {
+ return (
+
+ svg]:rotate-180',
+ className,
+ )}
+ {...props}
+ >
+ {children}
+
+
+ )
+}
+
+function AccordionContent({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ {children}
+
+ )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..9704452
--- /dev/null
+++ b/components/ui/alert-dialog.tsx
@@ -0,0 +1,157 @@
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+function AlertDialog({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+
+ )
+}
+
+function AlertDialogHeader({
+ className,
+ ...props
+}: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function AlertDialogFooter({
+ className,
+ ...props
+}: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function AlertDialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+
+ )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function AlertDescription({
+ className,
+ ...props
+}: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx
new file mode 100644
index 0000000..40bb120
--- /dev/null
+++ b/components/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
+
+function AspectRatio({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : 'span'
+
+ return (
+ svg]:size-3.5', className)}
+ {...props}
+ >
+ {children ??
+ )
+}
+
+function BreadcrumbEllipsis({
+ className,
+ ...props
+}: React.ComponentProps<'span'>) {
+ return (
+
+ More
+
+ )
+}
+
+export {
+ Breadcrumb,
+ BreadcrumbList,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+ BreadcrumbEllipsis,
+}
diff --git a/components/ui/button-group.tsx b/components/ui/button-group.tsx
new file mode 100644
index 0000000..09d4430
--- /dev/null
+++ b/components/ui/button-group.tsx
@@ -0,0 +1,83 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+
+const buttonGroupVariants = cva(
+ "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+ {
+ variants: {
+ orientation: {
+ horizontal:
+ '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+ vertical:
+ 'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+ },
+ },
+ defaultVariants: {
+ orientation: 'horizontal',
+ },
+ },
+)
+
+function ButtonGroup({
+ className,
+ orientation,
+ ...props
+}: React.ComponentProps<'div'> & VariantProps) {
+ return (
+
+ )
+}
+
+function ButtonGroupText({
+ className,
+ asChild = false,
+ ...props
+}: React.ComponentProps<'div'> & {
+ asChild?: boolean
+}) {
+ const Comp = asChild ? Slot : 'div'
+
+ return (
+ ) {
+ return (
+ & {
+ asChild?: boolean
+ }) {
+ const Comp = asChild ? Slot : 'button'
+
+ return (
+ & {
+ buttonVariant?: React.ComponentProps['variant']
+}) {
+ const defaultClassNames = getDefaultClassNames()
+
+ return (
+ svg]:rotate-180`,
+ String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+ className,
+ )}
+ captionLayout={captionLayout}
+ formatters={{
+ formatMonthDropdown: (date) =>
+ date.toLocaleString('default', { month: 'short' }),
+ ...formatters,
+ }}
+ classNames={{
+ root: cn('w-fit', defaultClassNames.root),
+ months: cn(
+ 'flex gap-4 flex-col md:flex-row relative',
+ defaultClassNames.months,
+ ),
+ month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+ nav: cn(
+ 'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+ defaultClassNames.nav,
+ ),
+ button_previous: cn(
+ buttonVariants({ variant: buttonVariant }),
+ 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+ defaultClassNames.button_previous,
+ ),
+ button_next: cn(
+ buttonVariants({ variant: buttonVariant }),
+ 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+ defaultClassNames.button_next,
+ ),
+ month_caption: cn(
+ 'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+ defaultClassNames.month_caption,
+ ),
+ dropdowns: cn(
+ 'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+ defaultClassNames.dropdowns,
+ ),
+ dropdown_root: cn(
+ 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
+ defaultClassNames.dropdown_root,
+ ),
+ dropdown: cn(
+ 'absolute bg-popover inset-0 opacity-0',
+ defaultClassNames.dropdown,
+ ),
+ caption_label: cn(
+ 'select-none font-medium',
+ captionLayout === 'label'
+ ? 'text-sm'
+ : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+ defaultClassNames.caption_label,
+ ),
+ table: 'w-full border-collapse',
+ weekdays: cn('flex', defaultClassNames.weekdays),
+ weekday: cn(
+ 'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
+ defaultClassNames.weekday,
+ ),
+ week: cn('flex w-full mt-2', defaultClassNames.week),
+ week_number_header: cn(
+ 'select-none w-(--cell-size)',
+ defaultClassNames.week_number_header,
+ ),
+ week_number: cn(
+ 'text-[0.8rem] select-none text-muted-foreground',
+ defaultClassNames.week_number,
+ ),
+ day: cn(
+ 'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
+ defaultClassNames.day,
+ ),
+ range_start: cn(
+ 'rounded-l-md bg-accent',
+ defaultClassNames.range_start,
+ ),
+ range_middle: cn('rounded-none', defaultClassNames.range_middle),
+ range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+ today: cn(
+ 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
+ defaultClassNames.today,
+ ),
+ outside: cn(
+ 'text-muted-foreground aria-selected:text-muted-foreground',
+ defaultClassNames.outside,
+ ),
+ disabled: cn(
+ 'text-muted-foreground opacity-50',
+ defaultClassNames.disabled,
+ ),
+ hidden: cn('invisible', defaultClassNames.hidden),
+ ...classNames,
+ }}
+ components={{
+ Root: ({ className, rootRef, ...props }) => {
+ return (
+
+ )
+ },
+ Chevron: ({ className, orientation, ...props }) => {
+ if (orientation === 'left') {
+ return (
+
+
+ {children}
+
+
+ )
+ },
+ ...components,
+ }}
+ {...props}
+ />
+ )
+}
+
+function CalendarDayButton({
+ className,
+ day,
+ modifiers,
+ ...props
+}: React.ComponentProps) {
+ const defaultClassNames = getDefaultClassNames()
+
+ const ref = React.useRef(null)
+ React.useEffect(() => {
+ if (modifiers.focused) ref.current?.focus()
+ }, [modifiers.focused])
+
+ return (
+ span]:text-xs [&>span]:opacity-70',
+ defaultClassNames.day,
+ className,
+ )}
+ {...props}
+ />
+ )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
new file mode 100644
index 0000000..db7dd3c
--- /dev/null
+++ b/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
new file mode 100644
index 0000000..d4a768e
--- /dev/null
+++ b/components/ui/carousel.tsx
@@ -0,0 +1,241 @@
+'use client'
+
+import * as React from 'react'
+import useEmblaCarousel, {
+ type UseEmblaCarouselType,
+} from 'embla-carousel-react'
+import { ArrowLeft, ArrowRight } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+ opts?: CarouselOptions
+ plugins?: CarouselPlugin
+ orientation?: 'horizontal' | 'vertical'
+ setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+ carouselRef: ReturnType[0]
+ api: ReturnType[1]
+ scrollPrev: () => void
+ scrollNext: () => void
+ canScrollPrev: boolean
+ canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext(null)
+
+function useCarousel() {
+ const context = React.useContext(CarouselContext)
+
+ if (!context) {
+ throw new Error('useCarousel must be used within a ) => {
+ if (event.key === 'ArrowLeft') {
+ event.preventDefault()
+ scrollPrev()
+ } else if (event.key === 'ArrowRight') {
+ event.preventDefault()
+ scrollNext()
+ }
+ },
+ [scrollPrev, scrollNext],
+ )
+
+ React.useEffect(() => {
+ if (!api || !setApi) return
+ setApi(api)
+ }, [api, setApi])
+
+ React.useEffect(() => {
+ if (!api) return
+ onSelect(api)
+ api.on('reInit', onSelect)
+ api.on('select', onSelect)
+
+ return () => {
+ api?.off('select', onSelect)
+ }
+ }, [api, onSelect])
+
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
+ const { carouselRef, orientation } = useCarousel()
+
+ return (
+
+ )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+ const { orientation } = useCarousel()
+
+ return (
+
+ )
+}
+
+function CarouselPrevious({
+ className,
+ variant = 'outline',
+ size = 'icon',
+ ...props
+}: React.ComponentProps) {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+ return (
+
+ Previous slide
+
+ )
+}
+
+function CarouselNext({
+ className,
+ variant = 'outline',
+ size = 'icon',
+ ...props
+}: React.ComponentProps) {
+ const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+ return (
+
+ Next slide
+
+ )
+}
+
+export {
+ type CarouselApi,
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselPrevious,
+ CarouselNext,
+}
diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx
new file mode 100644
index 0000000..56225f8
--- /dev/null
+++ b/components/ui/chart.tsx
@@ -0,0 +1,351 @@
+'use client'
+
+import * as React from 'react'
+import * as RechartsPrimitive from 'recharts'
+
+import { cn } from '@/lib/utils'
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const
+
+export type ChartConfig = {
+ [k in string]: {
+ label?: React.ReactNode
+ icon?: React.ComponentType
+ } & (
+ | { color?: string; theme?: never }
+ | { color?: never; theme: Record }
+ )
+}
+
+type ChartContextProps = {
+ config: ChartConfig
+}
+
+const ChartContext = React.createContext(null)
+
+function useChart() {
+ const context = React.useContext(ChartContext)
+
+ if (!context) {
+ throw new Error('useChart must be used within a
+
+
+ {children}
+
+
+
+ )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+ const colorConfig = Object.entries(config).filter(
+ ([, config]) => config.theme || config.color,
+ )
+
+ if (!colorConfig.length) {
+ return null
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/placeholder-logo.png b/public/placeholder-logo.png
new file mode 100644
index 0000000..8a792ac
Binary files /dev/null and b/public/placeholder-logo.png differ
diff --git a/public/placeholder-logo.svg b/public/placeholder-logo.svg
new file mode 100644
index 0000000..b1695aa
--- /dev/null
+++ b/public/placeholder-logo.svg
@@ -0,0 +1 @@
+
+}