@anyknown/ui 0.6.1 → 0.8.0

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

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

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

package/dist/components/icon/Chevron.js

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

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

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

package/dist/components/icon/icon.js

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

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

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

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

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

package/dist/components/live-dot/LiveDot.d.ts

@@ -0,0 +1,7 @@
+import type { StyleArg } from "../../lib/styled.js";
+export type LiveDotProps = {
+    /** 有 label 就變成 `role="status"`,讀屏聽得到「還在跑」。沒有就只是一顆裝飾。 */
+    label?: string;
+    sx?: StyleArg;
+};
+export declare function LiveDot({ label, sx }: LiveDotProps): import("react").JSX.Element;

package/dist/components/live-dot/LiveDot.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { color, radius, space } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+// 呼吸只到 0.35 就回來:淡出到底會變成閃爍,那是警報不是「還在跑」。
+const breathe = stylex.keyframes({ "50%": { opacity: 0.35 } });
+const styles = stylex.create({
+    wrap: { display: "inline-flex", alignItems: "center", gap: space.xxs },
+    dot: {
+        flex: "none",
+        width: "0.375rem",
+        height: "0.375rem",
+        borderRadius: radius.full,
+        backgroundColor: color.accent,
+        animationName: { default: breathe, [REDUCED]: "none" },
+        animationDuration: "1.6s",
+        animationIterationCount: "infinite",
+        animationTimingFunction: "ease-in-out",
+    },
+    srOnly: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        margin: -1,
+        padding: 0,
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap",
+    },
+});
+export function LiveDot({ label, sx }) {
+    if (label == null)
+        return _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.dot, sx) });
+    return (_jsxs("span", { role: "status", ...stylex.props(styles.wrap, sx), children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.dot) }), _jsx("span", { ...stylex.props(styles.srOnly), children: label })] }));
+}

package/dist/components/message/Message.d.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties } from "react";
 import { type ReactNode, type Ref } from "react";
+import { type StyleArg } from "../../lib/styled.js";
 export declare function useMessageBody(): {
     current: HTMLElement | null;
 } | null;
@@ -21,8 +22,9 @@ export type AssistantMessageProps = {
     pendingLabel?: string;
     authorLabel?: string;
     children?: ReactNode;
+    sx?: StyleArg;
 };
-export declare function AssistantMessage({ streaming, pending, pendingLabel, authorLabel, children, }: AssistantMessageProps): import("react").JSX.Element;
+export declare function AssistantMessage({ streaming, pending, pendingLabel, authorLabel, children, sx, }: AssistantMessageProps): import("react").JSX.Element;
 export type TextPartProps = {
     children: ReactNode;
 };

package/dist/components/message/Message.js

@@ -82,11 +82,11 @@ export function Thread({ children, ...rest }) {
 export function UserMessage({ children, authorLabel = "你說:" }) {
     return (_jsxs("div", { ...stylex.props(styles.turn, styles.userTurn), children: [_jsx("span", { ...stylex.props(styles.srOnly), children: authorLabel }), _jsx("div", { ...stylex.props(styles.bubble), children: children })] }));
 }
-export function AssistantMessage({ streaming = false, pending = false, pendingLabel = "回覆中", authorLabel = "助理說:", children, }) {
+export function AssistantMessage({ streaming = false, pending = false, pendingLabel = "回覆中", authorLabel = "助理說:", children, sx, }) {
     const body = useRef(null);
     const parts = Children.toArray(children);
     const lastText = parts.reduce((found, part, index) => (isValidElement(part) && part.type === TextPart ? index : found), -1);
-    return (_jsx(MessageBodyContext, { value: body, children: _jsxs("div", { ref: body, ...stylex.props(styles.turn, styles.assistant), children: [_jsx("span", { ...stylex.props(styles.srOnly), children: authorLabel }), pending ? (_jsxs("span", { role: "status", children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.pending) }), _jsx("span", { ...stylex.props(styles.srOnly), children: pendingLabel })] })) : (parts.map((part, index) => (_jsx(StreamingContext, { value: streaming && index === lastText, children: part }, isValidElement(part) && part.key != null ? part.key : index))))] }) }));
+    return (_jsx(MessageBodyContext, { value: body, children: _jsxs("div", { ref: body, ...stylex.props(styles.turn, styles.assistant, sx), children: [_jsx("span", { ...stylex.props(styles.srOnly), children: authorLabel }), pending ? (_jsxs("span", { role: "status", children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.pending) }), _jsx("span", { ...stylex.props(styles.srOnly), children: pendingLabel })] })) : (parts.map((part, index) => (_jsx(StreamingContext, { value: streaming && index === lastText, children: part }, isValidElement(part) && part.key != null ? part.key : index))))] }) }));
 }
 export function TextPart({ children }) {
     const streaming = useContext(StreamingContext);

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

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