@bsuite/page-builder 0.1.0

package/README.md

@@ -0,0 +1,13 @@
+# @bsuite/page-builder
+
+Shared BSuite responsive page-builder grid primitives.
+
+Exports:
+
+- `PageGridLayout`
+- `usePageGridLayout`
+- `rescaleLayout`
+- `GridLayouts`, `GridLayoutItem`, `WidgetMeta`, and related types
+
+Consumer apps must depend on the published npm package, not `workspace:*` or
+`file:` links, because each app deploys independently.

package/dist/PageGridLayout.d.ts

@@ -0,0 +1,5 @@
+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, addEntityWidgetEventNames, createEntityWidget, onRegisterEntityWidget, }: PageGridLayoutProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PageGridLayout.d.ts.map

package/dist/PageGridLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageGridLayout.d.ts","sourceRoot":"","sources":["../src/PageGridLayout.tsx"],"names":[],"mappings":"AAIA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAGxC,OAAO,KAAK,EAAe,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAkEnE,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,UAAU,EACV,SAAS,EACT,WAAmB,EACnB,aAAsC,EACtC,yBAAiE,EACjE,kBAAkB,EAClB,sBAAsB,GACvB,EAAE,mBAAmB,2CA2RrB"}

package/dist/PageGridLayout.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Eye, EyeOff, Layers, LayoutGrid, Plus, RotateCcw, Save, Settings2 } from 'lucide-react';
+import React, { startTransition, useEffect, useMemo, useState } from 'react';
+import { Responsive } from 'react-grid-layout';
+import { gridBounds, maxSize, minMaxSize, minSize } from 'react-grid-layout/core';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+import { usePageGridLayout } from './usePageGridLayout.js';
+import { cn } from './utils.js';
+const DEFAULT_RESIZE_BOUNDS = { minW: 2, minH: 1, maxW: 12, maxH: 16 };
+const DEFAULT_RESIZE_HANDLES = ['se'];
+const DEFAULT_ADD_ENTITY_WIDGET_EVENT_NAMES = ['bsu-add-entity-widget', 'crm7-add-entity-widget'];
+const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, isEditing, label, onRemove, className: injectedClassName, style: injectedStyle, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: cn('relative group', injectedClassName), style: injectedStyle, ...rest, children: _jsxs("div", { className: "h-full w-full relative", children: [isEditing && _jsx("div", { className: "drag-handle absolute inset-0 z-20 cursor-move bg-transparent" }), 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", onClick: (event) => {
+                        event.stopPropagation();
+                        onRemove(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", style: {
+                        background: 'var(--bg-panel, var(--background, var(--card, #fff)))',
+                        boxShadow: 'var(--shadow-shell-glow, 0 1px 3px rgb(0 0 0 / 0.1))',
+                        contain: 'paint',
+                    }, children: content })] }) }));
+}));
+export function PageGridLayout({ pageKey, defaultLayouts, defaultCols, layoutVersion, canEditPage, editorEventNames, preferenceAdapter, widgets, widgetMeta, className, isResizable = false, resizeHandles = DEFAULT_RESIZE_HANDLES, addEntityWidgetEventNames = DEFAULT_ADD_ENTITY_WIDGET_EVENT_NAMES, createEntityWidget, onRegisterEntityWidget, }) {
+    const { currentLayouts, layoutCols, isEditing, setIsEditing, activeCols, activeCompactor, onLayoutChange, handleColumnChange, handleCompact, handleReset, addWidget, removeWidget, resetConfirmOpen, setResetConfirmOpen, containerRef, containerWidth, } = usePageGridLayout({
+        pageKey,
+        defaultLayouts,
+        defaultCols,
+        layoutVersion,
+        canEditPage,
+        editorEventNames,
+        preferenceAdapter,
+    });
+    const resizeEnabled = isEditing && isResizable;
+    const resizeConstraints = useMemo(() => [
+        gridBounds,
+        minMaxSize,
+        minSize(DEFAULT_RESIZE_BOUNDS.minW, DEFAULT_RESIZE_BOUNDS.minH),
+        maxSize(DEFAULT_RESIZE_BOUNDS.maxW, DEFAULT_RESIZE_BOUNDS.maxH),
+    ], []);
+    const [extraWidgetConfigs, setExtraWidgetConfigs] = useState({});
+    const extraWidgets = useMemo(() => {
+        const rendered = {};
+        if (!createEntityWidget)
+            return rendered;
+        for (const [widgetId, config] of Object.entries(extraWidgetConfigs)) {
+            rendered[widgetId] = createEntityWidget({
+                widgetId,
+                entityType: config.entityType,
+                label: config.label,
+                isEditing,
+            });
+        }
+        return rendered;
+    }, [createEntityWidget, extraWidgetConfigs, isEditing]);
+    const allWidgets = useMemo(() => ({ ...widgets, ...extraWidgets }), [widgets, extraWidgets]);
+    const renderableWidgetKeys = useMemo(() => new Set(Object.keys(allWidgets).filter((key) => allWidgets[key] !== null && allWidgets[key] !== undefined)), [allWidgets]);
+    const activeLayouts = useMemo(() => {
+        const filtered = { lg: [] };
+        for (const bp in currentLayouts) {
+            filtered[bp] = (currentLayouts[bp] ?? []).filter((item) => renderableWidgetKeys.has(item.i));
+        }
+        return filtered;
+    }, [currentLayouts, renderableWidgetKeys]);
+    useEffect(() => {
+        if (!createEntityWidget || typeof window === 'undefined')
+            return;
+        const handleAddEntityWidget = (event) => {
+            const detail = event.detail;
+            if (!detail?.entityType)
+                return;
+            const widgetId = `entity:${detail.entityType}`;
+            const alreadyInLayout = activeLayouts.lg?.some((item) => item.i === widgetId);
+            if (alreadyInLayout) {
+                startTransition(() => setIsEditing(true));
+                return;
+            }
+            onRegisterEntityWidget?.({ widgetId, entityType: detail.entityType, label: detail.label });
+            setExtraWidgetConfigs((previous) => ({
+                ...previous,
+                [widgetId]: { entityType: detail.entityType, label: detail.label },
+            }));
+            addWidget(widgetId, { w: 6, h: 8, minW: 3, minH: 4 });
+            startTransition(() => setIsEditing(true));
+        };
+        for (const eventName of addEntityWidgetEventNames) {
+            window.addEventListener(eventName, handleAddEntityWidget);
+        }
+        return () => {
+            for (const eventName of addEntityWidgetEventNames) {
+                window.removeEventListener(eventName, handleAddEntityWidget);
+            }
+        };
+    }, [
+        activeLayouts.lg,
+        addEntityWidgetEventNames,
+        addWidget,
+        createEntityWidget,
+        onRegisterEntityWidget,
+        setIsEditing,
+    ]);
+    const visibleKeys = useMemo(() => new Set((activeLayouts.lg ?? []).map((item) => item.i)), [activeLayouts.lg]);
+    const hiddenWidgetKeys = useMemo(() => [...renderableWidgetKeys].filter((key) => !visibleKeys.has(key)), [renderableWidgetKeys, visibleKeys]);
+    return (_jsxs("div", { className: className, children: [isEditing && (_jsxs("div", { className: "flex flex-col gap-3 p-4 rounded-xl shadow-lg border-2 mb-4", style: { backgroundColor: 'var(--bg-panel, var(--card, #fff))', borderColor: 'var(--accent-primary, var(--primary, #2563eb))' }, children: [_jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-10 w-10 rounded-full flex items-center justify-center animate-pulse", style: { backgroundColor: 'var(--bg-shell-accent, rgb(37 99 235 / 0.1))' }, children: _jsx(Settings2, { className: "h-5 w-5 text-primary" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-lg", style: { color: 'var(--text-heading, var(--foreground, #111827))' }, children: "Canvas Editor Active" }), _jsx("span", { className: "text-sm", style: { color: 'var(--text-secondary, var(--muted-foreground, #6b7280))' }, children: "Drag anywhere on a card to move it. Resize with the bottom-right handle." })] })] }), _jsxs("button", { type: "button", className: "shrink-0 inline-flex items-center rounded-md px-3 py-2 text-sm font-medium bg-primary text-primary-foreground shadow", onClick: () => startTransition(() => setIsEditing(false)), children: [_jsx(Save, { className: "h-4 w-4 mr-2" }), "Save & Exit"] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 pt-2 border-t", style: { borderColor: 'var(--border-shell, var(--border, #e5e7eb))' }, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutGrid, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "text-sm shrink-0 text-muted-foreground", children: "Columns:" }), _jsx("input", { type: "range", min: 2, max: 24, value: layoutCols, onChange: (event) => handleColumnChange(Number(event.target.value)), className: "w-24 cursor-pointer accent-primary", "aria-label": "Column count" }), _jsx("span", { className: "text-sm font-mono w-5 text-center tabular-nums", children: layoutCols })] }), _jsx("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Column presets", children: [2, 3, 4, 6, 12].map((columnCount) => (_jsx("button", { type: "button", onClick: () => handleColumnChange(columnCount), className: "px-2 py-0.5 rounded text-xs font-medium transition-colors", style: {
+                                        backgroundColor: layoutCols === columnCount ? 'var(--accent-primary, var(--primary, #2563eb))' : 'var(--bg-tertiary, var(--muted, #f3f4f6))',
+                                        color: layoutCols === columnCount ? '#fff' : 'var(--text-secondary, var(--muted-foreground, #6b7280))',
+                                        border: '1px solid var(--border-shell, var(--border, #e5e7eb))',
+                                    }, "aria-pressed": layoutCols === columnCount, children: columnCount }, columnCount))) }), hiddenWidgetKeys.length > 0 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Eye, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "text-sm shrink-0 text-muted-foreground", children: "Add widget:" }), _jsx("div", { className: "flex flex-wrap gap-1", children: hiddenWidgetKeys.map((key) => {
+                                            const meta = widgetMeta?.[key];
+                                            const Icon = meta?.icon;
+                                            return (_jsxs("button", { type: "button", onClick: () => addWidget(key, meta?.defaultSize), className: "flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium border transition-colors hover:border-primary/60 bg-muted text-muted-foreground", children: [_jsx(Plus, { className: "h-3 w-3" }), Icon && _jsx(Icon, { className: "h-3 w-3" }), meta?.label ?? key] }, key));
+                                        }) })] })), _jsxs("button", { type: "button", onClick: handleCompact, className: "ml-auto inline-flex items-center rounded-md border px-2 py-1 text-sm text-muted-foreground", children: [_jsx(Layers, { className: "h-4 w-4 mr-1" }), "Compact Layout"] }), _jsxs("button", { type: "button", onClick: () => setResetConfirmOpen(true), className: "inline-flex items-center rounded-md border px-2 py-1 text-sm text-muted-foreground", 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-black/40 p-4", role: "dialog", "aria-modal": "true", "aria-labelledby": "page-grid-reset-title", children: _jsxs("div", { className: "max-w-md rounded-lg bg-card p-5 shadow-lg border", children: [_jsx("h2", { id: "page-grid-reset-title", className: "text-lg font-semibold", children: "Reset page layout?" }), _jsx("p", { 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", className: "rounded-md border px-3 py-2 text-sm", onClick: () => setResetConfirmOpen(false), children: "Cancel" }), _jsx("button", { type: "button", className: "rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground", onClick: () => {
+                                        handleReset();
+                                        setResetConfirmOpen(false);
+                                    }, children: "Reset to Default" })] })] }) })), _jsx("div", { ref: containerRef, className: isEditing ? 'min-h-[200px]' : '', style: { backgroundColor: isEditing ? 'rgb(0 0 0 / 0.03)' : 'transparent' }, children: _jsx("div", { style: { opacity: containerWidth > 0 ? 1 : 0 }, "aria-busy": containerWidth <= 0, children: _jsx(Responsive, { width: Math.max(containerWidth, 1), className: "layout", layouts: activeLayouts, breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }, rowHeight: 32, onLayoutChange: onLayoutChange, dragConfig: { enabled: isEditing, handle: '.drag-handle', bounded: false, cancel: '.react-resizable-handle' }, resizeConfig: { enabled: resizeEnabled, handles: resizeHandles }, constraints: resizeConstraints, compactor: activeCompactor, cols: activeCols, margin: [6, 6], children: activeLayouts.lg.map((layoutItem) => {
+                            const content = allWidgets[layoutItem.i];
+                            if (content === undefined || content === null)
+                                return null;
+                            return (_jsx(GridItem, { id: layoutItem.i, content: content, isEditing: isEditing, label: widgetMeta?.[layoutItem.i]?.label ?? layoutItem.i, onRemove: removeWidget }, layoutItem.i));
+                        }) }) }) })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { PageGridLayout } from './PageGridLayout.js';
+export { usePageGridLayout, DEFAULT_EDITOR_EVENT_NAMES } from './usePageGridLayout.js';
+export { rescaleLayout } from './rescaleLayout.js';
+export { useLocalPreference, defaultPreferenceAdapter } from './preferences.js';
+export type { EntityWidgetDetail, EntityWidgetFactoryOptions, GridLayoutItem, GridLayouts, PageGridLayoutProps, PageGridPreferenceAdapter, PageGridPreferenceFactory, UsePageGridLayoutOptions, UsePageGridLayoutResult, WidgetMeta, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAChF,YAAY,EACV,kBAAkB,EAClB,0BAA0B,EAC1B,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,EACxB,uBAAuB,EACvB,UAAU,GACX,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { PageGridLayout } from './PageGridLayout.js';
+export { usePageGridLayout, DEFAULT_EDITOR_EVENT_NAMES } from './usePageGridLayout.js';
+export { rescaleLayout } from './rescaleLayout.js';
+export { useLocalPreference, defaultPreferenceAdapter } from './preferences.js';

package/dist/preferences.d.ts

@@ -0,0 +1,4 @@
+import type { PageGridPreferenceAdapter, PageGridPreferenceFactory } from './types.js';
+export declare function useLocalPreference<T>(key: string, fallback: T): PageGridPreferenceAdapter<T>;
+export declare const defaultPreferenceAdapter: PageGridPreferenceFactory;
+//# sourceMappingURL=preferences.d.ts.map

package/dist/preferences.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preferences.d.ts","sourceRoot":"","sources":["../src/preferences.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;AAuBvF,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,yBAAyB,CAAC,CAAC,CAAC,CAc5F;AAED,eAAO,MAAM,wBAAwB,EAAE,yBAA8C,CAAC"}

package/dist/preferences.js

@@ -0,0 +1,35 @@
+import { useCallback, useState } from 'react';
+const STORAGE_PREFIX = 'bsuite-page-builder:';
+function readLocal(key, fallback) {
+    try {
+        if (typeof window === 'undefined')
+            return fallback;
+        const raw = window.localStorage.getItem(STORAGE_PREFIX + key);
+        return raw ? JSON.parse(raw) : fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+function writeLocal(key, value) {
+    try {
+        if (typeof window === 'undefined')
+            return;
+        window.localStorage.setItem(STORAGE_PREFIX + key, JSON.stringify(value));
+    }
+    catch {
+        // Storage can be disabled or full; layout still works for the session.
+    }
+}
+export function useLocalPreference(key, fallback) {
+    const [value, setStateValue] = useState(() => readLocal(key, fallback));
+    const setValue = useCallback((next) => {
+        setStateValue((previous) => {
+            const resolved = typeof next === 'function' ? next(previous) : next;
+            writeLocal(key, resolved);
+            return resolved;
+        });
+    }, [key]);
+    return { value, setValue, loaded: true };
+}
+export const defaultPreferenceAdapter = useLocalPreference;

package/dist/rescaleLayout.d.ts

@@ -0,0 +1,8 @@
+import type { GridLayouts } from './types.js';
+/**
+ * Rescale a grid layout from one column count to another without overlapping
+ * row siblings. Items keep their row order and wrap cleanly when the new column
+ * count is narrower.
+ */
+export declare function rescaleLayout(layouts: GridLayouts, fromCols: number, toCols: number): GridLayouts;
+//# sourceMappingURL=rescaleLayout.d.ts.map

package/dist/rescaleLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rescaleLayout.d.ts","sourceRoot":"","sources":["../src/rescaleLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkB,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9D;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,WAAW,CA6CjG"}

package/dist/rescaleLayout.js

@@ -0,0 +1,43 @@
+/**
+ * Rescale a grid layout from one column count to another without overlapping
+ * row siblings. Items keep their row order and wrap cleanly when the new column
+ * count is narrower.
+ */
+export function rescaleLayout(layouts, fromCols, toCols) {
+    if (fromCols === toCols || !layouts.lg)
+        return layouts;
+    const sorted = [...layouts.lg].sort((a, b) => (a.y !== b.y ? a.y - b.y : a.x - b.x));
+    const rowMap = new Map();
+    for (const item of sorted) {
+        if (!rowMap.has(item.y))
+            rowMap.set(item.y, []);
+        rowMap.get(item.y).push(item);
+    }
+    const result = [];
+    let currentY = 0;
+    for (const [, rowItems] of [...rowMap.entries()].sort(([a], [b]) => a - b)) {
+        const rowMaxH = Math.max(...rowItems.map((item) => item.h));
+        let x = 0;
+        for (const item of rowItems) {
+            const scaledW = Math.round((item.w * toCols) / fromCols);
+            const newMinW = item.minW
+                ? Math.max(1, Math.min(toCols, Math.round((item.minW * toCols) / fromCols)))
+                : undefined;
+            const newW = Math.max(newMinW ?? 1, Math.min(scaledW, toCols));
+            if (x + newW > toCols) {
+                currentY += rowMaxH;
+                x = 0;
+            }
+            result.push({
+                ...item,
+                x,
+                y: currentY,
+                w: newW,
+                ...(newMinW !== undefined && { minW: newMinW }),
+            });
+            x += newW;
+        }
+        currentY += rowMaxH;
+    }
+    return { ...layouts, lg: result };
+}

package/dist/types.d.ts

@@ -0,0 +1,74 @@
+import type React from 'react';
+import type { Compactor, LayoutItem, ResizeHandleAxis } from 'react-grid-layout';
+export type GridLayoutItem = LayoutItem;
+export interface GridLayouts {
+    lg: GridLayoutItem[];
+    [key: string]: GridLayoutItem[];
+}
+export interface PageGridPreferenceAdapter<T> {
+    value: T;
+    setValue: (value: T | ((previous: T) => T)) => void;
+    loaded: boolean;
+}
+export type PageGridPreferenceFactory = <T>(key: string, fallback: T) => PageGridPreferenceAdapter<T>;
+export interface UsePageGridLayoutOptions {
+    pageKey: string;
+    defaultLayouts: GridLayouts;
+    defaultCols?: number;
+    layoutVersion?: number;
+    canEditPage?: boolean;
+    editorEventNames?: readonly string[];
+    preferenceAdapter?: PageGridPreferenceFactory;
+}
+export interface WidgetMeta {
+    label: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    defaultSize?: {
+        w?: number;
+        h?: number;
+        minW?: number;
+        minH?: number;
+    };
+}
+export interface EntityWidgetDetail {
+    entityType: string;
+    label?: string;
+}
+export interface EntityWidgetFactoryOptions extends EntityWidgetDetail {
+    widgetId: string;
+    isEditing: boolean;
+}
+export interface PageGridLayoutProps extends UsePageGridLayoutOptions {
+    widgets: Record<string, React.ReactNode>;
+    widgetMeta?: Record<string, WidgetMeta>;
+    className?: string;
+    isResizable?: boolean;
+    resizeHandles?: readonly ResizeHandleAxis[];
+    addEntityWidgetEventNames?: readonly string[];
+    createEntityWidget?: (options: EntityWidgetFactoryOptions) => React.ReactNode;
+    onRegisterEntityWidget?: (options: EntityWidgetDetail & {
+        widgetId: string;
+    }) => void;
+}
+export interface UsePageGridLayoutResult {
+    currentLayouts: GridLayouts;
+    layoutCols: number;
+    isEditing: boolean;
+    setIsEditing: React.Dispatch<React.SetStateAction<boolean>>;
+    activeCols: Record<string, number>;
+    activeCompactor: Compactor;
+    onLayoutChange: (_layout: unknown, layouts: unknown) => void;
+    handleColumnChange: (newCols: number) => void;
+    handleCompact: () => void;
+    handleReset: () => void;
+    addWidget: (widgetKey: string, initialSize?: Partial<Pick<GridLayoutItem, 'w' | 'h' | 'minW' | 'minH'>>) => void;
+    removeWidget: (widgetKey: string) => void;
+    resetConfirmOpen: boolean;
+    setResetConfirmOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    canEditPage: boolean;
+    containerRef: React.RefObject<HTMLElement | null>;
+    containerWidth: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

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

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/usePageGridLayout.d.ts

@@ -0,0 +1,4 @@
+import type { UsePageGridLayoutOptions, UsePageGridLayoutResult } from './types.js';
+export declare const DEFAULT_EDITOR_EVENT_NAMES: readonly ["bsuite-open-page-editor", "bsu-open-page-editor", "crm7-open-page-editor", "conduit-open-page-editor", "r80-open-page-editor"];
+export declare function usePageGridLayout({ pageKey, defaultLayouts, defaultCols, layoutVersion, canEditPage, editorEventNames, preferenceAdapter, }: UsePageGridLayoutOptions): UsePageGridLayoutResult;
+//# sourceMappingURL=usePageGridLayout.d.ts.map

package/dist/usePageGridLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePageGridLayout.d.ts","sourceRoot":"","sources":["../src/usePageGridLayout.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAGV,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AAEpB,eAAO,MAAM,0BAA0B,2IAM7B,CAAC;AAEX,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,cAAc,EACd,WAAgB,EAChB,aAAiB,EACjB,WAAkB,EAClB,gBAA6C,EAC7C,iBAA4C,GAC7C,EAAE,wBAAwB,GAAG,uBAAuB,CA4NpD"}

package/dist/usePageGridLayout.js

@@ -0,0 +1,201 @@
+import { startTransition, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { noCompactor, verticalCompactor } from 'react-grid-layout';
+import { defaultPreferenceAdapter } from './preferences.js';
+import { rescaleLayout } from './rescaleLayout.js';
+export const DEFAULT_EDITOR_EVENT_NAMES = [
+    'bsuite-open-page-editor',
+    'bsu-open-page-editor',
+    'crm7-open-page-editor',
+    'conduit-open-page-editor',
+    'r80-open-page-editor',
+];
+export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, layoutVersion = 1, canEditPage = true, editorEventNames = DEFAULT_EDITOR_EVENT_NAMES, preferenceAdapter = defaultPreferenceAdapter, }) {
+    const containerRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [isEditing, setIsEditing] = useState(false);
+    const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
+    useLayoutEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        setContainerWidth(el.offsetWidth);
+        if (typeof ResizeObserver !== 'undefined') {
+            const ro = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                if (entry) {
+                    const width = entry.contentRect.width;
+                    setContainerWidth((previous) => (width === previous ? previous : width));
+                }
+            });
+            ro.observe(el);
+            return () => ro.disconnect();
+        }
+        const onResize = () => setContainerWidth(el.offsetWidth);
+        window.addEventListener('resize', onResize);
+        return () => window.removeEventListener('resize', onResize);
+    }, []);
+    const { value: savedLayoutVersion, setValue: setSavedLayoutVersion, loaded: versionLoaded } = preferenceAdapter(`page:${pageKey}_grid_version`, 0);
+    const { value: savedLayout, setValue: setSavedLayout, loaded: layoutLoaded } = preferenceAdapter(`page:${pageKey}_grid_layouts`, defaultLayouts);
+    const { value: savedLayoutCols, setValue: setLayoutCols } = preferenceAdapter(`page:${pageKey}_grid_cols`, defaultCols);
+    const { value: savedBaseCols, setValue: setBaseCols } = preferenceAdapter(`page:${pageKey}_grid_base_cols`, defaultCols);
+    const prefsLoaded = layoutLoaded && versionLoaded;
+    useEffect(() => {
+        if (!prefsLoaded)
+            return;
+        if ((savedLayoutVersion ?? 0) < layoutVersion) {
+            startTransition(() => {
+                setSavedLayout(defaultLayouts);
+                setLayoutCols(defaultCols);
+                setBaseCols(defaultCols);
+                setSavedLayoutVersion(layoutVersion);
+            });
+        }
+    }, [
+        defaultCols,
+        defaultLayouts,
+        layoutVersion,
+        prefsLoaded,
+        savedLayoutVersion,
+        setBaseCols,
+        setLayoutCols,
+        setSavedLayout,
+        setSavedLayoutVersion,
+    ]);
+    const layoutCols = Math.max(2, savedLayoutCols ?? defaultCols);
+    const baseCols = Math.max(2, savedBaseCols ?? defaultCols);
+    const rawLayouts = useMemo(() => {
+        if (Object.keys(savedLayout || {}).length === 0)
+            return defaultLayouts;
+        const saved = savedLayout;
+        let changed = false;
+        const merged = {};
+        for (const bp of Object.keys(saved)) {
+            const savedItems = saved[bp] ?? [];
+            const savedKeys = new Set(savedItems.map((item) => item.i));
+            const bpDefaults = defaultLayouts[bp] ?? defaultLayouts.lg;
+            const missingItems = bpDefaults.filter((item) => !savedKeys.has(item.i));
+            if (missingItems.length > 0) {
+                const maxY = savedItems.reduce((max, item) => Math.max(max, item.y + item.h), 0);
+                const offsetItems = missingItems.map((item, index) => ({ ...item, y: maxY + index * item.h }));
+                merged[bp] = [...savedItems, ...offsetItems];
+                changed = true;
+            }
+            else {
+                merged[bp] = savedItems;
+            }
+        }
+        return changed ? merged : savedLayout;
+    }, [savedLayout, defaultLayouts]);
+    const currentLayouts = useMemo(() => {
+        if (baseCols !== layoutCols)
+            return rescaleLayout(rawLayouts, baseCols, layoutCols);
+        return rawLayouts;
+    }, [rawLayouts, baseCols, layoutCols]);
+    useEffect(() => {
+        if (baseCols !== layoutCols) {
+            const rescaled = rescaleLayout(rawLayouts, baseCols, layoutCols);
+            setSavedLayout(rescaled);
+            setBaseCols(layoutCols);
+        }
+    }, [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]);
+    const onLayoutChange = useCallback((_layout, layouts) => {
+        if (isEditing)
+            setSavedLayout(layouts);
+    }, [isEditing, setSavedLayout]);
+    const handleColumnChange = useCallback((newCols) => {
+        const rescaled = rescaleLayout(currentLayouts, layoutCols, newCols);
+        setSavedLayout(rescaled);
+        setLayoutCols(newCols);
+        setBaseCols(newCols);
+    }, [currentLayouts, layoutCols, setBaseCols, setLayoutCols, setSavedLayout]);
+    const handleCompact = useCallback(() => {
+        if (!currentLayouts.lg)
+            return;
+        const sorted = [...currentLayouts.lg].sort((a, b) => (a.y !== b.y ? a.y - b.y : a.x - b.x));
+        const placed = [];
+        const result = sorted.map((item) => {
+            let newY = 0;
+            for (const placedItem of placed) {
+                const overlapsHorizontally = item.x < placedItem.x + placedItem.w && item.x + item.w > placedItem.x;
+                if (overlapsHorizontally)
+                    newY = Math.max(newY, placedItem.y + placedItem.h);
+            }
+            const compacted = { ...item, y: newY };
+            placed.push(compacted);
+            return compacted;
+        });
+        startTransition(() => setSavedLayout({ ...currentLayouts, lg: result }));
+    }, [currentLayouts, setSavedLayout]);
+    const handleReset = useCallback(() => {
+        startTransition(() => {
+            setSavedLayout(defaultLayouts);
+            setLayoutCols(defaultCols);
+            setBaseCols(defaultCols);
+        });
+    }, [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,
+            x: 0,
+            y: maxY,
+            w: initialSize?.w ?? Math.min(6, layoutCols),
+            h: initialSize?.h ?? 8,
+            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]);
+    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]);
+    useEffect(() => {
+        if (!canEditPage || typeof window === 'undefined')
+            return;
+        const handler = (event) => {
+            const detail = event.detail;
+            if (!detail?.page || detail.page === pageKey) {
+                detail?.ack?.();
+                setIsEditing(true);
+            }
+        };
+        for (const eventName of editorEventNames) {
+            window.addEventListener(eventName, handler);
+        }
+        return () => {
+            for (const eventName of editorEventNames) {
+                window.removeEventListener(eventName, handler);
+            }
+        };
+    }, [canEditPage, editorEventNames, pageKey]);
+    return {
+        currentLayouts,
+        layoutCols,
+        isEditing,
+        setIsEditing,
+        activeCols,
+        activeCompactor,
+        onLayoutChange,
+        handleColumnChange,
+        handleCompact,
+        handleReset,
+        addWidget,
+        removeWidget,
+        resetConfirmOpen,
+        setResetConfirmOpen,
+        canEditPage,
+        containerRef,
+        containerWidth,
+    };
+}

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function cn(...classes: Array<string | false | null | undefined>): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,MAAM,CAE/E"}

package/dist/utils.js

@@ -0,0 +1,3 @@
+export function cn(...classes) {
+    return classes.filter(Boolean).join(' ');
+}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@bsuite/page-builder",
+  "version": "0.1.0",
+  "description": "Shared BSuite responsive page-builder grid and layout persistence primitives",
+  "type": "module",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GaryOcean428/bsuite.git",
+    "directory": "packages/page-builder"
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./src/styles/react-grid-layout-overrides.css"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "prepublishOnly": "pnpm build"
+  },
+  "peerDependencies": {
+    "@dnd-kit/core": "^6",
+    "@dnd-kit/sortable": "^10",
+    "@dnd-kit/utilities": "^3",
+    "lucide-react": ">=0.400.0",
+    "react": ">=18 <21",
+    "react-dom": ">=18 <21",
+    "react-grid-layout": "^2",
+    "react-resizable": "^3"
+  },
+  "peerDependenciesMeta": {
+    "@dnd-kit/core": {
+      "optional": true
+    },
+    "@dnd-kit/sortable": {
+      "optional": true
+    },
+    "@dnd-kit/utilities": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^18.3.28",
+    "@vitejs/plugin-react": "^5.2.0",
+    "jsdom": "^28.1.0",
+    "lucide-react": "^0.576.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-grid-layout": "^2.2.2",
+    "react-resizable": "^3.0.5",
+    "typescript": "~5.7.3",
+    "vitest": "^3.2.4"
+  }
+}

package/src/styles/react-grid-layout-overrides.css

@@ -0,0 +1,18 @@
+.react-grid-layout {
+  position: relative;
+  transition: height 200ms ease;
+}
+
+.react-grid-item {
+  transition: transform 200ms ease, width 200ms ease, height 200ms ease;
+}
+
+.react-grid-item.react-grid-placeholder {
+  border-radius: 1.5rem;
+  background: var(--accent-primary, var(--primary, #2563eb));
+  opacity: 0.16;
+}
+
+.react-grid-item > .react-resizable-handle {
+  z-index: 35;
+}