@anyknown/ui 0.1.0

package/dist/components/data-table/DataTable.js

@@ -0,0 +1,256 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { reset } from "../../lib/styled.js";
+import { color, font, motion, radius, space, text } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const styles = stylex.create({
+    toolbar: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: space.md },
+    filter: { position: "relative", width: "min(18rem, 100%)" },
+    filterIcon: {
+        position: "absolute",
+        insetInlineStart: space.xs,
+        insetBlockStart: "50%",
+        translate: "0 -50%",
+        color: color.textFaint,
+        pointerEvents: "none",
+        display: "flex",
+    },
+    filterInput: {
+        width: "100%",
+        boxSizing: "border-box",
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: { default: color.border, ":hover": color.borderStrong, ":focus-visible": color.focusRing },
+        borderRadius: radius.md,
+        color: color.text,
+        fontFamily: font.body,
+        fontSize: text.sm,
+        paddingBlock: space.xxs,
+        paddingInlineStart: space.xl,
+        paddingInlineEnd: space.xs,
+        minHeight: "1.9rem",
+        transitionProperty: "border-color",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -1,
+        "::placeholder": { color: color.textFaint },
+    },
+    count: { fontFamily: font.mono, fontSize: "0.72rem", lineHeight: 1, color: color.textFaint },
+    wrap: {
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -2,
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.lg,
+        maxHeight: "20rem",
+        overflow: "auto",
+        marginTop: space.xs,
+    },
+    table: { width: "100%", borderCollapse: "collapse", fontFamily: font.body, fontSize: text.sm },
+    th: {
+        position: "sticky",
+        insetBlockStart: 0,
+        zIndex: 1,
+        backgroundColor: color.surface,
+        boxShadow: `inset 0 -1px ${color.border}`,
+        textAlign: "start",
+        padding: 0,
+        whiteSpace: "nowrap",
+    },
+    thCheck: { width: "2rem", paddingBlock: space.xxs, paddingInline: space.xs },
+    sort: {
+        display: "flex",
+        alignItems: "center",
+        gap: space.xxs,
+        width: "100%",
+        boxSizing: "border-box",
+        cursor: "pointer",
+        paddingBlock: space.xs,
+        paddingInline: space.xs,
+        fontFamily: font.mono,
+        fontSize: "0.68rem",
+        fontWeight: 600,
+        lineHeight: 1,
+        letterSpacing: "0.07em",
+        textTransform: "uppercase",
+        color: { default: color.textMuted, ":hover": color.text },
+        borderRadius: radius.sm,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -2,
+    },
+    plainHeader: {
+        display: "block",
+        paddingBlock: space.xs,
+        paddingInline: space.xs,
+        fontFamily: font.mono,
+        fontSize: "0.68rem",
+        fontWeight: 600,
+        lineHeight: 1,
+        letterSpacing: "0.07em",
+        textTransform: "uppercase",
+        color: color.textMuted,
+    },
+    arrow: { color: color.accent, fontSize: "0.6rem" },
+    row: {
+        backgroundColor: { default: "transparent", ":hover": color.bg },
+    },
+    rowSelected: { backgroundColor: color.accentSubtle },
+    td: {
+        borderTopWidth: 1,
+        borderTopStyle: "solid",
+        borderTopColor: color.border,
+        paddingBlock: space.xxs,
+        paddingInline: space.xs,
+        verticalAlign: "middle",
+        color: color.text,
+    },
+    tdCheck: { width: "2rem" },
+    mono: { fontFamily: font.mono, fontSize: "0.78rem", color: color.textMuted, whiteSpace: "nowrap" },
+    editable: { cursor: "text" },
+    empty: { color: color.textFaint },
+    cellInput: {
+        width: "100%",
+        fontFamily: font.body,
+        fontSize: text.sm,
+        boxShadow: `inset 0 0 0 2px ${color.focusRing}`,
+        borderRadius: radius.sm,
+        paddingInline: "0.2rem",
+        marginInline: "-0.2rem",
+        backgroundColor: color.surface,
+        color: color.text,
+    },
+    checkbox: {
+        accentColor: color.accent,
+        width: "0.85rem",
+        height: "0.85rem",
+        cursor: "pointer",
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: 1,
+    },
+    emptyRow: {
+        paddingBlock: space.xl,
+        paddingInline: space.md,
+        textAlign: "center",
+        color: color.textMuted,
+        borderTopWidth: 1,
+        borderTopStyle: "solid",
+        borderTopColor: color.border,
+    },
+    clear: {
+        color: color.accent,
+        cursor: "pointer",
+        textDecorationLine: "underline",
+        textUnderlineOffset: 2,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: 2,
+    },
+});
+function SearchIcon() {
+    return (_jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("path", { d: "m20 20-3.5-3.5" })] }));
+}
+// Entering edit mode is a user gesture (double-click), so moving focus into the
+// cell is expected — but not via autoFocus, which fires on mount page-wide.
+function focusOnMount(node) {
+    node?.focus();
+    node?.select();
+}
+function cellValue(column, row) {
+    return column.value?.(row) ?? "";
+}
+export function DataTable({ rows, total, rowKey, columns, label, filter = "", onFilterChange, filterPlaceholder = "過濾…", sort = null, onSortChange, selected, onSelectedChange, emptyState, onClearFilter, countLabel = (shown, total) => `${shown} / ${total}`, selectLabel = (key) => `選取 ${key}`, selectAllLabel = "全選", editLabel = (column, key) => `編輯 ${key} 的 ${column}`, clearLabel = "清除過濾", }) {
+    const [editing, setEditing] = useState(null);
+    const cancelling = useRef(false);
+    const [draft, setDraft] = useState("");
+    const selectAll = useRef(null);
+    const visible = rows;
+    const keys = visible.map(rowKey);
+    const selectedCount = selected ? keys.filter((key) => selected.has(key)).length : 0;
+    const allSelected = keys.length > 0 && selectedCount === keys.length;
+    useEffect(() => {
+        if (selectAll.current)
+            selectAll.current.indeterminate = selectedCount > 0 && !allSelected;
+    }, [selectedCount, allSelected]);
+    // A row that disappears while being edited would otherwise strand the draft
+    // and re-open with it when the row comes back. Adjusted during render rather
+    // than in an effect, so the stale cell never gets painted.
+    if (editing != null && !keys.includes(editing.key))
+        setEditing(null);
+    function startEdit(key, col, value) {
+        setEditing({ key, col });
+        setDraft(value);
+    }
+    // Returning focus to the cell keeps a keyboard user's place after Enter/Escape,
+    // but moving focus off the still-mounted input would fire its blur commit.
+    function leaveEdit(cell) {
+        cancelling.current = true;
+        setEditing(null);
+        cell?.focus();
+        cancelling.current = false;
+    }
+    const commit = useCallback((column, row, next, cell) => {
+        if (cancelling.current)
+            return;
+        cancelling.current = true;
+        setEditing(null);
+        cell?.focus();
+        cancelling.current = false;
+        if (next !== cellValue(column, row))
+            column.onCommit?.(row, next);
+    }, []);
+    function toggleSort(column) {
+        if (!column.sortable)
+            return;
+        if (sort?.col !== column.id)
+            onSortChange?.({ col: column.id, dir: "asc" });
+        else
+            onSortChange?.(sort.dir === "asc" ? { col: column.id, dir: "desc" } : null);
+    }
+    function toggleAll(checked) {
+        const next = new Set(selected ?? []);
+        for (const key of keys) {
+            if (checked)
+                next.add(key);
+            else
+                next.delete(key);
+        }
+        onSelectedChange?.(next);
+    }
+    return (_jsxs("div", { children: [onFilterChange != null && (_jsxs("div", { ...stylex.props(styles.toolbar), children: [_jsxs("div", { ...stylex.props(styles.filter), children: [_jsx("span", { ...stylex.props(styles.filterIcon), children: _jsx(SearchIcon, {}) }), _jsx("input", { type: "search", "aria-label": filterPlaceholder, placeholder: filterPlaceholder, value: filter, onChange: (event) => onFilterChange(event.currentTarget.value), ...stylex.props(styles.filterInput) })] }), _jsx("span", { "aria-live": "polite", ...stylex.props(styles.count), children: countLabel(visible.length, total ?? rows.length) })] })), _jsx("div", { tabIndex: 0, role: "region", "aria-label": label, ...stylex.props(styles.wrap), children: _jsxs("table", { "aria-label": label, ...stylex.props(styles.table), children: [_jsx("thead", { children: _jsxs("tr", { children: [selected != null && (_jsx("th", { scope: "col", ...stylex.props(styles.th, styles.thCheck), children: _jsx("input", { ref: selectAll, type: "checkbox", checked: allSelected, "aria-label": selectAllLabel, onChange: (event) => toggleAll(event.currentTarget.checked), ...stylex.props(styles.checkbox) }) })), columns.map((column) => (_jsx("th", { scope: "col", "aria-sort": sort?.col === column.id ? (sort.dir === "asc" ? "ascending" : "descending") : undefined, ...stylex.props(styles.th), children: column.sortable ? (_jsxs("button", { type: "button", onClick: () => toggleSort(column), ...stylex.props(reset.control, styles.sort), children: [column.header, sort?.col === column.id && (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.arrow), children: sort.dir === "asc" ? "▲" : "▼" }))] })) : (_jsx("span", { ...stylex.props(styles.plainHeader), children: column.header })) }, column.id)))] }) }), _jsx("tbody", { children: visible.length === 0 ? (_jsx("tr", { children: _jsxs("td", { colSpan: columns.length + (selected != null ? 1 : 0), ...stylex.props(styles.emptyRow), children: [emptyState?.(filter) ?? `找不到符合「${filter}」的資料。`, onClearFilter != null && (_jsxs(_Fragment, { children: [" ", _jsx("button", { type: "button", onClick: onClearFilter, ...stylex.props(reset.control, styles.clear), children: clearLabel })] }))] }) })) : (visible.map((row) => {
+                                const key = rowKey(row);
+                                const isSelected = selected?.has(key) ?? false;
+                                return (_jsxs("tr", { ...stylex.props(styles.row, isSelected && styles.rowSelected), children: [selected != null && (_jsx("td", { ...stylex.props(styles.td, styles.tdCheck), children: _jsx("input", { type: "checkbox", checked: isSelected, "aria-label": selectLabel(key), onChange: (event) => {
+                                                    const next = new Set(selected);
+                                                    if (event.currentTarget.checked)
+                                                        next.add(key);
+                                                    else
+                                                        next.delete(key);
+                                                    onSelectedChange?.(next);
+                                                }, ...stylex.props(styles.checkbox) }) })), columns.map((column) => {
+                                            const isEditing = editing?.key === key && editing.col === column.id;
+                                            const value = cellValue(column, row);
+                                            return (_jsx("td", { tabIndex: column.editable ? 0 : undefined, onDoubleClick: column.editable ? () => startEdit(key, column.id, value) : undefined, onKeyDown: column.editable && !isEditing
+                                                    ? (event) => {
+                                                        if (event.key !== "Enter" && event.key !== "F2")
+                                                            return;
+                                                        event.preventDefault();
+                                                        startEdit(key, column.id, value);
+                                                    }
+                                                    : undefined, ...stylex.props(styles.td, column.mono && styles.mono, column.editable && styles.editable), children: isEditing ? (_jsx("input", { ref: focusOnMount, "aria-label": editLabel(column.header, key), value: draft, onChange: (event) => setDraft(event.currentTarget.value), onBlur: (event) => commit(column, row, draft, event.currentTarget.closest("td")), onKeyDown: (event) => {
+                                                        const cell = event.currentTarget.closest("td");
+                                                        if (event.key === "Enter") {
+                                                            event.preventDefault();
+                                                            commit(column, row, draft, cell);
+                                                        }
+                                                        else if (event.key === "Escape") {
+                                                            event.preventDefault();
+                                                            leaveEdit(cell);
+                                                        }
+                                                    }, ...stylex.props(reset.control, styles.cellInput) })) : ((column.cell?.(row) ??
+                                                    (value === "" ? _jsx("span", { ...stylex.props(styles.empty), children: "\u2014" }) : value))) }, column.id));
+                                        })] }, key));
+                            })) })] }) })] }));
+}

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,36 @@
+import { type ReactElement, type ReactNode } from "react";
+export type DialogProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+};
+export declare function Dialog({ children, ...props }: DialogProps): import("react").JSX.Element;
+export declare function DialogTrigger({ children }: {
+    children: ReactElement;
+}): import("react").JSX.Element;
+export declare function DialogClose({ children }: {
+    children: ReactElement;
+}): import("react").JSX.Element;
+export declare function DialogActions({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export type DialogContentProps = {
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+};
+export declare function DialogContent({ title, description, children }: DialogContentProps): import("react").JSX.Element;
+export type ConfirmDialogProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: ReactElement;
+    title: ReactNode;
+    description?: ReactNode;
+    danger?: boolean;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm: () => void;
+};
+export declare function ConfirmDialog({ trigger, title, description, danger, confirmLabel, cancelLabel, onConfirm, ...props }: ConfirmDialogProps): import("react").JSX.Element;

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import * as stylex from "@stylexjs/stylex";
+import { useRef } from "react";
+import { color, font, radius, shadow, space, text } from "../../tokens.stylex.js";
+import { Button } from "../button/Button.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const grow = stylex.keyframes({
+    from: { opacity: 0, scale: 0.96 },
+    to: { opacity: 1, scale: 1 },
+});
+const styles = stylex.create({
+    backdrop: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 70,
+        backgroundColor: "rgba(24, 22, 19, 0.35)",
+        backdropFilter: "blur(2px)",
+    },
+    viewport: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 71,
+        display: "grid",
+        placeItems: "center",
+        padding: space.md,
+    },
+    popup: {
+        backgroundColor: color.surface,
+        color: color.text,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.lg,
+        boxShadow: shadow.popover,
+        padding: space.lg,
+        width: "min(24rem, calc(100vw - 2rem))",
+        maxHeight: "calc(100vh - 2rem)",
+        overflowY: "auto",
+        fontFamily: font.body,
+        animationName: { default: grow, [REDUCED]: "none" },
+        animationDuration: "160ms",
+        animationTimingFunction: "ease-out",
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -2,
+    },
+    title: {
+        fontFamily: font.display,
+        fontSize: text.lg,
+        fontWeight: 500,
+        lineHeight: text.leadingSnug,
+        margin: 0,
+        marginBottom: space.xxs,
+    },
+    description: { fontSize: text.sm, color: color.textMuted, margin: 0, marginBottom: space.md },
+    actions: { display: "flex", justifyContent: "flex-end", gap: space.xs, marginTop: space.md },
+});
+export function Dialog({ children, ...props }) {
+    return _jsx(BaseDialog.Root, { ...props, children: children });
+}
+export function DialogTrigger({ children }) {
+    return _jsx(BaseDialog.Trigger, { render: children });
+}
+export function DialogClose({ children }) {
+    return _jsx(BaseDialog.Close, { render: children });
+}
+export function DialogActions({ children }) {
+    return _jsx("div", { ...stylex.props(styles.actions), children: children });
+}
+export function DialogContent({ title, description, children }) {
+    return (_jsxs(BaseDialog.Portal, { children: [_jsx(BaseDialog.Backdrop, { ...stylex.props(styles.backdrop) }), _jsx(BaseDialog.Viewport, { ...stylex.props(styles.viewport), children: _jsxs(BaseDialog.Popup, { ...stylex.props(styles.popup), children: [_jsx(BaseDialog.Title, { ...stylex.props(styles.title), children: title }), description != null && (_jsx(BaseDialog.Description, { ...stylex.props(styles.description), children: description })), children] }) })] }));
+}
+export function ConfirmDialog({ trigger, title, description, danger = false, confirmLabel = "確認", cancelLabel = "取消", onConfirm, ...props }) {
+    const cancelRef = useRef(null);
+    return (_jsxs(AlertDialog.Root, { ...props, children: [trigger != null && _jsx(AlertDialog.Trigger, { render: trigger }), _jsxs(AlertDialog.Portal, { children: [_jsx(AlertDialog.Backdrop, { ...stylex.props(styles.backdrop) }), _jsx(AlertDialog.Viewport, { ...stylex.props(styles.viewport), children: _jsxs(AlertDialog.Popup, { initialFocus: danger ? cancelRef : undefined, ...stylex.props(styles.popup), children: [_jsx(AlertDialog.Title, { ...stylex.props(styles.title), children: title }), description != null && (_jsx(AlertDialog.Description, { ...stylex.props(styles.description), children: description })), _jsxs("div", { ...stylex.props(styles.actions), children: [_jsx(AlertDialog.Close, { render: _jsx(Button, { ref: cancelRef, variant: "ghost" }), children: cancelLabel }), _jsx(AlertDialog.Close, { render: _jsx(Button, { variant: danger ? "danger" : "primary" }), onClick: onConfirm, children: confirmLabel })] })] }) })] })] }));
+}

package/dist/components/diff-viewer/DiffViewer.d.ts

@@ -0,0 +1,13 @@
+export type DiffFile = {
+    path: string;
+    before?: string;
+    after?: string;
+    kind?: "modified" | "added" | "deleted";
+};
+export type DiffViewerProps = {
+    file: DiffFile;
+    collapseContext?: number;
+    wordDiff?: boolean;
+    foldLabel?: (count: number) => string;
+};
+export declare function DiffViewer({ file, collapseContext, wordDiff, foldLabel, }: DiffViewerProps): import("react").JSX.Element;

package/dist/components/diff-viewer/DiffViewer.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { Fragment, useId, useMemo, useState } from "react";
+import { reset } from "../../lib/styled.js";
+import { buildDiffRows, collapseRows, countChanges, diffKind } from "../../lib/diff.js";
+import { color, font, motion, radius, space, text } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const unfold = stylex.keyframes({
+    from: { opacity: 0, translate: "0 -3px" },
+    to: { opacity: 1, translate: "0 0" },
+});
+const styles = stylex.create({
+    diff: {
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.lg,
+        overflow: "hidden",
+    },
+    head: {
+        display: "flex",
+        alignItems: "center",
+        gap: space.xs,
+        borderBottomWidth: 1,
+        borderBottomStyle: "solid",
+        borderBottomColor: color.border,
+        paddingBlock: space.xs,
+        paddingInline: space.sm,
+        fontFamily: font.mono,
+        fontSize: "0.8rem",
+        fontWeight: 500,
+        lineHeight: 1,
+        color: color.text,
+    },
+    dot: { width: "0.5rem", height: "0.5rem", borderRadius: radius.full, flex: "none" },
+    dotModified: { backgroundColor: color.warning },
+    dotAdded: { backgroundColor: color.accent },
+    dotDeleted: { backgroundColor: color.danger },
+    stat: { marginInlineStart: "auto", fontSize: "0.72rem", color: color.textMuted },
+    plus: { color: color.success, fontWeight: 600 },
+    minus: { color: color.danger, fontWeight: 600 },
+    body: { overflowX: "auto", outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` } },
+    line: {
+        display: "flex",
+        fontFamily: font.mono,
+        fontSize: text.code,
+        lineHeight: 1.55,
+        whiteSpace: "pre",
+        minWidth: "max-content",
+    },
+    lineAdd: { backgroundColor: color.successSubtle },
+    lineDel: { backgroundColor: color.dangerSubtle },
+    number: {
+        flex: "none",
+        width: "2.6rem",
+        textAlign: "end",
+        paddingInlineEnd: space.xs,
+        color: color.textFaint,
+        userSelect: "none",
+        fontSize: "11px",
+        lineHeight: 1.85,
+    },
+    sign: { flex: "none", width: "1.1rem", textAlign: "center", userSelect: "none", color: color.textFaint },
+    signAdd: { color: color.success },
+    signDel: { color: color.danger },
+    code: { paddingInlineEnd: space.md },
+    mark: { backgroundColor: "transparent", color: "inherit", borderRadius: 2 },
+    markAdd: { backgroundColor: color.successHl },
+    markDel: { backgroundColor: color.dangerHl },
+    fold: {
+        display: "flex",
+        alignItems: "center",
+        gap: space.xs,
+        width: "100%",
+        boxSizing: "border-box",
+        cursor: "pointer",
+        backgroundColor: { default: color.bg, ":hover": color.accentSubtle },
+        borderBlockWidth: 1,
+        borderBlockStyle: "solid",
+        borderBlockColor: color.border,
+        paddingBlock: space.xxs,
+        paddingInline: space.sm,
+        fontFamily: font.mono,
+        fontSize: "0.74rem",
+        lineHeight: 1,
+        color: { default: color.textMuted, ":hover": color.text },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -2,
+    },
+    chevron: {
+        transitionProperty: "rotate",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        transitionTimingFunction: "ease-out",
+    },
+    chevronOpen: { rotate: "90deg" },
+    foldLines: {
+        overflow: "hidden",
+        animationName: { default: unfold, [REDUCED]: "none" },
+        animationDuration: "160ms",
+        animationTimingFunction: "ease-out",
+    },
+    srOnly: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap",
+        borderWidth: 0,
+    },
+});
+const KIND_LABEL = { modified: "已修改", added: "新增檔案", deleted: "已刪除" };
+const SIGN = { context: " ", add: "+", del: "−" };
+const PREFIX = { context: "", add: "新增行 ", del: "刪除行 " };
+function Line({ row }) {
+    return (_jsxs("div", { ...stylex.props(styles.line, row.type === "add" && styles.lineAdd, row.type === "del" && styles.lineDel), children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.number), children: row.beforeNo ?? "" }), _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.number), children: row.afterNo ?? "" }), _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.sign, row.type === "add" && styles.signAdd, row.type === "del" && styles.signDel), children: SIGN[row.type] }), _jsxs("span", { ...stylex.props(styles.code), children: [PREFIX[row.type] !== "" && _jsx("span", { ...stylex.props(styles.srOnly), children: PREFIX[row.type] }), row.segments.map((segment, index) => segment.marked ? (_jsx("mark", { ...stylex.props(styles.mark, row.type === "add" ? styles.markAdd : styles.markDel), children: segment.text }, index)) : (_jsx(Fragment, { children: segment.text }, index)))] })] }));
+}
+function Fold({ rows, label }) {
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen((value) => !value), ...stylex.props(reset.control, styles.fold), children: [_jsx("svg", { width: "10", height: "10", 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: "m9 6 6 6-6 6" }) }), label] }), _jsx("div", { id: id, hidden: !open, ...stylex.props(open && styles.foldLines), children: rows.map((row, index) => (_jsx(Line, { row: row }, index))) })] }));
+}
+export function DiffViewer({ file, collapseContext = 3, wordDiff = true, foldLabel = (count) => `⋯ ${count} 行未變動`, }) {
+    const kind = file.kind ?? diffKind(file.before, file.after);
+    const { blocks, added, removed } = useMemo(() => {
+        const rows = buildDiffRows(file.before ?? "", file.after ?? "", { wordDiff });
+        return { blocks: collapseRows(rows, collapseContext), ...countChanges(rows) };
+    }, [file.before, file.after, wordDiff, collapseContext]);
+    return (_jsxs("div", { ...stylex.props(styles.diff), children: [_jsxs("div", { ...stylex.props(styles.head), children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.dot, kind === "modified" && styles.dotModified, kind === "added" && styles.dotAdded, kind === "deleted" && styles.dotDeleted) }), _jsx("span", { ...stylex.props(styles.srOnly), children: KIND_LABEL[kind] }), file.path, _jsxs("span", { ...stylex.props(styles.stat), children: [_jsx("b", { ...stylex.props(styles.plus), children: `+${added}` }), " ", _jsx("b", { ...stylex.props(styles.minus), children: `−${removed}` })] })] }), _jsx("div", { tabIndex: 0, role: "region", "aria-label": `${file.path} 的變更`, ...stylex.props(styles.body), children: blocks.map((block, index) => block.kind === "fold" ? (_jsx(Fold, { rows: block.rows, label: foldLabel(block.rows.length) }, `${file.path}-${index}`)) : (block.rows.map((row, rowIndex) => _jsx(Line, { row: row }, `${index}-${rowIndex}`)))) })] }));
+}

package/dist/components/dropdown/DropdownMenu.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+export type DropdownItemProps = {
+    icon?: ReactNode;
+    shortcut?: string;
+    variant?: "danger";
+    disabled?: boolean;
+    closeOnClick?: boolean;
+    onSelect?: () => void;
+    children: ReactNode;
+};
+export declare function DropdownItem({ icon, shortcut, variant, onSelect, children, ...rest }: DropdownItemProps): import("react").JSX.Element;
+export type DropdownCheckboxItemProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    closeOnClick?: boolean;
+    children: ReactNode;
+};
+export declare function DropdownCheckboxItem({ children, ...rest }: DropdownCheckboxItemProps): import("react").JSX.Element;
+export type DropdownGroupProps = {
+    label?: string;
+    children: ReactNode;
+};
+export declare function DropdownGroup({ label, children }: DropdownGroupProps): import("react").JSX.Element;
+export declare function DropdownSeparator(): import("react").JSX.Element;
+export type DropdownSubProps = {
+    label: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    children: ReactNode;
+};
+export declare function DropdownSub({ label, icon, disabled, children }: DropdownSubProps): import("react").JSX.Element;
+export type DropdownMenuProps = {
+    trigger: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    children: ReactNode;
+};
+export declare function DropdownMenu({ trigger, open, defaultOpen, onOpenChange, side, align, children, }: DropdownMenuProps): import("react").JSX.Element;

package/dist/components/dropdown/DropdownMenu.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+import * as stylex from "@stylexjs/stylex";
+import { popupStyles } from "../../lib/popup.js";
+import { color, font, radius, space, text } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const styles = stylex.create({
+    popup: { minWidth: "14rem", padding: space.xxs, margin: 0 },
+    subPopup: { animationDuration: { default: "120ms", [REDUCED]: "0s" } },
+    item: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: "0.55rem",
+        borderRadius: radius.sm,
+        paddingBlock: "0.42rem",
+        paddingInline: space.xs,
+        fontFamily: font.body,
+        fontSize: text.sm,
+        color: color.text,
+        cursor: "pointer",
+        outline: "none",
+        userSelect: "none",
+    },
+    highlighted: {
+        backgroundColor: color.accentSubtle,
+        outline: `2px solid ${color.focusRing}`,
+        outlineOffset: -2,
+        "@media (forced-colors: active)": { outline: "2px solid Highlight" },
+    },
+    disabled: { opacity: 0.5, cursor: "not-allowed" },
+    danger: { color: color.danger },
+    icon: { color: color.textMuted, flex: "none", display: "flex" },
+    shortcut: {
+        marginInlineStart: "auto",
+        fontFamily: font.mono,
+        fontSize: "0.68rem",
+        lineHeight: 1,
+        color: color.textFaint,
+    },
+    arrow: { marginInlineStart: "auto", color: color.textFaint, display: "flex" },
+    tick: { width: "0.9rem", flex: "none", color: color.accent, display: "flex", justifyContent: "center" },
+    groupLabel: {
+        fontFamily: font.mono,
+        fontSize: "0.65rem",
+        fontWeight: 600,
+        lineHeight: 1,
+        letterSpacing: "0.08em",
+        textTransform: "uppercase",
+        color: color.textFaint,
+        paddingBlock: space.xxs,
+        paddingInline: space.xs,
+    },
+    separator: {
+        borderTopWidth: 1,
+        borderTopStyle: "solid",
+        borderTopColor: color.border,
+        marginBlock: space.xxs,
+        marginInline: space.xxs,
+    },
+});
+function ChevronRight() {
+    return (_jsx("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: _jsx("path", { d: "m9 6 6 6-6 6" }) }));
+}
+function Tick() {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: _jsx("path", { d: "m2.5 8.5 4 4 7-9" }) }));
+}
+const itemClassName = (variant) => (state) => stylex.props(styles.item, variant === "danger" && styles.danger, state.highlighted && styles.highlighted, state.disabled && styles.disabled).className ?? "";
+export function DropdownItem({ icon, shortcut, variant, onSelect, children, ...rest }) {
+    return (_jsxs(Menu.Item, { ...rest, "aria-keyshortcuts": shortcut, onClick: onSelect, className: itemClassName(variant), children: [icon != null && (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.icon), children: icon })), children, shortcut != null && (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.shortcut), children: shortcut }))] }));
+}
+export function DropdownCheckboxItem({ children, ...rest }) {
+    return (_jsxs(Menu.CheckboxItem, { ...rest, className: itemClassName(), children: [_jsx("span", { ...stylex.props(styles.tick), children: _jsx(Menu.CheckboxItemIndicator, { children: _jsx(Tick, {}) }) }), children] }));
+}
+export function DropdownGroup({ label, children }) {
+    return (_jsxs(Menu.Group, { children: [label != null && _jsx(Menu.GroupLabel, { ...stylex.props(styles.groupLabel), children: label }), children] }));
+}
+export function DropdownSeparator() {
+    return _jsx(Menu.Separator, { ...stylex.props(styles.separator) });
+}
+export function DropdownSub({ label, icon, disabled, children }) {
+    return (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { disabled: disabled, className: itemClassName(), children: [icon != null && (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.icon), children: icon })), label, _jsx("span", { ...stylex.props(styles.arrow), children: _jsx(ChevronRight, {}) })] }), _jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { align: "start", side: "inline-end", sideOffset: 2, alignOffset: -6, ...stylex.props(popupStyles.positioner), children: _jsx(Menu.Popup, { ...stylex.props(popupStyles.surface, styles.popup, styles.subPopup), children: children }) }) })] }));
+}
+export function DropdownMenu({ trigger, open, defaultOpen, onOpenChange, side = "bottom", align = "start", children, }) {
+    return (_jsxs(Menu.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(Menu.Trigger, { render: trigger }), _jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { side: side, align: align, sideOffset: 6, ...stylex.props(popupStyles.positioner), children: _jsx(Menu.Popup, { ...stylex.props(popupStyles.surface, styles.popup), children: children }) }) })] }));
+}