@anyknown/ui 0.7.0 → 0.8.0

package/dist/components/icon/Chevron.d.ts

@@ -0,0 +1,9 @@
+import type { SVGAttributes } from "react";
+declare const PATH: {
+    readonly right: "m9 18 6-6-6-6";
+    readonly down: "m6 9 6 6 6-6";
+};
+export declare function Chevron({ direction, ...props }: SVGAttributes<SVGSVGElement> & {
+    direction: keyof typeof PATH;
+}): import("react").JSX.Element;
+export {};

package/dist/components/icon/Chevron.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ICON_STROKE } from "./icon.js";
+const PATH = { right: "m9 18 6-6-6-6", down: "m6 9 6 6 6-6" };
+export function Chevron({ direction, ...props }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: ICON_STROKE, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...props, children: _jsx("path", { d: PATH[direction] }) }));
+}

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,35 @@
+import * as stylex from "@stylexjs/stylex";
+/** An icon draws at the size it is given; these are the five in use. Stroke 2, currentColor. */
+export declare const icon: Readonly<{
+    readonly xs: Readonly<{
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+        readonly height: stylex.StyleXClassNameFor<"height", 12>;
+        readonly pointerEvents: stylex.StyleXClassNameFor<"pointerEvents", "none">;
+        readonly width: stylex.StyleXClassNameFor<"width", 12>;
+    }>;
+    readonly sm: Readonly<{
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+        readonly height: stylex.StyleXClassNameFor<"height", 14>;
+        readonly pointerEvents: stylex.StyleXClassNameFor<"pointerEvents", "none">;
+        readonly width: stylex.StyleXClassNameFor<"width", 14>;
+    }>;
+    readonly md: Readonly<{
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+        readonly height: stylex.StyleXClassNameFor<"height", 16>;
+        readonly pointerEvents: stylex.StyleXClassNameFor<"pointerEvents", "none">;
+        readonly width: stylex.StyleXClassNameFor<"width", 16>;
+    }>;
+    readonly base: Readonly<{
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+        readonly height: stylex.StyleXClassNameFor<"height", 18>;
+        readonly pointerEvents: stylex.StyleXClassNameFor<"pointerEvents", "none">;
+        readonly width: stylex.StyleXClassNameFor<"width", 18>;
+    }>;
+    readonly lg: Readonly<{
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+        readonly height: stylex.StyleXClassNameFor<"height", 20>;
+        readonly pointerEvents: stylex.StyleXClassNameFor<"pointerEvents", "none">;
+        readonly width: stylex.StyleXClassNameFor<"width", 20>;
+    }>;
+}>;
+export declare const ICON_STROKE = 2;

package/dist/components/icon/icon.js

@@ -0,0 +1,10 @@
+import * as stylex from "@stylexjs/stylex";
+/** An icon draws at the size it is given; these are the five in use. Stroke 2, currentColor. */
+export const icon = stylex.create({
+    xs: { flexShrink: 0, height: 12, pointerEvents: "none", width: 12 },
+    sm: { flexShrink: 0, height: 14, pointerEvents: "none", width: 14 },
+    md: { flexShrink: 0, height: 16, pointerEvents: "none", width: 16 },
+    base: { flexShrink: 0, height: 18, pointerEvents: "none", width: 18 },
+    lg: { flexShrink: 0, height: 20, pointerEvents: "none", width: 20 },
+});
+export const ICON_STROKE = 2;

package/dist/components/icon-button/IconButton.d.ts

@@ -0,0 +1,17 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ButtonHTMLAttributes, ReactNode, Ref } from "react";
+export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    /** The only place the name is written: the tooltip and the accessible name. */
+    label: string;
+    side?: "top" | "bottom" | "left" | "right";
+    /** `aria-current`: the page this button stands for is the one open. */
+    current?: boolean;
+    /** Pressed open: the popover it owns is showing. */
+    open?: boolean;
+    size?: "md" | "sm" | "xs";
+    badge?: number;
+    children: ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+    sx?: stylex.StyleXStyles;
+};
+export declare function IconButton({ label, side, current, open, size, badge, children, sx, className, style, ...props }: IconButtonProps): import("react").JSX.Element;

package/dist/components/icon-button/IconButton.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { color, corner, font, ink, motion, type } from "../../tokens.stylex.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+/**
+ * `.ib`: a square that holds one glyph. Nothing at rest, an ink wash under the pointer, the
+ * name in a tooltip; a badge in the corner when it counts something.
+ */
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const styles = stylex.create({
+    root: {
+        alignItems: "center",
+        backgroundColor: { default: "transparent", ":hover": ink.n8 },
+        borderRadius: corner.ib,
+        borderStyle: "none",
+        borderWidth: 0,
+        color: { default: color.textMuted, ":hover": color.text },
+        cursor: "pointer",
+        display: "inline-grid",
+        flex: "none",
+        fontFamily: "inherit",
+        fontSize: "inherit",
+        height: "2.25rem",
+        justifyItems: "center",
+        lineHeight: "inherit",
+        margin: 0,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.accent}` },
+        outlineOffset: 2,
+        padding: 0,
+        placeItems: "center",
+        position: "relative",
+        scale: { default: "1", ":active": "0.96" },
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        transitionProperty: "background-color, color",
+        transitionTimingFunction: motion.easeOut,
+        width: "2.25rem",
+    },
+    current: { color: color.text },
+    open: { backgroundColor: ink.n8, color: color.text },
+    sm: { height: "2rem", width: "2rem" },
+    xs: { height: "1.75rem", width: "1.75rem" },
+    badge: {
+        backgroundColor: color.accent,
+        borderRadius: 8,
+        color: color.accentText,
+        fontFamily: font.mono,
+        fontSize: type.t1,
+        fontWeight: 500,
+        height: 16,
+        insetInlineEnd: 2,
+        lineHeight: "16px",
+        minWidth: 16,
+        paddingInline: 4,
+        position: "absolute",
+        textAlign: "center",
+        top: 2,
+    },
+});
+export function IconButton({ label, side = "right", current = false, open = false, size = "md", badge, children, sx, className, style, ...props }) {
+    // A tooltip renders its trigger through the child and hands it a class and a style; merged.
+    const own = stylex.props(styles.root, current && styles.current, open && styles.open, size === "sm" && styles.sm, size === "xs" && styles.xs, sx);
+    const button = (_jsxs("button", { type: "button", "aria-label": label, ...(current ? { "aria-current": "page" } : {}), ...props, className: [own.className, className].filter(Boolean).join(" "), style: { ...own.style, ...style }, children: [children, badge !== undefined && badge > 0 && _jsx("span", { ...stylex.props(styles.badge), children: badge })] }));
+    if (open)
+        return button;
+    return (_jsx(Tooltip, { content: label, side: side, children: button }));
+}

package/dist/components/page/Page.d.ts

@@ -0,0 +1,64 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+type Sx = {
+    sx?: stylex.StyleXStyles;
+};
+export type PageHeadProps = {
+    title: ReactNode;
+    /** The summary beside the title, before the spacer: `已連接 3 · 工具 49`. */
+    lead?: ReactNode;
+    /** The summary on the right, after the spacer: `已設定 3 / 8`, a stat line. */
+    summary?: ReactNode;
+    actions?: ReactNode;
+} & Sx;
+export declare function PageHead({ title, lead, summary, actions, sx }: PageHeadProps): import("react").JSX.Element;
+/** A number inside a summary or a stat line: mono, in the text colour. */
+export declare function B({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export type SectionLabelProps = {
+    children: ReactNode;
+    end?: ReactNode;
+    first?: boolean;
+} & Sx;
+export declare function SectionLabel({ children, end, first, sx }: SectionLabelProps): import("react").JSX.Element;
+export declare function Sub({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export declare function FootNote({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export declare function Hint({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export declare function Snippet({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+/** `.dpanel`: the bordered surface a section's rows sit on; `padded` when it holds prose. */
+export declare function Panel({ children, padded, sx }: {
+    children: ReactNode;
+    padded?: boolean;
+} & Sx): import("react").JSX.Element;
+export type StatLineProps = {
+    children: ReactNode;
+} & Sx;
+export declare function StatLine({ children, sx }: StatLineProps): import("react").JSX.Element;
+export declare function StatBar({ percent, label, text }: {
+    percent: number;
+    label?: string;
+    text?: string;
+}): import("react").JSX.Element;
+export type BarsProps = {
+    values: number[];
+    /** What a bar says when the pointer is on it. */
+    tip: (value: number, index: number) => string;
+    from: string;
+    to: string;
+    sx?: stylex.StyleXStyles;
+};
+/** `.bars` + `.bx`: one bar a day, the first and last day named under them. */
+export declare function Bars({ values, tip, from, to, sx }: BarsProps): import("react").JSX.Element;
+export declare function Faint({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export {};

package/dist/components/page/Page.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { color, corner, font, space, tone, type } from "../../tokens.stylex.js";
+/**
+ * The words around the rows: the page's one line (`.page-h`), the label a section wears
+ * (`.slab`), the sentence under a group (`.sub` / `.foot-note`), a code block, a stat line.
+ */
+const styles = stylex.create({
+    head: {
+        alignItems: "baseline",
+        color: color.text,
+        display: "flex",
+        flexWrap: "wrap",
+        gap: space.sm,
+        lineHeight: type.body,
+        marginBlock: `0 ${space.xs}`,
+    },
+    h1: { fontSize: type.t4, fontWeight: 600, lineHeight: type.tight, margin: 0 },
+    sp: { flex: 1 },
+    summary: { color: color.textMuted, fontSize: type.t2, minWidth: 0 },
+    b: { color: color.text, fontFamily: font.mono, fontWeight: 400 },
+    slab: {
+        alignItems: "center",
+        color: color.textMuted,
+        display: "flex",
+        fontFamily: font.mono,
+        fontSize: type.t1,
+        gap: space.xs,
+        lineHeight: type.body,
+        marginBlock: `${space.lg} ${space.xs}`,
+    },
+    slabFirst: { marginBlockStart: space.md },
+    n: { marginInlineStart: "auto" },
+    sub: {
+        color: color.textMuted,
+        fontSize: type.t2,
+        lineHeight: type.body,
+        marginBlock: `${space.sm} 0`,
+    },
+    foot: {
+        color: color.textMuted,
+        fontSize: type.t2,
+        lineHeight: type.body,
+        marginBlock: `${space.xs} 0`,
+    },
+    hint: {
+        color: color.textMuted,
+        fontSize: type.t2,
+        lineHeight: type.body,
+        marginBlock: `0 ${space.xs}`,
+    },
+    code: {
+        backgroundColor: color.layer3,
+        borderRadius: corner.sm,
+        color: color.textMuted,
+        fontFamily: font.mono,
+        fontSize: type.t1,
+        lineHeight: 1.6,
+        margin: 0,
+        maxWidth: "44rem",
+        overflowWrap: "break-word",
+        paddingBlock: space.xs,
+        paddingInline: space.sm,
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+    },
+    panel: {
+        backgroundColor: color.surface,
+        borderRadius: corner.card,
+        boxShadow: `inset 0 0 0 1px ${color.border}`,
+        color: color.text,
+        fontSize: type.t2,
+        lineHeight: type.body,
+    },
+    padded: { display: "flex", flexDirection: "column", gap: space.xs, padding: space.sm },
+    stat: {
+        alignItems: "center",
+        color: color.textMuted,
+        display: "flex",
+        flexWrap: "wrap",
+        fontSize: type.t2,
+        gap: space.xs,
+        lineHeight: type.body,
+    },
+    sbar: {
+        backgroundColor: color.layer4,
+        borderRadius: 2,
+        flex: "none",
+        height: 4,
+        overflow: "hidden",
+        width: "8rem",
+    },
+    sfill: (percent) => ({
+        backgroundColor: color.accent,
+        display: "block",
+        height: "100%",
+        width: `${percent}%`,
+    }),
+    bars: { alignItems: "flex-end", display: "flex", gap: 2, height: "6rem" },
+    bar: {
+        backgroundColor: {
+            default: `color-mix(in srgb, ${color.accent} 60%, transparent)`,
+            ":hover": color.accent,
+        },
+        borderRadius: "2px 2px 0 0",
+        flex: 1,
+        minWidth: 0,
+        position: "relative",
+    },
+    barH: (percent) => ({ height: `${percent}%` }),
+    bx: {
+        color: color.textMuted,
+        display: "flex",
+        fontFamily: font.mono,
+        fontSize: type.t1,
+        justifyContent: "space-between",
+        marginBlockStart: space.xxs,
+    },
+    faint: { color: tone.faint },
+});
+export function PageHead({ title, lead, summary, actions, sx }) {
+    return (_jsxs("div", { ...stylex.props(styles.head, sx), children: [_jsx("h1", { ...stylex.props(styles.h1), children: title }), lead !== undefined && _jsx("span", { ...stylex.props(styles.summary), children: lead }), _jsx("span", { ...stylex.props(styles.sp) }), summary !== undefined && _jsx("span", { ...stylex.props(styles.summary), children: summary }), actions] }));
+}
+/** A number inside a summary or a stat line: mono, in the text colour. */
+export function B({ children }) {
+    return _jsx("b", { ...stylex.props(styles.b), children: children });
+}
+export function SectionLabel({ children, end, first = false, sx }) {
+    return (_jsxs("div", { ...stylex.props(styles.slab, first && styles.slabFirst, sx), children: [children, end !== undefined && _jsx("span", { ...stylex.props(styles.n), children: end })] }));
+}
+export function Sub({ children, sx }) {
+    return _jsx("p", { ...stylex.props(styles.sub, sx), children: children });
+}
+export function FootNote({ children, sx }) {
+    return _jsx("p", { ...stylex.props(styles.foot, sx), children: children });
+}
+export function Hint({ children, sx }) {
+    return _jsx("p", { ...stylex.props(styles.hint, sx), children: children });
+}
+export function Snippet({ children, sx }) {
+    return _jsx("pre", { ...stylex.props(styles.code, sx), children: children });
+}
+/** `.dpanel`: the bordered surface a section's rows sit on; `padded` when it holds prose. */
+export function Panel({ children, padded = false, sx }) {
+    return _jsx("div", { ...stylex.props(styles.panel, padded && styles.padded, sx), children: children });
+}
+export function StatLine({ children, sx }) {
+    return _jsx("span", { ...stylex.props(styles.stat, sx), children: children });
+}
+export function StatBar({ percent, label, text }) {
+    const value = Math.max(0, Math.min(100, percent));
+    return (_jsx("span", { ...stylex.props(styles.sbar), 
+        // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- a 4px reading, not a control
+        role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(value), ...(label ? { "aria-label": label } : {}), ...(text ? { "aria-valuetext": text } : {}), children: _jsx("i", { ...stylex.props(styles.sfill(value)) }) }));
+}
+/** `.bars` + `.bx`: one bar a day, the first and last day named under them. */
+export function Bars({ values, tip, from, to, sx }) {
+    const max = Math.max(1, ...values);
+    return (_jsxs("div", { ...stylex.props(sx), children: [_jsx("div", { ...stylex.props(styles.bars), "aria-label": `${from} – ${to}`, children: values.map((value, index) => (_jsx("i", { title: tip(value, index), ...stylex.props(styles.bar, styles.barH(Math.round((value / max) * 100))) }, index))) }), _jsxs("div", { ...stylex.props(styles.bx), children: [_jsx("span", { children: from }), _jsx("span", { children: to })] })] }));
+}
+export function Faint({ children, sx }) {
+    return _jsx("span", { ...stylex.props(styles.faint, sx), children: children });
+}

package/dist/components/popover/Popover.js

@@ -15,7 +15,7 @@ const styles = stylex.create({
     title: {
         fontFamily: font.display,
         fontSize: text.base,
-        fontWeight: 500,
+        fontWeight: 600,
         lineHeight: text.leadingSnug,
         margin: 0,
         marginBottom: space.xxs,

package/dist/components/progress/Progress.js

@@ -1,68 +1,52 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
-import { useCallback, useMemo, useState } from "react";
-import { BALL_STRANDS, ballDashOffset } from "../../lib/progress.js";
+import { useCallback, useState } from "react";
 import { styled } from "../../lib/styled.js";
-import { useSvgId } from "../../lib/svgId.js";
-import { buildWeave, weaveRand } from "../../lib/weave.js";
-import { color, font, motion, radius, space, yarn } from "../../tokens.stylex.js";
+import { color, font, motion, radius, space } from "../../tokens.stylex.js";
 const REDUCED = "@media (prefers-reduced-motion: reduce)";
 const STAGES = ["掃描對話", "挑出耐久事實", "合併重複", "落盤固定"];
-// 進度 = 一個容器裡長出一塊布:布就是 button 那塊(TEXTURE-GUIDE §3、種子 10075、
-// 同一組 yarn 色票與落影),容器是凹進去的軌。填充只是寬度往右長,布本身不動也不縮放 ——
-// 露出多少就是織到哪裡。環形同理:同一塊布在後面,弧形只是取景框(和 radio 的鏡頭一樣)。
-// 全部 CSS,零 rAF。
-const TRACK_H = 20;
-const PAD = 2;
-const CLOTH_H = TRACK_H - 2 - PAD * 2;
+// 進度 = 一條軌加一段填充:軌是 border 色的 4px 帶,填充是實心 accent,
+// 寬度就是讀數。不定量時同一段填充在軌上等速滑過。全部 CSS,零 rAF。
+const TRACK_H = 4;
 const RING = 60;
-const BAND = 9;
+const BAND = 6;
+const SWEEP_W = 40;
 const spin = stylex.keyframes({ from: { rotate: "0deg" }, to: { rotate: "360deg" } });
-const sweep = stylex.keyframes({ from: { insetInlineStart: "-32%" }, to: { insetInlineStart: "100%" } });
+const sweep = stylex.keyframes({
+    from: { insetInlineStart: `-${SWEEP_W}%` },
+    to: { insetInlineStart: "100%" },
+});
 const styles = stylex.create({
     svg: { display: "block" },
     track: {
-        display: "flex",
-        alignItems: "center",
+        position: "relative",
         width: "100%",
         height: TRACK_H,
         boxSizing: "border-box",
-        padding: PAD,
-        borderWidth: 1,
-        borderStyle: "solid",
-        borderColor: color.border,
         borderRadius: radius.full,
-        backgroundColor: color.bg,
+        backgroundColor: color.border,
         overflow: "hidden",
     },
-    body: {
-        position: "relative",
-        height: CLOTH_H,
+    fill: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        insetInlineStart: 0,
         borderRadius: radius.full,
-        overflow: "hidden",
-        filter: yarn.shadow,
+        backgroundColor: color.accent,
         transitionProperty: "width",
         transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
         transitionTimingFunction: "linear",
     },
     grow: (percent) => ({ width: `${percent}%` }),
     window: {
-        width: "32%",
-        insetInlineStart: 0,
+        width: `${SWEEP_W}%`,
+        insetInlineStart: { default: null, [REDUCED]: 0 },
         animationName: { default: sweep, [REDUCED]: "none" },
         animationDuration: "1.8s",
         animationTimingFunction: "linear",
         animationIterationCount: "infinite",
     },
-    cloth: { fill: "none", strokeLinecap: "round" },
-    fUn: { stroke: yarn.un },
-    fSh: { stroke: yarn.sh, opacity: 0.5 },
-    fY0: { stroke: yarn.y0 },
-    fY1: { stroke: yarn.y1 },
-    fY2: { stroke: yarn.y2 },
-    fY3: { stroke: yarn.y3 },
-    fY4: { stroke: yarn.y4 },
-    fHi: { stroke: yarn.hi, opacity: 0.45 },
     tidy: { display: "grid", gap: space.xs },
     stage: {
         fontFamily: font.mono,
@@ -74,24 +58,30 @@ const styles = stylex.create({
         fontVariantNumeric: "tabular-nums",
     },
     ringWrap: { position: "relative", display: "inline-grid", placeItems: "center" },
-    ringTrack: { fill: "none", stroke: color.bone },
-    ringCloth: { filter: yarn.shadow },
-    spin: {
+    ringTrack: { fill: "none", stroke: color.border },
+    ringArc: {
+        fill: "none",
+        stroke: color.accent,
+        strokeLinecap: "round",
+        transform: "rotate(-90deg)",
         transformBox: "fill-box",
         transformOrigin: "center",
-        animationName: { default: spin, [REDUCED]: "none" },
-        animationDuration: "0.9s",
-        animationTimingFunction: "linear",
-        animationIterationCount: "infinite",
+        transitionProperty: "stroke-dasharray",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        transitionTimingFunction: "linear",
     },
-    strand: {
+    spinArc: {
         fill: "none",
-        stroke: color.accent,
-        strokeWidth: 1.5,
+        stroke: "currentColor",
         strokeLinecap: "round",
-        strokeDasharray: 100,
+        transformBox: "fill-box",
+        transformOrigin: "center",
+        animationName: { default: spin, [REDUCED]: "none" },
+        animationDuration: "0.8s",
+        animationTimingFunction: "linear",
+        animationIterationCount: "infinite",
     },
-    statusHost: { display: "inline-flex" },
+    statusHost: { display: "inline-flex", color: color.textMuted },
     srOnly: {
         position: "absolute",
         width: 1,
@@ -113,62 +103,17 @@ const styles = stylex.create({
         fontVariantNumeric: "tabular-nums",
     },
 });
-const BUCKETS = [styles.fY0, styles.fY1, styles.fY2, styles.fY3, styles.fY4];
-function Cloth({ layers }) {
-    return (_jsxs(_Fragment, { children: [_jsx("g", { ...stylex.props(styles.fUn), children: layers.under.map((strand, index) => (_jsx("path", { d: strand.d, strokeWidth: strand.sw }, index))) }), _jsx("g", { ...stylex.props(styles.fSh), children: layers.seams.map((strand, index) => (_jsx("path", { d: strand.d, strokeWidth: strand.sw }, index))) }), layers.face.map((strand, index) => (_jsx("path", { d: strand.d, strokeWidth: strand.sw, ...stylex.props(BUCKETS[strand.bucket]) }, index))), _jsx("g", { ...stylex.props(styles.fHi), children: layers.hi.map((strand, index) => (_jsx("path", { d: strand.d, strokeWidth: strand.sw }, index))) })] }));
-}
-// 量到容器內寬才織(ref callback + ResizeObserver,不用 effect);布永遠是整條軌的寬度,
-// 所以填充長出來時露出的是同一塊布的更多段,不是把布拉長。
 function Bar({ percent }) {
-    const [inner, setInner] = useState(0);
-    const measure = useCallback((node) => {
-        if (!node)
-            return;
-        const read = () => setInner((current) => {
-            const next = node.clientWidth - PAD * 2;
-            return current === next ? current : next;
-        });
-        read();
-        const observer = new ResizeObserver(read);
-        observer.observe(node);
-        return () => observer.disconnect();
-    }, []);
-    const cloth = useMemo(() => (inner > 0 ? buildWeave({ w: inner, h: CLOTH_H }, weaveRand()) : null), [inner]);
-    return (_jsx("span", { ref: measure, ...stylex.props(styles.track), children: cloth != null && (_jsx("span", { ...stylex.props(styles.body, percent != null ? styles.grow(percent) : styles.window, styles.cloth), children: _jsx("svg", { width: inner, height: CLOTH_H, viewBox: `0 0 ${inner} ${CLOTH_H}`, "aria-hidden": "true", ...stylex.props(styles.svg, styles.cloth), children: _jsx(Cloth, { layers: cloth }) }) })) }));
-}
-// 環形:同一塊布在後面,弧形取景框開到 percent(和 radio 的鏡頭同一個邏輯)
-function ringSector(percent) {
-    const centre = RING / 2;
-    const outer = centre - 1;
-    const nner = outer - BAND;
-    const sweepDeg = Math.min(359.99, (percent / 100) * 360);
-    const a0 = -Math.PI / 2;
-    const a1 = a0 + (sweepDeg * Math.PI) / 180;
-    const large = sweepDeg > 180 ? 1 : 0;
-    const point = (r, angle) => `${(centre + r * Math.cos(angle)).toFixed(2)},${(centre + r * Math.sin(angle)).toFixed(2)}`;
-    return [
-        `M${point(outer, a0)}`,
-        `A${outer},${outer} 0 ${large} 1 ${point(outer, a1)}`,
-        `L${point(nner, a1)}`,
-        `A${nner},${nner} 0 ${large} 0 ${point(nner, a0)}`,
-        "Z",
-    ].join("");
+    return (_jsx("span", { ...stylex.props(styles.track), children: _jsx("span", { ...stylex.props(styles.fill, percent != null ? styles.grow(percent) : styles.window) }) }));
 }
 const SPINNER_SIZES = { sm: 18, md: 28, lg: 40 };
-// spinner = 一段布做的弧在轉。布在後面不動(每個尺寸在 module scope 各織一塊,
-// SSR 安全),轉的是遮罩上那道弧 —— 和 radio 的鏡頭、tabs 的取景窗同一個邏輯。
-const SPINNER_CLOTH = {
-    sm: buildWeave({ w: SPINNER_SIZES.sm, h: SPINNER_SIZES.sm }, weaveRand()),
-    md: buildWeave({ w: SPINNER_SIZES.md, h: SPINNER_SIZES.md }, weaveRand()),
-    lg: buildWeave({ w: SPINNER_SIZES.lg, h: SPINNER_SIZES.lg }, weaveRand()),
-};
 const clampPercent = (value) => Math.max(0, Math.min(100, value));
+// spinner = 一段圓弧在轉:pathLength 100,72 長的弧留 28 的缺口。
 export function Spinner({ size = "md", label = "載入中" }) {
-    const maskId = useSvgId("ak-spin");
     const px = SPINNER_SIZES[size];
     const band = px * 0.135;
-    const radius = (px - band) / 2 - 0.5;
-    return (_jsxs("span", { role: "status", "aria-label": label, ...stylex.props(styles.statusHost), children: [_jsxs("svg", { width: px, height: px, viewBox: `0 0 ${px} ${px}`, "aria-hidden": "true", ...stylex.props(styles.svg), children: [_jsx("defs", { children: _jsx("mask", { id: maskId, children: _jsx("circle", { cx: px / 2, cy: px / 2, r: radius, fill: "none", stroke: "#fff", strokeWidth: band, strokeLinecap: "round", pathLength: "100", strokeDasharray: "72 28", ...stylex.props(styles.spin) }) }) }), _jsx("g", { mask: `url(#${maskId})`, ...stylex.props(styles.cloth), children: _jsx(Cloth, { layers: SPINNER_CLOTH[size] }) })] }), _jsx("span", { ...stylex.props(styles.srOnly), children: label })] }));
+    const r = (px - band) / 2 - 0.5;
+    return (_jsxs("span", { role: "status", "aria-label": label, ...stylex.props(styles.statusHost), children: [_jsx("svg", { width: px, height: px, viewBox: `0 0 ${px} ${px}`, "aria-hidden": "true", ...stylex.props(styles.svg), children: _jsx("circle", { cx: px / 2, cy: px / 2, r: r, strokeWidth: band, pathLength: "100", strokeDasharray: "72 28", ...stylex.props(styles.spinArc) }) }), _jsx("span", { ...stylex.props(styles.srOnly), children: label })] }));
 }
 export function Progress({ value, valueText, stages = STAGES, ...rest }) {
     if (value == null)
@@ -177,7 +122,7 @@ export function Progress({ value, valueText, stages = STAGES, ...rest }) {
     return (_jsx("div", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(percent), "aria-valuetext": valueText, ...rest, ...styled(rest, styles.svg), children: _jsx(Bar, { percent: percent }) }));
 }
 // 不定量:沒有真的進度可報,所以不給 aria-valuenow,也不顯示百分比。
-// 一段布在軌道上走完再走一次,底下是現在在做什麼。
+// 一段填充在軌道上走完再走一次,底下是現在在做什麼。
 function ProgressTidy({ stages, valueText, ...rest }) {
     const [step, setStep] = useState(0);
     const cycle = useCallback((node) => {
@@ -190,11 +135,11 @@ function ProgressTidy({ stages, valueText, ...rest }) {
 }
 export function ProgressBall({ value, size = 48, valueText, ...rest }) {
     const percent = clampPercent(value);
-    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(percent), "aria-valuetext": valueText, ...rest, ...styled(rest, styles.svg), children: BALL_STRANDS.map((d, index) => (_jsx("path", { d: d, pathLength: "100", style: { strokeDashoffset: ballDashOffset(percent, index) }, ...stylex.props(styles.strand) }, index))) }));
+    const band = size * 0.12;
+    const r = size / 2 - band / 2 - 1;
+    return (_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(percent), "aria-valuetext": valueText, ...rest, ...styled(rest, styles.svg), children: [_jsx("circle", { cx: size / 2, cy: size / 2, r: r, strokeWidth: band, ...stylex.props(styles.ringTrack) }), _jsx("circle", { cx: size / 2, cy: size / 2, r: r, strokeWidth: band, pathLength: "100", strokeDasharray: `${percent} ${100 - percent}`, ...stylex.props(styles.ringArc) })] }));
 }
 export function ProgressRing({ value, size = RING, valueText, ...rest }) {
     const percent = clampPercent(value);
-    const clipId = useSvgId("ak-ring");
-    const cloth = useMemo(() => buildWeave({ w: RING, h: RING }, weaveRand()), []);
-    return (_jsxs("span", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(percent), "aria-valuetext": valueText, ...rest, ...styled(rest, styles.ringWrap), children: [_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${RING} ${RING}`, "aria-hidden": "true", ...stylex.props(styles.svg), children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("path", { d: ringSector(percent) }) }) }), _jsx("circle", { cx: RING / 2, cy: RING / 2, r: RING / 2 - 1 - BAND / 2, strokeWidth: BAND, ...stylex.props(styles.ringTrack) }), _jsx("g", { clipPath: `url(#${clipId})`, ...stylex.props(styles.cloth, styles.ringCloth), children: _jsx(Cloth, { layers: cloth }) })] }), _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.value), children: `${Math.round(percent)}%` })] }));
+    return (_jsxs("span", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(percent), "aria-valuetext": valueText, ...rest, ...styled(rest, styles.ringWrap), children: [_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${RING} ${RING}`, "aria-hidden": "true", ...stylex.props(styles.svg), children: [_jsx("circle", { cx: RING / 2, cy: RING / 2, r: RING / 2 - BAND / 2 - 1, strokeWidth: BAND, ...stylex.props(styles.ringTrack) }), _jsx("circle", { cx: RING / 2, cy: RING / 2, r: RING / 2 - BAND / 2 - 1, strokeWidth: BAND, pathLength: "100", strokeDasharray: `${percent} ${100 - percent}`, ...stylex.props(styles.ringArc) })] }), _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.value), children: `${Math.round(percent)}%` })] }));
 }