@anyknown/ui 0.1.0

package/dist/components/dropzone/Dropzone.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+export type Rejection = {
+    file: File;
+    reason: "size" | "type" | "count";
+};
+export type DropzoneProps = {
+    onFiles: (files: File[]) => void;
+    onReject?: (rejections: Rejection[]) => void;
+    maxSize?: number;
+    multiple?: boolean;
+    accept?: string;
+    disabled?: boolean;
+    title?: ReactNode;
+    hint?: ReactNode;
+    pickLabel?: string;
+    children?: ReactNode;
+};
+export declare function Dropzone({ onFiles, onReject, maxSize, multiple, accept, disabled, title, hint, pickLabel, children, }: DropzoneProps): import("react").JSX.Element;
+export type UploadJob = {
+    id: string;
+    name: string;
+    size: number;
+    state: "queued" | "encrypting" | "uploading" | "done" | "failed";
+    progress?: number;
+    error?: string;
+};
+export type UploadListProps = {
+    jobs: UploadJob[];
+    onCancel?: (id: string) => void;
+    label?: string;
+};
+export declare function UploadList({ jobs, onCancel, label }: UploadListProps): import("react").JSX.Element;

package/dist/components/dropzone/Dropzone.js

@@ -0,0 +1,242 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { useRef, useState } from "react";
+import { reset } from "../../lib/styled.js";
+import { formatBytes } from "../../lib/format.js";
+import { color, font, motion, radius, space, text } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const sew = stylex.keyframes({ to: { strokeDashoffset: -13 } });
+const styles = stylex.create({
+    zone: {
+        position: "relative",
+        display: "grid",
+        justifyItems: "center",
+        gap: space.xs,
+        borderRadius: radius.lg,
+        paddingBlock: space.xl,
+        paddingInline: space.lg,
+        textAlign: "center",
+        fontFamily: font.body,
+        backgroundColor: "transparent",
+        transitionProperty: "background-color",
+        transitionDuration: { default: "140ms", [REDUCED]: "0s" },
+    },
+    over: { backgroundColor: color.accentSubtle },
+    disabled: { opacity: 0.5, cursor: "not-allowed" },
+    stitch: { position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" },
+    seam: {
+        fill: "none",
+        stroke: color.borderStrong,
+        strokeWidth: 2,
+        strokeDasharray: "7 6",
+        transitionProperty: "stroke",
+        transitionDuration: { default: "140ms", [REDUCED]: "0s" },
+    },
+    seamOver: {
+        stroke: color.accent,
+        animationName: { default: sew, [REDUCED]: "none" },
+        animationDuration: "0.5s",
+        animationTimingFunction: "linear",
+        animationIterationCount: "infinite",
+    },
+    icon: {
+        color: color.textFaint,
+        transitionProperty: "color",
+        transitionDuration: { default: "140ms", [REDUCED]: "0s" },
+    },
+    iconOver: { color: color.accent },
+    title: { margin: 0, fontSize: text.sm, color: color.text },
+    hint: { color: color.textMuted, fontSize: "0.78rem" },
+    pick: {
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: { default: color.border, ":hover": color.borderStrong },
+        borderRadius: radius.md,
+        color: color.text,
+        fontFamily: font.body,
+        fontSize: "0.82rem",
+        fontWeight: 500,
+        lineHeight: 1,
+        paddingBlock: space.xxs,
+        paddingInline: space.xs,
+        cursor: "pointer",
+        marginTop: space.xxs,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: 1,
+    },
+    hiddenInput: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap",
+        borderWidth: 0,
+    },
+    jobs: {
+        listStyle: "none",
+        margin: 0,
+        padding: 0,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.lg,
+        backgroundColor: color.surface,
+        overflow: "hidden",
+        fontFamily: font.body,
+    },
+    empty: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap",
+        borderWidth: 0,
+    },
+    job: {
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 1fr) auto",
+        gap: `${space.xxs} ${space.xs}`,
+        paddingBlock: space.xs,
+        paddingInline: space.xs,
+        borderBottomWidth: 1,
+        borderBottomStyle: "solid",
+        borderBottomColor: color.border,
+        fontSize: text.sm,
+        color: color.text,
+        ":last-child": { borderBottomWidth: 0 },
+    },
+    jobError: { backgroundColor: color.dangerSubtle },
+    name: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+    cancel: {
+        cursor: "pointer",
+        color: { default: color.textMuted, ":hover": color.text },
+        backgroundColor: { default: "transparent", ":hover": color.accentSubtle },
+        width: "1.4rem",
+        height: "1.4rem",
+        display: "grid",
+        placeItems: "center",
+        borderRadius: radius.sm,
+        justifySelf: "end",
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+    },
+    track: {
+        gridColumn: "1 / -1",
+        height: "0.25rem",
+        borderRadius: radius.full,
+        backgroundColor: color.border,
+        overflow: "hidden",
+    },
+    fill: (percent) => ({ width: `${percent}%` }),
+    bar: {
+        display: "block",
+        height: "100%",
+        backgroundColor: color.accent,
+        borderRadius: radius.full,
+        transitionProperty: "width",
+        transitionDuration: { default: motion.normal, [REDUCED]: "0s" },
+        transitionTimingFunction: "linear",
+    },
+    status: { gridColumn: "1 / -1", fontSize: "0.75rem", color: color.textMuted },
+    statusError: { color: color.danger },
+});
+function UploadIcon({ over }) {
+    return (_jsxs("svg", { width: "30", height: "30", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", ...stylex.props(styles.icon, over && styles.iconOver), children: [_jsx("path", { d: "M4 16.2A4.5 4.5 0 0 1 6.6 8a6 6 0 0 1 11.6 1.6A4 4 0 0 1 18 17" }), _jsx("path", { d: "M12 12v9m0-9 3.5 3.5M12 12l-3.5 3.5" })] }));
+}
+function isFileDrag(event) {
+    return Array.from(event.dataTransfer?.types ?? []).includes("Files");
+}
+export function Dropzone({ onFiles, onReject, maxSize = Number.POSITIVE_INFINITY, multiple = true, accept, disabled = false, title = "把檔案拖到這裡上傳", hint = "加密在你的裝置上完成,才會離開瀏覽器。", pickLabel = "選擇檔案", children, }) {
+    const input = useRef(null);
+    const depth = useRef(0);
+    const [over, setOver] = useState(false);
+    function matchesAccept(file) {
+        if (!accept)
+            return true;
+        return accept
+            .split(",")
+            .map((pattern) => pattern.trim().toLowerCase())
+            .filter(Boolean)
+            .some((pattern) => {
+            if (pattern.startsWith("."))
+                return file.name.toLowerCase().endsWith(pattern);
+            if (pattern.endsWith("/*"))
+                return file.type.startsWith(pattern.slice(0, -1));
+            return file.type === pattern;
+        });
+    }
+    // Drops bypass the input's own `accept`/`multiple`, so both are enforced here.
+    function accepted(files) {
+        const passed = [];
+        const rejected = [];
+        for (const file of files) {
+            if (file.size > maxSize)
+                rejected.push({ file, reason: "size" });
+            else if (!matchesAccept(file))
+                rejected.push({ file, reason: "type" });
+            else if (!multiple && passed.length === 1)
+                rejected.push({ file, reason: "count" });
+            else
+                passed.push(file);
+        }
+        if (passed.length > 0)
+            onFiles(passed);
+        if (rejected.length > 0)
+            onReject?.(rejected);
+    }
+    return (_jsxs("div", { onDragEnter: (event) => {
+            if (!isFileDrag(event))
+                return;
+            event.preventDefault();
+            if (disabled)
+                return;
+            depth.current += 1;
+            setOver(true);
+        }, onDragOver: (event) => {
+            if (!isFileDrag(event))
+                return;
+            // Always prevented: without it the browser handles the drop itself and
+            // navigates the window to the file, taking the app's state with it.
+            event.preventDefault();
+            event.dataTransfer.dropEffect = disabled ? "none" : "copy";
+        }, onDragLeave: (event) => {
+            if (!isFileDrag(event))
+                return;
+            depth.current = Math.max(0, depth.current - 1);
+            if (depth.current === 0)
+                setOver(false);
+        }, onDrop: (event) => {
+            if (!isFileDrag(event))
+                return;
+            event.preventDefault();
+            depth.current = 0;
+            setOver(false);
+            if (disabled)
+                return;
+            accepted(Array.from(event.dataTransfer.files));
+        }, ...stylex.props(styles.zone, over && styles.over, disabled && styles.disabled), children: [_jsx("svg", { "aria-hidden": "true", ...stylex.props(styles.stitch), children: _jsx("rect", { x: "1.5", y: "1.5", width: "calc(100% - 3px)", height: "calc(100% - 3px)", rx: "11", ...stylex.props(styles.seam, over && styles.seamOver) }) }), _jsx(UploadIcon, { over: over }), children ?? (_jsxs(_Fragment, { children: [_jsx("p", { ...stylex.props(styles.title), children: title }), _jsx("small", { ...stylex.props(styles.hint), children: hint })] })), _jsx("button", { type: "button", disabled: disabled, onClick: () => input.current?.click(), ...stylex.props(styles.pick), children: pickLabel }), _jsx("input", { ref: input, type: "file", "aria-hidden": "true", tabIndex: -1, multiple: multiple, accept: accept, disabled: disabled, onChange: (event) => {
+                    accepted(Array.from(event.currentTarget.files ?? []));
+                    event.currentTarget.value = "";
+                }, ...stylex.props(styles.hiddenInput) })] }));
+}
+const JOB_STATE_LABEL = {
+    queued: "排隊中",
+    encrypting: "加密中",
+    uploading: "上傳中",
+    done: "完成",
+    failed: "失敗",
+};
+export function UploadList({ jobs, onCancel, label = "上傳中的檔案" }) {
+    return (_jsx("ul", { "aria-live": "polite", "aria-label": label, ...stylex.props(styles.jobs, jobs.length === 0 && styles.empty), children: jobs.map((job) => {
+            const failed = job.state === "failed";
+            return (_jsxs("li", { ...stylex.props(styles.job, failed && styles.jobError), children: [_jsx("span", { ...stylex.props(styles.name), children: job.name }), onCancel != null && job.state !== "done" && (_jsx("button", { type: "button", "aria-label": `取消上傳 ${job.name}`, onClick: () => onCancel(job.id), ...stylex.props(reset.control, styles.cancel), children: "\u2715" })), !failed && job.progress != null && (_jsx("div", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(job.progress), "aria-valuetext": `${job.name} ${JOB_STATE_LABEL[job.state]} ${Math.round(job.progress)}%`, ...stylex.props(styles.track), children: _jsx("b", { ...stylex.props(styles.bar, styles.fill(job.progress)) }) })), _jsx("span", { ...stylex.props(styles.status, failed && styles.statusError), children: failed
+                            ? (job.error ?? `超過上限(${formatBytes(job.size)}),沒有上傳。`)
+                            : `${JOB_STATE_LABEL[job.state]} · ${formatBytes(job.size)}` })] }, job.id));
+        }) }));
+}

package/dist/components/empty-state/EmptyState.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+export type EmptyStateProps = {
+    icon?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+export declare function EmptyState({ icon, title, description, action, headingLevel }: EmptyStateProps): import("react").JSX.Element;

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { color, font, radius, space, text } from "../../tokens.stylex.js";
+const styles = stylex.create({
+    root: {
+        display: "grid",
+        justifyItems: "center",
+        gap: space.xs,
+        textAlign: "center",
+        paddingBlock: space.xl,
+        paddingInline: space.lg,
+        borderWidth: 1,
+        borderStyle: "dashed",
+        borderColor: color.border,
+        borderRadius: radius.lg,
+        fontFamily: font.body,
+    },
+    icon: {
+        display: "grid",
+        placeItems: "center",
+        width: "2.6rem",
+        height: "2.6rem",
+        borderRadius: radius.full,
+        backgroundColor: color.accentSubtle,
+        color: color.accent,
+    },
+    title: {
+        fontFamily: font.display,
+        fontSize: text.base,
+        fontWeight: 500,
+        lineHeight: text.leadingSnug,
+        margin: 0,
+        color: color.text,
+    },
+    description: { margin: 0, fontSize: text.sm, color: color.textMuted, maxWidth: "18rem" },
+    action: { marginTop: space.xxs },
+});
+export function EmptyState({ icon, title, description, action, headingLevel = 3 }) {
+    const Heading = `h${headingLevel}`;
+    return (_jsxs("div", { ...stylex.props(styles.root), children: [icon != null && (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.icon), children: icon })), _jsx(Heading, { ...stylex.props(styles.title), children: title }), description != null && _jsx("p", { ...stylex.props(styles.description), children: description }), action != null && _jsx("div", { ...stylex.props(styles.action), children: action })] }));
+}

package/dist/components/file-row/FileRow.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+export type FileItem = {
+    kind: "file" | "folder";
+    name: string;
+    size?: number;
+    mtime?: string;
+    mime?: string;
+};
+export type FileRowAction = {
+    icon: ReactNode;
+    label: string;
+    onAction: () => void;
+};
+export type FileRowProps = {
+    item: FileItem;
+    selected?: boolean;
+    onSelectChange?: (selected: boolean) => void;
+    onOpen?: () => void;
+    actions?: FileRowAction[];
+    state?: "idle" | "encrypting" | "uploading";
+    progress?: number;
+    icon?: ReactNode;
+    selectLabel?: (name: string) => string;
+};
+export declare function FileRow({ item, selected, onSelectChange, onOpen, actions, state, progress, icon, selectLabel, }: FileRowProps): import("react").JSX.Element;
+export type FileListProps = {
+    label: string;
+    selectedCount?: number;
+    selectedLabel?: (count: number) => string;
+    children: ReactNode;
+};
+export declare function FileList({ label, selectedCount, selectedLabel, children, }: FileListProps): import("react").JSX.Element;

package/dist/components/file-row/FileRow.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { reset } from "../../lib/styled.js";
+import { formatBytes } 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 styles = stylex.create({
+    list: {
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.lg,
+        backgroundColor: color.surface,
+        overflow: "hidden",
+    },
+    row: {
+        display: "grid",
+        gridTemplateColumns: "2rem 1.5rem minmax(0, 1fr) 5.5rem 6.5rem 4.6rem",
+        alignItems: "center",
+        gap: space.xxs,
+        height: "2.6rem",
+        paddingInline: space.xxs,
+        borderBottomWidth: 1,
+        borderBottomStyle: "solid",
+        borderBottomColor: color.border,
+        fontFamily: font.body,
+        fontSize: text.sm,
+        color: color.text,
+        cursor: "default",
+        userSelect: "none",
+        backgroundColor: { default: "transparent", ":hover": color.accentSubtle },
+        "--ak-row-affordance": { default: "0", ":hover": "1", ":focus-within": "1" },
+        ":last-child": { borderBottomWidth: 0 },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -2,
+    },
+    selected: { backgroundColor: color.accentSubtle, "--ak-row-affordance": "1" },
+    busy: { color: color.textMuted, cursor: "progress" },
+    checkCell: { display: "grid", placeItems: "center" },
+    check: {
+        justifySelf: "center",
+        width: "1rem",
+        height: "1rem",
+        margin: 0,
+        accentColor: color.accent,
+        opacity: { default: "var(--ak-row-affordance, 0)", ":focus-visible": 1 },
+    },
+    icon: { color: color.textMuted },
+    folderIcon: { color: color.accent },
+    name: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+    size: {
+        fontFamily: font.mono,
+        fontSize: "0.78rem",
+        lineHeight: 1,
+        fontVariantNumeric: "tabular-nums",
+        color: color.textMuted,
+        textAlign: "end",
+    },
+    mtime: { fontSize: "0.78rem", color: color.textMuted },
+    actions: {
+        display: "flex",
+        justifyContent: "end",
+        gap: "0.15rem",
+        opacity: { default: "var(--ak-row-affordance, 0)", ":focus-within": 1 },
+    },
+    action: {
+        cursor: "pointer",
+        width: "1.6rem",
+        height: "1.6rem",
+        display: "grid",
+        placeItems: "center",
+        borderRadius: radius.sm,
+        color: { default: color.textMuted, ":hover": color.text },
+        backgroundColor: { default: "transparent", ":hover": color.surface },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+    },
+    count: {
+        fontFamily: font.body,
+        fontSize: "0.78rem",
+        color: color.textMuted,
+        margin: 0,
+        marginTop: space.xxs,
+    },
+    busyCell: {
+        gridColumn: "4 / 7",
+        display: "flex",
+        alignItems: "center",
+        gap: space.xs,
+        fontSize: "0.75rem",
+    },
+    track: {
+        flex: 1,
+        height: "0.2rem",
+        borderRadius: radius.full,
+        backgroundColor: color.border,
+        overflow: "hidden",
+    },
+    fill: (percent) => ({ width: `${percent}%` }),
+    bar: { display: "block", height: "100%", backgroundColor: color.accent },
+    spinner: {
+        width: 12,
+        height: 12,
+        flex: "none",
+        borderWidth: 1.5,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderTopColor: color.accent,
+        borderRadius: radius.full,
+        animationName: { default: spin, [REDUCED]: "none" },
+        animationDuration: "1.2s",
+        animationTimingFunction: "linear",
+        animationIterationCount: "infinite",
+    },
+});
+function FolderIcon() {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", ...stylex.props(styles.icon, styles.folderIcon), children: _jsx("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z" }) }));
+}
+function FileIcon() {
+    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", ...stylex.props(styles.icon), children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z" }), _jsx("path", { d: "M14 2v6h6M8 13h8M8 17h5" })] }));
+}
+export function FileRow({ item, selected = false, onSelectChange, onOpen, actions = [], state = "idle", progress = 0, icon, selectLabel = (name) => `選取 ${name}`, }) {
+    const busy = state !== "idle";
+    function onKeyDown(event) {
+        // Only the row's own keys; anything bubbling from the checkbox or an
+        // action button belongs to that control.
+        if (busy || event.target !== event.currentTarget)
+            return;
+        if (event.key === " ") {
+            event.preventDefault();
+            onSelectChange?.(!selected);
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            onOpen?.();
+        }
+    }
+    if (busy) {
+        return (_jsxs("div", { role: "row", tabIndex: 0, "aria-busy": "true", "aria-selected": selected, ...stylex.props(styles.row, styles.busy), children: [_jsx("span", { role: "gridcell", "aria-label": selectLabel(item.name) }), _jsx("span", { role: "gridcell", "aria-hidden": "true", children: icon ?? (item.kind === "folder" ? _jsx(FolderIcon, {}) : _jsx(FileIcon, {})) }), _jsx("span", { role: "gridcell", ...stylex.props(styles.name), children: item.name }), _jsx("span", { role: "gridcell", "aria-colspan": 3, ...stylex.props(styles.busyCell), children: state === "encrypting" ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.spinner) }), "\u52A0\u5BC6\u4E2D"] })) : (_jsxs(_Fragment, { children: [_jsx("span", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(progress), "aria-valuetext": `${item.name} 上傳中 ${Math.round(progress)}%`, ...stylex.props(styles.track), children: _jsx("b", { ...stylex.props(styles.bar, styles.fill(progress)) }) }), `${Math.round(progress)}%`] })) })] }));
+    }
+    return (_jsxs("div", { role: "row", tabIndex: 0, "aria-selected": selected, onClick: (event) => {
+            // The second click of a double-click must not undo the first's toggle.
+            if (event.detail > 1)
+                return;
+            onSelectChange?.(!selected);
+        }, onDoubleClick: () => onOpen?.(), onKeyDown: onKeyDown, ...stylex.props(styles.row, selected && styles.selected), children: [_jsx("span", { role: "gridcell", ...stylex.props(styles.checkCell), children: _jsx("input", { type: "checkbox", checked: selected, "aria-label": selectLabel(item.name), onClick: (event) => event.stopPropagation(), onChange: (event) => onSelectChange?.(event.currentTarget.checked), ...stylex.props(styles.check) }) }), _jsx("span", { role: "gridcell", "aria-hidden": "true", children: icon ?? (item.kind === "folder" ? _jsx(FolderIcon, {}) : _jsx(FileIcon, {})) }), _jsx("span", { role: "gridcell", ...stylex.props(styles.name), children: item.name }), _jsx("span", { role: "gridcell", ...stylex.props(styles.size), children: item.kind === "folder" || item.size == null ? "—" : formatBytes(item.size) }), _jsx("span", { role: "gridcell", ...stylex.props(styles.mtime), children: item.mtime ?? "" }), _jsx("span", { role: "gridcell", ...stylex.props(styles.actions), children: actions.map((action) => (_jsx("button", { type: "button", "aria-label": action.label, onClick: (event) => {
+                        event.stopPropagation();
+                        action.onAction();
+                    }, ...stylex.props(reset.control, styles.action), children: action.icon }, action.label))) })] }));
+}
+export function FileList({ label, selectedCount, selectedLabel = (count) => `已選取 ${count} 個項目`, children, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { role: "grid", "aria-label": label, "aria-multiselectable": "true", ...stylex.props(styles.list), children: children }), selectedCount != null && (_jsx("p", { "aria-live": "polite", ...stylex.props(styles.count), children: selectedCount > 0 ? selectedLabel(selectedCount) : "" }))] }));
+}

package/dist/components/handoff-receipt/HandoffReceipt.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+export type HandoffReason = "soft-threshold" | "hard-limit" | "state-transition";
+export type HandoffReceiptProps = {
+    at: string;
+    ctxPercent: number;
+    reason?: HandoffReason;
+    memory: {
+        count: number;
+        items?: string[];
+    };
+    ledgerCount: number;
+    handoffSummary?: ReactNode;
+    defaultOpen?: boolean;
+};
+export declare function HandoffReceipt({ at, ctxPercent, reason, memory, ledgerCount, handoffSummary, defaultOpen, }: HandoffReceiptProps): import("react").JSX.Element;