@drawnagency/primitives 0.1.55 → 0.1.57

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

@@ -0,0 +1,354 @@
+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 { ChildBlockWrapper } from "../../editor/ChildBlockWrapper";
+import { SettingsForm, type SettingsFormResult } from "../../editor/SettingsForm";
+import { useBlockDnd, useBlockDropZone } from "../../../hooks/useBlockDnd";
+import {
+  removeChildAt,
+  duplicateChildAt,
+  setChildColSpan,
+  isSpacer,
+  occupiedColumns,
+  trimTrailingSpacers,
+} from "../../../lib/container-ops";
+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"];
+const COL_EDGES: Edge[] = ["top", "bottom"];
+
+type ChildComponent = ComponentType<{
+  content: Section;
+  options: Record<string, unknown>;
+  isEditMode: boolean;
+  onChange?: (content: unknown) => void;
+  openModal?: (title: string, content: ReactNode) => void;
+}>;
+
+interface ContainerChildProps {
+  containerId: string;
+  index: number;
+  child: Section;
+  columns: number;
+  flow: string;
+  cellClass: string | undefined;
+  label: string;
+  hasSettings: boolean;
+  mergedOptions: Record<string, unknown>;
+  isEditMode: boolean;
+  ChildComp: ChildComponent;
+  onDelete: () => void;
+  onDuplicate: () => void;
+  onColSpanChange: (span: number) => void;
+  onOpenSettings?: () => void;
+  onChildContentChange?: (content: unknown) => void;
+  openModal?: (title: string, content: ReactNode) => void;
+}
+
+/**
+ * One per child. Calls useBlockDnd (a hook) so it cannot live inside children.map().
+ * Makes the child cell both a drag source and a drop target advertising
+ * { containerId, index }; the central EditorContent monitor performs the actual move.
+ */
+function ContainerChild({
+  containerId,
+  index,
+  child,
+  columns,
+  flow,
+  cellClass,
+  label,
+  hasSettings,
+  mergedOptions,
+  isEditMode,
+  ChildComp,
+  onDelete,
+  onDuplicate,
+  onColSpanChange,
+  onOpenSettings,
+  onChildContentChange,
+  openModal,
+}: ContainerChildProps) {
+  const isContainer = Array.isArray((child.content as { children?: unknown })?.children);
+  const { dragRef, handleRef, closestEdge, isDragging } = useBlockDnd({
+    blockId: child.id ?? `child-${index}`,
+    containerId,
+    index,
+    isContainer,
+    allowedEdges: flow === "column" ? COL_EDGES : ROW_EDGES,
+    enabled: true,
+  });
+
+  return (
+    <div
+      ref={dragRef}
+      className={cellClass}
+      data-child-index={index}
+      data-child-id={child.id}
+    >
+      <ChildBlockWrapper
+        label={label}
+        columns={columns}
+        colSpan={Math.min(child.layout?.colSpan ?? 1, columns)}
+        closestEdge={closestEdge}
+        isDragging={isDragging}
+        hasSettings={hasSettings}
+        dragHandleRef={handleRef}
+        onDelete={onDelete}
+        onDuplicate={onDuplicate}
+        onColSpanChange={onColSpanChange}
+        onOpenSettings={onOpenSettings}
+      >
+        <ChildComp
+          content={child}
+          options={mergedOptions}
+          isEditMode={isEditMode}
+          onChange={onChildContentChange}
+          openModal={openModal}
+        />
+      </ChildBlockWrapper>
+    </div>
+  );
+}
+
+interface ContainerContent {
+  columns: number;
+  flow: string;
+  childDefaults?: Record<string, unknown>;
+  children: Section[];
+}
+
+export interface ContainerProps {
+  content: { id?: string; content: ContainerContent };
+  isEditMode: boolean;
+  onChange?: (content: unknown) => void;
+  openModal?: (title: string, content: ReactNode) => void;
+}
+
+/**
+ * An EMPTY-COLUMN cell in edit mode — used for BOTH render-only trailing ghosts and persisted
+ * interior spacer children. They are visually identical (a spacer should just look like an empty
+ * column), so this is one component; only the `testId` differs. Each is a direct grid item that
+ * stretches to the row height (so it matches the size of neighbouring content cells) and advertises
+ * an absolute 1-based target column, so a drop pads the intervening tracks with spacers — or, when a
+ * spacer already holds that column, replaces it. There is no per-cell delete: an interior gap is
+ * closed by dropping/dragging a block onto it, or by deleting the block after it (trailing trim).
+ */
+function EmptyColumnCell({
+  containerId,
+  targetColumn,
+  testId,
+}: {
+  containerId: string;
+  targetColumn: number;
+  testId: string;
+}) {
+  const { dropRef, closestEdge } = useBlockDropZone({
+    containerId,
+    index: 0,
+    toColumn: targetColumn,
+    allowedEdges: ROW_EDGES,
+    enabled: true,
+  });
+  const active = closestEdge !== null;
+  return (
+    <div
+      ref={dropRef}
+      data-empty-dropzone
+      data-testid={testId}
+      data-target-column={targetColumn}
+      className={cn(
+        "flex min-h-20 items-center justify-center rounded-md border-2 border-dashed text-xs text-base-contrast-light/50",
+        active ? "border-primary" : "border-base-200",
+      )}
+    >
+      Empty
+    </div>
+  );
+}
+
+function newId(): string {
+  return typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+    ? crypto.randomUUID()
+    : `child-${Math.random().toString(36).slice(2)}-${Date.now()}`;
+}
+
+export function Container({ content, isEditMode, onChange, openModal }: ContainerProps) {
+  const { columns, flow, childDefaults, children } = content.content;
+
+  const editable = isEditMode && !!onChange;
+
+  // container-ops operate on a proper Section whose content is the ContainerContent.
+  const container: Section = {
+    id: content.id ?? "container",
+    type: "container",
+    content: content.content as unknown as Record<string, unknown>,
+  };
+  const emit = (nextSection: Section) =>
+    onChange?.({ ...content, content: nextSection.content });
+
+  // Per-child inline content edits (e.g. prose/media bubble their own onChange).
+  const updateChild = (index: number, childContent: unknown) => {
+    const next = children.map((c, i) => (i === index ? (childContent as Section) : c));
+    onChange?.({ ...content, content: { ...content.content, children: next } });
+  };
+
+  // Fixed 32px gap on BOTH axes, in view AND edit. The gap is no longer user-
+  // configurable; 32px gives the left-rail child controls room while keeping the
+  // published grid identical to the editor (true WYSIWYG).
+  const gridClass = cn(
+    "grid",
+    "gap-8",
+    containerGridClass[columns] ?? "grid-cols-1",
+    flow === "column" && "grid-flow-col",
+  );
+
+  // --- View mode: zero-JS output, identical to the Plan 3 viewer. ---
+  if (!editable) {
+    return (
+      <div className="@container">
+        <div className={gridClass}>
+          {children.map((child, index) => {
+            const def = getSection(child.type);
+            if (!def) return null;
+            const Child = def.component;
+            const span = child.layout?.colSpan ?? 1;
+            const childOptions =
+              "options" in child ? (child.options as Record<string, unknown>) : undefined;
+            const mergedOptions = { ...(childDefaults ?? {}), ...(childOptions ?? {}) };
+            const cellClass = cn(
+              colSpanClass[columns]?.[Math.min(span, columns)] || undefined,
+              child.type === "spacer" && spacerHiddenClass[columns],
+            );
+            return (
+              <div key={child.id ?? index} className={cellClass}>
+                <Child content={child} options={mergedOptions} isEditMode={isEditMode} />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  // A child's 1-based start column (spacer = 1 track; real child = clamped colSpan).
+  function columnStartOf(index: number): number {
+    let c = 0;
+    for (let i = 0; i < index; i++) {
+      c += isSpacer(children[i]) ? 1 : Math.min(children[i].layout?.colSpan ?? 1, columns);
+    }
+    return c + 1;
+  }
+
+  // --- Edit-mode child rendering. Each child is wrapped in <ContainerChild> so it can
+  // call the useBlockDnd hook (rules of hooks → one component per child). ---
+  function renderEditChild(child: Section, index: number): ReactNode {
+    const def = getSection(child.type);
+    if (!def) return null;
+
+    if (isSpacer(child)) {
+      // A persisted spacer renders as a plain empty-column cell (a direct grid item, like a
+      // ghost) — no drag handle, no delete. It's a drop target that replaces itself when a block
+      // is dropped onto its column.
+      return (
+        <EmptyColumnCell
+          key={child.id ?? index}
+          containerId={container.id}
+          targetColumn={columnStartOf(index)}
+          testId="spacer-cell"
+        />
+      );
+    }
+
+    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 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;
+
+    return (
+      <ContainerChild
+        key={child.id ?? index}
+        containerId={container.id}
+        index={index}
+        child={child}
+        columns={columns}
+        flow={flow}
+        cellClass={cellClass}
+        label={def.label}
+        hasSettings={hasSettings}
+        mergedOptions={mergedOptions}
+        isEditMode={isEditMode}
+        ChildComp={def.component as ChildComponent}
+        onDelete={() => emit(trimTrailingSpacers(removeChildAt(container, index).container))}
+        onDuplicate={() => emit(duplicateChildAt(container, index, newId))}
+        onColSpanChange={(s) => emit(setChildColSpan(container, index, s))}
+        onOpenSettings={onOpenSettings}
+        onChildContentChange={(c: unknown) => updateChild(index, c)}
+        openModal={openModal}
+      />
+    );
+  }
+
+  // --- Edit mode --- (insertion is surfaced via the section toolbar's "+" in
+  // EditorContent, not a Container-owned affordance.) Children render first, then a
+  // ghost drop cell for each empty trailing column. Each ghost advertises its absolute
+  // 1-based target column so a drop pads intervening tracks with spacers (the empty
+  // container is the all-columns-empty case, with ghosts for columns 1..columns).
+  const occupied = occupiedColumns(children, columns);
+  const emptyCols = occupied < columns ? columns - occupied : 0;
+  return (
+    <div className="@container">
+      <div className={gridClass}>
+        {children.map(renderEditChild)}
+        {Array.from({ length: emptyCols }, (_, i) => (
+          <EmptyColumnCell
+            key={`ghost-${i}`}
+            containerId={container.id}
+            targetColumn={occupied + i + 1}
+            testId="ghost-cell"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

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,
+});