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

package/dist/keyboard/modalTapFocus.js

@@ -0,0 +1,224 @@
+import { focusFromFramework, isFrameworkFocus } from '../focus/programmaticFocus.js';
+import { SCROLL_PRESS_SLOP_PX } from '../scroll/pressOwnership.js';
+import { caretOffsetAt } from './caretMirror.js';
+/** The text control a label activates. */
+function labelledEditor(label) {
+    if (label.control)
+        return label.control;
+    const named = label.htmlFor ? label.ownerDocument.getElementById(label.htmlFor) : null;
+    return named ?? label.querySelector('input, textarea');
+}
+/** A press on an editor this soon before its focus started that editor's editing. */
+const PRESS_FOCUS_MS = 1500;
+/** A focus this soon after a Tab key belongs to the Tab traversal, not the next/previous keys. */
+const TAB_FOCUS_MS = 300;
+/**
+ * Own every focus of an editor, so that each one carries `preventScroll`.
+ *
+ * Measured on the iPad (1366 x 1024, the alert's field): a focus WebKit makes itself pans the
+ * visual viewport by 238.5 pt in one step when the keyboard arrives, and the page is drawn there
+ * until the next script frame puts it back. On a phone WebKit always centres a field it focused
+ * (WKContentView forces the scroll where the form accessory bar is shown). A focus made with
+ * `preventScroll` is never revealed by WebKit; the keyboard adapter reveals it. The ways a finger
+ * focuses an editor:
+ * - a short tap: focused at pointer-up, inside the activation the keyboard needs;
+ * - a tap held longer than that, or one that moved: its mouse press is prevented and focused here
+ *   (a 450 ms tap panned the page before this; repeating the focus afterwards did not help);
+ * - a label: its click is prevented and its editor focused here;
+ * - focus moving from an owned editor to another one in the same scope while the keyboard is up
+ *   and no Tab key was pressed (the keyboard's next/previous keys; an app's focus call between two
+ *   fields is indistinguishable and ends on the same field): the new editor is focused with
+ *   `preventScroll` from the old one's focusout, so WebKit abandons the call that would have
+ *   panned (it pans at once while the keyboard is up). Never for an inert field, across a dialog
+ *   boundary, or while a presentation is still moving;
+ * - anything else (a long press, an app's focus call with no editor focused, an assistive
+ *   technology or keyboard activation of a label): the focus is repeated with `preventScroll` in
+ *   its focusin, which WebKit accepts while its keyboard is not up yet.
+ * A mouse or trackpad press stays native from pointer-down to click: its drag selects text.
+ *
+ * Every gesture in an editor that is already focused stays native (caret taps, double-tap word
+ * selection, selection and caret drags), whether or not a keyboard shrinks the viewport (a hardware
+ * keyboard, an undocked keyboard, the ~100 ms before WebKit reports a software keyboard) and
+ * however it was focused. An editor focused without a press (by the app, Tab, or the next key)
+ * while no keyboard shows gets one more framework focus with `preventScroll` at the pointer-down
+ * of its first tap, so the editing session that tap starts is not revealed with a pan; the tap
+ * itself stays WebKit's.
+ */
+export function installModalTapFocus(root, isEditable, 
+/** Called once this tap has focused the editor (its keyboard is on the way). */
+onTapFocus, 
+/** False while no keyboard is shown: a tap on the focused editor must then bring it back. */
+keyboardShowing = () => true, 
+/** Which editors are owned. The keyboard adapter owns every editor in its root (pages too). */
+owns = editor => editor.closest('dialog[open]') !== null) {
+    let press = null;
+    let synthetic = null;
+    let pointerType = '';
+    // The last pointer-down, and the editor a press has started editing.
+    let lastDown = null;
+    let editing = null;
+    let tabAt = -Infinity;
+    /** Not focused yet: the framework makes this focus. A focused editor's gestures are WebKit's. */
+    const needsFocus = (editor) => owns(editor) && editor.ownerDocument.activeElement !== editor;
+    const focusEditor = (editor, point) => {
+        const offset = point ? caretOffsetAt(editor, point.x, point.y) : null;
+        focusFromFramework(editor, { preventScroll: true });
+        if (editor.ownerDocument.activeElement === editor)
+            editing = editor;
+        onTapFocus?.(editor);
+        if (offset === null)
+            return;
+        try {
+            editor.setSelectionRange(offset, offset);
+        }
+        catch {
+            /* Non-selection input kinds. */
+        }
+        synthetic = { editor, until: performance.now() + 800 };
+    };
+    const down = (event) => {
+        synthetic = null;
+        pointerType = event.pointerType;
+        const target = event.target;
+        lastDown = { target, at: performance.now() };
+        // Focused without a press and no keyboard yet: this tap starts the editing session. Give
+        // WebKit preventScroll for it (it takes the latest focus options while no keyboard is up)
+        // and leave the tap itself native.
+        if (event.pointerType !== 'mouse' &&
+            isEditable(target) &&
+            owns(target) &&
+            target.ownerDocument.activeElement === target &&
+            editing !== target &&
+            !keyboardShowing()) {
+            focusFromFramework(target, { preventScroll: true });
+            editing = target;
+            onTapFocus?.(target);
+        }
+        // A mouse or trackpad keeps its whole press native, pointer-up included.
+        const owned = event.pointerType !== 'mouse' && isEditable(target) && needsFocus(target);
+        press = owned
+            ? { editor: target, x: event.clientX, y: event.clientY, at: performance.now() }
+            : null;
+    };
+    const up = (event) => {
+        const started = press;
+        press = null;
+        if (!started ||
+            event.target !== started.editor ||
+            performance.now() - started.at > 350 ||
+            Math.hypot(event.clientX - started.x, event.clientY - started.y) >= SCROLL_PRESS_SLOP_PX)
+            return;
+        focusEditor(started.editor, { x: event.clientX, y: event.clientY });
+    };
+    const cancel = () => {
+        press = null;
+    };
+    const mouse = (event) => {
+        const target = event.target;
+        if (synthetic &&
+            target === synthetic.editor &&
+            performance.now() <= synthetic.until &&
+            event.detail > 0) {
+            event.preventDefault();
+            if (event.type === 'click')
+                synthetic = null;
+            return;
+        }
+        // A mouse or trackpad keeps its native press: its drag selects text.
+        if (event.type !== 'mousedown' || event.detail === 0 || pointerType === 'mouse')
+            return;
+        if (!isEditable(target) || !needsFocus(target))
+            return;
+        event.preventDefault();
+        focusEditor(target, { x: event.clientX, y: event.clientY });
+    };
+    const labelClick = (event) => {
+        // An activation with no pointer (VoiceOver, Full Keyboard Access) stays native: the
+        // assistive technology starts editing itself, and focusin repeats that focus with preventScroll.
+        if (event.detail === 0 || pointerType === 'mouse')
+            return;
+        const label = event.target instanceof Element ? event.target.closest('label') : null;
+        if (!label || event.defaultPrevented)
+            return;
+        const editor = labelledEditor(label);
+        if (!isEditable(editor) || editor.contains(event.target) || !needsFocus(editor))
+            return;
+        event.preventDefault();
+        focusEditor(editor, null);
+    };
+    const startedByPress = (editor) => {
+        if (!lastDown || performance.now() - lastDown.at > PRESS_FOCUS_MS)
+            return false;
+        const target = lastDown.target;
+        if (!(target instanceof Element))
+            return false;
+        if (target === editor || editor.contains(target))
+            return true;
+        const label = target.closest('label');
+        return label !== null && labelledEditor(label) === editor;
+    };
+    const focusIn = (event) => {
+        const editor = event.target;
+        if (!isEditable(editor) || !owns(editor))
+            return;
+        // A long press, a label or a mouse press focused it: that press started editing.
+        if (startedByPress(editor))
+            editing = editor;
+        if (isFrameworkFocus(editor))
+            return;
+        // Focusing the focused element again changes no DOM state and sends no event; WebKit takes
+        // the options of this call for the editing session it is about to start.
+        focusFromFramework(editor, { preventScroll: true });
+    };
+    const focusOut = (event) => {
+        if (event.target === editing)
+            editing = null;
+        // Focus is moving from one owned editor to another with the keyboard up and no tap: the
+        // keyboard's next/previous keys (or an app's focus call between two fields, which ends on the
+        // same field). Measured on the iPhone Simulator: WebKit pans the page at once from that call's
+        // options, before any focusin repeat. WebKit abandons a focus change that a blur handler has
+        // already made, so focusing it here, with preventScroll, makes this the focus that counts.
+        const previous = event.target;
+        const next = event.relatedTarget;
+        if (!isEditable(previous) || !owns(previous))
+            return;
+        if (!isEditable(next) || !owns(next) || isFrameworkFocus(next))
+            return;
+        if (!keyboardShowing() || performance.now() - tabAt < TAB_FOCUS_MS)
+            return;
+        if (next.closest('[inert]'))
+            return;
+        const scope = previous.closest('dialog[open]');
+        if (next.closest('dialog[open]') !== scope)
+            return;
+        if (scope?.hasAttribute('data-satin-presentation-moving'))
+            return;
+        focusFromFramework(next, { preventScroll: true });
+    };
+    // A Tab key moves focus with its owner's own rules (the dialog's traversal reveals overflow).
+    const keyDown = (event) => {
+        if (event.key === 'Tab')
+            tabAt = performance.now();
+    };
+    // Capture reaches editors even when modal bubble handlers contain pointers.
+    root.addEventListener('pointerdown', down, { capture: true, passive: true });
+    root.addEventListener('pointerup', up, { capture: true, passive: true });
+    root.addEventListener('pointercancel', cancel, { capture: true, passive: true });
+    root.addEventListener('mousedown', mouse, true);
+    root.addEventListener('click', mouse, true);
+    root.addEventListener('click', labelClick, true);
+    root.addEventListener('focusin', focusIn, true);
+    root.addEventListener('focusout', focusOut, true);
+    root.addEventListener('keydown', keyDown, true);
+    return () => {
+        root.removeEventListener('keydown', keyDown, true);
+        root.removeEventListener('pointerdown', down, true);
+        root.removeEventListener('pointerup', up, true);
+        root.removeEventListener('pointercancel', cancel, true);
+        root.removeEventListener('mousedown', mouse, true);
+        root.removeEventListener('click', mouse, true);
+        root.removeEventListener('click', labelClick, true);
+        root.removeEventListener('focusin', focusIn, true);
+        root.removeEventListener('focusout', focusOut, true);
+    };
+}

package/dist/keyboard/motion.d.ts

@@ -0,0 +1,54 @@
+/**
+ * The software keyboard's show and hide motion. Measured per frame from the native composer's
+ * presentation layer (SwiftUI `ScrollView` + `.safeAreaInset(edge: .bottom)` chat, iOS 27.0
+ * Simulator, 4 shows and 4 hides; UIKit reports duration 0.3833 s, curve 7): a spring with mass 1,
+ * stiffness 535 and damping 45.5, released at rest, fits every frame of both directions within
+ * 0.84 pt of a 313 pt travel. UIKit ends the animation at 383 ms (0.4 pt short of rest).
+ */
+export declare const KEYBOARD_SPRING: Readonly<{
+    stiffness: 535;
+    damping: 45.5;
+}>;
+export declare const KEYBOARD_DURATION_MS = 383;
+/**
+ * How far the system keyboard's animation has progressed when the first frame drawn after WebKit's
+ * report reaches the screen. WebKit reports the keyboard's final frame once, with a single
+ * `visualViewport` resize, around the time the keyboard starts to move; the page's motion starts
+ * this far into the keyboard's curve so the two stay together. Measured on the installed iPad
+ * (screen stream with a per-frame counter, 4 shows and 4 hides, glass on and off): the report sits
+ * later in a show than in a hide, and the best lead varies by about one frame between cycles
+ * (show 24-49 ms, hide 12-31 ms). These are the means.
+ */
+export declare const KEYBOARD_SHOW_LEAD_MS = 36;
+export declare const KEYBOARD_HIDE_LEAD_MS = 23;
+/**
+ * How far the keyboard's animation has progressed at the visual viewport report's own stamp, which
+ * comes before the first frame the page draws. The keyboard carrier anchors its compositor motion to
+ * that stamp (safe-area/keyboardCarrier.ts), so it needs these rather than the frame leads above.
+ * Measured on iPad's painted frames (Control Center recordings indexed by a compositor refresh
+ * counter, chat composer): a carrier started at stamp - 36/23 ms followed the
+ * keyboard's curve exactly but a constant 38-46 ms (2 shows) and 60-63 ms (3 hides) behind.
+ */
+export declare const KEYBOARD_REPORT_SHOW_LEAD_MS = 78;
+export declare const KEYBOARD_REPORT_HIDE_LEAD_MS = 83;
+/** The keyboard spring as a CSS `linear()` easing over KEYBOARD_DURATION_MS (one stop per 16 ms). */
+export declare function keyboardEasing(): string;
+/**
+ * The keyboard's curve as evenly spaced WAAPI keyframes with linear interpolation between them.
+ * `translateAt` maps the keyboard's progress (0 to 1) to a vertical translation. WebKit runs
+ * keyframed transforms on the compositor, which keeps moving while the page draws nothing: on the
+ * installed iPad the page renders one frame after the keyboard report and then none for the
+ * keyboard's whole travel (~390 ms). A `linear()` easing could fall back to the main thread.
+ *
+ * The curve takes KEYBOARD_DURATION_MS of an animation that lasts `totalMs`; the rest holds the
+ * end pose, so a main thread that is still stalled when the curve ends finds the compositor
+ * holding it (see KEYBOARD_HOLD_MS) rather than a removed animation.
+ */
+export declare function keyboardKeyframes(translateAt: (progress: number) => number, totalMs?: number): Keyframe[];
+/**
+ * How long a carried pose is held on the compositor after the keyboard's curve ends. A finished
+ * WAAPI animation is removed from the layer at once, but the page can only commit the matching
+ * layout when it draws again: on iPad the page drew nothing for up to 709 ms after a keyboard
+ * report, and a run that ended alone showed its old layout for 0.66 s (measured keyboard-carrier implementation).
+ */
+export declare const KEYBOARD_HOLD_MS = 1500;

package/dist/keyboard/motion.js

@@ -0,0 +1,80 @@
+import { menuSpring } from '../glass/lens/menuSpring.js';
+/**
+ * The software keyboard's show and hide motion. Measured per frame from the native composer's
+ * presentation layer (SwiftUI `ScrollView` + `.safeAreaInset(edge: .bottom)` chat, iOS 27.0
+ * Simulator, 4 shows and 4 hides; UIKit reports duration 0.3833 s, curve 7): a spring with mass 1,
+ * stiffness 535 and damping 45.5, released at rest, fits every frame of both directions within
+ * 0.84 pt of a 313 pt travel. UIKit ends the animation at 383 ms (0.4 pt short of rest).
+ */
+export const KEYBOARD_SPRING = Object.freeze({ stiffness: 535, damping: 45.5 });
+export const KEYBOARD_DURATION_MS = 383;
+/**
+ * How far the system keyboard's animation has progressed when the first frame drawn after WebKit's
+ * report reaches the screen. WebKit reports the keyboard's final frame once, with a single
+ * `visualViewport` resize, around the time the keyboard starts to move; the page's motion starts
+ * this far into the keyboard's curve so the two stay together. Measured on the installed iPad
+ * (screen stream with a per-frame counter, 4 shows and 4 hides, glass on and off): the report sits
+ * later in a show than in a hide, and the best lead varies by about one frame between cycles
+ * (show 24-49 ms, hide 12-31 ms). These are the means.
+ */
+export const KEYBOARD_SHOW_LEAD_MS = 36;
+export const KEYBOARD_HIDE_LEAD_MS = 23;
+/**
+ * How far the keyboard's animation has progressed at the visual viewport report's own stamp, which
+ * comes before the first frame the page draws. The keyboard carrier anchors its compositor motion to
+ * that stamp (safe-area/keyboardCarrier.ts), so it needs these rather than the frame leads above.
+ * Measured on iPad's painted frames (Control Center recordings indexed by a compositor refresh
+ * counter, chat composer): a carrier started at stamp - 36/23 ms followed the
+ * keyboard's curve exactly but a constant 38-46 ms (2 shows) and 60-63 ms (3 hides) behind.
+ */
+export const KEYBOARD_REPORT_SHOW_LEAD_MS = 78;
+export const KEYBOARD_REPORT_HIDE_LEAD_MS = 83;
+const STOPS = 24;
+/** The keyboard's progress from 0 to 1 at `step` of STOPS evenly spaced points in its duration. */
+function keyboardProgress(step) {
+    if (step >= STOPS)
+        return 1;
+    const omega = Math.sqrt(KEYBOARD_SPRING.stiffness);
+    const spring = {
+        delay: 0,
+        omega,
+        zeta: KEYBOARD_SPRING.damping / (2 * omega),
+        velocity: 0,
+    };
+    return 1 - menuSpring(spring, (step / STOPS) * KEYBOARD_DURATION_MS).value;
+}
+const progressStops = Array.from({ length: STOPS + 1 }, (_, step) => keyboardProgress(step));
+const easing = `linear(${progressStops.map(progress => String(Math.round(progress * 10000) / 10000)).join(', ')})`;
+/** The keyboard spring as a CSS `linear()` easing over KEYBOARD_DURATION_MS (one stop per 16 ms). */
+export function keyboardEasing() {
+    return easing;
+}
+/**
+ * The keyboard's curve as evenly spaced WAAPI keyframes with linear interpolation between them.
+ * `translateAt` maps the keyboard's progress (0 to 1) to a vertical translation. WebKit runs
+ * keyframed transforms on the compositor, which keeps moving while the page draws nothing: on the
+ * installed iPad the page renders one frame after the keyboard report and then none for the
+ * keyboard's whole travel (~390 ms). A `linear()` easing could fall back to the main thread.
+ *
+ * The curve takes KEYBOARD_DURATION_MS of an animation that lasts `totalMs`; the rest holds the
+ * end pose, so a main thread that is still stalled when the curve ends finds the compositor
+ * holding it (see KEYBOARD_HOLD_MS) rather than a removed animation.
+ */
+export function keyboardKeyframes(translateAt, totalMs = KEYBOARD_DURATION_MS) {
+    const curveShare = Math.min(1, KEYBOARD_DURATION_MS / totalMs);
+    const frames = [];
+    for (let step = 0; step <= STOPS; step++) {
+        const translate = Math.round(translateAt(progressStops[step]) * 100) / 100;
+        frames.push({ transform: `translateY(${translate}px)`, offset: (step / STOPS) * curveShare });
+    }
+    if (curveShare < 1)
+        frames.push({ ...frames[frames.length - 1], offset: 1 });
+    return frames;
+}
+/**
+ * How long a carried pose is held on the compositor after the keyboard's curve ends. A finished
+ * WAAPI animation is removed from the layer at once, but the page can only commit the matching
+ * layout when it draws again: on iPad the page drew nothing for up to 709 ms after a keyboard
+ * report, and a run that ended alone showed its old layout for 0.66 s (measured keyboard-carrier implementation).
+ */
+export const KEYBOARD_HOLD_MS = 1500;

package/dist/keyboard/translation.d.ts

@@ -0,0 +1,12 @@
+/** The exact rounded WAAPI translation stops, on the document/worker epoch clock.
+ * This describes motion already submitted to the compositor, never predicted scroll. */
+export type KeyboardTranslation = Readonly<{
+    epoch: number;
+    duration: number;
+    /** Last changing stop. The remaining WAAPI duration holds the endpoint. */
+    end: number;
+    offset: number;
+    stops: readonly (readonly [number, number])[];
+}>;
+export declare function sampleKeyboardTranslation(motion: KeyboardTranslation, at: number): number;
+export declare function keyboardTranslationStops(frames: readonly Keyframe[]): (readonly [number, number])[];

package/dist/keyboard/translation.js

@@ -0,0 +1,19 @@
+export function sampleKeyboardTranslation(motion, at) {
+    const progress = Math.max(0, Math.min(1, (at - motion.epoch) / motion.duration));
+    let previous = motion.stops[0];
+    for (let index = 1; index < motion.stops.length; index++) {
+        const next = motion.stops[index];
+        if (progress <= next[0]) {
+            const share = (progress - previous[0]) / (next[0] - previous[0]);
+            return motion.offset + previous[1] + (next[1] - previous[1]) * share;
+        }
+        previous = next;
+    }
+    return motion.offset + previous[1];
+}
+export function keyboardTranslationStops(frames) {
+    return frames.map(frame => [
+        Number(frame.offset),
+        Number(/translateY\((-?[\d.]+)px\)/.exec(String(frame.transform))?.[1] ?? 0),
+    ]);
+}

package/dist/layout/adaptiveTabsContext.d.ts

@@ -0,0 +1,5 @@
+export declare const AdaptiveTabsContext: import("react").Context<{
+    height: number;
+    register: (id: string, height: number) => void;
+    unregister: (id: string) => void;
+}>;

package/dist/layout/adaptiveTabsContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const AdaptiveTabsContext = createContext({ height: 0, register() { }, unregister() { } });

package/dist/layout/deviceIdiom.d.ts

@@ -0,0 +1,4 @@
+/** Device family is independent of window width and orientation. */
+export type DeviceIdiom = 'phone' | 'pad' | 'unknown';
+export declare function resolveDeviceIdiom(userAgent: string, platform: string, maxTouchPoints: number): DeviceIdiom;
+export declare function readDeviceIdiom(): DeviceIdiom;

package/dist/layout/deviceIdiom.js

@@ -0,0 +1,12 @@
+export function resolveDeviceIdiom(userAgent, platform, maxTouchPoints) {
+    if (/iPhone|iPod/i.test(userAgent))
+        return 'phone';
+    if (/iPad/i.test(userAgent) || (platform === 'MacIntel' && maxTouchPoints > 1))
+        return 'pad';
+    return 'unknown';
+}
+export function readDeviceIdiom() {
+    return typeof navigator === 'undefined'
+        ? 'unknown'
+        : resolveDeviceIdiom(navigator.userAgent, navigator.platform, navigator.maxTouchPoints);
+}

package/dist/layout/layoutClass.d.ts

@@ -0,0 +1,44 @@
+export type AxisLayoutClass = 'compact' | 'regular';
+export type LayoutClass = Readonly<{
+    horizontal: AxisLayoutClass;
+    vertical: AxisLayoutClass;
+}>;
+export type LayoutViewportMetrics = Readonly<{
+    height: number;
+    width: number;
+}>;
+export type LayoutClassAxisPolicy = Readonly<{
+    /** A regular class remains regular until the viewport reaches this value. */
+    compactMaximum: number;
+    /** A compact class remains compact until the viewport reaches this value. */
+    regularMinimum: number;
+}>;
+export type LayoutClassPolicy = Readonly<{
+    horizontal: LayoutClassAxisPolicy;
+    vertical: LayoutClassAxisPolicy;
+}>;
+export type LayoutClassState = Readonly<{
+    layoutClass: LayoutClass;
+    metrics: LayoutViewportMetrics;
+    revision: number;
+}>;
+export type LayoutClassChangeEvent = Readonly<{
+    changedAxes: readonly ('horizontal' | 'vertical')[];
+    current: LayoutClass;
+    metrics: LayoutViewportMetrics;
+    previous: LayoutClass;
+    revision: number;
+    type: 'layout-class-changed';
+}>;
+export type LayoutClassReduction = Readonly<{
+    events: readonly LayoutClassChangeEvent[];
+    state: LayoutClassState;
+}>;
+export declare const ADAPTIVE_LAYOUT_POLICY: LayoutClassPolicy;
+/**
+ * Historical spike thresholds, retained only for explicit evidence replay.
+ * Production callers use ADAPTIVE_LAYOUT_POLICY.
+ */
+export declare const ADAPTIVE_LAYOUT_SPIKE_POLICY: LayoutClassPolicy;
+export declare function createLayoutClassState(metrics: LayoutViewportMetrics, policy?: LayoutClassPolicy): LayoutClassState;
+export declare function reduceLayoutClass(state: LayoutClassState, metrics: LayoutViewportMetrics, policy?: LayoutClassPolicy): LayoutClassReduction;

package/dist/layout/layoutClass.js

@@ -0,0 +1,102 @@
+/* measured-reference: Settings' measured 667–668 pt bracket, without an invented deadband.
+ * Vertical is a framework policy at 500 px, not a measured UIKit trait.
+ * The historical spike remains explicit for evidence replay.
+ */
+export const ADAPTIVE_LAYOUT_POLICY = Object.freeze({
+    horizontal: Object.freeze({ compactMaximum: 668, regularMinimum: 668 }),
+    vertical: Object.freeze({ compactMaximum: 500, regularMinimum: 500 }),
+});
+/**
+ * Historical spike thresholds, retained only for explicit evidence replay.
+ * Production callers use ADAPTIVE_LAYOUT_POLICY.
+ */
+export const ADAPTIVE_LAYOUT_SPIKE_POLICY = Object.freeze({
+    horizontal: Object.freeze({
+        compactMaximum: 680,
+        regularMinimum: 720,
+    }),
+    vertical: Object.freeze({
+        compactMaximum: 480,
+        regularMinimum: 520,
+    }),
+});
+const EMPTY_EVENTS = Object.freeze([]);
+function assertFiniteNonNegative(value, label) {
+    if (!Number.isFinite(value) || value < 0) {
+        throw new Error(`${label} must be a finite, non-negative number.`);
+    }
+}
+function assertAxisPolicy(policy, label) {
+    assertFiniteNonNegative(policy.compactMaximum, `${label}.compactMaximum`);
+    assertFiniteNonNegative(policy.regularMinimum, `${label}.regularMinimum`);
+    if (policy.compactMaximum > policy.regularMinimum) {
+        throw new Error(`${label} must have compactMaximum <= regularMinimum.`);
+    }
+}
+function assertInputs(metrics, policy) {
+    assertFiniteNonNegative(metrics.width, 'metrics.width');
+    assertFiniteNonNegative(metrics.height, 'metrics.height');
+    assertAxisPolicy(policy.horizontal, 'policy.horizontal');
+    assertAxisPolicy(policy.vertical, 'policy.vertical');
+}
+function initialAxisClass(value, policy) {
+    return value >= policy.regularMinimum ? 'regular' : 'compact';
+}
+function reduceAxisClass(current, value, policy) {
+    if (current === 'compact') {
+        return value >= policy.regularMinimum ? 'regular' : 'compact';
+    }
+    if (policy.compactMaximum === policy.regularMinimum) {
+        return initialAxisClass(value, policy);
+    }
+    return value <= policy.compactMaximum ? 'compact' : 'regular';
+}
+function metricsEqual(left, right) {
+    return left.width === right.width && left.height === right.height;
+}
+export function createLayoutClassState(metrics, policy = ADAPTIVE_LAYOUT_POLICY) {
+    assertInputs(metrics, policy);
+    return {
+        layoutClass: {
+            horizontal: initialAxisClass(metrics.width, policy.horizontal),
+            vertical: initialAxisClass(metrics.height, policy.vertical),
+        },
+        metrics,
+        revision: 0,
+    };
+}
+export function reduceLayoutClass(state, metrics, policy = ADAPTIVE_LAYOUT_POLICY) {
+    assertInputs(metrics, policy);
+    const horizontal = reduceAxisClass(state.layoutClass.horizontal, metrics.width, policy.horizontal);
+    const vertical = reduceAxisClass(state.layoutClass.vertical, metrics.height, policy.vertical);
+    const changedAxes = [];
+    if (horizontal !== state.layoutClass.horizontal)
+        changedAxes.push('horizontal');
+    if (vertical !== state.layoutClass.vertical)
+        changedAxes.push('vertical');
+    if (changedAxes.length === 0) {
+        return {
+            events: EMPTY_EVENTS,
+            state: metricsEqual(state.metrics, metrics) ? state : { ...state, metrics },
+        };
+    }
+    const layoutClass = { horizontal, vertical };
+    const nextState = {
+        layoutClass,
+        metrics,
+        revision: state.revision + 1,
+    };
+    return {
+        events: [
+            {
+                changedAxes,
+                current: layoutClass,
+                metrics,
+                previous: state.layoutClass,
+                revision: nextState.revision,
+                type: 'layout-class-changed',
+            },
+        ],
+        state: nextState,
+    };
+}

package/dist/layout/navigationLayoutContext.d.ts

@@ -0,0 +1,8 @@
+import type { AxisLayoutClass } from './layoutClass.js';
+/** A presentation selects navigation panes from its own available width. */
+export declare const NavigationLayoutContext: import("react").Context<AxisLayoutClass | undefined>;
+/** A presentation's own size classes, which the environment hooks report inside it. */
+export declare const PresentationLayoutClassContext: import("react").Context<Readonly<{
+    horizontal: AxisLayoutClass;
+    vertical: AxisLayoutClass;
+}> | undefined>;

package/dist/layout/navigationLayoutContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+/** A presentation selects navigation panes from its own available width. */
+export const NavigationLayoutContext = createContext(undefined);
+/** A presentation's own size classes, which the environment hooks report inside it. */
+export const PresentationLayoutClassContext = createContext(undefined);