create-visualbuild-app 0.1.0

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

@@ -0,0 +1,128 @@
+export type SaveState = 'idle' | 'saving' | 'saved' | 'error'
+
+export default function Topbar({
+  showCode,
+  previewMode,
+  saveState,
+  onToggleCode,
+  onTogglePreview,
+  onSave,
+}: {
+  showCode: boolean
+  previewMode: boolean
+  saveState: SaveState
+  onToggleCode: () => void
+  onTogglePreview: () => void
+  onSave: () => void
+}) {
+  return (
+    <header className="flex items-center justify-between px-4 h-12 bg-topbar border-b border-white/[0.06] shrink-0 z-10">
+      <div className="flex items-center gap-2">
+        <div className="w-6 h-6 rounded bg-accent flex items-center justify-center">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+            <rect x="1" y="1" width="5" height="5" rx="1" fill="white" />
+            <rect
+              x="8"
+              y="1"
+              width="5"
+              height="5"
+              rx="1"
+              fill="white"
+              opacity="0.6"
+            />
+            <rect
+              x="1"
+              y="8"
+              width="5"
+              height="5"
+              rx="1"
+              fill="white"
+              opacity="0.6"
+            />
+            <rect
+              x="8"
+              y="8"
+              width="5"
+              height="5"
+              rx="1"
+              fill="white"
+              opacity="0.3"
+            />
+          </svg>
+        </div>
+        <span className="text-sm font-semibold tracking-tight text-white">
+          VisualBuild
+        </span>
+      </div>
+
+      <div className="flex items-center gap-1">
+        <button
+          type="button"
+          onClick={onTogglePreview}
+          className={`px-3 py-1.5 text-xs rounded transition-colors cursor-pointer select-none ${
+            previewMode
+              ? 'text-white bg-white/[0.1]'
+              : 'text-gray-400 hover:text-white hover:bg-white/[0.06]'
+          }`}
+        >
+          Preview
+        </button>
+        <button
+          type="button"
+          onClick={onToggleCode}
+          className={`px-3 py-1.5 text-xs rounded transition-colors cursor-pointer select-none ${
+            !previewMode && showCode
+              ? 'text-white bg-white/[0.1]'
+              : 'text-gray-400 hover:text-white hover:bg-white/[0.06]'
+          }`}
+        >
+          Code
+        </button>
+        <DisabledButton>Undo</DisabledButton>
+        <DisabledButton>Redo</DisabledButton>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          disabled={saveState === 'saving'}
+          onClick={onSave}
+          className={`px-3 py-1.5 text-xs bg-white/[0.06] hover:bg-white/[0.1] disabled:opacity-60 rounded transition-colors cursor-pointer select-none ${
+            saveState === 'error' ? 'text-red-300' : 'text-gray-300'
+          }`}
+        >
+          {saveState === 'saving'
+            ? 'Saving...'
+            : saveState === 'saved'
+              ? 'Saved'
+              : saveState === 'error'
+                ? 'Save failed'
+              : 'Save'}
+        </button>
+        <DisabledButton emphasized>Export ZIP</DisabledButton>
+      </div>
+    </header>
+  )
+}
+
+function DisabledButton({
+  children,
+  emphasized = false,
+}: {
+  children: React.ReactNode
+  emphasized?: boolean
+}) {
+  return (
+    <button
+      type="button"
+      disabled
+      className={`px-3 py-1.5 text-xs rounded cursor-pointer select-none ${
+        emphasized
+          ? 'text-white/45 bg-accent/35'
+          : 'text-gray-700 bg-transparent'
+      }`}
+    >
+      {children}
+    </button>
+  )
+}

package/visual-app-builder/src/data/componentRegistry.tsx

@@ -0,0 +1,292 @@
+import type { ComponentDefinition, ComponentType } from '../types'
+
+function stringProp(value: unknown, fallback: string) {
+  return JSON.stringify(String(value ?? fallback))
+}
+
+function arrayProp(value: unknown, fallback: string[]) {
+  return JSON.stringify(Array.isArray(value) ? value : fallback)
+}
+
+export const componentRegistry: Record<ComponentType, ComponentDefinition> = {
+  Navbar: {
+    type: 'Navbar',
+    label: 'Navbar',
+    category: 'Layout',
+    icon: '▬',
+    description: 'Logo + nav links',
+    defaultProps: {
+      logo: 'My Blog',
+    },
+    propSchema: {
+      logo: { type: 'string', label: 'Logo', default: 'My Blog' },
+    },
+    renderer: ({ logo }, { pages, activePageId, setActivePage }) => (
+      <nav className="flex items-center justify-between px-6 py-3 bg-gray-900 text-white rounded-lg">
+        <span className="font-bold text-sm">{String(logo ?? 'Logo')}</span>
+        <div className="flex gap-4">
+          {pages.map((page) => (
+            <button
+              key={page.id}
+              type="button"
+              onClick={(event) => {
+                event.stopPropagation()
+                setActivePage(page.id)
+              }}
+              className={`text-xs transition-colors ${
+                page.id === activePageId
+                  ? 'text-white'
+                  : 'text-gray-300 hover:text-white'
+              }`}
+            >
+              {page.name}
+            </button>
+          ))}
+        </div>
+      </nav>
+    ),
+    generator: ({ logo, links }) =>
+      `<Navbar logo={${stringProp(logo, 'My Blog')}} links={${arrayProp(links, [])}} />`,
+    source: () => `import type { ReactNode } from 'react'
+
+export function Navbar({
+  logo,
+  links,
+  children,
+}: {
+  logo: string
+  links: { label: string; route: string }[]
+  children?: ReactNode
+}) {
+  return (
+    <nav className="flex items-center justify-between px-6 py-3 bg-gray-900 text-white">
+      <span className="font-bold text-sm">{logo}</span>
+      <div className="flex items-center gap-6">
+        <div className="flex gap-4">
+          {links.map((link) => (
+            <a key={link.route} href={link.route} className="text-xs text-gray-300">
+              {link.label}
+            </a>
+          ))}
+        </div>
+        {children ? <div className="flex items-center gap-2">{children}</div> : null}
+      </div>
+    </nav>
+  )
+}`,
+  },
+
+  Hero: {
+    type: 'Hero',
+    label: 'Hero',
+    category: 'Layout',
+    icon: '⬛',
+    description: 'Title, subtitle, CTA',
+    defaultProps: {
+      title: 'Welcome to My Blog',
+      subtitle: 'Built visually. Owned as React code.',
+      cta: 'Start Building',
+    },
+    propSchema: {
+      title: { type: 'string', label: 'Title', default: 'Welcome to My Blog' },
+      subtitle: {
+        type: 'text',
+        label: 'Subtitle',
+        default: 'Built visually. Owned as React code.',
+      },
+      cta: { type: 'string', label: 'CTA text', default: 'Start Building' },
+    },
+    renderer: ({ title, subtitle, cta }) => (
+      <div className="bg-gradient-to-br from-blue-600 to-indigo-700 text-white px-8 py-12 text-center rounded-lg">
+        <h1 className="text-2xl font-bold mb-2">{String(title ?? 'Title')}</h1>
+        <p className="text-sm text-blue-100 mb-6">
+          {String(subtitle ?? 'Subtitle')}
+        </p>
+        <button className="px-5 py-2 bg-white text-blue-700 rounded-full text-sm font-semibold">
+          {String(cta ?? 'Start Building')}
+        </button>
+      </div>
+    ),
+    generator: ({ title, subtitle, cta }) =>
+      `<Hero title={${stringProp(title, 'Welcome to My Blog')}} subtitle={${stringProp(subtitle, 'Built visually. Owned as React code.')}} cta={${stringProp(cta, 'Start Building')}} />`,
+    source: () => `import type { ReactNode } from 'react'
+
+export function Hero({
+  title,
+  subtitle,
+  cta,
+  children,
+}: {
+  title: string
+  subtitle: string
+  cta: string
+  children?: ReactNode
+}) {
+  return (
+    <section className="bg-gradient-to-br from-blue-600 to-indigo-700 text-white px-8 py-12 text-center">
+      <h1 className="text-2xl font-bold mb-2">{title}</h1>
+      <p className="text-sm text-blue-100 mb-6">{subtitle}</p>
+      <button className="px-5 py-2 bg-white text-blue-700 rounded-full text-sm font-semibold">
+        {cta}
+      </button>
+      {children ? <div className="mt-6">{children}</div> : null}
+    </section>
+  )
+}`,
+  },
+
+  Card: {
+    type: 'Card',
+    label: 'Card',
+    category: 'Content',
+    icon: '▭',
+    description: 'Heading and body text',
+    defaultProps: {
+      title: 'Card Title',
+      body: 'Card description goes here.',
+    },
+    propSchema: {
+      title: { type: 'string', label: 'Title', default: 'Card Title' },
+      body: {
+        type: 'text',
+        label: 'Body',
+        default: 'Card description goes here.',
+      },
+    },
+    renderer: ({ title, body }) => (
+      <div className="bg-white rounded-lg border border-gray-200 p-5 shadow-sm">
+        <h3 className="font-semibold text-gray-900 mb-1">
+          {String(title ?? 'Card Title')}
+        </h3>
+        <p className="text-sm text-gray-500">
+          {String(body ?? 'Card description.')}
+        </p>
+      </div>
+    ),
+    generator: ({ title, body }) =>
+      `<Card title={${stringProp(title, 'Card Title')}} body={${stringProp(body, 'Card description goes here.')}} />`,
+    source: () => `import type { ReactNode } from 'react'
+
+export function Card({
+  title,
+  body,
+  children,
+}: {
+  title: string
+  body: string
+  children?: ReactNode
+}) {
+  return (
+    <article className="bg-white border border-gray-200 p-5 shadow-sm">
+      <h3 className="font-semibold text-gray-900 mb-1">{title}</h3>
+      <p className="text-sm text-gray-500">{body}</p>
+      {children ? <div className="mt-4">{children}</div> : null}
+    </article>
+  )
+}`,
+  },
+
+  Button: {
+    type: 'Button',
+    label: 'Button',
+    category: 'Actions',
+    icon: '◻',
+    description: 'Action button',
+    defaultProps: {
+      text: 'Click me',
+      variant: 'primary',
+    },
+    propSchema: {
+      text: { type: 'string', label: 'Text', default: 'Click me' },
+      variant: {
+        type: 'select',
+        label: 'Variant',
+        default: 'primary',
+        options: ['primary', 'outline', 'secondary'],
+      },
+    },
+    renderer: ({ text, variant }) => (
+      <div className="px-4 py-3 bg-white rounded-lg border border-gray-200 flex items-center gap-2">
+        <button
+          className={`px-4 py-1.5 rounded text-sm font-medium ${variant === 'primary'
+            ? 'bg-blue-600 text-white'
+            : variant === 'outline'
+              ? 'border border-blue-600 text-blue-600'
+              : 'bg-gray-100 text-gray-700'
+            }`}
+        >
+          {String(text ?? 'Button')}
+        </button>
+      </div>
+    ),
+    generator: ({ text, variant }) =>
+      `<Button text={${stringProp(text, 'Click me')}} variant={${stringProp(variant, 'primary')}} />`,
+    source: () => `import type { ReactNode } from 'react'
+
+export function Button({
+  text,
+  variant,
+  children,
+}: {
+  text: string
+  variant: 'primary' | 'outline' | 'secondary'
+  children?: ReactNode
+}) {
+  const className =
+    variant === 'primary'
+      ? 'bg-blue-600 text-white'
+      : variant === 'outline'
+        ? 'border border-blue-600 text-blue-600'
+        : 'bg-gray-100 text-gray-700'
+
+  return (
+    <button className={\`px-4 py-1.5 rounded text-sm font-medium \${className}\`}>
+      {children ?? text}
+    </button>
+  )
+}`,
+  },
+
+  Footer: {
+    type: 'Footer',
+    label: 'Footer',
+    category: 'Layout',
+    icon: '▬',
+    description: 'Copyright text',
+    defaultProps: {
+      copyright: 'Copyright 2026 MySite',
+    },
+    propSchema: {
+      copyright: {
+        type: 'string',
+        label: 'Copyright',
+        default: 'Copyright 2026 MySite',
+      },
+    },
+    renderer: ({ copyright }) => (
+      <footer className="bg-gray-900 text-gray-400 text-center py-4 text-xs rounded-lg">
+        {String(copyright ?? 'Copyright 2026 MySite')}
+      </footer>
+    ),
+    generator: ({ copyright }) =>
+      `<Footer copyright={${stringProp(copyright, 'Copyright 2026 MySite')}} />`,
+    source: () => `import type { ReactNode } from 'react'
+
+export function Footer({
+  copyright,
+  children,
+}: {
+  copyright: string
+  children?: ReactNode
+}) {
+  return (
+    <footer className="bg-gray-900 text-gray-400 text-center py-4 text-xs">
+      {copyright}
+      {children ? <div className="mt-2">{children}</div> : null}
+    </footer>
+  )
+}`,
+  },
+}
+
+export const components = Object.values(componentRegistry)