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

package/dist/glass/menuSymbolMasks.d.ts

@@ -0,0 +1 @@
+export type MenuSymbolName = 'info.circle' | 'star' | 'square.and.arrow.up' | 'trash';

package/dist/glass/menuSymbolMasks.js

@@ -0,0 +1 @@
+export {};

package/dist/glass/menuSymbolTokens.d.ts

@@ -0,0 +1,22 @@
+export declare const menuSymbolTokens: {
+    readonly rowHeight: 42;
+    readonly labelLeft: 57;
+    readonly positions: {
+        readonly 'info.circle': {
+            readonly left: number;
+            readonly top: number;
+        };
+        readonly star: {
+            readonly left: 22;
+            readonly top: number;
+        };
+        readonly 'square.and.arrow.up': {
+            readonly left: number;
+            readonly top: 9;
+        };
+        readonly trash: {
+            readonly left: number;
+            readonly top: number;
+        };
+    };
+};

package/dist/glass/menuSymbolTokens.js

@@ -0,0 +1,12 @@
+/* iPhone 17 Pro / iOS 26.5 toolbar reference, measured at DPR 3.
+ * Local positions include UIKit's symbol alignment margins. */
+export const menuSymbolTokens = {
+    rowHeight: 42,
+    labelLeft: 57,
+    positions: {
+        'info.circle': { left: 70 / 3, top: 35 / 3 },
+        star: { left: 22, top: 32 / 3 },
+        'square.and.arrow.up': { left: 71 / 3, top: 9 },
+        trash: { left: 71 / 3, top: 31 / 3 },
+    },
+};

package/dist/glass/menuTriggerGeometry.d.ts

@@ -0,0 +1,99 @@
+/** The span is a layout slot and may stretch across a flex/grid column. It is not the trigger. */
+export declare function menuTriggerElement(anchor: HTMLElement | null): HTMLElement | null | undefined;
+/** The glass a Menu morphs out of, and the menu's own button when that glass is wider than it.
+ * A glass button is its own glass. A plain button inside a toolbar group shares the group's one
+ * glass platter with its neighbours: native morphs the whole platter into the menu (its drop
+ * forms under the pressed member and the neighbours' symbols fade with the platter). */
+export declare function menuTriggerSource(anchor: HTMLElement | null): {
+    glass: HTMLElement;
+    member: HTMLElement | undefined;
+} | {
+    glass: HTMLElement | undefined;
+    member: undefined;
+};
+/** A toolbar's material lives outside its content; hide and lock the complete content run. */
+export declare function menuTriggerContents(anchor: HTMLElement | null): HTMLElement[];
+/** The same viewport-space aperture as the pressed region, including its top-edge pivot.
+ * Read the rendered corner radius so a custom rounded rectangle stays a rectangle. */
+export declare function menuTriggerGeometry(rect: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, radius: number, scale?: number): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius: number;
+};
+/** A return aperture must still be visible in the current viewport and its clipping ancestors. */
+export declare function menuTriggerReturnGeometry(anchor: HTMLElement | null, viewport: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, at?: number): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius: number;
+} | undefined;
+/** Plain value labels (a menu-style Picker's value, a text Menu label) have no material of
+ * their own, but the native Picker's drop still leaves the label (picker-glass-sheet). */
+export declare function menuTriggerHasGlass(element: HTMLElement | undefined): boolean;
+/** The virtual trigger of a plain label: the label's own box as a capsule. It takes part in
+ * the shared glass field like a glass button's, but draws no glass at rest. */
+export declare function menuLabelTrigger(rect: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius: number;
+};
+/** How a plain trigger takes part in the menu's glass. An icon-only button (a box at least
+ * two thirds as thick as it is long, like the Now Playing ellipsis) is a glyph: its drop is a
+ * glass button's that swells out of nothing. A wider box is a text label: menu-style Picker
+ * values keep their measured label drop (picker-glass-sheet). */
+export declare function plainMenuSourceKind(rect: {
+    width: number;
+    height: number;
+}): 'glyph' | 'label';
+export declare function contextMenuSeed(rect: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius: number;
+};
+/** Where a dismissed context menu's body collapses: the same 92x25 pt aperture as its open seed,
+ * on the side of its source that faces the menu. Native's body shrinks back into its source; a
+ * menu placed above its preview (a grid tile near the bottom of the screen) collapses onto the
+ * source's top edge rather than travelling across the preview to the seed below it. The facing
+ * side is principled, not measured: only the below-the-source seed has a native capture. */
+export declare function contextMenuReturnSeed(source: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, panel?: {
+    y: number;
+    height: number;
+}): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius: number;
+};

package/dist/glass/menuTriggerGeometry.js

@@ -0,0 +1,126 @@
+import { toolbarMaterialOwner, toolbarMenuContents } from './toolbarMaterialContext.js';
+import { lowerShapeTop } from './lens/drawableTop.js';
+import { glassAperture } from './shapeTrackRegistry.js';
+import { shapeTrackClock } from './shapeTrack.js';
+/** The span is a layout slot and may stretch across a flex/grid column. It is not the trigger. */
+export function menuTriggerElement(anchor) {
+    return (anchor?.querySelector('[data-satin-glass-effect]') ??
+        anchor?.querySelector('button') ??
+        anchor?.firstElementChild);
+}
+/** The glass a Menu morphs out of, and the menu's own button when that glass is wider than it.
+ * A glass button is its own glass. A plain button inside a toolbar group shares the group's one
+ * glass platter with its neighbours: native morphs the whole platter into the menu (its drop
+ * forms under the pressed member and the neighbours' symbols fade with the platter). */
+export function menuTriggerSource(anchor) {
+    const owner = toolbarMaterialOwner(menuTriggerElement(anchor));
+    if (owner) {
+        return { glass: owner, member: menuTriggerElement(anchor) ?? undefined };
+    }
+    const own = anchor?.querySelector('[data-satin-glass-effect]');
+    if (own)
+        return { glass: own, member: undefined };
+    const group = anchor?.closest('[data-satin-toolbar-group]');
+    if (!group)
+        return { glass: menuTriggerElement(anchor) ?? undefined, member: undefined };
+    return { glass: group, member: menuTriggerElement(anchor) ?? undefined };
+}
+/** A toolbar's material lives outside its content; hide and lock the complete content run. */
+export function menuTriggerContents(anchor) {
+    const { glass } = menuTriggerSource(anchor);
+    return toolbarMaterialOwner(menuTriggerElement(anchor))
+        ? toolbarMenuContents(menuTriggerElement(anchor))
+        : glass
+            ? [glass]
+            : [];
+}
+/** The same viewport-space aperture as the pressed region, including its top-edge pivot.
+ * Read the rendered corner radius so a custom rounded rectangle stays a rectangle. */
+export function menuTriggerGeometry(rect, radius, scale = 1) {
+    const width = rect.width * scale, height = rect.height * scale;
+    const shape = lowerShapeTop({ centerY: rect.height / 2, halfHeight: height / 2 }, rect.y);
+    return {
+        x: rect.x - (width - rect.width) / 2,
+        y: rect.y + shape.centerY - shape.halfHeight,
+        width,
+        height,
+        radius: Math.min(Math.max(0, radius * scale), width / 2, height / 2),
+    };
+}
+/** A return aperture must still be visible in the current viewport and its clipping ancestors. */
+export function menuTriggerReturnGeometry(anchor, viewport, at = shapeTrackClock()) {
+    const { glass } = menuTriggerSource(anchor);
+    if (!anchor?.isConnected || !glass?.isConnected)
+        return undefined;
+    const rect = glassAperture(glass, at);
+    let left = Math.max(rect.x, viewport.x);
+    let top = Math.max(rect.y, viewport.y);
+    let right = Math.min(rect.x + rect.width, viewport.x + viewport.width);
+    let bottom = Math.min(rect.y + rect.height, viewport.y + viewport.height);
+    for (let parent = glass.parentElement; parent; parent = parent.parentElement) {
+        const style = getComputedStyle(parent);
+        const clipsX = /auto|scroll|hidden|clip/.test(style.overflowX);
+        const clipsY = /auto|scroll|hidden|clip/.test(style.overflowY);
+        if (!clipsX && !clipsY)
+            continue;
+        const bounds = parent.getBoundingClientRect();
+        if (clipsX) {
+            left = Math.max(left, bounds.left);
+            right = Math.min(right, bounds.right);
+        }
+        if (clipsY) {
+            top = Math.max(top, bounds.top);
+            bottom = Math.min(bottom, bounds.bottom);
+        }
+    }
+    if (rect.width <= 0 || rect.height <= 0 || right <= left || bottom <= top)
+        return undefined;
+    return menuTriggerHasGlass(glass)
+        ? menuTriggerGeometry(rect, rect.radius)
+        : menuLabelTrigger(rect);
+}
+/** Plain value labels (a menu-style Picker's value, a text Menu label) have no material of
+ * their own, but the native Picker's drop still leaves the label (picker-glass-sheet). */
+export function menuTriggerHasGlass(element) {
+    return !!element?.matches('[data-satin-glass-effect], [data-satin-glass-button], [data-satin-toolbar-group], [data-satin-toolbar-glass]');
+}
+/** The virtual trigger of a plain label: the label's own box as a capsule. It takes part in
+ * the shared glass field like a glass button's, but draws no glass at rest. */
+export function menuLabelTrigger(rect) {
+    return {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+        radius: rect.height / 2,
+    };
+}
+/** How a plain trigger takes part in the menu's glass. An icon-only button (a box at least
+ * two thirds as thick as it is long, like the Now Playing ellipsis) is a glyph: its drop is a
+ * glass button's that swells out of nothing. A wider box is a text label: menu-style Picker
+ * values keep their measured label drop (picker-glass-sheet). */
+export function plainMenuSourceKind(rect) {
+    const thick = Math.min(rect.width, rect.height), long = Math.max(rect.width, rect.height);
+    return long > 0 && thick / long >= 2 / 3 ? 'glyph' : 'label';
+}
+/* First resolved native context body, native opening measurements: a 92x25 pt aperture below
+ * the resting preview. The preview itself never enters the material field. */
+export function contextMenuSeed(rect) {
+    return {
+        x: rect.x + rect.width / 2 - 46,
+        y: rect.y + rect.height + 2,
+        width: 92,
+        height: 25,
+        radius: 12.5,
+    };
+}
+/** Where a dismissed context menu's body collapses: the same 92x25 pt aperture as its open seed,
+ * on the side of its source that faces the menu. Native's body shrinks back into its source; a
+ * menu placed above its preview (a grid tile near the bottom of the screen) collapses onto the
+ * source's top edge rather than travelling across the preview to the seed below it. The facing
+ * side is principled, not measured: only the below-the-source seed has a native capture. */
+export function contextMenuReturnSeed(source, panel) {
+    const below = contextMenuSeed(source);
+    const panelAbove = panel && panel.height > 0 && panel.y + panel.height / 2 < source.y + source.height / 2;
+    return panelAbove ? { ...below, y: source.y - 2 - below.height } : below;
+}

package/dist/glass/menuTriggerSnapshot.d.ts

@@ -0,0 +1,77 @@
+export declare function snapshotMenuTrigger(element: HTMLElement): {
+    id: number;
+    at: number;
+    element: HTMLElement;
+    layout: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    envelope: DOMRect;
+    aperture: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        radius: number;
+    };
+    members: {
+        element: HTMLElement;
+        geometry: {
+            bounds: DOMRect;
+            rects: Map<Element, DOMRect>;
+            lines: Map<Text, {
+                text: string;
+                rect: DOMRect;
+            }[]>;
+        };
+    }[];
+} | undefined;
+export declare function menuTriggerSnapshot(element: HTMLElement, id: number | undefined): {
+    id: number;
+    at: number;
+    element: HTMLElement;
+    layout: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    envelope: DOMRect;
+    aperture: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        radius: number;
+    };
+    members: {
+        element: HTMLElement;
+        geometry: {
+            bounds: DOMRect;
+            rects: Map<Element, DOMRect>;
+            lines: Map<Text, {
+                text: string;
+                rect: DOMRect;
+            }[]>;
+        };
+    }[];
+} | undefined;
+/** Move a captured viewport pose into the renderer's resting plane without resampling it. */
+export declare function mapTriggerSnapshot(snapshot: NonNullable<ReturnType<typeof menuTriggerSnapshot>>, envelope: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): {
+    aperture: DOMRect;
+    members: {
+        bounds: DOMRect;
+        rects: Map<Element, DOMRect>;
+        lines: Map<Text, {
+            text: string;
+            rect: DOMRect;
+        }[]>;
+    }[];
+};

package/dist/glass/menuTriggerSnapshot.js

@@ -0,0 +1,69 @@
+import { glassApertureInFrame, glassShapeTrack } from './shapeTrackRegistry.js';
+import { shapeTrackClock } from './shapeTrack.js';
+import { toolbarMaterialContent, toolbarMenuContents } from './toolbarMaterialContext.js';
+import { foregroundGeometry } from './webgpu/foreground.js';
+/** A menu owns one source pose through asynchronous atlas preparation. DOM geometry must not
+ * be read again after font/image decoding has allowed the toolbar to advance. */
+let generation = 0;
+const snapshots = new WeakMap();
+function createSnapshot(element) {
+    const at = shapeTrackClock();
+    const envelope = element.getBoundingClientRect();
+    const aperture = glassApertureInFrame(element, envelope, at);
+    const layout = localBox(element);
+    const members = toolbarMenuContents(toolbarMaterialContent(element)).map(member => ({
+        element: member,
+        geometry: foregroundGeometry(member),
+    }));
+    return { id: ++generation, at, element, layout, envelope, aperture, members };
+}
+function localBox(element) {
+    const style = getComputedStyle(element);
+    return {
+        x: parseFloat(style.left) || 0,
+        y: parseFloat(style.top) || 0,
+        width: parseFloat(style.width) || element.offsetWidth,
+        height: parseFloat(style.height) || element.offsetHeight,
+    };
+}
+export function snapshotMenuTrigger(element) {
+    if (!glassShapeTrack(element))
+        return undefined;
+    const snapshot = createSnapshot(element);
+    snapshots.set(element, snapshot);
+    return snapshot;
+}
+export function menuTriggerSnapshot(element, id) {
+    const snapshot = snapshots.get(element);
+    return snapshot?.id === id ? snapshot : undefined;
+}
+/** Move a captured viewport pose into the renderer's resting plane without resampling it. */
+export function mapTriggerSnapshot(snapshot, envelope) {
+    // The toolbar may retire its envelope during decoding. Only its ancestor transform belongs
+    // to this mapping; a new endpoint width must not stretch the earlier aperture or glyphs.
+    const current = localBox(snapshot.element);
+    const scaleX = current.width ? envelope.width / current.width : 1;
+    const scaleY = current.height ? envelope.height / current.height : 1;
+    const origin = {
+        x: envelope.x + (snapshot.layout.x - current.x) * scaleX,
+        y: envelope.y + (snapshot.layout.y - current.y) * scaleY,
+    };
+    const sx = snapshot.envelope.width
+        ? (snapshot.layout.width * scaleX) / snapshot.envelope.width
+        : 1;
+    const sy = snapshot.envelope.height
+        ? (snapshot.layout.height * scaleY) / snapshot.envelope.height
+        : 1;
+    const map = (rect) => new DOMRect(origin.x + (rect.x - snapshot.envelope.x) * sx, origin.y + (rect.y - snapshot.envelope.y) * sy, rect.width * sx, rect.height * sy);
+    return {
+        aperture: map(snapshot.aperture),
+        members: snapshot.members.map(({ geometry }) => ({
+            bounds: map(geometry.bounds),
+            rects: new Map([...geometry.rects].map(([element, rect]) => [element, map(rect)])),
+            lines: new Map([...geometry.lines].map(([node, lines]) => [
+                node,
+                lines.map(line => ({ ...line, rect: map(line.rect) })),
+            ])),
+        })),
+    };
+}

package/dist/glass/menuTypes.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { Action } from '../actions/types.js';
+import type { MenuSymbolName } from './menuSymbolMasks.js';
+export type GlassAction = Readonly<{
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    symbol?: MenuSymbolName;
+    destructive?: boolean;
+    onPress: () => void;
+}>;
+/** A menu entry at any depth: sections and submenus nest glass actions as well as plain ones. */
+export type MenuEntry = Action | GlassAction | Readonly<{
+    section: readonly MenuEntry[];
+    label?: string;
+}> | Readonly<{
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    submenu: readonly MenuEntry[];
+}>;

package/dist/glass/menuTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/glass/morphField.d.ts

@@ -0,0 +1,18 @@
+import type { SurfaceRenderSpec } from './renderSpecs.js';
+import type { GlassRegion } from './regions.js';
+export { glassBlendRadius, glassFieldDistance, roundedRectDistance, roundedRectNormal, smoothMinimum, GLASS_BLEND_ANGLE_POWER, type GlassFieldMember, type GlassUnionFrame, } from './fieldGeometry.js';
+export declare function glassIdentityKey(region: Pick<GlassRegion, 'container' | 'morph'>): string | undefined;
+type FieldRegion = Pick<GlassRegion, 'container' | 'morph' | 'namespace' | 'union' | 'shape' | 'material'> & Partial<Pick<GlassRegion, 'layer'>>;
+export declare function glassFieldKey(region: FieldRegion): string;
+export declare function glassUnionDiagnostics(regions: readonly FieldRegion[]): string[];
+/** Conservative visible-field bounds in sample coordinates. Each smooth minimum can
+ * extend a union by at most blendRadius / 4; retain the optical sample inset too.
+ * Capture geometry stays fixed so animation does not invalidate the backdrop. */
+export declare function morphFieldSampleBounds(spec: SurfaceRenderSpec): readonly [number, number, number, number] | undefined;
+export declare function morphFieldUniforms(spec: SurfaceRenderSpec): Record<string, number | number[]>;
+/** The union field (fieldGeometry.ts is its CPU twin; both share the zero set).
+ * morphRawDistance is the smooth union. A smooth minimum flattens the field across a neck
+ * (|gradient| is about 0.4 at a 14-pt-gap waist), so material bands measured in field units
+ * would widen there into a bright rim bead. morphDistance divides by the gradient near the
+ * surface, restoring point-true band widths without moving the contour. */
+export declare const MORPH_FIELD_GLSL = "\nprecision highp float;\nuniform vec4 uMorphParams;\nuniform vec4 uMorphShape0;\nuniform vec4 uMorphShape1;\nuniform vec4 uMorphShape2;\nuniform vec4 uMorphShape3;\nuniform vec4 uMorphShape4;\nuniform vec4 uMorphShape5;\nuniform vec4 uMorphShape6;\nuniform vec4 uMorphShape7;\nuniform vec4 uMorphShape8;\nuniform vec4 uMorphShape9;\nuniform vec4 uMorphShape10;\nuniform vec4 uMorphShape11;\nuniform vec4 uMorphShape12;\nuniform vec4 uMorphShape13;\nuniform vec4 uMorphShape14;\nuniform vec4 uMorphShape15;\nuniform vec4 uMorphRadii0;\nuniform vec4 uMorphRadii1;\nuniform vec4 uMorphRadii2;\nuniform vec4 uMorphRadii3;\nfloat morphMemberDistance(vec2 p,vec4 shape,float radius){vec2 q=abs(p-shape.xy)-shape.zw+radius;return min(max(q.x,q.y),0.0)+length(max(q,vec2(0)))-radius;}\nfloat morphSmoothMin(float a,float b){float k=uMorphParams.y;if(k<=0.0)return min(a,b);float h=max(k-abs(a-b),0.0)/k;return min(a,b)-h*h*k*.25;}\nvec2 morphMemberNormal(vec2 p,vec4 shape,float radius){vec2 delta=p-shape.xy;vec2 q=abs(delta)-shape.zw+radius;vec2 n=max(q,vec2(0))*sign(delta);if(max(q.x,q.y)<=0.0)n=q.x>=q.y?vec2(sign(delta.x),0):vec2(0,sign(delta.y));return n/max(length(n),1e-8);}\nvoid morphAdd(vec2 p,vec4 shape,float radius,inout float d,inout vec2 n){float b=morphMemberDistance(p,shape,radius);vec2 nb=morphMemberNormal(p,shape,radius);if(d>1e9){d=b;n=nb;return;}float k=uMorphParams.y*pow(clamp((1.0-dot(n,nb))*.5,0.0,1.0),1);if(k<=1e-4){if(b<d){d=b;n=nb;}return;}float h=max(k-abs(d-b),0.0)/k;float w=clamp(.5+(d-b)/(2.0*k),0.0,1.0);d=min(d,b)-h*h*k*.25;n=mix(n,nb,w);n=n/max(length(n),1e-8);}\nfloat morphRawDistance(vec2 p){float d=1e10;vec2 n=vec2(0);\nif(uMorphParams.x>0.5)morphAdd(p,uMorphShape0,uMorphRadii0.x,d,n);\nif(uMorphParams.x>1.5)morphAdd(p,uMorphShape1,uMorphRadii0.y,d,n);\nif(uMorphParams.x>2.5)morphAdd(p,uMorphShape2,uMorphRadii0.z,d,n);\nif(uMorphParams.x>3.5)morphAdd(p,uMorphShape3,uMorphRadii0.w,d,n);\nif(uMorphParams.x>4.5)morphAdd(p,uMorphShape4,uMorphRadii1.x,d,n);\nif(uMorphParams.x>5.5)morphAdd(p,uMorphShape5,uMorphRadii1.y,d,n);\nif(uMorphParams.x>6.5)morphAdd(p,uMorphShape6,uMorphRadii1.z,d,n);\nif(uMorphParams.x>7.5)morphAdd(p,uMorphShape7,uMorphRadii1.w,d,n);\nif(uMorphParams.x>8.5)morphAdd(p,uMorphShape8,uMorphRadii2.x,d,n);\nif(uMorphParams.x>9.5)morphAdd(p,uMorphShape9,uMorphRadii2.y,d,n);\nif(uMorphParams.x>10.5)morphAdd(p,uMorphShape10,uMorphRadii2.z,d,n);\nif(uMorphParams.x>11.5)morphAdd(p,uMorphShape11,uMorphRadii2.w,d,n);\nif(uMorphParams.x>12.5)morphAdd(p,uMorphShape12,uMorphRadii3.x,d,n);\nif(uMorphParams.x>13.5)morphAdd(p,uMorphShape13,uMorphRadii3.y,d,n);\nif(uMorphParams.x>14.5)morphAdd(p,uMorphShape14,uMorphRadii3.z,d,n);\nif(uMorphParams.x>15.5)morphAdd(p,uMorphShape15,uMorphRadii3.w,d,n);\nreturn d;}\nvec2 morphGradient(vec2 p){float e=.1;return vec2(morphRawDistance(p+vec2(e,0))-morphRawDistance(p-vec2(e,0)),morphRawDistance(p+vec2(0,e))-morphRawDistance(p-vec2(0,e)))/(2.0*e);}\nvec2 morphNormal(vec2 p){return normalize(morphGradient(p)+vec2(1e-8));}\nfloat morphDistance(vec2 p){float d=morphRawDistance(p);if(uMorphParams.x<1.5||uMorphParams.y<=0.0)return d;float scale=1.0/clamp(length(morphGradient(p)),.25,1.0);return d*mix(scale,1.0,smoothstep(16.0,28.0,-d));}\n";

package/dist/glass/morphField.js

@@ -0,0 +1,139 @@
+import { GLASS_BLEND_ANGLE_POWER } from './fieldGeometry.js';
+export { glassBlendRadius, glassFieldDistance, roundedRectDistance, roundedRectNormal, smoothMinimum, GLASS_BLEND_ANGLE_POWER, } from './fieldGeometry.js';
+export function glassIdentityKey(region) {
+    return region.morph
+        ? JSON.stringify([region.container?.id ?? null, region.morph.namespace, region.morph.id])
+        : undefined;
+}
+export function glassFieldKey(region) {
+    // Press policy controls interaction, not optical compatibility.
+    const { press: _press, ...material } = region.material;
+    return JSON.stringify([
+        region.container?.id,
+        region.morph?.namespace ?? region.namespace,
+        region.union ?? null,
+        region.shape,
+        material,
+        region.layer,
+    ]);
+}
+export function glassUnionDiagnostics(regions) {
+    const requested = new Map();
+    for (const region of regions) {
+        if (!region.container || region.union === undefined)
+            continue;
+        const key = JSON.stringify([
+            region.container.id,
+            region.morph?.namespace ?? region.namespace,
+            region.union,
+        ]);
+        const fields = requested.get(key) ?? new Set();
+        fields.add(glassFieldKey(region));
+        requested.set(key, fields);
+    }
+    return [...requested]
+        .filter(([, fields]) => fields.size > 1)
+        .map(([key]) => `Incompatible glassEffectUnion ${key}: preserving separate shape/material fields.`);
+}
+/** Conservative visible-field bounds in sample coordinates. Each smooth minimum can
+ * extend a union by at most blendRadius / 4; retain the optical sample inset too.
+ * Capture geometry stays fixed so animation does not invalidate the backdrop. */
+export function morphFieldSampleBounds(spec) {
+    const members = spec.shape.members;
+    if (!members?.length || spec.treatment || spec.materialProfile !== 'chrome')
+        return undefined;
+    const blendSupport = (Math.max(0, spec.shape.blendRadius) * (members.length - 1)) / 4;
+    const paddingX = spec.sampleInsetX + blendSupport;
+    const paddingY = spec.sampleInsetY + blendSupport;
+    const left = Math.min(...members.map(member => member.centerX - member.halfWidth)) +
+        spec.sampleInsetX -
+        paddingX;
+    const top = Math.min(...members.map(member => member.centerY - member.halfHeight)) +
+        spec.sampleInsetY -
+        paddingY;
+    const right = Math.max(...members.map(member => member.centerX + member.halfWidth)) +
+        spec.sampleInsetX +
+        paddingX;
+    const bottom = Math.max(...members.map(member => member.centerY + member.halfHeight)) +
+        spec.sampleInsetY +
+        paddingY;
+    return [left, top, right - left, bottom - top];
+}
+export function morphFieldUniforms(spec) {
+    const members = spec.shape.members ?? [];
+    return {
+        uMorphParams: [members.length, spec.shape.blendRadius, 0, 0],
+        ...Object.fromEntries(Array.from({ length: 16 }, (_, i) => {
+            const s = members[i];
+            return [
+                `uMorphShape${i}`,
+                s
+                    ? [
+                        s.centerX + spec.sampleInsetX,
+                        s.centerY + spec.sampleInsetY,
+                        s.halfWidth,
+                        s.halfHeight,
+                    ]
+                    : [0, 0, 0, 0],
+            ];
+        })),
+        ...Object.fromEntries(Array.from({ length: 4 }, (_, i) => [
+            `uMorphRadii${i}`,
+            Array.from({ length: 4 }, (_, j) => members[i * 4 + j]?.radius ?? 0),
+        ])),
+    };
+}
+/** The union field (fieldGeometry.ts is its CPU twin; both share the zero set).
+ * morphRawDistance is the smooth union. A smooth minimum flattens the field across a neck
+ * (|gradient| is about 0.4 at a 14-pt-gap waist), so material bands measured in field units
+ * would widen there into a bright rim bead. morphDistance divides by the gradient near the
+ * surface, restoring point-true band widths without moving the contour. */
+export const MORPH_FIELD_GLSL = /* glsl */ `
+precision highp float;
+uniform vec4 uMorphParams;
+uniform vec4 uMorphShape0;
+uniform vec4 uMorphShape1;
+uniform vec4 uMorphShape2;
+uniform vec4 uMorphShape3;
+uniform vec4 uMorphShape4;
+uniform vec4 uMorphShape5;
+uniform vec4 uMorphShape6;
+uniform vec4 uMorphShape7;
+uniform vec4 uMorphShape8;
+uniform vec4 uMorphShape9;
+uniform vec4 uMorphShape10;
+uniform vec4 uMorphShape11;
+uniform vec4 uMorphShape12;
+uniform vec4 uMorphShape13;
+uniform vec4 uMorphShape14;
+uniform vec4 uMorphShape15;
+uniform vec4 uMorphRadii0;
+uniform vec4 uMorphRadii1;
+uniform vec4 uMorphRadii2;
+uniform vec4 uMorphRadii3;
+float morphMemberDistance(vec2 p,vec4 shape,float radius){vec2 q=abs(p-shape.xy)-shape.zw+radius;return min(max(q.x,q.y),0.0)+length(max(q,vec2(0)))-radius;}
+float morphSmoothMin(float a,float b){float k=uMorphParams.y;if(k<=0.0)return min(a,b);float h=max(k-abs(a-b),0.0)/k;return min(a,b)-h*h*k*.25;}
+vec2 morphMemberNormal(vec2 p,vec4 shape,float radius){vec2 delta=p-shape.xy;vec2 q=abs(delta)-shape.zw+radius;vec2 n=max(q,vec2(0))*sign(delta);if(max(q.x,q.y)<=0.0)n=q.x>=q.y?vec2(sign(delta.x),0):vec2(0,sign(delta.y));return n/max(length(n),1e-8);}
+void morphAdd(vec2 p,vec4 shape,float radius,inout float d,inout vec2 n){float b=morphMemberDistance(p,shape,radius);vec2 nb=morphMemberNormal(p,shape,radius);if(d>1e9){d=b;n=nb;return;}float k=uMorphParams.y*pow(clamp((1.0-dot(n,nb))*.5,0.0,1.0),${GLASS_BLEND_ANGLE_POWER});if(k<=1e-4){if(b<d){d=b;n=nb;}return;}float h=max(k-abs(d-b),0.0)/k;float w=clamp(.5+(d-b)/(2.0*k),0.0,1.0);d=min(d,b)-h*h*k*.25;n=mix(n,nb,w);n=n/max(length(n),1e-8);}
+float morphRawDistance(vec2 p){float d=1e10;vec2 n=vec2(0);
+if(uMorphParams.x>0.5)morphAdd(p,uMorphShape0,uMorphRadii0.x,d,n);
+if(uMorphParams.x>1.5)morphAdd(p,uMorphShape1,uMorphRadii0.y,d,n);
+if(uMorphParams.x>2.5)morphAdd(p,uMorphShape2,uMorphRadii0.z,d,n);
+if(uMorphParams.x>3.5)morphAdd(p,uMorphShape3,uMorphRadii0.w,d,n);
+if(uMorphParams.x>4.5)morphAdd(p,uMorphShape4,uMorphRadii1.x,d,n);
+if(uMorphParams.x>5.5)morphAdd(p,uMorphShape5,uMorphRadii1.y,d,n);
+if(uMorphParams.x>6.5)morphAdd(p,uMorphShape6,uMorphRadii1.z,d,n);
+if(uMorphParams.x>7.5)morphAdd(p,uMorphShape7,uMorphRadii1.w,d,n);
+if(uMorphParams.x>8.5)morphAdd(p,uMorphShape8,uMorphRadii2.x,d,n);
+if(uMorphParams.x>9.5)morphAdd(p,uMorphShape9,uMorphRadii2.y,d,n);
+if(uMorphParams.x>10.5)morphAdd(p,uMorphShape10,uMorphRadii2.z,d,n);
+if(uMorphParams.x>11.5)morphAdd(p,uMorphShape11,uMorphRadii2.w,d,n);
+if(uMorphParams.x>12.5)morphAdd(p,uMorphShape12,uMorphRadii3.x,d,n);
+if(uMorphParams.x>13.5)morphAdd(p,uMorphShape13,uMorphRadii3.y,d,n);
+if(uMorphParams.x>14.5)morphAdd(p,uMorphShape14,uMorphRadii3.z,d,n);
+if(uMorphParams.x>15.5)morphAdd(p,uMorphShape15,uMorphRadii3.w,d,n);
+return d;}
+vec2 morphGradient(vec2 p){float e=.1;return vec2(morphRawDistance(p+vec2(e,0))-morphRawDistance(p-vec2(e,0)),morphRawDistance(p+vec2(0,e))-morphRawDistance(p-vec2(0,e)))/(2.0*e);}
+vec2 morphNormal(vec2 p){return normalize(morphGradient(p)+vec2(1e-8));}
+float morphDistance(vec2 p){float d=morphRawDistance(p);if(uMorphParams.x<1.5||uMorphParams.y<=0.0)return d;float scale=1.0/clamp(length(morphGradient(p)),.25,1.0);return d*mix(scale,1.0,smoothstep(16.0,28.0,-d));}
+`;

package/dist/glass/presentationFrame.d.ts

@@ -0,0 +1,43 @@
+/** How glass reads a presentation that is held for its first glass or travelling on screen.
+ *
+ * Hold: a presentation waiting for its first glass is hidden by one stylesheet rule keyed on
+ * `data-satin-glass-hold`, never by inline styles. The rule clips the held node to nothing: no
+ * paint and no hit testing, while layout and computed visibility stay exactly as they will show.
+ * Source preparation therefore reads a held presentation directly, with no style change (toggling
+ * a stylesheet restyles the whole document: about 216 ms per read on an iPad behind a long thread),
+ * and content an author hid inside the presentation stays hidden.
+ *
+ * Travel: a sheet or cover moves as one rigid layer (its entrance, drag and dismissal are a
+ * translation of the presentation's glass layer). Glass nested in the presentation and the
+ * presentation's own content planes are placed in that layer's resting frame. The compositor moves
+ * them together, so nested glass keeps its pixels while the surface travels, as native glass in a
+ * sheet does. The presentation's own material is not nested: it samples the screen below it live. */
+/** Hide `node` until `releaseHold` (or a later hold of another generation). */
+export declare function hold(node: HTMLElement, generation: string): void;
+/** End this generation's hold; a newer generation keeps its own. */
+export declare function releaseHold(node: HTMLElement, generation: string): void;
+/** The held presentations a source preparation is about to measure, with their generations. */
+export declare function heldPresentations(document?: Document): (readonly [HTMLElement, string])[];
+/** The renderer holds a backdrop measured during these holds: each still-current hold may now
+ * wait for its glass to be drawn over it (holdPresentationForGlass). */
+export declare function confirmHeldSources(held: ReturnType<typeof heldPresentations>): void;
+export type Travel = Readonly<{
+    x: number;
+    y: number;
+    layer?: HTMLElement;
+}>;
+/** The current travel of the sheet or cover that `element` is nested in (zero when it is the
+ * presentation's own surface, outside any presentation, or at rest). */
+export declare function presentationTravel(element: Element): Travel;
+/** A viewport rectangle of something inside the travelling layer, in the layer's resting frame. */
+export declare function atRest<T extends {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}>(rect: T, travel: Travel): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};