@bsuite/page-builder 2.7.0 → 2.7.1-next.1

package/README.md

@@ -48,3 +48,26 @@ Behaviour and guarantees:
 
 When adding `autoHeight` to an existing page's layout, bump that page's
 `layoutVersion` so stale persisted layouts (without the flag) are reset.
+
+## Edit-mode chrome (2.7.1-next.0+)
+
+`PAGE_GRID_EDITING_EVENT` reports committed changes from `2.7.1-next.1`.
+Its `{ pageKey, editing }` payload and event name are unchanged. The matching
+canvas DOM is updated before listeners run, including when Save & Exit uses
+a React transition. Initial mounting, unchanged state and abandoned transitions
+do not emit notifications. Consumers must match the page key and preserve
+focus on surviving inputs when synchronizing their header controls.
+
+While the canvas editor is open, each grid item renders an in-flow strip
+(`[data-slot="grid-item-editor-chrome"]`) above the card content: the widget
+name and a Hide control. The strip is **not** absolutely positioned over the
+card heading. AutoHeight measures it with the content so the grid grows;
+leaving edit mode removes it and restores the content-only measurement.
+Do not restyle this in a consumer — it is the shared contract.
+
+The label carries `min-w-0 truncate` and a `title` with the full name. That is
+load-bearing on a narrow card, not decoration: without it the label's automatic
+minimum size is its min-content, and a long unbroken widget name pushes the
+`ml-auto` hide button outside the card box. Measured both ways in
+`scripts/editor-chrome-geometry.mjs`, which reproduces the defect with the two
+classes removed at run time.

package/dist/PageGridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageGridLayout.d.ts","sourceRoot":"","sources":["../src/PageGridLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAsBxC,OAAO,KAAK,EAAe,mBAAmB,EAA4B,MAAM,YAAY,CAAC;AAmmB7F,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,UAAU,EACV,SAAS,EAMT,WAAkB,EAClB,aAAsC,EACtC,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAKhB,UAAkB,EAClB,yBAAiE,EACjE,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACnB,+BAA6E,EAC7E,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,GAC7B,EAAE,mBAAmB,qBAu+BrB"}
+{"version":3,"file":"PageGridLayout.d.ts","sourceRoot":"","sources":["../src/PageGridLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAsBxC,OAAO,KAAK,EAAe,mBAAmB,EAA4B,MAAM,YAAY,CAAC;AA2pB7F,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,UAAU,EACV,SAAS,EAMT,WAAkB,EAClB,aAAsC,EACtC,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAKhB,UAAkB,EAClB,yBAAiE,EACjE,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACnB,+BAA6E,EAC7E,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,GAC7B,EAAE,mBAAmB,qBAu+BrB"}

package/dist/PageGridLayout.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ElementScopeProvider } from './elementScope.js';
 import { ArrowDown, ArrowUp, ChevronDown, ChevronUp, Eye, EyeOff, Layers, LayoutGrid, Lock, Plus, RotateCcw, Save, Settings2, Unlock } from 'lucide-react';
 import React, { startTransition, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
@@ -109,6 +109,31 @@ const RGLResizeHandle = React.forwardRef(function RGLResizeHandle({ axis = 'se',
  * the silent case audible in development and leaves production untouched, which
  * is the same trade @bsuite/theme 1.3.0 made for its missing-provider warning.
  */
+/**
+ * Edit-mode label + hide. These used to be `absolute top-2 left-2` /
+ * `top-2 right-2` overlays on the card (PageGridLayout GridItem, historically
+ * around the 407/415 marks). That painted the widget name and the hide control
+ * on top of the card heading — measured on the Candidates card at 1440.
+ *
+ * An earlier draft of this comment also claimed 390. Withdrawn: the instrument
+ * that produced that number never asserted its own `innerWidth`, and the cell
+ * labelled "390" reported 1560. What 390 actually looks like is now measured
+ * and recorded in `editor-chrome-geometry-390.json` — and it is a different
+ * fact: below a 480px container `buildResponsiveLayouts` stacks every card to
+ * full width, so 390 has no narrow card at all.
+ *
+ * In-flow, measured: the strip is a flex-none row. AutoHeight includes it in
+ * the unconstrained measure wrapper so the grid grows rather than overlapping.
+ * Fixed-height cards keep it *above* the overflow-auto body so hide cannot
+ * scroll away. Drag still starts from the strip (outer `.drag-handle`); hide
+ * is a `button` + `data-no-drag` so the existing cancel selector ignores it.
+ */
+function GridItemEditorChrome({ id, label, onHide, }) {
+    return (_jsxs("div", { "data-slot": "grid-item-editor-chrome", className: "flex min-w-0 flex-none items-center gap-1 px-2 py-1 bg-muted text-muted-foreground", children: [_jsx("span", { className: "min-w-0 truncate text-[10px] px-1.5 py-0.5 rounded-md font-medium", title: label, children: label }), _jsx("button", { type: "button", className: "ml-auto h-6 w-6 shrink-0 rounded-full flex items-center justify-center bg-destructive hover:bg-destructive text-destructive-foreground shadow transition-colors", "data-no-drag": true, onPointerDown: (event) => event.stopPropagation(), onClick: (event) => {
+                    event.stopPropagation();
+                    onHide(id);
+                }, title: `Hide ${label}`, "aria-label": `Hide ${label}`, children: _jsx(EyeOff, { className: "h-3 w-3", "aria-hidden": "true" }) })] }));
+}
 let warnedAboutCollapsedContent = false;
 function warnOnceAboutCollapsedContent(el) {
     if (warnedAboutCollapsedContent)
@@ -230,7 +255,9 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
             reportRows(contentPx);
         else
             warnOnceAboutCollapsedContent(el);
-    }, [autoHeight, onAutoHeightChange, reportRows]);
+        // Re-measure when edit chrome mounts/unmounts so the strip is in the
+        // row count in edit mode and gone again on lossless return.
+    }, [autoHeight, onAutoHeightChange, reportRows, isEditing]);
     useEffect(() => {
         if (!autoHeight || !onAutoHeightChange)
             return;
@@ -280,10 +307,7 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
     // (buttons, inputs, textarea, select, links, [data-no-drag]) are still
     // protected via the `cancel` selector below in the <Responsive> render.
     const outerClass = cn('relative group overflow-visible', isEditing && 'drag-handle cursor-move', injectedClassName);
-    return (_jsxs("div", { ref: ref, className: outerClass, style: injectedStyle, ...rest, children: [_jsxs("div", { className: "h-full w-full relative", children: [isEditing && (_jsx("div", { className: "absolute inset-0 z-10 pointer-events-none rounded-3xl border-2 border-transparent group-hover:border-primary/50 transition-colors bg-primary/5" })), isEditing && (_jsx("div", { className: "absolute top-2 left-2 z-30 flex items-center gap-1 pointer-events-none", children: _jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded-md opacity-80 font-medium bg-muted text-muted-foreground", children: label }) })), isEditing && (_jsx("button", { className: "absolute top-2 right-2 z-30 h-6 w-6 rounded-full flex items-center justify-center bg-destructive/80 hover:bg-destructive text-destructive-foreground shadow transition-colors", "data-no-drag": true, onPointerDown: (event) => event.stopPropagation(), onClick: (event) => {
-                            event.stopPropagation();
-                            onHide(id);
-                        }, title: `Hide ${label}`, "aria-label": `Hide ${label}`, children: _jsx(EyeOff, { className: "h-3 w-3", "aria-hidden": "true" }) })), _jsx("div", { "data-slot": "grid-item-surface", "data-chrome": chrome ? 'on' : 'off', "data-grid-slot-key": id, className: chrome
+    return (_jsxs("div", { ref: ref, className: outerClass, style: injectedStyle, ...rest, children: [_jsxs("div", { className: "h-full w-full relative", children: [isEditing && (_jsx("div", { className: "absolute inset-0 z-10 pointer-events-none rounded-3xl border-2 border-transparent group-hover:border-primary/50 transition-colors bg-primary/5" })), _jsx("div", { "data-slot": "grid-item-surface", "data-chrome": chrome ? 'on' : 'off', "data-grid-slot-key": id, className: chrome
                             ? // ONE radius token, read by the grid item AND available to any
                                 // app card that opts into the same surface. Two surfaces
                                 // reading the SAME var is what makes their corners align, and
@@ -346,7 +370,7 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
                             ...(cardStyleVars && '--card-padding' in cardStyleVars
                                 ? { padding: cardStyleVars['--card-padding'] }
                                 : null),
-                        }, children: _jsx("div", { className: cn('min-h-0', autoHeight ? 'flex-none overflow-visible' : 'flex-1 overflow-auto'), children: autoHeight ? (_jsx("div", { ref: measureRef, className: "flow-root", children: scopedContent })) : (scopedContent) }) })] }), injectedChildren] }));
+                        }, children: autoHeight ? (_jsx("div", { "data-slot": "grid-item-body", className: "min-h-0 flex-none overflow-visible", children: _jsxs("div", { ref: measureRef, className: "flow-root", children: [isEditing ? (_jsx(GridItemEditorChrome, { id: id, label: label, onHide: onHide })) : null, scopedContent] }) })) : (_jsxs(_Fragment, { children: [isEditing ? (_jsx(GridItemEditorChrome, { id: id, label: label, onHide: onHide })) : null, _jsx("div", { "data-slot": "grid-item-body", className: "min-h-0 flex-1 overflow-auto", children: scopedContent })] })) })] }), injectedChildren] }));
 }));
 export function PageGridLayout({ pageKey, defaultLayouts, defaultCols, layoutVersion, canEditPage, editorEventNames, preferenceAdapter, widgets, widgetMeta, className, 
 // Resize default flipped 2026-05-12: rgl v2 dropped auto-handle rendering

package/dist/usePageGridLayout.d.ts

@@ -1,13 +1,10 @@
 import type { GridLayouts, LayoutMigration, UsePageGridLayoutOptions, UsePageGridLayoutResult } from './types.js';
 export declare const DEFAULT_EDITOR_EVENT_NAMES: readonly ["bsuite-open-page-editor", "bsu-open-page-editor", "crm7-open-page-editor", "conduit-open-page-editor", "r80-open-page-editor"];
 /**
- * Event name broadcast on `window` whenever any PageGridLayout transitions
- * its `isEditing` state. Launcher widgets (e.g. floating "Edit Page" FABs)
- * subscribe to this so they can hide themselves while the canvas editor is
- * already active — prevents the redundant-affordance UX issue where a
- * "Edit Page" button sits in the corner while the editor banner is visible
- * at the top. `detail.editing` is the new state; `detail.pageKey` lets
- * launchers scope by page if they handle multiple grids on one screen.
+ * Broadcast after a PageGridLayout commits an editing-state change. Header
+ * launchers use this to synchronize their label and restore keyboard focus
+ * after canvas controls disappear. Initial state and abandoned transitions do
+ * not publish an event. `detail.pageKey` identifies the changed canvas.
  */
 export declare const PAGE_GRID_EDITING_EVENT = "bsuite-page-grid-editing";
 /**

package/dist/usePageGridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePageGridLayout.d.ts","sourceRoot":"","sources":["../src/usePageGridLayout.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAEV,WAAW,EACX,eAAe,EACf,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AAEpB,eAAO,MAAM,0BAA0B,2IAM7B,CAAC;AAEX;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,6BAA6B,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAiBzC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,UAAU,GACX,EAAE;IACD,KAAK,EAAE,WAAW,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,WAAW,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,WAAW,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,IAAI,CAAC;CACzD,GAAG,WAAW,GAAG,IAAI,CA+BrB;AAED,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,cAAc,EACd,WAAgB,EAChB,aAAiB,EACjB,WAAkB,EAClB,gBAA6C,EAC7C,iBAA4C,EAC5C,iBAAiB,EACjB,gBAAgB,GACjB,EAAE,wBAAwB,GAAG,uBAAuB,CA8yBpD"}
+{"version":3,"file":"usePageGridLayout.d.ts","sourceRoot":"","sources":["../src/usePageGridLayout.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAEV,WAAW,EACX,eAAe,EACf,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AAEpB,eAAO,MAAM,0BAA0B,2IAM7B,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,6BAA6B,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAiBzC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,UAAU,GACX,EAAE;IACD,KAAK,EAAE,WAAW,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,WAAW,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,WAAW,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,IAAI,CAAC;CACzD,GAAG,WAAW,GAAG,IAAI,CA+BrB;AAED,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,cAAc,EACd,WAAgB,EAChB,aAAiB,EACjB,WAAkB,EAClB,gBAA6C,EAC7C,iBAA4C,EAC5C,iBAAiB,EACjB,gBAAgB,GACjB,EAAE,wBAAwB,GAAG,uBAAuB,CAuyBpD"}

package/dist/usePageGridLayout.js

@@ -11,13 +11,10 @@ export const DEFAULT_EDITOR_EVENT_NAMES = [
     'r80-open-page-editor',
 ];
 /**
- * Event name broadcast on `window` whenever any PageGridLayout transitions
- * its `isEditing` state. Launcher widgets (e.g. floating "Edit Page" FABs)
- * subscribe to this so they can hide themselves while the canvas editor is
- * already active — prevents the redundant-affordance UX issue where a
- * "Edit Page" button sits in the corner while the editor banner is visible
- * at the top. `detail.editing` is the new state; `detail.pageKey` lets
- * launchers scope by page if they handle multiple grids on one screen.
+ * Broadcast after a PageGridLayout commits an editing-state change. Header
+ * launchers use this to synchronize their label and restore keyboard focus
+ * after canvas controls disappear. Initial state and abandoned transitions do
+ * not publish an event. `detail.pageKey` identifies the changed canvas.
  */
 export const PAGE_GRID_EDITING_EVENT = 'bsuite-page-grid-editing';
 /**
@@ -124,19 +121,16 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
     const effectiveLayoutVersion = layoutVersion + PACKAGE_LAYOUT_EPOCH;
     const containerRef = useRef(null);
     const [containerWidth, setContainerWidth] = useState(0);
-    const [isEditing, setIsEditingState] = useState(false);
-    const setIsEditing = useCallback((next) => {
-        setIsEditingState((previous) => {
-            const resolved = typeof next === 'function' ? next(previous) : next;
-            if (resolved !== previous && typeof window !== 'undefined') {
-                // Broadcast to FAB launchers so they can hide while the editor is open.
-                window.dispatchEvent(new CustomEvent(PAGE_GRID_EDITING_EVENT, {
-                    detail: { pageKey, editing: resolved },
-                }));
-            }
-            return resolved;
-        });
-    }, [pageKey]);
+    const [isEditing, setIsEditing] = useState(false);
+    const publishedEditing = useRef(false);
+    useEffect(() => {
+        if (publishedEditing.current === isEditing)
+            return;
+        publishedEditing.current = isEditing;
+        window.dispatchEvent(new CustomEvent(PAGE_GRID_EDITING_EVENT, {
+            detail: { pageKey, editing: isEditing },
+        }));
+    }, [isEditing, pageKey]);
     const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
     useLayoutEffect(() => {
         const el = containerRef.current;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/page-builder",
-  "version": "2.7.0",
+  "version": "2.7.1-next.1",
   "description": "Shared BSuite responsive page-builder grid and layout persistence primitives",
   "type": "module",
   "license": "UNLICENSED",
@@ -33,6 +33,7 @@
     "build": "tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
+    "test:geometry": "node scripts/editor-chrome-geometry.mjs",
     "prepublishOnly": "pnpm build"
   },
   "peerDependencies": {