@joewinke/jatui 0.1.33 → 0.2.0

package/dist/showcase/scroll/scrollProgress.js

@@ -0,0 +1,65 @@
+import { scroll, supportsScrollTimeline } from 'motion';
+/**
+ * Svelte action: binds a CSS custom property (default --scroll-progress, 0..1)
+ * to the page scroll position via motion scroll(). Uses native ScrollTimeline
+ * where available for compositor-thread performance.
+ *
+ * Reduced-motion: no-ops (leaves var unset / at whatever CSS default).
+ *
+ * Usage:
+ *   <div use:scrollProgress style="width: calc(var(--scroll-progress) * 100%)">
+ *   <div use:scrollProgress={{ varName: '--depth', container: panelEl }}>
+ */
+export function scrollProgress(node, opts) {
+    if (opts === void 0) { opts = {}; }
+    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduced)
+        return {};
+    var _a = opts.varName, varName = _a === void 0 ? '--scroll-progress' : _a, container = opts.container, _b = opts.axis, axis = _b === void 0 ? 'y' : _b;
+    // Prefer native ScrollTimeline for compositor-thread perf when available
+    if (supportsScrollTimeline() && !container) {
+        try {
+            // @ts-ignore — ScrollTimeline is not in lib.dom yet
+            var timeline = new ScrollTimeline({ source: document.documentElement, axis: axis });
+            // Animate a dummy MotionValue-style target via WAAPI
+            node.style.setProperty(varName, '0');
+            var anim_1 = node.animate({ '--jatui-scroll-noop': ['0', '1'] }, {
+                // @ts-ignore
+                timeline: timeline,
+                fill: 'both'
+            });
+            // Mirror progress via rAF while ScrollTimeline doesn't yet expose a direct hook
+            var rafId_1;
+            var tick_1 = function () {
+                var _a;
+                if (anim_1.currentTime != null) {
+                    var effect = anim_1.effect;
+                    var t = effect ? ((_a = effect.getComputedTiming().progress) !== null && _a !== void 0 ? _a : 0) : 0;
+                    node.style.setProperty(varName, String(t));
+                }
+                rafId_1 = requestAnimationFrame(tick_1);
+            };
+            rafId_1 = requestAnimationFrame(tick_1);
+            return {
+                destroy: function () {
+                    cancelAnimationFrame(rafId_1);
+                    anim_1.cancel();
+                    node.style.removeProperty(varName);
+                }
+            };
+        }
+        catch (_c) {
+            // fall through to motion scroll()
+        }
+    }
+    // Fallback: motion scroll() — JS-thread but cross-browser
+    var stop = scroll(function (progress) {
+        node.style.setProperty(varName, String(progress));
+    }, container ? { container: container, axis: axis } : { axis: axis });
+    return {
+        destroy: function () {
+            stop();
+            node.style.removeProperty(varName);
+        }
+    };
+}

package/dist/showcase/scroll/scrollReveal.d.ts

@@ -0,0 +1,30 @@
+export interface ScrollRevealOptions {
+    /** Translate distance in px (default 16) */
+    y?: number;
+    /** Duration token override in ms (default: var(--motion-enter) = 200ms) */
+    duration?: number;
+    /** Run once on first enter (default true) */
+    once?: boolean;
+    /** IntersectionObserver threshold amount (default 0.15) */
+    amount?: number;
+    /** Root margin for early trigger (default '-10px') */
+    margin?: string;
+    /** Stagger delay between children in ms; when set, animates children instead of host */
+    stagger?: number;
+}
+/**
+ * Svelte action: reveals the element (or its children when stagger > 0) when
+ * scrolled into view. Composes with the staggerEntrance ethos — same
+ * opacity + translateY arc, same motion tokens.
+ *
+ * Reduced-motion: jumps to the final (visible) state instantly.
+ *
+ * Usage:
+ *   <div use:scrollReveal>…</div>
+ *   <ul use:scrollReveal={{ stagger: 60 }}>…</ul>
+ */
+export declare function scrollReveal(node: HTMLElement, opts?: ScrollRevealOptions): {
+    destroy?: undefined;
+} | {
+    destroy(): void;
+};

package/dist/showcase/scroll/scrollReveal.js

@@ -0,0 +1,70 @@
+import { animateMini, inView } from 'motion';
+import { cubicBezier } from 'motion-utils';
+/**
+ * Svelte action: reveals the element (or its children when stagger > 0) when
+ * scrolled into view. Composes with the staggerEntrance ethos — same
+ * opacity + translateY arc, same motion tokens.
+ *
+ * Reduced-motion: jumps to the final (visible) state instantly.
+ *
+ * Usage:
+ *   <div use:scrollReveal>…</div>
+ *   <ul use:scrollReveal={{ stagger: 60 }}>…</ul>
+ */
+export function scrollReveal(node, opts) {
+    if (opts === void 0) { opts = {}; }
+    var _a = opts.y, y = _a === void 0 ? 16 : _a, _b = opts.once, once = _b === void 0 ? true : _b, _c = opts.amount, amount = _c === void 0 ? 0.15 : _c, _d = opts.margin, margin = _d === void 0 ? '-10px' : _d, staggerMs = opts.stagger;
+    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    var targets = staggerMs != null ? Array.from(node.children) : [node];
+    if (reduced) {
+        for (var _i = 0, targets_1 = targets; _i < targets_1.length; _i++) {
+            var t = targets_1[_i];
+            t.style.opacity = '1';
+            t.style.transform = 'none';
+        }
+        return {};
+    }
+    // Prime targets to start state
+    for (var _e = 0, targets_2 = targets; _e < targets_2.length; _e++) {
+        var t = targets_2[_e];
+        t.style.opacity = '0';
+        t.style.transform = "translateY(".concat(y, "px)");
+    }
+    var enterDuration = parseDuration(opts.duration != null
+        ? "".concat(opts.duration, "ms")
+        : getComputedStyle(document.documentElement).getPropertyValue('--motion-enter').trim() || '200ms');
+    var glide = parseGlide(getComputedStyle(document.documentElement)
+        .getPropertyValue('--motion-glide')
+        .trim());
+    var stop = inView(node, function () {
+        targets.forEach(function (t, i) {
+            animateMini(t, { opacity: [0, 1], transform: ["translateY(".concat(y, "px)"), 'translateY(0px)'] }, {
+                duration: enterDuration / 1000,
+                ease: glide,
+                delay: staggerMs != null ? (i * staggerMs) / 1000 : 0
+            });
+        });
+        if (once)
+            stop();
+    }, { amount: amount, margin: margin });
+    return {
+        destroy: function () {
+            stop();
+        }
+    };
+}
+function parseDuration(value) {
+    if (value.endsWith('ms'))
+        return parseFloat(value);
+    if (value.endsWith('s'))
+        return parseFloat(value) * 1000;
+    return 200;
+}
+function parseGlide(css) {
+    var m = css.match(/cubic-bezier\(([^)]+)\)/);
+    if (m) {
+        var _a = m[1].split(',').map(Number), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+        return cubicBezier(x1, y1, x2, y2);
+    }
+    return cubicBezier(0.16, 1, 0.3, 1); // --motion-glide fallback
+}

package/dist/stores/commandPalette.svelte.d.ts

@@ -0,0 +1,24 @@
+export type CommandItem = {
+    id: string;
+    label: string;
+    group?: string;
+    icon?: string;
+    keywords?: string[];
+    shortcut?: string[];
+    action: () => void;
+};
+type CommandGroup = {
+    label: string;
+    items: CommandItem[];
+};
+export declare const commandPalette: {
+    readonly open: boolean;
+    readonly groups: CommandGroup[];
+    readonly recentIds: string[];
+    registerCommands(groupLabel: string, items: CommandItem[]): void;
+    openPalette(): void;
+    closePalette(): void;
+    runCommand(item: CommandItem): void;
+    getRecentItems(): CommandItem[];
+};
+export {};

package/dist/stores/commandPalette.svelte.js

@@ -0,0 +1,82 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var RECENT_KEY = 'jatui:cmd-palette:recent';
+var MAX_RECENT = 8;
+function createCommandPaletteStore() {
+    var open = $state(false);
+    var groups = $state([]);
+    var recentIds = $state([]);
+    // Load recent from localStorage on first access
+    function loadRecent() {
+        if (typeof localStorage === 'undefined')
+            return;
+        try {
+            var raw = localStorage.getItem(RECENT_KEY);
+            recentIds = raw ? JSON.parse(raw) : [];
+        }
+        catch (_a) {
+            recentIds = [];
+        }
+    }
+    function saveRecent(ids) {
+        if (typeof localStorage === 'undefined')
+            return;
+        try {
+            localStorage.setItem(RECENT_KEY, JSON.stringify(ids));
+        }
+        catch (_a) {
+            // ignore storage errors
+        }
+    }
+    function recordRecent(id) {
+        var updated = __spreadArray([id], recentIds.filter(function (r) { return r !== id; }), true).slice(0, MAX_RECENT);
+        recentIds = updated;
+        saveRecent(updated);
+    }
+    return {
+        get open() {
+            return open;
+        },
+        get groups() {
+            return groups;
+        },
+        get recentIds() {
+            return recentIds;
+        },
+        registerCommands: function (groupLabel, items) {
+            var existing = groups.find(function (g) { return g.label === groupLabel; });
+            if (existing) {
+                existing.items = items;
+            }
+            else {
+                groups = __spreadArray(__spreadArray([], groups, true), [{ label: groupLabel, items: items }], false);
+            }
+        },
+        openPalette: function () {
+            loadRecent();
+            open = true;
+        },
+        closePalette: function () {
+            open = false;
+        },
+        runCommand: function (item) {
+            recordRecent(item.id);
+            open = false;
+            item.action();
+        },
+        getRecentItems: function () {
+            var allItems = groups.flatMap(function (g) { return g.items; });
+            return recentIds
+                .map(function (id) { return allItems.find(function (i) { return i.id === id; }); })
+                .filter(function (i) { return !!i; });
+        }
+    };
+}
+export var commandPalette = createCommandPaletteStore();

package/dist/stores/toast.svelte.d.ts

@@ -0,0 +1,28 @@
+export type ToastType = 'info' | 'success' | 'warning' | 'error';
+export type ToastOptions = {
+    type?: ToastType;
+    message: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    durationMs?: number;
+    onUndo?: () => void;
+};
+export type Toast = {
+    id: number;
+    type: ToastType;
+    message: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    durationMs: number;
+    onUndo?: () => void;
+};
+export type DismissHandle = {
+    dismiss: () => void;
+};
+export declare function getToasts(): Toast[];
+export declare function showToast(options: ToastOptions): DismissHandle;
+export declare function dismissToast(id: number): void;

package/dist/stores/toast.svelte.js

@@ -0,0 +1,33 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var nextId = 0;
+var toasts = $state([]);
+export function getToasts() {
+    return toasts;
+}
+export function showToast(options) {
+    var _a, _b;
+    var id = ++nextId;
+    var toast = {
+        id: id,
+        type: (_a = options.type) !== null && _a !== void 0 ? _a : 'info',
+        message: options.message,
+        action: options.action,
+        durationMs: (_b = options.durationMs) !== null && _b !== void 0 ? _b : 5000,
+        onUndo: options.onUndo
+    };
+    toasts = __spreadArray(__spreadArray([], toasts, true), [toast], false);
+    return {
+        dismiss: function () { return dismissToast(id); }
+    };
+}
+export function dismissToast(id) {
+    toasts = toasts.filter(function (t) { return t.id !== id; });
+}

package/dist/styles/motion.css

@@ -0,0 +1,46 @@
+/**
+ * jatui motion tokens — the single source for durations and easing curves.
+ *
+ * Two curves, one rule:
+ *   --motion-glide   the default for everything: entrances, exits, hovers,
+ *                    containers (modals, drawers, panels), color/opacity.
+ *   --motion-spring  single-overshoot (~6%). ONLY for state-confirmation and
+ *                    gesture-release on small elements — toggle settle, chip
+ *                    add/remove, drop settle, toast entrance. Never on hover
+ *                    or other high-frequency interactions, never on
+ *                    containers, never multi-oscillation.
+ *
+ * Curves adapted from kinetics (https://kinetics.colorion.co, MIT).
+ * Policy: shared/craft/animation-discipline.md in the jat repo
+ * ("Curve vs spring" + "Surfaces" sections).
+ */
+:root {
+	/* Easing */
+	--motion-glide: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo family; default */
+	--motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* single overshoot; confirmation only */
+	--motion-standard: cubic-bezier(0.2, 0, 0, 1); /* M3 standard; symmetric moves */
+
+	/* Duration */
+	--motion-instant: 80ms; /* press/hover micro-feedback (50–100ms band) */
+	--motion-fast: 150ms; /* default state-confirmation */
+	--motion-enter: 200ms; /* entering UI: modals, sheets, dropdowns, toasts */
+	--motion-move: 300ms; /* container morphs, cross-panel moves */
+}
+
+/*
+ * Global reduced-motion floor: strip motion, keep end states visible.
+ * Components should still pair every animation with a static affordance
+ * (color, position, label) so the state change survives without motion.
+ * Component-local guards remain good practice — not every consumer loads
+ * this file — but this is the backstop.
+ */
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}

package/dist/styles/tokens.css

@@ -0,0 +1,31 @@
+/**
+ * jatui design tokens — radius, spacing, border.
+ *
+ * Sibling of motion.css: jatui owns the token layer; DaisyUI theme
+ * variables FEED INTO it (never the other way around). Components use
+ * --jatui-* vars, so swapping or dropping the underlying theme system
+ * is a change to this file, not to every component.
+ *
+ * Scale source: DESIGN.md (jat repo) `rounded:` / `spacing:` blocks.
+ * DaisyUI 5 per-theme radius vars are honored when present; the
+ * DESIGN.md values are the fallback.
+ */
+:root {
+	/* Radius — DESIGN.md rounded scale */
+	--jatui-radius-field: var(--radius-field, 0.25rem); /* inputs, buttons */
+	--jatui-radius-selector: var(--radius-selector, 0.375rem); /* badges, chips, pills */
+	--jatui-radius-box: var(--radius-box, 0.5rem); /* cards, modals, panels */
+
+	/* Spacing rhythm — DESIGN.md spacing scale */
+	--jatui-space-xs: 2px;
+	--jatui-space-sm: 4px;
+	--jatui-space-md: 6px;
+	--jatui-space-base: 8px;
+	--jatui-space-lg: 12px;
+	--jatui-space-xl: 16px;
+	--jatui-space-2xl: 24px;
+	--jatui-space-3xl: 32px;
+
+	/* Border — depth comes from tonal surfaces + 1px borders, not shadows */
+	--jatui-border-w: 1px;
+}

package/dist/transitions/glide.d.ts

@@ -0,0 +1,31 @@
+export type GlideOrigin = 'center' | 'top' | 'tr' | 'right' | 'br' | 'bottom' | 'bl' | 'left' | 'tl';
+export interface GlideParams {
+    /** Direction the element slides in from. Default 'bottom'. */
+    from?: GlideOrigin;
+    /** Travel distance in px. Default 16. */
+    distance?: number;
+    /** Scale factor at the start of the enter (e.g. 0.95). Omit = no scale. */
+    scale?: number;
+    /** Add motion-blur (blur filter) during travel. Default false. */
+    blur?: boolean;
+    /** Duration in ms. Default 200. */
+    duration?: number;
+    /** Delay in ms. Default 0. */
+    delay?: number;
+}
+/**
+ * Parameterized directional enter/exit transition.
+ *
+ * One factory replaces ~54 animista keyframe permutations.
+ * Works as both `in:` and `out:` — Svelte mirrors the exit automatically.
+ *
+ * <div in:glide={{ from: 'bottom' }} out:glide={{ from: 'bottom' }}>…</div>
+ *
+ * Reduced-motion: opacity fade only (no translate, scale, or blur).
+ */
+export declare function glide(node: HTMLElement, params?: GlideParams): {
+    delay: number;
+    duration: number;
+    easing: (t: number) => number;
+    css(t: number): string;
+};

package/dist/transitions/glide.js

@@ -0,0 +1,58 @@
+// direction taxonomy after animista.net (Ana Travas, BSD-2-Clause site license); keyframes re-authored on jatui motion tokens
+/** Map from direction → [dx, dy] unit vector for the entrance travel. */
+var ORIGIN_VECTOR = {
+    center: [0, 0],
+    top: [0, -1],
+    tr: [1, -1],
+    right: [1, 0],
+    br: [1, 1],
+    bottom: [0, 1],
+    bl: [-1, 1],
+    left: [-1, 0],
+    tl: [-1, -1],
+};
+/**
+ * Parameterized directional enter/exit transition.
+ *
+ * One factory replaces ~54 animista keyframe permutations.
+ * Works as both `in:` and `out:` — Svelte mirrors the exit automatically.
+ *
+ * <div in:glide={{ from: 'bottom' }} out:glide={{ from: 'bottom' }}>…</div>
+ *
+ * Reduced-motion: opacity fade only (no translate, scale, or blur).
+ */
+export function glide(node, params) {
+    if (params === void 0) { params = {}; }
+    var _a = params.from, from = _a === void 0 ? 'bottom' : _a, _b = params.distance, distance = _b === void 0 ? 16 : _b, scale = params.scale, _c = params.blur, blur = _c === void 0 ? false : _c, _d = params.duration, duration = _d === void 0 ? 200 : _d, _e = params.delay, delay = _e === void 0 ? 0 : _e;
+    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    var _f = ORIGIN_VECTOR[from], ux = _f[0], uy = _f[1];
+    // Entrance start state — element travels FROM this position TO its natural position
+    var tx = prefersReduced ? 0 : ux * distance;
+    var ty = prefersReduced ? 0 : uy * distance;
+    var s = (!prefersReduced && scale !== undefined) ? scale : 1;
+    var blurPx = (!prefersReduced && blur) ? 4 : 0;
+    function buildTransform(progress) {
+        // progress goes 0 → 1 on enter; Svelte reverses for exit
+        var invP = 1 - progress;
+        var x = tx * invP;
+        var y = ty * invP;
+        var sc = 1 - (1 - s) * invP;
+        var b = blurPx * invP;
+        var t = "translate(".concat(x, "px, ").concat(y, "px)");
+        if (s !== 1)
+            t += " scale(".concat(sc, ")");
+        var filter = b > 0 ? "blur(".concat(b.toFixed(1), "px)") : '';
+        return { transform: t, filter: filter };
+    }
+    return {
+        delay: delay,
+        duration: duration,
+        easing: function (t) { return t; }, // easing applied via CSS var below
+        css: function (t) {
+            // t: 0 = start, 1 = end (for `in:`; Svelte inverts for `out:`)
+            var _a = buildTransform(t), transform = _a.transform, filter = _a.filter;
+            // Apply the glide easing via CSS transition so the CSS var is honored
+            return "\n\t\t\t\topacity: ".concat(t, ";\n\t\t\t\ttransform: ").concat(transform, ";\n\t\t\t\t").concat(filter ? "filter: ".concat(filter, ";") : '', "\n\t\t\t\ttransition-timing-function: var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1));\n\t\t\t");
+        },
+    };
+}

package/dist/utils/sound.d.ts

@@ -0,0 +1,6 @@
+export declare function isSoundEnabled(): boolean;
+export declare function setSoundEnabled(enabled: boolean): void;
+export declare function registerSound(name: string, dataUri: string): Promise<void>;
+export declare function play(name: string, options?: {
+    volume?: number;
+}): void;

package/dist/utils/sound.js

@@ -0,0 +1,113 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var ctx = null;
+var buffers = new Map();
+var STORAGE_KEY = 'jatui-sound-enabled';
+function getContext() {
+    if (ctx)
+        return ctx;
+    try {
+        ctx = new AudioContext();
+        return ctx;
+    }
+    catch (_a) {
+        return null;
+    }
+}
+export function isSoundEnabled() {
+    if (typeof localStorage === 'undefined')
+        return false;
+    return localStorage.getItem(STORAGE_KEY) === 'true';
+}
+export function setSoundEnabled(enabled) {
+    if (typeof localStorage === 'undefined')
+        return;
+    localStorage.setItem(STORAGE_KEY, String(enabled));
+}
+export function registerSound(name, dataUri) {
+    return __awaiter(this, void 0, Promise, function () {
+        var audioCtx, base64, binary, bytes, i, buffer, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    audioCtx = getContext();
+                    if (!audioCtx)
+                        return [2 /*return*/];
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    base64 = dataUri.split(',')[1];
+                    binary = atob(base64);
+                    bytes = new Uint8Array(binary.length);
+                    for (i = 0; i < binary.length; i++)
+                        bytes[i] = binary.charCodeAt(i);
+                    return [4 /*yield*/, audioCtx.decodeAudioData(bytes.buffer)];
+                case 2:
+                    buffer = _b.sent();
+                    buffers.set(name, buffer);
+                    return [3 /*break*/, 4];
+                case 3:
+                    _a = _b.sent();
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    });
+}
+export function play(name, options) {
+    var _a;
+    if (options === void 0) { options = {}; }
+    if (!isSoundEnabled())
+        return;
+    var audioCtx = getContext();
+    if (!audioCtx)
+        return;
+    var buffer = buffers.get(name);
+    if (!buffer)
+        return;
+    // Resume suspended context (browser autoplay policy requires user gesture first)
+    if (audioCtx.state === 'suspended') {
+        audioCtx.resume().catch(function () { });
+    }
+    var source = audioCtx.createBufferSource();
+    var gain = audioCtx.createGain();
+    gain.gain.value = (_a = options.volume) !== null && _a !== void 0 ? _a : 0.15;
+    source.buffer = buffer;
+    source.connect(gain);
+    gain.connect(audioCtx.destination);
+    source.start();
+}

package/dist/utils/splitText.d.ts

@@ -0,0 +1,25 @@
+export type SplitBy = 'char' | 'word' | 'line';
+export interface SplitTextOptions {
+    by: SplitBy;
+}
+export interface SplitTextResult {
+    /** Total number of split units (chars, words, or lines). */
+    count: number;
+    /** Call to restore original DOM content and remove data attributes. */
+    cleanup: () => void;
+}
+/**
+ * Wraps text content of `node` into `<span>` elements and stamps CSS custom
+ * properties so pure-CSS animations can stagger by index.
+ *
+ * For `by: 'char'`: sets `--char-index` (0-based) and `--char-total`.
+ * For `by: 'word'`: sets `--word-index` (0-based) and `--word-total`.
+ * For `by: 'line'`: sets `--line-index` (0-based) and `--line-total`.
+ *
+ * Accessibility: stamps `aria-label` with the original text on `node` and
+ * marks every injected span as `aria-hidden="true"`.
+ *
+ * Re-splitting a node that has already been split is safe — previous spans
+ * are flattened back to text before the new split.
+ */
+export declare function splitText(node: HTMLElement, options: SplitTextOptions): SplitTextResult;