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

package/dist/glass/lens/menuMorphMotion.js

@@ -0,0 +1,219 @@
+import contextFit from './menuContextFit.json';
+import dropFit from './menuDropFit.json';
+import glyphDropFit from './menuGlyphDropFit.json';
+import padFit from './menuMorphFit.json';
+import phoneFit from './menuMorphPhoneFit.json';
+import { menuSpring, menuSpringSettle } from './menuSpring.js';
+import { CONTEXT_DISMISSAL_MS, contextDismissal } from './menuContextPresentation.js';
+const axes = ['centerX', 'centerY', 'width', 'height'];
+const returns = {
+    returnX: 'centerX',
+    returnY: 'centerY',
+    returnWidth: 'width',
+    returnHeight: 'height',
+};
+/** The renderer and its presentation watchdog must use the same measured motion. */
+export function menuMotionProfile(emerge) {
+    if (emerge.sourceKind === 'context' && emerge.content)
+        return 'context-content';
+    return emerge.sourceKind ?? emerge.idiom ?? 'pad';
+}
+/** A close ends when nothing visible moves, so the hand-off to the page's button is no step:
+ * the re-formed button within 0.1 pt of a 200 pt travel (its displacement is `from` of the
+ * travel; native's own settle runs to about +780 ms of the tap), the body's centre within
+ * 0.3 pt, and the body collapsed to under 5% of the panel, which lies inside the button
+ * (menuField.ts). */
+const CLOSE_BUTTON_SETTLED = 0.0005;
+const CLOSE_BODY_HIDDEN = 0.05;
+const closeSettle = Math.max(...[phoneFit.closeButton.x, phoneFit.closeButton.y].map(spring => menuSpringSettle(spring, CLOSE_BUTTON_SETTLED / Math.abs(spring.from))), menuSpringSettle(phoneFit.closeHead), menuSpringSettle(phoneFit.close.centerX), menuSpringSettle(phoneFit.close.centerY), menuSpringSettle(phoneFit.close.width, CLOSE_BODY_HIDDEN), menuSpringSettle(phoneFit.close.height, CLOSE_BODY_HIDDEN));
+const phoneSettle = {
+    open: Math.max(...axes.map(axis => menuSpringSettle(phoneFit.open[axis]))),
+    close: closeSettle,
+};
+const contextOpenSettle = Math.ceil(Math.max(...Object.values(contextFit.open).flatMap(fit => axes.map(axis => menuSpringSettle(fit[axis])))));
+const contentOpenSettle = Math.ceil(Math.max(...axes.map(axis => menuSpringSettle(contextFit.openContent[axis]))));
+/** A label's open ends when the panel holds still; its close when the drop has poured back
+ * into the label (under 5% of the panel, where its fade has already hidden it). */
+const labelSettle = {
+    open: Math.ceil(Math.max(...axes.map(axis => menuSpringSettle(dropFit.open[axis])))),
+    close: Math.ceil(Math.max(...axes.map(axis => menuSpringSettle(dropFit.close[axis], CLOSE_BODY_HIDDEN)))),
+};
+const springProfile = (idiom) => idiom === 'phone' || idiom === 'label' || idiom === 'context' || idiom === 'context-content';
+const isContext = (idiom) => idiom === 'context' || idiom === 'context-content';
+/** A context menu's dismissal: its body collapses into its source on the clock its fade and the
+ * page dim run on (menu-close/r3, contextDismissal), so it is gone when they are. It has no glass
+ * button to re-form, so it does not take the toolbar close springs: those first carry the body
+ * away from its trigger (the toolbar panel rises into its button) and settle long after the
+ * fade, which read as the menu flying off and a ghost drifting back (owner, Music Home tile,
+ * 2026-10-14). The size and travel curve is UNMEASURED on its own: native's body was seen to
+ * shrink and fade with the dim, and only that shared fade was fitted. */
+function sampleContextClose(ms, appearance) {
+    const remaining = contextDismissal(appearance, ms);
+    const step = 1;
+    const speed = (contextDismissal(appearance, ms + step) - remaining) / (step / 1000);
+    const pose = { ...MENU_MORPH_ZERO }, velocity = { ...MENU_MORPH_ZERO };
+    for (const axis of axes) {
+        pose[axis] = remaining;
+        velocity[axis] = speed;
+    }
+    for (const key of Object.keys(returns)) {
+        pose[key] = 1 - remaining;
+        velocity[key] = -speed;
+    }
+    return { pose, velocity };
+}
+export function menuMorphDuration(direction, idiom = 'pad') {
+    if (direction === 'close' && isContext(idiom))
+        return Math.ceil(CONTEXT_DISMISSAL_MS);
+    if (idiom === 'context' && direction === 'open')
+        return contextOpenSettle;
+    if (idiom === 'context-content' && direction === 'open')
+        return contentOpenSettle;
+    if (idiom === 'label')
+        return labelSettle[direction];
+    return springProfile(idiom)
+        ? Math.ceil(phoneSettle[direction])
+        : contourFit(idiom)[direction].at(-1)[0];
+}
+export const MENU_MORPH_DURATION = {
+    open: menuMorphDuration('open'),
+    close: menuMorphDuration('close'),
+};
+export function menuMorphEndpoint(direction) {
+    const value = direction === 'open' ? 1 : 0;
+    return {
+        centerX: value,
+        centerY: value,
+        width: value,
+        height: value,
+        returnX: 1 - value,
+        returnY: 1 - value,
+        returnWidth: 1 - value,
+        returnHeight: 1 - value,
+    };
+}
+export const MENU_MORPH_ZERO = {
+    centerX: 0,
+    centerY: 0,
+    width: 0,
+    height: 0,
+    returnX: 0,
+    returnY: 0,
+    returnWidth: 0,
+    returnHeight: 0,
+};
+/** Shape-preserving Hermite interpolation of the recorded contour. Independent
+ * axes retain the native contour response and its return/settle tail. */
+function slopes(knots, column) {
+    const h = knots.slice(1).map((k, i) => (k[0] - knots[i][0]) / 1000);
+    const d = h.map((v, i) => (knots[i + 1][column] - knots[i][column]) / v);
+    return knots.map((_, i) => {
+        // The trigger is held before release and the final surface is stationary.
+        if (i === 0 || i === knots.length - 1 || d[i - 1] * d[i] <= 0)
+            return 0;
+        const a = 2 * h[i] + h[i - 1], b = h[i] + 2 * h[i - 1];
+        return (a + b) / (a / d[i - 1] + b / d[i]);
+    });
+}
+const curvesOf = (fit) => ({
+    open: axes.map((_, i) => slopes(fit.open, i + 1)),
+    close: axes.map((_, i) => slopes(fit.close, i + 1)),
+});
+const padCurves = curvesOf(padFit);
+const glyphDropCurves = curvesOf(glyphDropFit);
+/** The recorded contour table a non-spring profile follows, and its Hermite slopes. */
+function contourFit(idiom) {
+    return idiom === 'glyph' ? glyphDropFit : padFit;
+}
+function contourCurves(idiom) {
+    return idiom === 'glyph' ? glyphDropCurves : padCurves;
+}
+/** The springs a spring profile's axes follow in `direction`. */
+function morphSprings(direction, idiom, appearance) {
+    if (idiom === 'label')
+        return dropFit[direction];
+    if (direction === 'open' && idiom === 'context-content')
+        return contextFit.openContent;
+    if (direction === 'open' && idiom === 'context')
+        return contextFit.open[appearance];
+    return phoneFit[direction];
+}
+/** A spring profile's pose: each axis is its own spring (open rises 0 -> 1, close falls 1 -> 0). */
+function samplePhoneMorph(direction, ms, idiom, appearance = 'dark') {
+    const pose = { ...MENU_MORPH_ZERO }, velocity = { ...MENU_MORPH_ZERO };
+    const springs = morphSprings(direction, idiom, appearance);
+    for (const axis of axes) {
+        const spring = menuSpring(springs[axis], ms);
+        pose[axis] = direction === 'open' ? 1 - spring.value : spring.value;
+        velocity[axis] = direction === 'open' ? -spring.velocity : spring.velocity;
+    }
+    return { pose, velocity };
+}
+export function sampleMenuMorph(direction, ms, idiom = 'pad', appearance = 'dark') {
+    if (springProfile(idiom)) {
+        if (ms >= menuMorphDuration(direction, idiom))
+            return { pose: menuMorphEndpoint(direction), velocity: { ...MENU_MORPH_ZERO } };
+        if (direction === 'close' && isContext(idiom))
+            return sampleContextClose(Math.max(0, ms), appearance);
+        const sample = samplePhoneMorph(direction, ms, idiom, appearance);
+        for (const key of Object.keys(returns)) {
+            sample.pose[key] = direction === 'close' ? 1 - sample.pose[returns[key]] : 0;
+            sample.velocity[key] = direction === 'close' ? -sample.velocity[returns[key]] : 0;
+        }
+        return sample;
+    }
+    const knots = contourFit(idiom)[direction], curves = contourCurves(idiom), velocity = { ...MENU_MORPH_ZERO };
+    if (ms <= 0)
+        return {
+            pose: {
+                ...menuMorphEndpoint(direction === 'open' ? 'close' : 'open'),
+                returnX: 0,
+                returnY: 0,
+                returnWidth: 0,
+                returnHeight: 0,
+            },
+            velocity,
+        };
+    if (ms >= menuMorphDuration(direction, idiom))
+        return { pose: menuMorphEndpoint(direction), velocity };
+    const right = knots.findIndex(k => k[0] >= ms), a = knots[right - 1], b = knots[right], duration = (b[0] - a[0]) / 1000, t = (ms - a[0]) / (b[0] - a[0]), t2 = t * t, t3 = t2 * t;
+    const pose = { ...MENU_MORPH_ZERO };
+    axes.forEach((axis, index) => {
+        const m0 = curves[direction][index][right - 1], m1 = curves[direction][index][right], v0 = a[index + 1], v1 = b[index + 1];
+        pose[axis] =
+            (2 * t3 - 3 * t2 + 1) * v0 +
+                (t3 - 2 * t2 + t) * duration * m0 +
+                (-2 * t3 + 3 * t2) * v1 +
+                (t3 - t2) * duration * m1;
+        velocity[axis] =
+            ((6 * t2 - 6 * t) * v0 +
+                (3 * t2 - 4 * t + 1) * duration * m0 +
+                (-6 * t2 + 6 * t) * v1 +
+                (3 * t2 - 2 * t) * duration * m1) /
+                duration;
+    });
+    for (const key of Object.keys(returns)) {
+        pose[key] = direction === 'close' ? 1 - pose[returns[key]] : 0;
+        velocity[key] = direction === 'close' ? -velocity[returns[key]] : 0;
+    }
+    return { pose, velocity };
+}
+/** A retarget retains the presented position and its derivative. The inherited
+ * velocity decays with a Hermite basis whose value and slope are zero at settle;
+ * the measured curve still supplies the independent native axis responses. */
+export function transitionMenuMorph(direction, ms, from, initialVelocity = MENU_MORPH_ZERO, idiom = 'pad', appearance = 'dark') {
+    const target = menuMorphEndpoint(direction), duration = menuMorphDuration(direction, idiom) / 1000;
+    if (ms >= duration * 1000)
+        return { pose: target, velocity: { ...MENU_MORPH_ZERO } };
+    const t = Math.max(0, ms) / 1000 / duration, sample = sampleMenuMorph(direction, ms, idiom, appearance), pose = { ...from }, velocity = { ...MENU_MORPH_ZERO };
+    for (const key of [...axes, ...Object.keys(returns)]) {
+        const axis = key in returns ? returns[key] : key;
+        const progress = direction === 'open' ? sample.pose[axis] : 1 - sample.pose[axis];
+        const speed = (direction === 'open' ? 1 : -1) * sample.velocity[axis];
+        const delta = target[key] - from[key];
+        pose[key] =
+            from[key] + delta * progress + initialVelocity[key] * duration * t * (1 - t) * (1 - t);
+        velocity[key] = delta * speed + initialVelocity[key] * (1 - 4 * t + 3 * t * t);
+    }
+    return { pose, velocity };
+}

package/dist/glass/lens/menuMorphPhoneFit.json

@@ -0,0 +1,85 @@
+{
+    "provenance": {
+        "scene": "ParityReference toolbar-ellipsis, stock SwiftUI toolbar Menu over black (iPhone 17 Pro Max Simulator, iOS 27.0)",
+        "capture": "morph2 native recording menu measurements.mp4",
+        "model": "One damped spring per axis, each a displacement from 1 to 0: released after `delay` ms with initial velocity `velocity` (per second; negative moves toward the target), natural frequency `omega` (rad/s), damping ratio `zeta`. centerX, centerY, width and height are the travelling member, normalized between the trigger (0) and the panel (1).",
+        "open": "ms after the trigger release +43 ms. Fitted to the native outline bounds (union of trigger and drop), RMS 0.018-0.041 per axis (native measurements).",
+        "close": "ms after the close tap +41 ms (our measured tap-to-motion latency, so frames line up with native's in tap time). The four axes and closeHead are fitted together so the outline of our two-member field overlaps native's outline frame by frame (mean IoU 0.914 against a 0.90 ceiling for this measure; native measurements fit). On close the body's width and height are shares of the panel that collapse to nothing inside the button, and its centre travels to the button's current centre.",
+        "closeHead": "The re-formed button's size, 0 to 1 (1 - displacement).",
+        "closeButton": "The re-formed button's centre: home + from * displacement * (panel centre - home) per axis. One spring fits both axes of the native dots' tracked centre to 0.14 pt RMS (native measurements fit): it forms 8.9 pt short of home in x and 10 pt past it in y, rises to 13.5 pt past, and is home by about +530 ms of the tap."
+    },
+    "open": {
+        "centerX": {
+            "delay": 71.4,
+            "omega": 15.786,
+            "zeta": 0.787,
+            "velocity": -9.248
+        },
+        "centerY": {
+            "delay": 80.3,
+            "omega": 17.243,
+            "zeta": 0.565,
+            "velocity": -26.632
+        },
+        "width": {
+            "delay": 86.8,
+            "omega": 15.201,
+            "zeta": 0.759,
+            "velocity": -10.021
+        },
+        "height": {
+            "delay": 84.6,
+            "omega": 13.511,
+            "zeta": 0.86,
+            "velocity": -14.64
+        }
+    },
+    "close": {
+        "centerX": {
+            "delay": 5.5,
+            "omega": 16.034,
+            "zeta": 0.9,
+            "velocity": -1.342
+        },
+        "centerY": {
+            "delay": 8.7,
+            "omega": 16.455,
+            "zeta": 1.0,
+            "velocity": 24.013
+        },
+        "width": {
+            "delay": 13.3,
+            "omega": 9.958,
+            "zeta": 0.812,
+            "velocity": -4.609
+        },
+        "height": {
+            "delay": 13.1,
+            "omega": 9.691,
+            "zeta": 0.8,
+            "velocity": -2.44
+        }
+    },
+    "closeHead": {
+        "delay": 44.4,
+        "omega": 15.535,
+        "zeta": 0.782,
+        "velocity": 0.0
+    },
+    "closeButton": {
+        "x": {
+            "from": 0.0879,
+            "delay": 146.2,
+            "omega": 13.523,
+            "zeta": 0.803,
+            "velocity": -12.518
+        },
+        "y": {
+            "from": -0.1383,
+            "delay": 146.2,
+            "omega": 13.523,
+            "zeta": 0.803,
+            "velocity": 18.649
+        }
+    }
+}

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

@@ -0,0 +1,81 @@
+import type { SurfaceShape, ReturningMenuTrigger } from '../renderSpecs.js';
+import type { Appearance } from './theme.js';
+export type MenuDirection = 'close' | 'open';
+export declare const MENU_ENVELOPE: Readonly<{
+    frameHeight: 230;
+    frameWidth: 290;
+    frameX: 123;
+    frameY: 106;
+}>;
+export declare const MENU_BUTTON: Readonly<{
+    centerX: number;
+    centerY: number;
+    diameter: number;
+}>;
+export declare const MENU_PANEL: Readonly<{
+    centerX: 268;
+    centerY: 221;
+    cornerRadius: 43.15835260047611;
+    height: 188;
+    width: 250;
+}>;
+export declare const MENU_MOTION_DURATIONS: Readonly<{
+    close: number;
+    open: number;
+}>;
+export declare const MENU_CADENCE: Readonly<{
+    closeSettleSeconds: 0;
+    closedHoldSeconds: 0.24;
+    openHoldSeconds: 1.5;
+}>;
+export declare function menuMaterialProgress(direction: MenuDirection, seconds: number): number;
+export type MenuMotionFrame = Readonly<{
+    materialMix: number;
+    menuTintMix: number;
+    itemBlur: number;
+    itemOffsetX: number;
+    itemOffsetY?: number;
+    itemOpacity: number;
+    openProgress: number;
+    shape: SurfaceShape;
+    triggerOpacity: number;
+    toolbarProjected?: boolean;
+    returningTrigger?: ReturningMenuTrigger;
+}>;
+export declare function sampleMenuMotion(direction: MenuDirection, seconds: number, appearance: Appearance, reducedMotion: boolean): MenuMotionFrame;
+export declare function menuCadenceDuration(): number;
+export declare function sampleMenuCadence(seconds: number, appearance: Appearance, reducedMotion: boolean): {
+    direction: 'open';
+    frame: Readonly<{
+        materialMix: number;
+        menuTintMix: number;
+        itemBlur: number;
+        itemOffsetX: number;
+        itemOffsetY?: number;
+        itemOpacity: number;
+        openProgress: number;
+        shape: SurfaceShape;
+        triggerOpacity: number;
+        toolbarProjected?: boolean;
+        returningTrigger?: ReturningMenuTrigger;
+    }>;
+} | {
+    direction: 'close';
+    frame: Readonly<{
+        materialMix: number;
+        menuTintMix: number;
+        itemBlur: number;
+        itemOffsetX: number;
+        itemOffsetY?: number;
+        itemOpacity: number;
+        openProgress: number;
+        shape: SurfaceShape;
+        triggerOpacity: number;
+        toolbarProjected?: boolean;
+        returningTrigger?: ReturningMenuTrigger;
+    }>;
+};
+/** Restart an interrupted transition near the current geometry, not at its
+ * opposite endpoint. This is an interruption policy, not a native timing fit. */
+export declare function menuRetargetTime(frame: MenuMotionFrame, direction: MenuDirection, appearance: Appearance): number;
+export declare function blendMenuFrames(from: MenuMotionFrame, to: MenuMotionFrame, progress: number): MenuMotionFrame;