@anyknown/ui 0.1.0

package/dist/lib/silk.js

@@ -0,0 +1,337 @@
+// 織體動態引擎(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/styled.d.ts

@@ -0,0 +1,29 @@
+import * as stylex from "@stylexjs/stylex";
+import type { CompiledStyles, InlineStyles, StyleXArray } from "@stylexjs/stylex/lib/types/StyleXTypes";
+import type { CSSProperties } from "react";
+export type StyleArg = StyleXArray<(null | undefined | CompiledStyles) | boolean | Readonly<[CompiledStyles, InlineStyles]>>;
+type CallerStyleProps = {
+    className?: string;
+    style?: CSSProperties;
+};
+/** Merges StyleX output with the caller's own className/style instead of replacing them. */
+export declare function styled(caller: CallerStyleProps, ...styles: StyleArg[]): {
+    className?: string;
+    style?: CSSProperties;
+};
+export declare const reset: Readonly<{
+    readonly control: Readonly<{
+        readonly appearance: stylex.StyleXClassNameFor<"appearance", "none">;
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+        readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly color: stylex.StyleXClassNameFor<"color", "inherit">;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", "inherit">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "inherit">;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", "inherit">;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "inherit">;
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "inherit">;
+    }>;
+}>;
+export {};

package/dist/lib/styled.js

@@ -0,0 +1,30 @@
+import * as stylex from "@stylexjs/stylex";
+/** Merges StyleX output with the caller's own className/style instead of replacing them. */
+export function styled(caller, ...styles) {
+    const applied = stylex.props(...styles);
+    const className = [applied.className, caller.className].filter(Boolean).join(" ");
+    const hasStyle = applied.style != null || caller.style != null;
+    return {
+        className: className || undefined,
+        style: hasStyle ? { ...applied.style, ...caller.style } : undefined,
+    };
+}
+// 原生 button / input / textarea 的 UA 外觀:buttonface 底色、outset 邊框、13px Arial、
+// 內建 padding。`all: unset` 看起來能一次清掉,但 StyleX 0.19 會靜默丟掉那條宣告
+// (編不出任何 CSS),chrome 就整片留在畫面上。逐項重設一次,共用。
+// 用法:放在 stylex.props / styled 的第一個 style 參數,後面的樣式照常覆蓋。
+export const reset = stylex.create({
+    control: {
+        appearance: "none",
+        margin: 0,
+        padding: 0,
+        borderWidth: 0,
+        backgroundColor: "transparent",
+        color: "inherit",
+        fontFamily: "inherit",
+        fontSize: "inherit",
+        fontWeight: "inherit",
+        lineHeight: "inherit",
+        textAlign: "inherit",
+    },
+});

package/dist/lib/svgId.d.ts

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

package/dist/lib/svgId.js

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

package/dist/lib/useAnimationFrame.d.ts

@@ -0,0 +1 @@
+export declare function useAnimationFrame(active: boolean, onFrame: (elapsedMs: number) => void): void;

package/dist/lib/useAnimationFrame.js

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from "react";
+export function useAnimationFrame(active, onFrame) {
+    const callback = useRef(onFrame);
+    useEffect(() => {
+        callback.current = onFrame;
+    });
+    useEffect(() => {
+        if (!active)
+            return;
+        let frame = 0;
+        let start = 0;
+        const tick = (now) => {
+            if (!start)
+                start = now;
+            callback.current(now - start);
+            frame = requestAnimationFrame(tick);
+        };
+        frame = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(frame);
+    }, [active]);
+}

package/dist/lib/useControllableState.d.ts

@@ -0,0 +1 @@
+export declare function useControllableState<T>(controlled: T | undefined, defaultValue: T, onChange?: (value: T) => void): [T, (value: T | ((prev: T) => T)) => void];

package/dist/lib/useControllableState.js

@@ -0,0 +1,14 @@
+import { useCallback, useRef, useState } from "react";
+export function useControllableState(controlled, defaultValue, onChange) {
+    const [uncontrolled, setUncontrolled] = useState(defaultValue);
+    const value = controlled !== undefined ? controlled : uncontrolled;
+    const valueRef = useRef(value);
+    valueRef.current = value;
+    const set = useCallback((next) => {
+        const resolved = typeof next === "function" ? next(valueRef.current) : next;
+        valueRef.current = resolved;
+        setUncontrolled(resolved);
+        onChange?.(resolved);
+    }, [onChange]);
+    return [value, set];
+}

package/dist/lib/useCopy.d.ts

@@ -0,0 +1,4 @@
+export declare function useCopy(resetAfterMs?: number): {
+    copied: boolean;
+    copy: (value: string) => Promise<boolean>;
+};

package/dist/lib/useCopy.js

@@ -0,0 +1,19 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export function useCopy(resetAfterMs = 2000) {
+    const [copied, setCopied] = useState(false);
+    const timer = useRef(undefined);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const copy = useCallback(async (value) => {
+        try {
+            await navigator.clipboard.writeText(value);
+        }
+        catch {
+            return false;
+        }
+        setCopied(true);
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setCopied(false), resetAfterMs);
+        return true;
+    }, [resetAfterMs]);
+    return { copied, copy };
+}

package/dist/lib/voice.d.ts

@@ -0,0 +1,2 @@
+export type VoiceState = "idle" | "listening" | "thinking" | "speaking";
+export declare function voicePath(state: VoiceState, t: number, level?: number): string;

package/dist/lib/voice.js

@@ -0,0 +1,30 @@
+const TAU = Math.PI * 2;
+function sample(fn) {
+    let d = "";
+    for (let x = 2; x <= 46; x += 1.5)
+        d += `${d ? "L" : "M"}${x},${fn(x).toFixed(1)}`;
+    return d;
+}
+// One fibre, four states: flat at rest, vibrating with the mic level while
+// listening, coiled into a rolling telephone cord while thinking, and carrying
+// a travelling wave while speaking.
+export function voicePath(state, t, level = 0.4) {
+    if (state === "idle")
+        return "M2,12 L46,12";
+    if (state === "thinking") {
+        let d = "";
+        const loops = 3;
+        const span = 36;
+        for (let a = -0.6; a <= loops * TAU + 0.6; a += 0.12) {
+            const b = 4 + 0.5 * Math.sin(t * 1.8);
+            const x = 6 + (span * a) / (loops * TAU) - b * 0.55 * Math.sin(a + t * 2);
+            const y = 13.5 - b * 0.75 * Math.cos(a + t * 2);
+            d += `${d ? "L" : "M"}${x.toFixed(2)},${y.toFixed(2)}`;
+        }
+        return d;
+    }
+    if (state === "listening") {
+        return sample((x) => 12 + 8.5 * level * Math.sin((x / 48) * Math.PI) * Math.sin(x / 2.6 + t * 7));
+    }
+    return sample((x) => 12 + 5.5 * Math.sin((x / 48) * Math.PI) * Math.sin((x / 7.5) * TAU - t * 5));
+}

package/dist/lib/weave.d.ts

@@ -0,0 +1,28 @@
+export declare const WEAVE_SEED = 10075;
+export type Rand = (a: number, b: number) => number;
+export declare function weaveRand(seed?: number): Rand;
+export interface Strand {
+    d: string;
+    sw: string;
+}
+export interface FaceStrand extends Strand {
+    bucket: 0 | 1 | 2 | 3 | 4;
+}
+export interface WeaveLayers {
+    under: Strand[];
+    seams: Strand[];
+    face: FaceStrand[];
+    hi: Strand[];
+}
+export interface WeaveOptions {
+    w: number;
+    h: number;
+    s?: number;
+    ox?: number;
+    oy?: number;
+    pitch?: number;
+    hiCount?: number;
+    hiSpan?: number;
+}
+export declare function buildWeave(opts: WeaveOptions, rand: Rand): WeaveLayers;
+export declare function buildThread(pts: [number, number][], rand: Rand): string;

package/dist/lib/weave.js

@@ -0,0 +1,83 @@
+// 織體幾何(TEXTURE-GUIDE §3):固定種子 → 同尺寸恆定的布。
+// 純函式、無 DOM,可在 module scope 預算(SSR 安全)。
+// 參考實作:components/button/prototype.html(唯一真相)。
+export const WEAVE_SEED = 10075;
+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;
+    };
+}
+// 一個元件一支 rand:weave 與縫線依序消費同一序列,織法才與 prototype 完全一致
+export function weaveRand(seed = WEAVE_SEED) {
+    const rng = mulberry32(seed);
+    return (a, b) => a + rng() * (b - a);
+}
+export function buildWeave(opts, rand) {
+    const { w, h, s = 1, ox = 0, oy = 0, pitch = 1.2, hiCount = 4, hiSpan = 0.6 } = opts;
+    // 共享波場:兩支長波,相位隨 y 緩慢滑移(§3.2,參數順序照抄)
+    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);
+    // 取樣超出左右邊界 4px,由 clip 裁形(右緣不因 w 非 4 倍數缺一截)
+    const staticD = (y0) => {
+        let d = "";
+        for (let x = -4; x <= w + 4; x += 4)
+            d += `${d ? "L" : "M"}${((ox + x) * s).toFixed(2)},${((oy + y0 + field(x, y0)) * s).toFixed(2)}`;
+        return d;
+    };
+    const under = [];
+    for (let y = -0.8; y < h + 2.6; y += 1.5)
+        under.push({ d: staticD(y), sw: (3.4 * s).toFixed(2) });
+    const seams = [];
+    for (let y = 1.6; y < h + 1; y += 2.4)
+        seams.push({ d: staticD(y), sw: (rand(0.5, 0.8) * s).toFixed(2) });
+    const face = [];
+    for (let y = 0.6; y < h + 1; y += 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))));
+        face.push({ d: staticD(y), sw: (rand(0.6, 1.4) * s).toFixed(2), bucket });
+    }
+    const hi = [];
+    for (let i = 0; i < hiCount; i++) {
+        const y = rand(2, h * hiSpan);
+        hi.push({ d: staticD(y), sw: (rand(0.4, 0.7) * s).toFixed(2) });
+    }
+    return { under, seams, face, hi };
+}
+// 縫線(checkbox 的勾/橫線):折線沿弧長疊一支長波的法向微彎 — 勾也是線,不是平面 icon
+export function buildThread(pts, rand) {
+    const samples = [];
+    let L = 0;
+    for (let i = 0; i < pts.length - 1; i++) {
+        const [x0, y0] = pts[i];
+        const [x1, y1] = pts[i + 1];
+        const len = Math.hypot(x1 - x0, y1 - y0);
+        const nx = -(y1 - y0) / len;
+        const ny = (x1 - x0) / len;
+        const n = Math.ceil(len);
+        for (let j = i === 0 ? 0 : 1; j <= n; j++) {
+            const t = j / n;
+            samples.push({ x: x0 + (x1 - x0) * t, y: y0 + (y1 - y0) * t, nx, ny, l: L + len * t });
+        }
+        L += len;
+    }
+    const A = rand(0.25, 0.45);
+    const WL = rand(L * 1.2, L * 2);
+    const PH = rand(0, 6.28);
+    let d = "";
+    for (const p of samples) {
+        const off = A * Math.sin((p.l / WL) * 6.283 + PH);
+        d += `${d ? "L" : "M"}${(p.x + p.nx * off).toFixed(2)},${(p.y + p.ny * off).toFixed(2)}`;
+    }
+    return d;
+}

package/dist/scrollbar.css

@@ -0,0 +1,29 @@
+/* @anyknown/ui — 客製 scrollbar(Ledger)
+ * 細、圓、安靜:thumb 是一條線(borderStrong),hover 才加深;track 透明。
+ * Chromium/Safari 走 ::-webkit-scrollbar;Firefox 走標準屬性(兩者互斥,用 @supports 分流)。 */
+
+::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+::-webkit-scrollbar-thumb {
+	background: var(--ak-border-strong, #c8c3b4);
+	border-radius: 999px;
+	border: 3px solid transparent;
+	background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover {
+	background: var(--ak-text-faint, #9c958a);
+	background-clip: padding-box;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+	background: transparent;
+}
+
+@supports not selector(::-webkit-scrollbar) {
+	* {
+		scrollbar-width: thin;
+		scrollbar-color: var(--ak-border-strong, #c8c3b4) transparent;
+	}
+}