@drawnagency/primitives 0.1.70 → 0.1.72

package/dist/{chunk-TYYCKVAW.js → chunk-UBK2IZ6G.js}

@@ -1,9 +1,25 @@
+import {
+  EditableRichText,
+  defineHeadingSection
+} from "./chunk-VHINNGIF.js";
+import {
+  embedUrl
+} from "./chunk-RBTSUR5V.js";
 import {
   brandGuideSectionDefs,
   pluralize,
   stripHtmlToPlainText,
   truncate
-} from "./chunk-VVK6ZRCN.js";
+} from "./chunk-2HZB675H.js";
+import {
+  EditablePlainText,
+  ImageDropZone,
+  MAX_CONTAINER_COLUMNS,
+  MediaBlock,
+  colSpanClass,
+  containerGridClass,
+  spacerHiddenClass
+} from "./chunk-WCALKWPO.js";
 import {
   DeleteButton,
   DragHandle,
@@ -15,23 +31,15 @@ import {
   buildBlockDropData,
   canDropBlock,
   isBlockDragData
-} from "./chunk-2BHPWO7M.js";
+} from "./chunk-BTGHF3SW.js";
 import {
-  EditableRichText,
-  defineHeadingSection
-} from "./chunk-WXVKX6PY.js";
-import {
-  EditablePlainText,
-  MAX_CONTAINER_COLUMNS,
-  MediaBlock,
-  colSpanClass,
-  containerGridClass,
-  spacerHiddenClass
-} from "./chunk-KWBM27UR.js";
+  useMediaLibrary,
+  useResolvedMedia
+} from "./chunk-7SIZ2LV5.js";
 import {
   DEFAULT_LINK,
   LinkValueSchema
-} from "./chunk-3DCG4DNU.js";
+} from "./chunk-PZJL2S3Z.js";
 import {
   sanitizeHtml
 } from "./chunk-53DKVAB6.js";
@@ -41,13 +49,13 @@ import {
 import {
   getSectionSchema
 } from "./chunk-TZQPOR5A.js";
-import {
-  SingleMediaReferenceSchema
-} from "./chunk-QKOIEWZ4.js";
 import {
   defineSection,
   getSection
 } from "./chunk-VKAGMEKE.js";
+import {
+  SingleMediaReferenceSchema
+} from "./chunk-SWIHUIFT.js";
 
 // src/components/sections/LinkHeading/index.tsx
 import { Heading1 } from "lucide-react";
@@ -209,20 +217,191 @@ var Media_default = defineSection({
   ]
 });
 
-// src/components/sections/Button/index.tsx
+// src/components/sections/Video/index.tsx
 import { z as z3 } from "zod";
+import { Clapperboard } from "lucide-react";
+
+// src/components/sections/Video/VideoBlock.tsx
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+function VideoBlock({ source, caption, options, isEditMode, onSourceChange, onCaptionChange }) {
+  const mediaLibrary = useMediaLibrary();
+  const imageId = source.type === "library" ? source.ref.imageId : void 0;
+  const posterId = source.type === "library" ? source.poster?.imageId : void 0;
+  const resolved = useResolvedMedia(imageId);
+  const posterOverride = useResolvedMedia(posterId);
+  const playback = options.playback ?? "click";
+  const editable = Boolean(isEditMode && onSourceChange);
+  const captionEditable = Boolean(isEditMode && onCaptionChange);
+  const showCaptionBlock = Boolean(options.showCaption && (captionEditable || caption));
+  const replaceWithLibraryVideo = editable ? (newImageId) => onSourceChange({ type: "library", ref: { imageId: newImageId } }) : void 0;
+  let media;
+  let aspect;
+  if (source.type === "external") {
+    aspect = `${source.width} / ${source.height}`;
+    media = /* @__PURE__ */ jsx7(
+      "iframe",
+      {
+        src: embedUrl(source),
+        title: caption || "Embedded video",
+        loading: "lazy",
+        allow: "autoplay; fullscreen; picture-in-picture; encrypted-media",
+        allowFullScreen: true,
+        className: "absolute inset-0 h-full w-full border-0"
+      }
+    );
+  } else {
+    const baked = source.ref;
+    const bakedSrc = typeof baked.src === "string" ? baked.src : void 0;
+    const bakedPoster = typeof baked.poster === "string" ? baked.poster : void 0;
+    const bakedWidth = typeof baked.width === "number" ? baked.width : void 0;
+    const bakedHeight = typeof baked.height === "number" ? baked.height : void 0;
+    const bakedPosterOverride = source.poster;
+    const bakedPosterOverrideSrc = typeof bakedPosterOverride?.src === "string" ? bakedPosterOverride.src : void 0;
+    const src = bakedSrc ?? resolved.src;
+    const poster = bakedPosterOverrideSrc ?? posterOverride.src ?? bakedPoster ?? resolved.poster;
+    const width = bakedWidth ?? resolved.width;
+    const height = bakedHeight ?? resolved.height;
+    aspect = width && height ? `${width} / ${height}` : void 0;
+    const playbackProps = playback === "ambient" ? { autoPlay: true, muted: true, loop: true, playsInline: true } : { controls: true, preload: "metadata" };
+    const videoEl = imageId ? /* @__PURE__ */ jsx7(
+      "video",
+      {
+        src,
+        poster,
+        width,
+        height,
+        className: "absolute inset-0 h-full w-full object-contain",
+        ...playbackProps
+      }
+    ) : /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 flex items-center justify-center bg-base-accent text-base-contrast-light/50", children: /* @__PURE__ */ jsx7("span", { className: "text-sm", children: "No video selected" }) });
+    media = replaceWithLibraryVideo ? /* @__PURE__ */ jsx7(ImageDropZone, { onImageSelected: replaceWithLibraryVideo, className: "absolute inset-0 h-full w-full", children: videoEl }) : videoEl;
+  }
+  const onSurfaceClick = replaceWithLibraryVideo && mediaLibrary ? () => mediaLibrary.openSelectModal((id) => replaceWithLibraryVideo(id)) : void 0;
+  return /* @__PURE__ */ jsxs("figure", { className: "w-full", children: [
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        "data-testid": "video-open-surface",
+        className: cn("relative w-full overflow-hidden", onSurfaceClick && "cursor-pointer"),
+        style: { aspectRatio: aspect ?? "16 / 9" },
+        onClick: onSurfaceClick,
+        onPointerDown: onSurfaceClick ? (e) => e.stopPropagation() : void 0,
+        children: media
+      }
+    ),
+    showCaptionBlock && /* @__PURE__ */ jsx7("figcaption", { className: "mt-2 min-h-[1em] text-sm text-base-contrast-light/70", children: captionEditable ? /* @__PURE__ */ jsx7(
+      EditablePlainText,
+      {
+        tag: "span",
+        value: caption ?? "",
+        onChange: onCaptionChange,
+        isEditMode: true,
+        placeholder: "Caption",
+        className: "block min-h-[1em]"
+      }
+    ) : caption })
+  ] });
+}
+
+// src/components/sections/Video/index.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var LibrarySource = z3.object({
+  type: z3.literal("library"),
+  ref: z3.object({
+    imageId: z3.string().default("").describe("Media-library id of the video asset. Required for library videos.")
+  }),
+  // Kept as a SIBLING of `ref` (not nested inside it): the SSR ref-baker
+  // (resolveManifestReferences) matches objects structurally by a top-level
+  // `imageId` key and merges the resolved video's own poster onto that same
+  // object. Nesting the override inside `ref` would collide with that bake
+  // and get silently overwritten on the published viewer. As a sibling with
+  // its own `imageId`, it gets baked independently.
+  poster: z3.object({
+    imageId: z3.string().describe("Media-library image id used as the poster frame instead of the auto-generated one.")
+  }).optional().describe("Optional poster-image override for a library video.")
+});
+var ExternalSource = z3.object({
+  type: z3.literal("external"),
+  provider: z3.enum(["youtube", "vimeo"]).describe("Hosting provider, derived from the pasted URL."),
+  id: z3.string().describe("Provider video id parsed from the pasted URL."),
+  url: z3.string().describe("The original video page URL as pasted."),
+  width: z3.number().positive().describe("Native width used for the aspect-ratio box (from oEmbed; 16 when unknown)."),
+  height: z3.number().positive().describe("Native height used for the aspect-ratio box (from oEmbed; 9 when unknown).")
+});
+var schema3 = z3.object({
+  type: z3.literal("video"),
+  content: z3.object({
+    source: z3.discriminatedUnion("type", [LibrarySource, ExternalSource]).describe("Where the video comes from: a media-library upload or an external YouTube/Vimeo URL."),
+    caption: z3.string().optional().describe("Optional caption rendered beneath the player when Show caption is on.")
+  }),
+  options: z3.object({
+    playback: z3.enum(["ambient", "click"]).describe("'click' (default): poster + native controls with audio. 'ambient': autoplays muted in a loop with no controls.").optional(),
+    showCaption: z3.boolean().describe("When true, render the caption beneath the player.").optional()
+  }).default({})
+});
+var Video_default = defineSection({
+  type: "video",
+  label: "Video",
+  icon: /* @__PURE__ */ jsx8(Clapperboard, { size: 18 }),
+  schema: schema3,
+  authoringNote: "A watchable video player \u2014 self-hosted from the media library or embedded from YouTube/Vimeo. Use playback 'click' for content viewers press play on (controls + audio) and 'ambient' for silent looping footage. For decorative loops inside grids prefer the Media block; large self-hosted files require the site's asset storage.",
+  component: ({ content, options, onChange }) => /* @__PURE__ */ jsx8(
+    VideoBlock,
+    {
+      source: content.content.source,
+      caption: content.content.caption,
+      options: options ?? {},
+      isEditMode: !!onChange,
+      onSourceChange: onChange ? (source) => onChange({ ...content, content: { ...content.content, source } }) : void 0,
+      onCaptionChange: onChange ? (caption) => onChange({ ...content, content: { ...content.content, caption: caption || void 0 } }) : void 0
+    }
+  ),
+  defaults: () => ({
+    type: "video",
+    content: { source: { type: "library", ref: { imageId: "" } } },
+    options: {}
+  }),
+  getLabel: () => "Video",
+  getThumbnails: (content) => content.content.source.type === "library" && content.content.source.ref.imageId ? [{ type: "image", src: content.content.source.ref.imageId }] : [],
+  settings: {
+    source: {
+      type: "video-source",
+      label: "Source",
+      target: "content",
+      default: { type: "library", ref: { imageId: "" } }
+    },
+    playback: {
+      type: "select",
+      label: "Playback",
+      default: "click",
+      options: [
+        { label: "Click to play (controls + audio)", value: "click" },
+        { label: "Ambient loop (muted, no controls)", value: "ambient" }
+      ]
+    },
+    showCaption: { type: "checkbox", label: "Show caption", default: false }
+  },
+  inheritableSettings: ["playback", "showCaption"],
+  settingsTabs: [
+    { label: "Source", fields: ["source"] },
+    { label: "Display", fields: ["playback", "showCaption"] }
+  ]
+});
+
+// src/components/sections/Button/index.tsx
+import { z as z4 } 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";
+import { jsx as jsx9, jsxs as jsxs2 } 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(
+    return /* @__PURE__ */ jsxs2("span", { className: cn(base, variant, "inline-flex items-center gap-2"), children: [
+      download && /* @__PURE__ */ jsx9(Download, { size: 16, className: "shrink-0" }),
+      /* @__PURE__ */ jsx9(
         EditablePlainText,
         {
           tag: "span",
@@ -237,7 +416,7 @@ function Button({ text, link, download, onChange }) {
   const href = link && link.kind === "external" ? link.href : "";
   const target = link?.target;
   if (href) {
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs2(
       "a",
       {
         href,
@@ -245,34 +424,34 @@ function Button({ text, link, download, onChange }) {
         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" }),
+          download && /* @__PURE__ */ jsx9(Download, { size: 16, className: "shrink-0" }),
           text
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx7("button", { className: cn("cursor-pointer", base, variant), children: text });
+  return /* @__PURE__ */ jsx9("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)."),
+import { jsx as jsx10 } from "react/jsx-runtime";
+var schema4 = z4.object({
+  type: z4.literal("button"),
+  content: z4.object({
+    text: z4.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()
+    download: z4.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,
+  icon: /* @__PURE__ */ jsx10(RectangleHorizontal, { size: 18 }),
+  schema: schema4,
   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(
+  component: ({ content, onChange }) => /* @__PURE__ */ jsx10(
     Button,
     {
       text: content.content.text,
@@ -290,7 +469,7 @@ var Button_default = defineSection({
 });
 
 // src/components/sections/Container/index.tsx
-import { z as z4 } from "zod";
+import { z as z5 } from "zod";
 import { LayoutTemplate } from "lucide-react";
 
 // src/components/sections/Container/Container.tsx
@@ -303,14 +482,14 @@ 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";
+import { jsx as jsx11, jsxs as jsxs3 } 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(
+  return /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx11(
       "button",
       {
         ref: buttonRef,
@@ -320,10 +499,10 @@ function ColSpanControl({ colSpan, columns, onChange }) {
         "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 })
+        children: /* @__PURE__ */ jsx11(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(
+    /* @__PURE__ */ jsx11(Popover, { isOpen: open, onClose: () => setOpen(false), anchorRef: buttonRef, className: "min-w-28", children: /* @__PURE__ */ jsx11("ul", { role: "list", className: "py-1", children: Array.from({ length: columns }, (_, i) => i + 1).map((span) => /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsxs3(
       PopoverItem,
       {
         "aria-current": span === current,
@@ -342,7 +521,7 @@ function ColSpanControl({ colSpan, columns, onChange }) {
 }
 
 // src/components/editor/ChildBlockWrapper.tsx
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var ChildBlockWrapper = forwardRef(
   function ChildBlockWrapper2({
     label,
@@ -358,7 +537,7 @@ var ChildBlockWrapper = forwardRef(
     onOpenSettings,
     children
   }, ref) {
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4(
       "div",
       {
         ref,
@@ -368,39 +547,39 @@ var ChildBlockWrapper = forwardRef(
           "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(
+          /* @__PURE__ */ jsxs4("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__ */ jsx12("span", { className: "sr-only", children: label }),
+            /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(DragHandle, { ref: dragHandleRef }) }),
+            /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(ColSpanControl, { colSpan, columns, onChange: onColSpanChange }) }),
+            hasSettings && onOpenSettings && /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(SettingsButton, { onClick: onOpenSettings }) }),
+            /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(
               "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 })
+                children: /* @__PURE__ */ jsx12(CopyPlus, { size: 16 })
               }
             ) }),
-            /* @__PURE__ */ jsx10("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx10(DeleteButton, { onDelete }) })
+            /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(DeleteButton, { onDelete }) })
           ] }),
-          closestEdge === "left" && /* @__PURE__ */ jsx10(
+          closestEdge === "left" && /* @__PURE__ */ jsx12(
             "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(
+          closestEdge === "right" && /* @__PURE__ */ jsx12(
             "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" }),
+          closestEdge === "top" && /* @__PURE__ */ jsx12("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__ */ jsx12("div", { "data-drop-edge": "bottom", className: "absolute left-0 right-0 bottom-0 z-10 h-0.5 translate-y-1 bg-primary" }),
           children
         ]
       }
@@ -570,7 +749,7 @@ function trimTrailingSpacers(container) {
 }
 
 // src/components/sections/Container/Container.tsx
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 var ROW_EDGES = ["left", "right"];
 var COL_EDGES = ["top", "bottom"];
 function ContainerChild({
@@ -601,14 +780,14 @@ function ContainerChild({
     allowedEdges: flow === "column" ? COL_EDGES : ROW_EDGES,
     enabled: true
   });
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       ref: dragRef,
       className: cellClass,
       "data-child-index": index,
       "data-child-id": child.id,
-      children: /* @__PURE__ */ jsx11(
+      children: /* @__PURE__ */ jsx13(
         ChildBlockWrapper,
         {
           label,
@@ -622,7 +801,7 @@ function ContainerChild({
           onDuplicate,
           onColSpanChange,
           onOpenSettings,
-          children: /* @__PURE__ */ jsx11(
+          children: /* @__PURE__ */ jsx13(
             ChildComp,
             {
               content: child,
@@ -650,7 +829,7 @@ function EmptyColumnCell({
     enabled: true
   });
   const active = closestEdge !== null;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       ref: dropRef,
@@ -688,7 +867,7 @@ function Container({ content, isEditMode, onChange, openModal }) {
     flow === "column" && "grid-flow-col"
   );
   if (!editable) {
-    return /* @__PURE__ */ jsx11("div", { className: "@container", children: /* @__PURE__ */ jsx11("div", { className: gridClass, children: children.map((child, index) => {
+    return /* @__PURE__ */ jsx13("div", { className: "@container", children: /* @__PURE__ */ jsx13("div", { className: gridClass, children: children.map((child, index) => {
       const def = getSection(child.type);
       if (!def) return null;
       const Child = def.component;
@@ -699,7 +878,7 @@ function Container({ content, isEditMode, onChange, openModal }) {
         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);
+      return /* @__PURE__ */ jsx13("div", { className: cellClass, children: /* @__PURE__ */ jsx13(Child, { content: child, options: mergedOptions, isEditMode }) }, child.id ?? index);
     }) }) });
   }
   function columnStartOf(index) {
@@ -713,7 +892,7 @@ function Container({ content, isEditMode, onChange, openModal }) {
     const def = getSection(child.type);
     if (!def) return null;
     if (isSpacer(child)) {
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx13(
         EmptyColumnCell,
         {
           containerId: container.id,
@@ -741,12 +920,12 @@ function Container({ content, isEditMode, onChange, openModal }) {
         const CustomForm = def.settingsForm;
         openModal(
           `${def.label} Settings`,
-          /* @__PURE__ */ jsx11(CustomForm, { ...seed, onChange: applyResult })
+          /* @__PURE__ */ jsx13(CustomForm, { ...seed, onChange: applyResult })
         );
       } else if (def.settings) {
         openModal(
           `${def.label} Settings`,
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx13(
             SettingsForm,
             {
               schema: def.settings,
@@ -758,7 +937,7 @@ function Container({ content, isEditMode, onChange, openModal }) {
         );
       }
     } : void 0;
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx13(
       ContainerChild,
       {
         containerId: container.id,
@@ -784,9 +963,9 @@ function Container({ content, isEditMode, onChange, openModal }) {
   }
   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: [
+  return /* @__PURE__ */ jsx13("div", { className: "@container", children: /* @__PURE__ */ jsxs5("div", { className: gridClass, children: [
     children.map(renderEditChild),
-    Array.from({ length: emptyCols }, (_, i) => /* @__PURE__ */ jsx11(
+    Array.from({ length: emptyCols }, (_, i) => /* @__PURE__ */ jsx13(
       EmptyColumnCell,
       {
         containerId: container.id,
@@ -800,7 +979,7 @@ function Container({ content, isEditMode, onChange, openModal }) {
 
 // src/components/sections/Container/ContainerSettingsForm.tsx
 import { useState as useState3 } from "react";
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 function inheritableSchema(children) {
   const out = {};
   for (const child of children) {
@@ -850,10 +1029,10 @@ function ContainerSettingsForm({
       ]
     }
   };
-  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(
+  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs6("fieldset", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx14("legend", { className: "mb-2 text-sm font-semibold text-base-contrast", children: "Layout" }),
+      /* @__PURE__ */ jsx14(
         SettingsForm,
         {
           schema: layoutSchema,
@@ -869,9 +1048,9 @@ function ContainerSettingsForm({
         }
       )
     ] }),
-    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(
+    hasChildDefaults && /* @__PURE__ */ jsxs6("fieldset", { className: "flex flex-col gap-4 border-t border-base-200 pt-4", children: [
+      /* @__PURE__ */ jsx14("legend", { className: "mb-2 text-sm font-semibold text-base-contrast", children: "Apply to all items" }),
+      /* @__PURE__ */ jsx14(
         SettingsForm,
         {
           schema: childSchema,
@@ -888,18 +1067,18 @@ function ContainerSettingsForm({
 }
 
 // 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(
+import { jsx as jsx15 } from "react/jsx-runtime";
+var schema5 = z5.object({
+  type: z5.literal("container"),
+  content: z5.object({
+    columns: z5.number().int().min(1).max(MAX_CONTAINER_COLUMNS).describe("Number of columns in the grid. Children flow across this many columns.").default(1),
+    flow: z5.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(),
+    childDefaults: z5.record(z5.string(), z5.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([])
+    children: z5.array(z5.lazy(() => getSectionSchema())).default([])
   }).transform((c) => ({
     ...c,
     children: c.children.map(
@@ -910,10 +1089,10 @@ var schema4 = z4.object({
 var Container_default = defineSection({
   type: "container",
   label: "Container",
-  icon: /* @__PURE__ */ jsx13(LayoutTemplate, { size: 18 }),
-  schema: schema4,
+  icon: /* @__PURE__ */ jsx15(LayoutTemplate, { size: 18 }),
+  schema: schema5,
   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 }),
+  component: ({ content, onChange, isEditMode, openModal }) => /* @__PURE__ */ jsx15(Container, { content, isEditMode: !!isEditMode, onChange, openModal }),
   defaults: () => ({
     type: "container",
     content: { columns: 1, flow: "row", children: [] }
@@ -923,28 +1102,28 @@ var Container_default = defineSection({
 });
 
 // src/components/sections/Spacer/index.tsx
-import { z as z5 } from "zod";
+import { z as z6 } from "zod";
 import { SquareDashed } from "lucide-react";
 
 // src/components/sections/Spacer/Spacer.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function Spacer() {
-  return /* @__PURE__ */ jsx14("div", { "data-spacer": true, "aria-hidden": "true", className: "h-full" });
+  return /* @__PURE__ */ jsx16("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({})
+import { jsx as jsx17 } from "react/jsx-runtime";
+var schema6 = z6.object({
+  type: z6.literal("spacer"),
+  content: z6.object({}).default({})
 });
 var Spacer_default = defineSection({
   type: "spacer",
   label: "Spacer",
-  icon: /* @__PURE__ */ jsx15(SquareDashed, { size: 18 }),
-  schema: schema5,
+  icon: /* @__PURE__ */ jsx17(SquareDashed, { size: 18 }),
+  schema: schema6,
   authoringNote: "Vertical whitespace between sections. Use sparingly to add breathing room where default section spacing is insufficient.",
-  component: () => /* @__PURE__ */ jsx15(Spacer, {}),
+  component: () => /* @__PURE__ */ jsx17(Spacer, {}),
   defaults: () => ({ type: "spacer", content: {} })
 });
 
@@ -955,6 +1134,7 @@ var coreSectionDefs = [
   SubSubHeading_default,
   Prose_default,
   Media_default,
+  Video_default,
   Button_default,
   Container_default,
   Spacer_default