@bsuite/page-builder 2.2.0 → 2.4.0

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;AA8f7F,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
@@ -223,9 +280,32 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
                                 // `--radius-card` defaults to today's value (1.5rem =
                                 // rounded-3xl), so this is byte-identical until a tenant sets
                                 // one.
-                                'h-full w-full rounded-[var(--radius-card,1.5rem)] transition-all flex flex-col bg-card border border-border shadow-sm dark:shadow-[var(--glow-card,none)]'
+                                cn('w-full rounded-[var(--radius-card,1.5rem)] transition-all flex flex-col bg-card border border-border shadow-sm dark:shadow-[var(--glow-card,none)]', 
+                                // THE DOUBLED BOTTOM BORDER, AND WHY THE ARITHMETIC COULD NEVER FIX IT.
+                                //
+                                // computeAutoHeightRows uses Math.ceil to round content height up to
+                                // whole rows, because react-grid-layout only accepts integer row units.
+                                // So an autoHeight slot is up to (rowHeight + marginY - 1)px TALLER than
+                                // its content — measured on /placements: 6.6px at 1440 and 768, 28.6px
+                                // at 1024. That remainder is unavoidable; it is what "whole rows" means.
+                                //
+                                // With `h-full` the painted surface FILLS the remainder, so its bottom
+                                // border is drawn below the content's own bottom edge. When the content
+                                // also paints a Card — which ~90% of slots do — the user sees TWO
+                                // bottom borders with a few px of card background between them.
+                                //
+                                // Raised as D-46, D-98 and D-136 ("Bottom border still double for cards
+                                // which we have raised 100s of times now"), and 2.3.1 did not fix it
+                                // because 2.3.1 changed the row ARITHMETIC. No arithmetic removes a ceil
+                                // remainder. The fix has to be in the PAINT.
+                                //
+                                // So for autoHeight the surface HUGS its content and the remainder
+                                // becomes transparent space below the card, which nobody can see. For a
+                                // manually-resized slot h-full is still right: the user chose that
+                                // height and the chrome should fill it.
+                                autoHeight ? 'h-fit' : 'h-full')
                             : // Chrome OFF: layout only. Identical box, no paint.
-                                'h-full w-full transition-all flex flex-col', style: { contain: 'layout style' }, children: _jsx("div", { className: cn('flex-1 min-h-0', autoHeight ? 'overflow-hidden' : 'overflow-auto'), children: autoHeight ? _jsx("div", { ref: measureRef, children: content }) : content }) })] }), injectedChildren] }));
+                                cn('w-full transition-all flex flex-col', autoHeight ? 'h-fit' : 'h-full'), style: { contain: 'layout style' }, children: _jsx("div", { className: cn('min-h-0', autoHeight ? 'flex-none overflow-hidden' : 'flex-1 overflow-auto'), children: autoHeight ? _jsx("div", { ref: measureRef, children: content }) : content }) })] }), 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.2.0",
+  "version": "2.4.0",
   "description": "Shared BSuite responsive page-builder grid and layout persistence primitives",
   "type": "module",
   "license": "UNLICENSED",