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

package/dist/preview-toolbar-shell.js

@@ -0,0 +1,144 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import { ArrowUpRight, MessageCircle, SquarePen } from "./preview-icons.js";
+import { Popover } from "@base-ui/react/popover";
+import { PreviewToolbarPanel } from "./preview-toolbar-panel.js";
+import { PreviewToolbarResizeHandles } from "./preview-toolbar-resize-handles.js";
+import { TOOLBAR_GAP } from "./preview-toolbar-layout.js";
+import { usePreviewToolbarLayout } from "./use-preview-toolbar-layout.js";
+import { StorystickMark } from "./storystick-mark.js";
+/** The host owns admission and active content; this shell owns presentation. */
+export function PreviewToolbarShell(props) {
+    const ownHost = useRef(null);
+    const host = props.hostRef ?? ownHost;
+    const [root, setRoot] = useState(null);
+    useEffect(() => {
+        if (!host.current)
+            return;
+        const shadow = host.current.shadowRoot ?? host.current.attachShadow({ mode: "open" });
+        setRoot(shadow);
+        props.onRoot?.(shadow);
+    }, [host, props.onRoot]);
+    return _jsx("div", { ref: host, "data-storystick-preview-controls": "", style: { all: "initial", position: "fixed", zIndex: 2147483647, top: 0, left: 0, width: 0, height: 0 }, children: root ? createPortal(_jsx(ToolbarContents, { ...props, root: root }), root) : null });
+}
+function ToolbarContents({ root, menuOpen, panelOpen, menu, panel, panelLabel, panelTitle, panelLeading, panelTrailing, onMenuOpenChange, onPanelClose }) {
+    const layout = usePreviewToolbarLayout(() => onMenuOpenChange(false));
+    const menuRef = useRef(null);
+    const [shell, setShell] = useState(null);
+    useEffect(() => {
+        if (!menuOpen)
+            return;
+        // Click to Edit consumes customer-page events at document capture. Observe
+        // outside presses above that boundary, leaving owned menus to Base UI.
+        const onPagePress = (event) => {
+            if (!event.composedPath().includes(root))
+                onMenuOpenChange(false);
+        };
+        const win = root.ownerDocument.defaultView;
+        win?.addEventListener('pointerdown', onPagePress, true);
+        return () => win?.removeEventListener('pointerdown', onPagePress, true);
+    }, [menuOpen, onMenuOpenChange, root]);
+    function closePanel() {
+        onPanelClose();
+        layout.bubble.current?.focus({ preventScroll: true });
+    }
+    return _jsxs(_Fragment, { children: [_jsx("style", { children: CONTROL_STYLES }), _jsxs("div", { ref: setShell, className: "storystick-shell", "data-ss-surface": "", dir: "ltr", children: [_jsx(PreviewToolbarPanel, { open: panelOpen, label: panelLabel, onClose: closePanel, leading: panelLeading, title: panelTitle, trailing: panelTrailing, panelRef: layout.panel, handleProps: { ...layout.panelDrag, onKeyDown: layout.onPanelKeyDown }, resizeHandles: _jsx(PreviewToolbarResizeHandles, { label: panelLabel, edges: layout.resizeEdges, size: layout.panelBounds, handleProps: layout.resizeHandleProps }), children: panel }), _jsxs(Popover.Root, { open: menuOpen, modal: false, onOpenChange: (open, details) => {
+                            // Runtime menus live in a second React root, but remain part of this
+                            // dropdown interaction. Their owned portals must not dismiss its parent.
+                            const portals = root.querySelector('[data-storystick-authoring-portals]');
+                            if (!open && details.reason === 'outside-press' && details.event.composedPath().some(node => node === menuRef.current || node === portals)) {
+                                details.cancel();
+                                return;
+                            }
+                            if (!open && details.reason === 'focus-out' && portals?.contains(root.activeElement)) {
+                                details.cancel();
+                                return;
+                            }
+                            onMenuOpenChange(open);
+                        }, children: [_jsx(Popover.Trigger, { ref: layout.bubble, className: "bubble", "aria-label": menuOpen ? "Close Storystick" : "Open Storystick", title: "Drag to move. Alt + arrow keys change position.", ...layout.bubbleDrag, onKeyDown: layout.onBubbleKeyDown, children: _jsx(StorystickMark, { className: "storystick-brand" }) }), _jsx(Popover.Portal, { container: shell, keepMounted: true, children: _jsx(Popover.Positioner, { className: "menu-positioner", positionMethod: "fixed", side: layout.dock === 'left' ? 'right' : layout.dock === 'right' ? 'left' : 'top', align: layout.dock === 'bottom' ? 'end' : 'center', sideOffset: TOOLBAR_GAP, collisionPadding: TOOLBAR_GAP, children: _jsx(Popover.Popup, { ref: menuRef, className: "menu", "aria-label": "Storystick Preview", initialFocus: type => type === 'keyboard', children: _jsx("nav", { "aria-label": "Storystick Preview controls", hidden: !menuOpen, children: menu }) }) }) })] })] })] });
+}
+export function PreviewEditIcon() {
+    return _jsx(SquarePen, { className: "storystick-control-icon", size: 16, absoluteStrokeWidth: true, strokeWidth: 1.25, "aria-hidden": "true" });
+}
+export function PreviewAssistantIcon() {
+    return _jsx(MessageCircle, { className: "storystick-control-icon", size: 16, absoluteStrokeWidth: true, strokeWidth: 1.25, "aria-hidden": "true" });
+}
+export function PreviewStudioIcon() {
+    return _jsx(ArrowUpRight, { className: "storystick-control-icon", size: 16, absoluteStrokeWidth: true, strokeWidth: 1.25, "aria-hidden": "true" });
+}
+const CONTROL_STYLES = `
+  * { box-sizing: border-box; }
+  :is(.bubble, .menu-action, .panel-close, .panel-drag-handle, .notices button) { font: inherit; }
+  :is(.bubble, .menu-action, .panel-close, .panel-drag-handle, .notices button) { cursor: pointer; }
+  .storystick-control-icon { width: 16px; height: 16px; flex: none; }
+  /* Studio tokens arrive with the lazy authoring stylesheet. The initial shell
+     uses their light values too, without loading the editor just to paint it. */
+  .storystick-shell { position: fixed; inset: 0; pointer-events: none; color-scheme: light; font: 14px/18px "Storystick Inter", "Inter Variable", ui-sans-serif, system-ui, sans-serif; color: var(--ss-text-primary, oklch(0.2 0.007 258.364)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
+  .bubble { pointer-events: auto; touch-action: none; user-select: none; position: fixed; top: 0; left: 0; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; color: inherit; background: var(--ss-surface-card, #fff); border: 0; border-radius: 999px; transition: background-color 140ms ease, transform 180ms ease-out; }
+  .bubble:hover { background: var(--ss-surface-field, oklch(0.958 0.001 255)); }
+  .bubble:focus-visible, .menu-action:focus-visible, .panel-close:focus-visible, .panel-drag-handle:focus-visible { outline: 2px solid var(--ss-focus-color, oklch(0.614 0.194 257)); outline-offset: -2px; }
+  .storystick-brand { width: 14px; height: 13px; transform: rotate(90deg); }
+  .menu-positioner { z-index: 3; pointer-events: auto; }
+  .menu { width: min(240px, calc(100vw - ${TOOLBAR_GAP * 2}px)); max-height: min(var(--available-height), calc(100dvh - ${TOOLBAR_GAP * 2}px)); overflow: auto; overscroll-behavior: contain; padding: 5px; }
+  /* Keep the bubble's relief stable before and after the authoring styles load. */
+  .bubble { box-shadow: 0 0 1px rgb(0 0 0 / 0.34), 0 2px 6px -1px rgb(0 0 0 / 0.12), 0 8px 20px -6px rgb(0 0 0 / 0.18); }
+  .menu, .editor-panel { box-shadow: 0 0 0 1px rgb(0 0 0 / 0.07), 0 4px 12px -2px rgb(0 0 0 / 0.1), 0 16px 40px -10px rgb(0 0 0 / 0.2); border: 0; }
+  .menu { background: var(--ss-surface-card, #fff); border-radius: var(--ss-radius-2xl, 19px); }
+  .menu-group { display: flex; flex-direction: column; gap: 2px; }
+  .menu-group-label { display: flex; align-items: center; min-height: 25px; padding: 4px 10px; color: var(--ss-text-tertiary, oklch(0.515 0.006 258.364)); font-size: 13px; line-height: 17px; font-weight: 500; }
+  .menu-group-content { padding: 0 10px 5px; }
+  .menu-context-loading { display: flex; gap: 8px; height: 32px; }
+  .menu-context-loading span { width: 88px; border-radius: 999px; background: var(--ss-surface-widget, #f0f0f0); }
+  .menu-context-loading span:last-child { width: 56px; }
+  .menu-separator { margin: 5px 10px; border-top: 1px solid var(--ss-border-separator, oklch(0.958 0.001 255)); }
+  .menu-action { width: 100%; min-height: 28px; display: flex; align-items: center; gap: 8px; padding: 5px 10px; color: inherit; text-decoration: none; text-align: left; font-size: 14px; line-height: 18px; font-weight: 400; background: transparent; border: 0; border-radius: var(--ss-radius-md, 7px); }
+  .menu-action + .menu-action { margin-block-start: 2px; }
+  .menu-action:hover { background: var(--ss-surface-field, oklch(0.958 0.001 255)); }
+  .menu-action:disabled { opacity: .45; cursor: default; }
+  .menu-action:disabled:hover { background: transparent; }
+  .notices { margin-top: 5px; padding: 5px 10px; color: var(--ss-text-tertiary, oklch(0.515 0.006 258.364)); border-top: 1px solid var(--ss-border-separator, oklch(0.958 0.001 255)); font-size: 12px; line-height: 16px; }
+  .notices p { margin: 4px 0; }
+  .notices button { padding: 0; color: inherit; background: none; border: 0; text-decoration: underline; }
+  .editor-panel { --ss-surface-page: var(--ss-surface-workspace, #fafafa); background: var(--ss-surface-page); border-radius: var(--ss-radius-bubble, 26px); pointer-events: auto; position: fixed; top: 0; left: 0; z-index: 1; }
+  /* Runtime roots carry theme defaults; their page ground belongs to this host. */
+  .editor-panel [data-ss-surface] { --ss-surface-page: inherit; }
+  .panel-contents { height: 100%; overflow: hidden; border-radius: inherit; display: grid; grid-template-rows: calc(2 * var(--ss-radius-bubble, 26px)) minmax(0, 1fr); }
+  .editor-panel[hidden] { display: none; }
+  /* The close control has an 18px radius; its inset keeps both curves concentric. */
+  .panel-header { display: flex; align-items: center; gap: 4px; padding: 0 calc(var(--ss-radius-bubble, 26px) - 18px); }
+  .panel-header > [data-ss-surface] { display: flex; flex: none; }
+  .panel-header > [data-ss-surface]:empty { display: none; }
+  .panel-drag-handle { min-width: 0; align-self: stretch; flex: 1; text-align: left; font-weight: 500; color: var(--ss-text-secondary, #52525b); background: none; border: 0; padding: 0; border-radius: 7px; touch-action: none; user-select: none; cursor: grab; }
+  .panel-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .panel-title:empty::before { content: attr(data-placeholder); }
+  .panel-drag-handle:first-child, .panel-header > :empty + .panel-drag-handle { padding-inline-start: 10px; }
+  .panel-close { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 999px; color: var(--ss-text-secondary, #52525b); background: none; }
+  .panel-close:hover { background: var(--ss-surface-field, #f4f4f5); }
+  .panel-body { position: relative; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
+  .panel-resize-handle { --ss-resize-edge-inset: max(0px, calc(var(--ss-radius-bubble, 26px) - 12px)); position: absolute; z-index: 3; border: 0; padding: 0; background: transparent; touch-action: none; user-select: none; }
+  .panel-resize-handle:focus-visible { outline: 2px solid var(--ss-focus-color, oklch(0.614 0.194 257)); outline-offset: -2px; border-radius: 4px; }
+  .panel-resize-handle:is([data-resize-edge="n"], [data-resize-edge="s"]) { left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
+  .panel-resize-handle:is([data-resize-edge="e"], [data-resize-edge="w"]) { top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
+  .panel-resize-handle[data-resize-edge="n"] { top: -4px; }
+  .panel-resize-handle[data-resize-edge="s"] { bottom: -4px; }
+  .panel-resize-handle[data-resize-edge="e"] { right: -4px; }
+  .panel-resize-handle[data-resize-edge="w"] { left: -4px; }
+  .panel-resize-handle:is([data-resize-edge="ne"], [data-resize-edge="se"], [data-resize-edge="sw"], [data-resize-edge="nw"]) { width: 16px; height: 16px; }
+  .panel-resize-handle[data-resize-edge="ne"] { top: -4px; right: -4px; cursor: nesw-resize; }
+  .panel-resize-handle[data-resize-edge="se"] { bottom: -4px; right: -4px; cursor: nwse-resize; }
+  .panel-resize-handle[data-resize-edge="sw"] { bottom: -4px; left: -4px; cursor: nesw-resize; }
+  .panel-resize-handle[data-resize-edge="nw"] { top: -4px; left: -4px; cursor: nwse-resize; }
+  .bubble[data-dragging], .editor-panel[data-dragging] .panel-drag-handle { cursor: grabbing; }
+  .bubble[data-dragging] { transition: none; }
+  .editor-mount { min-height: 0; overflow: hidden; background: var(--ss-surface-page); }
+  .editor-mount > [data-storystick-authoring-root] { height: 100%; }
+  .editor-empty, .editor-loading { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; padding: 24px; text-align: center; color: #52525b; background: var(--ss-surface-page); }
+  .panel-state-overlay { position: absolute; inset: 0; z-index: 2; min-height: 0; }
+  .editor-empty svg { width: 28px; height: 28px; margin-bottom: 12px; }
+  .editor-empty strong { color: #18181b; }
+  .editor-empty p { margin: 4px 0 0; }
+  .editor-loading { display: block; padding: 0; }
+  @media (prefers-reduced-motion: reduce) { .bubble { transition: none; } }
+`;

package/dist/public-rich-text.d.ts

@@ -0,0 +1,15 @@
+import { type RichTextInlineProps as InternalRichTextInlineProps, type RichTextProps as InternalRichTextProps, type RichTextRenderMode } from './rich-text.js';
+import type { RichTextComponentTypes, RichTextValue } from '@storystick/types';
+export { toText } from './rich-text.js';
+export type { RichTextCustomMarkComponentProps, RichTextBlockComponentProps, RichTextCodeComponentProps, RichTextComponents, RichTextLinkMarkComponentProps, RichTextListComponentProps, RichTextMarkComponentProps, RichTextNode, RichTextMark, RichTextOrderedListComponentProps, RichTextRenderMode, } from './rich-text.js';
+export type RichTextProps<TContent = unknown, TMode extends RichTextRenderMode = 'permissive', TContext = unknown> = Omit<InternalRichTextProps<TContent, TMode, TContext>, 'sliceField' | 'parentPath' | 'parentAnchors' | 'content'> & {
+    content: TContent;
+};
+export type RichTextInlineProps<TContent extends RichTextValue<string, true, RichTextComponentTypes>, TMode extends RichTextRenderMode = 'permissive', TContext = unknown> = Omit<InternalRichTextInlineProps<TContent, TMode, TContext>, 'sliceField' | 'parentPath' | 'parentAnchors' | 'content'> & {
+    content: TContent | null | undefined;
+};
+declare function RichTextRoot<TContent = unknown, TMode extends RichTextRenderMode = 'permissive', TContext = unknown>(props: RichTextProps<TContent, TMode, TContext>): import("react").ReactNode;
+declare function RichTextInline<TContent extends RichTextValue<string, true, RichTextComponentTypes>, TMode extends RichTextRenderMode = 'permissive', TContext = unknown>(props: RichTextInlineProps<TContent, TMode, TContext>): import("react").ReactNode;
+export declare const RichText: typeof RichTextRoot & {
+    Inline: typeof RichTextInline;
+};

package/dist/public-rich-text.js

@@ -0,0 +1,11 @@
+import { RichText as RenderRichText, } from './rich-text.js';
+export { toText } from './rich-text.js';
+function RichTextRoot(props) {
+    return RenderRichText(props);
+}
+function RichTextInline(props) {
+    return RenderRichText.Inline(props);
+}
+export const RichText = Object.assign(RichTextRoot, {
+    Inline: RichTextInline,
+});

package/dist/public-slice-zone.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import { type SliceZoneProps as InternalSliceZoneProps, type SliceData } from './slice-zone.js';
+import { ZoneSlot } from './slice-zone.js';
+export { ZoneSlot };
+export type { SliceComponentProps, SliceComponentRegistry, SliceContract, SliceContractRegistry, SliceData, SliceFallback, SliceRenderFailure, SliceRenderFailureHandler, ZoneSlotDescriptor, ZoneSlotKind, ZoneSlotProps, } from './slice-zone.js';
+export type SliceZoneProps<TMap extends object = Record<string, SliceData>, TContext = unknown, TZones extends Record<string, ReactNode> = Record<string, ReactNode>> = Omit<InternalSliceZoneProps<TMap, TContext, TZones>, 'sliceField' | 'parentPath' | 'parentAnchors'>;
+export declare function SliceZone<TMap extends object = Record<string, SliceData>, TContext = unknown, TZones extends Record<string, ReactNode> = Record<string, ReactNode>>(props: SliceZoneProps<TMap, TContext, TZones>): import("react").JSX.Element | null;

package/dist/public-slice-zone.js

@@ -0,0 +1,6 @@
+import { SliceZone as RenderSliceZone, } from './slice-zone.js';
+import { ZoneSlot } from './slice-zone.js';
+export { ZoneSlot };
+export function SliceZone(props) {
+    return RenderSliceZone(props);
+}

package/dist/query-cache.d.ts

@@ -0,0 +1,14 @@
+import { QueryClient, QueryObserver, type QueryKey, type QueryObserverOptions } from '@tanstack/query-core';
+import type { Client } from '@storystick/client';
+export declare const QUERY_GC_TIME_MS: number;
+export declare function queryCoreClientFor(client: Client): QueryClient;
+export declare function queryCacheKey(client: Client, canonical: string, locale: string, cursor: string | null, contextEpoch?: string): readonly unknown[];
+export declare function createRefCountedObserver<TData, TError>(client: Client, options: QueryObserverOptions<TData, TError, TData, TData, QueryKey>): QueryObserver<TData, TError>;
+export declare function subscribeRefCounted<TData, TError>(client: Client, observer: QueryObserver<TData, TError>, listener: () => void, targetingOwner?: Client): () => void;
+export declare function registerPreviewQueryReceipt(owner: Client, executionClient: Client, queryKey: QueryKey, result: unknown): void;
+export declare function previewQueryHasConfirmedCoverage(executionClient: Client, result: unknown): boolean;
+export declare function previewQueryIsAwaitingTargetedProjection(executionClient: Client, result: unknown): boolean;
+export declare function convergeQueryProjection(client: Client, queryKey: QueryKey, projectionHash: string): void;
+export declare const __test: {
+    hasPreviewTargetingCoordinator(executionClient: Client): boolean;
+};

package/dist/query-cache.js

@@ -0,0 +1,289 @@
+import { getInternalClientRuntime } from '@storystick/client/internal';
+import { QueryClient, QueryObserver, } from '@tanstack/query-core';
+import { getPreviewQueryReceiptId } from '@storystick/client/internal';
+import { getQueryPreviewState } from './query-preview-loader.js';
+import { previewGenerationFor, } from './preview-generation.js';
+const QUERY_CLIENTS = new WeakMap();
+const OBSERVER_COUNTS = new WeakMap();
+const PROJECTION_CONVERGENCE = new WeakMap();
+const TARGETING_COORDINATORS = new WeakMap();
+export const QUERY_GC_TIME_MS = 5 * 60 * 1_000;
+export function queryCoreClientFor(client) {
+    const existing = QUERY_CLIENTS.get(client);
+    if (existing)
+        return existing;
+    const created = new QueryClient({
+        defaultOptions: {
+            queries: {
+                retry: false,
+                staleTime: Infinity,
+                gcTime: QUERY_GC_TIME_MS,
+                refetchOnMount: false,
+                refetchOnWindowFocus: false,
+                refetchOnReconnect: false,
+            },
+        },
+    });
+    QUERY_CLIENTS.set(client, created);
+    return created;
+}
+export function queryCacheKey(client, canonical, locale, cursor, contextEpoch = getInternalClientRuntime(client).contextEpoch) {
+    return [
+        'storystick-query-v2',
+        client.projectId,
+        contextEpoch,
+        locale,
+        cursor,
+        canonical,
+    ];
+}
+export function createRefCountedObserver(client, options) {
+    return new QueryObserver(queryCoreClientFor(client), options);
+}
+export function subscribeRefCounted(client, observer, listener, targetingOwner = client) {
+    const queryClient = queryCoreClientFor(client);
+    let counts = OBSERVER_COUNTS.get(queryClient);
+    if (!counts) {
+        counts = new Map();
+        OBSERVER_COUNTS.set(queryClient, counts);
+    }
+    const key = JSON.stringify(observer.options.queryKey);
+    counts.set(key, (counts.get(key) ?? 0) + 1);
+    const targeting = targetingOwner === client
+        ? null
+        : previewTargetingCoordinator(targetingOwner, client);
+    targeting?.listeners.add(listener);
+    if (targeting)
+        retainPreviewTargeting(targetingOwner, client);
+    const unsubscribe = observer.subscribe(listener);
+    let active = true;
+    return () => {
+        if (!active)
+            return;
+        active = false;
+        unsubscribe();
+        const remaining = Math.max(0, (counts.get(key) ?? 1) - 1);
+        if (remaining === 0) {
+            counts.delete(key);
+            if (targeting)
+                unregisterPreviewQueryKey(targeting, key);
+            if (queryClient.isFetching({ queryKey: observer.options.queryKey, exact: true }) > 0) {
+                void queryClient.cancelQueries({ queryKey: observer.options.queryKey, exact: true });
+            }
+        }
+        else {
+            counts.set(key, remaining);
+        }
+        targeting?.listeners.delete(listener);
+        if (targeting)
+            releasePreviewTargeting(client);
+    };
+}
+export function registerPreviewQueryReceipt(owner, executionClient, queryKey, result) {
+    const coordinator = previewTargetingCoordinator(owner, executionClient);
+    const identity = JSON.stringify(queryKey);
+    const previous = coordinator.receiptByQuery.get(identity);
+    const receiptId = getPreviewQueryReceiptId(result);
+    if (previous === receiptId)
+        return;
+    if (previous) {
+        const previousQueries = coordinator.queriesByReceipt.get(previous);
+        previousQueries?.delete(identity);
+        if (previousQueries?.size === 0) {
+            coordinator.queriesByReceipt.delete(previous);
+        }
+    }
+    if (!receiptId) {
+        coordinator.receiptByQuery.delete(identity);
+        return;
+    }
+    coordinator.receiptByQuery.set(identity, receiptId);
+    let queries = coordinator.queriesByReceipt.get(receiptId);
+    if (!queries) {
+        queries = new Map();
+        coordinator.queriesByReceipt.set(receiptId, queries);
+    }
+    queries.set(identity, queryKey);
+}
+export function previewQueryHasConfirmedCoverage(executionClient, result) {
+    const coordinator = TARGETING_COORDINATORS.get(queryCoreClientFor(executionClient));
+    const receiptId = getPreviewQueryReceiptId(result);
+    return receiptId !== null && coordinator?.covered.has(receiptId) === true;
+}
+export function previewQueryIsAwaitingTargetedProjection(executionClient, result) {
+    const coordinator = TARGETING_COORDINATORS.get(queryCoreClientFor(executionClient));
+    const receiptId = getPreviewQueryReceiptId(result);
+    return receiptId !== null &&
+        coordinator?.pendingEvent?.queryTargeting?.affectedQueryReceiptIds.includes(receiptId) === true;
+}
+export function convergeQueryProjection(client, queryKey, projectionHash) {
+    const queryClient = queryCoreClientFor(client);
+    const current = queryClient.getQueryData(queryKey);
+    const identity = JSON.stringify(queryKey);
+    if (current?.meta.projectionHash === projectionHash) {
+        PROJECTION_CONVERGENCE.get(queryClient)?.delete(identity);
+        return;
+    }
+    let pending = PROJECTION_CONVERGENCE.get(queryClient);
+    if (!pending) {
+        pending = new Map();
+        PROJECTION_CONVERGENCE.set(queryClient, pending);
+    }
+    const existing = pending.get(identity);
+    if (existing?.projectionHash === projectionHash) {
+        scheduleProjectionRefetch(queryClient, pending, identity, queryKey, existing);
+        return;
+    }
+    const request = { projectionHash, attempted: false };
+    pending.set(identity, request);
+    scheduleProjectionRefetch(queryClient, pending, identity, queryKey, request);
+}
+function previewTargetingCoordinator(owner, executionClient) {
+    const queryClient = queryCoreClientFor(executionClient);
+    const existing = TARGETING_COORDINATORS.get(queryClient);
+    if (existing)
+        return existing;
+    const coordinator = {
+        receiptByQuery: new Map(),
+        queriesByReceipt: new Map(),
+        covered: new Set(),
+        retainCount: 0,
+        stopRuntime: null,
+        stopGeneration: null,
+        pendingEvent: null,
+        delivered: new Set(),
+        listeners: new Set(),
+    };
+    TARGETING_COORDINATORS.set(queryClient, coordinator);
+    return coordinator;
+}
+function retainPreviewTargeting(owner, executionClient) {
+    const queryClient = queryCoreClientFor(executionClient);
+    const coordinator = previewTargetingCoordinator(owner, executionClient);
+    coordinator.retainCount += 1;
+    if (coordinator.retainCount !== 1)
+        return;
+    const generation = previewGenerationFor(owner);
+    coordinator.stopRuntime = getQueryPreviewState().runtime?.previewRuntime.subscribeContentRefresh((event) => {
+        const targeting = event.queryTargeting;
+        coordinator.covered = targeting?.service === 'enabled'
+            ? new Set(targeting.coveredQueryReceiptIds)
+            : new Set();
+        if (targeting?.service === 'enabled' &&
+            targeting.affectedQueryReceiptIds.length > 0) {
+            coordinator.pendingEvent = event;
+        }
+        else {
+            coordinator.pendingEvent = null;
+        }
+        notifyPreviewTargeting(coordinator);
+        flushTargetedRefetches(queryClient, coordinator, generation.getSnapshot().signal);
+    }) ?? null;
+    coordinator.stopGeneration = generation.subscribe(() => {
+        flushTargetedRefetches(queryClient, coordinator, generation.getSnapshot().signal);
+    });
+}
+function releasePreviewTargeting(executionClient) {
+    const queryClient = queryCoreClientFor(executionClient);
+    const coordinator = TARGETING_COORDINATORS.get(queryClient);
+    if (!coordinator)
+        return;
+    coordinator.retainCount = Math.max(0, coordinator.retainCount - 1);
+    if (coordinator.retainCount !== 0)
+        return;
+    coordinator.stopRuntime?.();
+    coordinator.stopGeneration?.();
+    coordinator.stopRuntime = null;
+    coordinator.stopGeneration = null;
+    coordinator.pendingEvent = null;
+    coordinator.covered = new Set();
+    coordinator.receiptByQuery.clear();
+    coordinator.queriesByReceipt.clear();
+    coordinator.delivered.clear();
+    notifyPreviewTargeting(coordinator);
+}
+function unregisterPreviewQueryKey(coordinator, identity) {
+    const receiptId = coordinator.receiptByQuery.get(identity);
+    if (!receiptId)
+        return;
+    coordinator.receiptByQuery.delete(identity);
+    const queries = coordinator.queriesByReceipt.get(receiptId);
+    queries?.delete(identity);
+    if (queries?.size === 0)
+        coordinator.queriesByReceipt.delete(receiptId);
+}
+function flushTargetedRefetches(queryClient, coordinator, generation) {
+    const event = coordinator.pendingEvent;
+    const targeting = event?.queryTargeting;
+    if (!event || targeting?.service !== 'enabled')
+        return;
+    const required = event.requiredProjectedThroughSeq;
+    if (generation?.status !== 'ready' ||
+        (required !== undefined &&
+            (generation.projectedThroughSeq ?? -1) < required))
+        return;
+    coordinator.pendingEvent = null;
+    notifyPreviewTargeting(coordinator);
+    for (const receiptId of targeting.affectedQueryReceiptIds) {
+        const deliveryIdentity = [
+            receiptId,
+            event.revision,
+            required ?? 'none',
+        ].join('|');
+        if (coordinator.delivered.has(deliveryIdentity))
+            continue;
+        coordinator.delivered.add(deliveryIdentity);
+        const queries = coordinator.queriesByReceipt.get(receiptId);
+        if (!queries)
+            continue;
+        const observerCounts = OBSERVER_COUNTS.get(queryClient);
+        for (const [identity, queryKey] of queries) {
+            if ((observerCounts?.get(identity) ?? 0) > 0) {
+                void queryClient.refetchQueries({ queryKey, exact: true, type: 'active' }, { cancelRefetch: false });
+            }
+        }
+    }
+    if (coordinator.delivered.size > 512)
+        coordinator.delivered.clear();
+}
+function notifyPreviewTargeting(coordinator) {
+    for (const listener of coordinator.listeners)
+        listener();
+}
+function scheduleProjectionRefetch(queryClient, pending, identity, queryKey, request) {
+    void Promise.resolve().then(async () => {
+        if (pending.get(identity) !== request || request.attempted)
+            return;
+        let current = queryClient.getQueryData(queryKey);
+        if (current?.meta.projectionHash === request.projectionHash) {
+            pending.delete(identity);
+            return;
+        }
+        if (queryClient.isFetching({ queryKey, exact: true }) > 0) {
+            // Join initial loading first. That join is not the corrective refetch:
+            // compare its held result before spending the single repair attempt.
+            await queryClient.refetchQueries({ queryKey, exact: true, type: 'active' }, { cancelRefetch: false });
+            if (pending.get(identity) !== request)
+                return;
+            current = queryClient.getQueryData(queryKey);
+            if (current?.meta.projectionHash === request.projectionHash) {
+                pending.delete(identity);
+                return;
+            }
+        }
+        if (!current)
+            return;
+        request.attempted = true;
+        await queryClient.refetchQueries({ queryKey, exact: true, type: 'active' }, { cancelRefetch: false });
+        const resolved = queryClient.getQueryData(queryKey);
+        if (pending.get(identity) === request &&
+            resolved?.meta.projectionHash === request.projectionHash) {
+            pending.delete(identity);
+        }
+    });
+}
+export const __test = {
+    hasPreviewTargetingCoordinator(executionClient) {
+        return TARGETING_COORDINATORS.has(queryCoreClientFor(executionClient));
+    },
+};

package/dist/query-preview-loader.d.ts

@@ -0,0 +1,9 @@
+import { StorystickError } from '@storystick/client';
+type Runtime = typeof import('./query-preview-runtime.js');
+export declare const getQueryPreviewState: () => {
+    runtime: Runtime | null;
+    error: StorystickError | null;
+};
+export declare function subscribeQueryPreview(listener: () => void): () => void;
+export declare function loadQueryPreview(): Promise<void>;
+export {};

package/dist/query-preview-loader.js

@@ -0,0 +1,28 @@
+import { StorystickError } from '@storystick/client';
+let snapshot = { runtime: null, error: null };
+let pending = null;
+const listeners = new Set();
+export const getQueryPreviewState = () => snapshot;
+export function subscribeQueryPreview(listener) {
+    listeners.add(listener);
+    return () => { listeners.delete(listener); };
+}
+export function loadQueryPreview() {
+    if (snapshot.runtime)
+        return Promise.resolve();
+    if (pending)
+        return pending;
+    snapshot = { runtime: null, error: null };
+    pending = import('./query-preview-runtime.js').then(runtime => {
+        snapshot = { runtime, error: null };
+    }, cause => {
+        snapshot = { runtime: null, error: new StorystickError('The Preview query runtime could not be loaded. Retry or reload Preview from Studio.', {
+                code: 'storystick/DELIVERY_UNAVAILABLE', category: 'system', retryable: true, payload: cause,
+            }) };
+    }).finally(() => {
+        pending = null;
+        for (const listener of listeners)
+            listener();
+    });
+    return pending;
+}

package/dist/query-preview-runtime.d.ts

@@ -0,0 +1,3 @@
+export { previewRuntime } from '@storystick/preview/runtime/store';
+export { applyPreviewLiveQueryProjection, previewLiveQueryOverlay } from '@storystick/preview/runtime/live-query-overlay';
+export { estimatePreviewPayloadBytes, recordPreviewPerfMetric } from '@storystick/preview/runtime/perf-metrics';

package/dist/query-preview-runtime.js

@@ -0,0 +1,3 @@
+export { previewRuntime } from '@storystick/preview/runtime/store';
+export { applyPreviewLiveQueryProjection, previewLiveQueryOverlay } from '@storystick/preview/runtime/live-query-overlay';
+export { estimatePreviewPayloadBytes, recordPreviewPerfMetric } from '@storystick/preview/runtime/perf-metrics';

package/dist/rendering.d.ts

@@ -0,0 +1,29 @@
+export { stripPreviewProvenance } from '@storystick/types/preview-provenance';
+export { previewTextProps } from './preview-text-props.js';
+export type { PreviewTextProps, PreviewTextValue } from './preview-text-props.js';
+/**
+ * @storystick/react — rendering primitives for typed Storystick content.
+ *
+ * Client reads use `useQuery` from `@storystick/react/query`, without a provider.
+ * Next server reads use `site.client()` from a configured `createSite`; mount
+ * `<Storystick />` from `@storystick/next` once in a shared native layout.
+ */
+export { createClient, QueryExecutionError, resolveReference, resolveReferences, resolveSafeHref, safeHref, StorystickError, } from '@storystick/client';
+export type { Client, ClientOptions, QueryResult, SelectedDocument, StorystickErrorCategory, StorystickErrorOptions, } from '@storystick/client';
+export type { UseQueryOptions, UseQueryResult } from './use-generated-query.js';
+export { SliceZone, ZoneSlot } from './public-slice-zone.js';
+export type { SliceZoneProps, SliceData, SliceComponentRegistry, SliceComponentProps, SliceContract, SliceContractRegistry, SliceFallback, SliceRenderFailure, SliceRenderFailureHandler, ZoneSlotDescriptor, ZoneSlotKind, ZoneSlotProps, } from './public-slice-zone.js';
+export { Slice } from './slice.js';
+export type { SliceElements, SliceRootProps } from './slice.js';
+export { RichText, toText } from './public-rich-text.js';
+export type { RichTextCustomMarkComponentProps, RichTextBlockComponentProps, RichTextCodeComponentProps, RichTextComponents, RichTextInlineProps, RichTextLinkMarkComponentProps, RichTextListComponentProps, RichTextMarkComponentProps, RichTextOrderedListComponentProps, RichTextProps, RichTextNode, RichTextMark, RichTextRenderMode, } from './public-rich-text.js';
+export { StorystickLink, resolveLink } from './link.js';
+export type { StorystickLinkDocument, StorystickLinkOptions, StorystickLinkProps, StorystickLinkValue, } from './link.js';
+export { StorystickImage, resolveImage } from './image.js';
+export type { ImageStatus, ResolveImageOptions, ResolvedStorystickImage, StorystickAsset, StorystickAssetSidecar, StorystickImageField, StorystickImageProps, } from '@storystick/media';
+export type { StorystickImageComponentProps, StorystickImageFailure, StorystickImageFallback, } from './image.js';
+export { StorystickFile, resolveFile } from './file.js';
+export type { FileStatus, ResolveFileOptions, ResolvedStorystickFile, StorystickFileComponentProps, StorystickFileFailure, StorystickFileFallback, StorystickFileField, StorystickFileProps, } from './file.js';
+export { StorystickVideo, resolveVideo } from './video.js';
+export type { ResolvedStorystickVideo, ResolvedStorystickVideoPoster, ResolvedStorystickVideoTrack, ResolveVideoOptions, StorystickVideoComponentProps, StorystickVideoFailure, StorystickVideoFallback, StorystickVideoField, StorystickVideoProps, StorystickVideoTrack, StorystickVideoTrackProps, VideoPosterStatus, VideoStatus, VideoTrackStatus, } from './video.js';
+export type { LinkOptions, LinkProps, LinkStatus, LinkValue, ReferencedDocumentFailureReason, ReferencedDocumentPolicy, ReferencedDocumentSidecarEntry, ReferencedDocumentSidecarFailure, ReferencedDocumentsSidecar, ResolvedLink, } from '@storystick/types';

package/dist/rendering.js

@@ -0,0 +1,17 @@
+export { stripPreviewProvenance } from '@storystick/types/preview-provenance';
+export { previewTextProps } from './preview-text-props.js';
+/**
+ * @storystick/react — rendering primitives for typed Storystick content.
+ *
+ * Client reads use `useQuery` from `@storystick/react/query`, without a provider.
+ * Next server reads use `site.client()` from a configured `createSite`; mount
+ * `<Storystick />` from `@storystick/next` once in a shared native layout.
+ */
+export { createClient, QueryExecutionError, resolveReference, resolveReferences, resolveSafeHref, safeHref, StorystickError, } from '@storystick/client';
+export { SliceZone, ZoneSlot } from './public-slice-zone.js';
+export { Slice } from './slice.js';
+export { RichText, toText } from './public-rich-text.js';
+export { StorystickLink, resolveLink } from './link.js';
+export { StorystickImage, resolveImage } from './image.js';
+export { StorystickFile, resolveFile } from './file.js';
+export { StorystickVideo, resolveVideo } from './video.js';

package/dist/resize-edge.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from 'react';
+/** Passive border ink. Hosts own hit areas and geometry; native pointer/focus
+ * states own visibility. Inline CSS also works before the editor loads and
+ * inside the detached toolbar's ShadowRoot. */
+export declare function ResizeEdgeIndicator({ orientation, style, }: {
+    orientation?: 'vertical' | 'horizontal';
+    style?: CSSProperties;
+}): import("react").JSX.Element;

package/dist/resize-edge.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Passive border ink. Hosts own hit areas and geometry; native pointer/focus
+ * states own visibility. Inline CSS also works before the editor loads and
+ * inside the detached toolbar's ShadowRoot. */
+export function ResizeEdgeIndicator({ orientation = 'vertical', style, }) {
+    return _jsxs(_Fragment, { children: [_jsx("style", { children: RESIZE_EDGE_STYLES }), _jsx("span", { "aria-hidden": "true", "data-ss-resize-border": orientation, style: style })] });
+}
+const RESIZE_EDGE_STYLES = `
+  [data-ss-resize-border] {
+    position: absolute;
+    pointer-events: none;
+    background: linear-gradient(
+      var(--ss-resize-edge-direction, to bottom),
+      transparent 0 var(--ss-resize-edge-inset, 0px),
+      color-mix(in srgb, var(--ss-text-primary, #16181b) 18%, transparent) 50%,
+      transparent calc(100% - var(--ss-resize-edge-inset, 0px)) 100%
+    );
+    opacity: 0;
+    transition: opacity 120ms ease;
+  }
+  [data-ss-resize-border="vertical"] { inset: 0 auto 0 0; width: 1px; }
+  [data-ss-resize-border="horizontal"] {
+    --ss-resize-edge-direction: to right;
+    inset: 0 0 auto 0;
+    height: 1px;
+  }
+  [data-ss-resize-handle]:is(:hover, :focus-visible, :active, [data-resizable-split-dragging]) > [data-ss-resize-border] {
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-ss-resize-border] { transition: none; }
+  }
+`;