@drawnagency/primitives 0.1.88 → 0.1.90

package/src/components/editor/StatusIndicator.tsx

@@ -83,6 +83,42 @@ const dotColorClasses: Record<StatusColor, string> = {
 
 const STATUSES: Status[] = ["draft", "live", "archived"];
 
+interface StatusRadioListProps {
+  status: Status;
+  onChange: (status: Status) => void;
+  onClose?: () => void;
+  ariaLabel?: string;
+}
+
+export function StatusRadioList({ status, onChange, onClose, ariaLabel = "Section status" }: StatusRadioListProps) {
+  return (
+    <ul role="radiogroup" aria-label={ariaLabel} className="w-full overflow-hidden py-1">
+      {STATUSES.map((s) => {
+        const checked = s === status;
+        return (
+          <li key={s}>
+            <PopoverItem
+              role="radio"
+              aria-checked={checked}
+              onClick={() => {
+                if (s !== status) onChange(s);
+                onClose?.();
+              }}
+            >
+              <span
+                aria-hidden="true"
+                className={cn("h-3 w-3 shrink-0 rounded-full border border-base-200", dotColorClasses[s])}
+              />
+              <span className="flex-1 font-medium capitalize text-base-contrast">{s}</span>
+              {checked && <Check size={14} strokeWidth={3} className="text-primary" />}
+            </PopoverItem>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
 interface StatusIndicatorProps {
   mainStatus: string | null;
   savedStatus: string;
@@ -122,30 +158,7 @@ export function StatusIndicator({
       buttonClassName="text-base-contrast-light"
       disabled={disabled}
       clickContent={(onClose) => (
-        <ul role="radiogroup" aria-label="Section status" className="w-full overflow-hidden py-1">
-          {STATUSES.map((s) => {
-            const checked = s === status;
-            return (
-              <li key={s}>
-                <PopoverItem
-                  role="radio"
-                  aria-checked={checked}
-                  onClick={() => {
-                    if (s !== status) onChange(s);
-                    onClose();
-                  }}
-                >
-                  <span
-                    aria-hidden="true"
-                    className={cn("h-3 w-3 shrink-0 rounded-full border border-base-200", dotColorClasses[s])}
-                  />
-                  <span className="flex-1 font-medium capitalize text-base-contrast">{s}</span>
-                  {checked && <Check size={14} strokeWidth={3} className="text-primary" />}
-                </PopoverItem>
-              </li>
-            );
-          })}
-        </ul>
+        <StatusRadioList status={status} onChange={onChange} onClose={onClose} />
       )}
     />
   );

package/src/components/sections/Container/Container.tsx

@@ -2,7 +2,7 @@ import { type ComponentType, type ReactNode } from "react";
 import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { getSection } from "../../../lib/registry";
 import { cn } from "../../../lib/cn";
-import { containerGridClass, colSpanClass, spacerHiddenClass } from "../../../lib/container-grid";
+import { containerGridClass, colSpanClass, spacerHiddenClass, masonryColumnsClass } from "../../../lib/container-grid";
 import { ChildBlockWrapper } from "../../editor/ChildBlockWrapper";
 import { SettingsForm, type SettingsFormResult } from "../../editor/SettingsForm";
 import { useBlockDnd, useBlockDropZone } from "../../../hooks/useBlockDnd";
@@ -19,6 +19,7 @@ import type { Section } from "../../../schemas/sections";
 // Stable allowedEdges arrays — must not be re-created per render (the dnd hooks
 // re-subscribe whenever this array identity changes).
 const ROW_EDGES: Edge[] = ["left", "right"];
+// Masonry stacks items vertically (CSS multi-column), so its drag edges are top/bottom.
 const COL_EDGES: Edge[] = ["top", "bottom"];
 
 type ChildComponent = ComponentType<{
@@ -34,7 +35,6 @@ interface ContainerChildProps {
   index: number;
   child: Section;
   columns: number;
-  flow: string;
   cellClass: string | undefined;
   label: string;
   hasSettings: boolean;
@@ -49,6 +49,9 @@ interface ContainerChildProps {
   onOpenSettings?: () => void;
   onChildContentChange?: (content: unknown) => void;
   openModal?: (title: string, content: ReactNode) => void;
+  /** Drag/drop hitbox edges: ["left","right"] in grid (row flow), ["top","bottom"] in masonry
+   *  (CSS multi-column stacks items vertically). Defaults to ROW_EDGES. */
+  allowedEdges?: Edge[];
 }
 
 /**
@@ -61,7 +64,6 @@ function ContainerChild({
   index,
   child,
   columns,
-  flow,
   cellClass,
   label,
   hasSettings,
@@ -75,6 +77,7 @@ function ContainerChild({
   onOpenSettings,
   onChildContentChange,
   openModal,
+  allowedEdges = ROW_EDGES,
 }: ContainerChildProps) {
   const isContainer = Array.isArray((child.content as { children?: unknown })?.children);
   const { dragRef, handleRef, closestEdge, isDragging } = useBlockDnd({
@@ -82,7 +85,7 @@ function ContainerChild({
     containerId,
     index,
     isContainer,
-    allowedEdges: flow === "column" ? COL_EDGES : ROW_EDGES,
+    allowedEdges,
     enabled: true,
   });
 
@@ -120,8 +123,9 @@ function ContainerChild({
 }
 
 interface ContainerContent {
+  layout: "grid" | "masonry";
   columns: number;
-  flow: string;
+  equalizeRowHeight: boolean;
   childDefaults?: Record<string, unknown>;
   children: Section[];
 }
@@ -175,6 +179,44 @@ function EmptyColumnCell({
   );
 }
 
+/**
+ * A masonry insertion drop target — not draggable itself, just a landing zone so new
+ * blocks can be dragged in and an empty masonry container is seedable. Unlike
+ * `EmptyColumnCell` (grid column-placement, `toColumn`), this OMITS `toColumn` so the
+ * central monitor uses the edge→`resolveDropIndex` insert path (masonry has no columns
+ * to target — it's a linear reorder like any other block list).
+ */
+function MasonryDropZone({
+  containerId,
+  index,
+  testId,
+}: {
+  containerId: string;
+  index: number;
+  testId: string;
+}) {
+  const { dropRef, closestEdge } = useBlockDropZone({
+    containerId,
+    index,
+    allowedEdges: COL_EDGES,
+    enabled: true,
+  });
+  const active = closestEdge !== null;
+  return (
+    <div
+      ref={dropRef}
+      data-masonry-dropzone
+      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",
+      )}
+    >
+      {index === 0 ? "Empty container — drag items here or use the + button" : "Drop here to add"}
+    </div>
+  );
+}
+
 function newId(): string {
   return typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
     ? crypto.randomUUID()
@@ -182,7 +224,7 @@ function newId(): string {
 }
 
 export function Container({ content, isEditMode, onChange, openModal }: ContainerProps) {
-  const { columns, flow, childDefaults, children } = content.content;
+  const { layout, columns, equalizeRowHeight, childDefaults, children } = content.content;
 
   const editable = isEditMode && !!onChange;
 
@@ -218,8 +260,138 @@ export function Container({ content, isEditMode, onChange, openModal }: Containe
     "grid",
     "gap-8",
     containerGridClass[columns] ?? "grid-cols-1",
-    flow === "column" && "grid-flow-col",
+    equalizeRowHeight && "items-stretch",
   );
+  const cellStretch = equalizeRowHeight ? "h-full [&>*]:h-full" : undefined;
+
+  // Per-child settings-modal opener, shared by the grid and masonry edit paths.
+  function buildOnOpenSettings(child: Section, index: number): (() => void) | undefined {
+    const def = getSection(child.type);
+    if (!def) return undefined;
+    const hasSettings = !!(def.settings || def.settingsForm) && !!openModal;
+    if (!hasSettings || !openModal) return undefined;
+    const childOptions = "options" in child ? (child.options as Record<string, unknown>) : undefined;
+    return () => {
+      const childOpts = childOptions ?? {};
+      const childContent = (child.content ?? {}) as Record<string, unknown>;
+      // Seed the form from merged content+options so content-target fields (e.g.
+      // media.link, button.link/download) round-trip instead of re-emitting at their
+      // default and clobbering the stored value. Mirrors EditorShell's top-level seed.
+      const seed = { ...childContent, ...childOpts };
+      const applyResult = (result: SettingsFormResult) =>
+        updateChild(index, {
+          ...child,
+          content: { ...(child.content as object), ...result.content },
+          options: { ...childOpts, ...result.options },
+        });
+      if (def.settingsForm) {
+        const CustomForm = def.settingsForm;
+        openModal(`${def.label} Settings`, <CustomForm {...seed} onChange={applyResult} />);
+      } else if (def.settings) {
+        openModal(
+          `${def.label} Settings`,
+          <SettingsForm
+            schema={def.settings}
+            values={seed}
+            onChange={applyResult}
+            tabs={def.settingsTabs}
+          />,
+        );
+      }
+    };
+  }
+
+  if (layout === "masonry") {
+    // Spacers are grid-only bookkeeping (empty-column tracking); masonry has no columns
+    // to pad, so exclude them from the layout entirely. `laidOut` carries the TRUE array
+    // index alongside each surviving child, so keys/data-child-index/DnD/delete/duplicate
+    // all still operate on the real `children` position, not the filtered position.
+    const laidOut = children
+      .map((child, index) => ({ child, index }))
+      .filter(({ child }) => !isSpacer(child));
+    const masonryClass = cn("gap-8", masonryColumnsClass[columns] ?? "columns-1");
+
+    // View mode (zero-JS): real DOM flow via CSS multi-column — items lay out at
+    // their natural height, no aspect-ratio math, no absolute positioning.
+    if (!editable) {
+      if (laidOut.length === 0) return null;
+      return (
+        <div className="@container">
+          <div data-masonry className={masonryClass}>
+            {laidOut.map(({ child, index }) => {
+              const def = getSection(child.type);
+              if (!def) return null;
+              const Child = def.component;
+              const childOptions =
+                "options" in child ? (child.options as Record<string, unknown>) : undefined;
+              const mergedOptions = { ...(childDefaults ?? {}), ...(childOptions ?? {}) };
+              return (
+                <div
+                  key={child.id ?? index}
+                  data-masonry-box
+                  data-child-index={index}
+                  className="mb-8 break-inside-avoid"
+                >
+                  <Child content={child} options={mergedOptions} isEditMode={isEditMode} />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      );
+    }
+    // Editable masonry: same multi-column flow (WYSIWYG), each child cell wrapped in
+    // ContainerChild for drag/reorder/delete/duplicate/settings with VERTICAL drag
+    // edges (multi-column stacks items vertically), plus insertion drop zones.
+    if (laidOut.length === 0) {
+      return (
+        <div className="@container">
+          <div data-masonry className={masonryClass}>
+            <MasonryDropZone containerId={container.id} index={0} testId="masonry-empty" />
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className="@container">
+        <div data-masonry className={masonryClass}>
+          {laidOut.map(({ child, index }, k) => {
+            const def = getSection(child.type);
+            if (!def) return null;
+            const childOptions =
+              "options" in child ? (child.options as Record<string, unknown>) : undefined;
+            const mergedOptions = { ...(childDefaults ?? {}), ...(childOptions ?? {}) };
+            const hasSettings = !!(def.settings || def.settingsForm) && !!openModal;
+            return (
+              <div key={child.id ?? index} data-masonry-box className="mb-8 break-inside-avoid">
+                <ContainerChild
+                  containerId={container.id}
+                  index={index}
+                  child={child}
+                  columns={1 /* hides ColSpanControl (its columns<=1 guard) */}
+                  cellClass={undefined /* mb-8 break-inside-avoid lives on the outer cell above */}
+                  label={def.label}
+                  hasSettings={hasSettings}
+                  mergedOptions={mergedOptions}
+                  isEditMode={isEditMode}
+                  clearSectionChrome={k === 0 /* first laid-out cell (render order), not array index */}
+                  ChildComp={def.component as ChildComponent}
+                  onDelete={() => emit(removeChildAt(container, index).container)}
+                  onDuplicate={() => emit(duplicateChildAt(container, index, newId))}
+                  onColSpanChange={() => {}}
+                  onOpenSettings={buildOnOpenSettings(child, index)}
+                  onChildContentChange={(c: unknown) => updateChild(index, c)}
+                  openModal={openModal}
+                  allowedEdges={COL_EDGES}
+                />
+              </div>
+            );
+          })}
+          <MasonryDropZone containerId={container.id} index={children.length} testId="masonry-append" />
+        </div>
+      </div>
+    );
+  }
 
   // --- View mode: zero-JS output, identical to the Plan 3 viewer. ---
   if (!editable) {
@@ -237,6 +409,7 @@ export function Container({ content, isEditMode, onChange, openModal }: Containe
             const cellClass = cn(
               colSpanClass[columns]?.[Math.min(span, columns)] || undefined,
               child.type === "spacer" && spacerHiddenClass[columns],
+              cellStretch,
             );
             return (
               <div key={child.id ?? index} className={cellClass}>
@@ -281,43 +454,13 @@ export function Container({ content, isEditMode, onChange, openModal }: Containe
     const span = child.layout?.colSpan ?? 1;
     const childOptions = "options" in child ? (child.options as Record<string, unknown>) : undefined;
     const mergedOptions = { ...(childDefaults ?? {}), ...(childOptions ?? {}) };
-    const cellClass = colSpanClass[columns]?.[Math.min(span, columns)] || undefined;
+    const cellClass = cn(
+      colSpanClass[columns]?.[Math.min(span, columns)] || undefined,
+      cellStretch,
+    );
 
     const hasSettings = !!(def.settings || def.settingsForm) && !!openModal;
-    const onOpenSettings =
-      hasSettings && openModal
-        ? () => {
-            const childOpts = childOptions ?? {};
-            const childContent = (child.content ?? {}) as Record<string, unknown>;
-            // Seed the form from merged content+options so content-target fields (e.g.
-            // media.link, button.link/download) round-trip instead of re-emitting at their
-            // default and clobbering the stored value. Mirrors EditorShell's top-level seed.
-            const seed = { ...childContent, ...childOpts };
-            const applyResult = (result: SettingsFormResult) =>
-              updateChild(index, {
-                ...child,
-                content: { ...(child.content as object), ...result.content },
-                options: { ...childOpts, ...result.options },
-              });
-            if (def.settingsForm) {
-              const CustomForm = def.settingsForm;
-              openModal(
-                `${def.label} Settings`,
-                <CustomForm {...seed} onChange={applyResult} />,
-              );
-            } else if (def.settings) {
-              openModal(
-                `${def.label} Settings`,
-                <SettingsForm
-                  schema={def.settings}
-                  values={seed}
-                  onChange={applyResult}
-                  tabs={def.settingsTabs}
-                />,
-              );
-            }
-          }
-        : undefined;
+    const onOpenSettings = buildOnOpenSettings(child, index);
 
     return (
       <ContainerChild
@@ -326,7 +469,6 @@ export function Container({ content, isEditMode, onChange, openModal }: Containe
         index={index}
         child={child}
         columns={columns}
-        flow={flow}
         cellClass={cellClass}
         label={def.label}
         hasSettings={hasSettings}

package/src/components/sections/Container/ContainerSettingsForm.tsx

@@ -9,14 +9,23 @@ interface ChildLike {
   options?: Record<string, unknown>;
 }
 
+type ContainerLayout = "grid" | "masonry";
+
 interface ContainerSettingsFormProps {
   columns?: number;
-  flow?: string;
+  layout?: ContainerLayout;
+  equalizeRowHeight?: boolean;
   childDefaults?: Record<string, unknown>;
   children?: ChildLike[]; // the container's child blocks (DATA, not React nodes)
   onChange: (result: { content: Record<string, unknown>; options: Record<string, unknown> }) => void;
 }
 
+interface ContainerLayoutState {
+  layout: ContainerLayout;
+  columns: number;
+  equalizeRowHeight: boolean;
+}
+
 /** Union of inheritable option fields across the child types currently present. */
 function inheritableSchema(children: ChildLike[]): SettingsSchema {
   const out: SettingsSchema = {};
@@ -33,46 +42,64 @@ function inheritableSchema(children: ChildLike[]): SettingsSchema {
 
 export function ContainerSettingsForm({
   columns = 1,
-  flow = "row",
+  layout: layoutProp = "grid",
+  equalizeRowHeight = false,
   childDefaults = {},
   children = [],
   onChange,
 }: ContainerSettingsFormProps) {
-  const [layout, setLayout] = useState({ columns, flow });
+  const [layout, setLayout] = useState<ContainerLayoutState>({
+    layout: layoutProp,
+    columns,
+    equalizeRowHeight,
+  });
   const [defaults, setDefaults] = useState<Record<string, unknown>>(childDefaults);
 
   const childSchema = inheritableSchema(children);
   const hasChildDefaults = Object.keys(childSchema).length > 0;
 
-  function emit(
-    nextLayout: { columns: number; flow: string },
-    nextDefaults: Record<string, unknown>,
-  ) {
+  function emit(nextLayout: ContainerLayoutState, nextDefaults: Record<string, unknown>) {
     onChange({ content: { ...nextLayout, childDefaults: nextDefaults }, options: {} });
   }
 
   const layoutSchema: SettingsSchema = {
+    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),
-      })),
-    },
-    flow: {
-      type: "select",
-      label: "Flow",
-      default: layout.flow,
-      target: "content",
-      options: [
-        { label: "Rows (wrap across)", value: "row" },
-        { label: "Columns (fill down)", value: "column" },
-      ],
+      // 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) };
+        },
+      ),
     },
+    ...(layout.layout === "grid"
+      ? {
+          equalizeRowHeight: {
+            type: "checkbox" as const,
+            label: "Equalize row height",
+            default: layout.equalizeRowHeight,
+            target: "content" as const,
+          },
+        }
+      : {}),
   };
 
   return (
@@ -80,13 +107,26 @@ export function ContainerSettingsForm({
       <fieldset className="flex flex-col gap-4">
         <legend className="mb-2 text-sm font-semibold text-base-contrast">Layout</legend>
         <SettingsForm
+          // Remount on layout-mode switch: grid contributes an extra conditional
+          // field (equalizeRowHeight) that masonry doesn't, and SettingsForm only
+          // resolves its initial values on mount.
+          key={layout.layout}
           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 = {
+            const next: ContainerLayoutState = {
+              layout: (result.content.layout as ContainerLayout | undefined) ?? layout.layout,
               columns: Number(result.content.columns ?? layout.columns),
-              flow: String(result.content.flow ?? layout.flow),
+              equalizeRowHeight: (result.content.equalizeRowHeight as boolean | undefined) ?? layout.equalizeRowHeight,
             };
+            // Masonry's multi-column flow needs ≥2 columns (1 would render a plain
+            // stack while the floored Columns select shows "2") — keep state in sync
+            // with the select when flipping to masonry from a single-column grid.
+            if (next.layout === "masonry" && next.columns < 2) next.columns = 2;
             setLayout(next);
             emit(next, defaults);
           }}

package/src/components/sections/Container/index.tsx

@@ -1,4 +1,4 @@
-import { defineSection } from "../../../lib/registry";
+import { defineSection, getSection } from "../../../lib/registry";
 import { z } from "zod";
 import { LayoutTemplate } from "lucide-react";
 import { getSectionSchema } from "../../../schemas/sections";
@@ -11,19 +11,27 @@ const schema = z.object({
   type: z.literal("container"),
   content: z
     .object({
+      layout: z
+        .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: z
         .number()
         .int()
         .min(1)
         .max(MAX_CONTAINER_COLUMNS)
-        .describe("Number of columns in the grid. Children flow across this many columns.")
+        .describe(
+          "Grid: number of columns children flow across. Masonry: number of CSS multi-columns children flow through.",
+        )
         .default(1),
-      flow: z
-        .enum(["row", "column"])
+      equalizeRowHeight: z
+        .boolean()
         .describe(
-          "Layout direction: 'row' (children flow left-to-right across columns) or 'column' (stacked).",
+          "Grid only: stretch every child to the height of the tallest child in its row (best-effort — applies to children whose root element can stretch, e.g. media/cards). Ignored in masonry.",
         )
-        .default("row"),
+        .default(false),
       childDefaults: z
         .record(z.string(), z.unknown())
         .describe("Optional default option values applied to child sections (inheritable settings only).")
@@ -32,18 +40,29 @@ const schema = z.object({
       // time, by which point every section schema (incl. container) is registered.
       children: z.array(z.lazy(() => getSectionSchema())).default([]),
     })
-    // Bound each child's colSpan to the available columns (spec §4.2). Non-rejecting
-    // and idempotent: a hand-edited/migrated file can't persist a phantom span, and
-    // a column-count reduction auto-clamps on the next save.
-    .transform((c) => ({
-      ...c,
-      children: c.children.map((child) =>
-        (child as { layout?: { colSpan?: number } }).layout?.colSpan &&
-        (child as { layout?: { colSpan?: number } }).layout!.colSpan! > c.columns
-          ? { ...child, layout: { ...(child as { layout?: { colSpan?: number } }).layout, colSpan: c.columns } }
-          : child,
-      ),
-    })),
+    // Grid: clamp each child's colSpan to the available columns (idempotent, non-rejecting).
+    // Masonry: strip the per-child layout envelope entirely (masonry has no column spans).
+    .transform((c) => {
+      if (c.layout === "masonry") {
+        return {
+          ...c,
+          children: c.children.map((child) => {
+            if (child.layout === undefined) return child;
+            const { layout: _drop, ...rest } = child;
+            return rest;
+          }),
+        };
+      }
+      return {
+        ...c,
+        children: c.children.map((child) =>
+          (child as { layout?: { colSpan?: number } }).layout?.colSpan &&
+          (child as { layout?: { colSpan?: number } }).layout!.colSpan! > c.columns
+            ? { ...child, layout: { ...(child as { layout?: { colSpan?: number } }).layout, colSpan: c.columns } }
+            : child,
+        ),
+      };
+    }),
 });
 
 export default defineSection({
@@ -52,14 +71,20 @@ export default defineSection({
   icon: <LayoutTemplate size={18} />,
   schema,
   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.",
+    "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 }) => (
     <Container content={content as never} isEditMode={!!isEditMode} onChange={onChange as never} openModal={openModal} />
   ),
   defaults: () => ({
     type: "container" as const,
-    content: { columns: 1, flow: "row" as const, children: [] },
+    content: { layout: "grid" as const, 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,
 });

package/src/components/sections/SectionLayout.tsx

@@ -15,14 +15,24 @@ interface Props {
   type: string;
   status?: string;
   dimNonPublished?: boolean;
+  /** Unconditional dim, e.g. audience preview: the selected audience can't see this section. */
+  dimmed?: boolean;
   children: ReactNode;
 }
 
-export function SectionLayout({ type, status, dimNonPublished, children }: Props) {
-  const isDimmed = dimNonPublished && status && status !== "live";
+export function SectionLayout({ type, status, dimNonPublished, dimmed, children }: Props) {
+  const statusDimmed = dimNonPublished && status && status !== "live";
 
   return (
-    <div className={cn("section-wrapper group", getSectionCategory(type), isDimmed && "opacity-50")}>
+    <div
+      className={cn(
+        "section-wrapper group",
+        getSectionCategory(type),
+        // Audience-preview dim is strong but recovers on hover so the section
+        // stays easy to edit; the view-mode status dim is display-only at 50%.
+        dimmed ? "opacity-15 transition-opacity duration-200 hover:opacity-100" : statusDimmed && "opacity-50",
+      )}
+    >
       {children}
     </div>
   );