@satinhq/kit 0.1.0-beta.2 → 0.1.0-beta.3

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

@@ -2,7 +2,7 @@ import type { InteractivePressProfile } from './interactivePress.js';
 import { type TabHeldGeometry } from './tabMotion.js';
 export { SCOPE_THUMB } from './scopeSegments.js';
 /**
- * The held glass lens of a Toggle or Slider thumb. Measured 2026-10-09 on stock SwiftUI controls
+ * The held glass lens of a Toggle or Slider thumb. Measured 2026-10-09 on native controls
  * (iPhone 17 Pro Max Simulator, iOS 27.0, dark; counter-retimed idb contacts; `pooled-response-models.json`): a stationary hold keeps the 37 × 24 pt
  * white thumb for about 333 ms, then the thumb becomes a clear lens that springs to its held size.
  * Release restores the size with a slower spring. Mass is 1; width and height share one response.

package/dist/glass/lens/controlLift.js

@@ -2,7 +2,7 @@ import { TAB_INTERACTIVE_MOTION } from './tabMotion.js';
 import { SCOPE_THUMB } from './scopeSegments.js';
 export { SCOPE_THUMB } from './scopeSegments.js';
 /**
- * The held glass lens of a Toggle or Slider thumb. Measured 2026-10-09 on stock SwiftUI controls
+ * The held glass lens of a Toggle or Slider thumb. Measured 2026-10-09 on native controls
  * (iPhone 17 Pro Max Simulator, iOS 27.0, dark; counter-retimed idb contacts; `pooled-response-models.json`): a stationary hold keeps the 37 × 24 pt
  * white thumb for about 333 ms, then the thumb becomes a clear lens that springs to its held size.
  * Release restores the size with a slower spring. Mass is 1; width and height share one response.

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

@@ -1,7 +1,7 @@
 import { type GlassContactKind } from '../contactPhysics.js';
 /**
- * The one press response of interactive Liquid Glass (buttons, bar and toolbar buttons, the
- * back button, Glass.interactive() surfaces). Fitted 2026-09-25 to stock SwiftUI on the iOS
+ * The one press response of interactive glass (buttons, bar and toolbar buttons, the
+ * back button, Glass.interactive() surfaces). Fitted 2026-09-25 to native controls on the iOS
  * 27.0 Simulator (ParityReference `--glass-press`, idb presses at human speed: 0.6 s holds and
  * 0.12 s taps, light and dark; glass edges measured on the centre row and column):
  *

package/dist/glass/lens/interactivePress.js

@@ -1,8 +1,8 @@
 import { MENU_MORPH_DURATION, sampleMenuMorph } from './menuMorphMotion.js';
 import { GLASS_CONTACT_PHYSICS } from '../contactPhysics.js';
 /**
- * The one press response of interactive Liquid Glass (buttons, bar and toolbar buttons, the
- * back button, Glass.interactive() surfaces). Fitted 2026-09-25 to stock SwiftUI on the iOS
+ * The one press response of interactive glass (buttons, bar and toolbar buttons, the
+ * back button, Glass.interactive() surfaces). Fitted 2026-09-25 to native controls on the iOS
  * 27.0 Simulator (ParityReference `--glass-press`, idb presses at human speed: 0.6 s holds and
  * 0.12 s taps, light and dark; glass edges measured on the centre row and column):
  *

package/dist/glass/lens/menu-opening-native-fits.json

@@ -5,7 +5,7 @@
         "centerX": 364,
         "centerY": 156,
         "diameter": 58,
-        "measurement": "Fresh native button versus glass-off control: 58 x 58.333 pt at 90-level threshold. The SwiftUI label frame is 44 pt."
+        "measurement": "Fresh native button versus glass-off control: 58 x 58.333 pt at 90-level threshold. The label frame is 44 pt."
     },
     "panel": {
         "centerX": 267.5,

package/dist/glass/lens/menuContextFit.json

@@ -3,7 +3,7 @@
         "scene": "reference iOS 27 Simulator Notes, light and dark touch-clocked recordings",
         "source": "native opening measurements/curve fit and native-samples.json; recognition = touch +750ms",
         "limits": "Translucent threshold contours are estimates; same-device optical acceptance remains pending.",
-        "content": "openContent: native iPad Pro 11 (2nd gen) iOS 27.0.1 SwiftUI .contextMenu on a chat bubble, warm-light-chat-tall (3 counter-qualified trials, native menu measurements curve fit, width RMS 0.028, height RMS 0.017) on the recognition clock (content settle start = this epoch + 55 ms). Centres follow their size axis (native's first resolved frame is already at 89% width). Dark uses the light fit (dark windows were rejected)."
+        "content": "openContent: native iPad Pro 11 (2nd gen) iOS 27.0.1 .contextMenu on a chat bubble, warm-light-chat-tall (3 counter-qualified trials, native menu measurements curve fit, width RMS 0.028, height RMS 0.017) on the recognition clock (content settle start = this epoch + 55 ms). Centres follow their size axis (native's first resolved frame is already at 89% width). Dark uses the light fit (dark windows were rejected)."
     },
     "open": {
         "dark": {

package/dist/glass/lens/menuDropFit.json

@@ -1,6 +1,6 @@
 {
     "provenance": {
-        "scene": "Stock SwiftUI Menu(\"Menu selection\") in a List Section (native reference app), iPadOS 27.0, light",
+        "scene": "Native controls Menu(\"Menu selection\") in a List Section (native reference app), iPadOS 27.0, light",
         "device": "iPad Pro 12.9 (6th gen), real HID taps via WDA",
         "capture": "Native ReplayKit recording in a native reference app with a 60 Hz refresh counter (3.31% skipped refreshes, max skip 1: fit-valid, not playback-valid)",
         "method": "Platter box per refresh (blurred frame difference against the closed frame, the label's text masked), timed by the counter. Open: two cycles, normalised from a point at the drop's first centre (Satin's plain drop grows from a point) to the settled panel; frames with at least 60% of the settled mask area, the 230-450 ms settle weighted 3x. Close: platter edges read per refresh from 60 Hz tiles (+-8 px), normalised from the panel to the drop that pours back into the label.",

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

@@ -10,7 +10,7 @@ import type { MenuSourceKind } from '../regions.js';
  * The trigger's glyph and the menu's rows are ink drawn inside that glass (the ink kernel), so
  * the growing rim lenses them and no page element is scaled, blurred or clipped.
  *
- * Phone reference: iOS 27.0 iPhone 17 Pro Max Simulator, stock SwiftUI toolbar Menu
+ * Phone reference: iOS 27.0 iPhone 17 Pro Max Simulator, native toolbar menu
  * (native recording menu measurements). Times are ms after the morph's time zero:
  * native release +43 ms on open (regionScene anchors it on the trigger's release), close tap
  * +41 ms on close. Measured (native release/tap times): the pressed 48 pt button holds, dips to
@@ -25,7 +25,7 @@ import type { MenuSourceKind } from '../regions.js';
  * shape passes its button. Rows fade from the first close frame (246 → 96 in about 15 ms of
  * motion, a faint blurred copy until about +140 ms).
  *
- * Triggers that are not a circle (same Simulator, stock SwiftUI Menu from a labelled capsule
+ * Triggers that are not a circle (same Simulator, native menu from a labelled capsule
  * 129 x 50, a full-width button 400 x 50 and a toolbar group 152 x 44; phase-morph-shapes-notes.md):
  * the drop does not start as the trigger. The whole trigger glass contracts in about three frames
  * (its width to 0.71 and 0.47 of rest while its height is at 0.90 and 0.74: it shortens faster

package/dist/glass/lens/menuField.js

@@ -11,7 +11,7 @@ import { menuSpring } from './menuSpring.js';
  * The trigger's glyph and the menu's rows are ink drawn inside that glass (the ink kernel), so
  * the growing rim lenses them and no page element is scaled, blurred or clipped.
  *
- * Phone reference: iOS 27.0 iPhone 17 Pro Max Simulator, stock SwiftUI toolbar Menu
+ * Phone reference: iOS 27.0 iPhone 17 Pro Max Simulator, native toolbar menu
  * (native recording menu measurements). Times are ms after the morph's time zero:
  * native release +43 ms on open (regionScene anchors it on the trigger's release), close tap
  * +41 ms on close. Measured (native release/tap times): the pressed 48 pt button holds, dips to
@@ -26,7 +26,7 @@ import { menuSpring } from './menuSpring.js';
  * shape passes its button. Rows fade from the first close frame (246 → 96 in about 15 ms of
  * motion, a faint blurred copy until about +140 ms).
  *
- * Triggers that are not a circle (same Simulator, stock SwiftUI Menu from a labelled capsule
+ * Triggers that are not a circle (same Simulator, native menu from a labelled capsule
  * 129 x 50, a full-width button 400 x 50 and a toolbar group 152 x 44; phase-morph-shapes-notes.md):
  * the drop does not start as the trigger. The whole trigger glass contracts in about three frames
  * (its width to 0.71 and 0.47 of rest while its height is at 0.90 and 0.74: it shortens faster
@@ -456,7 +456,7 @@ const MENU_LABEL_INK = {
         lens: [[0, 0]],
     },
 };
-/** A plain glyph's drop (a Menu labelled with a bare symbol, no glass at rest): stock SwiftUI
+/** A plain glyph's drop (a Menu labelled with a bare symbol, no glass at rest): the measured platform control
  * in the iOS 27.0 Simulator, counter-retimed (menuGlyphDropFit.json). Open: the glyph vanishes on
  * the tap; the body's first frame is already 94 x 82 pt with the rows inside it, small and
  * blurred; they reach full size by +120 ms and are sharp by +154 ms. Close: the rows blur and

package/dist/glass/lens/menuGlyphDropFit.json

@@ -1,6 +1,6 @@
 {
     "provenance": {
-        "source": "plain-menu-morph native/PlainMenuRef.swift: stock SwiftUI Menu { … } label: { Image(systemName: \"ellipsis\") } (no glass), iOS 27.0 Simulator, iPhone 17 Pro Max, light; raw/pmm-light-1.mp4",
+        "source": "plain-menu-morph native/PlainMenuRef.swift: native controls Menu { … } label: { Image(systemName: \"ellipsis\") } (no glass), iOS 27.0 Simulator, iPhone 17 Pro Max, light; raw/pmm-light-1.mp4",
         "cadence": "refresh counter 58.47 Hz, skips 0.23 %, max skip 1, 0 unreadable: valid for fitting (duplicates removed by counter, times = refresh index x 17.1 ms)",
         "openOnset": "counter 1512, the refresh where the glyph disappears (the tap)",
         "closeOnset": "counter 1562, the last refresh before the open menu moves",

package/dist/glass/lens/menuMorphFit.json

@@ -1,6 +1,6 @@
 {
     "provenance": {
-        "scene": "ParityReference --menu-morph, stock SwiftUI toolbar Menu, black fixture",
+        "scene": "ParityReference --menu-morph, native controls toolbar Menu, black fixture",
         "capture": "native menu native recording",
         "contoursSha256": "548f8629dda83afa8467ced2bb0533db024468359f35f602e54febb6ba918310",
         "units": "milliseconds and normalized centerX, centerY, width, height",

package/dist/glass/lens/menuMorphPhoneFit.json

@@ -1,6 +1,6 @@
 {
     "provenance": {
-        "scene": "ParityReference toolbar-ellipsis, stock SwiftUI toolbar Menu over black (iPhone 17 Pro Max Simulator, iOS 27.0)",
+        "scene": "ParityReference toolbar-ellipsis, native controls 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).",

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

@@ -3,7 +3,7 @@ import { type FieldSpring } from '../fieldMotion.js';
  * Motion of the TabView bottom accessory between its expanded row (above the tab bar) and its
  * inline row (beside the minimized tab circle).
  *
- * Native reference: stock SwiftUI `.tabViewBottomAccessory` + `.tabBarMinimizeBehavior(.onScrollDown)`
+ * Measured bottom accessory motion during tab-bar minimization
  * with three Music-style tabs, iPhone 17 Pro Max, iOS 27.0 Simulator, counter-retimed
  * (RMS 2.6 pt collapse, 1.1 pt
  * expand). Each edge follows an underdamped spring (damping ratio about 0.72), and the two axes

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

@@ -2,7 +2,7 @@ import type { CapsuleShape } from '../renderSpecs.js';
 /**
  * The trailing Search member of a minimizing tab bar (`Tab(role: .search)` on iPhone).
  *
- * Native reference: stock SwiftUI on iOS 27.0, iPhone 17 Pro Max (search-tab-split, Simulator
+ * Native reference: native controls on iOS 27.0, iPhone 17 Pro Max (search-tab-split, Simulator
  * tracks at 60 Hz) and the owner's Apple Music recording on a physical iPhone. On collapse the
  * bar's trailing end separates into its own capsule within one or two frames: at the split it
  * spans x = 339–413 of the 21–419 bar, full height. It then narrows from its leading edge into

package/dist/glass/lens/tabSearchMember.js

@@ -1,7 +1,7 @@
 /**
  * The trailing Search member of a minimizing tab bar (`Tab(role: .search)` on iPhone).
  *
- * Native reference: stock SwiftUI on iOS 27.0, iPhone 17 Pro Max (search-tab-split, Simulator
+ * Native reference: native controls on iOS 27.0, iPhone 17 Pro Max (search-tab-split, Simulator
  * tracks at 60 Hz) and the owner's Apple Music recording on a physical iPhone. On collapse the
  * bar's trailing end separates into its own capsule within one or two frames: at the split it
  * spans x = 339–413 of the 21–419 bar, full height. It then narrows from its leading edge into

package/dist/glass/menuPresenter.js

@@ -58,7 +58,7 @@ const MENU_GLYPH_RETURN_MS = 400;
 /** Safety margin past the close morph for the renderer's settle acknowledgement. */
 const MENU_SETTLE_TIMEOUT_MS = 700;
 /** The order of a menu that opens upward: the first action nearest the trigger, so the list and
- * each section in it read bottom to top (stock SwiftUI Menu, iPhone, a trigger near the bottom of
+ * each section in it read bottom to top (native menu, iPhone, a trigger near the bottom of
  * the screen). A submenu's own rows open separately and keep their order. */
 function nearestFirst(actions) {
     return [...actions]

package/dist/glass/regions.d.ts

@@ -225,7 +225,7 @@ export declare function glassPresenterBounds(frame: GlassRegion['frame'], inset:
  * The 12M guard permits that stack plus chrome; it is not a memory benchmark. */
 export declare const GLASS_REGION_LIMIT = 16;
 export declare const GLASS_REGION_PIXEL_LIMIT = 12000000;
-/** Immutable SwiftUI-style material values. RGBA channels use the range 0...1. */
+/** Immutable glass material values. RGBA channels use the range 0...1. */
 export declare class Glass {
     static readonly regular: Glass;
     static readonly clear: Glass;

package/dist/glass/regions.js

@@ -26,7 +26,7 @@ export function glassPresenterBounds(frame, inset, emerge) {
  * The 12M guard permits that stack plus chrome; it is not a memory benchmark. */
 export const GLASS_REGION_LIMIT = 16;
 export const GLASS_REGION_PIXEL_LIMIT = 12_000_000;
-/** Immutable SwiftUI-style material values. RGBA channels use the range 0...1. */
+/** Immutable glass material values. RGBA channels use the range 0...1. */
 export class Glass {
     static regular = new Glass('regular');
     static clear = new Glass('clear');

package/dist/glass/shapeTrack.d.ts

@@ -8,7 +8,7 @@ import type { SurfaceRenderSpec } from './renderSpecs.js';
  * seems to slide and smear while nothing behind it moves (owner, Oct 13: "it looks like content is
  * moving underneath as the menu grows").
  *
- * Native Liquid Glass keeps the content behind it in place: only the edge moves. A shape track
+ * Native glass keeps the content behind it in place: only the edge moves. A shape track
  * does the same. The element keeps one layout box for the whole run (the envelope of every frame
  * the glass passes through), so its canvas never resizes or moves and samples the page where it
  * really is. The worker draws the glass at the track's frame for each frame's presentation time,

package/dist/glass/submenuMotion.d.ts

@@ -1,6 +1,6 @@
 import { type SpringParameters } from '../motion/springTrack.js';
 /**
- * Nested menus, measured from stock SwiftUI on iOS 27.0 (submenus/SPEC.md).
+ * Nested menus, measured from native controls on iOS 27.0 (submenus/SPEC.md).
  *
  * iPhone stacks each submenu over its parent: the parent shrinks to 0.97 about its top edge and
  * its rows dim to half ink, and the child grows out of the row that opened it into a full-width

package/dist/glass/submenuMotion.js

@@ -4,7 +4,7 @@ import { setGlassShapeTrack } from './shapeTrackRegistry.js';
 import { shapeTrackClock, shapeTrackEnvelope, shapeTrackFrame, } from './shapeTrack.js';
 import { springMotion, springTrack, sampledKeyframes, } from '../motion/springTrack.js';
 /**
- * Nested menus, measured from stock SwiftUI on iOS 27.0 (submenus/SPEC.md).
+ * Nested menus, measured from native controls on iOS 27.0 (submenus/SPEC.md).
  *
  * iPhone stacks each submenu over its parent: the parent shrinks to 0.97 about its top edge and
  * its rows dim to half ink, and the child grows out of the row that opened it into a full-width

package/dist/glass/webgpu/entry.worker.js

@@ -1,16 +1,13 @@
-import { WorkerFrameClock } from './frameClock.js';
+import { workerAnimationFrameClock } from './frameClock.js';
 import { glassFailureCode } from './errorCode.js';
 import { createWebGPURenderer } from './renderer.js';
 import { glassTiming, setGlassTimingSink } from './profile.js';
 setGlassTimingSink(event => globalThis.postMessage({ glassProfile: event }));
 glassTiming('worker-start');
-const clock = new WorkerFrameClock(message => globalThis.postMessage(message));
+const clock = workerAnimationFrameClock;
 const renderer = createWebGPURenderer(message => globalThis.postMessage(message), clock);
 globalThis.onmessage = event => {
-    if (event.data.request?.type === 'page-frame')
-        clock.receive(event.data.request);
-    else
-        renderer.receive(event);
+    renderer.receive(event);
 };
 globalThis.addEventListener('error', event => globalThis.postMessage({
     glassError: {

package/dist/glass/webgpu/frameClock.d.ts

@@ -1,18 +1,22 @@
 import type { Envelope } from '../worker/protocol.js';
 /** Epoch milliseconds from the document's animation frame, shared with WAAPI. */
 export interface FrameClock {
+    readonly kind?: 'page-raf' | 'worker-raf';
     request(callback: (at: number) => void): number;
     cancel(token: number): void;
 }
 export declare const documentFrameClock: FrameClock;
+/** A retained worker timeline can sample without a page callback or message round trip.
+ * Both realms use epoch milliseconds, so the same WAAPI track remains the time authority. */
+export declare const workerAnimationFrameClock: FrameClock;
 type FrameRequest = {
     glassFrame: {
         token: number;
         cancel?: boolean;
     };
 };
-/** The experimental worker renderer asks the page for one frame at a time.
- * Worker rAF can run faster than the page and is not a presentation clock. */
+/** Page-linked worker clock retained for diagnostic comparisons. Its round trip
+ * also inherits page stalls; the independent worker renderer does not use it. */
 export declare class WorkerFrameClock implements FrameClock {
     private sequence;
     private pending?;

package/dist/glass/webgpu/frameClock.js

@@ -1,9 +1,16 @@
 export const documentFrameClock = {
+    kind: 'page-raf',
     request: callback => requestAnimationFrame(timestamp => callback(performance.timeOrigin + timestamp)),
     cancel: token => cancelAnimationFrame(token),
 };
-/** The experimental worker renderer asks the page for one frame at a time.
- * Worker rAF can run faster than the page and is not a presentation clock. */
+/** A retained worker timeline can sample without a page callback or message round trip.
+ * Both realms use epoch milliseconds, so the same WAAPI track remains the time authority. */
+export const workerAnimationFrameClock = {
+    ...documentFrameClock,
+    kind: 'worker-raf',
+};
+/** Page-linked worker clock retained for diagnostic comparisons. Its round trip
+ * also inherits page stalls; the independent worker renderer does not use it. */
 export class WorkerFrameClock {
     sequence = 0;
     pending;

package/dist/glass/webgpu/frameProbe.d.ts

@@ -44,7 +44,7 @@ export declare class FrameProbe {
     private post;
     constructor(post: (summary: FrameSummary[]) => void);
     get timestampQuery(): boolean;
-    useDevice(device: GPUDevice | undefined): void;
+    useDevice(device: GPUDevice | undefined, gpuTiming?: boolean): void;
     /** Wraps one frame's encoding and submission. Returns the frame's sample: its completion and
      * GPU times are filled in when they arrive. */
     frame(kind: FrameKind, interval: number | null, restart: boolean, encode: (e: GPUCommandEncoder) => void, canSubmit?: () => boolean): FrameProbeSample | undefined;

package/dist/glass/webgpu/frameProbe.js

@@ -78,12 +78,12 @@ export class FrameProbe {
         this.post = post;
     }
     get timestampQuery() {
-        return !!this.device?.features.has('timestamp-query');
+        return !!this.timer;
     }
-    useDevice(device) {
+    useDevice(device, gpuTiming = true) {
         this.device = device;
         this.timer = undefined;
-        if (device?.features.has('timestamp-query'))
+        if (gpuTiming && device?.features.has('timestamp-query'))
             try {
                 this.timer = new GPUFrameTimer(device);
             }

package/dist/glass/webgpu/production.js

@@ -385,6 +385,10 @@ export class ProductionGlassRuntime {
             element.style.cssText =
                 'position:absolute;inset:0;overflow:visible;clip-path:none;transform:none';
         this.canvas.style.cssText = `position:absolute;left:0;top:0;width:${geometry.width}px;height:${geometry.height}px;pointer-events:none`;
+        if (!this.client.documentOwned) {
+            this.canvas.style.objectFit = 'contain';
+            this.canvas.style.objectPosition = 'left bottom';
+        }
         this.canvas.dataset.satinWebgpu = 'production';
         // Chrome canvases start as one pixel; each preparation places them on the band their surfaces
         // reach. A remount (geometry change, rebind) keeps the band the worker is drawing for until the

package/dist/glass/webgpu/raster.d.ts

@@ -37,6 +37,19 @@ export declare class WebGPURaster {
     private overlayPipeline;
     private presentPipeline;
     private format;
+    private presentationRoot?;
+    private presentationOrigin?;
+    private presentationMembers;
+    private presentationSequence?;
+    private collectingPresentation;
+    /** Member samples encode their materials first. The root then presents the whole frame once. */
+    withSharedPresentation(draw: () => void): void;
+    /** Retain independent material sampling, but store overlapping fixed chrome once. */
+    joinPresentation(root: WebGPURaster, origin: {
+        x: number;
+        y: number;
+    }): void;
+    leavePresentation(): void;
     private lost;
     private suspended;
     private covered;
@@ -172,8 +185,10 @@ export declare class WebGPURaster {
      * region presenter's layer already is its sample rectangle and keeps layer space. */
     private localResult;
     /** Device-pixel offset of this layer's canvas within its layer. */
+    private presentationViewport;
     private canvasOffset;
     private canvasSize;
+    private resizeCanvas;
     /** Size the shared layer canvas to a band of its layer (the element is placed there by
      * the page): a lift overlay presents a strip, not a second full-screen canvas. */
     setCanvasViewport(viewport: readonly [number, number, number, number] | undefined): void;
@@ -201,6 +216,9 @@ export declare class WebGPURaster {
      * Returns false, drawing nothing, when the canvas already shows exactly this (see
      * `presentedLayers`): the same results at the same places, or nothing at all. */
     static presentLayer(encoder: GPUCommandEncoder, rasters: readonly WebGPURaster[]): boolean;
+    private presentationOffset;
+    private groupPresentUniform;
+    private groupPresentScissor;
     private presentDraw;
     /** Scroll-attached glass is part of the scrolling content, and the navigation bar's scroll-edge
      * effect is painted over that content (CSS, a layer above the scroll container). Its own

package/dist/glass/webgpu/raster.js

@@ -96,6 +96,48 @@ export class WebGPURaster {
     overlayPipeline;
     presentPipeline;
     format = 'rgba8unorm';
+    presentationRoot;
+    presentationOrigin;
+    presentationMembers = new Set();
+    presentationSequence;
+    collectingPresentation = false;
+    /** Member samples encode their materials first. The root then presents the whole frame once. */
+    withSharedPresentation(draw) {
+        this.collectingPresentation = true;
+        try {
+            draw();
+        }
+        finally {
+            this.collectingPresentation = false;
+        }
+    }
+    /** Retain independent material sampling, but store overlapping fixed chrome once. */
+    joinPresentation(root, origin) {
+        if (this.presentationRoot === root) {
+            this.presentationOrigin = origin;
+            if (root.setup)
+                root.resizeCanvas();
+            return;
+        }
+        if (this.setup)
+            this.clear();
+        this.presentationRoot?.presentationMembers.delete(this);
+        this.presentationRoot = root;
+        this.presentationOrigin = origin;
+        root.presentationMembers.add(this);
+        if (root.setup)
+            root.resizeCanvas();
+        root.forgetPresent();
+    }
+    leavePresentation() {
+        const root = this.presentationRoot;
+        root?.presentationMembers.delete(this);
+        if (root?.setup)
+            root.resizeCanvas();
+        root?.forgetPresent();
+        this.presentationRoot = undefined;
+        this.presentationOrigin = undefined;
+    }
     lost = false;
     suspended = false;
     covered = false;
@@ -152,6 +194,8 @@ export class WebGPURaster {
         this.setup = { ...this.setup, appearance, spec: retainedAppearanceSpec(spec, appearance) };
     }
     dispose() {
+        this.presentationRoot?.presentationMembers.delete(this);
+        this.presentationRoot?.forgetPresent();
         this.unsubscribe?.();
         this.release();
         this.passes.destroy();
@@ -571,7 +615,13 @@ export class WebGPURaster {
         const encoder = this.device?.createCommandEncoder();
         if (!encoder || !this.encodeResult(encoder, x))
             return;
-        this.custom(encoder, this.presentPipeline, drawable(this.context, 'single', encoder).createView(), this.presentUniform(), [this.targets.result], !clear, this.presentScissor(), [this.canvas.width, this.canvas.height]);
+        if (this.presentationRoot) {
+            const root = this.presentationRoot;
+            if (!root.collectingPresentation && root.targets.result)
+                WebGPURaster.presentLayer(encoder, root.presentationSequence ?? [root]);
+        }
+        else
+            this.custom(encoder, this.presentPipeline, drawable(this.context, 'single', encoder).createView(), this.presentUniform(), [this.targets.result], !clear, this.presentScissor(), [this.canvas.width, this.canvas.height]);
         if (this.timing) {
             encoder.resolveQuerySet(this.timing.queries, 0, 2, this.timing.resolve, 0);
             encoder.copyBufferToBuffer(this.timing.resolve, 0, this.timing.read, 0, 16);
@@ -601,18 +651,34 @@ export class WebGPURaster {
      * region presenter's layer already is its sample rectangle and keeps layer space. */
     localResult = false;
     /** Device-pixel offset of this layer's canvas within its layer. */
-    canvasOffset() {
+    presentationViewport() {
         const viewport = canvasViewports.get(this.canvas);
+        if (!viewport || !this.setup || !this.presentationMembers.size)
+            return viewport;
+        // The placeholder keeps its original band. object-fit:contain, aligned to the
+        // bottom, lets the worker omit transparent rows above all retained morph bounds.
+        const top = Math.max(viewport[1], Math.floor(Math.min(this.setup.spec.frameY - 64, ...[...this.presentationMembers].map(member => member.presentationOrigin.y))));
+        return [viewport[0], top, viewport[2], viewport[1] + viewport[3] - top];
+    }
+    canvasOffset() {
+        const viewport = this.presentationViewport();
         const resolution = this.setup.resolution;
         return viewport ? [viewport[0] * resolution, viewport[1] * resolution] : [0, 0];
     }
     canvasSize() {
-        const viewport = canvasViewports.get(this.canvas);
+        const viewport = this.presentationViewport();
         const { resolution, width, height } = this.setup;
         return viewport
             ? [Math.round(viewport[2] * resolution), Math.round(viewport[3] * resolution)]
             : [Math.round(width * resolution), Math.round(height * resolution)];
     }
+    resizeCanvas() {
+        const [width, height] = this.canvasSize();
+        if (this.canvas.width !== width)
+            this.canvas.width = width;
+        if (this.canvas.height !== height)
+            this.canvas.height = height;
+    }
     /** Size the shared layer canvas to a band of its layer (the element is placed there by
      * the page): a lift overlay presents a strip, not a second full-screen canvas. */
     setCanvasViewport(viewport) {
@@ -694,20 +760,21 @@ export class WebGPURaster {
      * `presentedLayers`): the same results at the same places, or nothing at all. */
     static presentLayer(encoder, rasters) {
         const root = rasters[0];
-        const visible = rasters.filter(raster => !raster.resultEmpty);
+        root.presentationSequence = rasters;
+        const visible = [...new Set([...rasters, ...root.presentationMembers])].filter(raster => !raster.resultEmpty && !!raster.targets.result && !raster.covered && !raster.suspended);
         const signature = JSON.stringify([
             root.canvas.width,
             root.canvas.height,
             visible.map(raster => [
                 raster.resultOwner,
                 raster.resultRevision,
-                raster.presentUniform(),
-                raster.presentScissor(),
+                raster.groupPresentUniform(root),
+                raster.groupPresentScissor(root),
             ]),
         ]);
         if (presentedLayers.get(root.canvas) === signature)
             return false;
-        const draws = visible.map(raster => raster.presentDraw());
+        const draws = visible.map(raster => raster.presentDraw(root));
         const size = [root.canvas.width, root.canvas.height];
         encodePass(encoder, {
             colorAttachments: [
@@ -734,8 +801,35 @@ export class WebGPURaster {
         presentedLayers.set(root.canvas, signature);
         return true;
     }
-    presentDraw() {
-        const buffer = this.passes.uniform(new Float32Array(this.presentUniform()));
+    presentationOffset(root) {
+        if (this.presentationRoot !== root || !this.presentationOrigin)
+            return [0, 0];
+        const resolution = this.setup.resolution;
+        const [x, y] = this.canvasOffset();
+        const [rootX, rootY] = root.canvasOffset();
+        return [
+            this.presentationOrigin.x * resolution + x - rootX,
+            this.presentationOrigin.y * resolution + y - rootY,
+        ];
+    }
+    groupPresentUniform(root) {
+        const values = this.presentUniform();
+        const [x, y] = this.presentationOffset(root);
+        values[0] += x;
+        values[1] += y;
+        values[8] += x;
+        values[9] += y;
+        return values;
+    }
+    groupPresentScissor(root) {
+        const rect = this.presentScissor();
+        if (!rect)
+            return rect;
+        const [x, y] = this.presentationOffset(root);
+        return [rect[0] + x, rect[1] + y, rect[2], rect[3]];
+    }
+    presentDraw(root) {
+        const buffer = this.passes.uniform(new Float32Array(this.groupPresentUniform(root)));
         const group = this.device.createBindGroup({
             layout: this.presentPipeline.getBindGroupLayout(0),
             entries: [
@@ -744,7 +838,7 @@ export class WebGPURaster {
                 { binding: 2, resource: viewOf(this.targets.result.texture) },
             ],
         });
-        return { raster: this, group, rect: this.presentScissor() };
+        return { raster: this, group, rect: this.groupPresentScissor(root) };
     }
     /** Scroll-attached glass is part of the scrolling content, and the navigation bar's scroll-edge
      * effect is painted over that content (CSS, a layer above the scroll container). Its own
@@ -946,11 +1040,7 @@ export class WebGPURaster {
         const setup = this.setup;
         const { spec, appearance, resolution } = setup;
         const targets = this.targets;
-        const [canvasWidth, canvasHeight] = this.canvasSize();
-        if (this.canvas.width !== canvasWidth)
-            this.canvas.width = canvasWidth;
-        if (this.canvas.height !== canvasHeight)
-            this.canvas.height = canvasHeight;
+        this.resizeCanvas();
         const sampleRect = this.sampleRectangle();
         this.presentRect = sampleRect;
         // Result space = layer space shifted by an integer pixel origin, so every kernel

package/dist/glass/webgpu/rasterMaterial.d.ts

@@ -13,6 +13,10 @@ export declare function usesBarKernel(spec: ResultLayout['spec']): boolean;
  * its accessory, toolbar and glass buttons. Menus and presentation treatments keep the chained
  * pyramid their materials were fitted on. */
 export declare function usesAreaMips(spec: ResultLayout['spec']): boolean;
+/** The tab material does not paint its 128 pt backdrop overscan. Keep a generous
+ * 64 pt output margin around every capsule; the fitted bar shadow has radius 4 pt
+ * and offset 8 pt. The source and blur pyramid still retain their full sample area. */
+export declare function tabMaterialBounds(spec: ResultLayout['spec']): number[] | undefined;
 export declare function encodeMaterial(encoder: GPUCommandEncoder, passes: Passes, targets: Record<string, Target>, layout: ResultLayout, material: Values): void;
 /** The tab bar's selection pill (native selection recipe) and, while the pill lifts, its lens,
  * over a composed scratch of the backdrop and the bar material. */

package/dist/glass/webgpu/rasterMaterial.js

@@ -25,9 +25,25 @@ export function usesBarKernel(spec) {
 export function usesAreaMips(spec) {
     return usesBarKernel(spec);
 }
+/** The tab material does not paint its 128 pt backdrop overscan. Keep a generous
+ * 64 pt output margin around every capsule; the fitted bar shadow has radius 4 pt
+ * and offset 8 pt. The source and blur pyramid still retain their full sample area. */
+export function tabMaterialBounds(spec) {
+    if (!spec.tabSelection || spec.materialProfile !== 'chrome' || spec.treatment)
+        return undefined;
+    const members = spec.shape.members?.length
+        ? spec.shape.members
+        : [spec.shape.first, ...(spec.shape.second ? [spec.shape.second] : [])];
+    const margin = 64 + (Math.max(0, spec.shape.blendRadius) * (members.length - 1)) / 4;
+    const left = Math.min(...members.map(s => s.centerX - s.halfWidth)) + spec.sampleInsetX - margin;
+    const right = Math.max(...members.map(s => s.centerX + s.halfWidth)) + spec.sampleInsetX + margin;
+    const top = Math.min(...members.map(s => s.centerY - s.halfHeight)) + spec.sampleInsetY - margin;
+    const bottom = Math.max(...members.map(s => s.centerY + s.halfHeight)) + spec.sampleInsetY + margin;
+    return [left, top, right - left, bottom - top];
+}
 export function encodeMaterial(encoder, passes, targets, layout, material) {
     const { spec, appearance, resolution, sampleWidth, sampleHeight } = layout;
-    const fieldBounds = morphFieldSampleBounds(spec);
+    const fieldBounds = tabMaterialBounds(spec) ?? morphFieldSampleBounds(spec);
     const fieldScissor = fieldBounds?.map(value => value * resolution);
     const first = spec.shape.first;
     if (spec.treatment === 'contextBackdrop' || spec.treatment === 'contextPreview') {