@drawnagency/primitives 0.1.56 → 0.1.57

package/src/components/primitives/EditableGrid.tsx

@@ -3,7 +3,7 @@ import { ImageIcon } from "lucide-react";
 import { AddIcon, DragHandle, DeleteIcon, SettingsIcon } from "../shared/icons";
 import { IconButton } from "../shared/IconButton";
 import { cn } from "../../lib/cn";
-import { gridColsClass } from "../../lib/grid";
+import { containerGridClass } from "../../lib/container-grid";
 import { useEditableCollection } from "./useEditableCollection";
 
 interface EditableGridProps<T> {
@@ -68,47 +68,51 @@ export function EditableGrid<T>({
 
   if (!isEditMode) {
     return (
-      <div className={cn("grid gap-4", gridColsClass[columns] || "grid-cols-1", className)}>
-        {wrappedItems.map((wrapped, index) => (
-          <div key={wrapped.id}>
-            {renderItem(wrapped.data, { isEditMode: false, index })}
-          </div>
-        ))}
+      <div className="@container">
+        <div className={cn("grid gap-4", containerGridClass[columns] || containerGridClass[1], className)}>
+          {wrappedItems.map((wrapped, index) => (
+            <div key={wrapped.id}>
+              {renderItem(wrapped.data, { isEditMode: false, index })}
+            </div>
+          ))}
+        </div>
       </div>
     );
   }
 
   return (
-    <div className={cn("group/grid relative grid gap-4", gridColsClass[columns] || "grid-cols-1", className)}>
-      {wrappedItems.map((wrapped, index) => (
-        <GridCell
-          key={wrapped.id}
-          id={wrapped.id}
-          index={index}
-          isLast={index === wrappedItems.length - 1}
-          isDragging={isDragging}
-          onReorder={onReorder}
-          onRemove={onRemove}
-          onInsert={onInsert}
-          onSettings={onItemSettings ? () => onItemSettings(index) : undefined}
-          onImageClick={onItemImageClick ? () => onItemImageClick(index) : undefined}
-          chromeTopClass={chromeTopClass}
-          dragState={dragState}
-          setDragState={setDragState}
-        >
-          {renderItem(wrapped.data, { isEditMode: true, index })}
-        </GridCell>
-      ))}
+    <div className="@container">
+      <div className={cn("group/grid relative grid gap-4", containerGridClass[columns] || containerGridClass[1], className)}>
+        {wrappedItems.map((wrapped, index) => (
+          <GridCell
+            key={wrapped.id}
+            id={wrapped.id}
+            index={index}
+            isLast={index === wrappedItems.length - 1}
+            isDragging={isDragging}
+            onReorder={onReorder}
+            onRemove={onRemove}
+            onInsert={onInsert}
+            onSettings={onItemSettings ? () => onItemSettings(index) : undefined}
+            onImageClick={onItemImageClick ? () => onItemImageClick(index) : undefined}
+            chromeTopClass={chromeTopClass}
+            dragState={dragState}
+            setDragState={setDragState}
+          >
+            {renderItem(wrapped.data, { isEditMode: true, index })}
+          </GridCell>
+        ))}
 
-      {/* Add button — absolute, centered below the grid */}
-      <IconButton
-        icon={<AddIcon size={16} />}
-        label="Add item"
-        size="lg"
-        intent="primary"
-        onClick={onAdd}
-        className="absolute -bottom-6 left-1/2 z-20 -translate-x-1/2 rounded-full border border-base-200 bg-base opacity-0 transition-opacity group-hover/grid:opacity-100"
-      />
+        {/* Add button — absolute, centered below the grid */}
+        <IconButton
+          icon={<AddIcon size={16} />}
+          label="Add item"
+          size="lg"
+          intent="primary"
+          onClick={onAdd}
+          className="absolute -bottom-6 left-1/2 z-20 -translate-x-1/2 rounded-full border border-base-200 bg-base opacity-0 transition-opacity group-hover/grid:opacity-100"
+        />
+      </div>
     </div>
   );
 }

package/src/components/primitives/IconPicker.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
+import { Check, X } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { curatedIcons } from "../../lib/icons";
 
@@ -7,10 +8,26 @@ interface IconPickerProps {
   onSelect: (iconId: string | null) => void;
   onClose: () => void;
   showRemove?: boolean;
+  /** Opt-in: render the None / Do-Don't mode toggle. Default false → grid-only. */
+  allowDoDont?: boolean;
+  /** Current per-item Do/Don't tag (only meaningful when allowDoDont). */
+  dodont?: "do" | "dont";
+  /** Commit a Do/Don't choice; pass undefined to clear the tag (None). */
+  onSelectDoDont?: (v: "do" | "dont" | undefined) => void;
 }
 
-export function IconPicker({ selected, onSelect, onClose, showRemove = true }: IconPickerProps) {
+export function IconPicker({
+  selected,
+  onSelect,
+  onClose,
+  showRemove = true,
+  allowDoDont = false,
+  dodont,
+  onSelectDoDont,
+}: IconPickerProps) {
   const panelRef = useRef<HTMLDivElement>(null);
+  // Open in the mode matching the item's current state.
+  const [mode, setMode] = useState<"none" | "dodont">(dodont ? "dodont" : "none");
 
   useEffect(() => {
     function handleMouseDown(e: MouseEvent) {
@@ -22,38 +39,111 @@ export function IconPicker({ selected, onSelect, onClose, showRemove = true }: I
     return () => document.removeEventListener("mousedown", handleMouseDown);
   }, [onClose]);
 
+  const showDoDont = allowDoDont && mode === "dodont";
+
   return (
     <div
       ref={panelRef}
       className="absolute z-50 w-56 rounded-lg border border-base-200 bg-base p-2 shadow-lg"
     >
-      <div className="grid grid-cols-5 gap-1">
-        {curatedIcons.map((entry) => {
-          const Icon = entry.icon;
-          const isSelected = selected === entry.id;
-          return (
+      {allowDoDont && (
+        <div role="tablist" aria-label="Icon mode" className="mb-2 flex gap-1 rounded-md bg-base-200 p-0.5">
+          <button
+            type="button"
+            role="tab"
+            aria-label="None"
+            aria-selected={mode === "none"}
+            className={cn(
+              "cursor-pointer flex-1 rounded px-2 py-1 text-xs font-medium transition-colors",
+              mode === "none"
+                ? "bg-base text-base-contrast shadow-sm"
+                : "text-base-contrast-light hover:text-base-contrast",
+            )}
+            onClick={() => {
+              setMode("none");
+              onSelectDoDont?.(undefined);
+            }}
+          >
+            None
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-label="Do / Don't"
+            aria-selected={mode === "dodont"}
+            className={cn(
+              "cursor-pointer flex-1 rounded px-2 py-1 text-xs font-medium transition-colors",
+              mode === "dodont"
+                ? "bg-base text-base-contrast shadow-sm"
+                : "text-base-contrast-light hover:text-base-contrast",
+            )}
+            onClick={() => setMode("dodont")}
+          >
+            Do / Don't
+          </button>
+        </div>
+      )}
+
+      {showDoDont ? (
+        <div className="grid grid-cols-2 gap-2">
+          <button
+            type="button"
+            aria-label="Do"
+            className={cn(
+              "cursor-pointer flex flex-col items-center justify-center gap-1 rounded py-2 transition-colors",
+              "text-green-600 hover:bg-base-accent",
+              dodont === "do" && "ring-2 ring-primary bg-base-accent",
+            )}
+            onClick={() => onSelectDoDont?.("do")}
+          >
+            <Check size={20} />
+            <span className="text-xs font-medium">Do</span>
+          </button>
+          <button
+            type="button"
+            aria-label="Don't"
+            className={cn(
+              "cursor-pointer flex flex-col items-center justify-center gap-1 rounded py-2 transition-colors",
+              "text-red-600 hover:bg-base-accent",
+              dodont === "dont" && "ring-2 ring-primary bg-base-accent",
+            )}
+            onClick={() => onSelectDoDont?.("dont")}
+          >
+            <X size={20} />
+            <span className="text-xs font-medium">Don't</span>
+          </button>
+        </div>
+      ) : (
+        <>
+          <div className="grid grid-cols-5 gap-1">
+            {curatedIcons.map((entry) => {
+              const Icon = entry.icon;
+              const isSelected = selected === entry.id;
+              return (
+                <button
+                  key={entry.id}
+                  aria-label={entry.label}
+                  className={cn(
+                    "cursor-pointer flex h-9 w-9 items-center justify-center rounded transition-colors",
+                    "text-base-contrast-light hover:bg-base-accent hover:text-base-contrast",
+                    isSelected && "ring-2 ring-primary bg-base-accent text-primary",
+                  )}
+                  onClick={() => onSelect(entry.id)}
+                >
+                  <Icon size={18} />
+                </button>
+              );
+            })}
+          </div>
+          {showRemove && (
             <button
-              key={entry.id}
-              aria-label={entry.label}
-              className={cn(
-                "cursor-pointer flex h-9 w-9 items-center justify-center rounded transition-colors",
-                "text-base-contrast-light hover:bg-base-accent hover:text-base-contrast",
-                isSelected && "ring-2 ring-primary bg-base-accent text-primary",
-              )}
-              onClick={() => onSelect(entry.id)}
+              className="cursor-pointer mt-2 w-full rounded px-2 py-1.5 text-center text-xs text-base-contrast-light hover:bg-base-accent hover:text-base-contrast"
+              onClick={() => onSelect(null)}
             >
-              <Icon size={18} />
+              Remove icon
             </button>
-          );
-        })}
-      </div>
-      {showRemove && (
-        <button
-          className="cursor-pointer mt-2 w-full rounded px-2 py-1.5 text-center text-xs text-base-contrast-light hover:bg-base-accent hover:text-base-contrast"
-          onClick={() => onSelect(null)}
-        >
-          Remove icon
-        </button>
+          )}
+        </>
       )}
     </div>
   );

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