@drawnagency/primitives 0.1.74 → 0.1.76

package/dist/{chunk-RIVBCL6U.js → chunk-Q3T23HVW.js}

@@ -376,7 +376,7 @@ function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTabBar })
       },
       tab.id
     )) }) }),
-    /* @__PURE__ */ jsx8("div", { role: "tabpanel", className: cn(fullBleedTabBar && "pt-4"), children: activeTab?.content })
+    /* @__PURE__ */ jsx8("div", { role: "tabpanel", className: cn("px-px", fullBleedTabBar && "pt-4"), children: activeTab?.content })
   ] });
 }
 

package/dist/{chunk-YYDQGA2N.js → chunk-SWEVWC5K.js}

@@ -31,7 +31,7 @@ import {
   buildBlockDropData,
   canDropBlock,
   isBlockDragData
-} from "./chunk-RIVBCL6U.js";
+} from "./chunk-Q3T23HVW.js";
 import {
   useMediaLibrary,
   useResolvedMedia
@@ -536,6 +536,7 @@ var ChildBlockWrapper = forwardRef(
     onDuplicate,
     onColSpanChange,
     onOpenSettings,
+    clearSectionChrome,
     children
   }, ref) {
     return /* @__PURE__ */ jsxs4(
@@ -548,23 +549,33 @@ var ChildBlockWrapper = forwardRef(
           "hover:outline hover:outline-2 hover:outline-primary/30"
         ),
         children: [
-          /* @__PURE__ */ jsxs4("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", children: [
-            /* @__PURE__ */ jsx12("span", { className: "sr-only", children: label }),
-            /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(DragHandle, { ref: dragHandleRef }) }),
-            /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(ColSpanControl, { colSpan, columns, onChange: onColSpanChange }) }),
-            hasSettings && onOpenSettings && /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(SettingsButton, { onClick: onOpenSettings }) }),
-            /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(
-              "button",
-              {
-                type: "button",
-                "aria-label": "Duplicate block",
-                onClick: onDuplicate,
-                className: "cursor-pointer rounded p-1 text-base-contrast-light hover:text-primary",
-                children: /* @__PURE__ */ jsx12(CopyPlus, { size: 16 })
-              }
-            ) }),
-            /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(DeleteButton, { onDelete }) })
-          ] }),
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              "data-testid": "child-control-rail",
+              className: cn(
+                "absolute 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",
+                clearSectionChrome ? "top-8 xl:top-0" : "top-0"
+              ),
+              children: [
+                /* @__PURE__ */ jsx12("span", { className: "sr-only", children: label }),
+                /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(DragHandle, { ref: dragHandleRef }) }),
+                /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(ColSpanControl, { colSpan, columns, onChange: onColSpanChange }) }),
+                hasSettings && onOpenSettings && /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(SettingsButton, { onClick: onOpenSettings }) }),
+                /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Duplicate block",
+                    onClick: onDuplicate,
+                    className: "cursor-pointer rounded p-1 text-base-contrast-light hover:text-primary",
+                    children: /* @__PURE__ */ jsx12(CopyPlus, { size: 16 })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(DeleteButton, { onDelete }) })
+              ]
+            }
+          ),
           closestEdge === "left" && /* @__PURE__ */ jsx12(
             "div",
             {
@@ -764,6 +775,7 @@ function ContainerChild({
   hasSettings,
   mergedOptions,
   isEditMode,
+  clearSectionChrome,
   ChildComp,
   onDelete,
   onDuplicate,
@@ -797,6 +809,7 @@ function ContainerChild({
           closestEdge,
           isDragging,
           hasSettings,
+          clearSectionChrome,
           dragHandleRef: handleRef,
           onDelete,
           onDuplicate,
@@ -858,7 +871,12 @@ function Container({ content, isEditMode, onChange, openModal }) {
   };
   const emit = (nextSection) => onChange?.({ ...content, content: nextSection.content });
   const updateChild = (index, childContent) => {
-    const next = children.map((c, i) => i === index ? childContent : c);
+    const next = children.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;
+    });
     onChange?.({ ...content, content: { ...content.content, children: next } });
   };
   const gridClass = cn(
@@ -951,6 +969,7 @@ function Container({ content, isEditMode, onChange, openModal }) {
         hasSettings,
         mergedOptions,
         isEditMode,
+        clearSectionChrome: index === 0,
         ChildComp: def.component,
         onDelete: () => emit(trimTrailingSpacers(removeChildAt(container, index).container)),
         onDuplicate: () => emit(duplicateChildAt(container, index, newId)),

package/dist/components/editor/ChildBlockWrapper.d.ts

@@ -13,6 +13,13 @@ export interface ChildBlockWrapperProps {
     onDuplicate: () => void;
     onColSpanChange: (span: number) => void;
     onOpenSettings?: () => void;
+    /**
+     * Below xl the parent SECTION's "+" hangs down into the left gutter where this
+     * rail starts — set on the container's first cell so the rail (not the cell)
+     * shifts down out of the collision. Cells never move: edit-mode layout must
+     * match view mode exactly.
+     */
+    clearSectionChrome?: boolean;
     children: ReactNode;
 }
 export declare const ChildBlockWrapper: import("react").ForwardRefExoticComponent<ChildBlockWrapperProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/editor/ChildBlockWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChildBlockWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/editor/ChildBlockWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uDAAuD,CAAC;AAQlF,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,mHAkF7B,CAAC"}
+{"version":3,"file":"ChildBlockWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/editor/ChildBlockWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uDAAuD,CAAC;AAQlF,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,mHAyF7B,CAAC"}

package/dist/components/editor/SectionWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SectionWrapper.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIvD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,WAAW,EACX,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,EACN,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,OAAO,EACP,SAAS,EACT,MAAM,EACN,cAAc,EACd,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,QAAQ,EACR,aAAa,EACb,UAAU,EACV,UAAU,EACV,sBAAsB,EACtB,WAAW,EACX,QAAQ,GACT,EAAE,YAAY,2CAgTd"}
+{"version":3,"file":"SectionWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/editor/SectionWrapper.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIvD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,WAAW,EACX,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,EACN,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,OAAO,EACP,SAAS,EACT,MAAM,EACN,cAAc,EACd,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,QAAQ,EACR,aAAa,EACb,UAAU,EACV,UAAU,EACV,sBAAsB,EACtB,WAAW,EACX,QAAQ,GACT,EAAE,YAAY,2CAqTd"}

package/dist/components/editor/index.js

@@ -11,7 +11,7 @@ import {
   buildBlockDropData,
   canDropBlock,
   isBlockDragData
-} from "../../chunk-RIVBCL6U.js";
+} from "../../chunk-Q3T23HVW.js";
 import "../../chunk-ZSPCE6MZ.js";
 import "../../chunk-5THS4K5D.js";
 import {
@@ -540,7 +540,7 @@ function SectionWrapper({
           "div",
           {
             className: cn(
-              "absolute -left-16 bottom-full z-30 mb-1 hidden xl:block transition-opacity",
+              "absolute -left-16 bottom-full z-30 hover:z-[60] mb-1 hidden xl:block transition-opacity",
               alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100"
             ),
             children: /* @__PURE__ */ jsx7(InsertButton, { index, onInsert: onRequestInsert })
@@ -550,13 +550,16 @@ function SectionWrapper({
           "div",
           {
             className: cn(
-              "absolute left-0 bottom-full z-30 mb-1 flex items-center gap-1.5 transition-opacity",
+              "absolute left-0 bottom-full z-30 hover:z-[60] mb-1 flex items-center gap-1.5 transition-opacity",
               alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100"
             ),
             children: [
-              /* @__PURE__ */ jsxs5("div", { className: "-ml-[34px] flex flex-col items-center", children: [
+              /* @__PURE__ */ jsxs5("div", { className: "relative -ml-[34px] flex flex-col items-center", children: [
                 /* @__PURE__ */ jsx7(DragHandle, { ref: handleRef }),
-                onRequestInsert && !isDragging && chromeReady && /* @__PURE__ */ jsx7("div", { className: "xl:hidden -mt-1", children: /* @__PURE__ */ jsx7(InsertButton, { index, onInsert: onRequestInsert }) })
+                onRequestInsert && !isDragging && chromeReady && // Below xl the gutter can't fit the plus beside the handle, so it
+                // hangs below it (absolute → no row-height contribution: the handle
+                // stays put and the pair stacks DOWN instead of centering).
+                /* @__PURE__ */ jsx7("div", { className: "absolute top-full xl:hidden", children: /* @__PURE__ */ jsx7(InsertButton, { index, onInsert: onRequestInsert }) })
               ] }),
               /* @__PURE__ */ jsx7("span", { className: "pointer-events-none select-none whitespace-nowrap text-sm capitalize text-base-contrast-light/80", children: definition.label })
             ]

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":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgB3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAqGzD,UAAU,gBAAgB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,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,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,KAAK,IAAI,CAAC;CACzD;AAkDD,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,2CA8KrF"}
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/Container/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgB3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAyGzD,UAAU,gBAAgB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,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,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,KAAK,IAAI,CAAC;CACzD;AAkDD,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,2CAyLrF"}

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

@@ -1,11 +1,11 @@
 import {
   allSectionDefs
-} from "../../chunk-YYDQGA2N.js";
+} from "../../chunk-SWEVWC5K.js";
 import "../../chunk-NKVZGPR6.js";
 import "../../chunk-Y4JQGO6G.js";
 import "../../chunk-7T2WQSWF.js";
 import "../../chunk-T7MP7ANP.js";
-import "../../chunk-RIVBCL6U.js";
+import "../../chunk-Q3T23HVW.js";
 import "../../chunk-ZSPCE6MZ.js";
 import "../../chunk-5THS4K5D.js";
 import "../../chunk-IFHRHV7S.js";

package/dist/components/sections/register.js

@@ -1,11 +1,11 @@
 import {
   allSectionDefs
-} from "../../chunk-YYDQGA2N.js";
+} from "../../chunk-SWEVWC5K.js";
 import "../../chunk-NKVZGPR6.js";
 import "../../chunk-Y4JQGO6G.js";
 import "../../chunk-7T2WQSWF.js";
 import "../../chunk-T7MP7ANP.js";
-import "../../chunk-RIVBCL6U.js";
+import "../../chunk-Q3T23HVW.js";
 import "../../chunk-ZSPCE6MZ.js";
 import "../../chunk-5THS4K5D.js";
 import "../../chunk-IFHRHV7S.js";

package/dist/components/shared/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,UAAU,SAAS;IACjB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,SAAS,2CAqChG"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/shared/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,UAAU,SAAS;IACjB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,SAAS,2CAwChG"}

package/dist/hooks/useEditorPublish.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEditorPublish.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorPublish.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA6C/D,UAAU,WAAW;IACnB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,aAAa,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,qBAAqB,EAAE,MAAM,EAAE,CAAC;IAChC,gBAAgB,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,EAAE,kBAAkB,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtF,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAI/B,cAAc,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;IACpC,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAQD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAC;AAE7D,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,kBAAkB,EAClB,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,eAAe,GAChB,EAAE,WAAW;;;;;;;EAoXb"}
+{"version":3,"file":"useEditorPublish.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorPublish.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAgD/D,UAAU,WAAW;IACnB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,aAAa,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,qBAAqB,EAAE,MAAM,EAAE,CAAC;IAChC,gBAAgB,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,EAAE,kBAAkB,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtF,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAI/B,cAAc,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;IACpC,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAQD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAC;AAE7D,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,kBAAkB,EAClB,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,eAAe,GAChB,EAAE,WAAW;;;;;;;EAoXb"}

package/package.json

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

package/src/components/editor/ChildBlockWrapper.tsx

@@ -20,6 +20,13 @@ export interface ChildBlockWrapperProps {
   onDuplicate: () => void;
   onColSpanChange: (span: number) => void;
   onOpenSettings?: () => void;
+  /**
+   * Below xl the parent SECTION's "+" hangs down into the left gutter where this
+   * rail starts — set on the container's first cell so the rail (not the cell)
+   * shifts down out of the collision. Cells never move: edit-mode layout must
+   * match view mode exactly.
+   */
+  clearSectionChrome?: boolean;
   children: ReactNode;
 }
 
@@ -37,6 +44,7 @@ export const ChildBlockWrapper = forwardRef<HTMLDivElement, ChildBlockWrapperPro
       onDuplicate,
       onColSpanChange,
       onOpenSettings,
+      clearSectionChrome,
       children,
     },
     ref,
@@ -53,7 +61,13 @@ export const ChildBlockWrapper = forwardRef<HTMLDivElement, ChildBlockWrapperPro
         {/* 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">
+        <div
+          data-testid="child-control-rail"
+          className={cn(
+            "absolute 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",
+            clearSectionChrome ? "top-8 xl:top-0" : "top-0",
+          )}
+        >
           <span className="sr-only">{label}</span>
           <div className="pointer-events-auto">
             <DragHandle ref={dragHandleRef} />

package/src/components/editor/SectionWrapper.tsx

@@ -239,11 +239,13 @@ export function SectionWrapper({
       data-section-id={sectionId}
       data-section-type={sectionType}
     >
-      {/* Plus button — left gutter on xl+, hidden below */}
+      {/* Plus button — left gutter on xl+, hidden below. hover:z-[60] lifts the
+          whole slot (a z-30 stacking context the tooltip can't escape) above the
+          inline section-type picker (z-50) while the tooltip is showing. */}
       {onRequestInsert && !isDragging && chromeReady && (
         <div
           className={cn(
-            "absolute -left-16 bottom-full z-30 mb-1 hidden xl:block transition-opacity",
+            "absolute -left-16 bottom-full z-30 hover:z-[60] mb-1 hidden xl:block transition-opacity",
             alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100",
           )}
         >
@@ -254,14 +256,17 @@ export function SectionWrapper({
       {/* Drag handle + section label */}
       <div
         className={cn(
-          "absolute left-0 bottom-full z-30 mb-1 flex items-center gap-1.5 transition-opacity",
+          "absolute left-0 bottom-full z-30 hover:z-[60] mb-1 flex items-center gap-1.5 transition-opacity",
           alwaysShow ? "opacity-100" : "opacity-0 group-hover:opacity-100",
         )}
       >
-        <div className="-ml-[34px] flex flex-col items-center">
+        <div className="relative -ml-[34px] flex flex-col items-center">
           <DragHandle ref={handleRef} />
           {onRequestInsert && !isDragging && chromeReady && (
-            <div className="xl:hidden -mt-1">
+            // Below xl the gutter can't fit the plus beside the handle, so it
+            // hangs below it (absolute → no row-height contribution: the handle
+            // stays put and the pair stacks DOWN instead of centering).
+            <div className="absolute top-full xl:hidden">
               <InsertButton index={index} onInsert={onRequestInsert} />
             </div>
           )}

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

@@ -40,6 +40,8 @@ interface ContainerChildProps {
   hasSettings: boolean;
   mergedOptions: Record<string, unknown>;
   isEditMode: boolean;
+  /** First cell only: shift the control rail below the section's stacked "+" (below xl). */
+  clearSectionChrome?: boolean;
   ChildComp: ChildComponent;
   onDelete: () => void;
   onDuplicate: () => void;
@@ -65,6 +67,7 @@ function ContainerChild({
   hasSettings,
   mergedOptions,
   isEditMode,
+  clearSectionChrome,
   ChildComp,
   onDelete,
   onDuplicate,
@@ -97,6 +100,7 @@ function ContainerChild({
         closestEdge={closestEdge}
         isDragging={isDragging}
         hasSettings={hasSettings}
+        clearSectionChrome={clearSectionChrome}
         dragHandleRef={handleRef}
         onDelete={onDelete}
         onDuplicate={onDuplicate}
@@ -192,8 +196,18 @@ export function Container({ content, isEditMode, onChange, openModal }: Containe
     onChange?.({ ...content, content: nextSection.content });
 
   // Per-child inline content edits (e.g. prose/media bubble their own onChange).
+  // Section components emit id-less SectionContent (EditorShell re-attaches the id
+  // at the root) and know nothing of the layout envelope, so preserve both from
+  // 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.
   const updateChild = (index: number, childContent: unknown) => {
-    const next = children.map((c, i) => (i === index ? (childContent as Section) : c));
+    const next = children.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;
+    });
     onChange?.({ ...content, content: { ...content.content, children: next } });
   };
 
@@ -318,6 +332,7 @@ export function Container({ content, isEditMode, onChange, openModal }: Containe
         hasSettings={hasSettings}
         mergedOptions={mergedOptions}
         isEditMode={isEditMode}
+        clearSectionChrome={index === 0}
         ChildComp={def.component as ChildComponent}
         onDelete={() => emit(trimTrailingSpacers(removeChildAt(container, index).container))}
         onDuplicate={() => emit(duplicateChildAt(container, index, newId))}

package/src/components/shared/Tabs.tsx

@@ -57,7 +57,10 @@ export function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTa
           ))}
         </div>
       </div>
-      <div role="tabpanel" className={cn(fullBleedTabBar && "pt-4")}>{activeTab?.content}</div>
+      {/* px-px: the root's overflow-hidden would clip the 1px focus ring of
+          inputs that span the full panel width (rings are box-shadows drawn
+          outside the border box) — give them 1px to paint into. */}
+      <div role="tabpanel" className={cn("px-px", fullBleedTabBar && "pt-4")}>{activeTab?.content}</div>
     </div>
   );
 }

package/src/hooks/useEditorPublish.ts

@@ -34,8 +34,11 @@ async function postSave(payload: object): Promise<{ sha: string }> {
     throw new Error("Network error while saving — check your connection and try again.");
   }
   if (!response.ok) {
-    const errorBody = await response.json().catch(() => null) as { message?: string; error?: string } | null;
-    const serverMessage = errorBody?.message || errorBody?.error;
+    const errorBody = await response.json().catch(() => null) as { message?: string; error?: string; details?: string } | null;
+    // `details` carries the field-level cause (e.g. the Zod path inside a failing
+    // container child) — without it a validation failure only names the section.
+    const baseMessage = errorBody?.message || errorBody?.error;
+    const serverMessage = baseMessage && errorBody?.details ? `${baseMessage} — ${errorBody.details}` : baseMessage;
     const fallback = !errorBody && body.length > 5_500_000
       ? "This save is too large to send in one request — remove some images from the media library and try again."
       : `Save failed (HTTP ${response.status})`;