@storystick/react 0.0.0-stage → 0.2.0-rc.0

package/dist/preview-scope.js

@@ -0,0 +1,161 @@
+/**
+ * preview-scope — the SliceZone ↔ `Slice.*` prod-strip contract (ADR-129
+ * D3 / D4-amended).
+ *
+ * `Slice.section` emits the `data-ss-slice` binding attribute ONLY in
+ * preview. The runtime preview-mode signal cannot be a React context —
+ * a React Server Component cannot read context, so a context-gated
+ * `Slice.*` would be forced `'use client'` and stop being RSC-safe
+ * (empirically confirmed, ADR-129 vertical-slice de-risk, check C).
+ *
+ * Instead the signal travels on the one object `Slice.section` already
+ * receives: the `slice` prop. `<SliceZone>` is the single component
+ * that knows preview-vs-production (the `publishedAt`/`snapshotId`
+ * discriminator — see `slice-zone.tsx`). In preview it STAMPS each
+ * slice object it passes to a slice component with that slice's
+ * serialized per-slice model (ADR-129 D4/D9). `Slice.section` reads the
+ * stamp and emits it back as the `data-ss-model` attribute — on the
+ * slice's own root element, alongside `data-ss-slice`. Outside preview
+ * the slice is passed through unstamped and neither attribute is
+ * emitted — a true prod-strip, RSC-safe, zero hooks.
+ *
+ * D9 amendment (cross-model /review R5) — the per-slice model is a
+ * `data-ss-model` ATTRIBUTE, never a `<script>` node. A `<script>`
+ * sibling is `display:none` but still an element, so it shifts
+ * `:nth-child` / `first:` / `odd:` / `even:` for the customer's slices
+ * (preview ≠ production). An attribute on the slice's own element
+ * shifts nothing — the same rule that drove D4 from a marker-node to
+ * an attribute. With the island node gone, ADR-129 injects zero nodes.
+ *
+ * ── RSC AMENDMENT (2026-05-27) ──────────────────────────────────────
+ * The stamp was originally a module-local `Symbol` key. Next.js 15's
+ * RSC serializer rejects Symbol-keyed properties on objects passed
+ * from a Server Component to a Client Component with the error
+ *   "Only plain objects can be passed to Client Components from
+ *    Server Components. Objects with symbol properties like
+ *    `storystick.previewScope` are not supported."
+ * Customer slice components are routinely `'use client'` (interactive
+ * forms, hooks, …); even when the slice component is RSC, its
+ * descendants are usually client components, so the stamped slice
+ * always ends up crossing the RSC→Client boundary in real apps. The
+ * Symbol was a non-starter on Next 15.
+ *
+ * The stamp is now a string-keyed property under a fresh, namespaced
+ * Storystick reserved key: `_ssPreview`. The earlier `_model` slot
+ * was rejected by codex R1 — `_model` is the ADR-053 model-linking
+ * sidecar key that `hydrateSlice` reads as a string model id, so
+ * reusing it would (a) overwrite the model link in preview and
+ * (b) false-positive `isPreviewScoped()` on every production-linked
+ * slice. The `_ss*` prefix mirrors the existing `data-ss-*` DOM
+ * attribute convention used by `Slice.*` (`data-ss-slice`,
+ * `data-ss-bind`, `data-ss-model`) — one namespace, no ambiguity.
+ *
+ * Codex R2 then raised a P2: a string key alone is forgeable — a
+ * customer could (in theory) define a slice field literally named
+ * `_ssPreview` of type `string`, and SliceZone would mistake it for
+ * a preview stamp. The mitigation is structural: the stamp value is
+ * not a bare string but a tagged object `{ v: 'ss-preview-1', model:
+ * <JSON> }`. `isPreviewScoped()` checks the tag, not just the key —
+ * a customer field with the same string-typed name is rejected by
+ * shape.
+ *
+ * Codex R3 P2 (accepted as documented tradeoff): a customer COULD
+ * still define a field literally named `_ssPreview` with an object
+ * value that exactly matches the tagged shape `{ v: 'ss-preview-1',
+ * model: <string> }`. Two reasons we accept this:
+ *
+ *   1. The `_<x>` prefix is the existing Storystick reserved
+ *      namespace — `_type`, `_key`, `_variation`, `_model` all live
+ *      there. Adding `_ssPreview` extends the established convention.
+ *      The storyspec format documents leading-underscore field names
+ *      as SDK-reserved; the schema generator doesn't emit them.
+ *   2. The Symbol-keyed alternative was the ONLY structurally
+ *      unforgeable choice, and it is incompatible with Next 15's RSC
+ *      serializer (the bug this fix addresses). There is no third
+ *      design that satisfies BOTH "RSC-serializable" AND
+ *      "structurally unforgeable from any customer field".
+ *
+ * If a customer in v∞ produces a field shaped exactly like the stamp,
+ * the failure mode is overwrite-in-preview only (production renders
+ * never call `stampPreviewScope`). Detection would be loud (the
+ * customer's component receives a model JSON instead of its data),
+ * and the schema reader is the right place to forbid `_<x>` field
+ * names — a follow-up scoped to the schema parser, not this SDK seam.
+ *
+ * `slice-zone.tsx::SLICE_META_KEYS` gains `_ssPreview` so
+ * `extractSliceFields` filters it out of the serialized model
+ * payload (no recursive self-embedding of the stamp into its own
+ * model). Customer iteration (`Object.keys`, `JSON.stringify` of the
+ * slice) sees one extra meta key under the same `_*` convention
+ * customers already filter when walking slice fields; in production
+ * the property is never stamped, so production renders are
+ * byte-identical to a slice with no preview machinery — the
+ * reference-stable fast path is preserved.
+ *
+ * Why this is solid:
+ * - Plain object property ⇒ RSC-safe by construction.
+ * - Fresh namespaced key + tagged value shape ⇒ unforgeable from a
+ *   customer field of any type the schema generator can emit.
+ * - Filtered by `extractSliceFields` via `SLICE_META_KEYS` ⇒ doesn't
+ *   recurse into the serialized model payload.
+ * - Production stays unstamped ⇒ no leak in prod, no reference churn.
+ * - The wire contract with `@storystick/preview` is the DOM
+ *   `data-ss-model` attribute — that has not changed.
+ */
+/**
+ * The reserved string key the SliceZone stamps onto a slice. The
+ * VALUE under this key is a tagged record (see `STAMP_VERSION`), not
+ * a bare string — so a customer slice field literally named
+ * `_ssPreview` of any plain JSON type will NOT false-positive
+ * `isPreviewScoped()` (mitigation for codex R2 P2). MUST be listed
+ * in `slice-zone.tsx::SLICE_META_KEYS` so `extractSliceFields`
+ * filters it out of the serialized per-slice model.
+ */
+const PREVIEW_MODEL_KEY = '_ssPreview';
+/**
+ * Tag value embedded in every preview stamp record. Bumping this
+ * literal would invalidate every existing stamp at runtime — useful
+ * if the stamp shape ever evolves (none planned in v1).
+ */
+const STAMP_VERSION = 'ss-preview-1';
+/**
+ * Return a shallow copy of `slice` carrying the preview-scope stamp —
+ * the serialized per-slice model string `<SliceZone>` built for it.
+ * A copy (never a mutation) so `hydrateSlice`'s no-mutation invariant
+ * holds and the customer's query-cache entry is untouched. The copy
+ * costs one object identity per slice per render — accepted: it is
+ * stamped ONLY in preview, where slices already re-render on every
+ * live-content revision, so `React.memo` stability is not in play.
+ * Production renders never call this — there `hydrateSlice`'s
+ * reference-stable fast path is preserved intact.
+ */
+export function stampPreviewScope(slice, modelJson) {
+    const stamp = { v: STAMP_VERSION, model: modelJson };
+    return { ...slice, [PREVIEW_MODEL_KEY]: stamp };
+}
+/**
+ * The serialized per-slice model `<SliceZone>` stamped on this slice,
+ * or `undefined` when the slice is not preview-scoped (production, a
+ * bare slice, a test stub, or a customer field that happens to share
+ * the `_ssPreview` name but doesn't match the stamp shape).
+ */
+export function getPreviewModel(slice) {
+    if (slice === null || typeof slice !== 'object')
+        return undefined;
+    const v = slice[PREVIEW_MODEL_KEY];
+    // Shape-check, not just presence — the tagged value is what makes
+    // the stamp unforgeable from a string-named customer field.
+    if (v === null || typeof v !== 'object')
+        return undefined;
+    const stamp = v;
+    if (stamp.v !== STAMP_VERSION)
+        return undefined;
+    return typeof stamp.model === 'string' ? stamp.model : undefined;
+}
+/**
+ * Was this slice object stamped by `<SliceZone>` as preview-scoped?
+ * Equivalent to "has a per-slice model" — the two are co-stamped.
+ */
+export function isPreviewScoped(slice) {
+    return getPreviewModel(slice) !== undefined;
+}

package/dist/preview-slice-scope.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { PreviewProvenanceRouteFrameContext } from './preview-provenance.js';
+import type { SliceComponentProps, SliceData } from './slice-zone.js';
+export interface PreviewSliceScopeDescriptor {
+    /** Optional overlay/provenance context; projection freshness does not depend on it. */
+    readonly routeFrame: PreviewProvenanceRouteFrameContext | null;
+    readonly documentId: string;
+    readonly sliceField: string;
+    readonly slicePath: string;
+    readonly sliceKey: string;
+    readonly sliceType: string;
+    readonly sliceIndex: number;
+}
+export interface PreviewSliceScopeInvocation {
+    readonly component: ComponentType<SliceComponentProps>;
+    readonly props: SliceComponentProps<SliceData>;
+    readonly scope: PreviewSliceScopeDescriptor;
+}
+export interface PreviewSliceScopeAdapter {
+    (input: PreviewSliceScopeInvocation): ReactNode | Promise<ReactNode>;
+}
+/**
+ * Installs the framework adapter once. Re-registering the same function is
+ * idempotent; replacing it would make scope ownership import-order dependent.
+ *
+ * @internal
+ */
+export declare function registerPreviewSliceScopeAdapter(adapter: PreviewSliceScopeAdapter): void;
+/** @internal */
+export declare function readPreviewSliceScopeAdapter(): PreviewSliceScopeAdapter | undefined;
+/** Async server functions are the only direct-invocation candidate. */
+export declare function isPreviewSliceDirectInvocationCandidate(component: ComponentType<SliceComponentProps>): boolean;

package/dist/preview-slice-scope.js

@@ -0,0 +1,33 @@
+let installedAdapter;
+/**
+ * Installs the framework adapter once. Re-registering the same function is
+ * idempotent; replacing it would make scope ownership import-order dependent.
+ *
+ * @internal
+ */
+export function registerPreviewSliceScopeAdapter(adapter) {
+    if (installedAdapter === undefined) {
+        installedAdapter = adapter;
+        return;
+    }
+    if (installedAdapter !== adapter) {
+        throw new Error('StorystickError: a different preview slice-scope adapter is already registered.');
+    }
+}
+/** @internal */
+export function readPreviewSliceScopeAdapter() {
+    return installedAdapter;
+}
+/** Async server functions are the only direct-invocation candidate. */
+export function isPreviewSliceDirectInvocationCandidate(component) {
+    const candidate = component;
+    if (candidate.$$typeof !== undefined)
+        return false;
+    if (typeof component === 'function' &&
+        component
+            .prototype?.isReactComponent) {
+        return false;
+    }
+    return (typeof component === 'function' &&
+        component.constructor?.name === 'AsyncFunction');
+}

package/dist/preview-text-props.d.ts

@@ -0,0 +1,18 @@
+export type PreviewTextValue = string | number | boolean | null | undefined;
+export interface PreviewTextProps {
+    readonly children: PreviewTextValue;
+    readonly 'data-ss-p'?: string;
+}
+/**
+ * Render a text field on an existing element without putting Preview metadata
+ * into its text nodes. The carrier remains plain data; the Preview runtime
+ * still validates its frame, read context and receipts before allowing edits.
+ *
+ * Only one complete field can own the element. Composed or partially encoded
+ * strings are cleaned without assigning an owner; render their fields on
+ * separate elements when each needs its own edit target.
+ */
+export declare function previewTextProps(value: string): PreviewTextProps & {
+    readonly children: string;
+};
+export declare function previewTextProps(value: PreviewTextValue): PreviewTextProps;

package/dist/preview-text-props.js

@@ -0,0 +1,13 @@
+import { decodePreviewProvenanceText } from '@storystick/types/internal/preview-provenance';
+export function previewTextProps(value) {
+    if (typeof value !== 'string')
+        return { children: value };
+    const { text, segments } = decodePreviewProvenanceText(value);
+    const segment = segments.length === 1 ? segments[0] : undefined;
+    return {
+        children: text,
+        ...(segment?.markerStart === 0 && segment.markerEnd === value.length
+            ? { 'data-ss-p': segment.markerId }
+            : {}),
+    };
+}

package/dist/preview-toolbar-layout.d.ts

@@ -0,0 +1,42 @@
+/** Geometry of our owned surfaces only. No customer elements participate. */
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface Rect extends Point, Size {
+}
+export type BubbleDock = {
+    edge: 'left' | 'right' | 'bottom';
+    offset: number;
+};
+export type PanelPlacement = Size & ({
+    kind: 'docked';
+    edge: 'left' | 'right';
+} | {
+    kind: 'stretched';
+    x: number;
+} | {
+    kind: 'floating';
+    x: number;
+    y: number;
+});
+export interface ToolbarLayout {
+    bubble: BubbleDock;
+    panel: PanelPlacement;
+}
+export type ResizeEdge = 'n' | 'e' | 's' | 'w' | 'ne' | 'se' | 'sw' | 'nw';
+export declare const TOOLBAR_GAP = 8;
+export declare const PANEL_MIN_SIZE: Size;
+export declare const DEFAULT_TOOLBAR_LAYOUT: ToolbarLayout;
+export declare function bubbleRect(dock: BubbleDock, viewport: Rect): Rect;
+export declare function snapBubble(point: Point, viewport: Rect): BubbleDock;
+export declare function panelRect(placement: PanelPlacement, viewport: Rect, dock: BubbleDock): Rect;
+/** Moving changes attachment; resizing never does. Preferred size survives docking. */
+export declare function placePanel(point: Point, placement: PanelPlacement, viewport: Rect, dock: BubbleDock, snap: boolean): PanelPlacement;
+export declare function panelResizeEdges(placement: PanelPlacement): readonly ResizeEdge[];
+export declare function resizePanel(placement: PanelPlacement, start: Rect, edge: ResizeEdge, delta: Point, viewport: Rect, dock: BubbleDock): PanelPlacement;
+export declare function parseToolbarLayout(value: string | null): ToolbarLayout;

package/dist/preview-toolbar-layout.js

@@ -0,0 +1,139 @@
+export const TOOLBAR_GAP = 8;
+export const PANEL_MIN_SIZE = { width: 360, height: 480 };
+export const DEFAULT_TOOLBAR_LAYOUT = {
+    bubble: { edge: 'bottom', offset: 1 },
+    panel: { kind: 'docked', edge: 'right', width: 460, height: 720 },
+};
+const BUBBLE_SIZE = 40;
+const DOCK_DISTANCE = 24;
+const clamp = (n, min, max) => Math.max(min, Math.min(Math.max(min, max), n));
+const fraction = (n, length) => length > 0 ? clamp(n / length, 0, 1) : 0;
+export function bubbleRect(dock, viewport) {
+    const width = Math.min(BUBBLE_SIZE, viewport.width);
+    const height = Math.min(BUBBLE_SIZE, viewport.height);
+    const x = viewport.x + Math.min(TOOLBAR_GAP, (viewport.width - width) / 2);
+    const y = viewport.y + Math.min(TOOLBAR_GAP, (viewport.height - height) / 2);
+    const travelX = Math.max(0, viewport.width - width - TOOLBAR_GAP * 2);
+    const travelY = Math.max(0, viewport.height - height - TOOLBAR_GAP * 2);
+    return { x: x + (dock.edge === 'bottom' ? travelX * dock.offset : dock.edge === 'right' ? travelX : 0),
+        y: y + (dock.edge === 'bottom' ? travelY : travelY * dock.offset), width, height };
+}
+export function snapBubble(point, viewport) {
+    const left = bubbleRect({ edge: 'left', offset: 0 }, viewport);
+    const right = bubbleRect({ edge: 'right', offset: 1 }, viewport);
+    const x = clamp(point.x, left.x, right.x);
+    const y = clamp(point.y, left.y, right.y);
+    // Bottom wins a corner tie, preserving the initial panel-above-bubble layout.
+    const distance = Math.min(x - left.x, right.x - x, right.y - y);
+    if (distance === right.y - y)
+        return { edge: 'bottom', offset: fraction(x - left.x, right.x - left.x) };
+    return { edge: distance === x - left.x ? 'left' : 'right', offset: fraction(y - left.y, right.y - left.y) };
+}
+function panelArea(viewport, dock) {
+    const bubble = bubbleRect(dock, viewport);
+    const left = dock.edge === 'left' ? bubble.x + bubble.width + TOOLBAR_GAP : viewport.x + TOOLBAR_GAP;
+    const right = dock.edge === 'right' ? bubble.x - TOOLBAR_GAP : viewport.x + viewport.width - TOOLBAR_GAP;
+    return { x: left, y: viewport.y + TOOLBAR_GAP, width: Math.max(0, right - left), height: Math.max(0, viewport.height - TOOLBAR_GAP * 2) };
+}
+function panelSpace(x, width, viewport, dock) {
+    const area = panelArea(viewport, dock);
+    const bubble = bubbleRect(dock, viewport);
+    const overlapsBottom = dock.edge === 'bottom' && x < bubble.x + bubble.width + TOOLBAR_GAP && x + width > bubble.x - TOOLBAR_GAP;
+    const bottom = overlapsBottom ? bubble.y - TOOLBAR_GAP : area.y + area.height;
+    return { ...area, height: Math.max(0, bottom - area.y) };
+}
+export function panelRect(placement, viewport, dock) {
+    const area = panelArea(viewport, dock);
+    const width = Math.min(placement.width, area.width);
+    const x = area.x + (area.width - width) * (placement.kind === 'docked' ? placement.edge === 'right' ? 1 : 0 : placement.x);
+    const space = panelSpace(x, width, viewport, dock);
+    const height = placement.kind === 'floating' ? Math.min(placement.height, space.height) : space.height;
+    const y = space.y + (placement.kind === 'floating' ? (space.height - height) * placement.y : 0);
+    return { x, y, width, height };
+}
+/** Moving changes attachment; resizing never does. Preferred size survives docking. */
+export function placePanel(point, placement, viewport, dock, snap) {
+    const area = panelArea(viewport, dock);
+    const width = Math.min(placement.width, area.width);
+    const travelX = area.width - width;
+    const x = clamp(point.x, area.x, area.x + travelX);
+    const space = panelSpace(x, width, viewport, dock);
+    const height = placement.kind === 'floating' ? placement.height
+        : Math.min(placement.height, Math.max(PANEL_MIN_SIZE.height, space.height * .8));
+    const size = { width: placement.width, height };
+    if (snap && x - area.x <= DOCK_DISTANCE)
+        return { ...size, kind: 'docked', edge: 'left' };
+    if (snap && area.x + travelX - x <= DOCK_DISTANCE)
+        return { ...size, kind: 'docked', edge: 'right' };
+    const travelY = Math.max(0, space.height - height);
+    const y = clamp(point.y, space.y, space.y + travelY);
+    const normalizedX = fraction(x - area.x, travelX);
+    if (snap && (y - space.y <= DOCK_DISTANCE || space.y + travelY - y <= DOCK_DISTANCE)) {
+        return { ...size, kind: 'stretched', x: normalizedX };
+    }
+    return { ...size, kind: 'floating', x: normalizedX, y: fraction(y - space.y, travelY) };
+}
+const FLOATING_EDGES = ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'];
+export function panelResizeEdges(placement) {
+    return placement.kind === 'docked' ? [placement.edge === 'left' ? 'e' : 'w']
+        : placement.kind === 'stretched' ? ['e', 'w'] : FLOATING_EDGES;
+}
+export function resizePanel(placement, start, edge, delta, viewport, dock) {
+    if (!panelResizeEdges(placement).includes(edge))
+        return placement;
+    const area = panelArea(viewport, dock);
+    const bubble = bubbleRect(dock, viewport);
+    let minX = area.x;
+    let maxX = area.x + area.width;
+    // A low floating window cannot grow sideways through the bottom bubble.
+    // Keep the opposite edge fixed; full-height panels instead adapt their height.
+    if (placement.kind === 'floating' && dock.edge === 'bottom' && start.y + start.height > bubble.y - TOOLBAR_GAP) {
+        if (start.x + start.width <= bubble.x - TOOLBAR_GAP)
+            maxX = bubble.x - TOOLBAR_GAP;
+        else if (start.x >= bubble.x + bubble.width + TOOLBAR_GAP)
+            minX = bubble.x + bubble.width + TOOLBAR_GAP;
+    }
+    let left = start.x;
+    let right = start.x + start.width;
+    const minWidth = Math.min(PANEL_MIN_SIZE.width, start.width);
+    if (edge.includes('w'))
+        left = clamp(left + delta.x, minX, right - minWidth);
+    if (edge.includes('e'))
+        right = clamp(right + delta.x, left + minWidth, maxX);
+    const width = right - left;
+    const x = fraction(left - area.x, area.width - width);
+    const preferredWidth = Math.max(PANEL_MIN_SIZE.width, width);
+    if (placement.kind === 'docked')
+        return { ...placement, width: preferredWidth };
+    if (placement.kind === 'stretched')
+        return { ...placement, x, width: preferredWidth };
+    const space = panelSpace(left, width, viewport, dock);
+    let top = start.y;
+    let bottom = start.y + start.height;
+    const minHeight = Math.min(PANEL_MIN_SIZE.height, start.height);
+    if (edge.includes('n'))
+        top = clamp(top + delta.y, space.y, bottom - minHeight);
+    if (edge.includes('s'))
+        bottom = clamp(bottom + delta.y, top + minHeight, space.y + space.height);
+    const height = bottom - top;
+    return { kind: 'floating', x, y: fraction(top - space.y, space.height - height),
+        width: preferredWidth, height: Math.max(PANEL_MIN_SIZE.height, height) };
+}
+export function parseToolbarLayout(value) {
+    try {
+        const data = JSON.parse(value ?? 'null');
+        const unit = (n) => typeof n === 'number' && Number.isFinite(n) && n >= 0 && n <= 1;
+        const dimension = (n, min) => typeof n === 'number' && Number.isFinite(n) && n >= min;
+        if (!data || !['left', 'right', 'bottom'].includes(data.bubble?.edge) || !unit(data.bubble.offset))
+            return DEFAULT_TOOLBAR_LAYOUT;
+        const panel = data.panel;
+        if (!dimension(panel?.width, PANEL_MIN_SIZE.width) || !dimension(panel?.height, PANEL_MIN_SIZE.height))
+            return DEFAULT_TOOLBAR_LAYOUT;
+        if (panel.kind === 'docked' && ['left', 'right'].includes(panel.edge) ||
+            panel.kind === 'stretched' && unit(panel.x) ||
+            panel.kind === 'floating' && unit(panel.x) && unit(panel.y))
+            return { bubble: data.bubble, panel };
+    }
+    catch { /* An unavailable or stale preference does not prevent opening the UI. */ }
+    return DEFAULT_TOOLBAR_LAYOUT;
+}

package/dist/preview-toolbar-panel.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps, ReactNode, RefObject } from 'react';
+/** The same movable frame hosts the retained editor and assistant. */
+export declare function PreviewToolbarPanel({ open, label, onClose, panelRef, handleProps, resizeHandles, leading, trailing, children, }: {
+    open: boolean;
+    label: string;
+    onClose(): void;
+    panelRef: RefObject<HTMLElement | null>;
+    handleProps: ComponentProps<'button'>;
+    resizeHandles: ReactNode;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/preview-toolbar-panel.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from './preview-icons.js';
+/** The same movable frame hosts the retained editor and assistant. */
+export function PreviewToolbarPanel({ open, label, onClose, panelRef, handleProps, resizeHandles, leading, trailing, children, }) {
+    return (_jsxs("section", { ref: panelRef, className: "editor-panel", "aria-label": label, hidden: !open, inert: !open, children: [_jsxs("div", { className: "panel-contents", children: [_jsxs("header", { className: "panel-header", children: [leading, _jsx("button", { type: "button", className: "panel-drag-handle", "aria-label": `Move ${label} panel`, title: "Drag to move. Arrow keys move; Alt + Up/Down fills the height; Home and End dock to a side.", ...handleProps, children: label }), trailing, _jsx("button", { type: "button", className: "panel-close", "aria-label": `Close ${label}`, onClick: onClose, children: _jsx(X, { size: 16, strokeWidth: 1.25, absoluteStrokeWidth: true, "aria-hidden": "true" }) })] }), _jsx("div", { className: "panel-body", children: children })] }), resizeHandles] }));
+}

package/dist/preview-toolbar-resize-handles.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+import type { ResizeEdge, Size } from './preview-toolbar-layout.js';
+/** Resize affordances belong to the window frame, never to its hosted content. */
+export declare function PreviewToolbarResizeHandles({ label, edges, size, handleProps }: {
+    label: string;
+    edges: readonly ResizeEdge[];
+    size: Size;
+    handleProps(edge: ResizeEdge): ComponentProps<'button'>;
+}): import("react").JSX.Element[];

package/dist/preview-toolbar-resize-handles.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ResizeEdgeIndicator } from './resize-edge.js';
+const EDGE_LABELS = {
+    n: 'top', e: 'right', s: 'bottom', w: 'left',
+    ne: 'top right', se: 'bottom right', sw: 'bottom left', nw: 'top left',
+};
+/** Resize affordances belong to the window frame, never to its hosted content. */
+export function PreviewToolbarResizeHandles({ label, edges, size, handleProps }) {
+    return edges.map(edge => _jsx("button", { type: "button", className: "panel-resize-handle", "data-resize-edge": edge, "data-ss-resize-handle": "", "aria-label": `Resize ${label} from ${EDGE_LABELS[edge]}`, "aria-description": `${Math.round(size.width)} by ${Math.round(size.height)} pixels. Use arrow keys to resize; hold Shift for larger steps.`, ...handleProps(edge), children: edge === 'w' || edge === 'e'
+            ? _jsx(ResizeEdgeIndicator, { style: { left: edge === 'w' ? 3 : 4 } })
+            : edge === 'n' || edge === 's'
+                ? _jsx(ResizeEdgeIndicator, { orientation: "horizontal", style: { top: edge === 'n' ? 3 : 4 } })
+                : null }, edge));
+}

package/dist/preview-toolbar-shell.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode, type RefObject } from "react";
+/** The host owns admission and active content; this shell owns presentation. */
+export declare function PreviewToolbarShell(props: {
+    menuOpen: boolean;
+    panelOpen: boolean;
+    menu: ReactNode;
+    panel: ReactNode;
+    panelLabel: string;
+    panelLeading?: ReactNode;
+    panelTrailing?: ReactNode;
+    onMenuOpenChange(open: boolean): void;
+    onPanelClose(): void;
+    onRoot?: (root: ShadowRoot) => void;
+    hostRef?: RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+export declare function PreviewEditIcon(): import("react").JSX.Element;
+export declare function PreviewAssistantIcon(): import("react").JSX.Element;
+export declare function PreviewStudioIcon(): import("react").JSX.Element;