@arcfusionz/arc-primitive-ui 0.2.1 → 0.2.3

package/dist/components/Shell/Shell.js

@@ -0,0 +1,639 @@
+import { cn } from "../../lib/cn.js";
+import { AILoader } from "../AILoader/AILoader.js";
+import { Badge } from "../Badge/Badge.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breadcrumbLinkVariants } from "../Breadcrumb/Breadcrumb.js";
+import { Button } from "../Button/Button.js";
+import { Menu, MenuItem, MenuLinkItem, MenuPopup, MenuTrigger } from "../Menu/Menu.js";
+import { Tabs, TabsList, TabsTab } from "../Tabs/Tabs.js";
+import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "../Tooltip/Tooltip.js";
+import { Fragment, createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import arcfusionLogo from "../../assets/brand/arcfusion-logo.svg";
+//#region src/components/Shell/Shell.tsx
+function LayoutGridIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				width: "7",
+				height: "7",
+				x: "3",
+				y: "3",
+				rx: "1"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				width: "7",
+				height: "7",
+				x: "14",
+				y: "3",
+				rx: "1"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				width: "7",
+				height: "7",
+				x: "14",
+				y: "14",
+				rx: "1"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				width: "7",
+				height: "7",
+				x: "3",
+				y: "14",
+				rx: "1"
+			})
+		]
+	});
+}
+function XIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+	});
+}
+/** Compact count for badges: everything past 99 reads `99+`. */
+function formatBadgeCount(count) {
+	return count > 99 ? "99+" : String(count);
+}
+function useControllableState(controlled, defaultValue, onChange) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const isControlled = controlled !== void 0;
+	const value = isControlled ? controlled : uncontrolled;
+	const onChangeRef = useRef(onChange);
+	useEffect(() => {
+		onChangeRef.current = onChange;
+	});
+	const valueRef = useRef(value);
+	useEffect(() => {
+		valueRef.current = value;
+	});
+	return [value, useCallback((next) => {
+		if (next === valueRef.current) return;
+		valueRef.current = next;
+		if (!isControlled) setUncontrolled(next);
+		onChangeRef.current?.(next);
+	}, [isControlled])];
+}
+function assignRef(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref != null) ref.current = node;
+}
+function isKeyboardFocus(element) {
+	try {
+		return element.matches(":focus-visible");
+	} catch {
+		return true;
+	}
+}
+const ShellContext = createContext({
+	rightPanelOpen: false,
+	setRightPanelOpen: () => {},
+	rightPanelId: "",
+	rightPanelTriggerRef: { current: null },
+	focusTriggerOnMountRef: { current: false }
+});
+/**
+* Shared Shell UI state for custom triggers — e.g. an "Ask AI" entry point
+* inside page content that opens the same right panel as the Topbar button.
+* Outside a `Shell` it returns inert state (closed, no-op setter).
+*/
+function useShell() {
+	const { rightPanelOpen, setRightPanelOpen } = useContext(ShellContext);
+	return useMemo(() => ({
+		rightPanelOpen,
+		setRightPanelOpen
+	}), [rightPanelOpen, setRightPanelOpen]);
+}
+/**
+* Application frame that positions the sidebar rail, topbar, optional
+* tabbar, main content, and the optional right panel, and owns the shared
+* panel state. It fills the viewport (`h-dvh`) by default — pass
+* `className="h-full"` to fill a parent instead — and creates no
+* document-level overflow: `ShellMain` is the primary scroll region. The
+* collapsed rail width stays reserved while sidebar expansion overlays the
+* layout, so page content never shifts. Popups portal to `document.body`;
+* the root is isolated, but consumer apps should still set
+* `isolation: isolate` on their app root so no page stacking context
+* outbids them.
+*/
+const Shell = forwardRef(({ sidebar, topbar, tabbar, rightPanel, children, rightPanelOpen: rightPanelOpenProp, defaultRightPanelOpen = false, onRightPanelOpenChange, className, ...rest }, ref) => {
+	const [rightPanelOpen, setRightPanelOpen] = useControllableState(rightPanelOpenProp, defaultRightPanelOpen, onRightPanelOpenChange);
+	const rightPanelId = useId();
+	const rightPanelTriggerRef = useRef(null);
+	const focusTriggerOnMountRef = useRef(false);
+	useEffect(() => {
+		if (rightPanelOpen) focusTriggerOnMountRef.current = false;
+	}, [rightPanelOpen]);
+	const context = useMemo(() => ({
+		rightPanelOpen,
+		setRightPanelOpen,
+		rightPanelId,
+		rightPanelTriggerRef,
+		focusTriggerOnMountRef
+	}), [
+		rightPanelOpen,
+		setRightPanelOpen,
+		rightPanelId
+	]);
+	return /* @__PURE__ */ jsx(ShellContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			className: cn("relative isolate flex h-dvh w-full overflow-hidden bg-background font-sans text-foreground", className),
+			...rest,
+			children: [
+				sidebar != null && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "w-16 shrink-0"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "absolute inset-y-0 left-0 z-40 flex",
+					children: sidebar
+				})] }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: [
+						topbar,
+						tabbar,
+						/* @__PURE__ */ jsx("div", {
+							className: "flex min-h-0 flex-1",
+							children
+						})
+					]
+				}),
+				rightPanel != null && rightPanelOpen && /* @__PURE__ */ jsx("div", {
+					className: "absolute inset-y-0 right-0 z-30 flex max-w-full lg:static lg:z-auto",
+					children: rightPanel
+				})
+			]
+		})
+	});
+});
+Shell.displayName = "Shell";
+const sidebarRootClasses = "group/sidebar relative flex h-full w-16 flex-col overflow-hidden bg-background shadow-[6px_0_24px_-4px_color-mix(in_oklab,var(--color-slate-400)_25%,transparent)] data-expanded:w-64 data-expanded:shadow-[12px_0_48px_-8px_color-mix(in_oklab,var(--color-slate-400)_25%,transparent)] motion-safe:transition-[width,box-shadow] motion-safe:duration-200 motion-safe:ease-out";
+const showWhenExpandedClasses = "opacity-0 motion-safe:transition-opacity motion-safe:duration-200 group-data-expanded/sidebar:opacity-100";
+const showWhenCollapsedClasses = "motion-safe:transition-opacity motion-safe:duration-200 group-data-expanded/sidebar:opacity-0";
+const itemRowClasses = "relative flex h-10 w-full items-center gap-3 overflow-hidden rounded-md font-sans text-sm font-medium text-slate-600 transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&_svg]:pointer-events-none";
+const itemActiveClasses = "bg-primary-50 text-primary hover:bg-primary-100 hover:text-primary";
+const itemDisabledClasses = "pointer-events-none opacity-50";
+function SidebarItemRow({ item, active, expanded }) {
+	const className = cn(itemRowClasses, active && itemActiveClasses, item.disabled && itemDisabledClasses);
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "flex size-10 shrink-0 items-center justify-center [&_svg:not([class*='size-'])]:size-5",
+			children: /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "contents",
+				children: item.icon
+			})
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: cn("min-w-0 flex-1 truncate", showWhenExpandedClasses),
+			children: item.name
+		}),
+		item.badge && /* @__PURE__ */ jsx(Badge, {
+			size: "sm",
+			pill: true,
+			variant: item.badge.tone ?? "primary",
+			appearance: "soft",
+			"aria-hidden": "true",
+			className: cn("mr-2", showWhenExpandedClasses),
+			children: formatBadgeCount(item.badge.count)
+		}),
+		item.badge && /* @__PURE__ */ jsx(Badge, {
+			dot: true,
+			variant: item.badge.tone ?? "primary",
+			"aria-label": item.badge.ariaLabel ?? formatBadgeCount(item.badge.count),
+			className: cn("absolute top-1 left-6.5", showWhenCollapsedClasses)
+		})
+	] });
+	const ariaCurrent = active ? "page" : void 0;
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Tooltip, {
+		disabled: expanded,
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			render: item.href != null && !item.disabled ? /* @__PURE__ */ jsx("a", {
+				href: item.href,
+				"aria-current": ariaCurrent,
+				className
+			}) : item.href != null ? /* @__PURE__ */ jsx("a", {
+				"aria-disabled": "true",
+				"aria-current": ariaCurrent,
+				className
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: item.action,
+				disabled: item.disabled,
+				"aria-current": ariaCurrent,
+				className: cn(className, "cursor-pointer")
+			}),
+			children: content
+		}), /* @__PURE__ */ jsx(TooltipPopup, {
+			side: "right",
+			children: item.name
+		})]
+	}) });
+}
+function SidebarGroupSection({ group, activeItemId, expanded, isFirst }) {
+	const titleId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-2 first:mt-0",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative flex h-8 w-full items-center overflow-hidden",
+			children: [/* @__PURE__ */ jsx("span", {
+				id: titleId,
+				className: cn("px-2 font-sans text-sm font-light capitalize whitespace-nowrap text-muted-foreground", showWhenExpandedClasses),
+				children: group.groupTitle
+			}), !isFirst && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("absolute inset-x-1 top-1/2 h-px -translate-y-1/2 bg-border", showWhenCollapsedClasses)
+			})]
+		}), /* @__PURE__ */ jsx("ul", {
+			"aria-labelledby": titleId,
+			className: "flex flex-col gap-1",
+			children: group.pages.map((item) => /* @__PURE__ */ jsx(SidebarItemRow, {
+				item,
+				active: item.id === activeItemId,
+				expanded
+			}, item.id))
+		})]
+	});
+}
+/**
+* Collapsible navigation rail. Collapsed it shows the brand mark, item
+* icons, on-icon badge dots, and group dividers; hovering it for
+* `expandDelay` (or focusing it with the keyboard, immediately) expands it
+* over the layout — never pushing it — revealing the brand name, group
+* titles, labels, and count badges in the same geometry, so nothing jumps.
+* It collapses `collapseDelay` after pointer and focus have both left,
+* unless it is pinned (the brand button, which is also the touch toggle),
+* controlled expanded, or a popup inside it is open. Items are real links
+* (`href`) or buttons (`action`) inside a labelled `nav`; the active item
+* carries `aria-current="page"`, and collapsed items show their name in a
+* tooltip.
+*/
+const ShellSidebar = forwardRef(({ brandLogo, brandName = "ArcFusion", groups, activeItemId, expanded: expandedProp, defaultExpanded = false, onExpandedChange, expandDelay = 175, collapseDelay = 175, navLabel = "Main", toggleLabel = "Toggle navigation", onPointerEnter, onPointerLeave, onFocus, onBlur, className, ...rest }, ref) => {
+	const [expanded, setExpanded] = useControllableState(expandedProp, defaultExpanded, onExpandedChange);
+	const rootRef = useRef(null);
+	const navId = useId();
+	const expandedRef = useRef(expanded);
+	useEffect(() => {
+		expandedRef.current = expanded;
+	});
+	const pinnedRef = useRef(false);
+	const pointerInsideRef = useRef(false);
+	const focusInsideRef = useRef(false);
+	const expandTimer = useRef(void 0);
+	const collapseTimer = useRef(void 0);
+	const cancelExpandTimer = useCallback(() => {
+		window.clearTimeout(expandTimer.current);
+		expandTimer.current = void 0;
+	}, []);
+	const cancelCollapseTimer = useCallback(() => {
+		window.clearTimeout(collapseTimer.current);
+		collapseTimer.current = void 0;
+	}, []);
+	useEffect(() => () => {
+		window.clearTimeout(expandTimer.current);
+		window.clearTimeout(collapseTimer.current);
+	}, []);
+	const scheduleExpand = useCallback(() => {
+		cancelCollapseTimer();
+		if (expandedRef.current || expandTimer.current !== void 0) return;
+		expandTimer.current = window.setTimeout(() => {
+			expandTimer.current = void 0;
+			setExpanded(true);
+		}, expandDelay);
+	}, [
+		cancelCollapseTimer,
+		expandDelay,
+		setExpanded
+	]);
+	const scheduleCollapse = useCallback(() => {
+		cancelExpandTimer();
+		if (!expandedRef.current || pinnedRef.current) return;
+		const attempt = () => {
+			collapseTimer.current = void 0;
+			if (!expandedRef.current || pinnedRef.current) return;
+			if (pointerInsideRef.current || focusInsideRef.current) return;
+			if (rootRef.current?.querySelector("[data-popup-open]")) {
+				collapseTimer.current = window.setTimeout(attempt, collapseDelay);
+				return;
+			}
+			setExpanded(false);
+		};
+		window.clearTimeout(collapseTimer.current);
+		collapseTimer.current = window.setTimeout(attempt, collapseDelay);
+	}, [
+		cancelExpandTimer,
+		collapseDelay,
+		setExpanded
+	]);
+	const handlePointerEnter = (event) => {
+		onPointerEnter?.(event);
+		if (event.pointerType !== "touch") {
+			pointerInsideRef.current = true;
+			cancelCollapseTimer();
+			if (!expanded) scheduleExpand();
+		}
+	};
+	const handlePointerLeave = (event) => {
+		onPointerLeave?.(event);
+		if (event.pointerType !== "touch") {
+			pointerInsideRef.current = false;
+			cancelExpandTimer();
+			if (!focusInsideRef.current) scheduleCollapse();
+		}
+	};
+	const handleFocus = (event) => {
+		onFocus?.(event);
+		focusInsideRef.current = true;
+		cancelCollapseTimer();
+		if (!expanded && isKeyboardFocus(event.target)) {
+			cancelExpandTimer();
+			setExpanded(true);
+		}
+	};
+	const handleBlur = (event) => {
+		onBlur?.(event);
+		if (rootRef.current?.contains(event.relatedTarget)) return;
+		focusInsideRef.current = false;
+		if (!pointerInsideRef.current) scheduleCollapse();
+	};
+	const handleToggle = () => {
+		cancelExpandTimer();
+		cancelCollapseTimer();
+		if (expanded) {
+			pinnedRef.current = false;
+			setExpanded(false);
+		} else {
+			pinnedRef.current = true;
+			setExpanded(true);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: (node) => {
+			rootRef.current = node;
+			assignRef(ref, node);
+		},
+		"data-expanded": expanded ? "" : void 0,
+		onPointerEnter: handlePointerEnter,
+		onPointerLeave: handlePointerLeave,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		className: cn(sidebarRootClasses, className),
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex h-16 w-full shrink-0 items-center gap-3 overflow-hidden px-3",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-expanded": expanded,
+				"aria-controls": navId,
+				"aria-label": toggleLabel,
+				onClick: handleToggle,
+				className: cn("flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors duration-150", "hover:bg-muted active:bg-slate-200", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "[&_img]:pointer-events-none [&_svg]:pointer-events-none"),
+				children: brandLogo ?? /* @__PURE__ */ jsx("img", {
+					src: arcfusionLogo,
+					alt: "",
+					className: "size-8"
+				})
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn("min-w-0 truncate font-heading text-lg font-semibold text-foreground", showWhenExpandedClasses),
+				children: brandName
+			})]
+		}), /* @__PURE__ */ jsx(TooltipProvider, {
+			delay: 300,
+			children: /* @__PURE__ */ jsx("nav", {
+				id: navId,
+				"aria-label": navLabel,
+				className: "min-h-0 flex-1 overflow-x-hidden overflow-y-auto px-3 pb-3",
+				children: groups.map((group, index) => /* @__PURE__ */ jsx(SidebarGroupSection, {
+					group,
+					activeItemId,
+					expanded,
+					isFirst: index === 0
+				}, group.id))
+			})
+		})]
+	});
+});
+ShellSidebar.displayName = "ShellSidebar";
+/**
+* Page header row: a title (or breadcrumb trail) on the left; page-owned
+* actions, the optional Ask AI toggle, and the global application menu on
+* the right. The Ask AI button only flips the Shell's panel state
+* (`aria-expanded` reflects it) — the panel itself belongs to Shell layout.
+* The global menu renders through the Menu primitive, so arrow keys,
+* typeahead, and Escape come built in.
+*/
+const ShellTopbar = forwardRef(({ title, breadcrumbs, pageActions, showAskAi = false, askAiLabel = "Ask AI", globalMenuItems, globalMenuLabel = "Open application menu", className, ...rest }, ref) => {
+	const { rightPanelOpen, setRightPanelOpen, rightPanelId, rightPanelTriggerRef, focusTriggerOnMountRef } = useContext(ShellContext);
+	const askAiRef = useCallback((node) => {
+		rightPanelTriggerRef.current = node;
+		if (node != null && focusTriggerOnMountRef.current) {
+			focusTriggerOnMountRef.current = false;
+			node.focus();
+		}
+	}, [rightPanelTriggerRef, focusTriggerOnMountRef]);
+	return /* @__PURE__ */ jsxs("header", {
+		ref,
+		className: cn("flex pt-4 shrink-0 items-center gap-3 bg-background px-6", className),
+		...rest,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1",
+			children: breadcrumbs != null && breadcrumbs.length > 0 ? /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, {
+				className: "flex-nowrap",
+				children: breadcrumbs.map((crumb, index) => {
+					const isLast = index === breadcrumbs.length - 1;
+					return /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(BreadcrumbSeparator, {}), /* @__PURE__ */ jsx(BreadcrumbItem, {
+						className: "min-w-0",
+						children: isLast ? crumb.href != null ? /* @__PURE__ */ jsx(BreadcrumbLink, {
+							href: crumb.href,
+							"aria-current": "page",
+							className: "block truncate",
+							children: crumb.label
+						}) : /* @__PURE__ */ jsx(BreadcrumbPage, {
+							className: "block truncate",
+							children: crumb.label
+						}) : crumb.href != null ? /* @__PURE__ */ jsx(BreadcrumbLink, {
+							href: crumb.href,
+							className: "block truncate",
+							children: crumb.label
+						}) : crumb.action != null ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: crumb.action,
+							className: breadcrumbLinkVariants({ className: "block cursor-pointer truncate" }),
+							children: crumb.label
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "block truncate",
+							children: crumb.label
+						})
+					})] }, crumb.id);
+				})
+			}) }) : title != null ? /* @__PURE__ */ jsx("h1", {
+				className: "truncate font-heading text-xl font-semibold text-foreground",
+				children: title
+			}) : null
+		}), (pageActions != null || showAskAi || (globalMenuItems?.length ?? 0) > 0) && /* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-2",
+			children: [
+				pageActions,
+				(globalMenuItems?.length ?? 0) > 0 && /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						iconOnly: true,
+						"aria-label": globalMenuLabel
+					}),
+					children: /* @__PURE__ */ jsx(LayoutGridIcon, {})
+				}), /* @__PURE__ */ jsx(MenuPopup, {
+					align: "end",
+					className: "min-w-48",
+					children: globalMenuItems?.map((item) => item.href != null && !item.disabled ? /* @__PURE__ */ jsxs(MenuLinkItem, {
+						href: item.href,
+						children: [item.menuIcon != null && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "contents",
+							children: item.menuIcon
+						}), item.menuName]
+					}, item.id) : /* @__PURE__ */ jsxs(MenuItem, {
+						onClick: item.action,
+						disabled: item.disabled,
+						children: [item.menuIcon != null && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "contents",
+							children: item.menuIcon
+						}), item.menuName]
+					}, item.id))
+				})] }),
+				showAskAi && !rightPanelOpen && /* @__PURE__ */ jsx(Button, {
+					ref: askAiRef,
+					variant: "outline",
+					size: "sm",
+					iconOnly: true,
+					"aria-label": askAiLabel,
+					"aria-expanded": false,
+					"aria-controls": rightPanelId !== "" ? rightPanelId : void 0,
+					onClick: () => setRightPanelOpen(true),
+					children: /* @__PURE__ */ jsx(AILoader, {
+						size: "sm",
+						tone: "current"
+					})
+				})
+			]
+		})]
+	});
+});
+ShellTopbar.displayName = "ShellTopbar";
+/**
+* Optional row under the Topbar: page-view tabs on the left (the Tabs
+* primitive, so arrow-key navigation comes built in) and page-owned filter
+* controls on the right. It only emits `onTabChange` — it never touches page
+* data. When the tabs and filters can't share a row, the filters drop to
+* their own row below and stay right-aligned; if the tabs alone still
+* overflow, they scroll horizontally.
+*/
+const ShellTabbar = forwardRef(({ tabs, activeTabId, onTabChange, filters, className, ...rest }, ref) => /* @__PURE__ */ jsxs("div", {
+	ref,
+	className: cn("flex min-h-12 shrink-0 flex-wrap items-end gap-x-4 gap-y-1 bg-background px-6", className),
+	...rest,
+	children: [/* @__PURE__ */ jsx(Tabs, {
+		value: activeTabId,
+		onValueChange: (value) => {
+			if (typeof value === "string") onTabChange(value);
+		},
+		showDivider: false,
+		className: "min-w-0",
+		children: /* @__PURE__ */ jsx(TabsList, {
+			className: "overflow-x-auto",
+			children: tabs.map((tab) => /* @__PURE__ */ jsxs(TabsTab, {
+				value: tab.id,
+				disabled: tab.disabled,
+				children: [tab.label, tab.badge != null && /* @__PURE__ */ jsx(Badge, {
+					size: "sm",
+					pill: true,
+					children: formatBadgeCount(tab.badge)
+				})]
+			}, tab.id))
+		})
+	}), filters != null && /* @__PURE__ */ jsx("div", {
+		className: "ml-auto flex shrink-0 flex-wrap items-center justify-end gap-2 self-center py-2",
+		children: filters
+	})]
+}));
+ShellTabbar.displayName = "ShellTabbar";
+/**
+* The page content region and the Shell's primary scroll area — a `main`
+* landmark that fills the remaining space. Content is free-form; it carries
+* no page logic.
+*/
+const ShellMain = forwardRef(({ padded = true, className, ...rest }, ref) => /* @__PURE__ */ jsx("main", {
+	ref,
+	className: cn("min-w-0 flex-1 overflow-y-auto bg-background", padded && "p-6", className),
+	...rest
+}));
+ShellMain.displayName = "ShellMain";
+/**
+* Right-side panel chrome — the Shell mounts it while the panel is open,
+* docked at full Shell height beside the topbar/tabbar/main column on `lg`+
+* viewports (the column narrows) and overlaying it below. A labelled
+* `aside` with its own scroll area and a close control;
+* Escape from inside also closes it, returning focus to the Ask AI trigger.
+* It is not modal and traps no focus. Content is a free slot — Ask AI
+* functionality lives with the app, not here.
+*/
+const ShellRightPanel = forwardRef(({ title, closeLabel = "Close panel", onKeyDown, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }, ref) => {
+	const { setRightPanelOpen, rightPanelId, rightPanelTriggerRef, focusTriggerOnMountRef } = useContext(ShellContext);
+	const titleId = useId();
+	const close = () => {
+		if (rightPanelTriggerRef.current == null) focusTriggerOnMountRef.current = true;
+		setRightPanelOpen(false);
+		rightPanelTriggerRef.current?.focus();
+	};
+	const labelledBy = ariaLabelledBy ?? (title != null ? titleId : void 0);
+	return /* @__PURE__ */ jsxs("aside", {
+		ref,
+		id: rightPanelId === "" ? void 0 : rightPanelId,
+		"aria-label": ariaLabel ?? (labelledBy == null ? "Ask AI" : void 0),
+		"aria-labelledby": labelledBy,
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.key === "Escape" && !event.defaultPrevented) close();
+		},
+		className: cn("flex h-full w-90 max-w-full flex-col bg-background shadow-[-6px_0_24px_-4px_color-mix(in_oklab,var(--color-slate-400)_25%,transparent)]", className),
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex h-14 shrink-0 items-center justify-between gap-2 border-b border-border py-2 pr-3 pl-4",
+			children: [title != null ? /* @__PURE__ */ jsx("h2", {
+				id: titleId,
+				className: "min-w-0 truncate font-heading text-base font-semibold text-foreground",
+				children: title
+			}) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }), /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				iconOnly: true,
+				"aria-label": closeLabel,
+				onClick: close,
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1 overflow-y-auto",
+			children
+		})]
+	});
+});
+ShellRightPanel.displayName = "ShellRightPanel";
+//#endregion
+export { Shell, ShellMain, ShellRightPanel, ShellSidebar, ShellTabbar, ShellTopbar, useShell };

package/dist/components/Shell/index.d.ts

@@ -0,0 +1,2 @@
+import { Shell, ShellBreadcrumbItem, ShellGlobalMenuItem, ShellMain, ShellMainProps, ShellNavTarget, ShellProps, ShellRightPanel, ShellRightPanelProps, ShellSidebar, ShellSidebarProps, ShellTabItem, ShellTabbar, ShellTabbarProps, ShellTopbar, ShellTopbarProps, SidebarMenuGroup, SidebarMenuItem, SidebarMenuItemBadge, useShell } from "./Shell.js";
+export { Shell, type ShellBreadcrumbItem, type ShellGlobalMenuItem, ShellMain, type ShellMainProps, type ShellNavTarget, type ShellProps, ShellRightPanel, type ShellRightPanelProps, ShellSidebar, type ShellSidebarProps, type ShellTabItem, ShellTabbar, type ShellTabbarProps, ShellTopbar, type ShellTopbarProps, type SidebarMenuGroup, type SidebarMenuItem, type SidebarMenuItemBadge, useShell };

package/dist/components/Shell/index.js

@@ -0,0 +1,2 @@
+import { Shell, ShellMain, ShellRightPanel, ShellSidebar, ShellTabbar, ShellTopbar, useShell } from "./Shell.js";
+export { Shell, ShellMain, ShellRightPanel, ShellSidebar, ShellTabbar, ShellTopbar, useShell };

package/dist/components/Stepper/Stepper.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { createContext, forwardRef, useContext, useEffect, useMemo, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/Stepper/Stepper.tsx
 function CheckIcon(props) {
@@ -272,7 +272,7 @@ const StepperIndicator = forwardRef(({ children, render, className, ...rest }, r
 		props: {
 			...stepStateAttributes(item, orientation),
 			...rest,
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [children ?? glyph, statusLabel != null && /* @__PURE__ */ jsx("span", {
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [children ?? glyph, statusLabel != null && /* @__PURE__ */ jsx("span", {
 				className: "sr-only",
 				children: statusLabel
 			})] }),

package/dist/components/Switch/Switch.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { forwardRef, useId } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Switch } from "@base-ui/react/switch";
 //#region src/components/Switch/Switch.tsx
 const trackClasses = "inline-flex shrink-0 cursor-pointer select-none items-center rounded-full border border-border bg-muted p-px transition-colors duration-150 hover:border-slate-300 hover:bg-slate-200 data-checked:border-primary data-checked:bg-primary hover:data-checked:border-primary-700 hover:data-checked:bg-primary-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-invalid:border-destructive data-invalid:border-destructive aria-invalid:focus-visible:outline-destructive data-invalid:focus-visible:outline-destructive data-readonly:cursor-default disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
@@ -74,7 +74,7 @@ const Switch$1 = forwardRef(({ size = "md", label, description, labelPosition =
 		className: cn("inline-flex max-w-full flex-col gap-1 font-sans", "has-data-disabled:pointer-events-none has-data-disabled:opacity-50"),
 		children: [hasLabel ? /* @__PURE__ */ jsx("label", {
 			className: cn("inline-flex cursor-pointer items-start gap-2", "has-data-readonly:cursor-default", labelPosition === "start" && "justify-between"),
-			children: labelPosition === "start" ? /* @__PURE__ */ jsxs(Fragment, { children: [labelText, control] }) : /* @__PURE__ */ jsxs(Fragment, { children: [control, labelText] })
+			children: labelPosition === "start" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [labelText, control] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [control, labelText] })
 		}) : control, description != null && /* @__PURE__ */ jsx("span", {
 			id: descriptionId,
 			className: cn("text-muted-foreground", descriptionTextClasses[size], labelPosition === "end" && descriptionIndentClasses[size]),