@anyknown/ui 0.1.0

package/dist/components/code-block/CodeBlock.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { reset, styled } from "../../lib/styled.js";
+import { useCopy } from "../../lib/useCopy.js";
+import { color, font, motion, radius, space, text } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const blink = stylex.keyframes({ "50%": { opacity: 0 } });
+const styles = stylex.create({
+    block: {
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.lg,
+        backgroundColor: color.surface,
+        overflow: "hidden",
+    },
+    head: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: space.xs,
+        paddingBlock: space.xxs,
+        paddingInlineStart: space.sm,
+        paddingInlineEnd: space.xxs,
+        borderBottomWidth: 1,
+        borderBottomStyle: "solid",
+        borderBottomColor: color.border,
+    },
+    lang: {
+        fontFamily: font.mono,
+        fontSize: "0.68rem",
+        lineHeight: text.leadingSnug,
+        letterSpacing: "0.04em",
+        color: color.textFaint,
+    },
+    copy: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: space.xxs,
+        fontFamily: font.body,
+        fontSize: text.xs,
+        color: { default: color.textMuted, ":hover": color.text },
+        backgroundColor: {
+            default: "transparent",
+            ":hover": `color-mix(in srgb, ${color.border} 40%, ${color.surface})`,
+        },
+        paddingBlock: space.xxs,
+        paddingInline: space.xxs,
+        borderRadius: radius.sm,
+        cursor: "pointer",
+        transitionProperty: "background-color, color",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -1,
+    },
+    copied: { color: color.accent },
+    pre: {
+        margin: 0,
+        paddingBlock: space.xs,
+        paddingInline: space.sm,
+        overflowX: "auto",
+        fontFamily: font.mono,
+        fontSize: text.code,
+        lineHeight: text.leadingNormal,
+        color: color.text,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -2,
+    },
+    code: { font: "inherit" },
+    cursor: {
+        display: "inline-block",
+        width: 1,
+        height: "1.05em",
+        backgroundColor: color.text,
+        verticalAlign: "text-bottom",
+        marginInlineStart: 1,
+        animationName: { default: blink, [REDUCED]: "none" },
+        animationDuration: "1s",
+        animationTimingFunction: "steps(2, start)",
+        animationIterationCount: "infinite",
+    },
+    inline: {
+        fontFamily: font.mono,
+        fontSize: text.code,
+        lineHeight: text.leadingNormal,
+        backgroundColor: `color-mix(in srgb, ${color.border} 40%, ${color.surface})`,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.sm,
+        paddingInline: "0.3em",
+    },
+});
+function CopyIcon() {
+    return (_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [_jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }), _jsx("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })] }));
+}
+export function CodeBlock({ lang, code, streaming = false, copyLabel = "複製", copiedLabel = "已複製 ✓", }) {
+    const { copied, copy } = useCopy();
+    return (_jsxs("div", { ...stylex.props(styles.block), children: [_jsxs("div", { ...stylex.props(styles.head), children: [_jsx("span", { ...stylex.props(styles.lang), children: lang ?? "" }), _jsxs("button", { type: "button", onClick: () => copy(code), ...stylex.props(reset.control, styles.copy, copied && styles.copied), children: [!copied && _jsx(CopyIcon, {}), copied ? copiedLabel : copyLabel] })] }), _jsx("pre", { tabIndex: 0, role: "region", "aria-label": lang ? `${lang} 程式碼` : "程式碼", ...stylex.props(styles.pre), children: _jsxs("code", { ...stylex.props(styles.code), children: [code, streaming && _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.cursor) })] }) })] }));
+}
+export function InlineCode(props) {
+    return _jsx("code", { ...props, ...styled(props, styles.inline) });
+}

package/dist/components/composer/Composer.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+export type SourceRef = {
+    id: string;
+    label: string;
+    kind: string;
+};
+export type SlashCommand = {
+    id: string;
+    label: string;
+    kind?: string;
+};
+export type ComposerProps = {
+    placeholder?: string;
+    hint?: ReactNode;
+    models?: string[];
+    model?: string;
+    onModelChange?: (model: string) => void;
+    sources?: (query: string) => Promise<SourceRef[]>;
+    commands?: SlashCommand[];
+    micActive?: boolean;
+    onMicToggle?: () => void;
+    onSubmit: (text: string, refs: SourceRef[]) => void;
+    label?: string;
+    sourcesLabel?: string;
+    commandsLabel?: string;
+};
+export declare function Composer({ placeholder, hint, models, model, onModelChange, sources, commands, micActive, onMicToggle, onSubmit, label, sourcesLabel, commandsLabel, }: ComposerProps): import("react").JSX.Element;

package/dist/components/composer/Composer.js

@@ -0,0 +1,278 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { useEffect, useId, useLayoutEffect, useRef, useState, } from "react";
+import { reset } from "../../lib/styled.js";
+import { popupStyles } from "../../lib/popup.js";
+import { color, font, motion, radius, space, text } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const styles = stylex.create({
+    composer: {
+        position: "relative",
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: { default: color.border, ":focus-within": color.accent },
+        borderRadius: radius.lg,
+        paddingBlock: space.xs,
+        paddingInline: space.xs,
+        display: "grid",
+        gap: space.xxs,
+        transitionProperty: "border-color",
+        transitionDuration: { default: "140ms", [REDUCED]: "0s" },
+        outline: { default: "none", ":focus-within": `1px solid ${color.accent}` },
+        outlineOffset: -1,
+    },
+    textarea: {
+        width: "100%",
+        boxSizing: "border-box",
+        fontFamily: font.body,
+        fontSize: text.sm,
+        lineHeight: text.leadingNormal,
+        color: color.text,
+        paddingBlock: space.xxs,
+        paddingInline: space.xxs,
+        resize: "none",
+        fieldSizing: "content",
+        maxHeight: "11rem",
+        overflowY: "auto",
+        whiteSpace: "pre-wrap",
+        overflowWrap: "anywhere",
+        "::placeholder": { color: color.textFaint },
+    },
+    bar: { display: "flex", alignItems: "center", gap: space.xxs },
+    iconButton: {
+        display: "grid",
+        placeItems: "center",
+        width: "1.9rem",
+        height: "1.9rem",
+        borderRadius: radius.sm,
+        color: { default: color.textMuted, ":hover": color.text },
+        backgroundColor: { default: "transparent", ":hover": color.accentSubtle },
+        cursor: "pointer",
+        transitionProperty: "background-color, color",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -1,
+    },
+    iconButtonOn: { backgroundColor: color.accentSubtle, color: color.accent },
+    spacer: { flex: 1 },
+    model: {
+        fontFamily: font.body,
+        fontSize: "0.78rem",
+        fontWeight: 500,
+        lineHeight: 1,
+        color: color.textMuted,
+        backgroundColor: "transparent",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: { default: "transparent", ":hover": color.border },
+        borderRadius: radius.sm,
+        paddingBlock: space.xxs,
+        paddingInline: space.xxs,
+        cursor: "pointer",
+        transitionProperty: "border-color",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -1,
+    },
+    send: {
+        display: "grid",
+        placeItems: "center",
+        width: "1.9rem",
+        height: "1.9rem",
+        borderRadius: radius.sm,
+        backgroundColor: { default: color.accent, ":disabled": color.border },
+        color: { default: color.accentText, ":disabled": color.textFaint },
+        cursor: { default: "pointer", ":disabled": "not-allowed" },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: 1,
+    },
+    popup: {
+        position: "absolute",
+        zIndex: 10,
+        bottom: `calc(100% + ${space.xxs})`,
+        insetInlineStart: space.xs,
+        width: `min(20rem, calc(100% - ${space.md}))`,
+        transformOrigin: "bottom",
+    },
+    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,
+    },
+    list: { listStyle: "none", margin: 0, padding: space.xxs },
+    option: {
+        display: "flex",
+        alignItems: "center",
+        gap: space.xs,
+        borderRadius: radius.sm,
+        paddingBlock: "0.42rem",
+        paddingInline: space.xs,
+        fontFamily: font.body,
+        fontSize: text.sm,
+        color: color.text,
+        cursor: "pointer",
+    },
+    optionActive: {
+        backgroundColor: color.accentSubtle,
+        outline: `2px solid ${color.focusRing}`,
+        outlineOffset: -2,
+        "@media (forced-colors: active)": { outline: "2px solid Highlight" },
+    },
+    kind: { color: color.textFaint, fontSize: "0.72rem", marginInlineStart: "auto" },
+    hint: {
+        fontFamily: font.body,
+        fontSize: "0.72rem",
+        color: color.textFaint,
+        margin: 0,
+        marginInline: space.xxs,
+    },
+});
+const AT_PATTERN = /(^|\s)@(\S*)$/;
+const SLASH_PATTERN = /^\/(\S*)$/;
+function AtIcon() {
+    return (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8" })] }));
+}
+function SlashIcon() {
+    return (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: _jsx("path", { d: "m16 4-8 16" }) }));
+}
+function MicIcon() {
+    return (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [_jsx("rect", { x: "9", y: "2", width: "6", height: "12", rx: "3" }), _jsx("path", { d: "M5 10a7 7 0 0 0 14 0" }), _jsx("path", { d: "M12 17v4" })] }));
+}
+function SendIcon() {
+    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [_jsx("path", { d: "M12 19V5" }), _jsx("path", { d: "m5 12 7-7 7 7" })] }));
+}
+export function Composer({ placeholder = "跟 agent 說話", hint, models, model, onModelChange, sources, commands, micActive = false, onMicToggle, onSubmit, label = "訊息", sourcesLabel = "@ 來源", commandsLabel = "/ 指令", }) {
+    const listId = useId();
+    const suggestible = sources != null || commands != null;
+    const textarea = useRef(null);
+    const [value, setValue] = useState("");
+    const [caret, setCaret] = useState(0);
+    const [items, setItems] = useState([]);
+    const [rawActive, setActive] = useState(0);
+    const [picked, setPicked] = useState([]);
+    const [dismissed, setDismissed] = useState(false);
+    const pendingCaret = useRef(null);
+    const latestSources = useRef(sources);
+    // Held in a ref so an inline `sources` prop doesn't refetch on every parent
+    // render; assigned in an effect that is declared before the fetch below, so
+    // it is already current when that one runs.
+    useEffect(() => {
+        latestSources.current = sources;
+    });
+    // The caret lives in state so the @/-slash mode can be derived from it, but
+    // the DOM caret has to be moved explicitly or the browser parks it at the end.
+    useLayoutEffect(() => {
+        if (pendingCaret.current == null)
+            return;
+        textarea.current?.setSelectionRange(pendingCaret.current, pendingCaret.current);
+        pendingCaret.current = null;
+    });
+    const before = value.slice(0, caret);
+    const atMatch = AT_PATTERN.exec(before);
+    const slashMatch = SLASH_PATTERN.exec(before);
+    const mode = atMatch ? "sources" : slashMatch ? "commands" : null;
+    const query = atMatch?.[2] ?? slashMatch?.[1] ?? "";
+    useEffect(() => {
+        if (mode !== "sources" || latestSources.current == null)
+            return;
+        let cancelled = false;
+        latestSources
+            .current(query)
+            .then((result) => {
+            if (!cancelled) {
+                setItems(result);
+                setActive(0);
+            }
+        })
+            .catch(() => {
+            if (!cancelled)
+                setItems([]);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [mode, query]);
+    const options = mode === "commands"
+        ? (commands ?? [])
+            .filter((command) => command.label.toLowerCase().includes(query.toLowerCase()))
+            .map((command) => ({ id: command.id, label: command.label, kind: command.kind ?? "指令" }))
+        : mode === "sources"
+            ? items
+            : [];
+    const open = mode != null && options.length > 0 && !dismissed;
+    const active = options.length === 0 ? 0 : Math.min(rawActive, options.length - 1);
+    const canSend = value.trim().length > 0;
+    function moveCaret(next, position) {
+        setValue(next);
+        setCaret(position);
+        pendingCaret.current = position;
+    }
+    function complete(option) {
+        const tail = value.slice(caret);
+        // Function replacers: a label containing $&, $1 … must go in literally.
+        const head = mode === "commands"
+            ? before.replace(SLASH_PATTERN, () => `/${option.label} `)
+            : before.replace(AT_PATTERN, (_, lead) => `${lead}@${option.label} `);
+        moveCaret(head + tail, head.length);
+        if (mode === "sources")
+            setPicked((refs) => [...refs, option]);
+        textarea.current?.focus();
+    }
+    function submit() {
+        if (!canSend)
+            return;
+        // A ref the user deleted again is not a ref any more.
+        onSubmit(value, picked.filter((ref) => value.includes(`@${ref.label}`)));
+        setValue("");
+        setPicked([]);
+        setCaret(0);
+        setDismissed(false);
+    }
+    function onKeyDown(event) {
+        // Enter while an IME candidate is open commits the candidate, not the message.
+        if (event.nativeEvent.isComposing)
+            return;
+        if (open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+            event.preventDefault();
+            setActive((index) => (index + (event.key === "ArrowDown" ? 1 : options.length - 1)) % options.length);
+            return;
+        }
+        if (open && event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            complete(options[active]);
+            return;
+        }
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            submit();
+            return;
+        }
+        if (event.key === "Escape" && open) {
+            event.preventDefault();
+            setDismissed(true);
+        }
+    }
+    function insertMarker(marker) {
+        const position = textarea.current?.selectionStart ?? value.length;
+        const lead = position > 0 && !/\s$/.test(value.slice(0, position)) ? " " : "";
+        const next = `${value.slice(0, position)}${lead}${marker}${value.slice(position)}`;
+        setDismissed(false);
+        moveCaret(next, position + lead.length + marker.length);
+        textarea.current?.focus();
+    }
+    return (_jsxs("div", { ...stylex.props(styles.composer), children: [open && (_jsxs("div", { ...stylex.props(popupStyles.surface, styles.popup), children: [_jsx("div", { ...stylex.props(styles.groupLabel), children: mode === "commands" ? commandsLabel : sourcesLabel }), _jsx("ul", { id: listId, role: "listbox", "aria-label": mode === "commands" ? commandsLabel : sourcesLabel, ...stylex.props(styles.list), children: options.map((option, index) => (_jsxs("li", { id: `${listId}-${index}`, role: "option", "aria-selected": index === active, onMouseDown: (event) => {
+                                event.preventDefault();
+                                complete(option);
+                            }, ...stylex.props(styles.option, index === active && styles.optionActive), children: [option.label, _jsx("small", { ...stylex.props(styles.kind), children: option.kind })] }, option.id))) })] })), _jsx("textarea", { ref: textarea, rows: 1, "aria-label": label, role: suggestible ? "combobox" : undefined, "aria-expanded": suggestible ? open : undefined, "aria-autocomplete": suggestible ? "list" : undefined, "aria-haspopup": suggestible ? "listbox" : undefined, "aria-controls": open ? listId : undefined, "aria-activedescendant": open ? `${listId}-${active}` : undefined, placeholder: placeholder, value: value, onChange: (event) => {
+                    setValue(event.currentTarget.value);
+                    setCaret(event.currentTarget.selectionStart ?? event.currentTarget.value.length);
+                    setDismissed(false);
+                }, onKeyUp: (event) => setCaret(event.currentTarget.selectionStart ?? 0), onClick: (event) => setCaret(event.currentTarget.selectionStart ?? 0), onKeyDown: onKeyDown, ...stylex.props(reset.control, styles.textarea) }), _jsxs("div", { ...stylex.props(styles.bar), children: [_jsx("button", { type: "button", "aria-label": `加入來源(@)`, "aria-expanded": mode === "sources" && open, onClick: () => insertMarker("@"), ...stylex.props(reset.control, styles.iconButton), children: _jsx(AtIcon, {}) }), _jsx("button", { type: "button", "aria-label": "\u6307\u4EE4(/)", "aria-expanded": mode === "commands" && open, onClick: () => insertMarker("/"), ...stylex.props(reset.control, styles.iconButton), children: _jsx(SlashIcon, {}) }), _jsx("span", { ...stylex.props(styles.spacer) }), models != null && models.length > 0 && (_jsx("select", { "aria-label": "\u6A21\u578B", value: model, onChange: (event) => onModelChange?.(event.currentTarget.value), ...stylex.props(styles.model), children: models.map((option) => (_jsx("option", { value: option, children: option }, option))) })), onMicToggle != null && (_jsx("button", { type: "button", "aria-label": "\u8A9E\u97F3\u8F38\u5165", "aria-pressed": micActive, onClick: onMicToggle, ...stylex.props(reset.control, styles.iconButton, micActive && styles.iconButtonOn), children: _jsx(MicIcon, {}) })), _jsx("button", { type: "button", "aria-label": "\u9001\u51FA", disabled: !canSend, onClick: submit, ...stylex.props(reset.control, styles.send), children: _jsx(SendIcon, {}) })] }), hint != null && _jsx("p", { ...stylex.props(styles.hint), children: hint })] }));
+}

package/dist/components/data-table/DataTable.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+export type SortState = {
+    col: string;
+    dir: "asc" | "desc";
+} | null;
+export type DataTableColumn<Row> = {
+    id: string;
+    header: string;
+    mono?: boolean;
+    sortable?: boolean;
+    editable?: boolean;
+    value?: (row: Row) => string;
+    cell?: (row: Row) => ReactNode;
+    onCommit?: (row: Row, next: string) => void;
+};
+export type DataTableProps<Row> = {
+    rows: Row[];
+    /** Total before filtering, for the "N / M" readout. Defaults to `rows.length`. */
+    total?: number;
+    rowKey: (row: Row) => string;
+    columns: DataTableColumn<Row>[];
+    label: string;
+    filter?: string;
+    onFilterChange?: (filter: string) => void;
+    filterPlaceholder?: string;
+    sort?: SortState;
+    onSortChange?: (sort: SortState) => void;
+    selected?: Set<string>;
+    onSelectedChange?: (selected: Set<string>) => void;
+    emptyState?: (query: string) => ReactNode;
+    onClearFilter?: () => void;
+    countLabel?: (shown: number, total: number) => string;
+    selectLabel?: (key: string) => string;
+    selectAllLabel?: string;
+    editLabel?: (column: string, key: string) => string;
+    clearLabel?: string;
+};
+export declare function DataTable<Row>({ rows, total, rowKey, columns, label, filter, onFilterChange, filterPlaceholder, sort, onSortChange, selected, onSelectedChange, emptyState, onClearFilter, countLabel, selectLabel, selectAllLabel, editLabel, clearLabel, }: DataTableProps<Row>): import("react").JSX.Element;