@bsuite/page-builder 0.7.0 → 0.8.0

package/dist/PageGridLayout.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 import type { PageGridLayoutProps } from './types.js';
-export declare function PageGridLayout({ pageKey, defaultLayouts, defaultCols, layoutVersion, canEditPage, editorEventNames, preferenceAdapter, widgets, widgetMeta, className, isResizable, resizeHandles, tenantId, addEntityWidgetEventNames, createEntityWidget, onRegisterEntityWidget, relationshipCatalog, addRelationshipWidgetEventNames, createRelationshipWidget, onRegisterRelationshipWidget, onRelationshipWidgetRejected, }: PageGridLayoutProps): React.JSX.Element;
+export declare function PageGridLayout({ pageKey, defaultLayouts, defaultCols, layoutVersion, canEditPage, editorEventNames, preferenceAdapter, widgets, widgetMeta, className, isResizable, resizeHandles, tenantId, defaultAutoHeight, addEntityWidgetEventNames, createEntityWidget, onRegisterEntityWidget, relationshipCatalog, addRelationshipWidgetEventNames, createRelationshipWidget, onRegisterRelationshipWidget, onRelationshipWidgetRejected, }: PageGridLayoutProps): React.JSX.Element;
 //# sourceMappingURL=PageGridLayout.d.ts.map

package/dist/PageGridLayout.d.ts.map

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

package/dist/PageGridLayout.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, ChevronDown, ChevronUp, Eye, EyeOff, Layers, LayoutGrid, Lock, Plus, RotateCcw, Save, Settings2, Unlock } from 'lucide-react';
-import React, { startTransition, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { startTransition, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { Responsive } from 'react-grid-layout';
 import { gridBounds, minMaxSize, minSize } from 'react-grid-layout/core';
 import 'react-grid-layout/css/styles.css';
@@ -97,6 +97,71 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
     const measureRef = useRef(null);
     const lastReportedRowsRef = useRef(null);
     const measureRafRef = useRef(null);
+    /**
+     * Latest measured content height, updated on EVERY ResizeObserver entry.
+     *
+     * D-76 root cause ("cards render half cut off on page open"). The previous
+     * implementation captured `contentPx` in the rAF closure and then bailed
+     * out of any further entry that arrived before that frame ran:
+     *
+     *     if (measureRafRef.current !== null) return;   // <- measurement lost
+     *
+     * That is first-writer-wins inside a frame, and the first writer is
+     * routinely the WRONG one: a card mounts empty or skeletonised, the
+     * observer fires at (say) 90px and schedules the frame, the query resolves
+     * and the observer fires again at 760px — and that second entry returned
+     * early, discarding the real height. The frame then converged the card to
+     * ~3 rows. Because `computeAutoHeightRows` is a pure function of the height
+     * it is given, nothing re-triggered: the card stayed at the empty-state
+     * height with its content clipped by the `overflow-hidden` autoHeight
+     * wrapper until something else happened to resize it.
+     *
+     * Storing the height in a ref and READING IT INSIDE the frame makes it
+     * last-writer-wins, which is the only correct policy for "how tall is this
+     * content right now".
+     */
+    const latestContentPxRef = useRef(null);
+    const reportRows = useCallback((contentPx) => {
+        if (!onAutoHeightChange)
+            return;
+        const rows = computeAutoHeightRows({
+            contentPx,
+            cardChromePx: DEFAULT_CARD_CHROME_PX,
+            rowHeightPx: DEFAULT_ROW_HEIGHT,
+            marginYPx: DEFAULT_MARGIN[1],
+        });
+        if (rows === lastReportedRowsRef.current)
+            return;
+        lastReportedRowsRef.current = rows;
+        onAutoHeightChange(id, rows);
+    }, [id, onAutoHeightChange]);
+    /**
+     * First measurement BEFORE paint (second half of D-76).
+     *
+     * A ResizeObserver's initial observation is delivered asynchronously, and
+     * the rAF hop below adds another frame. Until it lands the card renders at
+     * its seed `h` — 6 rows / 192px for a `DraggableCardPage` card — with
+     * `overflow-hidden`, so the first painted frame of a taller card is
+     * literally cut in half. That is what the operator sees "on page open",
+     * every open, on every surface with content taller than its seed.
+     *
+     * Measuring in a layout effect and reporting synchronously puts the correct
+     * row count into state within the same commit, so the browser never paints
+     * the clipped frame. React batches these updates across all GridItems
+     * mounting together, and `applyAutoHeightRows` is a functional update, so N
+     * cards settling at once cost one re-render and cannot clobber each other.
+     */
+    useLayoutEffect(() => {
+        if (!autoHeight || !onAutoHeightChange)
+            return;
+        const el = measureRef.current;
+        if (!el)
+            return;
+        const contentPx = el.getBoundingClientRect().height;
+        latestContentPxRef.current = contentPx;
+        if (contentPx > 0)
+            reportRows(contentPx);
+    }, [autoHeight, onAutoHeightChange, reportRows]);
     useEffect(() => {
         if (!autoHeight || !onAutoHeightChange)
             return;
@@ -107,7 +172,7 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
             const entry = entries[0];
             if (!entry)
                 return;
-            const contentPx = entry.contentRect.height;
+            latestContentPxRef.current = entry.contentRect.height;
             if (measureRafRef.current !== null)
                 return;
             const schedule = typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function'
@@ -115,16 +180,10 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
                 : (cb) => setTimeout(cb, 0);
             measureRafRef.current = schedule(() => {
                 measureRafRef.current = null;
-                const rows = computeAutoHeightRows({
-                    contentPx,
-                    cardChromePx: DEFAULT_CARD_CHROME_PX,
-                    rowHeightPx: DEFAULT_ROW_HEIGHT,
-                    marginYPx: DEFAULT_MARGIN[1],
-                });
-                if (rows !== lastReportedRowsRef.current) {
-                    lastReportedRowsRef.current = rows;
-                    onAutoHeightChange(id, rows);
-                }
+                const contentPx = latestContentPxRef.current;
+                if (contentPx === null)
+                    return;
+                reportRows(contentPx);
             });
         });
         ro.observe(el);
@@ -137,7 +196,7 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
             }
             measureRafRef.current = null;
         };
-    }, [autoHeight, id, onAutoHeightChange]);
+    }, [autoHeight, onAutoHeightChange, reportRows]);
     // DnD root-cause fix (2026-05-07): react-draggable@4 (used internally by
     // react-grid-layout@2) checks the drag handle via
     // `matchesSelectorAndParentsTo(target, handle, baseNode)` — it walks UP
@@ -163,8 +222,8 @@ export function PageGridLayout({ pageKey, defaultLayouts, defaultCols, layoutVer
 // adapters then defaulted it back to true. With v2's handle gap fixed,
 // the safe default is true so any consumer who forgets to set it still
 // gets a usable canvas. Opt out per-page with isResizable={false}.
-isResizable = true, resizeHandles = DEFAULT_RESIZE_HANDLES, tenantId, addEntityWidgetEventNames = DEFAULT_ADD_ENTITY_WIDGET_EVENT_NAMES, createEntityWidget, onRegisterEntityWidget, relationshipCatalog, addRelationshipWidgetEventNames = DEFAULT_ADD_RELATIONSHIP_WIDGET_EVENT_NAMES, createRelationshipWidget, onRegisterRelationshipWidget, onRelationshipWidgetRejected, }) {
-    const { currentLayouts, layoutCols, isEditing, setIsEditing, activeCols, activeCompactor, onLayoutChange, handleColumnChange, handleCompact, handleReset, addWidget, moveWidget, setWidgetLocked, applyAutoHeightRows, autoHeightRows, resetConfirmOpen, setResetConfirmOpen, containerRef, containerWidth, } = usePageGridLayout({
+isResizable = true, resizeHandles = DEFAULT_RESIZE_HANDLES, tenantId, defaultAutoHeight, addEntityWidgetEventNames = DEFAULT_ADD_ENTITY_WIDGET_EVENT_NAMES, createEntityWidget, onRegisterEntityWidget, relationshipCatalog, addRelationshipWidgetEventNames = DEFAULT_ADD_RELATIONSHIP_WIDGET_EVENT_NAMES, createRelationshipWidget, onRegisterRelationshipWidget, onRelationshipWidgetRejected, }) {
+    const { currentLayouts, layoutCols, isEditing, setIsEditing, activeCols, activeCompactor, onLayoutChange, handleColumnChange, handleBreakpointChange, handleCompact, handleReset, addWidget, moveWidget, setWidgetLocked, applyAutoHeightRows, autoHeightRows, resetConfirmOpen, setResetConfirmOpen, containerRef, containerWidth, } = usePageGridLayout({
         pageKey,
         defaultLayouts,
         defaultCols,
@@ -172,6 +231,7 @@ isResizable = true, resizeHandles = DEFAULT_RESIZE_HANDLES, tenantId, addEntityW
         canEditPage,
         editorEventNames,
         preferenceAdapter,
+        defaultAutoHeight,
     });
     // Auto-height dispatcher (blueprint amendment A1, hardened per quality
     // review 2026-07-14). `GridItem`'s ResizeObserver calls this per-widget
@@ -309,9 +369,28 @@ isResizable = true, resizeHandles = DEFAULT_RESIZE_HANDLES, tenantId, addEntityW
                 // Until the first measurement lands, `autoHeightRows` has no entry and
                 // the item's seed `h` renders as-is.
                 .map((item) => {
-                if (!item.autoHeight)
-                    return item;
-                // HEAL a persisted `isResizable: false`.
+                // HEAL a persisted `isResizable: false` on ANY item, not just an
+                // autoHeight one (D-75: "individual cards can no longer be resized").
+                //
+                // The 0.6.0 heal was scoped to `item.autoHeight`, which left the
+                // whole non-autoHeight population — every card that opted out, and
+                // every layout persisted before `autoHeight` existed as a concept —
+                // permanently unresizable with no way back: the flag is re-persisted
+                // on each load, so clearing it by hand does not survive a refresh.
+                //
+                // The one legitimate source of a per-item `isResizable: false` is the
+                // Layers "lock" control, which writes it together with `static: true`
+                // and `isDraggable: false`. Requiring that full signature separates a
+                // deliberate lock (kept) from the 0.5.2 leak (dropped), so the heal
+                // can be widened without silently unlocking anything a user locked.
+                const lockedDeliberately = item.static === true || item.isDraggable === false;
+                const needsResizeHeal = item.isResizable === false && !lockedDeliberately;
+                if (!item.autoHeight) {
+                    if (!needsResizeHeal)
+                        return item;
+                    const { isResizable: _dropped, ...unlocked } = item;
+                    return unlocked;
+                }
                 //
                 // 0.5.2 set this at the render layer, and it leaked out through
                 // `onLayoutChange` into the SAVED layout. Removing the override in
@@ -565,7 +644,11 @@ isResizable = true, resizeHandles = DEFAULT_RESIZE_HANDLES, tenantId, addEntityW
                                         }) })] })), layerItems.length > 0 && (_jsxs("div", { className: "basis-full rounded-md border border-border bg-background/80 p-2", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: [_jsx(Layers, { className: "h-3.5 w-3.5" }), "Layers"] }), _jsx("div", { className: "flex flex-col gap-1", children: layerItems.map((layer) => (_jsxs("div", { className: "flex items-center gap-1 rounded border border-border bg-card px-2 py-1", children: [_jsx("input", { type: "text", value: layer.label, onChange: (event) => handleLayerRename(layer.id, event.target.value), className: "min-w-0 flex-1 bg-transparent text-xs text-foreground outline-none", "aria-label": `Rename ${layer.label}` }), _jsx("button", { type: "button", onClick: () => moveWidget(layer.id, 'up'), disabled: !layer.canMoveUp, "aria-label": `Move ${layer.label} up`, className: "rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40", children: _jsx(ArrowUp, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: () => moveWidget(layer.id, 'down'), disabled: !layer.canMoveDown, "aria-label": `Move ${layer.label} down`, className: "rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40", children: _jsx(ArrowDown, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: () => setWidgetLocked(layer.id, !layer.locked), "aria-label": `${layer.locked ? 'Unlock' : 'Lock'} ${layer.label}`, className: "rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", children: layer.locked ? _jsx(Lock, { className: "h-3.5 w-3.5" }) : _jsx(Unlock, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: () => hideLayer(layer.id), "aria-label": `Hide ${layer.label}`, className: "rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", children: _jsx(EyeOff, { className: "h-3.5 w-3.5" }) })] }, layer.id))) })] })), _jsxs("button", { type: "button", onClick: handleCompact, className: cn('ml-auto inline-flex items-center rounded-md border border-border px-2 py-1 text-sm transition-colors', 'text-muted-foreground hover:bg-muted hover:text-foreground', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1'), children: [_jsx(Layers, { className: "h-4 w-4 mr-1" }), "Compact Layout"] }), _jsxs("button", { type: "button", onClick: () => setResetConfirmOpen(true), className: cn('inline-flex items-center rounded-md border border-border px-2 py-1 text-sm transition-colors', 'text-muted-foreground hover:bg-muted hover:text-foreground', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1'), children: [_jsx(RotateCcw, { className: "h-4 w-4 mr-1" }), "Reset to Default"] })] })] })), resetConfirmOpen && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-overlay/50 p-4", role: "dialog", "aria-modal": "true", "aria-labelledby": "page-grid-reset-title", "aria-describedby": "page-grid-reset-description", children: _jsxs("div", { className: "max-w-md rounded-lg bg-card p-5 shadow-lg border border-border", children: [_jsx("h2", { id: "page-grid-reset-title", className: "text-lg font-semibold", children: "Reset page layout?" }), _jsx("p", { id: "page-grid-reset-description", className: "mt-2 text-sm text-muted-foreground", children: "This will discard your current layout and restore all widgets to their default positions." }), _jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [_jsx("button", { type: "button", ref: resetCancelButtonRef, onClick: () => setResetConfirmOpen(false), className: cn('inline-flex items-center rounded-md border border-border px-3 py-2 text-sm transition-colors', 'bg-card text-foreground hover:bg-muted hover:text-foreground', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1'), children: "Cancel" }), _jsx("button", { type: "button", ref: resetConfirmButtonRef, onClick: () => {
                                         handleReset();
                                         setResetConfirmOpen(false);
-                                    }, className: cn('inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors', 'bg-destructive text-destructive-foreground shadow hover:bg-destructive/90', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/40 focus-visible:ring-offset-1'), children: "Reset to Default" })] })] }) })), _jsx("div", { ref: containerRef, className: cn('relative z-0 overflow-visible', isEditing && 'min-h-[200px] bg-muted/30'), "data-page-grid-editing": isEditing || undefined, children: _jsx("div", { className: "relative z-0", style: { opacity: containerWidth > 0 ? 1 : 0 }, "aria-busy": containerWidth <= 0, children: _jsx(Responsive, { width: Math.max(containerWidth, 1), className: "layout page-grid-canvas", layouts: activeLayouts, breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }, rowHeight: DEFAULT_ROW_HEIGHT, onLayoutChange: onLayoutChange, dragConfig: {
+                                    }, className: cn('inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors', 'bg-destructive text-destructive-foreground shadow hover:bg-destructive/90', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/40 focus-visible:ring-offset-1'), children: "Reset to Default" })] })] }) })), _jsx("div", { ref: containerRef, className: cn('relative z-0 overflow-visible', isEditing && 'min-h-[200px] bg-muted/30'), "data-page-grid-editing": isEditing || undefined, children: _jsx("div", { className: "relative z-0", style: { opacity: containerWidth > 0 ? 1 : 0 }, "aria-busy": containerWidth <= 0, children: _jsx(Responsive, { width: Math.max(containerWidth, 1), className: "layout page-grid-canvas", layouts: activeLayouts, breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }, rowHeight: DEFAULT_ROW_HEIGHT, onLayoutChange: onLayoutChange, 
+                        // Tells the hook which breakpoint a gesture belongs to, so the edit
+                        // is folded back onto `lg` instead of into a derived breakpoint
+                        // that is regenerated (and therefore discarded) on the next render.
+                        onBreakpointChange: handleBreakpointChange, dragConfig: {
                             enabled: isEditing,
                             handle: '.drag-handle',
                             bounded: false,

package/dist/buildResponsiveLayouts.d.ts

@@ -1,15 +1,72 @@
 import type { GridLayouts } from './types.js';
 export declare const RESPONSIVE_BREAKPOINTS: readonly ["lg", "md", "sm", "xs", "xxs"];
 export type ResponsiveBreakpoint = (typeof RESPONSIVE_BREAKPOINTS)[number];
+/**
+ * Breakpoints whose layout MIRRORS `lg` verbatim.
+ *
+ * D-75 root cause (operator directive 2026-08-13: "columns available to move
+ * cards into do not respect the columns slider").
+ * ---------------------------------------------------------------------------
+ * react-grid-layout picks its breakpoint from the **container** width, not the
+ * viewport — `<Responsive width={containerWidth}>` in `PageGridLayout`. Inside
+ * an app shell with a sidebar and page padding, a 1280px laptop presents a
+ * container around 950px and a 1440px desktop around 1100px. Both land BELOW
+ * the `md: 996` / `lg: 1200` thresholds, so the great majority of real desktop
+ * sessions render at `sm` or `md`, not `lg`.
+ *
+ * `sm` used to be derived by `stackToSingleColumn`, which sets `w: cols` on
+ * every item — one card per row at full width, whatever the column count. So
+ * on an ordinary laptop the columns slider changed `activeCols` while every
+ * card stayed stretched across all of them: the control provably did nothing,
+ * 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.
+ */
+export declare const MIRRORED_BREAKPOINTS: readonly ["md", "sm"];
+/**
+ * Breakpoints derived as a single full-width stack — narrow enough that a
+ * multi-column arrangement cannot be read.
+ */
+export declare const STACKED_BREAKPOINTS: readonly ["xs", "xxs"];
+/**
+ * Every breakpoint this module DERIVES from `lg`.
+ *
+ * A derived breakpoint is a render-time projection, never a stored fact. It
+ * must not reach the preference adapter: react-grid-layout echoes ALL
+ * breakpoints back through `onLayoutChange` on every gesture, so persisting
+ * them verbatim froze the derivation — a layout derived once at 12 columns was
+ * then "consumer-supplied" forever and stopped tracking `lg`. See
+ * `canonicaliseLayoutForPersist` in `usePageGridLayout.ts`.
+ */
+export declare const DERIVED_BREAKPOINTS: readonly ResponsiveBreakpoint[];
+export declare function isDerivedBreakpoint(breakpoint: string): boolean;
+/**
+ * True when a gesture at `breakpoint` can be written straight back onto `lg`.
+ *
+ * `lg`, `md` and `sm` all render the same array against the same column count,
+ * so an edit made at any of them is expressible in `lg` with no loss. `xs` and
+ * `xxs` render a full-width stack, where an edit carries only a vertical order
+ * and would flatten a multi-column desktop arrangement if applied to `lg`.
+ */
+export declare function isCanonicalisableBreakpoint(breakpoint: string): boolean;
 export interface BuildResponsiveLayoutsOptions {
     cols?: number;
 }
 /**
  * Ensure a GridLayouts object has entries for all responsive breakpoints
- * (lg, md, sm, xs, xxs). Missing smaller breakpoints (sm/xs/xxs) are derived
- * from `lg` as a single-column vertical stack so that consumer-supplied
- * lg-only layouts no longer squash on phone viewports. Missing `md` is
- * mirrored from `lg`. Consumer-supplied breakpoints are preserved verbatim.
+ * (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.
+ * - Consumer-supplied breakpoints are preserved verbatim. Supplying one opts
+ *   that breakpoint OUT of tracking `lg`, including out of the columns slider —
+ *   prefer not to.
  */
 export declare function buildResponsiveLayouts(layouts: GridLayouts, { cols }?: BuildResponsiveLayoutsOptions): GridLayouts;
 //# sourceMappingURL=buildResponsiveLayouts.d.ts.map

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,MAAM,WAAW,6BAA6B;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAkBD;;;;;;GAMG;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;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/buildResponsiveLayouts.js

@@ -1,4 +1,71 @@
 export const RESPONSIVE_BREAKPOINTS = ['lg', 'md', 'sm', 'xs', 'xxs'];
+/**
+ * Breakpoints whose layout MIRRORS `lg` verbatim.
+ *
+ * D-75 root cause (operator directive 2026-08-13: "columns available to move
+ * cards into do not respect the columns slider").
+ * ---------------------------------------------------------------------------
+ * react-grid-layout picks its breakpoint from the **container** width, not the
+ * viewport — `<Responsive width={containerWidth}>` in `PageGridLayout`. Inside
+ * an app shell with a sidebar and page padding, a 1280px laptop presents a
+ * container around 950px and a 1440px desktop around 1100px. Both land BELOW
+ * the `md: 996` / `lg: 1200` thresholds, so the great majority of real desktop
+ * sessions render at `sm` or `md`, not `lg`.
+ *
+ * `sm` used to be derived by `stackToSingleColumn`, which sets `w: cols` on
+ * every item — one card per row at full width, whatever the column count. So
+ * on an ordinary laptop the columns slider changed `activeCols` while every
+ * card stayed stretched across all of them: the control provably did nothing,
+ * 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.
+ */
+export const MIRRORED_BREAKPOINTS = ['md', 'sm'];
+/**
+ * Breakpoints derived as a single full-width stack — narrow enough that a
+ * multi-column arrangement cannot be read.
+ */
+export const STACKED_BREAKPOINTS = ['xs', 'xxs'];
+/**
+ * Every breakpoint this module DERIVES from `lg`.
+ *
+ * A derived breakpoint is a render-time projection, never a stored fact. It
+ * must not reach the preference adapter: react-grid-layout echoes ALL
+ * breakpoints back through `onLayoutChange` on every gesture, so persisting
+ * them verbatim froze the derivation — a layout derived once at 12 columns was
+ * then "consumer-supplied" forever and stopped tracking `lg`. See
+ * `canonicaliseLayoutForPersist` in `usePageGridLayout.ts`.
+ */
+export const DERIVED_BREAKPOINTS = [
+    ...MIRRORED_BREAKPOINTS,
+    ...STACKED_BREAKPOINTS,
+];
+export function isDerivedBreakpoint(breakpoint) {
+    return DERIVED_BREAKPOINTS.includes(breakpoint);
+}
+/**
+ * True when a gesture at `breakpoint` can be written straight back onto `lg`.
+ *
+ * `lg`, `md` and `sm` all render the same array against the same column count,
+ * so an edit made at any of them is expressible in `lg` with no loss. `xs` and
+ * `xxs` render a full-width stack, where an edit carries only a vertical order
+ * and would flatten a multi-column desktop arrangement if applied to `lg`.
+ */
+export function isCanonicalisableBreakpoint(breakpoint) {
+    return breakpoint === 'lg' || MIRRORED_BREAKPOINTS.includes(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.
+ */
 function stackToSingleColumn(items, cols) {
     const sorted = [...items].sort((a, b) => (a.y !== b.y ? a.y - b.y : a.x - b.x));
     let nextY = 0;
@@ -16,10 +83,15 @@ function stackToSingleColumn(items, cols) {
 }
 /**
  * Ensure a GridLayouts object has entries for all responsive breakpoints
- * (lg, md, sm, xs, xxs). Missing smaller breakpoints (sm/xs/xxs) are derived
- * from `lg` as a single-column vertical stack so that consumer-supplied
- * lg-only layouts no longer squash on phone viewports. Missing `md` is
- * mirrored from `lg`. Consumer-supplied breakpoints are preserved verbatim.
+ * (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.
+ * - Consumer-supplied breakpoints are preserved verbatim. Supplying one opts
+ *   that breakpoint OUT of tracking `lg`, including out of the columns slider —
+ *   prefer not to.
  */
 export function buildResponsiveLayouts(layouts, { cols = 12 } = {}) {
     const lg = layouts.lg ?? [];
@@ -32,7 +104,7 @@ export function buildResponsiveLayouts(layouts, { cols = 12 } = {}) {
             result[bp] = supplied;
             continue;
         }
-        if (bp === 'md') {
+        if (MIRRORED_BREAKPOINTS.includes(bp)) {
             result[bp] = lg;
             continue;
         }

package/dist/types.d.ts

@@ -34,6 +34,14 @@ export interface UsePageGridLayoutOptions {
     canEditPage?: boolean;
     editorEventNames?: readonly string[];
     preferenceAdapter?: PageGridPreferenceFactory;
+    /**
+     * Value used for `GridLayoutItem.autoHeight` on any item that does not state
+     * one. Defaults to `true` — cards grow to fit their content rather than
+     * clipping it behind an inner scrollbar (D-76). Pass `false` for a surface
+     * whose items own their own scroll (a virtualized list); an individual item
+     * can always opt out with an explicit `autoHeight: false`.
+     */
+    defaultAutoHeight?: boolean;
 }
 export interface WidgetMeta {
     label: string;
@@ -162,6 +170,14 @@ export interface UsePageGridLayoutResult {
     activeCompactor: Compactor;
     onLayoutChange: (_layout: unknown, layouts: unknown) => void;
     handleColumnChange: (newCols: number) => void;
+    /**
+     * Wire to `<Responsive onBreakpointChange>`. The hook needs to know which
+     * breakpoint react-grid-layout is rendering so a gesture is written back to
+     * the breakpoint that owns it — see `canonicaliseLayoutForPersist`. Without
+     * this the hook assumes `lg`, and every edit made at a narrower container
+     * width lands in a derived breakpoint that is then discarded (D-75).
+     */
+    handleBreakpointChange: (breakpoint: string) => void;
     handleCompact: () => void;
     handleReset: () => void;
     addWidget: (widgetKey: string, initialSize?: Partial<Pick<GridLayoutItem, 'w' | 'h' | 'minW' | 'minH'>>) => void;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/usePageGridLayout.d.ts

@@ -10,9 +10,30 @@ export declare const DEFAULT_EDITOR_EVENT_NAMES: readonly ["bsuite-open-page-edi
  * launchers scope by page if they handle multiple grids on one screen.
  */
 export declare const PAGE_GRID_EDITING_EVENT = "bsuite-page-grid-editing";
+/**
+ * Package-wide layout epoch, added to EVERY consumer's `layoutVersion`.
+ *
+ * When a default that governs all grids changes, a saved layout produced under
+ * the old default has to be invalidated — and there is no way to reach ~330
+ * call sites across six apps to hand-bump each one. crm7's `DraggableCardPage`
+ * already solved this locally with its own `LAYOUT_EPOCH`; this is the same
+ * lever one level down, so it also covers the raw `PageGridLayout` consumers
+ * (Dashboard, Billing, GTO, Analytics, the throughput and braden pages) that
+ * no app-level epoch can see.
+ *
+ * 0 -> 1000 (2026-08-13, D-75/D-76): two all-grids defaults changed in the same
+ * release — `autoHeight` now defaults to true for raw consumers, and md/sm no
+ * longer collapse to a full-width stack. Every stored layout predates both and
+ * was additionally polluted with frozen derived breakpoints, so all of them
+ * reset once to the corrected defaults.
+ *
+ * Per-page `layoutVersion` bumps keep working on top; this only moves the
+ * floor.
+ */
+export declare const PACKAGE_LAYOUT_EPOCH = 1000;
 export interface PageGridEditingEventDetail {
     pageKey: string;
     editing: boolean;
 }
-export declare function usePageGridLayout({ pageKey, defaultLayouts, defaultCols, layoutVersion, canEditPage, editorEventNames, preferenceAdapter, }: UsePageGridLayoutOptions): UsePageGridLayoutResult;
+export declare function usePageGridLayout({ pageKey, defaultLayouts, defaultCols, layoutVersion, canEditPage, editorEventNames, preferenceAdapter, defaultAutoHeight, }: UsePageGridLayoutOptions): UsePageGridLayoutResult;
 //# sourceMappingURL=usePageGridLayout.d.ts.map

package/dist/usePageGridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePageGridLayout.d.ts","sourceRoot":"","sources":["../src/usePageGridLayout.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAGV,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AAEpB,eAAO,MAAM,0BAA0B,2IAM7B,CAAC;AAEX;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,6BAA6B,CAAC;AAElE,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,GAC7C,EAAE,wBAAwB,GAAG,uBAAuB,CA+fpD"}
+{"version":3,"file":"usePageGridLayout.d.ts","sourceRoot":"","sources":["../src/usePageGridLayout.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAGV,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AAEpB,eAAO,MAAM,0BAA0B,2IAM7B,CAAC;AAEX;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,6BAA6B,CAAC;AAElE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAiBzC,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,GAClB,EAAE,wBAAwB,GAAG,uBAAuB,CAkmBpD"}

package/dist/usePageGridLayout.js

@@ -1,6 +1,6 @@
 import { startTransition, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { verticalCompactor } from 'react-grid-layout';
-import { buildResponsiveLayouts } from './buildResponsiveLayouts.js';
+import { buildResponsiveLayouts, isCanonicalisableBreakpoint, isDerivedBreakpoint, } from './buildResponsiveLayouts.js';
 import { defaultPreferenceAdapter } from './preferences.js';
 import { rescaleLayout } from './rescaleLayout.js';
 export const DEFAULT_EDITOR_EVENT_NAMES = [
@@ -20,7 +20,43 @@ export const DEFAULT_EDITOR_EVENT_NAMES = [
  * launchers scope by page if they handle multiple grids on one screen.
  */
 export const PAGE_GRID_EDITING_EVENT = 'bsuite-page-grid-editing';
-export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, layoutVersion = 1, canEditPage = true, editorEventNames = DEFAULT_EDITOR_EVENT_NAMES, preferenceAdapter = defaultPreferenceAdapter, }) {
+/**
+ * Package-wide layout epoch, added to EVERY consumer's `layoutVersion`.
+ *
+ * When a default that governs all grids changes, a saved layout produced under
+ * the old default has to be invalidated — and there is no way to reach ~330
+ * call sites across six apps to hand-bump each one. crm7's `DraggableCardPage`
+ * already solved this locally with its own `LAYOUT_EPOCH`; this is the same
+ * lever one level down, so it also covers the raw `PageGridLayout` consumers
+ * (Dashboard, Billing, GTO, Analytics, the throughput and braden pages) that
+ * no app-level epoch can see.
+ *
+ * 0 -> 1000 (2026-08-13, D-75/D-76): two all-grids defaults changed in the same
+ * release — `autoHeight` now defaults to true for raw consumers, and md/sm no
+ * longer collapse to a full-width stack. Every stored layout predates both and
+ * was additionally polluted with frozen derived breakpoints, so all of them
+ * reset once to the corrected defaults.
+ *
+ * Per-page `layoutVersion` bumps keep working on top; this only moves the
+ * floor.
+ */
+export const PACKAGE_LAYOUT_EPOCH = 1000;
+/**
+ * Default for `GridLayoutItem.autoHeight` when an item does not state one.
+ *
+ * D-76 ("cards render half cut off on page open"). `DraggableCardPage` has
+ * defaulted this to true since the E5a flip, but a RAW `PageGridLayout`
+ * consumer builds its layout array by hand and inherits nothing — the flag had
+ * to be written on every item. Sixteen of the eighteen raw consumers across the
+ * suite never did, so their cards were fixed at whatever seed `h` the author
+ * guessed and clipped everything past it behind `overflow-auto`. That is not a
+ * per-page authoring mistake repeated sixteen times; it is a default in the
+ * wrong place. An item that genuinely owns its own scroll (a virtualized list)
+ * opts out with an explicit `autoHeight: false`.
+ */
+const DEFAULT_ITEM_AUTO_HEIGHT = true;
+export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, layoutVersion = 1, canEditPage = true, editorEventNames = DEFAULT_EDITOR_EVENT_NAMES, preferenceAdapter = defaultPreferenceAdapter, defaultAutoHeight, }) {
+    const effectiveLayoutVersion = layoutVersion + PACKAGE_LAYOUT_EPOCH;
     const containerRef = useRef(null);
     const [containerWidth, setContainerWidth] = useState(0);
     const [isEditing, setIsEditingState] = useState(false);
@@ -65,18 +101,18 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
     useEffect(() => {
         if (!prefsLoaded)
             return;
-        if ((savedLayoutVersion ?? 0) < layoutVersion) {
+        if ((savedLayoutVersion ?? 0) < effectiveLayoutVersion) {
             startTransition(() => {
                 setSavedLayout(defaultLayouts);
                 setLayoutCols(defaultCols);
                 setBaseCols(defaultCols);
-                setSavedLayoutVersion(layoutVersion);
+                setSavedLayoutVersion(effectiveLayoutVersion);
             });
         }
     }, [
         defaultCols,
         defaultLayouts,
-        layoutVersion,
+        effectiveLayoutVersion,
         prefsLoaded,
         savedLayoutVersion,
         setBaseCols,
@@ -89,7 +125,26 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
     const rawLayouts = useMemo(() => {
         if (Object.keys(savedLayout || {}).length === 0)
             return defaultLayouts;
-        const saved = savedLayout;
+        // Drop DERIVED breakpoints out of a stored layout before anything reads it.
+        //
+        // Until 0.8.0 react-grid-layout's `onLayoutChange` echo persisted md/sm/xs/
+        // xxs alongside lg. `buildResponsiveLayouts` then treated them as
+        // consumer-supplied and preserved them verbatim, so a layout derived once —
+        // at whatever column count happened to be active that day — outlived every
+        // later change to `lg` and to the columns slider (D-75). Every user who has
+        // ever dragged a card on any page has that pollution stored, so the fix has
+        // to heal on read rather than wait for a layoutVersion bump; `lg` (the only
+        // breakpoint that was ever authoritative) is preserved untouched, so nobody
+        // loses the arrangement they made.
+        const stored = savedLayout;
+        const saved = {};
+        for (const bp of Object.keys(stored)) {
+            if (isDerivedBreakpoint(bp))
+                continue;
+            saved[bp] = stored[bp];
+        }
+        if (!saved.lg)
+            saved.lg = stored.lg ?? defaultLayouts.lg ?? [];
         let changed = false;
         const merged = {};
         for (const bp of Object.keys(saved)) {
@@ -107,12 +162,28 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
                 merged[bp] = savedItems;
             }
         }
-        return changed ? merged : savedLayout;
+        // `merged` is always returned (never the raw `savedLayout`) because the
+        // derived-breakpoint filter above may have removed keys even when no
+        // default item was missing — handing back `savedLayout` would smuggle the
+        // stale derived breakpoints straight past the heal.
+        void changed;
+        return merged;
     }, [savedLayout, defaultLayouts]);
     const currentLayouts = useMemo(() => {
         const rescaled = baseCols !== layoutCols ? rescaleLayout(rawLayouts, baseCols, layoutCols) : rawLayouts;
-        return buildResponsiveLayouts(rescaled, { cols: layoutCols });
-    }, [rawLayouts, baseCols, layoutCols]);
+        const responsive = buildResponsiveLayouts(rescaled, { cols: layoutCols });
+        // Resolve the autoHeight default HERE rather than at the render layer, so
+        // `stripAutoHeightRows` (which reads this object through
+        // `currentLayoutsForStripRef`) and `PageGridLayout`'s `activeLayouts` agree
+        // on which items are auto-height. They disagreed once before and the
+        // measured height leaked into storage.
+        const resolvedAutoHeight = defaultAutoHeight ?? DEFAULT_ITEM_AUTO_HEIGHT;
+        const resolved = { lg: [] };
+        for (const bp of Object.keys(responsive)) {
+            resolved[bp] = (responsive[bp] ?? []).map((item) => item.autoHeight === undefined ? { ...item, autoHeight: resolvedAutoHeight } : item);
+        }
+        return resolved;
+    }, [rawLayouts, baseCols, layoutCols, defaultAutoHeight]);
     useEffect(() => {
         if (baseCols !== layoutCols) {
             const rescaled = rescaleLayout(rawLayouts, baseCols, layoutCols);
@@ -265,6 +336,67 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
     useEffect(() => {
         currentLayoutsForStripRef.current = currentLayouts;
     }, [currentLayouts]);
+    /**
+     * The breakpoint react-grid-layout is currently rendering, tracked so a
+     * gesture can be written back to the breakpoint that OWNS it.
+     *
+     * Seeded to `lg` and corrected by `<Responsive onBreakpointChange>`, which
+     * fires on mount once the container width is known.
+     */
+    const activeBreakpointRef = useRef('lg');
+    const handleBreakpointChange = useCallback((breakpoint) => {
+        activeBreakpointRef.current = breakpoint;
+    }, []);
+    /**
+     * Reduce react-grid-layout's all-breakpoints echo down to the ONE breakpoint
+     * that is authoritative — `lg` — or refuse the write.
+     *
+     * Two defects this closes, both reported as D-75:
+     *
+     * 1. **The derived breakpoints froze.** RGL echoes every breakpoint on every
+     *    gesture. Persisting them made them consumer-supplied, so
+     *    `buildResponsiveLayouts` stopped deriving them and the columns slider
+     *    (which rescales `lg`) could no longer reach the breakpoint actually on
+     *    screen. Below a 1200px container — i.e. most real desktop sessions once
+     *    the sidebar is subtracted — moving the slider changed nothing at all.
+     *
+     * 2. **An edit made at `md`/`sm` was invisible at `lg`.** The gesture landed
+     *    in `layouts.md`; `layouts.lg` kept its old values; the same user on a
+     *    wider monitor saw their arrangement revert. `md` and `sm` render the
+     *    same array against the same column count as `lg`, so folding the
+     *    gesture onto `lg` is lossless and makes one arrangement follow the user
+     *    across every window size.
+     *
+     * `xs`/`xxs` return `null` (no write). Those breakpoints render a full-width
+     * stack, so a gesture there carries only a vertical order; applying it to
+     * `lg` would flatten a multi-column desktop arrangement that the user cannot
+     * even see on that device. Refusing the write is the conservative half of
+     * the trade: a phone visit can no longer destroy the desktop layout, at the
+     * cost of phone-only reordering not persisting. Stated in the PR, not hidden.
+     */
+    const canonicaliseLayoutForPersist = useCallback((layouts) => {
+        const breakpoint = activeBreakpointRef.current;
+        if (!isCanonicalisableBreakpoint(breakpoint))
+            return null;
+        const items = layouts[breakpoint] ?? layouts.lg;
+        if (!items)
+            return null;
+        const next = { lg: items };
+        // Preserve any breakpoint a CONSUMER supplied deliberately (never a
+        // derived one) so an opt-out layout is not silently discarded.
+        for (const bp of Object.keys(layouts)) {
+            if (bp === 'lg' || isDerivedBreakpoint(bp))
+                continue;
+            next[bp] = layouts[bp] ?? [];
+        }
+        return next;
+    }, []);
+    const commitLayout = useCallback((layouts) => {
+        const canonical = canonicaliseLayoutForPersist(layouts);
+        if (!canonical)
+            return;
+        setSavedLayout(stripAutoHeightRows(canonical));
+    }, [canonicaliseLayoutForPersist, setSavedLayout, stripAutoHeightRows]);
     const onLayoutChange = useCallback((_layout, layouts) => {
         if (!isEditing)
             return;
@@ -272,7 +404,7 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
         if (layoutCommitFrameRef.current !== null)
             return;
         if (typeof window === 'undefined' || typeof window.requestAnimationFrame !== 'function') {
-            setSavedLayout(stripAutoHeightRows(layouts));
+            commitLayout(layouts);
             return;
         }
         // Trailing rAF — lets a burst of resize ticks coalesce into one commit.
@@ -281,10 +413,10 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
             const pending = pendingLayoutRef.current;
             if (pending) {
                 pendingLayoutRef.current = null;
-                setSavedLayout(stripAutoHeightRows(pending));
+                commitLayout(pending);
             }
         });
-    }, [isEditing, setSavedLayout, stripAutoHeightRows]);
+    }, [commitLayout, isEditing]);
     useEffect(() => {
         return () => {
             if (layoutCommitFrameRef.current !== null &&
@@ -300,6 +432,23 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
         setLayoutCols(newCols);
         setBaseCols(newCols);
     }, [currentLayouts, layoutCols, setBaseCols, setLayoutCols, setSavedLayout]);
+    /**
+     * Build the object handed to the preference adapter from a new `lg` array.
+     *
+     * Only `lg` and consumer-supplied breakpoints are stored; md/sm/xs/xxs are
+     * re-derived on every render. Before 0.8.0 every mutator below spread
+     * `currentLayouts` (which contains the derived breakpoints) into its write,
+     * which re-froze them one gesture after `rawLayouts` had healed them.
+     */
+    const layoutsWithLg = useCallback((items) => {
+        const next = { lg: items };
+        for (const bp of Object.keys(currentLayouts)) {
+            if (bp === 'lg' || isDerivedBreakpoint(bp))
+                continue;
+            next[bp] = currentLayouts[bp] ?? [];
+        }
+        return next;
+    }, [currentLayouts]);
     const handleCompact = useCallback(() => {
         if (!currentLayouts.lg)
             return;
@@ -316,8 +465,8 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
             placed.push(compacted);
             return compacted;
         });
-        startTransition(() => setSavedLayout({ ...currentLayouts, lg: result }));
-    }, [currentLayouts, setSavedLayout]);
+        startTransition(() => setSavedLayout(layoutsWithLg(result)));
+    }, [currentLayouts, layoutsWithLg, setSavedLayout]);
     const handleReset = useCallback(() => {
         startTransition(() => {
             setSavedLayout(defaultLayouts);
@@ -326,7 +475,6 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
         });
     }, [defaultCols, defaultLayouts, setBaseCols, setLayoutCols, setSavedLayout]);
     const addWidget = useCallback((widgetKey, initialSize) => {
-        const bps = Object.keys(currentLayouts);
         const maxY = (currentLayouts.lg ?? []).reduce((max, item) => Math.max(max, item.y + item.h), 0);
         const newItem = {
             i: widgetKey,
@@ -337,60 +485,42 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
             minW: initialSize?.minW,
             minH: initialSize?.minH,
         };
-        const updated = { lg: [] };
-        for (const bp of bps) {
-            updated[bp] = [...(currentLayouts[bp] ?? []), newItem];
-        }
-        startTransition(() => setSavedLayout(updated));
-    }, [currentLayouts, layoutCols, setSavedLayout]);
+        startTransition(() => setSavedLayout(layoutsWithLg([...(currentLayouts.lg ?? []), newItem])));
+    }, [currentLayouts, layoutCols, layoutsWithLg, setSavedLayout]);
     const moveWidget = useCallback((widgetKey, direction) => {
-        const updated = { lg: [] };
-        for (const bp of Object.keys(currentLayouts)) {
-            const items = [...(currentLayouts[bp] ?? [])];
-            const index = items.findIndex((item) => item.i === widgetKey);
-            if (index === -1) {
-                updated[bp] = items;
-                continue;
-            }
-            const targetIndex = direction === 'up' ? index - 1 : index + 1;
-            if (targetIndex < 0 || targetIndex >= items.length) {
-                updated[bp] = items;
-                continue;
-            }
-            const moved = items[index];
-            const withoutMoved = [...items.slice(0, index), ...items.slice(index + 1)];
-            const nextItems = [
-                ...withoutMoved.slice(0, targetIndex),
-                moved,
-                ...withoutMoved.slice(targetIndex),
-            ];
-            updated[bp] = nextItems;
-        }
-        startTransition(() => setSavedLayout(updated));
-    }, [currentLayouts, setSavedLayout]);
+        const items = [...(currentLayouts.lg ?? [])];
+        const index = items.findIndex((item) => item.i === widgetKey);
+        if (index === -1)
+            return;
+        const targetIndex = direction === 'up' ? index - 1 : index + 1;
+        if (targetIndex < 0 || targetIndex >= items.length)
+            return;
+        const moved = items[index];
+        const withoutMoved = [...items.slice(0, index), ...items.slice(index + 1)];
+        const nextItems = [
+            ...withoutMoved.slice(0, targetIndex),
+            moved,
+            ...withoutMoved.slice(targetIndex),
+        ];
+        startTransition(() => setSavedLayout(layoutsWithLg(nextItems)));
+    }, [currentLayouts, layoutsWithLg, setSavedLayout]);
     const setWidgetLocked = useCallback((widgetKey, locked) => {
-        const updated = { lg: [] };
-        for (const bp of Object.keys(currentLayouts)) {
-            updated[bp] = (currentLayouts[bp] ?? []).map((item) => {
-                if (item.i !== widgetKey)
-                    return item;
-                return {
-                    ...item,
-                    static: locked,
-                    isDraggable: !locked,
-                    isResizable: !locked,
-                };
-            });
-        }
-        startTransition(() => setSavedLayout(updated));
-    }, [currentLayouts, setSavedLayout]);
+        const nextItems = (currentLayouts.lg ?? []).map((item) => {
+            if (item.i !== widgetKey)
+                return item;
+            return {
+                ...item,
+                static: locked,
+                isDraggable: !locked,
+                isResizable: !locked,
+            };
+        });
+        startTransition(() => setSavedLayout(layoutsWithLg(nextItems)));
+    }, [currentLayouts, layoutsWithLg, setSavedLayout]);
     const removeWidget = useCallback((widgetKey) => {
-        const updated = { lg: [] };
-        for (const bp of Object.keys(currentLayouts)) {
-            updated[bp] = (currentLayouts[bp] ?? []).filter((item) => item.i !== widgetKey);
-        }
-        startTransition(() => setSavedLayout(updated));
-    }, [currentLayouts, setSavedLayout]);
+        const nextItems = (currentLayouts.lg ?? []).filter((item) => item.i !== widgetKey);
+        startTransition(() => setSavedLayout(layoutsWithLg(nextItems)));
+    }, [currentLayouts, layoutsWithLg, setSavedLayout]);
     /**
      * Measured auto-height overrides (widgetKey -> rows). DERIVED, in-memory-
      * only state (quality-review design ruling, 2026-07-14):
@@ -467,6 +597,7 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
         activeCompactor,
         onLayoutChange,
         handleColumnChange,
+        handleBreakpointChange,
         handleCompact,
         handleReset,
         addWidget,

package/package.json

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