create-visualbuild-app 0.1.0

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

@@ -0,0 +1,692 @@
+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',
+]