create-visualbuild-app 0.1.0 → 1.0.1

package/visual-app-builder/src/components/PropertiesPanel.tsx

@@ -1,692 +1,792 @@
-import { useMemo, useRef, useState } from 'react'
-import { primitiveRegistry } from '../data/primitiveRegistry'
-import { useAppStore } from '../stores/useAppStore'
-import type { PrimitiveType, PropSchema, VisualNode } from '../types'
-
-export default function PropertiesPanel({
-  embedded = false,
-}: {
-  embedded?: boolean
-}) {
-  const {
-    pages,
-    appShell,
-    activePageId,
-    selectedComponentId,
-    updateNodeProps,
-    updatePageRoot,
-  } = useAppStore()
-
-  const activePage = pages.find((page) => page.id === activePageId)
-  const isPageRootSelected =
-    activePage?.root.id !== undefined && activePage.root.id === selectedComponentId
-  const selectedNode = isPageRootSelected
-    ? activePage.root
-    : findNode(
-        [
-          ...(appShell.header ? [appShell.header] : []),
-          ...(activePage?.components ?? []),
-          ...(appShell.footer ? [appShell.footer] : []),
-        ],
-        selectedComponentId
-      )
-
-  if (!selectedNode) {
-    return (
-      <aside
-        className={`${embedded ? 'h-full w-full' : 'w-60 border-l'} flex shrink-0 flex-col border-white/[0.06] bg-panel`}
-      >
-        <div className="px-3 py-2.5 border-b border-white/[0.06]">
-          <p className="text-[10px] font-semibold uppercase tracking-widest text-gray-500">
-            Properties
-          </p>
-        </div>
-        <div className="flex-1 flex flex-col items-center justify-center text-center px-4">
-          <p className="text-xs text-gray-600">
-            Select any element on the canvas to edit text, attributes, and Tailwind classes
-          </p>
-        </div>
-      </aside>
-    )
-  }
-
-  const definition = primitiveRegistry[selectedNode.type]
-
-  const handleChange = (key: string, value: unknown) => {
-    if (isPageRootSelected && activePage) {
-      updatePageRoot(activePage.id, { props: { [key]: value } })
-      return
-    }
-
-    updateNodeProps(selectedNode.id, { [key]: value })
-  }
-
-  const handleRootTagChange = (type: PrimitiveType) => {
-    if (!activePage) {
-      return
-    }
-
-    updatePageRoot(activePage.id, { type })
-  }
-
-  return (
-    <aside
-      className={`${embedded ? 'h-full w-full' : 'w-60 border-l'} flex shrink-0 flex-col overflow-hidden border-white/[0.06] bg-panel`}
-    >
-      <div className="px-3 py-2.5 border-b border-white/[0.06] flex items-center justify-between">
-        <p className="text-[10px] font-semibold uppercase tracking-widest text-gray-500">
-          Properties
-        </p>
-        <span className="text-[10px] font-medium px-1.5 py-0.5 bg-accent/20 text-accent rounded">
-          {isPageRootSelected ? 'Page root' : selectedNode.label ?? definition.label}
-        </span>
-      </div>
-
-      <div className="flex-1 overflow-y-auto p-3 space-y-3">
-        {isPageRootSelected ? (
-          <RootTagField value={selectedNode.type} onChange={handleRootTagChange} />
-        ) : (
-          <ReadOnlyField label="Tag" value={selectedNode.type} />
-        )}
-        {Object.entries(definition.propSchema).map(([key, schema]) => (
-          <PropField
-            key={`${selectedNode.id}:${key}`}
-            schema={schema}
-            value={selectedNode.props[key] ?? schema.default}
-            onChange={(value) => handleChange(key, value)}
-          />
-        ))}
-      </div>
-    </aside>
-  )
-}
-
-function RootTagField({
-  value,
-  onChange,
-}: {
-  value: PrimitiveType
-  onChange: (type: PrimitiveType) => void
-}) {
-  return (
-    <FieldShell label="Page root tag">
-      <select
-        value={value}
-        onChange={(event) => onChange(event.target.value as PrimitiveType)}
-        className="w-full px-2.5 py-1.5 text-xs bg-white/[0.05] border border-white/[0.08] rounded text-gray-200 focus:outline-none focus:border-accent/50 transition-colors"
-      >
-        {pageRootTags.map((tag) => (
-          <option key={tag} value={tag}>
-            {tag}
-          </option>
-        ))}
-      </select>
-    </FieldShell>
-  )
-}
-
-const pageRootTags: PrimitiveType[] = [
-  'div',
-  'main',
-  'section',
-  'article',
-  'header',
-  'footer',
-  'nav',
-  'aside',
-  'form',
-]
-
-function findNode(nodes: VisualNode[], nodeId: string | null): VisualNode | null {
-  if (!nodeId) {
-    return null
-  }
-
-  for (const node of nodes) {
-    if (node.id === nodeId) {
-      return node
-    }
-
-    const child = findNode(node.children, nodeId)
-
-    if (child) {
-      return child
-    }
-  }
-
-  return null
-}
-
-function ReadOnlyField({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="space-y-1">
-      <label className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">
-        {label}
-      </label>
-      <div className="w-full px-2.5 py-1.5 text-xs bg-white/[0.03] border border-white/[0.06] rounded text-gray-500">
-        {value}
-      </div>
-    </div>
-  )
-}
-
-function PropField({
-  schema,
-  value,
-  onChange,
-}: {
-  schema: PropSchema
-  value: unknown
-  onChange: (value: unknown) => void
-}) {
-  if (schema.type === 'boolean') {
-    const checked = Boolean(value)
-
-    return (
-      <div className="flex items-center justify-between">
-        <label className="text-xs text-gray-400">{schema.label}</label>
-        <button
-          type="button"
-          onClick={() => onChange(!checked)}
-          className={`w-8 h-4 rounded-full transition-colors ${
-            checked ? 'bg-accent' : 'bg-white/10'
-          }`}
-        >
-          <span
-            className={`block w-3 h-3 rounded-full bg-white shadow transition-transform mx-0.5 ${
-              checked ? 'translate-x-4' : 'translate-x-0'
-            }`}
-          />
-        </button>
-      </div>
-    )
-  }
-
-  if (schema.type === 'array') {
-    return <ArrayField schema={schema} value={value} onChange={onChange} />
-  }
-
-  if (schema.type === 'select') {
-    return (
-      <FieldShell label={schema.label}>
-        <select
-          value={String(value ?? schema.default)}
-          onChange={(event) => onChange(event.target.value)}
-          className="w-full px-2.5 py-1.5 text-xs bg-white/[0.05] border border-white/[0.08] rounded text-gray-200 focus:outline-none focus:border-accent/50 transition-colors"
-        >
-          {(schema.options ?? []).map((option) => (
-            <option key={option} value={option}>
-              {option}
-            </option>
-          ))}
-        </select>
-      </FieldShell>
-    )
-  }
-
-  if (schema.label === 'Tailwind classes') {
-    return (
-      <TailwindClassField
-        value={String(value ?? schema.default)}
-        onChange={onChange}
-      />
-    )
-  }
-
-  if (schema.type === 'text') {
-    return (
-      <FieldShell label={schema.label}>
-        <textarea
-          value={String(value ?? schema.default)}
-          onChange={(event) => onChange(event.target.value)}
-          rows={3}
-          className="w-full px-2.5 py-1.5 text-xs bg-white/[0.05] border border-white/[0.08] rounded text-gray-200 focus:outline-none focus:border-accent/50 transition-colors resize-none"
-        />
-      </FieldShell>
-    )
-  }
-
-  return (
-    <FieldShell label={schema.label}>
-      <input
-        type={schema.type === 'number' ? 'number' : 'text'}
-        value={String(value ?? schema.default)}
-        onChange={(event) =>
-          onChange(
-            schema.type === 'number'
-              ? Number(event.target.value)
-              : event.target.value
-          )
-        }
-        className="w-full px-2.5 py-1.5 text-xs bg-white/[0.05] border border-white/[0.08] rounded text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent/50 transition-colors"
-      />
-    </FieldShell>
-  )
-}
-
-function TailwindClassField({
-  value,
-  onChange,
-}: {
-  value: string
-  onChange: (value: unknown) => void
-}) {
-  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
-  const [caretIndex, setCaretIndex] = useState(value.length)
-  const [isFocused, setIsFocused] = useState(false)
-  const [activeIndex, setActiveIndex] = useState(0)
-  const token = getCurrentClassToken(value, caretIndex)
-  const suggestions = useMemo(() => {
-    if (!isFocused || token.value.length === 0) {
-      return []
-    }
-
-    return tailwindClassSuggestions
-      .filter((className) => className.startsWith(token.value))
-      .slice(0, 8)
-  }, [isFocused, token.value])
-
-  const updateCaret = () => {
-    setCaretIndex(textareaRef.current?.selectionStart ?? value.length)
-  }
-
-  const applySuggestion = (className: string) => {
-    const before = value.slice(0, token.start)
-    const after = value.slice(token.end)
-    const needsLeadingSpace = before.length > 0 && !/\s$/.test(before)
-    const needsTrailingSpace = after.length === 0 || !/^\s/.test(after)
-    const nextValue = `${before}${needsLeadingSpace ? ' ' : ''}${className}${
-      needsTrailingSpace ? ' ' : ''
-    }${after}`
-    const nextCaret =
-      before.length + (needsLeadingSpace ? 1 : 0) + className.length + 1
-
-    onChange(nextValue)
-    setCaretIndex(nextCaret)
-    setActiveIndex(0)
-    window.setTimeout(() => {
-      textareaRef.current?.focus()
-      textareaRef.current?.setSelectionRange(nextCaret, nextCaret)
-    }, 0)
-  }
-
-  return (
-    <FieldShell label="Tailwind classes">
-      <div className="relative">
-        <textarea
-          ref={textareaRef}
-          value={value}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => {
-            window.setTimeout(() => setIsFocused(false), 120)
-          }}
-          onChange={(event) => {
-            onChange(event.target.value)
-            setCaretIndex(event.target.selectionStart)
-            setActiveIndex(0)
-          }}
-          onSelect={updateCaret}
-          onKeyUp={updateCaret}
-          onKeyDown={(event) => {
-            if (suggestions.length === 0) {
-              return
-            }
-
-            if (event.key === 'ArrowDown') {
-              event.preventDefault()
-              setActiveIndex((index) => (index + 1) % suggestions.length)
-              return
-            }
-
-            if (event.key === 'ArrowUp') {
-              event.preventDefault()
-              setActiveIndex(
-                (index) => (index - 1 + suggestions.length) % suggestions.length
-              )
-              return
-            }
-
-            if (event.key === 'Enter' || event.key === 'Tab') {
-              event.preventDefault()
-              applySuggestion(suggestions[activeIndex])
-              return
-            }
-
-            if (event.key === 'Escape') {
-              setIsFocused(false)
-            }
-          }}
-          rows={4}
-          className="w-full px-2.5 py-1.5 text-xs bg-white/[0.05] border border-white/[0.08] rounded text-gray-200 focus:outline-none focus:border-accent/50 transition-colors resize-none"
-        />
-        {suggestions.length > 0 && (
-          <div className="absolute left-0 right-0 top-full z-30 mt-1 max-h-44 overflow-y-auto rounded border border-white/[0.12] bg-[#11151c] py-1 shadow-xl">
-            {suggestions.map((className, index) => (
-              <button
-                key={className}
-                type="button"
-                onMouseDown={(event) => {
-                  event.preventDefault()
-                  applySuggestion(className)
-                }}
-                className={`block w-full cursor-pointer px-2.5 py-1.5 text-left font-mono text-[11px] transition-colors ${
-                  index === activeIndex
-                    ? 'bg-accent text-white'
-                    : 'text-gray-300 hover:bg-white/[0.08] hover:text-white'
-                }`}
-              >
-                {className}
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-      <p className="text-[10px] text-gray-600">
-        Type a class prefix, then press Tab or Enter to accept.
-      </p>
-    </FieldShell>
-  )
-}
-
-function getCurrentClassToken(value: string, caretIndex: number) {
-  const safeCaret = Math.max(0, Math.min(caretIndex, value.length))
-  const before = value.slice(0, safeCaret)
-  const tokenStart = Math.max(
-    before.lastIndexOf(' '),
-    before.lastIndexOf('\n'),
-    before.lastIndexOf('\t')
-  ) + 1
-  const after = value.slice(safeCaret)
-  const nextBreak = after.search(/\s/)
-  const tokenEnd = nextBreak === -1 ? value.length : safeCaret + nextBreak
-
-  return {
-    start: tokenStart,
-    end: tokenEnd,
-    value: value.slice(tokenStart, tokenEnd),
-  }
-}
-
-function ArrayField({
-  schema,
-  value,
-  onChange,
-}: {
-  schema: PropSchema
-  value: unknown
-  onChange: (value: unknown) => void
-}) {
-  const [draft, setDraft] = useState(formatArrayValue(value))
-
-  const handleChange = (rawValue: string) => {
-    setDraft(rawValue)
-    onChange(parseArrayValue(rawValue))
-  }
-
-  return (
-    <FieldShell label={schema.label}>
-      <textarea
-        value={draft}
-        onChange={(event) => handleChange(event.target.value)}
-        rows={2}
-        className="w-full px-2.5 py-1.5 text-xs bg-white/[0.05] border border-white/[0.08] rounded text-gray-200 focus:outline-none focus:border-accent/50 transition-colors resize-none"
-      />
-      <p className="text-[10px] text-gray-600">Comma or line separated</p>
-    </FieldShell>
-  )
-}
-
-function formatArrayValue(value: unknown) {
-  return Array.isArray(value) ? value.join(', ') : ''
-}
-
-function parseArrayValue(value: string) {
-  return value
-    .split(/[,\n]/)
-    .map((item) => item.trim())
-    .filter(Boolean)
-}
-
-function FieldShell({
-  label,
-  children,
-}: {
-  label: string
-  children: React.ReactNode
-}) {
-  return (
-    <div className="space-y-1">
-      <label className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">
-        {label}
-      </label>
-      {children}
-    </div>
-  )
-}
-
-const tailwindClassSuggestions = [
-  'block',
-  'inline',
-  'inline-block',
-  'flex',
-  'inline-flex',
-  'grid',
-  'hidden',
-  'contents',
-  'flex-row',
-  'flex-col',
-  'flex-wrap',
-  'items-start',
-  'items-center',
-  'items-end',
-  'items-stretch',
-  'justify-start',
-  'justify-center',
-  'justify-end',
-  'justify-between',
-  'justify-around',
-  'content-center',
-  'self-start',
-  'self-center',
-  'self-end',
-  'gap-1',
-  'gap-2',
-  'gap-3',
-  'gap-4',
-  'gap-6',
-  'gap-8',
-  'grid-cols-1',
-  'grid-cols-2',
-  'grid-cols-3',
-  'grid-cols-4',
-  'grid-cols-6',
-  'col-span-1',
-  'col-span-2',
-  'col-span-full',
-  'w-full',
-  'w-screen',
-  'w-auto',
-  'w-fit',
-  'w-1/2',
-  'w-1/3',
-  'w-2/3',
-  'w-1/4',
-  'w-3/4',
-  'min-w-0',
-  'max-w-sm',
-  'max-w-md',
-  'max-w-lg',
-  'max-w-xl',
-  'max-w-2xl',
-  'max-w-4xl',
-  'max-w-6xl',
-  'max-w-full',
-  'h-full',
-  'h-screen',
-  'h-auto',
-  'min-h-12',
-  'min-h-24',
-  'min-h-48',
-  'min-h-screen',
-  'p-0',
-  'p-1',
-  'p-2',
-  'p-3',
-  'p-4',
-  'p-6',
-  'p-8',
-  'px-2',
-  'px-3',
-  'px-4',
-  'px-6',
-  'px-8',
-  'py-1',
-  'py-2',
-  'py-3',
-  'py-4',
-  'py-6',
-  'py-8',
-  'm-0',
-  'mx-auto',
-  'mt-1',
-  'mt-2',
-  'mt-4',
-  'mb-1',
-  'mb-2',
-  'mb-4',
-  'space-y-1',
-  'space-y-2',
-  'space-y-3',
-  'space-y-4',
-  'text-left',
-  'text-center',
-  'text-right',
-  'text-xs',
-  'text-sm',
-  'text-base',
-  'text-lg',
-  'text-xl',
-  'text-2xl',
-  'text-3xl',
-  'text-4xl',
-  'text-5xl',
-  'font-thin',
-  'font-light',
-  'font-normal',
-  'font-medium',
-  'font-semibold',
-  'font-bold',
-  'font-extrabold',
-  'italic',
-  'not-italic',
-  'underline',
-  'line-through',
-  'leading-none',
-  'leading-tight',
-  'leading-normal',
-  'leading-relaxed',
-  'tracking-tight',
-  'tracking-normal',
-  'tracking-wide',
-  'text-white',
-  'text-black',
-  'text-gray-50',
-  'text-gray-100',
-  'text-gray-200',
-  'text-gray-300',
-  'text-gray-400',
-  'text-gray-500',
-  'text-gray-600',
-  'text-gray-700',
-  'text-gray-800',
-  'text-gray-900',
-  'text-red-500',
-  'text-orange-500',
-  'text-amber-500',
-  'text-yellow-500',
-  'text-green-500',
-  'text-emerald-500',
-  'text-teal-500',
-  'text-cyan-500',
-  'text-sky-500',
-  'text-blue-500',
-  'text-blue-600',
-  'text-indigo-500',
-  'text-violet-500',
-  'text-purple-500',
-  'text-pink-500',
-  'bg-white',
-  'bg-black',
-  'bg-transparent',
-  'bg-gray-50',
-  'bg-gray-100',
-  'bg-gray-200',
-  'bg-gray-300',
-  'bg-gray-800',
-  'bg-gray-900',
-  'bg-red-500',
-  'bg-orange-500',
-  'bg-yellow-500',
-  'bg-green-500',
-  'bg-blue-500',
-  'bg-blue-600',
-  'bg-indigo-600',
-  'bg-purple-600',
-  'border',
-  'border-0',
-  'border-2',
-  'border-t',
-  'border-b',
-  'border-l',
-  'border-r',
-  'border-transparent',
-  'border-white',
-  'border-black',
-  'border-gray-200',
-  'border-gray-300',
-  'border-gray-700',
-  'border-blue-500',
-  'rounded',
-  'rounded-sm',
-  'rounded-md',
-  'rounded-lg',
-  'rounded-xl',
-  'rounded-2xl',
-  'rounded-full',
-  'shadow',
-  'shadow-sm',
-  'shadow-md',
-  'shadow-lg',
-  'shadow-xl',
-  'overflow-hidden',
-  'overflow-auto',
-  'overflow-x-auto',
-  'relative',
-  'absolute',
-  'fixed',
-  'sticky',
-  'top-0',
-  'right-0',
-  'bottom-0',
-  'left-0',
-  'z-10',
-  'z-20',
-  'z-50',
-  'opacity-0',
-  'opacity-50',
-  'opacity-75',
-  'opacity-100',
-  'cursor-pointer',
-  'select-none',
-  'transition',
-  'transition-colors',
-  'duration-150',
-  'duration-200',
-  'hover:bg-gray-100',
-  'hover:bg-gray-900',
-  'hover:text-white',
-  'hover:text-black',
-  'focus:outline-none',
-  'focus:ring-2',
-  'focus:ring-blue-500',
-]
+import { useMemo, useRef, useState } from 'react'
+import { primitiveRegistry } from '../data/primitiveRegistry'
+import { getTailwindColorClassSuggestions } from '../data/tailwindClassCatalog'
+import { useAppStore } from '../stores/useAppStore'
+import type { PrimitiveType, PropSchema, VisualNode } from '../types'
+
+export default function PropertiesPanel({
+  embedded = false,
+}: {
+  embedded?: boolean
+}) {
+  const {
+    pages,
+    appShell,
+    activePageId,
+    selectedComponentId,
+    updateNodeProps,
+    updatePageRoot,
+    customComponents,
+  } = useAppStore()
+
+  const activePage = pages.find((page) => page.id === activePageId)
+  const isPageRootSelected =
+    activePage?.root.id !== undefined && activePage.root.id === selectedComponentId
+  const selectedNode = isPageRootSelected
+    ? activePage.root
+    : findNode(
+        [
+          ...(appShell.header ? [appShell.header] : []),
+          ...(activePage?.components ?? []),
+          ...(appShell.footer ? [appShell.footer] : []),
+        ],
+        selectedComponentId
+      )
+
+  if (!selectedNode) {
+    return (
+      <aside
+        className={`${embedded ? 'h-full w-full' : 'w-60 border-l'} flex shrink-0 flex-col border-white/[0.06] bg-panel`}
+      >
+        <div className="px-3 py-2.5 border-b border-white/[0.06]">
+          <p className="text-[10px] font-semibold uppercase tracking-widest text-gray-500">
+            Properties
+          </p>
+        </div>
+        <div className="flex-1 flex flex-col items-center justify-center text-center px-4">
+          <p className="text-xs text-gray-600">
+            Select any element on the canvas to edit text, attributes, and Tailwind classes
+          </p>
+        </div>
+      </aside>
+    )
+  }
+
+  const definition =
+    primitiveRegistry[selectedNode.type as PrimitiveType] ??
+    customComponents.find((component) => component.name === selectedNode.type)
+
+  if (!definition) {
+    return (
+      <aside className={`${embedded ? 'h-full w-full' : 'w-60 border-l'} flex shrink-0 flex-col border-white/[0.06] bg-panel p-4`}>
+        <p className="text-xs text-amber-400">
+          {selectedNode.type} is no longer registered in visualbuild.config.ts.
+        </p>
+      </aside>
+    )
+  }
+
+  const handleChange = (key: string, value: unknown) => {
+    if (isPageRootSelected && activePage) {
+      updatePageRoot(activePage.id, { props: { [key]: value } })
+      return
+    }
+
+    updateNodeProps(selectedNode.id, { [key]: value })
+  }
+
+  const handleRootTagChange = (type: PrimitiveType) => {
+    if (!activePage) {
+      return
+    }
+
+    updatePageRoot(activePage.id, { type })
+  }
+
+  return (
+    <aside
+      className={`${embedded ? 'h-full w-full' : 'w-60 border-l'} flex shrink-0 flex-col overflow-hidden border-white/[0.06] bg-panel`}
+    >
+      <div className="px-3 py-2.5 border-b border-white/[0.06] flex items-center justify-between">
+        <p className="text-[10px] font-semibold uppercase tracking-widest text-gray-500">
+          Properties
+        </p>
+        <span className="text-[10px] font-medium px-1.5 py-0.5 bg-accent/20 text-accent rounded">
+          {isPageRootSelected ? 'Page root' : selectedNode.label ?? definition.label}
+        </span>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-3 space-y-3">
+        {isPageRootSelected ? (
+          <RootTagField
+            value={selectedNode.type as PrimitiveType}
+            onChange={handleRootTagChange}
+          />
+        ) : (
+          <ReadOnlyField label="Tag" value={selectedNode.type} />
+        )}
+        {Object.entries(definition.propSchema).map(([key, schema]) => (
+          <PropField
+            key={`${selectedNode.id}:${key}`}
+            schema={schema}
+            value={selectedNode.props[key] ?? schema.default}
+            onChange={(value) => handleChange(key, value)}
+          />
+        ))}
+      </div>
+    </aside>
+  )
+}
+
+function RootTagField({
+  value,
+  onChange,
+}: {
+  value: PrimitiveType
+  onChange: (type: PrimitiveType) => void
+}) {
+  return (
+    <FieldShell label="Page root tag">
+      <select
+        value={value}
+        onChange={(event) => onChange(event.target.value as PrimitiveType)}
+        className="w-full px-2.5 py-1.5 text-xs bg-white/[0.05] border border-white/[0.08] rounded text-gray-200 focus:outline-none focus:border-accent/50 transition-colors"
+      >
+        {pageRootTags.map((tag) => (
+          <option key={tag} value={tag}>
+            {tag}
+          </option>
+        ))}
+      </select>
+    </FieldShell>
+  )
+}
+
+const pageRootTags: PrimitiveType[] = [
+  'div',
+  'main',
+  'section',
+  'article',
+  'header',
+  'footer',
+  'nav',
+  'aside',
+  'form',
+]
+
+function findNode(nodes: VisualNode[], nodeId: string | null): VisualNode | null {
+  if (!nodeId) {
+    return null
+  }
+
+  for (const node of nodes) {
+    if (node.id === nodeId) {
+      return node
+    }
+
+    const child = findNode(node.children, nodeId)
+
+    if (child) {
+      return child
+    }
+
+    const componentTree = node.props.componentTree
+    if (
+      typeof componentTree === 'object' &&
+      componentTree !== null &&
+      Array.isArray((componentTree as { children?: unknown }).children)
+    ) {
+      const definitionChild = findNode(
+        (componentTree as { children: VisualNode[] }).children,
+        nodeId
+      )
+      if (definitionChild) return definitionChild
+    }
+  }
+
+  return null
+}
+
+function ReadOnlyField({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="space-y-1">
+      <label className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">
+        {label}
+      </label>
+      <div className="w-full px-2.5 py-1.5 text-xs bg-white/[0.03] border border-white/[0.06] rounded text-gray-500">
+        {value}
+      </div>
+    </div>
+  )
+}
+
+function PropField({
+  schema,
+  value,
+  onChange,
+}: {
+  schema: PropSchema
+  value: unknown
+  onChange: (value: unknown) => void
+}) {
+  if (schema.type === 'boolean') {
+    const checked = Boolean(value)
+
+    return (
+      <div className="flex items-center justify-between">
+        <label className="text-xs text-gray-400">{schema.label}</label>
+        <button
+          type="button"
+          onClick={() => onChange(!checked)}
+          className={`w-8 h-4 rounded-full transition-colors ${
+            checked ? 'bg-accent' : 'bg-white/10'
+          }`}
+        >
+          <span
+            className={`block w-3 h-3 rounded-full bg-white shadow transition-transform mx-0.5 ${
+              checked ? 'translate-x-4' : 'translate-x-0'
+            }`}
+          />
+        </button>
+      </div>
+    )
+  }
+
+  if (schema.type === 'array') {
+    return <ArrayField schema={schema} value={value} onChange={onChange} />
+  }
+
+  if (schema.type === 'attributes') {
+    return <AttributesField schema={schema} value={value} onChange={onChange} />
+  }
+
+  if (schema.type === 'select') {
+    return (
+      <FieldShell label={schema.label}>
+        <select
+          value={String(value ?? schema.default)}
+          onChange={(event) => onChange(event.target.value)}
+          className="w-full px-2.5 py-1.5 text-xs bg-white/[0.05] border border-white/[0.08] rounded text-gray-200 focus:outline-none focus:border-accent/50 transition-colors"
+        >
+          {(schema.options ?? []).map((option) => (
+            <option key={option} value={option}>
+              {option}
+            </option>
+          ))}
+        </select>
+      </FieldShell>
+    )
+  }
+
+  if (schema.label === 'Tailwind classes') {
+    return (
+      <TailwindClassField
+        value={String(value ?? schema.default)}
+        onChange={onChange}
+      />
+    )
+  }
+
+  if (schema.type === 'text') {
+    return (
+      <FieldShell label={schema.label}>
+        <textarea
+          value={String(value ?? schema.default)}
+          onChange={(event) => onChange(event.target.value)}
+          rows={3}
+          className="w-full px-2.5 py-1.5 text-xs bg-white/[0.05] border border-white/[0.08] rounded text-gray-200 focus:outline-none focus:border-accent/50 transition-colors resize-none"
+        />
+      </FieldShell>
+    )
+  }
+
+  return (
+    <FieldShell label={schema.label}>
+      <input
+        type={schema.type === 'number' ? 'number' : 'text'}
+        value={String(value ?? schema.default)}
+        onChange={(event) =>
+          onChange(
+            schema.type === 'number'
+              ? Number(event.target.value)
+              : event.target.value
+          )
+        }
+        className="w-full px-2.5 py-1.5 text-xs bg-white/[0.05] border border-white/[0.08] rounded text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent/50 transition-colors"
+      />
+    </FieldShell>
+  )
+}
+
+function TailwindClassField({
+  value,
+  onChange,
+}: {
+  value: string
+  onChange: (value: unknown) => void
+}) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+  const [caretIndex, setCaretIndex] = useState(value.length)
+  const [isFocused, setIsFocused] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(0)
+  const token = getCurrentClassToken(value, caretIndex)
+  const suggestions = useMemo(() => {
+    if (!isFocused || token.value.length === 0) {
+      return []
+    }
+
+    const variantSeparator = token.value.lastIndexOf(':')
+    const variantPrefix =
+      variantSeparator >= 0 ? token.value.slice(0, variantSeparator + 1) : ''
+    const utilityToken =
+      variantSeparator >= 0
+        ? token.value.slice(variantSeparator + 1)
+        : token.value
+    const generalSuggestions = tailwindClassSuggestions
+      .filter((className) => className.startsWith(utilityToken))
+      .map((className) => `${variantPrefix}${className}`)
+
+    return Array.from(
+      new Set([
+        ...getTailwindColorClassSuggestions(token.value),
+        ...generalSuggestions,
+      ]),
+    ).slice(0, 64)
+  }, [isFocused, token.value])
+
+  const updateCaret = () => {
+    setCaretIndex(textareaRef.current?.selectionStart ?? value.length)
+  }
+
+  const applySuggestion = (className: string) => {
+    const before = value.slice(0, token.start)
+    const after = value.slice(token.end)
+    const needsLeadingSpace = before.length > 0 && !/\s$/.test(before)
+    const needsTrailingSpace = after.length === 0 || !/^\s/.test(after)
+    const nextValue = `${before}${needsLeadingSpace ? ' ' : ''}${className}${
+      needsTrailingSpace ? ' ' : ''
+    }${after}`
+    const nextCaret =
+      before.length + (needsLeadingSpace ? 1 : 0) + className.length + 1
+
+    onChange(nextValue)
+    setCaretIndex(nextCaret)
+    setActiveIndex(0)
+    window.setTimeout(() => {
+      textareaRef.current?.focus()
+      textareaRef.current?.setSelectionRange(nextCaret, nextCaret)
+    }, 0)
+  }
+
+  return (
+    <FieldShell label="Tailwind classes">
+      <div className="relative">
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => {
+            window.setTimeout(() => setIsFocused(false), 120)
+          }}
+          onChange={(event) => {
+            onChange(event.target.value)
+            setCaretIndex(event.target.selectionStart)
+            setActiveIndex(0)
+          }}
+          onSelect={updateCaret}
+          onKeyUp={updateCaret}
+          onKeyDown={(event) => {
+            if (suggestions.length === 0) {
+              return
+            }
+
+            if (event.key === 'ArrowDown') {
+              event.preventDefault()
+              setActiveIndex((index) => (index + 1) % suggestions.length)
+              return
+            }
+
+            if (event.key === 'ArrowUp') {
+              event.preventDefault()
+              setActiveIndex(
+                (index) => (index - 1 + suggestions.length) % suggestions.length
+              )
+              return
+            }
+
+            if (event.key === 'Enter' || event.key === 'Tab') {
+              event.preventDefault()
+              applySuggestion(suggestions[activeIndex])
+              return
+            }
+
+            if (event.key === 'Escape') {
+              setIsFocused(false)
+            }
+          }}
+          rows={4}
+          className="w-full px-2.5 py-1.5 text-xs bg-white/[0.05] border border-white/[0.08] rounded text-gray-200 focus:outline-none focus:border-accent/50 transition-colors resize-none"
+        />
+        {suggestions.length > 0 && (
+          <div className="absolute left-0 right-0 top-full z-30 mt-1 max-h-44 overflow-y-auto rounded border border-white/[0.12] bg-[#11151c] py-1 shadow-xl">
+            {suggestions.map((className, index) => (
+              <button
+                key={className}
+                type="button"
+                onMouseDown={(event) => {
+                  event.preventDefault()
+                  applySuggestion(className)
+                }}
+                className={`block w-full cursor-pointer px-2.5 py-1.5 text-left font-mono text-[11px] transition-colors ${
+                  index === activeIndex
+                    ? 'bg-accent text-white'
+                    : 'text-gray-300 hover:bg-white/[0.08] hover:text-white'
+                }`}
+              >
+                {className}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+      <p className="text-[10px] text-gray-600">
+        Type a class prefix, then press Tab or Enter to accept.
+      </p>
+    </FieldShell>
+  )
+}
+
+function getCurrentClassToken(value: string, caretIndex: number) {
+  const safeCaret = Math.max(0, Math.min(caretIndex, value.length))
+  const before = value.slice(0, safeCaret)
+  const tokenStart = Math.max(
+    before.lastIndexOf(' '),
+    before.lastIndexOf('\n'),
+    before.lastIndexOf('\t')
+  ) + 1
+  const after = value.slice(safeCaret)
+  const nextBreak = after.search(/\s/)
+  const tokenEnd = nextBreak === -1 ? value.length : safeCaret + nextBreak
+
+  return {
+    start: tokenStart,
+    end: tokenEnd,
+    value: value.slice(tokenStart, tokenEnd),
+  }
+}
+
+function ArrayField({
+  schema,
+  value,
+  onChange,
+}: {
+  schema: PropSchema
+  value: unknown
+  onChange: (value: unknown) => void
+}) {
+  const [draft, setDraft] = useState(formatArrayValue(value))
+
+  const handleChange = (rawValue: string) => {
+    setDraft(rawValue)
+    onChange(parseArrayValue(rawValue))
+  }
+
+  return (
+    <FieldShell label={schema.label}>
+      <textarea
+        value={draft}
+        onChange={(event) => handleChange(event.target.value)}
+        rows={2}
+        className="w-full px-2.5 py-1.5 text-xs bg-white/[0.05] border border-white/[0.08] rounded text-gray-200 focus:outline-none focus:border-accent/50 transition-colors resize-none"
+      />
+      <p className="text-[10px] text-gray-600">Comma or line separated</p>
+    </FieldShell>
+  )
+}
+
+function AttributesField({
+  schema,
+  value,
+  onChange,
+}: {
+  schema: PropSchema
+  value: unknown
+  onChange: (value: unknown) => void
+}) {
+  const [draft, setDraft] = useState(() =>
+    JSON.stringify(
+      value && typeof value === 'object' && !Array.isArray(value) ? value : {},
+      null,
+      2
+    )
+  )
+  const [error, setError] = useState<string | null>(null)
+
+  return (
+    <FieldShell label={schema.label}>
+      <textarea
+        value={draft}
+        onChange={(event) => {
+          const nextDraft = event.target.value
+          setDraft(nextDraft)
+
+          try {
+            const parsed = JSON.parse(nextDraft) as unknown
+            if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+              throw new Error('Use a JSON object')
+            }
+            setError(null)
+            onChange(parsed)
+          } catch (parseError) {
+            setError(
+              parseError instanceof Error
+                ? parseError.message
+                : 'Enter valid JSON'
+            )
+          }
+        }}
+        rows={5}
+        spellCheck={false}
+        className="w-full resize-none rounded border border-white/[0.08] bg-white/[0.05] px-2.5 py-1.5 font-mono text-xs text-gray-200 outline-none transition-colors focus:border-accent/50"
+      />
+      <p className={`text-[10px] ${error ? 'text-red-300' : 'text-gray-600'}`}>
+        {error ?? 'JSON attributes, for example {"aria-label": "Card"}'}
+      </p>
+    </FieldShell>
+  )
+}
+
+function formatArrayValue(value: unknown) {
+  return Array.isArray(value) ? value.join(', ') : ''
+}
+
+function parseArrayValue(value: string) {
+  return value
+    .split(/[,\n]/)
+    .map((item) => item.trim())
+    .filter(Boolean)
+}
+
+function FieldShell({
+  label,
+  children,
+}: {
+  label: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className="space-y-1">
+      <label className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">
+        {label}
+      </label>
+      {children}
+    </div>
+  )
+}
+
+const tailwindClassSuggestions = [
+  'block',
+  'inline',
+  'inline-block',
+  'flex',
+  'inline-flex',
+  'grid',
+  'hidden',
+  'contents',
+  'flex-row',
+  'flex-col',
+  'flex-wrap',
+  'items-start',
+  'items-center',
+  'items-end',
+  'items-stretch',
+  'justify-start',
+  'justify-center',
+  'justify-end',
+  'justify-between',
+  'justify-around',
+  'content-center',
+  'self-start',
+  'self-center',
+  'self-end',
+  'gap-1',
+  'gap-2',
+  'gap-3',
+  'gap-4',
+  'gap-6',
+  'gap-8',
+  'grid-cols-1',
+  'grid-cols-2',
+  'grid-cols-3',
+  'grid-cols-4',
+  'grid-cols-6',
+  'col-span-1',
+  'col-span-2',
+  'col-span-full',
+  'w-full',
+  'w-screen',
+  'w-auto',
+  'w-fit',
+  'w-1/2',
+  'w-1/3',
+  'w-2/3',
+  'w-1/4',
+  'w-3/4',
+  'min-w-0',
+  'max-w-sm',
+  'max-w-md',
+  'max-w-lg',
+  'max-w-xl',
+  'max-w-2xl',
+  'max-w-4xl',
+  'max-w-6xl',
+  'max-w-full',
+  'h-full',
+  'h-screen',
+  'h-auto',
+  'min-h-12',
+  'min-h-24',
+  'min-h-48',
+  'min-h-screen',
+  'p-0',
+  'p-1',
+  'p-2',
+  'p-3',
+  'p-4',
+  'p-6',
+  'p-8',
+  'px-2',
+  'px-3',
+  'px-4',
+  'px-6',
+  'px-8',
+  'py-1',
+  'py-2',
+  'py-3',
+  'py-4',
+  'py-6',
+  'py-8',
+  'm-0',
+  'mx-auto',
+  'mt-1',
+  'mt-2',
+  'mt-4',
+  'mb-1',
+  'mb-2',
+  'mb-4',
+  'space-y-1',
+  'space-y-2',
+  'space-y-3',
+  'space-y-4',
+  'text-left',
+  'text-center',
+  'text-right',
+  'text-xs',
+  'text-sm',
+  'text-base',
+  'text-lg',
+  'text-xl',
+  'text-2xl',
+  'text-3xl',
+  'text-4xl',
+  'text-5xl',
+  'font-thin',
+  'font-light',
+  'font-normal',
+  'font-medium',
+  'font-semibold',
+  'font-bold',
+  'font-extrabold',
+  'italic',
+  'not-italic',
+  'underline',
+  'line-through',
+  'leading-none',
+  'leading-tight',
+  'leading-normal',
+  'leading-relaxed',
+  'tracking-tight',
+  'tracking-normal',
+  'tracking-wide',
+  'text-white',
+  'text-black',
+  'text-gray-50',
+  'text-gray-100',
+  'text-gray-200',
+  'text-gray-300',
+  'text-gray-400',
+  'text-gray-500',
+  'text-gray-600',
+  'text-gray-700',
+  'text-gray-800',
+  'text-gray-900',
+  'text-red-500',
+  'text-orange-500',
+  'text-amber-500',
+  'text-yellow-500',
+  'text-green-500',
+  'text-emerald-500',
+  'text-teal-500',
+  'text-cyan-500',
+  'text-sky-500',
+  'text-blue-500',
+  'text-blue-600',
+  'text-indigo-500',
+  'text-violet-500',
+  'text-purple-500',
+  'text-pink-500',
+  'bg-white',
+  'bg-black',
+  'bg-transparent',
+  'bg-gray-50',
+  'bg-gray-100',
+  'bg-gray-200',
+  'bg-gray-300',
+  'bg-gray-800',
+  'bg-gray-900',
+  'bg-red-500',
+  'bg-orange-500',
+  'bg-yellow-500',
+  'bg-green-500',
+  'bg-blue-500',
+  'bg-blue-600',
+  'bg-indigo-600',
+  'bg-purple-600',
+  'border',
+  'border-0',
+  'border-2',
+  'border-t',
+  'border-b',
+  'border-l',
+  'border-r',
+  'border-transparent',
+  'border-white',
+  'border-black',
+  'border-gray-200',
+  'border-gray-300',
+  'border-gray-700',
+  'border-blue-500',
+  'rounded',
+  'rounded-sm',
+  'rounded-md',
+  'rounded-lg',
+  'rounded-xl',
+  'rounded-2xl',
+  'rounded-full',
+  'shadow',
+  'shadow-sm',
+  'shadow-md',
+  'shadow-lg',
+  'shadow-xl',
+  'overflow-hidden',
+  'overflow-auto',
+  'overflow-x-auto',
+  'relative',
+  'absolute',
+  'fixed',
+  'sticky',
+  'top-0',
+  'right-0',
+  'bottom-0',
+  'left-0',
+  'z-10',
+  'z-20',
+  'z-50',
+  'opacity-0',
+  'opacity-50',
+  'opacity-75',
+  'opacity-100',
+  'cursor-pointer',
+  'select-none',
+  'transition',
+  'transition-colors',
+  'duration-150',
+  'duration-200',
+  'hover:bg-gray-100',
+  'hover:bg-gray-900',
+  'hover:text-white',
+  'hover:text-black',
+  'focus:outline-none',
+  'focus:ring-2',
+  'focus:ring-blue-500',
+]