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

package/packages/ui/src/components/composites/sidebar/sidebar-auto-rail.js

@@ -0,0 +1,292 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { SegmentedControl } from "../../ui/segmented-control";
+import { SidebarItem, SidebarItemButton, SidebarItemIcon, SidebarItemTitle, } from "./sidebar-content";
+const SIDEBAR_AUTO_RAIL_DOM_SELECTOR = "[data-segmented-control-button], [data-sidebar-item], [data-sidebar-item-button], button[aria-pressed]";
+function isSidebarElement(node) {
+    return React.isValidElement(node);
+}
+function extractTextContent(node) {
+    if (typeof node === "string" || typeof node === "number") {
+        return String(node).trim();
+    }
+    if (Array.isArray(node)) {
+        return node
+            .map((child) => extractTextContent(child))
+            .filter(Boolean)
+            .join(" ")
+            .trim();
+    }
+    if (!isSidebarElement(node)) {
+        return "";
+    }
+    return extractTextContent(node.props.children);
+}
+function extractFirstTextContent(node) {
+    if (typeof node === "string" || typeof node === "number") {
+        return String(node).trim();
+    }
+    if (Array.isArray(node)) {
+        for (const child of node) {
+            const text = extractFirstTextContent(child);
+            if (text)
+                return text;
+        }
+        return "";
+    }
+    if (!isSidebarElement(node)) {
+        return "";
+    }
+    return extractFirstTextContent(node.props.children);
+}
+function cleanRailLabel(value) {
+    if (!value)
+        return "";
+    return value
+        .trim()
+        .replace(/^open\s+/i, "")
+        .replace(/\s+[—–]\s+.*$/, "")
+        .replace(/\s+\(click to .*?\)$/i, "")
+        .trim();
+}
+function buildRailMonogram(label) {
+    const words = label.trim().split(/\s+/).filter(Boolean);
+    const initials = words
+        .slice(0, 2)
+        .map((word) => word[0]?.toUpperCase() ?? "")
+        .join("");
+    return (initials || label.slice(0, 1).toUpperCase() || "?").slice(0, 2);
+}
+function resolveRailContent(label, icon) {
+    return icon ?? buildRailMonogram(label);
+}
+function resolveRailContentKind(icon) {
+    return icon ? "icon" : "monogram";
+}
+function SidebarAutoRailDomGlyph({ glyphElement }) {
+    const containerRef = React.useRef(null);
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        container.replaceChildren();
+        container.append(glyphElement.cloneNode(true));
+    }, [glyphElement]);
+    return (_jsx("span", { ref: containerRef, "aria-hidden": true, className: "inline-flex items-center justify-center [&_[data-sidebar-item-icon]]:h-8 [&_[data-sidebar-item-icon]]:w-8 [&_img]:h-4 [&_img]:w-4 [&_svg]:h-4 [&_svg]:w-4" }));
+}
+function extractDomRailLabel(element) {
+    const itemBody = element.querySelector("[data-sidebar-item-body]");
+    const itemTitle = itemBody?.querySelector("[data-sidebar-item-title]");
+    const primaryBodyChild = itemBody?.firstElementChild;
+    return cleanRailLabel(itemTitle?.textContent ||
+        primaryBodyChild?.textContent ||
+        element.getAttribute("title") ||
+        element.getAttribute("aria-label") ||
+        element.textContent ||
+        "");
+}
+function extractDomRailIcon(element) {
+    const iconElement = element.querySelector("[data-sidebar-item-icon]") ||
+        element.querySelector("svg, img, [role='img']");
+    return iconElement ? (_jsx(SidebarAutoRailDomGlyph, { glyphElement: iconElement })) : null;
+}
+function findSidebarItemParts(node) {
+    const state = {
+        active: false,
+        icon: null,
+        title: "",
+    };
+    const visit = (child) => {
+        if (child == null || typeof child === "boolean")
+            return;
+        if (typeof child === "string" || typeof child === "number") {
+            if (!state.title) {
+                state.title = cleanRailLabel(String(child));
+            }
+            return;
+        }
+        if (!isSidebarElement(child))
+            return;
+        if (child.type === SidebarItemButton) {
+            const buttonChild = child;
+            if (typeof buttonChild.props.onClick === "function" && !state.onClick) {
+                state.onClick = buttonChild.props.onClick;
+            }
+            if (buttonChild.props["aria-current"]) {
+                state.active = true;
+            }
+            visit(buttonChild.props.children);
+            return;
+        }
+        if (child.type === SidebarItemIcon) {
+            const iconChild = child;
+            state.icon = iconChild.props.children;
+            if (iconChild.props.active) {
+                state.active = true;
+            }
+            return;
+        }
+        if (child.type === SidebarItemTitle) {
+            const titleChild = child;
+            const title = cleanRailLabel(extractTextContent(titleChild.props.children));
+            if (title) {
+                state.title = title;
+            }
+            return;
+        }
+        if (typeof child.type === "string" && !state.title) {
+            const text = cleanRailLabel(extractTextContent(child.props.children));
+            if (text) {
+                state.title = text;
+            }
+        }
+        visit(child.props.children);
+    };
+    visit(node);
+    return state;
+}
+function parseSidebarItemElement(node) {
+    const parts = findSidebarItemParts(node.props.children);
+    const label = parts.title ||
+        cleanRailLabel(String(node.props["aria-label"] ?? "")) ||
+        cleanRailLabel(extractFirstTextContent(node.props.children));
+    if (!label)
+        return null;
+    return {
+        key: String(node.key ?? label),
+        label,
+        active: Boolean(node.props.active) ||
+            Boolean(node.props["aria-current"]) ||
+            parts.active,
+        disabled: Boolean(node.props.disabled),
+        contentKind: resolveRailContentKind(parts.icon),
+        onClick: typeof node.props.onClick === "function"
+            ? node.props.onClick
+            : parts.onClick,
+        content: resolveRailContent(label, parts.icon),
+    };
+}
+function findFirstNonTextChild(node) {
+    if (node == null || typeof node === "boolean")
+        return null;
+    if (Array.isArray(node)) {
+        for (const child of node) {
+            const match = findFirstNonTextChild(child);
+            if (match != null)
+                return match;
+        }
+        return null;
+    }
+    if (!isSidebarElement(node))
+        return null;
+    return node;
+}
+function parseNativeToggleButton(node) {
+    if (typeof node.props.onClick !== "function")
+        return null;
+    if (node.props["aria-pressed"] === undefined)
+        return null;
+    const label = cleanRailLabel(String(node.props["aria-label"] ?? node.props.title ?? ""));
+    if (!label)
+        return null;
+    const icon = findFirstNonTextChild(node.props.children);
+    return {
+        key: String(node.key ?? node.props["data-testid"] ?? label),
+        label,
+        active: Boolean(node.props["aria-pressed"]),
+        disabled: Boolean(node.props.disabled),
+        contentKind: resolveRailContentKind(icon),
+        onClick: node.props.onClick,
+        content: resolveRailContent(label, icon),
+    };
+}
+function parseSegmentedControl(node) {
+    return node.props.items.map((item) => {
+        const label = cleanRailLabel(extractTextContent(item.label) || String(item.value));
+        const icon = findFirstNonTextChild(item.label);
+        return {
+            key: `${String(node.key ?? "segmented")}:${item.value}`,
+            label,
+            active: item.value === node.props.value,
+            disabled: Boolean(item.disabled),
+            contentKind: resolveRailContentKind(icon),
+            onClick: () => {
+                if (!item.disabled) {
+                    node.props.onValueChange(item.value);
+                }
+            },
+            content: resolveRailContent(label, icon),
+        };
+    });
+}
+export function buildSidebarAutoRailItems(children) {
+    const items = [];
+    const visit = (node) => {
+        React.Children.forEach(node, (child) => {
+            if (!isSidebarElement(child))
+                return;
+            if (child.type === SidebarItem) {
+                const item = parseSidebarItemElement(child);
+                if (item)
+                    items.push(item);
+                return;
+            }
+            if (child.type === SidebarItemButton) {
+                const item = parseSidebarItemElement(child);
+                if (item)
+                    items.push(item);
+                return;
+            }
+            if (React.isValidElement(child) &&
+                child.type === SegmentedControl) {
+                items.push(...parseSegmentedControl(child));
+                return;
+            }
+            if (typeof child.type === "string" && child.type === "button") {
+                const item = parseNativeToggleButton(child);
+                if (item)
+                    items.push(item);
+                return;
+            }
+            visit(child.props.children);
+        });
+    };
+    visit(children);
+    return items;
+}
+export function buildSidebarAutoRailItemsFromDom(container) {
+    const candidates = Array.from(container.querySelectorAll(SIDEBAR_AUTO_RAIL_DOM_SELECTOR));
+    return candidates
+        .filter((element) => {
+        if (element.closest("[data-sidebar-filter-bar]")) {
+            return false;
+        }
+        return !element.parentElement?.closest(SIDEBAR_AUTO_RAIL_DOM_SELECTOR);
+    })
+        .map((element, index) => {
+        const label = extractDomRailLabel(element);
+        if (!label)
+            return null;
+        const interactiveElement = element.querySelector("[data-sidebar-item-button]") ??
+            element;
+        const disabled = interactiveElement.hasAttribute("disabled") ||
+            interactiveElement.getAttribute("aria-disabled") === "true";
+        const icon = extractDomRailIcon(element);
+        return {
+            key: `${label}:${index}`,
+            label,
+            active: interactiveElement.getAttribute("aria-current") === "page" ||
+                interactiveElement.querySelector("[aria-current='page']") !== null ||
+                interactiveElement.getAttribute("aria-pressed") === "true",
+            disabled,
+            contentKind: resolveRailContentKind(icon),
+            onClick: disabled
+                ? undefined
+                : () => {
+                    interactiveElement.click();
+                },
+            content: resolveRailContent(label, icon),
+        };
+    })
+        .filter((item) => item !== null);
+}

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

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { SidebarBodyProps } from "./sidebar-types";
+export declare const SidebarBody: React.ForwardRefExoticComponent<SidebarBodyProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=sidebar-body.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-body.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/sidebar/sidebar-body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAKxD,eAAO,MAAM,WAAW,yFAUvB,CAAC"}

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils";
+const sidebarBodyClassName = "flex min-h-0 flex-1 flex-col overflow-hidden transform-gpu transition-[opacity,transform] duration-[280ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[opacity,transform] motion-reduce:transform-none motion-reduce:transition-none";
+export const SidebarBody = React.forwardRef(function SidebarBody({ className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, className: cn(sidebarBodyClassName, className), ...props }));
+});

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

@@ -0,0 +1,11 @@
+import type * as React from "react";
+import { Button } from "../../ui/button";
+export interface SidebarCollapsedRailProps extends React.HTMLAttributes<HTMLDivElement> {
+    action?: React.ReactNode;
+    listClassName?: string;
+}
+export declare function SidebarCollapsedRail({ action, children, className, listClassName, ...props }: SidebarCollapsedRailProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarCollapsedActionButtonProps extends React.ComponentProps<typeof Button> {
+}
+export declare function SidebarCollapsedActionButton({ className, size, variant, ...props }: SidebarCollapsedActionButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar-collapsed-rail.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-collapsed-rail.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/sidebar/sidebar-collapsed-rail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAazC,MAAM,WAAW,yBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAQ,EACR,SAAS,EACT,aAAa,EACb,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAsC3B;AAED,MAAM,WAAW,iCACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC;CAAG;AAEhD,wBAAgB,4BAA4B,CAAC,EAC3C,SAAS,EACT,IAAa,EACb,OAAyB,EACzB,GAAG,KAAK,EACT,EAAE,iCAAiC,2CASnC"}

package/packages/ui/src/components/composites/sidebar/sidebar-collapsed-rail.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+import { Button } from "../../ui/button";
+const sidebarCollapsedRailRootClassName = "flex min-h-0 w-full flex-1 flex-col items-center";
+const sidebarCollapsedRailActionWrapClassName = "flex flex-col items-center gap-3 py-1";
+const sidebarCollapsedRailListClassName = "custom-scrollbar flex min-h-0 w-full flex-1 flex-col items-center gap-2 overflow-y-auto px-1 pb-2";
+const sidebarCollapsedActionButtonClassName = "h-11 w-11 rounded-sm";
+export function SidebarCollapsedRail({ action, children, className, listClassName, ...props }) {
+    return (_jsx("div", { "data-sidebar-collapsed-rail": true, className: cn(sidebarCollapsedRailRootClassName, className), ...props, children: action ? (_jsxs("div", { "data-sidebar-collapsed-rail-action-wrap": true, className: sidebarCollapsedRailActionWrapClassName, children: [action, _jsx("div", { "data-sidebar-collapsed-rail-list": true, className: cn(sidebarCollapsedRailListClassName, "mt-1", listClassName), children: children })] })) : (_jsx("div", { "data-sidebar-collapsed-rail-list": true, className: cn(sidebarCollapsedRailListClassName, "pt-1", listClassName), children: children })) }));
+}
+export function SidebarCollapsedActionButton({ className, size = "icon", variant = "surfaceAccent", ...props }) {
+    return (_jsx(Button, { size: size, variant: variant, className: cn(sidebarCollapsedActionButtonClassName, className), ...props }));
+}

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

@@ -0,0 +1,78 @@
+import * as React from "react";
+export interface SidebarSectionLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function SidebarSectionLabel({ className, ...props }: SidebarSectionLabelProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarSectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    meta?: React.ReactNode;
+}
+export declare function SidebarSectionHeader({ className, meta, children, ...props }: SidebarSectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarEmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "game-modal";
+}
+export declare function SidebarEmptyState({ variant, className, ...props }: SidebarEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarNoticeProps extends React.HTMLAttributes<HTMLDivElement> {
+    tone?: "default" | "danger";
+    icon?: React.ReactNode;
+}
+export declare function SidebarNotice({ tone, icon, className, children, ...props }: SidebarNoticeProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function SidebarToolbar({ className, ...props }: SidebarToolbarProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarToolbarPrimaryProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function SidebarToolbarPrimary({ className, ...props }: SidebarToolbarPrimaryProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarToolbarActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function SidebarToolbarActions({ className, ...props }: SidebarToolbarActionsProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarItemProps extends React.HTMLAttributes<HTMLElement> {
+    active?: boolean;
+    as?: "button" | "div";
+    variant?: "default" | "accent-soft" | "dashed";
+}
+export declare const SidebarItem: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLElement>>;
+export interface SidebarItemIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    active?: boolean;
+}
+export declare function SidebarItemIcon({ active, className, ...props }: SidebarItemIconProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarItemBodyProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare function SidebarItemBody({ className, ...props }: SidebarItemBodyProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarItemButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+export declare const SidebarItemButton: React.ForwardRefExoticComponent<SidebarItemButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface SidebarItemTitleProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare function SidebarItemTitle({ className, ...props }: SidebarItemTitleProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarItemDescriptionProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare function SidebarItemDescription({ className, ...props }: SidebarItemDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarRailItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    active?: boolean;
+    indicatorTone?: "accent" | "muted";
+}
+export interface SidebarRailMediaProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare function SidebarRailMedia({ className, ...props }: SidebarRailMediaProps): import("react/jsx-runtime").JSX.Element;
+export declare const SidebarRailItem: React.ForwardRefExoticComponent<SidebarRailItemProps & React.RefAttributes<HTMLButtonElement>>;
+export interface SidebarItemActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+export declare function SidebarItemAction({ className, ...props }: SidebarItemActionProps): import("react/jsx-runtime").JSX.Element;
+export declare const SidebarContent: {
+    EmptyState: typeof SidebarEmptyState;
+    ItemBody: typeof SidebarItemBody;
+    ItemDescription: typeof SidebarItemDescription;
+    ItemIcon: typeof SidebarItemIcon;
+    ItemAction: typeof SidebarItemAction;
+    ItemButton: React.ForwardRefExoticComponent<SidebarItemButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    ItemTitle: typeof SidebarItemTitle;
+    Toolbar: typeof SidebarToolbar;
+    ToolbarPrimary: typeof SidebarToolbarPrimary;
+    ToolbarActions: typeof SidebarToolbarActions;
+    SectionLabel: typeof SidebarSectionLabel;
+    SectionHeader: typeof SidebarSectionHeader;
+    Notice: typeof SidebarNotice;
+    Item: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLElement>>;
+    RailMedia: typeof SidebarRailMedia;
+    RailItem: React.ForwardRefExoticComponent<SidebarRailItemProps & React.RefAttributes<HTMLButtonElement>>;
+};
+//# sourceMappingURL=sidebar-content.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-content.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/sidebar/sidebar-content.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils";
+export function SidebarSectionLabel({ className, ...props }) {
+    return (_jsx("div", { "data-sidebar-section-label": true, className: cn("text-xs-tight font-semibold uppercase tracking-[0.16em] text-txt-strong", className), ...props }));
+}
+export function SidebarSectionHeader({ className, meta, children, ...props }) {
+    return (_jsxs("div", { "data-sidebar-section-header": true, className: cn("mb-2 flex items-center justify-between gap-2", className), ...props, children: [children, meta ? _jsx("div", { className: "text-2xs text-muted/50", children: meta }) : null] }));
+}
+export function SidebarEmptyState({ variant = "default", className, ...props }) {
+    return (_jsx("div", { "data-sidebar-empty-state": true, className: cn("rounded-sm px-4 py-8 text-center text-sm", variant === "game-modal"
+            ? "bg-black/15 font-medium italic text-[color:var(--onboarding-text-muted)]"
+            : "bg-bg-muted/50 text-muted", className), ...props }));
+}
+export function SidebarNotice({ tone = "default", icon, className, children, ...props }) {
+    return (_jsxs("div", { "data-sidebar-notice": true, className: cn("flex items-center gap-2 rounded-sm border px-3 py-3 text-sm", tone === "danger"
+            ? "border-danger/30 bg-danger/10 text-danger"
+            : "border-border/40 bg-bg/35 text-muted", className), ...props, children: [icon, children] }));
+}
+export function SidebarToolbar({ className, ...props }) {
+    return (_jsx("div", { "data-sidebar-toolbar": true, className: cn("flex w-full min-w-0 items-center gap-2", className), ...props }));
+}
+export function SidebarToolbarPrimary({ className, ...props }) {
+    return (_jsx("div", { "data-sidebar-toolbar-primary": true, className: cn("min-w-0 flex-1", className), ...props }));
+}
+export function SidebarToolbarActions({ className, ...props }) {
+    return (_jsx("div", { "data-sidebar-toolbar-actions": true, className: cn("flex shrink-0 items-center gap-2", className), ...props }));
+}
+export const SidebarItem = React.forwardRef(function SidebarItem({ active = false, as = "button", variant = "default", className, ...props }, ref) {
+    const sharedClassName = cn("group flex h-auto w-full min-w-0 items-start justify-start gap-3 rounded-sm px-3.5 py-3 text-left transition-[background-color,color,box-shadow,transform] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/35", active
+        ? "bg-accent/12 text-txt shadow-sm"
+        : variant === "accent-soft"
+            ? "bg-accent/5 text-muted hover:bg-accent/10 hover:text-txt"
+            : variant === "dashed"
+                ? "border border-dashed border-border/40 text-muted hover:border-border hover:bg-bg-hover hover:text-txt"
+                : "text-muted hover:bg-bg-hover hover:text-txt", className);
+    if (as === "div") {
+        return (_jsx("div", { ref: ref, "data-sidebar-item": true, className: sharedClassName, ...props }));
+    }
+    return (_jsx("button", { ref: ref, type: "button", "data-sidebar-item": true, className: sharedClassName, ...props }));
+});
+export function SidebarItemIcon({ active = false, className, ...props }) {
+    return (_jsx("span", { "data-sidebar-item-icon": true, className: cn("mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-sm p-2", active
+            ? "bg-accent/18 text-txt-strong"
+            : "bg-bg-accent/80 text-muted", className), ...props }));
+}
+export function SidebarItemBody({ className, ...props }) {
+    return (_jsx("span", { "data-sidebar-item-body": true, className: cn("min-w-0 flex-1 text-left", className), ...props }));
+}
+export const SidebarItemButton = React.forwardRef(function SidebarItemButton({ className, ...props }, ref) {
+    return (_jsx("button", { ref: ref, type: "button", "data-sidebar-item-button": true, className: cn("flex h-auto min-w-0 flex-1 self-stretch items-start gap-3 rounded-none p-0 text-left focus-visible:outline-none", className), ...props }));
+});
+export function SidebarItemTitle({ className, ...props }) {
+    return (_jsx("span", { "data-sidebar-item-title": true, className: cn("block whitespace-normal break-words [overflow-wrap:anywhere] text-sm font-semibold leading-snug text-inherit", className), ...props }));
+}
+export function SidebarItemDescription({ className, ...props }) {
+    return (_jsx("span", { "data-sidebar-item-description": true, className: cn("mt-1 block whitespace-normal break-words [overflow-wrap:anywhere] text-xs-tight leading-relaxed text-muted/85", className), ...props }));
+}
+export function SidebarRailMedia({ className, ...props }) {
+    return (_jsx("span", { "data-sidebar-rail-media": true, className: cn("inline-flex items-center justify-center leading-none text-sm [&_img]:h-4 [&_img]:w-4 [&_img]:object-contain [&_img]:rounded-none [&_svg]:h-4 [&_svg]:w-4", className), ...props }));
+}
+export const SidebarRailItem = React.forwardRef(function SidebarRailItem({ active = false, indicatorTone, className, children, ...props }, ref) {
+    return (_jsxs("button", { ref: ref, type: "button", "data-sidebar-rail-item": true, className: cn("relative inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-sm border border-border/24 text-xs font-semibold tracking-[0.02em] transition-[border-color,background-color,color,box-shadow,transform] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/35 active:scale-[0.98]", active
+            ? "border-accent/26 bg-accent/12 text-txt shadow-sm"
+            : "bg-card text-muted-strong shadow-xs hover:border-border/38 hover:text-txt hover:shadow-sm", className), ...props, children: [_jsx("span", { className: "inline-flex items-center justify-center truncate px-1 [&_img]:h-4 [&_img]:w-4 [&_svg]:h-4 [&_svg]:w-4", children: children }), indicatorTone ? (_jsx("span", { className: cn("absolute right-1.5 top-1.5 h-2 w-2 rounded-full", indicatorTone === "accent"
+                    ? "bg-accent"
+                    : "bg-muted/70") })) : null] }));
+});
+export function SidebarItemAction({ className, ...props }) {
+    return (_jsx("button", { type: "button", "data-sidebar-item-action": true, className: cn("absolute right-1.5 top-1.5 rounded bg-bg/80 px-1.5 py-0.5 text-2xs text-muted opacity-0 transition-opacity group-hover:opacity-100 hover:text-danger", className), ...props }));
+}
+export const SidebarContent = {
+    EmptyState: SidebarEmptyState,
+    ItemBody: SidebarItemBody,
+    ItemDescription: SidebarItemDescription,
+    ItemIcon: SidebarItemIcon,
+    ItemAction: SidebarItemAction,
+    ItemButton: SidebarItemButton,
+    ItemTitle: SidebarItemTitle,
+    Toolbar: SidebarToolbar,
+    ToolbarPrimary: SidebarToolbarPrimary,
+    ToolbarActions: SidebarToolbarActions,
+    SectionLabel: SidebarSectionLabel,
+    SectionHeader: SidebarSectionHeader,
+    Notice: SidebarNotice,
+    Item: SidebarItem,
+    RailMedia: SidebarRailMedia,
+    RailItem: SidebarRailItem,
+};

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

@@ -0,0 +1,3 @@
+import type { SidebarFilterBarProps } from "./sidebar-types";
+export declare function SidebarFilterBar({ className, selectValue, selectOptions, onSelectValueChange, selectAriaLabel, selectTestId, sortDirection, onSortDirectionToggle, sortDirectionButtonTestId, sortAscendingLabel, sortDescendingLabel, refreshButtonTestId, refreshLabel, onRefresh, ...props }: SidebarFilterBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar-filter-bar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-filter-bar.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/sidebar/sidebar-filter-bar.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAY7D,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,WAAW,EACX,aAAa,EACb,mBAAmB,EACnB,eAAe,EACf,YAAY,EACZ,aAAa,EACb,qBAAqB,EACrB,yBAAyB,EACzB,kBAAqC,EACrC,mBAAuC,EACvC,mBAAmB,EACnB,YAAwB,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA0EvB"}

package/packages/ui/src/components/composites/sidebar/sidebar-filter-bar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, RefreshCw } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { Button } from "../../ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../ui/select";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../../ui/tooltip";
+const sidebarFilterBarClassName = "flex w-full min-w-0 items-center gap-2";
+const sidebarFilterPrimaryClassName = "min-w-0 flex-1";
+const sidebarFilterActionsClassName = "flex shrink-0 items-center gap-2";
+const sidebarFilterButtonClassName = "h-10 w-10 shrink-0 rounded-sm border-border/60 bg-card/88 shadow-sm";
+export function SidebarFilterBar({ className, selectValue, selectOptions, onSelectValueChange, selectAriaLabel, selectTestId, sortDirection, onSortDirectionToggle, sortDirectionButtonTestId, sortAscendingLabel = "Sort ascending", sortDescendingLabel = "Sort descending", refreshButtonTestId, refreshLabel = "Refresh", onRefresh, ...props }) {
+    const currentSortDirectionLabel = sortDirection === "asc" ? sortAscendingLabel : sortDescendingLabel;
+    return (_jsxs("div", { "data-sidebar-filter-bar": true, className: cn(sidebarFilterBarClassName, className), ...props, children: [_jsx("div", { className: sidebarFilterPrimaryClassName, children: _jsxs(Select, { value: selectValue, onValueChange: onSelectValueChange, children: [_jsx(SelectTrigger, { "data-testid": selectTestId, "aria-label": selectAriaLabel, className: "h-10 min-w-0 flex-1 rounded-xl border border-border/60 bg-card/88 px-3 text-sm text-txt shadow-sm", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { position: "popper", children: selectOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }) }), _jsx(TooltipProvider, { delayDuration: 200, skipDelayDuration: 100, children: _jsxs("div", { className: sidebarFilterActionsClassName, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "outline", size: "icon", "data-testid": sortDirectionButtonTestId, className: sidebarFilterButtonClassName, "aria-label": currentSortDirectionLabel, onClick: onSortDirectionToggle, children: sortDirection === "asc" ? (_jsx(ArrowUp, { className: "h-4 w-4" })) : (_jsx(ArrowDown, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "bottom", className: "text-xs", children: currentSortDirectionLabel })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "outline", size: "icon", "data-testid": refreshButtonTestId, className: sidebarFilterButtonClassName, "aria-label": refreshLabel, onClick: onRefresh, children: _jsx(RefreshCw, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "bottom", className: "text-xs", children: refreshLabel })] })] }) })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-header-stack.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/sidebar/sidebar-header-stack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAK/D,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAIzB"}

package/packages/ui/src/components/composites/sidebar/sidebar-header-stack.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+const sidebarHeaderStackClassName = "space-y-2.5 transform-gpu transition-[opacity,transform] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transform-none motion-reduce:transition-none";
+export function SidebarHeaderStack({ className, ...props }) {
+    return (_jsx("div", { className: cn(sidebarHeaderStackClassName, className), ...props }));
+}

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

@@ -0,0 +1,9 @@
+import type * as React from "react";
+import type { SidebarSearchBarProps } from "../search";
+export interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    search?: Omit<SidebarSearchBarProps, "className">;
+    searchClassName?: string;
+}
+export declare function SidebarHeader({ children, search, searchClassName, ...props }: SidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-header.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/sidebar/sidebar-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAIvD,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,WAAW,CAAC,CAAC;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,MAAM,EACN,eAAe,EACf,GAAG,KAAK,EACT,EAAE,kBAAkB,2CASpB"}

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SidebarSearchBar } from "../search";
+import { SidebarHeaderStack } from "./sidebar-header-stack";
+export function SidebarHeader({ children, search, searchClassName, ...props }) {
+    return (_jsxs(SidebarHeaderStack, { ...props, children: [search ? (_jsx(SidebarSearchBar, { className: searchClassName, ...search })) : null, children] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-panel.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/sidebar/sidebar-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAkBzD,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAQnB"}

package/packages/ui/src/components/composites/sidebar/sidebar-panel.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 sidebarPanelVariants = cva("", {
+    variants: {
+        variant: {
+            default: "flex min-h-full flex-col gap-2 rounded-sm p-1.5 shadow-inset",
+            mobile: "flex min-h-full flex-col gap-2 rounded-sm p-1.5 shadow-inset",
+            "game-modal": "flex min-h-full flex-col gap-1.5 rounded-sm bg-black/12 p-2",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+export function SidebarPanel({ className, variant = "default", ...props }) {
+    return (_jsx("div", { "data-sidebar-panel": true, className: cn(sidebarPanelVariants({ variant }), className), ...props }));
+}

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

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { SidebarProps } from "./sidebar-types";
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=sidebar-root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-root.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/sidebar/sidebar-root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,iBAAiB,CAAC;AA2YpE,eAAO,MAAM,OAAO,kFAwanB,CAAC"}