modern-cms 1.0.0

package/template/packages/shared/src/components.ts

@@ -0,0 +1,1626 @@
+import type { FieldDescriptor } from "./schema/fields.js";
+import type { NodeStyle } from "./schema/pageNode.js";
+
+export type ComponentCategory = "Layout" | "Content" | "Media" | "Interactive";
+
+export type ComponentDefinition = {
+  type: string;
+  label: string;
+  icon: string; // lucide-react icon name
+  category: ComponentCategory;
+  allowsChildren: boolean;
+  defaultProps: Record<string, unknown>;
+  defaultStyle: NodeStyle;
+  fields: FieldDescriptor[];
+  /** Structural helper types (e.g. "column") that are managed automatically by their
+   * parent rather than dragged in from the palette directly. */
+  hidden?: boolean;
+  /** Structural slots (e.g. a header's left/center/right zones) that the user
+   * shouldn't be able to delete, duplicate, or drag out of place. */
+  locked?: boolean;
+};
+
+const buttonItemFields: FieldDescriptor[] = [
+  { key: "text", label: "Button text", type: "text", default: "Click me" },
+  { key: "href", label: "Link URL", type: "url", default: "#" },
+  {
+    key: "size",
+    label: "Size",
+    type: "select",
+    default: "md",
+    options: [
+      { label: "Small", value: "sm" },
+      { label: "Medium", value: "md" },
+      { label: "Large", value: "lg" },
+    ],
+  },
+  {
+    key: "variant",
+    label: "Style",
+    type: "select",
+    default: "primary",
+    options: [
+      { label: "Primary", value: "primary" },
+      { label: "Secondary", value: "secondary" },
+      { label: "Outline", value: "outline" },
+      { label: "Text (borderless)", value: "text" },
+    ],
+  },
+  {
+    key: "border",
+    label: "Border",
+    type: "select",
+    default: "default",
+    options: [
+      { label: "Default (from style)", value: "default" },
+      { label: "None", value: "none" },
+      { label: "Solid", value: "solid" },
+    ],
+  },
+];
+
+export const COMPONENT_REGISTRY: ComponentDefinition[] = [
+  {
+    type: "goToTop",
+    label: "Go to Top",
+    icon: "ArrowUp",
+    category: "Interactive",
+    allowsChildren: false,
+    defaultProps: {
+      enabled: true,
+      showAfterScroll: 300,
+      icon: "ArrowUp",
+      size: "md",
+    },
+    defaultStyle: {
+      backgroundColor: "#3b82f6",
+      textColor: "#ffffff",
+      paddingX: "16px",
+      paddingY: "16px",
+      borderRadius: "50%",
+    },
+    fields: [
+      { key: "enabled", label: "Enabled", type: "boolean", default: true },
+      {
+        key: "showAfterScroll",
+        label: "Show after scroll (px)",
+        type: "number",
+        default: 300,
+        min: 0,
+      },
+      {
+        key: "icon",
+        label: "Icon name (lucide-react)",
+        type: "text",
+        default: "ArrowUp",
+      },
+      {
+        key: "size",
+        label: "Size",
+        type: "select",
+        default: "md",
+        options: [
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "header",
+    label: "Header / Nav",
+    icon: "PanelTop",
+    category: "Layout",
+    allowsChildren: true,
+    defaultProps: { sticky: true, zoneCount: 3 },
+    defaultStyle: { backgroundColor: "#ffffff", textColor: "#111827" },
+    // Content lives in its zones (drag Logo, Nav Links, Buttons, etc. into each one —
+    // see the "navZone" type below), not in generic fields here. Zone count is handled
+    // by a dedicated stepper in the Inspector, same as Container's column count.
+    fields: [
+      {
+        key: "sticky",
+        label: "Sticky on scroll",
+        type: "boolean",
+        default: true,
+      },
+    ],
+  },
+  {
+    type: "navZone",
+    label: "Nav Zone",
+    icon: "Minus",
+    category: "Layout",
+    allowsChildren: true,
+    defaultProps: { zone: "start" },
+    defaultStyle: {},
+    fields: [],
+    // Count/position is managed by the Header itself (see setHeaderZoneCount in tree.ts).
+    hidden: true,
+    locked: true,
+  },
+  {
+    type: "logo",
+    label: "Logo",
+    icon: "Image",
+    category: "Content",
+    allowsChildren: false,
+    defaultProps: {
+      useSiteLogo: true,
+      customImage: "",
+      href: "/",
+      height: "36px",
+    },
+    defaultStyle: {},
+    fields: [
+      {
+        key: "useSiteLogo",
+        label: "Use site logo (Theme settings)",
+        type: "boolean",
+        default: true,
+      },
+      {
+        key: "customImage",
+        label: "Custom logo image (overrides site logo)",
+        type: "image",
+      },
+      { key: "href", label: "Link URL", type: "url", default: "/" },
+    ],
+  },
+  {
+    type: "navLinks",
+    label: "Nav Links",
+    icon: "Link2",
+    category: "Content",
+    allowsChildren: false,
+    defaultProps: { useSiteNavigation: true, links: [] },
+    defaultStyle: {},
+    fields: [
+      {
+        key: "useSiteNavigation",
+        label: "Use site navigation (Navigation settings)",
+        type: "boolean",
+        default: true,
+      },
+      {
+        key: "links",
+        label: "Custom links (used when site navigation is off)",
+        type: "array",
+        default: [],
+        itemFields: [
+          { key: "label", label: "Label", type: "text", default: "Link" },
+          { key: "href", label: "URL", type: "url", default: "#" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "footer",
+    label: "Footer",
+    icon: "PanelBottom",
+    category: "Layout",
+    allowsChildren: false,
+    defaultProps: {
+      text: "© 2026 My Site. All rights reserved.",
+      description: "",
+      socialLinks: [],
+      linkColumns: [],
+      contactInfo: { address: "", phone: "", email: "", extraLine: "" },
+      bottomLinks: [],
+    },
+    defaultStyle: {
+      backgroundColor: "#0f172a",
+      textColor: "#f8fafc",
+      paddingY: "48px",
+    },
+    fields: [
+      {
+        key: "description",
+        label: "Short description / strapline",
+        type: "textarea",
+      },
+      {
+        key: "text",
+        label: "Copyright text",
+        type: "text",
+        default: "© 2026 My Site. All rights reserved.",
+      },
+      {
+        key: "linkColumns",
+        label: "Link columns",
+        type: "array",
+        default: [],
+        itemFields: [
+          {
+            key: "title",
+            label: "Column title",
+            type: "text",
+            default: "Links",
+          },
+          {
+            key: "links",
+            label: "Links",
+            type: "array",
+            default: [],
+            itemFields: [
+              { key: "label", label: "Label", type: "text", default: "Link" },
+              { key: "href", label: "URL", type: "url", default: "#" },
+            ],
+          },
+        ],
+      },
+      {
+        key: "bottomLinks",
+        label: "Bottom utility links (e.g. Privacy Policy, Site Map)",
+        type: "array",
+        default: [],
+        itemFields: [
+          { key: "label", label: "Label", type: "text", default: "Link" },
+          { key: "href", label: "URL", type: "url", default: "#" },
+        ],
+      },
+      {
+        key: "socialLinks",
+        label: "Social links",
+        type: "array",
+        default: [],
+        itemFields: [
+          {
+            key: "platform",
+            label: "Platform",
+            type: "select",
+            default: "website",
+            options: [
+              { label: "Website", value: "website" },
+              { label: "Facebook", value: "facebook" },
+              { label: "Twitter / X", value: "twitter" },
+              { label: "Instagram", value: "instagram" },
+              { label: "LinkedIn", value: "linkedin" },
+              { label: "YouTube", value: "youtube" },
+            ],
+          },
+          { key: "url", label: "URL", type: "url", default: "#" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "container",
+    label: "Columns / Container",
+    icon: "Columns3",
+    category: "Layout",
+    allowsChildren: true,
+    defaultProps: { columns: 1, gap: "24px", links: [] },
+    defaultStyle: { paddingY: "48px", paddingX: "24px" },
+    // "columns" is handled by a dedicated control in the Inspector (it also has to
+    // create/remove the underlying column nodes), so it's excluded from this generic
+    // field list — see Inspector.tsx.
+    fields: [
+      { key: "gap", label: "Gap", type: "text", default: "24px" },
+      {
+        key: "links",
+        label:
+          "Links — one makes the whole container clickable; two or more render as a small link list at the bottom instead (leave empty if its columns already have their own links/buttons)",
+        type: "array",
+        default: [],
+        itemFields: [
+          {
+            key: "label",
+            label: "Label (used for 2+ links)",
+            type: "text",
+            default: "Link",
+          },
+          { key: "href", label: "URL", type: "url", default: "#" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "column",
+    label: "Column",
+    icon: "RectangleVertical",
+    category: "Layout",
+    allowsChildren: true,
+    defaultProps: { links: [] },
+    defaultStyle: {},
+    fields: [
+      {
+        key: "links",
+        label:
+          "Links — one makes the whole column clickable; two or more render as a small link list at the bottom instead (leave empty if its content already has its own links/buttons)",
+        type: "array",
+        default: [],
+        itemFields: [
+          {
+            key: "label",
+            label: "Label (used for 2+ links)",
+            type: "text",
+            default: "Link",
+          },
+          { key: "href", label: "URL", type: "url", default: "#" },
+        ],
+      },
+    ],
+    // Columns only exist inside a Container's column count — not draggable on their own.
+    hidden: true,
+  },
+  {
+    type: "grid",
+    label: "Grid Layout",
+    icon: "Grid3x3",
+    category: "Layout",
+    allowsChildren: true,
+    defaultProps: { rows: 1, columns: 2, gap: "24px" },
+    defaultStyle: { paddingY: "48px", paddingX: "24px" },
+    // "rows"/"columns" get a dedicated stepper pair in the Inspector (they also have to
+    // create the underlying grid cell nodes), so they're excluded from this generic
+    // field list — see Inspector.tsx, same pattern as Container's "columns".
+    fields: [{ key: "gap", label: "Gap", type: "text", default: "24px" }],
+  },
+  {
+    type: "gridCell",
+    label: "Grid Cell",
+    icon: "Square",
+    category: "Layout",
+    allowsChildren: true,
+    defaultProps: {},
+    defaultStyle: {},
+    fields: [],
+    // Cells only exist inside a Grid's row×column count — not draggable on their own.
+    // Their column/row span lives in NodeStyle (gridColumnSpan/gridRowSpan) rather than
+    // here, since it has to reach nodeStyleToCss to affect the actual CSS grid item —
+    // see the "Grid placement" Inspector section.
+    hidden: true,
+  },
+  {
+    type: "hero",
+    label: "Hero",
+    icon: "Sparkles",
+    category: "Content",
+    allowsChildren: true,
+    defaultProps: {
+      heading: "Build something great",
+      subheading: "A short supporting sentence about your product or mission.",
+      primaryButtonText: "Get Started",
+      primaryButtonHref: "#",
+      secondaryButtonText: "",
+      secondaryButtonHref: "",
+      backgroundAnimationEnabled: false,
+      preset: "gradient",
+      accentColor: "#60a5fa",
+      secondColor: "#0f172a",
+      gradientAngle: 135,
+      density: 80,
+      speed: 1,
+      bgOpacity: 1,
+    },
+    defaultStyle: {
+      backgroundColor: "#111827",
+      textColor: "#ffffff",
+      paddingY: "120px",
+      paddingX: "24px",
+      textAlign: "center",
+      minHeight: "480px",
+    },
+    fields: [
+      { key: "heading", label: "Heading", type: "text" },
+      { key: "subheading", label: "Subheading", type: "textarea" },
+      { key: "primaryButtonText", label: "Primary button text", type: "text" },
+      { key: "primaryButtonHref", label: "Primary button link", type: "url" },
+      {
+        key: "secondaryButtonText",
+        label: "Secondary button text",
+        type: "text",
+      },
+      {
+        key: "secondaryButtonHref",
+        label: "Secondary button link",
+        type: "url",
+      },
+      {
+        key: "backgroundAnimationEnabled",
+        label: "Enable background animation",
+        type: "boolean",
+        default: false,
+      },
+      {
+        key: "preset",
+        label: "Animation style",
+        type: "select",
+        default: "gradient",
+        options: [
+          { label: "Gradient", value: "gradient" },
+          { label: "3D Particles", value: "particles" },
+          { label: "3D Waves", value: "waves" },
+          { label: "3D Floating Shapes", value: "shapes" },
+          { label: "3D Starfield", value: "stars" },
+          { label: "3D Network / Constellation", value: "network" },
+          { label: "3D Orbit Rings", value: "rings" },
+        ],
+      },
+      {
+        key: "mouseFollow",
+        label: "Follow pointer (3D presets)",
+        type: "boolean",
+        default: false,
+      },
+      {
+        key: "accentColor",
+        label: "Color 1",
+        type: "color",
+        default: "#60a5fa",
+      },
+      {
+        key: "secondColor",
+        label: "Color 2 (gradient only)",
+        type: "color",
+        default: "#0f172a",
+      },
+      {
+        key: "gradientAngle",
+        label: "Gradient angle (degrees, gradient only)",
+        type: "number",
+        default: 135,
+        min: 0,
+        max: 360,
+      },
+      {
+        key: "gradientAnimated",
+        label: "Animate gradient (drifting colors)",
+        type: "boolean",
+        default: false,
+      },
+      {
+        key: "density",
+        label: "Density (3D presets only)",
+        type: "number",
+        default: 80,
+        min: 10,
+        max: 400,
+      },
+      {
+        key: "speed",
+        label: "Speed (3D presets only)",
+        type: "number",
+        default: 1,
+        min: 0.1,
+        max: 5,
+        step: 0.1,
+      },
+      {
+        key: "bgOpacity",
+        label: "Background opacity",
+        type: "number",
+        default: 1,
+        min: 0.1,
+        max: 1,
+        step: 0.05,
+      },
+    ],
+  },
+  {
+    type: "richText",
+    label: "Rich Text",
+    icon: "Text",
+    category: "Content",
+    allowsChildren: false,
+    defaultProps: { html: "<p>Write something here...</p>" },
+    defaultStyle: { paddingY: "48px", paddingX: "24px" },
+    fields: [{ key: "html", label: "Content", type: "richtext" }],
+  },
+  {
+    type: "imageBlock",
+    label: "Image",
+    icon: "Image",
+    category: "Media",
+    allowsChildren: false,
+    defaultProps: {
+      src: "",
+      alt: "",
+      caption: "",
+      imgWidth: "",
+      imgHeight: "",
+      align: "center",
+    },
+    defaultStyle: { paddingY: "24px", paddingX: "24px" },
+    fields: [
+      { key: "src", label: "Image", type: "image" },
+      { key: "alt", label: "Alt text", type: "text" },
+      { key: "caption", label: "Caption", type: "text" },
+      {
+        key: "imgWidth",
+        label: "Image width (e.g. 320px, 50%)",
+        type: "text",
+        placeholder: "auto",
+      },
+      {
+        key: "imgHeight",
+        label: "Image height (e.g. 240px)",
+        type: "text",
+        placeholder: "auto",
+      },
+      {
+        key: "align",
+        label: "Align image",
+        type: "select",
+        default: "center",
+        options: [
+          { label: "Left", value: "left" },
+          { label: "Center", value: "center" },
+          { label: "Right", value: "right" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "slider",
+    label: "Image Slider",
+    icon: "GalleryHorizontal",
+    category: "Media",
+    allowsChildren: false,
+    defaultProps: {
+      autoplay: true,
+      intervalMs: 5000,
+      slides: [
+        {
+          image: "",
+          heading: "Slide heading",
+          subheading: "",
+          buttonText: "",
+          buttonHref: "",
+        },
+      ],
+    },
+    defaultStyle: {
+      minHeight: "480px",
+      textColor: "#ffffff",
+      textAlign: "center",
+    },
+    fields: [
+      { key: "autoplay", label: "Autoplay", type: "boolean", default: true },
+      {
+        key: "intervalMs",
+        label: "Interval (ms)",
+        type: "number",
+        default: 5000,
+        min: 1000,
+        max: 20000,
+      },
+      {
+        key: "slides",
+        label: "Slides",
+        type: "array",
+        default: [],
+        itemFields: [
+          { key: "image", label: "Image", type: "image" },
+          { key: "heading", label: "Heading", type: "text" },
+          { key: "subheading", label: "Subheading", type: "text" },
+          { key: "buttonText", label: "Button text", type: "text" },
+          { key: "buttonHref", label: "Button link", type: "url" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "imageBackgroundSection",
+    label: "Image Background Section",
+    icon: "ImagePlus",
+    category: "Media",
+    allowsChildren: true,
+    defaultProps: {
+      heading: "A section with an image background",
+      subheading: "",
+      buttonText: "",
+      buttonHref: "",
+    },
+    defaultStyle: {
+      backgroundImage: "",
+      backgroundOverlay: "rgba(0,0,0,0.45)",
+      textColor: "#ffffff",
+      minHeight: "480px",
+      textAlign: "center",
+      paddingY: "96px",
+    },
+    fields: [
+      { key: "heading", label: "Heading", type: "text" },
+      { key: "subheading", label: "Subheading", type: "textarea" },
+      { key: "buttonText", label: "Button text", type: "text" },
+      { key: "buttonHref", label: "Button link", type: "url" },
+    ],
+  },
+  {
+    type: "videoBackgroundSection",
+    label: "Video Background Section",
+    icon: "Video",
+    category: "Media",
+    allowsChildren: true,
+    defaultProps: {
+      heading: "A section with a video background",
+      subheading: "",
+      buttonText: "",
+      buttonHref: "",
+    },
+    defaultStyle: {
+      backgroundVideo: "",
+      backgroundOverlay: "rgba(0,0,0,0.5)",
+      textColor: "#ffffff",
+      minHeight: "560px",
+      textAlign: "center",
+      paddingY: "96px",
+    },
+    fields: [
+      { key: "heading", label: "Heading", type: "text" },
+      { key: "subheading", label: "Subheading", type: "textarea" },
+      { key: "buttonText", label: "Button text", type: "text" },
+      { key: "buttonHref", label: "Button link", type: "url" },
+    ],
+  },
+  {
+    type: "threeBackground",
+    label: "3D Background",
+    icon: "Sparkles",
+    category: "Media",
+    allowsChildren: true,
+    defaultProps: {
+      enabled: true,
+      preset: "particles",
+      color: "#60a5fa",
+      secondColor: "",
+      density: 80,
+      speed: 1,
+      mouseFollow: false,
+      bgOpacity: 1,
+      heading: "An animated 3D section",
+      subheading: "",
+      buttonText: "",
+      buttonHref: "",
+    },
+    defaultStyle: {
+      backgroundColor: "#0f172a",
+      textColor: "#ffffff",
+      minHeight: "480px",
+      textAlign: "center",
+      paddingY: "96px",
+    },
+    fields: [
+      {
+        key: "enabled",
+        label: "Animation active",
+        type: "boolean",
+        default: true,
+      },
+      {
+        key: "preset",
+        label: "Preset",
+        type: "select",
+        default: "particles",
+        options: [
+          { label: "Particles", value: "particles" },
+          { label: "Waves", value: "waves" },
+          { label: "Floating Shapes", value: "shapes" },
+          { label: "Starfield", value: "stars" },
+          { label: "Network / Constellation", value: "network" },
+          { label: "Orbit Rings", value: "rings" },
+        ],
+      },
+      {
+        key: "color",
+        label: "Accent color",
+        type: "color",
+        default: "#60a5fa",
+      },
+      {
+        key: "secondColor",
+        label: "Second color (stars/network/rings/shapes)",
+        type: "color",
+      },
+      {
+        key: "density",
+        label: "Density",
+        type: "number",
+        default: 80,
+        min: 10,
+        max: 400,
+      },
+      {
+        key: "speed",
+        label: "Speed",
+        type: "number",
+        default: 1,
+        min: 0.1,
+        max: 5,
+        step: 0.1,
+      },
+      {
+        key: "mouseFollow",
+        label: "Follow pointer (depth parallax)",
+        type: "boolean",
+        default: false,
+      },
+      {
+        key: "bgOpacity",
+        label: "Animation opacity",
+        type: "number",
+        default: 1,
+        min: 0.1,
+        max: 1,
+        step: 0.05,
+      },
+      { key: "heading", label: "Heading", type: "text" },
+      { key: "subheading", label: "Subheading", type: "textarea" },
+      { key: "buttonText", label: "Button text", type: "text" },
+      { key: "buttonHref", label: "Button link", type: "url" },
+    ],
+  },
+  {
+    type: "mapEmbed",
+    label: "Map",
+    icon: "MapPin",
+    category: "Interactive",
+    allowsChildren: false,
+    defaultProps: { lat: 23.8103, lng: 90.4125, zoom: 13, embedUrl: "" },
+    defaultStyle: { minHeight: "400px" },
+    fields: [
+      { key: "lat", label: "Latitude", type: "number" },
+      { key: "lng", label: "Longitude", type: "number" },
+      {
+        key: "zoom",
+        label: "Zoom",
+        type: "number",
+        min: 1,
+        max: 20,
+        default: 13,
+      },
+      {
+        key: "embedUrl",
+        label: "Custom embed URL (overrides lat/lng)",
+        type: "url",
+        placeholder: "https://www.google.com/maps/embed?...",
+      },
+    ],
+  },
+  {
+    type: "buttonGroup",
+    label: "Buttons",
+    icon: "MousePointerClick",
+    category: "Interactive",
+    allowsChildren: false,
+    defaultProps: {
+      buttons: [{ text: "Click me", href: "#", variant: "primary" }],
+    },
+    defaultStyle: { paddingY: "24px", paddingX: "24px", textAlign: "center" },
+    fields: [
+      {
+        key: "buttons",
+        label: "Buttons",
+        type: "array",
+        default: [],
+        itemFields: buttonItemFields,
+      },
+    ],
+  },
+  {
+    type: "gallery",
+    label: "Gallery",
+    icon: "LayoutGrid",
+    category: "Media",
+    allowsChildren: false,
+    defaultProps: { columns: 3, images: [] },
+    defaultStyle: { paddingY: "48px", paddingX: "24px" },
+    fields: [
+      {
+        key: "columns",
+        label: "Columns",
+        type: "number",
+        default: 3,
+        min: 1,
+        max: 6,
+      },
+      {
+        key: "images",
+        label: "Images",
+        type: "array",
+        default: [],
+        itemFields: [
+          { key: "src", label: "Image", type: "image" },
+          { key: "alt", label: "Alt text", type: "text" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "cta",
+    label: "Call To Action",
+    icon: "Megaphone",
+    category: "Content",
+    allowsChildren: true,
+    defaultProps: {
+      heading: "Ready to get started?",
+      subheading: "Join us today.",
+      buttonText: "Contact Us",
+      buttonHref: "#",
+    },
+    defaultStyle: {
+      backgroundColor: "#2563eb",
+      textColor: "#ffffff",
+      paddingY: "72px",
+      paddingX: "24px",
+      textAlign: "center",
+    },
+    fields: [
+      { key: "heading", label: "Heading", type: "text" },
+      { key: "subheading", label: "Subheading", type: "textarea" },
+      { key: "buttonText", label: "Button text", type: "text" },
+      { key: "buttonHref", label: "Button link", type: "url" },
+    ],
+  },
+  {
+    type: "countdown",
+    label: "Countdown",
+    icon: "Timer",
+    category: "Interactive",
+    allowsChildren: false,
+    defaultProps: {
+      heading: "Time Remaining",
+      // Filled in with "30 days from now" at creation time — see createNode in tree.ts.
+      targetDate: "",
+      expiredText: "This deadline has passed.",
+      buttonText: "",
+      buttonHref: "",
+    },
+    defaultStyle: {
+      backgroundColor: "#0f172a",
+      textColor: "#ffffff",
+      paddingY: "64px",
+      paddingX: "24px",
+      textAlign: "center",
+    },
+    fields: [
+      { key: "heading", label: "Heading", type: "text" },
+      { key: "targetDate", label: "Count down to", type: "datetime" },
+      { key: "expiredText", label: "Text shown after it passes", type: "text" },
+      { key: "buttonText", label: "Button text (optional)", type: "text" },
+      { key: "buttonHref", label: "Button link", type: "url" },
+    ],
+  },
+  {
+    type: "stats",
+    label: "Stats / Counters",
+    icon: "TrendingUp",
+    category: "Content",
+    allowsChildren: false,
+    defaultProps: {
+      columns: 3,
+      items: [
+        { value: "500+", label: "Charities Supported" },
+        { value: "$2M", label: "Raised This Year" },
+        { value: "40", label: "Countries Reached" },
+      ],
+    },
+    defaultStyle: { paddingY: "64px", paddingX: "24px", textAlign: "center" },
+    fields: [
+      {
+        key: "columns",
+        label: "Columns",
+        type: "number",
+        default: 3,
+        min: 2,
+        max: 4,
+      },
+      {
+        key: "items",
+        label: "Stats",
+        type: "array",
+        default: [],
+        itemFields: [
+          {
+            key: "value",
+            label: "Value (e.g. 500+, $2M, 40)",
+            type: "text",
+            default: "100",
+          },
+          { key: "label", label: "Label", type: "text", default: "Label" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "cardGrid",
+    label: "Card Grid",
+    icon: "LayoutList",
+    category: "Content",
+    allowsChildren: false,
+    defaultProps: {
+      heading: "Latest News",
+      columns: 3,
+      cards: [
+        {
+          image: "",
+          title: "Card title",
+          excerpt: "A short description of this card goes here.",
+          buttonText: "Read more",
+          href: "#",
+        },
+      ],
+    },
+    defaultStyle: { paddingY: "64px", paddingX: "24px" },
+    fields: [
+      { key: "heading", label: "Section heading", type: "text" },
+      {
+        key: "columns",
+        label: "Columns",
+        type: "number",
+        default: 3,
+        min: 1,
+        max: 4,
+      },
+      {
+        key: "imageHeight",
+        label: "Card image height (e.g. 160px)",
+        type: "text",
+        placeholder: "160px",
+      },
+      {
+        key: "cards",
+        label: "Cards",
+        type: "array",
+        default: [],
+        itemFields: [
+          { key: "image", label: "Image", type: "image" },
+          {
+            key: "icon",
+            label: "Icon (used when no image is set)",
+            type: "text",
+            placeholder: "e.g. Globe2 — any lucide-react icon name",
+          },
+          { key: "title", label: "Title", type: "text" },
+          { key: "excerpt", label: "Excerpt", type: "textarea" },
+          {
+            key: "buttonText",
+            label: "Link text",
+            type: "text",
+            default: "Read more",
+          },
+          { key: "href", label: "Link URL", type: "url", default: "#" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "accordion",
+    label: "Accordion / FAQ",
+    icon: "ChevronDown",
+    category: "Content",
+    allowsChildren: false,
+    defaultProps: {
+      heading: "Frequently Asked Questions",
+      items: [{ question: "Question goes here?", answer: "Answer goes here." }],
+    },
+    defaultStyle: { paddingY: "64px", paddingX: "24px" },
+    fields: [
+      { key: "heading", label: "Section heading", type: "text" },
+      {
+        key: "items",
+        label: "Questions",
+        type: "array",
+        default: [],
+        itemFields: [
+          {
+            key: "question",
+            label: "Question",
+            type: "text",
+            default: "Question?",
+          },
+          {
+            key: "answer",
+            label: "Answer",
+            type: "textarea",
+            default: "Answer.",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: "collectionList",
+    label: "Collection List",
+    icon: "Newspaper",
+    category: "Content",
+    allowsChildren: false,
+    defaultProps: {
+      collectionSlug: "",
+      columns: 3,
+      limit: 6,
+      showExcerpt: true,
+      showDate: true,
+    },
+    defaultStyle: { paddingY: "64px", paddingX: "24px" },
+    fields: [
+      {
+        key: "collectionSlug",
+        label: "Collection slug",
+        type: "text",
+        placeholder: "e.g. blog",
+      },
+      {
+        key: "columns",
+        label: "Columns",
+        type: "number",
+        default: 3,
+        min: 1,
+        max: 4,
+      },
+      {
+        key: "limit",
+        label: "Max items",
+        type: "number",
+        default: 6,
+        min: 1,
+        max: 50,
+      },
+      {
+        key: "showExcerpt",
+        label: "Show excerpts",
+        type: "boolean",
+        default: true,
+      },
+      {
+        key: "showDate",
+        label: "Show publish dates",
+        type: "boolean",
+        default: true,
+      },
+    ],
+  },
+  {
+    type: "languageSwitcher",
+    label: "Language Switcher",
+    icon: "Languages",
+    category: "Interactive",
+    allowsChildren: false,
+    defaultProps: { compact: false },
+    defaultStyle: { paddingY: "12px", paddingX: "24px", textAlign: "center" },
+    fields: [
+      {
+        key: "compact",
+        label: "Compact (locale codes like EN/ES instead of names)",
+        type: "boolean",
+        default: false,
+      },
+    ],
+  },
+  {
+    type: "marquee",
+    label: "Marquee / Ticker",
+    icon: "MoveRight",
+    category: "Content",
+    allowsChildren: false,
+    defaultProps: {
+      speed: 20,
+      direction: "left",
+      pauseOnHover: true,
+      items: [
+        { text: "Partner One", image: "" },
+        { text: "Partner Two", image: "" },
+        { text: "Partner Three", image: "" },
+        { text: "Partner Four", image: "" },
+      ],
+    },
+    defaultStyle: { paddingY: "32px", paddingX: "0px" },
+    fields: [
+      {
+        key: "speed",
+        label: "Loop duration (seconds)",
+        type: "number",
+        default: 20,
+        min: 4,
+        max: 120,
+      },
+      {
+        key: "direction",
+        label: "Direction",
+        type: "select",
+        default: "left",
+        options: [
+          { label: "Right to left", value: "left" },
+          { label: "Left to right", value: "right" },
+        ],
+      },
+      {
+        key: "pauseOnHover",
+        label: "Pause on hover",
+        type: "boolean",
+        default: true,
+      },
+      {
+        key: "items",
+        label: "Items",
+        type: "array",
+        default: [],
+        itemFields: [
+          {
+            key: "text",
+            label: "Text (used when no image)",
+            type: "text",
+            default: "Item",
+          },
+          { key: "image", label: "Logo / image", type: "image" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "tabs",
+    label: "Tabs",
+    icon: "PanelsTopLeft",
+    category: "Content",
+    allowsChildren: false,
+    defaultProps: {
+      tabTransition: "fade",
+      items: [
+        { label: "Tab 1", content: "<p>First tab content.</p>" },
+        { label: "Tab 2", content: "<p>Second tab content.</p>" },
+      ],
+    },
+    defaultStyle: { paddingY: "48px", paddingX: "24px" },
+    fields: [
+      {
+        key: "tabTransition",
+        label: "Switch animation",
+        type: "select",
+        default: "fade",
+        options: [
+          { label: "None", value: "none" },
+          { label: "Fade", value: "fade" },
+          { label: "Slide", value: "slide" },
+        ],
+      },
+      {
+        key: "items",
+        label: "Tabs",
+        type: "array",
+        default: [],
+        itemFields: [
+          { key: "label", label: "Tab label", type: "text", default: "Tab" },
+          { key: "content", label: "Content", type: "richtext", default: "" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "contactForm",
+    label: "Contact Form",
+    icon: "Mail",
+    category: "Interactive",
+    allowsChildren: false,
+    defaultProps: {
+      heading: "Get in Touch",
+      subheading: "",
+      formName: "Contact",
+      fields: [
+        { key: "name", label: "Name", fieldType: "text", required: true },
+        { key: "email", label: "Email", fieldType: "email", required: true },
+        {
+          key: "phone",
+          label: "Telephone",
+          fieldType: "text",
+          required: false,
+        },
+        {
+          key: "message",
+          label: "Details",
+          fieldType: "textarea",
+          required: true,
+        },
+      ],
+      submitButtonText: "Send Message",
+      successMessage:
+        "Thanks — we've received your message and will be in touch soon.",
+    },
+    defaultStyle: { paddingY: "64px", paddingX: "24px" },
+    fields: [
+      { key: "heading", label: "Heading", type: "text" },
+      { key: "subheading", label: "Subheading", type: "textarea" },
+      {
+        key: "formName",
+        label: "Form name (used to tell submissions apart in the admin)",
+        type: "text",
+        default: "Contact",
+      },
+      {
+        key: "fields",
+        label: "Form fields",
+        type: "array",
+        default: [],
+        itemFields: [
+          {
+            key: "label",
+            label: "Field label",
+            type: "text",
+            default: "Field",
+          },
+          {
+            key: "key",
+            label: "Field key (unique, no spaces)",
+            type: "text",
+            default: "field",
+          },
+          {
+            key: "fieldType",
+            label: "Input type",
+            type: "select",
+            default: "text",
+            options: [
+              { label: "Text", value: "text" },
+              { label: "Email", value: "email" },
+              { label: "Phone", value: "tel" },
+              { label: "Paragraph", value: "textarea" },
+            ],
+          },
+          {
+            key: "required",
+            label: "Required",
+            type: "boolean",
+            default: false,
+          },
+        ],
+      },
+      { key: "submitButtonText", label: "Submit button text", type: "text" },
+      {
+        key: "successMessage",
+        label: "Message shown after submitting",
+        type: "textarea",
+      },
+    ],
+  },
+  {
+    type: "siteSearch",
+    label: "Site Search",
+    icon: "Search",
+    category: "Interactive",
+    allowsChildren: false,
+    defaultProps: { heading: "Search", placeholder: "Search this site…" },
+    defaultStyle: { paddingY: "48px", paddingX: "24px" },
+    fields: [
+      { key: "heading", label: "Heading", type: "text", default: "Search" },
+      {
+        key: "placeholder",
+        label: "Search placeholder",
+        type: "text",
+        default: "Search this site…",
+      },
+    ],
+  },
+  {
+    type: "embed",
+    label: "Embed / Custom HTML",
+    icon: "Code",
+    category: "Interactive",
+    allowsChildren: false,
+    defaultProps: {
+      mode: "iframe",
+      url: "",
+      html: "",
+      height: "400px",
+      title: "Embedded content",
+    },
+    defaultStyle: { paddingY: "32px", paddingX: "24px" },
+    fields: [
+      {
+        key: "mode",
+        label: "Embed mode",
+        type: "select",
+        default: "iframe",
+        options: [
+          { label: "iframe (URL)", value: "iframe" },
+          { label: "Custom HTML", value: "html" },
+        ],
+      },
+      {
+        key: "url",
+        label: "Embed URL (iframe mode)",
+        type: "url",
+        default: "",
+      },
+      {
+        key: "html",
+        label: "Custom HTML (HTML mode)",
+        type: "textarea",
+        default: "",
+      },
+      { key: "height", label: "Height", type: "text", default: "400px" },
+      {
+        key: "title",
+        label: "Accessible title (iframe)",
+        type: "text",
+        default: "Embedded content",
+      },
+    ],
+  },
+  {
+    type: "testimonial",
+    label: "Testimonials",
+    icon: "Quote",
+    category: "Content",
+    allowsChildren: false,
+    defaultProps: {
+      heading: "What people say",
+      layout: "grid",
+      columns: 3,
+      items: [
+        { avatar: "", name: "Jane Doe", role: "CEO, Acme Inc.", quote: "This product changed how we work.", rating: 5 },
+      ],
+    },
+    defaultStyle: { paddingY: "64px", paddingX: "24px" },
+    fields: [
+      { key: "heading", label: "Section heading", type: "text" },
+      {
+        key: "layout",
+        label: "Layout",
+        type: "select",
+        default: "grid",
+        options: [
+          { label: "Grid", value: "grid" },
+          { label: "Carousel", value: "carousel" },
+        ],
+      },
+      { key: "columns", label: "Columns (grid layout)", type: "number", default: 3, min: 1, max: 4 },
+      {
+        key: "items",
+        label: "Testimonials",
+        type: "array",
+        default: [],
+        itemFields: [
+          { key: "avatar", label: "Photo", type: "image" },
+          { key: "name", label: "Name", type: "text" },
+          { key: "role", label: "Role / company", type: "text" },
+          { key: "quote", label: "Quote", type: "textarea" },
+          { key: "rating", label: "Rating (1-5, optional)", type: "number", min: 1, max: 5 },
+        ],
+      },
+    ],
+  },
+  {
+    type: "pricingTable",
+    label: "Pricing Table",
+    icon: "Wallet",
+    category: "Content",
+    allowsChildren: false,
+    defaultProps: {
+      heading: "Simple, transparent pricing",
+      tiers: [
+        {
+          name: "Starter",
+          price: "$9",
+          period: "/mo",
+          features: "1 project\nCommunity support",
+          buttonText: "Get started",
+          buttonHref: "#",
+          highlighted: false,
+        },
+        {
+          name: "Pro",
+          price: "$29",
+          period: "/mo",
+          features: "Unlimited projects\nPriority support\nAdvanced analytics",
+          buttonText: "Get started",
+          buttonHref: "#",
+          highlighted: true,
+        },
+      ],
+    },
+    defaultStyle: { paddingY: "64px", paddingX: "24px" },
+    fields: [
+      { key: "heading", label: "Section heading", type: "text" },
+      {
+        key: "tiers",
+        label: "Pricing tiers",
+        type: "array",
+        default: [],
+        itemFields: [
+          { key: "name", label: "Plan name", type: "text" },
+          { key: "price", label: "Price (e.g. $29)", type: "text" },
+          { key: "period", label: "Billing period (e.g. /mo)", type: "text" },
+          { key: "features", label: "Features (one per line)", type: "textarea" },
+          { key: "buttonText", label: "Button text", type: "text", default: "Get started" },
+          { key: "buttonHref", label: "Button link", type: "url", default: "#" },
+          { key: "highlighted", label: "Highlight this tier", type: "boolean", default: false },
+        ],
+      },
+    ],
+  },
+  {
+    type: "videoEmbed",
+    label: "Video",
+    icon: "PlayCircle",
+    category: "Media",
+    allowsChildren: false,
+    defaultProps: {
+      url: "",
+      thumbnail: "",
+      aspectRatio: "16/9",
+    },
+    defaultStyle: { paddingY: "48px", paddingX: "24px" },
+    fields: [
+      { key: "url", label: "YouTube / Vimeo / MP4 URL", type: "url", placeholder: "https://www.youtube.com/watch?v=..." },
+      { key: "thumbnail", label: "Custom thumbnail (optional)", type: "image" },
+      {
+        key: "aspectRatio",
+        label: "Aspect ratio",
+        type: "select",
+        default: "16/9",
+        options: [
+          { label: "16:9 (widescreen)", value: "16/9" },
+          { label: "4:3 (classic)", value: "4/3" },
+          { label: "1:1 (square)", value: "1/1" },
+          { label: "9:16 (vertical)", value: "9/16" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "teamGrid",
+    label: "Team",
+    icon: "Users",
+    category: "Content",
+    allowsChildren: false,
+    defaultProps: {
+      heading: "Meet the team",
+      columns: 4,
+      members: [{ photo: "", name: "Alex Rivera", role: "Founder", bio: "", linkedinUrl: "", twitterUrl: "" }],
+    },
+    defaultStyle: { paddingY: "64px", paddingX: "24px", textAlign: "center" },
+    fields: [
+      { key: "heading", label: "Section heading", type: "text" },
+      { key: "columns", label: "Columns", type: "number", default: 4, min: 1, max: 5 },
+      {
+        key: "members",
+        label: "Team members",
+        type: "array",
+        default: [],
+        itemFields: [
+          { key: "photo", label: "Photo", type: "image" },
+          { key: "name", label: "Name", type: "text" },
+          { key: "role", label: "Role", type: "text" },
+          { key: "bio", label: "Short bio (optional)", type: "textarea" },
+          { key: "linkedinUrl", label: "LinkedIn URL (optional)", type: "url" },
+          { key: "twitterUrl", label: "Twitter/X URL (optional)", type: "url" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "logoCloud",
+    label: "Logo Cloud",
+    icon: "Building2",
+    category: "Content",
+    allowsChildren: false,
+    defaultProps: {
+      heading: "Trusted by teams at",
+      layout: "grid",
+      grayscale: true,
+      logos: [{ image: "", name: "Client", href: "" }],
+    },
+    defaultStyle: { paddingY: "48px", paddingX: "24px", textAlign: "center" },
+    fields: [
+      { key: "heading", label: "Section heading (optional)", type: "text" },
+      {
+        key: "layout",
+        label: "Layout",
+        type: "select",
+        default: "grid",
+        options: [
+          { label: "Static grid", value: "grid" },
+          { label: "Auto-scrolling row", value: "scroll" },
+        ],
+      },
+      { key: "grayscale", label: "Grayscale until hovered", type: "boolean", default: true },
+      {
+        key: "logos",
+        label: "Logos",
+        type: "array",
+        default: [],
+        itemFields: [
+          { key: "image", label: "Logo image", type: "image" },
+          { key: "name", label: "Company name (alt text)", type: "text" },
+          { key: "href", label: "Link (optional)", type: "url" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "timeline",
+    label: "Timeline",
+    icon: "GitCommitVertical",
+    category: "Content",
+    allowsChildren: false,
+    defaultProps: {
+      heading: "Our journey",
+      items: [{ date: "2020", title: "Founded", description: "The company was founded." }],
+    },
+    defaultStyle: { paddingY: "64px", paddingX: "24px" },
+    fields: [
+      { key: "heading", label: "Section heading", type: "text" },
+      {
+        key: "items",
+        label: "Timeline events",
+        type: "array",
+        default: [],
+        itemFields: [
+          { key: "date", label: "Date / label", type: "text" },
+          { key: "title", label: "Title", type: "text" },
+          { key: "description", label: "Description", type: "textarea" },
+        ],
+      },
+    ],
+  },
+  {
+    type: "divider",
+    label: "Divider",
+    icon: "SeparatorHorizontal",
+    category: "Layout",
+    allowsChildren: false,
+    defaultProps: { lineStyle: "solid", thickness: "1px", color: "#e2e8f0", width: "100%" },
+    defaultStyle: { paddingY: "24px" },
+    fields: [
+      {
+        key: "lineStyle",
+        label: "Line style",
+        type: "select",
+        default: "solid",
+        options: [
+          { label: "Solid", value: "solid" },
+          { label: "Dashed", value: "dashed" },
+          { label: "Dotted", value: "dotted" },
+        ],
+      },
+      { key: "thickness", label: "Thickness", type: "text", default: "1px", placeholder: "1px" },
+      { key: "color", label: "Line color", type: "color", default: "#e2e8f0" },
+      { key: "width", label: "Width", type: "text", default: "100%", placeholder: "100%, 300px..." },
+    ],
+  },
+  {
+    type: "spacer",
+    label: "Spacer",
+    icon: "MoveVertical",
+    category: "Layout",
+    allowsChildren: false,
+    defaultProps: { height: "48px" },
+    defaultStyle: {},
+    fields: [{ key: "height", label: "Height", type: "text", default: "48px", placeholder: "e.g. 48px" }],
+  },
+  {
+    type: "beforeAfter",
+    label: "Before / After",
+    icon: "SplitSquareHorizontal",
+    category: "Media",
+    allowsChildren: false,
+    defaultProps: {
+      beforeImage: "",
+      afterImage: "",
+      beforeLabel: "Before",
+      afterLabel: "After",
+    },
+    defaultStyle: { paddingY: "48px", paddingX: "24px" },
+    fields: [
+      { key: "beforeImage", label: "Before image", type: "image" },
+      { key: "afterImage", label: "After image", type: "image" },
+      { key: "beforeLabel", label: "Before label", type: "text", default: "Before" },
+      { key: "afterLabel", label: "After label", type: "text", default: "After" },
+    ],
+  },
+];
+
+export function getComponentDefinition(
+  type: string,
+): ComponentDefinition | undefined {
+  return COMPONENT_REGISTRY.find((c) => c.type === type);
+}
+
+export const COMPONENT_CATEGORIES: ComponentCategory[] = [
+  "Layout",
+  "Content",
+  "Media",
+  "Interactive",
+];