@bsuite/page-builder 2.4.1 → 2.6.0

package/dist/CustomPageView.d.ts

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+/** The subset of a `custom_pages` row this component needs. Apps may pass more. */
+export interface CustomPageLike {
+    title: string;
+    description?: string | null;
+    layout?: unknown;
+}
+/**
+ * A stored layout. Deliberately structural and permissive: this package does not
+ * own the field vocabulary, and a layout carrying keys it does not recognise must
+ * render what it can rather than throw.
+ */
+export interface StoredLayoutSection {
+    id?: string;
+    title?: string;
+    description?: string | null;
+    columns?: number;
+    fields?: Array<{
+        fieldKey?: string;
+        label?: string;
+        [k: string]: unknown;
+    }>;
+}
+export interface StoredLayout {
+    sections?: StoredLayoutSection[];
+    tabs?: Array<{
+        id?: string;
+        title?: string;
+        sections?: StoredLayoutSection[];
+    }>;
+}
+export interface CustomPageViewProps {
+    /** The already-fetched row. `null` means resolved-and-absent; `undefined` means not yet known. */
+    page: CustomPageLike | null | undefined;
+    isLoading?: boolean;
+    error?: {
+        message: string;
+    } | null;
+    /**
+     * What to do when the page resolves to nothing.
+     *
+     * `silent` (the default) is for an EMBEDDED mount that sits beside a static
+     * layout: a miss must render nothing rather than an error card in the middle of
+     * a working page.
+     *
+     * `message` is for a route where the custom page IS the whole page. Silence
+     * there is a blank screen, which reads as broken.
+     */
+    onMissing?: 'silent' | 'message';
+    /** The per-app widget catalogue. Omit it and the structural default is used. */
+    renderLayout?: (layout: StoredLayout, page: CustomPageLike) => ReactNode;
+    renderLoading?: () => ReactNode;
+    renderError?: (message: string) => ReactNode;
+    renderEmpty?: () => ReactNode;
+    className?: string;
+}
+/** A layout with no sections and no tabs has nothing to draw. */
+export declare function layoutIsEmpty(layout: unknown): boolean;
+/** Every section in a layout, whether it sits at the top level or inside a tab. */
+export declare function flattenSections(layout: StoredLayout): StoredLayoutSection[];
+/**
+ * The readable default. NOT a widget catalogue and not pretending to be one — it
+ * renders the SHAPE a page was given, so an app without its own catalogue shows
+ * something a person can read instead of `JSON.stringify`.
+ */
+export declare function renderStructuredLayout(layout: StoredLayout): ReactNode;
+export declare function CustomPageView({ page, isLoading, error, onMissing, renderLayout, renderLoading, renderError, renderEmpty, className, }: CustomPageViewProps): import("react").JSX.Element | null;
+//# sourceMappingURL=CustomPageView.d.ts.map

package/dist/CustomPageView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomPageView.d.ts","sourceRoot":"","sources":["../src/CustomPageView.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,mFAAmF;AACnF,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC,CAAC;CAC7E;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,IAAI,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAA;KAAE,CAAC,CAAC;CACjF;AAED,MAAM,WAAW,mBAAmB;IAClC,kGAAkG;IAClG,IAAI,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnC;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACjC,gFAAgF;IAChF,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,cAAc,KAAK,SAAS,CAAC;IACzE,aAAa,CAAC,EAAE,MAAM,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,SAAS,CAAC;IAC7C,WAAW,CAAC,EAAE,MAAM,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iEAAiE;AACjE,wBAAgB,aAAa,CAAC,MAAM,EAAE,OAAO,GAAG,OAAO,CAOtD;AAED,mFAAmF;AACnF,wBAAgB,eAAe,CAAC,MAAM,EAAE,YAAY,GAAG,mBAAmB,EAAE,CAM3E;AASD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,YAAY,GAAG,SAAS,CAwCtE;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,SAAiB,EACjB,KAAY,EACZ,SAAoB,EACpB,YAAY,EACZ,aAAa,EACb,WAAW,EACX,WAAW,EACX,SAAS,GACV,EAAE,mBAAmB,sCAyDrB"}

package/dist/CustomPageView.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** A layout with no sections and no tabs has nothing to draw. */
+export function layoutIsEmpty(layout) {
+    if (!layout || typeof layout !== 'object')
+        return true;
+    const l = layout;
+    const sections = Array.isArray(l.sections) ? l.sections : [];
+    const tabs = Array.isArray(l.tabs) ? l.tabs : [];
+    if (tabs.length > 0)
+        return false;
+    return sections.length === 0;
+}
+/** Every section in a layout, whether it sits at the top level or inside a tab. */
+export function flattenSections(layout) {
+    const out = Array.isArray(layout.sections) ? [...layout.sections] : [];
+    for (const tab of Array.isArray(layout.tabs) ? layout.tabs : []) {
+        for (const s of Array.isArray(tab.sections) ? tab.sections : [])
+            out.push(s);
+    }
+    return out;
+}
+/** Turn `given_name` into `Given name` when a field carries no explicit label. */
+function humanise(key) {
+    const spaced = key.replace(/[_-]+/g, ' ').trim();
+    if (spaced.length === 0)
+        return key;
+    return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+/**
+ * The readable default. NOT a widget catalogue and not pretending to be one — it
+ * renders the SHAPE a page was given, so an app without its own catalogue shows
+ * something a person can read instead of `JSON.stringify`.
+ */
+export function renderStructuredLayout(layout) {
+    const sections = flattenSections(layout);
+    return (_jsx("div", { className: "space-y-6", children: sections.map((section, si) => {
+            const fields = Array.isArray(section.fields) ? section.fields : [];
+            return (_jsxs("section", { className: "space-y-2", children: [section.title ? (_jsx("h2", { className: "text-sm font-semibold tracking-tight text-foreground", children: section.title })) : null, section.description ? (_jsx("p", { className: "text-sm text-muted-foreground", children: section.description })) : null, fields.length > 0 ? (_jsx("dl", { className: "grid gap-x-6 gap-y-2 sm:grid-cols-2", children: fields.map((field, fi) => {
+                            const key = typeof field.fieldKey === 'string' ? field.fieldKey : `field-${fi}`;
+                            const label = typeof field.label === 'string' && field.label.length > 0
+                                ? field.label
+                                : humanise(key);
+                            return (_jsxs("div", { className: "min-w-0", children: [_jsx("dt", { className: "truncate text-xs text-muted-foreground", children: label }), _jsx("dd", { className: "truncate text-sm text-foreground", children: "\u2014" })] }, key));
+                        }) })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "No fields in this section." }))] }, section.id ?? `section-${si}`));
+        }) }));
+}
+export function CustomPageView({ page, isLoading = false, error = null, onMissing = 'silent', renderLayout, renderLoading, renderError, renderEmpty, className, }) {
+    if (isLoading) {
+        if (renderLoading)
+            return _jsx(_Fragment, { children: renderLoading() });
+        // Silence while loading is right for an embedded mount: a spinner in the
+        // middle of a page that has already drawn reads as the page being broken.
+        return onMissing === 'message' ? (_jsx("div", { className: "flex items-center justify-center py-16 text-sm text-muted-foreground", children: "Loading\u2026" })) : null;
+    }
+    if (error) {
+        if (onMissing !== 'message')
+            return null;
+        if (renderError)
+            return _jsx(_Fragment, { children: renderError(error.message) });
+        return (_jsxs("div", { className: "mx-auto max-w-lg rounded-lg border border-destructive/40 p-4", children: [_jsx("p", { className: "text-sm font-medium text-destructive", children: "This page could not be loaded." }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: error.message })] }));
+    }
+    if (!page) {
+        if (onMissing !== 'message')
+            return null;
+        return (_jsx("div", { className: "mx-auto max-w-lg rounded-lg border border-dashed p-6 text-center", children: _jsx("p", { className: "text-sm font-medium", children: "Page not found" }) }));
+    }
+    const layout = (page.layout ?? {});
+    const empty = layoutIsEmpty(layout);
+    return (_jsxs("section", { className: className ?? 'space-y-4', children: [_jsxs("header", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: page.title }), page.description ? (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: page.description })) : null] }), empty
+                ? renderEmpty
+                    ? renderEmpty()
+                    : (_jsx("div", { className: "rounded-lg border-2 border-dashed py-12 text-center text-muted-foreground", children: _jsx("p", { className: "text-sm", children: "This page has no layout configured yet." }) }))
+                : renderLayout
+                    ? renderLayout(layout, page)
+                    : renderStructuredLayout(layout)] }));
+}

package/dist/PageGridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageGridLayout.d.ts","sourceRoot":"","sources":["../src/PageGridLayout.tsx"],"names":[],"mappings":"AACA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAMxC,OAAO,KAAK,EAAe,mBAAmB,EAA4B,MAAM,YAAY,CAAC;AAghB7F,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,UAAU,EACV,SAAS,EAMT,WAAkB,EAClB,aAAsC,EACtC,QAAQ,EACR,iBAAiB,EAKjB,UAAkB,EAClB,yBAAiE,EACjE,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACnB,+BAA6E,EAC7E,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,GAC7B,EAAE,mBAAmB,qBAyzBrB"}
+{"version":3,"file":"PageGridLayout.d.ts","sourceRoot":"","sources":["../src/PageGridLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAsBxC,OAAO,KAAK,EAAe,mBAAmB,EAA4B,MAAM,YAAY,CAAC;AAmmB7F,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,UAAU,EACV,SAAS,EAMT,WAAkB,EAClB,aAAsC,EACtC,QAAQ,EACR,iBAAiB,EAKjB,UAAkB,EAClB,yBAAiE,EACjE,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACnB,+BAA6E,EAC7E,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,GAC7B,EAAE,mBAAmB,qBAs+BrB"}

package/dist/PageGridLayout.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ElementScopeProvider } from './elementScope.js';
 import { ArrowDown, ArrowUp, ChevronDown, ChevronUp, Eye, EyeOff, Layers, LayoutGrid, Lock, Plus, RotateCcw, Save, Settings2, Unlock } from 'lucide-react';
 import React, { startTransition, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { Responsive } from 'react-grid-layout';
@@ -6,6 +7,7 @@ import { gridBounds, minMaxSize, minSize } from 'react-grid-layout/core';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 import { computeAutoHeightRows } from './autoHeight.js';
+import { BORDER_STYLES, BORDER_TONES, BORDER_WIDTH_RANGE, DEFAULT_CARD_STYLE, PADDING_RANGE, RADIUS_RANGE, describeCardStyle, isDefaultCardStyle, normaliseCardStyle, toCssVars, } from './cardStyle.js';
 import { defaultPreferenceAdapter } from './preferences.js';
 import { isRelationshipWritable } from './relationshipCatalog.js';
 import { usePageGridLayout } from './usePageGridLayout.js';
@@ -139,7 +141,7 @@ function warnOnceAboutCollapsedContent(el) {
         + '(an aspect ratio, a px/rem height, or min-height), or pass autoHeight={false} on '
         + 'this card so it renders into the constrained scrollable wrapper instead.');
 }
-const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, isEditing, label, onHide, autoHeight, onAutoHeightChange, chrome = false, children: injectedChildren, className: injectedClassName, style: injectedStyle, ...rest }, ref) {
+const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, isEditing, label, pageKey, onHide, autoHeight, onAutoHeightChange, chrome = false, cardStyleVars, children: injectedChildren, className: injectedClassName, style: injectedStyle, ...rest }, ref) {
     // Auto-height measurement (blueprint amendment A1). `measureRef` wraps
     // `content` with NO height constraint of its own — its parent has
     // `overflow-hidden` + `flex-1 min-h-0` (clips *painting* to the current
@@ -149,6 +151,16 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
     // intrinsic size, independent of however many rows the item currently
     // occupies — the property that makes the auto-height loop converge to
     // a fixed point instead of oscillating (see autoHeight.ts).
+    /*
+     * The card's identity, handed down so anything inside it can be addressed.
+     *
+     * A Context.Provider renders NO DOM NODE, so this cannot affect the
+     * ResizeObserver measurement below — which matters, because a trailing
+     * margin once collapsed THROUGH the autoHeight measure wrapper and cost 32px
+     * of card overflow across 70 sites. An extra element here would have been a
+     * real risk; a provider is not one.
+     */
+    const scopedContent = (_jsx(ElementScopeProvider, { scope: { pageKey, cardKey: id, cardLabel: label, isEditing }, children: content }));
     const measureRef = useRef(null);
     const lastReportedRowsRef = useRef(null);
     const measureRafRef = useRef(null);
@@ -280,7 +292,19 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
                                 // `--radius-card` defaults to today's value (1.5rem =
                                 // rounded-3xl), so this is byte-identical until a tenant sets
                                 // one.
-                                cn('w-full rounded-[var(--radius-card,1.5rem)] transition-all flex flex-col bg-card border border-border shadow-sm dark:shadow-[var(--glow-card,none)]', 
+                                cn(
+                                // Border width, style and colour read custom properties
+                                // whose fallbacks are byte-identical to the `border
+                                // border-border` they replace, so an operator who has never
+                                // opened the card editor sees exactly the previous CSS.
+                                // The shadow deliberately keeps its ORIGINAL classes. An
+                                // elevation choice arrives as an inline `boxShadow`, which
+                                // beats the class without needing a fallback that restates
+                                // `shadow-sm`. Writing that fallback by hand was the first
+                                // attempt and it was wrong: elev-1 is CLOSE to shadow-sm
+                                // but not equal, so it would have silently restyled every
+                                // card on 305 pages the day this shipped.
+                                'w-full rounded-[var(--radius-card,1.5rem)] transition-all flex flex-col bg-card border-[length:var(--card-border-width,1px)] border-[color:var(--card-border-color,var(--border))] [border-style:var(--card-border-style,solid)] shadow-sm dark:shadow-[var(--glow-card,none)]', 
                                 // THE DOUBLED BOTTOM BORDER, AND WHY THE ARITHMETIC COULD NEVER FIX IT.
                                 //
                                 // computeAutoHeightRows uses Math.ceil to round content height up to
@@ -305,7 +329,24 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
                                 // height and the chrome should fill it.
                                 autoHeight ? 'h-fit' : 'h-full')
                             : // Chrome OFF: layout only. Identical box, no paint.
-                                cn('w-full transition-all flex flex-col', autoHeight ? 'h-fit' : 'h-full'), style: { contain: 'layout style' }, children: _jsx("div", { className: cn('min-h-0', autoHeight ? 'flex-none overflow-visible' : 'flex-1 overflow-auto'), children: autoHeight ? _jsx("div", { ref: measureRef, children: content }) : content }) })] }), injectedChildren] }));
+                                cn('w-full transition-all flex flex-col', autoHeight ? 'h-fit' : 'h-full'), 
+                        /*
+                         * `cardStyleVars` carries ONLY the properties the operator changed
+                         * (see cardStyle.ts). An untouched page spreads an empty object, so
+                         * this attribute is identical to what it was before the card editor
+                         * existed. `boxShadow` is set as a real declaration rather than a
+                         * custom property because it has to beat the `shadow-sm` class.
+                         */
+                        style: {
+                            contain: 'layout style',
+                            ...cardStyleVars,
+                            ...(cardStyleVars && '--card-shadow' in cardStyleVars
+                                ? { boxShadow: cardStyleVars['--card-shadow'] }
+                                : null),
+                            ...(cardStyleVars && '--card-padding' in cardStyleVars
+                                ? { padding: cardStyleVars['--card-padding'] }
+                                : null),
+                        }, children: _jsx("div", { className: cn('min-h-0', autoHeight ? 'flex-none overflow-visible' : 'flex-1 overflow-auto'), children: autoHeight ? (_jsx("div", { ref: measureRef, className: "flow-root", children: scopedContent })) : (scopedContent) }) })] }), 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
@@ -398,6 +439,17 @@ itemChrome = false, addEntityWidgetEventNames = DEFAULT_ADD_ENTITY_WIDGET_EVENT_
     const [extraRelationshipWidgetConfigs, setExtraRelationshipWidgetConfigs] = useState({});
     const { value: layerNames, setValue: setLayerNames } = (preferenceAdapter ?? defaultPreferenceAdapter)(`page:${pageKey}_grid_layer_names`, {});
     const { value: hiddenLayerIds, setValue: setHiddenLayerIds } = (preferenceAdapter ?? defaultPreferenceAdapter)(`page:${pageKey}_grid_hidden_layers`, {});
+    /*
+     * Card appearance, per page, persisted beside the layout.
+     *
+     * Same adapter and the same key shape as every other page preference, so it
+     * survives a reload, follows the operator across devices wherever the app
+     * backs the adapter with the database, and needs no new storage concept.
+     */
+    const { value: storedCardStyle, setValue: setStoredCardStyle } = (preferenceAdapter ?? defaultPreferenceAdapter)(`page:${pageKey}_card_style`, DEFAULT_CARD_STYLE);
+    const cardStyle = useMemo(() => normaliseCardStyle(storedCardStyle), [storedCardStyle]);
+    const cardStyleVars = useMemo(() => toCssVars(cardStyle), [cardStyle]);
+    const updateCardStyle = useCallback((patch) => setStoredCardStyle({ ...cardStyle, ...patch }), [cardStyle, setStoredCardStyle]);
     const extraWidgets = useMemo(() => {
         const rendered = {};
         if (!createEntityWidget)
@@ -755,7 +807,9 @@ itemChrome = false, addEntityWidgetEventNames = DEFAULT_ADD_ENTITY_WIDGET_EVENT_
                 // partially visible — mitigates Issue 2 (banner consuming
                 // vertical space). `bg-card/95` + `backdrop-blur` keeps text
                 // legible while showing form context behind the banner.
-                'bg-card/95 supports-[backdrop-filter]:bg-card/80 backdrop-blur border-primary'), role: "region", "aria-label": "Canvas editor controls", 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: cn('rounded-full flex items-center justify-center bg-primary/10', controlsCollapsed ? 'h-8 w-8' : 'h-10 w-10 animate-pulse'), children: _jsx(Settings2, { className: cn('text-primary', controlsCollapsed ? 'h-4 w-4' : 'h-5 w-5') }) }), _jsxs("div", { children: [_jsx("h3", { className: cn('font-semibold text-foreground', controlsCollapsed ? 'text-sm' : 'text-lg'), children: "Canvas Editor Active" }), !controlsCollapsed && (_jsx("span", { className: "text-sm text-muted-foreground", children: "Drag anywhere on a card to move it. Resize with the bottom-right handle." }))] })] }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [_jsxs("button", { type: "button", className: "inline-flex items-center gap-1 rounded-md border border-border px-2 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", "aria-expanded": !controlsCollapsed, "aria-controls": "page-grid-editor-controls-body", onClick: () => setControlsCollapsed((previous) => !previous), children: [controlsCollapsed ? _jsx(ChevronDown, { className: "h-4 w-4" }) : _jsx(ChevronUp, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only sm:not-sr-only", children: controlsCollapsed ? 'Expand' : 'Collapse' })] }), _jsxs("button", { type: "button", className: "inline-flex items-center rounded-md px-3 py-2 text-sm font-medium bg-primary text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", onClick: () => startTransition(() => setIsEditing(false)), children: [_jsx(Save, { className: "h-4 w-4 mr-2" }), "Save & Exit"] })] })] }), _jsxs("div", { id: "page-grid-editor-controls-body", hidden: controlsCollapsed, className: "flex flex-wrap items-center gap-x-4 gap-y-2 pt-2 border-t border-border max-h-[60vh] overflow-y-auto", 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: 1, 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: [1, 2, 3, 4, 6, 12].map((columnCount) => (_jsx("button", { type: "button", onClick: () => handleColumnChange(columnCount), "data-active": layoutCols === columnCount || undefined, "aria-pressed": layoutCols === columnCount, className: cn('px-2 py-0.5 rounded text-xs font-medium transition-colors border', 'bg-muted text-muted-foreground border-border', 'hover:bg-muted/80 hover:text-foreground', 'data-[active]:bg-primary data-[active]:text-primary-foreground data-[active]:border-primary', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1'), 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) => {
+                'bg-card/95 supports-[backdrop-filter]:bg-card/80 backdrop-blur border-primary'), role: "region", "aria-label": "Canvas editor controls", 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: cn('rounded-full flex items-center justify-center bg-primary/10', controlsCollapsed ? 'h-8 w-8' : 'h-10 w-10 animate-pulse'), children: _jsx(Settings2, { className: cn('text-primary', controlsCollapsed ? 'h-4 w-4' : 'h-5 w-5') }) }), _jsxs("div", { children: [_jsx("h3", { className: cn('font-semibold text-foreground', controlsCollapsed ? 'text-sm' : 'text-lg'), children: "Canvas Editor Active" }), !controlsCollapsed && (_jsx("span", { className: "text-sm text-muted-foreground", children: "Drag anywhere on a card to move it. Resize with the bottom-right handle." }))] })] }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [_jsxs("button", { type: "button", className: "inline-flex items-center gap-1 rounded-md border border-border px-2 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", "aria-expanded": !controlsCollapsed, "aria-controls": "page-grid-editor-controls-body", "aria-label": controlsCollapsed ? 'Expand controls: columns, cards and layers' : 'Collapse controls', onClick: () => setControlsCollapsed((previous) => !previous), children: [controlsCollapsed ? _jsx(ChevronDown, { className: "h-4 w-4" }) : _jsx(ChevronUp, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only sm:not-sr-only", children: controlsCollapsed ? 'Columns, cards & layers' : 'Collapse' })] }), _jsxs("button", { type: "button", className: "inline-flex items-center rounded-md px-3 py-2 text-sm font-medium bg-primary text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", onClick: () => startTransition(() => setIsEditing(false)), children: [_jsx(Save, { className: "h-4 w-4 mr-2" }), "Save & Exit"] })] })] }), _jsxs("div", { id: "page-grid-editor-controls-body", hidden: controlsCollapsed, className: "flex flex-wrap items-center gap-x-4 gap-y-2 pt-2 border-t border-border max-h-[60vh] overflow-y-auto", 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: 1, 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: [1, 2, 3, 4, 6, 12].map((columnCount) => (_jsx("button", { type: "button", onClick: () => handleColumnChange(columnCount), "data-active": layoutCols === columnCount || undefined, "aria-pressed": layoutCols === columnCount, className: cn('px-2 py-0.5 rounded text-xs font-medium transition-colors border', 'bg-muted text-muted-foreground border-border', 'hover:bg-muted/80 hover:text-foreground', 'data-[active]:bg-primary data-[active]:text-primary-foreground data-[active]:border-primary', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1'), children: columnCount }, columnCount))) }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 w-full pt-2 border-t border-border", role: "group", "aria-label": "Card appearance", children: [_jsx("span", { className: "text-sm shrink-0 font-medium text-foreground", children: "Card:" }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Corners" }), _jsx("input", { type: "range", min: RADIUS_RANGE.min, max: RADIUS_RANGE.max, value: cardStyle.radius, onChange: (event) => updateCardStyle({ radius: Number(event.target.value) }), className: "w-20 cursor-pointer accent-primary", "aria-label": "Card corner radius in pixels" }), _jsx("span", { className: "text-sm font-mono w-8 text-right tabular-nums", children: cardStyle.radius })] }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Border" }), _jsx("input", { type: "range", min: BORDER_WIDTH_RANGE.min, max: BORDER_WIDTH_RANGE.max, value: cardStyle.borderWidth, onChange: (event) => updateCardStyle({ borderWidth: Number(event.target.value) }), className: "w-16 cursor-pointer accent-primary", "aria-label": "Card border width in pixels" }), _jsx("span", { className: "text-sm font-mono w-6 text-right tabular-nums", children: cardStyle.borderWidth })] }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "sr-only", children: "Border colour" }), _jsx("select", { value: cardStyle.borderTone, onChange: (event) => updateCardStyle({ borderTone: event.target.value }), className: "rounded-md border border-border bg-background px-2 py-1 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": "Card border colour", children: BORDER_TONES.map((tone) => (_jsx("option", { value: tone, children: tone === 'border' ? 'default colour' : tone }, tone))) })] }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "sr-only", children: "Border style" }), _jsx("select", { value: cardStyle.borderStyle, onChange: (event) => updateCardStyle({ borderStyle: event.target.value }), className: "rounded-md border border-border bg-background px-2 py-1 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": "Card border style", children: BORDER_STYLES.map((style) => (_jsx("option", { value: style, children: style }, style))) })] }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "sr-only", children: "Card shadow" }), _jsxs("select", { value: cardStyle.elevation === null ? 'default' : String(cardStyle.elevation), onChange: (event) => updateCardStyle({
+                                                    elevation: event.target.value === 'default' ? null : Number(event.target.value),
+                                                }), className: "rounded-md border border-border bg-background px-2 py-1 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": "Card shadow depth", children: [_jsx("option", { value: "default", children: "default shadow" }), [0, 1, 2, 3, 4].map((level) => (_jsx("option", { value: level, children: level === 0 ? 'no shadow' : `shadow ${level}` }, level)))] })] }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Padding" }), _jsx("input", { type: "range", min: PADDING_RANGE.min, max: PADDING_RANGE.max, value: cardStyle.padding ?? 0, onChange: (event) => updateCardStyle({ padding: Number(event.target.value) }), className: "w-16 cursor-pointer accent-primary", "aria-label": "Card inner padding in pixels" }), _jsx("span", { className: "text-sm font-mono w-8 text-right tabular-nums", children: cardStyle.padding === null ? '\u2014' : cardStyle.padding })] }), _jsxs("button", { type: "button", onClick: () => setStoredCardStyle({ ...DEFAULT_CARD_STYLE }), disabled: isDefaultCardStyle(cardStyle), className: "inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50 disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx(RotateCcw, { className: "h-3.5 w-3.5" }), "Reset cards"] }), _jsx("output", { className: "text-sm text-muted-foreground", "aria-live": "polite", children: describeCardStyle(cardStyle) })] }), 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: () => showLayer(key, meta?.defaultSize), className: cn('flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium border transition-colors', 'bg-muted text-muted-foreground border-border', 'hover:bg-muted/80 hover:text-foreground hover:border-primary/60', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1'), children: [_jsx(Plus, { className: "h-3 w-3" }), Icon && _jsx(Icon, { className: "h-3 w-3" }), layerNames[key] || meta?.label || key] }, key));
@@ -789,6 +843,6 @@ itemChrome = false, addEntityWidgetEventNames = DEFAULT_ADD_ENTITY_WIDGET_EVENT_
                             const content = allWidgets[layoutItem.i];
                             if (content === undefined || content === null)
                                 return null;
-                            return (_jsx(GridItem, { id: layoutItem.i, content: content, isEditing: isEditing, label: layerNames[layoutItem.i] || widgetMeta?.[layoutItem.i]?.label || layoutItem.i, onHide: hideLayer, autoHeight: layoutItem.autoHeight, onAutoHeightChange: handleAutoHeightChange, chrome: layoutItem.chrome ?? itemChrome }, layoutItem.i));
+                            return (_jsx(GridItem, { id: layoutItem.i, content: content, isEditing: isEditing, label: layerNames[layoutItem.i] || widgetMeta?.[layoutItem.i]?.label || layoutItem.i, pageKey: pageKey, onHide: hideLayer, autoHeight: layoutItem.autoHeight, onAutoHeightChange: handleAutoHeightChange, chrome: layoutItem.chrome ?? itemChrome, cardStyleVars: cardStyleVars }, layoutItem.i));
                         }) }) }) })] }));
 }

package/dist/cardStyle.d.ts

@@ -0,0 +1,68 @@
+/** Theme tokens a border may reference. Closed set — never a raw colour. */
+export declare const BORDER_TONES: readonly ["border", "primary", "accent", "muted", "destructive", "transparent"];
+export type BorderTone = (typeof BORDER_TONES)[number];
+export declare const BORDER_STYLES: readonly ["solid", "dashed", "dotted", "none"];
+export type BorderStyle = (typeof BORDER_STYLES)[number];
+/** `--shadow-elev-0..4`, shipped by @bsuite/theme >= 0.11.0. */
+export type Elevation = 0 | 1 | 2 | 3 | 4;
+export interface CardStyle {
+    /** Corner radius in px. */
+    radius: number;
+    /** Border thickness in px. */
+    borderWidth: number;
+    /** Theme token the border colour reads from. */
+    borderTone: BorderTone;
+    borderStyle: BorderStyle;
+    /**
+     * `null` means "leave the class-based shadow alone" — which is what every
+     * card did before this file. A number selects `--shadow-elev-N`.
+     */
+    elevation: Elevation | null;
+    /** Inner padding in px. `null` leaves the card's own padding untouched. */
+    padding: number | null;
+}
+/**
+ * The values the chrome element already rendered.
+ *
+ * `radius: 24` is `1.5rem`, the existing `--radius-card` fallback.
+ * `borderWidth: 1` + `borderTone: 'border'` is the existing `border
+ * border-border`. `elevation: null` preserves `shadow-sm` and the dark-mode
+ * `--glow-card` rule rather than replacing them with an elevation token that
+ * is close but not equal.
+ */
+export declare const DEFAULT_CARD_STYLE: CardStyle;
+export declare const RADIUS_RANGE: {
+    readonly min: 0;
+    readonly max: 48;
+};
+export declare const BORDER_WIDTH_RANGE: {
+    readonly min: 0;
+    readonly max: 8;
+};
+export declare const PADDING_RANGE: {
+    readonly min: 0;
+    readonly max: 48;
+};
+/**
+ * Coerce anything read back out of a preference store into a valid style.
+ *
+ * Preferences are user-writable JSON that survives releases, so this has to
+ * treat its input as untrusted: a stored `borderTone` naming a token that no
+ * longer exists must not paint an invalid border, it must fall back. Every
+ * field is validated independently so one bad key cannot discard the rest of
+ * the operator's choices.
+ */
+export declare function normaliseCardStyle(input: unknown): CardStyle;
+export declare function isDefaultCardStyle(style: CardStyle): boolean;
+/** The CSS custom properties a non-default style needs. Empty when default. */
+export declare function toCssVars(style: CardStyle): React.CSSProperties;
+/**
+ * A human sentence describing the current card, for the editor's live readout.
+ *
+ * The operator is adjusting something they can see, so the readout names the
+ * change in their words rather than echoing CSS: "2px dashed accent border,
+ * 8px corners". D8.3 -- a control whose effect you cannot predict from the
+ * screen is not finished.
+ */
+export declare function describeCardStyle(style: CardStyle): string;
+//# sourceMappingURL=cardStyle.d.ts.map

package/dist/cardStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardStyle.d.ts","sourceRoot":"","sources":["../src/cardStyle.ts"],"names":[],"mappings":"AA0BA,4EAA4E;AAC5E,eAAO,MAAM,YAAY,iFAOf,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvD,eAAO,MAAM,aAAa,gDAAiD,CAAC;AAC5E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,gEAAgE;AAChE,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE1C,MAAM,WAAW,SAAS;IACxB,2BAA2B;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB;;;OAGG;IACH,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5B,2EAA2E;IAC3E,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,EAAE,SAOhC,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAA+B,CAAC;AACzD,eAAO,MAAM,kBAAkB;;;CAA8B,CAAC;AAC9D,eAAO,MAAM,aAAa;;;CAA+B,CAAC;AAO1D;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,CA8B5D;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,CAS5D;AAED,+EAA+E;AAC/E,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,aAAa,CAuB/D;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,CAc1D"}

package/dist/cardStyle.js

@@ -0,0 +1,155 @@
+/*
+ * cardStyle.ts — the card's appearance, as something the operator edits.
+ *
+ * WHY THIS EXISTS. Card chrome — the border, the corner radius, the shadow,
+ * the padding — was a string of Tailwind classes compiled into
+ * `PageGridLayout`. Changing any of it meant asking an agent to edit the
+ * package, publish it, and roll it through five apps. The operator has asked
+ * for the border to be corrected repeatedly, and each ask cost a full release
+ * cycle to answer. The remedy is not another correct border; it is to stop
+ * being the only one who can set it.
+ *
+ * THE DEFAULT IS "DON'T EMIT ANYTHING". `toCssVars` returns only the
+ * properties that DIFFER from `DEFAULT_CARD_STYLE`, and the chrome element
+ * falls back to exactly the values it used before this file existed. A page
+ * whose operator has never opened the editor therefore renders byte-identical
+ * CSS — this is a capability, not a restyle, and it must not show up as a
+ * visual diff on 305 pages the day it ships.
+ *
+ * TOKENS, NOT COLOURS. `borderTone` names a theme token, never a literal.
+ * The estate bans hex/rgb in D2C apps (`bsuite/no-hardcoded-colours`) and the
+ * whole point of `--border` is that a tenant can rebrand it. An editor that
+ * wrote a raw hex value into a preference would be a white-label regression wearing
+ * a feature's clothes, so the palette below is a closed set of token names and
+ * the type makes an arbitrary string unrepresentable.
+ */
+/** Theme tokens a border may reference. Closed set — never a raw colour. */
+export const BORDER_TONES = [
+    'border',
+    'primary',
+    'accent',
+    'muted',
+    'destructive',
+    'transparent',
+];
+export const BORDER_STYLES = ['solid', 'dashed', 'dotted', 'none'];
+/**
+ * The values the chrome element already rendered.
+ *
+ * `radius: 24` is `1.5rem`, the existing `--radius-card` fallback.
+ * `borderWidth: 1` + `borderTone: 'border'` is the existing `border
+ * border-border`. `elevation: null` preserves `shadow-sm` and the dark-mode
+ * `--glow-card` rule rather than replacing them with an elevation token that
+ * is close but not equal.
+ */
+export const DEFAULT_CARD_STYLE = {
+    radius: 24,
+    borderWidth: 1,
+    borderTone: 'border',
+    borderStyle: 'solid',
+    elevation: null,
+    padding: null,
+};
+export const RADIUS_RANGE = { min: 0, max: 48 };
+export const BORDER_WIDTH_RANGE = { min: 0, max: 8 };
+export const PADDING_RANGE = { min: 0, max: 48 };
+function clamp(value, min, max) {
+    if (!Number.isFinite(value))
+        return min;
+    return Math.min(max, Math.max(min, Math.round(value)));
+}
+/**
+ * Coerce anything read back out of a preference store into a valid style.
+ *
+ * Preferences are user-writable JSON that survives releases, so this has to
+ * treat its input as untrusted: a stored `borderTone` naming a token that no
+ * longer exists must not paint an invalid border, it must fall back. Every
+ * field is validated independently so one bad key cannot discard the rest of
+ * the operator's choices.
+ */
+export function normaliseCardStyle(input) {
+    if (input === null || typeof input !== 'object')
+        return { ...DEFAULT_CARD_STYLE };
+    const raw = input;
+    const tone = BORDER_TONES.includes(raw.borderTone)
+        ? raw.borderTone
+        : DEFAULT_CARD_STYLE.borderTone;
+    const style = BORDER_STYLES.includes(raw.borderStyle)
+        ? raw.borderStyle
+        : DEFAULT_CARD_STYLE.borderStyle;
+    const elevation = typeof raw.elevation === 'number' && raw.elevation >= 0 && raw.elevation <= 4
+        ? Math.round(raw.elevation)
+        : null;
+    return {
+        radius: typeof raw.radius === 'number'
+            ? clamp(raw.radius, RADIUS_RANGE.min, RADIUS_RANGE.max)
+            : DEFAULT_CARD_STYLE.radius,
+        borderWidth: typeof raw.borderWidth === 'number'
+            ? clamp(raw.borderWidth, BORDER_WIDTH_RANGE.min, BORDER_WIDTH_RANGE.max)
+            : DEFAULT_CARD_STYLE.borderWidth,
+        borderTone: tone,
+        borderStyle: style,
+        elevation,
+        padding: typeof raw.padding === 'number'
+            ? clamp(raw.padding, PADDING_RANGE.min, PADDING_RANGE.max)
+            : null,
+    };
+}
+export function isDefaultCardStyle(style) {
+    return (style.radius === DEFAULT_CARD_STYLE.radius &&
+        style.borderWidth === DEFAULT_CARD_STYLE.borderWidth &&
+        style.borderTone === DEFAULT_CARD_STYLE.borderTone &&
+        style.borderStyle === DEFAULT_CARD_STYLE.borderStyle &&
+        style.elevation === DEFAULT_CARD_STYLE.elevation &&
+        style.padding === DEFAULT_CARD_STYLE.padding);
+}
+/** The CSS custom properties a non-default style needs. Empty when default. */
+export function toCssVars(style) {
+    const vars = {};
+    if (style.radius !== DEFAULT_CARD_STYLE.radius) {
+        vars['--radius-card'] = `${style.radius}px`;
+    }
+    if (style.borderWidth !== DEFAULT_CARD_STYLE.borderWidth) {
+        vars['--card-border-width'] = `${style.borderWidth}px`;
+    }
+    if (style.borderTone !== DEFAULT_CARD_STYLE.borderTone) {
+        // `transparent` is a CSS-wide keyword, not a token, so it is not wrapped.
+        vars['--card-border-color'] =
+            style.borderTone === 'transparent' ? 'transparent' : `var(--${style.borderTone})`;
+    }
+    if (style.borderStyle !== DEFAULT_CARD_STYLE.borderStyle) {
+        vars['--card-border-style'] = style.borderStyle;
+    }
+    if (style.elevation !== null) {
+        vars['--card-shadow'] = `var(--shadow-elev-${style.elevation})`;
+    }
+    if (style.padding !== null) {
+        vars['--card-padding'] = `${style.padding}px`;
+    }
+    return vars;
+}
+/**
+ * A human sentence describing the current card, for the editor's live readout.
+ *
+ * The operator is adjusting something they can see, so the readout names the
+ * change in their words rather than echoing CSS: "2px dashed accent border,
+ * 8px corners". D8.3 -- a control whose effect you cannot predict from the
+ * screen is not finished.
+ */
+export function describeCardStyle(style) {
+    const parts = [];
+    if (style.borderStyle === 'none' || style.borderWidth === 0) {
+        parts.push('no border');
+    }
+    else {
+        const tone = style.borderTone === 'border' ? 'default' : style.borderTone;
+        parts.push(`${style.borderWidth}px ${style.borderStyle} ${tone} border`);
+    }
+    parts.push(style.radius === 0 ? 'square corners' : `${style.radius}px corners`);
+    if (style.elevation !== null) {
+        parts.push(style.elevation === 0 ? 'no shadow' : `elevation ${style.elevation}`);
+    }
+    if (style.padding !== null)
+        parts.push(`${style.padding}px padding`);
+    return parts.join(', ');
+}

package/dist/cardSurfaces.stories.d.ts

@@ -59,4 +59,10 @@ export declare const WidthLadder: Story;
  * which is why "is the class present" is not a check.
  */
 export declare const CardHeadingGradient: Story;
+export declare const CardStyleDefault: Story;
+export declare const CardStyleThickBorder: Story;
+export declare const CardStyleDashedAccent: Story;
+export declare const CardStyleSquare: Story;
+export declare const CardStyleBorderless: Story;
+export declare const CardStyleElevationLadder: Story;
 //# sourceMappingURL=cardSurfaces.stories.d.ts.map

package/dist/cardSurfaces.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cardSurfaces.stories.d.ts","sourceRoot":"","sources":["../src/cardSurfaces.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC;;;;;;;;;;GAUG;AACH;;;;;;;;GAQG;AACH,KAAK,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,SAAS,CAAA;CAAE,CAAA;;;;;;;AAEvD,wBAGC;AA0BD;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAYnC,CAAA;AAED,kEAAkE;AAClE,eAAO,MAAM,qBAAqB,EAAE,KAWnC,CAAA;AAED,+EAA+E;AAC/E,eAAO,MAAM,mBAAmB,EAAE,KAWjC,CAAA;AAED,mFAAmF;AACnF,eAAO,MAAM,iBAAiB,EAAE,KAW/B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAoBjC,CAAA"}
+{"version":3,"file":"cardSurfaces.stories.d.ts","sourceRoot":"","sources":["../src/cardSurfaces.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC;;;;;;;;;;GAUG;AACH;;;;;;;;GAQG;AACH,KAAK,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,SAAS,CAAA;CAAE,CAAA;;;;;;;AAEvD,wBAGC;AA0BD;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAYnC,CAAA;AAED,kEAAkE;AAClE,eAAO,MAAM,qBAAqB,EAAE,KAWnC,CAAA;AAED,+EAA+E;AAC/E,eAAO,MAAM,mBAAmB,EAAE,KAWjC,CAAA;AAED,mFAAmF;AACnF,eAAO,MAAM,iBAAiB,EAAE,KAW/B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAoBjC,CAAA;AA2CD,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAGlC,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAQnC,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAG7B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAQjC,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KAatC,CAAA"}

package/dist/cardSurfaces.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PageGridLayout } from './PageGridLayout.js';
+import { DEFAULT_CARD_STYLE, describeCardStyle, toCssVars } from './cardStyle.js';
 export default {
     title: 'Page Builder/Card surfaces',
     parameters: { layout: 'fullscreen' },
@@ -74,3 +75,52 @@ export const CardHeadingGradient = {
     name: 'Card headings — with and without the gradient',
     render: () => (_jsxs("div", { className: "grid gap-8 p-8 md:grid-cols-2", children: [_jsxs("div", { className: "rounded-[var(--radius-card,1.5rem)] border border-border bg-card p-6", children: [_jsx("h3", { className: "mb-2 text-lg font-semibold text-(--role-text-heading)", children: "Quick Actions \u2014 flat (today, 0 of 310)" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "No gradient." })] }), _jsxs("div", { className: "rounded-[var(--radius-card,1.5rem)] border border-border bg-card p-6", children: [_jsx("h3", { className: "text-gradient-accent mb-2 text-lg font-semibold text-(--role-text-heading)", children: "Quick Actions \u2014 gradient (G2 target)" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "`text-gradient-accent` over the solid heading token." })] })] })),
 };
+/* ------------------------------------------------------------------ *
+ * OPERATOR-EDITABLE CARD APPEARANCE
+ *
+ * The border, corners, shadow and padding are set by the operator in the
+ * canvas editor and persisted per page (see cardStyle.ts). These stories are
+ * the reference for what each setting actually paints, so a change to the
+ * chrome can be diffed against a picture rather than argued about.
+ *
+ * `toCssVars` returns ONLY the properties that differ from the default, so
+ * `Default` below emits no custom properties at all — it is the control, and
+ * it must look exactly like `BareContentOptsIn`. If those two ever diverge,
+ * the "costs nothing until you touch it" guarantee has been broken.
+ * ------------------------------------------------------------------ */
+/** Renders one slot with chrome on, under a given operator card style. */
+function StyledSurface({ style, note }) {
+    const resolved = { ...DEFAULT_CARD_STYLE, ...style };
+    const vars = toCssVars(resolved);
+    return (_jsxs("div", { className: "p-8", style: {
+            ...vars,
+            // The editor applies elevation and padding as real declarations,
+            // because each has to beat a class. Mirrored here so the story shows
+            // what the page shows.
+            ...('--card-shadow' in vars ? { ['--story-shadow']: vars['--card-shadow'] } : null),
+        }, children: [_jsx("p", { className: "mb-3 text-sm text-muted-foreground", children: note }), _jsx("p", { className: "mb-3 text-sm font-medium text-foreground", children: describeCardStyle(resolved) }), _jsx(PageGridLayout, { pageKey: `card-style-${note.replace(/[^a-z0-9]+/gi, '-').toLowerCase()}`, defaultLayouts: oneSlot, itemChrome: true, widgets: { a: _jsx(BareContent, { title: "Operator-styled card" }) } })] }));
+}
+export const CardStyleDefault = {
+    name: 'Card style — default (emits no CSS)',
+    render: () => (_jsx(StyledSurface, { style: {}, note: "The control. No custom properties are emitted at all." })),
+};
+export const CardStyleThickBorder = {
+    name: 'Card style — 4px border',
+    render: () => _jsx(StyledSurface, { style: { borderWidth: 4 }, note: "Border width is a slider, 0-8px." }),
+};
+export const CardStyleDashedAccent = {
+    name: 'Card style — dashed accent border',
+    render: () => (_jsx(StyledSurface, { style: { borderWidth: 2, borderStyle: 'dashed', borderTone: 'accent' }, note: "Colour comes from a THEME TOKEN, never a literal, so white-labelling still applies." })),
+};
+export const CardStyleSquare = {
+    name: 'Card style — square corners',
+    render: () => _jsx(StyledSurface, { style: { radius: 0 }, note: "Corner radius is a slider, 0-48px." }),
+};
+export const CardStyleBorderless = {
+    name: 'Card style — no border',
+    render: () => (_jsx(StyledSurface, { style: { borderStyle: 'none' }, note: "A borderless card still keeps its background and radius." })),
+};
+export const CardStyleElevationLadder = {
+    name: 'Card style — elevation 0 to 4',
+    render: () => (_jsx("div", { className: "space-y-2", children: [0, 1, 2, 3, 4].map((level) => (_jsx(StyledSurface, { style: { elevation: level }, note: `--shadow-elev-${level}, from @bsuite/theme.` }, level))) })),
+};

package/dist/elementScope.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+/**
+ * EVERY ELEMENT NEEDS A NAME BEFORE ANYTHING CAN STYLE IT.
+ *
+ * The operator's complaint: "I'm sick of seeing buttons that go the full width of
+ * cards and not being able to modify it visually." Measured 2026-09-02: 270
+ * full-width buttons, 236 of them on pages he can already rearrange — so the
+ * mouse obeys him on a card's outside edge and ignores him on its inside.
+ *
+ * The blocker is not styling. It is IDENTITY. Nothing in the estate has ever
+ * stored a per-element property (except `colSpan` on a form field), because
+ * there has been no way to say WHICH element a stored value belongs to. A card
+ * has a `cardKey`; the button inside it has nothing.
+ *
+ * This module is that identity, and nothing else. No stored styles, no visual
+ * change at rest — a deliberate first step, so the thing everything else hangs
+ * off can be reviewed on its own.
+ *
+ * THE HOT PATH IS THE DESIGN CONSTRAINT. `Button` renders 2,097 times in crm7,
+ * and on the 34 EnhancedDataTable pages that is once per row per action column.
+ * So:
+ *   - the context default is `null`, and a `useContext` returning null is about
+ *     the cheapest hook there is;
+ *   - NOTHING is computed unless `isEditing` is true. A consumer's whole cost
+ *     outside edit mode is one null check.
+ * Building the reference string on every render would have been a real
+ * regression on the tables, which is why `elementRef` is a function the consumer
+ * calls rather than a value this provider computes.
+ */
+export interface ElementScope {
+    /** The page this element lives on — `PageGridLayout`'s own `pageKey`. */
+    pageKey: string;
+    /** The card it lives in — `GridItem`'s `id`. */
+    cardKey: string;
+    /** What the card calls itself, for a sentence a person can read. */
+    cardLabel?: string;
+    /**
+     * Whether the page editor is open. Gates every cost above; a consumer that
+     * reads this and returns early pays one boolean.
+     */
+    isEditing: boolean;
+}
+/**
+ * Provided by `GridItem`, which is the only component that knows both the page
+ * and the card. Consumers never construct one.
+ */
+export declare function ElementScopeProvider({ scope, children, }: {
+    scope: ElementScope;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * The scope this element sits in, or `null` outside a grid page.
+ *
+ * `null` is a normal answer, not an error: most of the estate renders outside a
+ * `PageGridLayout`, and an element with no scope simply cannot be addressed yet.
+ */
+export declare function useElementScope(): ElementScope | null;
+/**
+ * A stable address for one element.
+ *
+ * SHAPE: `page:<pageKey>|card:<cardKey>|el:<name>`. Chosen so it is greppable,
+ * sorts by page then card, and survives being read by a human in a database row.
+ *
+ * `name` is the element's own stable identifier — NOT its visible label. A label
+ * is a moving target: rename "Add contact" to "New contact" and every stored
+ * override keyed on it orphans silently. Callers pass something that does not
+ * change when the copy does.
+ */
+export declare function elementRef(scope: ElementScope, name: string): string;
+/**
+ * The same address as a sentence, for a tooltip or a property panel.
+ *
+ * Uses the card's LABEL rather than its key, because "the Contacts card" is what
+ * a person sees and `card3` is not.
+ */
+export declare function describeElement(scope: ElementScope, name: string): string;
+/** Parses an address back into its parts, or `null` if it is not one. */
+export declare function parseElementRef(ref: string): {
+    pageKey: string;
+    cardKey: string;
+    name: string;
+} | null;
+//# sourceMappingURL=elementScope.d.ts.map

package/dist/elementScope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementScope.d.ts","sourceRoot":"","sources":["../src/elementScope.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,MAAM,WAAW,YAAY;IAC3B,yEAAyE;IACzE,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,OAAO,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAID;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAapB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,IAAI,YAAY,GAAG,IAAI,CAErD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAEpE;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAGzE;AAED,yEAAyE;AACzE,wBAAgB,eAAe,CAC7B,GAAG,EAAE,MAAM,GACV;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAU3D"}

package/dist/elementScope.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+const ElementScopeContext = React.createContext(null);
+/**
+ * Provided by `GridItem`, which is the only component that knows both the page
+ * and the card. Consumers never construct one.
+ */
+export function ElementScopeProvider({ scope, children, }) {
+    /* Destructured FIRST, then memoised on the primitives.
+       Memoising on `scope` itself would hand the subtree a new context value on
+       every GridItem render and re-render every button in the card for nothing;
+       memoising on `scope.pageKey` and friends would need an exhaustive-deps
+       suppression, and the estate ratchets those. Pulling the fields out gets the
+       correct behaviour with no suppression at all — the lint rule was right. */
+    const { pageKey, cardKey, cardLabel, isEditing } = scope;
+    const value = React.useMemo(() => ({ pageKey, cardKey, cardLabel, isEditing }), [pageKey, cardKey, cardLabel, isEditing]);
+    return _jsx(ElementScopeContext.Provider, { value: value, children: children });
+}
+/**
+ * The scope this element sits in, or `null` outside a grid page.
+ *
+ * `null` is a normal answer, not an error: most of the estate renders outside a
+ * `PageGridLayout`, and an element with no scope simply cannot be addressed yet.
+ */
+export function useElementScope() {
+    return React.useContext(ElementScopeContext);
+}
+/**
+ * A stable address for one element.
+ *
+ * SHAPE: `page:<pageKey>|card:<cardKey>|el:<name>`. Chosen so it is greppable,
+ * sorts by page then card, and survives being read by a human in a database row.
+ *
+ * `name` is the element's own stable identifier — NOT its visible label. A label
+ * is a moving target: rename "Add contact" to "New contact" and every stored
+ * override keyed on it orphans silently. Callers pass something that does not
+ * change when the copy does.
+ */
+export function elementRef(scope, name) {
+    return `page:${scope.pageKey}|card:${scope.cardKey}|el:${name}`;
+}
+/**
+ * The same address as a sentence, for a tooltip or a property panel.
+ *
+ * Uses the card's LABEL rather than its key, because "the Contacts card" is what
+ * a person sees and `card3` is not.
+ */
+export function describeElement(scope, name) {
+    const where = scope.cardLabel?.trim() ? `the ${scope.cardLabel.trim()} card` : 'this card';
+    return `${name}, in ${where}`;
+}
+/** Parses an address back into its parts, or `null` if it is not one. */
+export function parseElementRef(ref) {
+    const parts = ref.split('|');
+    if (parts.length !== 3)
+        return null;
+    const [p, c, e] = parts;
+    if (!p.startsWith('page:') || !c.startsWith('card:') || !e.startsWith('el:'))
+        return null;
+    const pageKey = p.slice('page:'.length);
+    const cardKey = c.slice('card:'.length);
+    const name = e.slice('el:'.length);
+    if (!pageKey || !cardKey || !name)
+        return null;
+    return { pageKey, cardKey, name };
+}

package/dist/index.d.ts

@@ -21,4 +21,8 @@ export { RelationshipField } from './RelationshipField.js';
 export type { RelationshipFieldProps } from './RelationshipField.js';
 export { isRelationshipWritable } from './relationshipCatalog.js';
 export type { EntityWidgetDetail, EntityWidgetFactoryOptions, GridLayoutItem, GridLayouts, PageGridLayoutProps, PageGridPreferenceAdapter, PageGridPreferenceFactory, RelationshipCatalog, RelationshipCatalogEntry, RelationshipFieldOption, RelationshipWidgetDetail, RelationshipWidgetFactoryOptions, UsePageGridLayoutOptions, UsePageGridLayoutResult, WidgetMeta, } from './types.js';
+export { BORDER_TONES, BORDER_STYLES, DEFAULT_CARD_STYLE, RADIUS_RANGE, BORDER_WIDTH_RANGE, PADDING_RANGE, normaliseCardStyle, isDefaultCardStyle, toCssVars as cardStyleToCssVars, describeCardStyle, } from './cardStyle.js';
+export type { CardStyle, BorderTone, BorderStyle, Elevation } from './cardStyle.js';
+export { ElementScopeProvider, useElementScope, elementRef, describeElement, parseElementRef, } from './elementScope.js';
+export type { ElementScope } from './elementScope.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +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,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EACL,qBAAqB,EACrB,yBAAyB,EACzB,kBAAkB,EAClB,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACpE,YAAY,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EACL,iBAAiB,EACjB,0BAA0B,EAC1B,uBAAuB,GACxB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EAAE,4BAA4B,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EACL,2BAA2B,EAC3B,yBAAyB,EACzB,8BAA8B,EAC9B,yBAAyB,GAC1B,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,6BAA6B,EAC7B,oBAAoB,GACrB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAChF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,EACV,kBAAkB,EAClB,0BAA0B,EAC1B,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,yBAAyB,EACzB,yBAAyB,EACzB,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACvB,wBAAwB,EACxB,gCAAgC,EAChC,wBAAwB,EACxB,uBAAuB,EACvB,UAAU,GACX,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAwB7C,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EACL,qBAAqB,EACrB,yBAAyB,EACzB,kBAAkB,EAClB,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACpE,YAAY,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EACL,iBAAiB,EACjB,0BAA0B,EAC1B,uBAAuB,GACxB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EAAE,4BAA4B,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EACL,2BAA2B,EAC3B,yBAAyB,EACzB,8BAA8B,EAC9B,yBAAyB,GAC1B,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,6BAA6B,EAC7B,oBAAoB,GACrB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAChF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,EACV,kBAAkB,EAClB,0BAA0B,EAC1B,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,yBAAyB,EACzB,yBAAyB,EACzB,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACvB,wBAAwB,EACxB,gCAAgC,EAChC,wBAAwB,EACxB,uBAAuB,EACvB,UAAU,GACX,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,SAAS,IAAI,kBAAkB,EAC/B,iBAAiB,GAClB,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAQpF,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,UAAU,EACV,eAAe,EACf,eAAe,GAChB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -11,3 +11,11 @@ export { buildResponsiveLayouts, RESPONSIVE_BREAKPOINTS, } from './buildResponsi
 export { useLocalPreference, defaultPreferenceAdapter } from './preferences.js';
 export { RelationshipField } from './RelationshipField.js';
 export { isRelationshipWritable } from './relationshipCatalog.js';
+export { BORDER_TONES, BORDER_STYLES, DEFAULT_CARD_STYLE, RADIUS_RANGE, BORDER_WIDTH_RANGE, PADDING_RANGE, normaliseCardStyle, isDefaultCardStyle, toCssVars as cardStyleToCssVars, describeCardStyle, } from './cardStyle.js';
+/*
+ * ELEMENT IDENTITY. Exported so a consumer can address one control inside a
+ * card — the prerequisite for storing any per-element property, and the reason
+ * none has ever been storable: a card has a key, the button inside it had
+ * nothing. No styling here, only the name.
+ */
+export { ElementScopeProvider, useElementScope, elementRef, describeElement, parseElementRef, } from './elementScope.js';

package/dist/scanner/cardHeadingScanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cardHeadingScanner.d.ts","sourceRoot":"","sources":["../../src/scanner/cardHeadingScanner.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAMH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,gBAAgB,EAAE,MAAM,CAAC;IACzB,8CAA8C;IAC9C,WAAW,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;OAUG;IACH,qBAAqB,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,iEAAiE;IACjE,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,iDAAiD;IACjD,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,qDAAqD;IACrD,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAkDD,UAAU,MAAM;IACd,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAqDhD;AAsCD,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,wBAAwB,GAAG,qBAAqB,CA+FxF"}
+{"version":3,"file":"cardHeadingScanner.d.ts","sourceRoot":"","sources":["../../src/scanner/cardHeadingScanner.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAMH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,gBAAgB,EAAE,MAAM,CAAC;IACzB,8CAA8C;IAC9C,WAAW,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;OAUG;IACH,qBAAqB,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,iEAAiE;IACjE,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,iDAAiD;IACjD,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,qDAAqD;IACrD,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAsDD,UAAU,MAAM;IACd,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAqDhD;AAsCD,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,wBAAwB,GAAG,qBAAqB,CA+FxF"}

package/dist/scanner/cardHeadingScanner.js

@@ -60,12 +60,16 @@ const DEFAULT_GRADIENT_CLASSES = ['text-gradient-accent', 'gradient-text'];
  * the full hazard set an order of magnitude higher. The loose number was the
  * kind that makes a codemod look safe.
  */
+// theme-audit-ok: this is the scanner's VOCABULARY — class names it looks FOR in
+// other people's markup, not classes applied here. `flex-grow` is deliberately
+// listed alongside `grow` because the scanner must recognise both spellings in
+// source it did not write.
 const WIDTH_DEPENDENT = [
     'truncate',
     'flex-1',
     'w-full',
     'grow',
-    'flex-grow',
+    'flex-grow', // theme-audit-ok: vocabulary the scanner looks FOR, never applied
     'text-center',
     'mx-auto',
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/page-builder",
-  "version": "2.4.1",
+  "version": "2.6.0",
   "description": "Shared BSuite responsive page-builder grid and layout persistence primitives",
   "type": "module",
   "license": "UNLICENSED",
@@ -63,21 +63,21 @@
   "devDependencies": {
     "@bsuite/nav-core": "workspace:^",
     "@bsuite/theme": "workspace:^",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@types/node": "^25.9.2",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.2",
-    "jsdom": "^29.1.1",
-    "lucide-react": "^1.17.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "react-grid-layout": "^2.2.3",
-    "react-resizable": "^4.0.1",
-    "typescript": "~6.0.3",
-    "vite": "^8.0.16",
-    "vitest": "^4.1.8"
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/node": "^26.4.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "@vitejs/plugin-react": "^6.1.1",
+    "jsdom": "^30.0.1",
+    "lucide-react": "^1.37.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-grid-layout": "^2.2.4",
+    "react-resizable": "^4.0.2",
+    "typescript": "^6.0.3",
+    "vite": "^8.2.2",
+    "vitest": "^4.1.11"
   },
   "packageManager": "pnpm@10.33.3"
 }