@drawnagency/primitives 0.1.75 → 0.1.76

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

@@ -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,
@@ -956,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)),
@@ -969,7 +983,7 @@ function Container({ content, isEditMode, onChange, openModal }) {
   }
   const occupied = occupiedColumns(children, columns);
   const emptyCols = occupied < columns ? columns - occupied : 0;
-  return /* @__PURE__ */ jsx13("div", { className: "@container", children: /* @__PURE__ */ jsxs5("div", { className: cn(gridClass, "pt-8 xl:pt-0"), children: [
+  return /* @__PURE__ */ jsx13("div", { className: "@container", children: /* @__PURE__ */ jsxs5("div", { className: gridClass, children: [
     children.map(renderEditChild),
     Array.from({ length: emptyCols }, (_, i) => /* @__PURE__ */ jsx13(
       EmptyColumnCell,

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/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,2CA2LrF"}
+{"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,6 +1,6 @@
 import {
   allSectionDefs
-} from "../../chunk-U4E6S4PX.js";
+} from "../../chunk-SWEVWC5K.js";
 import "../../chunk-NKVZGPR6.js";
 import "../../chunk-Y4JQGO6G.js";
 import "../../chunk-7T2WQSWF.js";

package/dist/components/sections/register.js

@@ -1,6 +1,6 @@
 import {
   allSectionDefs
-} from "../../chunk-U4E6S4PX.js";
+} from "../../chunk-SWEVWC5K.js";
 import "../../chunk-NKVZGPR6.js";
 import "../../chunk-Y4JQGO6G.js";
 import "../../chunk-7T2WQSWF.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.75",
+  "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/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}
@@ -328,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))}
@@ -348,10 +353,7 @@ export function Container({ content, isEditMode, onChange, openModal }: Containe
   const emptyCols = occupied < columns ? columns - occupied : 0;
   return (
     <div className="@container">
-      {/* Below xl the section's "+" stacks under the drag handle and hangs down
-          into the left gutter, where the first child's control rail would collide
-          with it — push children down until the gutter is side-by-side again. */}
-      <div className={cn(gridClass, "pt-8 xl:pt-0")}>
+      <div className={gridClass}>
         {children.map(renderEditChild)}
         {Array.from({ length: emptyCols }, (_, i) => (
           <EmptyColumnCell