@drawnagency/primitives 0.1.56 → 0.1.58

package/src/components/editor/SectionWrapper.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from "react";
-import { ArrowRightLeft } from "lucide-react";
+import { ArrowRightLeft, Plus } from "lucide-react";
 import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { DragHandle } from "./DragHandle";
 import { InsertButton } from "./InsertButton";
@@ -11,6 +11,7 @@ import { SettingsForm } from "./SettingsForm";
 import { useEditorContext } from "../shell/EditorContext";
 import { useEditorModal } from "../shell/EditorModalContext";
 import type { WrapperProps } from "../../lib/registry";
+import { buildBlockDragData, buildBlockDropData, isBlockDragData, canDropBlock } from "../../lib/block-dnd";
 import { cn } from "../../lib/cn";
 
 export function SectionWrapper({
@@ -20,6 +21,8 @@ export function SectionWrapper({
   dirty,
   index,
   isLast,
+  containerId,
+  isContainerBlock,
   definition,
   options,
   audiences,
@@ -31,6 +34,7 @@ export function SectionWrapper({
   onRequestInsert,
   onDelete,
   onMoveSection,
+  onAddChild,
   mainStatus,
   contentDiffersFromMain,
   isLocalOnly,
@@ -77,7 +81,7 @@ export function SectionWrapper({
   useEffect(() => {
     const block = blockRef.current;
     const handle = handleRef.current;
-    if (!block || !handle || !onReorder) return;
+    if (!block || !handle || !isEditMode) return;
 
     let cleanup: (() => void) | undefined;
     let cancelled = false;
@@ -96,7 +100,13 @@ export function SectionWrapper({
       const cleanupDraggable = draggable({
         element: dropElement,
         dragHandle: handle,
-        getInitialData: () => ({ dragType: "section", sectionId, index }),
+        getInitialData: () =>
+          buildBlockDragData({
+            blockId: sectionId,
+            containerId,
+            index,
+            isContainer: isContainerBlock,
+          }),
         onGenerateDragPreview: () => {
           dropElement.style.opacity = "0.4";
           requestAnimationFrame(() => {
@@ -115,31 +125,32 @@ export function SectionWrapper({
 
       const cleanupDropTarget = dropTargetForElements({
         element: dropElement,
-        canDrop: ({ source }) => source.data.dragType === "section",
+        canDrop: ({ source }) =>
+          isBlockDragData(source.data) && canDropBlock(source.data, containerId),
         getData: ({ input, element }) =>
           attachClosestEdge(
-            { sectionId, index },
+            buildBlockDropData({ dropContainerId: containerId, index }),
             { input, element, allowedEdges: ["top", "bottom"] },
           ),
-        onDragEnter: ({ self }) => {
-          setClosestEdge(extractClosestEdge(self.data));
-        },
-        onDrag: ({ self }) => {
+        onDrag: ({ self, source, location }) => {
+          const innermost = location.current.dropTargets[0]?.element === self.element;
+          if (
+            !innermost ||
+            !isBlockDragData(source.data) ||
+            source.data.blockId === sectionId
+          ) {
+            setClosestEdge(null);
+            return;
+          }
           setClosestEdge(extractClosestEdge(self.data));
         },
         onDragLeave: () => {
           setClosestEdge(null);
         },
-        onDrop: ({ source, self }) => {
+        onDrop: () => {
+          // Central monitor (EditorContent) dispatches the move; we only
+          // clear local hover state here.
           setClosestEdge(null);
-          const fromIndex = source.data.index as number;
-          const edge = extractClosestEdge(self.data);
-          let toIndex = index;
-          if (edge === "bottom") toIndex = index + 1;
-          if (fromIndex < toIndex) toIndex--;
-          if (fromIndex !== toIndex) {
-            onReorder(fromIndex, toIndex);
-          }
         },
       });
 
@@ -153,7 +164,7 @@ export function SectionWrapper({
       cancelled = true;
       cleanup?.();
     };
-  }, [sectionId, index, onReorder]);
+  }, [sectionId, index, containerId, isContainerBlock, isEditMode]);
 
   function handleSettingsClick() {
     if (!onSectionChange) return;
@@ -164,7 +175,8 @@ export function SectionWrapper({
         `${definition.label} Settings`,
         <CustomForm
           {...(options ?? {})}
-          onChange={(values: Record<string, unknown>) => onSectionChange({ content: {}, options: values })}
+          onChange={(result: { content: Record<string, unknown>; options: Record<string, unknown> }) =>
+            onSectionChange(result as unknown as Record<string, unknown>)}
         />,
       );
     } else if (definition.settings) {
@@ -174,6 +186,7 @@ export function SectionWrapper({
           schema={definition.settings}
           values={options ?? {}}
           onChange={(result) => onSectionChange(result as unknown as Record<string, unknown>)}
+          tabs={definition.settingsTabs}
         />,
       );
     }
@@ -284,6 +297,17 @@ export function SectionWrapper({
           />
         </div>
 
+        {onAddChild && (
+          <button
+            type="button"
+            onClick={onAddChild}
+            aria-label="Add block"
+            className="pointer-events-auto cursor-pointer rounded p-1 text-base-contrast-light hover:text-primary"
+          >
+            <Plus size={16} />
+          </button>
+        )}
+
         {hasSettings && (
           <SettingsButton onClick={handleSettingsClick} />
         )}

package/src/components/editor/SettingsForm.tsx

@@ -5,6 +5,7 @@ import { Select } from "../shared/Select";
 import { Checkbox } from "../shared/Checkbox";
 import { FormLabel } from "../shared/FormLabel";
 import { LinkField } from "../shared/LinkField";
+import { Tabs } from "../shared/Tabs";
 import type { LinkValue } from "../../schemas/link";
 import { cn } from "../../lib/cn";
 
@@ -17,6 +18,7 @@ interface SettingsFormProps {
   schema: SettingsSchema;
   values: Record<string, unknown>;
   onChange: (result: SettingsFormResult) => void;
+  tabs?: { label: string; fields: string[] }[];
 }
 
 function resolveValues(
@@ -37,6 +39,13 @@ function coerceValue(field: SettingsFieldDef, value: unknown): unknown {
   return value;
 }
 
+function normalizeEmpty(field: SettingsFieldDef, value: unknown): unknown {
+  if (field.type === "select" && "emptyIsUndefined" in field && field.emptyIsUndefined && value === "") {
+    return undefined;
+  }
+  return value;
+}
+
 function splitByTarget(
   schema: SettingsSchema,
   allValues: Record<string, unknown>,
@@ -44,7 +53,7 @@ function splitByTarget(
   const content: Record<string, unknown> = {};
   const options: Record<string, unknown> = {};
   for (const [key, field] of Object.entries(schema)) {
-    const value = coerceValue(field, allValues[key]);
+    const value = normalizeEmpty(field, coerceValue(field, allValues[key]));
     const target = field.target ?? "options";
     if (target === "content") {
       content[key] = value;
@@ -84,7 +93,82 @@ function RangeField({
   );
 }
 
-export function SettingsForm({ schema, values, onChange }: SettingsFormProps) {
+function renderField(
+  key: string,
+  field: SettingsFieldDef,
+  value: unknown,
+  handleFieldChange: (key: string, newValue: unknown) => void,
+) {
+  switch (field.type) {
+    case "text":
+      return (
+        <Input
+          key={key}
+          label={field.label}
+          value={String(value ?? "")}
+          placeholder={field.placeholder}
+          onChange={(v) => handleFieldChange(key, v)}
+        />
+      );
+
+    case "number":
+      return (
+        <Input
+          key={key}
+          label={field.label}
+          type="number"
+          value={String(value ?? "")}
+          onChange={(v) => handleFieldChange(key, v === "" ? "" : Number(v))}
+        />
+      );
+
+    case "checkbox":
+      return (
+        <Checkbox
+          key={key}
+          label={field.label}
+          checked={Boolean(value)}
+          onChange={(checked) => handleFieldChange(key, checked)}
+        />
+      );
+
+    case "select":
+      return (
+        <Select
+          key={key}
+          label={field.label}
+          value={String(value ?? "")}
+          options={field.options}
+          onChange={(v) => handleFieldChange(key, v)}
+        />
+      );
+
+    case "range":
+      return (
+        <RangeField
+          key={key}
+          field={field}
+          value={Number(value ?? field.min)}
+          onChange={(v) => handleFieldChange(key, v)}
+        />
+      );
+
+    case "link":
+      return (
+        <LinkField
+          key={key}
+          label={field.label}
+          value={(value as LinkValue) ?? field.default}
+          onChange={(v) => handleFieldChange(key, v)}
+        />
+      );
+
+    default:
+      return null;
+  }
+}
+
+export function SettingsForm({ schema, values, onChange, tabs }: SettingsFormProps) {
   const [local, setLocal] = useState(() => resolveValues(schema, values));
 
   function handleFieldChange(key: string, newValue: unknown) {
@@ -93,79 +177,22 @@ export function SettingsForm({ schema, values, onChange }: SettingsFormProps) {
     onChange(splitByTarget(schema, next));
   }
 
+  if (tabs) {
+    const fields = (keys: string[]) =>
+      keys.filter((key) => key in schema).map((key) => renderField(key, schema[key], local[key], handleFieldChange));
+
+    const listed = new Set(tabs.flatMap((t) => t.fields));
+    const otherKeys = Object.keys(schema).filter((key) => !listed.has(key));
+    const tabItems = [
+      ...tabs.map((t) => ({ id: t.label, label: t.label, content: <div className="flex flex-col gap-4">{fields(t.fields)}</div> })),
+      ...(otherKeys.length > 0 ? [{ id: "__other__", label: "Other", content: <div className="flex flex-col gap-4">{fields(otherKeys)}</div> }] : []),
+    ];
+    return <Tabs tabs={tabItems} fullBleedTabBar />;
+  }
+
   return (
     <div className="flex flex-col gap-4">
-      {Object.entries(schema).map(([key, field]) => {
-        const value = local[key];
-
-        switch (field.type) {
-          case "text":
-            return (
-              <Input
-                key={key}
-                label={field.label}
-                value={String(value ?? "")}
-                placeholder={field.placeholder}
-                onChange={(v) => handleFieldChange(key, v)}
-              />
-            );
-
-          case "number":
-            return (
-              <Input
-                key={key}
-                label={field.label}
-                type="number"
-                value={String(value ?? "")}
-                onChange={(v) => handleFieldChange(key, v === "" ? "" : Number(v))}
-              />
-            );
-
-          case "checkbox":
-            return (
-              <Checkbox
-                key={key}
-                label={field.label}
-                checked={Boolean(value)}
-                onChange={(checked) => handleFieldChange(key, checked)}
-              />
-            );
-
-          case "select":
-            return (
-              <Select
-                key={key}
-                label={field.label}
-                value={String(value ?? "")}
-                options={field.options}
-                onChange={(v) => handleFieldChange(key, v)}
-              />
-            );
-
-          case "range":
-            return (
-              <RangeField
-                key={key}
-                field={field}
-                value={Number(value ?? field.min)}
-                onChange={(v) => handleFieldChange(key, v)}
-              />
-            );
-
-          case "link":
-            return (
-              <LinkField
-                key={key}
-                label={field.label}
-                value={(value as LinkValue) ?? field.default}
-                onChange={(v) => handleFieldChange(key, v)}
-              />
-            );
-
-          default:
-            return null;
-        }
-      })}
+      {Object.entries(schema).map(([key, field]) => renderField(key, field, local[key], handleFieldChange))}
     </div>
   );
 }

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