@anyknown/ui 0.1.0

package/dist/components/progress/Progress.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx, Fragment as _Fragment, 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 { 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";
+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;
+const RING = 60;
+const BAND = 9;
+const spin = stylex.keyframes({ from: { rotate: "0deg" }, to: { rotate: "360deg" } });
+const sweep = stylex.keyframes({ from: { insetInlineStart: "-32%" }, to: { insetInlineStart: "100%" } });
+const styles = stylex.create({
+    svg: { display: "block" },
+    track: {
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        height: TRACK_H,
+        boxSizing: "border-box",
+        padding: PAD,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.full,
+        backgroundColor: color.bg,
+        overflow: "hidden",
+    },
+    body: {
+        position: "relative",
+        height: CLOTH_H,
+        borderRadius: radius.full,
+        overflow: "hidden",
+        filter: yarn.shadow,
+        transitionProperty: "width",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        transitionTimingFunction: "linear",
+    },
+    grow: (percent) => ({ width: `${percent}%` }),
+    window: {
+        width: "32%",
+        insetInlineStart: 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,
+        fontSize: "0.72rem",
+        fontWeight: 500,
+        lineHeight: 1,
+        letterSpacing: "0.04em",
+        color: color.textMuted,
+        fontVariantNumeric: "tabular-nums",
+    },
+    ringWrap: { position: "relative", display: "inline-grid", placeItems: "center" },
+    ringTrack: { fill: "none", stroke: color.bone },
+    ringCloth: { filter: yarn.shadow },
+    spin: {
+        transformBox: "fill-box",
+        transformOrigin: "center",
+        animationName: { default: spin, [REDUCED]: "none" },
+        animationDuration: "0.9s",
+        animationTimingFunction: "linear",
+        animationIterationCount: "infinite",
+    },
+    strand: {
+        fill: "none",
+        stroke: color.accent,
+        strokeWidth: 1.5,
+        strokeLinecap: "round",
+        strokeDasharray: 100,
+    },
+    statusHost: { display: "inline-flex" },
+    srOnly: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap",
+        borderWidth: 0,
+    },
+    value: {
+        position: "absolute",
+        fontFamily: font.mono,
+        fontSize: "0.75rem",
+        fontWeight: 500,
+        lineHeight: 1,
+        color: color.text,
+        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("");
+}
+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));
+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 })] }));
+}
+export function Progress({ value, valueText, stages = STAGES, ...rest }) {
+    if (value == null)
+        return _jsx(ProgressTidy, { stages: stages, valueText: valueText, ...rest });
+    const percent = clampPercent(value);
+    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) => {
+        if (!node)
+            return;
+        const id = setInterval(() => setStep((current) => current + 1), 1800);
+        return () => clearInterval(id);
+    }, []);
+    return (_jsxs("div", { ref: cycle, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuetext": valueText, ...rest, ...styled(rest, styles.tidy), children: [_jsx(Bar, {}), _jsx("span", { ...stylex.props(styles.stage), children: stages[step % stages.length] })] }));
+}
+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))) }));
+}
+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)}%` })] }));
+}

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentProps, type ReactNode } from "react";
+export type RadioProps = Omit<ComponentProps<"input">, "type" | "value" | "children"> & {
+    value: string;
+    label?: ReactNode;
+    description?: ReactNode;
+};
+export declare function Radio({ value, label, description, onChange, disabled, ...props }: RadioProps): import("react").JSX.Element;

package/dist/components/radio/Radio.js

@@ -0,0 +1,89 @@
+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 { 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",
+        gap: space.xs,
+        alignItems: "flex-start",
+        cursor: { default: "pointer", ":has(:disabled)": "not-allowed" },
+        opacity: { default: 1, ":has(:disabled)": 0.5 },
+        fontFamily: font.body,
+    },
+    card: {
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.md,
+        paddingBlock: space.sm,
+        paddingInline: space.sm,
+        transitionProperty: "border-color, background-color",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+    },
+    cardOn: { borderColor: color.accent, backgroundColor: color.accentSubtle },
+    input: { position: "absolute", opacity: 0, width: "1.05rem", height: "1.05rem", margin: 0 },
+    dot: {
+        flex: "none",
+        width: "1.05rem",
+        height: "1.05rem",
+        marginTop: "0.16rem",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.borderStrong,
+        borderRadius: radius.full,
+        backgroundColor: color.surface,
+        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)",
+    },
+    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 },
+    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`;
+    const { invalid: _invalid, id: _fieldId, ...field } = useFieldControl(props);
+    const checked = group.value === value;
+    const describedBy = [description != null ? descriptionId : null, field["aria-describedby"]]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("label", { ...stylex.props(styles.root, group.variant === "card" && styles.card, group.variant === "card" && checked && styles.cardOn), children: [_jsxs("span", { ...stylex.props(styles.dot, checked && styles.dotOn), children: [_jsx("input", { type: "radio", ...props, ...field, name: group.name, value: value, checked: checked, "aria-labelledby": label != null ? labelId : undefined, "aria-describedby": describedBy || undefined, disabled: disabled ?? field.disabled ?? group.disabled, onChange: (event) => {
+                            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 }))] }))] }));
+}

package/dist/components/radio/RadioGroup.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentProps, type ReactNode } from "react";
+type RadioGroupContextValue = {
+    name: string;
+    value: string;
+    disabled: boolean;
+    variant: "plain" | "card";
+    select: (value: string) => void;
+};
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | null>;
+export declare function useRadioGroup(): RadioGroupContextValue;
+export type RadioGroupProps = Omit<ComponentProps<"fieldset">, "onChange" | "defaultValue"> & {
+    legend?: ReactNode;
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    variant?: "plain" | "card";
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+};
+export declare function RadioGroup({ legend, name, value, defaultValue, variant, onValueChange, disabled, children, ...props }: RadioGroupProps): import("react").JSX.Element;
+export {};

package/dist/components/radio/RadioGroup.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { createContext, useContext, useId, useMemo } from "react";
+import { styled } from "../../lib/styled.js";
+import { useControllableState } from "../../lib/useControllableState.js";
+import { color, font, space, text } from "../../tokens.stylex.js";
+export const RadioGroupContext = createContext(null);
+export function useRadioGroup() {
+    const group = useContext(RadioGroupContext);
+    if (!group)
+        throw new Error("Radio must be rendered inside a RadioGroup");
+    return group;
+}
+const styles = stylex.create({
+    // borderWidth 而不是 border:0 —— StyleX 0.19 會靜默丟掉 border 簡寫,fieldset 的
+    // 原生 2px groove 邊框就留在畫面上
+    fieldset: { borderWidth: 0, margin: 0, padding: 0, display: "grid", gap: space.sm },
+    legend: {
+        padding: 0,
+        marginBottom: space.xxs,
+        fontFamily: font.body,
+        fontSize: text.sm,
+        fontWeight: 500,
+        lineHeight: text.leadingSnug,
+        color: color.text,
+    },
+});
+export function RadioGroup({ legend, name, value, defaultValue = "", variant = "plain", onValueChange, disabled = false, children, ...props }) {
+    const fallbackName = useId();
+    const resolvedName = name ?? fallbackName;
+    const [selected, select] = useControllableState(value, defaultValue, onValueChange);
+    const context = useMemo(() => ({ name: resolvedName, value: selected, disabled, variant, select }), [resolvedName, selected, disabled, variant, select]);
+    return (_jsxs("fieldset", { ...props, disabled: disabled, ...styled(props, styles.fieldset), children: [legend != null && _jsx("legend", { ...stylex.props(styles.legend), children: legend }), _jsx(RadioGroupContext, { value: context, children: children })] }));
+}

package/dist/components/reasoning-fold/ReasoningFold.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+export type ReasoningFoldProps = {
+    streaming?: boolean;
+    durationSec?: number;
+    defaultOpen?: boolean;
+    streamingLabel?: string;
+    onToggle?: (open: boolean) => void;
+    children: ReactNode;
+};
+export declare function ReasoningFold({ streaming, durationSec, defaultOpen, streamingLabel, onToggle, children, }: ReasoningFoldProps): import("react").JSX.Element;

package/dist/components/reasoning-fold/ReasoningFold.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { useEffect, useId, useRef, useState } from "react";
+import { reset } from "../../lib/styled.js";
+import { color, radius, space, text } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const AUTO_COLLAPSE_MS = 1000;
+const shimmer = stylex.keyframes({ to: { backgroundPosition: "-200% 0" } });
+const styles = stylex.create({
+    fold: { display: "grid" },
+    row: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: space.xxs,
+        fontSize: text.xs,
+        lineHeight: text.leadingSnug,
+        color: { default: color.textMuted, ":hover": color.text },
+        cursor: "pointer",
+        paddingBlock: "0.2rem",
+        justifySelf: "start",
+        borderRadius: radius.sm,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: 2,
+    },
+    chevron: {
+        color: color.textFaint,
+        flex: "none",
+        transitionProperty: "rotate",
+        transitionDuration: { default: "140ms", [REDUCED]: "0s" },
+    },
+    chevronOpen: { rotate: "90deg" },
+    body: {
+        marginBlockStart: space.xs,
+        paddingInlineStart: `calc(12px + ${space.xxs})`,
+        borderInlineStartWidth: 2,
+        borderInlineStartStyle: "solid",
+        borderInlineStartColor: color.border,
+        marginInlineStart: 5,
+        fontSize: text.xs,
+        lineHeight: text.leadingRelaxed,
+        fontStyle: "italic",
+        color: color.textMuted,
+    },
+    shimmer: {
+        backgroundImage: {
+            default: `linear-gradient(90deg, ${color.textMuted} 30%, ${color.textFaint} 50%, ${color.textMuted} 70%)`,
+            [REDUCED]: "none",
+        },
+        backgroundSize: "200% 100%",
+        backgroundClip: { default: "text", [REDUCED]: "border-box" },
+        color: { default: "transparent", [REDUCED]: color.textMuted },
+        animationName: { default: shimmer, [REDUCED]: "none" },
+        animationDuration: "1.6s",
+        animationTimingFunction: "linear",
+        animationIterationCount: "infinite",
+    },
+});
+function Chevron({ open }) {
+    return (_jsx("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", ...stylex.props(styles.chevron, open && styles.chevronOpen), children: _jsx("path", { d: "m9 6 6 6-6 6" }) }));
+}
+export function ReasoningFold({ streaming = false, durationSec, defaultOpen = false, streamingLabel = "思考中…", onToggle, children, }) {
+    const bodyId = useId();
+    const row = useRef(null);
+    const body = useRef(null);
+    const [userToggled, setUserToggled] = useState(false);
+    const [open, setOpen] = useState(defaultOpen || streaming);
+    const [wasStreaming, setWasStreaming] = useState(streaming);
+    const [justFinished, setJustFinished] = useState(false);
+    if (wasStreaming !== streaming) {
+        setWasStreaming(streaming);
+        setJustFinished(!streaming);
+        if (streaming && !userToggled)
+            setOpen(true);
+    }
+    useEffect(() => {
+        if (userToggled || streaming || !justFinished)
+            return;
+        const timer = setTimeout(() => {
+            setOpen(false);
+            if (body.current?.contains(document.activeElement))
+                row.current?.focus();
+            setJustFinished(false);
+        }, AUTO_COLLAPSE_MS);
+        return () => clearTimeout(timer);
+    }, [streaming, userToggled, justFinished]);
+    const label = streaming ? (_jsx("span", { ...stylex.props(styles.shimmer), children: streamingLabel })) : durationSec != null ? (`思考了 ${durationSec} 秒`) : ("思考過程");
+    return (_jsxs("div", { ...stylex.props(styles.fold), children: [_jsxs("button", { type: "button", ref: row, "aria-expanded": open, "aria-controls": bodyId, onClick: () => {
+                    setUserToggled(true);
+                    setOpen((value) => !value);
+                    onToggle?.(!open);
+                }, ...stylex.props(reset.control, styles.row), children: [_jsx(Chevron, { open: open }), label] }), _jsx("div", { id: bodyId, ref: body, hidden: !open, ...stylex.props(styles.body), children: children })] }));
+}

package/dist/components/recovery-key/RecoveryKey.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+export type RecoveryKeyProps = {
+    value: string;
+    ack?: boolean;
+    onAckChange?: (ack: boolean) => void;
+    filename?: string;
+    intro?: ReactNode;
+    warning?: ReactNode;
+    ackLabel?: ReactNode;
+    revealLabel?: string;
+    hideLabel?: string;
+    veilLabel?: string;
+    copyLabel?: string;
+    copiedLabel?: string;
+    downloadLabel?: string;
+};
+export declare function RecoveryKey({ value, ack, onAckChange, filename, intro, warning, ackLabel, revealLabel, hideLabel, veilLabel, copyLabel, copiedLabel, downloadLabel, }: RecoveryKeyProps): import("react").JSX.Element;

package/dist/components/recovery-key/RecoveryKey.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { Fragment, useState } from "react";
+import { useCopy } from "../../lib/useCopy.js";
+import { color, font, motion, radius, space, text } from "../../tokens.stylex.js";
+import { Checkbox } from "../checkbox/Checkbox.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const styles = stylex.create({
+    card: {
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.lg,
+        padding: space.md,
+        display: "grid",
+        gap: space.sm,
+        fontFamily: font.body,
+    },
+    intro: { margin: 0, fontSize: text.xs, color: color.textMuted },
+    keyBox: {
+        position: "relative",
+        backgroundColor: color.bg,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.lg,
+        padding: space.md,
+        cursor: "pointer",
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -1,
+        "--ak-key-blur": { default: "blur(7px)", ":hover": "none", ":focus-visible": "none" },
+        "--ak-veil-opacity": { default: "1", ":hover": "0", ":focus-visible": "0" },
+    },
+    keyRevealed: { "--ak-key-blur": "none", "--ak-veil-opacity": "0" },
+    separator: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap",
+        borderWidth: 0,
+    },
+    groups: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: `${space.xxs} ${space.xs}`,
+        justifyContent: "center",
+        fontFamily: font.mono,
+        fontSize: text.base,
+        fontWeight: 500,
+        lineHeight: text.leadingRelaxed,
+        letterSpacing: "0.06em",
+        userSelect: "all",
+        color: color.text,
+        filter: "var(--ak-key-blur)",
+        transitionProperty: "filter",
+        transitionDuration: { default: "160ms", [REDUCED]: "0s" },
+    },
+    veil: {
+        position: "absolute",
+        inset: 0,
+        display: "grid",
+        placeItems: "center",
+        fontSize: text.xs,
+        color: color.textMuted,
+        pointerEvents: "none",
+        opacity: "var(--ak-veil-opacity)",
+    },
+    actions: { display: "flex", gap: space.xs, justifyContent: "center", flexWrap: "wrap" },
+    button: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: space.xxs,
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: { default: color.border, ":hover": color.borderStrong },
+        borderRadius: radius.md,
+        color: color.text,
+        fontFamily: font.body,
+        fontSize: "0.82rem",
+        fontWeight: 500,
+        lineHeight: 1,
+        paddingBlock: space.xxs,
+        paddingInline: space.xs,
+        cursor: "pointer",
+        transitionProperty: "border-color, color",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: 1,
+    },
+    copied: { color: color.accent, borderColor: color.accent },
+    warning: {
+        display: "flex",
+        gap: space.xs,
+        backgroundColor: color.warningSubtle,
+        color: color.text,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: `color-mix(in srgb, ${color.warning} 40%, transparent)`,
+        borderRadius: radius.md,
+        paddingBlock: space.xs,
+        paddingInline: space.xs,
+        fontSize: "0.82rem",
+    },
+    warningIcon: { color: color.warning, flex: "none", marginTop: "0.1rem" },
+    warningText: { margin: 0 },
+});
+function CopyIcon() {
+    return (_jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [_jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2" }), _jsx("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })] }));
+}
+function DownloadIcon() {
+    return (_jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: _jsx("path", { d: "M12 3v12m0 0 4-4m-4 4-4-4M4 21h16" }) }));
+}
+function WarningIcon() {
+    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", ...stylex.props(styles.warningIcon), children: [_jsx("path", { d: "m12 3 10 18H2L12 3Z" }), _jsx("path", { d: "M12 10v4m0 3h.01" })] }));
+}
+export function RecoveryKey({ value, ack, onAckChange, filename = "anyknown-storage-recovery-key.txt", intro = "這是你的復原金鑰。忘記 passphrase 時,它是唯一能開回 vault 的東西 — 只會顯示這一次。", warning = "我們沒有你的金鑰副本,遺失就無法復原。把它抄在紙上,或存進密碼管理器。", ackLabel = "我已把復原金鑰抄下並存放在安全的地方。", revealLabel = "顯示復原金鑰", hideLabel = "隱藏復原金鑰", veilLabel = "hover 或點一下顯示", copyLabel = "複製", copiedLabel = "✓ 已複製", downloadLabel = "下載 .txt", }) {
+    const [revealed, setRevealed] = useState(false);
+    const { copied, copy } = useCopy();
+    function download() {
+        const url = URL.createObjectURL(new Blob([`${value}\n`], { type: "text/plain" }));
+        const anchor = Object.assign(document.createElement("a"), { href: url, download: filename });
+        anchor.click();
+        setTimeout(() => URL.revokeObjectURL(url), 0);
+    }
+    return (_jsxs("div", { ...stylex.props(styles.card), children: [_jsx("p", { ...stylex.props(styles.intro), children: intro }), _jsxs("div", { ...stylex.props(styles.keyBox, revealed && styles.keyRevealed), children: [_jsx("div", { ...stylex.props(styles.groups), children: value.split("-").map((group, index) => (_jsxs(Fragment, { children: [index > 0 && _jsx("span", { ...stylex.props(styles.separator), children: "-" }), _jsx("span", { children: group })] }, `${group}-${index}`))) }), _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.veil), children: veilLabel })] }), _jsxs("div", { ...stylex.props(styles.actions), children: [_jsx("button", { type: "button", "aria-pressed": revealed, onClick: () => setRevealed((shown) => !shown), ...stylex.props(styles.button), children: revealed ? hideLabel : revealLabel }), _jsxs("button", { type: "button", onClick: () => copy(value), ...stylex.props(styles.button, copied && styles.copied), children: [!copied && _jsx(CopyIcon, {}), copied ? copiedLabel : copyLabel] }), _jsxs("button", { type: "button", onClick: download, ...stylex.props(styles.button), children: [_jsx(DownloadIcon, {}), downloadLabel] })] }), _jsxs("div", { role: "note", ...stylex.props(styles.warning), children: [_jsx(WarningIcon, {}), _jsx("p", { ...stylex.props(styles.warningText), children: warning })] }), _jsx(Checkbox, { checked: ack, onCheckedChange: onAckChange, label: ackLabel })] }));
+}

package/dist/components/select/Select.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+export type SelectItemProps = {
+    value: string;
+    hint?: string;
+    disabled?: boolean;
+    textValue?: string;
+    children: ReactNode;
+};
+export declare function SelectItem(_props: SelectItemProps): null;
+export type SelectGroupProps = {
+    label: string;
+    children: ReactNode;
+};
+export declare function SelectGroup(_props: SelectGroupProps): null;
+export type SelectProps = {
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: never) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    emptyLabel?: (query: string) => ReactNode;
+    multiple?: boolean;
+    searchable?: boolean;
+    disabled?: boolean;
+    name?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    children: ReactNode;
+};
+export declare function Select({ value, defaultValue, onValueChange, placeholder, searchPlaceholder, searchLabel, emptyLabel, multiple, searchable, disabled, name, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: SelectProps): import("react").JSX.Element;