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

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

@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useRef } from "react";
+function scrollElementIntoNearestView(element, alignToTop = false, behavior = "smooth") {
+    element?.scrollIntoView({
+        behavior,
+        block: alignToTop ? "start" : "nearest",
+        inline: "nearest",
+    });
+}
+function readElementAlignmentOffset(element) {
+    if (!element)
+        return 0;
+    const rawValue = element.dataset.contentAlignOffset;
+    if (!rawValue)
+        return 0;
+    const parsed = Number(rawValue);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
+export function useLinkedSidebarSelection({ contentTopOffset = 16, enabled = true, selectedId, topAlignedId = null, }) {
+    const contentContainerRef = useRef(null);
+    const sidebarViewportRef = useRef(null);
+    const contentRefs = useRef({});
+    const sidebarItemRefs = useRef({});
+    const railItemRefs = useRef({});
+    const pendingContentAlignmentRef = useRef(null);
+    const queuedAlignmentFrameRef = useRef(null);
+    const hasAppliedInitialSelectionRef = useRef(false);
+    const registerContentItem = useCallback((id) => (node) => {
+        contentRefs.current[id] = node;
+    }, []);
+    const registerSidebarItem = useCallback((id) => (node) => {
+        sidebarItemRefs.current[id] = node;
+    }, []);
+    const registerRailItem = useCallback((id) => (node) => {
+        railItemRefs.current[id] = node;
+    }, []);
+    const registerSidebarViewport = useCallback((node) => {
+        sidebarViewportRef.current = node;
+    }, []);
+    const scrollContentToItem = useCallback((id) => {
+        const scrollRoot = contentContainerRef.current;
+        const element = contentRefs.current[id];
+        const sidebarViewport = sidebarViewportRef.current;
+        if (scrollRoot && element) {
+            if (topAlignedId && id === topAlignedId) {
+                scrollRoot.scrollTo({
+                    top: 0,
+                    behavior: "smooth",
+                });
+                return;
+            }
+            const elementRect = element.getBoundingClientRect();
+            const nextTop = sidebarViewport
+                ? scrollRoot.scrollTop +
+                    (elementRect.top - sidebarViewport.getBoundingClientRect().top)
+                : scrollRoot.scrollTop +
+                    (elementRect.top - scrollRoot.getBoundingClientRect().top) -
+                    contentTopOffset +
+                    readElementAlignmentOffset(element);
+            scrollRoot.scrollTo({
+                top: Math.max(nextTop, 0),
+                behavior: "smooth",
+            });
+            return;
+        }
+        element?.scrollIntoView({
+            behavior: "smooth",
+            block: topAlignedId && id === topAlignedId ? "start" : "nearest",
+        });
+    }, [contentTopOffset, topAlignedId]);
+    const queueContentAlignment = useCallback((id) => {
+        pendingContentAlignmentRef.current = id;
+        if (!enabled)
+            return;
+        if (typeof window === "undefined") {
+            pendingContentAlignmentRef.current = null;
+            scrollContentToItem(id);
+            return;
+        }
+        if (queuedAlignmentFrameRef.current != null) {
+            window.cancelAnimationFrame(queuedAlignmentFrameRef.current);
+        }
+        queuedAlignmentFrameRef.current = window.requestAnimationFrame(() => {
+            queuedAlignmentFrameRef.current = window.requestAnimationFrame(() => {
+                const targetId = pendingContentAlignmentRef.current;
+                pendingContentAlignmentRef.current = null;
+                queuedAlignmentFrameRef.current = null;
+                if (!targetId)
+                    return;
+                scrollContentToItem(targetId);
+            });
+        });
+    }, [enabled, scrollContentToItem]);
+    useEffect(() => () => {
+        if (queuedAlignmentFrameRef.current != null &&
+            typeof window !== "undefined") {
+            window.cancelAnimationFrame(queuedAlignmentFrameRef.current);
+        }
+    }, []);
+    useEffect(() => {
+        if (!enabled || !selectedId)
+            return;
+        const alignToTop = topAlignedId != null && selectedId === topAlignedId;
+        const behavior = hasAppliedInitialSelectionRef.current ? "smooth" : "auto";
+        hasAppliedInitialSelectionRef.current = true;
+        scrollElementIntoNearestView(sidebarItemRefs.current[selectedId], alignToTop, behavior);
+        scrollElementIntoNearestView(railItemRefs.current[selectedId], alignToTop, behavior);
+    }, [enabled, selectedId, topAlignedId]);
+    return {
+        contentContainerRef,
+        queueContentAlignment,
+        registerContentItem,
+        registerRailItem,
+        registerSidebarItem,
+        registerSidebarViewport,
+        scrollContentToItem,
+    };
+}

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

@@ -0,0 +1,5 @@
+export declare function useTimeout(): {
+    setTimeout: (callback: () => void, ms: number) => NodeJS.Timeout;
+    clearTimeout: (id: ReturnType<typeof setTimeout>) => void;
+};
+//# sourceMappingURL=useTimeout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTimeout.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useTimeout.ts"],"names":[],"mappings":"AAEA,wBAAgB,UAAU;2BAGsB,MAAM,IAAI,MAAM,MAAM;uBAS1B,UAAU,CAAC,OAAO,UAAU,CAAC;EAgBxE"}

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

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useRef } from "react";
+export function useTimeout() {
+    const timeoutRefs = useRef(new Set());
+    const setSafeTimeout = useCallback((callback, ms) => {
+        const id = setTimeout(() => {
+            timeoutRefs.current.delete(id);
+            callback();
+        }, ms);
+        timeoutRefs.current.add(id);
+        return id;
+    }, []);
+    const clearSafeTimeout = useCallback((id) => {
+        clearTimeout(id);
+        timeoutRefs.current.delete(id);
+    }, []);
+    useEffect(() => {
+        const refs = timeoutRefs;
+        return () => {
+            for (const id of refs.current) {
+                clearTimeout(id);
+            }
+            refs.current.clear();
+        };
+    }, []);
+    return { setTimeout: setSafeTimeout, clearTimeout: clearSafeTimeout };
+}

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

@@ -0,0 +1,8 @@
+export * from "./components/composites";
+export * from "./components/composites/chat/chat-source";
+export * from "./components/primitives";
+export * from "./hooks";
+export * from "./layouts";
+export * from "./lib/floating-layers";
+export * from "./lib/utils";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,0CAA0C,CAAC;AACzD,cAAc,yBAAyB,CAAC;AACxC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC"}

package/packages/ui/src/index.js

@@ -0,0 +1,7 @@
+export * from "./components/composites";
+export * from "./components/composites/chat/chat-source";
+export * from "./components/primitives";
+export * from "./hooks";
+export * from "./layouts";
+export * from "./lib/floating-layers";
+export * from "./lib/utils";

package/packages/ui/src/layouts/chat-panel-layout/chat-panel-layout.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type ChatPanelLayoutVariant = "full-overlay" | "companion-dock";
+export interface ChatPanelLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: ChatPanelLayoutVariant;
+    sidebar?: React.ReactNode;
+    mobileSidebar?: React.ReactNode;
+    showSidebar?: boolean;
+    thread: React.ReactNode;
+}
+export declare function ChatPanelLayout({ variant, sidebar, mobileSidebar, showSidebar, thread, className, ...props }: ChatPanelLayoutProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chat-panel-layout.d.ts.map

package/packages/ui/src/layouts/chat-panel-layout/chat-panel-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-panel-layout.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/chat-panel-layout/chat-panel-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,sBAAsB,GAAG,cAAc,GAAG,gBAAgB,CAAC;AAEvE,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAiCD,wBAAgB,eAAe,CAAC,EAC9B,OAAwB,EACxB,OAAO,EACP,aAAa,EACb,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAuDtB"}

package/packages/ui/src/layouts/chat-panel-layout/chat-panel-layout.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function useMatchMedia(query) {
+    const [matches, setMatches] = React.useState(() => typeof window !== "undefined" && typeof window.matchMedia === "function"
+        ? window.matchMedia(query).matches
+        : false);
+    React.useEffect(() => {
+        if (typeof window === "undefined" ||
+            typeof window.matchMedia !== "function") {
+            return;
+        }
+        const mediaQuery = window.matchMedia(query);
+        const handleChange = () => setMatches(mediaQuery.matches);
+        handleChange();
+        if (typeof mediaQuery.addEventListener === "function") {
+            mediaQuery.addEventListener("change", handleChange);
+            return () => mediaQuery.removeEventListener("change", handleChange);
+        }
+        mediaQuery.addListener(handleChange);
+        return () => mediaQuery.removeListener(handleChange);
+    }, [query]);
+    return matches;
+}
+export function ChatPanelLayout({ variant = "full-overlay", sidebar, mobileSidebar, showSidebar = false, thread, className, ...props }) {
+    const isCompanionDock = variant === "companion-dock";
+    const isNarrow = useMatchMedia("(max-width: 768px)");
+    const showMobileSidebar = isCompanionDock && showSidebar && isNarrow;
+    const showDesktopSidebar = !isCompanionDock || (showSidebar && !isNarrow);
+    return (_jsx("div", { className: cn(isCompanionDock
+            ? "absolute inset-0 z-10 flex flex-col bg-transparent pb-2 pt-2 sm:pb-4 sm:pt-4"
+            : "absolute inset-[max(1rem,6vh)_max(0.75rem,6vw)] z-[100] flex flex-col", className), "data-chat-game-overlay": !isCompanionDock || undefined, "data-chat-game-dock": isCompanionDock || undefined, ...props, children: _jsxs("div", { className: isCompanionDock
+                ? "relative flex min-h-0 flex-1 flex-col overflow-visible rounded-3xl bg-transparent pointer-events-none"
+                : "relative flex min-h-0 flex-1 flex-col rounded-3xl border border-border/60 shadow-[0_28px_90px_rgba(3,5,10,0.45)] ring-1 ring-white/5 overflow-hidden bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_90%,transparent),color-mix(in_srgb,var(--bg)_86%,transparent))] backdrop-blur-xl", "data-chat-game-shell": true, children: [showMobileSidebar ? mobileSidebar : null, _jsxs("div", { className: "flex-1 flex min-h-0", children: [sidebar ? (_jsx("aside", { className: cn("w-[292px] shrink-0 xl:w-[320px]", showDesktopSidebar ? "hidden md:flex" : "hidden", isCompanionDock && "pointer-events-auto"), "data-chat-game-sidebar": true, children: sidebar })) : null, _jsx("section", { className: cn("flex-1 flex flex-col min-w-0 bg-transparent relative", isCompanionDock
+                                ? "overflow-visible pointer-events-auto"
+                                : "overflow-hidden"), "data-chat-game-thread": true, children: thread })] })] }) }));
+}

package/packages/ui/src/layouts/chat-panel-layout/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./chat-panel-layout";
+//# sourceMappingURL=index.d.ts.map

package/packages/ui/src/layouts/chat-panel-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/chat-panel-layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/packages/ui/src/layouts/chat-panel-layout/index.js

@@ -0,0 +1 @@
+export * from "./chat-panel-layout";

package/packages/ui/src/layouts/content-layout/content-layout.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ContentLayout — single-pane layout shell for views without a sidebar.
+ *
+ * Uses the same shared workspace shell as PageLayout, but keeps the
+ * content header inside the scrollable column for single-pane pages.
+ */
+import type { ReactNode } from "react";
+export interface ContentLayoutProps {
+    /** Optional header rendered above the content (e.g. SegmentedControl nav). */
+    contentHeader?: ReactNode;
+    /** Content body. */
+    children: ReactNode;
+    /** When true, strips outer padding for modal embedding. */
+    inModal?: boolean;
+    /** Additional classes on the outer scroll container. */
+    className?: string;
+    /** Additional classes on the inner content wrapper. */
+    contentClassName?: string;
+}
+export declare function ContentLayout({ contentHeader, children, inModal, className, contentClassName, }: ContentLayoutProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=content-layout.d.ts.map

package/packages/ui/src/layouts/content-layout/content-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-layout.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/content-layout/content-layout.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,kBAAkB;IACjC,8EAA8E;IAC9E,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,EAC5B,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,gBAAgB,GACjB,EAAE,kBAAkB,2CAYpB"}

package/packages/ui/src/layouts/content-layout/content-layout.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WorkspaceLayout } from "../workspace-layout";
+export function ContentLayout({ contentHeader, children, inModal, className, contentClassName, }) {
+    return (_jsx(WorkspaceLayout, { className: className, contentClassName: contentClassName, contentHeader: contentHeader, contentPadding: !inModal, headerPlacement: "inside", children: children }));
+}

package/packages/ui/src/layouts/content-layout/index.d.ts

@@ -0,0 +1,2 @@
+export { ContentLayout, type ContentLayoutProps } from "./content-layout";
+//# sourceMappingURL=index.d.ts.map

package/packages/ui/src/layouts/content-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/content-layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC"}

package/packages/ui/src/layouts/content-layout/index.js

@@ -0,0 +1 @@
+export { ContentLayout } from "./content-layout";

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

@@ -0,0 +1,5 @@
+export * from "./chat-panel-layout";
+export * from "./content-layout";
+export * from "./page-layout";
+export * from "./workspace-layout";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC"}

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

@@ -0,0 +1,4 @@
+export * from "./chat-panel-layout";
+export * from "./content-layout";
+export * from "./page-layout";
+export * from "./workspace-layout";

package/packages/ui/src/layouts/layout-test-utils.d.ts

@@ -0,0 +1,6 @@
+import type { SidebarProps } from "../components/composites/sidebar";
+export declare function installMatchMedia(matches: boolean): Set<(event: MediaQueryListEvent) => void>;
+export declare function enableTestRenderer(): void;
+export declare function disableTestRenderer(): void;
+export declare function SidebarProbe({ collapsible, mobileTitle, onMobileClose, testId, variant, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=layout-test-utils.d.ts.map

package/packages/ui/src/layouts/layout-test-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-test-utils.d.ts","sourceRoot":"","sources":["../../../../../src/layouts/layout-test-utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAErE,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,eACd,mBAAmB,KAAK,IAAI,EAgC/D;AAED,wBAAgB,kBAAkB,SAEjC;AAED,wBAAgB,mBAAmB,SAElC;AAED,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,WAAW,EACX,aAAa,EACb,MAAwB,EACxB,OAAO,GACR,EAAE,YAAY,2CAad"}

package/packages/ui/src/layouts/layout-test-utils.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function installMatchMedia(matches) {
+    const listeners = new Set();
+    Object.defineProperty(window, "matchMedia", {
+        configurable: true,
+        writable: true,
+        value: () => ({
+            matches,
+            media: "(min-width: 768px)",
+            onchange: null,
+            addEventListener: (_, listener) => {
+                listeners.add(listener);
+            },
+            removeEventListener: (_, listener) => {
+                listeners.delete(listener);
+            },
+            addListener: (listener) => {
+                listeners.add(listener);
+            },
+            removeListener: (listener) => {
+                listeners.delete(listener);
+            },
+            dispatchEvent: () => true,
+        }),
+    });
+    return listeners;
+}
+export function enableTestRenderer() {
+    globalThis.__TEST_RENDERER__ = true;
+}
+export function disableTestRenderer() {
+    delete globalThis.__TEST_RENDERER__;
+}
+export function SidebarProbe({ collapsible, mobileTitle, onMobileClose, testId = "sidebar-probe", variant, }) {
+    return (_jsxs("aside", { "data-testid": testId, children: [_jsx("div", { children: `variant:${variant ?? "unset"}` }), _jsx("div", { children: `collapsible:${String(collapsible)}` }), _jsx("div", { children: mobileTitle ?? "Browse" }), onMobileClose ? (_jsx("button", { type: "button", onClick: onMobileClose, children: "Close sidebar" })) : null] }));
+}

package/packages/ui/src/layouts/page-layout/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./page-layout";
+export * from "./page-layout-header";
+export * from "./page-layout-mobile-drawer";
+export * from "./page-layout-types";
+//# sourceMappingURL=index.d.ts.map

package/packages/ui/src/layouts/page-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/page-layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC"}

package/packages/ui/src/layouts/page-layout/index.js

@@ -0,0 +1,4 @@
+export * from "./page-layout";
+export * from "./page-layout-header";
+export * from "./page-layout-mobile-drawer";
+export * from "./page-layout-types";

package/packages/ui/src/layouts/page-layout/page-layout-header.d.ts

@@ -0,0 +1,5 @@
+import type * as React from "react";
+export interface PageLayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function PageLayoutHeader({ className, ...props }: PageLayoutHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=page-layout-header.d.ts.map

package/packages/ui/src/layouts/page-layout/page-layout-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-layout-header.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/page-layout/page-layout-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAEvB"}

package/packages/ui/src/layouts/page-layout/page-layout-header.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+export function PageLayoutHeader({ className, ...props }) {
+    return _jsx("div", { className: cn("mb-4 shrink-0", className), ...props });
+}

package/packages/ui/src/layouts/page-layout/page-layout-mobile-drawer.d.ts

@@ -0,0 +1,3 @@
+import type { PageLayoutMobileDrawerProps } from "./page-layout-types";
+export declare function PageLayoutMobileDrawer({ isDesktop, mobileSidebarLabel, mobileSidebarOpen, mobileSidebarTriggerClassName, onMobileSidebarOpenChange, sidebar, }: PageLayoutMobileDrawerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=page-layout-mobile-drawer.d.ts.map

package/packages/ui/src/layouts/page-layout/page-layout-mobile-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-layout-mobile-drawer.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/page-layout/page-layout-mobile-drawer.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,qBAAqB,CAAC;AAEvE,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,kBAAkB,EAClB,iBAAiB,EACjB,6BAA6B,EAC7B,yBAAyB,EACzB,OAAO,GACR,EAAE,2BAA2B,kDA+C7B"}

package/packages/ui/src/layouts/page-layout/page-layout-mobile-drawer.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PanelLeftOpen } from "lucide-react";
+import * as React from "react";
+import { Button } from "../../components/ui/button";
+import { DrawerSheet, DrawerSheetContent, DrawerSheetHeader, DrawerSheetTitle, } from "../../components/ui/drawer-sheet";
+import { cn } from "../../lib/utils";
+export function PageLayoutMobileDrawer({ isDesktop, mobileSidebarLabel, mobileSidebarOpen, mobileSidebarTriggerClassName, onMobileSidebarOpenChange, sidebar, }) {
+    if (isDesktop)
+        return null;
+    const mobileSidebarElement = React.cloneElement(sidebar, {
+        className: cn("!mt-0 !h-full !w-full !min-w-0", sidebar.props.className),
+        collapsible: false,
+        variant: "mobile",
+        onMobileClose: () => onMobileSidebarOpenChange(false),
+    });
+    const drawerLabel = sidebar.props.mobileTitle ?? mobileSidebarLabel ?? "Browse";
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "mb-3 flex items-center md:hidden", children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: cn("h-11 rounded-2xl px-4 text-sm font-semibold shadow-sm", mobileSidebarTriggerClassName), onClick: () => onMobileSidebarOpenChange(true), children: [_jsx(PanelLeftOpen, { className: "h-4 w-4" }), drawerLabel] }) }), _jsx(DrawerSheet, { open: mobileSidebarOpen, onOpenChange: onMobileSidebarOpenChange, children: _jsxs(DrawerSheetContent, { "aria-describedby": undefined, className: "h-[min(calc(100dvh-1rem-var(--safe-area-top,0px)-var(--safe-area-bottom,0px)),46rem)] p-0", showCloseButton: false, children: [_jsx(DrawerSheetHeader, { className: "sr-only", children: _jsx(DrawerSheetTitle, { children: drawerLabel }) }), mobileSidebarElement] }) })] }));
+}

package/packages/ui/src/layouts/page-layout/page-layout-types.d.ts

@@ -0,0 +1,15 @@
+import type * as React from "react";
+import type { SidebarProps } from "../../components/composites/sidebar";
+import type { WorkspaceLayoutProps } from "../workspace-layout/workspace-layout-types";
+export interface PageLayoutProps extends Omit<WorkspaceLayoutProps, "headerPlacement" | "sidebar"> {
+    sidebar: React.ReactElement<SidebarProps>;
+}
+export interface PageLayoutMobileDrawerProps {
+    isDesktop: boolean;
+    mobileSidebarLabel?: React.ReactNode;
+    mobileSidebarOpen: boolean;
+    mobileSidebarTriggerClassName?: string;
+    onMobileSidebarOpenChange: (open: boolean) => void;
+    sidebar: React.ReactElement<SidebarProps>;
+}
+//# sourceMappingURL=page-layout-types.d.ts.map

package/packages/ui/src/layouts/page-layout/page-layout-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-layout-types.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/page-layout/page-layout-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAEvF,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACjE,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,2BAA2B;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,yBAAyB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;CAC3C"}

package/packages/ui/src/layouts/page-layout/page-layout-types.js

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

package/packages/ui/src/layouts/page-layout/page-layout.d.ts

@@ -0,0 +1,3 @@
+import type { PageLayoutProps } from "./page-layout-types";
+export declare function PageLayout(props: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=page-layout.d.ts.map

package/packages/ui/src/layouts/page-layout/page-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-layout.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/page-layout/page-layout.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAEhD"}

package/packages/ui/src/layouts/page-layout/page-layout.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WorkspaceLayout } from "../workspace-layout";
+export function PageLayout(props) {
+    return _jsx(WorkspaceLayout, { ...props, headerPlacement: "outside" });
+}

package/packages/ui/src/layouts/workspace-layout/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./workspace-layout";
+export * from "./workspace-layout-types";
+//# sourceMappingURL=index.d.ts.map

package/packages/ui/src/layouts/workspace-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/workspace-layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC"}

package/packages/ui/src/layouts/workspace-layout/index.js

@@ -0,0 +1,2 @@
+export * from "./workspace-layout";
+export * from "./workspace-layout-types";

package/packages/ui/src/layouts/workspace-layout/workspace-layout-types.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+import type { SidebarProps } from "../../components/composites/sidebar";
+export type WorkspaceLayoutHeaderPlacement = "inside" | "outside";
+export interface WorkspaceLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    sidebar?: React.ReactElement<SidebarProps> | null;
+    contentHeader?: React.ReactNode;
+    contentHeaderClassName?: string;
+    contentClassName?: string;
+    contentInnerClassName?: string;
+    contentRef?: React.Ref<HTMLElement>;
+    sidebarCollapsible?: boolean;
+    mobileSidebarLabel?: React.ReactNode;
+    mobileSidebarTriggerClassName?: string;
+    contentPadding?: boolean;
+    headerPlacement?: WorkspaceLayoutHeaderPlacement;
+    footer?: React.ReactNode;
+    footerClassName?: string;
+}
+//# sourceMappingURL=workspace-layout-types.d.ts.map

package/packages/ui/src/layouts/workspace-layout/workspace-layout-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-layout-types.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/workspace-layout/workspace-layout-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAExE,MAAM,MAAM,8BAA8B,GAAG,QAAQ,GAAG,SAAS,CAAC;AAElE,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC;IAClD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,8BAA8B,CAAC;IACjD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B"}

package/packages/ui/src/layouts/workspace-layout/workspace-layout-types.js

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

package/packages/ui/src/layouts/workspace-layout/workspace-layout.d.ts

@@ -0,0 +1,3 @@
+import type { WorkspaceLayoutProps } from "./workspace-layout-types";
+export declare function WorkspaceLayout({ children, className, contentClassName, contentHeader, contentHeaderClassName, contentInnerClassName, contentPadding, contentRef, footer, footerClassName, headerPlacement, mobileSidebarLabel, mobileSidebarTriggerClassName, sidebar, sidebarCollapsible, ...props }: WorkspaceLayoutProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=workspace-layout.d.ts.map

package/packages/ui/src/layouts/workspace-layout/workspace-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-layout.d.ts","sourceRoot":"","sources":["../../../../../../src/layouts/workspace-layout/workspace-layout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAuCrE,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,sBAAsB,EACtB,qBAAqB,EACrB,cAAqB,EACrB,UAAU,EACV,MAAM,EACN,eAAe,EACf,eAA2B,EAC3B,kBAAkB,EAClB,6BAA6B,EAC7B,OAAO,EACP,kBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAyFtB"}

package/packages/ui/src/layouts/workspace-layout/workspace-layout.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { PageLayoutHeader } from "../page-layout/page-layout-header";
+import { PageLayoutMobileDrawer } from "../page-layout/page-layout-mobile-drawer";
+function useWorkspaceLayoutDesktopMode() {
+    const [isDesktop, setIsDesktop] = React.useState(() => {
+        if (typeof window === "undefined" ||
+            typeof window.matchMedia !== "function") {
+            return true;
+        }
+        return window.matchMedia("(min-width: 768px)").matches;
+    });
+    React.useEffect(() => {
+        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);
+    }, []);
+    return isDesktop;
+}
+export function WorkspaceLayout({ children, className, contentClassName, contentHeader, contentHeaderClassName, contentInnerClassName, contentPadding = true, contentRef, footer, footerClassName, headerPlacement = "outside", mobileSidebarLabel, mobileSidebarTriggerClassName, sidebar, sidebarCollapsible = true, ...props }) {
+    const isDesktop = useWorkspaceLayoutDesktopMode();
+    const [mobileSidebarOpen, setMobileSidebarOpen] = React.useState(false);
+    React.useEffect(() => {
+        if (isDesktop) {
+            setMobileSidebarOpen(false);
+        }
+    }, [isDesktop]);
+    const desktopSidebarElement = sidebar
+        ? React.cloneElement(sidebar, {
+            className: cn("!mt-0 !h-full", sidebar.props.className),
+            collapsible: sidebar.props.collapsible ?? (sidebarCollapsible && isDesktop),
+            variant: sidebar.props.variant ?? "default",
+        })
+        : null;
+    const headerElement = contentHeader ? (_jsx(PageLayoutHeader, { className: contentHeaderClassName, children: contentHeader })) : null;
+    return (_jsxs("div", { className: cn("flex w-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden", className), ...props, children: [contentHeader && headerPlacement === "outside" ? (_jsx("div", { className: cn("shrink-0", contentPadding && "px-4 pt-2 sm:px-6 sm:pt-3 lg:px-7 lg:pt-4"), children: headerElement })) : null, _jsxs("div", { className: cn("flex w-full min-h-0 min-w-0 flex-1 flex-col", sidebar && "md:flex-row"), children: [desktopSidebarElement ? (_jsx("div", { className: "hidden min-h-0 w-full shrink-0 items-stretch px-0 pb-0 pt-2 sm:pt-3 md:flex md:w-auto lg:pt-4", children: desktopSidebarElement })) : null, _jsxs("main", { ref: contentRef, className: cn("chat-native-scrollbar relative flex min-w-0 flex-1 flex-col overflow-y-auto bg-transparent", contentPadding &&
+                            "px-4 pb-4 pt-2 sm:px-6 sm:pb-6 sm:pt-3 lg:px-7 lg:pb-7 lg:pt-4", contentClassName), children: [sidebar ? (_jsx(PageLayoutMobileDrawer, { isDesktop: isDesktop, mobileSidebarLabel: mobileSidebarLabel, mobileSidebarOpen: mobileSidebarOpen, mobileSidebarTriggerClassName: mobileSidebarTriggerClassName, onMobileSidebarOpenChange: setMobileSidebarOpen, sidebar: sidebar })) : null, contentHeader && headerPlacement === "inside" ? headerElement : null, _jsx("div", { className: cn("flex w-full min-h-0 flex-1 flex-col", contentInnerClassName), children: children })] })] })] }));
+}

package/packages/ui/src/lib/floating-layers.d.ts

@@ -0,0 +1,17 @@
+export declare const Z_BASE = 0;
+export declare const Z_DROPDOWN = 10;
+export declare const Z_STICKY = 20;
+export declare const Z_MODAL_BACKDROP = 50;
+export declare const Z_MODAL = 100;
+export declare const Z_DIALOG_OVERLAY = 160;
+export declare const Z_DIALOG = 170;
+export declare const Z_OVERLAY = 200;
+export declare const Z_TOOLTIP = 300;
+export declare const Z_SYSTEM_BANNER = 9998;
+export declare const Z_SYSTEM_CRITICAL = 9999;
+export declare const Z_SHELL_OVERLAY = 10000;
+export declare const Z_GLOBAL_EMOTE = 11000;
+export declare const Z_SELECT_FLOAT = 12000;
+export declare const SELECT_FLOATING_LAYER_NAME = "config-select";
+export declare const SELECT_FLOATING_LAYER_Z_INDEX = 12000;
+//# sourceMappingURL=floating-layers.d.ts.map

package/packages/ui/src/lib/floating-layers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-layers.d.ts","sourceRoot":"","sources":["../../../../../src/lib/floating-layers.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,IAAI,CAAC;AACxB,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,QAAQ,KAAK,CAAC;AAC3B,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,eAAO,MAAM,OAAO,MAAM,CAAC;AAC3B,eAAO,MAAM,gBAAgB,MAAM,CAAC;AACpC,eAAO,MAAM,QAAQ,MAAM,CAAC;AAC5B,eAAO,MAAM,SAAS,MAAM,CAAC;AAC7B,eAAO,MAAM,SAAS,MAAM,CAAC;AAC7B,eAAO,MAAM,eAAe,OAAO,CAAC;AACpC,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,eAAe,QAAQ,CAAC;AACrC,eAAO,MAAM,cAAc,QAAQ,CAAC;AACpC,eAAO,MAAM,cAAc,QAAQ,CAAC;AAGpC,eAAO,MAAM,0BAA0B,kBAAkB,CAAC;AAC1D,eAAO,MAAM,6BAA6B,QAAiB,CAAC"}

package/packages/ui/src/lib/floating-layers.js

@@ -0,0 +1,20 @@
+// ── Z-index scale ──────────────────────────────────────────────
+// Every z-index in the app must come from this file.
+// Values are intentionally sparse so new layers can be inserted.
+export const Z_BASE = 0;
+export const Z_DROPDOWN = 10;
+export const Z_STICKY = 20;
+export const Z_MODAL_BACKDROP = 50;
+export const Z_MODAL = 100;
+export const Z_DIALOG_OVERLAY = 160;
+export const Z_DIALOG = 170;
+export const Z_OVERLAY = 200;
+export const Z_TOOLTIP = 300;
+export const Z_SYSTEM_BANNER = 9998;
+export const Z_SYSTEM_CRITICAL = 9999;
+export const Z_SHELL_OVERLAY = 10000;
+export const Z_GLOBAL_EMOTE = 11000;
+export const Z_SELECT_FLOAT = 12000;
+// ── Legacy aliases (preserved for backwards compat) ───────────
+export const SELECT_FLOATING_LAYER_NAME = "config-select";
+export const SELECT_FLOATING_LAYER_Z_INDEX = Z_SELECT_FLOAT;

package/packages/ui/src/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/packages/ui/src/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}