@weasel-js/labkit 1.1.0 → 1.2.0

package/README.md

@@ -59,6 +59,33 @@ import { ThemeProvider } from '@weasel-js/theme/react';
 `"light"` or `"dark"`. Only `styles.css` needs importing — the token values
 arrive through the provider.
 
+## Driving your own renderer
+
+`CanvasStack` is 2D. For three.js or raw WebGL, take rects and dirtiness from
+labkit and keep the GL yourself:
+
+```tsx
+import { toDeviceRect, useSurfaceTile, useTiledSurface } from '@weasel-js/labkit/surface';
+```
+
+A trial's `view` is opaque to labkit — it is persisted, restored on Reset and
+handed to the instrument without being read into — so a 3D lab stores an orbit
+there and gets all three. `useOrbit` is the 3D peer of `usePanZoom`.
+
+See `src/surface/AGENTS.md` for the contract and the traps.
+
+## Long-running work
+
+An instrument with work too slow for a render declares a `job`. labkit starts it,
+aborts it on unmount and on a key change, discards results from a superseded run,
+and renders progress and a cancel control into the trial chrome. Per-item failure
+is an event rather than a thrown error, so a run with two failed items is a
+partial success.
+
+```tsx
+import type { JobCapability } from '@weasel-js/labkit/job';
+```
+
 ## Development
 
 ```bash

package/dist/_dts/{DrawCommand-BkZztJsW.d.ts → DrawCommand-C_XboUpz.d.ts}

@@ -88,6 +88,8 @@ interface SerializedHistoryEntry {
     label: string;
     forwardOps: SerializedOp[];
     baseOps: SerializedOp[];
+    selectionBefore?: readonly string[];
+    selectionAfter?: readonly string[];
 }
 /** Snapshot of an entire `History` instance. Designed to live alongside the
  *  scene snapshot in IDB so a reload restores the undo / redo stacks to
@@ -119,6 +121,10 @@ interface HistoryEntry {
      *  contribute nothing. May be `undefined` for deserialized entries
      *  restored from an older snapshot that predates this field. */
     touchedIds?: ReadonlySet<string>;
+    /** Selection restored when this entry is undone. */
+    selectionBefore?: readonly string[];
+    /** Selection restored when this entry is redone. */
+    selectionAfter?: readonly string[];
 }
 /** Op-batched undo/redo controller returned by `createHistory`. */
 interface History {
@@ -170,7 +176,7 @@ interface History {
      *  Unlike `applyOps`, does NOT call `op.apply()`. Used by Journal.commit
      *  to flush a session's net forward ops to the parent as one entry without
      *  re-mutating the scene. */
-    recordEntry(ops: Op[], label: string): void;
+    recordEntry(ops: Op[], label: string, options?: RecordEntryOptions): void;
     /** Concatenated forwardOps of every undo-stack entry, in order. Snapshot
      *  of "what changes are currently applied via this history" — useful for
      *  Journal.commit to flush to a parent, and for any caller that wants to
@@ -193,6 +199,14 @@ interface History {
      *  to resume or discard before calling this. */
     resumeJournal(journal: Journal): void;
 }
+/** Options for `recordEntry`. */
+interface RecordEntryOptions {
+    /** Selection as of before the already-applied ops ran. `recordEntry` is
+     *  called after the fact, so the live selection has moved on by then and
+     *  the engine cannot sample it — a caller that wants undo to restore the
+     *  selection captures it when the batch opens and passes it here. */
+    selectionBefore?: readonly string[];
+}
 
 /** Fill rule used by polygon path hit-testing and `ctx.fill()`. */
 type PathFillRule = 'nonzero' | 'evenodd';
@@ -500,6 +514,14 @@ interface Scene<TData, TLayer extends string, TPose = RectPose> {
      *  `SceneCanvasAdapter`). Pass `this` from `sceneToAdapter` or a compatible
      *  adapter. */
     applyBatch(ops: Op[], label: string, adapter: unknown): void;
+    /** The transient set of active ids — "operate on these N as a unit".
+     *  Shared by every view over this scene unless a view supplies its own
+     *  (see `CanvasView.selection`). Not document content: it never appears
+     *  in `toJSON`. It does ride on history entries, so undo and redo put
+     *  back the selection an edit was made under; changing it is never an
+     *  undo step of its own. */
+    getSelection(): readonly NodeId[];
+    setSelection(ids: readonly NodeId[]): void;
     undo(): boolean;
     redo(): boolean;
     canUndo(): boolean;
@@ -792,17 +814,22 @@ type StrokeAlign = 'center' | 'inner' | 'outer';
 /** Stroke style: a FillStyle plus structural line parameters. */
 interface Stroke {
     paint: FillStyle;
-    width?: number;
+    /** World units, or `{ px }` for screen pixels — resolved against the
+     *  accumulated transform scale at draw time, so it holds its on-screen
+     *  thickness as the view zooms. */
+    width?: number | {
+        px: number;
+    };
     /** Per `CanvasRenderingContext2D.setLineDash` — empty/omitted = solid. */
     dash?: number[];
     cap?: 'butt' | 'round' | 'square';
     join?: 'miter' | 'round' | 'bevel';
     /**
      * Miter join fallback threshold. When the miter length exceeds
-     * `miterLimit * width / 2`, the join falls back to a bevel. Default 10
-     * (matching Canvas2D). SVG's default is 4; consumers that want SVG
-     * fidelity should set this explicitly when constructing strokes from
-     * SVG sources where the attribute was omitted.
+     * `miterLimit * width / 2`, the join falls back to a bevel. Default 4,
+     * matching SVG — which is also what the kit's own serializer implies when
+     * it omits the attribute for an unset field. Canvas2D's 10 lets an acute
+     * corner throw a spike four times the half-width.
      */
     miterLimit?: number;
     /** Where the stroke sits relative to the geometric edge. Default `'center'`. */
@@ -1063,6 +1090,21 @@ interface ImageDrawCommand {
      *  device pixels as hard squares — required by anything magnifying a
      *  framebuffer readback, where blur destroys the point of the readback. */
     sampling?: 'linear' | 'nearest';
+    /** Sub-rectangle of `image` to draw, in bitmap pixels from the top-left.
+     *  Omitted draws the whole bitmap. Not range-checked: a rect past the edge
+     *  samples outside [0..1], which CLAMP_TO_EDGE smears. With
+     *  `sampling: 'linear'` the filter reaches half a texel beyond `source`, so
+     *  atlas frames need a gutter (see `SpriteSheet.spacing`) or `'nearest'`. */
+    source?: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    /** Mirror the sampled region within the destination rect. The quad does not
+     *  move — a flipped draw covers exactly the pixels an unflipped one does. */
+    flipX?: boolean;
+    flipY?: boolean;
 }
 /**
  * Custom shader draw command. The renderer generates a quad over `bounds`

package/dist/_dts/{index-iAP6XbH3.d.ts → index-JFAYj5Tv.d.ts}

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { C as ConfigField } from './types-x92Kfeme.js';
+import { J as JobHandle, a as JobCapability } from './types-DJ79Tg5J.js';
 
 /** What an instrument's `render` is handed: its state and config, the setters
  *  for both, the trial it is mounted in, and a way to emit named events. */
@@ -10,10 +11,18 @@ interface RenderContext<TS = unknown, TC = unknown> {
     setConfig: (key: keyof TC, value: unknown) => void;
     trial: {
         id: string;
+        /** The trial's view, in whatever shape this instrument chose. labkit persists
+         *  it and restores it on Reset without ever reading into it. */
+        view: unknown;
+        setView: (next: unknown) => void;
+        /** 2D convenience over `view`. Reads 1 and writes nothing when the trial holds
+         *  a view that is not the 2D one. */
         zoom: number;
         setZoom: (z: number) => void;
     };
     emit: (event: string) => void;
+    /** Present only when the instrument declares a `job`. */
+    job?: JobHandle;
 }
 /** One 2D canvas layer of an instrument, drawn in declaration order.
  *
@@ -123,6 +132,9 @@ interface Instrument<TS = unknown, TC = unknown> {
     layers?: LayerCapability;
     dragDrop?: DragDropCapability<TS, TC>;
     undo?: UndoCapability;
+    /** Work too slow to do during a render. The runtime starts it, aborts it on
+     *  unmount and on a `key` change, and renders progress into the trial. */
+    job?: JobCapability<TS, TC, never>;
 }
 /** Instruments as a lab receives them. `any` rather than `unknown` because
  *  parameter contravariance keeps a `defineInstrument<TS, TC>` result out of

package/dist/_dts/types-DJ79Tg5J.d.ts

@@ -0,0 +1,56 @@
+/** What a running job reports as it goes. `total` may arrive at any point and may
+ *  arrive more than once; a job that cannot count up front simply never sends it.
+ *
+ *  `failed` is a first-class event rather than a thrown error because these
+ *  failures are per item: a run with two failed items is a partial success, and
+ *  its other items are worth showing. */
+type JobEvent<T> = {
+    kind: 'total';
+    total: number;
+} | {
+    kind: 'item';
+    item: T;
+} | {
+    kind: 'failed';
+    index: number;
+    error: string;
+};
+/** Where a job is. `idle` before its first run and after a cancel; `done` when the
+ *  iterable finished, whether or not items failed along the way. */
+type JobStatus = 'idle' | 'running' | 'done' | 'error';
+/** Declares that an instrument has work too slow to do during a render: what to
+ *  run, when to re-run it, and how each result folds into state. */
+interface JobCapability<TS = unknown, TC = unknown, TItem = unknown> {
+    /** Re-run whenever this value changes, compared element-wise. A job with no
+     *  `key` runs only when something calls `start()`. */
+    key?: (config: TC, state: TS) => readonly unknown[];
+    /** Start on mount and on every `key` change. Default false. */
+    auto?: boolean;
+    run: (args: {
+        config: TC;
+        state: TS;
+        signal: AbortSignal;
+    }) => AsyncIterable<JobEvent<TItem>>;
+    /** Fold one result into state. Called once per `item` event, in arrival order. */
+    onItem: (item: TItem, state: TS) => TS;
+}
+/** One item that failed, and why. */
+interface JobFailure {
+    index: number;
+    error: string;
+}
+/** What `RenderContext.job` exposes. Present only when the instrument declares the
+ *  capability; `undefined` otherwise. */
+interface JobHandle {
+    status: JobStatus;
+    done: number;
+    /** Null until the job reports a total, and forever if it never does. */
+    total: number | null;
+    failures: readonly JobFailure[];
+    /** The error that ended the run, when `status` is `'error'`. */
+    error: string | null;
+    start: () => void;
+    cancel: () => void;
+}
+
+export type { JobHandle as J, JobCapability as a, JobEvent as b, JobFailure as c, JobStatus as d };

package/dist/_dts/{useTrialState-DYe2vUwN.d.ts → useTrialState-BMNIx3Cy.d.ts}

@@ -10,18 +10,14 @@ interface UndoStack {
 }
 /** One trial as the store holds it: which instrument it runs, that
  *  instrument's config and state, the camera, and the undo history. */
-interface TrialRecord<TS = unknown, TC = unknown> {
+interface TrialRecord<TS = unknown, TC = unknown, TV = unknown> {
     id: string;
     instrumentName: string;
     config: TC;
     state: TS;
-    view: {
-        zoom: number;
-        pan: {
-            x: number;
-            y: number;
-        };
-    };
+    /** Opaque to labkit: persisted, restored on Reset and handed to the instrument,
+     *  but never read into. A 3D lab puts an orbit here and keeps all three. */
+    view: TV;
     undoStack: UndoStack;
 }
 /** A named, saved copy of a trial's config and state, restorable into any
@@ -112,7 +108,7 @@ interface LabStoreActions {
     removeTrial: (id: string) => void;
     updateTrialState: <TS>(id: string, next: TS | ((prev: TS) => TS)) => void;
     updateTrialConfig: <TC>(id: string, key: keyof TC, value: TC[keyof TC]) => void;
-    updateTrialView: (id: string, view: TrialRecord['view']) => void;
+    updateTrialView: (id: string, view: unknown) => void;
     updateTrialUndoStack: (id: string, next: TrialRecord['undoStack'] | ((prev: TrialRecord['undoStack']) => TrialRecord['undoStack'])) => void;
     setTrialInstrument: (id: string, instrumentName: string) => void;
     saveSnapshot: (trialId: string, name: string) => void;

package/dist/canvas/index.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { V as ViewTransform, e as Point } from '../_dts/index-iAP6XbH3.js';
+import { V as ViewTransform, e as Point } from '../_dts/index-JFAYj5Tv.js';
 import '../_dts/types-x92Kfeme.js';
+import '../_dts/types-DJ79Tg5J.js';
 
 /** One layer of a canvas stack: its id, whether it is currently shown, and how
  *  it paints itself. */

package/dist/{chunk-C6GJKPUI.js → chunk-73KA7WBO.js}

@@ -1,4 +1,4 @@
-import { useActionsRegistry, useOptionalDepRegistry, evaluateEnabled, eligibleContribution, oklchToOklab, oklabToSrgbU8, rgbaToHex, UnknownIcon } from './chunk-DJLDIRFN.js';
+import { useActionsRegistry, useOptionalDepRegistry, evaluateEnabled, eligibleContribution, oklchToOklab, oklabToSrgbU8, rgbaToHex, UnknownIcon } from './chunk-BOHF3PQO.js';
 import { forwardRef, useRef, useMemo, useCallback, useEffect, useImperativeHandle, useSyncExternalStore, useState, useLayoutEffect, useId, Fragment as Fragment$1 } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Checkbox, TextField, Label, Input, Text, FieldError, NumberField, Group, Button, Switch, Focusable, RadioGroup, Radio, Slider, SliderOutput, SliderTrack, SliderThumb, Select, SelectValue, Popover, ListBox, ListBoxItem, ModalOverlay, Modal, Dialog, Heading, Tabs, TabList, Tab, TabPanel, ComboBox, TooltipTrigger, Tooltip, OverlayArrow } from 'react-aria-components';
@@ -2248,11 +2248,12 @@ function ot(e19) {
 var st = 240;
 var ct = {
   Component: ({ sampler: e19, boxW: n30, boxH: r28, variant: i24, params: c16 }) => {
+    let l17 = useId();
     if (i24 !== "solid" && i24 !== "subtle") return null;
-    let l17 = {
+    let u15 = {
       ...it,
       ...c16
-    }, u15 = useId(), d12 = 100 / n30, f12 = 100 / r28, p11 = ot(l17.lightFrom), m9 = e19.totalCss, h7 = [], g6 = [];
+    }, d12 = 100 / n30, f12 = 100 / r28, p11 = ot(u15.lightFrom), m9 = e19.totalCss, h7 = [], g6 = [];
     for (let t25 = 0; t25 < st; t25++) {
       let n31 = e19.perimeterAt(t25 / st * m9);
       h7.push({
@@ -2260,8 +2261,8 @@ var ct = {
         y: n31.y,
         side: at(n31.nx, n31.ny)
       }), g6.push({
-        x: n31.x - n31.nx * l17.bevelWidth * d12,
-        y: n31.y - n31.ny * l17.bevelWidth * f12
+        x: n31.x - n31.nx * u15.bevelWidth * d12,
+        y: n31.y - n31.ny * u15.bevelWidth * f12
       });
     }
     let _7 = [], v4 = null;
@@ -2281,10 +2282,10 @@ var ct = {
       return i25 + " Z";
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
-      id: u15,
+      id: l17,
       children: /* @__PURE__ */ jsx("path", { d: e19.bodyPath })
     }) }), /* @__PURE__ */ jsx("g", {
-      clipPath: `url(#${u15})`,
+      clipPath: `url(#${l17})`,
       children: _7.map((e20, t25) => /* @__PURE__ */ jsx("path", {
         className: p11[e20.side],
         d: y4(e20)
@@ -2326,17 +2327,18 @@ var ut = {
 };
 var dt = {
   Component: ({ sampler: e19, variant: n30, params: r28 }) => {
+    let i24 = useId(), c16 = useId();
     if (n30 !== "solid" && n30 !== "subtle") return null;
-    let i24 = {
+    let l17 = {
       ...lt,
       ...r28
-    }, c16 = useId(), l17 = useId(), u15 = Math.max(0, Math.min(i24.intensity, 1));
+    }, u15 = Math.max(0, Math.min(l17.intensity, 1));
     return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsx("clipPath", {
-      id: l17,
+      id: c16,
       children: /* @__PURE__ */ jsx("path", { d: e19.bodyPath })
     }), /* @__PURE__ */ jsxs("linearGradient", {
-      id: c16,
-      ...ut[i24.lightFrom],
+      id: i24,
+      ...ut[l17.lightFrom],
       children: [
         /* @__PURE__ */ jsx("stop", {
           offset: "0%",
@@ -2360,12 +2362,12 @@ var dt = {
         })
       ]
     })] }), /* @__PURE__ */ jsx("rect", {
-      clipPath: `url(#${l17})`,
+      clipPath: `url(#${c16})`,
       x: "0",
       y: "0",
       width: "100",
       height: "100",
-      fill: `url(#${c16})`,
+      fill: `url(#${i24})`,
       style: { pointerEvents: "none" }
     })] });
   },
@@ -2448,26 +2450,27 @@ function _t(e19) {
 }
 var vt = {
   Component: ({ sampler: e19, variant: n30, params: r28 }) => {
+    let i24 = useId();
     if (n30 !== "solid" && n30 !== "subtle") return null;
-    let i24 = {
+    let c16 = {
       ...gt,
       ...r28
-    }, c16 = useId(), l17 = [];
-    for (let e20 = 0; e20 < i24.lines; e20++) {
-      let t25 = (e20 + 1) / (i24.lines + 1) * 100, n31 = _t(e20 * 2 + 1) * 4, r29 = _t(e20 * 2 + 2) * 4;
+    }, l17 = [];
+    for (let e20 = 0; e20 < c16.lines; e20++) {
+      let t25 = (e20 + 1) / (c16.lines + 1) * 100, n31 = _t(e20 * 2 + 1) * 4, r29 = _t(e20 * 2 + 2) * 4;
       l17.push(`M -5 ${t25.toFixed(2)} Q 35 ${(t25 + n31).toFixed(2)} 60 ${t25.toFixed(2)} T 105 ${(t25 + r29).toFixed(2)}`);
     }
     let u15 = [];
-    for (let e20 = 0; e20 < i24.knots; e20++) {
+    for (let e20 = 0; e20 < c16.knots; e20++) {
       let t25 = 30 + _t(e20 * 3 + 0.7) * 30 + 20, n31 = 50 + _t(e20 * 3 + 1.3) * 30;
       u15.push([t25, n31]);
     }
     return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
-      id: c16,
+      id: i24,
       children: /* @__PURE__ */ jsx("path", { d: e19.bodyPath })
     }) }), /* @__PURE__ */ jsxs("g", {
-      clipPath: `url(#${c16})`,
-      opacity: Math.max(0, Math.min(i24.intensity, 1)),
+      clipPath: `url(#${i24})`,
+      opacity: Math.max(0, Math.min(c16.intensity, 1)),
       style: { pointerEvents: "none" },
       children: [l17.map((e20, t25) => /* @__PURE__ */ jsx("path", {
         className: "badge-stroke",
@@ -2546,11 +2549,12 @@ function Ct(e19) {
 }
 var wt = {
   Component: ({ sampler: e19, boxW: n30, boxH: r28, variant: i24, params: c16 }) => {
+    let l17 = useId();
     if (i24 !== "solid" && i24 !== "subtle") return null;
-    let l17 = {
+    let u15 = {
       ...xt,
       ...c16
-    }, u15 = useId(), d12 = 100 / n30, f12 = 100 / r28, p11 = e19.totalCss, { lx: m9, ly: h7 } = Ct(l17.lightFrom), g6 = [], _7 = [];
+    }, d12 = 100 / n30, f12 = 100 / r28, p11 = e19.totalCss, { lx: m9, ly: h7 } = Ct(u15.lightFrom), g6 = [], _7 = [];
     for (let t25 = 0; t25 < Q; t25++) {
       let n31 = e19.perimeterAt(t25 / Q * p11), r29 = -(n31.nx * m9 + n31.ny * h7), i25 = Math.max(0, Math.min((r29 + 1) / 2, 0.9999)), a22 = Math.floor(i25 * St.length);
       g6.push({
@@ -2558,8 +2562,8 @@ var wt = {
         y: n31.y,
         bucket: a22
       }), _7.push({
-        x: n31.x - n31.nx * l17.bevelWidth * d12,
-        y: n31.y - n31.ny * l17.bevelWidth * f12
+        x: n31.x - n31.nx * u15.bevelWidth * d12,
+        y: n31.y - n31.ny * u15.bevelWidth * f12
       });
     }
     let v4 = [], y4 = null;
@@ -2581,10 +2585,10 @@ var wt = {
       return l18 + " Z";
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
-      id: u15,
+      id: l17,
       children: /* @__PURE__ */ jsx("path", { d: e19.bodyPath })
     }) }), /* @__PURE__ */ jsx("g", {
-      clipPath: `url(#${u15})`,
+      clipPath: `url(#${l17})`,
       children: v4.map((e20, t25) => /* @__PURE__ */ jsx("path", {
         className: St[e20.bucket],
         d: b3(e20)
@@ -2751,11 +2755,12 @@ var kt = {
 var At = 240;
 var jt = {
   Component: ({ sampler: e19, boxW: n30, boxH: r28, variant: i24, params: c16 }) => {
+    let l17 = useId(), u15 = useId(), d12 = useId();
     if (i24 !== "solid" && i24 !== "subtle" && i24 !== "outline") return null;
-    let l17 = {
+    let f12 = {
       ...kt,
       ...c16
-    }, u15 = useId(), d12 = useId(), f12 = useId(), p11 = e19.totalCss, m9 = [], h7 = null;
+    }, p11 = e19.totalCss, m9 = [], h7 = null;
     for (let t25 = 0; t25 < At; t25++) {
       let n31 = t25 / At * p11, r29 = e19.perimeterAt(n31);
       r29.ny < 0 ? (h7 || (h7 = [], m9.push(h7)), h7.push({
@@ -2777,11 +2782,11 @@ var jt = {
       for (let n31 = 1; n31 < e20.length; n31++) t25 += ` L ${e20[n31].x.toFixed(3)} ${e20[n31].y.toFixed(3)}`;
       g6.push(t25);
     }
-    let _7 = 100 / n30, v4 = 100 / r28, y4 = Math.max(_7, v4), b3 = l17.bezelWidth * y4, x3 = l17.rimWidth * y4, S3 = Math.max(0, l17.equator - l17.equatorSpread), C3 = Math.min(100, l17.equator + l17.equatorSpread * 1.6), w3 = `color-mix(in srgb, ${l17.accent} ${l17.equatorTint}%, white)`, T3 = `color-mix(in srgb, ${l17.accent} ${l17.baseTint}%, black)`;
+    let _7 = 100 / n30, v4 = 100 / r28, y4 = Math.max(_7, v4), b3 = f12.bezelWidth * y4, x3 = f12.rimWidth * y4, S3 = Math.max(0, f12.equator - f12.equatorSpread), C3 = Math.min(100, f12.equator + f12.equatorSpread * 1.6), w3 = `color-mix(in srgb, ${f12.accent} ${f12.equatorTint}%, white)`, T3 = `color-mix(in srgb, ${f12.accent} ${f12.baseTint}%, black)`;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("defs", { children: [
         /* @__PURE__ */ jsxs("linearGradient", {
-          id: u15,
+          id: l17,
           x1: "0%",
           y1: "0%",
           x2: "0%",
@@ -2790,19 +2795,19 @@ var jt = {
             /* @__PURE__ */ jsx("stop", {
               offset: "0%",
               style: {
-                stopColor: l17.accent,
-                stopOpacity: l17.topAlpha
+                stopColor: f12.accent,
+                stopOpacity: f12.topAlpha
               }
             }),
             /* @__PURE__ */ jsx("stop", {
               offset: `${S3}%`,
               style: {
-                stopColor: l17.accent,
-                stopOpacity: l17.upperAlpha
+                stopColor: f12.accent,
+                stopOpacity: f12.upperAlpha
               }
             }),
             /* @__PURE__ */ jsx("stop", {
-              offset: `${l17.equator}%`,
+              offset: `${f12.equator}%`,
               style: {
                 stopColor: w3,
                 stopOpacity: 1
@@ -2811,7 +2816,7 @@ var jt = {
             /* @__PURE__ */ jsx("stop", {
               offset: `${C3}%`,
               style: {
-                stopColor: l17.accent,
+                stopColor: f12.accent,
                 stopOpacity: 1
               }
             }),
@@ -2825,24 +2830,24 @@ var jt = {
           ]
         }),
         /* @__PURE__ */ jsxs("linearGradient", {
-          id: d12,
+          id: u15,
           x1: "0%",
           y1: "0%",
           x2: "0%",
-          y2: `${l17.glossExtent}%`,
+          y2: `${f12.glossExtent}%`,
           children: [
             /* @__PURE__ */ jsx("stop", {
               offset: "0%",
               style: {
                 stopColor: "white",
-                stopOpacity: l17.glossTopAlpha
+                stopOpacity: f12.glossTopAlpha
               }
             }),
             /* @__PURE__ */ jsx("stop", {
               offset: "60%",
               style: {
                 stopColor: "white",
-                stopOpacity: l17.glossMidAlpha
+                stopOpacity: f12.glossMidAlpha
               }
             }),
             /* @__PURE__ */ jsx("stop", {
@@ -2855,29 +2860,29 @@ var jt = {
           ]
         }),
         /* @__PURE__ */ jsx("clipPath", {
-          id: f12,
+          id: d12,
           children: /* @__PURE__ */ jsx("path", { d: e19.bodyPath })
         })
       ] }),
       /* @__PURE__ */ jsx("path", {
         d: e19.bodyPath,
-        fill: `url(#${u15})`,
+        fill: `url(#${l17})`,
         style: { pointerEvents: "none" }
       }),
       /* @__PURE__ */ jsx("rect", {
         x: "0",
         y: "0",
         width: "100",
-        height: l17.glossExtent,
-        fill: `url(#${d12})`,
-        clipPath: `url(#${f12})`,
+        height: f12.glossExtent,
+        fill: `url(#${u15})`,
+        clipPath: `url(#${d12})`,
         style: { pointerEvents: "none" }
       }),
       g6.map((e20, t25) => /* @__PURE__ */ jsx("path", {
         d: e20,
         fill: "none",
         stroke: "white",
-        strokeOpacity: l17.bezelAlpha,
+        strokeOpacity: f12.bezelAlpha,
         strokeWidth: b3,
         strokeLinecap: "round",
         vectorEffect: "non-scaling-stroke",
@@ -2887,7 +2892,7 @@ var jt = {
         d: e19.bodyPath,
         fill: "none",
         stroke: "black",
-        strokeOpacity: l17.rimAlpha,
+        strokeOpacity: f12.rimAlpha,
         strokeWidth: x3,
         vectorEffect: "non-scaling-stroke",
         style: { pointerEvents: "none" }
@@ -2929,11 +2934,12 @@ var $ = {
   aqua: jt,
   metal: {
     Component: ({ sampler: e19, boxW: n30, boxH: r28, variant: i24, params: c16 }) => {
+      let l17 = useId(), u15 = useId(), d12 = useId();
       if (i24 !== "solid" && i24 !== "subtle" && i24 !== "outline") return null;
-      let l17 = {
+      let f12 = {
         ...Mt,
         ...c16
-      }, u15 = Math.max(0, Math.min(l17.specularity, 1)), d12 = useId(), f12 = useId(), p11 = useId(), m9 = e19.totalCss, h7 = [], g6 = null;
+      }, p11 = Math.max(0, Math.min(f12.specularity, 1)), m9 = e19.totalCss, h7 = [], g6 = null;
       for (let t25 = 0; t25 < Nt; t25++) {
         let n31 = t25 / Nt * m9, r29 = e19.perimeterAt(n31);
         r29.ny < 0 ? (g6 || (g6 = [], h7.push(g6)), g6.push({
@@ -2955,11 +2961,11 @@ var $ = {
         for (let n31 = 1; n31 < e20.length; n31++) t25 += ` L ${e20[n31].x.toFixed(3)} ${e20[n31].y.toFixed(3)}`;
         _7.push(t25);
       }
-      let v4 = 100 / n30, y4 = 100 / r28, b3 = Math.max(v4, y4), x3 = l17.bezelWidth * b3, S3 = l17.rimWidth * b3, C3 = Math.max(0, l17.equator - l17.equatorSpread), w3 = Math.min(100, l17.equator + l17.equatorSpread), T3 = 100 - Math.round(u15 * 85), E3 = `color-mix(in srgb, ${l17.accent} ${T3}%, white)`, D3 = `color-mix(in srgb, ${l17.accent} ${l17.topDarkness}%, black)`, O3 = `color-mix(in srgb, ${l17.accent} ${l17.baseDarkness}%, black)`, k3 = 100 - Math.round(u15 * 50), A3 = 100 - Math.round(u15 * 30), j3 = `color-mix(in srgb, ${l17.accent} ${k3}%, white)`, M3 = `color-mix(in srgb, ${l17.accent} ${A3}%, white)`, N3 = l17.glossAlphaTop * u15, P3 = l17.bezelAlpha * (0.4 + 0.6 * u15), F3 = l17.rimAlpha * (0.6 + 0.4 * u15);
+      let v4 = 100 / n30, y4 = 100 / r28, b3 = Math.max(v4, y4), x3 = f12.bezelWidth * b3, S3 = f12.rimWidth * b3, C3 = Math.max(0, f12.equator - f12.equatorSpread), w3 = Math.min(100, f12.equator + f12.equatorSpread), T3 = 100 - Math.round(p11 * 85), E3 = `color-mix(in srgb, ${f12.accent} ${T3}%, white)`, D3 = `color-mix(in srgb, ${f12.accent} ${f12.topDarkness}%, black)`, O3 = `color-mix(in srgb, ${f12.accent} ${f12.baseDarkness}%, black)`, k3 = 100 - Math.round(p11 * 50), A3 = 100 - Math.round(p11 * 30), j3 = `color-mix(in srgb, ${f12.accent} ${k3}%, white)`, M3 = `color-mix(in srgb, ${f12.accent} ${A3}%, white)`, N3 = f12.glossAlphaTop * p11, P3 = f12.bezelAlpha * (0.4 + 0.6 * p11), F3 = f12.rimAlpha * (0.6 + 0.4 * p11);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("defs", { children: [
           /* @__PURE__ */ jsxs("linearGradient", {
-            id: d12,
+            id: l17,
             x1: "0%",
             y1: "0%",
             x2: "0%",
@@ -2974,7 +2980,7 @@ var $ = {
                 style: { stopColor: j3 }
               }),
               /* @__PURE__ */ jsx("stop", {
-                offset: `${l17.equator}%`,
+                offset: `${f12.equator}%`,
                 style: { stopColor: E3 }
               }),
               /* @__PURE__ */ jsx("stop", {
@@ -2988,11 +2994,11 @@ var $ = {
             ]
           }),
           /* @__PURE__ */ jsxs("linearGradient", {
-            id: f12,
+            id: u15,
             x1: "0%",
             y1: "0%",
             x2: "0%",
-            y2: `${l17.glossExtent}%`,
+            y2: `${f12.glossExtent}%`,
             children: [/* @__PURE__ */ jsx("stop", {
               offset: "0%",
               style: {
@@ -3008,22 +3014,22 @@ var $ = {
             })]
           }),
           /* @__PURE__ */ jsx("clipPath", {
-            id: p11,
+            id: d12,
             children: /* @__PURE__ */ jsx("path", { d: e19.bodyPath })
           })
         ] }),
         /* @__PURE__ */ jsx("path", {
           d: e19.bodyPath,
-          fill: `url(#${d12})`,
+          fill: `url(#${l17})`,
           style: { pointerEvents: "none" }
         }),
         N3 > 0 && /* @__PURE__ */ jsx("rect", {
           x: "0",
           y: "0",
           width: "100",
-          height: l17.glossExtent,
-          fill: `url(#${f12})`,
-          clipPath: `url(#${p11})`,
+          height: f12.glossExtent,
+          fill: `url(#${u15})`,
+          clipPath: `url(#${d12})`,
           style: { pointerEvents: "none" }
         }),
         _7.map((e20, t25) => /* @__PURE__ */ jsx("path", {
@@ -5982,5 +5988,5 @@ function He2(e19, t25) {
 }
 
 export { F2 as F, Ft, He2 as He, Ve2 as Ve, _, _4 as _2, a4 as a, a8 as a2, a15 as a3, c4 as c, c5 as c2, c12 as c3, c13 as c4, d4 as d, d8 as d2, e7 as e, f, f6 as f2, h4 as h, l9 as l, l10 as l2, l13 as l3, m2 as m, m7 as m2, n15 as n, n23 as n2, n26 as n3, n29 as n4, o5 as o, o6 as o2, o7 as o3, o14 as o4, o15 as o5, o17 as o6, p, p4 as p2, p6 as p3, p8 as p4, p10 as p5, qe, r10 as r, r11 as r2, r12 as r3, r13 as r4, r15 as r5, s6 as s, s7 as s2, s15 as s3, u4 as u, u5 as u2, u7 as u3, u9 as u4, u11 as u5, v2 as v };
-//# sourceMappingURL=chunk-C6GJKPUI.js.map
-//# sourceMappingURL=chunk-C6GJKPUI.js.map
+//# sourceMappingURL=chunk-73KA7WBO.js.map
+//# sourceMappingURL=chunk-73KA7WBO.js.map