@bsuite/page-builder 0.5.0 → 0.5.2

package/dist/PageGridLayout.js

@@ -145,7 +145,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-black/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-white 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", { className: "h-full w-full rounded-3xl transition-all flex flex-col bg-card border border-border shadow-sm", 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] }));
+                        }, title: `Hide ${label}`, "aria-label": `Hide ${label}`, children: _jsx(EyeOff, { className: "h-3 w-3", "aria-hidden": "true" }) })), _jsx("div", { className: "h-full w-full rounded-3xl transition-all flex flex-col bg-card border border-border shadow-sm dark:shadow-[var(--glow-card,none)]", 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] }));
 }));
 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/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,CA8ZpD"}
+{"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,CA2cpD"}

package/dist/usePageGridLayout.js

@@ -1,5 +1,5 @@
 import { startTransition, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { noCompactor, verticalCompactor } from 'react-grid-layout';
+import { verticalCompactor } from 'react-grid-layout';
 import { buildResponsiveLayouts } from './buildResponsiveLayouts.js';
 import { defaultPreferenceAdapter } from './preferences.js';
 import { rescaleLayout } from './rescaleLayout.js';
@@ -121,7 +121,55 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
         }
     }, [baseCols, layoutCols, rawLayouts, setBaseCols, setSavedLayout]);
     const activeCols = useMemo(() => ({ lg: layoutCols, md: layoutCols, sm: layoutCols, xs: layoutCols, xxs: layoutCols }), [layoutCols]);
-    const activeCompactor = useMemo(() => (isEditing ? { ...noCompactor, preventCollision: true } : verticalCompactor), [isEditing]);
+    /**
+     * The compactor handed to react-grid-layout — the SAME one in edit mode and
+     * view mode (bsuite#1588).
+     *
+     * Why this is NOT `{ ...noCompactor, preventCollision: true }` while editing
+     * -------------------------------------------------------------------------
+     * That was the original edit-mode config, present since this package's first
+     * commit, and it silently made drag/resize gestures unable to persist for
+     * any layout with adjacent cards. react-grid-layout derives three knobs
+     * straight off the compactor object:
+     *
+     *   preventCollision = compactor.preventCollision ?? false   // was true
+     *   allowOverlap     = compactor.allowOverlap                // false
+     *   compactType      = compactor.type                        // was null
+     *
+     * and feeds them to `moveElement`, whose colliding-move branch is:
+     *
+     *   if (hasCollisions && preventCollision) {
+     *     l.x = oldX; l.y = oldY; l.moved = false; return layout;   // full revert
+     *   }
+     *
+     * With `compactType: null` there is NO compaction to displace the colliding
+     * neighbour, so the only outcome for a gesture landing on an occupied cell
+     * is a total revert. `onDragStop` then guards its emit with
+     * `if (oldLayout && !deepEqual(oldLayout, finalLayout)) onLayoutChange(...)`
+     * — a reverted gesture emits NOTHING, so the persisted layout could never
+     * change. Resize is rejected by the same lever (`if (preventCollision &&
+     * !allowOverlap)` restores the old w/h/x/y). The card still tracked the
+     * cursor because react-draggable/react-resizable transform the DOM node
+     * directly, independent of whether RGL accepted the move — which is why the
+     * gesture looked live while nothing ever saved.
+     *
+     * In a full-width stack (every card `w: cols` — the dominant archetype on
+     * /dashboard and /people/:id) EVERY reorder target is occupied, so EVERY
+     * gesture reverted.
+     *
+     * Why `verticalCompactor` in BOTH modes rather than another combination
+     * --------------------------------------------------------------------
+     * View mode always compacted vertically. An edit-mode compactor that allows
+     * free/overlapping placement therefore produces a layout the viewer
+     * immediately re-compacts away — the editor/viewer mismatch meant "free
+     * placement" was never deliverable, and Save & Exit re-compacted regardless.
+     * One compactor for both modes makes what the user arranges exactly what
+     * they get, lets `moveElement` displace neighbours (so reordering a stack
+     * works at all), and removes a spurious `onLayoutChange` that RGL fired on
+     * every edit-mode toggle purely because `compactType` changed — that echo
+     * carried the pre-gesture layout and was the only write reaching storage.
+     */
+    const activeCompactor = verticalCompactor;
     /**
      * Throttled layout-change handler.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/page-builder",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Shared BSuite responsive page-builder grid and layout persistence primitives",
   "type": "module",
   "license": "UNLICENSED",
@@ -32,6 +32,7 @@
     "prepublishOnly": "pnpm build"
   },
   "peerDependencies": {
+    "@bsuite/theme": ">=0.5.0",
     "@dnd-kit/core": "^6",
     "@dnd-kit/sortable": "^10",
     "@dnd-kit/utilities": "^3",
@@ -42,6 +43,9 @@
     "react-resizable": "^3 || ^4"
   },
   "peerDependenciesMeta": {
+    "@bsuite/theme": {
+      "optional": true
+    },
     "@dnd-kit/core": {
       "optional": true
     },