@drawnagency/primitives 0.1.56 → 0.1.57

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

@@ -0,0 +1,113 @@
+import { useState } from "react";
+import { getSection } from "../../../lib/registry";
+import { SettingsForm } from "../../editor/SettingsForm";
+import { MAX_CONTAINER_COLUMNS } from "../../../lib/container-grid";
+import type { SettingsSchema } from "../../../lib/registry";
+
+interface ChildLike {
+  type: string;
+  options?: Record<string, unknown>;
+}
+
+interface ContainerSettingsFormProps {
+  columns?: number;
+  flow?: string;
+  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;
+}
+
+/** Union of inheritable option fields across the child types currently present. */
+function inheritableSchema(children: ChildLike[]): SettingsSchema {
+  const out: SettingsSchema = {};
+  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;
+}
+
+export function ContainerSettingsForm({
+  columns = 1,
+  flow = "row",
+  childDefaults = {},
+  children = [],
+  onChange,
+}: ContainerSettingsFormProps) {
+  const [layout, setLayout] = useState({ columns, flow });
+  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>,
+  ) {
+    onChange({ content: { ...nextLayout, childDefaults: nextDefaults }, options: {} });
+  }
+
+  const layoutSchema: SettingsSchema = {
+    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 (
+    <div className="flex flex-col gap-6">
+      <fieldset className="flex flex-col gap-4">
+        <legend className="mb-2 text-sm font-semibold text-base-contrast">Layout</legend>
+        <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);
+          }}
+        />
+      </fieldset>
+
+      {hasChildDefaults && (
+        <fieldset className="flex flex-col gap-4 border-t border-base-200 pt-4">
+          <legend className="mb-2 text-sm font-semibold text-base-contrast">Apply to all items</legend>
+          <SettingsForm
+            schema={childSchema}
+            values={defaults}
+            onChange={(result) => {
+              // inheritable fields are options-typed in their source defs → result.options
+              const next = { ...defaults, ...result.options };
+              setDefaults(next);
+              emit(layout, next);
+            }}
+          />
+        </fieldset>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import { LayoutTemplate } from "lucide-react";
+import { getSectionSchema } from "../../../schemas/sections";
+import { MAX_CONTAINER_COLUMNS } from "../../../lib/container-grid";
+import { Container } from "./Container";
+import { ContainerSettingsForm } from "./ContainerSettingsForm";
+
+const schema = z.object({
+  type: z.literal("container"),
+  content: z
+    .object({
+      columns: z.number().int().min(1).max(MAX_CONTAINER_COLUMNS).default(1),
+      flow: z.enum(["row", "column"]).default("row"),
+      childDefaults: z.record(z.string(), z.unknown()).optional(),
+      // Recursive: children are full blocks. z.lazy defers evaluation to parse
+      // 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,
+      ),
+    })),
+});
+
+export default defineSection({
+  type: "container",
+  label: "Container",
+  icon: <LayoutTemplate size={18} />,
+  schema,
+  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: [] },
+  }),
+  getLabel: (content) => {
+    const n = content.content.children.length;
+    return `Container (${n} item${n === 1 ? "" : "s"})`;
+  },
+  settingsForm: ContainerSettingsForm,
+});

package/src/components/sections/IconList/IconList.tsx

@@ -5,6 +5,7 @@ import { getIcon } from "../../../lib/icons";
 import { useEditableCollection } from "../../primitives/useEditableCollection";
 import { EditablePlainText } from "../../primitives/EditablePlainText";
 import { DragHandle, DeleteIcon, AddIcon } from "../../shared/icons";
+import { CopyPlus, Pencil } from "lucide-react";
 import { IconButton } from "../../shared/IconButton";
 import { IconPicker } from "../../primitives/IconPicker";
 
@@ -12,6 +13,7 @@ interface IconListItem {
   label: string;
   text: string;
   icon?: string;
+  dodont?: "do" | "dont";
 }
 
 interface Props {
@@ -84,10 +86,20 @@ export default function IconList({
 // ---------------------------------------------------------------------------
 
 function resolveIcon(item: IconListItem, defaultIcon: string | null | undefined) {
+  // dodont WINS over item.icon and the section default — forces the DoDontList glyph.
+  if (item.dodont === "do") return getIcon("check") ?? null;
+  if (item.dodont === "dont") return getIcon("x") ?? null;
   const id = item.icon ?? defaultIcon;
   return id ? getIcon(id) : null;
 }
 
+// Per-item icon color: green for "do", red for "dont", else the section-wide class.
+function resolveIconColor(item: IconListItem, iconClassName: string) {
+  if (item.dodont === "do") return "text-green-600";
+  if (item.dodont === "dont") return "text-red-600";
+  return iconClassName;
+}
+
 // ---------------------------------------------------------------------------
 // View mode
 // ---------------------------------------------------------------------------
@@ -115,6 +127,7 @@ function ViewIconList({
     <div className="grid gap-4 pb-4">
       {items.map((item, i) => {
         const iconEntry = resolveIcon(item, defaultIcon);
+        const iconColor = resolveIconColor(item, iconClassName);
         return (
           <div
             key={i}
@@ -126,7 +139,7 @@ function ViewIconList({
             {hasAnyIcon && (
               <div
                 data-testid="icon-list-icon"
-                className={cn("flex items-start pt-0.5", iconClassName)}
+                className={cn("flex items-start pt-0.5", iconColor)}
               >
                 {iconEntry && <iconEntry.icon size={18} />}
               </div>
@@ -191,7 +204,22 @@ function EditIconList({
     [wrappedItems, onItemsChange],
   );
 
-  const hasAnyIcon = items.some((item) => resolveIcon(item, defaultIcon));
+  const duplicateItem = useCallback(
+    (index: number) => {
+      const copy = { ...wrappedItems[index].data };
+      const next = [
+        ...wrappedItems.slice(0, index + 1).map((w) => w.data),
+        copy,
+        ...wrappedItems.slice(index + 1).map((w) => w.data),
+      ];
+      onItemsChange(next);
+    },
+    [wrappedItems, onItemsChange],
+  );
+
+  // In edit mode the icon column always renders — even items with no icon need
+  // the always-present picker trigger (icon + Do/Don't tagging) in the icon cell.
+  const hasAnyIcon = true;
 
   return (
     <div className="group/list relative grid gap-4 pb-4">
@@ -213,6 +241,7 @@ function EditIconList({
           onReorder={onReorder}
           onRemove={onRemove}
           onUpdateItem={(patch) => updateItem(index, patch)}
+          onDuplicate={() => duplicateItem(index)}
         />
       ))}
 
@@ -252,6 +281,7 @@ function EditableRow({
   onReorder,
   onRemove,
   onUpdateItem,
+  onDuplicate,
 }: {
   id: string;
   index: number;
@@ -268,14 +298,17 @@ function EditableRow({
   onReorder: (from: number, to: number) => void;
   onRemove: (id: string) => void;
   onUpdateItem: (patch: Partial<IconListItem>) => void;
+  onDuplicate: () => void;
 }) {
   const rowRef = useRef<HTMLDivElement>(null);
   const handleRef = useRef<HTMLButtonElement>(null);
   const [iconHover, setIconHover] = useState(false);
   const [pickerOpen, setPickerOpen] = useState(false);
+  const [editingSuppressed, setEditingSuppressed] = useState(false);
 
   const iconEntry = resolveIcon(item, defaultIcon);
   const effectiveIconId = item.icon ?? defaultIcon ?? null;
+  const iconColor = resolveIconColor(item, iconClassName);
 
   useEffect(() => {
     const row = rowRef.current;
@@ -324,6 +357,13 @@ function EditableRow({
 
   const isDropTarget = dragState.targetId === id && dragState.sourceId !== id;
 
+  const onEditableActivity = (e: React.SyntheticEvent) => {
+    const t = e.target as HTMLElement;
+    if (t.matches?.("input, textarea, [contenteditable], [contenteditable='true']")) {
+      setEditingSuppressed(true);
+    }
+  };
+
   return (
     <div
       ref={rowRef}
@@ -332,55 +372,60 @@ function EditableRow({
         hasAnyIcon ? "grid-cols-[24px_1fr]" : "grid-cols-1",
         isDropTarget && "border-t-2 border-primary",
       )}
+      onFocusCapture={onEditableActivity}
+      onInput={onEditableActivity}
+      onMouseMove={() => setEditingSuppressed(false)}
     >
-      {/* Drag handle — absolute in left gutter, no layout shift */}
-      <IconButton
-        ref={handleRef}
-        icon={<DragHandle size={16} />}
-        label="Drag to reorder"
-        size="sm"
-        className={cn(
-          "absolute -left-7 top-0 shrink-0 cursor-grab rounded-md text-base-contrast-light/80 hover:bg-base-contrast-light/10 hover:text-base-contrast active:cursor-grabbing",
-          iconHover
-            ? "opacity-0 pointer-events-none"
-            : "opacity-0 group-hover/row:opacity-100 no-hover:opacity-100",
-        )}
-        tabIndex={-1}
-      />
 
-      {/* Icon — matches ViewIconList layout: 24px column, flex items-start pt-0.5 */}
+      {/* Icon — matches ViewIconList layout: 24px column, flex items-start pt-0.5.
+          A SINGLE always-present trigger shows the current effective glyph
+          (resolveIcon returns the forced check/x for tagged items) and opens
+          the IconPicker, which carries both the curated grid (None mode) and
+          the Do/Don't tiles (Do-Don't mode). Reachable for every item, tagged
+          or not, so tags can be edited or cleared via the picker. */}
       {hasAnyIcon && (
         <div
-          className={cn("relative flex items-start pt-0.5", iconClassName)}
+          data-testid="icon-list-icon"
+          className={cn("relative flex items-start pt-0.5", iconColor)}
           onMouseEnter={() => setIconHover(true)}
           onMouseLeave={() => setIconHover(false)}
         >
-          {iconEntry ? (
-            <button
-              className="cursor-pointer transition-opacity hover:opacity-70"
-              aria-label="Change icon"
-              onClick={() => setPickerOpen((prev) => !prev)}
-            >
+          <button
+            className="cursor-pointer transition-opacity hover:opacity-70"
+            aria-label="Change icon"
+            onClick={() => setPickerOpen((prev) => !prev)}
+          >
+            {iconHover && !pickerOpen ? (
+              <Pencil size={18} className="text-base-contrast-light" />
+            ) : iconEntry ? (
               <iconEntry.icon size={18} />
-            </button>
-          ) : null}
-
-          {iconHover && !pickerOpen && iconEntry && (
-            <span className="pointer-events-none absolute right-full mr-3 top-0.5 whitespace-nowrap text-xs text-base-contrast-light/80">
-              Edit
-            </span>
-          )}
+            ) : (
+              <span className="flex h-[18px] w-[18px] items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" />
+            )}
+          </button>
 
           {pickerOpen && (
             <div className="absolute top-full left-0 z-50 mt-1">
               <IconPicker
                 selected={effectiveIconId}
-                showRemove={false}
+                showRemove={true}
+                allowDoDont={true}
+                dodont={item.dodont}
                 onSelect={(newIcon) => {
-                  if (newIcon !== null) onUpdateItem({ icon: newIcon });
+                  onUpdateItem({ icon: newIcon ?? undefined, dodont: undefined });
                   setPickerOpen(false);
                   setIconHover(false);
                 }}
+                onSelectDoDont={(v) => {
+                  onUpdateItem({ dodont: v });
+                  // Switching to None mode (v === undefined) clears the tag but
+                  // keeps the picker open so the grid is reachable; choosing a
+                  // Do/Don't tile commits and closes.
+                  if (v !== undefined) {
+                    setPickerOpen(false);
+                    setIconHover(false);
+                  }
+                }}
                 onClose={() => {
                   setPickerOpen(false);
                   setIconHover(false);
@@ -413,15 +458,40 @@ function EditableRow({
         />
       </div>
 
-      {/* Delete button — absolute positioned, no layout shift */}
-      <IconButton
-        icon={<DeleteIcon size={14} />}
-        label="Delete item"
-        size="sm"
-        intent="destructive"
-        onClick={() => onRemove(id)}
-        className="absolute -right-7 top-0 opacity-0 group-hover/row:opacity-100 no-hover:opacity-100"
-      />
+      {/* Per-row controls — drag grip + duplicate + delete, overlaid at top-right of the text.
+          Hidden while the user is actively editing this row's text; restored on cursor movement. */}
+      <div
+        className={cn(
+          "absolute right-1 top-1 z-10 flex items-center gap-1",
+          editingSuppressed
+            ? "opacity-0 pointer-events-none"
+            : "opacity-0 group-hover/row:opacity-100 no-hover:opacity-100",
+        )}
+      >
+        <IconButton
+          ref={handleRef}
+          icon={<DragHandle size={14} />}
+          label="Drag to reorder"
+          size="sm"
+          className="cursor-grab rounded bg-base/80 p-1 shadow-sm text-base-contrast-light/80 hover:text-base-contrast active:cursor-grabbing"
+          tabIndex={-1}
+        />
+        <button
+          aria-label="Duplicate item"
+          onClick={onDuplicate}
+          className="cursor-pointer rounded bg-base/80 p-1 shadow-sm text-base-contrast-light hover:text-primary"
+        >
+          <CopyPlus size={14} />
+        </button>
+        <IconButton
+          icon={<DeleteIcon size={14} />}
+          label="Delete item"
+          size="sm"
+          intent="destructive"
+          onClick={() => onRemove(id)}
+          className="bg-base/80 shadow-sm"
+        />
+      </div>
     </div>
   );
 }

package/src/components/sections/IconList/IconListSettings.tsx

@@ -13,7 +13,7 @@ export function IconListSettings({
   icon: string | null;
   showLabel: boolean;
   stackText: boolean;
-  onChange: (values: { icon: string | null; showLabel: boolean; stackText: boolean }) => void;
+  onChange: (result: { content: Record<string, unknown>; options: Record<string, unknown> }) => void;
 }) {
   const [icon, setIcon] = useState(initialIcon);
   const [showLabel, setShowLabel] = useState(initialShowLabel);
@@ -21,7 +21,7 @@ export function IconListSettings({
   const [pickerOpen, setPickerOpen] = useState(false);
 
   const emit = (overrides: Partial<{ icon: string | null; showLabel: boolean; stackText: boolean }>) =>
-    onChange({ icon, showLabel, stackText, ...overrides });
+    onChange({ content: {}, options: { icon, showLabel, stackText, ...overrides } });
 
   const showIcons = icon !== null;
   const iconEntry = icon ? getIcon(icon) : null;

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

@@ -7,7 +7,7 @@ import { IconListSettings } from "./IconListSettings";
 const schema = z.object({
   type: z.literal("icon_list"),
   content: z.object({
-    items: z.array(z.object({ label: z.string(), text: z.string(), icon: z.string().optional() })),
+    items: z.array(z.object({ label: z.string(), text: z.string(), icon: z.string().optional(), dodont: z.enum(["do", "dont"]).optional() })),
   }),
   options: z.object({
     icon: z.string().nullable().optional(),

package/src/components/sections/Media/MediaBlock.tsx

@@ -0,0 +1,103 @@
+import type { SingleMediaReference } from "../../../schemas/shared";
+import type { LinkValue } from "../../../schemas/link";
+import { Check, X } from "lucide-react";
+import { cn } from "../../../lib/cn";
+import { ResolvedMedia } from "../../primitives/ResolvedMedia";
+import { ImageDropZone } from "../../primitives/ImageDropZone";
+import { EditablePlainText } from "../../primitives/EditablePlainText";
+import { useMediaLibrary } from "../../shell/MediaLibraryContext";
+
+export interface MediaBlockProps {
+  refValue: SingleMediaReference;
+  options: { square?: boolean; showCaption?: boolean; border?: boolean; objectFit?: "cover" | "contain" };
+  /** Per-item link (viewer: already resolved to kind:"external" upstream). */
+  link?: LinkValue;
+  /** Per-item do/dont badge. */
+  dodont?: "do" | "dont";
+  isEditMode: boolean;
+  onRefChange?: (ref: SingleMediaReference) => void;
+}
+
+export function MediaBlock({ refValue, options, link, dodont, isEditMode, onRefChange }: MediaBlockProps) {
+  const mediaLibrary = useMediaLibrary();
+  // Per-item ref value overrides the inherited option (childDefaults); default contain.
+  const fit = refValue.objectFit ?? options.objectFit;
+  const fitClass = fit === "cover" ? "object-cover" : "object-contain";
+  const showBorder = refValue.border ?? options.border;
+  const captionStr = refValue.caption
+    ? Array.isArray(refValue.caption) ? refValue.caption.join("\n") : refValue.caption
+    : "";
+
+  const replace = onRefChange ? (imageId: string) => onRefChange({ ...refValue, imageId }) : undefined;
+
+  const resolved = (
+    <ResolvedMedia
+      imageId={refValue.imageId || undefined}
+      className="h-full w-full"
+      imgClassName={fitClass}
+      invertFrom={refValue.invertFrom}
+    />
+  );
+
+  let media = isEditMode && replace ? (
+    <ImageDropZone onImageSelected={replace} className="h-full w-full">
+      {resolved}
+    </ImageDropZone>
+  ) : resolved;
+
+  // Viewer link wrapper (CTAButton pattern). resolveInternalLinks has collapsed
+  // internal links to kind:"external" before render. No wrapper in edit mode.
+  if (!isEditMode && link && link.kind === "external" && link.href) {
+    media = (
+      <a href={link.href} target={link.target} className="group block">
+        {media}
+      </a>
+    );
+  }
+
+  const onImageClick = isEditMode && replace && mediaLibrary
+    ? () => mediaLibrary.openSelectModal((imageId) => replace(imageId))
+    : undefined;
+
+  return (
+    <figure>
+      {dodont && (
+        <div className="flex h-10 items-center justify-center pb-1">
+          {dodont === "do"
+            ? <Check size={28} className="text-green-600" />
+            : <X size={28} className="text-red-600" />}
+        </div>
+      )}
+      <div
+        data-testid="media-open-surface"
+        className={cn(
+          "overflow-hidden rounded-md",
+          showBorder && "border border-base-200",
+          options.square && "aspect-square",
+          onImageClick && "cursor-pointer",
+        )}
+        onClick={onImageClick}
+        onPointerDown={onImageClick ? (e) => e.stopPropagation() : undefined}
+      >
+        {media}
+      </div>
+
+      {options.showCaption && (
+        <figcaption className="mt-2 min-h-[1em] text-sm text-base-contrast-light">
+          {isEditMode && onRefChange ? (
+            <EditablePlainText
+              tag="span"
+              value={captionStr}
+              onChange={(caption) => onRefChange({ ...refValue, caption: caption || undefined })}
+              isEditMode={true}
+              placeholder="Caption"
+              className="block min-h-[1em]"
+            />
+          ) : (
+            captionStr || " "
+          )}
+        </figcaption>
+      )}
+    </figure>
+  );
+}

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

@@ -0,0 +1,85 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import { Image as ImageIcon } from "lucide-react";
+import { SingleMediaReferenceSchema } from "../../../schemas/shared";
+import { LinkValueSchema, DEFAULT_LINK } from "../../../schemas/link";
+import { MediaBlock } from "./MediaBlock";
+
+const schema = z.object({
+  type: z.literal("media"),
+  content: z.object({
+    ref: SingleMediaReferenceSchema,
+    link: LinkValueSchema.optional(),
+    dodont: z.enum(["do", "dont"]).optional(),
+  }),
+  options: z
+    .object({
+      square: z.boolean().optional(),
+      showCaption: z.boolean().optional(),
+      border: z.boolean().optional(),
+      objectFit: z.enum(["cover", "contain"]).optional(),
+    })
+    .default({}),
+});
+
+export default defineSection({
+  type: "media",
+  label: "Media",
+  icon: <ImageIcon size={18} />,
+  schema,
+  component: ({ content, options, onChange }) => (
+    <MediaBlock
+      refValue={content.content.ref}
+      options={(options ?? {}) as { square?: boolean; showCaption?: boolean; border?: boolean; objectFit?: "cover" | "contain" }}
+      link={content.content.link}
+      dodont={content.content.dodont}
+      isEditMode={!!onChange}
+      onRefChange={
+        onChange ? (ref) => onChange({ ...content, content: { ...content.content, ref } }) : undefined
+      }
+    />
+  ),
+  defaults: () => ({
+    type: "media" as const,
+    content: { ref: { type: "image" as const, imageId: "" } },
+    options: {},
+  }),
+  getLabel: () => "Media",
+  getThumbnails: (content) =>
+    content.content.ref.imageId
+      ? [{ type: "image" as const, 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" },
+    dodont: {
+      type: "select",
+      label: "Do / Don't",
+      target: "content",
+      default: "",
+      emptyIsUndefined: true,
+      options: [
+        { label: "None", value: "" },
+        { label: "Do", value: "do" },
+        { label: "Don't", value: "dont" },
+      ],
+    },
+  },
+  inheritableSettings: ["square", "showCaption", "border", "objectFit"],
+  settingsTabs: [
+    { label: "Display", fields: ["square", "showCaption", "border", "objectFit"] },
+    { label: "Link", fields: ["link"] },
+    { label: "Do / Don't", fields: ["dodont"] },
+  ],
+});

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

@@ -14,6 +14,7 @@ export default defineSection({
   label: "Prose",
   icon: <AlignLeft size={18} />,
   schema,
+  richTextFields: ["body"],
   component: ({ content, onChange }) => (
     <Prose body={content.content.body} onChange={onChange ? (c) => onChange(c as typeof content) : undefined} />
   ),

package/src/components/sections/Spacer/Spacer.tsx

@@ -0,0 +1,6 @@
+// Spacer view cell — deliberately empty. It occupies its grid column so the gap is
+// preserved on publish. The hide-on-collapse class (which depends on the parent's column
+// count) is applied by the Container to the cell wrapper, not here.
+export default function Spacer() {
+  return <div data-spacer aria-hidden="true" className="h-full" />;
+}