@drawnagency/primitives 0.1.66 → 0.1.67

package/dist/chunk-4VMAZZXT.js

@@ -0,0 +1,968 @@
+import {
+  brandGuideSectionDefs,
+  pluralize,
+  stripHtmlToPlainText,
+  truncate
+} from "./chunk-KM6HOW4H.js";
+import {
+  DeleteButton,
+  DragHandle,
+  Popover,
+  PopoverItem,
+  SettingsButton,
+  SettingsForm,
+  buildBlockDragData,
+  buildBlockDropData,
+  canDropBlock,
+  isBlockDragData
+} from "./chunk-2BHPWO7M.js";
+import {
+  EditableRichText,
+  defineHeadingSection
+} from "./chunk-WJ7RZ6CC.js";
+import {
+  EditablePlainText,
+  MAX_CONTAINER_COLUMNS,
+  MediaBlock,
+  colSpanClass,
+  containerGridClass,
+  spacerHiddenClass
+} from "./chunk-XNGG5AGI.js";
+import {
+  DEFAULT_LINK,
+  LinkValueSchema
+} from "./chunk-3DCG4DNU.js";
+import {
+  sanitizeHtml
+} from "./chunk-53DKVAB6.js";
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+import {
+  getSectionSchema
+} from "./chunk-TZQPOR5A.js";
+import {
+  SingleMediaReferenceSchema
+} from "./chunk-TEYTLQVH.js";
+import {
+  defineSection,
+  getSection
+} from "./chunk-VKAGMEKE.js";
+
+// src/components/sections/LinkHeading/index.tsx
+import { Heading1 } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+var LinkHeading_default = defineHeadingSection({
+  type: "link_heading",
+  label: "Link Heading",
+  icon: /* @__PURE__ */ jsx(Heading1, { size: 18 }),
+  navRole: "h1",
+  tag: "h2",
+  placeholder: "Section heading",
+  defaultHeading: "New Section",
+  authoringNote: "A top-level section heading (renders an <h2>, reported to navigation as h1). Use it to begin a major named section of the guide; its text becomes a navigation entry."
+});
+
+// src/components/sections/SubHeading/index.tsx
+import { Heading2 } from "lucide-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SubHeading_default = defineHeadingSection({
+  type: "sub_heading",
+  label: "Sub Heading",
+  icon: /* @__PURE__ */ jsx2(Heading2, { size: 18 }),
+  navRole: "h2",
+  tag: "h3",
+  placeholder: "Sub heading",
+  defaultHeading: "New Sub Heading",
+  navExclusion: true,
+  authoringNote: "A second-level heading (renders <h3>, nav level h2). Use under a Link Heading to divide a section; toggle Exclude from navigation to keep it out of the nav tree."
+});
+
+// src/components/sections/SubSubHeading/index.tsx
+import { Heading3 } from "lucide-react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SubSubHeading_default = defineHeadingSection({
+  type: "sub_sub_heading",
+  label: "Sub Sub Heading",
+  icon: /* @__PURE__ */ jsx3(Heading3, { size: 18 }),
+  navRole: "h3",
+  tag: "h4",
+  placeholder: "Sub sub heading",
+  defaultHeading: "New Sub Sub Heading",
+  navExclusion: true,
+  authoringNote: "A third-level heading (renders <h4>, nav level h3). Use for the finest-grained labeled subsection; toggle Exclude from navigation to omit it from the nav tree."
+});
+
+// src/components/sections/Prose/index.tsx
+import { z } from "zod";
+import { AlignLeft } from "lucide-react";
+
+// src/components/sections/Prose/Prose.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Prose({ body, onChange }) {
+  if (onChange) {
+    return /* @__PURE__ */ jsx4("div", { className: "prose-content", children: /* @__PURE__ */ jsx4(
+      EditableRichText,
+      {
+        value: body,
+        onChange: (html) => onChange({ type: "prose", content: { body: html } }),
+        isEditMode: true,
+        preset: "rich",
+        placeholder: "Start writing..."
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: "prose-content",
+      dangerouslySetInnerHTML: { __html: sanitizeHtml(body) }
+    }
+  );
+}
+
+// src/components/sections/Prose/index.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var schema = z.object({
+  type: z.literal("prose"),
+  content: z.object({
+    body: z.string().describe(
+      "Rich-text HTML for the paragraph block. Author with the editor; stored as sanitized HTML."
+    )
+  })
+});
+var Prose_default = defineSection({
+  type: "prose",
+  label: "Prose",
+  icon: /* @__PURE__ */ jsx5(AlignLeft, { size: 18 }),
+  schema,
+  authoringNote: "A block of rich-text body copy (paragraphs, lists, inline emphasis, links). Use for any explanatory prose; author with the editor, not raw HTML.",
+  richTextFields: ["body"],
+  component: ({ content, onChange }) => /* @__PURE__ */ jsx5(Prose, { body: content.content.body, onChange: onChange ? (c) => onChange(c) : void 0 }),
+  defaults: () => ({ type: "prose", content: { body: "<p></p>" } }),
+  getLabel: (content) => truncate(stripHtmlToPlainText(content.content.body), 60)
+});
+
+// src/components/sections/Media/index.tsx
+import { z as z2 } from "zod";
+import { Image as ImageIcon } from "lucide-react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var schema2 = z2.object({
+  type: z2.literal("media"),
+  content: z2.object({
+    ref: SingleMediaReferenceSchema.describe(
+      "The image or video asset to display (a media reference by id). Required."
+    ),
+    link: LinkValueSchema.describe(
+      "Optional link wrapping the media \u2014 an internal page or a safe external URL."
+    ).optional()
+  }),
+  options: z2.object({
+    square: z2.boolean().describe("When true, crop the media to a 1:1 square aspect ratio.").optional(),
+    showCaption: z2.boolean().describe("When true, render the asset's caption beneath it.").optional(),
+    border: z2.boolean().describe("When true, draw a border around the media.").optional(),
+    objectFit: z2.enum(["cover", "contain"]).describe("How the image fills its box: 'contain' (fit whole image) or 'cover' (fill and crop).").optional()
+  }).default({})
+});
+var Media_default = defineSection({
+  type: "media",
+  label: "Media",
+  icon: /* @__PURE__ */ jsx6(ImageIcon, { size: 18 }),
+  schema: schema2,
+  authoringNote: "A single image or video with optional caption and link. Use to show one asset; for several assets side by side, place multiple Media blocks inside a Container.",
+  component: ({ content, options, onChange }) => /* @__PURE__ */ jsx6(
+    MediaBlock,
+    {
+      refValue: content.content.ref,
+      options: options ?? {},
+      link: content.content.link,
+      isEditMode: !!onChange,
+      onRefChange: onChange ? (ref) => onChange({ ...content, content: { ...content.content, ref } }) : void 0
+    }
+  ),
+  defaults: () => ({
+    type: "media",
+    content: { ref: { type: "image", imageId: "" } },
+    options: {}
+  }),
+  getLabel: () => "Media",
+  getThumbnails: (content) => content.content.ref.imageId ? [{ type: "image", src: content.content.ref.imageId }] : [],
+  settings: {
+    square: { type: "checkbox", label: "Square aspect ratio", default: false },
+    showCaption: { type: "checkbox", label: "Show caption", default: false },
+    border: { type: "checkbox", label: "Border", default: false },
+    objectFit: {
+      type: "select",
+      label: "Image fit",
+      default: "contain",
+      options: [
+        { label: "Contain", value: "contain" },
+        { label: "Cover", value: "cover" }
+      ]
+    },
+    link: { type: "link", label: "Link", default: DEFAULT_LINK, target: "content" }
+  },
+  inheritableSettings: ["square", "showCaption", "border", "objectFit"],
+  settingsTabs: [
+    { label: "Display", fields: ["square", "showCaption", "border", "objectFit"] },
+    { label: "Link", fields: ["link"] }
+  ]
+});
+
+// src/components/sections/Button/index.tsx
+import { z as z3 } from "zod";
+import { RectangleHorizontal } from "lucide-react";
+
+// src/components/sections/Button/CTAButton.tsx
+import { Download } from "lucide-react";
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+function Button({ text, link, download, onChange }) {
+  const base = "inline-block rounded-md px-6 py-3 font-bold transition-colors";
+  const variant = "border-2 border-primary text-primary hover:bg-primary hover:text-primary-contrast";
+  if (onChange) {
+    return /* @__PURE__ */ jsxs("span", { className: cn(base, variant, "inline-flex items-center gap-2"), children: [
+      download && /* @__PURE__ */ jsx7(Download, { size: 16, className: "shrink-0" }),
+      /* @__PURE__ */ jsx7(
+        EditablePlainText,
+        {
+          tag: "span",
+          value: text,
+          onChange: (newText) => onChange({ type: "button", content: { text: newText, link, download } }),
+          isEditMode: true,
+          placeholder: "Button text"
+        }
+      )
+    ] });
+  }
+  const href = link && link.kind === "external" ? link.href : "";
+  const target = link?.target;
+  if (href) {
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href,
+        target,
+        download: download ? "" : void 0,
+        className: cn(base, variant, download && "inline-flex items-center gap-2"),
+        children: [
+          download && /* @__PURE__ */ jsx7(Download, { size: 16, className: "shrink-0" }),
+          text
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx7("button", { className: cn("cursor-pointer", base, variant), children: text });
+}
+
+// src/components/sections/Button/index.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var schema3 = z3.object({
+  type: z3.literal("button"),
+  content: z3.object({
+    text: z3.string().describe("The button label. Plain text, short (a few words)."),
+    link: LinkValueSchema.describe(
+      "Where the button points \u2014 an internal page or a safe external URL."
+    ).optional(),
+    download: z3.boolean().describe("When true, the link is treated as a file download rather than navigation.").optional()
+  })
+});
+var Button_default = defineSection({
+  type: "button",
+  label: "Button",
+  icon: /* @__PURE__ */ jsx8(RectangleHorizontal, { size: 18 }),
+  schema: schema3,
+  authoringNote: "A call-to-action button linking to an internal page or external URL, optionally as a file download. Use for a single prominent action.",
+  component: ({ content, onChange }) => /* @__PURE__ */ jsx8(
+    Button,
+    {
+      text: content.content.text,
+      link: content.content.link,
+      download: content.content.download,
+      onChange: onChange ? (c) => onChange(c) : void 0
+    }
+  ),
+  defaults: () => ({ type: "button", content: { text: "Button" } }),
+  getLabel: (content) => content.content.text,
+  settings: {
+    link: { type: "link", label: "Link", default: DEFAULT_LINK, target: "content" },
+    download: { type: "checkbox", label: "Download link", default: false, target: "content" }
+  }
+});
+
+// src/components/sections/Container/index.tsx
+import { z as z4 } from "zod";
+import { LayoutTemplate } from "lucide-react";
+
+// src/components/sections/Container/Container.tsx
+import "react";
+
+// src/components/editor/ChildBlockWrapper.tsx
+import { forwardRef } from "react";
+import { CopyPlus } from "lucide-react";
+
+// src/components/editor/ColSpanControl.tsx
+import { useRef, useState } from "react";
+import { Columns3 } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+function ColSpanControl({ colSpan, columns, onChange }) {
+  const buttonRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  if (columns <= 1) return null;
+  const current = Math.min(Math.max(colSpan, 1), columns);
+  return /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx9(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        "aria-label": "Column span",
+        "aria-haspopup": "true",
+        "aria-expanded": open,
+        onClick: () => setOpen((v) => !v),
+        className: "pointer-events-auto inline-flex cursor-pointer items-center gap-1 rounded p-1 text-xs text-base-contrast-light hover:text-primary",
+        children: /* @__PURE__ */ jsx9(Columns3, { size: 14 })
+      }
+    ),
+    /* @__PURE__ */ jsx9(Popover, { isOpen: open, onClose: () => setOpen(false), anchorRef: buttonRef, className: "min-w-28", children: /* @__PURE__ */ jsx9("ul", { role: "list", className: "py-1", children: Array.from({ length: columns }, (_, i) => i + 1).map((span) => /* @__PURE__ */ jsx9("li", { children: /* @__PURE__ */ jsxs2(
+      PopoverItem,
+      {
+        "aria-current": span === current,
+        onClick: () => {
+          onChange(span);
+          setOpen(false);
+        },
+        className: cn(span === current && "font-semibold text-primary"),
+        children: [
+          "Span ",
+          span
+        ]
+      }
+    ) }, span)) }) })
+  ] });
+}
+
+// src/components/editor/ChildBlockWrapper.tsx
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var ChildBlockWrapper = forwardRef(
+  function ChildBlockWrapper2({
+    label,
+    columns,
+    colSpan,
+    closestEdge,
+    isDragging,
+    hasSettings,
+    dragHandleRef,
+    onDelete,
+    onDuplicate,
+    onColSpanChange,
+    onOpenSettings,
+    children
+  }, ref) {
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ref,
+        className: cn(
+          "group/childblock relative h-full rounded-sm",
+          isDragging && "opacity-50",
+          "hover:outline hover:outline-2 hover:outline-primary/30"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs3("div", { className: "absolute top-0 left-0 -translate-x-full z-20 flex flex-col items-center gap-1 opacity-0 transition-opacity group-hover/childblock:opacity-100 group-focus-within/childblock:opacity-100 pointer-events-none", children: [
+            /* @__PURE__ */ jsx10("span", { className: "sr-only", children: label }),
+            /* @__PURE__ */ jsx10("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx10(DragHandle, { ref: dragHandleRef }) }),
+            /* @__PURE__ */ jsx10("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx10(ColSpanControl, { colSpan, columns, onChange: onColSpanChange }) }),
+            hasSettings && onOpenSettings && /* @__PURE__ */ jsx10("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx10(SettingsButton, { onClick: onOpenSettings }) }),
+            /* @__PURE__ */ jsx10("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx10(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Duplicate block",
+                onClick: onDuplicate,
+                className: "cursor-pointer rounded p-1 text-base-contrast-light hover:text-primary",
+                children: /* @__PURE__ */ jsx10(CopyPlus, { size: 16 })
+              }
+            ) }),
+            /* @__PURE__ */ jsx10("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx10(DeleteButton, { onDelete }) })
+          ] }),
+          closestEdge === "left" && /* @__PURE__ */ jsx10(
+            "div",
+            {
+              "data-drop-edge": "left",
+              className: "absolute bottom-0 left-0 top-0 z-10 w-0.5 -translate-x-1 bg-primary"
+            }
+          ),
+          closestEdge === "right" && /* @__PURE__ */ jsx10(
+            "div",
+            {
+              "data-drop-edge": "right",
+              className: "absolute bottom-0 right-0 top-0 z-10 w-0.5 translate-x-1 bg-primary"
+            }
+          ),
+          closestEdge === "top" && /* @__PURE__ */ jsx10("div", { "data-drop-edge": "top", className: "absolute left-0 right-0 top-0 z-10 h-0.5 -translate-y-1 bg-primary" }),
+          closestEdge === "bottom" && /* @__PURE__ */ jsx10("div", { "data-drop-edge": "bottom", className: "absolute left-0 right-0 bottom-0 z-10 h-0.5 translate-y-1 bg-primary" }),
+          children
+        ]
+      }
+    );
+  }
+);
+
+// src/hooks/useBlockDnd.ts
+import { useEffect, useRef as useRef2, useState as useState2 } from "react";
+function useBlockDnd({ blockId, containerId, index, isContainer, allowedEdges, enabled }) {
+  const dragRef = useRef2(null);
+  const handleRef = useRef2(null);
+  const [closestEdge, setClosestEdge] = useState2(null);
+  const [isDragging, setIsDragging] = useState2(false);
+  useEffect(() => {
+    const element = dragRef.current;
+    const handle = handleRef.current;
+    if (!element || !enabled) return;
+    let cleanup;
+    let cancelled = false;
+    Promise.all([
+      import("./adapter-HH47ZPGM.js"),
+      import("./closest-edge-EBOXL3YW.js")
+    ]).then(([{ draggable, dropTargetForElements }, { attachClosestEdge, extractClosestEdge }]) => {
+      if (cancelled) return;
+      const cleanupDraggable = draggable({
+        element,
+        dragHandle: handle ?? void 0,
+        getInitialData: () => buildBlockDragData({ blockId, containerId, index, isContainer }),
+        onGenerateDragPreview: () => {
+          element.style.opacity = "0.4";
+          requestAnimationFrame(() => {
+            element.style.opacity = "";
+          });
+        },
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false)
+      });
+      const cleanupDrop = dropTargetForElements({
+        element,
+        canDrop: ({ source }) => isBlockDragData(source.data) && canDropBlock(source.data, containerId),
+        getData: ({ input, element: el }) => attachClosestEdge(buildBlockDropData({ dropContainerId: containerId, index }), {
+          input,
+          element: el,
+          allowedEdges
+        }),
+        onDrag: ({ self, source, location }) => {
+          const innermost = location.current.dropTargets[0]?.element === self.element;
+          if (!innermost || !isBlockDragData(source.data) || source.data.blockId === blockId) {
+            setClosestEdge(null);
+            return;
+          }
+          setClosestEdge(extractClosestEdge(self.data));
+        },
+        onDragLeave: () => setClosestEdge(null),
+        onDrop: () => setClosestEdge(null)
+      });
+      cleanup = () => {
+        cleanupDraggable();
+        cleanupDrop();
+      };
+    });
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, [blockId, containerId, index, isContainer, enabled, allowedEdges]);
+  return { dragRef, handleRef, closestEdge, isDragging };
+}
+function useBlockDropZone({ containerId, index, toColumn, allowedEdges, enabled }) {
+  const dropRef = useRef2(null);
+  const [closestEdge, setClosestEdge] = useState2(null);
+  useEffect(() => {
+    const element = dropRef.current;
+    if (!element || !enabled) return;
+    let cleanup;
+    let cancelled = false;
+    Promise.all([
+      import("./adapter-HH47ZPGM.js"),
+      import("./closest-edge-EBOXL3YW.js")
+    ]).then(([{ dropTargetForElements }, { attachClosestEdge, extractClosestEdge }]) => {
+      if (cancelled) return;
+      cleanup = dropTargetForElements({
+        element,
+        canDrop: ({ source }) => isBlockDragData(source.data) && canDropBlock(source.data, containerId),
+        getData: ({ input, element: el }) => attachClosestEdge(buildBlockDropData({ dropContainerId: containerId, index, toColumn }), {
+          input,
+          element: el,
+          allowedEdges
+        }),
+        onDrag: ({ self, source, location }) => {
+          const innermost = location.current.dropTargets[0]?.element === self.element;
+          if (!innermost || !isBlockDragData(source.data)) {
+            setClosestEdge(null);
+            return;
+          }
+          setClosestEdge(extractClosestEdge(self.data));
+        },
+        onDragLeave: () => setClosestEdge(null),
+        onDrop: () => setClosestEdge(null)
+      });
+    });
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, [containerId, index, toColumn, enabled, allowedEdges]);
+  return { dropRef, closestEdge };
+}
+
+// src/lib/container-ops.ts
+function getContainerChildren(block) {
+  const content = block.content;
+  return Array.isArray(content?.children) ? content.children : [];
+}
+function withChildren(container, children) {
+  return { ...container, content: { ...container.content, children } };
+}
+function containerColumns(container) {
+  const n = container.content?.columns;
+  return typeof n === "number" && n >= 1 ? n : 1;
+}
+function removeChildAt(container, index) {
+  const children = getContainerChildren(container);
+  if (index < 0 || index >= children.length) return { container, removed: null };
+  const next = [...children];
+  const [removed] = next.splice(index, 1);
+  return { container: withChildren(container, next), removed };
+}
+function duplicateChildAt(container, index, newId2) {
+  const children = getContainerChildren(container);
+  if (index < 0 || index >= children.length) return container;
+  const clone = { ...JSON.parse(JSON.stringify(children[index])), id: newId2() };
+  const next = [...children];
+  next.splice(index + 1, 0, clone);
+  return withChildren(container, next);
+}
+function setChildColSpan(container, index, span) {
+  const children = getContainerChildren(container);
+  if (index < 0 || index >= children.length) return container;
+  const clamped = Math.max(1, Math.min(span, containerColumns(container)));
+  const next = children.map((child, i) => {
+    if (i !== index) return child;
+    if (clamped <= 1) {
+      const { layout: _drop, ...rest } = child;
+      return rest;
+    }
+    return { ...child, layout: { ...child.layout, colSpan: clamped } };
+  });
+  return withChildren(container, next);
+}
+function effectiveSpan(child, columns) {
+  return isSpacer(child) ? 1 : Math.min(child.layout?.colSpan ?? 1, columns);
+}
+function isSpacer(child) {
+  return child.type === "spacer";
+}
+function occupiedColumns(children, columns) {
+  return children.reduce((sum, c) => sum + effectiveSpan(c, columns), 0);
+}
+function trimTrailingSpacers(container) {
+  const children = getContainerChildren(container);
+  let end = children.length;
+  while (end > 0 && isSpacer(children[end - 1])) end--;
+  if (end === children.length) return container;
+  return withChildren(container, children.slice(0, end));
+}
+
+// src/components/sections/Container/Container.tsx
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+var ROW_EDGES = ["left", "right"];
+var COL_EDGES = ["top", "bottom"];
+function ContainerChild({
+  containerId,
+  index,
+  child,
+  columns,
+  flow,
+  cellClass,
+  label,
+  hasSettings,
+  mergedOptions,
+  isEditMode,
+  ChildComp,
+  onDelete,
+  onDuplicate,
+  onColSpanChange,
+  onOpenSettings,
+  onChildContentChange,
+  openModal
+}) {
+  const isContainer = Array.isArray(child.content?.children);
+  const { dragRef, handleRef, closestEdge, isDragging } = useBlockDnd({
+    blockId: child.id ?? `child-${index}`,
+    containerId,
+    index,
+    isContainer,
+    allowedEdges: flow === "column" ? COL_EDGES : ROW_EDGES,
+    enabled: true
+  });
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      ref: dragRef,
+      className: cellClass,
+      "data-child-index": index,
+      "data-child-id": child.id,
+      children: /* @__PURE__ */ jsx11(
+        ChildBlockWrapper,
+        {
+          label,
+          columns,
+          colSpan: Math.min(child.layout?.colSpan ?? 1, columns),
+          closestEdge,
+          isDragging,
+          hasSettings,
+          dragHandleRef: handleRef,
+          onDelete,
+          onDuplicate,
+          onColSpanChange,
+          onOpenSettings,
+          children: /* @__PURE__ */ jsx11(
+            ChildComp,
+            {
+              content: child,
+              options: mergedOptions,
+              isEditMode,
+              onChange: onChildContentChange,
+              openModal
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function EmptyColumnCell({
+  containerId,
+  targetColumn,
+  testId
+}) {
+  const { dropRef, closestEdge } = useBlockDropZone({
+    containerId,
+    index: 0,
+    toColumn: targetColumn,
+    allowedEdges: ROW_EDGES,
+    enabled: true
+  });
+  const active = closestEdge !== null;
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      ref: dropRef,
+      "data-empty-dropzone": true,
+      "data-testid": testId,
+      "data-target-column": targetColumn,
+      className: cn(
+        "flex min-h-20 items-center justify-center rounded-md border-2 border-dashed text-xs text-base-contrast-light/50",
+        active ? "border-primary" : "border-base-200"
+      ),
+      children: "Empty"
+    }
+  );
+}
+function newId() {
+  return typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : `child-${Math.random().toString(36).slice(2)}-${Date.now()}`;
+}
+function Container({ content, isEditMode, onChange, openModal }) {
+  const { columns, flow, childDefaults, children } = content.content;
+  const editable = isEditMode && !!onChange;
+  const container = {
+    id: content.id ?? "container",
+    type: "container",
+    content: content.content
+  };
+  const emit = (nextSection) => onChange?.({ ...content, content: nextSection.content });
+  const updateChild = (index, childContent) => {
+    const next = children.map((c, i) => i === index ? childContent : c);
+    onChange?.({ ...content, content: { ...content.content, children: next } });
+  };
+  const gridClass = cn(
+    "grid",
+    "gap-8",
+    containerGridClass[columns] ?? "grid-cols-1",
+    flow === "column" && "grid-flow-col"
+  );
+  if (!editable) {
+    return /* @__PURE__ */ jsx11("div", { className: "@container", children: /* @__PURE__ */ jsx11("div", { className: gridClass, children: children.map((child, index) => {
+      const def = getSection(child.type);
+      if (!def) return null;
+      const Child = def.component;
+      const span = child.layout?.colSpan ?? 1;
+      const childOptions = "options" in child ? child.options : void 0;
+      const mergedOptions = { ...childDefaults ?? {}, ...childOptions ?? {} };
+      const cellClass = cn(
+        colSpanClass[columns]?.[Math.min(span, columns)] || void 0,
+        child.type === "spacer" && spacerHiddenClass[columns]
+      );
+      return /* @__PURE__ */ jsx11("div", { className: cellClass, children: /* @__PURE__ */ jsx11(Child, { content: child, options: mergedOptions, isEditMode }) }, child.id ?? index);
+    }) }) });
+  }
+  function columnStartOf(index) {
+    let c = 0;
+    for (let i = 0; i < index; i++) {
+      c += isSpacer(children[i]) ? 1 : Math.min(children[i].layout?.colSpan ?? 1, columns);
+    }
+    return c + 1;
+  }
+  function renderEditChild(child, index) {
+    const def = getSection(child.type);
+    if (!def) return null;
+    if (isSpacer(child)) {
+      return /* @__PURE__ */ jsx11(
+        EmptyColumnCell,
+        {
+          containerId: container.id,
+          targetColumn: columnStartOf(index),
+          testId: "spacer-cell"
+        },
+        child.id ?? index
+      );
+    }
+    const span = child.layout?.colSpan ?? 1;
+    const childOptions = "options" in child ? child.options : void 0;
+    const mergedOptions = { ...childDefaults ?? {}, ...childOptions ?? {} };
+    const cellClass = colSpanClass[columns]?.[Math.min(span, columns)] || void 0;
+    const hasSettings = !!(def.settings || def.settingsForm) && !!openModal;
+    const onOpenSettings = hasSettings && openModal ? () => {
+      const childOpts = childOptions ?? {};
+      const childContent = child.content ?? {};
+      const seed = { ...childContent, ...childOpts };
+      const applyResult = (result) => updateChild(index, {
+        ...child,
+        content: { ...child.content, ...result.content },
+        options: { ...childOpts, ...result.options }
+      });
+      if (def.settingsForm) {
+        const CustomForm = def.settingsForm;
+        openModal(
+          `${def.label} Settings`,
+          /* @__PURE__ */ jsx11(CustomForm, { ...seed, onChange: applyResult })
+        );
+      } else if (def.settings) {
+        openModal(
+          `${def.label} Settings`,
+          /* @__PURE__ */ jsx11(
+            SettingsForm,
+            {
+              schema: def.settings,
+              values: seed,
+              onChange: applyResult,
+              tabs: def.settingsTabs
+            }
+          )
+        );
+      }
+    } : void 0;
+    return /* @__PURE__ */ jsx11(
+      ContainerChild,
+      {
+        containerId: container.id,
+        index,
+        child,
+        columns,
+        flow,
+        cellClass,
+        label: def.label,
+        hasSettings,
+        mergedOptions,
+        isEditMode,
+        ChildComp: def.component,
+        onDelete: () => emit(trimTrailingSpacers(removeChildAt(container, index).container)),
+        onDuplicate: () => emit(duplicateChildAt(container, index, newId)),
+        onColSpanChange: (s) => emit(setChildColSpan(container, index, s)),
+        onOpenSettings,
+        onChildContentChange: (c) => updateChild(index, c),
+        openModal
+      },
+      child.id ?? index
+    );
+  }
+  const occupied = occupiedColumns(children, columns);
+  const emptyCols = occupied < columns ? columns - occupied : 0;
+  return /* @__PURE__ */ jsx11("div", { className: "@container", children: /* @__PURE__ */ jsxs4("div", { className: gridClass, children: [
+    children.map(renderEditChild),
+    Array.from({ length: emptyCols }, (_, i) => /* @__PURE__ */ jsx11(
+      EmptyColumnCell,
+      {
+        containerId: container.id,
+        targetColumn: occupied + i + 1,
+        testId: "ghost-cell"
+      },
+      `ghost-${i}`
+    ))
+  ] }) });
+}
+
+// src/components/sections/Container/ContainerSettingsForm.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+function inheritableSchema(children) {
+  const out = {};
+  for (const child of children) {
+    const def = getSection(child.type);
+    if (!def?.settings || !def.inheritableSettings) continue;
+    for (const key of def.inheritableSettings) {
+      const field = def.settings[key];
+      if (field && !out[key]) out[key] = field;
+    }
+  }
+  return out;
+}
+function ContainerSettingsForm({
+  columns = 1,
+  flow = "row",
+  childDefaults = {},
+  children = [],
+  onChange
+}) {
+  const [layout, setLayout] = useState3({ columns, flow });
+  const [defaults, setDefaults] = useState3(childDefaults);
+  const childSchema = inheritableSchema(children);
+  const hasChildDefaults = Object.keys(childSchema).length > 0;
+  function emit(nextLayout, nextDefaults) {
+    onChange({ content: { ...nextLayout, childDefaults: nextDefaults }, options: {} });
+  }
+  const layoutSchema = {
+    columns: {
+      type: "select",
+      label: "Columns",
+      default: String(layout.columns),
+      target: "content",
+      coerce: "number",
+      options: Array.from({ length: MAX_CONTAINER_COLUMNS }, (_, i) => ({
+        label: String(i + 1),
+        value: String(i + 1)
+      }))
+    },
+    flow: {
+      type: "select",
+      label: "Flow",
+      default: layout.flow,
+      target: "content",
+      options: [
+        { label: "Rows (wrap across)", value: "row" },
+        { label: "Columns (fill down)", value: "column" }
+      ]
+    }
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs5("fieldset", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx12("legend", { className: "mb-2 text-sm font-semibold text-base-contrast", children: "Layout" }),
+      /* @__PURE__ */ jsx12(
+        SettingsForm,
+        {
+          schema: layoutSchema,
+          values: { columns: String(layout.columns), flow: layout.flow },
+          onChange: (result) => {
+            const next = {
+              columns: Number(result.content.columns ?? layout.columns),
+              flow: String(result.content.flow ?? layout.flow)
+            };
+            setLayout(next);
+            emit(next, defaults);
+          }
+        }
+      )
+    ] }),
+    hasChildDefaults && /* @__PURE__ */ jsxs5("fieldset", { className: "flex flex-col gap-4 border-t border-base-200 pt-4", children: [
+      /* @__PURE__ */ jsx12("legend", { className: "mb-2 text-sm font-semibold text-base-contrast", children: "Apply to all items" }),
+      /* @__PURE__ */ jsx12(
+        SettingsForm,
+        {
+          schema: childSchema,
+          values: defaults,
+          onChange: (result) => {
+            const next = { ...defaults, ...result.options };
+            setDefaults(next);
+            emit(layout, next);
+          }
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/sections/Container/index.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var schema4 = z4.object({
+  type: z4.literal("container"),
+  content: z4.object({
+    columns: z4.number().int().min(1).max(MAX_CONTAINER_COLUMNS).describe("Number of columns in the grid. Children flow across this many columns.").default(1),
+    flow: z4.enum(["row", "column"]).describe(
+      "Layout direction: 'row' (children flow left-to-right across columns) or 'column' (stacked)."
+    ).default("row"),
+    childDefaults: z4.record(z4.string(), z4.unknown()).describe("Optional default option values applied to child sections (inheritable settings only).").optional(),
+    // Recursive: children are full blocks. z.lazy defers evaluation to parse
+    // time, by which point every section schema (incl. container) is registered.
+    children: z4.array(z4.lazy(() => getSectionSchema())).default([])
+  }).transform((c) => ({
+    ...c,
+    children: c.children.map(
+      (child) => child.layout?.colSpan && child.layout.colSpan > c.columns ? { ...child, layout: { ...child.layout, colSpan: c.columns } } : child
+    )
+  }))
+});
+var Container_default = defineSection({
+  type: "container",
+  label: "Container",
+  icon: /* @__PURE__ */ jsx13(LayoutTemplate, { size: 18 }),
+  schema: schema4,
+  authoringNote: "A layout wrapper that arranges child sections into columns/rows. Use to place blocks side by side or build multi-column layouts; set columns and add children.",
+  component: ({ content, onChange, isEditMode, openModal }) => /* @__PURE__ */ jsx13(Container, { content, isEditMode: !!isEditMode, onChange, openModal }),
+  defaults: () => ({
+    type: "container",
+    content: { columns: 1, flow: "row", children: [] }
+  }),
+  getLabel: (content) => `Container (${pluralize(content.content.children.length, "item")})`,
+  settingsForm: ContainerSettingsForm
+});
+
+// src/components/sections/Spacer/index.tsx
+import { z as z5 } from "zod";
+import { SquareDashed } from "lucide-react";
+
+// src/components/sections/Spacer/Spacer.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function Spacer() {
+  return /* @__PURE__ */ jsx14("div", { "data-spacer": true, "aria-hidden": "true", className: "h-full" });
+}
+
+// src/components/sections/Spacer/index.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var schema5 = z5.object({
+  type: z5.literal("spacer"),
+  content: z5.object({}).default({})
+});
+var Spacer_default = defineSection({
+  type: "spacer",
+  label: "Spacer",
+  icon: /* @__PURE__ */ jsx15(SquareDashed, { size: 18 }),
+  schema: schema5,
+  authoringNote: "Vertical whitespace between sections. Use sparingly to add breathing room where default section spacing is insufficient.",
+  component: () => /* @__PURE__ */ jsx15(Spacer, {}),
+  defaults: () => ({ type: "spacer", content: {} })
+});
+
+// src/components/sections/core-sections.ts
+var coreSectionDefs = [
+  LinkHeading_default,
+  SubHeading_default,
+  SubSubHeading_default,
+  Prose_default,
+  Media_default,
+  Button_default,
+  Container_default,
+  Spacer_default
+];
+
+// src/components/sections/all-sections.ts
+var allSectionDefs = [...coreSectionDefs, ...brandGuideSectionDefs];
+
+export {
+  allSectionDefs
+};