@dorsk/tsumikit 0.73.2 → 0.75.0

package/dist/sound-synth.js

@@ -0,0 +1,91 @@
+const PALETTE = {
+    click: [
+        ['n', 3000, 0, 0, 0.012, 0.18],
+        ['sine', 620, 380, 0, 0.04, 0.22],
+    ],
+    'toggle-on': [
+        ['n', 2600, 0, 0, 0.012, 0.3],
+        ['sine', 520, 520, 0, 0.03, 0.14],
+        ['triangle', 660, 880, 0.035, 0.05, 0.3],
+    ],
+    'toggle-off': [
+        ['n', 2600, 0, 0, 0.012, 0.3],
+        ['sine', 520, 520, 0, 0.03, 0.14],
+        ['triangle', 880, 620, 0.035, 0.05, 0.3],
+    ],
+    open: [['sine', 420, 760, 0, 0.09, 0.25]],
+    close: [['sine', 700, 380, 0, 0.08, 0.25]],
+    success: [
+        ['sine', 698, 698, 0, 0.055, 0.25],
+        ['sine', 1047, 1047, 0.058, 0.085, 0.2],
+    ],
+    error: [
+        ['triangle', 330, 300, 0, 0.065, 0.28],
+        ['triangle', 262, 240, 0.06, 0.08, 0.28],
+    ],
+    tick: [
+        ['n', 3800, 0, 0, 0.008, 0.3],
+        ['sine', 2400, 1900, 0, 0.012, 0.14],
+    ],
+};
+let ctx;
+let out;
+let noise;
+function context() {
+    ctx ??= new AudioContext();
+    if (ctx.state === 'suspended')
+        ctx.resume().catch(() => { });
+    return ctx;
+}
+// Call synchronously inside a user gesture so Safari lets the context start.
+export function unlock() {
+    context();
+}
+export function play(name, volume) {
+    const voices = PALETTE[name];
+    if (!voices)
+        return;
+    const c = context();
+    if (!out) {
+        out = c.createGain();
+        out.connect(c.destination);
+    }
+    out.gain.value = volume;
+    const t = c.currentTime + 0.005;
+    for (const [wave, f0, f1, at, d, g] of voices) {
+        const env = c.createGain();
+        const s = t + at;
+        env.gain.setValueAtTime(0.0001, s);
+        env.gain.exponentialRampToValueAtTime(g, s + 0.004);
+        env.gain.exponentialRampToValueAtTime(0.0001, s + d);
+        env.connect(out);
+        let src;
+        if (wave === 'n') {
+            if (!noise) {
+                noise = c.createBuffer(1, c.sampleRate * 0.05, c.sampleRate);
+                const data = noise.getChannelData(0);
+                for (let i = 0; i < data.length; i++)
+                    data[i] = Math.random() * 2 - 1;
+            }
+            const buf = c.createBufferSource();
+            buf.buffer = noise;
+            const bp = c.createBiquadFilter();
+            bp.type = 'bandpass';
+            bp.frequency.value = f0;
+            bp.Q.value = 1.2;
+            buf.connect(bp).connect(env);
+            src = buf;
+        }
+        else {
+            const osc = c.createOscillator();
+            osc.type = wave;
+            osc.frequency.setValueAtTime(f0, s);
+            osc.frequency.exponentialRampToValueAtTime(f1, s + d);
+            osc.connect(env);
+            src = osc;
+        }
+        src.start(s);
+        src.stop(s + d + 0.02);
+        src.onended = () => env.disconnect();
+    }
+}

package/dist/sound.d.ts

@@ -0,0 +1 @@
+export { playSound, type SoundMuted, type SoundName } from './stores/sound.svelte';

package/dist/sound.js

@@ -0,0 +1,3 @@
+// What components import to play a sound. No audio code lives here: the synth
+// is a separate chunk that `playSound` imports on demand once sounds are on.
+export { playSound } from './stores/sound.svelte';

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

@@ -0,0 +1,20 @@
+export type SoundName = 'click' | 'toggle-on' | 'toggle-off' | 'open' | 'close' | 'success' | 'error' | 'tick';
+export type SoundMuted = 'off' | 'reduced-motion' | null;
+/**
+ * Play a UI sound if the user enabled sounds. `allow` is the per-component
+ * opt-out (`sound={false}`). Safe to call during SSR: it is a no-op there.
+ */
+export declare function playSound(name: SoundName, allow?: boolean | undefined): void;
+declare class Sound {
+    enabled: boolean;
+    volume: number;
+    constructor();
+    /** Why nothing would play right now, for a settings hint. */
+    get muted(): SoundMuted;
+    setEnabled(on: boolean): void;
+    setVolume(v: number): void;
+    play(name: SoundName): void;
+    private save;
+}
+export declare const sound: Sound;
+export {};

package/dist/stores/sound.svelte.js

@@ -0,0 +1,150 @@
+import { browser } from '../env';
+import { readStorage, writeStorage } from './storage';
+// OPT-IN UI sound effects. Off by default and persisted; while off nothing is
+// imported, no AudioContext exists and no listener is attached. The synth is a
+// separate chunk loaded on first play (or eagerly when enabling, so a gesture
+// listener can unlock audio for Safari).
+//
+// With `prefers-reduced-motion: reduce` only the feedback sounds (success,
+// error) play: they carry information, the decorative ones are muted.
+// Calls inside one frame are coalesced and the highest priority wins
+// (error > success > open/close > toggle > click > tick); the same sound plays
+// at most once per 50 ms (tick: 40 ms). Hidden tabs are silent.
+const KEY = 'tsumikit-sound';
+const DEFAULT_VOLUME = 0.5;
+// Lowest to highest priority; the last two are feedback and survive reduced motion.
+const ORDER = [
+    'tick',
+    'click',
+    'toggle-on',
+    'toggle-off',
+    'open',
+    'close',
+    'success',
+    'error',
+];
+const GAP_MS = 50;
+const TICK_GAP_MS = 40;
+let synth = null;
+let loading = null;
+let armed = false;
+let pending = null;
+const last = new Map();
+function clamp(v, fallback) {
+    return Number.isFinite(v) ? Math.min(1, Math.max(0, v)) : fallback;
+}
+function reducedMotion() {
+    return !!globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+}
+function load() {
+    loading ??= import('../sound-synth').then((m) => (synth = m));
+    return loading;
+}
+function unlock() {
+    if (!synth)
+        return;
+    synth.unlock();
+    listen(false);
+}
+function listen(on) {
+    if (armed === on)
+        return;
+    armed = on;
+    for (const type of ['pointerdown', 'keydown']) {
+        if (on)
+            addEventListener(type, unlock, { capture: true });
+        else
+            removeEventListener(type, unlock, { capture: true });
+    }
+}
+function flush() {
+    const name = pending;
+    pending = null;
+    if (!name || !sound.enabled)
+        return;
+    const now = performance.now();
+    if (now - (last.get(name) ?? -1e9) < (name === 'tick' ? TICK_GAP_MS : GAP_MS))
+        return;
+    last.set(name, now);
+    const volume = sound.volume;
+    if (synth)
+        synth.play(name, volume);
+    else
+        load().then((m) => m.play(name, volume), () => { });
+}
+/**
+ * Play a UI sound if the user enabled sounds. `allow` is the per-component
+ * opt-out (`sound={false}`). Safe to call during SSR: it is a no-op there.
+ */
+export function playSound(name, allow = true) {
+    if (!browser || allow === false || !sound.enabled || sound.volume <= 0)
+        return;
+    if (document.hidden)
+        return;
+    if (navigator.userActivation && !navigator.userActivation.hasBeenActive)
+        return;
+    const rank = ORDER.indexOf(name);
+    if (rank < ORDER.length - 2 && reducedMotion())
+        return;
+    if (pending === null) {
+        requestAnimationFrame(flush);
+        pending = name;
+    }
+    else if (rank > ORDER.indexOf(pending))
+        pending = name;
+}
+class Sound {
+    enabled = $state(false);
+    volume = $state(DEFAULT_VOLUME);
+    constructor() {
+        if (!browser)
+            return;
+        const raw = readStorage(KEY);
+        if (raw) {
+            try {
+                const saved = JSON.parse(raw);
+                if (typeof saved?.enabled === 'boolean')
+                    this.enabled = saved.enabled;
+                if (typeof saved?.volume === 'number')
+                    this.volume = clamp(saved.volume, DEFAULT_VOLUME);
+            }
+            catch { }
+        }
+        if (this.enabled) {
+            load().catch(() => { });
+            listen(true);
+        }
+    }
+    /** Why nothing would play right now, for a settings hint. */
+    get muted() {
+        if (!this.enabled)
+            return 'off';
+        return reducedMotion() ? 'reduced-motion' : null;
+    }
+    setEnabled(on) {
+        this.enabled = on;
+        this.save();
+        if (!browser)
+            return;
+        if (on) {
+            load().catch(() => { });
+            listen(true);
+            unlock();
+        }
+        else
+            listen(false);
+    }
+    setVolume(v) {
+        this.volume = clamp(v, this.volume);
+        this.save();
+    }
+    play(name) {
+        playSound(name);
+    }
+    save() {
+        if (!browser)
+            return;
+        writeStorage(KEY, JSON.stringify({ enabled: this.enabled, volume: this.volume }));
+    }
+}
+export const sound = new Sound();

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

@@ -13,6 +13,8 @@ export interface Toast {
     action?: ToastAction;
     /** True while `action.run` is in flight; the Toaster shows the button loading. */
     pending: boolean;
+    /** Dismissed: the Toaster plays the exit while the store holds it for `TOAST_EXIT_MS`. */
+    leaving: boolean;
 }
 export interface ToastOptions {
     tone?: ToastToneInput;
@@ -22,14 +24,21 @@ export interface ToastOptions {
 export declare const TOAST_MS = 4000;
 /** Toasts with an action linger longer: the action is only reachable while visible. */
 export declare const ACTION_TOAST_MS = 7000;
+/** Matches `--dur-exit-slow`; the removal never waits on `transitionend` alone. */
+export declare const TOAST_EXIT_MS = 200;
 declare class Toasts {
     #private;
     items: Toast[];
     show(message: string, opts?: ToastOptions): number;
+    /** Hold the auto-dismiss (pointer over the toast); `resume` restarts the remaining time. */
+    pause(id: number): void;
+    resume(id: number): void;
     ok(message: string, duration?: number, action?: ToastAction): number;
     error(message: string, duration?: number, action?: ToastAction): number;
     info(message: string, duration?: number, action?: ToastAction): number;
     dismiss(id: number): void;
+    /** Drop a toast at once, skipping the exit. */
+    remove(id: number): void;
     /** Run a toast's action once: the toast stays (button loading) until run settles, then dismisses. */
     act(id: number): Promise<void>;
 }

package/dist/stores/toast.svelte.js

@@ -5,22 +5,54 @@
 export const TOAST_MS = 4000;
 /** Toasts with an action linger longer: the action is only reachable while visible. */
 export const ACTION_TOAST_MS = 7000;
+/** Matches `--dur-exit-slow`; the removal never waits on `transitionend` alone. */
+export const TOAST_EXIT_MS = 200;
 let seq = 0;
 class Toasts {
     items = $state([]);
     #timers = new Map();
+    #due = new Map();
+    #paused = new Map();
+    #arm(id, ms) {
+        this.#due.set(id, Date.now() + ms);
+        this.#timers.set(id, setTimeout(() => this.dismiss(id), ms));
+    }
+    #disarm(id) {
+        const timer = this.#timers.get(id);
+        if (timer)
+            clearTimeout(timer);
+        this.#timers.delete(id);
+        this.#due.delete(id);
+        this.#paused.delete(id);
+    }
     show(message, opts = {}) {
         const id = ++seq;
         const duration = opts.duration ?? (opts.action ? ACTION_TOAST_MS : TOAST_MS);
         const tone = opts.tone === 'danger' ? 'error' : (opts.tone ?? 'neutral');
         this.items = [
             ...this.items,
-            { id, message, tone, duration, action: opts.action, pending: false },
+            { id, message, tone, duration, action: opts.action, pending: false, leaving: false },
         ];
         if (duration > 0)
-            this.#timers.set(id, setTimeout(() => this.dismiss(id), duration));
+            this.#arm(id, duration);
         return id;
     }
+    /** Hold the auto-dismiss (pointer over the toast); `resume` restarts the remaining time. */
+    pause(id) {
+        const due = this.#due.get(id);
+        if (due === undefined)
+            return;
+        const left = Math.max(0, due - Date.now());
+        this.#disarm(id);
+        this.#paused.set(id, left);
+    }
+    resume(id) {
+        const left = this.#paused.get(id);
+        this.#paused.delete(id);
+        if (left === undefined || !this.items.some((t) => t.id === id && !t.leaving))
+            return;
+        this.#arm(id, left);
+    }
     ok(message, duration, action) {
         return this.show(message, { tone: 'ok', duration, action });
     }
@@ -31,10 +63,16 @@ class Toasts {
         return this.show(message, { tone: 'info', duration, action });
     }
     dismiss(id) {
-        const timer = this.#timers.get(id);
-        if (timer)
-            clearTimeout(timer);
-        this.#timers.delete(id);
+        this.#disarm(id);
+        const t = this.items.find((x) => x.id === id);
+        if (!t || t.leaving)
+            return;
+        this.items = this.items.map((x) => (x.id === id ? { ...x, leaving: true } : x));
+        setTimeout(() => this.remove(id), TOAST_EXIT_MS);
+    }
+    /** Drop a toast at once, skipping the exit. */
+    remove(id) {
+        this.#disarm(id);
         this.items = this.items.filter((t) => t.id !== id);
     }
     /** Run a toast's action once: the toast stays (button loading) until run settles, then dismisses. */
@@ -42,9 +80,7 @@ class Toasts {
         const t = this.items.find((x) => x.id === id);
         if (!t?.action || t.pending)
             return;
-        const timer = this.#timers.get(id);
-        if (timer)
-            clearTimeout(timer);
+        this.#disarm(id);
         this.items = this.items.map((x) => (x.id === id ? { ...x, pending: true } : x));
         try {
             await t.action.run();

package/dist/styles/reset.css

@@ -106,14 +106,31 @@ pre {
 	}
 }
 
+/* Reduced motion: fewer and gentler, not zero. Movement tokens go neutral and
+   transitions are limited to colour/opacity, so feedback still fades while
+   nothing moves. */
 @media (prefers-reduced-motion: reduce) {
+	:root {
+		--press-scale: 1;
+		--press-scale-sm: 1;
+		--press-scale-lg: 1;
+		--enter-scale: 1;
+		--tip-scale: 1;
+		--shift-xs: 0px;
+		--shift-sm: 0px;
+		--shift-md: 0px;
+		--ease-spring: var(--ease-out);
+		--ease-spring-bounce: var(--ease-out);
+	}
 	*,
 	*::before,
 	*::after {
+		scroll-behavior: auto !important;
 		animation-duration: 0.01ms !important;
 		animation-iteration-count: 1 !important;
-		transition-duration: 0.01ms !important;
-		scroll-behavior: auto !important;
+		transition-property: opacity, color, background-color, border-color, outline-color, box-shadow, fill, stroke, text-decoration-color, visibility, display, overlay !important;
+		transition-duration: var(--dur-fast) !important;
+		transition-delay: 0ms !important;
 	}
 }
 

package/dist/styles/tokens.css

@@ -123,6 +123,9 @@
 	   ballooning UI. Default 1 = no scaling. */
   --fs-scale: 1;
 
+  /* Type scale. 2xs is the floor (never go below 11px). 13 / 15 / 16 are
+	   "UI small / UI / body": no more steps between them. */
+  --fs-2xs: calc(0.6875rem * var(--fs-scale)); /* 11 */
   --fs-xs: calc(0.75rem * var(--fs-scale)); /* 12 */
   --fs-sm: calc(0.8125rem * var(--fs-scale)); /* 13 */
   --fs-base: calc(0.9375rem * var(--fs-scale)); /* 15 */
@@ -130,18 +133,28 @@
   --fs-lg: calc(1.125rem * var(--fs-scale)); /* 18 */
   --fs-xl: calc(1.375rem * var(--fs-scale)); /* 22 */
   --fs-2xl: calc(1.75rem * var(--fs-scale)); /* 28 */
+  --fs-3xl: calc(2.25rem * var(--fs-scale)); /* 36 */
 
   --fw-normal: 400;
   --fw-medium: 500;
   --fw-semibold: 600;
   --fw-bold: 700;
 
+  /* Leading paired to the scale: none = single-line controls and glyphs,
+	   snug = chips / captions / tooltips (2xs–sm), tight = fields and labels
+	   (sm–md), normal = body prose (md–lg), heading = xl and up. */
+  --lh-none: 1;
+  --lh-heading: 1.2;
   --lh-tight: 1.25;
+  --lh-snug: 1.375;
   --lh-normal: 1.5;
 
   /* ---- Spacing (4px base) ---- */
   --sp-0: 0;
+  --sp-px: 1px;
+  --sp-0-5: 0.125rem;
   --sp-1: 0.25rem;
+  --sp-1-5: 0.375rem;
   --sp-2: 0.5rem;
   --sp-3: 0.75rem;
   --sp-4: 1rem;
@@ -152,6 +165,8 @@
   --sp-12: 3rem;
 
   /* ---- Radii ---- */
+  /* Nested corners stay concentric: inner = outer - (border + padding). */
+  --r-xs: 2px;
   --r-sm: 6px;
   --r-md: 10px;
   --r-lg: 14px;
@@ -170,16 +185,46 @@
   --control-height-default: 2.5rem;
   --control-height-large: 3rem;
   --control-height: 2.75rem;
-  /* Keyboard focus indicator shared by every interactive atom. */
+  /* Per-tier control contract (sm 32 / md 40 / lg 48): height, label size,
+	   side padding, icon size. Text buttons get roomier sides via --btn-px-*. */
+  --control-sm: var(--control-height-compact);
+  --control-md: var(--control-height-default);
+  --control-lg: var(--control-height-large);
+  --control-fs-sm: var(--fs-xs);
+  --control-fs-md: var(--fs-sm);
+  --control-fs-lg: var(--fs-base);
+  --control-px-sm: var(--sp-2);
+  --control-px-md: var(--sp-3);
+  --control-px-lg: var(--sp-4);
+  --control-icon-sm: var(--icon-sm);
+  --control-icon-md: var(--icon-md);
+  --control-icon-lg: var(--icon-lg);
+  --btn-px-sm: var(--sp-3);
+  --btn-px-md: var(--sp-4);
+  --btn-px-lg: var(--sp-5);
+  /* Chip-class heights (Badge, Switch track, Checkbox box) on the 4px grid. */
+  --chip-xs: 1rem;
+  --chip-sm: 1.25rem;
+  --chip-md: 1.5rem;
+  /* Icon glyph sizes follow the text scale, not the chrome. */
+  --icon-xs: calc(0.75rem * var(--fs-scale));
+  --icon-sm: calc(0.875rem * var(--fs-scale));
+  --icon-md: calc(1rem * var(--fs-scale));
+  --icon-lg: calc(1.25rem * var(--fs-scale));
+  --icon-xl: calc(1.5rem * var(--fs-scale));
+  --disabled-opacity: 0.45;
+  /* Keyboard focus indicator shared by every interactive atom. `-inset` is for
+	   rows and clipped containers that cannot draw outside their box. */
+  --focus-ring-width: 2px;
   --focus-ring: 2px solid var(--accent);
-  --focus-ring-offset: 1px;
+  --focus-ring-offset: 2px;
+  --focus-ring-offset-inset: calc(-1 * var(--focus-ring-width));
   /* Square box scale for icon-only controls (IconButton, Button `box`/`square`,
-	   SelectButton, Popover trigger, CopyButton, FileButton). md is the classic
-	   2.25rem icon button; sm/lg reuse the control heights so a boxed control
-	   lines up with text controls in the same row. */
+	   SelectButton, Popover trigger, CopyButton, FileButton). sm/md/lg match the
+	   control heights so a boxed control lines up with text controls in a row. */
   --box-xs: 1.5rem;
   --box-sm: var(--control-height-compact);
-  --box-md: 2.25rem;
+  --box-md: 2.5rem;
   --box-lg: var(--control-height-default);
   /* Minimum hit area on coarse pointers (WCAG 2.5.8); px so it never shrinks
 	   under a small root font-size. */
@@ -212,5 +257,43 @@
   --safe-left: env(safe-area-inset-left, 0px);
   --safe-right: env(safe-area-inset-right, 0px);
 
+  /* ---- Motion ---- */
   --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+  --ease-spring: var(--ease-out);
+  --ease-spring-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
+
+  --dur-instant: 0ms;
+  --dur-press: 100ms;
+  --dur-fast: 120ms;
+  --dur-base: 180ms;
+  --dur-slow: 240ms;
+  --dur-sheet: 280ms;
+  --dur-exit-fast: 80ms;
+  --dur-exit: 140ms;
+  --dur-exit-slow: 200ms;
+  --dur-spring: 250ms;
+  --dur-spring-bounce: 330ms;
+
+  --press-scale: 0.97;
+  --press-scale-sm: 0.92;
+  --press-scale-lg: 0.985;
+  --enter-scale: 0.96;
+  --tip-scale: 0.97;
+  --shift-xs: 2px;
+  --shift-sm: 4px;
+  --shift-md: 8px;
+}
+
+@supports (animation-timing-function: linear(0, 1)) {
+  :root {
+    /* stiffness 1200, damping 56, mass 1: zeta 0.81, 1.1% overshoot, settles 250ms */
+    /* prettier-ignore */
+    --ease-spring: linear(0, 0.007 1.2%, 0.023 2.4%, 0.055 4%, 0.098 5.6%, 0.188 8.4%, 0.53 18%, 0.629 21.2%, 0.704 24%, 0.778 27.2%, 0.839 30.4%, 0.887 33.6%, 0.928 37.2%, 0.959 40.8%, 0.982 44.8%, 0.998 49.2%, 1.007 54.4%, 1.011 64.4%, 1);
+    /* stiffness 1000, damping 40, mass 1: zeta 0.63, 7.4% overshoot, settles 330ms */
+    /* prettier-ignore */
+    --ease-spring-bounce: linear(0, 0.01 1.2%, 0.033 2.4%, 0.067 3.6%, 0.122 5.2%, 0.244 7.9%, 0.502 13%, 0.618 15.5%, 0.735 18.2%, 0.824 20.6%, 0.898 23%, 0.957 25.5%, 1.007 28.2%, 1.041 30.9%, 1.067 34.8%, 1.073 39.4%, 1.064 44.2%, 1.016 58.2%, 1 66.4%, 0.995 77.3%, 1);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.73.2",
+  "version": "0.75.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",