@anyknown/ui 0.1.0

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

@@ -0,0 +1,147 @@
+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";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+// 卡面 = 淺色布(TEXTURE-GUIDE §3、handoff-receipt/NOTES.md):沒有 background,
+// 實心由紗織成;動態取「僅展示面」子集 — hover 帶動 + 光澤帶,無窩、無掃光。
+// 布是固定高度 480 的長布,展開只是露出同一塊布更多 → 高度變化零重織、織紋恆定。
+const styles = stylex.create({
+    receipt: {
+        position: "relative",
+        overflow: "hidden",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.md,
+    },
+    face: { position: "absolute", top: 0, left: 0, pointerEvents: "none" },
+    row: {
+        // 注意:StyleX 0.19 會靜默丟掉 `all: unset`(編不出任何規則),原生按鈕的
+        // buttonface 底色與 outset 邊框會蓋住布 —— 要逐項重設
+        appearance: "none",
+        backgroundColor: "transparent",
+        borderWidth: 0,
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: space.xs,
+        width: "100%",
+        boxSizing: "border-box",
+        paddingBlock: space.xs,
+        paddingInline: space.sm,
+        cursor: "pointer",
+        fontFamily: font.body,
+        fontSize: text.xs,
+        color: { default: color.textMuted, ":hover": color.text },
+        borderRadius: radius.md,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -2,
+    },
+    rule: {
+        flex: 1,
+        borderTopWidth: 1,
+        borderTopStyle: "dashed",
+        borderTopColor: color.borderStrong,
+        minWidth: space.md,
+        transitionProperty: "border-color",
+        transitionDuration: { default: "300ms", [REDUCED]: "0s" },
+    },
+    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",
+        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 },
+    chevron: {
+        flex: "none",
+        color: color.textFaint,
+        transitionProperty: "rotate",
+        transitionDuration: { default: "160ms", [REDUCED]: "0s" },
+        transitionTimingFunction: "ease",
+    },
+    chevronOpen: { rotate: "180deg" },
+    // 展開 = 0fr → 1fr(雙向平滑,不是 display 硬切);內容 opacity 跟進
+    bodyWrap: {
+        position: "relative",
+        display: "grid",
+        gridTemplateRows: "0fr",
+        transitionProperty: "grid-template-rows",
+        transitionDuration: { default: "240ms", [REDUCED]: "0s" },
+        transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+    },
+    bodyWrapOpen: { gridTemplateRows: "1fr" },
+    bodyClip: { overflow: "hidden", minHeight: 0 },
+    body: {
+        borderTopWidth: 1,
+        borderTopStyle: "solid",
+        borderTopColor: color.border,
+        paddingBlock: space.xs,
+        paddingInline: space.sm,
+        fontFamily: font.body,
+        fontSize: text.xs,
+        display: "grid",
+        gap: space.xxs,
+        opacity: 0,
+        transitionProperty: "opacity",
+        transitionDuration: { default: "200ms", [REDUCED]: "0s" },
+        transitionTimingFunction: "ease-out",
+    },
+    bodyOpen: { opacity: 1 },
+    check: { display: "flex", alignItems: "baseline", gap: space.xxs, margin: 0 },
+    checkIcon: { flex: "none", color: color.accent, translate: "0 2px" },
+    checkTitle: { fontWeight: 500, whiteSpace: "nowrap", color: color.text },
+    checkText: { color: color.textMuted },
+    summary: {
+        margin: 0,
+        color: color.textMuted,
+        borderInlineStartWidth: 2,
+        borderInlineStartStyle: "solid",
+        borderInlineStartColor: color.border,
+        paddingInlineStart: space.xs,
+    },
+});
+const REASON_LABEL = {
+    "soft-threshold": "",
+    "hard-limit": "(硬上限)",
+    "state-transition": "(狀態切換)",
+};
+function CheckIcon() {
+    return (_jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", ...stylex.props(styles.checkIcon), children: _jsx("path", { d: "m5 13 4 4L19 7" }) }));
+}
+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 })] }) }) })] }));
+}

package/dist/components/input/Input.d.ts

@@ -0,0 +1,48 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ComponentProps, ReactNode } from "react";
+export declare const controlStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 1>;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "border-color">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", string>;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", string>;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none" | `2px solid ${stylex.StyleXVar<string>}`>;
+        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", -1>;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "auto" | "not-allowed">;
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | 0.5>;
+        readonly "::placeholder": stylex.StyleXClassNameFor<"::placeholder", {
+            readonly color: stylex.StyleXVar<string>;
+        }>;
+    }>;
+    readonly invalid: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", string>;
+    }>;
+    readonly md: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "2.25rem">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+    }>;
+    readonly sm: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "1.75rem">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+    }>;
+}>;
+export type InputProps = Omit<ComponentProps<"input">, "size"> & {
+    size?: "sm" | "md";
+    invalid?: boolean;
+    leadingIcon?: ReactNode;
+};
+export declare function Input({ size, invalid, leadingIcon, ...props }: InputProps): import("react").JSX.Element;

package/dist/components/input/Input.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { styled } from "../../lib/styled.js";
+import { color, font, motion, radius, space, text } from "../../tokens.stylex.js";
+import { useFieldControl } from "../label/fieldContext.js";
+export const controlStyles = stylex.create({
+    base: {
+        width: "100%",
+        // 沒有 border-box,minHeight 2.25rem 是「內容」36px,再加 padding+border → 54px;
+        // 元件不能靠 app 端有沒有 `*{box-sizing:border-box}` reset
+        boxSizing: "border-box",
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: {
+            default: color.border,
+            ":hover:not(:disabled)": color.borderStrong,
+            ":focus-visible": color.focusRing,
+        },
+        borderRadius: radius.md,
+        color: color.text,
+        fontFamily: font.body,
+        fontSize: text.sm,
+        // 單行控件的行高只要裝得下字:1.5 會把 md 撐到 39px,跟 button/select 的
+        // 2.25rem 對不齊(Textarea 自己蓋回 leadingRelaxed,多行照樣好讀)
+        lineHeight: text.leadingTight,
+        transitionProperty: "border-color",
+        transitionDuration: { default: motion.fast, "@media (prefers-reduced-motion: reduce)": "0s" },
+        transitionTimingFunction: motion.ease,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -1,
+        cursor: { default: "auto", ":disabled": "not-allowed" },
+        opacity: { default: 1, ":disabled": 0.5 },
+        "::placeholder": { color: color.textFaint },
+    },
+    invalid: {
+        borderColor: { default: color.danger, ":hover:not(:disabled)": color.danger },
+        outlineColor: color.danger,
+    },
+    md: { minHeight: "2.25rem", paddingBlock: space.xs, paddingInline: space.sm },
+    sm: { minHeight: "1.75rem", paddingBlock: space.xxs, paddingInline: space.xs, fontSize: text.xs },
+});
+const styles = stylex.create({
+    affix: { position: "relative", display: "block", width: "100%" },
+    icon: {
+        position: "absolute",
+        insetInlineStart: space.xs,
+        insetBlockStart: "50%",
+        transform: "translateY(-50%)",
+        display: "flex",
+        color: color.textFaint,
+        pointerEvents: "none",
+    },
+    withIconMd: { paddingInlineStart: space.xl },
+    withIconSm: { paddingInlineStart: space.lg },
+});
+export function Input({ size = "md", invalid, leadingIcon, ...props }) {
+    const { invalid: fieldInvalid, ...field } = useFieldControl(props);
+    const isInvalid = invalid ?? fieldInvalid;
+    const input = (_jsx("input", { ...props, ...field, "aria-invalid": isInvalid || undefined, ...styled(props, controlStyles.base, controlStyles[size], isInvalid && controlStyles.invalid, Boolean(leadingIcon) && (size === "sm" ? styles.withIconSm : styles.withIconMd)) }));
+    if (!leadingIcon)
+        return input;
+    return (_jsxs("span", { ...stylex.props(styles.affix), children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.icon), children: leadingIcon }), input] }));
+}

package/dist/components/interaction-card/InteractionCard.d.ts

@@ -0,0 +1,59 @@
+import { type ReactNode } from "react";
+export type PermissionReply = "once" | {
+    always: string;
+} | {
+    reject: true;
+    message?: string;
+};
+export type PermissionReceipt = {
+    text: string;
+    rejected?: boolean;
+};
+export type PermissionCardProps = {
+    verb: string;
+    subject: string;
+    scope?: string;
+    policyHint?: ReactNode;
+    blockingLabel?: string;
+    onReply?: (reply: PermissionReply) => void;
+    resolved?: PermissionReceipt;
+};
+export declare function PermissionCard({ verb, subject, scope, policyHint, blockingLabel, onReply, resolved, }: PermissionCardProps): import("react").JSX.Element;
+export type DecisionOption = {
+    value: string;
+    label: string;
+    description?: string;
+    recommended?: boolean;
+};
+export type DecisionBlock = {
+    kind: "markdown";
+    id: string;
+    text: string;
+} | {
+    kind: "options";
+    id: string;
+    label?: string;
+    multiple?: boolean;
+    required?: boolean;
+    options: DecisionOption[];
+} | {
+    kind: "text";
+    id: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+};
+export type DecisionAnswer = Record<string, string | string[]>;
+export type DecisionCardProps = {
+    title: string;
+    blocks: DecisionBlock[];
+    blocking?: boolean;
+    deadlineLabel?: string;
+    submitLabel?: string;
+    recommendedLabel?: string;
+    onAnswer?: (answer: DecisionAnswer) => void;
+    resolved?: {
+        text: string;
+    };
+};
+export declare function DecisionCard({ title, blocks, blocking, deadlineLabel, submitLabel, recommendedLabel, onAnswer, resolved, }: DecisionCardProps): import("react").JSX.Element;

package/dist/components/interaction-card/InteractionCard.js

@@ -0,0 +1,238 @@
+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 { color, font, motion, radius, space, text } from "../../tokens.stylex.js";
+import { Button } from "../button/Button.js";
+import { Checkbox } from "../checkbox/Checkbox.js";
+import { Radio } from "../radio/Radio.js";
+import { RadioGroup } from "../radio/RadioGroup.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const styles = stylex.create({
+    card: {
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.lg,
+        paddingBlock: space.sm,
+        paddingInline: space.md,
+        display: "grid",
+        gap: space.xs,
+        fontFamily: font.body,
+        transitionProperty: "border-color",
+        transitionDuration: { default: "180ms", [REDUCED]: "0s" },
+    },
+    permissionPending: { borderColor: color.warning },
+    decisionPending: { borderColor: color.accent },
+    head: { display: "flex", alignItems: "center", gap: space.xs },
+    headIconWarning: { flex: "none", color: color.warning },
+    headIconAccent: { flex: "none", color: color.accent },
+    verb: { fontSize: text.sm, fontWeight: 500, lineHeight: text.leadingSnug, color: color.text },
+    state: {
+        marginInlineStart: "auto",
+        fontFamily: font.mono,
+        fontSize: "0.68rem",
+        fontWeight: 600,
+        lineHeight: 1,
+        letterSpacing: "0.06em",
+        textTransform: "uppercase",
+        whiteSpace: "nowrap",
+    },
+    stateWarning: { color: color.warning },
+    stateAccent: { color: color.accent },
+    stateQuiet: { color: color.textFaint },
+    body: { display: "grid", gap: space.xs },
+    mono: {
+        fontFamily: font.mono,
+        fontSize: "0.82rem",
+        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",
+        margin: 0,
+        color: color.text,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -2,
+    },
+    actions: { display: "flex", gap: space.xs, flexWrap: "wrap" },
+    shortcut: {
+        fontFamily: font.mono,
+        fontSize: "0.68rem",
+        fontWeight: 500,
+        opacity: 0.65,
+        marginInlineStart: space.xxs,
+    },
+    policy: {
+        display: "flex",
+        alignItems: "center",
+        gap: space.xxs,
+        fontSize: "0.78rem",
+        color: color.textMuted,
+        borderTopWidth: 1,
+        borderTopStyle: "solid",
+        borderTopColor: color.border,
+        paddingTop: space.xs,
+        margin: 0,
+    },
+    policyIcon: { flex: "none", color: color.textFaint },
+    question: {
+        fontSize: "0.95rem",
+        fontWeight: 500,
+        lineHeight: text.leadingSnug,
+        margin: 0,
+        color: color.text,
+    },
+    markdown: { fontSize: text.sm, lineHeight: text.leadingRelaxed, margin: 0, color: color.textMuted },
+    options: {
+        display: "grid",
+        gap: space.xxs,
+        margin: 0,
+        padding: 0,
+        borderWidth: 0,
+        listStyle: "none",
+    },
+    srOnly: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap",
+        borderWidth: 0,
+    },
+    recommended: {
+        fontFamily: font.mono,
+        fontSize: "0.62rem",
+        fontWeight: 600,
+        lineHeight: 1,
+        letterSpacing: "0.05em",
+        textTransform: "uppercase",
+        color: color.accent,
+        backgroundColor: color.accentSubtle,
+        borderRadius: radius.sm,
+        paddingBlock: "0.15rem",
+        paddingInline: space.xxs,
+        marginInlineStart: space.xxs,
+        verticalAlign: "middle",
+    },
+    free: {
+        width: "100%",
+        boxSizing: "border-box",
+        backgroundColor: color.bg,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: { default: color.border, ":focus-visible": color.focusRing },
+        borderRadius: radius.sm,
+        color: color.text,
+        fontFamily: font.body,
+        fontSize: text.sm,
+        paddingBlock: space.xs,
+        paddingInline: space.xs,
+        resize: "vertical",
+        minHeight: "2.4rem",
+        transitionProperty: "border-color",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -1,
+        "::placeholder": { color: color.textFaint },
+    },
+    receipt: {
+        display: "flex",
+        alignItems: "center",
+        gap: space.xs,
+        fontSize: text.sm,
+        color: color.textMuted,
+        margin: 0,
+    },
+    receiptIcon: { flex: "none", color: color.accent },
+    receiptIconRejected: { color: color.danger },
+    receiptMono: { fontFamily: font.mono },
+});
+function LockIcon() {
+    return (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", ...stylex.props(styles.headIconWarning), children: [_jsx("rect", { x: "4", y: "10", width: "16", height: "10", rx: "2" }), _jsx("path", { d: "M8 10V7a4 4 0 0 1 8 0v3" })] }));
+}
+function DecideIcon() {
+    return (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", ...stylex.props(styles.headIconAccent), children: [_jsx("path", { d: "M9 18h6M10 21h4" }), _jsx("path", { d: "M12 3a6 6 0 0 0-4 10.5c.7.6 1 1.5 1 2.5h6c0-1 .3-1.9 1-2.5A6 6 0 0 0 12 3Z" })] }));
+}
+function InfoIcon() {
+    return (_jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", ...stylex.props(styles.policyIcon), children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 8v4m0 4h.01" })] }));
+}
+function ReceiptIcon({ rejected }) {
+    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", ...stylex.props(styles.receiptIcon, rejected && styles.receiptIconRejected), children: _jsx("path", { d: "m5 13 4 4L19 7" }) }));
+}
+export function PermissionCard({ verb, subject, scope = "這個指令", policyHint, blockingLabel = "等你才能繼續", onReply, resolved, }) {
+    // Plain Enter is left to the focused button's own activation; only the
+    // card-level shortcuts are intercepted.
+    function onKeyDown(event) {
+        if (resolved)
+            return;
+        if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+            event.preventDefault();
+            onReply?.({ always: scope });
+        }
+        else if (event.key === "Escape") {
+            event.preventDefault();
+            onReply?.({ reject: true });
+        }
+    }
+    return (_jsxs("div", { role: "group", "aria-label": `${verb}:${subject}`, ...stylex.props(styles.card, !resolved && styles.permissionPending), children: [_jsxs("div", { ...stylex.props(styles.head), children: [_jsx(LockIcon, {}), _jsx("span", { ...stylex.props(styles.verb), children: verb }), _jsx("span", { ...stylex.props(styles.state, resolved ? styles.stateQuiet : styles.stateWarning), children: resolved ? "已回覆" : blockingLabel })] }), _jsx("p", { "aria-live": "polite", ...stylex.props(resolved ? styles.receipt : styles.srOnly), children: resolved != null && (_jsxs(_Fragment, { children: [_jsx(ReceiptIcon, { rejected: resolved.rejected }), resolved.text, " · ", _jsx("code", { ...stylex.props(styles.receiptMono), children: subject })] })) }), resolved ? null : (_jsxs("div", { ...stylex.props(styles.body), children: [_jsx("pre", { tabIndex: 0, role: "region", "aria-label": verb, ...stylex.props(styles.mono), children: subject }), _jsxs("div", { ...stylex.props(styles.actions), children: [_jsxs(Button, { onKeyDown: onKeyDown, onClick: () => onReply?.("once"), children: ["\u5141\u8A31\u4E00\u6B21", _jsx("kbd", { "aria-hidden": "true", ...stylex.props(styles.shortcut), children: "\u23CE" })] }), _jsxs(Button, { variant: "secondary", "aria-keyshortcuts": "Meta+Enter Control+Enter", onKeyDown: onKeyDown, onClick: () => onReply?.({ always: scope }), children: ["\u7E3D\u662F\u5141\u8A31", _jsx("kbd", { "aria-hidden": "true", ...stylex.props(styles.shortcut), children: "\u2318\u23CE" })] }), _jsxs(Button, { variant: "dangerGhost", "aria-keyshortcuts": "Escape", onKeyDown: onKeyDown, onClick: () => onReply?.({ reject: true }), children: ["\u62D2\u7D55", _jsx("kbd", { "aria-hidden": "true", ...stylex.props(styles.shortcut), children: "Esc" })] })] }), policyHint != null && (_jsxs("p", { ...stylex.props(styles.policy), children: [_jsx(InfoIcon, {}), policyHint] }))] }))] }));
+}
+function optionLabel(option) {
+    if (!option.recommended)
+        return option.label;
+    return (_jsxs(_Fragment, { children: [option.label, _jsx("span", { ...stylex.props(styles.recommended), children: "\u5EFA\u8B70" })] }));
+}
+export function DecisionCard({ title, blocks, blocking = false, deadlineLabel, submitLabel = "送出決定", recommendedLabel = "照建議", onAnswer, resolved, }) {
+    const base = useId();
+    const [answer, setAnswer] = useState({});
+    const missing = blocks.some((block) => {
+        if (block.kind === "markdown" || !block.required)
+            return false;
+        const value = answer[block.id];
+        return value == null || value.length === 0;
+    });
+    const recommended = {};
+    for (const block of blocks) {
+        if (block.kind !== "options")
+            continue;
+        const picks = block.options.filter((option) => option.recommended).map((option) => option.value);
+        if (picks.length === 0)
+            continue;
+        recommended[block.id] = block.multiple ? picks : picks[0];
+    }
+    const hasRecommendation = Object.keys(recommended).length > 0;
+    const merged = { ...answer, ...recommended };
+    const recommendationMissing = blocks.some((block) => {
+        if (block.kind === "markdown" || !block.required)
+            return false;
+        const value = merged[block.id];
+        return value == null || value.length === 0;
+    });
+    function set(id, value) {
+        setAnswer((current) => ({ ...current, [id]: value }));
+    }
+    return (_jsxs("div", { ...stylex.props(styles.card, !resolved && blocking && styles.decisionPending), children: [_jsxs("div", { ...stylex.props(styles.head), children: [_jsx(DecideIcon, {}), _jsx("span", { ...stylex.props(styles.verb), children: "\u6C7A\u5B9A" }), _jsx("span", { ...stylex.props(styles.state, resolved ? styles.stateQuiet : blocking ? styles.stateAccent : styles.stateQuiet), children: resolved ? "已決定" : blocking ? "等你才能繼續" : (deadlineLabel ?? "等你") })] }), _jsx("p", { "aria-live": "polite", ...stylex.props(resolved ? styles.receipt : styles.srOnly), children: resolved != null && (_jsxs(_Fragment, { children: [_jsx(ReceiptIcon, {}), resolved.text] })) }), resolved ? null : (_jsxs("div", { ...stylex.props(styles.body), children: [_jsx("p", { ...stylex.props(styles.question), children: title }), blocks.map((block) => {
+                        if (block.kind === "markdown") {
+                            return (_jsx("p", { ...stylex.props(styles.markdown), children: block.text }, block.id));
+                        }
+                        if (block.kind === "text") {
+                            return (_jsx("textarea", { rows: 1, "aria-label": block.label ?? title, placeholder: block.placeholder, required: block.required, value: answer[block.id] ?? "", onChange: (event) => set(block.id, event.currentTarget.value), ...stylex.props(styles.free) }, block.id));
+                        }
+                        const selected = answer[block.id];
+                        // label 沒給時,組名走 aria-label(視覺上不重複卡片標題)
+                        const groupLabel = block.label == null ? title : undefined;
+                        if (block.multiple) {
+                            const picks = Array.isArray(selected) ? selected : [];
+                            return (_jsxs("fieldset", { "aria-label": groupLabel, "aria-required": block.required || undefined, ...stylex.props(styles.options), children: [block.label != null && _jsx("legend", { ...stylex.props(styles.question), children: block.label }), block.options.map((option) => (_jsx(Checkbox, { name: `${base}${block.id}`, value: option.value, checked: picks.includes(option.value), onCheckedChange: (on) => set(block.id, on ? [...picks, option.value] : picks.filter((v) => v !== option.value)), label: optionLabel(option), description: option.description }, option.value)))] }, block.id));
+                        }
+                        return (_jsx(RadioGroup, { name: `${base}${block.id}`, legend: block.label, "aria-label": groupLabel, "aria-required": block.required || undefined, variant: "card", value: typeof selected === "string" ? selected : "", onValueChange: (value) => set(block.id, value), children: block.options.map((option) => (_jsx(Radio, { value: option.value, label: optionLabel(option), description: option.description }, option.value))) }, block.id));
+                    }), _jsxs("div", { ...stylex.props(styles.actions), children: [_jsx(Button, { disabled: missing, onClick: () => onAnswer?.(answer), children: submitLabel }), hasRecommendation && (_jsx(Button, { variant: "secondary", disabled: recommendationMissing, onClick: () => onAnswer?.(merged), children: recommendedLabel }))] })] }))] }));
+}

package/dist/components/kbd/Kbd.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentProps, type ReactNode } from "react";
+export declare const KbdToneContext: import("react").Context<"default" | "inverted">;
+export type KbdProps = ComponentProps<"kbd">;
+export declare function Kbd(props: KbdProps): import("react").JSX.Element;
+export type KbdGroupProps = Omit<ComponentProps<"span">, "children"> & {
+    keys: string[];
+    separator?: ReactNode;
+};
+export declare function KbdGroup({ keys, separator, ...props }: KbdGroupProps): import("react").JSX.Element;

package/dist/components/kbd/Kbd.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { Fragment, createContext, useContext } from "react";
+import { styled } from "../../lib/styled.js";
+import { color, font, radius, space } from "../../tokens.stylex.js";
+export const KbdToneContext = createContext("default");
+const styles = stylex.create({
+    key: {
+        display: "inline-grid",
+        placeItems: "center",
+        minWidth: "1.4rem",
+        height: "1.4rem",
+        paddingInline: space.xxs,
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderBottomColor: color.borderStrong,
+        borderRadius: radius.sm,
+        boxShadow: `0 1px 0 ${color.borderStrong}`,
+        fontFamily: font.mono,
+        fontSize: "0.72rem",
+        fontWeight: 500,
+        lineHeight: 1,
+        color: color.textMuted,
+    },
+    inverted: {
+        backgroundColor: "color-mix(in srgb, currentColor 16%, transparent)",
+        borderColor: "color-mix(in srgb, currentColor 28%, transparent)",
+        borderBottomColor: "color-mix(in srgb, currentColor 28%, transparent)",
+        boxShadow: "none",
+        color: "inherit",
+    },
+    combo: { display: "inline-flex", gap: "0.2rem", alignItems: "center" },
+    sequence: { display: "inline-flex", gap: space.xxs, alignItems: "center", color: color.textFaint },
+});
+export function Kbd(props) {
+    const tone = useContext(KbdToneContext);
+    return _jsx("kbd", { ...props, ...styled(props, styles.key, tone === "inverted" && styles.inverted) });
+}
+export function KbdGroup({ keys, separator, ...props }) {
+    return (_jsx("span", { ...props, ...styled(props, separator == null ? styles.combo : styles.sequence), children: keys.map((key, index) => (_jsxs(Fragment, { children: [index > 0 && separator, _jsx(Kbd, { children: key })] }, `${key}-${index}`))) }));
+}

package/dist/components/label/Field.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentProps, type ReactNode } from "react";
+export type FieldProps = Omit<ComponentProps<"div">, "children"> & {
+    label?: ReactNode;
+    help?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    optional?: boolean;
+    disabled?: boolean;
+    children: ReactNode;
+};
+export declare function Field({ label, help, error, required, optional, disabled, children, ...props }: FieldProps): import("react").JSX.Element;