@pwfabric/runtime 0.0.0-stage → 1.0.0-rc.0

package/dist/render/responsive.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Responsive Rendering Utilities
+ *
+ * Viewport-aware layout resolution for runtime rendering.
+ * Re-exports pure functions from @pwfabric/core and provides
+ * React-specific viewport hook.
+ *
+ * @module @pwfabric/runtime/render/responsive
+ */
+import * as React from 'react';
+import type { BlockLayout, BreakpointName } from '@pwfabric/core';
+export { resolveResponsiveValue, resolveSpanAtBreakpoint, getColumnsAtBreakpoint, getBreakpointForWidth, } from '@pwfabric/core';
+/**
+ * Resolve the complete block layout at a given viewport breakpoint.
+ * Returns span, offset, order, and hidden values.
+ */
+export declare function resolveBlockLayout(layout: BlockLayout, viewport: BreakpointName): {
+    span: number;
+    offset: number | undefined;
+    order: number | undefined;
+    hidden: boolean | undefined;
+};
+/**
+ * Surface root — carries NO MEASURE.
+ *
+ * If the root carried both the 12-column grid and
+ * `maxWidth: var(--pw-layout-container-max-width)` + `margin: 0 auto`,
+ * persistent chrome would sit inside the centred box too (a persistent rail
+ * would start well in from the screen edge, as part of the narrower container).
+ *
+ * The measure goes to the inner container through `resolveMeasureStyle`;
+ * the root is flow only.
+ */
+export declare function resolveSurfaceRootStyle(gap?: string | number, padding?: string | number): React.CSSProperties;
+/**
+ * Measured container — the wrapper of `container`-scoped blocks.
+ *
+ * The 12-column grid and `containerMaxWidth` live HERE. Blocks that declare
+ * `widthScope:'viewport'` are drawn as SIBLINGS of this container, not its
+ * children — the escape is placement, not a CSS trick (see render/width-scope.ts).
+ */
+export declare function resolveMeasureStyle(viewport: BreakpointName, gap?: string | number, padding?: string | number, containerMaxWidth?: string): React.CSSProperties;
+/**
+ * React hook that returns the current viewport breakpoint.
+ * Uses matchMedia for efficient viewport detection.
+ *
+ * Returns 'lg' on server (SSR fallback).
+ */
+export declare function useViewport(): BreakpointName;
+//# sourceMappingURL=responsive.d.ts.map

package/dist/render/responsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../src/render/responsive.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAUjE,OAAO,EACL,sBAAsB,EACtB,uBAAuB,EACvB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,gBAAgB,CAAA;AAMvB;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,QAAQ,EAAE,cAAc,GACvB;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,MAAM,EAAE,OAAO,GAAG,SAAS,CAAA;CAC5B,CAOA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CACrC,GAAG,GAAE,MAAM,GAAG,MAAW,EACzB,OAAO,GAAE,MAAM,GAAG,MAAU,GAC3B,KAAK,CAAC,aAAa,CAOrB;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,cAAc,EACxB,GAAG,GAAE,MAAM,GAAG,MAAW,EACzB,OAAO,GAAE,MAAM,GAAG,MAAW,EAC7B,iBAAiB,SAAyC,GACzD,KAAK,CAAC,aAAa,CAWrB;AAMD;;;;;GAKG;AACH,wBAAgB,WAAW,IAAI,cAAc,CA2B5C"}

package/dist/render/responsive.js

@@ -0,0 +1,99 @@
+/**
+ * Responsive Rendering Utilities
+ *
+ * Viewport-aware layout resolution for runtime rendering.
+ * Re-exports pure functions from @pwfabric/core and provides
+ * React-specific viewport hook.
+ *
+ * @module @pwfabric/runtime/render/responsive
+ */
+import * as React from 'react';
+import { BREAKPOINTS, resolveSpanAtBreakpoint, resolveResponsiveValue, getColumnsAtBreakpoint, getBreakpointForWidth, } from '@pwfabric/core';
+// Re-export pure functions for convenience
+export { resolveResponsiveValue, resolveSpanAtBreakpoint, getColumnsAtBreakpoint, getBreakpointForWidth, } from '@pwfabric/core';
+// ============================================================
+// BLOCK STYLE RESOLUTION
+// ============================================================
+/**
+ * Resolve the complete block layout at a given viewport breakpoint.
+ * Returns span, offset, order, and hidden values.
+ */
+export function resolveBlockLayout(layout, viewport) {
+    return {
+        span: resolveSpanAtBreakpoint(layout, viewport),
+        offset: resolveResponsiveValue(layout.offset, viewport),
+        order: resolveResponsiveValue(layout.order, viewport),
+        hidden: resolveResponsiveValue(layout.hidden, viewport),
+    };
+}
+/**
+ * Surface root — carries NO MEASURE.
+ *
+ * If the root carried both the 12-column grid and
+ * `maxWidth: var(--pw-layout-container-max-width)` + `margin: 0 auto`,
+ * persistent chrome would sit inside the centred box too (a persistent rail
+ * would start well in from the screen edge, as part of the narrower container).
+ *
+ * The measure goes to the inner container through `resolveMeasureStyle`;
+ * the root is flow only.
+ */
+export function resolveSurfaceRootStyle(gap = 16, padding = 0) {
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: typeof gap === 'number' ? `${gap}px` : gap,
+        padding: typeof padding === 'number' ? `${padding}px` : padding,
+    };
+}
+/**
+ * Measured container — the wrapper of `container`-scoped blocks.
+ *
+ * The 12-column grid and `containerMaxWidth` live HERE. Blocks that declare
+ * `widthScope:'viewport'` are drawn as SIBLINGS of this container, not its
+ * children — the escape is placement, not a CSS trick (see render/width-scope.ts).
+ */
+export function resolveMeasureStyle(viewport, gap = 16, padding = 24, containerMaxWidth = 'var(--pw-layout-container-max-width)') {
+    const columns = getColumnsAtBreakpoint(viewport);
+    return {
+        display: 'grid',
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gap: typeof gap === 'number' ? `${gap}px` : gap,
+        padding: typeof padding === 'number' ? `${padding}px` : padding,
+        maxWidth: containerMaxWidth,
+        margin: '0 auto',
+        width: '100%',
+    };
+}
+// ============================================================
+// VIEWPORT HOOK
+// ============================================================
+/**
+ * React hook that returns the current viewport breakpoint.
+ * Uses matchMedia for efficient viewport detection.
+ *
+ * Returns 'lg' on server (SSR fallback).
+ */
+export function useViewport() {
+    const [breakpoint, setBreakpoint] = React.useState('lg');
+    React.useEffect(() => {
+        // Set initial value from current window width
+        setBreakpoint(getBreakpointForWidth(window.innerWidth));
+        // Create media query listeners for each breakpoint transition
+        const listeners = [];
+        for (const bp of BREAKPOINTS) {
+            const mql = window.matchMedia(`(min-width: ${bp.minWidth}px)`);
+            const handler = () => {
+                setBreakpoint(getBreakpointForWidth(window.innerWidth));
+            };
+            mql.addEventListener('change', handler);
+            listeners.push({ mql, handler });
+        }
+        return () => {
+            for (const { mql, handler } of listeners) {
+                mql.removeEventListener('change', handler);
+            }
+        };
+    }, []);
+    return breakpoint;
+}
+//# sourceMappingURL=responsive.js.map

package/dist/render/responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.js","sourceRoot":"","sources":["../../src/render/responsive.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,WAAW,EACX,uBAAuB,EACvB,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,gBAAgB,CAAA;AAEvB,2CAA2C;AAC3C,OAAO,EACL,sBAAsB,EACtB,uBAAuB,EACvB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,gBAAgB,CAAA;AAEvB,+DAA+D;AAC/D,yBAAyB;AACzB,+DAA+D;AAE/D;;;GAGG;AACH,MAAM,UAAU,kBAAkB,CAChC,MAAmB,EACnB,QAAwB;IAOxB,OAAO;QACL,IAAI,EAAE,uBAAuB,CAAC,MAAM,EAAE,QAAQ,CAAC;QAC/C,MAAM,EAAE,sBAAsB,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC;QACvD,KAAK,EAAE,sBAAsB,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC;QACrD,MAAM,EAAE,sBAAsB,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC;KACxD,CAAA;AACH,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,uBAAuB,CACrC,MAAuB,EAAE,EACzB,UAA2B,CAAC;IAE5B,OAAO;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG;QAC/C,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,CAAC,CAAC,OAAO;KAChE,CAAA;AACH,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,mBAAmB,CACjC,QAAwB,EACxB,MAAuB,EAAE,EACzB,UAA2B,EAAE,EAC7B,iBAAiB,GAAG,sCAAsC;IAE1D,MAAM,OAAO,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAA;IAChD,OAAO;QACL,OAAO,EAAE,MAAM;QACf,mBAAmB,EAAE,UAAU,OAAO,QAAQ;QAC9C,GAAG,EAAE,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG;QAC/C,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,CAAC,CAAC,OAAO;QAC/D,QAAQ,EAAE,iBAAiB;QAC3B,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,MAAM;KACd,CAAA;AACH,CAAC;AAED,+DAA+D;AAC/D,gBAAgB;AAChB,+DAA+D;AAE/D;;;;;GAKG;AACH,MAAM,UAAU,WAAW;IACzB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAiB,IAAI,CAAC,CAAA;IAExE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,8CAA8C;QAC9C,aAAa,CAAC,qBAAqB,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAA;QAEvD,8DAA8D;QAC9D,MAAM,SAAS,GAAmD,EAAE,CAAA;QAEpE,KAAK,MAAM,EAAE,IAAI,WAAW,EAAE,CAAC;YAC7B,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC,QAAQ,KAAK,CAAC,CAAA;YAC9D,MAAM,OAAO,GAAG,GAAS,EAAE;gBACzB,aAAa,CAAC,qBAAqB,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAA;YACzD,CAAC,CAAA;YACD,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;YACvC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAA;QAClC,CAAC;QAED,OAAO,GAAG,EAAE;YACV,KAAK,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,SAAS,EAAE,CAAC;gBACzC,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;YAC5C,CAAC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,UAAU,CAAA;AACnB,CAAC"}

package/dist/render/scoped-css.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Shared helpers for the scoped per-block CSS collectors.
+ *
+ * The runtime emits several kinds of scoped `<style>` rules keyed by a block's
+ * stable `data-block-id` (visibility / interaction-states / responsive-style /
+ * conditional-states / group-states). They all share the SAME primitives:
+ *
+ *   - `cssEscapeId(id)`      — conservative attribute-value escaper for block ids.
+ *   - `camelToKebab(prop)`   — CSS camelCase property name → kebab-case.
+ *   - `blockSelector(id)`    — `[data-pw-surface] [data-block-id="<escaped>"]`,
+ *                              the scoped base selector every rule attaches to.
+ *   - `collectScopedCss(blocks, perBlockFn)` — walk the block tree (including
+ *                              children) and concatenate each block's CSS as
+ *                              produced by `perBlockFn(block)`.
+ *
+ * Centralising these keeps the per-collector files focused on their own
+ * selector/declaration semantics and guarantees byte-identical output across
+ * the family (the same escaper, the same selector string, the same walk order).
+ *
+ * @module @pwfabric/runtime/render/scoped-css
+ */
+import type { Block } from '@pwfabric/core';
+/** Conservative CSS attribute-selector value escaper (block ids are slugs, but be safe). */
+export declare function cssEscapeId(id: string): string;
+/** camelCase CSS property → kebab-case (e.g. `backgroundColor` → `background-color`). */
+export declare function camelToKebab(prop: string): string;
+/** The bare `[data-block-id="<escaped-id>"]` attribute selector (no surface scope). */
+export declare function blockIdAttr(id: string): string;
+/**
+ * The surface-root selector a scoped rule hangs off.
+ *
+ * With a `surfaceId` this is `[data-pw-surface="<id>"]` — scope carried by the
+ * attribute's VALUE, not merely its presence. That matters because the embed
+ * autoloader hydrates EVERY `[data-pw-surface]` element in a document, so a host
+ * page can hold several surfaces at once; a value-less selector makes each
+ * surface's rules apply to all of them, and the last one in document order wins.
+ *
+ * Without a `surfaceId` it degrades to the historical `[data-pw-surface]`, which
+ * is correct for rules whose content is identical for every surface (the base
+ * CSS) and for unit tests that render a single surface.
+ */
+export declare function surfaceScope(surfaceId?: string): string;
+/**
+ * The scoped base selector a per-block rule attaches to:
+ * `[data-pw-surface="<sid>"] [data-block-id="<escaped-id>"]`. Scoped under the
+ * surface root so a rule can never leak to the host page — and, when the surface
+ * id is supplied, never to a SIBLING surface that happens to reuse a block id.
+ */
+export declare function blockSelector(id: string, surfaceId?: string): string;
+/**
+ * Walk a surface block tree (depth-first, children after their parent — the
+ * order all collectors used) and concatenate the per-block CSS produced by
+ * `perBlockFn(block)`. Blocks for which `perBlockFn` returns '' contribute zero
+ * bytes, so existing surfaces stay byte-identical.
+ */
+export declare function collectScopedCss(blocks: readonly Block[], perBlockFn: (block: Block) => string): string;
+/**
+ * Style keys HOISTED to the wrapper — kept here so the renderer and the
+ * responsive CSS generator see the SAME list.
+ *
+ * This list is a RULE: these keys apply to the outer wrapper, not the
+ * component root. For flat values the renderer hoists them; for responsive
+ * values the value leaves the inline style entirely and lands in CSS, so the
+ * same rule has to be expressed on the selector side — otherwise the rule
+ * matches both the wrapper and the root and the value is applied TWICE
+ * (`marginTop:'-40%'` would move content by both -335px and -256px).
+ */
+export declare const FLEX_HOIST_KEYS: readonly ["flex", "flexGrow", "flexShrink", "flexBasis"];
+export declare const LAYOUT_HOIST_KEYS: readonly ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "maxWidth", "minWidth", "flex", "flexGrow", "flexShrink", "flexBasis"];
+/** The attribute that tells the wrapper from the component root (the same marker states-css uses). */
+export declare const WRAPPER_ATTR = "[data-block-wrapper]";
+//# sourceMappingURL=scoped-css.d.ts.map

package/dist/render/scoped-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scoped-css.d.ts","sourceRoot":"","sources":["../../src/render/scoped-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE3C,4FAA4F;AAC5F,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED,yFAAyF;AACzF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEjD;AAED,uFAAuF;AACvF,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAEpE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,SAAS,KAAK,EAAE,EACxB,UAAU,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,GACnC,MAAM,CAUR;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,0DAA2D,CAAA;AAEvF,eAAO,MAAM,iBAAiB,sJASpB,CAAA;AAEV,sGAAsG;AACtG,eAAO,MAAM,YAAY,yBAAyB,CAAA"}

package/dist/render/scoped-css.js

@@ -0,0 +1,102 @@
+/**
+ * Shared helpers for the scoped per-block CSS collectors.
+ *
+ * The runtime emits several kinds of scoped `<style>` rules keyed by a block's
+ * stable `data-block-id` (visibility / interaction-states / responsive-style /
+ * conditional-states / group-states). They all share the SAME primitives:
+ *
+ *   - `cssEscapeId(id)`      — conservative attribute-value escaper for block ids.
+ *   - `camelToKebab(prop)`   — CSS camelCase property name → kebab-case.
+ *   - `blockSelector(id)`    — `[data-pw-surface] [data-block-id="<escaped>"]`,
+ *                              the scoped base selector every rule attaches to.
+ *   - `collectScopedCss(blocks, perBlockFn)` — walk the block tree (including
+ *                              children) and concatenate each block's CSS as
+ *                              produced by `perBlockFn(block)`.
+ *
+ * Centralising these keeps the per-collector files focused on their own
+ * selector/declaration semantics and guarantees byte-identical output across
+ * the family (the same escaper, the same selector string, the same walk order).
+ *
+ * @module @pwfabric/runtime/render/scoped-css
+ */
+/** Conservative CSS attribute-selector value escaper (block ids are slugs, but be safe). */
+export function cssEscapeId(id) {
+    return id.replace(/["\\]/g, '\\$&');
+}
+/** camelCase CSS property → kebab-case (e.g. `backgroundColor` → `background-color`). */
+export function camelToKebab(prop) {
+    return prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+/** The bare `[data-block-id="<escaped-id>"]` attribute selector (no surface scope). */
+export function blockIdAttr(id) {
+    return `[data-block-id="${cssEscapeId(id)}"]`;
+}
+/**
+ * The surface-root selector a scoped rule hangs off.
+ *
+ * With a `surfaceId` this is `[data-pw-surface="<id>"]` — scope carried by the
+ * attribute's VALUE, not merely its presence. That matters because the embed
+ * autoloader hydrates EVERY `[data-pw-surface]` element in a document, so a host
+ * page can hold several surfaces at once; a value-less selector makes each
+ * surface's rules apply to all of them, and the last one in document order wins.
+ *
+ * Without a `surfaceId` it degrades to the historical `[data-pw-surface]`, which
+ * is correct for rules whose content is identical for every surface (the base
+ * CSS) and for unit tests that render a single surface.
+ */
+export function surfaceScope(surfaceId) {
+    return surfaceId ? `[data-pw-surface="${cssEscapeId(surfaceId)}"]` : '[data-pw-surface]';
+}
+/**
+ * The scoped base selector a per-block rule attaches to:
+ * `[data-pw-surface="<sid>"] [data-block-id="<escaped-id>"]`. Scoped under the
+ * surface root so a rule can never leak to the host page — and, when the surface
+ * id is supplied, never to a SIBLING surface that happens to reuse a block id.
+ */
+export function blockSelector(id, surfaceId) {
+    return `${surfaceScope(surfaceId)} ${blockIdAttr(id)}`;
+}
+/**
+ * Walk a surface block tree (depth-first, children after their parent — the
+ * order all collectors used) and concatenate the per-block CSS produced by
+ * `perBlockFn(block)`. Blocks for which `perBlockFn` returns '' contribute zero
+ * bytes, so existing surfaces stay byte-identical.
+ */
+export function collectScopedCss(blocks, perBlockFn) {
+    let css = '';
+    const walk = (block) => {
+        css += perBlockFn(block);
+        if (block.children) {
+            for (const child of block.children)
+                walk(child);
+        }
+    };
+    for (const block of blocks)
+        walk(block);
+    return css;
+}
+/**
+ * Style keys HOISTED to the wrapper — kept here so the renderer and the
+ * responsive CSS generator see the SAME list.
+ *
+ * This list is a RULE: these keys apply to the outer wrapper, not the
+ * component root. For flat values the renderer hoists them; for responsive
+ * values the value leaves the inline style entirely and lands in CSS, so the
+ * same rule has to be expressed on the selector side — otherwise the rule
+ * matches both the wrapper and the root and the value is applied TWICE
+ * (`marginTop:'-40%'` would move content by both -335px and -256px).
+ */
+export const FLEX_HOIST_KEYS = ['flex', 'flexGrow', 'flexShrink', 'flexBasis'];
+export const LAYOUT_HOIST_KEYS = [
+    'margin',
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft',
+    'maxWidth',
+    'minWidth',
+    ...FLEX_HOIST_KEYS,
+];
+/** The attribute that tells the wrapper from the component root (the same marker states-css uses). */
+export const WRAPPER_ATTR = '[data-block-wrapper]';
+//# sourceMappingURL=scoped-css.js.map

package/dist/render/scoped-css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scoped-css.js","sourceRoot":"","sources":["../../src/render/scoped-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,4FAA4F;AAC5F,MAAM,UAAU,WAAW,CAAC,EAAU;IACpC,OAAO,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;AACrC,CAAC;AAED,yFAAyF;AACzF,MAAM,UAAU,YAAY,CAAC,IAAY;IACvC,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;AAC7D,CAAC;AAED,uFAAuF;AACvF,MAAM,UAAU,WAAW,CAAC,EAAU;IACpC,OAAO,mBAAmB,WAAW,CAAC,EAAE,CAAC,IAAI,CAAA;AAC/C,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,YAAY,CAAC,SAAkB;IAC7C,OAAO,SAAS,CAAC,CAAC,CAAC,qBAAqB,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAA;AAC1F,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAC,EAAU,EAAE,SAAkB;IAC1D,OAAO,GAAG,YAAY,CAAC,SAAS,CAAC,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE,CAAA;AACxD,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAC9B,MAAwB,EACxB,UAAoC;IAEpC,IAAI,GAAG,GAAG,EAAE,CAAA;IACZ,MAAM,IAAI,GAAG,CAAC,KAAY,EAAQ,EAAE;QAClC,GAAG,IAAI,UAAU,CAAC,KAAK,CAAC,CAAA;QACxB,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACnB,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,QAAQ;gBAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QACjD,CAAC;IACH,CAAC,CAAA;IACD,KAAK,MAAM,KAAK,IAAI,MAAM;QAAE,IAAI,CAAC,KAAK,CAAC,CAAA;IACvC,OAAO,GAAG,CAAA;AACZ,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,CAAU,CAAA;AAEvF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,QAAQ;IACR,WAAW;IACX,aAAa;IACb,cAAc;IACd,YAAY;IACZ,UAAU;IACV,UAAU;IACV,GAAG,eAAe;CACV,CAAA;AAEV,sGAAsG;AACtG,MAAM,CAAC,MAAM,YAAY,GAAG,sBAAsB,CAAA"}

package/dist/render/shell-selection.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Shell selection — the state a SPLIT shell runs on.
+ *
+ * WHY THIS IS IN THE RUNTIME AND NOT IN THE BLOCK. A split surface (list on the
+ * left, detail on the right) has exactly one piece of state: which item is
+ * selected. Kept inside the block it is invisible to everything else — the URL
+ * does not move, so the page cannot be linked to, the browser Back button does
+ * nothing, and a second block on the same surface (a header showing the
+ * selected record's title, a toolbar acting on it) has no way to read it.
+ *
+ * So selection is a SURFACE-level fact with a URL projection:
+ *
+ *   ?<key>=<itemId>
+ *
+ * and this module is the single place that reads and writes it.
+ *
+ * THE URL IS THE SOURCE OF TRUTH when syncing is on. React state mirrors it
+ * rather than the other way round, which is what makes a pasted link, a Back
+ * press and a click on the list all land in the same place — three paths, one
+ * rule.
+ *
+ * INERT HOSTS DO NOT NAVIGATE. An editor or preview canvas renders the same
+ * block with `interactionMode: 'inert'`; there the selection stays in memory and
+ * the host's own URL is never touched. That mirrors the existing rule for blocks
+ * that navigate or write data.
+ */
+import * as React from 'react';
+type Listener = () => void;
+export interface ShellSelectionStore {
+    /** Current selection for a key, or undefined when nothing is selected. */
+    get(key: string): string | undefined;
+    /** Select an item. Writes the URL when this store syncs. */
+    set(key: string, id: string | undefined): void;
+    subscribe(listener: Listener): () => void;
+    readonly syncUrl: boolean;
+}
+/**
+ * Create a selection store.
+ *
+ * `syncUrl: false` gives an in-memory store with identical semantics — the same
+ * hook, the same cross-block sharing, no address-bar side effects.
+ */
+export declare function createShellSelectionStore(syncUrl: boolean): ShellSelectionStore;
+export declare const ShellSelectionContext: React.Context<ShellSelectionStore | null>;
+export interface ShellSelectionProviderProps {
+    /** Off for editor/preview canvases — selection works, the address bar does not move. */
+    readonly syncUrl?: boolean;
+    readonly children: React.ReactNode;
+}
+export declare function ShellSelectionProvider({ syncUrl, children, }: ShellSelectionProviderProps): React.ReactElement;
+export interface ShellSelectionOptions {
+    /** Selected when the URL carries nothing — normally the first list item. */
+    readonly fallback?: string | undefined;
+    /**
+     * Override the provider. A block rendered inert must not move the host's URL
+     * even when the surrounding surface is live.
+     */
+    readonly syncUrl?: boolean;
+}
+/**
+ * Read and write the shell selection for `key`.
+ *
+ * Works with OR without a provider: with no `ShellSelectionProvider` above it,
+ * the hook makes its own store, so a block dropped into a bare React tree keeps
+ * behaving instead of throwing. The provider only widens the scope — one store
+ * per surface means two blocks reading the same key see the same value.
+ */
+export declare function useShellSelection(key: string, options?: ShellSelectionOptions): readonly [string | undefined, (id: string | undefined) => void];
+export {};
+//# sourceMappingURL=shell-selection.d.ts.map

package/dist/render/shell-selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-selection.d.ts","sourceRoot":"","sources":["../../src/render/shell-selection.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAA;AAE1B,MAAM,WAAW,mBAAmB;IAClC,0EAA0E;IAC1E,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACpC,4DAA4D;IAC5D,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAA;IAC9C,SAAS,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,IAAI,CAAA;IACzC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;CAC1B;AAQD;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,OAAO,GAAG,mBAAmB,CAuC/E;AAMD,eAAO,MAAM,qBAAqB,2CAAwD,CAAA;AAE1F,MAAM,WAAW,2BAA2B;IAC1C,wFAAwF;IACxF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CACnC;AAED,wBAAgB,sBAAsB,CAAC,EACrC,OAAc,EACd,QAAQ,GACT,EAAE,2BAA2B,GAAG,KAAK,CAAC,YAAY,CAGlD;AAMD,MAAM,WAAW,qBAAqB;IACpC,4EAA4E;IAC5E,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACtC;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,MAAM,EACX,OAAO,GAAE,qBAA0B,GAClC,SAAS,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC,CA4BjE"}

package/dist/render/shell-selection.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Shell selection — the state a SPLIT shell runs on.
+ *
+ * WHY THIS IS IN THE RUNTIME AND NOT IN THE BLOCK. A split surface (list on the
+ * left, detail on the right) has exactly one piece of state: which item is
+ * selected. Kept inside the block it is invisible to everything else — the URL
+ * does not move, so the page cannot be linked to, the browser Back button does
+ * nothing, and a second block on the same surface (a header showing the
+ * selected record's title, a toolbar acting on it) has no way to read it.
+ *
+ * So selection is a SURFACE-level fact with a URL projection:
+ *
+ *   ?<key>=<itemId>
+ *
+ * and this module is the single place that reads and writes it.
+ *
+ * THE URL IS THE SOURCE OF TRUTH when syncing is on. React state mirrors it
+ * rather than the other way round, which is what makes a pasted link, a Back
+ * press and a click on the list all land in the same place — three paths, one
+ * rule.
+ *
+ * INERT HOSTS DO NOT NAVIGATE. An editor or preview canvas renders the same
+ * block with `interactionMode: 'inert'`; there the selection stays in memory and
+ * the host's own URL is never touched. That mirrors the existing rule for blocks
+ * that navigate or write data.
+ */
+import * as React from 'react';
+function readFromUrl(key) {
+    if (typeof window === 'undefined')
+        return undefined;
+    const value = new URLSearchParams(window.location.search).get(key);
+    return value === null || value === '' ? undefined : value;
+}
+/**
+ * Create a selection store.
+ *
+ * `syncUrl: false` gives an in-memory store with identical semantics — the same
+ * hook, the same cross-block sharing, no address-bar side effects.
+ */
+export function createShellSelectionStore(syncUrl) {
+    const memory = new Map();
+    const listeners = new Set();
+    const emit = () => {
+        for (const l of [...listeners])
+            l();
+    };
+    if (syncUrl && typeof window !== 'undefined') {
+        window.addEventListener('popstate', emit);
+    }
+    return {
+        syncUrl,
+        get(key) {
+            // URL first: a Back press changes the address without going through
+            // `set`, so reading memory would serve a stale value.
+            if (syncUrl)
+                return readFromUrl(key) ?? memory.get(key);
+            return memory.get(key);
+        },
+        set(key, id) {
+            memory.set(key, id);
+            if (syncUrl && typeof window !== 'undefined') {
+                const url = new URL(window.location.href);
+                if (id === undefined)
+                    url.searchParams.delete(key);
+                else
+                    url.searchParams.set(key, id);
+                // pushState, not replaceState: selecting a record is a navigation the
+                // user expects Back to undo. That is the whole point of putting it in
+                // the URL rather than in a ref.
+                if (url.href !== window.location.href)
+                    window.history.pushState({}, '', url);
+            }
+            emit();
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+}
+// ============================================================
+// CONTEXT
+// ============================================================
+export const ShellSelectionContext = React.createContext(null);
+export function ShellSelectionProvider({ syncUrl = true, children, }) {
+    const store = React.useMemo(() => createShellSelectionStore(syncUrl), [syncUrl]);
+    return _jsx(ShellSelectionContext.Provider, { value: store, children: children });
+}
+/**
+ * Read and write the shell selection for `key`.
+ *
+ * Works with OR without a provider: with no `ShellSelectionProvider` above it,
+ * the hook makes its own store, so a block dropped into a bare React tree keeps
+ * behaving instead of throwing. The provider only widens the scope — one store
+ * per surface means two blocks reading the same key see the same value.
+ */
+export function useShellSelection(key, options = {}) {
+    const provided = React.useContext(ShellSelectionContext);
+    const wantsSync = options.syncUrl ?? provided?.syncUrl ?? true;
+    // A provider whose sync setting disagrees with this block's is not usable —
+    // an inert block inside a live surface must not push history.
+    const usable = provided && provided.syncUrl === wantsSync ? provided : null;
+    const fallbackStore = React.useMemo(() => (usable ? null : createShellSelectionStore(wantsSync)), [usable, wantsSync]);
+    const store = usable ?? fallbackStore;
+    const subscribe = React.useCallback((l) => store.subscribe(l), [store]);
+    const selected = React.useSyncExternalStore(subscribe, () => store.get(key), 
+    // Server render: no URL, no memory — the fallback is the honest answer.
+    () => undefined);
+    const select = React.useCallback((id) => {
+        store.set(key, id);
+    }, [store, key]);
+    return [selected ?? options.fallback, select];
+}
+//# sourceMappingURL=shell-selection.js.map

package/dist/render/shell-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-selection.js","sourceRoot":"","sources":["../../src/render/shell-selection.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAiB9B,SAAS,WAAW,CAAC,GAAW;IAC9B,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,SAAS,CAAA;IACnD,MAAM,KAAK,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAClE,OAAO,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAA;AAC3D,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,yBAAyB,CAAC,OAAgB;IACxD,MAAM,MAAM,GAAG,IAAI,GAAG,EAA8B,CAAA;IACpD,MAAM,SAAS,GAAG,IAAI,GAAG,EAAY,CAAA;IACrC,MAAM,IAAI,GAAG,GAAS,EAAE;QACtB,KAAK,MAAM,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;YAAE,CAAC,EAAE,CAAA;IACrC,CAAC,CAAA;IAED,IAAI,OAAO,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAC7C,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;IAC3C,CAAC;IAED,OAAO;QACL,OAAO;QACP,GAAG,CAAC,GAAG;YACL,oEAAoE;YACpE,sDAAsD;YACtD,IAAI,OAAO;gBAAE,OAAO,WAAW,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;YACvD,OAAO,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QACxB,CAAC;QACD,GAAG,CAAC,GAAG,EAAE,EAAE;YACT,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;YACnB,IAAI,OAAO,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;gBAC7C,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;gBACzC,IAAI,EAAE,KAAK,SAAS;oBAAE,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;oBAC7C,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;gBAClC,sEAAsE;gBACtE,sEAAsE;gBACtE,gCAAgC;gBAChC,IAAI,GAAG,CAAC,IAAI,KAAK,MAAM,CAAC,QAAQ,CAAC,IAAI;oBAAE,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAA;YAC9E,CAAC;YACD,IAAI,EAAE,CAAA;QACR,CAAC;QACD,SAAS,CAAC,QAAQ;YAChB,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;YACvB,OAAO,GAAG,EAAE;gBACV,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;YAC5B,CAAC,CAAA;QACH,CAAC;KACF,CAAA;AACH,CAAC;AAED,+DAA+D;AAC/D,UAAU;AACV,+DAA+D;AAE/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC,aAAa,CAA6B,IAAI,CAAC,CAAA;AAQ1F,MAAM,UAAU,sBAAsB,CAAC,EACrC,OAAO,GAAG,IAAI,EACd,QAAQ,GACoB;IAC5B,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,yBAAyB,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAChF,OAAO,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAkC,CAAA;AAClG,CAAC;AAgBD;;;;;;;GAOG;AACH,MAAM,UAAU,iBAAiB,CAC/B,GAAW,EACX,UAAiC,EAAE;IAEnC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAA;IACxD,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,IAAI,QAAQ,EAAE,OAAO,IAAI,IAAI,CAAA;IAC9D,4EAA4E;IAC5E,8DAA8D;IAC9D,MAAM,MAAM,GAAG,QAAQ,IAAI,QAAQ,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;IAC3E,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CACjC,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,SAAS,CAAC,CAAC,EAC5D,CAAC,MAAM,EAAE,SAAS,CAAC,CACpB,CAAA;IACD,MAAM,KAAK,GAAG,MAAM,IAAK,aAAqC,CAAA;IAE9D,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAW,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IACjF,MAAM,QAAQ,GAAG,KAAK,CAAC,oBAAoB,CACzC,SAAS,EACT,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;IACpB,wEAAwE;IACxE,GAAG,EAAE,CAAC,SAAS,CAChB,CAAA;IAED,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAC9B,CAAC,EAAsB,EAAE,EAAE;QACzB,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;IACpB,CAAC,EACD,CAAC,KAAK,EAAE,GAAG,CAAC,CACb,CAAA;IAED,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAU,CAAA;AACxD,CAAC"}

package/dist/render/states-css.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Interaction-state CSS generation (token-driven hover/active/focus).
+ *
+ * `block.style` sits inline and cannot express pseudo-classes, so per-state
+ * styling lives in `block.states` and the runtime emits scoped CSS rules —
+ * keyed by the block's `data-block-id` — into the surface's generated
+ * `<style>` (the SAME mechanism `layout.hideOn`/`showOn` use). For a block
+ * with `states`, the runtime emits:
+ *
+ *   `[data-pw-surface] [data-block-id="<id>"]:hover{ … }`
+ *   `[data-pw-surface] [data-block-id="<id>"]:active{ … }`
+ *   `[data-pw-surface] [data-block-id="<id>"]:focus-visible{ … }`
+ *
+ * Keys are CSS camelCase property names (converted to kebab-case); values pass
+ * through untouched, so `var(--pw-color-primary-subtle)` works. Blocks without
+ * `states` emit zero bytes so existing surfaces are byte-identical.
+ *
+ * @module @pwfabric/runtime/render/states-css
+ */
+import type { Block } from '@pwfabric/core';
+/**
+ * Emit the scoped CSS rule(s) for a single block's interaction states. Targets
+ * `[data-block-id="<id>"]<pseudo>` scoped under the surface root so it cannot
+ * leak to the host page. Returns '' when the block declares no non-empty state.
+ */
+export declare function blockStatesCss(blockId: string, states: NonNullable<Block['states']>, surfaceId?: string): string;
+/**
+ * Walk a surface block tree and concatenate the per-block interaction-state CSS
+ * for every block declaring `states`. Blocks without `states` are skipped (zero
+ * bytes emitted) so existing surfaces are byte-identical.
+ */
+export declare function collectStatesCss(blocks: readonly Block[], surfaceId?: string): string;
+//# sourceMappingURL=states-css.d.ts.map

package/dist/render/states-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"states-css.d.ts","sourceRoot":"","sources":["../../src/render/states-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAiB3C;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EACpC,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CAeR;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,SAAS,KAAK,EAAE,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAIrF"}

package/dist/render/states-css.js

@@ -0,0 +1,63 @@
+/**
+ * Interaction-state CSS generation (token-driven hover/active/focus).
+ *
+ * `block.style` sits inline and cannot express pseudo-classes, so per-state
+ * styling lives in `block.states` and the runtime emits scoped CSS rules —
+ * keyed by the block's `data-block-id` — into the surface's generated
+ * `<style>` (the SAME mechanism `layout.hideOn`/`showOn` use). For a block
+ * with `states`, the runtime emits:
+ *
+ *   `[data-pw-surface] [data-block-id="<id>"]:hover{ … }`
+ *   `[data-pw-surface] [data-block-id="<id>"]:active{ … }`
+ *   `[data-pw-surface] [data-block-id="<id>"]:focus-visible{ … }`
+ *
+ * Keys are CSS camelCase property names (converted to kebab-case); values pass
+ * through untouched, so `var(--pw-color-primary-subtle)` works. Blocks without
+ * `states` emit zero bytes so existing surfaces are byte-identical.
+ *
+ * @module @pwfabric/runtime/render/states-css
+ */
+import { blockSelector, camelToKebab, collectScopedCss } from './scoped-css.js';
+/** Pseudo-state → selector suffix. `focus` maps to `:focus-visible`. */
+const STATE_SELECTORS = {
+    hover: ':hover',
+    active: ':active',
+    focus: ':focus-visible',
+};
+/** Serialize a camelCase decl record to `prop:value;…` (values pass through). */
+function declsToCss(decls) {
+    return Object.entries(decls)
+        .map(([prop, value]) => `${camelToKebab(prop)}:${value}`)
+        .join(';');
+}
+/**
+ * Emit the scoped CSS rule(s) for a single block's interaction states. Targets
+ * `[data-block-id="<id>"]<pseudo>` scoped under the surface root so it cannot
+ * leak to the host page. Returns '' when the block declares no non-empty state.
+ */
+export function blockStatesCss(blockId, states, surfaceId) {
+    const selector = blockSelector(blockId, surfaceId);
+    let css = '';
+    for (const key of ['hover', 'active', 'focus']) {
+        const decls = states[key];
+        if (!decls || Object.keys(decls).length === 0)
+            continue;
+        // `data-block-id` lives on BOTH the renderer wrapper and the component root
+        // (the wrapper keeps `data-block-wrapper`). A state rule keyed on the bare
+        // id therefore fired twice: the square wrapper took the hover box-shadow
+        // (square corners bleeding out from under a rounded card) and transforms
+        // compounded. Exclude the wrapper — visual states belong to the styled
+        // component root only.
+        css += `${selector}:not([data-block-wrapper])${STATE_SELECTORS[key]}{${declsToCss(decls)}}`;
+    }
+    return css;
+}
+/**
+ * Walk a surface block tree and concatenate the per-block interaction-state CSS
+ * for every block declaring `states`. Blocks without `states` are skipped (zero
+ * bytes emitted) so existing surfaces are byte-identical.
+ */
+export function collectStatesCss(blocks, surfaceId) {
+    return collectScopedCss(blocks, (block) => block.states ? blockStatesCss(block.id, block.states, surfaceId) : '');
+}
+//# sourceMappingURL=states-css.js.map

package/dist/render/states-css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"states-css.js","sourceRoot":"","sources":["../../src/render/states-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAE/E,wEAAwE;AACxE,MAAM,eAAe,GAAiD;IACpE,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,gBAAgB;CACxB,CAAA;AAED,iFAAiF;AACjF,SAAS,UAAU,CAAC,KAAuC;IACzD,OAAO,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;SACzB,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC;SACxD,IAAI,CAAC,GAAG,CAAC,CAAA;AACd,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAC5B,OAAe,EACf,MAAoC,EACpC,SAAkB;IAElB,MAAM,QAAQ,GAAG,aAAa,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;IAClD,IAAI,GAAG,GAAG,EAAE,CAAA;IACZ,KAAK,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU,EAAE,CAAC;QACxD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;QACzB,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC;YAAE,SAAQ;QACvD,4EAA4E;QAC5E,2EAA2E;QAC3E,yEAAyE;QACzE,yEAAyE;QACzE,uEAAuE;QACvE,uBAAuB;QACvB,GAAG,IAAI,GAAG,QAAQ,6BAA6B,eAAe,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC,GAAG,CAAA;IAC7F,CAAC;IACD,OAAO,GAAG,CAAA;AACZ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,MAAwB,EAAE,SAAkB;IAC3E,OAAO,gBAAgB,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CACxC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CACtE,CAAA;AACH,CAAC"}