@bsuite/page-builder 2.1.0 → 2.3.1

package/dist/PageGridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageGridLayout.d.ts","sourceRoot":"","sources":["../src/PageGridLayout.tsx"],"names":[],"mappings":"AACA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAMxC,OAAO,KAAK,EAAe,mBAAmB,EAA4B,MAAM,YAAY,CAAC;AA4W7F,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,EAKjB,UAAkB,EAClB,yBAAiE,EACjE,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACnB,+BAA6E,EAC7E,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,GAC7B,EAAE,mBAAmB,qBAyzBrB"}
+{"version":3,"file":"PageGridLayout.d.ts","sourceRoot":"","sources":["../src/PageGridLayout.tsx"],"names":[],"mappings":"AACA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAMxC,OAAO,KAAK,EAAe,mBAAmB,EAA4B,MAAM,YAAY,CAAC;AAyd7F,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,EAKjB,UAAkB,EAClB,yBAAiE,EACjE,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACnB,+BAA6E,EAC7E,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,GAC7B,EAAE,mBAAmB,qBAyzBrB"}

package/dist/PageGridLayout.js

@@ -84,6 +84,61 @@ const DEFAULT_ADD_RELATIONSHIP_WIDGET_EVENT_NAMES = [
 const RGLResizeHandle = React.forwardRef(function RGLResizeHandle({ axis = 'se', className: injectedClassName, ...rest }, ref) {
     return (_jsx("span", { ref: ref, "data-no-drag": true, className: `react-resizable-handle react-resizable-handle-${axis}${injectedClassName ? ' ' + injectedClassName : ''}`, ...rest }));
 });
+/* A ZERO MEASUREMENT IS DISCARDED SILENTLY, AND THAT IS HOW A CARD GOES INVISIBLE.
+ *
+ * `reportRows` is guarded by `contentPx > 0` — correctly, because a zero reading
+ * during mount would converge the card to nothing. But a card whose content
+ * genuinely measures zero then keeps whatever row count it had, inside a wrapper
+ * that is `overflow-hidden`. The card renders. The content does not. Nothing
+ * fails, and nothing says so.
+ *
+ * The reachable cause is a percentage height. The measuring div is deliberately
+ * UNCONSTRAINED so the observer reads intrinsic height rather than the clipped
+ * flex box — that is the whole reason it exists. An unconstrained parent has
+ * `height: auto`, and a child asking for `height: 100%` against `auto` resolves
+ * to auto, i.e. its own content height. A chart, a canvas or a map that sizes
+ * itself from its parent therefore collapses to nothing, and the taller the
+ * intended element the more invisible it is. The same CSS rule produced a
+ * 1184x0 schema-builder canvas in production with 45 laid-out nodes inside it.
+ *
+ * This does NOT change layout. Constraining the wrapper would break the
+ * measurement it exists to take, and changing the autoHeight default is how
+ * page-builder 2.0.0 discarded every saved layout across 1,729 cards. It makes
+ * 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.
+ */
+let warnedAboutCollapsedContent = false;
+function warnOnceAboutCollapsedContent(el) {
+    if (warnedAboutCollapsedContent)
+        return;
+    /* THE SIGNATURE, not merely "height is zero".
+     *
+     * Requiring childElementCount > 0 is not enough, and jsdom is why: it has no
+     * layout engine, so getBoundingClientRect().height is 0 for EVERY element in
+     * every test. A warning keyed on that fires on every mounted card in the suite
+     * and means nothing — the recorded lesson is that jsdom cannot model the bug
+     * this exists to catch, so the check must not pretend it can.
+     *
+     * The real defect has a distinctive shape, measured in production: laid-out
+     * content inside a zero-height box — scrollHeight 1938 against clientHeight 0.
+     * Requiring scrollHeight > 0 selects exactly that, and jsdom reports 0 for
+     * both, so it stays silent there rather than crying wolf. */
+    if (el.scrollHeight <= 0)
+        return;
+    const isDev = typeof import.meta !== 'undefined' &&
+        import.meta.env?.DEV === true;
+    if (!isDev)
+        return;
+    warnedAboutCollapsedContent = true;
+    console.error('[@bsuite/page-builder] An autoHeight card measured 0px with content inside it, '
+        + 'so its height was left unchanged and the content is clipped by overflow-hidden — '
+        + 'the card looks empty rather than broken. The usual cause is a child sized with '
+        + 'height:100% (a chart, canvas or map): the measuring wrapper is intentionally '
+        + 'unconstrained so the observer can read intrinsic height, and a percentage height '
+        + 'against an auto-height parent resolves to auto. Give the child an intrinsic height '
+        + '(an aspect ratio, a px/rem height, or min-height), or pass autoHeight={false} on '
+        + 'this card so it renders into the constrained scrollable wrapper instead.');
+}
 const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, isEditing, label, onHide, autoHeight, onAutoHeightChange, chrome = false, children: injectedChildren, className: injectedClassName, style: injectedStyle, ...rest }, ref) {
     // Auto-height measurement (blueprint amendment A1). `measureRef` wraps
     // `content` with NO height constraint of its own — its parent has
@@ -161,6 +216,8 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
         latestContentPxRef.current = contentPx;
         if (contentPx > 0)
             reportRows(contentPx);
+        else
+            warnOnceAboutCollapsedContent(el);
     }, [autoHeight, onAutoHeightChange, reportRows]);
     useEffect(() => {
         if (!autoHeight || !onAutoHeightChange)
@@ -214,7 +271,7 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
     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', className: chrome
+                        }, 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
                             ? // 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

package/dist/buildResponsiveLayouts.d.ts

@@ -21,17 +21,37 @@ export type ResponsiveBreakpoint = (typeof RESPONSIVE_BREAKPOINTS)[number];
  * and the SE resize handle could not widen a card that was already at the grid
  * bound nor narrow one whose `minW` had been clamped up to `cols`.
  *
- * `md` and `sm` therefore mirror `lg`: at a container width of 768px and above
- * there is room for the arrangement the user chose, and honouring their choice
- * is the whole point of the control. Genuine phone widths (`xs` < 768px
- * container, `xxs` < 480px) still stack, which is what that code was for.
+ * `md` and `sm` therefore mirror `lg`. So does `xs`, as of 2026-08-26 — the
+ * 2026-08-13 fix stopped ONE BREAKPOINT SHORT of the sessions D-75 was reported
+ * from, and the operator kept reporting it.
+ *
+ * MEASURED on production crm.crm7.app/dashboard, signed in, with a positive
+ * control in both directions at a SINGLE viewport (1024x1000) where the only
+ * variable is the sidebar:
+ *
+ *   sidebar expanded  -> container 664px -> `xs` -> the columns control was
+ *                        INERT: presets 2/4/12 each produced the identical
+ *                        single-column layout.
+ *   sidebar collapsed -> container 872px -> `sm` -> the control ACTED: three
+ *                        presets, three distinct layouts.
+ *
+ * Same page, same viewport, same control. And in the inert case the control
+ * stayed fully interactive — it accepted the click and updated its own
+ * `aria-pressed`/`data-active` while nothing on screen moved.
+ *
+ * `xs` spans a 480-768px container. At 664px a two-column arrangement is ~330px
+ * a side, which is not the "unreadable sliver" the stacking rule was written to
+ * prevent; that rationale was about phones, and a 1024px laptop with a sidebar
+ * open is not a phone. Only `xxs` (< 480px container) genuinely is, so only
+ * `xxs` still stacks.
  */
-export declare const MIRRORED_BREAKPOINTS: readonly ["md", "sm"];
+export declare const MIRRORED_BREAKPOINTS: readonly ["md", "sm", "xs"];
 /**
  * Breakpoints derived as a single full-width stack — narrow enough that a
- * multi-column arrangement cannot be read.
+ * multi-column arrangement genuinely cannot be read. Below a 480px container
+ * even two columns are ~230px a side before margins, which is the sliver case.
  */
-export declare const STACKED_BREAKPOINTS: readonly ["xs", "xxs"];
+export declare const STACKED_BREAKPOINTS: readonly ["xxs"];
 /**
  * Every breakpoint this module DERIVES from `lg`.
  *
@@ -60,10 +80,11 @@ export interface BuildResponsiveLayoutsOptions {
  * Ensure a GridLayouts object has entries for all responsive breakpoints
  * (lg, md, sm, xs, xxs).
  *
- * - `md` and `sm` mirror `lg` so the user's chosen column arrangement survives
- *   every desktop and tablet container width (see {@link MIRRORED_BREAKPOINTS}).
- * - `xs` and `xxs` are derived as a single-column stack so a phone viewport
- *   never squashes cards into unreadable slivers.
+ * - `md`, `sm` and `xs` mirror `lg` so the user's chosen column arrangement
+ *   survives every desktop, laptop and tablet container width (see
+ *   {@link MIRRORED_BREAKPOINTS}).
+ * - `xxs` is derived as a single-column stack so a phone viewport never
+ *   squashes cards into unreadable slivers.
  * - Consumer-supplied breakpoints are preserved verbatim. Supplying one opts
  *   that breakpoint OUT of tracking `lg`, including out of the columns slider —
  *   prefer not to.

package/dist/buildResponsiveLayouts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildResponsiveLayouts.d.ts","sourceRoot":"","sources":["../src/buildResponsiveLayouts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkB,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9D,eAAO,MAAM,sBAAsB,0CAA2C,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,oBAAoB,uBAAwB,CAAC;AAE1D;;;GAGG;AACH,eAAO,MAAM,mBAAmB,wBAAyB,CAAC;AAE1D;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,EAAE,SAAS,oBAAoB,EAG9D,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAE/D;AAED;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAEvE;AAED,MAAM,WAAW,6BAA6B;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA0BD;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,WAAW,EACpB,EAAE,IAAS,EAAE,GAAE,6BAAkC,GAChD,WAAW,CAyBb"}
+{"version":3,"file":"buildResponsiveLayouts.d.ts","sourceRoot":"","sources":["../src/buildResponsiveLayouts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkB,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9D,eAAO,MAAM,sBAAsB,0CAA2C,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,oBAAoB,6BAA8B,CAAC;AAEhE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,kBAAmB,CAAC;AAEpD;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,EAAE,SAAS,oBAAoB,EAG9D,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAE/D;AAED;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAEvE;AAED,MAAM,WAAW,6BAA6B;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA2BD;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,WAAW,EACpB,EAAE,IAAS,EAAE,GAAE,6BAAkC,GAChD,WAAW,CAyBb"}

package/dist/buildResponsiveLayouts.js

@@ -19,17 +19,37 @@ export const RESPONSIVE_BREAKPOINTS = ['lg', 'md', 'sm', 'xs', 'xxs'];
  * and the SE resize handle could not widen a card that was already at the grid
  * bound nor narrow one whose `minW` had been clamped up to `cols`.
  *
- * `md` and `sm` therefore mirror `lg`: at a container width of 768px and above
- * there is room for the arrangement the user chose, and honouring their choice
- * is the whole point of the control. Genuine phone widths (`xs` < 768px
- * container, `xxs` < 480px) still stack, which is what that code was for.
+ * `md` and `sm` therefore mirror `lg`. So does `xs`, as of 2026-08-26 — the
+ * 2026-08-13 fix stopped ONE BREAKPOINT SHORT of the sessions D-75 was reported
+ * from, and the operator kept reporting it.
+ *
+ * MEASURED on production crm.crm7.app/dashboard, signed in, with a positive
+ * control in both directions at a SINGLE viewport (1024x1000) where the only
+ * variable is the sidebar:
+ *
+ *   sidebar expanded  -> container 664px -> `xs` -> the columns control was
+ *                        INERT: presets 2/4/12 each produced the identical
+ *                        single-column layout.
+ *   sidebar collapsed -> container 872px -> `sm` -> the control ACTED: three
+ *                        presets, three distinct layouts.
+ *
+ * Same page, same viewport, same control. And in the inert case the control
+ * stayed fully interactive — it accepted the click and updated its own
+ * `aria-pressed`/`data-active` while nothing on screen moved.
+ *
+ * `xs` spans a 480-768px container. At 664px a two-column arrangement is ~330px
+ * a side, which is not the "unreadable sliver" the stacking rule was written to
+ * prevent; that rationale was about phones, and a 1024px laptop with a sidebar
+ * open is not a phone. Only `xxs` (< 480px container) genuinely is, so only
+ * `xxs` still stacks.
  */
-export const MIRRORED_BREAKPOINTS = ['md', 'sm'];
+export const MIRRORED_BREAKPOINTS = ['md', 'sm', 'xs'];
 /**
  * Breakpoints derived as a single full-width stack — narrow enough that a
- * multi-column arrangement cannot be read.
+ * multi-column arrangement genuinely cannot be read. Below a 480px container
+ * even two columns are ~230px a side before margins, which is the sliver case.
  */
-export const STACKED_BREAKPOINTS = ['xs', 'xxs'];
+export const STACKED_BREAKPOINTS = ['xxs'];
 /**
  * Every breakpoint this module DERIVES from `lg`.
  *
@@ -61,10 +81,11 @@ export function isCanonicalisableBreakpoint(breakpoint) {
 /**
  * Stack items into one full-width column, preserving reading order.
  *
- * `w: cols` is deliberate at the breakpoints this is used for (`xs`/`xxs`):
- * the container is narrower than 768px, so a card occupies the whole grid
- * whatever the column count. Do NOT reach for this at wider breakpoints — that
- * was D-75.
+ * `w: cols` is deliberate at the breakpoint this is used for (`xxs`): the
+ * container is narrower than 480px, so a card occupies the whole grid whatever
+ * the column count. Do NOT reach for this at wider breakpoints — that was D-75,
+ * twice: once for `md`/`sm` in August 2026, and again for `xs`, which is where
+ * a 1024px laptop with an open sidebar actually lands.
  */
 function stackToSingleColumn(items, cols) {
     const sorted = [...items].sort((a, b) => (a.y !== b.y ? a.y - b.y : a.x - b.x));
@@ -85,10 +106,11 @@ function stackToSingleColumn(items, cols) {
  * Ensure a GridLayouts object has entries for all responsive breakpoints
  * (lg, md, sm, xs, xxs).
  *
- * - `md` and `sm` mirror `lg` so the user's chosen column arrangement survives
- *   every desktop and tablet container width (see {@link MIRRORED_BREAKPOINTS}).
- * - `xs` and `xxs` are derived as a single-column stack so a phone viewport
- *   never squashes cards into unreadable slivers.
+ * - `md`, `sm` and `xs` mirror `lg` so the user's chosen column arrangement
+ *   survives every desktop, laptop and tablet container width (see
+ *   {@link MIRRORED_BREAKPOINTS}).
+ * - `xxs` is derived as a single-column stack so a phone viewport never
+ *   squashes cards into unreadable slivers.
  * - Consumer-supplied breakpoints are preserved verbatim. Supplying one opts
  *   that breakpoint OUT of tracking `lg`, including out of the columns slider —
  *   prefer not to.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/page-builder",
-  "version": "2.1.0",
+  "version": "2.3.1",
   "description": "Shared BSuite responsive page-builder grid and layout persistence primitives",
   "type": "module",
   "license": "UNLICENSED",