@elizaos/ui 2.0.0-alpha.13 → 2.0.0-alpha.140

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/{dist → packages/ui/src}/components/ui/tooltip-extended.d.ts

@@ -1,21 +1,3 @@
-/**
- * Extended tooltip components for contextual help, icon buttons, guided
- * tours, and spotlight onboarding overlays.
- *
- * All exports here are framework-agnostic (no app context dependency).
- *
- * Note: The Radix-based `Tooltip` is exported from `./tooltip`. This file
- * exports a custom CSS-only hover tooltip (`HoverTooltip`), `IconTooltip`,
- * `Spotlight`, and `useGuidedTour`.
- */
-/**
- * CSS-only hover tooltip that wraps any element in a `<button>` and shows
- * a floating content panel on hover/focus. Supports controlled `visible`
- * mode and an optional dismiss button.
- *
- * Use `IconTooltip` for a div-based (non-button) variant that is safe to
- * wrap interactive children.
- */
 export interface HoverTooltipProps {
     children: React.ReactNode;
     content: React.ReactNode;
@@ -27,17 +9,13 @@ export interface HoverTooltipProps {
     onDismiss?: () => void;
 }
 export declare function HoverTooltip({ children, content, position, delay, showArrow, className, visible: controlledVisible, onDismiss, }: HoverTooltipProps): import("react/jsx-runtime").JSX.Element;
-/**
- * Lightweight tooltip for icon buttons.
- *
- * Uses a `<div>` wrapper (not `<button>`) so it can safely wrap interactive
- * elements like icon buttons without nesting buttons.
- */
-export declare function IconTooltip({ children, label, shortcut, position, }: {
+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;

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,116 @@
+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 (
+    // biome-ignore lint/a11y/noStaticElementInteractions: this wrapper centralizes hover/focus handling for arbitrary child content.
+    _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/{dist → packages/ui/src}/components/ui/tooltip.d.ts

@@ -4,5 +4,15 @@ 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/{dist → packages/ui/src}/components/ui/typography.d.ts

@@ -1,14 +1,14 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const textVariants: (props?: ({
-    variant?: "default" | "small" | "muted" | "medium" | "lead" | "large" | null | undefined;
+    variant?: "small" | "default" | "muted" | "medium" | "large" | "lead" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof textVariants> {
     asChild?: boolean;
 }
 export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLParagraphElement>>;
 declare const headingVariants: (props?: ({
-    level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null | undefined;
+    level?: "h2" | "h3" | "h1" | "h4" | "h5" | "h6" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
 }

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":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,YAAY;;8EAchB,CAAC;AAEH,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAChD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,wFAWhB,CAAC;AAGF,QAAA,MAAM,eAAe;;8EAcnB,CAAC;AAEH,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAC9C,YAAY,CAAC,OAAO,eAAe,CAAC;CAAG;AAE3C,eAAO,MAAM,OAAO,yFAWnB,CAAC"}

package/{dist → packages/ui/src}/components/ui/typography.js

@@ -38,7 +38,7 @@ const headingVariants = cva("text-txt font-semibold tracking-tight", {
     },
 });
 export const Heading = React.forwardRef(({ className, level = "h1", ...props }, ref) => {
-    const Comp = level || "h1";
+    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]);
+}

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

@@ -0,0 +1,3 @@
+export declare function useDocumentVisibility(): boolean;
+export declare function useIntervalWhenDocumentVisible(callback: () => void, delayMs: number, enabled?: boolean): void;
+//# sourceMappingURL=useDocumentVisibility.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDocumentVisibility.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useDocumentVisibility.ts"],"names":[],"mappings":"AAEA,wBAAgB,qBAAqB,IAAI,OAAO,CAgB/C;AAED,wBAAgB,8BAA8B,CAC5C,QAAQ,EAAE,MAAM,IAAI,EACpB,OAAO,EAAE,MAAM,EACf,OAAO,UAAO,GACb,IAAI,CAYN"}

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

@@ -0,0 +1,28 @@
+import { useEffect, useRef, useState } from "react";
+export function useDocumentVisibility() {
+    const [visible, setVisible] = useState(() => typeof document === "undefined"
+        ? true
+        : document.visibilityState === "visible");
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const sync = () => setVisible(document.visibilityState === "visible");
+        sync();
+        document.addEventListener("visibilitychange", sync);
+        return () => document.removeEventListener("visibilitychange", sync);
+    }, []);
+    return visible;
+}
+export function useIntervalWhenDocumentVisible(callback, delayMs, enabled = true) {
+    const saved = useRef(callback);
+    saved.current = callback;
+    const visible = useDocumentVisibility();
+    useEffect(() => {
+        if (!enabled || !visible)
+            return;
+        const id = window.setInterval(() => {
+            saved.current();
+        }, delayMs);
+        return () => window.clearInterval(id);
+    }, [enabled, visible, delayMs]);
+}

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

@@ -0,0 +1,13 @@
+export interface ShortcutConfig {
+    key: string;
+    ctrl?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+    meta?: boolean;
+    handler: () => void;
+    description: string;
+    scope?: string;
+}
+export declare function useKeyboardShortcuts(shortcuts: ShortcutConfig[]): void;
+export declare function formatShortcut(s: Omit<ShortcutConfig, "handler">): string;
+//# sourceMappingURL=useKeyboardShortcuts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardShortcuts.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useKeyboardShortcuts.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,cAAc,EAAE,QAwB/D;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,GAAG,MAAM,CAQzE"}

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

@@ -0,0 +1,34 @@
+import { useCallback, useEffect } from "react";
+export function useKeyboardShortcuts(shortcuts) {
+    const handleKeyDown = useCallback((event) => {
+        for (const shortcut of shortcuts) {
+            const keyMatch = event.key.toLowerCase() === shortcut.key.toLowerCase();
+            const ctrlMatch = !!shortcut.ctrl === event.ctrlKey;
+            const shiftMatch = !!shortcut.shift === event.shiftKey;
+            const altMatch = !!shortcut.alt === event.altKey;
+            const metaMatch = !!shortcut.meta === event.metaKey;
+            if (keyMatch && ctrlMatch && shiftMatch && altMatch && metaMatch) {
+                event.preventDefault();
+                shortcut.handler();
+                break;
+            }
+        }
+    }, [shortcuts]);
+    useEffect(() => {
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [handleKeyDown]);
+}
+export function formatShortcut(s) {
+    const parts = [];
+    if (s.ctrl)
+        parts.push("Ctrl");
+    if (s.shift)
+        parts.push("Shift");
+    if (s.alt)
+        parts.push("Alt");
+    if (s.meta)
+        parts.push("Cmd");
+    parts.push(s.key.length === 1 ? s.key.toUpperCase() : s.key);
+    return parts.join("+");
+}

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

@@ -0,0 +1,16 @@
+export interface UseLinkedSidebarSelectionOptions<T extends string = string> {
+    contentTopOffset?: number;
+    selectedId: T | null;
+    enabled?: boolean;
+    topAlignedId?: T | null;
+}
+export declare function useLinkedSidebarSelection<T extends string = string>({ contentTopOffset, enabled, selectedId, topAlignedId, }: UseLinkedSidebarSelectionOptions<T>): {
+    contentContainerRef: import("react").RefObject<HTMLDivElement | null>;
+    queueContentAlignment: (id: T) => void;
+    registerContentItem: (id: T) => (node: HTMLElement | null) => void;
+    registerRailItem: (id: T) => (node: HTMLElement | null) => void;
+    registerSidebarItem: (id: T) => (node: HTMLElement | null) => void;
+    registerSidebarViewport: (node: HTMLElement | null) => void;
+    scrollContentToItem: (id: T) => void;
+};
+//# sourceMappingURL=useLinkedSidebarSelection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLinkedSidebarSelection.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useLinkedSidebarSelection.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,gCAAgC,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,CAAC,GAAG,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;CACzB;AAsBD,wBAAgB,yBAAyB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EACnE,gBAAqB,EACrB,OAAc,EACd,UAAU,EACV,YAAmB,GACpB,EAAE,gCAAgC,CAAC,CAAC,CAAC;;gCAuE7B,CAAC;8BA5DD,CAAC,YAAY,WAAW,GAAG,IAAI;2BAc/B,CAAC,YAAY,WAAW,GAAG,IAAI;8BAP/B,CAAC,YAAY,WAAW,GAAG,IAAI;oCAaa,WAAW,GAAG,IAAI;8BAK9D,CAAC;EAiGT"}