@elizaos/ui 2.0.0-alpha.25 → 2.0.0-alpha.334

package/packages/ui/src/components/ui/tabs.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const Tabs = TabsPrimitive.Root;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn("inline-flex h-10 items-center justify-center rounded-md bg-bg-accent p-1 text-muted", className), ...props })));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-bg transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-bg data-[state=active]:text-txt data-[state=active]:shadow-sm", className), ...props })));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn("mt-2 ring-offset-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), ...props })));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/packages/ui/src/components/ui/tag-editor.d.ts

@@ -0,0 +1,12 @@
+export interface TagEditorProps {
+    items: string[];
+    onChange: (items: string[]) => void;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    maxItems?: number;
+    addLabel?: string;
+    removeLabel?: string;
+}
+export declare function TagEditor({ items, onChange, label, placeholder, className, maxItems, addLabel, removeLabel, }: TagEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tag-editor.d.ts.map

package/packages/ui/src/components/ui/tag-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-editor.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/tag-editor.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAA4B,EAC5B,SAAS,EACT,QAAQ,EACR,QAAgB,EAChB,WAAsB,GACvB,EAAE,cAAc,2CAwEhB"}

package/packages/ui/src/components/ui/tag-editor.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { cn } from "../../lib/utils";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Label } from "./label";
+function normalizeTagValue(value) {
+    return value.trim();
+}
+export function TagEditor({ items, onChange, label, placeholder = "Add a tag...", className, maxItems, addLabel = "Add", removeLabel = "Remove", }) {
+    const [draft, setDraft] = useState("");
+    const normalizedItems = useMemo(() => items.map((item) => normalizeTagValue(item)).filter(Boolean), [items]);
+    const itemSet = useMemo(() => new Set(normalizedItems.map((item) => item.toLowerCase())), [normalizedItems]);
+    const canAddMore = typeof maxItems !== "number" || normalizedItems.length < maxItems;
+    const commitDraft = useCallback(() => {
+        const next = normalizeTagValue(draft);
+        if (!next || !canAddMore || itemSet.has(next.toLowerCase())) {
+            setDraft("");
+            return;
+        }
+        onChange([...normalizedItems, next]);
+        setDraft("");
+    }, [canAddMore, draft, itemSet, normalizedItems, onChange]);
+    const removeItem = useCallback((item) => {
+        onChange(normalizedItems.filter((candidate) => candidate !== item));
+    }, [normalizedItems, onChange]);
+    return (_jsxs("div", { className: cn("flex flex-col gap-2", className), children: [label ? _jsx(Label, { children: label }) : null, _jsx("div", { className: "flex flex-wrap gap-2", children: normalizedItems.map((item) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-border/50 bg-bg-accent px-2.5 py-1 text-xs text-txt", children: [_jsx("span", { children: item }), _jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "h-4 w-4 rounded-full text-muted hover:text-txt", "aria-label": `${removeLabel} ${item}`, onClick: () => removeItem(item), children: _jsx(X, { className: "h-3 w-3" }) })] }, item))) }), _jsx(Input, { "aria-label": label ?? addLabel, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
+                    if (event.key !== "Enter" && event.key !== ",")
+                        return;
+                    event.preventDefault();
+                    commitDraft();
+                }, onBlur: commitDraft, placeholder: canAddMore ? placeholder : "Tag limit reached", disabled: !canAddMore })] }));
+}

package/packages/ui/src/components/ui/tag-input.d.ts

@@ -0,0 +1,3 @@
+export type { TagEditorProps as TagInputProps } from "./tag-editor";
+export { TagEditor as TagInput } from "./tag-editor";
+//# sourceMappingURL=tag-input.d.ts.map

package/packages/ui/src/components/ui/tag-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-input.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/tag-input.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,IAAI,aAAa,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,MAAM,cAAc,CAAC"}

package/packages/ui/src/components/ui/tag-input.js

@@ -0,0 +1 @@
+export { TagEditor as TagInput } from "./tag-editor";

package/packages/ui/src/components/ui/textarea.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface TextareaVariantProps {
+    variant?: "default" | "form" | "config" | null;
+    density?: "default" | "compact" | "relaxed" | null;
+}
+declare const textareaVariants: (props?: TextareaVariantProps) => string;
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, TextareaVariantProps {
+    hasError?: boolean;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea, textareaVariants };
+//# sourceMappingURL=textarea.d.ts.map

package/packages/ui/src/components/ui/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;CACpD;AA0BD,QAAA,MAAM,gBAAgB,EAAE,CAAC,KAAK,CAAC,EAAE,oBAAoB,KAAK,MACK,CAAC;AAEhE,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACvD,oBAAoB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,2FAeb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC"}

package/packages/ui/src/components/ui/textarea.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const _textareaVariants = cva("w-full border text-sm resize-y transition-[border-color,box-shadow,background-color] disabled:cursor-not-allowed disabled:opacity-50", {
+    variants: {
+        variant: {
+            default: "flex rounded-md border-input bg-bg px-3 py-2 ring-offset-bg placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            form: "rounded-2xl border-border/60 bg-bg/70 px-4 py-3 outline-none shadow-sm focus-visible:border-accent focus-visible:ring-1 focus-visible:ring-accent",
+            config: "border-border bg-card font-[var(--mono)] placeholder:text-muted placeholder:opacity-60 focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent",
+        },
+        density: {
+            default: "min-h-[80px]",
+            compact: "min-h-[64px] px-2 py-1.5 text-xs",
+            relaxed: "min-h-[132px]",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        density: "default",
+    },
+});
+const textareaVariants = _textareaVariants;
+const Textarea = React.forwardRef(({ className, variant, density, hasError, ...props }, ref) => {
+    return (_jsx("textarea", { className: cn(textareaVariants({ variant, density }), hasError &&
+            "border-destructive bg-[color-mix(in_srgb,var(--destructive)_3%,var(--card))]", className), ref: ref, ...props }));
+});
+Textarea.displayName = "Textarea";
+export { Textarea, textareaVariants };

package/packages/ui/src/components/ui/themed-select.d.ts

@@ -0,0 +1,22 @@
+export interface ThemedSelectGroup<T extends string = string> {
+    label: string;
+    items: {
+        id: T;
+        text: string;
+        hint?: string;
+    }[];
+}
+export interface ThemedSelectProps<T extends string = string> {
+    value: T | null;
+    groups: ThemedSelectGroup<T>[];
+    onChange: (id: T) => void;
+    placeholder?: string;
+    menuPlacement?: "top" | "bottom";
+    className?: string;
+    triggerClassName?: string;
+    menuClassName?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+}
+export declare function ThemedSelect<T extends string>({ value, groups, onChange, placeholder, menuPlacement, className, triggerClassName, menuClassName, ariaLabel, ariaLabelledBy, }: ThemedSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=themed-select.d.ts.map

package/packages/ui/src/components/ui/themed-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themed-select.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/themed-select.tsx"],"names":[],"mappings":"AAYA,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QAAE,EAAE,EAAE,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACjD;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC1D,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AASD,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAAE,EAC7C,KAAK,EACL,MAAM,EACN,QAAQ,EACR,WAAuB,EACvB,aAAwB,EACxB,SAAc,EACd,gBAAqB,EACrB,aAAkB,EAClB,SAAS,EACT,cAAc,GACf,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA0OtB"}

package/packages/ui/src/components/ui/themed-select.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { useEffect, useId, useMemo, useRef, useState, } from "react";
+import { Z_MODAL } from "../../lib/floating-layers";
+import { Button } from "./button";
+export function ThemedSelect({ value, groups, onChange, placeholder = "Select…", menuPlacement = "bottom", className = "", triggerClassName = "", menuClassName = "", ariaLabel, ariaLabelledBy, }) {
+    const [open, setOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const optionRefs = useRef([]);
+    const triggerId = useId();
+    const listboxId = useId();
+    const options = useMemo(() => groups.flatMap((group) => group.items.map((item) => ({
+        ...item,
+        groupLabel: group.label,
+    }))), [groups]);
+    const selectedIndex = value
+        ? options.findIndex((option) => option.id === value)
+        : -1;
+    const selectedItem = selectedIndex >= 0 ? options[selectedIndex] : null;
+    useEffect(() => {
+        if (!open)
+            return;
+        const handlePointerDown = (event) => {
+            if (!rootRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handlePointerDown);
+        return () => document.removeEventListener("mousedown", handlePointerDown);
+    }, [open]);
+    useEffect(() => {
+        if (!open) {
+            setHighlightedIndex(selectedIndex >= 0 ? selectedIndex : 0);
+            return;
+        }
+        const nextIndex = highlightedIndex >= 0
+            ? highlightedIndex
+            : selectedIndex >= 0
+                ? selectedIndex
+                : 0;
+        setHighlightedIndex(nextIndex);
+        optionRefs.current[nextIndex]?.focus();
+    }, [highlightedIndex, open, selectedIndex]);
+    const moveHighlight = (direction) => {
+        if (options.length === 0)
+            return;
+        const baseIndex = highlightedIndex >= 0
+            ? highlightedIndex
+            : selectedIndex >= 0
+                ? selectedIndex
+                : 0;
+        const nextIndex = (baseIndex + direction + options.length) % options.length;
+        setHighlightedIndex(nextIndex);
+    };
+    const commitSelection = (index) => {
+        const option = options[index];
+        if (!option)
+            return;
+        onChange(option.id);
+        setOpen(false);
+    };
+    const handleTriggerKeyDown = (event) => {
+        switch (event.key) {
+            case "ArrowDown":
+            case "ArrowUp":
+                event.preventDefault();
+                if (!open)
+                    setOpen(true);
+                setHighlightedIndex(selectedIndex >= 0
+                    ? selectedIndex
+                    : event.key === "ArrowUp"
+                        ? options.length - 1
+                        : 0);
+                break;
+            case "Enter":
+            case " ":
+                event.preventDefault();
+                setOpen((prev) => !prev);
+                break;
+            default:
+                break;
+        }
+    };
+    const handleOptionKeyDown = (event, index) => {
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                moveHighlight(1);
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                moveHighlight(-1);
+                break;
+            case "Home":
+                event.preventDefault();
+                setHighlightedIndex(0);
+                break;
+            case "End":
+                event.preventDefault();
+                setHighlightedIndex(options.length - 1);
+                break;
+            case "Enter":
+            case " ":
+                event.preventDefault();
+                commitSelection(index);
+                break;
+            case "Escape":
+                event.preventDefault();
+                setOpen(false);
+                triggerRef.current?.focus();
+                break;
+            case "Tab":
+                setOpen(false);
+                break;
+            default:
+                break;
+        }
+    };
+    return (_jsxs("div", { ref: rootRef, className: `relative min-w-0 w-full ${open ? `z-[${Z_MODAL}]` : ""} ${className}`, children: [_jsxs(Button, { ref: triggerRef, id: triggerId, type: "button", variant: "outline", size: "sm", role: "combobox", "aria-autocomplete": "none", "aria-controls": listboxId, "aria-expanded": open, "aria-haspopup": "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: `flex h-12 w-full items-center justify-between border-border bg-card px-2.5 py-1.5 text-left text-xs shadow-sm hover:border-accent focus-visible:ring-1 focus-visible:ring-accent ${triggerClassName}`, onClick: () => setOpen((prev) => !prev), onKeyDown: handleTriggerKeyDown, children: [_jsx("span", { className: "truncate", children: selectedItem
+                            ? `${selectedItem.text}${selectedItem.hint ? ` — ${selectedItem.hint}` : ""}`
+                            : placeholder }), _jsx(ChevronDown, { "aria-hidden": "true", className: `ml-2 h-3.5 w-3.5 shrink-0 text-muted transition-transform ${open ? "rotate-180" : ""}` })] }), open ? (_jsx("div", { id: listboxId, role: "listbox", "aria-labelledby": ariaLabelledBy, className: `absolute left-0 right-0 z-50 max-h-[280px] overflow-y-auto rounded-md border border-border bg-card shadow-lg ${menuPlacement === "top"
+                    ? "bottom-[calc(100%+0.125rem)]"
+                    : "top-[calc(100%+0.125rem)]"} ${menuClassName}`, children: groups.map((group) => (_jsxs("div", { children: [_jsx("div", { className: "sticky top-0 bg-bg-accent px-2.5 py-1 text-2xs font-semibold text-muted", children: group.label }), group.items.map((item) => {
+                            const optionIndex = options.findIndex((option) => option.id === item.id);
+                            const active = item.id === value;
+                            const highlighted = optionIndex === highlightedIndex;
+                            return (_jsxs("button", { ref: (node) => {
+                                    optionRefs.current[optionIndex] = node;
+                                }, type: "button", role: "option", "aria-selected": active, className: `flex w-full items-center justify-between gap-2 px-2.5 py-1.5 text-left text-xs ${active
+                                    ? "bg-accent/18 text-accent"
+                                    : highlighted
+                                        ? "bg-accent/12 text-txt"
+                                        : "text-txt hover:bg-accent/10 hover:text-txt"}`, onClick: () => commitSelection(optionIndex), onKeyDown: (event) => handleOptionKeyDown(event, optionIndex), children: [_jsx("span", { className: "min-w-0 truncate font-semibold", children: item.text }), item.hint ? (_jsx("span", { className: `min-w-0 truncate ${active ? "text-accent/80" : "text-muted"}`, children: item.hint })) : null] }, item.id));
+                        })] }, group.label))) })) : null] }));
+}

package/packages/ui/src/components/ui/tooltip-extended.d.ts

@@ -0,0 +1,54 @@
+export interface HoverTooltipProps {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    position?: "top" | "bottom" | "left" | "right";
+    delay?: number;
+    showArrow?: boolean;
+    className?: string;
+    visible?: boolean;
+    onDismiss?: () => void;
+}
+export declare function HoverTooltip({ children, content, position, delay, showArrow, className, visible: controlledVisible, onDismiss, }: HoverTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconTooltip({ children, label, shortcut, position, multiline, }: {
+    children: React.ReactNode;
+    label: string;
+    shortcut?: string;
+    position?: "top" | "bottom";
+    /** Long labels: wrap and cap width. */
+    multiline?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export interface SpotlightProps {
+    target: string;
+    title: string;
+    description: string;
+    step: number;
+    totalSteps: number;
+    onNext: () => void;
+    onPrev: () => void;
+    onSkip: () => void;
+    /** Labels to override defaults. */
+    labels?: {
+        stepOf?: string;
+        skipTour?: string;
+        previous?: string;
+        finish?: string;
+        next?: string;
+    };
+}
+export declare function Spotlight({ target, title, description, step, totalSteps, onNext, onPrev, onSkip, labels, }: SpotlightProps): import("react/jsx-runtime").JSX.Element | null;
+export interface TourStep {
+    target: string;
+    title: string;
+    description: string;
+}
+export declare function useGuidedTour(steps: TourStep[]): {
+    isActive: boolean;
+    currentStep: number;
+    step: TourStep;
+    start: () => void;
+    next: () => void;
+    prev: () => void;
+    skip: () => void;
+    totalSteps: number;
+};
+//# sourceMappingURL=tooltip-extended.d.ts.map

package/packages/ui/src/components/ui/tooltip-extended.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-extended.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/tooltip-extended.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,KAAW,EACX,SAAgB,EAChB,SAAc,EACd,OAAO,EAAE,iBAAiB,EAC1B,SAAS,GACV,EAAE,iBAAiB,2CAkFnB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,SAAiB,GAClB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,2CA4BA;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,mCAAmC;IACnC,MAAM,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAU,EACV,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAW,GACZ,EAAE,cAAc,kDAsFhB;AAED,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,QAAQ,EAAE;;;;;;;;;EAmC9C"}

package/packages/ui/src/components/ui/tooltip-extended.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Z_OVERLAY, Z_TOOLTIP } from "../../lib/floating-layers";
+import { cn } from "../../lib/utils";
+import { Button } from "./button";
+export function HoverTooltip({ children, content, position = "top", delay = 300, showArrow = true, className = "", visible: controlledVisible, onDismiss, }) {
+    const [isVisible, setIsVisible] = useState(false);
+    const timeoutRef = useRef(null);
+    const containerRef = useRef(null);
+    const isVisibleState = controlledVisible !== undefined ? controlledVisible : isVisible;
+    const show = useCallback(() => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setIsVisible(true), delay);
+    }, [delay]);
+    const hide = useCallback(() => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setIsVisible(false), 150);
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, []);
+    return (_jsxs("div", { ref: containerRef, className: "relative inline-flex cursor-default", onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: [children, isVisibleState && (_jsx("div", { className: cn("absolute z-50", position === "top"
+                    ? "bottom-full left-1/2 -translate-x-1/2 mb-2"
+                    : position === "bottom"
+                        ? "top-full left-1/2 -translate-x-1/2 mt-2"
+                        : position === "left"
+                            ? "right-full top-1/2 -translate-y-1/2 mr-2"
+                            : "left-full top-1/2 -translate-y-1/2 ml-2", className), children: _jsxs("div", { className: "relative bg-bg-elevated border border-border rounded-lg shadow-xl p-3 min-w-[10rem] max-w-xs", children: [onDismiss && (_jsx(Button, { variant: "ghost", size: "icon", onClick: onDismiss, className: "absolute top-1 right-1 h-6 w-6 text-muted hover:text-txt rounded", "aria-label": "Dismiss tooltip", children: _jsx(X, { className: "w-3 h-3" }) })), content, showArrow && (_jsx("div", { className: cn("absolute w-0 h-0 border-4", position === "top"
+                                ? "top-full left-1/2 -translate-x-1/2 border-t-border border-l-transparent border-r-transparent border-b-transparent"
+                                : position === "bottom"
+                                    ? "bottom-full left-1/2 -translate-x-1/2 border-b-border border-l-transparent border-r-transparent border-t-transparent"
+                                    : position === "left"
+                                        ? "left-full top-1/2 -translate-y-1/2 border-l-border border-t-transparent border-b-transparent border-r-transparent"
+                                        : "right-full top-1/2 -translate-y-1/2 border-r-border border-t-transparent border-b-transparent border-l-transparent") }))] }) }))] }));
+}
+export function IconTooltip({ children, label, shortcut, position = "top", multiline = false, }) {
+    return (_jsxs("div", { className: "relative isolate group", children: [children, _jsxs("div", { className: cn(`absolute px-3 py-2 bg-bg-elevated border border-border text-xs text-txt-strong rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible group-focus-within:opacity-100 group-focus-within:visible transition-opacity duration-200 z-[${Z_OVERLAY}] shadow-lg pointer-events-none`, position === "top"
+                    ? "bottom-full left-1/2 -translate-x-1/2 mb-2"
+                    : "top-full left-1/2 -translate-x-1/2 mt-2", multiline
+                    ? "min-w-[10rem] max-w-[min(22rem,calc(100vw-1.5rem))] whitespace-normal text-left leading-snug"
+                    : "min-w-[6rem] whitespace-nowrap"), role: "tooltip", children: [_jsx("div", { className: "font-medium", children: label }), shortcut && _jsx("div", { className: "text-muted mt-0.5", children: shortcut }), _jsx("div", { className: position === "top"
+                            ? "absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-bg-elevated"
+                            : "absolute bottom-full left-1/2 -translate-x-1/2 -mb-1 border-4 border-transparent border-b-bg-elevated" })] })] }));
+}
+export function Spotlight({ target, title, description, step, totalSteps, onNext, onPrev, onSkip, labels = {}, }) {
+    const [targetRect, setTargetRect] = useState(null);
+    useEffect(() => {
+        const element = document.querySelector(target);
+        if (element) {
+            const rect = element.getBoundingClientRect();
+            setTargetRect(rect);
+        }
+    }, [target]);
+    if (!targetRect)
+        return null;
+    const padding = 8;
+    return (_jsxs("div", { className: `fixed inset-0 z-[${Z_TOOLTIP}] pointer-events-none`, children: [_jsx("div", { className: "absolute inset-0 bg-black/60 pointer-events-auto", style: {
+                    clipPath: `polygon(
+            0% 0%,
+            0% 100%,
+            ${targetRect.left - padding}px 100%,
+            ${targetRect.left - padding}px ${targetRect.top - padding}px,
+            ${targetRect.right + padding}px ${targetRect.top - padding}px,
+            ${targetRect.right + padding}px ${targetRect.bottom + padding}px,
+            ${targetRect.left - padding}px ${targetRect.bottom + padding}px,
+            ${targetRect.left - padding}px 100%,
+            100% 100%,
+            100% 0%
+          )`,
+                } }), _jsxs("div", { className: "absolute bg-card border border-border rounded-xl shadow-2xl p-5 max-w-sm pointer-events-auto", style: {
+                    top: targetRect.bottom + padding + 16,
+                    left: Math.min(targetRect.left, window.innerWidth - 340),
+                }, children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsxs("span", { className: "text-xs text-muted font-medium", children: [labels.stepOf ?? "Step", " ", step, " of ", totalSteps] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onSkip, className: "h-auto px-1 py-0 text-xs text-muted hover:text-txt", children: labels.skipTour ?? "Skip Tour" })] }), _jsx("h3", { className: "text-lg font-bold text-txt-strong mb-2", children: title }), _jsx("p", { className: "text-sm text-muted mb-4", children: description }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Button, { variant: "outline", onClick: onPrev, disabled: step === 1, children: labels.previous ?? "Previous" }), _jsx("div", { className: "flex gap-1", children: Array.from({ length: totalSteps }, (_, idx) => idx).map((dotIndex) => (_jsx("div", { className: `w-2 h-2 rounded-full transition-colors ${dotIndex + 1 === step ? "bg-accent" : "bg-border"}` }, `step-dot-${dotIndex}`))) }), _jsx(Button, { onClick: onNext, children: step === totalSteps
+                                    ? (labels.finish ?? "Finish")
+                                    : (labels.next ?? "Next") })] })] })] }));
+}
+export function useGuidedTour(steps) {
+    const [isActive, setIsActive] = useState(false);
+    const [currentStep, setCurrentStep] = useState(0);
+    const start = useCallback(() => {
+        setIsActive(true);
+        setCurrentStep(0);
+    }, []);
+    const next = useCallback(() => {
+        if (currentStep < steps.length - 1) {
+            setCurrentStep((prev) => prev + 1);
+        }
+        else {
+            setIsActive(false);
+        }
+    }, [currentStep, steps.length]);
+    const prev = useCallback(() => {
+        setCurrentStep((prev) => Math.max(0, prev - 1));
+    }, []);
+    const skip = useCallback(() => {
+        setIsActive(false);
+    }, []);
+    return {
+        isActive,
+        currentStep,
+        step: steps[currentStep],
+        start,
+        next,
+        prev,
+        skip,
+        totalSteps: steps.length,
+    };
+}

package/packages/ui/src/components/ui/tooltip.d.ts

@@ -0,0 +1,18 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface TooltipHintProps {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    side?: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>["side"];
+    sideOffset?: number;
+    contentClassName?: string;
+    delayDuration?: number;
+    skipDelayDuration?: number;
+}
+export declare function TooltipHint({ children, content, side, sideOffset, contentClassName, delayDuration, skipDelayDuration, }: TooltipHintProps): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+//# sourceMappingURL=tooltip.d.ts.map

package/packages/ui/src/components/ui/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,eAAe,iDAA4B,CAAC;AAElD,QAAA,MAAM,OAAO,yCAAwB,CAAC;AAEtC,QAAA,MAAM,cAAc,gHAA2B,CAAC;AAEhD,QAAA,MAAM,cAAc,gKAelB,CAAC;AAGH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,wBAAwB,CACnC,OAAO,gBAAgB,CAAC,OAAO,CAChC,CAAC,MAAM,CAAC,CAAC;IACV,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAO,EACP,IAAe,EACf,UAAc,EACd,gBAAgB,EAChB,aAAmB,EACnB,iBAAuB,GACxB,EAAE,gBAAgB,2CAkBlB;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC"}

package/packages/ui/src/components/ui/tooltip.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-[140] overflow-hidden rounded-md border border-border bg-card px-3 py-1.5 text-sm text-txt shadow-md max-w-[min(24rem,calc(100vw-2rem))] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export function TooltipHint({ children, content, side = "bottom", sideOffset = 4, contentClassName, delayDuration = 200, skipDelayDuration = 100, }) {
+    return (_jsx(TooltipProvider, { delayDuration: delayDuration, skipDelayDuration: skipDelayDuration, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: children }), _jsx(TooltipContent, { side: side, sideOffset: sideOffset, className: contentClassName, children: content })] }) }));
+}
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/packages/ui/src/components/ui/typography.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface TextVariantProps {
+    variant?: "default" | "medium" | "small" | "muted" | "lead" | "large" | null;
+}
+export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement>, TextVariantProps {
+    asChild?: boolean;
+}
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLParagraphElement>>;
+export interface HeadingVariantProps {
+    level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null;
+}
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, HeadingVariantProps {
+}
+export declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+//# sourceMappingURL=typography.d.ts.map

package/packages/ui/src/components/ui/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/typography.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;CAC9E;AAsBD,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAChD,gBAAgB;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,wFAWhB,CAAC;AAGF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACxD;AAqBD,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAC9C,mBAAmB;CAAG;AAE1B,eAAO,MAAM,OAAO,yFAWnB,CAAC"}

package/packages/ui/src/components/ui/typography.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const _textVariants = cva("text-txt", {
+    variants: {
+        variant: {
+            default: "text-base",
+            medium: "text-sm",
+            small: "text-xs",
+            muted: "text-sm text-muted",
+            lead: "text-xl text-muted",
+            large: "text-lg font-semibold",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const textVariants = _textVariants;
+export const Text = React.forwardRef(({ className, variant, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? "span" : "p";
+    return (_jsx(Comp, { ref: ref, className: cn(textVariants({ variant }), className), ...props }));
+});
+Text.displayName = "Text";
+const _headingVariants = cva("text-txt font-semibold tracking-tight", {
+    variants: {
+        level: {
+            h1: "text-4xl font-extrabold lg:text-5xl",
+            h2: "text-3xl",
+            h3: "text-2xl",
+            h4: "text-xl",
+            h5: "text-lg",
+            h6: "text-base",
+        },
+    },
+    defaultVariants: {
+        level: "h1",
+    },
+});
+const headingVariants = _headingVariants;
+export const Heading = React.forwardRef(({ className, level = "h1", ...props }, ref) => {
+    const Comp = level ?? "h1";
+    return (_jsx(Comp, { ref: ref, className: cn(headingVariants({ level }), className), ...props }));
+});
+Heading.displayName = "Heading";

package/packages/ui/src/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./useClickOutside";
+export * from "./useDocumentVisibility";
+export * from "./useKeyboardShortcuts";
+export * from "./useLinkedSidebarSelection";
+export * from "./useTimeout";
+//# sourceMappingURL=index.d.ts.map

package/packages/ui/src/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,cAAc,CAAC"}

package/packages/ui/src/hooks/index.js

@@ -0,0 +1,5 @@
+export * from "./useClickOutside";
+export * from "./useDocumentVisibility";
+export * from "./useKeyboardShortcuts";
+export * from "./useLinkedSidebarSelection";
+export * from "./useTimeout";

package/packages/ui/src/hooks/useClickOutside.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from "react";
+export declare function useClickOutside(ref: RefObject<HTMLElement | null>, handler: () => void, active?: boolean): void;
+//# sourceMappingURL=useClickOutside.d.ts.map

package/packages/ui/src/hooks/useClickOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAElD,wBAAgB,eAAe,CAC7B,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,OAAO,EAAE,MAAM,IAAI,EACnB,MAAM,UAAO,QAsBd"}

package/packages/ui/src/hooks/useClickOutside.js

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+export function useClickOutside(ref, handler, active = true) {
+    useEffect(() => {
+        if (!active)
+            return;
+        const onMouseDown = (e) => {
+            if (ref.current && !ref.current.contains(e.target)) {
+                handler();
+            }
+        };
+        const onKeyDown = (e) => {
+            if (e.key === "Escape")
+                handler();
+        };
+        document.addEventListener("mousedown", onMouseDown);
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("mousedown", onMouseDown);
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [ref, handler, active]);
+}