@drawnagency/primitives 0.1.106 → 0.1.107

package/dist/{chunk-QLBHERK6.js → chunk-IPKZ5FU6.js}

@@ -410,7 +410,7 @@ import { z as z3 } from "zod";
 import { List, Columns2 } from "lucide-react";
 
 // src/components/sections/IconList/IconList.tsx
-import { useRef as useRef3, useEffect as useEffect4, useState as useState4, useCallback } from "react";
+import { useRef as useRef3, useEffect as useEffect4, useState as useState4, useCallback, useId } from "react";
 import { Check as Check2, CopyPlus, Pencil, X as X2 } from "lucide-react";
 
 // src/components/primitives/IconPicker.tsx
@@ -670,12 +670,47 @@ function EditIconList({
   iconClassName,
   onItemsChange
 }) {
-  const { wrappedItems, onReorder, onAdd, onRemove } = useEditableCollection({
+  const listId = useId();
+  const { wrappedItems, onReorder, onAdd, onInsertItem, onRemove } = useEditableCollection({
     items,
     onChange: onItemsChange,
     createItem: () => ({ label: "", text: "" })
   });
   const [dragState, setDragState] = useState4({ sourceId: null, targetId: null });
+  const cfgRef = useRef3({ listId, onReorder, onRemove, onInsertItem });
+  cfgRef.current = { listId, onReorder, onRemove, onInsertItem };
+  useEffect4(() => {
+    let cleanup;
+    let cancelled = false;
+    import("./adapter-HH47ZPGM.js").then(({ monitorForElements }) => {
+      if (cancelled) return;
+      cleanup = monitorForElements({
+        onDrop: ({ source, location }) => {
+          if (source.data.dragType !== "icon-list-row") return;
+          setDragState({ sourceId: null, targetId: null });
+          const { listId: my, onReorder: onReorder2, onRemove: onRemove2, onInsertItem: onInsertItem2 } = cfgRef.current;
+          const target = location.current.dropTargets[0];
+          if (!target) return;
+          const srcListId = source.data.listId;
+          const dstListId = target.data.listId;
+          const fromIndex = source.data.index;
+          const targetIndex = target.data.index;
+          if (srcListId === my && dstListId === my) {
+            const toIndex = target.data.trailing ? targetIndex - 1 : targetIndex;
+            if (fromIndex !== toIndex) onReorder2(fromIndex, toIndex);
+          } else if (srcListId === my) {
+            onRemove2(source.data.id);
+          } else if (dstListId === my) {
+            onInsertItem2(targetIndex, source.data.item);
+          }
+        }
+      });
+    });
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, []);
   const updateItem = useCallback(
     (index, patch) => {
       const updated = wrappedItems.map(
@@ -703,6 +738,7 @@ function EditIconList({
       EditableRow,
       {
         id: wrapped.id,
+        listId,
         index,
         item: wrapped.data,
         defaultIcon,
@@ -715,7 +751,6 @@ function EditIconList({
         iconClassName,
         dragState,
         setDragState,
-        onReorder,
         onRemove,
         onUpdateItem: (patch) => updateItem(index, patch),
         onDuplicate: () => duplicateItem(index)
@@ -725,10 +760,10 @@ function EditIconList({
     /* @__PURE__ */ jsx8(
       TrailingDropZone,
       {
+        listId,
         index: wrappedItems.length,
         dragState,
-        setDragState,
-        onReorder
+        setDragState
       }
     ),
     /* @__PURE__ */ jsx8(
@@ -746,6 +781,7 @@ function EditIconList({
 }
 function EditableRow({
   id,
+  listId,
   index,
   item,
   defaultIcon,
@@ -758,13 +794,14 @@ function EditableRow({
   iconClassName,
   dragState,
   setDragState,
-  onReorder,
   onRemove,
   onUpdateItem,
   onDuplicate
 }) {
   const rowRef = useRef3(null);
   const handleRef = useRef3(null);
+  const itemRef = useRef3(item);
+  itemRef.current = item;
   const [iconHover, setIconHover] = useState4(false);
   const [pickerOpen, setPickerOpen] = useState4(false);
   const [dodontOpen, setDodontOpen] = useState4(false);
@@ -782,22 +819,21 @@ function EditableRow({
       if (cancelled) return;
       const cleanupDraggable = draggable({
         element: handle,
-        getInitialData: () => ({ dragType: "icon-list-row", id, index }),
+        // `item` rides along so a destination list can insert it verbatim —
+        // persisted icon-list items have no ids, only positions. Read from a ref
+        // so typing in the row doesn't re-register the drag mid-gesture.
+        getInitialData: () => ({ dragType: "icon-list-row", listId, id, index, item: itemRef.current }),
         onDragStart: () => setDragState({ sourceId: id, targetId: null }),
         onDrop: () => setDragState({ sourceId: null, targetId: null })
       });
       const cleanupDropTarget = dropTargetForElements({
         element: row,
         canDrop: ({ source }) => source.data.dragType === "icon-list-row",
-        getData: () => ({ id, index }),
+        getData: () => ({ listId, id, index }),
         onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: id })),
         onDragLeave: () => setDragState(
           (prev) => prev.targetId === id ? { ...prev, targetId: null } : prev
-        ),
-        onDrop: ({ source }) => {
-          const fromIndex = source.data.index;
-          if (fromIndex !== index) onReorder(fromIndex, index);
-        }
+        )
       });
       cleanup = () => {
         cleanupDraggable();
@@ -808,7 +844,7 @@ function EditableRow({
       cancelled = true;
       cleanup?.();
     };
-  }, [id, index, onReorder, setDragState]);
+  }, [id, index, listId, setDragState]);
   const isDropTarget = dragState.targetId === id && dragState.sourceId !== id;
   const onEditableActivity = (e) => {
     const t = e.target;
@@ -964,10 +1000,10 @@ function EditableRow({
   );
 }
 function TrailingDropZone({
+  listId,
   index,
   dragState,
-  setDragState,
-  onReorder
+  setDragState
 }) {
   const ref = useRef3(null);
   const trailingId = "__trailing__";
@@ -981,23 +1017,19 @@ function TrailingDropZone({
       cleanup = dropTargetForElements({
         element: el,
         canDrop: ({ source }) => source.data.dragType === "icon-list-row",
-        getData: () => ({ id: trailingId, index }),
+        getData: () => ({ listId, id: trailingId, index, trailing: true }),
         onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: trailingId })),
         onDragLeave: () => setDragState(
           (prev) => prev.targetId === trailingId ? { ...prev, targetId: null } : prev
-        ),
-        onDrop: ({ source }) => {
-          const fromIndex = source.data.index;
-          if (fromIndex !== index - 1) onReorder(fromIndex, index - 1);
-        }
+        )
       });
     });
     return () => {
       cancelled = true;
       cleanup?.();
     };
-  }, [index, onReorder, setDragState]);
-  const isDropTarget = dragState.targetId === trailingId && dragState.sourceId !== null;
+  }, [index, listId, setDragState]);
+  const isDropTarget = dragState.targetId === trailingId;
   return /* @__PURE__ */ jsx8(
     "div",
     {
@@ -1358,6 +1390,24 @@ function DocumentDropZone({ onDocumentSelected, className }) {
   );
 }
 
+// src/lib/insert-menu.ts
+var PRESET_PREFIX = "__preset:";
+var INSERT_MENU_ORDER = [
+  "container",
+  "link_heading",
+  "sub_heading",
+  "sub_sub_heading",
+  "prose",
+  "media",
+  "video",
+  "button",
+  "colors",
+  "document",
+  "icon_list",
+  `${PRESET_PREFIX}do_dont_list`,
+  "dodont_media"
+];
+
 // src/lib/container-ops.ts
 function getContainerChildren(block) {
   const content = block.content;

package/dist/{chunk-Z7VXESB6.js → chunk-JIQBLG6Y.js}

@@ -9,7 +9,7 @@ import {
   stripHtmlToPlainText,
   trimTrailingSpacers,
   truncate
-} from "./chunk-QLBHERK6.js";
+} from "./chunk-IPKZ5FU6.js";
 import {
   DeleteButton,
   DragHandle,
@@ -483,7 +483,7 @@ import { z as z5 } from "zod";
 import { LayoutTemplate } from "lucide-react";
 
 // src/components/sections/Container/Container.tsx
-import "react";
+import { useRef as useRef3 } from "react";
 
 // src/components/editor/ChildBlockWrapper.tsx
 import { forwardRef } from "react";
@@ -859,13 +859,16 @@ function Container({ content, isEditMode, onChange, openModal }) {
     content: content.content
   };
   const emit = (nextSection) => onChange?.({ ...content, content: nextSection.content });
+  const pendingChildren = useRef3(children);
+  pendingChildren.current = children;
   const updateChild = (index, childContent) => {
-    const next = children.map((c, i) => {
+    const next = pendingChildren.current.map((c, i) => {
       if (i !== index) return c;
       const merged = { ...childContent, id: c.id ?? newId() };
       if (c.layout !== void 0) merged.layout = c.layout;
       return merged;
     });
+    pendingChildren.current = next;
     onChange?.({ ...content, content: { ...content.content, children: next } });
   };
   const gridClass = cn(

package/dist/components/sections/Container/Container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Container/Container.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAcnE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AA4GzD,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,gBAAgB,CAAA;KAAE,CAAC;IACpD,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAwFD,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,kDA8RrF"}
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Container/Container.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAcnE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AA4GzD,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,gBAAgB,CAAA;KAAE,CAAC;IACpD,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAwFD,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,kDAwSrF"}

package/dist/components/sections/brand-guide.js

@@ -2,7 +2,7 @@ import {
   ColorItemSchema,
   ColorSpaceSchema,
   brandGuideSectionDefs
-} from "../../chunk-QLBHERK6.js";
+} from "../../chunk-IPKZ5FU6.js";
 import "../../chunk-5THS4K5D.js";
 import "../../chunk-5IZ2KTMU.js";
 import "../../chunk-D6TLUVOP.js";

package/dist/components/sections/register-schemas.js

@@ -1,7 +1,7 @@
 import {
   allSectionDefs
-} from "../../chunk-Z7VXESB6.js";
-import "../../chunk-QLBHERK6.js";
+} from "../../chunk-JIQBLG6Y.js";
+import "../../chunk-IPKZ5FU6.js";
 import "../../chunk-ZHHJVKU7.js";
 import "../../chunk-5THS4K5D.js";
 import "../../chunk-LUAI5DWR.js";

package/dist/components/sections/register.js

@@ -1,7 +1,7 @@
 import {
   allSectionDefs
-} from "../../chunk-Z7VXESB6.js";
-import "../../chunk-QLBHERK6.js";
+} from "../../chunk-JIQBLG6Y.js";
+import "../../chunk-IPKZ5FU6.js";
 import "../../chunk-ZHHJVKU7.js";
 import "../../chunk-5THS4K5D.js";
 import "../../chunk-LUAI5DWR.js";

package/dist/components/shell/MediaLibraryModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaLibraryModal.d.ts","sourceRoot":"","sources":["../../../src/components/shell/MediaLibraryModal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MediaLibraryModal.d.ts","sourceRoot":"","sources":["../../../src/components/shell/MediaLibraryModal.tsx"],"names":[],"mappings":"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"}

package/dist/components/shell/SectionTypePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionTypePicker.d.ts","sourceRoot":"","sources":["../../../src/components/shell/SectionTypePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1E,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,sBAAsB,2CAmCnG"}
+{"version":3,"file":"SectionTypePicker.d.ts","sourceRoot":"","sources":["../../../src/components/shell/SectionTypePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1E,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC9C;AAKD,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,sBAAsB,2CA0DnG"}

package/dist/lib/container-ops.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container-ops.d.ts","sourceRoot":"","sources":["../../src/lib/container-ops.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAWnD,qEAAqE;AACrE,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,EAAE,CAG9D;AAWD,wBAAgB,YAAY,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,OAAO,CAOlF;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,SAAS,CAAA;CAAE,EAAE,CAIzF;AAED,wBAAgB,aAAa,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAMxF;AAED,wBAAgB,aAAa,CAC3B,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,MAAM,GACZ;IAAE,SAAS,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;CAAE,CAMjD;AAED,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,MAAM,GAClB,OAAO,CAOT;AAED,0FAA0F;AAC1F,wBAAgB,eAAe,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAaxF;AAOD,8CAA8C;AAC9C,wBAAgB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAEhD;AAED,uCAAuC;AACvC,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,MAAM,GAAG,OAAO,CAEvD;AAED,iGAAiG;AACjG,wBAAgB,eAAe,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAE5E;AAED,8FAA8F;AAC9F,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,CAM/D;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,OAAO,EACd,CAAC,EAAE,MAAM,EACT,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,MAAM,GAClB,OAAO,CAiBT"}
+{"version":3,"file":"container-ops.d.ts","sourceRoot":"","sources":["../../src/lib/container-ops.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAYnD,qEAAqE;AACrE,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,EAAE,CAG9D;AAWD,wBAAgB,YAAY,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,OAAO,CAOlF;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,SAAS,CAAA;CAAE,EAAE,CAMzF;AAED,wBAAgB,aAAa,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAMxF;AAED,wBAAgB,aAAa,CAC3B,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,MAAM,GACZ;IAAE,SAAS,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;CAAE,CAMjD;AAED,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,MAAM,GAClB,OAAO,CAOT;AAED,0FAA0F;AAC1F,wBAAgB,eAAe,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAaxF;AAOD,8CAA8C;AAC9C,wBAAgB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAEhD;AAED,uCAAuC;AACvC,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,MAAM,GAAG,OAAO,CAEvD;AAED,iGAAiG;AACjG,wBAAgB,eAAe,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAE5E;AAED,8FAA8F;AAC9F,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,CAM/D;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,OAAO,EACd,CAAC,EAAE,MAAM,EACT,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,MAAM,GAClB,OAAO,CAiBT"}

package/dist/lib/insert-menu.d.ts

@@ -9,9 +9,13 @@ export interface InsertMenuOption {
     label: string;
     icon?: ReactNode;
 }
-/** Every non-spacer section type, followed by presets contributed by registered
- *  sections. Presets appear only when their owning section is registered, so a
- *  core-only build (no brand-guide sections) shows no brand-guide presets. */
+/** Sort insert-menu entries into `INSERT_MENU_ORDER`, with unlisted entries
+ *  (custom sections) alphabetical by label at the end. Pure; returns a copy. */
+export declare function sortInsertMenuOptions<T extends InsertMenuOption>(options: T[]): T[];
+/** Every non-spacer section type, plus presets contributed by registered
+ *  sections, in `INSERT_MENU_ORDER`. Presets appear only when their owning
+ *  section is registered, so a core-only build (no brand-guide sections) shows
+ *  no brand-guide presets. */
 export declare function buildInsertMenuOptions(sections: SectionDefinition[]): InsertMenuOption[];
 /** Resolve an Add-menu selection to ready-to-insert content. `newId` mints ids for
  *  any nested children a preset creates. Returns null for an unknown type/preset. */

package/dist/lib/insert-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"insert-menu.d.ts","sourceRoot":"","sources":["../../src/lib/insert-menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,wEAAwE;AACxE,eAAO,MAAM,aAAa,cAAc,CAAC;AAEzC,8EAA8E;AAC9E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;8EAE8E;AAC9E,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,EAAE,CAQxF;AAED;qFACqF;AACrF,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,iBAAiB,EAAE,EAC7B,KAAK,EAAE,MAAM,MAAM,GAClB,cAAc,GAAG,IAAI,CAQvB"}
+{"version":3,"file":"insert-menu.d.ts","sourceRoot":"","sources":["../../src/lib/insert-menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,wEAAwE;AACxE,eAAO,MAAM,aAAa,cAAc,CAAC;AAEzC,8EAA8E;AAC9E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAsBD;gFACgF;AAChF,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,gBAAgB,EAAE,OAAO,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CASnF;AAED;;;8BAG8B;AAC9B,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,EAAE,CAQxF;AAED;qFACqF;AACrF,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,iBAAiB,EAAE,EAC7B,KAAK,EAAE,MAAM,MAAM,GAClB,cAAc,GAAG,IAAI,CAQvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.106",
+  "version": "0.1.107",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

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

@@ -1,4 +1,4 @@
-import { type ComponentType, type ReactNode } from "react";
+import { useRef, type ComponentType, type ReactNode } from "react";
 import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { getSection, type OpenModal } from "../../../lib/registry";
 import { cn } from "../../../lib/cn";
@@ -243,13 +243,23 @@ export function Container({ content, isEditMode, onChange, openModal }: Containe
   // the existing child — an id-less child fails save validation for the whole
   // container. Minting when the existing child has no id self-heals drafts saved
   // by the pre-fix path.
+  // Folded onto a ref rather than straight onto `children` so that TWO children
+  // updating in the same tick compose instead of the second clobbering the
+  // first. That happens for real: dragging an icon-list row between two lists in
+  // one container removes from one child and inserts into the other, and both
+  // emits carry the whole container's content. Re-seeded from props each render,
+  // so a committed update is always the base for the next tick.
+  const pendingChildren = useRef(children);
+  pendingChildren.current = children;
+
   const updateChild = (index: number, childContent: unknown) => {
-    const next = children.map((c, i) => {
+    const next = pendingChildren.current.map((c, i) => {
       if (i !== index) return c;
       const merged = { ...(childContent as Section), id: c.id ?? newId() };
       if (c.layout !== undefined) merged.layout = c.layout;
       return merged;
     });
+    pendingChildren.current = next;
     onChange?.({ ...content, content: { ...content.content, children: next } });
   };
 

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

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState, useCallback } from "react";
+import { useRef, useEffect, useState, useCallback, useId } from "react";
 import type { SectionContent } from "../../../schemas/sections";
 import { cn } from "../../../lib/cn";
 import { getIcon } from "../../../lib/icons";
@@ -200,7 +200,8 @@ function EditIconList({
   iconClassName: string;
   onItemsChange: (items: IconListItem[]) => void;
 }) {
-  const { wrappedItems, onReorder, onAdd, onRemove } = useEditableCollection({
+  const listId = useId();
+  const { wrappedItems, onReorder, onAdd, onInsertItem, onRemove } = useEditableCollection({
     items,
     onChange: onItemsChange,
     createItem: () => ({ label: "", text: "" }),
@@ -211,6 +212,57 @@ function EditIconList({
     targetId: string | null;
   }>({ sourceId: null, targetId: null });
 
+  // The drop transaction lives here, not in the row/trailing drop targets,
+  // because this monitor is GLOBAL: every icon list on the page sees the same
+  // drop and acts on its own collection — the source removes, the destination
+  // inserts, and a same-list drop reorders. Rows only advertise where they are.
+  // Handlers are read through a ref so the monitor subscribes exactly once.
+  const cfgRef = useRef({ listId, onReorder, onRemove, onInsertItem });
+  cfgRef.current = { listId, onReorder, onRemove, onInsertItem };
+
+  useEffect(() => {
+    let cleanup: (() => void) | undefined;
+    let cancelled = false;
+
+    import("@atlaskit/pragmatic-drag-and-drop/element/adapter").then(({ monitorForElements }) => {
+      if (cancelled) return;
+      cleanup = monitorForElements({
+        onDrop: ({ source, location }) => {
+          if (source.data.dragType !== "icon-list-row") return;
+          // Every list clears its own indicator on any drop — this is what stops
+          // the destination's drop line sticking after a cross-list transfer.
+          setDragState({ sourceId: null, targetId: null });
+
+          const { listId: my, onReorder, onRemove, onInsertItem } = cfgRef.current;
+          const target = location.current.dropTargets[0];
+          if (!target) return;
+          const srcListId = source.data.listId as string;
+          const dstListId = target.data.listId as string;
+          const fromIndex = source.data.index as number;
+          const targetIndex = target.data.index as number;
+
+          if (srcListId === my && dstListId === my) {
+            // The trailing zone reports the post-list index; splicing the row out
+            // first shifts everything after it down one, hence the -1.
+            const toIndex = target.data.trailing ? targetIndex - 1 : targetIndex;
+            if (fromIndex !== toIndex) onReorder(fromIndex, toIndex);
+          } else if (srcListId === my) {
+            onRemove(source.data.id as string);
+          } else if (dstListId === my) {
+            // Nothing is spliced out of this list, so the target index is the
+            // insert position as-is (the trailing zone's index appends).
+            onInsertItem(targetIndex, source.data.item as IconListItem);
+          }
+        },
+      });
+    });
+
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, []);
+
   const updateItem = useCallback(
     (index: number, patch: Partial<IconListItem>) => {
       const updated = wrappedItems.map((w, i) =>
@@ -244,6 +296,7 @@ function EditIconList({
         <EditableRow
           key={wrapped.id}
           id={wrapped.id}
+          listId={listId}
           index={index}
           item={wrapped.data}
           defaultIcon={defaultIcon}
@@ -256,7 +309,6 @@ function EditIconList({
           iconClassName={iconClassName}
           dragState={dragState}
           setDragState={setDragState}
-          onReorder={onReorder}
           onRemove={onRemove}
           onUpdateItem={(patch) => updateItem(index, patch)}
           onDuplicate={() => duplicateItem(index)}
@@ -264,10 +316,10 @@ function EditIconList({
       ))}
 
       <TrailingDropZone
+        listId={listId}
         index={wrappedItems.length}
         dragState={dragState}
         setDragState={setDragState}
-        onReorder={onReorder}
       />
 
       {/* Add button — centered below list, visible on list hover */}
@@ -285,6 +337,7 @@ function EditIconList({
 
 function EditableRow({
   id,
+  listId,
   index,
   item,
   defaultIcon,
@@ -297,12 +350,12 @@ function EditableRow({
   iconClassName,
   dragState,
   setDragState,
-  onReorder,
   onRemove,
   onUpdateItem,
   onDuplicate,
 }: {
   id: string;
+  listId: string;
   index: number;
   item: IconListItem;
   defaultIcon: string | null | undefined;
@@ -315,13 +368,14 @@ function EditableRow({
   iconClassName: string;
   dragState: { sourceId: string | null; targetId: string | null };
   setDragState: React.Dispatch<React.SetStateAction<{ sourceId: string | null; targetId: string | null }>>;
-  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 itemRef = useRef(item);
+  itemRef.current = item;
   const [iconHover, setIconHover] = useState(false);
   const [pickerOpen, setPickerOpen] = useState(false);
   const [dodontOpen, setDodontOpen] = useState(false);
@@ -344,24 +398,25 @@ function EditableRow({
 
       const cleanupDraggable = draggable({
         element: handle,
-        getInitialData: () => ({ dragType: "icon-list-row", id, index }),
+        // `item` rides along so a destination list can insert it verbatim —
+        // persisted icon-list items have no ids, only positions. Read from a ref
+        // so typing in the row doesn't re-register the drag mid-gesture.
+        getInitialData: () => ({ dragType: "icon-list-row", listId, id, index, item: itemRef.current }),
         onDragStart: () => setDragState({ sourceId: id, targetId: null }),
         onDrop: () => setDragState({ sourceId: null, targetId: null }),
       });
 
+      // Advertise only — EditIconList's monitor performs the move, so that one
+      // handler can see both sides of a cross-list transfer.
       const cleanupDropTarget = dropTargetForElements({
         element: row,
         canDrop: ({ source }) => source.data.dragType === "icon-list-row",
-        getData: () => ({ id, index }),
+        getData: () => ({ listId, id, index }),
         onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: id })),
         onDragLeave: () =>
           setDragState((prev) =>
             prev.targetId === id ? { ...prev, targetId: null } : prev,
           ),
-        onDrop: ({ source }) => {
-          const fromIndex = source.data.index as number;
-          if (fromIndex !== index) onReorder(fromIndex, index);
-        },
       });
 
       cleanup = () => {
@@ -374,7 +429,7 @@ function EditableRow({
       cancelled = true;
       cleanup?.();
     };
-  }, [id, index, onReorder, setDragState]);
+  }, [id, index, listId, setDragState]);
 
   const isDropTarget = dragState.targetId === id && dragState.sourceId !== id;
 
@@ -525,15 +580,15 @@ function EditableRow({
 }
 
 function TrailingDropZone({
+  listId,
   index,
   dragState,
   setDragState,
-  onReorder,
 }: {
+  listId: string;
   index: number;
   dragState: { sourceId: string | null; targetId: string | null };
   setDragState: React.Dispatch<React.SetStateAction<{ sourceId: string | null; targetId: string | null }>>;
-  onReorder: (fromIndex: number, toIndex: number) => void;
 }) {
   const ref = useRef<HTMLDivElement>(null);
   const trailingId = "__trailing__";
@@ -551,16 +606,12 @@ function TrailingDropZone({
       cleanup = dropTargetForElements({
         element: el,
         canDrop: ({ source }) => source.data.dragType === "icon-list-row",
-        getData: () => ({ id: trailingId, index }),
+        getData: () => ({ listId, id: trailingId, index, trailing: true }),
         onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: trailingId })),
         onDragLeave: () =>
           setDragState((prev) =>
             prev.targetId === trailingId ? { ...prev, targetId: null } : prev,
           ),
-        onDrop: ({ source }) => {
-          const fromIndex = source.data.index as number;
-          if (fromIndex !== index - 1) onReorder(fromIndex, index - 1);
-        },
       });
     });
 
@@ -568,9 +619,11 @@ function TrailingDropZone({
       cancelled = true;
       cleanup?.();
     };
-  }, [index, onReorder, setDragState]);
+  }, [index, listId, setDragState]);
 
-  const isDropTarget = dragState.targetId === trailingId && dragState.sourceId !== null;
+  // targetId is only ever set by an icon-list drag entering this zone, so its
+  // presence is the whole condition — a cross-list drag leaves sourceId null here.
+  const isDropTarget = dragState.targetId === trailingId;
 
   return (
     <div

package/src/components/shell/EditorShell.tsx

@@ -2451,7 +2451,10 @@ function EditorContent({
   }, [onBlockMove]);
 
   return (
-    <div>
+    // `.section-wrapper:first-child` zeroes the 2.25rem that every other section
+    // reserves above itself for its hover chrome, so the first section's controls
+    // would sit under the fixed toolbar. Re-reserve it on the list instead.
+    <div className="pt-9">
       {displaySections.map(({ section, meta }, index) => {
         const definition = getSection(section.type);
         if (!definition) {

package/src/components/shell/MediaLibraryModal.tsx

@@ -94,7 +94,7 @@ function DocumentTile({ doc, manage, isSelected, refCount, showFolderChip, onCli
   isSelected: boolean;
   refCount: number;
   showFolderChip: boolean;
-  onClick: () => void;
+  onClick: (e: React.MouseEvent) => void;
 }) {
   return (
     <button
@@ -262,7 +262,7 @@ function UploadZone({ onUpload, onFolderUpload }: {
 
 function MediaCard({ item, manage, isSelected, dragIds, onClick, children }: {
   item: MediaItem; manage: boolean; isSelected: boolean;
-  dragIds: string[]; onClick: () => void; children: React.ReactNode;
+  dragIds: string[]; onClick: (e: React.MouseEvent) => void; children: React.ReactNode;
 }) {
   const drag = useMediaDraggable<HTMLDivElement>({
     enabled: manage,
@@ -446,7 +446,18 @@ export function MediaLibraryModal({
       })
     : [];
 
+  // Visual order of the item grid: documents render before images, and a CSS
+  // grid lays both out in source order, so an index range here is exactly the
+  // range a shift-click spans on screen — rows included.
+  const orderedIds = [...filteredDocuments.map((doc) => doc.id), ...filtered.map((item) => item.id)];
+
+  // Anchor for shift-click range selection. Stored as an id, not an index:
+  // `filtered`/`filteredDocuments` are recomputed every render, so an index
+  // would go stale on search, filter, or folder navigation.
+  const rangeAnchorId = useRef<string | null>(null);
+
   function toggleSelect(id: string) {
+    rangeAnchorId.current = id;
     setSelected((prev) => {
       const next = new Set(prev);
       if (next.has(id)) {
@@ -458,6 +469,32 @@ export function MediaLibraryModal({
     });
   }
 
+  function selectRangeTo(id: string) {
+    const anchor = rangeAnchorId.current;
+    const from = anchor === null ? -1 : orderedIds.indexOf(anchor);
+    const to = orderedIds.indexOf(id);
+    // No usable anchor (never clicked, or it was filtered/deleted away) — fall
+    // back to a plain toggle so the click is never a no-op.
+    if (from === -1 || to === -1) {
+      toggleSelect(id);
+      return;
+    }
+    const range = orderedIds.slice(Math.min(from, to), Math.max(from, to) + 1);
+    // The anchor stays put so the range can be re-extended by shift-clicking
+    // again, and the range adds rather than toggles (matching file explorers).
+    setSelected((prev) => new Set([...prev, ...range]));
+  }
+
+  function handleItemClick(id: string, e: React.MouseEvent) {
+    if (e.shiftKey) {
+      // Shift-click otherwise drags a native text selection across the grid.
+      e.preventDefault();
+      selectRangeTo(id);
+    } else {
+      toggleSelect(id);
+    }
+  }
+
   const [confirmDelete, setConfirmDelete] = useState(false);
 
   // One selection, two kinds. Everything downstream — delete dispatch, usage
@@ -837,7 +874,7 @@ export function MediaLibraryModal({
                 isSelected={selected.has(doc.id)}
                 refCount={documentReferenceCountMap[doc.id] ?? 0}
                 showFolderChip={filtering && documentsFolderEnabled}
-                onClick={() => (manage ? toggleSelect(doc.id) : onSelect(doc.id))}
+                onClick={(e) => (manage ? handleItemClick(doc.id, e) : onSelect(doc.id))}
               />
             ))}
             {filtered.map((item) => {
@@ -853,11 +890,11 @@ export function MediaLibraryModal({
                   manage={manage}
                   isSelected={isSelected}
                   dragIds={dragIds}
-                  onClick={() => {
+                  onClick={(e) => {
                     if (mode === "select") {
                       onSelect(item.id);
                     } else {
-                      toggleSelect(item.id);
+                      handleItemClick(item.id, e);
                     }
                   }}
                 >

package/src/components/shell/SectionTypePicker.tsx

@@ -13,10 +13,19 @@ interface SectionTypePickerProps {
   containerRef?: RefObject<HTMLElement | null>;
 }
 
+const BUTTON_CLASS =
+  "cursor-pointer flex items-center gap-3 rounded-lg border border-base-200 bg-base px-4 py-3 text-left text-sm text-base-contrast-light transition-colors hover:border-base-300 hover:bg-base-accent hover:text-base-contrast";
+
 export function SectionTypePicker({ types, onSelect, onClose, containerRef }: SectionTypePickerProps) {
   const panelRef = useRef<HTMLDivElement>(null);
   const dismissRef = containerRef ?? panelRef;
 
+  // Container is a layout choice rather than a content block, so it gets its own
+  // full-width row above a divider. It's absent from the container child picker
+  // (one level of nesting), in which case there's no lead row and no divider.
+  const lead = types.find((t) => t.type === "container");
+  const rest = types.filter((t) => t !== lead);
+
   useEffect(() => {
     function handleMouseDown(e: MouseEvent) {
       if (dismissRef.current && !dismissRef.current.contains(e.target as Node)) {
@@ -32,10 +41,27 @@ export function SectionTypePicker({ types, onSelect, onClose, containerRef }: Se
       ref={panelRef}
       className="z-50 mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3"
     >
-      {types.map(({ type, label, icon }) => (
+      {lead && (
+        <>
+          <button
+            key={lead.type}
+            className={`${BUTTON_CLASS} col-span-full`}
+            onClick={() => onSelect(lead.type)}
+          >
+            {lead.icon && (
+              <span className="flex h-5 w-5 shrink-0 items-center justify-center text-base-contrast-light/60">
+                {lead.icon}
+              </span>
+            )}
+            <span>{lead.label}</span>
+          </button>
+          <hr className="col-span-full border-base-200" />
+        </>
+      )}
+      {rest.map(({ type, label, icon }) => (
         <button
           key={type}
-          className="cursor-pointer flex items-center gap-3 rounded-lg border border-base-200 bg-base px-4 py-3 text-left text-sm text-base-contrast-light transition-colors hover:border-base-300 hover:bg-base-accent hover:text-base-contrast"
+          className={BUTTON_CLASS}
           onClick={() => onSelect(type)}
         >
           {icon && (

package/src/lib/container-ops.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import type { Section } from "../schemas/sections";
 import { getAllSections } from "./registry";
+import { sortInsertMenuOptions } from "./insert-menu";
 
 interface ContainerContent {
   columns: number;
@@ -40,9 +41,11 @@ export function reorderChild(container: Section, from: number, to: number): Sect
  * single, testable source of truth (the container toolbar's "+" picker uses it).
  */
 export function childInsertableTypes(): { type: string; label: string; icon: ReactNode }[] {
-  return getAllSections()
-    .filter((d) => d.type !== "container" && d.type !== "spacer")
-    .map((d) => ({ type: d.type, label: d.label, icon: d.icon }));
+  return sortInsertMenuOptions(
+    getAllSections()
+      .filter((d) => d.type !== "container" && d.type !== "spacer")
+      .map((d) => ({ type: d.type, label: d.label, icon: d.icon })),
+  );
 }
 
 export function insertChildAt(container: Section, child: Section, index: number): Section {

package/src/lib/insert-menu.ts

@@ -12,9 +12,43 @@ export interface InsertMenuOption {
   icon?: ReactNode;
 }
 
-/** Every non-spacer section type, followed by presets contributed by registered
- *  sections. Presets appear only when their owning section is registered, so a
- *  core-only build (no brand-guide sections) shows no brand-guide presets. */
+/** Authored display order for the Add-section menu, most-reached-for first.
+ *  `container` leads because the picker gives it its own full-width row above a
+ *  divider. Anything absent — client-repo custom sections and their presets —
+ *  sorts alphabetically after these. */
+const INSERT_MENU_ORDER = [
+  "container",
+  "link_heading",
+  "sub_heading",
+  "sub_sub_heading",
+  "prose",
+  "media",
+  "video",
+  "button",
+  "colors",
+  "document",
+  "icon_list",
+  `${PRESET_PREFIX}do_dont_list`,
+  "dodont_media",
+];
+
+/** Sort insert-menu entries into `INSERT_MENU_ORDER`, with unlisted entries
+ *  (custom sections) alphabetical by label at the end. Pure; returns a copy. */
+export function sortInsertMenuOptions<T extends InsertMenuOption>(options: T[]): T[] {
+  return [...options].sort((a, b) => {
+    const ai = INSERT_MENU_ORDER.indexOf(a.type);
+    const bi = INSERT_MENU_ORDER.indexOf(b.type);
+    if (ai !== -1 && bi !== -1) return ai - bi;
+    if (ai !== -1) return -1;
+    if (bi !== -1) return 1;
+    return a.label.localeCompare(b.label);
+  });
+}
+
+/** Every non-spacer section type, plus presets contributed by registered
+ *  sections, in `INSERT_MENU_ORDER`. Presets appear only when their owning
+ *  section is registered, so a core-only build (no brand-guide sections) shows
+ *  no brand-guide presets. */
 export function buildInsertMenuOptions(sections: SectionDefinition[]): InsertMenuOption[] {
   const typeOptions = sections
     .filter((def) => def.type !== "spacer")
@@ -22,7 +56,7 @@ export function buildInsertMenuOptions(sections: SectionDefinition[]): InsertMen
   const presetOptions = sections
     .flatMap((def) => def.presets ?? [])
     .map((p) => ({ type: `${PRESET_PREFIX}${p.id}`, label: p.label, icon: p.icon }));
-  return [...typeOptions, ...presetOptions];
+  return sortInsertMenuOptions([...typeOptions, ...presetOptions]);
 }
 
 /** Resolve an Add-menu selection to ready-to-insert content. `newId` mints ids for