@bsuite/page-builder 2.7.1-next.3 → 2.7.1-next.4

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;AA4pB7F,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,qBAmgCrB"}
+{"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;AAyqB7F,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,qBAmgCrB"}

package/dist/PageGridLayout.js

@@ -187,6 +187,7 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
      */
     const scopedContent = (_jsx(ElementScopeProvider, { scope: { pageKey, cardKey: id, cardLabel: label, isEditing }, children: content }));
     const measureRef = useRef(null);
+    const surfaceRef = useRef(null);
     const lastReportedRowsRef = useRef(null);
     const measureRafRef = useRef(null);
     /**
@@ -216,9 +217,17 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
     const reportRows = useCallback((contentPx) => {
         if (!onAutoHeightChange)
             return;
+        // Chrome lives outside the observed content box. Count its actual
+        // padding and borders so appearance changes cannot overlap the next
+        // card. A consumer-owned Card is already inside the measured content.
+        const surfaceStyle = chrome && surfaceRef.current ? getComputedStyle(surfaceRef.current) : null;
+        const cardChromePx = surfaceStyle
+            ? [surfaceStyle.paddingTop, surfaceStyle.paddingBottom, surfaceStyle.borderTopWidth, surfaceStyle.borderBottomWidth]
+                .reduce((total, value) => total + (Number.parseFloat(value) || 0), 0)
+            : DEFAULT_CARD_CHROME_PX;
         const rows = computeAutoHeightRows({
             contentPx,
-            cardChromePx: DEFAULT_CARD_CHROME_PX,
+            cardChromePx,
             rowHeightPx: DEFAULT_ROW_HEIGHT,
             marginYPx: DEFAULT_MARGIN[1],
         });
@@ -226,7 +235,7 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
             return;
         lastReportedRowsRef.current = rows;
         onAutoHeightChange(id, rows);
-    }, [id, onAutoHeightChange]);
+    }, [chrome, id, onAutoHeightChange]);
     /**
      * First measurement BEFORE paint (second half of D-76).
      *
@@ -257,7 +266,7 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
             warnOnceAboutCollapsedContent(el);
         // 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]);
+    }, [autoHeight, onAutoHeightChange, reportRows, isEditing, cardStyleVars]);
     useEffect(() => {
         if (!autoHeight || !onAutoHeightChange)
             return;
@@ -307,7 +316,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" })), _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, ref: surfaceRef, "data-card-padding": !chrome && cardStyleVars && '--card-padding' in cardStyleVars ? '' : undefined, 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
@@ -360,7 +369,9 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
                          * this attribute is identical to what it was before the card editor
                          * existed. A chrome-owning surface applies `boxShadow` directly
                          * to beat its default class. Layout-only wrappers pass the token
-                         * to the painted consumer without drawing a second shadow.
+                         * to the painted consumer without drawing a second shadow. The
+                         * padding marker lets consumer Cards distinguish an explicit page
+                         * inset from an app's unrelated default --card-padding token.
                          */
                         style: {
                             contain: 'layout style',
@@ -368,7 +379,7 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
                             ...(chrome && cardStyleVars && '--card-shadow' in cardStyleVars
                                 ? { boxShadow: cardStyleVars['--card-shadow'] }
                                 : null),
-                            ...(cardStyleVars && '--card-padding' in cardStyleVars
+                            ...(chrome && cardStyleVars && '--card-padding' in cardStyleVars
                                 ? { padding: cardStyleVars['--card-padding'] }
                                 : null),
                         }, 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] }));

package/package.json

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