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

package/README.md

@@ -48,3 +48,19 @@ 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+)
+
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/page-builder",
-  "version": "2.7.0",
+  "version": "2.7.1-next.0",
   "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": {