@anyknown/ui 0.7.0 → 0.8.1

package/dist/components/button/Button.js

@@ -1,13 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
-import { useCallback } from "react";
 import { assignRef } from "../../lib/mergeRefs.js";
-import { SilkBody } from "../../lib/silk.js";
 import { styled } from "../../lib/styled.js";
-import { color, font, motion, space, text, yarn, yarnDanger, yarnGhost, yarnSecondary, } from "../../tokens.stylex.js";
-// 織成的實心(TEXTURE-GUIDE):沒有 background,實心由紗織成;
-// 動態全由觸點決定 — 帶動 + 窩 + 掃光(press 全套),幾何在 client 端由
-// SilkBody 以固定種子現織(同尺寸恆定)。reduced-motion 時靜態織紋。
+import { color, corner, font, motion, space, text } from "../../tokens.stylex.js";
 const styles = stylex.create({
     base: {
         position: "relative",
@@ -19,12 +14,12 @@ const styles = stylex.create({
         fontSize: text.sm,
         fontWeight: 500,
         lineHeight: text.leadingTight,
-        borderRadius: 8, // = radius.md;織線 clip 的 rx 同步寫死在 RADIUS
+        borderRadius: corner.btn,
         borderWidth: 0,
         backgroundColor: "transparent",
         cursor: { default: "pointer", ":disabled": "not-allowed" },
         opacity: { default: 1, ":disabled": 0.5 },
-        transitionProperty: "color",
+        transitionProperty: "color, background-color",
         transitionDuration: { default: motion.fast, "@media (prefers-reduced-motion: reduce)": "0s" },
         outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
         outlineOffset: 3,
@@ -51,48 +46,37 @@ const styles = stylex.create({
     iconMd: { paddingInline: 0, width: "2.25rem" },
     iconSm: { paddingInline: 0, width: "1.75rem" },
     iconXs: { paddingInline: 0, width: "1.5rem" },
-    // filter = 整塊布的落影(§3.3);ghost 是疏織,不落影
-    primary: { color: color.accentText, filter: yarn.shadow },
-    secondary: { color: color.text, filter: yarnSecondary.shadow },
-    ghost: { color: color.textMuted, filter: yarnGhost.shadow },
-    danger: { color: color.accentText, filter: yarnDanger.shadow },
-    // 「白底紅字」的織體版:份量走 ghost 疏織(不與 primary 打架),
-    // 語意走 danger token(和 interaction-card 收據列 rejected 的 ✓ 同一個 token)
-    dangerGhost: { color: color.danger, filter: yarnGhost.shadow },
-    silk: {
-        position: "absolute",
-        inset: 0,
-        width: "100%",
-        height: "100%",
-        overflow: "hidden",
-        pointerEvents: "none",
+    primary: {
+        color: color.accentText,
+        backgroundColor: {
+            default: color.accent,
+            ":hover": `color-mix(in srgb, ${color.accent} 86%, ${color.bg})`,
+        },
+    },
+    secondary: {
+        color: color.text,
+        backgroundColor: { default: color.bone, ":hover": color.layer5 },
+    },
+    ghost: {
+        color: color.textMuted,
+        backgroundColor: { default: "transparent", ":hover": color.bone },
+    },
+    danger: {
+        color: color.accentText,
+        backgroundColor: {
+            default: color.danger,
+            ":hover": `color-mix(in srgb, ${color.danger} 86%, ${color.bg})`,
+        },
+    },
+    // 「白底紅字」:份量走 ghost,語意走 danger token(和 interaction-card 收據列
+    // rejected 的 ✓ 同一個 token)
+    dangerGhost: {
+        color: color.danger,
+        backgroundColor: { default: "transparent", ":hover": color.dangerSubtle },
     },
     label: { position: "relative", display: "inline-flex", alignItems: "center", gap: space.xs },
 });
-const RADIUS = 8;
-function palette(vars) {
-    return vars;
-}
-const SILK = {
-    primary: { palette: palette(yarn), bandMax: 0.75 },
-    secondary: { palette: palette(yarnSecondary), bandMax: 0.5 },
-    ghost: { palette: palette(yarnGhost), ghost: true, bandMax: 0.5 },
-    danger: { palette: palette(yarnDanger), bandMax: 0.75 },
-    dangerGhost: { palette: palette(yarnGhost), ghost: true, bandMax: 0.5 },
-};
 const ICON_SIZE = { xs: "iconXs", sm: "iconSm", md: "iconMd" };
 export function Button({ variant = "primary", size = "md", icon = false, children, ref, sx, ...props }) {
-    // ref callback + cleanup(React 19)管生命週期,不用 effect;
-    // useCallback 鎖 identity,只有 variant 變了才重建織體
-    const silk = useCallback((node) => {
-        if (!node)
-            return;
-        const body = new SilkBody(node.parentElement, node, {
-            ...SILK[variant],
-            mode: "press",
-            radius: RADIUS,
-        });
-        return () => body.destroy();
-    }, [variant]);
-    return (_jsxs("button", { type: "button", ...props, ref: (element) => assignRef(ref, element), ...styled(props, styles.base, styles[size], icon && styles[ICON_SIZE[size]], styles[variant], sx), children: [_jsx("svg", { ref: silk, "aria-hidden": "true", ...stylex.props(styles.silk) }), _jsx("span", { ...stylex.props(styles.label), children: children })] }));
+    return (_jsx("button", { type: "button", ...props, ref: (element) => assignRef(ref, element), ...styled(props, styles.base, styles[size], icon && styles[ICON_SIZE[size]], styles[variant], sx), children: _jsx("span", { ...stylex.props(styles.label), children: children }) }));
 }

package/dist/components/checkbox/Checkbox.js

@@ -3,26 +3,12 @@ import * as stylex from "@stylexjs/stylex";
 import { useCallback, useId } from "react";
 import { assignRef } from "../../lib/mergeRefs.js";
 import { styled } from "../../lib/styled.js";
-import { useSvgId } from "../../lib/svgId.js";
 import { useControllableState } from "../../lib/useControllableState.js";
-import { buildThread, 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";
 const REDUCED = "@media (prefers-reduced-motion: reduce)";
-// 布與縫線在 module scope 織一次(固定種子、固定尺寸 → 恆定;純幾何,SSR 安全)。
-// 格子顯示 14.8 CSS px(1.05rem − 2px border),viewBox 24 → s = 24/14.8,
-// 螢幕上紗的粗細行距與 button 等粗。勾/橫線 = 縫在布上的線,與布共用同一支 rand 序列。
-const rand = weaveRand();
-const CLOTH = buildWeave({ w: 14.8, h: 14.8, s: 24 / 14.8 }, rand);
-const CHECK_D = buildThread([
-    [5.83, 12.33],
-    [10.05, 16.55],
-    [18.18, 7.13],
-], rand);
-const DASH_D = buildThread([
-    [6.48, 12],
-    [17.53, 12],
-], rand);
+const CHECK_D = "M6 12.4 L10.2 16.6 L18.2 7.4";
+const DASH_D = "M6.5 12 L17.5 12";
 const styles = stylex.create({
     root: {
         display: "flex",
@@ -35,50 +21,40 @@ const styles = stylex.create({
     input: { position: "absolute", opacity: 0, width: "1.05rem", height: "1.05rem", margin: 0 },
     box: {
         flex: "none",
+        boxSizing: "border-box",
         width: "1.05rem",
         height: "1.05rem",
         marginTop: "0.16rem",
-        borderWidth: 1,
+        borderWidth: 1.5,
         borderStyle: "solid",
         borderColor: color.borderStrong,
         borderRadius: radius.sm,
-        backgroundColor: color.surface,
-        overflow: "hidden",
-        transitionProperty: "border-color",
-        transitionDuration: { default: motion.normal, [REDUCED]: "0s" },
+        backgroundColor: color.bg,
+        transitionProperty: "border-color, background-color",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
         outline: { default: "none", ":has(:focus-visible)": `2px solid ${color.focusRing}` },
         outlineOffset: 2,
     },
-    boxOn: { borderColor: color.accent },
+    boxOn: { borderColor: color.accent, backgroundColor: color.accent },
+    boxInvalid: { borderColor: color.danger },
     svg: { display: "block", width: "100%", height: "100%" },
-    // 勾選 = 布織進格子:clip rect 的 width 從左往右推進,紗本身不動;
-    // 縫線掛同一個 clip — 前緣推到哪,布和勾一起被織出來
-    weave: {
-        width: 0,
-        height: 24,
-        transitionProperty: "width",
-        transitionDuration: { default: motion.normal, [REDUCED]: "0s" },
-        transitionTimingFunction: "cubic-bezier(0.32, 0.85, 0.45, 1)",
+    mark: {
+        fill: "none",
+        stroke: color.accentText,
+        strokeWidth: 2.4,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeDasharray: 32,
+        strokeDashoffset: 32,
+        transitionProperty: "stroke-dashoffset",
+        transitionDuration: { default: "160ms", [REDUCED]: "0s" },
+        transitionTimingFunction: "ease-out",
     },
-    weaveOn: { width: 24 },
-    cloth: { 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 },
-    mark: { fill: "none", strokeLinecap: "round", strokeLinejoin: "round" },
-    threadShadow: { stroke: "rgba(9, 20, 16, 0.32)" },
-    threadCore: { stroke: color.accentText },
+    markOn: { strokeDashoffset: 0 },
     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 Checkbox({ indeterminate = false, label, description, onCheckedChange, checked, defaultChecked, onChange, ref, sx, ...props }) {
-    const clipId = useSvgId("ak-weave");
     const base = useId();
     const labelId = `${base}label`;
     const descriptionId = `${base}description`;
@@ -95,8 +71,8 @@ export function Checkbox({ indeterminate = false, label, description, onCheckedC
     const describedBy = [description != null ? descriptionId : null, field["aria-describedby"]]
         .filter(Boolean)
         .join(" ");
-    return (_jsxs("label", { ...stylex.props(styles.root, sx), children: [_jsxs("span", { ...stylex.props(styles.box, filled && styles.boxOn), children: [_jsx("input", { type: "checkbox", ...props, ...field, "aria-invalid": invalid || undefined, "aria-labelledby": label != null ? labelId : undefined, "aria-describedby": describedBy || undefined, ref: setNode, checked: isChecked, onChange: (event) => {
+    return (_jsxs("label", { ...stylex.props(styles.root, sx), children: [_jsxs("span", { ...stylex.props(styles.box, filled && styles.boxOn, invalid && styles.boxInvalid), children: [_jsx("input", { type: "checkbox", ...props, ...field, "aria-invalid": invalid || undefined, "aria-labelledby": label != null ? labelId : undefined, "aria-describedby": describedBy || undefined, ref: setNode, checked: isChecked, onChange: (event) => {
                             setChecked(event.currentTarget.checked);
                             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("rect", { rx: "3", ...stylex.props(styles.weave, filled && styles.weaveOn) }) }) }), _jsxs("g", { clipPath: `url(#${clipId})`, children: [_jsxs("g", { ...stylex.props(styles.cloth), 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))) })] }), _jsxs("g", { ...stylex.props(styles.mark), children: [_jsx("path", { d: indeterminate ? DASH_D : CHECK_D, strokeWidth: "2.1", transform: "translate(0.35 0.5)", ...stylex.props(styles.threadShadow) }), _jsx("path", { d: indeterminate ? DASH_D : CHECK_D, strokeWidth: "1.95", ...stylex.props(styles.threadCore) })] })] })] })] }), (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("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...stylex.props(styles.svg), children: _jsx("path", { d: indeterminate ? DASH_D : CHECK_D, ...stylex.props(styles.mark, filled && styles.markOn) }) })] }), (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/dialog/Dialog.js

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

package/dist/components/empty-state/EmptyState.js

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

package/dist/components/ghost/Ghost.d.ts

@@ -0,0 +1,16 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ButtonHTMLAttributes, Ref } from "react";
+export type GhostProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    danger?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+    sx?: stylex.StyleXStyles;
+};
+export declare function Ghost({ danger, sx, ...props }: GhostProps): import("react").JSX.Element;
+export type GhostLinkProps = {
+    href: string;
+    children: React.ReactNode;
+    external?: boolean;
+    sx?: stylex.StyleXStyles;
+};
+/** The same word, as a link that leaves the app. */
+export declare function GhostLink({ href, children, external, sx }: GhostLinkProps): import("react").JSX.Element;

package/dist/components/ghost/Ghost.js

@@ -0,0 +1,50 @@
+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";
+/** `.ghost`: a word that is a button. 28px, muted until the pointer is on it; `danger` is warning. */
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const PHONE = "@media (max-width: 45rem)";
+const styles = stylex.create({
+    root: {
+        alignItems: "center",
+        backgroundColor: { default: "transparent", ":hover": color.layer3 },
+        borderRadius: corner.sm,
+        borderStyle: "none",
+        borderWidth: 0,
+        color: { default: color.textMuted, ":hover": color.text },
+        cursor: { default: "pointer", ":disabled": "default" },
+        display: "inline-flex",
+        fontFamily: font.body,
+        fontSize: type.t2,
+        fontWeight: 400,
+        gap: space.xxs,
+        height: 28,
+        lineHeight: type.body,
+        margin: 0,
+        minHeight: { default: 0, [PHONE]: 40 },
+        opacity: { default: 1, ":disabled": 0.4 },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.accent}` },
+        outlineOffset: 2,
+        paddingBlock: 0,
+        paddingInline: space.xs,
+        textDecoration: "none",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        transitionProperty: "background-color, color",
+        transitionTimingFunction: motion.easeOut,
+        whiteSpace: "nowrap",
+    },
+    danger: {
+        backgroundColor: {
+            default: "transparent",
+            ":hover": `color-mix(in srgb, ${color.warning} 10%, transparent)`,
+        },
+        color: { default: color.warning, ":hover": color.warning },
+    },
+});
+export function Ghost({ danger = false, sx, ...props }) {
+    return _jsx("button", { type: "button", ...props, ...stylex.props(styles.root, danger && styles.danger, sx) });
+}
+/** The same word, as a link that leaves the app. */
+export function GhostLink({ href, children, external = false, sx }) {
+    return (_jsx("a", { href: href, ...(external ? { target: "_blank", rel: "noreferrer" } : {}), ...stylex.props(styles.root, sx), children: children }));
+}

package/dist/components/group/Group.d.ts

@@ -0,0 +1,66 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+type Sx = {
+    sx?: stylex.StyleXStyles;
+};
+export declare function Group({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export declare function Item({ children, go, sx }: {
+    children: ReactNode;
+    go?: boolean;
+} & Sx): import("react").JSX.Element;
+export type MarkProps = {
+    letter: string;
+    tint: string;
+    sx?: stylex.StyleXStyles;
+};
+/** The 22px square with the first letter; `tint` is `<colour> <percent>%` for the mix. */
+export declare function Mark({ letter, tint, sx }: MarkProps): import("react").JSX.Element;
+export type StatusProps = {
+    children: ReactNode;
+    warn?: boolean;
+    sx?: stylex.StyleXStyles;
+};
+export declare function Status({ children, warn, sx }: StatusProps): import("react").JSX.Element;
+export declare function Sep(): import("react").JSX.Element;
+export type RowProps = {
+    mark?: ReactNode;
+    name: ReactNode;
+    /** What follows the name after a `·`: a `Status`, a mono value, a tag. */
+    children?: ReactNode;
+    actions?: ReactNode;
+    /** The whole line is the way in; a chevron says so. */
+    onPress?: () => void;
+    chevron?: boolean;
+    sx?: stylex.StyleXStyles;
+};
+export declare function Row({ mark, name, children, actions, onPress, chevron, sx }: RowProps): import("react").JSX.Element;
+export type ExpandProps = {
+    open: boolean;
+    /** `plain` drops the mark indent, for a form that is not under a row's mark. */
+    plain?: boolean;
+    children: ReactNode;
+    sx?: stylex.StyleXStyles;
+};
+/** `.exp`: what a row opens, unfolding under it in 200ms and taking no room when shut. */
+export declare function Expand({ open, plain, children, sx }: ExpandProps): import("react").JSX.Element;
+export type NoteProps = {
+    children: ReactNode;
+    faint?: boolean;
+    err?: boolean;
+    sx?: stylex.StyleXStyles;
+};
+/** A sentence inside an `Expand`: what it means, or what went wrong. */
+export declare function Note({ children, faint, err, sx }: NoteProps): import("react").JSX.Element;
+export declare function Acts({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+/** `.empty`: nothing here yet, said inside the group in one muted line. */
+export declare function Empty({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export declare function Tag({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export {};

package/dist/components/group/Group.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { color, corner, font, motion, space, tone, type } from "../../tokens.stylex.js";
+import { Chevron } from "../icon/Chevron.js";
+import { icon } from "../icon/icon.js";
+/**
+ * `.group` / `.item` / `.row`: a bordered list where each line is a thing (a server, a key, a
+ * rule) with its name, its state and its one action on the right. What a row opens unfolds under
+ * it in an `Expand`, never over the screen.
+ */
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const styles = stylex.create({
+    group: {
+        backgroundColor: color.surface,
+        borderRadius: corner.card,
+        boxShadow: `inset 0 0 0 1px ${color.border}`,
+        color: color.text,
+        fontSize: type.t2,
+        lineHeight: type.body,
+    },
+    item: {
+        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}` },
+        overflow: "hidden",
+    },
+    go: { backgroundColor: { default: "transparent", ":hover": color.layer3 } },
+    row: {
+        alignItems: "center",
+        columnGap: space.sm,
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 1fr) auto",
+        minHeight: 40,
+        paddingBlock: space.xs,
+        paddingInline: space.sm,
+    },
+    rowgo: {
+        alignItems: "center",
+        backgroundColor: "transparent",
+        borderRadius: corner.sm,
+        borderStyle: "none",
+        borderWidth: 0,
+        color: "inherit",
+        cursor: "pointer",
+        display: "flex",
+        flexWrap: "wrap",
+        fontFamily: "inherit",
+        fontSize: "inherit",
+        gap: `0 ${space.xs}`,
+        lineHeight: "inherit",
+        margin: 0,
+        minWidth: 0,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.accent}` },
+        outlineOffset: 2,
+        padding: 0,
+        textAlign: "start",
+    },
+    still: { cursor: "default" },
+    mark: {
+        alignItems: "center",
+        borderRadius: corner.sm,
+        color: color.text,
+        display: "grid",
+        flex: "none",
+        fontSize: type.t1,
+        fontWeight: 600,
+        height: 22,
+        justifyItems: "center",
+        placeItems: "center",
+        width: 22,
+    },
+    markTint: (tint) => ({ backgroundColor: `color-mix(in srgb, ${tint}, ${color.layer3})` }),
+    name: {
+        flex: "none",
+        fontSize: type.t2,
+        fontWeight: 500,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    sep: { color: tone.faint, flex: "none", fontSize: type.t2 },
+    status: {
+        alignItems: "center",
+        color: color.textMuted,
+        display: "inline-flex",
+        fontSize: type.t2,
+        gap: space.xs,
+        minWidth: 0,
+    },
+    statusText: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+    warn: { color: color.warning },
+    dot: { backgroundColor: color.warning, borderRadius: "50%", flex: "none", height: 6, width: 6 },
+    tag: { color: color.textMuted, flex: "none", fontFamily: font.mono, fontSize: type.t2 },
+    act: { alignItems: "center", display: "flex", gap: space.xs },
+    chevron: { color: tone.faint },
+    expand: {
+        display: "grid",
+        gridTemplateRows: "0fr",
+        transitionDuration: { default: motion.normal, [REDUCED]: "0s" },
+        transitionProperty: "grid-template-rows",
+        transitionTimingFunction: motion.easeOut,
+    },
+    shown: { gridTemplateRows: "1fr" },
+    clip: { minHeight: 0, overflow: "hidden" },
+    in: {
+        alignItems: "flex-start",
+        display: "flex",
+        flexDirection: "column",
+        gap: space.xs,
+        paddingBlock: `0 ${space.sm}`,
+        paddingInline: `calc(${space.sm} + 22px + ${space.xs}) ${space.sm}`,
+    },
+    plain: { paddingBlock: `${space.xs} ${space.sm}`, paddingInline: space.sm },
+    text: { color: color.textMuted, fontSize: type.t2, lineHeight: type.body, margin: 0 },
+    faint: { color: tone.faint },
+    err: { color: color.warning },
+    acts: { alignItems: "center", display: "flex", gap: space.xs },
+    empty: {
+        color: color.textMuted,
+        fontSize: type.t2,
+        lineHeight: type.body,
+        margin: 0,
+        padding: space.sm,
+    },
+});
+export function Group({ children, sx }) {
+    return _jsx("div", { ...stylex.props(styles.group, sx), children: children });
+}
+export function Item({ children, go = false, sx }) {
+    return _jsx("div", { ...stylex.props(styles.item, go && styles.go, sx), children: children });
+}
+/** The 22px square with the first letter; `tint` is `<colour> <percent>%` for the mix. */
+export function Mark({ letter, tint, sx }) {
+    return (_jsx("div", { "aria-hidden": "true", ...stylex.props(styles.mark, styles.markTint(tint), sx), children: letter }));
+}
+export function Status({ children, warn = false, sx }) {
+    return (_jsxs("span", { ...stylex.props(styles.status, warn && styles.warn, sx), children: [warn && _jsx("span", { ...stylex.props(styles.dot), "aria-hidden": "true" }), _jsx("span", { ...stylex.props(styles.statusText), children: children })] }));
+}
+export function Sep() {
+    return (_jsx("span", { ...stylex.props(styles.sep), "aria-hidden": "true", children: "\u00B7" }));
+}
+export function Row({ mark, name, children, actions, onPress, chevron = false, sx }) {
+    const inner = (_jsxs(_Fragment, { children: [mark, _jsx("span", { ...stylex.props(styles.name), children: name }), children !== undefined && _jsx(Sep, {}), children] }));
+    return (_jsxs("div", { ...stylex.props(styles.row, sx), children: [onPress ? (_jsx("button", { type: "button", onClick: onPress, ...stylex.props(styles.rowgo), children: inner })) : (_jsx("div", { ...stylex.props(styles.rowgo, styles.still), children: inner })), _jsxs("div", { ...stylex.props(styles.act), children: [actions, chevron && (_jsx(Chevron, { direction: "right", ...stylex.props(icon.sm, styles.chevron), "aria-hidden": "true" }))] })] }));
+}
+/** `.exp`: what a row opens, unfolding under it in 200ms and taking no room when shut. */
+export function Expand({ open, plain = false, children, sx }) {
+    return (_jsx("div", { ...(open ? {} : { inert: true }), ...stylex.props(styles.expand, open && styles.shown, sx), children: _jsx("div", { ...stylex.props(styles.clip), children: _jsx("div", { ...stylex.props(styles.in, plain && styles.plain), children: open ? children : null }) }) }));
+}
+/** A sentence inside an `Expand`: what it means, or what went wrong. */
+export function Note({ children, faint = false, err = false, sx }) {
+    return (_jsx("p", { role: err ? "alert" : undefined, ...stylex.props(styles.text, faint && styles.faint, err && styles.err, sx), children: children }));
+}
+export function Acts({ children, sx }) {
+    return _jsx("div", { ...stylex.props(styles.acts, sx), children: children });
+}
+/** `.empty`: nothing here yet, said inside the group in one muted line. */
+export function Empty({ children, sx }) {
+    return _jsx("p", { ...stylex.props(styles.empty, sx), children: children });
+}
+export function Tag({ children, sx }) {
+    return _jsx("span", { ...stylex.props(styles.tag, sx), children: children });
+}

package/dist/components/handoff-receipt/HandoffReceipt.js

@@ -1,13 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
-import { useCallback, useId, useState } from "react";
-import { KNOT_LEAD, KNOT_LOOP } from "../../lib/paths.js";
-import { SilkBody } from "../../lib/silk.js";
-import { color, font, motion, radius, space, text, yarnSecondary } from "../../tokens.stylex.js";
+import { useId, useState } from "react";
+import { color, corner, font, motion, space, text } from "../../tokens.stylex.js";
 const REDUCED = "@media (prefers-reduced-motion: reduce)";
-// 卡面 = 淺色布(TEXTURE-GUIDE §3、handoff-receipt/NOTES.md):沒有 background,
-// 實心由紗織成;動態取「僅展示面」子集 — hover 帶動 + 光澤帶,無窩、無掃光。
-// 布是固定高度 480 的長布,展開只是露出同一塊布更多 → 高度變化零重織、織紋恆定。
 const styles = stylex.create({
     receipt: {
         position: "relative",
@@ -15,12 +10,12 @@ const styles = stylex.create({
         borderWidth: 1,
         borderStyle: "solid",
         borderColor: color.border,
-        borderRadius: radius.md,
+        borderRadius: corner.md,
+        backgroundColor: color.surfaceRaised,
     },
-    face: { position: "absolute", top: 0, left: 0, pointerEvents: "none" },
     row: {
         // 注意:StyleX 0.19 會靜默丟掉 `all: unset`(編不出任何規則),原生按鈕的
-        // buttonface 底色與 outset 邊框會蓋住布 —— 要逐項重設
+        // buttonface 底色與 outset 邊框會留在畫面上 —— 要逐項重設
         appearance: "none",
         backgroundColor: "transparent",
         borderWidth: 0,
@@ -36,7 +31,7 @@ const styles = stylex.create({
         fontFamily: font.body,
         fontSize: text.xs,
         color: { default: color.textMuted, ":hover": color.text },
-        borderRadius: radius.md,
+        borderRadius: corner.md,
         outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
         outlineOffset: -2,
     },
@@ -52,23 +47,13 @@ const styles = stylex.create({
     ruleOpen: { borderTopStyle: "solid", borderTopColor: color.accent },
     label: { whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: space.xxs },
     mono: { fontFamily: font.mono, fontSize: "0.76rem", lineHeight: 1 },
-    knot: { flex: "none", overflow: "visible" },
-    lead: {
-        stroke: color.textFaint,
-        transitionProperty: "opacity",
+    link: {
+        flex: "none",
+        color: color.textFaint,
+        transitionProperty: "color",
         transitionDuration: { default: motion.normal, [REDUCED]: "0s" },
     },
-    leadHidden: { opacity: 0 },
-    loop: {
-        stroke: color.accent,
-        strokeDasharray: 100,
-        strokeDashoffset: 100,
-        transitionProperty: "stroke-dashoffset",
-        transitionDuration: { default: "500ms", [REDUCED]: "0s" },
-        transitionTimingFunction: "ease",
-        transitionDelay: { default: "120ms", [REDUCED]: "0s" },
-    },
-    loopTied: { strokeDashoffset: 0 },
+    linkOpen: { color: color.accent },
     chevron: {
         flex: "none",
         color: color.textFaint,
@@ -128,20 +113,5 @@ function CheckIcon() {
 export function HandoffReceipt({ at, ctxPercent, reason = "soft-threshold", memory, ledgerCount, handoffSummary, defaultOpen = false, }) {
     const bodyId = useId();
     const [open, setOpen] = useState(defaultOpen);
-    // ref callback + cleanup(React 19)管動態的生命週期,不用 effect;client-only
-    const face = useCallback((node) => {
-        if (!node)
-            return;
-        const silk = new SilkBody(node.parentElement, node, {
-            palette: yarnSecondary,
-            mode: "hover",
-            bandMax: 0.5,
-            pitch: 2,
-            hiCount: 12,
-            hiSpan: 0.95,
-            fixedHeight: 480,
-        });
-        return () => silk.destroy();
-    }, []);
-    return (_jsxs("div", { ...stylex.props(styles.receipt), children: [_jsx("svg", { ref: face, "aria-hidden": "true", ...stylex.props(styles.face) }), _jsxs("button", { type: "button", "aria-expanded": open, "aria-controls": bodyId, onClick: () => setOpen((value) => !value), ...stylex.props(styles.row), children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.rule, open && styles.ruleOpen) }), _jsxs("span", { ...stylex.props(styles.label), children: [_jsxs("svg", { width: "15", height: "13", viewBox: "0 0 15 13", fill: "none", strokeWidth: "1.7", strokeLinecap: "round", "aria-hidden": "true", ...stylex.props(styles.knot), children: [_jsx("path", { d: KNOT_LEAD, ...stylex.props(styles.lead, open && styles.leadHidden) }), _jsx("path", { d: KNOT_LOOP, pathLength: "100", ...stylex.props(styles.loop, open && styles.loopTied) })] }), _jsxs("span", { children: ["換班完成 · ", _jsx("span", { ...stylex.props(styles.mono), children: at }), " · ", _jsx("span", { ...stylex.props(styles.mono), children: `ctx ${ctxPercent}%` }), REASON_LABEL[reason], " → 新 session"] })] }), _jsx("svg", { width: "12", height: "12", 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: "m6 9 6 6 6-6" }) }), _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.rule, open && styles.ruleOpen) })] }), _jsx("div", { ...stylex.props(styles.bodyWrap, open && styles.bodyWrapOpen), children: _jsx("div", { ...stylex.props(styles.bodyClip), children: _jsxs("div", { id: bodyId, inert: !open, ...stylex.props(styles.body, open && styles.bodyOpen), children: [_jsxs("p", { ...stylex.props(styles.check), children: [_jsx(CheckIcon, {}), _jsx("b", { ...stylex.props(styles.checkTitle), children: "\u8A18\u61B6" }), _jsxs("span", { ...stylex.props(styles.checkText), children: [`${memory.count} 筆耐久事實已落盤`, memory.items?.length ? `(${memory.items.join("、")})` : "", "\u3002"] })] }), _jsxs("p", { ...stylex.props(styles.check), children: [_jsx(CheckIcon, {}), _jsx("b", { ...stylex.props(styles.checkTitle), children: "\u6458\u8981" }), _jsx("span", { ...stylex.props(styles.checkText), children: "handoff \u5DF2\u4EA4\u7D66\u4E0B\u4E00\u8F2A,\u8B80\u5F8C\u5373\u92B7\u6BC0\u3002" })] }), _jsxs("p", { ...stylex.props(styles.check), children: [_jsx(CheckIcon, {}), _jsx("b", { ...stylex.props(styles.checkTitle), children: "Ledger" }), _jsx("span", { ...stylex.props(styles.checkText), children: `本輪 ${ledgerCount} 條收據可查,不進新 context。` })] }), handoffSummary != null && _jsx("p", { ...stylex.props(styles.summary), children: handoffSummary })] }) }) })] }));
+    return (_jsxs("div", { ...stylex.props(styles.receipt), children: [_jsxs("button", { type: "button", "aria-expanded": open, "aria-controls": bodyId, onClick: () => setOpen((value) => !value), ...stylex.props(styles.row), children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.rule, open && styles.ruleOpen) }), _jsxs("span", { ...stylex.props(styles.label), children: [_jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", ...stylex.props(styles.link, open && styles.linkOpen), children: _jsx("path", { d: "M9 17H7A5 5 0 0 1 7 7h2M15 7h2a5 5 0 0 1 0 10h-2M8 12h8" }) }), _jsxs("span", { children: ["換班完成 · ", _jsx("span", { ...stylex.props(styles.mono), children: at }), " · ", _jsx("span", { ...stylex.props(styles.mono), children: `ctx ${ctxPercent}%` }), REASON_LABEL[reason], " → 新 session"] })] }), _jsx("svg", { width: "12", height: "12", 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: "m6 9 6 6 6-6" }) }), _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.rule, open && styles.ruleOpen) })] }), _jsx("div", { ...stylex.props(styles.bodyWrap, open && styles.bodyWrapOpen), children: _jsx("div", { ...stylex.props(styles.bodyClip), children: _jsxs("div", { id: bodyId, inert: !open, ...stylex.props(styles.body, open && styles.bodyOpen), children: [_jsxs("p", { ...stylex.props(styles.check), children: [_jsx(CheckIcon, {}), _jsx("b", { ...stylex.props(styles.checkTitle), children: "\u8A18\u61B6" }), _jsxs("span", { ...stylex.props(styles.checkText), children: [`${memory.count} 筆耐久事實已落盤`, memory.items?.length ? `(${memory.items.join("、")})` : "", "\u3002"] })] }), _jsxs("p", { ...stylex.props(styles.check), children: [_jsx(CheckIcon, {}), _jsx("b", { ...stylex.props(styles.checkTitle), children: "\u6458\u8981" }), _jsx("span", { ...stylex.props(styles.checkText), children: "handoff \u5DF2\u4EA4\u7D66\u4E0B\u4E00\u8F2A,\u8B80\u5F8C\u5373\u92B7\u6BC0\u3002" })] }), _jsxs("p", { ...stylex.props(styles.check), children: [_jsx(CheckIcon, {}), _jsx("b", { ...stylex.props(styles.checkTitle), children: "Ledger" }), _jsx("span", { ...stylex.props(styles.checkText), children: `本輪 ${ledgerCount} 條收據可查,不進新 context。` })] }), handoffSummary != null && _jsx("p", { ...stylex.props(styles.summary), children: handoffSummary })] }) }) })] }));
 }