@dloizides/ui-motion 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 1.3.0
+
+### Added
+- `@dloizides/ui-motion/logo`: framework-free logo player (LOGO-1 "A logo pipeline that makes beautiful, animatable marks"). `playLogo(svg, timeline, { reducedMotion?, iterations? })` plays `data-motion-layer` beats via the Web Animations API with design-token durations/easings; reduced motion applies the final frame at once. `bindMicro(svg, timeline, hover|focus|loading)` binds micro-animations. No React in its import graph.
+
+### Changed
+- `react` and `react-native` peers are optional, so a non-React app can install the package for `/logo`.
+
+## 1.2.1
+
+### Fixed
+- Hairline bundle generator now really escapes `</` (was a no-op) and fails the build if `</` or `<!--` survive.
+- `HairlineVarName` is a `const enum` (own file) instead of a string union.
+- Native `HairlineFigure`: exposed as an image only when a non-empty `label` is passed; `intensity` / `label` changes call the mounted figure's `update()` instead of reloading the WebView.
+
 ## 1.2.0
 
 ### Added

package/README.md

@@ -126,3 +126,23 @@ Wraps `@lucasmarkes/hairline@0.3.0` (exact pin) so apps never import it directly
 - Web (RN-web, `browser` condition): mounts the vanilla API on the View's DOM node; destroyed on unmount.
 - Native (`react-native` condition): renders the upstream bundle inlined as HTML in `react-native-webview` (optional peer; install it to use this subpath on iOS/Android). One figure per screen.
 - A figure is decoration: never put information a user needs in it. On touch-first screens prefer horizontal/area figures (`terrain`, `riffle`, `keyboard`, `router`, `rail`, `dish`, `turntable`, `plot`).
+
+## Logo player (`@dloizides/ui-motion/logo`)
+
+Framework-free (no React in its import graph; only `@dloizides/design-tokens`), for plain HTML pages and vanilla Vite apps. The mark is drawn elsewhere; name its parts with `data-motion-layer="<name>"`.
+
+```ts
+import { playLogo, bindMicro, type LogoTimeline } from '@dloizides/ui-motion/logo';
+
+const intro: LogoTimeline = [
+  { layer: 'sheet', keyframes: [{ opacity: 0, transform: 'translateY(6px)' }, { opacity: 1, transform: 'none' }], duration: 'slow', easing: 'decelerate' },
+  { layer: 'fold', keyframes: [{ opacity: 0 }, { opacity: 1 }], duration: 'base', delay: 160 },
+];
+const { finished, cancel } = playLogo(svg, intro);
+const unbind = bindMicro(svg, pulse, 'hover');
+```
+
+- `playLogo(svg, timeline, { reducedMotion?, iterations? }) => { finished, cancel }`: one WAAPI animation per matching layer, `fill: 'both'`; `finished` resolves on completion or cancel.
+- Beat: `{ layer, keyframes, duration: 'instant'|'fast'|'base'|'slow'|ms, easing?: 'standard'|'decelerate'|'accelerate', delay?: ms }`, resolved from `DEFAULT_MOTION`.
+- Reduced motion (option, else `prefers-reduced-motion`) or no WAAPI: the last keyframe is applied at once, no animation.
+- `bindMicro(svg, timeline, 'hover'|'focus'|'loading', { reducedMotion? }) => unbind`: hover = pointerenter/leave, focus = focusin/out, loading = loops until unbind; nothing under reduced motion.

package/dist/{constants-BrJ7VJYu.d.mts → constants-DXSyrmvQ.d.mts}

@@ -30,6 +30,14 @@ declare const enum HairlineFigureName {
     Vault = "vault"
 }
 
+declare const enum HairlineVarName {
+    Plate = "--hairline-plate",
+    Hi = "--hairline-hi",
+    Edge = "--hairline-edge",
+    Mid = "--hairline-mid",
+    Lo = "--hairline-lo"
+}
+
 interface HairlineFigureProps {
     /** Which upstream figure to draw. */
     figure: HairlineFigureName;
@@ -41,7 +49,6 @@ interface HairlineFigureProps {
     label?: string;
     testID?: string;
 }
-type HairlineVarName = '--hairline-plate' | '--hairline-hi' | '--hairline-edge' | '--hairline-mid' | '--hairline-lo';
 type HairlineVars = Record<HairlineVarName, string>;
 
 /** Maps one theme mode's colour tokens onto the hairline palette vars (stroke width stays upstream). */
@@ -51,4 +58,4 @@ declare const HAIRLINE_TEST_ID = "motion-hairline-figure";
 declare const HAIRLINE_ASPECT_RATIO: number;
 declare const DEFAULT_HAIRLINE_INTENSITY = 0.5;
 
-export { DEFAULT_HAIRLINE_INTENSITY as D, type HairlineFigureProps as H, HAIRLINE_ASPECT_RATIO as a, HAIRLINE_TEST_ID as b, HairlineFigureName as c, type HairlineVarName as d, type HairlineVars as e, hairlineVars as h };
+export { DEFAULT_HAIRLINE_INTENSITY as D, type HairlineFigureProps as H, HAIRLINE_ASPECT_RATIO as a, HAIRLINE_TEST_ID as b, HairlineFigureName as c, HairlineVarName as d, type HairlineVars as e, hairlineVars as h };

package/dist/{constants-BrJ7VJYu.d.ts → constants-DXSyrmvQ.d.ts}

@@ -30,6 +30,14 @@ declare const enum HairlineFigureName {
     Vault = "vault"
 }
 
+declare const enum HairlineVarName {
+    Plate = "--hairline-plate",
+    Hi = "--hairline-hi",
+    Edge = "--hairline-edge",
+    Mid = "--hairline-mid",
+    Lo = "--hairline-lo"
+}
+
 interface HairlineFigureProps {
     /** Which upstream figure to draw. */
     figure: HairlineFigureName;
@@ -41,7 +49,6 @@ interface HairlineFigureProps {
     label?: string;
     testID?: string;
 }
-type HairlineVarName = '--hairline-plate' | '--hairline-hi' | '--hairline-edge' | '--hairline-mid' | '--hairline-lo';
 type HairlineVars = Record<HairlineVarName, string>;
 
 /** Maps one theme mode's colour tokens onto the hairline palette vars (stroke width stays upstream). */
@@ -51,4 +58,4 @@ declare const HAIRLINE_TEST_ID = "motion-hairline-figure";
 declare const HAIRLINE_ASPECT_RATIO: number;
 declare const DEFAULT_HAIRLINE_INTENSITY = 0.5;
 
-export { DEFAULT_HAIRLINE_INTENSITY as D, type HairlineFigureProps as H, HAIRLINE_ASPECT_RATIO as a, HAIRLINE_TEST_ID as b, HairlineFigureName as c, type HairlineVarName as d, type HairlineVars as e, hairlineVars as h };
+export { DEFAULT_HAIRLINE_INTENSITY as D, type HairlineFigureProps as H, HAIRLINE_ASPECT_RATIO as a, HAIRLINE_TEST_ID as b, HairlineFigureName as c, HairlineVarName as d, type HairlineVars as e, hairlineVars as h };

package/dist/hairline/native.d.mts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { H as HairlineFigureProps } from '../constants-BrJ7VJYu.mjs';
-export { D as DEFAULT_HAIRLINE_INTENSITY, a as HAIRLINE_ASPECT_RATIO, b as HAIRLINE_TEST_ID, c as HairlineFigureName, d as HairlineVarName, e as HairlineVars, h as hairlineVars } from '../constants-BrJ7VJYu.mjs';
+import { H as HairlineFigureProps } from '../constants-DXSyrmvQ.mjs';
+export { D as DEFAULT_HAIRLINE_INTENSITY, a as HAIRLINE_ASPECT_RATIO, b as HAIRLINE_TEST_ID, c as HairlineFigureName, d as HairlineVarName, e as HairlineVars, h as hairlineVars } from '../constants-DXSyrmvQ.mjs';
 import '@dloizides/design-tokens';
 
 /** Renders a hairline figure in a WebView with the upstream bundle inlined (iOS/Android). */

package/dist/hairline/native.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { H as HairlineFigureProps } from '../constants-BrJ7VJYu.js';
-export { D as DEFAULT_HAIRLINE_INTENSITY, a as HAIRLINE_ASPECT_RATIO, b as HAIRLINE_TEST_ID, c as HairlineFigureName, d as HairlineVarName, e as HairlineVars, h as hairlineVars } from '../constants-BrJ7VJYu.js';
+import { H as HairlineFigureProps } from '../constants-DXSyrmvQ.js';
+export { D as DEFAULT_HAIRLINE_INTENSITY, a as HAIRLINE_ASPECT_RATIO, b as HAIRLINE_TEST_ID, c as HairlineFigureName, d as HairlineVarName, e as HairlineVars, h as hairlineVars } from '../constants-DXSyrmvQ.js';
 import '@dloizides/design-tokens';
 
 /** Renders a hairline figure in a WebView with the upstream bundle inlined (iOS/Android). */