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

package/dist/motionProbeControls.js

@@ -0,0 +1,118 @@
+import { createNativeScrubExperiment } from './navigation/nativeScrubExperiment.js';
+/** Opt-in diagnostics, including an explicitly enabled native navigation experiment. */
+export function createMotionOwnershipControls(record) {
+    const section = document.createElement('section');
+    const title = document.createElement('p');
+    title.textContent =
+        'Ownership control: play, then compare the three dots during a deliberate 300 ms main-thread block. This is excluded from gesture costs.';
+    const play = document.createElement('button');
+    play.textContent = 'Run ownership control';
+    const rows = ['Document WAAPI', 'rAF transform', 'rAF WAAPI seek'].map(label => {
+        const row = document.createElement('div'), dot = document.createElement('span');
+        row.textContent = label;
+        Object.assign(row.style, { height: '30px', position: 'relative', width: '250px' });
+        Object.assign(dot.style, {
+            position: 'absolute',
+            left: '0',
+            bottom: '0',
+            width: '8px',
+            height: '8px',
+            borderRadius: '50%',
+            background: '#61dcff',
+        });
+        row.append(dot);
+        return { row, dot };
+    });
+    play.onclick = () => {
+        if (play.disabled)
+            return;
+        play.disabled = true;
+        const start = performance.now(), samples = [];
+        const keys = [{ transform: 'translateX(0px)' }, { transform: 'translateX(240px)' }];
+        const auto = rows[0].dot.animate(keys, { duration: 1000, fill: 'both', easing: 'linear' });
+        const seek = rows[2].dot.animate(keys, { duration: 1000, fill: 'both', easing: 'linear' });
+        seek.pause();
+        seek.currentTime = 0;
+        const tick = (now) => {
+            const elapsed = Math.min(1000, now - start);
+            samples.push(now);
+            rows[1].dot.style.transform = `translateX(${elapsed * 0.24}px)`;
+            seek.currentTime = elapsed;
+            if (elapsed < 1000)
+                requestAnimationFrame(tick);
+            else {
+                record({
+                    kind: 'ownership-block',
+                    start,
+                    end: performance.now(),
+                    samples,
+                    deliberateBlockMs: 300,
+                    interpretation: 'Compare recorded motion. Seeking a paused WAAPI animation still needs every JS update.',
+                });
+                auto.cancel();
+                seek.cancel();
+                play.disabled = false;
+            }
+        };
+        requestAnimationFrame(tick);
+        setTimeout(() => {
+            const until = performance.now() + 300;
+            while (performance.now() < until) {
+                /* controlled stall */
+            }
+        }, 250);
+    };
+    section.append(title, play, ...rows.map(r => r.row));
+    const prompt = document.createElement('p');
+    prompt.textContent =
+        'Drag each strip right from its centre. First preserves Navigator touch-action; second permits native horizontal scroll. Native scroll may cancel the pointer stream.';
+    section.append(prompt);
+    for (const policy of ['pan-y pan-right pinch-zoom', 'pan-x']) {
+        const scroller = document.createElement('div'), content = document.createElement('div');
+        Object.assign(scroller.style, {
+            width: '250px',
+            height: '48px',
+            overflowX: 'scroll',
+            touchAction: policy,
+            background: '#345',
+            marginTop: '8px',
+        });
+        Object.assign(content.style, {
+            width: '750px',
+            height: '48px',
+            background: 'repeating-linear-gradient(90deg,#345 0px,#345 49px,#fff 50px,#345 51px)',
+        });
+        scroller.setAttribute('data-satin-ownership-scroll', 'true');
+        content.textContent = policy;
+        scroller.append(content);
+        section.append(scroller);
+        const events = [];
+        for (const type of ['pointerdown', 'pointermove', 'pointercancel', 'pointerup', 'scroll'])
+            scroller.addEventListener(type, () => {
+                events.push({ type, at: performance.now(), scroll: scroller.scrollLeft });
+                if (events.length > 300)
+                    events.shift();
+                if (type === 'pointerup' || type === 'pointercancel')
+                    setTimeout(() => record({
+                        kind: 'native-scroll-arbitration',
+                        policy,
+                        scroll: scroller.scrollLeft,
+                        events: [...events],
+                    }), 500);
+            }, { passive: true });
+        requestAnimationFrame(() => {
+            scroller.scrollLeft = 300;
+        });
+    }
+    section.prepend(createNativeScrubExperiment(record));
+    if ('ScrollTimeline' in window) {
+        const block = document.createElement('button');
+        block.textContent = 'Block next native scrub';
+        block.onclick = () => {
+            sessionStorage.setItem('satin:probe-native-block', '1');
+            block.textContent = 'Block armed';
+        };
+        section.prepend(block);
+    }
+    return section;
+}

package/dist/motionProbeDelivery.d.ts

@@ -0,0 +1,15 @@
+/** A beacon is a best-effort copy, never an acknowledgement. Full reports remain
+ * in the outbox until an ordinary POST succeeds, including across page reloads. */
+export declare class MotionProbeOutbox {
+    private records;
+    private storage?;
+    private key;
+    constructor(storage: Pick<Storage, 'getItem' | 'setItem'> | undefined, key: string);
+    get pending(): number;
+    save(body: string): boolean;
+    private persist;
+    drain(send: (body: string) => Promise<boolean>): Promise<boolean>;
+}
+/** Keep the most recent input and release samples under WebKit's beacon quota.
+ * The full report is separately durable; truncation is explicit in the copy. */
+export declare function motionBeacon(body: string, limit?: number): Blob | undefined;

package/dist/motionProbeDelivery.js

@@ -0,0 +1,84 @@
+/** A beacon is a best-effort copy, never an acknowledgement. Full reports remain
+ * in the outbox until an ordinary POST succeeds, including across page reloads. */
+export class MotionProbeOutbox {
+    records = [];
+    storage;
+    key;
+    constructor(storage, key) {
+        this.storage = storage;
+        this.key = key;
+        try {
+            this.records = JSON.parse(storage?.getItem(key) ?? '[]');
+        }
+        catch {
+            /* storage unavailable */
+        }
+    }
+    get pending() {
+        return this.records.length;
+    }
+    save(body) {
+        // One cumulative report per client replaces that client's older snapshot.
+        const client = JSON.parse(body).client;
+        this.records = this.records.filter(record => JSON.parse(record).client !== client);
+        this.records.push(body);
+        return this.persist();
+    }
+    persist() {
+        try {
+            this.storage?.setItem(this.key, JSON.stringify(this.records));
+            return Boolean(this.storage);
+        }
+        catch {
+            return false;
+        } // in-memory records remain retryable
+    }
+    async drain(send) {
+        for (const body of [...this.records]) {
+            if (!(await send(body)))
+                return false;
+            this.records = this.records.filter(record => record !== body);
+            this.persist();
+        }
+        return true;
+    }
+}
+/** Keep the most recent input and release samples under WebKit's beacon quota.
+ * The full report is separately durable; truncation is explicit in the copy. */
+export function motionBeacon(body, limit = 60 * 1024) {
+    const full = JSON.parse(body);
+    let count = 120;
+    while (count >= 1) {
+        const compact = {
+            version: full.version,
+            client: full.client,
+            build: full.build,
+            glassProfile: full.glassProfile
+                ? { ...full.glassProfile, events: full.glassProfile.events.slice(-count) }
+                : undefined,
+            timeOrigin: full.timeOrigin,
+            at: full.at,
+            url: full.url,
+            visibility: full.visibility,
+            delivery: { kind: 'background-beacon', compact: true, fullReportPending: true },
+            windows: full.windows
+                .slice(-2)
+                .map((w) => ({
+                ...w,
+                frames: w.frames.slice(-count),
+                contactFrames: w.contactFrames?.slice(-count),
+                inputTimes: w.inputTimes.slice(-count),
+            })),
+            navigationGlassFrames: full.navigationGlassFrames?.slice(-count),
+            touchSamples: full.touchSamples.slice(-count),
+            navigationFrames: full.navigationFrames.slice(-count),
+            preparations: full.preparations.slice(-count),
+            summaries: full.summaries.slice(-2),
+        };
+        const blob = new Blob([JSON.stringify(compact)], { type: 'application/json' });
+        if (blob.size <= limit)
+            return blob;
+        count = Math.floor(count / 2);
+    }
+    return undefined;
+}

package/dist/navigation/DetailList.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+/** Regular-width grouped detail content beneath NavigatorHost's inline title. */
+export declare function DetailList({ items, }: {
+    items: readonly {
+        id: string;
+        label: ReactNode;
+        onPress?: () => void;
+    }[];
+}): import("react").JSX.Element;

package/dist/navigation/DetailList.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScrollSurface } from '../scroll/ScrollSurface.js';
+import { Pressable } from '../press/Pressable.js';
+/** Regular-width grouped detail content beneath NavigatorHost's inline title. */
+export function DetailList({ items, }) {
+    return (_jsx(ScrollSurface, { id: "detail", axis: "vertical", primary: true, "data-satin-detail-list": "true", children: _jsx("div", { "data-satin-detail-group": "true", children: items.map(item => item.onPress ? (_jsx(Pressable, { feedback: "row", "data-satin-detail-row": "true", onPress: item.onPress, children: item.label }, item.id)) : (_jsx("div", { "data-satin-detail-row": "true", children: item.label }, item.id))) }) }));
+}

package/dist/navigation/NavigationChrome.d.ts

@@ -0,0 +1,18 @@
+import { type Ref, type ReactNode } from 'react';
+import type { ScreenRegistry } from './registry.js';
+import type { NavigatorStore, RegistryScreenEntry } from './store.js';
+type NavigationChromeProps = Readonly<{
+    trailing?: ReactNode;
+    backButtonMaskRef?: Ref<HTMLSpanElement>;
+    backButtonRef?: Ref<HTMLButtonElement>;
+    backButtonVisualRef?: Ref<HTMLSpanElement>;
+    entries?: readonly RegistryScreenEntry<ScreenRegistry>[];
+    pane?: 'sidebar' | 'detail' | 'stack';
+    /** iPad tabs float over this plain stack, so its bar row is the tab capsule's row. */
+    tabCapsuleRow?: boolean;
+    onToggleSidebar?: () => void;
+    navigator: NavigatorStore;
+    titleElements: Map<string, HTMLElement>;
+}>;
+export declare function NavigationChrome({ trailing, backButtonMaskRef, backButtonRef, backButtonVisualRef, navigator, onToggleSidebar, entries, pane, tabCapsuleRow, titleElements, }: NavigationChromeProps): import("react").JSX.Element;
+export {};

package/dist/navigation/NavigationChrome.js

@@ -0,0 +1,195 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavigationTitleSlot } from './NavigationTitleSlots.js';
+import { SymbolImage } from '../symbols/Symbol.js';
+import { useScreenChrome, useScreenNavigation, ScreenToolbar, ScreenChromeContext, } from '../public/chrome.js';
+import { navigatorFocusRuntime } from '../focus/navigationFocus.js';
+import { GlassBackground } from '../glass/GlassEffect.js';
+import { TabActivityContext } from '../tabs/context.js';
+import { transitionParticipants } from './transitionBindings.js';
+import { MaterialEffectContext } from '../glass/liquidContext.js';
+import { ToolbarGlass } from './ToolbarGlass.js';
+import { SidebarSymbol } from './SidebarSymbol.js';
+import { useCallback, useContext, useLayoutEffect, useRef, useState, } from 'react';
+import { settingsChromeTokens } from '../settings/tokens.js';
+import { observeNavigationEdge } from './navigationEdge.js';
+import { Pressable } from '../press/Pressable.js';
+import { hiddenByMultiPop, isEntryCovered } from './stack.js';
+import { backButtonVisible, backTargetIndex, resolveNavigationTitle, } from './navigationChromeModel.js';
+const INLINE_LARGE_SETTLE_PX = 5;
+export function NavigationChrome({ trailing, backButtonMaskRef, backButtonRef, backButtonVisualRef, navigator, onToggleSidebar, entries = navigator.getState().entries, pane = 'stack', tabCapsuleRow = false, titleElements, }) {
+    const chrome = useScreenChrome();
+    const chromeStore = useContext(ScreenChromeContext);
+    const screenNavigation = useScreenNavigation();
+    const tabActive = useContext(TabActivityContext);
+    const webgpu = Boolean(useContext(MaterialEffectContext)?.backend);
+    // Chrome buttons are interactive glass: each glass takes the finger itself (GlassBackground).
+    const topIndex = entries.length - 1;
+    const topEntry = entries[topIndex];
+    const topDefinition = topEntry ? navigator.registry.resolve(topEntry.screenId) : undefined;
+    const topNavigation = screenNavigation(topDefinition?.navigation, topEntry ? chrome?.get(topEntry.key) : undefined, topEntry?.params, topIndex);
+    const [minimized, setMinimized] = useState(false);
+    const barHidden = topNavigation?.visibility === 'hidden' || minimized;
+    const isBackVisible = backButtonVisible(topDefinition ? { ...topDefinition, navigation: topNavigation } : undefined, topIndex);
+    // Outgoing entries retain their glass until the transition releases them.
+    // A root-only stack must not start the renderer for an invisible control.
+    const entryBackVisible = (entry, index) => {
+        const definition = navigator.registry.resolve(entry.screenId);
+        if (!definition)
+            return false;
+        const navigation = screenNavigation(definition.navigation, chrome?.get(entry.key), entry.params, index);
+        return backButtonVisible({ ...definition, navigation }, index);
+    };
+    // A root with toolbar items already runs the renderer, and its first push turns the leading glass
+    // into the back control's glass in the first frame: keep that glass mounted beforehand.
+    const needsBackGlass = entries.some((entry, index) => entryBackVisible(entry, index) || chrome?.get(entry.key)?.hasToolbar);
+    // The two entries of a running push or pop: both toolbars are laid out so the transition fades
+    // one into the other (transitionChrome.ts chromeTracks).
+    // Entries whose toolbar shows a principal item: that item replaces their bar title.
+    const [principalKeys, setPrincipalKeys] = useState(() => new Set());
+    const reportPrincipal = useCallback((key, present) => {
+        setPrincipalKeys(previous => {
+            if (previous.has(key) === present)
+                return previous;
+            const next = new Set(previous);
+            if (present)
+                next.add(key);
+            else
+                next.delete(key);
+            return next;
+        });
+    }, []);
+    const toolbarMotion = new Map();
+    // The rear entry of a running push or pop: its title is clipped by the front page.
+    const rearTitles = new Set();
+    for (const { primaryIndex, secondaryIndex, direction } of transitionParticipants(entries)) {
+        toolbarMotion.set(primaryIndex, direction === 'push' ? 'incoming' : 'outgoing');
+        toolbarMotion.set(secondaryIndex, direction === 'push' ? 'outgoing' : 'incoming');
+        if (direction === 'pop') {
+            for (let index = secondaryIndex + 1; index < primaryIndex; index++) {
+                toolbarMotion.set(index, 'outgoing');
+            }
+        }
+        rearTitles.add(secondaryIndex);
+    }
+    const targetIndex = backTargetIndex(entries);
+    const targetEntry = entries[targetIndex];
+    const targetDefinition = targetEntry
+        ? navigator.registry.resolve(targetEntry.screenId)
+        : undefined;
+    const targetTitle = resolveNavigationTitle(screenNavigation(targetDefinition?.navigation, targetEntry ? chrome?.get(targetEntry.key) : undefined, targetEntry?.params), targetEntry?.params) ??
+        targetEntry?.screenId ??
+        'previous screen';
+    const headerRef = useRef(null);
+    // Screens elect their primary scroll view after mounting; observers follow each election.
+    const [primaryRevision, setPrimaryRevision] = useState(0);
+    useLayoutEffect(() => {
+        const host = headerRef.current?.parentElement;
+        if (!host)
+            return;
+        const changed = () => setPrimaryRevision(revision => revision + 1);
+        host.addEventListener('satin:primary-scroll', changed);
+        return () => host.removeEventListener('satin:primary-scroll', changed);
+    }, []);
+    useLayoutEffect(() => {
+        const host = headerRef.current?.parentElement;
+        if (!host)
+            return;
+        const update = () => {
+            const primary = host.querySelector('[data-satin-screen-container][data-satin-covered="false"] [data-satin-primary="true"]');
+            setMinimized(primary?.dataset.satinToolbarMinimized === 'true');
+        };
+        update();
+        host.addEventListener('satin:toolbar-minimization', update);
+        return () => host.removeEventListener('satin:toolbar-minimization', update);
+    }, [topEntry?.key, primaryRevision, tabActive]);
+    useLayoutEffect(() => {
+        const header = headerRef.current;
+        const screen = header?.parentElement?.querySelector('[data-satin-screen-container][data-satin-covered="false"]');
+        const scroller = screen?.querySelector('[data-satin-primary="true"]');
+        if (!header || !scroller || !tabActive)
+            return;
+        // `inlineLarge` settles from the bar's large title to its inline title within the first 5 pt
+        // of scroll (iOS 27 native reference, header-styles r1: settled at every sampled offset from 5 pt).
+        const inlineLarge = topNavigation?.display === 'inlineLarge';
+        const updateInlineLarge = () => {
+            const collapsed = Math.min(1, Math.max(0, scroller.scrollTop / INLINE_LARGE_SETTLE_PX));
+            header.style.setProperty('--satin-inline-large-collapsed', String(collapsed));
+            // A transparent title still reaches the bar's glass sampling; a settled one leaves the bar.
+            header.toggleAttribute('data-satin-inline-large-settled', collapsed === 1);
+        };
+        const updateLarge = () => header.style.setProperty('--satin-large-title-collapsed', String(Math.min(1, Math.max(0, (scroller.scrollTop -
+            settingsChromeTokens.rootLargeTitleTopOffsetPx +
+            settingsChromeTokens.navigationBarHeightPx) /
+            settingsChromeTokens.largeTitleLineHeightPx))));
+        const update = inlineLarge ? updateInlineLarge : updateLarge;
+        update();
+        scroller.addEventListener('scroll', update, { passive: true });
+        return () => scroller.removeEventListener('scroll', update);
+    }, [topEntry?.key, tabActive, topNavigation?.display, primaryRevision]);
+    useLayoutEffect(() => {
+        const header = headerRef.current;
+        if (!header || !topEntry || !tabActive)
+            return;
+        const runtime = navigator[navigatorFocusRuntime];
+        const release = runtime.bindChrome(topEntry.key, {
+            element: header,
+            heading: titleElements.get(topEntry.key)?.querySelector('strong') ?? null,
+            back: isBackVisible
+                ? header.querySelector('[data-satin-navigation-back-button]')
+                : null,
+        });
+        const capture = () => runtime.capture([topEntry.key]);
+        header.addEventListener('focusin', capture);
+        runtime.flush(navigator.getState(), topEntry.key, true);
+        return () => {
+            header.removeEventListener('focusin', capture);
+            release();
+        };
+    });
+    // Native scroll-edge effects only treat content that has scrolled under the
+    // bar. At rest nothing is underneath, so the material (and its tint) is off.
+    const edgeRef = useRef(null);
+    const edgeMoving = transitionParticipants(entries).length > 0;
+    // Under floating iPad tabs, a root without an inline title has no bar row of its own: its
+    // buttons share the capsule's row. Native's edge effect then covers only the status bar, and
+    // scrolled rows stay legible beside the capsule (iOS 27 native reference edge-tab, iPad Pro 13).
+    const statusEdgeOnly = barHidden || (tabCapsuleRow && !isBackVisible && topNavigation?.display !== 'inline');
+    useLayoutEffect(() => {
+        const edge = edgeRef.current;
+        const host = edge?.parentElement?.parentElement;
+        // Moving pages own their edges. Rebind the shared edge after it becomes visible so
+        // its observer cannot retain the previous page's material while geometry is hidden.
+        if (!edge || !host || !tabActive || edgeMoving)
+            return;
+        const screens = [
+            ...host.querySelectorAll(`[data-satin-screen-container][data-satin-covered="false"][data-satin-pane="${pane}"]`),
+        ].filter(screen => screen.closest('[data-satin-navigator-host]') === host);
+        const scroller = screens.at(-1)?.querySelector('[data-satin-primary="true"]') ?? null;
+        return observeNavigationEdge(edge, scroller, statusEdgeOnly);
+    }, [topEntry?.key, tabActive, pane, primaryRevision, statusEdgeOnly, edgeMoving]);
+    return (_jsxs(_Fragment, { children: [(topDefinition?.navigation?.display !== 'none' || barHidden) && (_jsxs("div", { "aria-hidden": "true", "data-satin-navigation-edge-host": "true", style: {
+                    ['--satin-inline-title-content-height']: `${barHidden ? 0 : (chromeStore?.inlineTitleHeights.get(topEntry?.key ?? '') ?? 0)}px`,
+                }, "data-satin-pane": pane, hidden: edgeMoving, children: [_jsx("div", { ref: edgeRef, "data-satin-scroll-edge": "true" }), _jsx("div", { "data-satin-scroll-edge-cap": "true" }), _jsx("div", { "data-satin-scroll-edge-seam": "true" })] })), _jsxs("header", { ref: headerRef, "aria-label": topEntry ? `${topEntry.screenId} navigation` : 'Navigation', "data-satin-navigation-chrome": "true", "data-satin-system-toolbar": onToggleSidebar ? (pane === 'sidebar' ? 'trailing' : 'leading') : undefined, "data-satin-pane": pane, "data-satin-navigation-bar-hidden": barHidden || undefined, "data-satin-navigation-edge": topDefinition?.navigation?.display !== 'none' || undefined, children: [_jsx("div", { "data-satin-navigation-title-stage": "true", children: entries.map((entry, index) => {
+                            const definition = navigator.registry.resolve(entry.screenId);
+                            const navigation = screenNavigation(definition?.navigation, chrome?.get(entry.key), entry.params, index);
+                            const title = resolveNavigationTitle(navigation, entry.params);
+                            if (!navigation ||
+                                (navigation.display === 'none' && pane !== 'sidebar') ||
+                                title === undefined) {
+                                return null;
+                            }
+                            // A popToRoot animates only the top title over the root title; intermediate
+                            // outgoing titles must not show through (same rule as their screens).
+                            const covered = isEntryCovered(entries, index) ||
+                                (pane === 'stack' && index > 0 && hiddenByMultiPop(entries, index));
+                            return (_jsx("div", { ref: element => {
+                                    if (element)
+                                        titleElements.set(entry.key, element);
+                                    else
+                                        titleElements.delete(entry.key);
+                                }, "aria-hidden": covered || !tabActive || navigation.display === 'large' || undefined, "data-satin-navigation-title-covered": covered ? 'true' : 'false', "data-satin-navigation-title-layer": "true", "data-satin-navigation-title-key": entry.key, "data-satin-navigation-title-display": navigation.display, "data-satin-navigation-title-rear": rearTitles.has(index) || undefined, "data-satin-navigation-title-replaced": principalKeys.has(entry.key) || undefined, "data-satin-transition": entry.transition.phase, style: {
+                                    zIndex: index + 1,
+                                    ['--satin-inline-title-content-height']: `${chromeStore?.inlineTitleHeights.get(entry.key) ?? 0}px`,
+                                }, children: _jsx("span", { "data-satin-navigation-title-clip": "true", children: _jsxs("span", { "data-satin-navigation-title-content": "true", children: [_jsx("strong", { role: "heading", "aria-level": 1, tabIndex: -1, children: title }), _jsx(NavigationTitleSlot, { entryKey: entry.key, placement: "subtitle", fallback: navigation.subtitle }), navigation.display === 'inlineLarge' && (_jsx("span", { "aria-hidden": "true", "data-satin-navigation-inline-large-title": "true", children: title }))] }) }) }, entry.key));
+                        }) }), _jsx(ToolbarGlass, {}), entries.map((entry, index) => (_jsx(ScreenToolbar, { entryKey: entry.key, active: entry.key === topEntry?.key, motion: toolbarMotion.get(index), backVisible: entryBackVisible(entry, index), hasToolbar: chrome?.get(entry.key)?.hasToolbar, inlineLarge: screenNavigation(navigator.registry.resolve(entry.screenId)?.navigation, chrome?.get(entry.key), entry.params, index)?.display === 'inlineLarge', fallback: entry.key === topEntry?.key ? trailing : undefined, onPrincipalChange: reportPrincipal }, entry.key))), onToggleSidebar && (_jsxs(Pressable, { "data-satin-sidebar-toggle": "true", "aria-label": pane === 'sidebar' ? 'Hide Sidebar' : 'Show Sidebar', "data-satin-glass-press": "true", onPress: onToggleSidebar, children: [_jsx(GlassBackground, { shape: "circle", interactive: true }), _jsx(SidebarSymbol, { name: "sidebar.left" })] })), _jsx(Pressable, { ref: backButtonRef, "aria-label": `Back to ${targetTitle}`, "data-satin-navigation-back-button": "true", "data-satin-navigation-back-visible": isBackVisible ? 'true' : 'false', disabled: !isBackVisible, onPress: () => navigator.pop(), "data-satin-glass-press": "true", children: _jsx("span", { ref: backButtonMaskRef, "data-satin-navigation-back-mask": "true", children: _jsxs("span", { ref: backButtonVisualRef, "data-satin-navigation-back-visual": "true", "data-satin-navigation-back-glass": webgpu || undefined, children: [needsBackGlass && _jsx(GlassBackground, { shape: "circle", interactive: true }), _jsx("span", { "data-satin-navigation-back-ink": "true", children: _jsx(SymbolImage, { name: "chevron.left", weight: "semibold" }) })] }) }) })] })] }));
+}

package/dist/navigation/NavigationSearchRow.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+/** React keeps one portal target for the field, including while navigation moves its container. */
+export declare function NavigationSearchRow({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function searchRowIsLifted(row: HTMLElement | undefined): boolean;
+/** Lift only the portal container. Its field and glass registrations keep their identity. */
+export declare function liftNavigationSearchRow(row: HTMLElement | undefined): (() => void) | undefined;
+export declare function navigationSearchRowOf(drawer: HTMLElement): HTMLElement | null;

package/dist/navigation/NavigationSearchRow.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+const rows = new WeakMap();
+const placements = new WeakMap();
+const lifted = new WeakSet();
+/** React keeps one portal target for the field, including while navigation moves its container. */
+export function NavigationSearchRow({ children }) {
+    const homeRef = useRef(null);
+    const [row] = useState(() => {
+        if (typeof document === 'undefined')
+            return null;
+        const element = document.createElement('div');
+        element.setAttribute('data-satin-search-row', '');
+        return element;
+    });
+    useLayoutEffect(() => {
+        const home = homeRef.current;
+        if (!home || !row)
+            return;
+        home.append(row);
+        rows.set(home, row);
+        const placement = { home, restore: undefined };
+        placements.set(row, placement);
+        return () => {
+            placement.restore?.();
+            placements.delete(row);
+            rows.delete(home);
+            row.remove();
+        };
+    }, [row]);
+    return (_jsx("span", { "data-satin-search-row-home": "", ref: homeRef, style: { display: 'contents' }, children: row ? createPortal(children, row) : _jsx("div", { "data-satin-search-row": "", children: children }) }));
+}
+export function searchRowIsLifted(row) {
+    return !!row && lifted.has(row);
+}
+/** Lift only the portal container. Its field and glass registrations keep their identity. */
+export function liftNavigationSearchRow(row) {
+    if (!row)
+        return;
+    const placement = placements.get(row);
+    if (!placement)
+        return;
+    const screen = row.closest('[data-satin-screen-container]');
+    const host = screen?.closest('[data-satin-navigator-host]');
+    if (!screen || !host)
+        return;
+    placement.restore?.();
+    const rect = row.getBoundingClientRect();
+    const screenRect = screen.getBoundingClientRect();
+    const hostRect = host.getBoundingClientRect();
+    const layer = document.createElement('div');
+    layer.setAttribute('data-satin-navigation-search-layer', '');
+    // The field leaves the drawer's CSS ancestry, but must keep its material.
+    // A pinned field has no grey fill; losing its marker hides the glass as well.
+    for (const attribute of [
+        'data-satin-search-presented',
+        'data-satin-search-pinned',
+        'data-satin-search-moving',
+    ]) {
+        layer.toggleAttribute(attribute, row.closest(`[${attribute}]`) !== null);
+    }
+    layer.inert = true;
+    Object.assign(layer.style, {
+        position: 'absolute',
+        left: `${rect.left - screenRect.left + screen.offsetLeft}px`,
+        top: `${rect.top - hostRect.top}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+        zIndex: '15001',
+        pointerEvents: 'none',
+        color: getComputedStyle(row).color,
+    });
+    // Search variables are set on the drawer and scroller, below the navigator.
+    const computed = getComputedStyle(row);
+    for (const property of [
+        '--satin-search-pin',
+        '--satin-search-glass',
+        '--satin-search-fill',
+        '--satin-search-placeholder',
+    ]) {
+        layer.style.setProperty(property, computed.getPropertyValue(property));
+    }
+    host.append(layer);
+    layer.append(row);
+    lifted.add(row);
+    const restore = () => {
+        if (placement.restore !== restore)
+            return;
+        placement.home.append(row);
+        layer.remove();
+        lifted.delete(row);
+        placement.restore = undefined;
+    };
+    placement.restore = restore;
+    return restore;
+}
+export function navigationSearchRowOf(drawer) {
+    const home = drawer.querySelector('[data-satin-search-row-home]');
+    return (home && rows.get(home)) ?? drawer.querySelector('[data-satin-search-row]');
+}

package/dist/navigation/NavigationTitleSlots.d.ts

@@ -0,0 +1,18 @@
+type TitlePlacement = 'subtitle' | 'largeTitle' | 'largeSubtitle';
+/** Title content keeps its screen's React context through the toolbar portal. Each destination
+ * owns its registration, so the inline bar and the expanded scroll row can mount independently. */
+export declare function NavigationTitleSlot({ entryKey, placement, fallback, }: {
+    entryKey: string;
+    placement: TitlePlacement;
+    fallback?: string;
+}): import("react").JSX.Element;
+/** Out-of-line titles live in the primary scroller's flow. Their children therefore reserve
+ * their actual height and disappear behind the inline bar without a second height policy. */
+export declare function ExpandedNavigationTitle({ entryKey, title, subtitle, list, stationary, }: {
+    entryKey: string;
+    title?: string;
+    subtitle?: string;
+    list?: boolean;
+    stationary?: boolean;
+}): import("react").JSX.Element;
+export {};

package/dist/navigation/NavigationTitleSlots.js

@@ -0,0 +1,64 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useLayoutEffect, useRef, useState } from 'react';
+import { ScreenChromeContext } from '../public/screenChrome.js';
+/** Title content keeps its screen's React context through the toolbar portal. Each destination
+ * owns its registration, so the inline bar and the expanded scroll row can mount independently. */
+export function NavigationTitleSlot({ entryKey, placement, fallback, }) {
+    const store = useContext(ScreenChromeContext);
+    const [element, setElement] = useState(null);
+    const [occupied, setOccupied] = useState(false);
+    useLayoutEffect(() => {
+        if (!store || !element)
+            return;
+        store.setSlots(entryKey, { [placement]: element }, placement);
+        const title = element.parentElement?.querySelector(':scope > strong');
+        const update = () => {
+            const present = element.childElementCount > 0;
+            setOccupied(present);
+            if (placement === 'subtitle') {
+                // Measure intrinsic children, not the fixed bar that currently contains them.
+                const height = present
+                    ? element.getBoundingClientRect().height + (title?.getBoundingClientRect().height ?? 0)
+                    : 0;
+                store.setInlineTitleHeight(entryKey, height);
+            }
+        };
+        const resize = placement === 'subtitle' ? new ResizeObserver(update) : undefined;
+        resize?.observe(element);
+        if (title)
+            resize?.observe(title);
+        const observer = new MutationObserver(update);
+        observer.observe(element, { childList: true });
+        update();
+        return () => {
+            observer.disconnect();
+            resize?.disconnect();
+            if (placement === 'subtitle')
+                store.setInlineTitleHeight(entryKey, 0);
+            store.setSlots(entryKey, undefined, placement);
+        };
+    }, [store, entryKey, placement, element]);
+    return (_jsxs(_Fragment, { children: [!occupied && fallback && (_jsx("span", { "data-satin-title-fallback": placement, "data-satin-navigation-subtitle": placement === 'subtitle' ? 'true' : placement === 'largeSubtitle' ? 'large' : undefined, children: fallback })), _jsx("div", { ref: setElement, "data-satin-navigation-title-slot": placement })] }));
+}
+/** Out-of-line titles live in the primary scroller's flow. Their children therefore reserve
+ * their actual height and disappear behind the inline bar without a second height policy. */
+export function ExpandedNavigationTitle({ entryKey, title, subtitle, list = false, stationary = false, }) {
+    const titleRef = useRef(null);
+    useLayoutEffect(() => {
+        const heading = titleRef.current;
+        const layer = heading?.parentElement;
+        if (!stationary || !heading || !layer)
+            return;
+        const measure = () => {
+            layer.style.setProperty('--satin-expanded-title-height', `${heading.getBoundingClientRect().height}px`);
+        };
+        const resize = new ResizeObserver(measure);
+        resize.observe(heading);
+        measure();
+        return () => {
+            resize.disconnect();
+            layer.style.removeProperty('--satin-expanded-title-height');
+        };
+    }, [stationary]);
+    return (_jsxs("h1", { ref: titleRef, "data-satin-screen-title": stationary || undefined, "data-satin-list-title": list || undefined, "data-satin-scroll-title": (!list && !stationary) || undefined, children: [_jsx(NavigationTitleSlot, { entryKey: entryKey, placement: "largeTitle", fallback: title }), _jsx(NavigationTitleSlot, { entryKey: entryKey, placement: "largeSubtitle", fallback: subtitle })] }));
+}