@joewinke/jatui 0.27.0 → 0.28.0

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;
 };

package/dist/transitions/glide.js

@@ -1,4 +1,5 @@
-// direction taxonomy after animista.net (Ana Travas, BSD-2-Clause site license); keyframes re-authored on jatui motion tokens
+import { MOTION_LEVEL_TRAVEL } from '../motion/level';
+import { resolveMotionTiming } from '../motion/transitions';
 /** Map from direction → [dx, dy] unit vector for the entrance travel. */
 const ORIGIN_VECTOR = {
     center: [0, 0],
@@ -19,44 +20,38 @@ const ORIGIN_VECTOR = {
  *
  * <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 function glide(node, params = {}) {
-    const { from = 'bottom', distance = 16, scale, blur = false, duration = 200, delay = 0, } = params;
-    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const { from = 'bottom', distance, scale, blur = false } = params;
+    const { ctx, delay, duration, easing } = resolveMotionTiming(node, params, {
+        duration: 'enter',
+        easing: 'glide'
+    });
     const [ux, uy] = ORIGIN_VECTOR[from];
+    const travel = distance === undefined
+        ? ctx.travel
+        : distance * (ctx.travel / MOTION_LEVEL_TRAVEL.standard);
     // Entrance start state — element travels FROM this position TO its natural position
-    const tx = prefersReduced ? 0 : ux * distance;
-    const ty = prefersReduced ? 0 : uy * distance;
-    const s = (!prefersReduced && scale !== undefined) ? scale : 1;
-    const blurPx = (!prefersReduced && blur) ? 4 : 0;
-    function buildTransform(progress) {
-        // progress goes 0 → 1 on enter; Svelte reverses for exit
-        const invP = 1 - progress;
-        const x = tx * invP;
-        const y = ty * invP;
-        const sc = 1 - (1 - s) * invP;
-        const b = blurPx * invP;
-        let t = `translate(${x}px, ${y}px)`;
-        if (s !== 1)
-            t += ` scale(${sc})`;
-        const filter = b > 0 ? `blur(${b.toFixed(1)}px)` : '';
-        return { transform: t, filter };
-    }
+    const tx = ux * travel;
+    const ty = uy * travel;
+    const s = !ctx.reduced && scale !== undefined ? scale : 1;
+    const blurPx = !ctx.reduced && blur ? 4 : 0;
     return {
         delay,
         duration,
-        easing: (t) => t, // easing applied via CSS var below
+        easing,
         css(t) {
-            // t: 0 = start, 1 = end (for `in:`; Svelte inverts for `out:`)
-            const { transform, filter } = buildTransform(t);
-            // Apply the glide easing via CSS transition so the CSS var is honored
-            return `
-				opacity: ${t};
-				transform: ${transform};
-				${filter ? `filter: ${filter};` : ''}
-				transition-timing-function: var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1));
-			`;
+            // t: 0 = start, 1 = end (for `in:`; Svelte inverts for `out:`), already eased
+            const invP = 1 - t;
+            let transform = `translate(${tx * invP}px, ${ty * invP}px)`;
+            if (s !== 1)
+                transform += ` scale(${1 - (1 - s) * invP})`;
+            const b = blurPx * invP;
+            return (`opacity: ${Math.min(1, Math.max(0, t))}; transform: ${transform};` +
+                (b > 0 ? ` filter: blur(${b.toFixed(1)}px);` : ''));
         },
     };
 }

package/dist/utils/sound.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Legacy sound API (pre-semantic). Kept source-compatible, but every call now
+ * routes through the shared preferences store and player in `../sound`, so
+ * old call sites obey volume, categories, quiet hours and the hidden-tab rule
+ * too. New code: `import { playSound, getSoundPreferences } from '../../../dist'`.
+ */
 export declare function isSoundEnabled(): boolean;
 export declare function setSoundEnabled(enabled: boolean): void;
 export declare function registerSound(name: string, dataUri: string): Promise<void>;

package/dist/utils/sound.js

@@ -1,62 +1,20 @@
-let ctx = null;
-const buffers = new Map();
-const STORAGE_KEY = 'jatui-sound-enabled';
-function getContext() {
-    if (ctx)
-        return ctx;
-    try {
-        ctx = new AudioContext();
-        return ctx;
-    }
-    catch {
-        return null;
-    }
-}
+/**
+ * Legacy sound API (pre-semantic). Kept source-compatible, but every call now
+ * routes through the shared preferences store and player in `../sound`, so
+ * old call sites obey volume, categories, quiet hours and the hidden-tab rule
+ * too. New code: `import { playSound, getSoundPreferences } from '../../../dist'`.
+ */
+import { getSoundPlayer } from '../sound/player';
+import { getSoundPreferences } from '../sound/preferences';
 export function isSoundEnabled() {
-    if (typeof localStorage === 'undefined')
-        return false;
-    return localStorage.getItem(STORAGE_KEY) === 'true';
+    return getSoundPreferences().get().enabled;
 }
 export function setSoundEnabled(enabled) {
-    if (typeof localStorage === 'undefined')
-        return;
-    localStorage.setItem(STORAGE_KEY, String(enabled));
+    getSoundPreferences().set({ enabled });
 }
 export async function registerSound(name, dataUri) {
-    const audioCtx = getContext();
-    if (!audioCtx)
-        return;
-    try {
-        const base64 = dataUri.split(',')[1];
-        const binary = atob(base64);
-        const bytes = new Uint8Array(binary.length);
-        for (let i = 0; i < binary.length; i++)
-            bytes[i] = binary.charCodeAt(i);
-        const buffer = await audioCtx.decodeAudioData(bytes.buffer);
-        buffers.set(name, buffer);
-    }
-    catch {
-        // Silently ignore decode failures — clip may not be supported in this browser
-    }
+    await getSoundPlayer().register(name, dataUri);
 }
 export function play(name, options = {}) {
-    if (!isSoundEnabled())
-        return;
-    const audioCtx = getContext();
-    if (!audioCtx)
-        return;
-    const buffer = buffers.get(name);
-    if (!buffer)
-        return;
-    // Resume suspended context (browser autoplay policy requires user gesture first)
-    if (audioCtx.state === 'suspended') {
-        audioCtx.resume().catch(() => { });
-    }
-    const source = audioCtx.createBufferSource();
-    const gain = audioCtx.createGain();
-    gain.gain.value = options.volume ?? 0.15;
-    source.buffer = buffer;
-    source.connect(gain);
-    gain.connect(audioCtx.destination);
-    source.start();
+    getSoundPlayer().play(name, options);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",
@@ -81,7 +81,7 @@
     "build": "vite build",
     "build:site": "npm run package && vite build",
     "preview": "vite preview",
-    "package": "svelte-package --input src/lib --output dist && node scripts/compile-rune-modules.mjs",
+    "package": "svelte-package --input src/lib --output dist && node scripts/compile-rune-modules.mjs && node scripts/verify-dist.mjs",
     "check:demos": "node scripts/check-demo-coverage.mjs",
     "guard": "node scripts/check-demo-coverage.mjs",
     "test:dist": "svelte-kit sync && vitest run --config vitest.dist.config.ts",