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

package/dist/glass/webgpu/scrollEdgeBackdrop.js

@@ -0,0 +1,177 @@
+import { atRest, presentationTravel } from '../presentationFrame.js';
+import { zoomGlassMotion, zoomRestRect } from '../../navigation/zoomGlass.js';
+/* The bar's material (styles.css [data-satin-scroll-edge]): one uniform blur and tint ending in
+ * a hard edge at the bottom of the bar row, whose last 2 pt only anti-alias it. iOS 27 native reference
+ * edge-* stripes, iPhone and iPad: light over black luma 140, dark over white 104, 8 pt stripes
+ * keep 0.11 contrast (the implementation contract). */
+export const SCROLL_EDGE_MATERIAL = {
+    light: { sigma: 4.5, tint: [1, 1, 1, 0.55] },
+    dark: { sigma: 4.5, tint: [0, 0, 0, 0.59] },
+};
+export const SCROLL_EDGE_FADE_PT = 2;
+/** The cap (styles.css [data-satin-scroll-edge-cap]) keeps the band colour through the status band,
+ * then fades out over the resting seam's 28 pt. The renderer approximates that eased fade linearly. */
+export const SCROLL_EDGE_CAP_FADE_PT = 28;
+/** Native searchable header fit, iOS 27.0 24A434, dark-glass/native-visible-edge-fit*.json.
+ * These are search-specific; the bar material above does not apply to them. */
+export const SEARCH_HEADER_MATERIAL = {
+    light: { sigma: 1.75, tint: [1, 1, 1, 0.55] },
+    dark: { sigma: 1.5, tint: [0, 0, 0, 0.64] },
+};
+/** Native field RGB against the material bar face matrix, three avatar colors through the rendered operator.
+ * Attenuate the input before the bar operator so its neutral floor remains intact
+ * and saturated channels are not clipped before attenuation. Empirical fit RMS 2.58 / 255; see the implementation contract */
+export const SEARCH_FIELD_DARK_TRANSMISSION = 0.8456002308235339;
+/** A pinned plain-list header's hard-edged material (styles.css,
+ * [data-satin-section-header-pinned]). Light's brightness(1.2) has no tint equivalent; 56% white
+ * reproduces its result on mid-tone content. */
+export const PINNED_HEADER_MATERIAL = {
+    light: { sigma: 6, tint: [1, 1, 1, 0.56] },
+    dark: { sigma: 6, tint: [0, 0, 0, 0.55] },
+};
+/** Visible scroll-edge layers in `root`, in viewport coordinates. */
+export function readScrollEdges(root, dark, routes = []) {
+    const material = SCROLL_EDGE_MATERIAL[dark ? 'dark' : 'light'];
+    const edges = [];
+    const origins = routes.map(route => {
+        if (zoomGlassMotion(route.motion) || zoomGlassMotion(route.screen))
+            return 0;
+        const parentX = route.screen.parentElement?.getBoundingClientRect().x ?? 0;
+        return (route.motion.getBoundingClientRect().x -
+            parentX -
+            route.screen.offsetLeft -
+            route.motion.offsetLeft);
+    });
+    for (const edge of root.querySelectorAll('[data-satin-scroll-edge]')) {
+        if (edge.getAttribute('data-satin-scroll-edge-visible') !== 'true' ||
+            !edge.getClientRects().length)
+            continue;
+        const host = edge.parentElement;
+        if (!host)
+            continue;
+        // A sheet's bars are read in the sheet's resting frame, like its glass (presentationFrame.ts).
+        const travel = presentationTravel(edge);
+        const box = zoomRestRect(edge) ?? atRest(edge.getBoundingClientRect(), travel);
+        const strength = edge.style.opacity === '' ? 1 : Number(edge.style.opacity);
+        if (!(strength > 0) || box.width <= 0 || box.height <= 0)
+            continue;
+        const cap = host.querySelector('[data-satin-scroll-edge-cap]');
+        const capBox = cap && (zoomRestRect(cap) ?? atRest(cap.getBoundingClientRect(), travel));
+        const capColor = capBox && capBox.height > 0 && cap
+            ? getComputedStyle(cap).backgroundColor.match(/^rgba?\(([^)]+)\)$/)
+            : undefined;
+        const channels = capColor?.[1]
+            ?.split(/[\s,/]+/)
+            .filter(Boolean)
+            .map(Number);
+        const topFill = capBox && capBox.height > 0 && channels && channels.length >= 3
+            ? {
+                color: [
+                    channels[0] / 255,
+                    channels[1] / 255,
+                    channels[2] / 255,
+                    channels[3] ?? 1,
+                ],
+                solid: capBox.y + capBox.height - SCROLL_EDGE_CAP_FADE_PT,
+                end: capBox.y + capBox.height,
+            }
+            : undefined;
+        const screen = host.hasAttribute('data-satin-transition-edge')
+            ? host.closest('[data-satin-screen-container]')
+            : null;
+        const routeIndex = routes.findIndex(route => route.screen === screen);
+        const route = routes[routeIndex];
+        const parent = screen?.parentElement;
+        const layoutX = parent && screen ? parent.getBoundingClientRect().x + screen.offsetLeft : box.x;
+        const translation = origins[routeIndex] ?? 0;
+        const navigation = route && screen
+            ? {
+                route: routeIndex,
+                origins,
+                clip: [layoutX, layoutX + screen.offsetWidth],
+                covers: routes.flatMap((candidate, index) => index > routeIndex && candidate.screen.dataset.satinPane === screen.dataset.satinPane
+                    ? [index]
+                    : []),
+            }
+            : undefined;
+        const searchable = edge.hasAttribute('data-satin-scroll-edge-search');
+        // CSS includes any fitted title reservation in the edge rectangle, so its resolved bottom is
+        // the bar row's bottom.
+        const treatment = searchable ? SEARCH_HEADER_MATERIAL[dark ? 'dark' : 'light'] : material;
+        edges.push({
+            rect: [box.x - translation, box.y, box.width, box.height],
+            ...(navigation ? { navigation } : {}),
+            solid: box.y + box.height - (searchable ? 0 : SCROLL_EDGE_FADE_PT),
+            sigma: treatment.sigma,
+            tint: treatment.tint,
+            strength: Math.min(1, strength),
+            ...(topFill ? { cap: topFill } : {}),
+        });
+    }
+    // The search drawer's edge (styles.css [data-satin-search-edge]::before) is CSS as well. Native's
+    // field refracts the blurred content under it; without this the field's glass sampled the raw
+    // content and showed it sharp inside the field (reference dark resting edge). At rest only: during
+    // push/pop the transition owns the bar and its edges.
+    if (!routes.length)
+        edges.push(...readSearchEdges(root, dark));
+    // While a plain-list header is pinned, its material stands in for the bar's edge.
+    const pinned = PINNED_HEADER_MATERIAL[dark ? 'dark' : 'light'];
+    for (const header of root.querySelectorAll("[data-satin-section-header-pinned='true']")) {
+        const box = header.getBoundingClientRect();
+        const reach = Number.parseFloat(header.style.getPropertyValue('--satin-pinned-header-reach'));
+        const top = box.top - (Number.isFinite(reach) ? reach : 0);
+        if (box.width <= 0 || box.bottom <= top)
+            continue;
+        edges.push({
+            rect: [box.x, top, box.width, box.bottom - top],
+            solid: box.bottom,
+            sigma: pinned.sigma,
+            tint: pinned.tint,
+            strength: 1,
+        });
+    }
+    return edges;
+}
+/** The field's input diffusion follows the searchable header. Its dark transmission is
+ * a separate native material response; it is not the DOM edge's position-dependent tint.
+ * Presented search retains its earlier fit until it has a matched native capture. */
+function readSearchEdges(root, dark) {
+    const edges = [];
+    for (const marker of root.querySelectorAll('[data-satin-search-edge]')) {
+        if (!marker.getClientRects().length)
+            continue;
+        const before = getComputedStyle(marker, '::before');
+        const strength = Number(before.opacity);
+        const top = Number.parseFloat(before.top), height = Number.parseFloat(before.height);
+        const filter = before.backdropFilter || before.getPropertyValue('-webkit-backdrop-filter');
+        const sigma = Number.parseFloat(/blur\(([\d.]+)px\)/.exec(filter)?.[1] ?? '');
+        const channels = before.backgroundColor
+            .match(/^rgba?\(([^)]+)\)$/)?.[1]
+            ?.split(/[\s,/]+/)
+            .filter(Boolean)
+            .map(Number);
+        if (!(strength > 0) || !(height > 0) || !Number.isFinite(sigma) || !channels)
+            continue;
+        if (channels.length < 3 || !channels.every(Number.isFinite))
+            continue;
+        const box = atRest(marker.getBoundingClientRect(), presentationTravel(marker));
+        const y = box.y + top;
+        const presented = marker.parentElement?.hasAttribute('data-satin-search-presented');
+        const pinnedHeader = marker.hasAttribute('data-satin-search-edge-covered') && !presented;
+        const end = pinnedHeader ? (dark ? 53 : 51) : presented ? Math.min(height, 103) : height;
+        edges.push({
+            search: true,
+            rect: [box.x, y, box.width, end],
+            solid: pinnedHeader ? y + 48 : presented ? y + 13 : y + height - 22,
+            sigma,
+            tint: [
+                channels[0] / 255,
+                channels[1] / 255,
+                channels[2] / 255,
+                pinnedHeader && dark ? 1 - SEARCH_FIELD_DARK_TRANSMISSION : 0,
+            ],
+            strength: Math.min(1, strength),
+        });
+    }
+    return edges;
+}

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

@@ -0,0 +1,4 @@
+import type { ScrollEdge } from './scrollEdgeBackdrop.js';
+import type { NavigationPose } from './productionTracks.js';
+/** Apply the resident navigation pose and front-page occlusion without reading DOM per frame. */
+export declare function poseScrollEdges(edges: readonly ScrollEdge[], pose?: NavigationPose): ScrollEdge[];

package/dist/glass/webgpu/scrollEdgePose.js

@@ -0,0 +1,49 @@
+/** Apply the resident navigation pose and front-page occlusion without reading DOM per frame. */
+export function poseScrollEdges(edges, pose) {
+    return edges.flatMap(edge => {
+        const navigation = edge.navigation;
+        if (!navigation)
+            return [edge];
+        const zoom = pose?.routes?.[navigation.route]?.zoom;
+        if (zoom) {
+            const y = (value) => zoom.y + (value - zoom.origin[1]) * zoom.scale;
+            const left = Math.max(zoom.x + (edge.rect[0] - zoom.origin[0]) * zoom.scale, zoom.clip[0]);
+            const top = Math.max(y(edge.rect[1]), zoom.clip[1]);
+            const right = Math.min(zoom.x + (edge.rect[0] + edge.rect[2] - zoom.origin[0]) * zoom.scale, zoom.clip[0] + zoom.clip[2]);
+            const bottom = Math.min(y(edge.rect[1] + edge.rect[3]), zoom.clip[1] + zoom.clip[3]);
+            if (right <= left || bottom <= top)
+                return [];
+            return [
+                {
+                    ...edge,
+                    rect: [left, top, right - left, bottom - top],
+                    solid: y(edge.solid),
+                    sigma: edge.sigma * zoom.scale,
+                    mask: edge.mask?.map(([position, alpha]) => [y(position), alpha]),
+                    cap: edge.cap
+                        ? { ...edge.cap, solid: y(edge.cap.solid), end: y(edge.cap.end) }
+                        : undefined,
+                    zoomClip: { rect: zoom.clip, radius: zoom.radius },
+                    zoomOcclusions: navigation.covers.flatMap(index => {
+                        const cover = pose?.routes?.[index]?.zoom;
+                        return cover ? [{ rect: cover.clip, radius: cover.radius }] : [];
+                    }),
+                },
+            ];
+        }
+        const routeX = pose?.routes?.[navigation.route]?.x ?? navigation.origins[navigation.route];
+        if (routeX === undefined)
+            return [];
+        const x = edge.rect[0] + routeX;
+        const left = Math.max(x, navigation.clip[0]);
+        let right = Math.min(x + edge.rect[2], navigation.clip[1]);
+        for (const index of navigation.covers) {
+            const frontX = pose?.routes?.[index]?.x ?? navigation.origins[index];
+            if (frontX !== undefined)
+                right = Math.min(right, navigation.clip[0] + frontX);
+        }
+        if (right <= left)
+            return [];
+        return [{ ...edge, rect: [left, edge.rect[1], right - left, edge.rect[3]] }];
+    });
+}

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

@@ -0,0 +1,81 @@
+import type { GlassInteraction } from '../rendererContract.js';
+import type { GlassRegion } from '../regions.js';
+import type { GlassTouchLight, SurfaceRenderSpec, TabSelectionShape } from '../renderSpecs.js';
+import { TabMotion } from '../lens/tabMotion.js';
+import { InteractivePress } from '../lens/interactivePress.js';
+import { InteractiveContact } from '../lens/interactiveContact.js';
+type Selection = NonNullable<GlassRegion['selection']>;
+type Frame = GlassRegion['frame'];
+/**
+ * The selection thumb of a segmented glass region (the search scope bar). It is the tab bar's
+ * thumb: one TabMotion presses, follows the finger, stretches, snaps to the nearest segment and
+ * slides between segments, with the scope bar's parameters (SCOPE_THUMB_MOTION, SCOPE_THUMB_HELD).
+ * The page's finger arrives as glass interactions; a selection the page changes without a finger
+ * (a tap's click, keyboard, VoiceOver, the app) slides the thumb the same way.
+ *
+ * A press anywhere on the bar also presses the bar itself, with the interactive glass press
+ * (GLASS_CONTACT_PHYSICS.segmented): the bar grows wider, its pill and labels grow with it, and it
+ * lights under the finger.
+ */
+export declare class SelectionThumb {
+    readonly motion: TabMotion;
+    /** The bar's press growth (0 rest, 1 held) and its light under the finger. */
+    readonly press: InteractivePress;
+    readonly contact: InteractiveContact;
+    /** The light under the finger at the last sample. */
+    touchLight?: GlassTouchLight;
+    /** When the current press began and ended (the press light's clock). */
+    pressedAt?: number;
+    releasedAt?: number;
+    /** The segment the thumb is heading to: the page's selection once it catches up. */
+    private target;
+    private geometry;
+    constructor(frame: Frame, selection: Selection);
+    /** Keeps the motion's segments on the region's current size and count. */
+    configure(frame: Frame, selection: Selection): void;
+    /** The page selected `index` (after a tap, or programmatically). A drag's release already
+     * headed there, so only a different segment starts a slide. */
+    select(index: number, now: number, reducedMotion: boolean): void;
+    /** The finger, in region-local CSS px. A cancelled contact returns to the page's selection.
+     * Only a press on the selected segment grabs the thumb: native holds the pill in place under a
+     * press on another segment (that press dims its label and selects on release, as a tap). */
+    input(input: GlassInteraction, reducedMotion: boolean): void;
+    /** The bar's own press: growth on the shared press spring, light from the contact. */
+    private pressBar;
+    /** Whether the thumb still moves, the bar is still pressed or its light still fades. */
+    live(at: number): boolean;
+    sample(at: number, reducedMotion: boolean, appearance: 'light' | 'dark'): void;
+    /** The region's spec with the thumb where the motion has it. The resting pill gives way to the
+     * lift overlay's lens as the press rises (the tab bar's `restMix`). */
+    pose(spec: SurfaceRenderSpec, selection: Selection): SurfaceRenderSpec;
+    /** The lift overlay's lens: the tab selection's lens over the composed bar. */
+    lift(): {
+        amount: number;
+        source: 'composed';
+        optics: Readonly<{
+            lightingLight?: import("../lens/lensPress.js").LensLighting;
+            lightingDark?: import("../lens/lensPress.js").LensLighting;
+            lensLight?: readonly [number, number, number, number];
+            lensDark?: readonly [number, number, number, number];
+            backgroundWarpPt: number;
+            foregroundChroma: number;
+            foregroundScaleX: number;
+            foregroundScaleY: number;
+            foregroundLabelScaleX: number;
+            foregroundLabelScaleY: number;
+            motionMix: number;
+            rimGradient: number;
+            travelWarpPt: number;
+        }>;
+    };
+}
+/** The resting selection pass of a segmented region: the native pill at `selection.index`. The
+ * labels are the region's foreground ink (selectionInk), one glyph anchor per end segment. */
+export declare function selectionPill(spec: SurfaceRenderSpec, selection: Selection): TabSelectionShape;
+/**
+ * The pressed scope bar (native: 400 → 416 pt wide, 36 pt tall throughout). The glass grows wider
+ * but not taller; the pill and the labels (the region's ink) grow by the same scale about the
+ * bar's centre, as one piece of content. `amount` is the press (0 rest, 1 held).
+ */
+export declare function pressedBar(spec: SurfaceRenderSpec, amount: number): SurfaceRenderSpec;
+export {};

package/dist/glass/webgpu/selectionThumb.js

@@ -0,0 +1,209 @@
+import { SCOPE_THUMB_HELD, SCOPE_THUMB_MOTION } from '../lens/controlLift.js';
+import { SCOPE_THUMB, segmentCentres } from '../lens/scopeSegments.js';
+import { TabMotion } from '../lens/tabMotion.js';
+import { InteractivePress, interactivePressScale } from '../lens/interactivePress.js';
+import { InteractiveContact } from '../lens/interactiveContact.js';
+import { GLASS_CONTACT_PHYSICS } from '../contactPhysics.js';
+import { stableTabSelection } from '../lens/tabSelectionMaterial.js';
+/**
+ * The selection thumb of a segmented glass region (the search scope bar). It is the tab bar's
+ * thumb: one TabMotion presses, follows the finger, stretches, snaps to the nearest segment and
+ * slides between segments, with the scope bar's parameters (SCOPE_THUMB_MOTION, SCOPE_THUMB_HELD).
+ * The page's finger arrives as glass interactions; a selection the page changes without a finger
+ * (a tap's click, keyboard, VoiceOver, the app) slides the thumb the same way.
+ *
+ * A press anywhere on the bar also presses the bar itself, with the interactive glass press
+ * (GLASS_CONTACT_PHYSICS.segmented): the bar grows wider, its pill and labels grow with it, and it
+ * lights under the finger.
+ */
+export class SelectionThumb {
+    motion = new TabMotion(SCOPE_THUMB_MOTION, SCOPE_THUMB_HELD);
+    /** The bar's press growth (0 rest, 1 held) and its light under the finger. */
+    press = new InteractivePress();
+    contact = new InteractiveContact(GLASS_CONTACT_PHYSICS.segmented);
+    /** The light under the finger at the last sample. */
+    touchLight;
+    /** When the current press began and ended (the press light's clock). */
+    pressedAt;
+    releasedAt;
+    /** The segment the thumb is heading to: the page's selection once it catches up. */
+    target = 0;
+    geometry = '';
+    constructor(frame, selection) {
+        this.configure(frame, selection);
+        this.motion.reset(selection.index);
+        this.target = selection.index;
+    }
+    /** Keeps the motion's segments on the region's current size and count. */
+    configure(frame, selection) {
+        const geometry = [frame.width, frame.height, selection.count].join(',');
+        if (geometry === this.geometry)
+            return;
+        this.geometry = geometry;
+        const segment = (frame.width - 2 * SCOPE_THUMB.inset) / Math.max(1, selection.count);
+        this.motion.configure(segmentCentres(frame.width, selection.count), segment, SCOPE_THUMB.height, frame.width, {
+            selected: this.target,
+            centerY: frame.height / 2,
+            parameters: SCOPE_THUMB_MOTION,
+            heldGeometry: SCOPE_THUMB_HELD,
+        });
+    }
+    /** The page selected `index` (after a tap, or programmatically). A drag's release already
+     * headed there, so only a different segment starts a slide. */
+    select(index, now, reducedMotion) {
+        if (index === this.target)
+            return;
+        this.target = index;
+        if (reducedMotion)
+            this.motion.reset(index);
+        else
+            this.motion.select(index, now);
+    }
+    /** The finger, in region-local CSS px. A cancelled contact returns to the page's selection.
+     * Only a press on the selected segment grabs the thumb: native holds the pill in place under a
+     * press on another segment (that press dims its label and selects on release, as a tap). */
+    input(input, reducedMotion) {
+        this.pressBar(input, reducedMotion);
+        const x = input.contact?.x;
+        if (input.phase === 'rest' || reducedMotion) {
+            this.motion.reset(this.target);
+            return;
+        }
+        if (input.phase === 'pressed' && x !== undefined) {
+            if (this.motion.nearest(x) === this.target)
+                this.motion.down(x, this.target, input.epoch);
+        }
+        else if (input.phase === 'dragging' && x !== undefined) {
+            this.motion.move(x);
+        }
+        else if (input.phase === 'releasing') {
+            if (x !== undefined)
+                this.motion.move(x);
+            const released = this.motion.up(input.epoch, false, this.target);
+            if (released !== undefined)
+                this.target = released;
+        }
+    }
+    /** The bar's own press: growth on the shared press spring, light from the contact. */
+    pressBar(input, reducedMotion) {
+        this.contact.input(input);
+        if (input.phase === 'rest') {
+            this.press.reset();
+            this.pressedAt = undefined;
+            this.releasedAt = undefined;
+            return;
+        }
+        if (input.phase === 'pressed') {
+            this.pressedAt = input.epoch;
+            this.releasedAt = undefined;
+        }
+        else if (input.phase === 'releasing')
+            this.releasedAt = input.epoch;
+        if (reducedMotion)
+            this.press.reset();
+        else if (input.phase === 'pressed')
+            this.press.down(input.epoch);
+        else if (input.phase === 'releasing')
+            this.press.up(input.epoch);
+    }
+    /** Whether the thumb still moves, the bar is still pressed or its light still fades. */
+    live(at) {
+        // The bar holds its place, so only the contact's light (not its pose) can still be moving.
+        return this.motion.active || this.press.needsFrame || this.contact.light.needsFrame(at);
+    }
+    sample(at, reducedMotion, appearance) {
+        if (this.motion.needsFrame)
+            this.motion.sample(at, reducedMotion);
+        this.press.sample(at, reducedMotion);
+        this.touchLight = this.contact.light.sample(appearance, at);
+    }
+    /** The region's spec with the thumb where the motion has it. The resting pill gives way to the
+     * lift overlay's lens as the press rises (the tab bar's `restMix`). */
+    pose(spec, selection) {
+        const posed = {
+            ...spec,
+            tabSelection: {
+                ...selectionPill(spec, selection),
+                capsule: this.motion.capsule(),
+                lensMix: 0,
+                restMix: 1 - this.motion.lensMix,
+            },
+        };
+        return pressedBar(posed, this.press.amount);
+    }
+    /** The lift overlay's lens: the tab selection's lens over the composed bar. */
+    lift() {
+        return {
+            amount: this.motion.lensMix,
+            source: 'composed',
+            optics: this.motion.optics(),
+        };
+    }
+}
+/** The resting selection pass of a segmented region: the native pill at `selection.index`. The
+ * labels are the region's foreground ink (selectionInk), one glyph anchor per end segment. */
+export function selectionPill(spec, selection) {
+    const { height } = SCOPE_THUMB;
+    const centres = segmentCentres(spec.frameWidth, selection.count);
+    const index = Math.max(0, Math.min(selection.count - 1, Math.round(selection.index)));
+    const width = centres.length > 1 ? centres[1] - centres[0] : spec.frameWidth - 2 * SCOPE_THUMB.inset;
+    return {
+        ...stableTabSelection('light'),
+        glyphCount: selection.count,
+        glyphAnchors: [centres[0], centres[centres.length - 1]],
+        lensMix: 0,
+        capsule: {
+            centerX: centres[index],
+            centerY: spec.frameHeight / 2,
+            halfWidth: width / 2,
+            halfHeight: height / 2,
+            radius: height / 2,
+        },
+    };
+}
+/**
+ * The pressed scope bar (native: 400 → 416 pt wide, 36 pt tall throughout). The glass grows wider
+ * but not taller; the pill and the labels (the region's ink) grow by the same scale about the
+ * bar's centre, as one piece of content. `amount` is the press (0 rest, 1 held).
+ */
+export function pressedBar(spec, amount) {
+    if (amount === 0)
+        return spec;
+    const scale = interactivePressScale('segmented', spec.frameWidth, amount);
+    const centreX = spec.frameWidth / 2;
+    const centreY = spec.frameHeight / 2;
+    const aboutX = (x) => centreX + (x - centreX) * scale;
+    const aboutY = (y) => centreY + (y - centreY) * scale;
+    const glass = spec.shape.first;
+    const pill = spec.tabSelection;
+    return {
+        ...spec,
+        shape: { ...spec.shape, first: { ...glass, halfWidth: glass.halfWidth * scale } },
+        tabSelection: pill && {
+            ...pill,
+            capsule: {
+                centerX: aboutX(pill.capsule.centerX),
+                centerY: aboutY(pill.capsule.centerY),
+                halfWidth: pill.capsule.halfWidth * scale,
+                halfHeight: pill.capsule.halfHeight * scale,
+                radius: pill.capsule.radius * scale,
+            },
+            glyphAnchors: pill.glyphAnchors && [
+                aboutX(pill.glyphAnchors[0]),
+                aboutX(pill.glyphAnchors[1]),
+            ],
+        },
+        ink: spec.ink && {
+            ...spec.ink,
+            layers: spec.ink.layers.map(layer => ({
+                ...layer,
+                frame: {
+                    x: aboutX(layer.frame.x),
+                    y: aboutY(layer.frame.y),
+                    width: layer.frame.width * scale,
+                    height: layer.frame.height * scale,
+                },
+            })),
+        },
+    };
+}