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

package/dist/glass/fieldGeometry.js

@@ -0,0 +1,64 @@
+/** Sequential native frames bracket contact at 4.50–5.04, 9.23–10.57,
+ * 18.53–20.94, 36.56–41.92 pt. See phase-morph-engine-notes.md.
+ * Polynomial smooth-min joins equal members at gap = k/2. */
+export function glassBlendRadius(spacing) {
+    if (!Number.isFinite(spacing) || spacing < 0)
+        throw Error('Glass container spacing must be finite and nonnegative.');
+    return Math.max(0, spacing - 0.5);
+}
+export function roundedRectDistance(x, y, s) {
+    const qx = Math.abs(x - s.centerX) - s.halfWidth + s.radius, qy = Math.abs(y - s.centerY) - s.halfHeight + s.radius;
+    return Math.min(Math.max(qx, qy), 0) + Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) - s.radius;
+}
+export function smoothMinimum(a, b, k) {
+    if (k <= 0)
+        return Math.min(a, b);
+    const h = Math.max(k - Math.abs(a - b), 0) / k;
+    return Math.min(a, b) - h * h * k * 0.25;
+}
+// Fitted against native 2-pt-gap necks (20/32/45.33/61.33 pt).
+// Opposing normals retain full reach; parallel normals preserve member edges.
+// The angle scales the blend radius itself (a spatially varying smooth minimum), which keeps
+// the union C1 across the members' bisector. Scaling only the correction term left part of
+// min()'s kink: a V-shaped waist and a lighting seam (native, merge-sweep-40: a U-shaped waist).
+export const GLASS_BLEND_ANGLE_POWER = 1;
+/** One smooth-union step: the running field `d` (normal `n`) with member distance `b` (normal `nb`). */
+export function glassFieldJoin(d, n, b, nb, blendRadius) {
+    const angle = Math.pow(Math.max(0, Math.min(1, (1 - n[0] * nb[0] - n[1] * nb[1]) / 2)), GLASS_BLEND_ANGLE_POWER);
+    const k = blendRadius * angle;
+    if (k <= 1e-4)
+        return b < d ? { distance: b, normal: nb } : { distance: d, normal: n };
+    const h = Math.max(k - Math.abs(d - b), 0) / k;
+    const weight = Math.max(0, Math.min(1, 0.5 + (d - b) / (2 * k)));
+    const nx = n[0] * (1 - weight) + nb[0] * weight, ny = n[1] * (1 - weight) + nb[1] * weight, length = Math.hypot(nx, ny);
+    return {
+        distance: Math.min(d, b) - h * h * k * 0.25,
+        normal: length ? [nx / length, ny / length] : [0, 0],
+    };
+}
+export function roundedRectNormal(x, y, s) {
+    const dx = x - s.centerX, dy = y - s.centerY, qx = Math.abs(dx) - s.halfWidth + s.radius, qy = Math.abs(dy) - s.halfHeight + s.radius;
+    let nx = Math.max(qx, 0) * Math.sign(dx), ny = Math.max(qy, 0) * Math.sign(dy);
+    if (qx <= 0 && qy <= 0) {
+        nx = qx >= qy ? Math.sign(dx) : 0;
+        ny = qx >= qy ? 0 : Math.sign(dy);
+    }
+    const length = Math.hypot(nx, ny);
+    return length ? [nx / length, ny / length] : [0, 0];
+}
+/** Returns the signed distance to the diagnostic glass union in points. */
+export function glassFieldDistance(x, y, members, blendRadius) {
+    let d = Infinity, n = [0, 0];
+    for (const s of members) {
+        const b = roundedRectDistance(x, y, s), nb = roundedRectNormal(x, y, s);
+        if (!Number.isFinite(d)) {
+            d = b;
+            n = nb;
+            continue;
+        }
+        const joined = glassFieldJoin(d, n, b, nb, blendRadius);
+        d = joined.distance;
+        n = joined.normal;
+    }
+    return d;
+}

package/dist/glass/fieldMotion.d.ts

@@ -0,0 +1,42 @@
+import type { CapsuleShape } from './renderSpecs.js';
+/** A unit-mass spring: stiffness and damping per second squared and per second. */
+export type FieldSpring = Readonly<{
+    stiffness: number;
+    damping: number;
+}>;
+/** The shared measured field spring (mass 1). Members with their own native fit pass a profile. */
+export declare const FIELD_SPRING: FieldSpring;
+export declare const FIELD_MOTION_DURATION = 1000;
+export declare const ZERO_FIELD_VELOCITY: CapsuleShape;
+/** Exact underdamped spring, including the velocity at a retarget boundary (units / second). */
+export declare function sampleFieldAxis(from: number, to: number, velocity: number, elapsedMs: number, spring?: FieldSpring): {
+    value: number;
+    velocity: number;
+};
+export declare function sampleFieldMember(from: CapsuleShape, to: CapsuleShape, velocity: CapsuleShape, elapsedMs: number, reducedMotion?: boolean): {
+    value: {
+        centerX: number;
+        centerY: number;
+        halfHeight: number;
+        halfWidth: number;
+        radius: number;
+        bottomRadius?: number;
+    };
+    velocity: {
+        centerX: number;
+        centerY: number;
+        halfHeight: number;
+        halfWidth: number;
+        radius: number;
+        bottomRadius?: number;
+    };
+};
+/** Follow a moving layout target without changing the spring's elapsed time or residual. */
+export declare function followFieldTarget(from: CapsuleShape, oldTarget: CapsuleShape, target: CapsuleShape): {
+    centerX: number;
+    centerY: number;
+    halfHeight: number;
+    halfWidth: number;
+    radius: number;
+    bottomRadius?: number;
+};

package/dist/glass/fieldMotion.js

@@ -0,0 +1,47 @@
+/** The shared measured field spring (mass 1). Members with their own native fit pass a profile. */
+export const FIELD_SPRING = { stiffness: 186.57, damping: 25.13 };
+const axes = ['centerX', 'centerY', 'halfWidth', 'halfHeight', 'radius'];
+export const FIELD_MOTION_DURATION = 1000;
+export const ZERO_FIELD_VELOCITY = {
+    centerX: 0,
+    centerY: 0,
+    halfWidth: 0,
+    halfHeight: 0,
+    radius: 0,
+};
+/** Exact underdamped spring, including the velocity at a retarget boundary (units / second). */
+export function sampleFieldAxis(from, to, velocity, elapsedMs, spring = FIELD_SPRING) {
+    const decay = spring.damping / 2;
+    const frequency = Math.sqrt(spring.stiffness - decay * decay);
+    const seconds = Math.max(0, elapsedMs) / 1000;
+    const displacement = from - to;
+    const sineCoefficient = (velocity + decay * displacement) / frequency;
+    const cosine = Math.cos(frequency * seconds);
+    const sine = Math.sin(frequency * seconds);
+    const attenuation = Math.exp(-decay * seconds);
+    const residual = displacement * cosine + sineCoefficient * sine;
+    return {
+        value: to + attenuation * residual,
+        velocity: attenuation *
+            (-decay * residual + frequency * (-displacement * sine + sineCoefficient * cosine)),
+    };
+}
+export function sampleFieldMember(from, to, velocity, elapsedMs, reducedMotion = false) {
+    const value = { ...to };
+    const nextVelocity = { ...ZERO_FIELD_VELOCITY };
+    if (!reducedMotion && elapsedMs < FIELD_MOTION_DURATION) {
+        for (const axis of axes) {
+            const sample = sampleFieldAxis(from[axis], to[axis], velocity[axis], elapsedMs);
+            value[axis] = sample.value;
+            nextVelocity[axis] = sample.velocity;
+        }
+    }
+    return { value, velocity: nextVelocity };
+}
+/** Follow a moving layout target without changing the spring's elapsed time or residual. */
+export function followFieldTarget(from, oldTarget, target) {
+    const followed = { ...from };
+    for (const axis of axes)
+        followed[axis] += target[axis] - oldTarget[axis];
+    return followed;
+}

package/dist/glass/glassContact.d.ts

@@ -0,0 +1,76 @@
+import { type OwnedGesture } from '../press/gestureArbitration.js';
+import type { GlassInteraction } from './rendererContract.js';
+/**
+ * The one contact path of interactive glass in the document.
+ *
+ * Every interactive glass surface (glass Buttons of every shape, toolbar items and groups, the
+ * back/close/sidebar chrome buttons, menu triggers, text fields, app `Glass.interactive()`
+ * surfaces) feeds the renderer through a GlassContact: the glass tracks the physical finger from
+ * down to up, and the renderer's InteractiveContact turns it into light, growth, follow, squish
+ * and release with the kind's row of GLASS_CONTACT_PHYSICS.
+ *
+ * The control inside the glass (a Pressable) reads the same physical contact: both see the same
+ * pointer events, and a gesture that claims the touch (a scroll, a menu's hold) cancels both
+ * through the shared press arbitration (`cancelPointerPressForOwnedGesture`). There is no second
+ * path that relays the control's press state to the glass.
+ *
+ * Like pointer capture, the contact follows its pointer after it leaves the glass (document
+ * listeners filtered by pointer id). It never calls `setPointerCapture`: an explicit capture keeps
+ * WebKit's control recognizer alive after a scroll view has won the pan.
+ */
+export type GlassContactPhase = GlassInteraction['phase'];
+/**
+ * Why a contact ended: the finger lifted (`up`), the browser cancelled the touch (`cancel`), a
+ * gesture claimed it (`gesture`: a scroll, a sheet's pan, the back swipe), or the contact was
+ * cleared at once (`clear`: window blur, unmount, a new contact).
+ */
+export type GlassContactEnd = 'up' | 'cancel' | 'gesture' | 'clear';
+export type GlassContactOptions = Readonly<{
+    /** Sends one input: `point` is the finger in client px (absent at rest and on a cancel); `end`
+     * says why a `releasing`/`rest` input ended the contact. */
+    send: (phase: GlassContactPhase, point: {
+        x: number;
+        y: number;
+    } | undefined, epoch: number, end?: GlassContactEnd) => void;
+    /**
+     * Whether a gesture that claims this touch ends the contact. By default every claim does: the
+     * glass springs back as the control's tap cancels. A glass button that lets the back swipe
+     * through stays pressed while the page moves (native); a Toggle or Slider thumb that is already
+     * dragging keeps its finger.
+     */
+    yieldsTo?: (owner: OwnedGesture) => boolean;
+    /** Thumb controls retain a recognized drag before WebKit cancels pointer delivery.
+     * Ordinary glass never claims a native pan. The pointer stream still owns all samples. */
+    ownsNativePan?: () => boolean;
+}>;
+export declare class GlassContact {
+    private readonly options;
+    private pointerId;
+    private stopObservingCancellation;
+    private listening;
+    private handoff;
+    private touchTarget;
+    private enabledControl;
+    private disabledObserver;
+    constructor(options: GlassContactOptions);
+    get active(): boolean;
+    /**
+     * A pointer went down on the glass. Starts the contact unless a glass nested inside this one
+     * already took the touch, or the pointer is not a primary press. Returns whether it started.
+     */
+    down(event: PointerEvent, document: Document, control?: HTMLElement): boolean;
+    /** Ends the contact: `releasing` springs back and fades, `rest` clears at once. */
+    end(phase: 'releasing' | 'rest', event?: Pick<PointerEvent, 'clientX' | 'clientY'>, cause?: GlassContactEnd): void;
+    private send;
+    private readonly handleMove;
+    private readonly handleUp;
+    private readonly handleCancel;
+    private disabled;
+    private readonly checkEnabled;
+    private readonly retainNativePan;
+    private owningTouch;
+    private readonly handleTouchMove;
+    private readonly handleTouchEnd;
+    private readonly handleRetirement;
+    private readonly handleBlur;
+}

package/dist/glass/glassContact.js

@@ -0,0 +1,153 @@
+import { observePointerPressCancellation, } from '../press/gestureArbitration.js';
+/** Touches already taken by a glass: the innermost interactive glass owns a contact. */
+const claimedEvents = new WeakSet();
+export class GlassContact {
+    options;
+    pointerId;
+    stopObservingCancellation;
+    listening;
+    handoff;
+    touchTarget = null;
+    enabledControl;
+    disabledObserver;
+    constructor(options) {
+        this.options = options;
+    }
+    get active() {
+        return this.pointerId !== undefined;
+    }
+    /**
+     * A pointer went down on the glass. Starts the contact unless a glass nested inside this one
+     * already took the touch, or the pointer is not a primary press. Returns whether it started.
+     */
+    down(event, document, control) {
+        if (!event.isPrimary || event.button !== 0 || event.defaultPrevented)
+            return false;
+        if (control && this.disabled(control))
+            return false;
+        if (claimedEvents.has(event))
+            return false;
+        claimedEvents.add(event);
+        this.end('rest');
+        this.pointerId = event.pointerId;
+        this.listening = document;
+        this.touchTarget = event.target;
+        if (this.options.ownsNativePan)
+            document.addEventListener('touchmove', this.retainNativePan, {
+                capture: true,
+                passive: false,
+            });
+        this.enabledControl = control;
+        if (control) {
+            this.disabledObserver = new MutationObserver(this.checkEnabled);
+            this.disabledObserver.observe(control, {
+                attributes: true,
+                attributeFilter: ['disabled', 'aria-disabled'],
+            });
+        }
+        document.addEventListener('pointermove', this.handleMove, true);
+        document.addEventListener('pointerup', this.handleUp, true);
+        document.addEventListener('pointercancel', this.handleCancel, true);
+        document.defaultView?.addEventListener('blur', this.handleBlur);
+        // A scroll or a menu's hold that claims this touch ends the glass's contact with the
+        // control's press: the glass springs back rather than vanishing.
+        this.stopObservingCancellation = observePointerPressCancellation(event.pointerId, (owner, handoff) => {
+            if (this.options.yieldsTo?.(owner) ?? true) {
+                this.end('releasing', undefined, 'gesture');
+                return;
+            }
+            if (owner === 'back-swipe' && handoff && !handoff.retired.aborted) {
+                this.handoff?.retired.removeEventListener('abort', this.handleRetirement);
+                this.handoff = handoff;
+                document.addEventListener('touchmove', this.handleTouchMove, {
+                    capture: true,
+                    passive: true,
+                });
+                document.addEventListener('touchend', this.handleTouchEnd, true);
+                document.addEventListener('touchcancel', this.handleTouchEnd, true);
+                handoff.retired.addEventListener('abort', this.handleRetirement, { once: true });
+            }
+            return false;
+        });
+        this.send('pressed', event);
+        return true;
+    }
+    /** Ends the contact: `releasing` springs back and fades, `rest` clears at once. */
+    end(phase, event, cause = phase === 'rest' ? 'clear' : event ? 'up' : 'cancel') {
+        if (this.pointerId === undefined)
+            return;
+        this.pointerId = undefined;
+        this.handoff?.retired.removeEventListener('abort', this.handleRetirement);
+        this.handoff = undefined;
+        this.disabledObserver?.disconnect();
+        this.disabledObserver = undefined;
+        this.enabledControl = undefined;
+        this.stopObservingCancellation?.();
+        this.stopObservingCancellation = undefined;
+        const document = this.listening;
+        this.listening = undefined;
+        document?.removeEventListener('touchmove', this.retainNativePan, true);
+        this.touchTarget = null;
+        document?.removeEventListener('touchmove', this.handleTouchMove, true);
+        document?.removeEventListener('touchend', this.handleTouchEnd, true);
+        document?.removeEventListener('touchcancel', this.handleTouchEnd, true);
+        document?.removeEventListener('pointermove', this.handleMove, true);
+        document?.removeEventListener('pointerup', this.handleUp, true);
+        document?.removeEventListener('pointercancel', this.handleCancel, true);
+        document?.defaultView?.removeEventListener('blur', this.handleBlur);
+        this.send(phase, event, cause);
+    }
+    send(phase, event, end) {
+        const point = event ? { x: event.clientX, y: event.clientY } : undefined;
+        this.options.send(phase, point, performance.timeOrigin + performance.now(), end);
+    }
+    handleMove = (event) => {
+        this.checkEnabled();
+        if (!this.handoff && event.pointerId === this.pointerId)
+            this.send('dragging', event);
+    };
+    handleUp = (event) => {
+        if (event.pointerId === this.pointerId)
+            this.end('releasing', event);
+    };
+    handleCancel = (event) => {
+        // A cancel's coordinates are not a finger position (WebKit can report 0, 0).
+        if (!this.handoff && event.pointerId === this.pointerId)
+            this.end('releasing', undefined, 'cancel');
+    };
+    disabled(control) {
+        return control.matches(':disabled') || control.getAttribute('aria-disabled') === 'true';
+    }
+    checkEnabled = () => {
+        if (this.enabledControl && this.disabled(this.enabledControl))
+            this.end('rest');
+    };
+    retainNativePan = (event) => {
+        // pan-y alone does not keep iOS WebKit's recognizer from cancelling a horizontal
+        // control drag. Claim only the matching, single thumb touch once its model owns it.
+        // A back-swipe handoff already belongs to WebKit's scrolling tree and stays native.
+        if (this.active &&
+            !this.handoff &&
+            event.cancelable &&
+            event.touches.length === 1 &&
+            event.touches[0]?.target === this.touchTarget &&
+            this.options.ownsNativePan?.())
+            event.preventDefault();
+    };
+    owningTouch(event) {
+        return Array.from(event.changedTouches).find(touch => touch.identifier === this.handoff?.touchIdentifier);
+    }
+    handleTouchMove = (event) => {
+        this.checkEnabled();
+        const touch = this.owningTouch(event);
+        if (touch)
+            this.send('dragging', touch);
+    };
+    handleTouchEnd = (event) => {
+        const touch = this.owningTouch(event);
+        if (touch)
+            this.end('releasing', event.type === 'touchend' ? touch : undefined, event.type === 'touchend' ? 'up' : 'cancel');
+    };
+    handleRetirement = () => this.end('releasing', undefined, 'gesture');
+    handleBlur = () => this.end('rest');
+}

package/dist/glass/glassProbeSettings.d.ts

@@ -0,0 +1,18 @@
+import type { LiquidMotionMode } from './lens/liquidMotion.js';
+import type { ContentPage } from './lens/tabPresentation.js';
+import type { Appearance } from './lens/theme.js';
+import type { LensMode } from './renderSpecs.js';
+export declare function requestedAppearance(): Appearance | undefined;
+export declare function requestedLiquidMotion(): LiquidMotionMode;
+export declare function requestedMenu(): boolean;
+export declare function useAppearance(): Appearance;
+export declare function formatMetric(value: number, digits?: number): string;
+export declare function storedFlag(key: string, fallback: string): string;
+export declare function persistFlag(key: string, value: string): void;
+export declare function measurementClientId(): string;
+export declare const LIQUID_PLAYBACK_SPEED = 1;
+export declare function isLensMode(value: string | null): value is LensMode;
+export declare function storedLens(): LensMode;
+export declare function persistLens(mode: LensMode): void;
+export declare function storedPage(): ContentPage;
+export declare function lensLabel(mode: LensMode): "Clear" | "Regular";

package/dist/glass/glassProbeSettings.js

@@ -0,0 +1,133 @@
+import { useDarkAppearance } from '../app/appearance.js';
+import { isBitmapBackdrop } from './lens/bitmapBackdrop.js';
+import { STRIPE_BACKGROUND_MODES, TINT_BACKGROUND_MODES } from './lens/referenceBackground.js';
+// The glass probe page's settings (GlassPresentation without a consumer): URL parameters and
+// their persisted localStorage flags, and the measurement client identity.
+export function requestedAppearance() {
+    const value = new URLSearchParams(window.location.search).get('theme');
+    return value === 'dark' || value === 'light' ? value : undefined;
+}
+export function requestedLiquidMotion() {
+    const value = new URLSearchParams(window.location.search).get('motion');
+    if (value === 'pill' || value === 'press' || value === 'merge' || value === 'none') {
+        persistFlag('motion', value);
+        return value;
+    }
+    const stored = storedFlag('motion', 'none');
+    return stored === 'pill' || stored === 'press' || stored === 'merge' ? stored : 'none';
+}
+export function requestedMenu() {
+    const motion = new URLSearchParams(window.location.search).get('motion');
+    return motion === null || motion === 'menu';
+}
+export function useAppearance() {
+    const explicit = requestedAppearance();
+    const dark = useDarkAppearance();
+    return explicit ?? (dark ? 'dark' : 'light');
+}
+export function formatMetric(value, digits = 1) {
+    return value > 0 ? value.toFixed(digits) : '--';
+}
+export function storedFlag(key, fallback) {
+    const fromUrl = new URLSearchParams(window.location.search).get(key);
+    if (fromUrl !== null) {
+        try {
+            localStorage.setItem(`satinGeometry-flag-${key}`, fromUrl);
+        }
+        catch {
+            /* ignore */
+        }
+        return fromUrl;
+    }
+    try {
+        return localStorage.getItem(`satinGeometry-flag-${key}`) ?? fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+export function persistFlag(key, value) {
+    try {
+        localStorage.setItem(`satinGeometry-flag-${key}`, value);
+    }
+    catch {
+        /* ignore */
+    }
+}
+function randomClientId() {
+    // crypto.randomUUID is only defined in secure contexts; LAN http:// phone
+    // testing is insecure, so fall back to getRandomValues-based v4.
+    if (typeof crypto.randomUUID === 'function')
+        return crypto.randomUUID();
+    const bytes = crypto.getRandomValues(new Uint8Array(16));
+    bytes[6] = (bytes[6] & 0x0f) | 0x40;
+    bytes[8] = (bytes[8] & 0x3f) | 0x80;
+    const hex = Array.from(bytes, byte => byte.toString(16).padStart(2, '0')).join('');
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}
+export function measurementClientId() {
+    const key = 'satinMeasurement-measurement-client:v1';
+    try {
+        const stored = localStorage.getItem(key);
+        if (stored)
+            return stored;
+        const created = randomClientId();
+        localStorage.setItem(key, created);
+        return created;
+    }
+    catch {
+        return randomClientId();
+    }
+}
+const LENS_STORAGE_KEY = 'satinLens-lens:v1';
+// measured-reference removes the capture-only `?slow` fork; retained motion uses measured playback speed.
+export const LIQUID_PLAYBACK_SPEED = 1;
+export function isLensMode(value) {
+    return value === 'reference-regular' || value === 'reference-clear';
+}
+export function storedLens() {
+    const fromUrl = new URLSearchParams(window.location.search).get('lens');
+    if (fromUrl !== null) {
+        const mode = isLensMode(fromUrl) ? fromUrl : 'reference-regular';
+        try {
+            localStorage.setItem(LENS_STORAGE_KEY, mode);
+        }
+        catch {
+            /* ignore */
+        }
+        return mode;
+    }
+    try {
+        const stored = localStorage.getItem(LENS_STORAGE_KEY);
+        if (isLensMode(stored))
+            return stored;
+        return 'reference-regular';
+    }
+    catch {
+        return 'reference-regular';
+    }
+}
+export function persistLens(mode) {
+    try {
+        localStorage.setItem(LENS_STORAGE_KEY, mode);
+    }
+    catch {
+        /* ignore */
+    }
+}
+function isContentPage(value) {
+    return (isBitmapBackdrop(value) ||
+        value === 'drag' ||
+        value === 'settings' ||
+        value === 'shapes' ||
+        value === 'wallpaper' ||
+        TINT_BACKGROUND_MODES.some(mode => mode === value) ||
+        STRIPE_BACKGROUND_MODES.some(mode => mode === value));
+}
+export function storedPage() {
+    const value = storedFlag('page', 'settings');
+    return isContentPage(value) ? value : 'settings';
+}
+export function lensLabel(mode) {
+    return mode === 'reference-clear' ? 'Clear' : 'Regular';
+}

package/dist/glass/lens/Scene.d.ts

@@ -0,0 +1,108 @@
+import { type CSSProperties, type RefObject } from 'react';
+import { type IconName } from './data.js';
+import { type ReferenceBackgroundMode } from './referenceBackground.js';
+export type ScreenId = 'general' | 'root';
+export declare const GLASS_DOCK_HEIGHT_PX = 62;
+export declare function glassDockHeight(layoutWidth: number, layoutHeight: number): 44 | 62;
+export declare const GLASS_DOCK_WIDTH_PX = 360;
+export declare const GLASS_DOCK_SIDE_INSET_PX = 21;
+export declare const GLASS_DOCK_BOTTOM_GAP_PX = 21;
+export declare const isCalibratedMaxLayout: (layoutWidth: number, screen: {
+    width: number;
+    height: number;
+}) => boolean;
+/** The tab platter's width: the one rule for the glass renderer and the tab slot it reads. */
+export declare function glassDockWidth(layoutWidth: number, screen: {
+    width: number;
+    height: number;
+}, insets?: {
+    left: number;
+    right: number;
+}, layoutHeight?: number): number;
+export declare const GLASS_DOCK_RADIUS_PX = 30.8;
+export declare const GLASS_CIRCLE_SIZE_PX = 44;
+export declare const GLASS_CIRCLE_INLINE_INSET_PX = 16;
+export declare const GLASS_CIRCLE_TOP_PX = 8;
+export declare const GLASS_OVERSCAN_X_PX = 64;
+export declare const GLASS_OVERSCAN_Y_PX = 128;
+export { MARKER_INTERVAL_PX } from './mirrorConstants.js';
+type SceneStyle = CSSProperties & Record<`--${string}`, string>;
+export declare const SCENE_STYLE: SceneStyle;
+export type MirrorNode = Readonly<{
+    clips?: readonly {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        radii: readonly number[];
+    }[];
+    glassRegionId?: string;
+    regionId?: string;
+    imageReady?: Promise<HTMLImageElement | undefined>;
+    imageSource?: string;
+    imageFit?: string;
+    /** DOM identity for capture failures; never used as a paint instruction. */
+    sourceElement?: string;
+    color: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: string;
+    height: number;
+    icon?: IconName;
+    id: string;
+    kind: 'image' | 'chevron' | 'icon' | 'reference-background' | 'rect' | 'text' | 'background';
+    /** kind 'background': the element's computed background-image layers and their size, position and repeat lists. */
+    background?: Readonly<{
+        image: string;
+        size: string;
+        position: string;
+        repeat: string;
+    }>;
+    letterSpacing?: number;
+    lineHeight?: number;
+    radius?: number;
+    referenceBackground?: ReferenceBackgroundMode;
+    sourceOffsetY?: number;
+    text?: string;
+    width: number;
+    x: number;
+    y: number;
+}>;
+export type MirrorLayout = Readonly<{
+    contentHeight: number;
+    measuredAt: number;
+    nodes: readonly MirrorNode[];
+    screen: ScreenId;
+    width: number;
+}>;
+/** DOM geometry is authoritative. This function is only called after layout changes. */
+export type MirrorCaptureRange = {
+    top: number;
+    bottom: number;
+    /** Disjoint rows inside top..bottom: only these are measured. */
+    bands?: readonly {
+        top: number;
+        bottom: number;
+    }[];
+};
+export declare function measureMirrorLayout(contentHost: HTMLElement, screen: ScreenId, includeCoveredRoot?: boolean, capture?: 'viewport' | 'plane', captureRange?: MirrorCaptureRange): MirrorLayout | undefined;
+/** A host whose origin moves on every read (a route inside a running navigation
+ * transform) never passes the absolute-origin check. Its own layout is still
+ * stable: two consecutive snapshots with identical host-relative geometry are a
+ * consistent reading, whatever the origin did. Additive; measureMirrorLayout is unchanged. */
+export declare function measureMirrorLayoutRelative(contentHost: HTMLElement, screen: ScreenId, includeCoveredRoot?: boolean, capture?: 'viewport' | 'plane', captureRange?: MirrorCaptureRange): MirrorLayout | undefined;
+export declare let lastUnstableMeasurement: string;
+export declare const SettingsDomScene: import("react").MemoExoticComponent<({ contentRef, onOpenGeneral, onQuery, query, screen, }: {
+    contentRef: RefObject<HTMLDivElement | null>;
+    onOpenGeneral: () => void;
+    onQuery: (value: string) => void;
+    query: string;
+    screen: ScreenId;
+}) => import("react").JSX.Element>;
+export declare function ReferenceBackgroundScene({ contentRef, height, mode, sourceOffsetY, width, }: {
+    contentRef: RefObject<HTMLDivElement | null>;
+    height: number;
+    mode: ReferenceBackgroundMode;
+    sourceOffsetY: number;
+    width: number;
+}): import("react").JSX.Element;