@drawnagency/primitives 0.1.89 → 0.1.90

package/dist/{chunk-75P6HWPN.js → chunk-5BM2Y3NJ.js}

@@ -76,7 +76,8 @@ function upgradeGrid(section) {
     type: "container",
     content: {
       columns: content.columns,
-      flow: "row",
+      layout: "grid",
+      equalizeRowHeight: false,
       children: media.map((item, i) => mapRefItem(item, id, i))
     }
   };
@@ -100,7 +101,7 @@ function upgradeSplitContent(section) {
     content: { body: content.body ?? "" }
   };
   const children = options.imagePosition === "right" ? [proseChild, mediaChild] : [mediaChild, proseChild];
-  const out = { id, type: "container", content: { columns: 2, flow: "row", children } };
+  const out = { id, type: "container", content: { columns: 2, layout: "grid", equalizeRowHeight: false, children } };
   if (section.layout !== void 0) out.layout = section.layout;
   return out;
 }
@@ -131,7 +132,8 @@ function upgradeDoDont(section) {
     type: "container",
     content: {
       columns: 2,
-      flow: "row",
+      layout: "grid",
+      equalizeRowHeight: false,
       children: [
         dodontChild(doItems, id, 0, "do", childOptions),
         dodontChild(dontItems, id, 1, "dont", childOptions)

package/dist/{chunk-VK5KNH73.js → chunk-AGWE2LJG.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-S2L3BPLS.js";
 import {
   upgradeLegacySection
-} from "./chunk-75P6HWPN.js";
+} from "./chunk-5BM2Y3NJ.js";
 import {
   getSectionSchema
 } from "./chunk-TZQPOR5A.js";
 import {
   IndexSchema
-} from "./chunk-WCBYXNAG.js";
+} from "./chunk-KMQZYORS.js";
 import {
   getAllSchemas
 } from "./chunk-VKAGMEKE.js";

package/dist/{chunk-2QXJ2KGB.js → chunk-KBQNJZUX.js}

@@ -1,6 +1,6 @@
 import {
   EditablePlainText
-} from "./chunk-J75XGXYD.js";
+} from "./chunk-XKRQMTE4.js";
 import {
   Button,
   usePages

package/dist/{chunk-WCBYXNAG.js → chunk-KMQZYORS.js}

@@ -330,6 +330,7 @@ export {
   MediaItemSchema,
   ImageManifestSchema,
   MediaConfigSchema,
+  StatusSchema,
   SectionMetaSchema,
   RESERVED_SLUGS,
   PageStatusSchema,

package/dist/{chunk-Y24T75HT.js → chunk-MK7YB2A4.js}

@@ -1,6 +1,6 @@
 import {
   HexColorSchema
-} from "./chunk-WCBYXNAG.js";
+} from "./chunk-KMQZYORS.js";
 
 // src/schemas/audience.ts
 import { z } from "zod";

package/dist/{chunk-QFV5TSPO.js → chunk-SIYQ37QY.js}

@@ -24,13 +24,21 @@ import { forwardRef } from "react";
 
 // src/components/shared/Tooltip.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function Tooltip({ content, children, className }) {
+var sideClasses = {
+  bottom: "left-1/2 top-full mt-1.5 -translate-x-1/2",
+  right: "left-full top-1/2 ml-1.5 -translate-y-1/2",
+  "bottom-clamp": "top-full mt-1.5 left-1/2 -translate-x-1/2 max-xl:left-auto max-xl:right-0 max-xl:translate-x-0"
+};
+function Tooltip({ content, children, className, side = "bottom" }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("group/tooltip relative inline-flex", className), children: [
     children,
     /* @__PURE__ */ jsx(
       "span",
       {
-        className: "pointer-events-none absolute left-1/2 top-full z-50 mt-1.5 -translate-x-1/2 opacity-0 transition-opacity delay-300 group-hover/tooltip:opacity-100",
+        className: cn(
+          "pointer-events-none absolute z-50 opacity-0 transition-opacity delay-300 group-hover/tooltip:opacity-100",
+          sideClasses[side]
+        ),
         role: "tooltip",
         children: /* @__PURE__ */ jsx("span", { className: "block whitespace-nowrap rounded bg-tooltip px-2 py-1 text-center text-xs leading-relaxed text-tooltip-muted", children: content })
       }
@@ -43,8 +51,8 @@ function Kbd({ children }) {
 
 // src/components/editor/DragHandle.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var DragHandle2 = forwardRef(function DragHandle3(_, ref) {
-  return /* @__PURE__ */ jsx2(Tooltip, { content: /* @__PURE__ */ jsxs2(Fragment, { children: [
+var DragHandle2 = forwardRef(function DragHandle3({ tooltipSide }, ref) {
+  return /* @__PURE__ */ jsx2(Tooltip, { side: tooltipSide, content: /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2(Kbd, { children: "Drag" }),
     " to move"
   ] }), children: /* @__PURE__ */ jsx2(

package/dist/{chunk-J75XGXYD.js → chunk-XKRQMTE4.js}

@@ -340,6 +340,14 @@ var colSpanClass = {
   5: { 1: "", 2: "col-span-1 @xs:col-span-2", 3: "col-span-1 @xs:col-span-2 @md:col-span-3", 4: "col-span-1 @xs:col-span-2 @md:col-span-3 @xl:col-span-4", 5: "col-span-1 @xs:col-span-2 @md:col-span-3 @xl:col-span-5" },
   6: { 1: "", 2: "col-span-1 @xs:col-span-2", 3: "col-span-1 @xs:col-span-2 @md:col-span-3", 4: "col-span-1 @xs:col-span-2 @md:col-span-3 @2xl:col-span-4", 5: "col-span-1 @xs:col-span-2 @md:col-span-3 @2xl:col-span-5", 6: "col-span-1 @xs:col-span-2 @md:col-span-3 @2xl:col-span-6" }
 };
+var masonryColumnsClass = {
+  1: "columns-1",
+  2: "columns-1 @sm:columns-2",
+  3: "columns-1 @sm:columns-2 @lg:columns-3",
+  4: "columns-1 @xs:columns-2 @lg:columns-4",
+  5: "columns-1 @xs:columns-2 @md:columns-3 @xl:columns-5",
+  6: "columns-1 @xs:columns-2 @md:columns-3 @2xl:columns-6"
+};
 var spacerHiddenClass = {
   1: "hidden",
   2: "hidden @sm:block",
@@ -705,6 +713,7 @@ export {
   MAX_CONTAINER_COLUMNS,
   containerGridClass,
   colSpanClass,
+  masonryColumnsClass,
   spacerHiddenClass,
   useEditableCollection,
   EditableGrid

package/dist/{chunk-L2MAJKKC.js → chunk-XUIJHYKI.js}

@@ -9,7 +9,7 @@ import {
   MediaBlock,
   containerGridClass,
   useEditableCollection
-} from "./chunk-J75XGXYD.js";
+} from "./chunk-XKRQMTE4.js";
 import {
   AddIcon,
   DeleteIcon,
@@ -30,7 +30,7 @@ import {
 import {
   HexColorSchema,
   SingleMediaReferenceSchema
-} from "./chunk-WCBYXNAG.js";
+} from "./chunk-KMQZYORS.js";
 import {
   defineSection
 } from "./chunk-VKAGMEKE.js";

package/dist/{chunk-MVX4ULYE.js → chunk-ZLG7S54V.js}

@@ -3,23 +3,25 @@ import {
   pluralize,
   stripHtmlToPlainText,
   truncate
-} from "./chunk-L2MAJKKC.js";
+} from "./chunk-XUIJHYKI.js";
 import {
   DeleteButton,
   DragHandle,
+  Kbd,
   Popover,
   PopoverItem,
   SettingsButton,
   SettingsForm,
+  Tooltip,
   buildBlockDragData,
   buildBlockDropData,
   canDropBlock,
   isBlockDragData
-} from "./chunk-QFV5TSPO.js";
+} from "./chunk-SIYQ37QY.js";
 import {
   EditableRichText,
   defineHeadingSection
-} from "./chunk-2QXJ2KGB.js";
+} from "./chunk-KBQNJZUX.js";
 import {
   EditablePlainText,
   ImageDropZone,
@@ -27,8 +29,9 @@ import {
   MediaBlock,
   colSpanClass,
   containerGridClass,
+  masonryColumnsClass,
   spacerHiddenClass
-} from "./chunk-J75XGXYD.js";
+} from "./chunk-XKRQMTE4.js";
 import {
   useMediaLibrary,
   useResolvedMedia
@@ -51,7 +54,7 @@ import {
 } from "./chunk-TZQPOR5A.js";
 import {
   SingleMediaReferenceSchema
-} from "./chunk-WCBYXNAG.js";
+} from "./chunk-KMQZYORS.js";
 import {
   defineSection,
   getSection
@@ -483,14 +486,17 @@ import { CopyPlus } from "lucide-react";
 // src/components/editor/ColSpanControl.tsx
 import { useRef, useState } from "react";
 import { Columns3 } from "lucide-react";
-import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, 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__ */ jsxs3("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx11(Tooltip, { side: "right", content: /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx11(Kbd, { children: "Set" }),
+      " column span"
+    ] }), children: /* @__PURE__ */ jsx11(
       "button",
       {
         ref: buttonRef,
@@ -502,7 +508,7 @@ function ColSpanControl({ colSpan, columns, onChange }) {
         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__ */ jsx11(Columns3, { size: 14 })
       }
-    ),
+    ) }),
     /* @__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,
       {
@@ -522,7 +528,7 @@ function ColSpanControl({ colSpan, columns, onChange }) {
 }
 
 // src/components/editor/ChildBlockWrapper.tsx
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var ChildBlockWrapper = forwardRef(
   function ChildBlockWrapper2({
     label,
@@ -559,10 +565,16 @@ var ChildBlockWrapper = forwardRef(
               ),
               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(DragHandle, { ref: dragHandleRef, tooltipSide: "right" }) }),
                 /* @__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(
+                hasSettings && onOpenSettings && /* @__PURE__ */ jsx12(Tooltip, { side: "right", className: "pointer-events-auto", content: /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  /* @__PURE__ */ jsx12(Kbd, { children: "Edit" }),
+                  " settings"
+                ] }), children: /* @__PURE__ */ jsx12(SettingsButton, { onClick: onOpenSettings }) }),
+                /* @__PURE__ */ jsx12(Tooltip, { side: "right", className: "pointer-events-auto", content: /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  /* @__PURE__ */ jsx12(Kbd, { children: "Duplicate" }),
+                  " block"
+                ] }), children: /* @__PURE__ */ jsx12(
                   "button",
                   {
                     type: "button",
@@ -572,7 +584,10 @@ var ChildBlockWrapper = forwardRef(
                     children: /* @__PURE__ */ jsx12(CopyPlus, { size: 16 })
                   }
                 ) }),
-                /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(DeleteButton, { onDelete }) })
+                /* @__PURE__ */ jsx12(Tooltip, { side: "right", className: "pointer-events-auto", content: /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  /* @__PURE__ */ jsx12(Kbd, { children: "Delete" }),
+                  " block"
+                ] }), children: /* @__PURE__ */ jsx12(DeleteButton, { onDelete }) })
               ]
             }
           ),
@@ -769,7 +784,6 @@ function ContainerChild({
   index,
   child,
   columns,
-  flow,
   cellClass,
   label,
   hasSettings,
@@ -782,7 +796,8 @@ function ContainerChild({
   onColSpanChange,
   onOpenSettings,
   onChildContentChange,
-  openModal
+  openModal,
+  allowedEdges = ROW_EDGES
 }) {
   const isContainer = Array.isArray(child.content?.children);
   const { dragRef, handleRef, closestEdge, isDragging } = useBlockDnd({
@@ -790,7 +805,7 @@ function ContainerChild({
     containerId,
     index,
     isContainer,
-    allowedEdges: flow === "column" ? COL_EDGES : ROW_EDGES,
+    allowedEdges,
     enabled: true
   });
   return /* @__PURE__ */ jsx13(
@@ -858,11 +873,37 @@ function EmptyColumnCell({
     }
   );
 }
+function MasonryDropZone({
+  containerId,
+  index,
+  testId
+}) {
+  const { dropRef, closestEdge } = useBlockDropZone({
+    containerId,
+    index,
+    allowedEdges: COL_EDGES,
+    enabled: true
+  });
+  const active = closestEdge !== null;
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      ref: dropRef,
+      "data-masonry-dropzone": true,
+      "data-testid": testId,
+      className: cn(
+        "mb-8 flex min-h-20 items-center justify-center rounded-md border-2 border-dashed break-inside-avoid text-xs text-base-contrast-light/50",
+        active ? "border-primary" : "border-base-200"
+      ),
+      children: index === 0 ? "Empty container \u2014 drag items here or use the + button" : "Drop here to add"
+    }
+  );
+}
 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 { layout, columns, equalizeRowHeight, childDefaults, children } = content.content;
   const editable = isEditMode && !!onChange;
   const container = {
     id: content.id ?? "container",
@@ -883,8 +924,104 @@ function Container({ content, isEditMode, onChange, openModal }) {
     "grid",
     "gap-8",
     containerGridClass[columns] ?? "grid-cols-1",
-    flow === "column" && "grid-flow-col"
+    equalizeRowHeight && "items-stretch"
   );
+  const cellStretch = equalizeRowHeight ? "h-full [&>*]:h-full" : void 0;
+  function buildOnOpenSettings(child, index) {
+    const def = getSection(child.type);
+    if (!def) return void 0;
+    const hasSettings = !!(def.settings || def.settingsForm) && !!openModal;
+    if (!hasSettings || !openModal) return void 0;
+    const childOptions = "options" in child ? child.options : void 0;
+    return () => {
+      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__ */ jsx13(CustomForm, { ...seed, onChange: applyResult }));
+      } else if (def.settings) {
+        openModal(
+          `${def.label} Settings`,
+          /* @__PURE__ */ jsx13(
+            SettingsForm,
+            {
+              schema: def.settings,
+              values: seed,
+              onChange: applyResult,
+              tabs: def.settingsTabs
+            }
+          )
+        );
+      }
+    };
+  }
+  if (layout === "masonry") {
+    const laidOut = children.map((child, index) => ({ child, index })).filter(({ child }) => !isSpacer(child));
+    const masonryClass = cn("gap-8", masonryColumnsClass[columns] ?? "columns-1");
+    if (!editable) {
+      if (laidOut.length === 0) return null;
+      return /* @__PURE__ */ jsx13("div", { className: "@container", children: /* @__PURE__ */ jsx13("div", { "data-masonry": true, className: masonryClass, children: laidOut.map(({ child, index }) => {
+        const def = getSection(child.type);
+        if (!def) return null;
+        const Child = def.component;
+        const childOptions = "options" in child ? child.options : void 0;
+        const mergedOptions = { ...childDefaults ?? {}, ...childOptions ?? {} };
+        return /* @__PURE__ */ jsx13(
+          "div",
+          {
+            "data-masonry-box": true,
+            "data-child-index": index,
+            className: "mb-8 break-inside-avoid",
+            children: /* @__PURE__ */ jsx13(Child, { content: child, options: mergedOptions, isEditMode })
+          },
+          child.id ?? index
+        );
+      }) }) });
+    }
+    if (laidOut.length === 0) {
+      return /* @__PURE__ */ jsx13("div", { className: "@container", children: /* @__PURE__ */ jsx13("div", { "data-masonry": true, className: masonryClass, children: /* @__PURE__ */ jsx13(MasonryDropZone, { containerId: container.id, index: 0, testId: "masonry-empty" }) }) });
+    }
+    return /* @__PURE__ */ jsx13("div", { className: "@container", children: /* @__PURE__ */ jsxs5("div", { "data-masonry": true, className: masonryClass, children: [
+      laidOut.map(({ child, index }, k) => {
+        const def = getSection(child.type);
+        if (!def) return null;
+        const childOptions = "options" in child ? child.options : void 0;
+        const mergedOptions = { ...childDefaults ?? {}, ...childOptions ?? {} };
+        const hasSettings = !!(def.settings || def.settingsForm) && !!openModal;
+        return /* @__PURE__ */ jsx13("div", { "data-masonry-box": true, className: "mb-8 break-inside-avoid", children: /* @__PURE__ */ jsx13(
+          ContainerChild,
+          {
+            containerId: container.id,
+            index,
+            child,
+            columns: 1,
+            cellClass: void 0,
+            label: def.label,
+            hasSettings,
+            mergedOptions,
+            isEditMode,
+            clearSectionChrome: k === 0,
+            ChildComp: def.component,
+            onDelete: () => emit(removeChildAt(container, index).container),
+            onDuplicate: () => emit(duplicateChildAt(container, index, newId)),
+            onColSpanChange: () => {
+            },
+            onOpenSettings: buildOnOpenSettings(child, index),
+            onChildContentChange: (c) => updateChild(index, c),
+            openModal,
+            allowedEdges: COL_EDGES
+          }
+        ) }, child.id ?? index);
+      }),
+      /* @__PURE__ */ jsx13(MasonryDropZone, { containerId: container.id, index: children.length, testId: "masonry-append" })
+    ] }) });
+  }
   if (!editable) {
     return /* @__PURE__ */ jsx13("div", { className: "@container", children: /* @__PURE__ */ jsx13("div", { className: gridClass, children: children.map((child, index) => {
       const def = getSection(child.type);
@@ -895,7 +1032,8 @@ function Container({ content, isEditMode, onChange, openModal }) {
       const mergedOptions = { ...childDefaults ?? {}, ...childOptions ?? {} };
       const cellClass = cn(
         colSpanClass[columns]?.[Math.min(span, columns)] || void 0,
-        child.type === "spacer" && spacerHiddenClass[columns]
+        child.type === "spacer" && spacerHiddenClass[columns],
+        cellStretch
       );
       return /* @__PURE__ */ jsx13("div", { className: cellClass, children: /* @__PURE__ */ jsx13(Child, { content: child, options: mergedOptions, isEditMode }) }, child.id ?? index);
     }) }) });
@@ -924,38 +1062,12 @@ function Container({ content, isEditMode, onChange, openModal }) {
     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 cellClass = cn(
+      colSpanClass[columns]?.[Math.min(span, columns)] || void 0,
+      cellStretch
+    );
     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__ */ jsx13(CustomForm, { ...seed, onChange: applyResult })
-        );
-      } else if (def.settings) {
-        openModal(
-          `${def.label} Settings`,
-          /* @__PURE__ */ jsx13(
-            SettingsForm,
-            {
-              schema: def.settings,
-              values: seed,
-              onChange: applyResult,
-              tabs: def.settingsTabs
-            }
-          )
-        );
-      }
-    } : void 0;
+    const onOpenSettings = buildOnOpenSettings(child, index);
     return /* @__PURE__ */ jsx13(
       ContainerChild,
       {
@@ -963,7 +1075,6 @@ function Container({ content, isEditMode, onChange, openModal }) {
         index,
         child,
         columns,
-        flow,
         cellClass,
         label: def.label,
         hasSettings,
@@ -1014,12 +1125,17 @@ function inheritableSchema(children) {
 }
 function ContainerSettingsForm({
   columns = 1,
-  flow = "row",
+  layout: layoutProp = "grid",
+  equalizeRowHeight = false,
   childDefaults = {},
   children = [],
   onChange
 }) {
-  const [layout, setLayout] = useState3({ columns, flow });
+  const [layout, setLayout] = useState3({
+    layout: layoutProp,
+    columns,
+    equalizeRowHeight
+  });
   const [defaults, setDefaults] = useState3(childDefaults);
   const childSchema = inheritableSchema(children);
   const hasChildDefaults = Object.keys(childSchema).length > 0;
@@ -1027,27 +1143,41 @@ function ContainerSettingsForm({
     onChange({ content: { ...nextLayout, childDefaults: nextDefaults }, options: {} });
   }
   const layoutSchema = {
+    layout: {
+      type: "select",
+      label: "Layout",
+      default: layout.layout,
+      target: "content",
+      options: [
+        { label: "Grid", value: "grid" },
+        { label: "Masonry (image gallery)", value: "masonry" }
+      ]
+    },
     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)
-      }))
+      // Masonry's CSS multi-column flow needs at least 2 columns to read as a
+      // gallery (1 column would just be a plain stack, same as grid), so floor
+      // the options at 2 there; grid still allows 1 (a single-column stack).
+      options: Array.from(
+        { length: layout.layout === "masonry" ? MAX_CONTAINER_COLUMNS - 1 : MAX_CONTAINER_COLUMNS },
+        (_, i) => {
+          const n = layout.layout === "masonry" ? i + 2 : i + 1;
+          return { label: String(n), value: String(n) };
+        }
+      )
     },
-    flow: {
-      type: "select",
-      label: "Flow",
-      default: layout.flow,
-      target: "content",
-      options: [
-        { label: "Rows (wrap across)", value: "row" },
-        { label: "Columns (fill down)", value: "column" }
-      ]
-    }
+    ...layout.layout === "grid" ? {
+      equalizeRowHeight: {
+        type: "checkbox",
+        label: "Equalize row height",
+        default: layout.equalizeRowHeight,
+        target: "content"
+      }
+    } : {}
   };
   return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-6", children: [
     /* @__PURE__ */ jsxs6("fieldset", { className: "flex flex-col gap-4", children: [
@@ -1056,16 +1186,23 @@ function ContainerSettingsForm({
         SettingsForm,
         {
           schema: layoutSchema,
-          values: { columns: String(layout.columns), flow: layout.flow },
+          values: {
+            layout: layout.layout,
+            columns: String(layout.columns),
+            equalizeRowHeight: layout.equalizeRowHeight
+          },
           onChange: (result) => {
             const next = {
+              layout: result.content.layout ?? layout.layout,
               columns: Number(result.content.columns ?? layout.columns),
-              flow: String(result.content.flow ?? layout.flow)
+              equalizeRowHeight: result.content.equalizeRowHeight ?? layout.equalizeRowHeight
             };
+            if (next.layout === "masonry" && next.columns < 2) next.columns = 2;
             setLayout(next);
             emit(next, defaults);
           }
-        }
+        },
+        layout.layout
       )
     ] }),
     hasChildDefaults && /* @__PURE__ */ jsxs6("fieldset", { className: "flex flex-col gap-4 border-t border-base-200 pt-4", children: [
@@ -1091,33 +1228,55 @@ 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"),
+    layout: z5.enum(["grid", "masonry"]).describe(
+      "Layout engine: 'grid' arranges children in fixed columns with per-child column spans; 'masonry' flows children through a CSS multi-column gallery at their natural height (no column spans)."
+    ).default("grid"),
+    columns: z5.number().int().min(1).max(MAX_CONTAINER_COLUMNS).describe(
+      "Grid: number of columns children flow across. Masonry: number of CSS multi-columns children flow through."
+    ).default(1),
+    equalizeRowHeight: z5.boolean().describe(
+      "Grid only: stretch every child to the height of the tallest child in its row (best-effort \u2014 applies to children whose root element can stretch, e.g. media/cards). Ignored in masonry."
+    ).default(false),
     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: z5.array(z5.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
-    )
-  }))
+  }).transform((c) => {
+    if (c.layout === "masonry") {
+      return {
+        ...c,
+        children: c.children.map((child) => {
+          if (child.layout === void 0) return child;
+          const { layout: _drop, ...rest } = child;
+          return rest;
+        })
+      };
+    }
+    return {
+      ...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__ */ 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.",
+  authoringNote: "A layout wrapper for child sections. 'grid' arranges children into a fixed number of columns (each child can span multiple columns) with an optional equal-row-height toggle; 'masonry' flows children through a CSS multi-column gallery at their natural height (no column spans). Set layout, columns, and add children.",
   component: ({ content, onChange, isEditMode, openModal }) => /* @__PURE__ */ jsx15(Container, { content, isEditMode: !!isEditMode, onChange, openModal }),
   defaults: () => ({
     type: "container",
-    content: { columns: 1, flow: "row", children: [] }
+    content: { layout: "grid", columns: 1, equalizeRowHeight: false, children: [] }
   }),
   getLabel: (content) => `Container (${pluralize(content.content.children.length, "item")})`,
+  // Aggregate child thumbnails so the reorder-sections modal shows a stacked media
+  // preview for a container (restores the retired media_grid preview). Each child is a
+  // full section block; delegate to its own type's getThumbnails. The modal caps the
+  // stack at 3 + a "+N" badge and resolves each imageId → src itself.
+  getThumbnails: (content) => content.content.children.flatMap((child) => getSection(child.type)?.getThumbnails?.(child) ?? []),
   settingsForm: ContainerSettingsForm
 });