@anyknown/ui 0.6.1 → 0.8.0

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)}%` })] }));
 }

package/dist/components/radio/Radio.js

@@ -2,16 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { useId } 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, text, yarn } from "../../tokens.stylex.js";
+import { color, font, motion, radius, space, text } from "../../tokens.stylex.js";
 import { useFieldControl } from "../label/fieldContext.js";
 import { useRadioGroup } from "./RadioGroup.js";
 const REDUCED = "@media (prefers-reduced-motion: reduce)";
-// 鏡頭 dot:布像背景一樣在後面延伸(與 checkbox 同源幾何,module scope 織一次),
-// 圓形只是取景框 — 選中 = 孔徑(circle r)從 0 打開,布本身完全不動。
-// 孔徑只開到 r 6.8:維持 radio 的標準構成(外環 + surface 空隙 + 內實心圓)。
-const CLOTH = buildWeave({ w: 14.8, h: 14.8, s: 24 / 14.8 }, weaveRand());
 const styles = stylex.create({
     root: {
         display: "flex",
@@ -35,44 +29,39 @@ const styles = stylex.create({
     input: { position: "absolute", opacity: 0, width: "1.05rem", height: "1.05rem", margin: 0 },
     dot: {
         flex: "none",
+        boxSizing: "border-box",
+        display: "grid",
+        placeItems: "center",
         width: "1.05rem",
         height: "1.05rem",
         marginTop: "0.16rem",
-        borderWidth: 1,
+        borderWidth: 1.5,
         borderStyle: "solid",
         borderColor: color.borderStrong,
         borderRadius: radius.full,
-        backgroundColor: color.surface,
+        backgroundColor: color.bg,
         transitionProperty: "border-color",
         transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
         outline: { default: "none", ":has(:focus-visible)": `2px solid ${color.focusRing}` },
         outlineOffset: 2,
     },
     dotOn: { borderColor: color.accent },
-    svg: { display: "block", width: "100%", height: "100%" },
-    lens: {
-        r: "0px",
-        transitionProperty: "r",
-        transitionDuration: { default: motion.normal, [REDUCED]: "0s" },
-        transitionTimingFunction: "cubic-bezier(0.32, 0.85, 0.45, 1)",
+    fill: {
+        width: "0.55rem",
+        height: "0.55rem",
+        borderRadius: radius.full,
+        backgroundColor: color.accent,
+        scale: "0",
+        transitionProperty: "scale",
+        transitionDuration: { default: "160ms", [REDUCED]: "0s" },
+        transitionTimingFunction: "ease-out",
     },
-    lensOn: { r: "6.8px" },
-    yarns: { fill: "none", strokeLinecap: "round" },
-    un: { stroke: yarn.un },
-    sh: { stroke: yarn.sh, opacity: 0.5 },
-    y0: { stroke: yarn.y0 },
-    y1: { stroke: yarn.y1 },
-    y2: { stroke: yarn.y2 },
-    y3: { stroke: yarn.y3 },
-    y4: { stroke: yarn.y4 },
-    hi: { stroke: yarn.hi, opacity: 0.45 },
+    fillOn: { scale: "1" },
     labelText: { display: "block", fontWeight: 500, fontSize: text.sm, color: color.text },
     description: { display: "block", fontSize: text.xs, color: color.textMuted },
 });
-const BUCKETS = [styles.y0, styles.y1, styles.y2, styles.y3, styles.y4];
 export function Radio({ value, label, description, onChange, disabled, ...props }) {
     const group = useRadioGroup();
-    const clipId = useSvgId("ak-lens");
     const base = useId();
     const labelId = `${base}label`;
     const descriptionId = `${base}description`;
@@ -85,5 +74,5 @@ export function Radio({ value, label, description, onChange, disabled, ...props
                             if (event.currentTarget.checked)
                                 group.select(value);
                             onChange?.(event);
-                        }, ...styled(props, styles.input) }), _jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...stylex.props(styles.svg), children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("circle", { cx: "12", cy: "12", ...stylex.props(styles.lens, checked && styles.lensOn) }) }) }), _jsxs("g", { clipPath: `url(#${clipId})`, ...stylex.props(styles.yarns), children: [_jsx("g", { ...stylex.props(styles.un), children: CLOTH.under.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw }, i))) }), _jsx("g", { ...stylex.props(styles.sh), children: CLOTH.seams.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw }, i))) }), CLOTH.face.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw, ...stylex.props(BUCKETS[t.bucket]) }, i))), _jsx("g", { ...stylex.props(styles.hi), children: CLOTH.hi.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw }, i))) })] })] })] }), (label != null || description != null) && (_jsxs("span", { children: [label != null && (_jsx("span", { id: labelId, ...stylex.props(styles.labelText), children: label })), description != null && (_jsx("span", { id: descriptionId, ...stylex.props(styles.description), children: description }))] }))] }));
+                        }, ...styled(props, styles.input) }), _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.fill, checked && styles.fillOn) })] }), (label != null || description != null) && (_jsxs("span", { children: [label != null && (_jsx("span", { id: labelId, ...stylex.props(styles.labelText), children: label })), description != null && (_jsx("span", { id: descriptionId, ...stylex.props(styles.description), children: description }))] }))] }));
 }

package/dist/components/segmented/Segmented.d.ts

@@ -0,0 +1,12 @@
+import * as stylex from "@stylexjs/stylex";
+export type SegmentedProps<T extends string> = {
+    value: T;
+    options: {
+        value: T;
+        label: string;
+    }[];
+    onChange: (value: T) => void;
+    label: string;
+    sx?: stylex.StyleXStyles;
+};
+export declare function Segmented<T extends string>({ value, options, onChange, label, sx }: SegmentedProps<T>): import("react").JSX.Element;

package/dist/components/segmented/Segmented.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { color, corner, font, motion, space, type } from "../../tokens.stylex.js";
+/** `.seg`: a few words in one outline; the chosen one sits on a layer. */
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const PHONE = "@media (max-width: 45rem)";
+const styles = stylex.create({
+    root: {
+        alignSelf: "flex-start",
+        borderRadius: corner.md,
+        boxShadow: `inset 0 0 0 1px ${color.border}`,
+        display: "inline-flex",
+        gap: 2,
+        maxWidth: "100%",
+        overflowX: { default: "visible", [PHONE]: "auto" },
+        padding: 2,
+        scrollbarWidth: "none",
+    },
+    item: {
+        backgroundColor: { default: "transparent", ":hover": "transparent" },
+        borderRadius: corner.sm,
+        borderStyle: "none",
+        borderWidth: 0,
+        color: { default: color.textMuted, ":hover": color.text },
+        cursor: "pointer",
+        fontFamily: font.body,
+        fontSize: type.t2,
+        height: { default: 28, [PHONE]: 40 },
+        lineHeight: type.body,
+        margin: 0,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.accent}` },
+        outlineOffset: -2,
+        paddingBlock: 0,
+        paddingInline: space.sm,
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        transitionProperty: "background-color, color",
+        whiteSpace: "nowrap",
+    },
+    on: { backgroundColor: color.layer4, color: color.text },
+});
+export function Segmented({ value, options, onChange, label, sx }) {
+    return (_jsx("div", { "aria-label": label, ...stylex.props(styles.root, sx), children: options.map((one) => (_jsx("button", { type: "button", "aria-pressed": one.value === value, onClick: () => onChange(one.value), ...stylex.props(styles.item, one.value === value && styles.on), children: one.label }, one.value))) }));
+}

package/dist/components/settings-rows/SettingsRows.d.ts

@@ -0,0 +1,25 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+type Sx = {
+    sx?: stylex.StyleXStyles;
+};
+export declare function SettingsRows({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export type SettingsRowProps = {
+    label: ReactNode;
+    help?: ReactNode;
+    children?: ReactNode;
+    sx?: stylex.StyleXStyles;
+};
+export declare function SettingsRow({ label, help, children, sx }: SettingsRowProps): import("react").JSX.Element;
+/** `.help` inline: a muted reading on a row's label line. */
+export declare function Help({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+/** `.val`: a mono reading, like `•••• 9b7c`. */
+export declare function Value({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export declare function Dot({ sx }: Sx): import("react").JSX.Element;
+export {};

package/dist/components/settings-rows/SettingsRows.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { color, corner, font, space, type } from "../../tokens.stylex.js";
+/**
+ * `.srows` / `.srow`: a setting per line, 44px — its name and one line of help on the left, the
+ * control on the right. The rows sit on one surface with hairlines between them.
+ */
+const styles = stylex.create({
+    rows: {
+        backgroundColor: color.surface,
+        borderRadius: corner.card,
+        boxShadow: `inset 0 0 0 1px ${color.border}`,
+        color: color.text,
+        fontSize: type.t2,
+        lineHeight: type.body,
+    },
+    row: {
+        alignItems: "center",
+        borderRadius: {
+            default: 0,
+            ":first-child": `${corner.card} ${corner.card} 0 0`,
+            ":last-child": `0 0 ${corner.card} ${corner.card}`,
+        },
+        boxShadow: { default: "none", ":not(:first-child)": `inset 0 1px 0 ${color.border}` },
+        columnGap: space.sm,
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 1fr) auto",
+        minHeight: 44,
+        paddingBlock: space.xs,
+        paddingInline: space.sm,
+    },
+    key: { minWidth: 0 },
+    label: {
+        alignItems: "center",
+        display: "flex",
+        flexWrap: "wrap",
+        fontSize: type.t2,
+        fontWeight: 500,
+        gap: space.xs,
+        minWidth: 0,
+    },
+    help: { color: color.textMuted, fontSize: type.t2 },
+    value: { color: color.textMuted, fontFamily: font.mono, fontSize: type.t2, whiteSpace: "nowrap" },
+    ctl: { alignItems: "center", display: "flex", flex: "none", gap: space.xs },
+    dot: { backgroundColor: color.accent, borderRadius: "50%", flex: "none", height: 6, width: 6 },
+});
+export function SettingsRows({ children, sx }) {
+    return _jsx("div", { ...stylex.props(styles.rows, sx), children: children });
+}
+export function SettingsRow({ label, help, children, sx }) {
+    return (_jsxs("div", { ...stylex.props(styles.row, sx), children: [_jsxs("div", { ...stylex.props(styles.key), children: [_jsx("div", { ...stylex.props(styles.label), children: label }), help !== undefined && _jsx("div", { ...stylex.props(styles.help), children: help })] }), children !== undefined && _jsx("div", { ...stylex.props(styles.ctl), children: children })] }));
+}
+/** `.help` inline: a muted reading on a row's label line. */
+export function Help({ children, sx }) {
+    return _jsx("span", { ...stylex.props(styles.help, sx), children: children });
+}
+/** `.val`: a mono reading, like `•••• 9b7c`. */
+export function Value({ children, sx }) {
+    return _jsx("span", { ...stylex.props(styles.value, sx), children: children });
+}
+export function Dot({ sx }) {
+    return _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.dot, sx) });
+}

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+import type { StyleArg } from "../../lib/styled.js";
+export type SliderProps = {
+    value: number;
+    onChange: (value: number) => void;
+    /** @default 0 */
+    min?: number;
+    /** @default 1 */
+    max?: number;
+    /** @default 0.01 */
+    step?: number;
+    label?: ReactNode;
+    "aria-label"?: string;
+    /** 唸出來的值 —— 0.62 要唸成「多」不是「零點六二」。 */
+    valueText?: (value: number) => string;
+    disabled?: boolean;
+    sx?: StyleArg;
+};
+export declare function Slider({ value, onChange, min, max, step, label, valueText, disabled, sx, "aria-label": ariaLabel, }: SliderProps): import("react").JSX.Element;