@invana/ui 0.0.23 → 0.0.24

package/dist/index.cjs

@@ -3115,27 +3115,214 @@ function ChatSessionMessage({
     footer
   ] });
 }
+var NONE = Object.freeze([]);
+function same(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+  return true;
+}
+function useOverflowItems({
+  count,
+  enabled = true,
+  pinnedIndex,
+  reserve = 32
+}) {
+  const containerEl = React23__namespace.useRef(null);
+  const itemEls = React23__namespace.useRef([]);
+  const widths = React23__namespace.useRef([]);
+  const itemRefs = React23__namespace.useRef([]);
+  const [hidden, setHidden] = React23__namespace.useState(NONE);
+  const fit = React23__namespace.useCallback(() => {
+    const el = containerEl.current;
+    if (!el || !enabled) {
+      setHidden((prev) => prev === NONE ? prev : NONE);
+      return;
+    }
+    const gap = Number.parseFloat(getComputedStyle(el).columnGap) || 0;
+    for (let i = 0; i < count; i++) {
+      const item = itemEls.current[i];
+      if (item && item.offsetParent !== null) widths.current[i] = item.offsetWidth + gap;
+    }
+    const budget = el.clientWidth;
+    if (budget <= 0) return;
+    let total = 0;
+    for (let i = 0; i < count; i++) total += widths.current[i] ?? 0;
+    if (total <= budget + gap) {
+      setHidden((prev) => prev === NONE ? prev : NONE);
+      return;
+    }
+    const next = [];
+    let used = pinnedIndex != null ? widths.current[pinnedIndex] ?? 0 : 0;
+    for (let i = 0; i < count; i++) {
+      if (i === pinnedIndex) continue;
+      const w = widths.current[i] ?? 0;
+      if (used + w <= budget - reserve) used += w;
+      else next.push(i);
+    }
+    setHidden((prev) => same(prev, next) ? prev : next);
+  }, [count, enabled, pinnedIndex, reserve]);
+  React23__namespace.useLayoutEffect(() => {
+    widths.current = [];
+    itemEls.current.length = count;
+    setHidden((prev) => prev === NONE ? prev : NONE);
+  }, [count]);
+  React23__namespace.useLayoutEffect(() => {
+    fit();
+    if (!enabled || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => fit());
+    if (containerEl.current) observer.observe(containerEl.current);
+    for (const item of itemEls.current) if (item) observer.observe(item);
+    return () => observer.disconnect();
+  }, [fit, enabled, hidden]);
+  const containerRef = React23__namespace.useCallback((el) => {
+    containerEl.current = el;
+  }, []);
+  const itemRef = React23__namespace.useCallback((index) => {
+    let fn = itemRefs.current[index];
+    if (!fn) {
+      fn = (el) => {
+        itemEls.current[index] = el;
+      };
+      itemRefs.current[index] = fn;
+    }
+    return fn;
+  }, []);
+  const isHidden = React23__namespace.useCallback(
+    (index) => hidden.includes(index),
+    [hidden]
+  );
+  return { containerRef, itemRef, hiddenIndices: hidden, isHidden };
+}
+var VARIANT = {
+  /** The capsule: a filled, ringed chip. Toolbars, rails, header actions. */
+  nav: {
+    item: "rounded-control ring-1 ring-transparent",
+    hover: "hover:bg-primary/10 hover:text-primary hover:ring-primary/25",
+    open: "data-[state=open]:bg-primary/15 data-[state=open]:text-primary data-[state=open]:ring-primary/25",
+    active: "bg-primary/15 text-primary ring-primary/25",
+    strip: ""
+  },
+  /** The panel tab: accented fill with a rule under it, merging into the body. */
+  underline: {
+    item: "h-full rounded-none px-3 py-2",
+    hover: "hover:text-foreground",
+    open: "data-[state=open]:text-foreground",
+    active: "bg-primary/10 text-primary border-b-2 border-primary mb-[-1px]",
+    strip: "items-stretch"
+  },
+  /**
+   * The workbook tab: boxed on top / left / right with an *open bottom*, so it
+   * punches through the strip's own rule — the classic folder-tab notch.
+   */
+  folder: {
+    item: "h-full rounded-none px-3 py-2 gap-1.5",
+    hover: "hover:text-foreground",
+    open: "data-[state=open]:text-foreground",
+    active: "mb-[-1px] rounded-t-md border border-b-0 border-primary text-primary",
+    strip: "items-stretch"
+  }
+};
+var keyOf = (item) => item.key ?? item.name;
 var NavItems = ({
   items,
   orientation = "horizontal",
   tooltipSide = orientation === "vertical" ? "right" : "bottom",
-  iconClassName = orientation === "vertical" ? "w-5 h-5" : "w-4 h-4 flex-shrink-0"
+  iconClassName = orientation === "vertical" ? "w-5 h-5" : "w-4 h-4 flex-shrink-0",
+  variant = "nav",
+  activeKey,
+  onActiveChange,
+  selectionMode = "none",
+  panelId,
+  overflow = false,
+  overflowLabel = "More",
+  className
 }) => {
   const isVertical = orientation === "vertical";
-  const [activeItem, setActiveItem] = React23__namespace.default.useState(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item) => {
-    const isActive = activeItem === item.name;
-    const padding = item.label ? "px-3 py-1.5" : "px-2 py-2";
+  const isTabs = selectionMode === "tabs";
+  const V = VARIANT[variant];
+  const [internalActive, setInternalActive] = React23__namespace.default.useState(
+    null
+  );
+  const isControlled = activeKey !== void 0;
+  const currentKey = isControlled ? activeKey : internalActive;
+  const activeIndex = items.findIndex((item) => keyOf(item) === currentKey);
+  const nodes = React23__namespace.default.useRef({});
+  const pendingFocus = React23__namespace.default.useRef(null);
+  React23__namespace.default.useEffect(() => {
+    const key = pendingFocus.current;
+    if (!key) return;
+    const node = nodes.current[key];
+    if (!node) return;
+    pendingFocus.current = null;
+    node.focus();
+  });
+  const { containerRef, itemRef, hiddenIndices, isHidden } = useOverflowItems({
+    count: items.length,
+    enabled: overflow && !isVertical,
+    pinnedIndex: activeIndex >= 0 ? activeIndex : void 0
+  });
+  const select = React23__namespace.default.useCallback(
+    (item) => {
+      if (item.disabled) return;
+      const key = keyOf(item);
+      item.onClick?.();
+      if (!isControlled) {
+        setInternalActive((prev) => isTabs ? key : prev === key ? null : key);
+      }
+      onActiveChange?.(key);
+    },
+    [isControlled, isTabs, onActiveChange]
+  );
+  const step = (from, delta) => {
+    if (items.length === 0) return -1;
+    let i = from < 0 ? delta > 0 ? -1 : 0 : from;
+    for (let n = 0; n < items.length; n++) {
+      i = (i + delta + items.length) % items.length;
+      if (!items[i]?.disabled) return i;
+    }
+    return -1;
+  };
+  const edge = (delta) => {
+    const start = delta > 0 ? -1 : items.length;
+    return step(start, delta);
+  };
+  const handleKeyDown = (event) => {
+    if (!isTabs) return;
+    const next = isVertical ? "ArrowDown" : "ArrowRight";
+    const prev = isVertical ? "ArrowUp" : "ArrowLeft";
+    let target = -1;
+    if (event.key === next) target = step(activeIndex, 1);
+    else if (event.key === prev) target = step(activeIndex, -1);
+    else if (event.key === "Home") target = edge(1);
+    else if (event.key === "End") target = edge(-1);
+    else return;
+    const item = items[target];
+    if (!item) return;
+    event.preventDefault();
+    pendingFocus.current = keyOf(item);
+    select(item);
+  };
+  const renderItem = (item, index) => {
+    const key = keyOf(item);
+    const isActive = key === currentKey;
     const hasMenu = !item.href && Boolean(item.menuItems?.length);
-    const isInteractive = Boolean(item.href || item.onClick || hasMenu);
-    const itemClass = `relative inline-flex border-0 items-center justify-center gap-2
-          whitespace-nowrap rounded-control transition-colors
-          ring-1 ring-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
-          ${padding}
-          ${isInteractive ? "cursor-pointer hover:bg-primary/10 hover:text-primary hover:ring-primary/25" : ""}
-          ${hasMenu ? "data-[state=open]:bg-primary/15 data-[state=open]:text-primary data-[state=open]:ring-primary/25" : ""}
-          ${isActive ? `bg-primary/15 text-primary ring-primary/25 ${item.activeClass || ""}` : ""}
-          ${item.className || ""}`;
+    const asCaret = hasMenu && item.menuTrigger === "caret";
+    const isInteractive = Boolean(
+      item.href || item.onClick || hasMenu || isTabs
+    );
+    const padding = variant === "nav" ? item.label ? "px-3 py-1.5" : "px-2 py-2" : "";
+    const itemClass = cn(
+      `relative inline-flex border-0 items-center justify-center gap-2
+       whitespace-nowrap transition-colors
+       ring-1 ring-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`,
+      V.item,
+      padding,
+      isInteractive && !item.disabled && `cursor-pointer ${V.hover}`,
+      hasMenu && !asCaret && V.open,
+      item.disabled && "pointer-events-none opacity-50",
+      isActive && cn(V.active, item.activeClass),
+      item.className
+    );
     const icon = item.icon && /* @__PURE__ */ jsxRuntime.jsx(
       item.icon,
       {
@@ -3143,41 +3330,79 @@ var NavItems = ({
         className: item.iconClassName || iconClassName
       }
     );
-    const label = item.label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label });
+    const label = item.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: item.labelClassName, children: item.label });
     const badge = item.badge != null && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        className: "pointer-events-none absolute -right-0.5 -top-0.5 inline-flex h-3.5\n              min-w-3.5 items-center justify-center rounded-full bg-primary px-1\n              text-[9px] font-semibold leading-none text-primary-foreground",
+        className: "pointer-events-none absolute -right-0.5 -top-0.5 inline-flex h-3.5\n          min-w-3.5 items-center justify-center rounded-full bg-primary px-1\n          text-[9px] font-semibold leading-none text-primary-foreground",
         children: item.badge
       }
     );
+    const tabProps = isTabs ? {
+      role: "tab",
+      "aria-selected": isActive,
+      "aria-controls": panelId?.(key),
+      tabIndex: isActive || activeIndex < 0 && index === 0 ? 0 : -1
+    } : {};
+    const setNode = (el) => {
+      nodes.current[key] = el;
+      itemRef(index)(el);
+    };
+    const caret = asCaret && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        role: "button",
+        tabIndex: -1,
+        "aria-label": `${item.name} menu`,
+        onClick: (e) => e.stopPropagation(),
+        className: "ml-0.5 grid size-4 shrink-0 cursor-pointer place-items-center\n            rounded-control text-muted-foreground hover:bg-accent hover:text-foreground",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-3" })
+      }
+    ) });
     const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       icon,
       label,
+      caret,
       badge
     ] });
-    const control = item.href ? /* @__PURE__ */ jsxRuntime.jsx(
+    const control = asCaret ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: setNode,
+        ...tabProps,
+        style: item.style,
+        onClick: () => select(item),
+        className: itemClass,
+        children: inner
+      }
+    ) : item.href ? /* @__PURE__ */ jsxRuntime.jsx(
       "a",
       {
+        ref: setNode,
         href: item.href,
-        onClick: () => setActiveItem(item.name),
+        style: item.style,
+        onClick: () => select(item),
         className: itemClass,
         children: inner
       }
-    ) : item.onClick || hasMenu ? /* @__PURE__ */ jsxRuntime.jsx(
+    ) : item.onClick || hasMenu || isTabs ? /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
+        ref: setNode,
         type: "button",
+        disabled: item.disabled,
+        ...tabProps,
+        style: item.style,
         onClick: () => {
-          item.onClick?.();
-          if (!hasMenu) setActiveItem(isActive ? null : item.name);
+          if (hasMenu) item.onClick?.();
+          else select(item);
         },
         className: itemClass,
         children: inner
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: itemClass, children: inner });
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNode, style: item.style, className: itemClass, children: inner });
     const withTooltip = /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: hasMenu ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: control }) : control }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: hasMenu && !asCaret ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: control }) : control }),
       /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: item.tooltipSide || tooltipSide, children: item.tooltip || item.name })
     ] });
     return /* @__PURE__ */ jsxRuntime.jsxs(React23__namespace.default.Fragment, { children: [
@@ -3188,28 +3413,7 @@ var NavItems = ({
           {
             side: isVertical ? "right" : "bottom",
             align: isVertical ? "start" : "end",
-            children: item.menuItems?.map((menuItem) => {
-              const MenuIcon = menuItem.icon;
-              const gutter = item.menuItems?.some((m) => m.icon);
-              return /* @__PURE__ */ jsxRuntime.jsxs(React23__namespace.default.Fragment, { children: [
-                menuItem.separatorBefore && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  DropdownMenuItem,
-                  {
-                    disabled: menuItem.disabled,
-                    onSelect: () => menuItem.onSelect?.(),
-                    className: cn(
-                      menuItem.destructive && "text-destructive focus:bg-destructive/15 focus:text-destructive hover:bg-destructive/10 hover:text-destructive"
-                    ),
-                    children: [
-                      MenuIcon ? /* @__PURE__ */ jsxRuntime.jsx(MenuIcon, {}) : gutter ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "size-4 shrink-0" }) : null,
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: menuItem.label }),
-                      menuItem.shortcut && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuShortcut, { children: menuItem.shortcut })
-                    ]
-                  }
-                )
-              ] }, menuItem.id);
-            })
+            children: renderMenuRows(item.menuItems)
           }
         )
       ] }) : withTooltip,
@@ -3221,22 +3425,132 @@ var NavItems = ({
         }
       )
     ] }, item.key || item.name);
-  }) });
+  };
+  const rendered = items.map(
+    (item, index) => isHidden(index) ? null : renderItem(item, index)
+  );
+  const overflowTrigger = hiddenIndices.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": overflowLabel,
+          className: cn(
+            `relative inline-flex shrink-0 items-center justify-center border-0
+                 transition-colors ring-1 ring-transparent focus-visible:outline-none
+                 focus-visible:ring-2 focus-visible:ring-ring cursor-pointer`,
+            V.item,
+            variant === "nav" && "px-2 py-2",
+            V.hover,
+            V.open
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: iconClassName })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: tooltipSide, children: overflowLabel })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", children: hiddenIndices.map((index) => {
+      const item = items[index];
+      if (!item) return null;
+      const Icon = item.icon;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        DropdownMenuItem,
+        {
+          disabled: item.disabled,
+          onSelect: () => select(item),
+          children: [
+            Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "size-4 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label ?? item.name })
+          ]
+        },
+        keyOf(item)
+      );
+    }) })
+  ] });
+  if (!isTabs && !overflow) {
+    return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 0, children: rendered });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      role: isTabs ? "tablist" : void 0,
+      "aria-orientation": isTabs ? orientation : void 0,
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "flex min-w-0",
+        isVertical ? "flex-col items-center gap-1" : "items-center gap-1",
+        V.strip,
+        className
+      ),
+      children: [
+        rendered,
+        overflowTrigger
+      ]
+    }
+  ) });
 };
-var NavBase = ({ className = "", orientation, sections }) => {
+function renderMenuRows(menuItems) {
+  const gutter = menuItems?.some((m) => m.icon);
+  return menuItems?.map((menuItem) => {
+    const MenuIcon = menuItem.icon;
+    return /* @__PURE__ */ jsxRuntime.jsxs(React23__namespace.default.Fragment, { children: [
+      menuItem.separatorBefore && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        DropdownMenuItem,
+        {
+          disabled: menuItem.disabled,
+          onSelect: () => menuItem.onSelect?.(),
+          className: cn(
+            menuItem.destructive && "text-destructive focus:bg-destructive/15 focus:text-destructive hover:bg-destructive/10 hover:text-destructive"
+          ),
+          children: [
+            MenuIcon ? /* @__PURE__ */ jsxRuntime.jsx(MenuIcon, {}) : gutter ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "size-4 shrink-0" }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: menuItem.label }),
+            menuItem.shortcut && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuShortcut, { children: menuItem.shortcut })
+          ]
+        }
+      )
+    ] }, menuItem.id);
+  });
+}
+var NavBase = ({
+  className = "",
+  orientation,
+  sections
+}) => {
   const isVertical = orientation === "vertical";
   const containerClass = isVertical ? `flex flex-col items-center h-full ${className}` : `flex items-center   w-full ${className}`;
   const sectionWrapperClass = isVertical ? "flex flex-col items-center gap-1" : "flex items-center gap-1 ";
   return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: containerClass, children: [
-    sections.start?.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${sectionWrapperClass} ${sections.start.className || ""}`, children: sections.start.content }),
-    sections.center?.content ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 ${isVertical ? "" : "flex justify-center items-center gap-1"} ${sections.center.className || ""}`, children: sections.center.content }) : (
+    sections.start?.content && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${sectionWrapperClass} ${sections.start.className || ""}`,
+        children: sections.start.content
+      }
+    ),
+    sections.center?.content ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `flex-1 ${isVertical ? "" : "flex justify-center items-center gap-1"} ${sections.center.className || ""}`,
+        children: sections.center.content
+      }
+    ) : (
       // Empty spacer to push end section to the bottom/right
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
     ),
-    sections.end?.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${sectionWrapperClass} ${isVertical ? "" : "ml-auto"} ${sections.end.className || ""}`, children: sections.end.content })
+    sections.end?.content && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${sectionWrapperClass} ${isVertical ? "" : "ml-auto"} ${sections.end.className || ""}`,
+        children: sections.end.content
+      }
+    )
   ] });
 };
-var NavHorizontalItems = ({ items }) => /* @__PURE__ */ jsxRuntime.jsx(NavItems, { items, orientation: "horizontal" });
+var NavHorizontalItems = (props) => /* @__PURE__ */ jsxRuntime.jsx(NavItems, { ...props, orientation: "horizontal" });
 var NavHorizontal = ({
   left,
   leftNavItems,
@@ -4270,7 +4584,7 @@ var MetricGrid = React23__namespace.forwardRef(
   )
 );
 MetricGrid.displayName = "MetricGrid";
-var NavVerticalItems = ({ items }) => /* @__PURE__ */ jsxRuntime.jsx(NavItems, { items, orientation: "vertical" });
+var NavVerticalItems = (props) => /* @__PURE__ */ jsxRuntime.jsx(NavItems, { ...props, orientation: "vertical" });
 var NavVertical = ({
   className = "",
   top,
@@ -4975,6 +5289,9 @@ function TabbedPanel({
   activeTab,
   onTabChange,
   headerActions,
+  overflow = false,
+  overflowLabel = "More panels",
+  keepMounted = false,
   className,
   headerClassName,
   bodyClassName,
@@ -4989,34 +5306,64 @@ function TabbedPanel({
     }
     onTabChange?.(value);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(Tabs, { value: currentTab, onValueChange: handleTabChange, className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("h-full border rounded-none", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: `flex flex-row items-center justify-between py-0 border-b h-[30px] px-0 space-y-0 ${headerClassName || ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "h-full bg-transparent p-0 gap-0 rounded-none", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
-        TabsTrigger,
+  const uid = React23__namespace.default.useId();
+  const panelId = (value) => `${uid}-panel-${value}`;
+  const items = React23__namespace.default.useMemo(
+    () => tabs.map((tab) => ({
+      key: tab.value,
+      name: tab.name ?? (typeof tab.label === "string" ? tab.label : tab.value),
+      label: tab.label,
+      icon: tab.icon,
+      disabled: tab.disabled
+    })),
+    [tabs]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("flex h-full min-h-0 flex-col border rounded-none", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex h-[30px] shrink-0 flex-row items-stretch border-b",
+          headerClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            NavItems,
+            {
+              items,
+              variant: "underline",
+              selectionMode: "tabs",
+              activeKey: currentTab,
+              onActiveChange: handleTabChange,
+              panelId,
+              overflow,
+              overflowLabel,
+              className: "min-w-0 flex-1 gap-0",
+              iconClassName: "h-3.5 w-3.5 shrink-0"
+            }
+          ),
+          headerActions && headerActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex h-full shrink-0 items-center gap-1 pr-1", children: /* @__PURE__ */ jsxRuntime.jsx(NavHorizontalItems, { items: headerActions }) })
+        ]
+      }
+    ),
+    tabs.map((tab) => {
+      const active = tab.value === currentTab;
+      if (!keepMounted && !active) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
         {
-          value: tab.value,
-          disabled: tab.disabled,
-          className: "h-full text-muted-foreground hover:text-foreground data-[state=active]:bg-primary/10 data-[state=active]:text-primary data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:mb-[-1px] rounded-none px-3 py-2",
-          children: [
-            tab.icon && /* @__PURE__ */ jsxRuntime.jsx(tab.icon, { className: "h-3.5 w-3.5 mr-1.5" }),
-            tab.label
-          ]
+          id: panelId(tab.value),
+          role: "tabpanel",
+          "aria-label": tab.name ?? (typeof tab.label === "string" ? tab.label : tab.value),
+          hidden: !active,
+          className: cn("m-0 min-h-0 flex-1 overflow-y-auto", bodyClassName),
+          children: tab.content
         },
         tab.value
-      )) }),
-      headerActions && headerActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex h-full shrink-0 items-center gap-1 pr-1", children: /* @__PURE__ */ jsxRuntime.jsx(NavHorizontalItems, { items: headerActions }) })
-    ] }),
-    tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
-      TabsContent,
-      {
-        value: tab.value,
-        className: `h-[calc(100%-30px)] m-0 ${bodyClassName || ""}`,
-        children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "overflow-y-auto h-full p-0", children: tab.content })
-      },
-      tab.value
-    )),
-    footerContent && /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { className: footerClassName, children: footerContent })
-  ] }) }) }) });
+      );
+    }),
+    footerContent && /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { className: cn("shrink-0", footerClassName), children: footerContent })
+  ] }) }) });
 }
 var TemplatePicker = React23__namespace.forwardRef(({ heading, options, value, onSelect, footnote, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   "div",
@@ -5128,27 +5475,93 @@ var TerminalLine = React23__namespace.forwardRef(
   )
 );
 TerminalLine.displayName = "TerminalLine";
-var TimelineList = React23__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("ol", { ref, className: cn("flex flex-col", className), ...props, children }));
+var TimelineVariantContext = React23__namespace.createContext("columns");
+var RAIL_MARKER_OFFSET = "h-[0.692rem]";
+var RAIL_FOOTER_TAIL = "h-[1.067rem]";
+var TimelineList = React23__namespace.forwardRef(({ className, variant = "columns", children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TimelineVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { ref, className: cn("flex flex-col", className), ...props, children }) }));
 TimelineList.displayName = "TimelineList";
-var TimelineEntry = React23__namespace.forwardRef(({ when, title, marker, className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "li",
-  {
-    ref,
-    className: cn("flex gap-2 border-b border-border py-1.5 last:border-b-0", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-[72px] shrink-0 items-baseline gap-1.5 text-meta text-muted-foreground", children: [
-        marker ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "translate-y-1", children: marker }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: when })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-        title != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: title }) : null,
-        children
-      ] })
-    ]
+function RailGutter({ marker }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-2.5 shrink-0 flex-col items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "w-px shrink-0 bg-border group-first/entry:bg-transparent",
+          RAIL_MARKER_OFFSET
+        )
+      }
+    ),
+    marker,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "w-px flex-1 bg-border group-last/entry:bg-transparent"
+      }
+    )
+  ] });
+}
+var TimelineEntry = React23__namespace.forwardRef(({ when, title, marker, className, children, ...props }, ref) => {
+  const variant = React23__namespace.useContext(TimelineVariantContext);
+  if (variant === "rail") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        ref,
+        className: cn("group/entry flex gap-2.5", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RailGutter, { marker }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 pb-4 group-last/entry:pb-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-meta text-muted-foreground", children: when }),
+            title != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: title }) : null,
+            children
+          ] })
+        ]
+      }
+    );
   }
-));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      ref,
+      className: cn("flex gap-2 border-b border-border py-1.5 last:border-b-0", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-[72px] shrink-0 items-baseline gap-1.5 text-meta text-muted-foreground", children: [
+          marker ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "translate-y-1", children: marker }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: when })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          title != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: title }) : null,
+          children
+        ] })
+      ]
+    }
+  );
+});
 TimelineEntry.displayName = "TimelineEntry";
+var TimelineFooter = React23__namespace.forwardRef(({ className, children, ...props }, ref) => {
+  const variant = React23__namespace.useContext(TimelineVariantContext);
+  if (variant === "rail") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        ref,
+        role: "presentation",
+        className: cn("flex gap-2.5", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex w-2.5 shrink-0 justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: cn("w-px bg-border", RAIL_FOOTER_TAIL) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 pt-1.5", children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, role: "presentation", className: cn("pt-1.5", className), ...props, children });
+});
+TimelineFooter.displayName = "TimelineFooter";
 var Toolbar = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-5 items-center space-x-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -5984,6 +6397,7 @@ exports.TemplatePicker = TemplatePicker;
 exports.Terminal = Terminal;
 exports.TerminalLine = TerminalLine;
 exports.TimelineEntry = TimelineEntry;
+exports.TimelineFooter = TimelineFooter;
 exports.TimelineList = TimelineList;
 exports.Toaster = Toaster;
 exports.Toggle = Toggle;
@@ -6023,6 +6437,7 @@ exports.cn = cn;
 exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
 exports.statusDotVariants = statusDotVariants;
 exports.toggleVariants = toggleVariants;
+exports.useOverflowItems = useOverflowItems;
 exports.useSidebar = useSidebar;
 exports.useTour = useTour;
 //# sourceMappingURL=index.cjs.map