@dloizides/ui-motion 1.0.2 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 1.2.0
+
+### Added
+- `@dloizides/ui-motion/hairline`: `HairlineFigure` (web: vanilla `@lucasmarkes/hairline@0.3.0` on the host DOM node; native: inlined bundle in `react-native-webview`, optional peer), `HairlineFigureName`, `hairlineVars` token mapping (HAIRLINE-1 "Adopt hairline isometric line figures").
+
+## 1.1.0
+
+### Added
+
+- **`computeFlipDeltas(prev, next, { staggerMs, cap })`** — the pure FLIP invert step: for each
+  item that moved, the offset it must start from, staggered in new reading order (y, then x).
+  New and unmoved items are omitted; past `cap` the rest snap.
+- **`<Reorder itemKeys spring staggerMs? cap? testID?>{(key) => node}</Reorder>`** — plays that
+  step on a keyed list when its order changes. Web reads slots synchronously from the DOM and
+  inverts in a layout effect (before paint; RN-web `onLayout` misses position-only moves); native
+  uses `onLayout`. Mid-flight items start from where they are drawn; moved items past `cap` snap.
+  Items get `${testID}-item-${key}`. No animation under reduced motion.
+- **`useFocusLift(focused, spring, { scale?, lift? })`** + pure **`focusLiftTarget`** — a focused
+  tile lifts 8px and scales 1.06 on a retargetable spring; stays put under reduced motion.
+
 ## 1.0.2
 
 ### Fixed

package/README.md

@@ -50,6 +50,12 @@ if (!mounted) return null;
 return <Animated.View style={style}>{children}</Animated.View>;
 ```
 
+### `useFocusLift(focused, spring, { scale?, lift? })`
+
+Springs a tile to `scale` (default 1.06) and `-lift` px (default 8) while `focused`, back to rest
+otherwise. A focus change retargets the running spring. Reduced motion: no movement (signal focus
+with a ring/shadow instead). Spread `style` onto an `Animated.View`. Pure target: `focusLiftTarget`.
+
 ## Components
 
 ### `<FadeIn duration? delay? translateY? style? testID>`
@@ -91,6 +97,12 @@ loading signal than the opacity pulse in `ui-feedback`'s PageSkeleton.
 <Skeleton width="60%" height={20} borderRadius={6} />
 ```
 
+### `<Reorder itemKeys spring staggerMs? cap? testID>{(key) => node}</Reorder>`
+
+FLIP re-rank for a keyed list: when `itemKeys` changes order, moved items spring from their old
+slot to the new one, staggered (default 18ms), at most `cap` (default 8) animated. Under reduced
+motion items jump. The invert maths is the pure `computeFlipDeltas`.
+
 ## Reduced motion
 
 Every primitive honours the OS "reduce motion" setting: `FadeIn` shows content at rest,
@@ -106,3 +118,11 @@ verified in the app E2E suites.
 ## License
 
 MIT © dloizides
+
+## HairlineFigure (`@dloizides/ui-motion/hairline`)
+
+Wraps `@lucasmarkes/hairline@0.3.0` (exact pin) so apps never import it directly. Props: `figure` (`HairlineFigureName`), `colors` (a `ModeColors` from `@dloizides/design-tokens`, mapped onto `--hairline-*` by `hairlineVars`), `intensity` (0-1), `label` (translated), `testID`.
+
+- 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`).

package/dist/constants-BrJ7VJYu.d.mts

@@ -0,0 +1,54 @@
+import { ModeColors } from '@dloizides/design-tokens';
+
+declare const enum HairlineFigureName {
+    Basket = "basket",
+    Branches = "branches",
+    Cabinet = "cabinet",
+    Dish = "dish",
+    Drawer = "drawer",
+    Elevator = "elevator",
+    Exploded = "exploded",
+    Keyboard = "keyboard",
+    Laptop = "laptop",
+    Lockers = "lockers",
+    Loupe = "loupe",
+    Padlock = "padlock",
+    Patch = "patch",
+    Phone = "phone",
+    Phosphor = "phosphor",
+    Plot = "plot",
+    Plug = "plug",
+    Query = "query",
+    Rail = "rail",
+    Riffle = "riffle",
+    Router = "router",
+    Sieve = "sieve",
+    Slow = "slow",
+    Terminal = "terminal",
+    Terrain = "terrain",
+    Turntable = "turntable",
+    Vault = "vault"
+}
+
+interface HairlineFigureProps {
+    /** Which upstream figure to draw. */
+    figure: HairlineFigureName;
+    /** Mode colours of the current theme; mapped onto the `--hairline-*` vars. */
+    colors: ModeColors;
+    /** Pointer response strength, 0 (subtle) to 1 (strong). */
+    intensity?: number;
+    /** Accessible name of the figure (pass a translated string). */
+    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). */
+declare const hairlineVars: (colors: ModeColors) => HairlineVars;
+
+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 };

package/dist/constants-BrJ7VJYu.d.ts

@@ -0,0 +1,54 @@
+import { ModeColors } from '@dloizides/design-tokens';
+
+declare const enum HairlineFigureName {
+    Basket = "basket",
+    Branches = "branches",
+    Cabinet = "cabinet",
+    Dish = "dish",
+    Drawer = "drawer",
+    Elevator = "elevator",
+    Exploded = "exploded",
+    Keyboard = "keyboard",
+    Laptop = "laptop",
+    Lockers = "lockers",
+    Loupe = "loupe",
+    Padlock = "padlock",
+    Patch = "patch",
+    Phone = "phone",
+    Phosphor = "phosphor",
+    Plot = "plot",
+    Plug = "plug",
+    Query = "query",
+    Rail = "rail",
+    Riffle = "riffle",
+    Router = "router",
+    Sieve = "sieve",
+    Slow = "slow",
+    Terminal = "terminal",
+    Terrain = "terrain",
+    Turntable = "turntable",
+    Vault = "vault"
+}
+
+interface HairlineFigureProps {
+    /** Which upstream figure to draw. */
+    figure: HairlineFigureName;
+    /** Mode colours of the current theme; mapped onto the `--hairline-*` vars. */
+    colors: ModeColors;
+    /** Pointer response strength, 0 (subtle) to 1 (strong). */
+    intensity?: number;
+    /** Accessible name of the figure (pass a translated string). */
+    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). */
+declare const hairlineVars: (colors: ModeColors) => HairlineVars;
+
+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 };

package/dist/hairline/native.d.mts

@@ -0,0 +1,9 @@
+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 '@dloizides/design-tokens';
+
+/** Renders a hairline figure in a WebView with the upstream bundle inlined (iOS/Android). */
+declare const HairlineFigure: ({ figure, colors, intensity, label, testID, }: HairlineFigureProps) => React.ReactElement;
+
+export { HairlineFigure, HairlineFigureProps };

package/dist/hairline/native.d.ts

@@ -0,0 +1,9 @@
+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 '@dloizides/design-tokens';
+
+/** Renders a hairline figure in a WebView with the upstream bundle inlined (iOS/Android). */
+declare const HairlineFigure: ({ figure, colors, intensity, label, testID, }: HairlineFigureProps) => React.ReactElement;
+
+export { HairlineFigure, HairlineFigureProps };