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

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

@@ -0,0 +1,29 @@
+import { PageEmptyState } from "./page-panel-empty";
+import { MetaPill, PageActionRail, PanelHeader, PanelNotice, SummaryCard } from "./page-panel-header";
+import { PageLoadingState } from "./page-panel-loading";
+export * from "./page-panel-collapsible-section";
+export * from "./page-panel-empty";
+export * from "./page-panel-frame";
+export * from "./page-panel-header";
+export * from "./page-panel-loading";
+export * from "./page-panel-root";
+export * from "./page-panel-toolbar";
+export * from "./page-panel-types";
+export declare const PagePanel: import("react").ForwardRefExoticComponent<{
+    as?: import("./page-panel-types").PanelElement;
+    variant?: import("./page-panel-types").PagePanelVariant;
+    className?: string;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className" | "as"> & import("react").RefAttributes<HTMLDivElement>> & {
+    CollapsibleSection: import("react").ForwardRefExoticComponent<import("./page-panel-types").PagePanelCollapsibleSectionProps & import("react").RefAttributes<HTMLElement>>;
+    ContentArea: import("react").ForwardRefExoticComponent<import("./page-panel-types").PagePanelContentAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+    Header: typeof PanelHeader;
+    Frame: import("react").ForwardRefExoticComponent<import("./page-panel-types").PagePanelFrameProps & import("react").RefAttributes<HTMLDivElement>>;
+    Meta: typeof MetaPill;
+    Notice: typeof PanelNotice;
+    SummaryCard: typeof SummaryCard;
+    Empty: typeof PageEmptyState;
+    Loading: typeof PageLoadingState;
+    ActionRail: typeof PageActionRail;
+    Toolbar: import("react").ForwardRefExoticComponent<import("./page-panel-types").PagePanelToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/page-panel/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EACL,QAAQ,EACR,cAAc,EACd,WAAW,EACX,WAAW,EACX,WAAW,EACZ,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAIxD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AAEnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;CAYpB,CAAC"}

package/packages/ui/src/components/composites/page-panel/index.js

@@ -0,0 +1,28 @@
+import { PagePanelCollapsibleSection } from "./page-panel-collapsible-section";
+import { PageEmptyState } from "./page-panel-empty";
+import { PagePanelContentArea, PagePanelFrame } from "./page-panel-frame";
+import { MetaPill, PageActionRail, PanelHeader, PanelNotice, SummaryCard, } from "./page-panel-header";
+import { PageLoadingState } from "./page-panel-loading";
+import { PagePanelRoot } from "./page-panel-root";
+import { PagePanelToolbar } from "./page-panel-toolbar";
+export * from "./page-panel-collapsible-section";
+export * from "./page-panel-empty";
+export * from "./page-panel-frame";
+export * from "./page-panel-header";
+export * from "./page-panel-loading";
+export * from "./page-panel-root";
+export * from "./page-panel-toolbar";
+export * from "./page-panel-types";
+export const PagePanel = Object.assign(PagePanelRoot, {
+    CollapsibleSection: PagePanelCollapsibleSection,
+    ContentArea: PagePanelContentArea,
+    Header: PanelHeader,
+    Frame: PagePanelFrame,
+    Meta: MetaPill,
+    Notice: PanelNotice,
+    SummaryCard,
+    Empty: PageEmptyState,
+    Loading: PageLoadingState,
+    ActionRail: PageActionRail,
+    Toolbar: PagePanelToolbar,
+});

package/packages/ui/src/components/composites/page-panel/page-panel-collapsible-section.d.ts

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

package/packages/ui/src/components/composites/page-panel/page-panel-collapsible-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-panel-collapsible-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/page-panel/page-panel-collapsible-section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,oBAAoB,CAAC;AAE3E,eAAO,MAAM,2BAA2B,sGA8ItC,CAAC"}

package/packages/ui/src/components/composites/page-panel/page-panel-collapsible-section.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils";
+import { PanelHeader } from "./page-panel-header";
+import { PagePanelRoot } from "./page-panel-root";
+export const PagePanelCollapsibleSection = React.forwardRef(function PagePanelCollapsibleSection({ actions, as = "section", bodyClassName, bordered = true, children, className, defaultExpanded = false, description, descriptionClassName, expandOnCollapsedSurfaceClick = false, expanded, heading, headingClassName, headerContentClassName, media, onClick, onExpandedChange, onKeyDown, role, tabIndex, variant = "section", ...props }, ref) {
+    const [uncontrolledExpanded, setUncontrolledExpanded] = React.useState(defaultExpanded);
+    const isExpanded = expanded ?? uncontrolledExpanded;
+    const isControlled = expanded !== undefined;
+    const isPanelActionTarget = React.useCallback((target) => {
+        return (target instanceof Element &&
+            target.closest("[data-page-panel-actions='true']") !== null);
+    }, []);
+    const setExpanded = React.useCallback((nextExpanded) => {
+        if (!isControlled) {
+            setUncontrolledExpanded(nextExpanded);
+        }
+        onExpandedChange?.(nextExpanded);
+    }, [isControlled, onExpandedChange]);
+    const handleSurfaceClick = React.useCallback((event) => {
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (isPanelActionTarget(event.target))
+            return;
+        if (!expandOnCollapsedSurfaceClick || isExpanded)
+            return;
+        setExpanded(true);
+    }, [
+        expandOnCollapsedSurfaceClick,
+        isExpanded,
+        isPanelActionTarget,
+        onClick,
+        setExpanded,
+    ]);
+    const handleSurfaceKeyDown = React.useCallback((event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (isPanelActionTarget(event.target))
+            return;
+        if (!expandOnCollapsedSurfaceClick || isExpanded)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            setExpanded(true);
+        }
+    }, [
+        expandOnCollapsedSurfaceClick,
+        isExpanded,
+        isPanelActionTarget,
+        onKeyDown,
+        setExpanded,
+    ]);
+    return (_jsxs(PagePanelRoot, { ref: ref, as: as, variant: variant, "aria-expanded": isExpanded, "data-content-align-offset": 4, className: cn(expandOnCollapsedSurfaceClick &&
+            !isExpanded &&
+            "cursor-pointer transition-[border-color,box-shadow,transform] hover:border-border/60 hover:shadow-[0_20px_36px_rgba(3,5,10,0.18)]", className), onClick: handleSurfaceClick, onKeyDown: handleSurfaceKeyDown, role: expandOnCollapsedSurfaceClick && !isExpanded ? (role ?? "button") : role, tabIndex: expandOnCollapsedSurfaceClick && !isExpanded
+            ? (tabIndex ?? 0)
+            : tabIndex, ...props, children: [_jsx(PanelHeader, { media: media, heading: heading, headingClassName: headingClassName, description: description, descriptionClassName: descriptionClassName, contentClassName: headerContentClassName, actions: actions ? (_jsx("div", { className: "inline-flex items-center gap-2.5", "data-page-panel-actions": "true", children: actions })) : null, bordered: isExpanded && bordered }), isExpanded ? (_jsx("div", { className: cn("px-4 pb-4 pt-1 sm:px-5 sm:pb-5", bodyClassName), children: children })) : null] }));
+});

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

@@ -0,0 +1,3 @@
+import type { PageEmptyStateProps } from "./page-panel-types";
+export declare function PageEmptyState({ action, children, className, description, title, variant, ...props }: PageEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=page-panel-empty.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-panel-empty.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/page-panel/page-panel-empty.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,OAAiB,EACjB,GAAG,KAAK,EACT,EAAE,mBAAmB,2CA+DrB"}

package/packages/ui/src/components/composites/page-panel/page-panel-empty.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+import { EmptyState } from "../../ui/empty-state";
+import { PagePanelRoot } from "./page-panel-root";
+export function PageEmptyState({ action, children, className, description, title, variant = "panel", ...props }) {
+    if (variant === "surface") {
+        return (_jsxs(PagePanelRoot, { className: cn("flex min-h-[58vh] flex-col items-center justify-center px-6 py-10 text-center", className), ...props, children: [_jsxs("div", { className: "max-w-md space-y-2", children: [_jsx("div", { className: "text-base font-medium text-txt-strong", children: title }), description ? (_jsx("div", { className: "text-sm leading-relaxed text-muted", children: description })) : null] }), action ? _jsx("div", { className: "mt-4", children: action }) : null, children] }));
+    }
+    if (variant === "workspace") {
+        return (_jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col items-center justify-center px-6 py-10 text-center", className), ...props, children: [_jsxs("div", { className: "max-w-md space-y-2", children: [_jsx("div", { className: "text-base font-medium text-txt-strong", children: title }), description ? (_jsx("div", { className: "text-sm leading-relaxed text-muted", children: description })) : null] }), action ? _jsx("div", { className: "mt-4", children: action }) : null, children] }));
+    }
+    return (_jsxs(EmptyState, { className: cn(variant === "inset"
+            ? "min-h-[14rem] rounded-2xl border border-dashed border-border/28 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_74%,transparent),color-mix(in_srgb,var(--bg)_93%,transparent))] px-5 py-10 shadow-[inset_0_1px_0_rgba(255,255,255,0.08),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)]"
+            : "min-h-[18rem] rounded-3xl border border-dashed border-border/32 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] px-6 py-12 shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_20px_28px_-24px_rgba(15,23,42,0.12)] backdrop-blur-sm dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_22px_30px_-24px_rgba(0,0,0,0.28)]", className), description: description, title: title, ...props, children: [children, action ? _jsx("div", { className: "mt-4", children: action }) : null] }));
+}

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { PagePanelContentAreaProps, PagePanelFrameProps } from "./page-panel-types";
+export declare const PagePanelFrame: React.ForwardRefExoticComponent<PagePanelFrameProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PagePanelContentArea: React.ForwardRefExoticComponent<PagePanelContentAreaProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=page-panel-frame.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-panel-frame.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/page-panel/page-panel-frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EACV,yBAAyB,EACzB,mBAAmB,EACpB,MAAM,oBAAoB,CAAC;AAE5B,eAAO,MAAM,cAAc,4FAczB,CAAC;AAEH,eAAO,MAAM,oBAAoB,kGAW/B,CAAC"}

package/packages/ui/src/components/composites/page-panel/page-panel-frame.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils";
+export const PagePanelFrame = React.forwardRef(function PagePanelFrame({ className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, className: cn("flex h-full w-full min-h-0 bg-transparent p-0 lg:p-1", className), ...props }));
+});
+export const PagePanelContentArea = React.forwardRef(function PagePanelContentArea({ className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, className: cn("min-w-0 flex-1 overflow-y-auto", className), ...props }));
+});

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

@@ -0,0 +1,7 @@
+import type { MetaPillProps, PageActionRailProps, PanelHeaderProps, PanelNoticeProps, SummaryCardProps } from "./page-panel-types";
+export declare function MetaPill({ className, compact, tone, ...props }: MetaPillProps): import("react/jsx-runtime").JSX.Element;
+export declare function PanelHeader({ actions, bordered, className, contentClassName, description, descriptionClassName, eyebrow, eyebrowClassName, heading, headingClassName, media, ...props }: PanelHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SummaryCard({ className, compact, ...props }: SummaryCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageActionRail({ className, ...props }: PageActionRailProps): import("react/jsx-runtime").JSX.Element;
+export declare function PanelNotice({ actions, className, children, tone, ...props }: PanelNoticeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=page-panel-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-panel-header.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/page-panel/page-panel-header.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAE5B,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,OAAe,EACf,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,aAAa,2CAgBf;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAe,EACf,SAAS,EACT,gBAAgB,EAChB,WAAW,EACX,oBAAoB,EACpB,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,gBAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAuDlB;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,OAAe,EACf,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAWlB;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAU1E;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,SAAS,EACT,QAAQ,EACR,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA0BlB"}

package/packages/ui/src/components/composites/page-panel/page-panel-header.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+export function MetaPill({ className, compact = false, tone = "default", ...props }) {
+    return (_jsx("span", { className: cn("inline-flex min-h-6 items-center rounded-full px-2.5 py-1 text-xs-tight shadow-[inset_0_1px_0_rgba(255,255,255,0.1),0_12px_18px_-18px_rgba(15,23,42,0.12)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_12px_18px_-18px_rgba(0,0,0,0.24)]", tone === "accent"
+            ? "border border-accent/55 bg-accent/16 font-bold text-txt-strong shadow-sm"
+            : tone === "strong"
+                ? "border border-border/32 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_82%,transparent),color-mix(in_srgb,var(--bg)_92%,transparent))] font-medium text-txt-strong"
+                : "border border-border/32 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_82%,transparent),color-mix(in_srgb,var(--bg)_92%,transparent))] font-medium text-muted", compact && "min-h-0 px-2 py-1 text-2xs", className), ...props }));
+}
+export function PanelHeader({ actions, bordered = true, className, contentClassName, description, descriptionClassName, eyebrow, eyebrowClassName, heading, headingClassName, media, ...props }) {
+    const hasActions = Boolean(actions);
+    return (_jsxs("div", { className: cn(hasActions
+            ? "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 px-4 py-3 sm:px-5"
+            : "flex items-start gap-3 px-4 py-3 sm:px-5", bordered && "", className), ...props, children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [media ? _jsx("div", { className: "shrink-0", children: media }) : null, _jsxs("div", { className: cn("min-w-0", contentClassName), children: [eyebrow ? (_jsx("div", { className: cn("text-2xs font-semibold uppercase tracking-[0.16em] text-muted/60", eyebrowClassName), children: eyebrow })) : null, _jsx("div", { className: cn("text-sm font-semibold text-txt-strong", eyebrow && "mt-1", headingClassName), children: heading }), description ? (_jsx("div", { className: cn("mt-1 text-xs leading-relaxed text-muted", descriptionClassName), children: description })) : null] })] }), actions ? (_jsx("div", { className: "inline-flex shrink-0 items-start justify-end gap-2 self-start justify-self-end", children: actions })) : null] }));
+}
+export function SummaryCard({ className, compact = false, ...props }) {
+    return (_jsx("div", { className: cn("rounded-2xl border border-border/28 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_86%,transparent),color-mix(in_srgb,var(--bg)_96%,transparent))] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_18px_26px_-24px_rgba(15,23,42,0.12)] ring-1 ring-border/8 backdrop-blur-sm dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_20px_28px_-24px_rgba(0,0,0,0.28)]", compact && "p-3.5", className), ...props }));
+}
+export function PageActionRail({ className, ...props }) {
+    return (_jsx("div", { className: cn("inline-flex items-center gap-1 whitespace-nowrap border border-border/24 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_90%,transparent),color-mix(in_srgb,var(--bg)_97%,transparent))] shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_16px_22px_-18px_rgba(15,23,42,0.14)] backdrop-blur-sm dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_18px_24px_-18px_rgba(0,0,0,0.24)]", className), ...props }));
+}
+export function PanelNotice({ actions, className, children, tone = "default", ...props }) {
+    return (_jsx("div", { className: cn("rounded-2xl border px-4 py-3 text-sm", tone === "accent"
+            ? "border-accent bg-accent-subtle text-txt"
+            : tone === "warning"
+                ? "border-warn/30 bg-warn/10 text-txt"
+                : tone === "danger"
+                    ? "border-danger/30 bg-danger/10 text-danger"
+                    : "border-border/40 bg-card/30 text-muted", className), ...props, children: actions ? (_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("div", { children: children }), _jsx("div", { className: "shrink-0", children: actions })] })) : (children) }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-panel-loading.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/page-panel/page-panel-loading.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,WAAW,EACX,OAAO,EACP,OAAiB,EACjB,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAiEvB"}

package/packages/ui/src/components/composites/page-panel/page-panel-loading.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+import { Spinner } from "../../ui/spinner";
+import { PagePanelRoot } from "./page-panel-root";
+export function PageLoadingState({ className, description, heading, variant = "panel", ...props }) {
+    if (variant === "surface") {
+        return (_jsxs(PagePanelRoot, { className: cn("flex min-h-[58vh] flex-col items-center justify-center px-6 py-10 text-center", className), ...props, children: [_jsx(Spinner, { className: "h-5 w-5 text-muted" }), _jsxs("div", { className: "mt-4 max-w-md space-y-2", children: [_jsx("div", { className: "text-base font-medium text-txt-strong", children: heading }), description ? (_jsx("div", { className: "text-sm leading-relaxed text-muted", children: description })) : null] })] }));
+    }
+    if (variant === "workspace") {
+        return (_jsxs(PagePanelRoot, { variant: "workspace", className: cn("items-center justify-center px-6 py-10 text-center", className), ...props, children: [_jsx(Spinner, { className: "h-5 w-5 text-muted" }), _jsxs("div", { className: "mt-4 max-w-md space-y-2", children: [_jsx("div", { className: "text-base font-medium text-txt-strong", children: heading }), description ? (_jsx("div", { className: "text-sm leading-relaxed text-muted", children: description })) : null] })] }));
+    }
+    return (_jsxs("div", { className: cn("flex min-h-[18rem] flex-col items-center justify-center rounded-3xl border border-dashed border-border/32 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] px-6 py-12 text-center shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_20px_28px_-24px_rgba(15,23,42,0.12)] backdrop-blur-sm dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_22px_30px_-24px_rgba(0,0,0,0.28)]", className), ...props, children: [_jsx(Spinner, { className: "h-5 w-5 text-muted" }), _jsxs("div", { className: "mt-4 max-w-md space-y-2", children: [_jsx("div", { className: "text-base font-medium text-txt-strong", children: heading }), description ? (_jsx("div", { className: "text-sm leading-relaxed text-muted", children: description })) : null] })] }));
+}

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+export declare const PagePanelRoot: React.ForwardRefExoticComponent<{
+    as?: import("./page-panel-types").PanelElement;
+    variant?: import("./page-panel-types").PagePanelVariant;
+    className?: string;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className" | "as"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=page-panel-root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-panel-root.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/composites/page-panel/page-panel-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,aAAa;;;;+JA4BzB,CAAC"}

package/packages/ui/src/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";
+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/packages/ui/src/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/packages/ui/src/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/packages/ui/src/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";
+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/packages/ui/src/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/packages/ui/src/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/packages/ui/src/components/composites/page-panel/page-panel-types.js

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

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

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

package/packages/ui/src/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/packages/ui/src/components/composites/search/index.js

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

package/packages/ui/src/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/{dist/components/ui → packages/ui/src/components/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";
+import { Button } from "../../ui/button";
 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/{dist/components/ui/search-bar.d.ts → packages/ui/src/components/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/packages/ui/src/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/packages/ui/src/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";
+import { Button } from "../../ui/button";
+import { Input } from "../../ui/input";
+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/packages/ui/src/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/packages/ui/src/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/packages/ui/src/components/composites/sidebar/index.js

@@ -0,0 +1,10 @@
+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";

package/packages/ui/src/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/packages/ui/src/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"}