@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/composites/page-panel/page-panel-root.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+export const PagePanelRoot = React.forwardRef(function PagePanelRoot({ as, className, variant = "surface", ...props }, ref) {
+    const Component = as ?? "div";
+    return (_jsx(Component, { ref: ref, className: cn(variant === "surface"
+            ? "w-full rounded-3xl border border-border/34 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_82%,transparent),color-mix(in_srgb,var(--bg)_96%,transparent))] shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_22px_34px_-26px_rgba(15,23,42,0.14)] ring-1 ring-border/8 backdrop-blur-md dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_24px_36px_-26px_rgba(0,0,0,0.32)]"
+            : variant === "workspace"
+                ? "flex min-h-[58vh] flex-col overflow-hidden rounded-3xl border border-border/34 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_82%,transparent),color-mix(in_srgb,var(--bg)_96%,transparent))] shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_22px_34px_-26px_rgba(15,23,42,0.14)] ring-1 ring-border/8 backdrop-blur-md dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_24px_36px_-26px_rgba(0,0,0,0.32)]"
+                : variant === "section"
+                    ? "w-full overflow-visible rounded-3xl border border-border/34 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_82%,transparent),color-mix(in_srgb,var(--bg)_96%,transparent))] shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_22px_34px_-26px_rgba(15,23,42,0.14)] ring-1 ring-border/8 backdrop-blur-md dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_24px_36px_-26px_rgba(0,0,0,0.32)]"
+                    : variant === "padded"
+                        ? "rounded-3xl border border-border/34 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_82%,transparent),color-mix(in_srgb,var(--bg)_96%,transparent))] px-5 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_22px_34px_-26px_rgba(15,23,42,0.14)] ring-1 ring-border/8 backdrop-blur-md sm:px-6 sm:py-5 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_24px_36px_-26px_rgba(0,0,0,0.32)]"
+                        : variant === "shell"
+                            ? "relative flex min-h-0 flex-1 overflow-hidden rounded-full border border-border/44 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_80%,transparent),color-mix(in_srgb,var(--bg)_96%,transparent))] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_24px_42px_-28px_rgba(15,23,42,0.16)] ring-1 ring-border/10 backdrop-blur-md dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.05),0_26px_44px_-28px_rgba(0,0,0,0.36)]"
+                            : "rounded-2xl border border-border/28 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_92%,transparent))] shadow-[inset_0_1px_0_rgba(255,255,255,0.1),inset_0_-1px_0_rgba(255,255,255,0.02)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),inset_0_-1px_0_rgba(255,255,255,0.01)]", className), ...props }));
+});

package/components/composites/page-panel/page-panel-toolbar.d.ts

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

package/components/composites/page-panel/page-panel-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-panel-toolbar.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/page-panel/page-panel-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,eAAO,MAAM,gBAAgB,8FAW3B,CAAC"}

package/components/composites/page-panel/page-panel-toolbar.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+export const PagePanelToolbar = React.forwardRef(function PagePanelToolbar({ className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, className: cn("mb-4 flex flex-wrap items-center gap-3", className), ...props }));
+});

package/components/composites/page-panel/page-panel-types.d.ts

@@ -0,0 +1,66 @@
+import type * as React from "react";
+import type { EmptyStateProps } from "../../ui/empty-state";
+export type PanelElement = "div" | "section";
+export type PagePanelVariant = "surface" | "section" | "padded" | "inset" | "shell" | "workspace";
+export type PagePanelProps = {
+    as?: PanelElement;
+    variant?: PagePanelVariant;
+    className?: string;
+} & Omit<React.ComponentPropsWithoutRef<"div">, "as" | "className">;
+export interface MetaPillProps extends React.HTMLAttributes<HTMLSpanElement> {
+    compact?: boolean;
+    tone?: "default" | "accent" | "strong";
+}
+export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    eyebrow?: React.ReactNode;
+    eyebrowClassName?: string;
+    heading: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    media?: React.ReactNode;
+    bordered?: boolean;
+    contentClassName?: string;
+    headingClassName?: string;
+    descriptionClassName?: string;
+}
+export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    compact?: boolean;
+}
+export interface PageActionRailProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface PanelNoticeProps extends React.HTMLAttributes<HTMLDivElement> {
+    tone?: "default" | "accent" | "warning" | "danger";
+    actions?: React.ReactNode;
+}
+export interface PageEmptyStateProps extends EmptyStateProps {
+    variant?: "panel" | "inset" | "surface" | "workspace";
+}
+export interface PageLoadingStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    heading: React.ReactNode;
+    description?: React.ReactNode;
+    variant?: "panel" | "surface" | "workspace";
+}
+export interface PagePanelFrameProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface PagePanelContentAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface PagePanelToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface PagePanelCollapsibleSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    as?: PanelElement;
+    actions?: React.ReactNode;
+    bordered?: boolean;
+    bodyClassName?: string;
+    defaultExpanded?: boolean;
+    description?: React.ReactNode;
+    descriptionClassName?: string;
+    expanded?: boolean;
+    expandOnCollapsedSurfaceClick?: boolean;
+    heading: React.ReactNode;
+    headingClassName?: string;
+    headerContentClassName?: string;
+    media?: React.ReactNode;
+    onExpandedChange?: (expanded: boolean) => void;
+    variant?: Extract<PagePanelVariant, "section" | "surface" | "inset">;
+}
+//# sourceMappingURL=page-panel-types.d.ts.map

package/components/composites/page-panel/page-panel-types.d.ts.map

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

package/components/composites/page-panel/page-panel-types.js

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

package/components/composites/search/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./search-input";
+export * from "./searchbar";
+//# sourceMappingURL=index.d.ts.map

package/components/composites/search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/search/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC"}

package/components/composites/search/index.js

@@ -0,0 +1,2 @@
+export * from "./search-input.js";
+export * from "./searchbar.js";

package/components/composites/search/search-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-input.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/search/search-input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACjE,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,2FAyCvB,CAAC"}

package/components/{ui → composites/search}/search-input.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Search, X } from "lucide-react";
 import * as React from "react";
-import { cn } from "../../lib/utils";
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../ui/button.js";
 export const SearchInput = React.forwardRef(({ className, value, onClear, loading, clearLabel = "Clear search", ...props }, ref) => {
     const hasValue = typeof value === "string" ? value.length > 0 : !!value;
-    return (_jsxs("div", { className: cn("relative flex items-center", className), children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 h-3.5 w-3.5 text-muted" }), _jsx("input", { ref: ref, type: "text", value: value, className: "h-8 w-full rounded-md border border-input bg-bg pl-8 pr-8 text-xs placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", ...props }), hasValue && onClear && (_jsx("button", { type: "button", onClick: onClear, className: "absolute right-2 rounded-sm p-0.5 text-muted hover:text-txt transition-colors", "aria-label": clearLabel, children: _jsx(X, { className: "h-3 w-3" }) })), loading && (_jsx("div", { className: "absolute right-2 h-3 w-3 animate-spin rounded-full border-2 border-muted border-t-accent" }))] }));
+    return (_jsxs("div", { className: cn("relative flex items-center", className), children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 h-3.5 w-3.5 text-muted" }), _jsx("input", { ref: ref, type: "text", value: value, className: "h-8 w-full rounded-md border border-input bg-bg pl-8 pr-8 text-xs placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", ...props }), hasValue && onClear && (_jsx(Button, { variant: "ghost", size: "icon", onClick: onClear, className: "absolute right-2 h-5 w-5 rounded-sm text-muted hover:text-txt transition-colors", "aria-label": clearLabel, children: _jsx(X, { className: "h-3 w-3" }) })), loading && (_jsx("div", { className: "absolute right-2 h-3 w-3 animate-spin rounded-full border-2 border-muted border-t-accent" }))] }));
 });
 SearchInput.displayName = "SearchInput";

package/components/{ui/search-bar.d.ts → composites/search/searchbar.d.ts}

@@ -1,9 +1,4 @@
-/**
- * SearchBar — a self-contained search input with submit button.
- *
- * Fully generic; no app-context dependency. Callers pass the placeholder
- * and loading state directly.
- */
+import * as React from "react";
 export interface SearchBarProps {
     onSearch: (query: string) => void;
     searching?: boolean;
@@ -13,5 +8,11 @@ export interface SearchBarProps {
     /** Label for the submit button when busy. Defaults to "Searching...". */
     searchingLabel?: string;
 }
+export interface SidebarSearchBarProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    onClear?: () => void;
+    loading?: boolean;
+    clearLabel?: string;
+}
 export declare function SearchBar({ onSearch, searching, placeholder, searchLabel, searchingLabel, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=search-bar.d.ts.map
+export declare const SidebarSearchBar: React.ForwardRefExoticComponent<SidebarSearchBarProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=searchbar.d.ts.map

package/components/composites/search/searchbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchbar.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/search/searchbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,WAAyB,EACzB,WAAsB,EACtB,cAA+B,GAChC,EAAE,cAAc,2CAiChB;AAED,eAAO,MAAM,gBAAgB,gGAmD5B,CAAC"}

package/components/composites/search/searchbar.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search, X } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../ui/button.js";
+import { Input } from "../../ui/input.js";
+export function SearchBar({ onSearch, searching, placeholder = "Search...", searchLabel = "Search", searchingLabel = "Searching...", }) {
+    const [query, setQuery] = React.useState("");
+    const handleSubmit = React.useCallback(() => {
+        if (query.trim()) {
+            onSearch(query.trim());
+        }
+    }, [query, onSearch]);
+    return (_jsx("div", { className: "mb-6", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { type: "text", placeholder: placeholder, value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => e.key === "Enter" && handleSubmit(), className: "h-9 border-border bg-bg text-sm shadow-sm focus-visible:ring-1 focus-visible:ring-accent", disabled: searching }), _jsx(Button, { variant: "default", size: "sm", className: "h-9 px-4 shadow-sm", onClick: handleSubmit, disabled: !query.trim() || searching, children: searching ? searchingLabel : searchLabel })] }) }));
+}
+export const SidebarSearchBar = React.forwardRef(({ className, value, onClear, loading = false, clearLabel = "Clear search", placeholder, ...props }, ref) => {
+    const hasValue = typeof value === "string" ? value.trim().length > 0 : Boolean(value);
+    const inputPlaceholder = typeof placeholder === "string" &&
+        placeholder.trim().length > 0 &&
+        !/(\.\.\.|…)$/.test(placeholder.trim())
+        ? `${placeholder.trim()}...`
+        : placeholder;
+    return (_jsxs("div", { className: cn("relative flex items-center", className), children: [_jsx(Search, { className: "pointer-events-none absolute left-3.5 h-4 w-4 text-muted" }), _jsx("input", { ref: ref, type: "text", value: value, placeholder: inputPlaceholder, className: "h-10 w-full rounded-xl border border-border/34 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] pl-10 pr-10 text-sm text-txt shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_14px_20px_-20px_rgba(15,23,42,0.12)] placeholder:text-muted focus-visible:border-accent/28 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/24 disabled:cursor-not-allowed disabled:opacity-50 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_16px_22px_-20px_rgba(0,0,0,0.22)]", ...props }), loading ? (_jsx("div", { className: "absolute right-3.5 h-3.5 w-3.5 animate-spin rounded-full border-2 border-muted/35 border-t-accent" })) : hasValue && onClear ? (_jsx("button", { type: "button", "aria-label": clearLabel, className: "absolute right-2.5 inline-flex h-6 w-6 items-center justify-center rounded-full text-muted transition-colors hover:text-txt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/35", onClick: onClear, children: _jsx(X, { className: "h-3.5 w-3.5" }) })) : null] }));
+});
+SidebarSearchBar.displayName = "SidebarSearchBar";

package/components/composites/sidebar/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./sidebar-body";
+export * from "./sidebar-collapsed-rail";
+export * from "./sidebar-content";
+export * from "./sidebar-filter-bar";
+export * from "./sidebar-header";
+export * from "./sidebar-header-stack";
+export * from "./sidebar-panel";
+export * from "./sidebar-root";
+export * from "./sidebar-scroll-region";
+export * from "./sidebar-types";
+//# sourceMappingURL=index.d.ts.map

package/components/composites/sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/sidebar/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC"}

package/components/composites/sidebar/index.js

@@ -0,0 +1,10 @@
+export * from "./sidebar-body.js";
+export * from "./sidebar-collapsed-rail.js";
+export * from "./sidebar-content.js";
+export * from "./sidebar-filter-bar.js";
+export * from "./sidebar-header.js";
+export * from "./sidebar-header-stack.js";
+export * from "./sidebar-panel.js";
+export * from "./sidebar-root.js";
+export * from "./sidebar-scroll-region.js";
+export * from "./sidebar-types.js";

package/components/composites/sidebar/sidebar-auto-rail.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { type SidebarRailItemProps } from "./sidebar-content";
+export interface SidebarAutoRailItem {
+    key: string;
+    label: string;
+    active: boolean;
+    disabled: boolean;
+    contentKind: "icon" | "monogram";
+    indicatorTone?: SidebarRailItemProps["indicatorTone"];
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    content: React.ReactNode;
+}
+export declare function buildSidebarAutoRailItems(children: React.ReactNode): SidebarAutoRailItem[];
+export declare function buildSidebarAutoRailItemsFromDom(container: HTMLElement): SidebarAutoRailItem[];
+//# sourceMappingURL=sidebar-auto-rail.d.ts.map

package/components/composites/sidebar/sidebar-auto-rail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-auto-rail.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/sidebar/sidebar-auto-rail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAKL,KAAK,oBAAoB,EAC1B,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC;IACjC,aAAa,CAAC,EAAE,oBAAoB,CAAC,eAAe,CAAC,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AA+RD,wBAAgB,yBAAyB,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,yBA0ClE;AAED,wBAAgB,gCAAgC,CAAC,SAAS,EAAE,WAAW,yBA0CtE"}

package/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.js";
+import { SidebarItem, SidebarItemButton, SidebarItemIcon, SidebarItemTitle, } from "./sidebar-content.js";
+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/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/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/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.js";
+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/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/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/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.js";
+import { Button } from "../../ui/button.js";
+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 }));
+}