@drawnagency/primitives 0.1.56 → 0.1.57

package/src/components/brandguide/Colors.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { Eye, EyeOff } from "lucide-react";
 import { cn } from "../../lib/cn";
-import { gridColsClass } from "../../lib/grid";
+import { containerGridClass } from "../../lib/container-grid";
 import { EditableGrid } from "../primitives/EditableGrid";
 import { EditablePlainText } from "../primitives/EditablePlainText";
 import type { ReactNode } from "react";
@@ -119,40 +119,42 @@ function ColorsView({
         </div>
       )}
 
-      <div className={cn("grid gap-4", gridColsClass[columns] || "grid-cols-3")}>
-        {colors.map((color, i) => {
-          const hex = color.spaces[0]?.hex;
-          const contrast = getContrastClass(hex);
-          return (
-            <div key={i} className="overflow-hidden rounded-md border border-base-200">
-              <div className={cn("relative flex min-h-[80px] items-end p-3", contrast)} style={{ backgroundColor: hex || "#ccc" }}>
-                {color.name && <span className="text-sm font-bold">{color.name}</span>}
-                {copiedIndex === i && (
-                  <span className={cn(
-                    "absolute top-2 right-2 rounded-full px-2.5 py-0.5 text-xs font-medium",
-                    getContrastClass(hex) === "text-black" ? "bg-black/15 text-black" : "bg-white/25 text-white",
-                  )}>
-                    Copied!
-                  </span>
-                )}
-              </div>
-              {expanded && (
-                <div className="space-y-1 bg-base-accent p-3 text-sm">
-                  {color.spaces.map((space, j) =>
-                    Object.entries(space).map(([key, value]) =>
-                      value ? (
-                        <button key={`${j}-${key}`} onClick={() => handleCopy(value, i)} className="cursor-pointer flex w-full justify-between hover:text-primary">
-                          <span className="font-medium uppercase">{key}</span>
-                          <span>{value}</span>
-                        </button>
-                      ) : null
-                    )
+      <div className="@container">
+        <div className={cn("grid gap-4", containerGridClass[columns] || containerGridClass[3])}>
+          {colors.map((color, i) => {
+            const hex = color.spaces[0]?.hex;
+            const contrast = getContrastClass(hex);
+            return (
+              <div key={i} className="overflow-hidden rounded-md border border-base-200">
+                <div className={cn("relative flex min-h-[80px] items-end p-3", contrast)} style={{ backgroundColor: hex || "#ccc" }}>
+                  {color.name && <span className="text-sm font-bold">{color.name}</span>}
+                  {copiedIndex === i && (
+                    <span className={cn(
+                      "absolute top-2 right-2 rounded-full px-2.5 py-0.5 text-xs font-medium",
+                      getContrastClass(hex) === "text-black" ? "bg-black/15 text-black" : "bg-white/25 text-white",
+                    )}>
+                      Copied!
+                    </span>
                   )}
                 </div>
-              )}
-            </div>
-          );
-        })}
+                {expanded && (
+                  <div className="space-y-1 bg-base-accent p-3 text-sm">
+                    {color.spaces.map((space, j) =>
+                      Object.entries(space).map(([key, value]) =>
+                        value ? (
+                          <button key={`${j}-${key}`} onClick={() => handleCopy(value, i)} className="cursor-pointer flex w-full justify-between hover:text-primary">
+                            <span className="font-medium uppercase">{key}</span>
+                            <span>{value}</span>
+                          </button>
+                        ) : null
+                      )
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
       </div>
     </div>
   );

package/src/components/editor/ChildBlockWrapper.tsx

@@ -0,0 +1,108 @@
+import { forwardRef, type ReactNode, type Ref } from "react";
+import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { CopyPlus } from "lucide-react";
+import { DragHandle } from "./DragHandle";
+import { DeleteButton } from "./DeleteButton";
+import { SettingsButton } from "./SettingsButton";
+import { ColSpanControl } from "./ColSpanControl";
+import { cn } from "../../lib/cn";
+
+export interface ChildBlockWrapperProps {
+  label: string;
+  columns: number;
+  colSpan: number;
+  closestEdge: Edge | null;
+  isDragging: boolean;
+  hasSettings: boolean;
+  /** Forwarded to the drag handle button (pragmatic-dnd dragHandle target). */
+  dragHandleRef?: Ref<HTMLButtonElement>;
+  onDelete: () => void;
+  onDuplicate: () => void;
+  onColSpanChange: (span: number) => void;
+  onOpenSettings?: () => void;
+  children: ReactNode;
+}
+
+export const ChildBlockWrapper = forwardRef<HTMLDivElement, ChildBlockWrapperProps>(
+  function ChildBlockWrapper(
+    {
+      label,
+      columns,
+      colSpan,
+      closestEdge,
+      isDragging,
+      hasSettings,
+      dragHandleRef,
+      onDelete,
+      onDuplicate,
+      onColSpanChange,
+      onOpenSettings,
+      children,
+    },
+    ref,
+  ) {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "group/childblock relative h-full rounded-sm",
+          isDragging && "opacity-50",
+          "hover:outline hover:outline-2 hover:outline-primary/30",
+        )}
+      >
+        {/* Controls — vertical rail in the cell's LEFT gutter. Revealed on hover OR
+            focus-within, so an open col-span popover (which traps focus) keeps the rail
+            visible even when the pointer moves off the block to reach an option. */}
+        <div className="absolute top-0 left-0 -translate-x-full z-20 flex flex-col items-center gap-1 opacity-0 transition-opacity group-hover/childblock:opacity-100 group-focus-within/childblock:opacity-100 pointer-events-none">
+          <span className="sr-only">{label}</span>
+          <div className="pointer-events-auto">
+            <DragHandle ref={dragHandleRef} />
+          </div>
+          <div className="pointer-events-auto">
+            <ColSpanControl colSpan={colSpan} columns={columns} onChange={onColSpanChange} />
+          </div>
+          {hasSettings && onOpenSettings && (
+            <div className="pointer-events-auto">
+              <SettingsButton onClick={onOpenSettings} />
+            </div>
+          )}
+          <div className="pointer-events-auto">
+            <button
+              type="button"
+              aria-label="Duplicate block"
+              onClick={onDuplicate}
+              className="cursor-pointer rounded p-1 text-base-contrast-light hover:text-primary"
+            >
+              <CopyPlus size={16} />
+            </button>
+          </div>
+          <div className="pointer-events-auto">
+            <DeleteButton onDelete={onDelete} />
+          </div>
+        </div>
+
+        {/* Drop-edge indicators */}
+        {closestEdge === "left" && (
+          <div
+            data-drop-edge="left"
+            className="absolute bottom-0 left-0 top-0 z-10 w-0.5 -translate-x-1 bg-primary"
+          />
+        )}
+        {closestEdge === "right" && (
+          <div
+            data-drop-edge="right"
+            className="absolute bottom-0 right-0 top-0 z-10 w-0.5 translate-x-1 bg-primary"
+          />
+        )}
+        {closestEdge === "top" && (
+          <div data-drop-edge="top" className="absolute left-0 right-0 top-0 z-10 h-0.5 -translate-y-1 bg-primary" />
+        )}
+        {closestEdge === "bottom" && (
+          <div data-drop-edge="bottom" className="absolute left-0 right-0 bottom-0 z-10 h-0.5 translate-y-1 bg-primary" />
+        )}
+
+        {children}
+      </div>
+    );
+  },
+);

package/src/components/editor/ColSpanControl.tsx

@@ -0,0 +1,56 @@
+import { useRef, useState } from "react";
+import { Columns3 } from "lucide-react";
+import { Popover } from "../shared/Popover";
+import { PopoverItem } from "../shared/PopoverItem";
+import { cn } from "../../lib/cn";
+
+interface ColSpanControlProps {
+  colSpan: number;
+  columns: number;
+  onChange: (span: number) => void;
+}
+
+/** Contextual col-span picker — only meaningful inside a multi-column container. */
+export function ColSpanControl({ colSpan, columns, onChange }: ColSpanControlProps) {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+
+  if (columns <= 1) return null;
+
+  const current = Math.min(Math.max(colSpan, 1), columns);
+
+  return (
+    <div className="relative">
+      <button
+        ref={buttonRef}
+        type="button"
+        aria-label="Column span"
+        aria-haspopup="true"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+        className="pointer-events-auto inline-flex cursor-pointer items-center gap-1 rounded p-1 text-xs text-base-contrast-light hover:text-primary"
+      >
+        <Columns3 size={14} />
+      </button>
+
+      <Popover isOpen={open} onClose={() => setOpen(false)} anchorRef={buttonRef} className="min-w-28">
+        <ul role="list" className="py-1">
+          {Array.from({ length: columns }, (_, i) => i + 1).map((span) => (
+            <li key={span}>
+              <PopoverItem
+                aria-current={span === current}
+                onClick={() => {
+                  onChange(span);
+                  setOpen(false);
+                }}
+                className={cn(span === current && "font-semibold text-primary")}
+              >
+                Span {span}
+              </PopoverItem>
+            </li>
+          ))}
+        </ul>
+      </Popover>
+    </div>
+  );
+}

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