@satinhq/kit 0.0.0-stage → 0.1.0-beta.0

package/dist/public/runtime.js

@@ -0,0 +1,292 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TabSection } from '../tabs/TabSection.js';
+export { TabSection } from '../tabs/TabSection.js';
+import { acknowledgementsRegistry, ACKNOWLEDGEMENTS, } from '../acknowledgements/Acknowledgements.js';
+import { preferredColorScheme } from '../app/appearance.js';
+import { ControlStyleProvider } from './controlStyle.js';
+import { validateNavigation, } from './structure.js';
+import { ModalPresentationContext } from './presentationContext.js';
+import { TabRegistrationContext, TabSidebarContext } from '../tabs/context.js';
+import { resolveRoutes } from './routeRegistry.js';
+import { AppContext, useAppContext } from './context.js';
+import { Children, isValidElement, createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useState, } from 'react';
+import { mountSatin } from '../root/mountSatin.js';
+import { SatinRoot } from '../root/SatinRoot.js';
+import { createNavigator, createInstantTransitionController, } from '../navigation/store.js';
+import { createAnimatedTransitionController } from '../navigation/motion.js';
+import { withZoomTransitions } from '../navigation/zoomTransition.js';
+import { NavigatorHost } from '../navigation/NavigatorHost.js';
+import { useNavigator } from '../navigation/navigationContext.js';
+import { createSceneRestoration } from '../restoration/scene.js';
+import { prepareSceneRoutes } from '../restoration/routes.js';
+import { useRestoredState } from '../restoration/react.js';
+import { Tab as EngineTab, TabView as EngineTabView, } from '../tabs/TabView.js';
+import { createPushNotifications, createPushRelayAdapter } from '../push/notifications.js';
+import { createScreenChrome, ScreenChromeContext } from './screenChrome.js';
+/** Pushes and pops slide, or zoom when the pushed screen asks for it (`navigationTransition`). */
+const animatedTransitionController = withZoomTransitions(createAnimatedTransitionController);
+function makeStack(runtime, key, root, params) {
+    const route = runtime.routes.definitions[root];
+    if (!route || !route.validate(params))
+        throw new Error(`Invalid root route: ${root}`);
+    return createNavigator({
+        registry: runtime.app.acknowledgements === false
+            ? resolveRoutes(runtime.routes)
+            : acknowledgementsRegistry(resolveRoutes(runtime.routes)),
+        initial: { id: root, params },
+        restoration: { scene: runtime.scene, key },
+        transitionControllerFactory: (completion, context) => context.operation === 'replace'
+            ? createInstantTransitionController(completion)
+            : animatedTransitionController(completion, context),
+    });
+}
+/**
+ * Mounts the app into `#root`. Satin creates every
+ * primary stack and restores the scene and its launch route before React's first commit, then
+ * owns navigation, restoration, notifications and the app shell. Call it once.
+ *
+ * `Content` replaces the default root, usually to add app-wide providers; it renders `TabView` or
+ * `NavigationStack` itself. Without it Satin renders the declaration directly.
+ *
+ * @example
+ * runApp({ app, routes, navigation })
+ */
+export function runApp({ app, routes, navigation: declaration, content: Content, ...options }) {
+    const structure = validateNavigation(routes, declaration);
+    if (options.preferredColorScheme !== undefined)
+        preferredColorScheme(options.preferredColorScheme);
+    const runtime = {
+        app,
+        routes,
+        structure,
+        scene: createSceneRestoration({ id: app.id, ...options.restoration }),
+        stacks: new Map(),
+        mountedStacks: new Set(),
+        notifications: null,
+    };
+    const relay = options.notifications?.relay;
+    if (relay)
+        runtime.notifications = createPushNotifications({
+            app,
+            applicationServerKey: relay.publicKey,
+            server: createPushRelayAdapter({ url: relay.url, token: relay.token ?? (() => '') }),
+        });
+    const declarations = structure.tabs ?? [{ id: 'main', ...structure.stack }];
+    for (const stack of declarations)
+        runtime.stacks.set(stack.id, makeStack(runtime, stack.id, stack.root, stack.params));
+    const first = structure.defaultTab ?? declarations[0].id;
+    runtime.sceneRoutes = prepareSceneRoutes({
+        scene: runtime.scene,
+        scope: app.scope,
+        registry: resolveRoutes(routes),
+        navigators: Object.fromEntries(runtime.stacks),
+        defaultTab: first,
+    });
+    const mount = document.querySelector('#root');
+    if (!mount)
+        throw new Error('runApp requires a #root mount element');
+    function Lifecycle() {
+        useEffect(() => {
+            const stopRoutes = runtime.sceneRoutes.connect();
+            const stopPush = runtime.notifications?.start();
+            return () => {
+                stopPush?.();
+                stopRoutes();
+            };
+        }, []);
+        return null;
+    }
+    const root = mountSatin(mount, _jsx(AppContext, { value: runtime, children: _jsx(SatinRoot, { app: app, style: app.appearance.tint
+                ? {
+                    '--satin-tint': app.appearance.tint,
+                    '--satin-list-accent': app.appearance.tint,
+                }
+                : undefined, className: options.className, offlinePresentation: options.offline, onGlassError: options.onGlassError, children: _jsxs(ControlStyleProvider, { tint: app.appearance.tint, children: [_jsx(Lifecycle, {}), Content ? _jsx(Content, {}) : structure.tabs ? _jsx(DeclaredTabView, {}) : _jsx(PrimaryStack, {})] }) }) }));
+    return { unmount: () => root.unmount() };
+}
+const PrimaryTabContext = createContext(null);
+const NestedStackContext = createContext(false);
+/**
+ * Renders an in-memory navigation stack. A primary stack's root comes from
+ * `defineNavigation`, never from JSX. Inside a `Sheet`, `modal` with a `root` makes a stack the
+ * sheet owns.
+ *
+ * @example
+ * <Sheet isPresented={open} onPresentedChange={setOpen} title="New Note">
+ *   <NavigationStack modal root="compose" />
+ * </Sheet>
+ */
+export function NavigationStack(props) {
+    if (!props.modal && ('root' in props || 'params' in props))
+        throw new Error('Primary roots belong in defineNavigation, not JSX');
+    return props.modal ? _jsx(ModalStack, { ...props }) : _jsx(PrimaryStack, { tab: props.tab });
+}
+/** `NavigationSplitView`: the declared root becomes the sidebar and pushes become the
+ * retained detail stack. It collapses to a plain stack at compact width. A `NavigationStack` never
+ * splits by itself. */
+export function NavigationSplitView(props) {
+    if ('root' in props || 'params' in props || 'modal' in props)
+        throw new Error('NavigationSplitView uses a declared primary sidebar root');
+    return _jsx(PrimaryStack, { tab: props.tab, split: true });
+}
+function StackHost({ navigator, adaptive, primary, }) {
+    const [chrome] = useState(createScreenChrome);
+    const tabRegistration = useContext(TabRegistrationContext);
+    return (_jsx(ScreenChromeContext, { value: chrome, children: _jsx(NestedStackContext, { value: true, children: _jsx(TabRegistrationContext, { value: primary ? tabRegistration : null, children: _jsx(NavigatorHost, { navigator: navigator, adaptive: adaptive ?? false }) }) }) }));
+}
+function PrimaryStack({ tab, split = false }) {
+    const runtime = useAppContext();
+    const owningTab = useContext(PrimaryTabContext);
+    const nested = useContext(NestedStackContext);
+    const modal = useContext(ModalPresentationContext);
+    const id = tab ?? owningTab ?? (runtime.structure.stack ? 'main' : undefined);
+    const navigator = id ? runtime.stacks.get(id) : undefined;
+    if (nested || modal)
+        throw new Error('Nested NavigationStack requires modal and an explicit root');
+    if (!id || !navigator)
+        throw new Error(`Undeclared primary stack: ${id ?? '(missing tab)'}`);
+    if (owningTab && id !== owningTab)
+        throw new Error(`Stack ${id} does not belong to tab ${owningTab}`);
+    useLayoutEffect(() => {
+        if (runtime.mountedStacks.has(id))
+            throw new Error(`Primary stack mounted twice: ${id}`);
+        runtime.mountedStacks.add(id);
+        return () => {
+            runtime.mountedStacks.delete(id);
+        };
+    }, [runtime, id]);
+    return _jsx(StackHost, { navigator: navigator, adaptive: split, primary: true });
+}
+function ModalStack({ root, params }) {
+    const runtime = useAppContext();
+    const instance = useId();
+    const modal = useContext(ModalPresentationContext);
+    if (!modal)
+        throw new Error('A modal NavigationStack must be inside a Sheet');
+    const [scene] = useState(() => createSceneRestoration({
+        id: `${runtime.app.id}:modal:${instance}`,
+        storage: { getItem: () => null, setItem() { }, removeItem() { } },
+    }));
+    const [navigator] = useState(() => makeStack({ ...runtime, scene }, `modal:${instance}`, root, params));
+    useEffect(() => scene.connect(), [scene]);
+    return _jsx(StackHost, { navigator: navigator, adaptive: false, primary: false });
+}
+/**
+ * Returns the enclosing stack's navigation actions, typed against the registered routes. A wrong
+ * route id or a missing param is a compile error.
+ *
+ * @example
+ * const navigation = useNavigation()
+ * navigation.push('note', { id: note.id })
+ */
+export function useNavigation() {
+    const navigator = useNavigator();
+    const { routes, app } = useAppContext();
+    return useMemo(() => {
+        const validate = (id, params) => {
+            if (!Object.hasOwn(routes.definitions, id) || !routes.definitions[id].validate(params))
+                throw new Error(`Invalid route parameters: ${id}`);
+        };
+        return {
+            push(id, params) {
+                validate(id, params);
+                return navigator.push(id, params);
+            },
+            replace(id, params) {
+                validate(id, params);
+                navigator.replace(id, params);
+            },
+            showAcknowledgements() {
+                if (app.acknowledgements === false)
+                    return false;
+                return navigator.push(ACKNOWLEDGEMENTS, undefined);
+            },
+            pop: () => navigator.pop(),
+            popToRoot: () => navigator.popToRoot(),
+        };
+    }, [navigator, routes, app]);
+}
+/** Render one declared tab's content; identities and root stacks come from defineNavigation. */
+export function Tab({ id }) {
+    return _jsx(DeclaredTab, { id: id });
+}
+function DeclaredTab({ id }) {
+    const runtime = useAppContext();
+    const definition = runtime.structure.tabs?.find(tab => tab.id === id);
+    if (!definition)
+        throw new Error(`Unknown tab: ${id}`);
+    const Content = definition.content;
+    return (_jsx(PrimaryTabContext, { value: id, children: Content ? _jsx(Content, {}) : _jsx(PrimaryStack, {}) }));
+}
+/**
+ * `TabView`: renders the tabs from `defineNavigation`, each retaining its own stack, and
+ * restores the selected tab with the scene. Pass `selection` and `onSelectionChange` to control it;
+ * a controlled tab press only requests the change.
+ */
+export function TabView(props) {
+    return _jsx(DeclaredTabView, { ...props });
+}
+function DeclaredTabView({ children, ...props }) {
+    const runtime = useAppContext();
+    const binding = runtime.sceneRoutes;
+    if (!runtime.structure.tabs)
+        throw new Error('TabView requires a tabs declaration');
+    if (props.selection !== undefined && !runtime.stacks.has(props.selection))
+        throw new Error(`Unknown tab: ${props.selection}`);
+    const [selection, setSelection] = useRestoredState(runtime.scene, binding.selectionKey, binding.selectionSchema);
+    // Controlled selection wins even on the first render. Persist only accepted
+    // selections; a tab press is a request, never an optimistic scene mutation.
+    const [sidebarExpanded, setSidebarExpanded] = useState(() => {
+        const saved = runtime.scene.read('tabs:sidebar-expanded');
+        return typeof saved === 'boolean' ? saved : undefined;
+    });
+    const sidebar = {
+        expanded: sidebarExpanded,
+        setExpanded: (expanded) => {
+            setSidebarExpanded(expanded);
+            runtime.scene.write('tabs:sidebar-expanded', expanded);
+        },
+    };
+    const visibleSelection = props.selection ?? selection;
+    useLayoutEffect(() => {
+        if (props.selection !== undefined && props.selection !== selection)
+            setSelection(props.selection);
+    }, [props.selection, selection, setSelection]);
+    const used = new Set();
+    function declared(id) {
+        const tab = runtime.structure.tabs.find(tab => tab.id === id);
+        if (!tab)
+            throw new Error(`Unknown tab: ${id}`);
+        if (used.has(id))
+            throw new Error(`Duplicate tab id: ${id}`);
+        used.add(id);
+        return (_jsx(EngineTab, { id: tab.id, label: tab.label, icon: tab.icon, symbol: tab.symbol, role: tab.role, children: _jsx(DeclaredTab, { id: tab.id }) }, tab.id));
+    }
+    function composeTabs(composition) {
+        if (composition === undefined)
+            return runtime.structure.tabs.map(tab => declared(tab.id));
+        const result = Children.map(composition, child => {
+            if (child == null)
+                return null;
+            if (isValidElement(child) && child.type === Tab)
+                return declared(child.props.id);
+            if (isValidElement(child) && child.type === TabSection)
+                return (_jsx(TabSection, { ...child.props, children: Children.map(child.props.children, tab => {
+                        if (tab == null)
+                            return null;
+                        if (!isValidElement(tab) || tab.type !== Tab)
+                            throw new Error('TabSection children must be Tab declarations');
+                        return declared(tab.props.id);
+                    }) }));
+            throw new Error('TabView children must be Tab or TabSection declarations');
+        });
+        if (used.size !== runtime.structure.tabs.length)
+            throw new Error('TabView composition must include every declared tab once');
+        return result;
+    }
+    return (_jsx(TabSidebarContext, { value: sidebar, children: _jsx(EngineTabView, { ...props, selection: visibleSelection, onSelectionChange: id => {
+                if (props.selection === undefined)
+                    setSelection(id);
+                props.onSelectionChange?.(id);
+            }, children: composeTabs(children) }) }));
+}

package/dist/public/screenChrome.d.ts

@@ -0,0 +1,91 @@
+import { type ReactNode } from 'react';
+import type { NavigationBarDefinition } from '../navigation/types.js';
+import type { ScreenProps } from './Screen.js';
+type ChromeEntry = Omit<ScreenProps, 'children' | 'toolbar' | 'searchable'> & {
+    hasToolbar?: boolean;
+};
+export type ToolbarSlot = 'leading' | 'topBarLeading' | 'trailing' | 'principal' | 'bottom' | 'subtitle' | 'largeTitle' | 'largeSubtitle';
+export type Slots = Partial<Record<ToolbarSlot, HTMLDivElement | null>>;
+export declare function createScreenChrome(): {
+    entries: Map<string, ChromeEntry>;
+    slots: Map<string, Partial<Record<ToolbarSlot, HTMLDivElement | null>>>;
+    inlineTitleHeights: Map<string, number>;
+    setInlineTitleHeight(key: string, height: number): void;
+    snapshot: () => number;
+    subscribe: (fn: () => void) => () => void;
+    setSlots(key: string, value?: Slots, owner?: string): void;
+    set(key: string, value?: ChromeEntry): void;
+};
+export declare const ScreenContentContext: import("react").Context<Omit<ScreenProps, "children"> & {
+    hasBottomBar?: boolean;
+    hasToolbar?: boolean;
+    /** This screen's bottom toolbar slot, where an automatic search field goes on iPhone. */
+    bottomToolbar?: HTMLElement;
+    /** Automatic regular-width search belongs after the trailing navigation items. */
+    trailingToolbar?: HTMLElement;
+    /** The place a `DefaultToolbarItem kind="search"` holds among the bottom bar items. */
+    searchToolbarItem?: HTMLElement;
+    /** The screen's horizontal size class (a presentation's own, else the window's): it selects
+     * where an automatic `searchable` field goes. */
+    horizontalSizeClass?: 'compact' | 'regular';
+}>;
+export declare const ScreenChromeContext: import("react").Context<{
+    entries: Map<string, ChromeEntry>;
+    slots: Map<string, Partial<Record<ToolbarSlot, HTMLDivElement | null>>>;
+    inlineTitleHeights: Map<string, number>;
+    setInlineTitleHeight(key: string, height: number): void;
+    snapshot: () => number;
+    subscribe: (fn: () => void) => () => void;
+    setSlots(key: string, value?: Slots, owner?: string): void;
+    set(key: string, value?: ChromeEntry): void;
+} | null>;
+export declare function useScreenChrome(): Map<string, ChromeEntry> | undefined;
+export declare const NavigationSizeClassContext: import("react").Context<"compact" | "regular">;
+export declare function useScreenNavigation(vertical?: 'compact' | 'regular'): (base: NavigationBarDefinition | undefined, override: ChromeEntry | undefined, params?: unknown, entryIndex?: number) => Readonly<{
+    backButton?: import("../index.js").NavigationBackButtonBehavior;
+    display?: import("../index.js").TitleDisplayMode;
+    visibility?: import("../index.js").Visibility;
+    title: string | ((params: unknown) => string);
+    subtitle?: string;
+}> | undefined;
+/** The content and navigation chrome consume the same resolved title-display policy. */
+export declare function useScreenContentNavigation(): {
+    title?: string;
+    subtitle?: string;
+    backButton?: 'automatic' | 'hidden';
+    toolbarMinimizationBehavior?: import("../index.js").ToolbarMinimizationBehavior;
+    toolbarMinimizationRestoration?: import("../index.js").ToolbarMinimizationRestoration;
+    toolbarMinimizationSafeAreaAdjustment?: import("../index.js").ToolbarMinimizationSafeAreaAdjustment;
+    toolbar?: ReactNode;
+    searchable?: import("../index.js").Searchable;
+    navigationTransition?: import("./navigationTransition.js").NavigationTransition;
+    hasBottomBar?: boolean;
+    hasToolbar?: boolean;
+    /** This screen's bottom toolbar slot, where an automatic search field goes on iPhone. */
+    bottomToolbar?: HTMLElement;
+    /** Automatic regular-width search belongs after the trailing navigation items. */
+    trailingToolbar?: HTMLElement;
+    /** The place a `DefaultToolbarItem kind="search"` holds among the bottom bar items. */
+    searchToolbarItem?: HTMLElement;
+    /** The screen's horizontal size class (a presentation's own, else the window's): it selects
+     * where an automatic `searchable` field goes. */
+    horizontalSizeClass?: 'compact' | 'regular';
+    toolbarVisibility: "hidden" | "visible";
+    titleDisplay: import("../index.js").TitleDisplayMode;
+};
+export declare function screenNavigation(base: NavigationBarDefinition | undefined, override: ChromeEntry | undefined, params?: unknown, compact?: boolean, entryIndex?: number): NavigationBarDefinition | undefined;
+export declare function ScreenToolbar({ entryKey, active, motion, hasToolbar, inlineLarge, backVisible, fallback, onPrincipalChange, }: {
+    entryKey?: string;
+    active?: boolean;
+    /** This entry shows a back control: its leading items sit after it. */
+    backVisible?: boolean;
+    /** Keeps both transition participants painted. Outgoing items remain inert; incoming items
+     * become interactive and visible to assistive technology after their filled slots pass 0.5 opacity. */
+    motion?: 'incoming' | 'outgoing';
+    hasToolbar?: boolean;
+    inlineLarge?: boolean;
+    fallback?: ReactNode;
+    /** Reports whether this entry shows a principal item, which replaces its bar title. */
+    onPrincipalChange?: (entryKey: string, present: boolean) => void;
+}): import("react").JSX.Element;
+export {};

package/dist/public/screenChrome.js

@@ -0,0 +1,187 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The screen chrome store: per-entry titles, toolbar flags and toolbar slot elements, written by
+// Screen and ScreenToolbar and read by the navigation engine. Apps never touch it.
+import { createContext, useCallback, useContext, useLayoutEffect, useState, useSyncExternalStore, } from 'react';
+import { NavigatorContext, ScreenContext } from '../navigation/navigationContext.js';
+import { resolveNavigationDisplay, resolveNavigationVisibility, } from '../navigation/navigationChromeModel.js';
+import { ToolbarMaterialContext } from '../glass/toolbarMaterialContext.js';
+export function createScreenChrome() {
+    const entries = new Map();
+    const slots = new Map();
+    const inlineTitleHeights = new Map();
+    const slotOwners = new Map();
+    const listeners = new Set();
+    let revision = 0;
+    return {
+        entries,
+        slots,
+        inlineTitleHeights,
+        setInlineTitleHeight(key, height) {
+            const next = Number.isFinite(height) ? Math.max(0, height) : 0;
+            if ((inlineTitleHeights.get(key) ?? 0) === next)
+                return;
+            if (next)
+                inlineTitleHeights.set(key, next);
+            else
+                inlineTitleHeights.delete(key);
+            revision++;
+            listeners.forEach(fn => fn());
+        },
+        snapshot: () => revision,
+        subscribe: (fn) => {
+            listeners.add(fn);
+            return () => {
+                listeners.delete(fn);
+            };
+        },
+        setSlots(key, value, owner = 'toolbar') {
+            const owners = slotOwners.get(key) ?? new Map();
+            if (value)
+                owners.set(owner, value);
+            else
+                owners.delete(owner);
+            if (owners.size) {
+                slotOwners.set(key, owners);
+                slots.set(key, Object.assign({}, ...owners.values()));
+            }
+            else {
+                slotOwners.delete(key);
+                slots.delete(key);
+            }
+            revision++;
+            listeners.forEach(fn => fn());
+        },
+        set(key, value) {
+            if (value)
+                entries.set(key, value);
+            else
+                entries.delete(key);
+            revision++;
+            listeners.forEach(fn => fn());
+        },
+    };
+}
+export const ScreenContentContext = createContext({});
+export const ScreenChromeContext = createContext(null);
+const noop = () => () => { };
+const zero = () => 0;
+export function useScreenChrome() {
+    const store = useContext(ScreenChromeContext);
+    useSyncExternalStore(store?.subscribe ?? noop, store?.snapshot ?? zero, zero);
+    return store?.entries;
+}
+export const NavigationSizeClassContext = createContext('regular');
+export function useScreenNavigation(vertical) {
+    const inherited = useContext(NavigationSizeClassContext);
+    const compact = (vertical ?? inherited) === 'compact';
+    return useCallback((base, override, params, entryIndex = 0) => screenNavigation(base, override, params, compact, entryIndex), [compact]);
+}
+/** The content and navigation chrome consume the same resolved title-display policy. */
+export function useScreenContentNavigation() {
+    const chrome = useContext(ScreenContentContext);
+    const vertical = useContext(NavigationSizeClassContext);
+    const screen = useContext(ScreenContext);
+    const navigator = useContext(NavigatorContext);
+    const entryIndex = navigator?.getState().entries.findIndex(entry => entry.key === screen?.key) ?? 0;
+    // Presentations clear this context. Their bare content must not inherit the parent's back row.
+    const ownsNavigation = chrome.titleDisplay !== undefined || chrome.hasToolbar !== undefined;
+    return {
+        ...chrome,
+        toolbarVisibility: resolveNavigationVisibility(chrome.title, chrome.toolbarVisibility, chrome.titleDisplay, chrome.hasToolbar, ownsNavigation && entryIndex > 0 && chrome.backButton !== 'hidden'),
+        titleDisplay: resolveNavigationDisplay(chrome.title, chrome.titleDisplay, vertical === 'compact'),
+    };
+}
+export function screenNavigation(base, override, params, compact = false, entryIndex = 0) {
+    if (!base && !override)
+        return undefined;
+    const authoredTitle = override?.title ?? base?.title ?? '';
+    const title = typeof authoredTitle === 'function' ? authoredTitle(params) : authoredTitle;
+    return {
+        ...base,
+        title,
+        subtitle: override?.subtitle ?? base?.subtitle,
+        display: resolveNavigationDisplay(title, override?.titleDisplay ?? base?.display, compact),
+        backButton: override?.backButton ?? base?.backButton,
+        visibility: resolveNavigationVisibility(title, override?.toolbarVisibility ?? base?.visibility, override?.titleDisplay ?? base?.display, override?.hasToolbar, entryIndex > 0 && (override?.backButton ?? base?.backButton) !== 'hidden'),
+    };
+}
+export function ScreenToolbar({ entryKey, active = true, motion, hasToolbar, inlineLarge, backVisible, fallback, onPrincipalChange, }) {
+    const store = useContext(ScreenChromeContext);
+    const [leading, setLeading] = useState(null);
+    const [trailing, setTrailing] = useState(null);
+    const [principal, setPrincipal] = useState(null);
+    const [bottom, setBottom] = useState(null);
+    const [incomingVisible, setIncomingVisible] = useState(false);
+    useLayoutEffect(() => {
+        setIncomingVisible(false);
+        if (motion !== 'incoming')
+            return;
+        let frame = 0;
+        const check = () => {
+            const slots = [leading, trailing, principal, bottom].filter((slot) => slot !== null && slot.childElementCount > 0);
+            if (slots.length > 0 && slots.every(slot => Number(getComputedStyle(slot).opacity) > 0.5)) {
+                setIncomingVisible(true);
+                return;
+            }
+            frame = requestAnimationFrame(check);
+        };
+        frame = requestAnimationFrame(check);
+        return () => cancelAnimationFrame(frame);
+    }, [motion, leading, trailing, principal, bottom]);
+    useLayoutEffect(() => {
+        if (!entryKey || !store)
+            return;
+        store.setSlots(entryKey, {
+            leading,
+            topBarLeading: inlineLarge ? trailing : leading,
+            trailing,
+            principal,
+            bottom,
+        });
+        return () => store.setSlots(entryKey);
+    }, [store, entryKey, leading, trailing, principal, bottom, inlineLarge]);
+    useLayoutEffect(() => {
+        if (!principal || !entryKey || !onPrincipalChange)
+            return;
+        const report = () => onPrincipalChange(entryKey, principal.childElementCount > 0);
+        const mutation = new MutationObserver(report);
+        mutation.observe(principal, { childList: true });
+        report();
+        return () => {
+            mutation.disconnect();
+            onPrincipalChange(entryKey, false);
+        };
+    }, [principal, entryKey, onPrincipalChange]);
+    useLayoutEffect(() => {
+        const header = trailing?.closest('[data-satin-navigation-chrome]');
+        if (!active || !header || !leading || !trailing || !principal)
+            return;
+        const measure = () => {
+            const bounds = header.getBoundingClientRect();
+            const back = header.querySelector('[data-satin-navigation-back-visible="true"]');
+            const toggle = header.querySelector('[data-satin-sidebar-toggle]');
+            const toggleBounds = toggle?.getBoundingClientRect();
+            const toggleLeading = header.dataset.satinPane === 'detail';
+            const start = Math.max(toggleLeading && toggleBounds ? toggleBounds.right - bounds.left : 0, leading.childElementCount ? leading.getBoundingClientRect().right - bounds.left : 0, back ? back.getBoundingClientRect().right - bounds.left : 0);
+            const end = Math.max(trailing.childElementCount ? bounds.right - trailing.getBoundingClientRect().left : 0, !toggleLeading && toggleBounds ? bounds.right - toggleBounds.left : 0);
+            header.style.setProperty('--satin-toolbar-title-reserve', `${Math.max(start, end)}px`);
+        };
+        const resize = new ResizeObserver(measure);
+        for (const node of [header, leading, trailing, principal])
+            resize.observe(node);
+        const mutation = new MutationObserver(measure);
+        mutation.observe(header, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['data-satin-navigation-back-visible'],
+        });
+        measure();
+        return () => {
+            resize.disconnect();
+            mutation.disconnect();
+            header.style.removeProperty('--satin-toolbar-title-reserve');
+        };
+    }, [active, leading, trailing, principal]);
+    return (_jsxs("div", { "data-satin-entry-toolbar": entryKey, "data-satin-covered": !active && !motion ? 'true' : undefined, hidden: !active && !motion, inert: !active || motion === 'outgoing' || (motion === 'incoming' && !incomingVisible), "aria-hidden": !active || motion === 'outgoing' || (motion === 'incoming' && !incomingVisible) || undefined, "data-satin-toolbar-interactive": (active && (motion !== 'incoming' || incomingVisible)) || undefined, "data-satin-entry-toolbar-active": active || undefined, "data-satin-toolbar-motion": motion, "data-satin-entry-back-visible": backVisible || undefined, style: { display: active || motion ? 'contents' : 'none' }, children: [_jsx("div", { ref: setLeading, "data-satin-navigation-toolbar-slot": "leading" }), _jsx("div", { ref: setTrailing, "data-satin-navigation-toolbar-slot": "trailing", children: _jsx(ToolbarMaterialContext, { value: true, children: hasToolbar ? null : fallback }) }), _jsx("div", { ref: setPrincipal, "data-satin-navigation-toolbar-slot": "principal" }), _jsx("div", { ref: setBottom, "data-satin-navigation-toolbar-slot": "bottom" })] }));
+}

package/dist/public/scroll.d.ts

@@ -0,0 +1,38 @@
+import { type HTMLAttributes } from 'react';
+import type { ScrollDismissesKeyboardMode } from '../keyboard/adapter.js';
+import type { TaskAction } from '../tasks/useTask.js';
+import type { ScrollAnchor, ScrollPositionBinding, VerticalScrollGeometry } from '../scroll/position.js';
+import type { ScrollEdgeEffectHidden, ScrollEdgeEffectStyleSelection } from '../scroll/edgePolicy.js';
+import type { ScrollOffset, ScrollToTopOptions } from '../scroll/types.js';
+/** The current offset and imperative positioning of a scroll view. */
+export interface ScrollViewHandle {
+    readonly offset: ScrollOffset;
+    /** Position a vertical ScrollTarget. Horizontal target positioning is unsupported. */
+    scrollTo(id: string, anchor?: ScrollAnchor): boolean;
+    scrollToTop(options?: ScrollToTopOptions): void;
+}
+/** Scroll policy. Target positioning, refresh and scalar geometry are vertical-only. */
+export type ScrollViewProps = Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
+    id: string;
+    chain?: boolean;
+    primary?: boolean;
+    scrollDismissesKeyboard?: ScrollDismissesKeyboardMode;
+    scrollEdgeEffectHidden?: ScrollEdgeEffectHidden;
+    scrollEdgeEffectStyle?: ScrollEdgeEffectStyleSelection;
+} & ({
+    axis?: 'vertical';
+    refreshable?: TaskAction;
+    defaultScrollAnchor?: 'top' | 'bottom';
+    maintainVisibleContentPosition?: boolean;
+    scrollPosition?: ScrollPositionBinding;
+    onScrollGeometryChange?: (geometry: VerticalScrollGeometry) => void;
+} | {
+    axis: 'horizontal';
+    refreshable?: never;
+    defaultScrollAnchor?: never;
+    maintainVisibleContentPosition?: never;
+    scrollPosition?: never;
+    onScrollGeometryChange?: never;
+});
+/** SwiftUI ScrollView with framework-owned restoration and native scrolling. */
+export declare const ScrollView: import("react").ForwardRefExoticComponent<ScrollViewProps & import("react").RefAttributes<ScrollViewHandle>>;

package/dist/public/scroll.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { ScrollSurface } from '../scroll/ScrollSurface.js';
+/** SwiftUI ScrollView with framework-owned restoration and native scrolling. */
+export const ScrollView = forwardRef(function ScrollView(props, ref) {
+    return _jsx(ScrollSurface, { ...props, ref: ref });
+});

package/dist/public/storage.d.ts

@@ -0,0 +1,9 @@
+import { estimateStorage, requestPersistentStorage } from '../data/database.js';
+/**
+ * The app's storage quota: `estimate()` reports usage, and `requestPersistence()` asks WebKit not
+ * to evict the app's data. Request persistence after the user saves something meaningful.
+ */
+export declare const storageQuota: Readonly<{
+    estimate: typeof estimateStorage;
+    requestPersistence: typeof requestPersistentStorage;
+}>;

package/dist/public/storage.js

@@ -0,0 +1,9 @@
+import { estimateStorage, requestPersistentStorage } from '../data/database.js';
+/**
+ * The app's storage quota: `estimate()` reports usage, and `requestPersistence()` asks WebKit not
+ * to evict the app's data. Request persistence after the user saves something meaningful.
+ */
+export const storageQuota = Object.freeze({
+    estimate: estimateStorage,
+    requestPersistence: requestPersistentStorage,
+});