@anyknown/ui 0.1.0

package/dist/components/toast/Toast.d.ts

@@ -0,0 +1,56 @@
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import * as stylex from "@stylexjs/stylex";
+export type ToastOptions = {
+    description?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    timeout?: number;
+};
+type Manager = ReturnType<typeof BaseToast.createToastManager>;
+/**
+ * Fallback manager for apps with a single <Toaster/>: importing `toast` works
+ * without threading context. A Toaster mounted with its own manager registers
+ * itself here so the module-level `toast` keeps reaching the live viewport.
+ */
+export declare const toastManager: import("@base-ui/react").ToastManager<any>;
+export declare const toast: ((title: string, options?: ToastOptions) => string) & {
+    success: (title: string, options?: ToastOptions) => string;
+    danger: (title: string, options?: ToastOptions) => string;
+    close: (id: string) => void;
+};
+export declare function useToast(): {
+    toast: ((title: string, options?: ToastOptions) => string) & {
+        success: (title: string, options?: ToastOptions) => string;
+        danger: (title: string, options?: ToastOptions) => string;
+        close: (id: string) => void;
+    };
+};
+declare const POSITIONS: {
+    readonly "bottom-right": Readonly<{
+        readonly bottom: stylex.StyleXClassNameFor<"bottom", string>;
+        readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", string>;
+    }>;
+    readonly "bottom-left": Readonly<{
+        readonly bottom: stylex.StyleXClassNameFor<"bottom", string>;
+        readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", string>;
+    }>;
+    readonly "top-right": Readonly<{
+        readonly top: stylex.StyleXClassNameFor<"top", string>;
+        readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", string>;
+    }>;
+    readonly "top-left": Readonly<{
+        readonly top: stylex.StyleXClassNameFor<"top", string>;
+        readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", string>;
+    }>;
+};
+export type ToasterProps = {
+    position?: keyof typeof POSITIONS;
+    timeout?: number;
+    limit?: number;
+    /** Pass a manager from `createToastManager()` to scope this viewport. */
+    manager?: Manager;
+};
+export declare function Toaster({ position, timeout, limit, manager, }: ToasterProps): import("react").JSX.Element;
+export {};

package/dist/components/toast/Toast.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import * as stylex from "@stylexjs/stylex";
+import { createContext, useContext, useState } from "react";
+import { reset } from "../../lib/styled.js";
+import { usePrefersReducedMotion } from "../../lib/motion.js";
+import { UNWEAVE_PATH } from "../../lib/paths.js";
+import { color, font, motion, radius, shadow, space, text } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const DEFAULT_TIMEOUT = 5000;
+const slideIn = stylex.keyframes({
+    from: { opacity: 0, translate: "1rem 0" },
+    to: { opacity: 1, translate: "0 0" },
+});
+const unweave = stylex.keyframes({
+    from: { strokeDashoffset: 0 },
+    to: { strokeDashoffset: -100 },
+});
+const styles = stylex.create({
+    viewport: {
+        position: "fixed",
+        zIndex: 80,
+        display: "flex",
+        gap: space.xs,
+        width: "min(20rem, calc(100vw - 2.5rem))",
+    },
+    fromBottom: { flexDirection: "column-reverse" },
+    fromTop: { flexDirection: "column" },
+    bottomRight: { bottom: space.md, insetInlineEnd: space.md },
+    bottomLeft: { bottom: space.md, insetInlineStart: space.md },
+    topRight: { top: space.md, insetInlineEnd: space.md },
+    topLeft: { top: space.md, insetInlineStart: space.md },
+    toast: {
+        position: "relative",
+        overflow: "hidden",
+        display: "flex",
+        alignItems: "center",
+        gap: space.xs,
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.lg,
+        boxShadow: shadow.popover,
+        paddingBlock: space.xs,
+        paddingInline: space.xs,
+        fontFamily: font.body,
+        fontSize: text.sm,
+        color: color.text,
+        opacity: { default: 1, ":is([data-limited])": 0 },
+        animationName: { default: slideIn, [REDUCED]: "none" },
+        animationDuration: "180ms",
+        animationTimingFunction: "ease-out",
+    },
+    countdown: { position: "absolute", top: 0, insetInlineStart: 0, width: "100%", height: 5 },
+    countLine: {
+        fill: "none",
+        strokeWidth: 1.5,
+        strokeLinecap: "round",
+        strokeDasharray: 100,
+        animationName: unweave,
+        animationTimingFunction: "linear",
+        animationFillMode: "forwards",
+    },
+    lineDefault: { stroke: color.textFaint },
+    lineSuccess: { stroke: color.accent },
+    lineDanger: { stroke: color.danger },
+    running: (ms, paused) => ({
+        animationDuration: `${ms}ms`,
+        animationPlayState: paused ? "paused" : "running",
+    }),
+    dot: { flex: "none", width: "0.5rem", height: "0.5rem", borderRadius: radius.full },
+    dotDefault: { backgroundColor: color.textFaint },
+    dotSuccess: { backgroundColor: color.accent },
+    dotDanger: { backgroundColor: color.danger },
+    content: { flex: 1, display: "grid", gap: 0 },
+    title: { margin: 0, fontSize: text.sm, color: color.text },
+    description: { margin: 0, fontSize: "0.78rem", color: color.textMuted },
+    action: {
+        fontFamily: font.body,
+        fontSize: "0.8rem",
+        fontWeight: 500,
+        lineHeight: 1,
+        color: color.accent,
+        cursor: "pointer",
+        paddingBlock: space.xxs,
+        paddingInline: space.xxs,
+        borderRadius: radius.sm,
+        backgroundColor: { default: "transparent", ":hover": color.accentSubtle },
+        transitionProperty: "background-color",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -1,
+    },
+    srOnly: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap",
+        borderWidth: 0,
+    },
+});
+const TONE = {
+    success: { dot: styles.dotSuccess, line: styles.lineSuccess, word: "成功:" },
+    danger: { dot: styles.dotDanger, line: styles.lineDanger, word: "錯誤:" },
+    default: { dot: styles.dotDefault, line: styles.lineDefault, word: "" },
+};
+function makeApi(getManager) {
+    function add(tone, title, options = {}) {
+        const manager = getManager();
+        const action = options.action;
+        let id = "";
+        id = manager.add({
+            title,
+            type: tone,
+            description: options.description,
+            timeout: options.timeout,
+            priority: tone === "danger" ? "high" : "low",
+            actionProps: action
+                ? {
+                    children: action.label,
+                    onClick: () => {
+                        action.onClick();
+                        manager.close(id);
+                    },
+                }
+                : undefined,
+        });
+        return id;
+    }
+    return Object.assign((title, options) => add("default", title, options), {
+        success: (title, options) => add("success", title, options),
+        danger: (title, options) => add("danger", title, options),
+        close: (id) => getManager().close(id),
+    });
+}
+/**
+ * Fallback manager for apps with a single <Toaster/>: importing `toast` works
+ * without threading context. A Toaster mounted with its own manager registers
+ * itself here so the module-level `toast` keeps reaching the live viewport.
+ */
+export const toastManager = BaseToast.createToastManager();
+const ToastApiContext = createContext(null);
+export const toast = makeApi(() => toastManager);
+export function useToast() {
+    const scoped = useContext(ToastApiContext);
+    return { toast: scoped ?? toast };
+}
+const POSITIONS = {
+    "bottom-right": styles.bottomRight,
+    "bottom-left": styles.bottomLeft,
+    "top-right": styles.topRight,
+    "top-left": styles.topLeft,
+};
+export function Toaster({ position = "bottom-right", timeout = DEFAULT_TIMEOUT, limit = 3, manager, }) {
+    const [own] = useState(() => manager ?? toastManager);
+    const [api] = useState(() => makeApi(() => own));
+    const [paused, setPaused] = useState(false);
+    const fromBottom = position.startsWith("bottom");
+    return (_jsx(ToastApiContext, { value: api, children: _jsx(BaseToast.Provider, { toastManager: own, timeout: timeout, limit: limit, children: _jsx(BaseToast.Portal, { children: _jsx(BaseToast.Viewport, { onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false), onFocus: () => setPaused(true), onBlur: () => setPaused(false), ...stylex.props(styles.viewport, fromBottom ? styles.fromBottom : styles.fromTop, POSITIONS[position]), children: _jsx(ToastList, { fallbackTimeout: timeout, paused: paused }) }) }) }) }));
+}
+function ToastList({ fallbackTimeout, paused }) {
+    const { toasts } = BaseToast.useToastManager();
+    return toasts.map((item) => (_jsx(ToastItem, { toast: item, fallbackTimeout: fallbackTimeout, paused: paused }, item.id)));
+}
+function ToastItem({ toast: item, fallbackTimeout, paused }) {
+    const reduced = usePrefersReducedMotion();
+    const tone = TONE[item.type in TONE ? item.type : "default"];
+    const duration = item.timeout ?? fallbackTimeout;
+    return (_jsxs(BaseToast.Root, { toast: item, ...stylex.props(styles.toast), children: [!reduced && duration > 0 && (_jsx("svg", { viewBox: "0 0 320 6", preserveAspectRatio: "none", "aria-hidden": "true", ...stylex.props(styles.countdown), children: _jsx("path", { d: UNWEAVE_PATH, pathLength: "100", ...stylex.props(styles.countLine, tone.line, styles.running(duration, paused)) }) })), _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.dot, tone.dot) }), _jsxs(BaseToast.Content, { ...stylex.props(styles.content), children: [tone.word !== "" && _jsx("span", { ...stylex.props(styles.srOnly), children: tone.word }), _jsx(BaseToast.Title, { ...stylex.props(styles.title) }), item.description != null && _jsx(BaseToast.Description, { ...stylex.props(styles.description) })] }), item.actionProps != null && _jsx(BaseToast.Action, { ...stylex.props(reset.control, styles.action) })] }));
+}

package/dist/components/tool-card/ToolCard.d.ts

@@ -0,0 +1,55 @@
+import { type ReactNode } from "react";
+export type ToolState = "running" | "completed" | "error";
+export type ToolRetry = {
+    attempt: number;
+    max: number;
+    delayMs: number;
+};
+export type ToolCardProps = {
+    tool: string;
+    title?: string;
+    subtitle?: string;
+    state?: ToolState;
+    durationMs?: number;
+    durationLabel?: string;
+    defaultOpen?: boolean;
+    retry?: ToolRetry;
+    runningLabel?: string;
+    completedLabel?: string;
+    errorLabel?: string;
+    secondLine?: ReactNode;
+    footer?: ReactNode;
+    children?: ReactNode;
+};
+export declare function ToolCard({ tool, title, subtitle, state, durationMs, durationLabel, defaultOpen, retry, runningLabel, completedLabel, errorLabel, secondLine, footer, children, }: ToolCardProps): import("react").JSX.Element;
+export declare function ToolInput({ json, label }: {
+    json: unknown;
+    label?: string;
+}): import("react").JSX.Element;
+export declare function ToolOutput({ text: value, label }: {
+    text: string;
+    label?: string;
+}): import("react").JSX.Element;
+export type ToolErrorProps = {
+    text: string;
+    label?: string;
+    copyLabel?: string;
+    copiedLabel?: string;
+};
+export declare function ToolError({ text: value, label, copyLabel, copiedLabel, }: ToolErrorProps): import("react").JSX.Element;
+export type SubagentLineProps = {
+    model?: string;
+    now?: string;
+    toolCount?: number;
+};
+export declare function SubagentLine({ model, now, toolCount }: SubagentLineProps): import("react").JSX.Element;
+export declare function SubagentSummary({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function SubagentThread({ task, children }: {
+    task?: ReactNode;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function SubagentText({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/tool-card/ToolCard.js

@@ -0,0 +1,281 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { useId, useState } from "react";
+import { reset } from "../../lib/styled.js";
+import { useCopy } from "../../lib/useCopy.js";
+import { formatDuration } from "../../lib/format.js";
+import { color, font, radius, space, text } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const spin = stylex.keyframes({ to: { rotate: "360deg" } });
+const shimmer = stylex.keyframes({ to: { backgroundPosition: "-200% 0" } });
+const styles = stylex.create({
+    card: {
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.lg,
+        backgroundColor: color.surface,
+        overflow: "hidden",
+    },
+    cardError: { borderColor: `color-mix(in srgb, ${color.danger} 45%, ${color.border})` },
+    row: {
+        display: "flex",
+        alignItems: "center",
+        gap: space.xs,
+        width: "100%",
+        boxSizing: "border-box",
+        paddingBlock: space.xs,
+        paddingInline: space.sm,
+        fontFamily: font.body,
+        fontSize: text.xs,
+        lineHeight: text.leadingSnug,
+        color: color.text,
+        cursor: "pointer",
+        backgroundColor: {
+            default: "transparent",
+            ":hover": `color-mix(in srgb, ${color.border} 22%, ${color.surface})`,
+        },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -2,
+    },
+    title: { fontWeight: 500, flex: "none" },
+    subtitle: {
+        color: color.textMuted,
+        fontFamily: font.mono,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    time: {
+        marginInlineStart: "auto",
+        color: color.textFaint,
+        fontVariantNumeric: "tabular-nums",
+        flex: "none",
+    },
+    chevron: {
+        color: color.textFaint,
+        flex: "none",
+        transitionProperty: "rotate",
+        transitionDuration: { default: "140ms", [REDUCED]: "0s" },
+    },
+    chevronOpen: { rotate: "180deg" },
+    ok: { color: color.success, flex: "none" },
+    bad: { color: color.danger, flex: "none" },
+    spinner: {
+        width: 11,
+        height: 11,
+        flex: "none",
+        borderWidth: 1.5,
+        borderStyle: "solid",
+        borderColor: color.borderStrong,
+        borderTopColor: color.accent,
+        borderRadius: radius.full,
+        animationName: spin,
+        animationDuration: { default: "0.8s", [REDUCED]: "1.6s" },
+        animationTimingFunction: "linear",
+        animationIterationCount: "infinite",
+    },
+    spinnerWarning: { borderTopColor: color.warning },
+    detail: {
+        borderTopWidth: 1,
+        borderTopStyle: "solid",
+        borderTopColor: color.border,
+        paddingBlock: space.xs,
+        paddingInline: space.sm,
+        display: { default: "grid", ":is([hidden])": "none" },
+        gap: space.xxs,
+    },
+    ioLabel: {
+        fontFamily: font.mono,
+        fontSize: "0.62rem",
+        fontWeight: 600,
+        lineHeight: 1,
+        letterSpacing: "0.08em",
+        textTransform: "uppercase",
+        color: color.textFaint,
+    },
+    io: {
+        margin: 0,
+        fontFamily: font.mono,
+        fontSize: text.code,
+        lineHeight: text.leadingNormal,
+        backgroundColor: color.bg,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.sm,
+        paddingBlock: space.xs,
+        paddingInline: space.xs,
+        overflowX: "auto",
+        whiteSpace: "pre",
+        color: color.text,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -2,
+    },
+    ioError: {
+        backgroundColor: color.dangerSubtle,
+        borderColor: `color-mix(in srgb, ${color.danger} 35%, ${color.border})`,
+        color: color.danger,
+        whiteSpace: "pre-wrap",
+    },
+    copyError: {
+        fontFamily: font.body,
+        fontSize: text.xs,
+        color: color.danger,
+        cursor: "pointer",
+        justifySelf: "start",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: `color-mix(in srgb, ${color.danger} 40%, ${color.border})`,
+        borderRadius: radius.sm,
+        paddingBlock: "0.2rem",
+        paddingInline: space.xxs,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.danger}` },
+        outlineOffset: 1,
+    },
+    retryLine: {
+        display: "flex",
+        alignItems: "center",
+        gap: space.xxs,
+        paddingBlock: space.xxs,
+        paddingInline: space.sm,
+        borderTopWidth: 1,
+        borderTopStyle: "solid",
+        borderTopColor: color.border,
+        fontFamily: font.body,
+        fontSize: text.xs,
+        color: color.warning,
+    },
+    retryCount: { marginInlineStart: "auto", fontVariantNumeric: "tabular-nums" },
+    subLine: {
+        display: "flex",
+        alignItems: "center",
+        gap: space.xxs,
+        paddingInline: space.sm,
+        paddingBottom: space.xs,
+        fontFamily: font.body,
+        fontSize: text.xs,
+        color: color.textMuted,
+    },
+    chip: {
+        fontFamily: font.mono,
+        fontSize: "0.68rem",
+        lineHeight: text.leadingSnug,
+        color: color.textFaint,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.sm,
+        paddingBlock: "0.05rem",
+        paddingInline: space.xxs,
+        flex: "none",
+    },
+    now: {
+        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",
+    },
+    summary: {
+        paddingInline: space.sm,
+        paddingBottom: space.xs,
+        fontFamily: font.body,
+        fontSize: text.xs,
+        lineHeight: text.leadingSnug,
+        color: color.textMuted,
+        display: "-webkit-box",
+        WebkitLineClamp: 3,
+        WebkitBoxOrient: "vertical",
+        overflow: "hidden",
+    },
+    nested: {
+        borderInlineStartWidth: 2,
+        borderInlineStartStyle: "solid",
+        borderInlineStartColor: color.border,
+        marginBlock: space.xxs,
+        marginInline: space.sm,
+        paddingInlineStart: space.sm,
+        display: "grid",
+        gap: space.xs,
+    },
+    quote: {
+        borderInlineStartWidth: 2,
+        borderInlineStartStyle: "solid",
+        borderInlineStartColor: color.borderStrong,
+        paddingInlineStart: space.xs,
+        color: color.textMuted,
+        fontFamily: font.body,
+        fontSize: text.xs,
+        lineHeight: text.leadingSnug,
+        margin: 0,
+    },
+    nestedText: { fontFamily: font.body, fontSize: text.xs, lineHeight: text.leadingSnug, margin: 0 },
+    srOnly: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap",
+        borderWidth: 0,
+    },
+});
+const VERBS = {
+    read: "讀取",
+    edit: "編輯",
+    write: "寫入",
+    shell: "執行",
+    search: "搜尋",
+    fetch: "取得",
+    subagent: "委派",
+};
+const DEFAULT_OPEN_TOOLS = new Set(["shell", "edit", "write"]);
+function Chevron({ open }) {
+    return (_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" }) }));
+}
+export function ToolCard({ tool, title, subtitle, state = "completed", durationMs, durationLabel, defaultOpen, retry, runningLabel = "執行中", completedLabel = "完成", errorLabel = "失敗", secondLine, footer, children, }) {
+    const detailId = useId();
+    const [open, setOpen] = useState(defaultOpen ?? (state === "error" || DEFAULT_OPEN_TOOLS.has(tool)));
+    const [wasState, setWasState] = useState(state);
+    // A tool usually mounts as `running` and only later fails; NOTES says any
+    // error is expanded, so react to the transition, not just the initial state.
+    if (wasState !== state) {
+        setWasState(state);
+        if (state === "error" && defaultOpen == null)
+            setOpen(true);
+    }
+    const STATE_LABELS = { running: runningLabel, completed: completedLabel, error: errorLabel };
+    const retryText = retry != null ? `重試中(第 ${retry.attempt} 次,${Math.round(retry.delayMs / 1000)} 秒後)…` : "";
+    return (_jsxs("div", { ...stylex.props(styles.card, state === "error" && styles.cardError), children: [_jsxs("button", { type: "button", "aria-expanded": open, "aria-controls": detailId, onClick: () => setOpen((value) => !value), ...stylex.props(reset.control, styles.row), children: [state === "running" && _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.spinner) }), state === "completed" && (_jsxs("span", { ...stylex.props(styles.ok), children: [_jsx("span", { "aria-hidden": "true", children: "\u2713" }), _jsx("span", { ...stylex.props(styles.srOnly), children: completedLabel })] })), state === "error" && (_jsxs("span", { ...stylex.props(styles.bad), children: [_jsx("span", { "aria-hidden": "true", children: "\u2717" }), _jsx("span", { ...stylex.props(styles.srOnly), children: errorLabel })] })), _jsx("span", { ...stylex.props(styles.title), children: title ?? VERBS[tool] ?? tool }), subtitle != null && _jsx("span", { ...stylex.props(styles.subtitle), children: subtitle }), _jsx("span", { ...stylex.props(styles.time), children: durationLabel ?? (durationMs != null ? formatDuration(durationMs) : "") }), _jsx(Chevron, { open: open })] }), secondLine, footer, _jsx("div", { id: detailId, hidden: !open, ...stylex.props(styles.detail), children: children }), retry != null && (_jsxs("div", { "aria-hidden": "true", ...stylex.props(styles.retryLine), children: [_jsx("span", { ...stylex.props(styles.spinner, styles.spinnerWarning) }), retryText, _jsx("span", { ...stylex.props(styles.retryCount), children: `重試 ${retry.attempt}/${retry.max}` })] })), _jsx("span", { role: "status", ...stylex.props(styles.srOnly), children: [STATE_LABELS[state], retryText].filter(Boolean).join(" · ") })] }));
+}
+export function ToolInput({ json, label = "輸入" }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ...stylex.props(styles.ioLabel), children: label }), _jsx("pre", { tabIndex: 0, role: "group", "aria-label": label, ...stylex.props(styles.io), children: typeof json === "string" ? json : JSON.stringify(json, null, 1) })] }));
+}
+export function ToolOutput({ text: value, label = "輸出" }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ...stylex.props(styles.ioLabel), children: label }), _jsx("pre", { tabIndex: 0, role: "group", "aria-label": label, ...stylex.props(styles.io), children: value })] }));
+}
+export function ToolError({ text: value, label = "錯誤", copyLabel = "複製錯誤", copiedLabel = "已複製 ✓", }) {
+    const { copied, copy } = useCopy();
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ...stylex.props(styles.ioLabel), children: label }), _jsx("pre", { tabIndex: 0, role: "group", "aria-label": label, ...stylex.props(styles.io, styles.ioError), children: value }), _jsx("button", { type: "button", onClick: () => copy(value), ...stylex.props(reset.control, styles.copyError), children: copied ? copiedLabel : copyLabel })] }));
+}
+export function SubagentLine({ model, now, toolCount }) {
+    return (_jsxs("div", { ...stylex.props(styles.subLine), children: [model != null && _jsx("span", { ...stylex.props(styles.chip), children: model }), now != null ? (_jsx("span", { ...stylex.props(styles.now), children: now })) : toolCount != null ? (_jsx("span", { children: `${toolCount} 工具` })) : null] }));
+}
+export function SubagentSummary({ children }) {
+    return _jsx("div", { ...stylex.props(styles.summary), children: children });
+}
+export function SubagentThread({ task, children }) {
+    return (_jsxs("div", { ...stylex.props(styles.nested), children: [task != null && _jsx("p", { ...stylex.props(styles.quote), children: task }), children] }));
+}
+export function SubagentText({ children }) {
+    return _jsx("p", { ...stylex.props(styles.nestedText), children: children });
+}

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,12 @@
+import { type ReactElement, type ReactNode } from "react";
+export declare const TooltipProvider: import("react").FC<import("@base-ui/react").TooltipProviderProps>;
+export type TooltipProps = {
+    content: ReactNode;
+    shortcut?: ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    delay?: number;
+    disabled?: boolean;
+    children: ReactElement;
+};
+export declare function Tooltip({ content, shortcut, side, align, delay, disabled, children, }: TooltipProps): import("react").JSX.Element;

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import * as stylex from "@stylexjs/stylex";
+import { useId, useState } from "react";
+import { usePrefersReducedMotion } from "../../lib/motion.js";
+import { color, font, motion, radius, space, text } from "../../tokens.stylex.js";
+import { KbdToneContext } from "../kbd/Kbd.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const fade = stylex.keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
+const styles = stylex.create({
+    positioner: { zIndex: 60 },
+    bubble: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: space.xs,
+        maxWidth: "18rem",
+        backgroundColor: color.text,
+        color: color.bg,
+        borderRadius: radius.sm,
+        paddingBlock: "0.32rem",
+        paddingInline: space.xs,
+        fontFamily: font.body,
+        fontSize: "0.75rem",
+        lineHeight: text.leadingSnug,
+        animationName: { default: fade, [REDUCED]: "none" },
+        animationDuration: motion.fast,
+        animationTimingFunction: motion.ease,
+    },
+});
+export const TooltipProvider = BaseTooltip.Provider;
+export function Tooltip({ content, shortcut, side = "top", align = "center", delay = 400, disabled = false, children, }) {
+    const id = useId();
+    const reduced = usePrefersReducedMotion();
+    const [open, setOpen] = useState(false);
+    if (disabled)
+        return children;
+    return (_jsxs(BaseTooltip.Root, { open: open, onOpenChange: setOpen, children: [_jsx(BaseTooltip.Trigger, { delay: reduced ? 0 : delay, "aria-describedby": open ? id : undefined, render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, align: align, sideOffset: 6, ...stylex.props(styles.positioner), children: _jsx(BaseTooltip.Popup, { id: id, role: "tooltip", ...stylex.props(styles.bubble), children: _jsxs(KbdToneContext, { value: "inverted", children: [content, shortcut] }) }) }) })] }));
+}

package/dist/components/voice-indicator/VoiceIndicator.d.ts

@@ -0,0 +1,7 @@
+import { type VoiceState } from "../../lib/voice.js";
+export type VoiceIndicatorProps = {
+    state: VoiceState;
+    level?: number;
+    statusLabel?: string;
+};
+export declare function VoiceIndicator({ state, level, statusLabel }: VoiceIndicatorProps): import("react").JSX.Element;