create-visualbuild-app 0.1.0 → 1.0.1

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

@@ -1,292 +1,613 @@
-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)
+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)
+}
+
+function presetDefinition(
+  definition: Omit<ComponentDefinition, 'generator' | 'source'>
+): ComponentDefinition {
+  return {
+    ...definition,
+    generator: (props) => {
+      const attributes = Object.entries({
+        ...definition.defaultProps,
+        ...props,
+      })
+        .map(([name, value]) => `${name}={${JSON.stringify(value)}}`)
+        .join(' ')
+
+      return `<${definition.type}${attributes ? ` ${attributes}` : ''} />`
+    },
+    source: () => `import type { ReactNode } from 'react'
+
+export function ${definition.type}({
+  children,
+  ...props
+}: {
+  children?: ReactNode
+} & Record<string, unknown>) {
+  void props
+  return <section>{children}</section>
+}`,
+  }
+}
+
+export const componentRegistry: Record<ComponentType, ComponentDefinition> = {
+  Navbar: {
+    type: 'Navbar',
+    label: 'Navbar',
+    category: 'Layout',
+    icon: '▬',
+    description: 'Logo + nav links',
+    defaultProps: {
+      logo: 'My App',
+    },
+    propSchema: {
+      logo: { type: 'string', label: 'Logo', default: 'My App' },
+    },
+    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 App')}} 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 App',
+      subtitle: 'Built visually. Owned as React code.',
+      cta: 'Start Building',
+    },
+    propSchema: {
+      title: { type: 'string', label: 'Title', default: 'Welcome to My App' },
+      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 App')}} 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>
+  )
+}`,
+  },
+
+  Grid: presetDefinition({
+    type: 'Grid',
+    label: 'Grid',
+    category: 'Layout',
+    icon: '#',
+    description: 'Responsive three-column content grid',
+    defaultProps: {
+      heading: 'Explore the collection',
+    },
+    propSchema: {
+      heading: {
+        type: 'string',
+        label: 'Heading',
+        default: 'Explore the collection',
+      },
+    },
+    renderer: ({ heading }) => (
+      <section className="px-6 py-10">
+        <h2 className="mb-6 text-2xl font-semibold text-gray-900">
+          {String(heading)}
+        </h2>
+        <div className="grid grid-cols-3 gap-4">
+          {['One', 'Two', 'Three'].map((item) => (
+            <article
+              key={item}
+              className="rounded-lg border border-gray-200 bg-white p-5"
+            >
+              Item {item}
+            </article>
+          ))}
+        </div>
+      </section>
+    ),
+  }),
+
+  Testimonials: presetDefinition({
+    type: 'Testimonials',
+    label: 'Testimonials',
+    category: 'Marketing',
+    icon: '"',
+    description: 'Customer quotes in a responsive grid',
+    defaultProps: {
+      heading: 'What customers say',
+    },
+    propSchema: {
+      heading: {
+        type: 'string',
+        label: 'Heading',
+        default: 'What customers say',
+      },
+    },
+    renderer: ({ heading }) => (
+      <section className="bg-gray-50 px-6 py-12">
+        <h2 className="mb-8 text-center text-2xl font-semibold text-gray-900">
+          {String(heading)}
+        </h2>
+        <div className="grid grid-cols-3 gap-5">
+          {['Alex', 'Sam', 'Jamie'].map((name) => (
+            <blockquote
+              key={name}
+              className="rounded-lg border border-gray-200 bg-white p-6"
+            >
+              Great product.
+              <cite className="mt-3 block text-sm font-semibold">{name}</cite>
+            </blockquote>
+          ))}
+        </div>
+      </section>
+    ),
+  }),
+
+  Pricing: presetDefinition({
+    type: 'Pricing',
+    label: 'Pricing',
+    category: 'Marketing',
+    icon: '$',
+    description: 'Three editable pricing plans',
+    defaultProps: {
+      heading: 'Simple pricing',
+    },
+    propSchema: {
+      heading: {
+        type: 'string',
+        label: 'Heading',
+        default: 'Simple pricing',
+      },
+    },
+    renderer: ({ heading }) => (
+      <section className="px-6 py-12">
+        <h2 className="mb-8 text-center text-2xl font-semibold text-gray-900">
+          {String(heading)}
+        </h2>
+        <div className="grid grid-cols-3 gap-5">
+          {['Starter', 'Professional', 'Team'].map((name) => (
+            <article
+              key={name}
+              className="rounded-lg border border-gray-200 bg-white p-6 text-center"
+            >
+              <h3 className="font-semibold">{name}</h3>
+              <p className="my-4 text-2xl font-bold text-blue-600">$29</p>
+            </article>
+          ))}
+        </div>
+      </section>
+    ),
+  }),
+
+  Form: presetDefinition({
+    type: 'Form',
+    label: 'Form',
+    category: 'Forms',
+    icon: '=',
+    description: 'General-purpose form starter',
+    defaultProps: {
+      heading: 'Tell us about yourself',
+    },
+    propSchema: {
+      heading: {
+        type: 'string',
+        label: 'Heading',
+        default: 'Tell us about yourself',
+      },
+    },
+    renderer: ({ heading }) => (
+      <form className="mx-auto max-w-xl space-y-4 rounded-lg border border-gray-200 bg-white p-6">
+        <h2 className="text-xl font-semibold">{String(heading)}</h2>
+        <input
+          aria-label="Name"
+          className="w-full rounded-md border border-gray-300 px-3 py-2"
+        />
+        <button type="button" className="rounded-md bg-blue-600 px-4 py-2 text-white">
+          Submit
+        </button>
+      </form>
+    ),
+  }),
+
+  Image: presetDefinition({
+    type: 'Image',
+    label: 'Image',
+    category: 'Media',
+    icon: 'I',
+    description: 'Responsive image with caption',
+    defaultProps: {
+      caption: 'Replace this image and caption with your own.',
+    },
+    propSchema: {
+      caption: {
+        type: 'string',
+        label: 'Caption',
+        default: 'Replace this image and caption with your own.',
+      },
+    },
+    renderer: ({ caption }) => (
+      <figure className="overflow-hidden rounded-lg bg-gray-100">
+        <div className="h-40 bg-gray-300" />
+        <figcaption className="px-4 py-3 text-sm text-gray-600">
+          {String(caption)}
+        </figcaption>
+      </figure>
+    ),
+  }),
+
+  Features: presetDefinition({
+    type: 'Features',
+    label: 'Features',
+    category: 'Marketing',
+    icon: '+',
+    description: 'Three product benefit cards',
+    defaultProps: {
+      heading: 'Everything you need',
+    },
+    propSchema: {
+      heading: {
+        type: 'string',
+        label: 'Heading',
+        default: 'Everything you need',
+      },
+    },
+    renderer: ({ heading }) => (
+      <section className="px-6 py-12">
+        <h2 className="mb-8 text-center text-2xl font-semibold">
+          {String(heading)}
+        </h2>
+        <div className="grid grid-cols-3 gap-6">
+          {['Fast setup', 'Flexible design', 'Owned source'].map((feature) => (
+            <article key={feature} className="rounded-lg bg-gray-50 p-5">
+              {feature}
+            </article>
+          ))}
+        </div>
+      </section>
+    ),
+  }),
+
+  Gallery: presetDefinition({
+    type: 'Gallery',
+    label: 'Gallery',
+    category: 'Media',
+    icon: 'G',
+    description: 'Responsive image gallery',
+    defaultProps: {
+      heading: 'Gallery',
+    },
+    propSchema: {
+      heading: { type: 'string', label: 'Heading', default: 'Gallery' },
+    },
+    renderer: ({ heading }) => (
+      <section className="px-6 py-12">
+        <h2 className="mb-6 text-2xl font-semibold">{String(heading)}</h2>
+        <div className="grid grid-cols-3 gap-3">
+          {[1, 2, 3].map((item) => (
+            <div key={item} className="aspect-[4/3] rounded-lg bg-gray-200" />
+          ))}
+        </div>
+      </section>
+    ),
+  }),
+
+  FAQ: presetDefinition({
+    type: 'FAQ',
+    label: 'FAQ',
+    category: 'Content',
+    icon: '?',
+    description: 'Expandable questions and answers',
+    defaultProps: {
+      heading: 'Frequently asked questions',
+    },
+    propSchema: {
+      heading: {
+        type: 'string',
+        label: 'Heading',
+        default: 'Frequently asked questions',
+      },
+    },
+    renderer: ({ heading }) => (
+      <section className="mx-auto max-w-3xl px-6 py-12">
+        <h2 className="mb-6 text-2xl font-semibold">{String(heading)}</h2>
+        <details className="border-b border-gray-200 py-4">
+          <summary>Can I edit every element?</summary>
+          <p className="mt-3 text-sm text-gray-600">Yes, every node is editable.</p>
+        </details>
+      </section>
+    ),
+  }),
+
+  ContactForm: presetDefinition({
+    type: 'ContactForm',
+    label: 'Contact Form',
+    category: 'Forms',
+    icon: '@',
+    description: 'Name, email, and message fields',
+    defaultProps: {
+      heading: 'Contact us',
+    },
+    propSchema: {
+      heading: { type: 'string', label: 'Heading', default: 'Contact us' },
+    },
+    renderer: ({ heading }) => (
+      <form className="mx-auto max-w-xl space-y-4 rounded-lg bg-white p-6">
+        <h2 className="text-2xl font-semibold">{String(heading)}</h2>
+        <input aria-label="Name" className="w-full border px-3 py-2" />
+        <input aria-label="Email" className="w-full border px-3 py-2" />
+        <textarea aria-label="Message" className="w-full border px-3 py-2" />
+      </form>
+    ),
+  }),
+
+  LoginForm: presetDefinition({
+    type: 'LoginForm',
+    label: 'Login Form',
+    category: 'Forms',
+    icon: 'L',
+    description: 'Email and password sign-in form',
+    defaultProps: {
+      heading: 'Welcome back',
+    },
+    propSchema: {
+      heading: { type: 'string', label: 'Heading', default: 'Welcome back' },
+    },
+    renderer: ({ heading }) => (
+      <form className="mx-auto max-w-sm space-y-4 rounded-lg bg-white p-6">
+        <h2 className="text-2xl font-semibold">{String(heading)}</h2>
+        <input aria-label="Email" className="w-full border px-3 py-2" />
+        <input aria-label="Password" className="w-full border px-3 py-2" />
+        <button type="button" className="w-full bg-gray-900 px-4 py-2 text-white">
+          Sign in
+        </button>
+      </form>
+    ),
+  }),
+}
+
+export const components = Object.values(componentRegistry)