@wzrhine/effects 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -1
- package/dist/ArchiveReveal.d.ts +14 -3
- package/dist/ArchiveReveal.d.ts.map +1 -1
- package/dist/ArchiveReveal.js +24 -5
- package/dist/ArchiveReveal.js.map +1 -1
- package/dist/OrbitalDiagram.d.ts +6 -1
- package/dist/OrbitalDiagram.d.ts.map +1 -1
- package/dist/OrbitalDiagram.js +14 -11
- package/dist/OrbitalDiagram.js.map +1 -1
- package/dist/ScanSurface.d.ts +6 -3
- package/dist/ScanSurface.d.ts.map +1 -1
- package/dist/ScanSurface.js +7 -5
- package/dist/ScanSurface.js.map +1 -1
- package/dist/effects.css +15 -2
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -4,7 +4,14 @@
|
|
|
4
4
|
|
|
5
5
|
## [Unreleased]
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## [0.2.0] - 2026-10-14
|
|
8
|
+
|
|
9
|
+
### Added
|
|
10
|
+
- **B9 · 展示动效接入补齐**：`OrbitalDiagram` 新增 `size`、节点 `tone`（accent / info / warning / success / neutral）与 `selected` / `selectedLabel`（选中态连同本地化读屏后缀）；`ScanSurface` 新增 `tone`、`duration`（毫秒或 `fast` / `base` / `panel` / `showcase` 预设）与 `containerType` / `overflow`（容器副作用开关）；`ArchiveReveal` 支持原生属性与 `ref` 透传、视口暂停与受控 `paused`。
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
- peer `motion` 为 `^14.0.0`，本仓开发与验证版本为 14.1.0；与其余四个包同一版本线。
|
|
14
|
+
- 迁移：升级到 motion 14.1.0，并确保应用内 React 与 motion 各只有一份。
|
|
8
15
|
|
|
9
16
|
## [0.1.0] - 2026-10-12
|
|
10
17
|
|
package/dist/ArchiveReveal.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ import * as React from 'react';
|
|
|
9
9
|
* track the viewport.
|
|
10
10
|
* Never use it to delay business data: pass content that is already loaded.
|
|
11
11
|
*/
|
|
12
|
-
export type ArchiveRevealProps = {
|
|
12
|
+
export type ArchiveRevealProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {
|
|
13
13
|
text: string;
|
|
14
14
|
/** Target state. Changing it animates from the current position. */
|
|
15
15
|
revealed: boolean;
|
|
@@ -19,7 +19,18 @@ export type ArchiveRevealProps = {
|
|
|
19
19
|
onSettled?: (revealed: boolean) => void;
|
|
20
20
|
/** Accessible text while concealed, e.g. "受限内容". Defaults to the text itself. */
|
|
21
21
|
concealedLabel?: string;
|
|
22
|
-
|
|
22
|
+
paused?: boolean;
|
|
23
23
|
};
|
|
24
|
-
export declare
|
|
24
|
+
export declare const ArchiveReveal: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
|
|
25
|
+
text: string;
|
|
26
|
+
/** Target state. Changing it animates from the current position. */
|
|
27
|
+
revealed: boolean;
|
|
28
|
+
/** Full reveal duration at speed 1 (ms). */
|
|
29
|
+
duration?: number;
|
|
30
|
+
/** Called once the effect settles at the requested state. */
|
|
31
|
+
onSettled?: (revealed: boolean) => void;
|
|
32
|
+
/** Accessible text while concealed, e.g. "受限内容". Defaults to the text itself. */
|
|
33
|
+
concealedLabel?: string;
|
|
34
|
+
paused?: boolean;
|
|
35
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
25
36
|
//# sourceMappingURL=ArchiveReveal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArchiveReveal.d.ts","sourceRoot":"","sources":["../src/ArchiveReveal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;GASG;AAEH,MAAM,MAAM,kBAAkB,GAAG;
|
|
1
|
+
{"version":3,"file":"ArchiveReveal.d.ts","sourceRoot":"","sources":["../src/ArchiveReveal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;GASG;AAEH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,GAAG;IACzF,IAAI,EAAE,MAAM,CAAC;IACb,oEAAoE;IACpE,QAAQ,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,iFAAiF;IACjF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAIF,eAAO,MAAM,aAAa;UAdlB,MAAM;IACZ,oEAAoE;cAC1D,OAAO;IACjB,4CAA4C;eACjC,MAAM;IACjB,6DAA6D;gBACjD,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI;IACvC,iFAAiF;qBAChE,MAAM;aACd,OAAO;yCAiGhB,CAAC"}
|
package/dist/ArchiveReveal.js
CHANGED
|
@@ -5,9 +5,25 @@ import { useEffectTiming } from './clock.js';
|
|
|
5
5
|
import { scrambleCells, stepToward } from './scramble.js';
|
|
6
6
|
import { usePageVisible } from './usePageVisible.js';
|
|
7
7
|
const FRAME_MS = 48;
|
|
8
|
-
export function ArchiveReveal({ text, revealed, duration = 640, onSettled, concealedLabel, className }) {
|
|
8
|
+
export const ArchiveReveal = React.forwardRef(function ArchiveReveal({ text, revealed, duration = 640, onSettled, concealedLabel, paused = false, className, ...rest }, ref) {
|
|
9
9
|
const timing = useEffectTiming();
|
|
10
10
|
const visible = usePageVisible();
|
|
11
|
+
const viewportRef = React.useRef(null);
|
|
12
|
+
const [inViewport, setInViewport] = React.useState(true);
|
|
13
|
+
React.useEffect(() => {
|
|
14
|
+
const element = viewportRef.current;
|
|
15
|
+
if (!element)
|
|
16
|
+
return undefined;
|
|
17
|
+
const onVisibility = () => { if (!document.hidden)
|
|
18
|
+
setInViewport(true); };
|
|
19
|
+
document.addEventListener('visibilitychange', onVisibility);
|
|
20
|
+
if (typeof IntersectionObserver === 'undefined')
|
|
21
|
+
return () => document.removeEventListener('visibilitychange', onVisibility);
|
|
22
|
+
const observer = new IntersectionObserver(([entry]) => setInViewport(entry?.isIntersecting ?? false), { threshold: 0 });
|
|
23
|
+
observer.observe(element);
|
|
24
|
+
return () => { observer.disconnect(); document.removeEventListener('visibilitychange', onVisibility); };
|
|
25
|
+
}, []);
|
|
26
|
+
const effectiveVisible = visible && inViewport && !paused;
|
|
11
27
|
const target = revealed ? 1 : 0;
|
|
12
28
|
const [progress, setProgress] = React.useState(target);
|
|
13
29
|
const [frame, setFrame] = React.useState(0);
|
|
@@ -24,7 +40,7 @@ export function ArchiveReveal({ text, revealed, duration = 640, onSettled, conce
|
|
|
24
40
|
}
|
|
25
41
|
if (progressRef.current === target)
|
|
26
42
|
return;
|
|
27
|
-
if (!
|
|
43
|
+
if (!effectiveVisible) {
|
|
28
44
|
// Paused: settle nothing now; the effect re-runs (and resumes from the current progress) on visibility.
|
|
29
45
|
return;
|
|
30
46
|
}
|
|
@@ -58,10 +74,13 @@ export function ArchiveReveal({ text, revealed, duration = 640, onSettled, conce
|
|
|
58
74
|
};
|
|
59
75
|
raf = requestAnimationFrame(tick);
|
|
60
76
|
return () => cancelAnimationFrame(raf);
|
|
61
|
-
}, [target, revealed, duration, timing,
|
|
77
|
+
}, [target, revealed, duration, timing, effectiveVisible]);
|
|
62
78
|
const cells = scrambleCells(text, progress, frame);
|
|
63
79
|
const settled = progress === target;
|
|
64
80
|
const label = revealed ? text : (concealedLabel ?? text);
|
|
65
|
-
return (_jsxs("span", {
|
|
66
|
-
|
|
81
|
+
return (_jsxs("span", { ...rest, ref: (node) => { viewportRef.current = node; if (typeof ref === 'function')
|
|
82
|
+
ref(node);
|
|
83
|
+
else if (ref)
|
|
84
|
+
ref.current = node; }, className: ['rl-reveal', className].filter(Boolean).join(' '), "data-slot": "archive-reveal", "data-state": settled ? (revealed ? 'revealed' : 'concealed') : 'animating', "data-reduced": timing.reduced || undefined, "data-paused": paused || !effectiveVisible || undefined, "aria-label": rest['aria-label'] ?? label, children: [_jsx("span", { className: "rl-effect-sr", children: label }), _jsx("span", { className: "rl-reveal__glyphs", "aria-hidden": "true", children: cells.map((cell, i) => (_jsx("span", { className: "rl-reveal__cell", "data-resolved": cell.resolved || undefined, children: cell.char }, i))) })] }));
|
|
85
|
+
});
|
|
67
86
|
//# sourceMappingURL=ArchiveReveal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArchiveReveal.js","sourceRoot":"","sources":["../src/ArchiveReveal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AA0BrD,MAAM,QAAQ,GAAG,EAAE,CAAC;AAEpB,MAAM,UAAU,aAAa,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"ArchiveReveal.js","sourceRoot":"","sources":["../src/ArchiveReveal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AA0BrD,MAAM,QAAQ,GAAG,EAAE,CAAC;AAEpB,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAsC,SAAS,aAAa,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC9M,MAAM,MAAM,GAAG,eAAe,EAAE,CAAC;IACjC,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,OAAO;YAAE,OAAO,SAAS,CAAC;QAC/B,MAAM,YAAY,GAAG,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM;YAAE,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1E,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,YAAY,CAAC,CAAC;QAC5D,IAAI,OAAO,oBAAoB,KAAK,WAAW;YAAE,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,YAAY,CAAC,CAAC;QAC7H,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,cAAc,IAAI,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;QACxH,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1B,OAAO,GAAG,EAAE,GAAG,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1G,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,gBAAgB,GAAG,OAAO,IAAI,UAAU,IAAI,CAAC,MAAM,CAAC;IAC1D,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACvD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC3C,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IAC/B,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3C,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC;IAE/B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,WAAW,CAAC,MAAM,CAAC,CAAC;YACpB,IAAI,WAAW,CAAC,OAAO,KAAK,MAAM;gBAAE,UAAU,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAC;YACnE,OAAO;QACT,CAAC;QACD,IAAI,WAAW,CAAC,OAAO,KAAK,MAAM;YAAE,OAAO;QAC3C,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,wGAAwG;YACxG,OAAO;QACT,CAAC;QACD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACrC,sFAAsF;QACtF,+CAA+C;QAC/C,IAAI,IAAI,GAAkB,IAAI,CAAC;QAC/B,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,IAAI,GAAG,GAAG,CAAC,CAAC;QACZ,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,EAAE;YAC3B,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;gBAClB,IAAI,GAAG,GAAG,CAAC;gBACX,SAAS,GAAG,GAAG,CAAC;gBAChB,GAAG,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;gBAClC,OAAO;YACT,CAAC;YACD,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC,CAAC;YACnC,IAAI,GAAG,GAAG,CAAC;YACX,MAAM,IAAI,GAAG,UAAU,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,GAAG,KAAK,CAAC,CAAC;YACjE,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;YAC3B,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,IAAI,GAAG,GAAG,SAAS,IAAI,QAAQ,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC;gBAC/C,SAAS,GAAG,GAAG,CAAC;gBAChB,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;YACzB,CAAC;YACD,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;gBACpB,UAAU,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAC;gBAC/B,OAAO;YACT,CAAC;YACD,GAAG,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC,CAAC;QACF,GAAG,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAClC,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE3D,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;IACnD,MAAM,OAAO,GAAG,QAAQ,KAAK,MAAM,CAAC;IACpC,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,IAAI,IAAI,CAAC,CAAC;IAEzD,OAAO,CACL,mBACM,IAAI,EACR,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,GAAG,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,IAAI,OAAO,GAAG,KAAK,UAAU;YAAE,GAAG,CAAC,IAAI,CAAC,CAAC;aAAM,IAAI,GAAG;YAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,EAC1H,SAAS,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,eACnD,gBAAgB,gBACd,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,kBAC3D,MAAM,CAAC,OAAO,IAAI,SAAS,iBAC5B,MAAM,IAAI,CAAC,gBAAgB,IAAI,SAAS,gBACzC,IAAI,CAAC,YAAY,CAAC,IAAI,KAAK,aAEvC,eAAM,SAAS,EAAC,cAAc,YAAE,KAAK,GAAQ,EAC7C,eAAM,SAAS,EAAC,mBAAmB,iBAAa,MAAM,YACnD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,eAAc,SAAS,EAAC,iBAAiB,mBAAgB,IAAI,CAAC,QAAQ,IAAI,SAAS,YAChF,IAAI,CAAC,IAAI,IADD,CAAC,CAEL,CACR,CAAC,GACG,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
package/dist/OrbitalDiagram.d.ts
CHANGED
|
@@ -16,9 +16,12 @@ export interface OrbitNode {
|
|
|
16
16
|
angle: number;
|
|
17
17
|
/** Highlight one node (e.g. the current subject). */
|
|
18
18
|
active?: boolean;
|
|
19
|
+
selected?: boolean;
|
|
20
|
+
tone?: 'accent' | 'info' | 'warning' | 'success' | 'neutral';
|
|
19
21
|
}
|
|
20
22
|
export type OrbitalDiagramProps = {
|
|
21
23
|
nodes: readonly OrbitNode[];
|
|
24
|
+
size?: number;
|
|
22
25
|
rings?: number;
|
|
23
26
|
/** Centre caption, e.g. a record ID. */
|
|
24
27
|
center?: string;
|
|
@@ -28,7 +31,9 @@ export type OrbitalDiagramProps = {
|
|
|
28
31
|
period?: number;
|
|
29
32
|
/** Accessible name of the node list. */
|
|
30
33
|
label: string;
|
|
34
|
+
/** Localised suffix announced for a selected node. */
|
|
35
|
+
selectedLabel?: string;
|
|
31
36
|
className?: string;
|
|
32
37
|
};
|
|
33
|
-
export declare function OrbitalDiagram({ nodes, rings, center, animate, period, label, className }: OrbitalDiagramProps): React.JSX.Element;
|
|
38
|
+
export declare function OrbitalDiagram({ nodes, rings, size, center, animate, period, label, selectedLabel, className }: OrbitalDiagramProps): React.JSX.Element;
|
|
34
39
|
//# sourceMappingURL=OrbitalDiagram.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OrbitalDiagram.d.ts","sourceRoot":"","sources":["../src/OrbitalDiagram.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;GAOG;AAEH,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"OrbitalDiagram.d.ts","sourceRoot":"","sources":["../src/OrbitalDiagram.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;GAOG;AAEH,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;CAC9D;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,KAAS,EAAE,IAAW,EAAE,MAAM,EAAE,OAAe,EAAE,MAAW,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,mBAAmB,qBA4E3J"}
|
package/dist/OrbitalDiagram.js
CHANGED
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { animate as animateValue, motion, useMotionValue } from 'motion/react';
|
|
5
|
-
import { useMotionLifecycle } from '@wzrhine/react';
|
|
5
|
+
import { useMotionLifecycle, useRhineLocale } from '@wzrhine/react';
|
|
6
6
|
import { useEffectTiming } from './clock.js';
|
|
7
7
|
const SIZE = 240;
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
export function OrbitalDiagram({ nodes, rings = 3, size = SIZE, center, animate = false, period = 60, label, selectedLabel, className }) {
|
|
9
|
+
const { locale } = useRhineLocale();
|
|
10
|
+
const selectedText = selectedLabel ?? (locale.toLowerCase().startsWith('en') ? 'selected' : '当前');
|
|
10
11
|
const timing = useEffectTiming();
|
|
11
12
|
const ref = React.useRef(null);
|
|
12
13
|
const lifecycle = useMotionLifecycle({ active: animate, viewportRef: ref, reduced: timing.reduced });
|
|
@@ -25,16 +26,18 @@ export function OrbitalDiagram({ nodes, rings = 3, center, animate = false, peri
|
|
|
25
26
|
const controls = animateValue(rotate, [from, from + 360], { duration: revolution, ease: 'linear', repeat: Infinity });
|
|
26
27
|
return () => controls.stop();
|
|
27
28
|
}, [spinning, revolution, lifecycle.state, timing.reduced, rotate]);
|
|
28
|
-
const
|
|
29
|
-
|
|
29
|
+
const viewSize = Math.max(96, size);
|
|
30
|
+
const centerPoint = viewSize / 2;
|
|
31
|
+
const radius = (ring) => 36 * (viewSize / SIZE) + (ring * (centerPoint - 48 * (viewSize / SIZE))) / Math.max(1, rings - 1);
|
|
32
|
+
return (_jsx("div", { className: "rl-orbit-wrap", children: _jsxs("div", { ref: ref, className: ['rl-orbit', className].filter(Boolean).join(' '), "data-slot": "orbital-diagram", "data-size": size, "data-spinning": spinning || undefined, "data-lifecycle": lifecycle.state, "data-paused": lifecycle.pauseReason ?? undefined, children: [_jsxs("svg", { className: "rl-orbit__svg", viewBox: `0 0 ${viewSize} ${viewSize}`, "aria-hidden": "true", focusable: "false", children: [_jsx("g", { className: "rl-orbit__ticks", children: Array.from({ length: 24 }, (_, i) => {
|
|
30
33
|
const a = (i * 15 * Math.PI) / 180;
|
|
31
|
-
const r1 =
|
|
32
|
-
const r2 = i % 6 === 0 ?
|
|
33
|
-
return _jsx("line", { x1:
|
|
34
|
-
}) }), _jsxs(motion.g, { className: "rl-orbit__rotor", style: { transformOrigin: `${
|
|
34
|
+
const r1 = centerPoint - 6;
|
|
35
|
+
const r2 = i % 6 === 0 ? centerPoint - 14 : centerPoint - 10;
|
|
36
|
+
return _jsx("line", { x1: centerPoint + r1 * Math.sin(a), y1: centerPoint - r1 * Math.cos(a), x2: centerPoint + r2 * Math.sin(a), y2: centerPoint - r2 * Math.cos(a) }, i);
|
|
37
|
+
}) }), _jsxs(motion.g, { className: "rl-orbit__rotor", style: { transformOrigin: `${centerPoint}px ${centerPoint}px`, rotate }, children: [Array.from({ length: rings }, (_, ring) => (_jsx("circle", { className: "rl-orbit__ring", cx: centerPoint, cy: centerPoint, r: radius(ring), "data-ring": ring }, ring))), nodes.map((node) => {
|
|
35
38
|
const a = (node.angle * Math.PI) / 180;
|
|
36
39
|
const r = radius(Math.min(node.ring, rings - 1));
|
|
37
|
-
return (_jsx("circle", { className: "rl-orbit__node", "data-active": node.active || undefined, cx:
|
|
38
|
-
})] }), _jsx("circle", { className: "rl-orbit__core", cx:
|
|
40
|
+
return (_jsx("circle", { className: "rl-orbit__node", "data-active": node.active || undefined, "data-selected": node.selected || undefined, "data-tone": node.tone ?? undefined, cx: centerPoint + r * Math.sin(a), cy: centerPoint - r * Math.cos(a), r: node.active ? 5 : 3.5 }, node.id));
|
|
41
|
+
})] }), _jsx("circle", { className: "rl-orbit__core", cx: centerPoint, cy: centerPoint, r: 14 * (viewSize / SIZE) }), _jsx("path", { className: "rl-orbit__crosshair", d: `M${centerPoint - 22 * (viewSize / SIZE)} ${centerPoint}h${8 * (viewSize / SIZE)}M${centerPoint + 14 * (viewSize / SIZE)} ${centerPoint}h${8 * (viewSize / SIZE)}M${centerPoint} ${centerPoint - 22 * (viewSize / SIZE)}v${8 * (viewSize / SIZE)}M${centerPoint} ${centerPoint + 14 * (viewSize / SIZE)}v${8 * (viewSize / SIZE)}` })] }), center && _jsx("span", { className: "rl-orbit__center", children: center }), _jsx("ul", { className: "rl-orbit__legend", "aria-label": label, children: nodes.map((node) => (_jsxs("li", { "data-active": node.active || undefined, "data-selected": node.selected || undefined, children: [_jsxs("span", { className: "rl-orbit__ring-index", "aria-hidden": "true", children: ["R", node.ring + 1] }), node.label, (node.active || node.selected) && _jsxs("span", { className: "rl-effect-sr", children: ["(", selectedText, ")"] })] }, node.id))) })] }) }));
|
|
39
42
|
}
|
|
40
43
|
//# sourceMappingURL=OrbitalDiagram.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OrbitalDiagram.js","sourceRoot":"","sources":["../src/OrbitalDiagram.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"OrbitalDiagram.js","sourceRoot":"","sources":["../src/OrbitalDiagram.tsx"],"names":[],"mappings":"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"}
|
package/dist/ScanSurface.d.ts
CHANGED
|
@@ -7,14 +7,17 @@ import * as React from 'react';
|
|
|
7
7
|
* - Stop conditions (ADR-0007): skipped while the page is hidden, cut short if the page hides mid-sweep,
|
|
8
8
|
* cleared on unmount. One-shot, so it does not track the viewport.
|
|
9
9
|
*/
|
|
10
|
-
export type ScanSurfaceProps = {
|
|
10
|
+
export type ScanSurfaceProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
11
11
|
children: React.ReactNode;
|
|
12
12
|
/** Change this value to run one sweep (a counter or timestamp). */
|
|
13
13
|
scanKey?: number | string;
|
|
14
14
|
/** Sweep duration at speed 1 (ms). */
|
|
15
|
-
duration?: number;
|
|
15
|
+
duration?: number | 'fast' | 'base' | 'panel' | 'showcase';
|
|
16
|
+
tone?: 'accent' | 'info' | 'warning' | 'success' | 'neutral';
|
|
17
|
+
overflow?: 'hidden' | 'visible';
|
|
18
|
+
containerType?: boolean;
|
|
16
19
|
onScanEnd?: () => void;
|
|
17
20
|
className?: string;
|
|
18
21
|
};
|
|
19
|
-
export declare function ScanSurface({ children, scanKey, duration, onScanEnd, className }: ScanSurfaceProps): React.JSX.Element;
|
|
22
|
+
export declare function ScanSurface({ children, scanKey, duration, onScanEnd, tone, overflow, containerType, className, ...rest }: ScanSurfaceProps): React.JSX.Element;
|
|
20
23
|
//# sourceMappingURL=ScanSurface.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScanSurface.d.ts","sourceRoot":"","sources":["../src/ScanSurface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;GAOG;AAEH,MAAM,MAAM,gBAAgB,GAAG;
|
|
1
|
+
{"version":3,"file":"ScanSurface.d.ts","sourceRoot":"","sources":["../src/ScanSurface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;GAOG;AAEH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IAC3D,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IAC7D,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAqB,EAAE,SAAS,EAAE,IAAe,EAAE,QAAmB,EAAE,aAAoB,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,qBAsDpL"}
|
package/dist/ScanSurface.js
CHANGED
|
@@ -3,14 +3,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { useEffectTiming } from './clock.js';
|
|
5
5
|
import { usePageVisible } from './usePageVisible.js';
|
|
6
|
-
|
|
6
|
+
const DURATIONS = { fast: 120, base: 200, panel: 280, showcase: 700 };
|
|
7
|
+
export function ScanSurface({ children, scanKey, duration = 'showcase', onScanEnd, tone = 'accent', overflow = 'hidden', containerType = true, className, ...rest }) {
|
|
8
|
+
const durationMs = typeof duration === 'number' ? duration : DURATIONS[duration];
|
|
7
9
|
const timing = useEffectTiming();
|
|
8
10
|
const visible = usePageVisible();
|
|
9
11
|
const [running, setRunning] = React.useState(false);
|
|
10
12
|
const lastKey = React.useRef(scanKey);
|
|
11
13
|
const timer = React.useRef(undefined);
|
|
12
|
-
const latest = React.useRef({ visible, reduced: timing.reduced, ms: timing.scale(
|
|
13
|
-
latest.current = { visible, reduced: timing.reduced, ms: timing.scale(
|
|
14
|
+
const latest = React.useRef({ visible, reduced: timing.reduced, ms: timing.scale(durationMs), onScanEnd });
|
|
15
|
+
latest.current = { visible, reduced: timing.reduced, ms: timing.scale(durationMs), onScanEnd };
|
|
14
16
|
// Only a change of scanKey starts a sweep; other prop changes must not retrigger it.
|
|
15
17
|
React.useEffect(() => {
|
|
16
18
|
if (Object.is(lastKey.current, scanKey))
|
|
@@ -35,7 +37,7 @@ export function ScanSurface({ children, scanKey, duration = 900, onScanEnd, clas
|
|
|
35
37
|
setRunning(false);
|
|
36
38
|
latest.current.onScanEnd?.();
|
|
37
39
|
}, [visible, running]);
|
|
38
|
-
const style = { '--rl-scan-duration': `${timing.scale(
|
|
39
|
-
return (_jsxs("div", { className: ['rl-scan', className].filter(Boolean).join(' '), "data-slot": "scan-surface", "data-scanning": running || undefined, "data-reduced": timing.reduced || undefined, style: style, children: [children, running && _jsx("span", { className: "rl-scan__line", "aria-hidden": "true" }, String(scanKey))] }));
|
|
40
|
+
const style = { '--rl-scan-duration': `${timing.scale(durationMs)}ms` };
|
|
41
|
+
return (_jsxs("div", { ...rest, className: ['rl-scan', className].filter(Boolean).join(' '), "data-slot": "scan-surface", "data-scanning": running || undefined, "data-reduced": timing.reduced || undefined, "data-tone": tone, "data-container-type": containerType ? 'inline-size' : 'none', "data-overflow": overflow, style: style, children: [children, running && _jsx("span", { className: "rl-scan__line", "aria-hidden": "true" }, String(scanKey))] }));
|
|
40
42
|
}
|
|
41
43
|
//# sourceMappingURL=ScanSurface.js.map
|
package/dist/ScanSurface.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScanSurface.js","sourceRoot":"","sources":["../src/ScanSurface.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"ScanSurface.js","sourceRoot":"","sources":["../src/ScanSurface.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAwBrD,MAAM,SAAS,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAW,CAAC;AAE/E,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,UAAU,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,QAAQ,GAAG,QAAQ,EAAE,aAAa,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAoB;IACnL,MAAM,UAAU,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACjF,MAAM,MAAM,GAAG,eAAe,EAAE,CAAC;IACjC,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAqB,SAAS,CAAC,CAAC;IAC1D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;IAC3G,MAAM,CAAC,OAAO,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IAE/F,qFAAqF;IACrF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC;YAAE,OAAO;QAChD,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC;QAC1B,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC;QAC3D,IAAI,OAAO,KAAK,SAAS,IAAI,CAAC,SAAS;YAAE,OAAO;QAChD,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,MAAM,CAAC,GAAG,MAAM,CAAC,UAAU,CACzB,GAAG,EAAE;YACH,UAAU,CAAC,KAAK,CAAC,CAAC;YAClB,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC;QAC/B,CAAC,EACD,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CACnB,CAAC;QACF,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC;QAClB,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,gEAAgE;IAChE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,OAAO,IAAI,CAAC,OAAO;YAAE,OAAO;QAChC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACnC,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC;IAC/B,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvB,MAAM,KAAK,GAAG,EAAE,oBAAoB,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,EAAyB,CAAC;IAE/F,OAAO,CACL,kBACM,IAAI,EACR,SAAS,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,eACjD,cAAc,mBACT,OAAO,IAAI,SAAS,kBACrB,MAAM,CAAC,OAAO,IAAI,SAAS,eAC9B,IAAI,yBACM,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,mBAC5C,QAAQ,EACvB,KAAK,EAAE,KAAK,aAEX,QAAQ,EACR,OAAO,IAAI,eAA4B,SAAS,EAAC,eAAe,iBAAa,MAAM,IAA7D,MAAM,CAAC,OAAO,CAAC,CAAiD,IACnF,CACP,CAAC;AACJ,CAAC"}
|
package/dist/effects.css
CHANGED
|
@@ -52,6 +52,8 @@
|
|
|
52
52
|
isolation: isolate;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
+
.rl-scan[data-overflow='visible'] { overflow: visible; }
|
|
56
|
+
|
|
55
57
|
.rl-scan__line {
|
|
56
58
|
position: absolute;
|
|
57
59
|
inset: 0 auto 0 0;
|
|
@@ -62,7 +64,7 @@
|
|
|
62
64
|
to right,
|
|
63
65
|
transparent,
|
|
64
66
|
color-mix(in srgb, var(--rl-accent) 14%, transparent) 70%,
|
|
65
|
-
var(--rl-accent) calc(100% - var(--rl-border-width)),
|
|
67
|
+
var(--rl-scan-tone, var(--rl-accent)) calc(100% - var(--rl-border-width)),
|
|
66
68
|
transparent 100%
|
|
67
69
|
);
|
|
68
70
|
translate: -100% 0;
|
|
@@ -71,13 +73,18 @@
|
|
|
71
73
|
|
|
72
74
|
@keyframes rl-scan-sweep {
|
|
73
75
|
to {
|
|
74
|
-
translate: calc(
|
|
76
|
+
translate: calc(100% + 100cqw) 0;
|
|
75
77
|
}
|
|
76
78
|
}
|
|
77
79
|
|
|
78
80
|
.rl-scan {
|
|
79
81
|
container-type: inline-size;
|
|
80
82
|
}
|
|
83
|
+
.rl-scan[data-container-type='none'] { container-type: normal; }
|
|
84
|
+
.rl-scan[data-tone='info'] { --rl-scan-tone: var(--rl-info); }
|
|
85
|
+
.rl-scan[data-tone='warning'] { --rl-scan-tone: var(--rl-warning); }
|
|
86
|
+
.rl-scan[data-tone='success'] { --rl-scan-tone: var(--rl-success); }
|
|
87
|
+
.rl-scan[data-tone='neutral'] { --rl-scan-tone: var(--rl-fg-muted); }
|
|
81
88
|
|
|
82
89
|
/* Reduced motion: no travelling line; a brief static outline marks the scan instead. */
|
|
83
90
|
.rl-scan[data-reduced] .rl-scan__line,
|
|
@@ -169,6 +176,11 @@
|
|
|
169
176
|
fill: var(--rl-accent);
|
|
170
177
|
stroke: var(--rl-accent);
|
|
171
178
|
}
|
|
179
|
+
.rl-orbit__node[data-selected] { stroke: var(--rl-fg-primary); stroke-width: var(--rl-border-width-strong); }
|
|
180
|
+
.rl-orbit__node[data-tone='info'] { fill: var(--rl-info-subtle); stroke: var(--rl-info); }
|
|
181
|
+
.rl-orbit__node[data-tone='warning'] { fill: var(--rl-warning-subtle); stroke: var(--rl-warning); }
|
|
182
|
+
.rl-orbit__node[data-tone='success'] { fill: var(--rl-success-subtle); stroke: var(--rl-success); }
|
|
183
|
+
.rl-orbit__node[data-tone='neutral'] { fill: var(--rl-bg-subtle); stroke: var(--rl-fg-muted); }
|
|
172
184
|
|
|
173
185
|
.rl-orbit__core {
|
|
174
186
|
fill: var(--rl-bg-subtle);
|
|
@@ -202,6 +214,7 @@
|
|
|
202
214
|
.rl-orbit__legend li[data-active] {
|
|
203
215
|
font-weight: 600;
|
|
204
216
|
}
|
|
217
|
+
.rl-orbit__legend li[data-selected] { text-decoration: underline; text-decoration-color: var(--rl-accent); text-underline-offset: var(--rl-space-1); }
|
|
205
218
|
|
|
206
219
|
.rl-orbit__ring-index {
|
|
207
220
|
font: var(--rl-type-mono);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wzrhine/effects",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Optional showcase effects (decrypt reveal, scan, orbit) and a four-lane motion player for WzRhineLab UI.",
|
|
6
6
|
"type": "module",
|
|
@@ -30,13 +30,13 @@
|
|
|
30
30
|
"access": "public"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"motion": "^
|
|
33
|
+
"motion": "^14.0.0",
|
|
34
34
|
"react": "^19.0.0",
|
|
35
35
|
"react-dom": "^19.0.0",
|
|
36
|
-
"@wzrhine/react": "^0.
|
|
36
|
+
"@wzrhine/react": "^0.2.0"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@wzrhine/tokens": "0.
|
|
39
|
+
"@wzrhine/tokens": "0.2.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@testing-library/dom": "10.4.2",
|
|
@@ -47,12 +47,12 @@
|
|
|
47
47
|
"@types/react": "^19.0.0",
|
|
48
48
|
"@types/react-dom": "^19.0.0",
|
|
49
49
|
"jsdom": "27.4.0",
|
|
50
|
-
"motion": "^
|
|
50
|
+
"motion": "^14.1.0",
|
|
51
51
|
"react": "^19.3.0",
|
|
52
52
|
"react-dom": "^19.3.0",
|
|
53
53
|
"typescript": "^5.9.0",
|
|
54
54
|
"vitest": "4.1.11",
|
|
55
|
-
"@wzrhine/react": "0.
|
|
55
|
+
"@wzrhine/react": "0.2.0"
|
|
56
56
|
},
|
|
57
57
|
"scripts": {
|
|
58
58
|
"typecheck": "tsc --noEmit -p tsconfig.json",
|