use-scroll-animate 8.7.0 → 8.9.0

package/CHANGELOG.md

@@ -7,6 +7,37 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [8.9.0] - 2026-10-09
+
+### Added
+- **Low-code component export (8.9)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
+  - `exportComponent(el, 'html' | 'react' | 'vue' | 'json')` — copy-paste code for any live, configured element (runtime attributes / generated parts stripped; HTML gets a CDN module import, React a `useEffect(defineWidgets)` component, Vue an SFC); `describeComponent(el)` — the portable JSON (`motionary/component@1`) the 9.0 declarative DSL reads.
+  - `<usa-code-export>` — shows that code in HTML / React / Vue / JSON tabs (`formats`) for its child or `for` target, follows attribute changes, one-click copy (`copy()`, `usa:copy` { format, ok }); `format`, `code`.
+  - `<usa-prop-panel>` — property editor bound to a live component's attributes (`for` selector or `previous`): `props="value:number:0:100, icon:select:star|heart, readonly:boolean, color:color, label:text"` (falls back to its `observedAttributes`); `reset()` (also a Reset button); `usa:prop` { name, value }; `parseProps()`.
+- `usa-codemod-9` (`npx usa-codemod-9 --write src`) and [docs/upgrading-9.md](docs/upgrading-9.md).
+- `applyMotionTheme()`, `MOTION_THEMES`, `MOTION_THEME_NAMES`, `<usa-motion-theme>` / `defineMotionTheme()` — the 9.0 names of the 5.8 motion-theme API (`motionary/components/effects`).
+
+### Deprecated (removed in 9.0)
+- `applyTheme()`, `THEMES`, `THEME_NAMES`, `<usa-theme>` / `defineTheme()` — renamed with a `Motion` prefix so they can't be confused with the 8.6 surface themes (`applySurfaceTheme`, `SURFACE_THEMES`). `applyTheme()` and `<usa-theme>` warn once in the console; the codemod rewrites identifiers and tags.
+
+### Accessibility
+- Code export: a `tablist` with arrow keys and a focusable `tabpanel`; the copy button reports "Copied ✓" in text. Property panel: a labelled `form` with a `<label>` for every field, `<output>` readouts and `role="switch"` checkboxes.
+
+### Fixed
+- the low-code export test checked the whole `<usa-hud-panel>` description for `usa-hud` (always present in the tag name); it now checks that the generated HUD parts are stripped from the children.
+
+## [8.8.0] - 2026-10-09
+
+### Added
+- **2 new components (8.8)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
+  - `<usa-panorama>` — 360° panorama viewer: drag / swipe to look around with inertia, slow `autorotate` (°/s, `0` off, pauses on hover / focus), ← / → keys, compass, built-in procedural landscape when no `src`; "View in XR" badge when WebXR immersive sessions are offered (`usa:xr` { mode }, `usa:xr-request`); `yaw`, `lookAt(deg)`; `usa:look` { yaw }.
+  - `<usa-spatial-card>` — spatial-computing window: frosted glass floating in depth, gaze highlight following the pointer, `[data-depth]` layers, `[slot=ornament]` bar below the window; eases forward on hover / focus, sinks on press; `active`; `usa:focus-depth` { active }.
+- **XR / spatial pack — `motionary/fx/spatial`** (= `motionary/components/fx-spatial`, `registerSpatialPack()`, also in `registerEffectPacks()`): `portal-open` (enter), `orbit-in` (enter), `spatial-float` (loop), `depth-pop` (attention). `yawToOffset()`, `xrSupport()` (WebXR session detection).
+- Showcase: 4 new gallery cards with copyable code, live demos and live Store thumbnails.
+
+### Accessibility
+- The panorama is a focusable `img` (roledescription "panorama") with your `label`; ← / → look around; auto-rotate pauses while hovered or focused. The spatial card keeps its content in reading order, the gaze layer is `aria-hidden`. Reduced motion: no auto-rotate, inertia or depth transitions; `portal-open` / `orbit-in` just show, `spatial-float` is skipped, `depth-pop` does nothing.
+
 ## [8.7.0] - 2026-10-09
 
 ### Added

package/bin/usa-codemod-9.mjs

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+// motionary 8.x → 9.0 codemod.
+//   npx usa-codemod-9 [--write] [paths…]   (default: ./src; dry run without --write)
+// Rewrites (8.9 deprecations, removed in 9.0):
+//   1. applyTheme → applyMotionTheme, THEMES → MOTION_THEMES, THEME_NAMES → MOTION_THEME_NAMES
+//      (the 5.8 motion-theme API of motionary/components/effects; the 8.6 surface themes are
+//      applySurfaceTheme / SURFACE_THEMES and are not touched).
+//   2. <usa-theme …> → <usa-motion-theme …> (<usa-theme-switcher> / <usa-theme-surface> untouched).
+// Reported for a manual change:
+//   3. document.createElement('usa-theme'), CSS selectors on usa-theme.
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'node:fs';
+import { join, extname } from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+const EXT = new Set(['.js', '.mjs', '.cjs', '.jsx', '.ts', '.tsx', '.mts', '.cts', '.vue', '.svelte', '.html', '.astro', '.md', '.mdx', '.css', '.scss']);
+export const RENAMES = { applyTheme: 'applyMotionTheme', THEMES: 'MOTION_THEMES', THEME_NAMES: 'MOTION_THEME_NAMES' };
+export const TAGS = { 'usa-theme': 'usa-motion-theme' };
+
+/** Apply every rewrite to one file's source. Returns { code, changes, manual }. */
+export function transform(source) {
+  const changes = [];
+  const manual = [];
+  let code = source;
+  for (const [from, to] of Object.entries(RENAMES)) {
+    const re = new RegExp(`(?<![\\w$.])${from}(?![\\w$])`, 'g');
+    const n = (code.match(re) || []).length;
+    if (n) {
+      code = code.replace(re, to);
+      changes.push(`${from} → ${to} (${n}×)`);
+    }
+  }
+  let t = 0;
+  code = code.replace(/<(\/?)usa-theme(?=[\s>/])/g, (_, slash) => {
+    t++;
+    return `<${slash}usa-motion-theme`;
+  });
+  if (t) changes.push(`<usa-theme> → <usa-motion-theme> (${t}×)`);
+  if (/createElement\((['"`])usa-theme\1\)/.test(code)) manual.push("document.createElement('usa-theme') — use 'usa-motion-theme' (removed in 9.0)");
+  if (/(^|[\s,{}>+~])usa-theme(?=[\s.:#[{,>+~)]|$)/m.test(code.replace(/<\/?[a-z][^>]*>/g, ''))) manual.push('CSS selectors on usa-theme — select usa-motion-theme');
+  return { code, changes, manual };
+}
+
+function* walk(p) {
+  const st = statSync(p);
+  if (st.isDirectory()) {
+    for (const f of readdirSync(p)) if (!['node_modules', 'dist', '.git'].includes(f)) yield* walk(join(p, f));
+  } else if (EXT.has(extname(p))) yield p;
+}
+
+export function run(args) {
+  const write = args.includes('--write');
+  const paths = args.filter((a) => !a.startsWith('--'));
+  let files = 0;
+  let edits = 0;
+  let todo = 0;
+  for (const root of paths.length ? paths : ['src'])
+    for (const f of walk(root)) {
+      const src = readFileSync(f, 'utf8');
+      const { code, changes, manual } = transform(src);
+      if (!changes.length && !manual.length) continue;
+      files++;
+      edits += changes.length;
+      todo += manual.length;
+      console.log(`${f}${changes.map((c) => `\n  - ${c}`).join('')}${manual.map((c) => `\n  ! manual: ${c}`).join('')}`);
+      if (write && changes.length) writeFileSync(f, code);
+    }
+  console.log(`\n${files} file(s), ${edits} rewrite(s)${write ? ' applied' : ' (dry run — pass --write to apply)'}, ${todo} manual change(s).`);
+  return { files, edits, todo };
+}
+
+if (import.meta.url === pathToFileURL(process.argv[1] || '').href) run(process.argv.slice(2));

package/dist/components/effects.cjs

@@ -1157,6 +1157,10 @@ const THEMES = {
     },
 };
 const THEME_NAMES = Object.keys(THEMES);
+/** The 5.8 motion theme packs (8.9 name of `THEMES`). */
+const MOTION_THEMES = THEMES;
+/** Names of the 5.8 motion theme packs (8.9 name of `THEME_NAMES`). */
+const MOTION_THEME_NAMES = THEME_NAMES;
 const BASE_CSS = `[data-usa-theme]{background:var(--usa-theme-bg);color:var(--usa-theme-fg);font-family:var(--usa-theme-font)}
 [data-usa-theme] .usa-surface{background:var(--usa-theme-surface);border:var(--usa-theme-border);border-radius:var(--usa-theme-radius);box-shadow:var(--usa-theme-shadow)}
 [data-usa-theme] .usa-accent{color:var(--usa-theme-accent)}
@@ -1180,8 +1184,16 @@ function themeCss(t, selector) {
     const p = pack(t);
     return `${selector || `[data-usa-theme=${p.name}]`}{${Object.entries(themeVars(p)).map(([k, v]) => `${k}:${v}`).join(';')}}`;
 }
-/** Apply a theme to `root` (default `<html>`). Returns an undo. */
+/**
+ * Apply a motion theme to `root` (default `<html>`). Returns an undo.
+ * @deprecated 8.9 — removed in 9.0. Use `applyMotionTheme()` (same signature); `npx usa-codemod-9 --write src`.
+ */
 function applyTheme(t, root) {
+    base.deprecate('applyTheme', 'applyTheme() is deprecated and removed in 9.0 — use applyMotionTheme() (same signature). Run `npx usa-codemod-9 --write src`.');
+    return applyMotionTheme(t, root);
+}
+/** Apply a 5.8 motion theme to `root` (default `<html>`). Returns an undo (8.9). */
+function applyMotionTheme(t, root) {
     const p = pack(t);
     const el = root || document.documentElement;
     base.adoptStyles('usa-theme', BASE_CSS);
@@ -1280,7 +1292,9 @@ function defineTheme(tag = 'usa-theme') {
             return THEMES[n] ? n : 'neon';
         }
         mount() {
-            this.onCleanup(applyTheme(this.theme, this));
+            if (this.localName === 'usa-theme')
+                base.deprecate('usa-theme', '<usa-theme> is deprecated and removed in 9.0 — use <usa-motion-theme> (same name / data-theme-fx). Run `npx usa-codemod-9 --write src`.');
+            this.onCleanup(applyMotionTheme(this.theme, this));
             this.querySelectorAll('[data-theme-fx]').forEach((el) => {
                 const role = (el.dataset.themeFx || 'click');
                 if (!THEME_ROLES.includes(role))
@@ -1297,6 +1311,10 @@ function defineTheme(tag = 'usa-theme') {
         }
     }, { id: 'usa-theme-el', text: 'usa-theme{display:block}' });
 }
+/** `<usa-motion-theme name="neon">` — the 8.9 name of `<usa-theme>` (removed in 9.0). */
+function defineMotionTheme(tag = 'usa-motion-theme') {
+    return defineTheme(tag);
+}
 
 /**
  * motionary/components/effects — the 5.x effect packs, all
@@ -1356,6 +1374,7 @@ function defineEffectElements() {
     audio.defineAudio();
     defineGestureFx();
     defineTheme();
+    defineMotionTheme();
     player.definePlayer();
 }
 /** Register the built-ins and every pack (idempotent). */
@@ -1392,6 +1411,8 @@ exports.CURSOR_FX = CURSOR_FX;
 exports.EFFECT_PACKS = EFFECT_PACKS;
 exports.GESTURES = GESTURES;
 exports.MICRO_FX = MICRO_FX;
+exports.MOTION_THEMES = MOTION_THEMES;
+exports.MOTION_THEME_NAMES = MOTION_THEME_NAMES;
 exports.PAGE_FX = PAGE_FX;
 exports.PHYSICS_FX = PHYSICS_FX;
 exports.THEMES = THEMES;
@@ -1399,12 +1420,14 @@ exports.THEME_FX = THEME_FX;
 exports.THEME_NAMES = THEME_NAMES;
 exports.THEME_ROLES = THEME_ROLES;
 exports.angleDelta = angleDelta;
+exports.applyMotionTheme = applyMotionTheme;
 exports.applyTheme = applyTheme;
 exports.bindGesture = bindGesture;
 exports.bounceKeyframes = bounceKeyframes;
 exports.bumpCount = bumpCount;
 exports.defineEffectElements = defineEffectElements;
 exports.defineGestureFx = defineGestureFx;
+exports.defineMotionTheme = defineMotionTheme;
 exports.defineTheme = defineTheme;
 exports.flingVelocity = flingVelocity;
 exports.playThemeEffect = playThemeEffect;