zyflow 0.6.4

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,254 @@
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot='dropdown-menu' {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot='dropdown-menu-portal' {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot='dropdown-menu-trigger'
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot='dropdown-menu-content'
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot='dropdown-menu-group' {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot='dropdown-menu-item'
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot='dropdown-menu-checkbox-item'
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className='pointer-events-none absolute start-2 flex size-3.5 items-center justify-center'>
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className='size-4' />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot='dropdown-menu-radio-group'
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot='dropdown-menu-radio-item'
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className='pointer-events-none absolute start-2 flex size-3.5 items-center justify-center'>
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className='size-2 fill-current' />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot='dropdown-menu-label'
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:ps-8',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot='dropdown-menu-separator'
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot='dropdown-menu-shortcut'
+      className={cn(
+        'text-muted-foreground ms-auto text-xs tracking-widest',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot='dropdown-menu-sub' {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot='dropdown-menu-sub-trigger'
+      data-inset={inset}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:ps-8',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className='ms-auto size-4' />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot='dropdown-menu-sub-content'
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

package/src/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot='input'
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/src/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/src/components/ui/markdown.tsx

@@ -0,0 +1,100 @@
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { cn } from '@/lib/utils'
+
+interface MarkdownProps {
+  content: string
+  className?: string
+}
+
+export function Markdown({ content, className }: MarkdownProps) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      className={cn('prose prose-sm dark:prose-invert max-w-none', className)}
+      components={{
+        h1: ({ children }) => (
+          <h1 className="text-2xl font-bold mt-6 mb-4 pb-2 border-b">{children}</h1>
+        ),
+        h2: ({ children }) => (
+          <h2 className="text-xl font-semibold mt-5 mb-3">{children}</h2>
+        ),
+        h3: ({ children }) => (
+          <h3 className="text-lg font-semibold mt-4 mb-2">{children}</h3>
+        ),
+        h4: ({ children }) => (
+          <h4 className="text-base font-medium mt-3 mb-2 text-muted-foreground">{children}</h4>
+        ),
+        p: ({ children }) => (
+          <p className="my-2 leading-relaxed">{children}</p>
+        ),
+        ul: ({ children }) => (
+          <ul className="my-2 ml-4 list-disc space-y-1">{children}</ul>
+        ),
+        ol: ({ children }) => (
+          <ol className="my-2 ml-4 list-decimal space-y-1">{children}</ol>
+        ),
+        li: ({ children }) => (
+          <li className="leading-relaxed">{children}</li>
+        ),
+        code: ({ className, children, ...props }) => {
+          const isInline = !className
+          if (isInline) {
+            return (
+              <code className="px-1.5 py-0.5 rounded bg-muted text-sm font-mono" {...props}>
+                {children}
+              </code>
+            )
+          }
+          return (
+            <code className={cn('block p-4 rounded-md bg-muted text-sm font-mono overflow-x-auto', className)} {...props}>
+              {children}
+            </code>
+          )
+        },
+        pre: ({ children }) => (
+          <pre className="my-3 rounded-md bg-muted overflow-x-auto">{children}</pre>
+        ),
+        blockquote: ({ children }) => (
+          <blockquote className="my-3 pl-4 border-l-4 border-primary/30 italic text-muted-foreground">
+            {children}
+          </blockquote>
+        ),
+        table: ({ children }) => (
+          <div className="my-4 overflow-x-auto">
+            <table className="w-full border-collapse border border-border">{children}</table>
+          </div>
+        ),
+        th: ({ children }) => (
+          <th className="px-3 py-2 border border-border bg-muted font-semibold text-left">{children}</th>
+        ),
+        td: ({ children }) => (
+          <td className="px-3 py-2 border border-border">{children}</td>
+        ),
+        a: ({ href, children }) => (
+          <a href={href} className="text-primary hover:underline" target="_blank" rel="noopener noreferrer">
+            {children}
+          </a>
+        ),
+        hr: () => <hr className="my-6 border-border" />,
+        // Checkbox for task lists
+        input: ({ type, checked, ...props }) => {
+          if (type === 'checkbox') {
+            return (
+              <input
+                type="checkbox"
+                checked={checked}
+                readOnly
+                className="mr-2 h-4 w-4 rounded border-border"
+                {...props}
+              />
+            )
+          }
+          return <input type={type} {...props} />
+        },
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  )
+}

package/src/components/ui/progress.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: number
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  ({ className, value = 0, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
+        className
+      )}
+      {...props}
+    >
+      <div
+        className="h-full bg-primary transition-all duration-300"
+        style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
+      />
+    </div>
+  )
+)
+Progress.displayName = 'Progress'
+
+export { Progress }

package/src/components/ui/resizable-sidebar.tsx

@@ -0,0 +1,156 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+const DEFAULT_WIDTH = 256 // 16rem = 256px
+const MIN_WIDTH = 200
+const MAX_WIDTH = 480
+const COLLAPSED_WIDTH = 0
+
+interface ResizableSidebarProps {
+  children: React.ReactNode
+  className?: string
+  defaultWidth?: number
+  minWidth?: number
+  maxWidth?: number
+  collapsed?: boolean
+  onCollapsedChange?: (collapsed: boolean) => void
+}
+
+export function ResizableSidebar({
+  children,
+  className,
+  defaultWidth = DEFAULT_WIDTH,
+  minWidth = MIN_WIDTH,
+  maxWidth = MAX_WIDTH,
+  collapsed: controlledCollapsed,
+  onCollapsedChange,
+}: ResizableSidebarProps) {
+  const [width, setWidth] = React.useState(() => {
+    const saved = localStorage.getItem('sidebar-width')
+    return saved ? parseInt(saved, 10) : defaultWidth
+  })
+  const [internalCollapsed, setInternalCollapsed] = React.useState(() => {
+    const saved = localStorage.getItem('sidebar-collapsed')
+    return saved === 'true'
+  })
+
+  // Support both controlled and uncontrolled modes
+  const isCollapsed = controlledCollapsed ?? internalCollapsed
+  const setIsCollapsed = (value: boolean | ((prev: boolean) => boolean)) => {
+    const newValue = typeof value === 'function' ? value(isCollapsed) : value
+    setInternalCollapsed(newValue)
+    onCollapsedChange?.(newValue)
+  }
+  const [isResizing, setIsResizing] = React.useState(false)
+  const sidebarRef = React.useRef<HTMLDivElement>(null)
+
+  // Save width to localStorage
+  React.useEffect(() => {
+    localStorage.setItem('sidebar-width', width.toString())
+  }, [width])
+
+  // Save collapsed state to localStorage
+  React.useEffect(() => {
+    localStorage.setItem('sidebar-collapsed', isCollapsed.toString())
+  }, [isCollapsed])
+
+  const handleMouseDown = React.useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    setIsResizing(true)
+  }, [])
+
+  const handleDoubleClick = React.useCallback(() => {
+    setWidth(defaultWidth)
+  }, [defaultWidth])
+
+  const toggleCollapse = React.useCallback(() => {
+    setIsCollapsed((prev) => !prev)
+  }, [])
+
+  React.useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isResizing) return
+
+      const newWidth = e.clientX
+      if (newWidth >= minWidth && newWidth <= maxWidth) {
+        setWidth(newWidth)
+      }
+    }
+
+    const handleMouseUp = () => {
+      setIsResizing(false)
+    }
+
+    if (isResizing) {
+      document.addEventListener('mousemove', handleMouseMove)
+      document.addEventListener('mouseup', handleMouseUp)
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+  }, [isResizing, minWidth, maxWidth])
+
+  // Keyboard shortcut (Cmd/Ctrl + B) - handled by parent (App.tsx) when using controlled mode
+  React.useEffect(() => {
+    // Skip if controlled externally
+    if (controlledCollapsed !== undefined) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
+        e.preventDefault()
+        toggleCollapse()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [toggleCollapse])
+
+  return (
+    <div className="relative flex h-full">
+      {/* Sidebar */}
+      <div
+        ref={sidebarRef}
+        className={cn(
+          'relative flex h-full shrink-0 transition-[width] duration-200 ease-in-out',
+          className
+        )}
+        style={{ width: isCollapsed ? COLLAPSED_WIDTH : width }}
+      >
+        {/* Sidebar Content */}
+        <div
+          className={cn(
+            'flex h-full w-full flex-col overflow-hidden bg-sidebar text-sidebar-foreground',
+            'transition-opacity duration-200',
+            isCollapsed && 'opacity-0 pointer-events-none'
+          )}
+        >
+          {children}
+        </div>
+
+        {/* Resize Handle - hidden when collapsed */}
+        {!isCollapsed && (
+          <div
+            className={cn(
+              'absolute right-0 top-0 h-full w-1 cursor-col-resize',
+              'hover:bg-primary/20 active:bg-primary/30',
+              'transition-colors duration-150',
+              'border-r border-border',
+              isResizing && 'bg-primary/30'
+            )}
+            onMouseDown={handleMouseDown}
+            onDoubleClick={handleDoubleClick}
+            title="드래그하여 크기 조절, 더블클릭하여 기본값 복원"
+          />
+        )}
+      </div>
+
+    </div>
+  )
+}

package/src/components/ui/resizable.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { GripVerticalIcon } from "lucide-react"
+import { Group, Panel, Separator } from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof Group>) {
+  return (
+    <Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof Panel>) {
+  return <Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator> & {
+  withHandle?: boolean
+}) {
+  return (
+    <Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </Separator>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }