@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/streaming/stream-spec.svelte.js

@@ -0,0 +1,162 @@
+// stream-spec.svelte.ts — Core streamSpec() helper.
+// Uses Svelte 5 $state for reactivity so consumers see automatic updates
+// via `$derived(store.current)` or bare access inside components.
+// Partial parses are throttled on both edges: a chunk that lands inside the
+// window gets one parse when the window closes, so a pausing stream never
+// leaves `current` behind the text already received. The single pending
+// timer is cleared on every exit (done, cancel/abort/overflow, error).
+// In dev, a stream whose buffer passes `warnAtBytes` gets one console.warn
+// per stream: that size usually means data typed inline.
+import { StreamParseError } from './index.js';
+import { DEFAULT_ALLOW, parsePartialSpec } from './json-parse.js';
+import { DEV } from 'esm-env';
+const DEFAULT_THROTTLE_MS = 50;
+const DEFAULT_MAX_BUFFER_BYTES = 2_000_000;
+const DEFAULT_WARN_AT_BYTES = 100_000;
+export function streamSpec(source, options = {}) {
+    const throttleMs = options.throttleMs ?? DEFAULT_THROTTLE_MS;
+    const maxBufferBytes = options.maxBufferBytes ?? DEFAULT_MAX_BUFFER_BYTES;
+    const allow = options.allow ?? DEFAULT_ALLOW;
+    const warnAtBytes = options.warnAtBytes ?? DEFAULT_WARN_AT_BYTES;
+    let warnedLarge = false;
+    const state = $state({
+        current: null,
+        done: false,
+        error: null,
+    });
+    let buffer = '';
+    let lastParseAt = 0;
+    let trailingTimer = null;
+    let cancelled = false;
+    let abortListenerCleanup = null;
+    const decoder = new TextDecoder('utf-8', { fatal: false });
+    const clearTrailing = () => {
+        if (trailingTimer !== null)
+            clearTimeout(trailingTimer);
+        trailingTimer = null;
+    };
+    const finish = () => {
+        clearTrailing();
+        state.done = true;
+        abortListenerCleanup?.();
+    };
+    const cancel = () => {
+        if (cancelled)
+            return;
+        cancelled = true;
+        finish();
+    };
+    if (options.signal) {
+        if (options.signal.aborted) {
+            state.done = true;
+            return makeStore(state, cancel);
+        }
+        const listener = () => cancel();
+        options.signal.addEventListener('abort', listener);
+        abortListenerCleanup = () => options.signal?.removeEventListener('abort', listener);
+    }
+    const parseNow = () => {
+        clearTrailing();
+        lastParseAt = nowMs();
+        const result = parsePartialSpec(buffer, allow);
+        if (result.value == null || typeof result.value !== 'object')
+            return;
+        const spec = result.value;
+        if (state.current !== spec) {
+            state.current = spec;
+            options.onUpdate?.(spec);
+        }
+    };
+    // Leading edge parses now; inside the window, one trailing parse at its end.
+    const tryEmit = () => {
+        const wait = throttleMs - (nowMs() - lastParseAt);
+        if (wait <= 0)
+            parseNow();
+        else if (trailingTimer === null)
+            trailingTimer = setTimeout(parseNow, wait);
+    };
+    const consume = async () => {
+        try {
+            const iter = toAsyncIterable(source);
+            for await (const chunk of iter) {
+                if (cancelled)
+                    break;
+                const text = typeof chunk === 'string' ? chunk : decoder.decode(chunk, { stream: true });
+                if (text.length === 0)
+                    continue;
+                buffer += text;
+                if (DEV && !warnedLarge && warnAtBytes > 0 && buffer.length > warnAtBytes) {
+                    warnedLarge = true;
+                    console.warn(`[ripple] streamed spec passed ${buffer.length} bytes (warnAtBytes: ${warnAtBytes}). ` +
+                        'Every frame re-parses the whole buffer, so large specs paint slowly. ' +
+                        'Load bulk data from the host through `sources` or an `api` action instead of typing it into the spec.');
+                }
+                if (buffer.length > maxBufferBytes) {
+                    state.error = new StreamParseError('overflow', state.current, `Buffer exceeded ${maxBufferBytes} bytes`);
+                    cancel();
+                    return;
+                }
+                tryEmit();
+            }
+            if (cancelled)
+                return;
+            // Flush any buffered multi-byte sequence
+            const tail = decoder.decode();
+            if (tail)
+                buffer += tail;
+            parseNow();
+            if (state.current === null && buffer.trim().length > 0) {
+                state.error = new StreamParseError('incomplete', null, 'Stream ended before any valid parse');
+            }
+            finish();
+        }
+        catch (err) {
+            if (cancelled)
+                return;
+            state.error = new StreamParseError('malformed', state.current, err instanceof Error ? err.message : String(err));
+            finish();
+        }
+    };
+    void consume();
+    return makeStore(state, cancel);
+}
+function makeStore(state, cancel) {
+    return {
+        get current() {
+            return state.current;
+        },
+        get done() {
+            return state.done;
+        },
+        get error() {
+            return state.error;
+        },
+        cancel,
+    };
+}
+function toAsyncIterable(source) {
+    if (Symbol.asyncIterator in source) {
+        return source;
+    }
+    return readableToAsyncIterable(source);
+}
+async function* readableToAsyncIterable(stream) {
+    const reader = stream.getReader();
+    try {
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done)
+                return;
+            if (value !== undefined)
+                yield value;
+        }
+    }
+    finally {
+        reader.releaseLock();
+    }
+}
+function nowMs() {
+    return typeof performance !== 'undefined' && typeof performance.now === 'function'
+        ? performance.now()
+        : Date.now();
+}

package/dist/streaming/types.d.ts

@@ -0,0 +1,57 @@
+import { type UISpec, type UniversalSpec } from '@ripple-ui/core';
+export type StreamSpec = UniversalSpec | UISpec;
+export type StreamParseErrorKind = 'malformed' | 'incomplete' | 'overflow' | 'aborted';
+export declare class StreamParseError extends Error {
+    readonly kind: StreamParseErrorKind;
+    readonly lastValid: StreamSpec | null;
+    constructor(kind: StreamParseErrorKind, lastValid: StreamSpec | null, message?: string);
+}
+/**
+ * Reactive store exposed by streamSpec(). Access `current`, `done`, `error`
+ * inside a Svelte component and the component re-renders on updates.
+ */
+export interface StreamSpecStore {
+    /** Deepest valid spec parsed so far, or null until the first successful parse. */
+    readonly current: StreamSpec | null;
+    /** True once the source stream has ended (natural, cancel, or error). */
+    readonly done: boolean;
+    /** Non-null when parsing exhausted or the source errored. Preserves `lastValid`. */
+    readonly error: StreamParseError | null;
+    /** Cancels the in-flight source. Idempotent. */
+    cancel(): void;
+}
+export interface StreamSpecOptions {
+    /**
+     * Minimum ms between parse attempts. Defaults to 50 — tied to human perception
+     * of staleness rather than the browser's frame rate. Lower values produce more
+     * intermediate renders; higher values feel laggier. Text that arrives inside
+     * the window is parsed once when the window closes, so `current` catches up
+     * even while the stream pauses.
+     */
+    throttleMs?: number;
+    /**
+     * Max buffered bytes before emitting a StreamParseError('overflow') and
+     * cancelling the source. Defaults to 2_000_000 (2 MB). Generous for real
+     * UI specs; guards against runaway streams.
+     */
+    maxBufferBytes?: number;
+    /**
+     * Dev-only size warning. When the buffer first grows past this many bytes,
+     * streamSpec calls console.warn once for that stream, pointing at host data
+     * (`sources` / `api`) instead of inline records. Measured like
+     * `maxBufferBytes` (the decoded buffer's length). Defaults to 100_000;
+     * `0` or `Infinity` turns it off. Silent in production builds (esm-env DEV).
+     */
+    warnAtBytes?: number;
+    /**
+     * partial-json Allow flags. Defaults to OBJ | ARR | STR with internal
+     * post-filtering that drops truncated values for enum-like keys
+     * (type, intent, version, action, variant) to avoid "Unknown widget type"
+     * flashes during progressive render. Override only for testing.
+     */
+    allow?: number;
+    /** Caller-driven cancellation. Aborting has the same effect as cancel(). */
+    signal?: AbortSignal;
+    /** Called once per new emission. Useful for logging and downstream debouncing. */
+    onUpdate?: (spec: StreamSpec) => void;
+}

package/dist/streaming/types.js

@@ -0,0 +1,12 @@
+// types.ts — Public types for the streaming module.
+import {} from '@ripple-ui/core';
+export class StreamParseError extends Error {
+    kind;
+    lastValid;
+    constructor(kind, lastValid, message) {
+        super(message ?? `Stream parse ${kind}`);
+        this.name = 'StreamParseError';
+        this.kind = kind;
+        this.lastValid = lastValid;
+    }
+}

package/dist/styles.css

@@ -0,0 +1,156 @@
+@import "tailwindcss";
+/* 2026-09-17 (fix/port-gaps): the .dark --destructive is the current shadcn dark red.
+   --ripple-error aliases --destructive now, so the old near-black red would have
+   carried every error widget in this app's dark mode. */
+/* Ripple's --ripple-* token base + the ripple-* Tailwind utilities (bg-ripple-surface,
+   rounded-ripple, …) that Card and ~16 other components depend on. Without this the
+   utilities resolve to nothing (cards lose their surface fill + radius). */
+@import "./theme.css";
+
+/* Map shadcn-svelte/bits-ui state attributes to Tailwind v4 shorthand
+   variants. bits-ui exposes `data-state="checked|unchecked|active|open|closed"`
+   etc. — without these declarations, classes like `data-checked:bg-primary`
+   silently match nothing because Tailwind's default `data-foo:` matches
+   `[data-foo]` (boolean), not `[data-state="foo"]`.
+
+   LIBRARY COMPONENTS MUST NOT USE THESE. They are for ripple's own app and
+   docs, which import this file. A consumer of the package imports
+   `@ripple-ui/svelte/theme.css` and never sees these declarations, so a
+   component written against `data-open:` compiles in the consumer's build to
+   `[data-open]` — an attribute bits-ui never emits — and the rule is silently
+   dead. That is exactly how the overlay enter/exit animations went missing in
+   paw-enterprise. Everything under src/lib/components and src/lib/widgets
+   spells the state out: `data-[state=open]:`, `data-[orientation=vertical]:`.
+   The contract test in src/lib/ui/ui-contract.test.ts enforces it. */
+@custom-variant data-checked (&[data-state="checked"]);
+@custom-variant data-unchecked (&[data-state="unchecked"]);
+@custom-variant data-active (&[data-state="active"]);
+@custom-variant data-inactive (&[data-state="inactive"]);
+@custom-variant data-open (&[data-state="open"]);
+@custom-variant data-closed (&[data-state="closed"]);
+@custom-variant data-vertical (&[data-orientation="vertical"]);
+@custom-variant data-horizontal (&[data-orientation="horizontal"]);
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 3.9%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 3.9%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 3.9%);
+  --primary: hsl(0 0% 9%);
+  --primary-foreground: hsl(0 0% 98%);
+  --secondary: hsl(0 0% 96.1%);
+  --secondary-foreground: hsl(0 0% 9%);
+  --muted: hsl(0 0% 96.1%);
+  --muted-foreground: hsl(0 0% 45.1%);
+  --accent: hsl(0 0% 96.1%);
+  --accent-foreground: hsl(0 0% 9%);
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(0 0% 98%);
+  --border: hsl(0 0% 89.8%);
+  --input: hsl(0 0% 89.8%);
+  --ring: hsl(0 0% 3.9%);
+  --chart-1: hsl(12 76% 61%);
+  --chart-2: hsl(173 58% 39%);
+  --chart-3: hsl(197 37% 24%);
+  --chart-4: hsl(43 74% 66%);
+  --chart-5: hsl(27 87% 67%);
+  --radius: 0.625rem;
+  --sidebar-background: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+  --sidebar-primary: hsl(240 5.9% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(240 4.8% 95.9%);
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+.dark {
+  --background: hsl(0 0% 3.9%);
+  --foreground: hsl(0 0% 98%);
+  --card: hsl(0 0% 3.9%);
+  --card-foreground: hsl(0 0% 98%);
+  --popover: hsl(0 0% 3.9%);
+  --popover-foreground: hsl(0 0% 98%);
+  --primary: hsl(0 0% 98%);
+  --primary-foreground: hsl(0 0% 9%);
+  --secondary: hsl(0 0% 14.9%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(0 0% 14.9%);
+  --muted-foreground: hsl(0 0% 63.9%);
+  --accent: hsl(0 0% 14.9%);
+  --accent-foreground: hsl(0 0% 98%);
+  /* 2026-09-17 (fix/port-gaps): was hsl(0 62.8% 30.6%), shadcn's old dark red,
+     about 2:1 on this dark ground. --ripple-error now aliases --destructive, so
+     this is the red every error widget in ripple's own app reads in dark mode.
+     Current shadcn dark value, the same one paw-enterprise uses. */
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: hsl(0 0% 98%);
+  --border: hsl(0 0% 14.9%);
+  --input: hsl(0 0% 14.9%);
+  --ring: hsl(0 0% 83.1%);
+  --chart-1: hsl(220 70% 50%);
+  --chart-2: hsl(160 60% 45%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
+  --sidebar-background: hsl(240 5.9% 10%);
+  --sidebar-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(240 3.7% 15.9%);
+  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-border: hsl(240 3.7% 15.9%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+}

package/dist/systems/elevation.css

@@ -0,0 +1,17 @@
+/* src/lib/systems/elevation.css
+   8-step surface/elevation ladder. Each step lightens (light mode) / darkens
+   less (dark mode handled by the host's tokens) and deepens the shadow.
+   Provenance: Fluid Functionalism (github.com/mickadesign/fluid-functionalism, MIT). */
+:root {
+  --surface-1: var(--background);
+  --surface-2: color-mix(in oklch, var(--background) 94%, var(--foreground));
+  --surface-3: color-mix(in oklch, var(--background) 90%, var(--foreground));
+  --surface-4: color-mix(in oklch, var(--background) 86%, var(--foreground));
+  --surface-5: color-mix(in oklch, var(--background) 82%, var(--foreground));
+  --surface-6: color-mix(in oklch, var(--background) 78%, var(--foreground));
+  --surface-7: color-mix(in oklch, var(--background) 74%, var(--foreground));
+  --surface-8: color-mix(in oklch, var(--background) 70%, var(--foreground));
+  --elevation-shadow-1: 0 1px 2px rgba(0,0,0,0.06);
+  --elevation-shadow-4: 0 6px 16px rgba(0,0,0,0.12);
+  --elevation-shadow-8: 0 16px 48px rgba(0,0,0,0.20);
+}

package/dist/systems/elevation.d.ts

@@ -0,0 +1,8 @@
+export declare const ELEVATION_MAX = 8;
+/** child level = clamp(substrate + offset, 1, 8). */
+export declare function nextElevation(substrate: number, offset: number): number;
+export declare function surfaceVar(level: number): string;
+/** Read the current substrate level from context (defaults to 1). */
+export declare function currentElevation(): number;
+/** Re-provide an elevated level to descendants. Call in a component's script. */
+export declare function provideElevation(offset?: number): number;

package/dist/systems/elevation.js

@@ -0,0 +1,29 @@
+// src/lib/systems/elevation.ts
+// @file systems/elevation.ts
+// @description 8-step surface/elevation ladder. `nextElevation` computes a
+//   child's level from its substrate + an offset, capped at 8 and floored at 1.
+//   Pair with the Elevated helper to re-provide the level via Svelte context so
+//   nested surfaces stack predictably. CSS tokens live in elevation.css.
+// @provenance Ported from Fluid Functionalism (github.com/mickadesign/
+//   fluid-functionalism, MIT) — systems only.
+// @created 2026-05-30 — RFC 12 premium pack, FF systems layer.
+import { getContext, setContext } from 'svelte';
+export const ELEVATION_MAX = 8;
+const ELEVATION_KEY = 'ripple-elevation';
+/** child level = clamp(substrate + offset, 1, 8). */
+export function nextElevation(substrate, offset) {
+    return Math.max(1, Math.min(ELEVATION_MAX, substrate + offset));
+}
+export function surfaceVar(level) {
+    return `var(--surface-${Math.max(1, Math.min(ELEVATION_MAX, level))})`;
+}
+/** Read the current substrate level from context (defaults to 1). */
+export function currentElevation() {
+    return getContext(ELEVATION_KEY) ?? 1;
+}
+/** Re-provide an elevated level to descendants. Call in a component's script. */
+export function provideElevation(offset = 1) {
+    const level = nextElevation(currentElevation(), offset);
+    setContext(ELEVATION_KEY, level);
+    return level;
+}

package/dist/systems/index.d.ts

@@ -0,0 +1,3 @@
+export { wghtStyle, animateWght, type AnimateWghtOptions } from './variable-font-weight.js';
+export { proximity, proximityHover, type ProximityHoverOptions } from './proximity-hover.js';
+export { nextElevation, surfaceVar, currentElevation, provideElevation, ELEVATION_MAX } from './elevation.js';

package/dist/systems/index.js

@@ -0,0 +1,5 @@
+// @file systems/index.ts — barrel for the Fluid Functionalism systems layer (MIT).
+// @created 2026-05-30 — RFC 12 premium pack.
+export { wghtStyle, animateWght } from './variable-font-weight.js';
+export { proximity, proximityHover } from './proximity-hover.js';
+export { nextElevation, surfaceVar, currentElevation, provideElevation, ELEVATION_MAX } from './elevation.js';

package/dist/systems/proximity-hover.d.ts

@@ -0,0 +1,9 @@
+/** Linear proximity 1 (touching) → 0 (at/over radius). Pure. */
+export declare function proximity(distance: number, radius: number): number;
+export interface ProximityHoverOptions {
+    radius?: number;
+}
+export declare function proximityHover(node: HTMLElement, opts?: ProximityHoverOptions): {
+    update(next: ProximityHoverOptions): void;
+    destroy(): void;
+};

package/dist/systems/proximity-hover.js

@@ -0,0 +1,47 @@
+// src/lib/systems/proximity-hover.ts
+// @file systems/proximity-hover.ts
+// @description Proximity-hover action — exposes a 0..1 `--proximity` CSS
+//   custom property based on how close the cursor is to the element. CSS
+//   consumes it (e.g. `opacity: calc(0.6 + 0.4 * var(--proximity))`).
+//   rAF-throttled; transform-aware via getBoundingClientRect.
+// @provenance Ported from Fluid Functionalism (github.com/mickadesign/
+//   fluid-functionalism, MIT) — systems only.
+// @created 2026-05-30 — RFC 12 premium pack, FF systems layer.
+/** Linear proximity 1 (touching) → 0 (at/over radius). Pure. */
+export function proximity(distance, radius) {
+    if (radius <= 0)
+        return 0;
+    return Math.max(0, Math.min(1, 1 - distance / radius));
+}
+export function proximityHover(node, opts = {}) {
+    let radius = opts.radius ?? 200;
+    let frame = 0;
+    let pending = null;
+    node.style.setProperty('--proximity', '0');
+    const compute = () => {
+        frame = 0;
+        if (!pending)
+            return;
+        const rect = node.getBoundingClientRect();
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        const dx = pending.x - cx;
+        const dy = pending.y - cy;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        node.style.setProperty('--proximity', String(proximity(dist, radius)));
+    };
+    const onMove = (e) => {
+        pending = { x: e.clientX, y: e.clientY };
+        if (!frame)
+            frame = requestAnimationFrame(compute);
+    };
+    window.addEventListener('pointermove', onMove);
+    return {
+        update(next) { radius = next.radius ?? 200; },
+        destroy() {
+            window.removeEventListener('pointermove', onMove);
+            if (frame)
+                cancelAnimationFrame(frame);
+        },
+    };
+}

package/dist/systems/variable-font-weight.d.ts

@@ -0,0 +1,12 @@
+export declare function wghtStyle(weight: number): string;
+export interface AnimateWghtOptions {
+    from: number;
+    to: number;
+    durationMs?: number;
+    trigger?: 'hover' | 'none';
+}
+/** Svelte action: tween the font weight on hover (or set the resting weight). */
+export declare function animateWght(node: HTMLElement, opts: AnimateWghtOptions): {
+    update(next: AnimateWghtOptions): void;
+    destroy(): void;
+};

package/dist/systems/variable-font-weight.js

@@ -0,0 +1,33 @@
+// src/lib/systems/variable-font-weight.ts
+// @file systems/variable-font-weight.ts
+// @description Variable-font weight transition. Animates
+//   `font-variation-settings: 'wght' N` for a smooth weight change.
+// @provenance Ported from Fluid Functionalism (github.com/mickadesign/
+//   fluid-functionalism, MIT) — systems only.
+// @created 2026-05-30 — RFC 12 premium pack, FF systems layer.
+export function wghtStyle(weight) {
+    return `font-variation-settings: 'wght' ${weight}`;
+}
+/** Svelte action: tween the font weight on hover (or set the resting weight). */
+export function animateWght(node, opts) {
+    let options = opts;
+    const set = (w) => node.style.setProperty('font-variation-settings', `'wght' ${w}`);
+    set(options.from);
+    node.style.transition = `${node.style.transition ? node.style.transition + ', ' : ''}font-variation-settings ${options.durationMs ?? 200}ms ease`;
+    const enter = () => set(options.to);
+    const leave = () => set(options.from);
+    const hoverEnabled = (options.trigger ?? 'hover') === 'hover';
+    if (hoverEnabled) {
+        node.addEventListener('mouseenter', enter);
+        node.addEventListener('mouseleave', leave);
+    }
+    return {
+        update(next) { options = next; set(options.from); },
+        destroy() {
+            if (hoverEnabled) {
+                node.removeEventListener('mouseenter', enter);
+                node.removeEventListener('mouseleave', leave);
+            }
+        },
+    };
+}