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

package/packages/ui/src/components/composites/sidebar/sidebar-root.js

@@ -0,0 +1,448 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { PanelLeftClose, PanelLeftOpen, X } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../../lib/utils";
+import { Button } from "../../ui/button";
+import { buildSidebarAutoRailItems, buildSidebarAutoRailItemsFromDom, } from "./sidebar-auto-rail";
+import { SidebarBody } from "./sidebar-body";
+import { SidebarCollapsedRail } from "./sidebar-collapsed-rail";
+import { SidebarRailItem } from "./sidebar-content";
+const sidebarRootVariants = cva("mt-4 flex flex-col overflow-hidden text-sm transition-[width,min-width,border-radius,box-shadow,transform] duration-[360ms] ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none", {
+    variants: {
+        variant: {
+            default: "relative isolate min-h-0 h-[calc(100%-1rem)] w-full shrink-0 rounded-l-none rounded-tr-2xl rounded-br-2xl border-0 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_76%,transparent),color-mix(in_srgb,var(--bg-muted)_97%,transparent))] backdrop-blur-md",
+            mobile: "h-full w-full min-w-0 border-0 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_96%,transparent),color-mix(in_srgb,var(--bg)_92%,transparent))] shadow-none ring-0",
+            "game-modal": "h-full rounded-sm border border-white/10 bg-[linear-gradient(180deg,rgba(11,12,17,0.9),rgba(8,10,14,0.82))] shadow-2xl backdrop-blur-xl",
+        },
+        collapsed: {
+            true: "!w-[4.75rem] !min-w-[4.75rem] xl:!w-[4.75rem] xl:!min-w-[4.75rem]",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "default",
+            collapsed: false,
+            className: "!w-[18.5rem] !min-w-[18.5rem] xl:!w-[20rem] xl:!min-w-[20rem]",
+        },
+        {
+            variant: "default",
+            collapsed: false,
+            className: "shadow-lg",
+        },
+        {
+            variant: "default",
+            collapsed: true,
+            className: "shadow-md",
+        },
+    ],
+    defaultVariants: {
+        variant: "default",
+        collapsed: false,
+    },
+});
+const sidebarHeaderVariants = cva("", {
+    variants: {
+        variant: {
+            default: "shrink-0  px-3.5 pb-4 pt-3.5",
+            mobile: "shrink-0  px-3.5 pb-4 pt-3.5",
+            "game-modal": "shrink-0  px-3.5 pb-3 pt-3.5",
+        },
+        collapsed: {
+            true: "flex min-h-0 flex-1 flex-col pb-0",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "default",
+            collapsed: true,
+            className: " px-3.5 pt-3.5",
+        },
+    ],
+    defaultVariants: {
+        variant: "default",
+        collapsed: false,
+    },
+});
+const sidebarFooterVariants = cva("relative z-10 mt-auto flex shrink-0 justify-end  px-3.5 pb-3.5 pt-2");
+const sidebarControlButtonClassName = "h-11 w-11 rounded-sm border border-border/32 bg-card text-muted-strong shadow-sm transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-border/46 hover:text-txt hover:shadow-md active:scale-95";
+const sidebarMobileHeaderBarClassName = "sticky top-0 z-10 flex items-center justify-between bg-card/88 px-3.5 py-2.5 backdrop-blur-md";
+const sidebarCollapsedContentClassName = "flex min-h-0 w-full flex-1 flex-col items-center transform-gpu transition-[opacity,transform] duration-[260ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[opacity,transform] motion-reduce:transform-none motion-reduce:transition-none";
+const sidebarContentLayerClassName = "flex min-h-0 flex-1 flex-col origin-left transform-gpu transition-[opacity,transform,filter] duration-[260ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[opacity,transform,filter] motion-reduce:transform-none motion-reduce:transition-none";
+const sidebarContentOverlayLayerClassName = "pointer-events-none absolute inset-0 z-10 select-none";
+const sidebarCollapsedFallbackRootClassName = "!w-[7rem] !min-w-[7rem] xl:!w-[7rem] xl:!min-w-[7rem]";
+const sidebarCollapsedFallbackBodyClassName = "custom-scrollbar flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto px-2 pb-3 pt-2 [&_[data-sidebar-panel]]:min-h-0 [&_[data-sidebar-panel]]:gap-2 [&_[data-sidebar-panel]]:rounded-sm [&_[data-sidebar-panel]]:p-1.5 [&_[data-sidebar-filter-bar]]:hidden [&_[data-sidebar-section-label]]:hidden [&_[data-sidebar-section-header]]:hidden [&_[data-sidebar-toolbar-actions]]:hidden [&_[data-segmented-control]]:grid [&_[data-segmented-control]]:w-full [&_[data-segmented-control]]:max-w-none [&_[data-segmented-control]]:grid-cols-1 [&_[data-segmented-control]]:border-transparent [&_[data-segmented-control]]:bg-transparent [&_[data-segmented-control]]:p-0 [&_[data-segmented-control-button]]:w-full [&_[data-segmented-control-button]]:justify-center [&_[data-segmented-control-button]]:px-2.5 [&_[data-segmented-control-button]]:py-2.5 [&_[data-segmented-control-button]]:text-xs-tight [&_[data-sidebar-item]]:rounded-sm [&_[data-sidebar-item]]:px-2.5 [&_[data-sidebar-item]]:py-2.5 [&_[data-sidebar-item]]:gap-2 [&_[data-sidebar-item]]:items-center [&_[data-sidebar-item]]:justify-center [&_[data-sidebar-item]>div.absolute]:hidden [&_[data-sidebar-item-button]]:w-full [&_[data-sidebar-item-button]]:flex-col [&_[data-sidebar-item-button]]:items-center [&_[data-sidebar-item-button]]:justify-center [&_[data-sidebar-item-button]]:gap-2 [&_[data-sidebar-item-body]]:flex [&_[data-sidebar-item-body]]:w-full [&_[data-sidebar-item-body]]:flex-col [&_[data-sidebar-item-body]]:items-center [&_[data-sidebar-item-body]]:text-center [&_[data-sidebar-item-body]>*+*]:hidden [&_[data-sidebar-item-title]]:line-clamp-2 [&_[data-sidebar-item-title]]:text-center [&_[data-sidebar-item-title]]:text-xs-tight [&_[data-sidebar-item-title]]:leading-tight [&_[data-sidebar-item-description]]:hidden [&_[data-sidebar-item-icon]]:mx-auto [&_[data-sidebar-item-icon]]:mt-0 [&_[data-sidebar-item-action]]:hidden [&_.grid]:grid-cols-1 [&_.grid]:gap-2 [&_button]:min-h-11";
+const sidebarMetaClassName = "mt-1.5 text-xs text-muted";
+const DEFAULT_APP_SIDEBAR_SYNC_ID = "primary-app-sidebar";
+const SIDEBAR_SYNC_STORAGE_PREFIX = "elizaos:ui:sidebar:";
+const sidebarSyncListeners = new Map();
+function getSidebarCollapsedStorageKey(syncId) {
+    return `${SIDEBAR_SYNC_STORAGE_PREFIX}${syncId}:collapsed`;
+}
+function readSidebarCollapsedSnapshot(syncId, fallbackValue) {
+    if (typeof window === "undefined")
+        return fallbackValue;
+    try {
+        const raw = window.localStorage.getItem(getSidebarCollapsedStorageKey(syncId));
+        return raw == null ? fallbackValue : raw === "true";
+    }
+    catch {
+        return fallbackValue;
+    }
+}
+function writeSidebarCollapsed(syncId, collapsed) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(getSidebarCollapsedStorageKey(syncId), String(collapsed));
+    }
+    catch {
+        /* ignore persistence failures */
+    }
+    const listeners = sidebarSyncListeners.get(syncId);
+    if (!listeners)
+        return;
+    for (const listener of listeners) {
+        listener();
+    }
+}
+function subscribeSidebarCollapsedStore(syncId, onStoreChange) {
+    const listeners = sidebarSyncListeners.get(syncId) ?? new Set();
+    listeners.add(onStoreChange);
+    sidebarSyncListeners.set(syncId, listeners);
+    const onStorage = (event) => {
+        if (event.key !== getSidebarCollapsedStorageKey(syncId))
+            return;
+        onStoreChange();
+    };
+    if (typeof window !== "undefined" &&
+        typeof window.addEventListener === "function") {
+        window.addEventListener("storage", onStorage);
+    }
+    return () => {
+        listeners.delete(onStoreChange);
+        if (listeners.size === 0) {
+            sidebarSyncListeners.delete(syncId);
+        }
+        if (typeof window !== "undefined" &&
+            typeof window.removeEventListener === "function") {
+            window.removeEventListener("storage", onStorage);
+        }
+    };
+}
+function useSidebarCollapsedStore(syncId, fallbackValue) {
+    return React.useSyncExternalStore(React.useCallback((onStoreChange) => {
+        if (!syncId)
+            return () => { };
+        return subscribeSidebarCollapsedStore(syncId, onStoreChange);
+    }, [syncId]), React.useCallback(() => syncId
+        ? readSidebarCollapsedSnapshot(syncId, fallbackValue)
+        : fallbackValue, [fallbackValue, syncId]), React.useCallback(() => fallbackValue, [fallbackValue]));
+}
+function useControllableState({ controlled, defaultValue, onChange, syncId, }) {
+    const fallbackValue = defaultValue ?? false;
+    const hasBrowserSync = Boolean(syncId && typeof window !== "undefined");
+    const syncedValue = useSidebarCollapsedStore(hasBrowserSync ? syncId : undefined, fallbackValue);
+    const [uncontrolled, setUncontrolled] = React.useState(fallbackValue);
+    const isControlled = controlled !== undefined;
+    const value = isControlled
+        ? controlled
+        : hasBrowserSync
+            ? (syncedValue ?? fallbackValue)
+            : uncontrolled;
+    React.useEffect(() => {
+        if (!hasBrowserSync || !syncId)
+            return undefined;
+        if (isControlled) {
+            if (readSidebarCollapsedSnapshot(syncId, fallbackValue) !== controlled) {
+                writeSidebarCollapsed(syncId, controlled);
+            }
+        }
+    }, [controlled, fallbackValue, hasBrowserSync, isControlled, syncId]);
+    const setValue = React.useCallback((next) => {
+        if (!isControlled && !hasBrowserSync) {
+            setUncontrolled(next);
+        }
+        if (hasBrowserSync && syncId) {
+            writeSidebarCollapsed(syncId, next);
+        }
+        onChange?.(next);
+    }, [hasBrowserSync, isControlled, onChange, syncId]);
+    return [value, setValue];
+}
+function useDefaultSidebarDesktopRailEnabled(variant) {
+    const [isDesktop, setIsDesktop] = React.useState(() => {
+        if (variant !== "default")
+            return false;
+        if (typeof window === "undefined" ||
+            typeof window.matchMedia !== "function") {
+            return true;
+        }
+        return window.matchMedia("(min-width: 768px)").matches;
+    });
+    React.useEffect(() => {
+        if (variant !== "default") {
+            setIsDesktop(false);
+            return;
+        }
+        if (typeof window === "undefined" ||
+            typeof window.matchMedia !== "function") {
+            setIsDesktop(true);
+            return;
+        }
+        const mediaQuery = window.matchMedia("(min-width: 768px)");
+        const update = () => setIsDesktop(mediaQuery.matches);
+        update();
+        if (typeof mediaQuery.addEventListener === "function") {
+            mediaQuery.addEventListener("change", update);
+            return () => mediaQuery.removeEventListener("change", update);
+        }
+        mediaQuery.addListener(update);
+        return () => mediaQuery.removeListener(update);
+    }, [variant]);
+    return isDesktop;
+}
+function usePrefersReducedMotion() {
+    const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(() => {
+        if (typeof window === "undefined" ||
+            typeof window.matchMedia !== "function") {
+            return false;
+        }
+        return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    });
+    React.useEffect(() => {
+        if (typeof window === "undefined" ||
+            typeof window.matchMedia !== "function") {
+            return undefined;
+        }
+        const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+        const update = () => setPrefersReducedMotion(mediaQuery.matches);
+        update();
+        if (typeof mediaQuery.addEventListener === "function") {
+            mediaQuery.addEventListener("change", update);
+            return () => mediaQuery.removeEventListener("change", update);
+        }
+        mediaQuery.addListener(update);
+        return () => mediaQuery.removeListener(update);
+    }, []);
+    return prefersReducedMotion;
+}
+function areSidebarAutoRailItemsEqual(left, right) {
+    if (left.length !== right.length)
+        return false;
+    return left.every((item, index) => {
+        const other = right[index];
+        return (item.key === other?.key &&
+            item.label === other?.label &&
+            item.active === other?.active &&
+            item.disabled === other?.disabled &&
+            item.contentKind === other?.contentKind &&
+            item.indicatorTone === other?.indicatorTone);
+    });
+}
+function getSidebarContentLayerMotionClassName({ direction, kind, overlay = false, phase, }) {
+    const isEntering = !overlay &&
+        ((direction === "collapsing" && kind === "collapsed") ||
+            (direction === "expanding" && kind === "expanded"));
+    const isExiting = overlay &&
+        ((direction === "collapsing" && kind === "expanded") ||
+            (direction === "expanding" && kind === "collapsed"));
+    if (!direction || !phase) {
+        return "opacity-100 translate-x-0 scale-100 blur-0";
+    }
+    if (isEntering) {
+        if (kind === "collapsed") {
+            return phase === "prepare"
+                ? "opacity-0 translate-x-[0.28rem] scale-[0.984] blur-[2px]"
+                : "opacity-100 translate-x-0 scale-100 blur-0 [transition-delay:125ms]";
+        }
+        return phase === "prepare"
+            ? "opacity-0 translate-x-[0.45rem] scale-[0.992] blur-[2px]"
+            : "opacity-100 translate-x-0 scale-100 blur-0 [transition-delay:110ms]";
+    }
+    if (isExiting) {
+        if (kind === "expanded") {
+            return phase === "prepare"
+                ? "opacity-100 translate-x-0 scale-100 blur-0"
+                : "opacity-0 -translate-x-[0.55rem] scale-[0.988] blur-[2px] duration-[150ms]";
+        }
+        return phase === "prepare"
+            ? "opacity-100 translate-x-0 scale-100 blur-0"
+            : "opacity-0 -translate-x-[0.28rem] scale-[0.982] blur-[2px] duration-[145ms]";
+    }
+    return "opacity-100 translate-x-0 scale-100 blur-0";
+}
+export const Sidebar = React.forwardRef(function Sidebar({ testId, variant = "default", collapsible = false, contentIdentity, syncId, collapsed, defaultCollapsed = false, onCollapsedChange, header, footer, collapsedContent, collapsedRailAction, collapsedRailItems, onMobileClose, mobileTitle, mobileMeta, mobileCloseLabel = "Close sidebar", collapseButtonTestId, expandButtonTestId, collapseButtonAriaLabel = "Collapse sidebar", expandButtonAriaLabel = "Expand sidebar", bodyClassName, headerClassName, footerClassName, collapsedContentClassName, className, children, ...props }, ref) {
+    const effectiveSyncId = syncId ??
+        (variant === "default" && collapsible
+            ? DEFAULT_APP_SIDEBAR_SYNC_ID
+            : undefined);
+    const [isCollapsed, setIsCollapsed] = useControllableState({
+        controlled: collapsed,
+        defaultValue: defaultCollapsed,
+        onChange: onCollapsedChange,
+        syncId: effectiveSyncId,
+    });
+    const desktopRailEnabled = useDefaultSidebarDesktopRailEnabled(variant);
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const supportsCollapsedRail = variant === "default" && collapsible && desktopRailEnabled;
+    const showsCollapsedState = supportsCollapsedRail && isCollapsed;
+    const [contentTransition, setContentTransition] = React.useState(null);
+    const hasCustomCollapsedContent = collapsedContent != null;
+    const hasStructuredCollapsedRail = collapsedRailAction != null || collapsedRailItems != null;
+    const autoRailSourceRef = React.useRef(null);
+    const autoRailItemsFromTree = React.useMemo(() => hasCustomCollapsedContent || hasStructuredCollapsedRail
+        ? []
+        : buildSidebarAutoRailItems(children), [children, hasCustomCollapsedContent, hasStructuredCollapsedRail]);
+    const needsDomAutoRailFallback = React.useMemo(() => !hasCustomCollapsedContent &&
+        !hasStructuredCollapsedRail &&
+        autoRailItemsFromTree.length === 0, [
+        autoRailItemsFromTree.length,
+        hasCustomCollapsedContent,
+        hasStructuredCollapsedRail,
+    ]);
+    const [autoRailItems, setAutoRailItems] = React.useState(autoRailItemsFromTree);
+    const showsCollapsedFallbackBody = showsCollapsedState &&
+        !hasCustomCollapsedContent &&
+        !hasStructuredCollapsedRail &&
+        autoRailItems.length === 0 &&
+        !needsDomAutoRailFallback;
+    const renderedContentIdentity = contentIdentity ?? variant;
+    React.useEffect(() => {
+        setAutoRailItems(autoRailItemsFromTree);
+    }, [autoRailItemsFromTree]);
+    React.useEffect(() => {
+        if (!needsDomAutoRailFallback)
+            return;
+        const sourceElement = autoRailSourceRef.current;
+        if (!sourceElement)
+            return;
+        const domRailItems = buildSidebarAutoRailItemsFromDom(sourceElement);
+        if (domRailItems.length > 0) {
+            setAutoRailItems((currentItems) => areSidebarAutoRailItemsEqual(currentItems, domRailItems)
+                ? currentItems
+                : domRailItems);
+        }
+    }, [needsDomAutoRailFallback]);
+    const transitionFrameRef = React.useRef(null);
+    const transitionTimeoutRef = React.useRef(null);
+    const clearTransitionTimers = React.useCallback(() => {
+        if (typeof window === "undefined")
+            return;
+        const clearTimer = typeof window.clearTimeout === "function"
+            ? window.clearTimeout.bind(window)
+            : globalThis.clearTimeout.bind(globalThis);
+        if (transitionFrameRef.current !== null) {
+            const frameHandle = transitionFrameRef.current;
+            if (typeof window.cancelAnimationFrame === "function") {
+                if (typeof frameHandle === "number") {
+                    window.cancelAnimationFrame(frameHandle);
+                }
+                else {
+                    clearTimer(frameHandle);
+                }
+            }
+            else {
+                clearTimer(frameHandle);
+            }
+            transitionFrameRef.current = null;
+        }
+        if (transitionTimeoutRef.current !== null) {
+            clearTimer(transitionTimeoutRef.current);
+            transitionTimeoutRef.current = null;
+        }
+    }, []);
+    const startContentTransition = React.useCallback((direction, nextCollapsed) => {
+        if (typeof window === "undefined" || prefersReducedMotion) {
+            setContentTransition(null);
+            setIsCollapsed(nextCollapsed);
+            return;
+        }
+        clearTransitionTimers();
+        setContentTransition({ direction, phase: "prepare" });
+        setIsCollapsed(nextCollapsed);
+        const scheduleTimeout = typeof window.setTimeout === "function"
+            ? window.setTimeout.bind(window)
+            : globalThis.setTimeout.bind(globalThis);
+        const scheduleFrame = typeof window.requestAnimationFrame === "function"
+            ? window.requestAnimationFrame.bind(window)
+            : (callback) => scheduleTimeout(() => callback(Date.now()), 16);
+        transitionFrameRef.current = scheduleFrame(() => {
+            setContentTransition({ direction, phase: "animate" });
+            transitionFrameRef.current = null;
+        });
+        transitionTimeoutRef.current = scheduleTimeout(() => {
+            setContentTransition(null);
+            transitionTimeoutRef.current = null;
+        }, 320);
+    }, [clearTransitionTimers, prefersReducedMotion, setIsCollapsed]);
+    React.useEffect(() => clearTransitionTimers, [clearTransitionTimers]);
+    const handleCollapse = React.useCallback(() => {
+        startContentTransition("collapsing", true);
+    }, [startContentTransition]);
+    const handleExpand = React.useCallback(() => {
+        startContentTransition("expanding", false);
+    }, [startContentTransition]);
+    const transitionDirection = contentTransition?.direction ?? null;
+    const transitionPhase = contentTransition?.phase ?? null;
+    const isCollapsing = transitionDirection === "collapsing";
+    const isExpanding = transitionDirection === "expanding";
+    const expandedBaseMotionClassName = getSidebarContentLayerMotionClassName({
+        direction: transitionDirection,
+        kind: "expanded",
+        phase: transitionPhase,
+    });
+    const collapsedBaseMotionClassName = getSidebarContentLayerMotionClassName({
+        direction: transitionDirection,
+        kind: "collapsed",
+        phase: transitionPhase,
+    });
+    const expandedOverlayMotionClassName = getSidebarContentLayerMotionClassName({
+        direction: transitionDirection,
+        kind: "expanded",
+        overlay: true,
+        phase: transitionPhase,
+    });
+    const collapsedOverlayMotionClassName = getSidebarContentLayerMotionClassName({
+        direction: transitionDirection,
+        kind: "collapsed",
+        overlay: true,
+        phase: transitionPhase,
+    });
+    const renderCollapsedInner = () => hasCustomCollapsedContent ? (collapsedContent) : hasStructuredCollapsedRail || autoRailItems.length > 0 ? (_jsx(SidebarCollapsedRail, { action: collapsedRailAction, className: collapsedContentClassName, children: collapsedRailItems ??
+            autoRailItems.map((item) => (_jsx(SidebarRailItem, { "aria-label": item.label, title: item.label, active: item.active, indicatorTone: item.indicatorTone, onClick: item.onClick, children: item.content }, item.key))) })) : (_jsx(SidebarBody, { className: cn(sidebarCollapsedFallbackBodyClassName, bodyClassName), children: children }));
+    const renderCollapsedView = ({ layerClassName, overlay = false, renderHiddenAutoRailSource = false, }) => (_jsxs("div", { "aria-hidden": overlay || undefined, className: cn(sidebarContentLayerClassName, overlay ? sidebarContentOverlayLayerClassName : undefined, layerClassName), children: [_jsx("div", { className: cn(sidebarHeaderVariants({
+                    variant,
+                    collapsed: true,
+                }), headerClassName), children: _jsxs("div", { className: cn(sidebarCollapsedContentClassName, collapsedContentClassName), children: [renderCollapsedInner(), _jsx("div", { className: "mt-auto flex w-full flex-col items-center pb-3 pt-2", children: _jsx(Button, { variant: "surface", size: "icon", "data-testid": expandButtonTestId, className: sidebarControlButtonClassName, "aria-label": expandButtonAriaLabel, onClick: handleExpand, children: _jsx(PanelLeftOpen, { className: "h-4 w-4" }) }) })] }) }), renderHiddenAutoRailSource ? (_jsx(SidebarBody, { ref: autoRailSourceRef, className: "hidden", "aria-hidden": true, children: children })) : null] }));
+    const renderExpandedView = ({ layerClassName, overlay = false, provideAutoRailSourceRef = false, }) => (_jsxs("div", { "aria-hidden": overlay || undefined, className: cn(sidebarContentLayerClassName, overlay ? sidebarContentOverlayLayerClassName : undefined, layerClassName), children: [header ? (_jsx("div", { className: cn(sidebarHeaderVariants({
+                    variant,
+                    collapsed: false,
+                }), headerClassName), children: header })) : null, _jsx(SidebarBody, { ref: provideAutoRailSourceRef ? autoRailSourceRef : undefined, className: bodyClassName, children: children }), footer ? (_jsx("div", { className: cn(sidebarFooterVariants(), footerClassName), children: footer })) : null, supportsCollapsedRail ? (_jsx("div", { className: cn(sidebarFooterVariants(), footerClassName), children: _jsx(Button, { variant: "surface", size: "icon", "data-testid": collapseButtonTestId, className: sidebarControlButtonClassName, "aria-label": collapseButtonAriaLabel, onClick: handleCollapse, children: _jsx(PanelLeftClose, { className: "h-4 w-4" }) }) })) : null] }));
+    return (_jsx("aside", { ref: ref, className: cn(sidebarRootVariants({
+            variant,
+            collapsed: variant === "default" ? showsCollapsedState : false,
+        }), showsCollapsedFallbackBody
+            ? sidebarCollapsedFallbackRootClassName
+            : undefined, className), "data-testid": testId, "data-collapsed": showsCollapsedState || undefined, "data-variant": variant, ...props, children: _jsxs(React.Fragment, { children: [variant === "mobile" ? (_jsxs("div", { className: sidebarMobileHeaderBarClassName, children: [_jsxs("div", { className: "space-y-1", children: [mobileTitle ? _jsx("div", { children: mobileTitle }) : null, mobileMeta ? (_jsx("div", { className: sidebarMetaClassName, children: mobileMeta })) : null] }), onMobileClose ? (_jsx(Button, { variant: "surface", size: "icon", className: "h-11 w-11 min-h-touch min-w-touch rounded-sm", onClick: onMobileClose, "aria-label": mobileCloseLabel, title: mobileCloseLabel, "data-testid": "conversations-mobile-close", children: _jsx(X, { className: "h-4 w-4", "aria-hidden": true }) })) : null] })) : null, _jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [showsCollapsedState
+                            ? renderCollapsedView({
+                                layerClassName: collapsedBaseMotionClassName,
+                                renderHiddenAutoRailSource: !hasCustomCollapsedContent && !hasStructuredCollapsedRail,
+                            })
+                            : renderExpandedView({
+                                layerClassName: expandedBaseMotionClassName,
+                                provideAutoRailSourceRef: !hasCustomCollapsedContent && !hasStructuredCollapsedRail,
+                            }), isCollapsing
+                            ? renderExpandedView({
+                                layerClassName: expandedOverlayMotionClassName,
+                                overlay: true,
+                            })
+                            : null, isExpanding
+                            ? renderCollapsedView({
+                                layerClassName: collapsedOverlayMotionClassName,
+                                overlay: true,
+                            })
+                            : null] })] }, renderedContentIdentity) }));
+});

package/packages/ui/src/components/composites/sidebar/sidebar-scroll-region.d.ts

@@ -0,0 +1,3 @@
+import type { SidebarScrollRegionProps } from "./sidebar-types";
+export declare function SidebarScrollRegion({ className, variant, ...props }: SidebarScrollRegionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar-scroll-region.d.ts.map

package/packages/ui/src/components/composites/sidebar/sidebar-scroll-region.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-scroll-region.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/sidebar/sidebar-scroll-region.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAkBhE,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAO1B"}

package/packages/ui/src/components/composites/sidebar/sidebar-scroll-region.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils";
+const sidebarScrollRegionVariants = cva("", {
+    variants: {
+        variant: {
+            default: "custom-scrollbar min-h-0 w-full min-w-0 flex-1 overflow-y-auto overscroll-contain px-2.5 pb-3 pt-3 supports-[scrollbar-gutter:stable]:[scrollbar-gutter:stable]",
+            mobile: "custom-scrollbar min-h-0 w-full min-w-0 flex-1 overflow-y-auto overscroll-contain px-2.5 pb-3 pt-3 supports-[scrollbar-gutter:stable]:[scrollbar-gutter:stable]",
+            "game-modal": "custom-scrollbar flex-1 min-h-0 w-full overflow-y-auto p-2.5",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+export function SidebarScrollRegion({ className, variant = "default", ...props }) {
+    return (_jsx("div", { className: cn(sidebarScrollRegionVariants({ variant }), className), ...props }));
+}

package/packages/ui/src/components/composites/sidebar/sidebar-types.d.ts

@@ -0,0 +1,59 @@
+import type * as React from "react";
+export type SidebarVariant = "default" | "game-modal" | "mobile";
+export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
+    testId?: string;
+    variant?: SidebarVariant;
+    collapsible?: boolean;
+    contentIdentity?: string;
+    syncId?: string;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    collapsedContent?: React.ReactNode;
+    collapsedRailAction?: React.ReactNode;
+    collapsedRailItems?: React.ReactNode;
+    onMobileClose?: () => void;
+    mobileTitle?: React.ReactNode;
+    mobileMeta?: React.ReactNode;
+    mobileCloseLabel?: string;
+    collapseButtonTestId?: string;
+    expandButtonTestId?: string;
+    collapseButtonAriaLabel?: string;
+    expandButtonAriaLabel?: string;
+    bodyClassName?: string;
+    headerClassName?: string;
+    footerClassName?: string;
+    collapsedContentClassName?: string;
+}
+export interface SidebarScrollRegionProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: SidebarVariant;
+}
+export interface SidebarPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: SidebarVariant;
+}
+export interface SidebarBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface SidebarHeaderStackProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface SidebarFilterBarOption {
+    value: string;
+    label: React.ReactNode;
+}
+export interface SidebarFilterBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    selectValue: string;
+    selectOptions: SidebarFilterBarOption[];
+    onSelectValueChange: (value: string) => void;
+    selectAriaLabel: string;
+    selectTestId?: string;
+    sortDirection: "asc" | "desc";
+    onSortDirectionToggle: () => void;
+    sortDirectionButtonTestId?: string;
+    sortAscendingLabel?: string;
+    sortDescendingLabel?: string;
+    refreshButtonTestId?: string;
+    refreshLabel?: string;
+    onRefresh: () => void;
+}
+//# sourceMappingURL=sidebar-types.d.ts.map

package/packages/ui/src/components/composites/sidebar/sidebar-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-types.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/sidebar/sidebar-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,YAAY,GAAG,QAAQ,CAAC;AAEjE,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,wBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,MAAM,WAAW,uBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,sBAAsB,EAAE,CAAC;IACxC,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,KAAK,GAAG,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB"}

package/packages/ui/src/components/composites/sidebar/sidebar-types.js

@@ -0,0 +1 @@
+export {};

package/packages/ui/src/components/composites/skills/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./skill-sidebar-item";
+//# sourceMappingURL=index.d.ts.map

package/packages/ui/src/components/composites/skills/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/skills/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/packages/ui/src/components/composites/skills/index.js

@@ -0,0 +1 @@
+export * from "./skill-sidebar-item";

package/packages/ui/src/components/composites/skills/skill-sidebar-item.d.ts

@@ -0,0 +1,16 @@
+import type * as React from "react";
+export interface SkillSidebarItemProps {
+    active?: boolean;
+    attentionLabel?: React.ReactNode;
+    description?: React.ReactNode;
+    enabled: boolean;
+    icon?: React.ReactNode;
+    name: React.ReactNode;
+    offLabel: React.ReactNode;
+    onLabel: React.ReactNode;
+    onSelect?: () => void;
+    testId?: string;
+    buttonProps?: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick" | "type">;
+}
+export declare function SkillSidebarItem({ active, attentionLabel, description, enabled, icon, name, offLabel, onLabel, onSelect, testId, buttonProps, }: SkillSidebarItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=skill-sidebar-item.d.ts.map

package/packages/ui/src/components/composites/skills/skill-sidebar-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill-sidebar-item.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/skills/skill-sidebar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,IAAI,CAChB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,SAAS,GAAG,MAAM,CAChC,CAAC;CACH;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,MAAc,EACd,cAAc,EACd,WAAW,EACX,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,MAAM,EACN,WAAW,GACZ,EAAE,qBAAqB,2CA6CvB"}

package/packages/ui/src/components/composites/skills/skill-sidebar-item.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SidebarContent } from "../sidebar";
+export function SkillSidebarItem({ active = false, attentionLabel, description, enabled, icon, name, offLabel, onLabel, onSelect, testId, buttonProps, }) {
+    return (_jsxs(SidebarContent.Item, { as: "div", active: active, "data-testid": testId, className: "items-start gap-2", children: [_jsxs(SidebarContent.ItemButton, { role: "option", "aria-selected": active, "aria-current": active ? "page" : undefined, onClick: onSelect, ...buttonProps, children: [_jsx(SidebarContent.ItemIcon, { active: active, children: icon }), _jsxs(SidebarContent.ItemBody, { children: [_jsx(SidebarContent.ItemTitle, { children: name }), description ? (_jsx(SidebarContent.ItemDescription, { children: description })) : null] })] }), _jsxs("div", { className: "flex shrink-0 flex-col items-end gap-2", children: [_jsx("span", { className: `rounded-full border px-2.5 py-1 text-2xs font-bold tracking-[0.16em] ${enabled
+                            ? "border-accent bg-accent text-accent-fg"
+                            : "border-border bg-transparent text-muted"}`, children: enabled ? onLabel : offLabel }), attentionLabel ? (_jsx("span", { className: "rounded-full border border-warn/30 bg-warn/12 px-2 py-0.5 text-3xs font-bold uppercase tracking-[0.14em] text-warn", children: attentionLabel })) : null] })] }));
+}

package/packages/ui/src/components/composites/trajectories/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./trajectory-code-block";
+export * from "./trajectory-llm-call-card";
+export * from "./trajectory-pipeline-graph";
+export * from "./trajectory-sidebar-item";
+//# sourceMappingURL=index.d.ts.map

package/packages/ui/src/components/composites/trajectories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/trajectories/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC"}

package/packages/ui/src/components/composites/trajectories/index.js

@@ -0,0 +1,4 @@
+export * from "./trajectory-code-block";
+export * from "./trajectory-llm-call-card";
+export * from "./trajectory-pipeline-graph";
+export * from "./trajectory-sidebar-item";

package/packages/ui/src/components/composites/trajectories/trajectory-code-block.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface TrajectoryCodeBlockProps {
+    collapseLabel: React.ReactNode;
+    content: string;
+    copyLabel: React.ReactNode;
+    copyToClipboardLabel?: string;
+    expandLabel: React.ReactNode;
+    label: React.ReactNode;
+    linesLabel: React.ReactNode;
+    onCopy: (content: string) => void;
+}
+export declare function TrajectoryCodeBlock({ collapseLabel, content, copyLabel, copyToClipboardLabel, expandLabel, label, linesLabel, onCopy, }: TrajectoryCodeBlockProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=trajectory-code-block.d.ts.map

package/packages/ui/src/components/composites/trajectories/trajectory-code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trajectory-code-block.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/trajectories/trajectory-code-block.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,wBAAwB;IACvC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,OAAO,EACP,SAAS,EACT,oBAAoB,EACpB,WAAW,EACX,KAAK,EACL,UAAU,EACV,MAAM,GACP,EAAE,wBAAwB,2CA4C1B"}

package/packages/ui/src/components/composites/trajectories/trajectory-code-block.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "../../ui/button";
+import { PagePanel } from "../page-panel";
+export function TrajectoryCodeBlock({ collapseLabel, content, copyLabel, copyToClipboardLabel, expandLabel, label, linesLabel, onCopy, }) {
+    const [expanded, setExpanded] = React.useState(false);
+    const lines = content.split("\n").length;
+    const shouldTruncate = !expanded && lines > 20;
+    const displayContent = shouldTruncate
+        ? `${content.split("\n").slice(0, 20).join("\n")}\n...`
+        : content;
+    return (_jsxs(PagePanel, { variant: "inset", className: "overflow-hidden", children: [_jsx(PagePanel.Header, { heading: label, description: linesLabel, actions: _jsxs(PagePanel.ActionRail, { className: "rounded-full px-1 py-1", children: [lines > 20 ? (_jsx(Button, { variant: "outline", size: "sm", type: "button", className: "h-8 rounded-full px-3 text-xs-tight", onClick: () => setExpanded((current) => !current), children: expanded ? collapseLabel : expandLabel })) : null, _jsx(Button, { variant: "outline", size: "sm", type: "button", className: "h-8 rounded-full px-3 text-xs-tight", onClick: () => onCopy(content), title: copyToClipboardLabel, children: copyLabel })] }) }), _jsx("pre", { className: "max-h-[28rem] overflow-x-auto overflow-y-auto whitespace-pre-wrap break-words px-4 py-4 text-xs leading-6 text-txt", children: displayContent })] }));
+}