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

package/dist/gestures/gesture.js

@@ -0,0 +1,107 @@
+import { useMemo, useRef, useState } from 'react';
+import { deferGesture, failGesture, recognizeGesture, } from './arena.js';
+/** A React value plus a gesture-owned update/reset binding. Cancellation and release
+ * restore the initial value; no mutable proxy is exposed to application code. */
+export function useGestureState(initialValue) {
+    const [value, setValue] = useState(initialValue);
+    const initial = useRef(initialValue);
+    const binding = useMemo(() => ({ update: setValue, reset: () => setValue(initial.current) }), []);
+    return [value, binding];
+}
+function callbacks(options, value) {
+    return {
+        changed(sample) {
+            const next = value(sample);
+            options.state?.update(next);
+            options.onChanged?.(next);
+        },
+        ended(sample) {
+            try {
+                options.onEnded?.(value(sample));
+            }
+            finally {
+                options.state?.reset();
+            }
+        },
+        cancelled() {
+            try {
+                options.onCancelled?.();
+            }
+            finally {
+                options.state?.reset();
+            }
+        },
+    };
+}
+function distance(value, name) {
+    if (!Number.isFinite(value) || value < 0)
+        throw new Error(`${name} must be finite and non-negative.`);
+    return value;
+}
+export function DragGesture({ minimumDistance = 10, axis = 'any', ...options } = {}) {
+    distance(minimumDistance, 'Drag minimumDistance');
+    return Object.freeze({
+        kind: 'drag',
+        axis,
+        ...callbacks(options, sample => sample.drag),
+        evaluate(context) {
+            if (context.sample.phase === 'end')
+                return failGesture('released-before-drag');
+            const x = Math.abs(context.deltaX), y = Math.abs(context.deltaY);
+            if (Math.hypot(x, y) < minimumDistance)
+                return deferGesture();
+            if ((axis === 'horizontal' && y >= x) || (axis === 'vertical' && x >= y))
+                return failGesture('other-axis');
+            return recognizeGesture('drag-distance');
+        },
+    });
+}
+export function LongPressGesture({ minimumDurationMs = 500, maximumDistance = 10, ...options } = {}) {
+    distance(minimumDurationMs, 'Long press minimumDurationMs');
+    distance(maximumDistance, 'Long press maximumDistance');
+    return Object.freeze({
+        kind: 'longPress',
+        axis: 'any',
+        delay: minimumDurationMs,
+        ...callbacks(options, () => true),
+        evaluate(context) {
+            if (context.sample.phase === 'end' ||
+                Math.hypot(context.deltaX, context.deltaY) > maximumDistance)
+                return failGesture('hold-ended-or-moved');
+            return context.elapsed >= minimumDurationMs
+                ? recognizeGesture('hold-duration')
+                : deferGesture();
+        },
+    });
+}
+export function TapGesture({ count = 1, maximumDistance = 10, ...options } = {}) {
+    if (!Number.isInteger(count) || count < 1)
+        throw new Error('Tap count must be a positive integer.');
+    distance(maximumDistance, 'Tap maximumDistance');
+    return Object.freeze({
+        kind: 'tap',
+        axis: 'any',
+        count,
+        ...callbacks(options, sample => sample.drag.location),
+        evaluate(context) {
+            if (Math.hypot(context.deltaX, context.deltaY) > maximumDistance)
+                return failGesture('tap-moved');
+            return context.sample.phase === 'end' ? recognizeGesture('tap-ended') : deferGesture();
+        },
+    });
+}
+export function MagnifyGesture({ minimumScaleDelta = 0.01, ...options } = {}) {
+    distance(minimumScaleDelta, 'Magnify minimumScaleDelta');
+    return Object.freeze({
+        kind: 'magnify',
+        axis: 'any',
+        ...callbacks(options, sample => sample.magnify),
+        evaluate(context, sample) {
+            if (context.sample.phase === 'end')
+                return failGesture('pinch-ended');
+            return sample.magnify && Math.abs(sample.magnify.magnification - 1) >= minimumScaleDelta
+                ? recognizeGesture('pinch-scale')
+                : deferGesture();
+        },
+    });
+}

package/dist/glass/ControlLens.d.ts

@@ -0,0 +1,46 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { GlassContact, type GlassContactEnd } from './glassContact.js';
+import type { ControlLiftKind } from './lens/controlLift.js';
+export type ControlLensHandle = {
+    /** The renderer has presented the (transparent) lens, so a lift shows glass in its first frame. */
+    readonly ready: boolean;
+    /** `centerX`: the lens centre in the lens element's CSS px; `epoch` as performance.timeOrigin +
+     * performance.now(), the clock of the page's own copy of the lift spring. */
+    interact(phase: 'pressed' | 'dragging' | 'releasing' | 'rest', centerX: number, epoch: number): void;
+};
+/**
+ * The held glass lens of a Toggle or Slider thumb (CONTROL_LIFT). The region is registered only
+ * while `active` (a contact is live), so a Form of switches does not hold one glass region each;
+ * the stationary hold before the lift leaves time to prepare it. The renderer grows the lens with
+ * the control's measured springs from the page's `pressed`/`releasing` and follows the centre it is
+ * sent. The lens is drawn by the region's lift overlay with the tab selection lens's optics (rim,
+ * refraction bands, exterior shadow). While the region is registered its children (the white thumb)
+ * are region content, so they leave the glass source and the lens refracts the track, never a copy
+ * of the thumb it replaces; at rest the thumb is ordinary content that bars over a list sample.
+ */
+export declare function ControlLens({ kind, active, handle, style, children, }: {
+    kind: ControlLiftKind;
+    active: boolean;
+    handle: {
+        current: ControlLensHandle | null;
+    };
+    style?: CSSProperties;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A Toggle or Slider thumb's finger, through the one contact path of interactive glass
+ * (GlassContact): the same pointer tracking, innermost-glass claim, owned-gesture cancellation and
+ * window-blur end as every glass button, field and surface. The thumb's response (it follows the
+ * finger along its track and lifts into a lens; contactPhysics.ts, track thumbs) is the control's
+ * own model; this only delivers the finger. Returns the contact, or undefined when the touch is not
+ * the thumb's (a glass inside it took it, or it is not a primary press).
+ */
+export declare function trackThumbContact(event: PointerEvent, finger: {
+    move(x: number, y: number): void;
+    up(x: number, y: number): void;
+    /** The contact ended without a release: `cancel` (the browser), `gesture` (a scroll or a
+     * sheet claimed the touch) or `clear` (window blur, unmount). */
+    cancel(end: GlassContactEnd): void;
+    /** Whether a gesture that claims the touch now takes it from the thumb. */
+    yields(): boolean;
+}): GlassContact | undefined;

package/dist/glass/ControlLens.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useId, useLayoutEffect, useRef, } from 'react';
+import { MaterialEffectContext } from './liquidContext.js';
+import { GlassContact } from './glassContact.js';
+import { Glass } from './regions.js';
+import { requestGlassSourceDamage } from './sourceDamage.js';
+/**
+ * The held glass lens of a Toggle or Slider thumb (CONTROL_LIFT). The region is registered only
+ * while `active` (a contact is live), so a Form of switches does not hold one glass region each;
+ * the stationary hold before the lift leaves time to prepare it. The renderer grows the lens with
+ * the control's measured springs from the page's `pressed`/`releasing` and follows the centre it is
+ * sent. The lens is drawn by the region's lift overlay with the tab selection lens's optics (rim,
+ * refraction bands, exterior shadow). While the region is registered its children (the white thumb)
+ * are region content, so they leave the glass source and the lens refracts the track, never a copy
+ * of the thumb it replaces; at rest the thumb is ordinary content that bars over a list sample.
+ */
+export function ControlLens({ kind, active, handle, style, children, }) {
+    const id = useId();
+    const element = useRef(null);
+    const canvas = useRef(null);
+    const overlay = useRef(null);
+    const liquid = useContext(MaterialEffectContext);
+    const regions = liquid?.backend ? liquid.regions : undefined;
+    useLayoutEffect(() => {
+        const lens = element.current;
+        if (!active || !regions || !lens || !canvas.current)
+            return;
+        const unregister = regions.register({
+            id,
+            element: lens,
+            canvas: canvas.current,
+            overlay: overlay.current ?? undefined,
+            descriptor: {
+                id,
+                material: { ...Glass.clear.interactive().material, control: kind },
+                shape: 'capsule',
+            },
+        });
+        // The thumb joins (and later leaves) region content: the source under it changed.
+        requestGlassSourceDamage(lens);
+        return () => {
+            unregister();
+            requestGlassSourceDamage(lens);
+        };
+    }, [active, regions, id, kind]);
+    useLayoutEffect(() => {
+        handle.current = {
+            get ready() {
+                return active && canvas.current?.dataset.satinGlassPresented === 'true';
+            },
+            interact(phase, centerX, epoch) {
+                regions?.interact({
+                    regionId: id,
+                    phase,
+                    epoch,
+                    contact: { x: centerX, y: 0 },
+                });
+            },
+        };
+    });
+    return (_jsxs("span", { ref: element, "data-satin-control-lens": kind, "data-satin-glass-region-id": active && regions ? id : undefined, style: style, children: [_jsx("canvas", { ref: canvas, "aria-hidden": "true", "data-satin-glass-region-canvas": "true" }), regions ? (_jsx("canvas", { ref: overlay, "aria-hidden": "true", "data-satin-glass-region-canvas": "true", "data-satin-glass-lift": "region" })) : null, children] }));
+}
+/**
+ * A Toggle or Slider thumb's finger, through the one contact path of interactive glass
+ * (GlassContact): the same pointer tracking, innermost-glass claim, owned-gesture cancellation and
+ * window-blur end as every glass button, field and surface. The thumb's response (it follows the
+ * finger along its track and lifts into a lens; contactPhysics.ts, track thumbs) is the control's
+ * own model; this only delivers the finger. Returns the contact, or undefined when the touch is not
+ * the thumb's (a glass inside it took it, or it is not a primary press).
+ */
+export function trackThumbContact(event, finger) {
+    const contact = new GlassContact({
+        send: (phase, point, _epoch, end) => {
+            if (phase === 'dragging') {
+                if (point)
+                    finger.move(point.x, point.y);
+            }
+            else if (phase === 'releasing' && end === 'up' && point)
+                finger.up(point.x, point.y);
+            else if (phase !== 'pressed')
+                finger.cancel(end ?? 'clear');
+        },
+        yieldsTo: () => finger.yields(),
+        ownsNativePan: () => !finger.yields(),
+    });
+    const target = event.target instanceof Node ? event.target.ownerDocument : null;
+    return target && contact.down(event, target) ? contact : undefined;
+}

package/dist/glass/GlassBar.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type GlassVariant } from './tokens.js';
+export type GlassBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & Readonly<{
+    leading?: ReactNode;
+    title: ReactNode;
+    trailing?: ReactNode;
+    variant?: GlassVariant;
+}>;
+export declare function GlassBar({ className, leading, title, trailing, variant, ...props }: GlassBarProps): import("react").ReactPortal | null;

package/dist/glass/GlassBar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GlassBackground } from './GlassEffect.js';
+import { Glass } from './regions.js';
+const headerShape = { kind: 'roundedRectangle', cornerRadius: 0 };
+import { useId, useLayoutEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useGlassMaterialContext } from './context.js';
+import {} from './tokens.js';
+export function GlassBar({ className, leading, title, trailing, variant = 'regular', ...props }) {
+    const { chromeLayer, registerRegion } = useGlassMaterialContext();
+    const regionId = useId();
+    const elementRef = useRef(null);
+    useLayoutEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        return registerRegion({ element, id: regionId, radius: 0, variant });
+    }, [chromeLayer, regionId, registerRegion, variant]);
+    if (!chromeLayer)
+        return null;
+    return createPortal(_jsxs("header", { ...props, ref: elementRef, className: className, "data-satin-glass-bar": "true", "data-satin-glass-region": regionId, "data-satin-glass-variant": variant, "data-satin-role": "chrome", children: [_jsx(GlassBackground, { shape: headerShape, glass: variant === 'clear' ? Glass.clear : Glass.regular }), _jsxs("div", { "data-satin-glass-bar-content": "true", children: [_jsx("div", { "data-satin-glass-bar-slot": "leading", children: leading }), _jsx("div", { "data-satin-glass-bar-title": "true", children: title }), _jsx("div", { "data-satin-glass-bar-slot": "trailing", children: trailing })] })] }), chromeLayer);
+}

package/dist/glass/GlassConfusionReview.d.ts

@@ -0,0 +1,3 @@
+export declare function GlassConfusionReview({ manifestUrl }: {
+    manifestUrl: string;
+}): import("react").JSX.Element;

package/dist/glass/GlassConfusionReview.js

@@ -0,0 +1,185 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** THESIS: recorded glass pairs lead; the viewer decides which is native.
+ * OWN-WORLD: the lab's system type, neutral canvas and plain controls.
+ * STORY: inspect at 2x, commit one guess, reveal, export the complete session.
+ * FIRST VIEWPORT: one matched pair with its guess controls immediately below.
+ * FORM: side-by-side experiment; no inferred acceptance verdict.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { ScrollSurface } from '../scroll/ScrollSurface.js';
+import { useSafeAreaMetrics } from '../safe-area/useSafeAreaMetrics.js';
+import { makeConfusionSession, scoreConfusion, } from './confusionSession.js';
+function ReviewButton({ disabled, style, ...props }) {
+    return (_jsx("button", { ...props, disabled: disabled, style: {
+            minHeight: 44,
+            padding: '8px 14px',
+            font: 'inherit',
+            border: '1px solid #c5c5ca',
+            borderRadius: 8,
+            background: '#fff',
+            color: '#171719',
+            opacity: disabled ? 0.45 : 1,
+            ...style,
+        } }));
+}
+export function GlassConfusionReview({ manifestUrl }) {
+    const [manifest, setManifest] = useState();
+    const [session, setSession] = useState();
+    const [error, setError] = useState('');
+    const [index, setIndex] = useState(0);
+    const [zoom, setZoom] = useState(2);
+    const [frame, setFrame] = useState(0);
+    const [storageNotice, setStorageNotice] = useState('');
+    const [loaded, setLoaded] = useState(() => new Set());
+    const videos = useRef([]);
+    const pairViewport = useRef(null);
+    const { layoutViewport, insets } = useSafeAreaMetrics();
+    const key = `satin-glass-confusion:${manifestUrl}`;
+    useEffect(() => {
+        let cancelled = false;
+        void fetch(manifestUrl, { cache: 'no-store' })
+            .then(async (response) => {
+            if (!response.ok)
+                throw new Error(`Pair manifest returned ${response.status}`);
+            const value = (await response.json());
+            if (!Array.isArray(value.pairs) ||
+                new Set(value.pairs.map(p => p.id)).size !== value.pairs.length)
+                throw new Error('Invalid or duplicate comparison pairs');
+            if (cancelled)
+                return;
+            setManifest(value);
+            let restored;
+            try {
+                const raw = localStorage.getItem(key);
+                if (raw)
+                    restored = JSON.parse(raw);
+            }
+            catch {
+                setStorageNotice('Session storage is unavailable. Export your results before leaving.');
+            }
+            if (restored?.manifestVersion !== value.version ||
+                !Array.isArray(restored.trials) ||
+                restored.trials.length !== value.pairs.length ||
+                new Set(restored.trials.map(t => t.pairId)).size !== value.pairs.length ||
+                restored.trials.some(t => typeof t.nativeLeft !== 'boolean' || !value.pairs.some(p => p.id === t.pairId)))
+                restored = undefined;
+            const next = restored ?? makeConfusionSession(value);
+            setSession(next);
+            const unfinished = next.trials.findIndex(t => !t.revealed);
+            setIndex(unfinished < 0 ? 0 : unfinished);
+        })
+            .catch(reason => {
+            if (!cancelled)
+                setError(String(reason));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [key, manifestUrl]);
+    useEffect(() => {
+        if (!session)
+            return;
+        try {
+            localStorage.setItem(key, JSON.stringify(session));
+        }
+        catch {
+            setStorageNotice('Session storage is unavailable. Export your results before leaving.');
+        }
+    }, [key, session]);
+    useEffect(() => {
+        setFrame(0);
+        setError('');
+    }, [index]);
+    if (!manifest || !session)
+        return _jsx("p", { role: "status", children: error || 'Loading recorded pairs…' });
+    const trial = session.trials[index];
+    const pair = trial && manifest.pairs.find(p => p.id === trial.pairId);
+    const score = scoreConfusion(session.trials.filter(t => t.revealed));
+    const mediaReady = pair && loaded.has(pair.native) && loaded.has(pair.pwa);
+    const mediaLoaded = (path) => setLoaded(previous => new Set([...previous, path]));
+    const commit = (change) => setSession({
+        ...session,
+        trials: session.trials.map((t, i) => (i === index ? { ...t, ...change } : t)),
+    });
+    const seek = (next) => {
+        setFrame(next);
+        for (const video of videos.current)
+            if (video && pair?.fps) {
+                video.pause();
+                video.currentTime = next / pair.fps;
+            }
+    };
+    const syncPan = (source) => {
+        for (const pane of pairViewport.current?.querySelectorAll('[data-review-pane]') ?? []) {
+            if (pane !== source && pane.scrollLeft !== source.scrollLeft)
+                pane.scrollLeft = source.scrollLeft;
+        }
+    };
+    const exportResults = () => {
+        const strata = ['appearance', 'backdrop', 'state'];
+        const groups = Object.fromEntries(strata.map(field => [
+            field,
+            Object.fromEntries([...new Set(manifest.pairs.map(p => p[field]))].map(value => [
+                value,
+                scoreConfusion(session.trials.filter(t => manifest.pairs.find(p => p.id === t.pairId)?.[field] === value)),
+            ])),
+        ]));
+        const blob = new Blob([
+            JSON.stringify({
+                manifestUrl,
+                manifest,
+                session,
+                score,
+                groups,
+                unscored: session.trials.filter(t => !t.guess).map(t => t.pairId),
+                exportedAt: new Date().toISOString(),
+            }, null, 2),
+        ], { type: 'application/json' });
+        const url = URL.createObjectURL(blob), link = document.createElement('a');
+        link.href = url;
+        link.download = `glass-confusion-${session.id}.json`;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+    };
+    return (_jsxs(ScrollSurface, { id: "glass-confusion-review", axis: "vertical", style: {
+            height: layoutViewport.height,
+            padding: `20px 20px ${20 + insets.bottom}px`,
+            background: '#f2f2f7',
+            color: '#171719',
+            fontFamily: '-apple-system, sans-serif',
+            fontSize: 16,
+            lineHeight: 1.4,
+            colorScheme: 'light',
+        }, children: [_jsxs("header", { children: [_jsx("h1", { style: { fontSize: 28, margin: '0 0 12px' }, children: "Which one is native?" }), _jsx("p", { children: "Inspect both recordings, then choose. Each pair appears once in a random order. Your first guess is final." })] }), !pair ? (_jsx("p", { children: "No recorded pairs are available yet. Capture and registration are pending." })) : (_jsxs(_Fragment, { children: [_jsxs("p", { children: [index + 1, " of ", session.trials.length, " \u00B7 ", pair.appearance, " \u00B7 ", pair.backdrop, " \u00B7", ' ', pair.state] }), _jsxs("label", { children: ["Display size", ' ', _jsxs("select", { value: zoom, onChange: event => setZoom(Number(event.target.value)), children: [_jsx("option", { value: 1, children: "1\u00D7 native size" }), _jsx("option", { value: 2, children: "2\u00D7 native size" })] })] }), _jsx("p", { children: "At 2\u00D7, drag either recording horizontally to pan both." }), _jsx("div", { ref: pairViewport, style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
+                            gap: 16,
+                            margin: '16px 0',
+                            padding: 12,
+                            background: '#858585',
+                        }, children: (trial.nativeLeft ? [pair.native, pair.pwa] : [pair.pwa, pair.native]).map((path, side) => (_jsxs("figure", { style: { margin: 0, minWidth: 0 }, children: [_jsxs("figcaption", { style: { background: '#fff', padding: 8, color: '#171719' }, children: [side === 0 ? 'Left' : 'Right', trial.revealed
+                                            ? ` · ${(side === 0) === trial.nativeLeft ? 'Native' : 'PWA'}`
+                                            : ''] }), _jsx(ScrollSurface, { id: `glass-confusion-pane-${side}`, axis: "horizontal", "data-review-pane": true, onScroll: event => syncPan(event.currentTarget), children: pair.kind === 'still' ? (_jsx("img", { onLoad: () => mediaLoaded(path), src: path, alt: `${side === 0 ? 'Left' : 'Right'} glass comparison`, draggable: false, style: {
+                                            display: 'block',
+                                            width: pair.widthPt * zoom,
+                                            maxWidth: 'none',
+                                            height: pair.heightPt * zoom,
+                                        }, onError: () => setError('A comparison image could not load. Reload before guessing.') })) : (_jsx("video", { onLoadedData: () => mediaLoaded(path), ref: element => {
+                                            videos.current[side] = element;
+                                        }, src: path, playsInline: true, muted: true, preload: "auto", style: {
+                                            display: 'block',
+                                            width: pair.widthPt * zoom,
+                                            maxWidth: 'none',
+                                            height: pair.heightPt * zoom,
+                                        }, onError: () => setError('A comparison clip could not load. Reload before guessing.') })) })] }, `${pair.id}-${side}`))) }), pair.kind === 'clip' ? (_jsxs("div", { children: [_jsx(ReviewButton, { type: "button", onClick: () => {
+                                    for (const video of videos.current)
+                                        if (video) {
+                                            video.currentTime = 0;
+                                            void video
+                                                .play()
+                                                .catch(() => setError('Playback failed. Use frame inspection.'));
+                                        }
+                                }, children: "Play both" }), _jsx(ReviewButton, { type: "button", onClick: () => seek(Math.max(0, frame - 1)), children: "Previous frame" }), _jsx(ReviewButton, { type: "button", onClick: () => seek(Math.min((pair.frames ?? 1) - 1, frame + 1)), children: "Next frame" }), _jsxs("label", { children: ["Frame ", frame, _jsx("input", { type: "range", min: 0, max: (pair.frames ?? 1) - 1, value: frame, onChange: event => seek(Number(event.target.value)) })] }), _jsxs("p", { children: ["Frame stepping uses the retained aligned ", pair.fps, " Hz clips. Playback starts together but browser playback synchronization is not measurement evidence."] })] })) : null, error ? _jsx("p", { role: "alert", children: error }) : null, _jsxs("div", { style: { display: 'flex', gap: 12, flexWrap: 'wrap' }, children: [_jsx(ReviewButton, { type: "button", disabled: !!trial.guess || !!error || !mediaReady, onClick: () => commit({ guess: 'left', guessedAt: new Date().toISOString() }), children: "Left is native" }), _jsx(ReviewButton, { type: "button", disabled: !!trial.guess || !!error || !mediaReady, onClick: () => commit({ guess: 'right', guessedAt: new Date().toISOString() }), children: "Right is native" }), _jsx(ReviewButton, { type: "button", disabled: !trial.guess || trial.revealed, onClick: () => commit({ revealed: true }), children: "Reveal answer" }), _jsx(ReviewButton, { type: "button", disabled: !trial.revealed || index + 1 === session.trials.length, onClick: () => setIndex(index + 1), children: "Next pair" })] }), _jsx("p", { role: "status", children: trial.guess ? `Guess recorded: ${trial.guess}.` : 'Answer hidden until you guess.' })] })), _jsxs("p", { children: [score.count
+                        ? `${score.hits} correct out of ${score.count} guesses (${((score.hitRate ?? 0) * 100).toFixed(1)}%).`
+                        : 'No guesses recorded.', ' ', "Chance is 50%. A small sample near 50% does not establish indistinguishability."] }), _jsx("p", { children: manifest.status }), manifest.pending.length ? (_jsxs("details", { children: [_jsx("summary", { children: "Pending coverage" }), _jsx("ul", { children: manifest.pending.map(item => (_jsx("li", { children: item }, item))) })] })) : null, _jsx(ReviewButton, { type: "button", onClick: exportResults, children: "Export guesses and coverage" }), storageNotice ? _jsx("p", { role: "status", children: storageNotice }) : null] }));
+}

package/dist/glass/GlassEffect.d.ts

@@ -0,0 +1,69 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type PressableProps } from '../press/Pressable.js';
+import { type GlassPressKind } from './contactPhysics.js';
+import { Glass, type GlassRegion, type GlassShape } from './regions.js';
+/** @internal Portalled presentations own their glass independently of the declaring group. */
+export declare function PresentationGlassBoundary({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export type GlassEffectProps = HTMLAttributes<HTMLDivElement> & Readonly<{
+    glass?: Glass;
+    shape?: GlassShape;
+    /** @internal Contact lighting owned by the shared menu presenter. */
+    touchLight?: boolean;
+    glassEffectID?: string;
+    namespace?: string;
+    union?: string;
+    transition?: 'matchedGeometry' | 'materialize' | 'identity';
+    /** The kind of interactive glass (GLASS_CONTACT_PHYSICS): framework content buttons press as
+     * buttons, toolbar buttons as bar buttons, a Menu's trigger as a menu trigger; app surfaces as
+     * surfaces. */
+    press?: GlassPressKind;
+    /** @internal A glass Menu emerging from its trigger (fixed layers only). */
+    emerge?: GlassRegion['emerge'];
+    /** @internal The renderer finished this region's close morph (emerge.closing). */
+    onEmergeSettled?: () => void;
+    /** @internal The renderer moved this region's rows between its glass ink and the DOM. */
+    onEmergeInk?: (phase: 'open-settled' | 'close-started') => void;
+}>;
+/** Local content remains DOM-owned; only the material canvas is painted by reference. */
+export declare function GlassEffect({ glass, shape, touchLight, glassEffectID, namespace, union, transition, press, emerge, onEmergeSettled, onEmergeInk, children, style, onPointerDown, onPointerUp, onClick, ...props }: GlassEffectProps): import("react").JSX.Element;
+/** `GlassEffectContainer`: groups related glass outlines into one field. */
+export declare function GlassEffectContainer({ spacing, children, ...props }: HTMLAttributes<HTMLDivElement> & {
+    spacing?: number;
+}): import("react").JSX.Element;
+export declare const GlassContainer: typeof GlassEffectContainer;
+export declare const GlassButton: import("react").ForwardRefExoticComponent<(PressableProps & {
+    glass?: Glass;
+    shape?: GlassShape;
+    tint?: string;
+    buttonStyle?: 'glass' | 'glassProminent';
+}) & import("react").RefAttributes<HTMLButtonElement>>;
+/** A toolbar group is one glass button: pressing any item lifts the whole group (native). */
+export declare function ToolbarGroup({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function ToolbarSpacer(): import("react").JSX.Element;
+/** Place this inside the matching ScrollSurface for scroll attachment. */
+export declare function GlassLayer({ depth, attachment, children, style, ...props }: HTMLAttributes<HTMLDivElement> & {
+    depth?: number;
+    attachment?: 'fixed' | 'scroll';
+}): import("react").JSX.Element;
+/**
+ * Framework chrome can keep its existing DOM geometry and transition refs. An `interactive`
+ * chrome button's glass (back, close, sidebar) takes the finger through the same contact path as
+ * every interactive glass, as a bar button: the touch anywhere on its button presses it.
+ */
+export declare function GlassBackground({ shape, glass, interactive, selection, recipe, }: {
+    shape?: GlassShape;
+    glass?: Glass;
+    interactive?: boolean;
+    /** @internal The selected segment the renderer draws inside this glass (the scope bar). With
+     * `onSelect`, the finger can lift and drag the thumb, and a released drag selects the nearest
+     * segment through it (a tap stays with the segment's own button). */
+    selection?: Readonly<{
+        index: number;
+        count: number;
+        onSelect?: (index: number) => void;
+    }>;
+    /** @internal The search field's own glass parameters (GlassMaterial.recipe). */
+    recipe?: 'searchField';
+}): import("react").JSX.Element;