@bsuite/page-builder 2.4.1 → 2.5.0

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":"AACA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAsBxC,OAAO,KAAK,EAAe,mBAAmB,EAA4B,MAAM,YAAY,CAAC;AA4kB7F,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,qBAq+BrB"}

package/dist/PageGridLayout.js

@@ -6,6 +6,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 +140,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, 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
@@ -280,7 +281,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 +318,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: content })) : (content) }) })] }), injectedChildren] }));
 }));
 export function PageGridLayout({ pageKey, defaultLayouts, defaultCols, layoutVersion, canEditPage, editorEventNames, preferenceAdapter, widgets, widgetMeta, className, 
 // Resize default flipped 2026-05-12: rgl v2 dropped auto-handle rendering
@@ -398,6 +428,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 +796,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 +832,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, 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/index.d.ts

@@ -21,4 +21,6 @@ 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';
 //# 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;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;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"}

package/dist/index.js

@@ -11,3 +11,4 @@ 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';

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.5.0",
   "description": "Shared BSuite responsive page-builder grid and layout persistence primitives",
   "type": "module",
   "license": "UNLICENSED",