@storystick/react 0.2.0-rc.0 → 0.2.0-rc.1

package/PUBLIC-API.md

@@ -1,8 +1,8 @@
 # @storystick/react API contract
 
-Install this candidate explicitly with `@storystick/react@0.2.0-rc.0` after registry bootstrap and publication. This repository alone does not make the candidate or beta channel available on npm.
+Install this candidate explicitly with `@storystick/react@0.2.0-rc.1` after registry bootstrap and publication. This repository alone does not make the candidate or beta channel available on npm.
 
-Version 0.2.0-rc.0, cohort `sdk-0.2.0-rc.0`. ESM distribution; no CommonJS or universal Edge compatibility is promised.
+Version 0.2.0-rc.1, cohort `sdk-0.2.0-rc.1`. ESM distribution; no CommonJS or universal Edge compatibility is promised.
 
 This package is a product integration facade. Reserved contracts are required between SDK packages and must be upgraded with the same cohort. Their public export paths do not promise independent stability.
 
@@ -26,6 +26,8 @@ This package is a product integration facade. Reserved contracts are required be
 | `./internal/use-momentary-preview-navigate-mode` | Reserved SDK contract |
 | `./internal/resize-edge` | Reserved SDK contract |
 | `./internal/preview-toolbar-shell` | Reserved SDK contract |
+| `./internal/preview-page-state` | Reserved SDK contract |
+| `./internal/authoring-skeleton` | Reserved SDK contract |
 | `./internal/preview-panel-state` | Reserved SDK contract |
 | `./internal/preview-host` | Reserved SDK contract |
 

package/dist/.source-hash

@@ -1 +1 @@
-937895c9b9d8b1e9dd734b85c5339eee7d93c3afe545ac5d65f65f5330fb3acb
+4cb09a292c5e314adfbbfa1a1bdf1cad0ae376072cfd5a37269e4be8e69570da

package/dist/authoring-skeleton.d.ts

@@ -0,0 +1,5 @@
+/** The same outline covers admission and module loading, before either app's
+ * styles/providers exist. Only the owned panel receives these styles. */
+export declare function AuthoringPanelSkeleton({ surface }: {
+    surface: 'editor' | 'assistant';
+}): import("react").JSX.Element;

package/dist/authoring-skeleton.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** The same outline covers admission and module loading, before either app's
+ * styles/providers exist. Only the owned panel receives these styles. */
+export function AuthoringPanelSkeleton({ surface }) {
+    return _jsxs("div", { "data-ss-panel-skeleton": surface, role: "status", "aria-label": surface === 'assistant' ? 'Loading assistant' : 'Loading document content', children: [_jsx("style", { children: STYLES }), _jsx("div", { "data-ss-panel-skeleton-body": "", "aria-hidden": "true", children: surface === 'assistant' ? _jsxs(_Fragment, { children: [_jsxs("div", { "data-ss-panel-skeleton-greeting": "", children: [_jsx("i", {}), _jsx("i", {})] }), _jsxs("div", { "data-ss-panel-skeleton-composer": "", children: [_jsx("i", {}), _jsx("i", {})] })] }) : _jsxs(_Fragment, { children: [_jsxs("div", { "data-ss-panel-skeleton-title": "", children: [_jsx("i", {}), _jsx("i", {})] }), _jsxs("div", { "data-ss-panel-skeleton-tabs": "", children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {})] }), _jsxs("div", { "data-ss-panel-skeleton-fields": "", children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {})] })] }) })] });
+}
+const STYLES = `
+  [data-ss-panel-skeleton] { box-sizing: border-box; width: 100%; height: 100%; min-height: 240px; background: var(--ss-surface-page, #fafafa); }
+  [data-ss-panel-skeleton-body] { box-sizing: border-box; display: flex; flex-direction: column; height: 100%; min-height: inherit; gap: 32px; padding: 24px 16px 16px; }
+  [data-ss-panel-skeleton] i { display: block; flex-shrink: 0; background: var(--ss-surface-widget, #f0f0f0); border-radius: var(--ss-radius-field, 18px); }
+  [data-ss-panel-skeleton-title] { display: grid; gap: 12px; padding-top: 12px; }
+  [data-ss-panel-skeleton-title] i { height: 24px; width: 85%; }
+  [data-ss-panel-skeleton-title] i:last-child { width: 60%; }
+  [data-ss-panel-skeleton-tabs] { display: flex; gap: 12px; }
+  [data-ss-panel-skeleton-tabs] i { width: 64px; height: 32px; border-radius: 999px; }
+  [data-ss-panel-skeleton-fields] { display: grid; gap: 12px; }
+  [data-ss-panel-skeleton-fields] i { height: 88px; }
+  [data-ss-panel-skeleton-fields] i:last-child { height: 132px; }
+  [data-ss-panel-skeleton-greeting] { display: grid; gap: 12px; width: 75%; margin: auto; }
+  [data-ss-panel-skeleton-greeting] i { height: 16px; }
+  [data-ss-panel-skeleton-greeting] i:last-child { width: 70%; margin-inline: auto; }
+  [data-ss-panel-skeleton-composer] { display: flex; align-items: center; justify-content: space-between; height: 60px; flex-shrink: 0; padding: 0 16px; border-radius: 30px; background: var(--ss-surface-card, #fff); box-shadow: 0 0 0 1px var(--ss-border-card, #e9e9e9); }
+  [data-ss-panel-skeleton-composer] i { width: 55%; height: 12px; }
+  [data-ss-panel-skeleton-composer] i:last-child { width: 32px; height: 32px; border-radius: 50%; }
+  @media (prefers-reduced-motion: no-preference) {
+    [data-ss-panel-skeleton] i { animation: ss-panel-skeleton-pulse 1.8s ease-in-out infinite; }
+  }
+  @keyframes ss-panel-skeleton-pulse { 50% { opacity: .5; } }
+`;

package/dist/preview-host/preview-authoring-client.d.ts

@@ -1,11 +1,11 @@
-import { type PreviewAuthoringAdmission, type PreviewAuthoringRuntimeModule } from '@storystick/preview/authoring/runtime-contract';
+import { type PreviewAuthoringAdmission, type PreviewAuthoringRuntimeModule, type PreviewAuthoringSurface } from '@storystick/preview/authoring/runtime-contract';
 declare global {
     interface Window {
         StorystickAuthoringRuntime?: PreviewAuthoringRuntimeModule;
     }
 }
 export declare function authoringRuntimeUrl(studioUrl: string): string | null;
-export declare function loadPreviewAuthoringRuntime(source: string): Promise<PreviewAuthoringRuntimeModule>;
+export declare function loadPreviewAuthoringRuntime(source: string, surface?: PreviewAuthoringSurface | null): Promise<PreviewAuthoringRuntimeModule>;
 export declare function requestPreviewAuthoringAdmission(args: {
     url: string;
     previous?: PreviewAuthoringAdmission | null;

package/dist/preview-host/preview-authoring-client.js

@@ -13,7 +13,15 @@ export function authoringRuntimeUrl(studioUrl) {
         return null;
     }
 }
-export function loadPreviewAuthoringRuntime(source) {
+export function loadPreviewAuthoringRuntime(source, surface) {
+    const pending = loadRuntimeModule(source);
+    // Code preparation never holds admission/authentication behind a panel's
+    // dependencies. Rendering uses the same imports and its own Suspense boundary.
+    if (surface)
+        void pending.then(runtime => runtime.preload(surface)).catch(() => undefined);
+    return pending;
+}
+function loadRuntimeModule(source) {
     const installed = readRuntime();
     if (installed)
         return Promise.resolve(installed);

package/dist/preview-host/preview-standalone-controls.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMomentaryPreviewInteractionOverride } from '@storystick/react/internal/use-momentary-preview-navigate-mode';
 import { PreviewPanelAction, PreviewPanelState } from '@storystick/react/internal/preview-panel-state';
+import { AuthoringPanelSkeleton } from '@storystick/react/internal/authoring-skeleton';
 import { useStandalonePresentation } from './use-standalone-presentation.js';
 import { PreviewInteractionControl } from '@storystick/react/internal/preview-interaction-control';
 import { PreviewToolbarShell, PreviewEditIcon as EditIcon, PreviewAssistantIcon as ChatIcon, PreviewStudioIcon as StudioIcon, } from '@storystick/react/internal/preview-toolbar-shell';
@@ -28,6 +29,7 @@ export function PreviewStandaloneControls({ state, projectId, recovery, basePath
     const host = useRef(null);
     const editorContainer = useRef(null);
     const [headerLeading, setHeaderLeading] = useState(null);
+    const [headerTitle, setHeaderTitle] = useState(null);
     const [headerTrailing, setHeaderTrailing] = useState(null);
     const [contextContainer, setContextContainer] = useState(null);
     const [interactionMode, setInteractionMode] = useState(() => readStandaloneInteractionMode(projectId, state.sessionId));
@@ -148,14 +150,18 @@ export function PreviewStandaloneControls({ state, projectId, recovery, basePath
             ? 'Element selection is unavailable because some elements do not match their editing context.'
             : 'Element selection is unavailable because this page has incomplete or conflicting editing information.'
         : null;
-    const shouldPreloadEditor = canEdit && (interactionMode === 'edit' || menuOpen);
+    const shouldPreloadRuntime = canEdit && (interactionMode === 'edit' || menuOpen);
     useEffect(() => {
-        if (!shouldPreloadEditor || !runtimeSource)
+        if (!shouldPreloadRuntime || !runtimeSource)
             return;
-        // Warm code for either entry point (overlay or menu). Admission and mounting
-        // still belong to explicit edit intent; the loader shares in-flight work.
+        // Warm the common runtime; panel dependencies follow a specific intent.
+        // Admission and mounting stay separate from this shared code preparation.
         void loadPreviewAuthoringRuntime(runtimeSource).catch(() => undefined);
-    }, [shouldPreloadEditor, runtimeSource]);
+    }, [shouldPreloadRuntime, runtimeSource]);
+    const preloadPanel = useCallback((surface) => {
+        if (runtimeSource)
+            void loadPreviewAuthoringRuntime(runtimeSource, surface).catch(() => undefined);
+    }, [runtimeSource]);
     const currentPage = useRef(page);
     currentPage.current = page;
     const presentationRef = useRef(presentation);
@@ -271,7 +277,7 @@ export function PreviewStandaloneControls({ state, projectId, recovery, basePath
             (surface === 'editor' && !targetRequest) ||
             root === null ||
             editorContainer.current === null ||
-            contextContainer === null || headerLeading === null || headerTrailing === null ||
+            contextContainer === null || headerLeading === null || headerTitle === null || headerTrailing === null ||
             runtimeSource === null ||
             runtimeHandle.current !== null)
             return;
@@ -285,7 +291,7 @@ export function PreviewStandaloneControls({ state, projectId, recovery, basePath
             setError(null);
             try {
                 const [runtime, initialAdmission] = await Promise.all([
-                    loadPreviewAuthoringRuntime(runtimeSource),
+                    loadPreviewAuthoringRuntime(runtimeSource, surface),
                     requestPreviewAuthoringAdmission({ url: authoringUrl }),
                 ]);
                 if (cancelled)
@@ -306,9 +312,9 @@ export function PreviewStandaloneControls({ state, projectId, recovery, basePath
                 const handle = runtime.mount({
                     root,
                     container,
-                    header: { leading: headerLeading, trailing: headerTrailing },
+                    header: { leading: headerLeading, title: headerTitle, trailing: headerTrailing },
                     target: targetRef.current ?? undefined,
-                    surface: surface === 'assistant' ? 'assistant' : 'editor',
+                    surface,
                     assistantThreadId: assistantThreadId.current,
                     onSurface: next => { if (runtimeOwner.current === owner) {
                         setMenuOpen(false);
@@ -423,7 +429,7 @@ export function PreviewStandaloneControls({ state, projectId, recovery, basePath
         return () => {
             cancelled = true;
         };
-    }, [authoringUrl, connectAttempt, targetRequest, root, contextContainer, headerLeading, headerTrailing, runtimeSource, surface, wantsRuntime, connected]);
+    }, [authoringUrl, connectAttempt, targetRequest, root, contextContainer, headerLeading, headerTitle, headerTrailing, runtimeSource, surface, wantsRuntime, connected]);
     useEffect(() => {
         if (!targetRequest || !runtimeHandle.current)
             return;
@@ -466,12 +472,16 @@ export function PreviewStandaloneControls({ state, projectId, recovery, basePath
             dispose();
         };
     }, []);
-    return _jsx(PreviewToolbarShell, { hostRef: host, onRoot: setRoot, menuOpen: menuOpen, onMenuOpenChange: setMenuOpen, panelOpen: surface !== null, onPanelClose: closePanel, panelLeading: _jsx("div", { ref: setHeaderLeading, "data-ss-surface": "" }), panelTrailing: _jsx("div", { ref: setHeaderTrailing, "data-ss-surface": "" }), panelLabel: surface === "assistant" ? "Assistant" : "Edit content", menu: _jsxs(_Fragment, { children: [_jsxs("div", { className: "menu-group", role: "group", "aria-label": "Site view", children: [_jsx("span", { className: "menu-group-label", children: "Site view" }), _jsxs("div", { className: "menu-group-content", children: [_jsx("div", { ref: setContextContainer, "data-ss-surface": "" }), editorStatus === 'connecting' ? _jsx("p", { className: "menu-status", role: "status", children: "Loading site context\u2026" }) : null] })] }), _jsx("div", { className: "menu-separator", "aria-hidden": "true" }), _jsxs("div", { className: "menu-group", role: "group", "aria-label": "Interaction", children: [_jsx("span", { className: "menu-group-label", children: "Interaction" }), _jsx("div", { className: "menu-group-content", children: _jsx(PreviewInteractionControl, { interactionMode: effectiveMode, onChange: chooseInteractionMode }) })] }), _jsx("div", { className: "menu-separator", "aria-hidden": "true" }), _jsxs("button", { type: "button", className: "menu-action", disabled: !canEdit, onClick: () => openEditor(currentPageTarget), children: [_jsx(EditIcon, {}), _jsx("span", { children: "Edit content" })] }), _jsxs("button", { type: "button", className: "menu-action", disabled: !connected || !runtimeSource, onClick: () => { setError(null); setMenuOpen(false); setSurface('assistant'); }, children: [_jsx(ChatIcon, {}), _jsx("span", { children: "Assistant" })] }), destination && (_jsxs("a", { className: "menu-action", href: destination.href, children: [_jsx(StudioIcon, {}), _jsx("span", { children: "Open in Studio" })] })), (connectionNotice || notice ||
+    return _jsx(PreviewToolbarShell, { hostRef: host, onRoot: setRoot, menuOpen: menuOpen, onMenuOpenChange: setMenuOpen, panelOpen: surface !== null, onPanelClose: closePanel, panelTitle: _jsx("span", { ref: setHeaderTitle, className: "panel-title", "data-placeholder": surface === "assistant" ? "Assistant" : "Edit content" }), panelLeading: _jsx("div", { ref: setHeaderLeading, "data-ss-surface": "" }), panelTrailing: _jsx("div", { ref: setHeaderTrailing, "data-ss-surface": "" }), panelLabel: surface === "assistant" ? "Assistant" : "Edit content", menu: _jsxs(_Fragment, { children: [_jsxs("div", { className: "menu-group", role: "group", "aria-label": "Site view", children: [_jsx("span", { className: "menu-group-label", children: "Site view" }), _jsxs("div", { className: "menu-group-content", children: [_jsx("div", { ref: setContextContainer, "data-ss-surface": "" }), editorStatus === 'connecting' ? _jsxs("div", { className: "menu-context-loading", role: "status", "aria-label": "Loading site view", children: [_jsx("span", {}), _jsx("span", {})] }) : null] })] }), _jsx("div", { className: "menu-separator", "aria-hidden": "true" }), _jsxs("div", { className: "menu-group", role: "group", "aria-label": "Interaction", children: [_jsx("span", { className: "menu-group-label", children: "Interaction" }), _jsx("div", { className: "menu-group-content", children: _jsx(PreviewInteractionControl, { interactionMode: effectiveMode, onChange: chooseInteractionMode }) })] }), _jsx("div", { className: "menu-separator", "aria-hidden": "true" }), _jsxs("button", { type: "button", className: "menu-action", disabled: !canEdit, onMouseEnter: () => { if (canEdit)
+                        preloadPanel('editor'); }, onFocus: () => { if (canEdit)
+                        preloadPanel('editor'); }, onClick: () => openEditor(currentPageTarget), children: [_jsx(EditIcon, {}), _jsx("span", { children: "Edit content" })] }), _jsxs("button", { type: "button", className: "menu-action", disabled: !connected || !runtimeSource, onMouseEnter: () => { if (connected)
+                        preloadPanel('assistant'); }, onFocus: () => { if (connected)
+                        preloadPanel('assistant'); }, onClick: () => { setError(null); setMenuOpen(false); setSurface('assistant'); }, children: [_jsx(ChatIcon, {}), _jsx("span", { children: "Assistant" })] }), destination && (_jsxs("a", { className: "menu-action", href: destination.href, children: [_jsx(StudioIcon, {}), _jsx("span", { children: "Open in Studio" })] })), (connectionNotice || notice ||
                     overlayNotice ||
                     (!rendered && connected) ||
                     recovery?.error ||
                     error) && (_jsxs("div", { className: "notices", children: [connectionNotice && _jsx("p", { role: "status", children: connectionNotice }), notice && _jsx("p", { children: notice }), overlayNotice && _jsx("p", { role: "status", children: overlayNotice }), connected && !rendered && (_jsxs("p", { children: ["This page has not confirmed its rendered perspective.", ' ', _jsx("button", { type: "button", onClick: () => window.location.reload(), children: "Reload" })] })), recovery?.error && (_jsxs("p", { role: "alert", children: [recovery.error, ' ', _jsx("button", { type: "button", onClick: recovery.retry, disabled: false, children: "Retry" })] })), error && _jsxs("p", { role: "alert", children: [error, ' ', editorStatus === 'error' && !runtimeHandle.current ? (_jsx("button", { type: "button", onClick: () => setConnectAttempt(value => value + 1), children: "Retry" })) : null] })] }))] }), panel: _jsxs(_Fragment, { children: [surface === 'editor' && target === null && committedTarget === null && !continuation && (_jsxs("div", { className: "editor-empty", children: [_jsx(EditIcon, {}), _jsx("strong", { children: "Select an element on the page" }), _jsx("p", { children: "The matching field will open here." })] })), (editorStatus === 'idle' || editorStatus === 'connecting') &&
-                    (surface === 'assistant' || target || continuation) && (_jsx("div", { className: "editor-loading", role: "status", "aria-label": surface === 'assistant' ? 'Loading assistant' : 'Loading document content', children: _jsxs("div", { "aria-hidden": "true", children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {})] }) })), editorStatus === 'error' && error && (_jsx("div", { className: "panel-state-overlay", children: _jsx(PreviewPanelState, { title: surface === 'assistant' ? 'Assistant unavailable' : 'Editor unavailable', description: error, actions: _jsx(PreviewPanelAction, { onClick: () => {
+                    (surface === 'assistant' || target || continuation) && (_jsx("div", { className: "editor-loading", children: _jsx(AuthoringPanelSkeleton, { surface: surface === 'assistant' ? 'assistant' : 'editor' }) })), editorStatus === 'error' && error && (_jsx("div", { className: "panel-state-overlay", children: _jsx(PreviewPanelState, { title: surface === 'assistant' ? 'Assistant unavailable' : 'Editor unavailable', description: error, actions: _jsx(PreviewPanelAction, { onClick: () => {
                                 setError(null);
                                 if (runtimeHandle.current && (committedTarget ?? target))
                                     requestEditorTarget({ ...(committedTarget ?? target) });

package/dist/preview-page-state.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+/** One page composition for launch, activation and terminal Preview feedback.
+ * Actions and progress belong to the caller's existing lifecycle. */
+export declare function PreviewPageState({ title, description, role, indicator, actions, children }: {
+    title: string;
+    description: ReactNode;
+    role: 'status' | 'alert';
+    indicator?: ReactNode;
+    actions?: ReactNode;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function PreviewPageProgress(): import("react").JSX.Element;

package/dist/preview-page-state.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PREVIEW_PAGE_STYLES } from '@storystick/preview/page-presentation';
+import { StorystickMark } from './storystick-mark.js';
+/** One page composition for launch, activation and terminal Preview feedback.
+ * Actions and progress belong to the caller's existing lifecycle. */
+export function PreviewPageState({ title, description, role, indicator, actions, children }) {
+    return _jsxs(_Fragment, { children: [_jsx("style", { children: PREVIEW_PAGE_STYLES }), _jsx("main", { "data-ss-preview-page": "", children: _jsxs("div", { "data-ss-preview-page-content": "", children: [_jsxs("div", { "data-ss-preview-page-brand": "", children: [_jsx(StorystickMark, {}), _jsx("span", { children: "Storystick" })] }), _jsxs("div", { role: role, children: [_jsxs("div", { "data-ss-preview-page-heading": "", children: [indicator, _jsx("h1", { "data-ss-preview-page-title": "", children: title })] }), _jsx("p", { "data-ss-preview-page-description": "", children: description })] }), actions ? _jsx("div", { "data-ss-preview-page-actions": "", children: actions }) : null, children] }) })] });
+}
+export function PreviewPageProgress() {
+    return _jsx("span", { "data-ss-preview-page-progress": "", "aria-hidden": "true" });
+}

package/dist/preview-panel-state.js

@@ -12,7 +12,7 @@ export function PreviewPanelAction(props) {
     return _jsx("button", { type: "button", "data-ss-panel-action": "", ...props });
 }
 const MESSAGE_STYLES = `
-  [data-ss-panel-state] { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; min-width: 0; overflow: auto; padding: 24px; background: #fff; }
+  [data-ss-panel-state] { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; min-width: 0; overflow: auto; padding: 24px; background: var(--ss-surface-page, #fff); }
   [data-ss-panel-state] > [data-ss-panel-message] { margin: auto; padding: 0; }
   [data-ss-panel-message] { box-sizing: border-box; flex: none; width: 100%; max-width: 360px; margin-inline: auto; padding: 16px; color: #52525b; font: 400 13px/1.5 "Storystick Inter", "Inter Variable", ui-sans-serif, system-ui, sans-serif; text-align: center; overflow-wrap: anywhere; }
   [data-ss-panel-message-copy] h2 { margin: 0; color: #18181b; font-size: 15px; font-weight: 500; line-height: 1.4; text-wrap: balance; }

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

@@ -1,6 +1,6 @@
 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, }: {
+export declare function PreviewToolbarPanel({ open, label, onClose, panelRef, handleProps, resizeHandles, leading, trailing, title, children, }: {
     open: boolean;
     label: string;
     onClose(): void;
@@ -9,5 +9,6 @@ export declare function PreviewToolbarPanel({ open, label, onClose, panelRef, ha
     resizeHandles: ReactNode;
     leading?: ReactNode;
     trailing?: ReactNode;
+    title?: ReactNode;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/preview-toolbar-panel.js

@@ -1,6 +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] }));
+export function PreviewToolbarPanel({ open, label, onClose, panelRef, handleProps, resizeHandles, leading, trailing, title, 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: title ?? 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-shell.d.ts

@@ -6,6 +6,7 @@ export declare function PreviewToolbarShell(props: {
     menu: ReactNode;
     panel: ReactNode;
     panelLabel: string;
+    panelTitle?: ReactNode;
     panelLeading?: ReactNode;
     panelTrailing?: ReactNode;
     onMenuOpenChange(open: boolean): void;

package/dist/preview-toolbar-shell.js

@@ -23,7 +23,7 @@ export function PreviewToolbarShell(props) {
     }, [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, panelLeading, panelTrailing, onMenuOpenChange, onPanelClose }) {
+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);
@@ -44,7 +44,7 @@ function ToolbarContents({ root, menuOpen, panelOpen, menu, panel, panelLabel, p
         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, 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) => {
+    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]');
@@ -82,33 +82,42 @@ const CONTROL_STYLES = `
   .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; }
-  .bubble { box-shadow: var(--ss-shadow-floating, 0 0 1px rgb(0 0 0 / 0.34), 0 8px 20px -10px rgb(0 0 0 / 0.15), 0 2px 6px -4px rgb(0 0 0 / 0.1)); }
-  .menu, .editor-panel { box-shadow: var(--ss-shadow-hub, 0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05), 0 6px 16px -10px rgb(0 0 0 / 0.1), 0 16px 34px -24px rgb(0 0 0 / 0.12)); }
-  .menu, .editor-panel { background: var(--ss-surface-card, #fff); border: 0; border-radius: var(--ss-radius-2xl, 19px); }
+  /* 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-status { margin: 4px 0 0; color: var(--ss-text-tertiary, oklch(0.515 0.006 258.364)); font-size: 12px; line-height: 16px; }
+  .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 { pointer-events: auto; position: fixed; top: 0; left: 0; z-index: 1; }
-  .panel-contents { height: 100%; overflow: hidden; border-radius: inherit; display: grid; grid-template-rows: 44px minmax(0, 1fr); }
+  .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; }
-  .panel-header { display: flex; align-items: center; gap: 4px; padding: 2px 6px 0 6px; }
+  /* 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-2xl, 19px) - 12px)); position: absolute; z-index: 3; border: 0; padding: 0; background: transparent; touch-action: none; user-select: none; }
+  .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; }
@@ -123,16 +132,13 @@ const CONTROL_STYLES = `
   .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: #fff; }
+  .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: #fff; }
+  .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: 16px; }
-  .editor-loading > div { display: grid; gap: 16px; }
-  .editor-loading > div > div { height: 80px; border-radius: 6px; background: #f4f4f5; }
-  .editor-loading > div > div:last-child { height: 128px; }
+  .editor-loading { display: block; padding: 0; }
   @media (prefers-reduced-motion: reduce) { .bubble { transition: none; } }
 `;

package/dist/storystick-mark.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { STORYSTICK_MARK_RECTS, STORYSTICK_MARK_VIEW_BOX } from '@storystick/preview/page-presentation';
 /** Canonical brand geometry, shared by Studio and the lightweight preview host. */
 export function StorystickMark(props) {
-    return (_jsxs("svg", { ...props, "data-slot": "storystick-mark", viewBox: "0 0 12 11", fill: "currentColor", focusable: "false", "aria-hidden": "true", children: [_jsx("rect", { x: "0", y: "4", width: "3", height: "7", rx: "1" }), _jsx("rect", { x: "4.5", y: "0", width: "3", height: "11", rx: "1" }), _jsx("rect", { x: "9", y: "6", width: "3", height: "5", rx: "1" })] }));
+    return (_jsx("svg", { ...props, "data-slot": "storystick-mark", viewBox: STORYSTICK_MARK_VIEW_BOX, fill: "currentColor", focusable: "false", "aria-hidden": "true", children: STORYSTICK_MARK_RECTS.map(rect => _jsx("rect", { ...rect }, rect.x)) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storystick/react",
-  "version": "0.2.0-rc.0",
+  "version": "0.2.0-rc.1",
   "license": "FSL-1.1-MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -80,6 +80,14 @@
       "types": "./dist/preview-toolbar-shell.d.ts",
       "import": "./dist/preview-toolbar-shell.js"
     },
+    "./internal/preview-page-state": {
+      "types": "./dist/preview-page-state.d.ts",
+      "import": "./dist/preview-page-state.js"
+    },
+    "./internal/authoring-skeleton": {
+      "types": "./dist/authoring-skeleton.d.ts",
+      "import": "./dist/authoring-skeleton.js"
+    },
     "./internal/preview-panel-state": {
       "types": "./dist/preview-panel-state.d.ts",
       "import": "./dist/preview-panel-state.js"
@@ -104,10 +112,10 @@
   "dependencies": {
     "@tanstack/query-core": "5.101.4",
     "@base-ui/react": "1.3.0",
-    "@storystick/preview": "0.2.0-rc.0",
-    "@storystick/media": "0.2.0-rc.0",
-    "@storystick/types": "0.1.0-rc.0",
-    "@storystick/client": "0.2.0-rc.0"
+    "@storystick/client": "0.2.0-rc.1",
+    "@storystick/media": "0.2.0-rc.1",
+    "@storystick/types": "0.1.0-rc.1",
+    "@storystick/preview": "0.2.0-rc.1"
   },
   "peerDependencies": {
     "react": "^19.2.8",