@fromsko/chat-ui 0.0.0-stage → 0.1.6

package/lib/hooks/useQueuedPrompts.js

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { decideSubmit, enqueuePrompt, flushEdge, movePrompt, prependPrompt, removePrompt, nextQueuedId, MAX_QUEUED_PROMPTS, QUEUED_FULL_NOTICE, } from "../domain/queue";
+import { LS_KEYS, loadJSON, saveJSON } from "../utils/storage";
+export { decideSubmit, flushEdge, enqueuePrompt, removePrompt, movePrompt, takeHeadPrompt, prependPrompt, nextQueuedId, MAX_QUEUED_PROMPTS, QUEUED_FULL_NOTICE, } from "../domain/queue";
+export function useQueuedPrompts(params) {
+    const { conversationId, status, onSend, onStop, onNotice } = params;
+    const [parked, setParked] = useState(() => loadJSON(LS_KEYS.queuedPrompts, {}));
+    const edgeRef = useRef({ conversationId, status });
+    const liveRef = useRef(onSend);
+    liveRef.current = onSend;
+    const items = parked[conversationId] ?? [];
+    const itemsRef = useRef(items);
+    itemsRef.current = items;
+    const commit = useCallback((cid, next) => {
+        setParked((prev) => {
+            const table = { ...prev };
+            if (next.length === 0)
+                delete table[cid];
+            else
+                table[cid] = next;
+            saveJSON(LS_KEYS.queuedPrompts, table);
+            return table;
+        });
+    }, []);
+    useEffect(() => {
+        const prev = edgeRef.current;
+        edgeRef.current = { conversationId, status };
+        const pending = itemsRef.current;
+        const { rest, taken } = flushEdge(prev, { conversationId, status }, pending);
+        if (taken) {
+            commit(conversationId, rest);
+            liveRef.current(taken.text, taken.attachments);
+        }
+    }, [conversationId, status, commit]);
+    const enqueue = useCallback((text, attachments) => {
+        const current = itemsRef.current;
+        const decision = decideSubmit(status === "streaming", current.length >= MAX_QUEUED_PROMPTS);
+        if (decision === "reject-full") {
+            onNotice?.(QUEUED_FULL_NOTICE);
+            return "rejected-full";
+        }
+        if (decision === "send") {
+            liveRef.current(text, attachments);
+            return "not-streaming";
+        }
+        const next = enqueuePrompt(current, {
+            id: nextQueuedId(),
+            text,
+            attachments,
+        });
+        if (!next) {
+            onNotice?.(QUEUED_FULL_NOTICE);
+            return "rejected-full";
+        }
+        commit(conversationId, next);
+        return "queued";
+    }, [status, conversationId, commit, onNotice]);
+    return useMemo(() => ({
+        items,
+        full: items.length >= MAX_QUEUED_PROMPTS,
+        enqueue,
+        remove: (id) => commit(conversationId, removePrompt(itemsRef.current, id)),
+        moveUp: (id) => commit(conversationId, movePrompt(itemsRef.current, id, -1)),
+        moveDown: (id) => commit(conversationId, movePrompt(itemsRef.current, id, 1)),
+        edit: (id) => {
+            const item = itemsRef.current.find((p) => p.id === id);
+            if (!item)
+                return null;
+            commit(conversationId, removePrompt(itemsRef.current, id));
+            return item.text;
+        },
+        sendNow: (id) => {
+            const current = itemsRef.current;
+            const index = current.findIndex((p) => p.id === id);
+            if (index < 0)
+                return;
+            const item = current[index];
+            if (status !== "streaming") {
+                commit(conversationId, removePrompt(current, id));
+                liveRef.current(item.text, item.attachments);
+                return;
+            }
+            if (!onStop) {
+                onNotice?.("未接线停止能力，无法插队发送");
+                return;
+            }
+            commit(conversationId, prependPrompt(removePrompt(current, id), item));
+            onStop();
+        },
+    }), [items, enqueue, conversationId, commit, status, onStop, onNotice]);
+}

package/lib/hooks/useSelectionPop.d.ts

@@ -0,0 +1,13 @@
+import type { SelectionTarget } from "../types/callbacks";
+import type { PopPosition, PopSize, RectLike } from "../types/selection";
+import { normalizeSelectedText, MAX_SELECTION_LENGTH, MIN_SELECTION_LENGTH } from "../domain/selection-actions";
+export interface SelectionPopState extends PopPosition {
+    target: SelectionTarget;
+    bubble: HTMLElement;
+}
+export declare function selectionPopPosition(rect: RectLike, viewport: PopSize, size: PopSize): PopPosition | null;
+export declare function useSelectionPop(): {
+    pop: SelectionPopState | null;
+    dismiss: () => void;
+};
+export { normalizeSelectedText, MIN_SELECTION_LENGTH, MAX_SELECTION_LENGTH };

package/lib/hooks/useSelectionPop.js

@@ -0,0 +1,130 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { normalizeSelectedText, resolveSelection, MAX_SELECTION_LENGTH, MIN_SELECTION_LENGTH, } from "../domain/selection-actions";
+const BLOCKED_SELECTOR = 'input, textarea, select, [contenteditable="true"], [contenteditable=""], [contenteditable="plaintext-only"], [data-ctx-native], [data-cmp="ai/code-copy"]';
+const POP_SELECTOR = '[data-cmp="ac/selection-actions"]';
+const SETTLE_MS = 10;
+function popSizeFor(actionCount) {
+    return { width: actionCount * 74 + 10, height: 32 };
+}
+export function selectionPopPosition(rect, viewport, size) {
+    const EDGE = 4;
+    const GAP = 8;
+    if (rect.width <= 0 || rect.height <= 0)
+        return null;
+    if (rect.bottom < 0 || rect.top > viewport.height)
+        return null;
+    const left = Math.max(EDGE, Math.min(rect.left + rect.width / 2 - size.width / 2, viewport.width - size.width - EDGE));
+    let top = rect.top - size.height - GAP;
+    if (top < EDGE)
+        top = rect.bottom + GAP;
+    top = Math.max(EDGE, Math.min(top, viewport.height - size.height - EDGE));
+    return { left, top };
+}
+export function useSelectionPop() {
+    const [pop, setPop] = useState(null);
+    const rangeRef = useRef(null);
+    const dismiss = useCallback(() => {
+        rangeRef.current = null;
+        setPop(null);
+    }, []);
+    const follow = useCallback(() => {
+        const range = rangeRef.current;
+        if (!range)
+            return;
+        const rect = range.getBoundingClientRect();
+        const size = popSizeFor(3);
+        const pos = selectionPopPosition(rect, {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        }, size);
+        if (!pos) {
+            dismiss();
+            return;
+        }
+        setPop((prev) => prev ? { ...prev, left: pos.left, top: pos.top } : prev);
+    }, [dismiss]);
+    useEffect(() => {
+        let timer;
+        const onMouseUp = (e) => {
+            if (e.button !== 0)
+                return;
+            const target = e.target;
+            if (target?.closest(POP_SELECTOR))
+                return;
+            window.clearTimeout(timer);
+            timer = window.setTimeout(() => {
+                const sel = window.getSelection();
+                if (!sel || sel.isCollapsed || sel.rangeCount === 0) {
+                    dismiss();
+                    return;
+                }
+                const range = sel.getRangeAt(0);
+                const raw = sel.toString();
+                const anchor = (range.startContainer instanceof HTMLElement
+                    ? range.startContainer
+                    : (range.startContainer.parentElement ?? null));
+                const blocked = Boolean(anchor?.closest(BLOCKED_SELECTOR));
+                const bubble = anchor?.closest('[data-cmp="ac/bubble"]') ?? null;
+                const target2 = resolveSelection({
+                    raw,
+                    blocked,
+                    bubbleRole: bubble?.dataset.msgRole ?? null,
+                    agentId: bubble?.dataset.agent ?? null,
+                });
+                if (!target2 || !bubble) {
+                    dismiss();
+                    return;
+                }
+                const rect = range.getBoundingClientRect();
+                const size = popSizeFor(3);
+                const pos = selectionPopPosition(rect, {
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                }, size);
+                if (!pos) {
+                    dismiss();
+                    return;
+                }
+                rangeRef.current = range;
+                setPop({ ...pos, target: target2, bubble });
+            }, SETTLE_MS);
+        };
+        const onSelectionChange = () => {
+            const sel = window.getSelection();
+            if (!sel || sel.isCollapsed) {
+                dismiss();
+                return;
+            }
+            follow();
+        };
+        const onMouseDown = (e) => {
+            const target = e.target;
+            if (target?.closest(POP_SELECTOR))
+                return;
+            dismiss();
+        };
+        const onKeyDown = (e) => {
+            if (e.key === "Escape")
+                dismiss();
+        };
+        window.addEventListener("mouseup", onMouseUp);
+        document.addEventListener("selectionchange", onSelectionChange);
+        document.addEventListener("mousedown", onMouseDown, true);
+        window.addEventListener("keydown", onKeyDown);
+        window.addEventListener("blur", dismiss);
+        document.addEventListener("scroll", follow, true);
+        window.addEventListener("resize", follow);
+        return () => {
+            window.clearTimeout(timer);
+            window.removeEventListener("mouseup", onMouseUp);
+            document.removeEventListener("selectionchange", onSelectionChange);
+            document.removeEventListener("mousedown", onMouseDown, true);
+            window.removeEventListener("keydown", onKeyDown);
+            window.removeEventListener("blur", dismiss);
+            document.removeEventListener("scroll", follow, true);
+            window.removeEventListener("resize", follow);
+        };
+    }, [dismiss, follow]);
+    return { pop, dismiss };
+}
+export { normalizeSelectedText, MIN_SELECTION_LENGTH, MAX_SELECTION_LENGTH };

package/lib/hooks/useStreamBridge.d.ts

@@ -0,0 +1 @@
+export declare function useStreamBridge(enabled?: boolean): void;

package/lib/hooks/useStreamBridge.js

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import { getStreamBridge } from "../adapters/stream-bridge";
+import { useChatStore } from "../stores/chat-store";
+export function useStreamBridge(enabled = true) {
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const bridge = getStreamBridge();
+        if (!bridge)
+            return;
+        const store = useChatStore.getState();
+        return bridge.subscribe({
+            onDelta: store.streamDelta,
+            onReasoning: store.streamReasoning,
+            onToolCall: store.streamToolCall,
+            onToolResult: store.streamToolResult,
+            onContextUsage: store.streamContextUsage,
+            onMemory: store.streamMemory,
+            onCompaction: store.streamCompaction,
+            onEnd: store.streamEnd,
+        });
+    }, [enabled]);
+}

package/lib/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./types";
+export { tokens, gaps, control, type as typeScale, radius, z, applyTheme, readTheme, designTokens, } from "./tokens";
+export { cn, writeClipboard, readClipboard, loadJSON, saveJSON, LS_KEYS, } from "./utils";
+export * from "./primitives";
+export * from "./blocks";
+export * from "./hooks";
+export * from "./stores";
+export * from "./domain";
+export * from "./adapters";
+export * from "./reactbits";

package/lib/index.js

@@ -0,0 +1,10 @@
+export * from "./types";
+export { tokens, gaps, control, type as typeScale, radius, z, applyTheme, readTheme, designTokens, } from "./tokens";
+export { cn, writeClipboard, readClipboard, loadJSON, saveJSON, LS_KEYS, } from "./utils";
+export * from "./primitives";
+export * from "./blocks";
+export * from "./hooks";
+export * from "./stores";
+export * from "./domain";
+export * from "./adapters";
+export * from "./reactbits";

package/lib/primitives/Badge.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type BadgeVariant = "default" | "secondary" | "outline" | "success" | "warning" | "destructive";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    children?: ReactNode;
+}
+export declare function Badge({ variant, className, children, ...props }: BadgeProps): import("react").JSX.Element;

package/lib/primitives/Badge.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+const VARIANTS = {
+    default: "bg-primary/15 text-primary border border-transparent",
+    secondary: "bg-secondary text-secondary-foreground border border-transparent",
+    outline: "border border-border text-muted-foreground",
+    success: "bg-[var(--accent-success)]/15 text-[var(--accent-success)] border border-transparent",
+    warning: "bg-[var(--accent-warning)]/15 text-[var(--accent-warning)] border border-transparent",
+    destructive: "bg-[var(--accent-danger)]/15 text-[var(--accent-danger)] border border-transparent",
+};
+export function Badge({ variant = "default", className, children, ...props }) {
+    return (_jsx("span", { className: cn("inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-micro font-medium leading-none", VARIANTS[variant], className), ...props, children: children }));
+}

package/lib/primitives/Button.d.ts

@@ -0,0 +1,9 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export type ButtonVariant = "default" | "secondary" | "outline" | "ghost" | "destructive";
+export type ButtonSize = "lg" | "md" | "sm" | "xs" | "icon" | "icon-sm";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children?: ReactNode;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/primitives/Button.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../utils/cn";
+const VARIANTS = {
+    default: "bg-primary text-primary-foreground hover:bg-primary/90 border border-transparent",
+    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-transparent",
+    outline: "border border-border bg-transparent hover:bg-secondary/60 text-foreground",
+    ghost: "bg-transparent hover:bg-secondary/60 text-foreground",
+    destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 border border-transparent",
+};
+const SIZES = {
+    lg: "h-[var(--control-lg)] px-4 text-body",
+    md: "h-[var(--control-md)] px-3 text-body",
+    sm: "h-[var(--control-sm)] px-2.5 text-meta",
+    xs: "h-[var(--control-xs)] px-2 text-micro",
+    icon: "h-[var(--control-md)] w-[var(--control-md)] p-0",
+    "icon-sm": "h-[var(--control-xs)] w-[var(--control-xs)] p-0",
+};
+export const Button = forwardRef(function Button({ variant = "default", size = "md", className, children, ...props }, ref) {
+    return (_jsx("button", { ref: ref, type: "button", className: cn("press inline-flex shrink-0 items-center justify-center gap-1.5 rounded-[var(--radius-md)] font-medium transition-colors", "focus-visible:outline-2 focus-visible:outline-[var(--accent-primary-border)]", "disabled:pointer-events-none disabled:opacity-50", VARIANTS[variant], SIZES[size], className), ...props, children: children }));
+});

package/lib/primitives/Collapsible.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+export interface CollapsibleProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger: (state: {
+        open: boolean;
+    }) => ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+export declare function Collapsible({ open: controlled, defaultOpen, onOpenChange, trigger, children, className, }: CollapsibleProps): import("react").JSX.Element;

package/lib/primitives/Collapsible.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../utils/cn";
+export function Collapsible({ open: controlled, defaultOpen = false, onOpenChange, trigger, children, className, }) {
+    const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+    const open = controlled ?? uncontrolled;
+    const toggle = () => {
+        const next = !open;
+        if (controlled === undefined)
+            setUncontrolled(next);
+        onOpenChange?.(next);
+    };
+    return (_jsxs("div", { "data-state": open ? "open" : "closed", className: cn("w-full", className), children: [_jsx("button", { type: "button", "aria-expanded": open, onClick: toggle, className: "w-full text-left", children: trigger({ open }) }), open ? children : null] }));
+}

package/lib/primitives/Dialog.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+export interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}
+export declare function Dialog({ open, onOpenChange, title, description, children, className, }: DialogProps): import("react").ReactPortal | null;

package/lib/primitives/Dialog.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../utils/cn";
+export function Dialog({ open, onOpenChange, title, description, children, className, }) {
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onOpenChange(false);
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, onOpenChange]);
+    if (!open || typeof document === "undefined")
+        return null;
+    return createPortal(_jsxs("div", { className: "fixed inset-0 z-modal flex items-center justify-center", children: [_jsx("div", { className: "absolute inset-0 bg-black/50", onClick: () => onOpenChange(false), "aria-hidden": "true" }), _jsxs("div", { role: "dialog", "aria-modal": "true", "data-slot": "dialog-content", className: cn("relative z-modal max-h-[85vh] w-full max-w-lg overflow-auto rounded-[var(--radius-lg)] border border-border p-4 shadow-lg", className), children: [title != null ? (_jsx("h2", { className: "text-heading font-semibold text-foreground", children: title })) : null, description != null ? (_jsx("p", { className: "mt-1 text-meta text-muted-foreground", children: description })) : null, children] })] }), document.body);
+}

package/lib/primitives/DropdownMenu.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+export interface DropdownMenuProps {
+    trigger: (state: {
+        open: boolean;
+    }) => ReactNode;
+    children: (state: {
+        close: () => void;
+    }) => ReactNode;
+    align?: "start" | "end";
+    side?: "top" | "bottom";
+    className?: string;
+    contentClassName?: string;
+}
+export declare function DropdownMenu({ trigger, children, align, side, className, contentClassName, }: DropdownMenuProps): import("react").JSX.Element;
+export interface DropdownMenuItemProps {
+    onSelect?: () => void;
+    disabled?: boolean;
+    selected?: boolean;
+    danger?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+export declare function DropdownMenuItem({ onSelect, disabled, selected, danger, children, className, }: DropdownMenuItemProps): import("react").JSX.Element;
+export declare function DropdownMenuLabel({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function DropdownMenuSeparator(): import("react").JSX.Element;

package/lib/primitives/DropdownMenu.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { cn } from "../utils/cn";
+export function DropdownMenu({ trigger, children, align = "start", side = "bottom", className, contentClassName, }) {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            if (!rootRef.current?.contains(e.target))
+                setOpen(false);
+        };
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", onDown);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("mousedown", onDown);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [open]);
+    return (_jsxs("div", { ref: rootRef, className: cn("relative inline-flex", className), children: [_jsx("button", { type: "button", "aria-expanded": open, "aria-haspopup": "menu", onClick: () => setOpen((v) => !v), className: "inline-flex", children: trigger({ open }) }), open ? (_jsx("div", { role: "menu", className: cn("absolute z-tooltip min-w-48 rounded-[var(--radius-md)] border border-border bg-popover p-1 shadow-md", side === "top" ? "bottom-full mb-1" : "top-full mt-1", align === "end" ? "right-0" : "left-0", contentClassName), children: children({ close: () => setOpen(false) }) })) : null] }));
+}
+export function DropdownMenuItem({ onSelect, disabled, selected, danger, children, className, }) {
+    return (_jsx("button", { type: "button", role: "menuitem", disabled: disabled, "data-state": selected ? "selected" : "idle", onClick: onSelect, className: cn("flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1.5 text-left text-body", selected
+            ? "bg-secondary text-foreground"
+            : "text-foreground hover:bg-secondary/60", danger && "text-[var(--accent-danger)]", disabled && "pointer-events-none opacity-50", className), children: children }));
+}
+export function DropdownMenuLabel({ children, className, }) {
+    return (_jsx("div", { className: `px-2 py-1 text-micro font-medium uppercase tracking-wide text-muted-foreground${className ? ` ${className}` : ""}`, children: children }));
+}
+export function DropdownMenuSeparator() {
+    return _jsx("div", { role: "separator", className: "my-1 h-px bg-border" });
+}

package/lib/primitives/Empty.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export interface EmptyProps {
+    title: string;
+    hint?: string;
+    icon?: ReactNode;
+    className?: string;
+}
+export declare function Empty({ title, hint, icon, className }: EmptyProps): import("react").JSX.Element;

package/lib/primitives/Empty.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageSquare } from "lucide-react";
+import { cn } from "../utils/cn";
+export function Empty({ title, hint, icon, className }) {
+    return (_jsxs("div", { "data-state": "empty", className: cn("relative flex flex-1 flex-col items-center justify-center gap-3 overflow-hidden py-16 text-center", className), children: [_jsx("span", { "aria-hidden": "true", className: "grid size-10 place-items-center rounded-[var(--radius-md)] border border-[var(--border-700)] bg-[var(--surface-900)] text-muted-foreground", children: icon ?? _jsx(MessageSquare, { size: 20 }) }), _jsx("p", { className: "text-sm font-medium text-foreground", children: title }), hint ? (_jsx("p", { className: "w-72 max-w-full px-4 text-xs text-muted-foreground", children: hint })) : null] }));
+}

package/lib/primitives/Input.d.ts

@@ -0,0 +1,3 @@
+import { type InputHTMLAttributes } from "react";
+export type InputProps = InputHTMLAttributes<HTMLInputElement>;
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib/primitives/Input.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../utils/cn";
+export const Input = forwardRef(function Input({ className, ...props }, ref) {
+    return (_jsx("input", { ref: ref, className: cn("h-[var(--control-md)] w-full rounded-[var(--radius-md)] border border-border bg-transparent px-2.5 text-body text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-2 focus-visible:outline-[var(--accent-primary-border)]", "disabled:cursor-not-allowed disabled:opacity-50", className), ...props }));
+});

package/lib/primitives/Kbd.d.ts

@@ -0,0 +1,2 @@
+import type { HTMLAttributes } from "react";
+export declare function Kbd({ className, ...props }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;

package/lib/primitives/Kbd.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+export function Kbd({ className, ...props }) {
+    return (_jsx("kbd", { className: cn("inline-flex h-[var(--control-xs)] min-w-[var(--control-xs)] items-center justify-center rounded border border-border bg-secondary px-1 font-mono text-micro text-muted-foreground", className), ...props }));
+}

package/lib/primitives/Popover.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+export interface PopoverProps {
+    trigger: (state: {
+        open: boolean;
+    }) => ReactNode;
+    children: ReactNode;
+    side?: "top" | "bottom";
+    align?: "start" | "end";
+    sideOffset?: number;
+    className?: string;
+    contentClassName?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function Popover({ trigger, children, side, align, sideOffset, className, contentClassName, open: openProp, onOpenChange, }: PopoverProps): import("react").JSX.Element;

package/lib/primitives/Popover.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { cn } from "../utils/cn";
+export function Popover({ trigger, children, side = "bottom", align = "end", sideOffset = 8, className, contentClassName, open: openProp, onOpenChange, }) {
+    const [uncontrolled, setUncontrolled] = useState(false);
+    const open = openProp ?? uncontrolled;
+    const setOpen = (next) => {
+        if (openProp === undefined)
+            setUncontrolled(next);
+        onOpenChange?.(next);
+    };
+    const rootRef = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            if (!rootRef.current?.contains(e.target))
+                setOpen(false);
+        };
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", onDown);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("mousedown", onDown);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [open]);
+    return (_jsxs("div", { ref: rootRef, className: cn("relative inline-flex", className), children: [_jsx("button", { type: "button", "aria-expanded": open, onClick: () => setOpen(!open), className: "inline-flex", children: trigger({ open }) }), open ? (_jsx("div", { role: "dialog", className: cn("absolute z-tooltip rounded-[var(--radius-md)] border border-border bg-popover shadow-md", side === "top" ? "bottom-full" : "top-full", align === "end" ? "right-0" : "left-0", contentClassName), style: { marginBlockStart: side === "top" ? -sideOffset : sideOffset }, children: children })) : null] }));
+}

package/lib/primitives/ScrollArea.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export declare function ScrollArea({ className, children, ...props }: ScrollAreaProps): import("react").JSX.Element;

package/lib/primitives/ScrollArea.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+export function ScrollArea({ className, children, ...props }) {
+    return (_jsx("div", { className: cn("thin_scroll min-h-0 overflow-y-auto", className), ...props, children: children }));
+}

package/lib/primitives/Separator.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from "react";
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+}
+export declare function Separator({ orientation, className, ...props }: SeparatorProps): import("react").JSX.Element;

package/lib/primitives/Separator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+export function Separator({ orientation = "horizontal", className, ...props }) {
+    return (_jsx("div", { role: "separator", "aria-orientation": orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className), ...props }));
+}

package/lib/primitives/Spinner.d.ts

@@ -0,0 +1,5 @@
+export interface SpinnerProps {
+    className?: string;
+    label?: string;
+}
+export declare function Spinner({ className, label }: SpinnerProps): import("react").JSX.Element;

package/lib/primitives/Spinner.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+export function Spinner({ className, label }) {
+    return (_jsx("span", { role: "status", "aria-label": label ?? "加载中", className: cn("inline-block size-3.5 animate-spin rounded-full border-2 border-border border-t-[var(--accent-primary)]", className) }));
+}

package/lib/primitives/Textarea.d.ts

@@ -0,0 +1,3 @@
+import { type TextareaHTMLAttributes } from "react";
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/lib/primitives/Textarea.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../utils/cn";
+export const Textarea = forwardRef(function Textarea({ className, ...props }, ref) {
+    return (_jsx("textarea", { ref: ref, className: cn("w-full resize-none rounded-[var(--radius-md)] border border-border bg-transparent px-2.5 py-1.5 text-body text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-2 focus-visible:outline-[var(--accent-primary-border)]", "disabled:cursor-not-allowed disabled:opacity-50", className), ...props }));
+});

package/lib/primitives/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+export interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    side?: "top" | "bottom";
+    className?: string;
+}
+export declare function Tooltip({ content, children, side, className }: TooltipProps): import("react").JSX.Element;