@anyknown/ui 0.7.0 → 0.8.0

package/dist/tokens.stylex.js

@@ -1,107 +1,41 @@
 import * as stylex from "@stylexjs/stylex";
-// Semantic tokens for all AnyKnown products — direction B "Ledger":
-// warm paper ground, ink text, viridian accent. Light is the primary mode;
+// Semantic tokens for all AnyKnown products. The default palette is neutral:
+// white paper, ink text, ink accent. Ledger (warm paper, viridian accent) is the
+// opt-in palette in scripts/ledger.mjs. Light is the primary mode;
 // dark follows the OS unless a theme from themes.stylex.ts is applied.
 const DARK = "@media (prefers-color-scheme: dark)";
 export const color = stylex.defineVars({
-    bg: { default: "#FAFAF6", [DARK]: "#181613" },
-    surface: { default: "#FFFFFF", [DARK]: "#201D18" },
-    surfaceRaised: { default: "#FFFFFF", [DARK]: "#282420" },
-    border: { default: "#E3E0D5", [DARK]: "#35302A" },
-    borderStrong: { default: "#C8C3B4", [DARK]: "#4A443C" },
-    text: { default: "#23211D", [DARK]: "#EAE6DC" },
-    textMuted: { default: "#635D52", [DARK]: "#B0A697" },
-    textFaint: { default: "#9C958A", [DARK]: "#736A5D" },
-    accent: { default: "#23705A", [DARK]: "#4FA184" },
-    accentText: { default: "#FCFCF9", [DARK]: "#14120F" },
-    accentSubtle: { default: "#E7F0EB", [DARK]: "#22352E" },
+    bg: { default: "#FFFFFF", [DARK]: "#000000" },
+    surface: { default: "#F5F5F7", [DARK]: "#1C1C1E" },
+    surfaceRaised: { default: "#FFFFFF", [DARK]: "#2C2C2E" },
+    border: { default: "#E5E5EA", [DARK]: "#38383A" },
+    borderStrong: { default: "#C7C7CC", [DARK]: "#48484A" },
+    text: { default: "#1D1D1F", [DARK]: "#F5F5F7" },
+    textMuted: { default: "#6E6E73", [DARK]: "#98989D" },
+    textFaint: { default: "#86868B", [DARK]: "#8E8E93" },
+    accent: { default: "#1D1D1F", [DARK]: "#F5F5F7" },
+    accentText: { default: "#FFFFFF", [DARK]: "#000000" },
+    accentSubtle: { default: "#E8E8ED", [DARK]: "#2C2C2E" },
     danger: { default: "#B3402E", [DARK]: "#DD7059" },
     dangerSubtle: { default: "#F7E7E3", [DARK]: "#3D231E" },
     success: { default: "#23705A", [DARK]: "#4FA184" },
     successSubtle: { default: "#E7F0EB", [DARK]: "#22352E" },
-    warning: { default: "#9A6A1B", [DARK]: "#D9A254" },
+    warning: { default: "#B25000", [DARK]: "#FFB340" },
     warningSubtle: { default: "#F5EBD9", [DARK]: "#3A2F1D" },
     info: { default: "#2C5C86", [DARK]: "#6FA3CE" },
     infoSubtle: { default: "#E4EDF5", [DARK]: "#1E2C38" },
-    focusRing: { default: "#23705A", [DARK]: "#4FA184" },
-    bone: { default: "#ECE9DF", [DARK]: "#2A2620" },
-    sheen: { default: "#F6F4EC", [DARK]: "#35302A" },
+    focusRing: { default: "#1D1D1F", [DARK]: "#F5F5F7" },
+    bone: { default: "#E6E6EA", [DARK]: "#2C2C2E" },
+    sheen: { default: "#F2F2F5", [DARK]: "#3F3F42" },
     successHl: { default: "#C6E0C6", [DARK]: "#2F4A2E" },
     dangerHl: { default: "#EFCEC3", [DARK]: "#573328" },
     // 分層底色:rail → main → 訊息 → fold → 列,越深的一階數字越大。
     // 面與面靠深淺分,不靠邊框;hover 升一階,對應表在 lib/layers.ts。
-    layer1: { default: "#EFECE3", [DARK]: "#0E0C09" },
-    layer2: { default: "#FAFAF6", [DARK]: "#181613" },
-    layer3: { default: "#F1EFE7", [DARK]: "#211E19" },
-    layer4: { default: "#E8E5DA", [DARK]: "#2B2721" },
-    layer5: { default: "#DEDACD", [DARK]: "#35302A" },
-});
-// 織體紗線階(TEXTURE-GUIDE §3.4):un 底紗、sh 縫隙陰影、y0–y4 面紗(深→淺)、hi 挑面亮紗、
-// shadow 是整塊布的落影(§3.3「實心感落地」,掛在元件的 CSS filter 上)
-export const yarn = stylex.defineVars({
-    un: { default: "#11362C", [DARK]: "#173629" },
-    sh: { default: "#123C31", [DARK]: "#1B4437" },
-    y0: { default: "#1E6250", [DARK]: "#3F8A70" },
-    y1: { default: "#216A55", [DARK]: "#47957A" },
-    y2: { default: "#23705A", [DARK]: "#4FA184" },
-    y3: { default: "#28795F", [DARK]: "#56A98B" },
-    y4: { default: "#2E8266", [DARK]: "#5EB193" },
-    hi: { default: "#5CAA89", [DARK]: "#8FD2B4" },
-    shadow: {
-        default: "drop-shadow(0 1px 1.5px rgba(18, 60, 49, 0.3))",
-        [DARK]: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))",
-    },
-});
-// secondary(淺色布)、ghost(疏織)、danger(§3.4 原則從 danger 衍生)、
-// subtle(accent-subtle 色系,tabs pills 取景窗用)
-export const yarnSecondary = stylex.defineVars({
-    un: { default: "#CBC5B4", [DARK]: "#0E0C09" },
-    sh: { default: "#C9C4B4", [DARK]: "#15120E" },
-    y0: { default: "#E4E0D3", [DARK]: "#2B2620" },
-    y1: { default: "#E8E5D9", [DARK]: "#2F2A23" },
-    y2: { default: "#EDEAE0", [DARK]: "#332E26" },
-    y3: { default: "#F1EEE6", [DARK]: "#38322A" },
-    y4: { default: "#F5F3EC", [DARK]: "#3D372E" },
-    hi: { default: "#FFFFFF", [DARK]: "#5E5546" },
-    shadow: {
-        default: "drop-shadow(0 1px 1.5px rgba(80, 74, 60, 0.22))",
-        [DARK]: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))",
-    },
-});
-export const yarnGhost = stylex.defineVars({
-    un: { default: "transparent", [DARK]: "transparent" },
-    sh: { default: "transparent", [DARK]: "transparent" },
-    y0: { default: "#DCD8CA", [DARK]: "#2A251F" },
-    y1: { default: "#DFDBCE", [DARK]: "#2F2A23" },
-    y2: { default: "#E3E0D5", [DARK]: "#35302A" },
-    y3: { default: "#E7E4D9", [DARK]: "#39342D" },
-    y4: { default: "#EBE8DE", [DARK]: "#3E3830" },
-    hi: { default: "#C8C3B4", [DARK]: "#57503F" },
-    shadow: { default: "none", [DARK]: "none" },
-});
-export const yarnDanger = stylex.defineVars({
-    un: { default: "#401209", [DARK]: "#38130B" },
-    sh: { default: "#4A170D", [DARK]: "#451A10" },
-    y0: { default: "#8F3122", [DARK]: "#C25842" },
-    y1: { default: "#A13928", [DARK]: "#D0644E" },
-    y2: { default: "#B3402E", [DARK]: "#DD7059" },
-    y3: { default: "#BC4F3C", [DARK]: "#E17E68" },
-    y4: { default: "#C55E4A", [DARK]: "#E58C77" },
-    hi: { default: "#E39781", [DARK]: "#F4BCA9" },
-    shadow: {
-        default: "drop-shadow(0 1px 1.5px rgba(74, 23, 13, 0.3))",
-        [DARK]: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))",
-    },
-});
-export const yarnSubtle = stylex.defineVars({
-    un: { default: "#CFE2D9", [DARK]: "#141F1B" },
-    sh: { default: "#CBDFD5", [DARK]: "#17231E" },
-    y0: { default: "#DFEBE5", [DARK]: "#1D2E27" },
-    y1: { default: "#E3EEE8", [DARK]: "#20312B" },
-    y2: { default: "#E7F0EB", [DARK]: "#22352E" },
-    y3: { default: "#ECF3EF", [DARK]: "#263A32" },
-    y4: { default: "#F1F7F3", [DARK]: "#2A4038" },
-    hi: { default: "#FFFFFF", [DARK]: "#3E5F50" },
+    layer1: { default: "#EFEFF2", [DARK]: "#000000" },
+    layer2: { default: "#FFFFFF", [DARK]: "#161618" },
+    layer3: { default: "#F2F2F5", [DARK]: "#242426" },
+    layer4: { default: "#E6E6EA", [DARK]: "#323234" },
+    layer5: { default: "#D9D9DE", [DARK]: "#3F3F42" },
 });
 export const shadow = stylex.defineVars({
     popover: {
@@ -112,9 +46,12 @@ export const shadow = stylex.defineVars({
         default: "0 1px 2px rgba(35, 33, 29, 0.08)",
         [DARK]: "0 1px 2px rgba(0, 0, 0, 0.3)",
     },
+    pop: "0 10px 36px rgba(0, 0, 0, 0.22)",
+    sheet: "0 16px 50px rgba(0, 0, 0, 0.24)",
+    dock: "0 12px 40px rgba(0, 0, 0, 0.14)",
 });
 export const font = stylex.defineVars({
-    display: "'Newsreader Variable', Georgia, 'Times New Roman', serif",
+    display: "'Geist Variable', system-ui, sans-serif",
     body: "'Geist Variable', system-ui, sans-serif",
     mono: "'Geist Mono Variable', ui-monospace, monospace",
 });
@@ -158,3 +95,38 @@ export const motion = stylex.defineVars({
     // 新元件不要挑它,滑動類一律 240ms easeOut。保留只是因為它已經在發佈的 API 裡。
     spring: "cubic-bezier(0.34, 1.56, 0.64, 1)",
 });
+// The flat language's own scales: four text sizes, the corner each kind of control wears,
+// the ink washes hover paints with, and the four surfaces `color` has no name for.
+export const type = stylex.defineVars({
+    t1: "11px",
+    t2: "13px",
+    t3: "15px",
+    t4: "17px",
+    body: "1.6",
+    tight: "1.35",
+    snug: "1.45",
+});
+export const tone = stylex.defineVars({
+    layer6: { default: "#CDCDD3", [DARK]: "#4C4C50" },
+    faint: { default: "#86868B", [DARK]: "#8E8E93" },
+    railLayer2: { default: "#FFFFFF", [DARK]: "#242426" },
+    railLayer3: { default: "#E6E6EA", [DARK]: "#323234" },
+});
+export const corner = stylex.defineVars({
+    card: "12px",
+    ib: "0.6rem",
+    md: "0.5rem",
+    btn: "0.55rem",
+    sm: "0.4rem",
+    xs: "0.3rem",
+});
+export const ink = stylex.defineVars({
+    n4: "color-mix(in srgb, currentColor 4%, transparent)",
+    n5: "color-mix(in srgb, currentColor 5%, transparent)",
+    n6: "color-mix(in srgb, currentColor 6%, transparent)",
+    n8: "color-mix(in srgb, currentColor 8%, transparent)",
+    n10: "color-mix(in srgb, currentColor 10%, transparent)",
+    n12: "color-mix(in srgb, currentColor 12%, transparent)",
+    n14: "color-mix(in srgb, currentColor 14%, transparent)",
+    n18: "color-mix(in srgb, currentColor 18%, transparent)",
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@anyknown/ui",
-	"version": "0.7.0",
+	"version": "0.8.0",
 	"description": "AnyKnown design system — StyleX tokens, themes, and 38 components",
 	"homepage": "https://ui.anyknown.com",
 	"bugs": {

package/dist/lib/paths.d.ts

@@ -1,3 +0,0 @@
-export declare const UNWEAVE_PATH: string;
-export declare const KNOT_LEAD = "M1 7h13";
-export declare const KNOT_LOOP = "M1 8 C3 3 8.5 2 10 5.5 C11.5 9 6.5 11 5 7.5 C3.8 4.7 8 2.5 14 7.5";

package/dist/lib/paths.js

@@ -1,11 +0,0 @@
-export const UNWEAVE_PATH = buildUnweave();
-function buildUnweave(width = 320, amplitude = 1.4, period = 34, mid = 3, step = 10) {
-    let d = "";
-    for (let x = 0; x <= width; x += step) {
-        d += `${d ? "L" : "M"}${x},${(mid + amplitude * Math.sin(x / period)).toFixed(1)}`;
-    }
-    return d;
-}
-// Handoff receipt — two loose ends knotted together when the row opens.
-export const KNOT_LEAD = "M1 7h13";
-export const KNOT_LOOP = "M1 8 C3 3 8.5 2 10 5.5 C11.5 9 6.5 11 5 7.5 C3.8 4.7 8 2.5 14 7.5";

package/dist/lib/progress.d.ts

@@ -1,2 +0,0 @@
-export declare const BALL_STRANDS: string[];
-export declare function ballDashOffset(percent: number, index: number): number;

package/dist/lib/progress.js

@@ -1,28 +0,0 @@
-// yarn determinate — how a ball of yarn is actually wound: a bundle of parallel
-// great-circle arcs in one direction, then the next bundle turned, and an
-// outline circle to finish.
-export const BALL_STRANDS = (() => {
-    const radius = 9.3;
-    const centre = 12;
-    const families = [25, 70, 115, 160].map((deg) => (deg * Math.PI) / 180);
-    const offsets = [-6.6, -3.4, -0.8, 1.8, 4.4, 7];
-    const strands = [];
-    for (const theta of families) {
-        const normal = [Math.cos(theta), Math.sin(theta)];
-        const along = [-Math.sin(theta), Math.cos(theta)];
-        for (const offset of offsets) {
-            const half = Math.sqrt(radius * radius - offset * offset);
-            const mx = centre + normal[0] * offset;
-            const my = centre + normal[1] * offset;
-            const bulge = offset * 0.62;
-            const cx = mx + normal[0] * bulge;
-            const cy = my + normal[1] * bulge;
-            strands.push(`M${(mx - along[0] * half).toFixed(2)},${(my - along[1] * half).toFixed(2)} Q${cx.toFixed(2)},${cy.toFixed(2)} ${(mx + along[0] * half).toFixed(2)},${(my + along[1] * half).toFixed(2)}`);
-        }
-    }
-    strands.push(`M${centre},${centre - radius} A${radius},${radius} 0 1 1 ${centre - 0.01},${centre - radius}`);
-    return strands;
-})();
-export function ballDashOffset(percent, index) {
-    return 100 - Math.max(0, Math.min(100, percent * BALL_STRANDS.length - index * 100));
-}

package/dist/lib/silk.d.ts

@@ -1,66 +0,0 @@
-export interface SilkPalette {
-    un: string;
-    sh: string;
-    y0: string;
-    y1: string;
-    y2: string;
-    y3: string;
-    y4: string;
-    hi: string;
-}
-export interface SilkOptions {
-    palette: SilkPalette;
-    /** "press" = 全套(帶動+窩+掃光);"hover" = 僅展示面(帶動+光澤帶) */
-    mode: "press" | "hover";
-    /** 疏織(ghost):無底紗無縫隙紗,面紗行距 2.1、粗 0.6–1.0 */
-    ghost?: boolean;
-    /** 光澤帶亮度上限(primary/danger 0.75,secondary/ghost 與卡面 0.5) */
-    bandMax?: number;
-    /** 面紗行距(大面積依 guide 降密度) */
-    pitch?: number;
-    hiCount?: number;
-    hiSpan?: number;
-    /** 圓角 clip(px);省略 = 不 clip(交給 host 的 overflow) */
-    radius?: number;
-    /** 織一塊固定高度的長布(host 高度變化不重織,只有寬度變了才重織);
-     * 動態每幀只更新可視高度內的紗 */
-    fixedHeight?: number;
-}
-export declare class SilkBody {
-    private host;
-    private svg;
-    private opts;
-    private reduced;
-    private id;
-    private w;
-    private h;
-    private built;
-    private live;
-    private sheen;
-    private bandG;
-    private sheenG;
-    private pointer;
-    private pressed;
-    private gx;
-    private gy;
-    private tension;
-    private tenV;
-    private pressX;
-    private pressY;
-    private bx;
-    private bandOp;
-    private sweep;
-    private raf;
-    private ro;
-    private rebuild;
-    private removers;
-    constructor(host: HTMLElement, svg: SVGSVGElement, options: SilkOptions);
-    destroy(): void;
-    private disabled;
-    private build;
-    private liveD;
-    private track;
-    private release;
-    private tick;
-    private wake;
-}

package/dist/lib/silk.js

@@ -1,337 +0,0 @@
-// 織體動態引擎(TEXTURE-GUIDE §3–4):lib/weave.ts 的動態孿生。
-// weave.ts 給固定尺寸小控件在 module scope 預織;這裡給尺寸不定、要回應觸點的面
-// (button 全套:帶動 + 窩 + 掃光;卡面「僅展示」子集:hover 帶動 + 光澤帶)。
-// 幾何公式與 weave.ts 完全同源(mulberry32(10075)、共享波場、四層紗)。
-// client-only:在 ref callback 裡 new、cleanup 裡 destroy()(useEffect 禁用,
-// 見 Button.tsx 的用法)。
-import { WEAVE_SEED } from "./weave.js";
-const NS = "http://www.w3.org/2000/svg";
-let uid = 0;
-function mulberry32(seed) {
-    let a = seed >>> 0;
-    return () => {
-        a |= 0;
-        a = (a + 0x6d2b79f5) | 0;
-        let t = Math.imul(a ^ (a >>> 15), 1 | a);
-        t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-    };
-}
-function el(name, attrs, parent) {
-    const node = document.createElementNS(NS, name);
-    for (const [k, v] of Object.entries(attrs))
-        node.setAttribute(k, String(v));
-    parent?.append(node);
-    return node;
-}
-const STEP = 4;
-export class SilkBody {
-    host;
-    svg;
-    opts;
-    reduced;
-    id;
-    w = 0;
-    h = 0;
-    built = false;
-    live = [];
-    sheen = [];
-    bandG;
-    sheenG;
-    pointer = null;
-    pressed = false;
-    gx = 0;
-    gy = 0;
-    tension = 0;
-    tenV = 0;
-    pressX = 0;
-    pressY = 0;
-    bx = 0;
-    bandOp = 0;
-    sweep = null;
-    raf = 0;
-    ro;
-    rebuild = 0;
-    removers = [];
-    constructor(host, svg, options) {
-        this.host = host;
-        this.svg = svg;
-        this.opts = {
-            bandMax: 0.75,
-            pitch: options.ghost ? 2.1 : 1.2,
-            hiCount: options.ghost ? 2 : 5,
-            hiSpan: 0.6,
-            ...options,
-        };
-        this.reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
-        this.id = `silk${uid++}`;
-        this.build();
-        this.ro = new ResizeObserver(() => {
-            clearTimeout(this.rebuild);
-            this.rebuild = window.setTimeout(() => this.build(), this.opts.fixedHeight ? 120 : 0);
-        });
-        this.ro.observe(host);
-        const on = (target, type, fn) => {
-            target.addEventListener(type, fn);
-            this.removers.push(() => target.removeEventListener(type, fn));
-        };
-        on(host, "pointerenter", (e) => this.track(e, true));
-        on(host, "pointermove", (e) => this.track(e));
-        on(host, "pointerleave", () => {
-            this.pointer = null;
-            this.wake();
-        });
-        if (this.opts.mode === "press") {
-            on(host, "pointerdown", (e) => {
-                if (this.disabled())
-                    return;
-                this.pressed = true;
-                this.track(e);
-                this.pressX = this.gx;
-                this.pressY = this.gy;
-                this.wake();
-            });
-            on(window, "pointerup", () => this.release());
-            on(host, "keydown", (e) => {
-                if ((e.key === " " || e.key === "Enter") && !this.disabled()) {
-                    this.pointer = { x: this.w / 2, y: this.h / 2, vx: 0, vy: 0, speed: 0 };
-                    this.gx = this.bx = this.pressX = this.w / 2;
-                    this.gy = this.pressY = this.h / 2;
-                    this.pressed = true;
-                    this.wake();
-                }
-            });
-            on(host, "keyup", () => {
-                this.release();
-                this.pointer = null;
-            });
-            on(host, "blur", () => {
-                this.pointer = null;
-                this.wake();
-            });
-        }
-    }
-    destroy() {
-        this.ro.disconnect();
-        clearTimeout(this.rebuild);
-        for (const remove of this.removers)
-            remove();
-        if (this.raf)
-            cancelAnimationFrame(this.raf);
-        this.raf = 0;
-    }
-    disabled() {
-        return this.host.matches(":disabled, [aria-disabled=true]");
-    }
-    build() {
-        const w = this.host.clientWidth;
-        const h = this.opts.fixedHeight ?? this.host.clientHeight;
-        if (w === 0 || (this.built && w === this.w && h === this.h))
-            return;
-        this.w = w;
-        this.h = h;
-        this.built = true;
-        const rng = mulberry32(WEAVE_SEED);
-        const rand = (a, b) => a + rng() * (b - a);
-        const W1 = rand(Math.max(120, w * 0.9), w * 1.8);
-        const A1 = rand(1.0, 1.8);
-        const P1 = rand(0, 6.28);
-        const K1 = rand(0.05, 0.11);
-        const W2 = rand(w * 1.6, w * 3);
-        const A2 = rand(0.5, 0.9);
-        const P2 = rand(0, 6.28);
-        const K2 = rand(0.03, 0.07);
-        const field = (x, y) => A1 * Math.sin((x / W1) * 6.283 + P1 + y * K1) + A2 * Math.sin((x / W2) * 6.283 + P2 + y * K2);
-        const staticD = (y0) => {
-            let d = "";
-            for (let x = -4; x <= w + 4; x += STEP)
-                d += `${d ? "L" : "M"}${x},${(y0 + field(x, y0)).toFixed(2)}`;
-            return d;
-        };
-        const p = this.opts.palette;
-        this.svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
-        if (this.opts.fixedHeight) {
-            this.svg.setAttribute("width", String(w));
-            this.svg.setAttribute("height", String(h));
-        }
-        this.svg.replaceChildren();
-        const defs = el("defs", {}, this.svg);
-        let clip = {};
-        if (this.opts.radius != null) {
-            el("clipPath", { id: `${this.id}-clip` }, defs).append(el("rect", { x: 0, y: 0, width: w, height: this.host.clientHeight, rx: this.opts.radius }, null));
-            clip = { "clip-path": `url(#${this.id}-clip)` };
-        }
-        const grad = el("linearGradient", { id: `${this.id}-band` }, defs);
-        el("stop", { offset: "0", "stop-color": "#fff", "stop-opacity": "0" }, grad);
-        el("stop", { offset: ".5", "stop-color": "#fff", "stop-opacity": ".85" }, grad);
-        el("stop", { offset: "1", "stop-color": "#fff", "stop-opacity": "0" }, grad);
-        const mask = el("mask", { id: `${this.id}-bandm` }, defs);
-        this.bandG = el("g", {}, mask);
-        el("rect", {
-            x: -w * 0.3,
-            y: -h,
-            width: w * 0.6,
-            height: h * 3,
-            fill: `url(#${this.id}-band)`,
-            transform: "rotate(-14)",
-        }, this.bandG);
-        const body = el("g", { ...clip, fill: "none", "stroke-linecap": "round" }, this.svg);
-        if (!this.opts.ghost) {
-            const under = el("g", { stroke: p.un }, body);
-            for (let y = -0.8; y < h + 2.6; y += 1.5)
-                el("path", { d: staticD(y), "stroke-width": "3.4" }, under);
-            const seams = el("g", { stroke: p.sh, opacity: ".5" }, body);
-            for (let y = 1.6; y < h + 1; y += 2.4)
-                el("path", { d: staticD(y), "stroke-width": rand(0.5, 0.8).toFixed(2) }, seams);
-        }
-        this.live = [];
-        const addLive = (y0, node) => {
-            const base = [];
-            for (let x = -4; x <= w + 4; x += STEP)
-                base.push(field(x, y0));
-            this.live.push({ y: y0, node, base, disp: 0, vel: 0 });
-        };
-        const buckets = [p.y0, p.y1, p.y2, p.y3, p.y4];
-        for (let y = 0.6; y < h + 1; y += this.opts.pitch + rand(-0.15, 0.15)) {
-            const bucket = Math.min(4, Math.max(0, Math.round(4.2 - (y / h) * 3 + rand(-0.9, 0.9))));
-            addLive(y, el("path", {
-                d: staticD(y),
-                "stroke-width": rand(0.6, this.opts.ghost ? 1.0 : 1.4).toFixed(2),
-                stroke: buckets[bucket],
-            }, body));
-        }
-        const hiG = el("g", { stroke: p.hi, opacity: ".45" }, body);
-        for (let i = 0; i < this.opts.hiCount; i++) {
-            const y = rand(2, h * this.opts.hiSpan);
-            addLive(y, el("path", { d: staticD(y), "stroke-width": rand(0.4, 0.7).toFixed(2) }, hiG));
-        }
-        this.sheenG = el("g", {
-            ...clip,
-            fill: "none",
-            "stroke-linecap": "round",
-            stroke: p.hi,
-            mask: `url(#${this.id}-bandm)`,
-            opacity: 0,
-        }, this.svg);
-        this.sheen = [];
-        for (let i = 0; i < this.live.length; i += 2) {
-            const src = this.live[i];
-            const node = el("path", { d: staticD(src.y), "stroke-width": "0.9", "stroke-opacity": ".6" }, this.sheenG);
-            this.sheen.push({ src, node });
-        }
-    }
-    // 一條紗當下的 d:靜態 base × 局部繃緊 + 凹陷(窩)+ 帶動位移(§4.1)
-    liveD(yarn) {
-        const sT = 2 * (this.w * 0.35) ** 2;
-        const sD = 2 * (this.w * 0.22) ** 2;
-        const sX = 2 * (this.w * 0.2) ** 2;
-        const ten = Math.max(-0.4, this.tension);
-        const dy = this.pressY - yarn.y;
-        const funnel = ten * dy * 0.5 * Math.exp(-(dy ** 2) / 338);
-        let d = "";
-        for (let i = 0, x = -4; x <= this.w + 4; x += STEP, i++) {
-            const ampl = 1 - 0.5 * ten * Math.exp(-((x - this.pressX) ** 2) / sT);
-            const y = yarn.y +
-                yarn.base[i] * ampl +
-                funnel * Math.exp(-((x - this.pressX) ** 2) / sD) +
-                yarn.disp * Math.exp(-((x - this.gx) ** 2) / sX);
-            d += `${d ? "L" : "M"}${x},${y.toFixed(2)}`;
-        }
-        return d;
-    }
-    track(e, enter) {
-        const r = this.host.getBoundingClientRect();
-        const x = e.clientX - r.left;
-        const y = e.clientY - r.top;
-        const p = this.pointer;
-        const vx = p ? x - p.x : 0;
-        const vy = p ? y - p.y : 0;
-        const speed = Math.hypot(vx, vy);
-        this.pointer = { x, y, vx, vy, speed: p ? p.speed * 0.6 + speed * 0.4 : 0 };
-        if (enter) {
-            this.bx = x;
-            this.gx = x;
-            this.gy = y;
-        }
-        this.wake();
-    }
-    release() {
-        if (!this.pressed)
-            return;
-        this.pressed = false;
-        // 指標已拖出 → 不觸發 click,視覺安靜鬆開;過衝+掃光是「確認觸發」的專屬語言
-        if (this.pointer == null) {
-            this.wake();
-            return;
-        }
-        this.tenV -= 0.035;
-        if (!this.reduced)
-            this.sweep = { from: this.pressX, dir: (this.pointer.vx ?? 1) >= 0 ? 1 : -1, t0: performance.now() };
-        this.wake();
-    }
-    tick(now) {
-        const p = this.pointer;
-        if (p != null) {
-            this.gx += (p.x - this.gx) * 0.25;
-            this.gy += (p.y - this.gy) * 0.25;
-            p.speed *= 0.92;
-        }
-        let pressDrift = false;
-        if (this.pressed && p != null) {
-            const dx = this.gx - this.pressX;
-            const dyP = this.gy - this.pressY;
-            this.pressX += dx * 0.18;
-            this.pressY += dyP * 0.18;
-            pressDrift = Math.abs(dx) + Math.abs(dyP) > 0.05;
-        }
-        let moving = false;
-        const vh = (this.opts.fixedHeight ? this.host.clientHeight : this.h) + 10;
-        const vy = p != null && !this.pressed ? Math.max(-1.8, Math.min(1.8, (p.vy ?? 0) * 0.28)) : 0;
-        for (const yarn of this.live) {
-            if (yarn.y > vh)
-                continue;
-            const target = p != null ? vy * Math.exp(-((yarn.y - this.gy) ** 2) / 200) : 0;
-            yarn.vel += (target - yarn.disp) * 0.13 - yarn.vel * 0.24;
-            yarn.disp += yarn.vel;
-            if (Math.abs(yarn.disp) > 1e-3 || Math.abs(yarn.vel) > 1e-3)
-                moving = true;
-        }
-        if (p != null)
-            p.vy = 0;
-        this.tenV += ((this.pressed && p != null ? 1 : 0) - this.tension) * 0.07 - this.tenV * 0.16;
-        this.tension += this.tenV;
-        const tensionActive = Math.abs(this.tension) > 1e-3 || Math.abs(this.tenV) > 1e-3 || pressDrift;
-        if (moving || tensionActive) {
-            for (const yarn of this.live)
-                if (yarn.y <= vh)
-                    yarn.node.setAttribute("d", this.liveD(yarn));
-            for (const s of this.sheen)
-                if (s.src.y <= vh)
-                    s.node.setAttribute("d", this.liveD(s.src));
-        }
-        let bandT = 0;
-        if (this.sweep != null) {
-            const t = (now - this.sweep.t0) / 640;
-            if (t >= 1)
-                this.sweep = null;
-            else {
-                const ease = 1 - (1 - t) ** 3;
-                this.bx = this.sweep.from + this.sweep.dir * ease * this.w * 0.9;
-                bandT = 0.9 * (1 - t);
-            }
-        }
-        if (this.sweep == null && p != null && !this.disabled()) {
-            this.bx += (p.x - this.bx) * 0.16;
-            bandT = this.pressed ? 0.15 : Math.min(this.opts.bandMax, 0.3 + p.speed / 7);
-        }
-        this.bandOp += (bandT - this.bandOp) * 0.15;
-        this.bandG.setAttribute("transform", `translate(${this.bx.toFixed(1)},0)`);
-        this.sheenG.setAttribute("opacity", this.bandOp.toFixed(3));
-        const active = p != null || this.pressed || this.sweep != null || moving || tensionActive || this.bandOp > 0.005;
-        this.raf = active ? requestAnimationFrame((n) => this.tick(n)) : 0;
-    }
-    wake() {
-        if (!this.raf && !this.reduced && this.built)
-            this.raf = requestAnimationFrame((n) => this.tick(n));
-    }
-}

package/dist/lib/svgId.d.ts

@@ -1 +0,0 @@
-export declare function useSvgId(prefix: string): string;

package/dist/lib/svgId.js

@@ -1,4 +0,0 @@
-import { useId } from "react";
-export function useSvgId(prefix) {
-    return `${prefix}-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
-}