@joewinke/jatui 0.27.1 → 0.29.0

package/dist/sound/player.js

@@ -0,0 +1,158 @@
+/**
+ * The sound player — semantic names in, policy-gated audio out.
+ *
+ *   const sound = getSoundPlayer()
+ *   sound.play('confirm')
+ *   await sound.register('incoming-call', '/sounds/ringer.mp3', { loopGapMs: 0 })
+ *   const ring = sound.play('incoming-call')   // loops
+ *   ring.stop()                                 // answered / declined
+ *
+ * `play` is synchronous and never throws: a sound that is blocked, missing or
+ * still decoding returns a handle anyway (`handle.blocked` says why it is
+ * silent). Looping sounds are re-checked whenever preferences change, so
+ * turning sound off or muting "calls" silences a ringing call immediately.
+ */
+import { createWebAudioBackend } from './backend';
+import { decideSound, readSoundEnvironment } from './policy';
+import { getSoundPreferences } from './preferences';
+import { BUILTIN_CLIPS, isSoundName, SOUND_NAMES, soundSpecFor } from './names';
+export function createSoundPlayer(options = {}) {
+    const prefs = options.preferences ?? getSoundPreferences();
+    const environment = options.environment ?? readSoundEnvironment;
+    let backend = options.backend ?? null;
+    const entries = new Map();
+    const active = new Set();
+    const now = options.now ?? (() => globalThis.performance?.now() ?? Date.now());
+    // Last time each name actually sounded — the throttle drops, never queues.
+    const lastPlayed = new Map();
+    const audio = () => (backend ??= createWebAudioBackend());
+    function clipFor(name) {
+        let entry = entries.get(name);
+        if (!entry)
+            entries.set(name, (entry = { spec: {} }));
+        if (!entry.clip) {
+            const src = entry.src
+                ? Promise.resolve(entry.src)
+                : isSoundName(name)
+                    ? BUILTIN_CLIPS[name]().catch(() => null)
+                    : Promise.resolve(null);
+            entry.clip = src.then((s) => (s ? audio().load(s) : null));
+        }
+        return entry.clip;
+    }
+    // Looping voices (ringers) obey preference changes while they play.
+    const unsubscribe = prefs.subscribe((p) => {
+        for (const a of [...active]) {
+            if (!a.spec.loop)
+                continue;
+            if (!decideSound(p, a.spec, environment()).play)
+                a.handle.stop();
+        }
+    });
+    function silent(reason) {
+        return { stop() { }, playing: false, blocked: reason };
+    }
+    return {
+        async register(name, src, spec = {}) {
+            entries.set(name, { spec, src });
+            await clipFor(name);
+        },
+        play(name, opts = {}) {
+            const base = { ...soundSpecFor(name), ...(entries.get(name)?.spec ?? {}) };
+            const spec = {
+                ...base,
+                volume: opts.volume ?? base.volume,
+                category: opts.category ?? base.category,
+                essential: opts.essential ?? base.essential,
+                loop: opts.loop ?? base.loop,
+                minIntervalMs: opts.minIntervalMs ?? base.minIntervalMs ?? 0
+            };
+            const p = prefs.get();
+            let gain;
+            if (opts.preview) {
+                gain = Math.min(1, Math.max(0, spec.volume)) * p.volume;
+                if (gain <= 0)
+                    return silent('silent');
+            }
+            else {
+                const d = decideSound(p, spec, environment());
+                if (!d.play)
+                    return silent(d.reason);
+                gain = d.gain;
+                const t = now();
+                const last = lastPlayed.get(name);
+                if (spec.minIntervalMs > 0 && last !== undefined && t - last < spec.minIntervalMs) {
+                    return silent('throttled');
+                }
+                lastPlayed.set(name, t);
+            }
+            const playbackRate = rateFor(opts);
+            let voice = null;
+            let playing = true;
+            const record = {
+                spec,
+                handle: {
+                    stop() {
+                        if (!playing)
+                            return;
+                        playing = false;
+                        active.delete(record);
+                        voice?.stop();
+                    },
+                    get playing() {
+                        return playing;
+                    },
+                    blocked: null
+                }
+            };
+            active.add(record);
+            clipFor(name).then((clip) => {
+                if (!playing)
+                    return;
+                voice = clip
+                    ? audio().start(clip, {
+                        gain,
+                        loop: spec.loop,
+                        loopGapMs: spec.loopGapMs,
+                        playbackRate,
+                        onEnded: () => record.handle.stop()
+                    })
+                    : null;
+                if (!voice)
+                    record.handle.stop();
+            });
+            return record.handle;
+        },
+        async preload(names = SOUND_NAMES) {
+            await Promise.all(names.map((n) => clipFor(n)));
+        },
+        stopAll() {
+            for (const a of [...active])
+                a.handle.stop();
+        },
+        destroy() {
+            unsubscribe();
+            for (const a of [...active])
+                a.handle.stop();
+        }
+    };
+}
+/** Effective playback rate for a play: `playbackRate × 2^(pitch/12)`, clamped to a sane range. */
+export function rateFor(opts) {
+    const rate = (opts.playbackRate ?? 1) * Math.pow(2, (opts.pitch ?? 0) / 12);
+    return Number.isFinite(rate) && rate > 0 ? Math.min(8, Math.max(0.125, rate)) : 1;
+}
+let shared = null;
+/** The app-wide player, bound to the shared preferences store. */
+export function getSoundPlayer() {
+    return (shared ??= createSoundPlayer());
+}
+/** Test seam: replace (or with no argument, drop) the shared player. */
+export function setSoundPlayer(player) {
+    shared?.destroy();
+    shared = player;
+}
+/** Shorthand for `getSoundPlayer().play(name, options)`. */
+export function playSound(name, options) {
+    return getSoundPlayer().play(name, options);
+}

package/dist/sound/policy.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The sound policy — a pure function from (preferences, sound, environment) to
+ * "play at this gain" or "don't, because …". Every play goes through it, and
+ * because it is pure the whole discipline is unit-testable without audio.
+ */
+import type { SoundCategory } from './names';
+import type { QuietHours, SoundPreferences } from './preferences';
+export interface SoundEnvironment {
+    /** The document is hidden (background tab, minimized window). */
+    hidden: boolean;
+    /** `prefers-reduced-motion: reduce` is set at the OS level. */
+    reducedMotion: boolean;
+    now: Date;
+}
+export interface SoundRequest {
+    category: SoundCategory;
+    essential: boolean;
+    /** Base gain 0–1 (the spec volume or the caller's override). */
+    volume: number;
+}
+export type SoundBlockReason = 'disabled' | 'category-muted' | 'hidden' | 'quiet-hours' | 'quiet' | 'silent'
+/** Dropped by the per-name throttle (set by the player, never by decideSound). */
+ | 'throttled';
+export type SoundDecision = {
+    play: true;
+    gain: number;
+} | {
+    play: false;
+    reason: SoundBlockReason;
+    gain: 0;
+};
+/** Is `now` inside the window? `start > end` wraps midnight; `start == end` is empty. */
+export declare function inQuietHours(quietHours: QuietHours | null, now: Date): boolean;
+export declare function decideSound(prefs: SoundPreferences, req: SoundRequest, env: SoundEnvironment): SoundDecision;
+/** Read the live browser environment; on the server everything is "quiet". */
+export declare function readSoundEnvironment(): SoundEnvironment;

package/dist/sound/policy.js

@@ -0,0 +1,56 @@
+/**
+ * The sound policy — a pure function from (preferences, sound, environment) to
+ * "play at this gain" or "don't, because …". Every play goes through it, and
+ * because it is pure the whole discipline is unit-testable without audio.
+ */
+function minutes(hhmm) {
+    const [h, m] = hhmm.split(':').map(Number);
+    return h * 60 + m;
+}
+/** Is `now` inside the window? `start > end` wraps midnight; `start == end` is empty. */
+export function inQuietHours(quietHours, now) {
+    if (!quietHours)
+        return false;
+    const s = minutes(quietHours.start);
+    const e = minutes(quietHours.end);
+    const t = now.getHours() * 60 + now.getMinutes();
+    if (s === e)
+        return false;
+    return s < e ? t >= s && t < e : t >= s || t < e;
+}
+export function decideSound(prefs, req, env) {
+    const no = (reason) => ({ play: false, reason, gain: 0 });
+    // Calls are opt-out; everything else is opt-in behind the master switch.
+    // A ringer that is silent out of the box is a missed call.
+    if (req.category !== 'calls' && !prefs.enabled)
+        return no('disabled');
+    if (!prefs.categories[req.category])
+        return no('category-muted');
+    // Calls are the one category that must reach a user who is looking elsewhere.
+    if (req.category !== 'calls') {
+        if (env.hidden)
+            return no('hidden');
+        if (inQuietHours(prefs.quietHours, env.now))
+            return no('quiet-hours');
+    }
+    if (req.category === 'ui' && !req.essential) {
+        if (prefs.quiet === 'on' || (prefs.quiet === 'auto' && env.reducedMotion))
+            return no('quiet');
+    }
+    const gain = Math.min(1, Math.max(0, req.volume)) * prefs.volume;
+    return gain > 0 ? { play: true, gain } : no('silent');
+}
+/** Read the live browser environment; on the server everything is "quiet". */
+export function readSoundEnvironment() {
+    const now = new Date();
+    if (typeof document === 'undefined')
+        return { hidden: true, reducedMotion: false, now };
+    let reducedMotion = false;
+    try {
+        reducedMotion = !!globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    }
+    catch {
+        // matchMedia unavailable — treat as no preference
+    }
+    return { hidden: document.visibilityState === 'hidden', reducedMotion, now };
+}

package/dist/sound/preferences.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Sound preferences — the ONE store every app sound goes through.
+ *
+ * Framework-free (subscribe/get/set) so it works in plain TS, node tests and
+ * Svelte alike; `SoundSettings.svelte` is a thin view over it. Persisted per
+ * device in localStorage, SSR-safe (no storage → in-memory defaults), synced
+ * across tabs via the `storage` event, and tolerant of corrupt/partial JSON.
+ *
+ * UI and notification sounds are OFF by default (opt-in); calls are ON by
+ * default (opt-out) so an incoming call rings out of the box. A host can flip
+ * the UI default per site with `<html data-sound="subtle">` (level.ts); a
+ * saved visitor preference always wins over it. A device that set the pre-0.28 boolean
+ * (`jatui-sound-enabled`) is migrated on first read.
+ */
+import { type SoundCategory } from './names';
+/** Local wall-clock window, 'HH:MM' 24h. `start > end` wraps midnight. */
+export interface QuietHours {
+    start: string;
+    end: string;
+}
+/**
+ * Non-essential UI sounds (taps, toggles, confirms):
+ * - `auto` — silenced when the OS asks for reduced motion
+ * - `on`   — always silenced
+ * - `off`  — never silenced by this preference
+ */
+export type SoundQuietMode = 'auto' | 'on' | 'off';
+export interface SoundPreferences {
+    /** Master switch for `ui` + `notifications` (opt-in). Calls ignore it — mute them via `categories.calls`. */
+    enabled: boolean;
+    /** Master volume 0–1, multiplied into every sound's base gain. */
+    volume: number;
+    /** Per-category switch — `false` mutes that category. */
+    categories: Record<SoundCategory, boolean>;
+    /** Everything except calls is silent inside this window. `null` = off. */
+    quietHours: QuietHours | null;
+    quiet: SoundQuietMode;
+}
+export declare const SOUND_PREFS_STORAGE_KEY = "jatui-sound-prefs";
+/** The pre-semantic boolean key from utils/sound.ts — read once to migrate. */
+export declare const LEGACY_SOUND_ENABLED_KEY = "jatui-sound-enabled";
+export declare const DEFAULT_SOUND_PREFERENCES: SoundPreferences;
+/** Coerce anything (parsed JSON, a partial patch) into a complete, valid object. */
+export declare function normalizeSoundPreferences(raw: unknown, base?: SoundPreferences): SoundPreferences;
+export type SoundPreferencesPatch = Partial<Omit<SoundPreferences, 'categories'>> & {
+    categories?: Partial<Record<SoundCategory, boolean>>;
+};
+export interface SoundPreferencesStore {
+    get(): SoundPreferences;
+    /** Merge a patch (categories merge per key) and persist. */
+    set(patch: SoundPreferencesPatch | ((current: SoundPreferences) => SoundPreferencesPatch)): void;
+    setCategory(category: SoundCategory, on: boolean): void;
+    reset(): void;
+    /** Calls `fn` immediately and on every change; returns the unsubscribe. */
+    subscribe(fn: (prefs: SoundPreferences) => void): () => void;
+    /** Drop the cross-tab listener. */
+    destroy(): void;
+}
+/** Minimal Storage surface — `localStorage`, `sessionStorage` or a test fake. */
+export type SoundPreferencesStorage = Pick<Storage, 'getItem' | 'setItem'>;
+export interface CreateSoundPreferencesOptions {
+    /** Defaults to `globalThis.localStorage` when present; `null` = memory only. */
+    storage?: SoundPreferencesStorage | null;
+    key?: string;
+    /** Overrides applied over the library defaults for a device with nothing saved. */
+    defaults?: SoundPreferencesPatch;
+}
+export declare function createSoundPreferences(options?: CreateSoundPreferencesOptions): SoundPreferencesStore;
+/**
+ * The app-wide store (lazy, so SSR imports never touch storage). Its defaults
+ * come from the site sound level on `<html data-sound>` at creation time, so
+ * `subtle` starts UI sound on for a visitor with nothing saved (see level.ts).
+ */
+export declare function getSoundPreferences(): SoundPreferencesStore;
+/** Test seam: replace (or with no argument, drop) the shared store. */
+export declare function setSoundPreferences(store: SoundPreferencesStore | null): void;

package/dist/sound/preferences.js

@@ -0,0 +1,152 @@
+/**
+ * Sound preferences — the ONE store every app sound goes through.
+ *
+ * Framework-free (subscribe/get/set) so it works in plain TS, node tests and
+ * Svelte alike; `SoundSettings.svelte` is a thin view over it. Persisted per
+ * device in localStorage, SSR-safe (no storage → in-memory defaults), synced
+ * across tabs via the `storage` event, and tolerant of corrupt/partial JSON.
+ *
+ * UI and notification sounds are OFF by default (opt-in); calls are ON by
+ * default (opt-out) so an incoming call rings out of the box. A host can flip
+ * the UI default per site with `<html data-sound="subtle">` (level.ts); a
+ * saved visitor preference always wins over it. A device that set the pre-0.28 boolean
+ * (`jatui-sound-enabled`) is migrated on first read.
+ */
+import { SOUND_CATEGORIES } from './names';
+import { resolveSoundLevel, soundLevelDefaults } from './level';
+export const SOUND_PREFS_STORAGE_KEY = 'jatui-sound-prefs';
+/** The pre-semantic boolean key from utils/sound.ts — read once to migrate. */
+export const LEGACY_SOUND_ENABLED_KEY = 'jatui-sound-enabled';
+export const DEFAULT_SOUND_PREFERENCES = Object.freeze({
+    enabled: false,
+    volume: 1,
+    categories: Object.freeze({ ui: true, notifications: true, calls: true }),
+    quietHours: null,
+    quiet: 'auto'
+});
+const TIME_RE = /^([01]\d|2[0-3]):[0-5]\d$/;
+function clampVolume(v, fallback) {
+    const n = typeof v === 'number' ? v : Number.NaN;
+    if (!Number.isFinite(n))
+        return fallback;
+    return Math.min(1, Math.max(0, n));
+}
+/** Coerce anything (parsed JSON, a partial patch) into a complete, valid object. */
+export function normalizeSoundPreferences(raw, base = DEFAULT_SOUND_PREFERENCES) {
+    const r = (raw && typeof raw === 'object' ? raw : {});
+    const cats = (r.categories && typeof r.categories === 'object' ? r.categories : {});
+    const categories = {};
+    for (const c of SOUND_CATEGORIES) {
+        categories[c] = typeof cats[c] === 'boolean' ? cats[c] : base.categories[c];
+    }
+    let quietHours = base.quietHours;
+    if (r.quietHours === null)
+        quietHours = null;
+    else if (r.quietHours && typeof r.quietHours === 'object') {
+        const q = r.quietHours;
+        if (typeof q.start === 'string' && typeof q.end === 'string' && TIME_RE.test(q.start) && TIME_RE.test(q.end)) {
+            quietHours = { start: q.start, end: q.end };
+        }
+    }
+    return {
+        enabled: typeof r.enabled === 'boolean' ? r.enabled : base.enabled,
+        volume: clampVolume(r.volume, base.volume),
+        categories,
+        quietHours,
+        quiet: r.quiet === 'auto' || r.quiet === 'on' || r.quiet === 'off' ? r.quiet : base.quiet
+    };
+}
+function defaultStorage() {
+    try {
+        return typeof localStorage === 'undefined' ? null : localStorage;
+    }
+    catch {
+        return null; // access can throw (sandboxed iframe, blocked cookies)
+    }
+}
+function merge(current, patch) {
+    return normalizeSoundPreferences({ ...current, ...patch, categories: { ...current.categories, ...(patch.categories ?? {}) } }, current);
+}
+export function createSoundPreferences(options = {}) {
+    const storage = options.storage === undefined ? defaultStorage() : options.storage;
+    const key = options.key ?? SOUND_PREFS_STORAGE_KEY;
+    const defaults = merge(DEFAULT_SOUND_PREFERENCES, options.defaults ?? {});
+    const listeners = new Set();
+    function read() {
+        if (!storage)
+            return defaults;
+        try {
+            const raw = storage.getItem(key);
+            if (raw != null)
+                return normalizeSoundPreferences(JSON.parse(raw), defaults);
+            if (storage.getItem(LEGACY_SOUND_ENABLED_KEY) === 'true')
+                return { ...defaults, enabled: true };
+        }
+        catch {
+            // corrupt JSON or a throwing storage — fall back to defaults
+        }
+        return defaults;
+    }
+    let current = read();
+    function emit() {
+        for (const fn of listeners)
+            fn(current);
+    }
+    function commit(next) {
+        current = next;
+        if (storage) {
+            try {
+                storage.setItem(key, JSON.stringify(next));
+            }
+            catch {
+                // quota / private mode — keep the in-memory value
+            }
+        }
+        emit();
+    }
+    const onStorage = (e) => {
+        if (e.key !== key)
+            return;
+        current = read();
+        emit();
+    };
+    const crossTab = storage != null && typeof window !== 'undefined' && storage === defaultStorage();
+    if (crossTab)
+        window.addEventListener('storage', onStorage);
+    return {
+        get: () => current,
+        set(patch) {
+            commit(merge(current, typeof patch === 'function' ? patch(current) : patch));
+        },
+        setCategory(category, on) {
+            commit(merge(current, { categories: { [category]: on } }));
+        },
+        reset() {
+            commit(defaults);
+        },
+        subscribe(fn) {
+            listeners.add(fn);
+            fn(current);
+            return () => listeners.delete(fn);
+        },
+        destroy() {
+            listeners.clear();
+            if (crossTab)
+                window.removeEventListener('storage', onStorage);
+        }
+    };
+}
+let shared = null;
+/**
+ * The app-wide store (lazy, so SSR imports never touch storage). Its defaults
+ * come from the site sound level on `<html data-sound>` at creation time, so
+ * `subtle` starts UI sound on for a visitor with nothing saved (see level.ts).
+ */
+export function getSoundPreferences() {
+    return (shared ??= createSoundPreferences({ defaults: soundLevelDefaults(resolveSoundLevel()) }));
+}
+/** Test seam: replace (or with no argument, drop) the shared store. */
+export function setSoundPreferences(store) {
+    shared?.destroy();
+    shared = store;
+}

package/dist/styles/motion.css

@@ -14,27 +14,106 @@
  * Policy: shared/craft/animation-discipline.md in the jat repo
  * ("Curve vs spring" + "Surfaces" sections).
  */
+/*
+ * Base tokens: the STANDARD-level values. Hosts and components should read
+ * the derived tokens further down (--motion-instant, --motion-travel, ...),
+ * never these — the derived ones carry the motion level.
+ */
 :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-spring-base: 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 */
+	--motion-instant-base: 80ms; /* press/hover micro-feedback (50–100ms band) */
+	--motion-fast-base: 150ms; /* default state-confirmation */
+	--motion-enter-base: 200ms; /* entering UI: modals, sheets, dropdowns, toasts */
+	--motion-move-base: 300ms; /* container morphs, cross-panel moves */
+
+	/* Level inputs (standard) */
+	--motion-scale: 1; /* duration multiplier */
+	--motion-travel: 16px; /* entrance travel distance */
+	--motion-ambient: 1; /* 1 = decorative/ambient motion may run, 0 = off */
+}
+
+/*
+ * Motion level (jatui-j6833) — data-motion="calm|standard|lively" on <html>
+ * or any subtree. Scheme + semantics: docs/motion.md.
+ *
+ * The derived tokens are RE-DECLARED on every [data-motion] element (not only
+ * on :root) because a custom property's var()/calc() resolves where it is
+ * declared — a subtree that only changed --motion-scale would otherwise
+ * inherit :root's already-computed durations.
+ *
+ * Values MUST match src/lib/motion/level.ts (tests/unit/motionLevel.test.ts).
+ */
+:root,
+[data-motion] {
+	--motion-instant: calc(var(--motion-instant-base) * var(--motion-scale));
+	--motion-fast: calc(var(--motion-fast-base) * var(--motion-scale));
+	--motion-enter: calc(var(--motion-enter-base) * var(--motion-scale));
+	--motion-move: calc(var(--motion-move-base) * var(--motion-scale));
+	--motion-spring: var(--motion-spring-base);
+}
+
+[data-motion='standard'] {
+	--motion-scale: 1;
+	--motion-travel: 16px;
+	--motion-ambient: 1;
+}
+
+/* calm: quicker, shorter travel, no springs, no ambient/decorative motion */
+[data-motion='calm'] {
+	--motion-scale: 0.75;
+	--motion-travel: 8px;
+	--motion-ambient: 0;
+	--motion-spring: var(--motion-glide);
+}
+
+/* lively: a touch slower and further — surfaces whose job is to feel alive */
+[data-motion='lively'] {
+	--motion-scale: 1.25;
+	--motion-travel: 24px;
+	--motion-ambient: 1;
+}
+
+/*
+ * Ambient/decorative motion hook: mark looping or purely decorative
+ * animation (shimmer, pulse, floating blobs, marquee) with
+ * .jatui-motion-ambient and it stops on calm surfaces and under reduced
+ * motion. Never put this class on motion that carries meaning (a spinner).
+ */
+[data-motion='calm'] .jatui-motion-ambient,
+.jatui-motion-ambient[data-motion='calm'] {
+	animation: none !important;
 }
 
 /*
  * Global reduced-motion floor: strip motion, keep end states visible.
+ * Every motion level yields to it — durations and travel collapse to 0,
+ * springs flatten, ambient motion stops.
  * 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) {
+	:root,
+	[data-motion],
+	[data-motion='calm'],
+	[data-motion='standard'],
+	[data-motion='lively'] {
+		--motion-scale: 0;
+		--motion-travel: 0px;
+		--motion-ambient: 0;
+		--motion-spring: var(--motion-glide);
+	}
+
+	.jatui-motion-ambient {
+		animation: none !important;
+	}
+
 	*,
 	*::before,
 	*::after {
@@ -92,7 +171,7 @@
 
 @keyframes jatui-reveal-fade-in-bottom {
 	from {
-		transform: translateY(24px);
+		transform: translateY(calc(var(--motion-travel) * 1.5));
 		opacity: 0;
 	}
 	to {
@@ -103,7 +182,7 @@
 
 @keyframes jatui-reveal-fade-in-top {
 	from {
-		transform: translateY(-24px);
+		transform: translateY(calc(var(--motion-travel) * -1.5));
 		opacity: 0;
 	}
 	to {
@@ -114,7 +193,7 @@
 
 @keyframes jatui-reveal-fade-in-left {
 	from {
-		transform: translateX(-24px);
+		transform: translateX(calc(var(--motion-travel) * -1.5));
 		opacity: 0;
 	}
 	to {
@@ -125,7 +204,7 @@
 
 @keyframes jatui-reveal-fade-in-right {
 	from {
-		transform: translateX(24px);
+		transform: translateX(calc(var(--motion-travel) * 1.5));
 		opacity: 0;
 	}
 	to {

package/dist/transitions/glide.d.ts

@@ -1,17 +1,27 @@
+import type { EasingFn } from '../motion/easing';
+import { type MotionDurationToken, type MotionEasingToken, type MotionLevel } from '../motion/level';
 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. */
+    /**
+     * Travel distance in px at the STANDARD level. Default: the level's
+     * `--motion-travel` (8 calm / 16 standard / 24 lively). An explicit value
+     * is scaled by the same ratio, so calm surfaces always travel half as far.
+     */
     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. */
+    /** Duration: a token or standard-level ms, scaled by the level. Default 'enter' (200ms). */
+    duration?: MotionDurationToken | number;
+    /** Delay in standard-level ms, scaled by the level. Default 0. */
     delay?: number;
+    /** Easing token or function. Default 'glide'. */
+    easing?: MotionEasingToken | EasingFn;
+    /** Pin the motion level instead of reading the nearest [data-motion]. */
+    level?: MotionLevel;
 }
 /**
  * Parameterized directional enter/exit transition.
@@ -21,11 +31,13 @@ export interface GlideParams {
  *
  * <div in:glide={{ from: 'bottom' }} out:glide={{ from: 'bottom' }}>…</div>
  *
- * Reduced-motion: opacity fade only (no translate, scale, or blur).
+ * Level-aware (jatui-j6833): duration, delay and travel scale with the
+ * surface's `data-motion` level and ease on the `--motion-glide` curve.
+ * Reduced-motion: duration 0 — the element lands in its end state.
  */
 export declare function glide(node: HTMLElement, params?: GlideParams): {
     delay: number;
     duration: number;
-    easing: (t: number) => number;
+    easing: EasingFn;
     css(t: number): string;
 };