@sckyzo/cosmos-react 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { forwardRef, createContext, Children, Fragment, cloneElement, isValidElement, useState, useRef, useCallback, useEffect, useId, useContext, useMemo } from 'react';
-import { ChevronRight, Check, Copy, BellOff, Bell, CheckCircle2, Info, AlertTriangle, XCircle, ChevronDown, Sun, Moon, MoonStar, ExternalLink, Search, EyeOff, Eye, Minus, Paperclip, Clock, X, ChevronLeft, Dot as Dot$1, ArrowRight, HelpCircle, Home, Inbox, AlertCircle, CheckCircle, RefreshCw, Loader2, Save, Megaphone, Cookie, ArrowUp, ChevronUp, Plus, Maximize2, RotateCcw, Camera, Trash2, Upload, File, ChevronsUpDown, Filter, MailCheck, ArrowLeft, Mail, User, ShieldCheck, Palette, Quote, Calendar as Calendar$1 } from 'lucide-react';
+import { forwardRef, createContext, useEffect, Children, Fragment, cloneElement, isValidElement, useState, useRef, useCallback, useId, useContext, useMemo } from 'react';
+import { ChevronRight, Check, Copy, BellOff, Bell, CheckCircle2, Info, AlertTriangle, XCircle, ChevronDown, Sun, Moon, MoonStar, ExternalLink, Search, EyeOff, Eye, Minus, Paperclip, Clock, X, ChevronLeft, Dot as Dot$1, ArrowRight, HelpCircle, PanelLeftOpen, PanelLeftClose, Home, Inbox, AlertCircle, CheckCircle, RefreshCw, Loader2, Save, Megaphone, Cookie, ArrowUp, ChevronUp, Plus, Maximize2, RotateCcw, Camera, Trash2, Upload, File, ChevronsUpDown, Filter, MailCheck, ArrowLeft, Mail, User, ShieldCheck, Palette, Quote, Calendar as Calendar$1 } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import Autoplay from 'embla-carousel-autoplay';
 import useEmblaCarousel from 'embla-carousel-react';
@@ -145,6 +145,7 @@ var Shell = ({
   defaultSidebarCollapsed = false,
   sidebarCollapsed: controlledCollapsed,
   onSidebarToggle,
+  collapseControl = "topbar",
   className
 }) => {
   const [internalCollapsed, setInternalCollapsed] = useState(defaultSidebarCollapsed);
@@ -154,12 +155,22 @@ var Shell = ({
     if (controlledCollapsed === void 0) setInternalCollapsed(next);
     onSidebarToggle?.(next);
   };
-  const enhancedTopbar = topbar && sidebar ? cloneElement(topbar, {
-    sidebarCollapsed: topbar.props.sidebarCollapsed ?? collapsed,
-    onToggleSidebar: topbar.props.onToggleSidebar ?? handleToggle
-  }) : topbar;
+  const inSidebar = collapseControl === "sidebar";
+  const enhancedTopbar = topbar && sidebar ? cloneElement(
+    topbar,
+    inSidebar ? (
+      // The control moved to the sidebar: no hamburger unless asked for.
+      { sidebarCollapsed: topbar.props.sidebarCollapsed ?? null }
+    ) : {
+      sidebarCollapsed: topbar.props.sidebarCollapsed ?? collapsed,
+      onToggleSidebar: topbar.props.onToggleSidebar ?? handleToggle
+    }
+  ) : topbar;
   const enhancedSidebar = sidebar ? cloneElement(sidebar, {
-    collapsed: sidebar.props.collapsed ?? collapsed
+    collapsed: sidebar.props.collapsed ?? collapsed,
+    ...inSidebar && {
+      onCollapsedChange: sidebar.props.onCollapsedChange ?? handleToggle
+    }
   }) : sidebar;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -244,17 +255,200 @@ var Topbar = ({
     ]
   }
 );
+var PopoverContext = createContext(null);
+var useCtx = () => {
+  const ctx = useContext(PopoverContext);
+  if (!ctx) throw new Error("Popover.* must be used inside <Popover>");
+  return ctx;
+};
+var PopoverRoot = ({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  children
+}) => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : internalOpen;
+  const triggerRef = useRef(null);
+  const [triggerRect, setTriggerRect] = useState(null);
+  const refreshRect = useCallback(() => {
+    if (triggerRef.current) setTriggerRect(triggerRef.current.getBoundingClientRect());
+  }, []);
+  const setOpen = useCallback(
+    (v) => {
+      if (v) refreshRect();
+      if (!isControlled) setInternalOpen(v);
+      onOpenChange?.(v);
+    },
+    [isControlled, onOpenChange, refreshRect]
+  );
+  useEffect(() => {
+    if (!open) return;
+    const handler = () => refreshRect();
+    window.addEventListener("resize", handler);
+    window.addEventListener("scroll", handler, true);
+    const observer = new ResizeObserver(handler);
+    if (triggerRef.current) observer.observe(triggerRef.current, { box: "border-box" });
+    return () => {
+      window.removeEventListener("resize", handler);
+      window.removeEventListener("scroll", handler, true);
+      observer.disconnect();
+    };
+  }, [open, refreshRect]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, setOpen]);
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: { open, setOpen, triggerRef, triggerRect, refreshRect }, children });
+};
+var PopoverTrigger = forwardRef(function PopoverTrigger2({ onClick, children, ...rest }, forwardedRef) {
+  const { open, setOpen, triggerRef, refreshRect } = useCtx();
+  const setRef = (node) => {
+    triggerRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  useEffect(() => {
+    if (open) refreshRect();
+  }, [open, refreshRect]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: setRef,
+      type: "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      onClick: (e) => {
+        onClick?.(e);
+        setOpen(!open);
+      },
+      ...rest,
+      children
+    }
+  );
+});
+var VIEWPORT_MARGIN = 16;
+var positionStyle = (position, align, rect, offset) => {
+  const left = align === "end" ? rect.right : rect.left + rect.width / 2;
+  const shiftX = align === "end" ? "-100%" : "-50%";
+  const maxWidth = align === "end" ? rect.right - VIEWPORT_MARGIN : void 0;
+  switch (position) {
+    case "top":
+      return {
+        top: rect.top - offset,
+        left,
+        maxWidth,
+        transform: `translate(${shiftX}, -100%)`
+      };
+    case "right":
+      return {
+        top: rect.top + rect.height / 2,
+        left: rect.right + offset,
+        transform: "translateY(-50%)"
+      };
+    case "left":
+      return {
+        top: rect.top + rect.height / 2,
+        left: rect.left - offset,
+        transform: "translate(-100%, -50%)"
+      };
+    case "bottom":
+    default:
+      return {
+        top: rect.bottom + offset,
+        left,
+        maxWidth,
+        transform: `translateX(${shiftX})`
+      };
+  }
+};
+var arrowStyle = (position, align, rect) => {
+  const base = {
+    position: "absolute",
+    width: 8,
+    height: 8,
+    transform: "rotate(45deg)"
+  };
+  const x = align === "end" ? { right: rect.width / 2 - 1, marginRight: -4 } : { left: "50%", marginLeft: -4 };
+  switch (position) {
+    case "top":
+      return { ...base, bottom: -4, ...x };
+    case "right":
+      return { ...base, left: -4, top: "50%", marginTop: -4 };
+    case "left":
+      return { ...base, right: -4, top: "50%", marginTop: -4 };
+    case "bottom":
+    default:
+      return { ...base, top: -4, ...x };
+  }
+};
+var PopoverContent = ({
+  position = "bottom",
+  align = "center",
+  "aria-label": ariaLabel,
+  offset = 8,
+  arrow = false,
+  width = "w-64",
+  className,
+  children
+}) => {
+  const { open, setOpen, triggerRect } = useCtx();
+  if (!open || !triggerRect) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[9998]", onClick: () => setOpen(false) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "dialog",
+          "aria-label": ariaLabel,
+          style: positionStyle(position, align, triggerRect, offset),
+          className: clsx(
+            "fixed z-[9999] rounded-xl border border-gray-200 bg-white p-4 text-sm shadow-xl dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100",
+            width,
+            className
+          ),
+          children: [
+            arrow && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                style: arrowStyle(position, align, triggerRect),
+                className: "border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "relative", children })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+};
+var Popover = Object.assign(PopoverRoot, {
+  Trigger: PopoverTrigger,
+  Content: PopoverContent
+});
 var SidebarContext = createContext({ collapsed: false });
 var useSidebarCollapsed = (override) => {
   const ctx = useContext(SidebarContext);
   return override ?? ctx.collapsed;
 };
+var SidebarDepthContext = createContext(0);
+var rowPadding = (depth) => 12 + depth * 20;
+var guideLeft = (depth) => 8 + rowPadding(depth) + 10;
 var SidebarRoot = ({
   collapsed = false,
   width = 264,
   collapsedWidth = 72,
   children,
   footer,
+  onCollapsedChange,
   className
 }) => /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { collapsed }, children: /* @__PURE__ */ jsxs(
   "nav",
@@ -268,10 +462,32 @@ var SidebarRoot = ({
     ),
     children: [
       /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-hidden overflow-y-auto", children }),
-      footer && /* @__PURE__ */ jsx("div", { className: "shrink-0 overflow-hidden border-t border-[var(--color-border)] p-3", children: footer })
+      footer && /* @__PURE__ */ jsx("div", { className: "shrink-0 overflow-hidden border-t border-[var(--color-border)] p-3", children: footer }),
+      onCollapsedChange && /* @__PURE__ */ jsx(CollapseButton, { collapsed, onClick: () => onCollapsedChange(!collapsed) })
     ]
   }
 ) });
+var CollapseButton = ({ collapsed, onClick }) => {
+  const Icon2 = collapsed ? PanelLeftOpen : PanelLeftClose;
+  return /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-[var(--color-border)] py-2", children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+      "aria-expanded": !collapsed,
+      title: collapsed ? "Expand sidebar" : void 0,
+      className: clsx(
+        "focus-visible:ring-brand-500 mx-2 flex w-[calc(100%-1rem)] items-center gap-3 rounded-lg py-2 text-sm font-medium text-[var(--color-text-secondary)] transition-colors hover:bg-black/5 hover:text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 dark:hover:bg-white/5",
+        collapsed ? "justify-center px-2" : "px-3"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5 shrink-0", "aria-hidden": true }),
+        !collapsed && /* @__PURE__ */ jsx("span", { children: "Collapse" })
+      ]
+    }
+  ) });
+};
 var SidebarBrand = ({
   logo,
   title,
@@ -314,15 +530,17 @@ var SidebarItem = ({
   onClick,
   badge,
   collapsed: collapsedProp,
-  depth = 0
+  depth: depthProp
 }) => {
   const collapsed = useSidebarCollapsed(collapsedProp);
+  const contextDepth = useContext(SidebarDepthContext);
+  const depth = depthProp ?? contextDepth;
   const baseClass = clsx(
     "group mx-2 flex items-center gap-3 rounded-lg py-2 text-sm font-medium transition-colors",
     collapsed ? "justify-center px-2" : "px-3",
     active ? "bg-brand-500/10 text-brand-600 dark:text-brand-400" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
   );
-  const style = !collapsed && depth > 0 ? { paddingLeft: 12 + depth * 20 } : void 0;
+  const style = !collapsed && depth > 0 ? { paddingLeft: rowPadding(depth) } : void 0;
   const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5 shrink-0" }),
     !collapsed && /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -339,6 +557,7 @@ var SidebarItem = ({
         className: baseClass,
         style,
         "aria-current": active ? "page" : void 0,
+        "data-sidebar-item": "",
         children: content
       }
     );
@@ -352,10 +571,15 @@ var SidebarItem = ({
       className: clsx(baseClass, "w-[calc(100%-1rem)] text-left"),
       style,
       "aria-current": active ? "page" : void 0,
+      "data-sidebar-item": "",
       children: content
     }
   );
 };
+var SUBMENU_ROW = (active) => clsx(
+  "group mx-2 flex w-[calc(100%-1rem)] items-center rounded-lg py-2 text-sm font-medium transition-colors",
+  active ? "bg-brand-500/10 text-brand-600 dark:text-brand-400" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
+);
 var SidebarSubMenu = ({
   icon: Icon2,
   label,
@@ -366,20 +590,35 @@ var SidebarSubMenu = ({
   children
 }) => {
   const collapsed = useSidebarCollapsed(collapsedProp);
+  const depth = useContext(SidebarDepthContext);
   const [open, setOpen] = useState(defaultOpen || active);
+  const [flyoutOpen, setFlyoutOpen] = useState(false);
   if (collapsed) {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        title: label,
-        className: clsx(
-          "group mx-2 flex w-[calc(100%-1rem)] items-center justify-center rounded-lg px-2 py-2 text-sm font-medium transition-colors",
-          active ? "bg-brand-500/10 text-brand-600 dark:text-brand-400" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
-        ),
-        children: /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5 shrink-0" })
-      }
-    );
+    return /* @__PURE__ */ jsxs(Popover, { open: flyoutOpen, onOpenChange: setFlyoutOpen, children: [
+      /* @__PURE__ */ jsx(
+        Popover.Trigger,
+        {
+          title: label,
+          "aria-label": label,
+          className: clsx(SUBMENU_ROW(active), "justify-center px-2"),
+          children: /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5 shrink-0" })
+        }
+      ),
+      /* @__PURE__ */ jsx(Popover.Content, { position: "right", "aria-label": label, width: "w-64", className: "p-2!", children: /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { collapsed: false }, children: /* @__PURE__ */ jsxs(SidebarDepthContext.Provider, { value: 0, children: [
+        /* @__PURE__ */ jsx("p", { className: "px-3 pt-1 pb-2 text-xs font-semibold tracking-wider text-[var(--color-text-muted)] uppercase", children: label }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "-mx-2 space-y-0.5",
+            onClick: (e) => {
+              if (e.target.closest("[data-sidebar-item]"))
+                setFlyoutOpen(false);
+            },
+            children
+          }
+        )
+      ] }) }) })
+    ] });
   }
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(
@@ -388,10 +627,8 @@ var SidebarSubMenu = ({
         type: "button",
         onClick: () => setOpen((v) => !v),
         "aria-expanded": open,
-        className: clsx(
-          "group mx-2 flex w-[calc(100%-1rem)] items-center gap-3 rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors",
-          active ? "bg-brand-500/10 text-brand-600 dark:text-brand-400" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
-        ),
+        className: clsx(SUBMENU_ROW(active), "gap-3 px-3 text-left"),
+        style: depth > 0 ? { paddingLeft: rowPadding(depth) } : void 0,
         children: [
           /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5 shrink-0" }),
           /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: label }),
@@ -408,7 +645,17 @@ var SidebarSubMenu = ({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx("div", { className: "mt-0.5 space-y-0.5", children })
+    open && /* @__PURE__ */ jsxs("div", { className: "relative mt-0.5 space-y-0.5", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "absolute top-0 bottom-0 w-px bg-[var(--color-border)]",
+          style: { left: guideLeft(depth) }
+        }
+      ),
+      /* @__PURE__ */ jsx(SidebarDepthContext.Provider, { value: depth + 1, children })
+    ] })
   ] });
 };
 var SidebarGroup = ({
@@ -428,7 +675,7 @@ var SidebarGroup = ({
       {
         type: "button",
         onClick: () => setOpen((v) => !v),
-        className: "mx-2 flex w-[calc(100%-1rem)] items-center gap-2 px-3 py-1.5 text-[10px] font-bold tracking-wider text-[var(--color-text-muted)] uppercase hover:text-[var(--color-text-secondary)]",
+        className: "text-3xs mx-2 flex w-[calc(100%-1rem)] items-center gap-2 px-3 py-1.5 font-bold tracking-wider text-[var(--color-text-muted)] uppercase hover:text-[var(--color-text-secondary)]",
         children: [
           open ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
           label
@@ -441,7 +688,7 @@ var SidebarGroup = ({
 var SidebarSection = ({ label, collapsed: collapsedProp, children }) => {
   const collapsed = useSidebarCollapsed(collapsedProp);
   return /* @__PURE__ */ jsxs("div", { className: "my-2 border-t border-[var(--color-border)] pt-2", children: [
-    label && !collapsed && /* @__PURE__ */ jsx("p", { className: "px-5 py-1.5 text-[10px] font-bold tracking-wider text-[var(--color-text-muted)] uppercase", children: label }),
+    label && !collapsed && /* @__PURE__ */ jsx("p", { className: "text-3xs px-5 py-1.5 font-bold tracking-wider text-[var(--color-text-muted)] uppercase", children: label }),
     /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children })
   ] });
 };
@@ -464,17 +711,22 @@ var PageBreadcrumb = ({ items, className }) => /* @__PURE__ */ jsx("nav", { "ari
     isLast ? /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--color-text-primary)]", children: item.label }) : item.onClick ? /* @__PURE__ */ jsx("button", { type: "button", onClick: item.onClick, className: linkClass, children: renderInner }) : /* @__PURE__ */ jsx("a", { href: item.href ?? "#", className: clsx(linkClass), children: renderInner })
   ] }, item.label);
 }) }) });
-var Root3 = ({ title, description, breadcrumb, meta, actions, className }) => /* @__PURE__ */ jsxs("div", { className: `flex items-start justify-between gap-4 ${className ?? ""}`, children: [
-  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-[var(--color-text-primary)]", children: title }),
-    breadcrumb && /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: breadcrumb }),
-    !breadcrumb && description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--color-text-secondary)]", children: description }),
-    meta && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-center gap-x-6 gap-y-1 text-sm text-[var(--color-text-secondary)]", children: meta })
-  ] }),
-  actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
-] });
+var Root3 = ({ title, description, breadcrumb, meta, actions, className }) => (
+  // The title column asks for 16rem: when that and the actions don't both fit
+  // (a phone, a narrow pane), the actions wrap under the title instead of
+  // squeezing it until its words run under the buttons.
+  /* @__PURE__ */ jsxs("div", { className: `flex flex-wrap items-start justify-between gap-4 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 grow basis-64", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-[var(--color-text-primary)]", children: title }),
+      breadcrumb && /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: breadcrumb }),
+      !breadcrumb && description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--color-text-secondary)]", children: description }),
+      meta && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-center gap-x-6 gap-y-1 text-sm text-[var(--color-text-secondary)]", children: meta })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+  ] })
+);
 var MetaItem = ({ icon: Icon2, children }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-  Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "mr-1.5 size-5 text-[var(--color-text-muted)]", "aria-hidden": true }),
+  Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "mr-1.5 size-5 shrink-0 text-[var(--color-text-muted)]", "aria-hidden": true }),
   children
 ] });
 var PageHeader = Object.assign(Root3, { MetaItem });
@@ -550,16 +802,6 @@ var SectionCard = ({
     }
   );
 };
-var PageCard = ({ children, className }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: clsx(
-      "min-h-[60vh] rounded-2xl border border-[var(--color-border)] bg-[var(--color-bg-panel)] px-5 py-8 xl:px-10 xl:py-12",
-      className
-    ),
-    children
-  }
-);
 var ContentNarrow = ({ children, maxWidth = 680, className }) => /* @__PURE__ */ jsx("div", { className: `mx-auto w-full ${className ?? ""}`, style: { maxWidth }, children });
 var ColBox = ({ label, height = 80, className }) => /* @__PURE__ */ jsx(
   "div",
@@ -664,7 +906,7 @@ var SkeletonList = ({ rows = 4, showAction = true, className }) => /* @__PURE__
   i
 )) });
 var SIZE_CLASS = {
-  sm: "px-1.5 py-0.5 text-[10px]",
+  sm: "px-1.5 py-0.5 text-3xs",
   md: "px-2 py-0.5 text-xs",
   lg: "px-3 py-1 text-sm"
 };
@@ -804,7 +1046,7 @@ var StackedListItem = forwardRef(function StackedListItem2({ avatar, title, subt
         ] }),
         (meta || trailing || isLinked && chevron) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-x-4", children: [
           meta && /* @__PURE__ */ jsx("div", { className: "hidden sm:flex sm:flex-col sm:items-end", children: meta }),
-          trailing,
+          trailing && (isLinked ? /* @__PURE__ */ jsx("div", { className: "relative flex items-center gap-x-4", children: trailing }) : trailing),
           isLinked && chevron && /* @__PURE__ */ jsx(
             ChevronRight,
             {
@@ -850,9 +1092,9 @@ var ContentStackedListItem = forwardRef(
               /* @__PURE__ */ jsx("p", { className: "text-sm/6 font-semibold text-gray-900 dark:text-white", children: titleEl }),
               badge
             ] }),
-            hasMeta && /* @__PURE__ */ jsx("div", { className: "mt-1 flex items-center gap-x-2 text-xs/5 text-gray-500 dark:text-gray-400", children: Children.toArray(metaItems).map((item, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            hasMeta && /* @__PURE__ */ jsx("div", { className: "mt-1 flex items-center gap-x-2 text-xs/5 text-gray-500 dark:text-gray-400", children: Children.toArray(metaItems).map((item, i, items) => /* @__PURE__ */ jsxs(Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx(Dot, {}),
-              item
+              /* @__PURE__ */ jsx("span", { className: i === items.length - 1 ? "truncate" : "whitespace-nowrap", children: item })
             ] }, i)) })
           ] }),
           trailing && /* @__PURE__ */ jsx("div", { className: "flex flex-none items-center gap-x-4", children: trailing })
@@ -909,7 +1151,7 @@ var NarrowStackedListHeader = forwardRef(
       {
         ref,
         className: clsx(
-          "border-t border-b border-t-gray-200 border-b-gray-200 bg-gray-50 px-3 py-1.5 text-sm/6 font-semibold text-gray-900 dark:border-t-white/10 dark:border-b-white/10 dark:bg-gray-800/60 dark:text-white",
+          "border-t border-b border-t-gray-200 border-b-gray-200 bg-gray-50 px-3 py-1.5 text-sm/6 font-semibold text-gray-900 dark:border-t-white/10 dark:border-b-white/10 dark:bg-gray-800 dark:text-white",
           sticky && "sticky top-0 z-10",
           className
         ),
@@ -932,7 +1174,8 @@ var NarrowStackedListItem = forwardRef(
           ] }),
           description && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 text-sm/6 text-gray-600 dark:text-gray-400", children: description }),
           !description && subtitle && /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-xs/5 text-gray-500 dark:text-gray-400", children: subtitle })
-        ] })
+        ] }),
+        trailing && /* @__PURE__ */ jsx("div", { className: "flex flex-none items-center", children: trailing })
       ] });
     }
     if (trailing) {
@@ -1033,7 +1276,7 @@ var StatusRow = ({
       "span",
       {
         className: clsx(
-          "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-bold",
+          "text-3xs shrink-0 rounded-full px-2 py-0.5 font-bold",
           STATUS_CLASS2[status]
         ),
         children: status
@@ -1138,18 +1381,21 @@ var Footer = forwardRef(function GridListFooter({ className, children, ...rest }
 });
 var FooterAction = forwardRef(
   function GridListFooterAction({ index = 0, className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx("div", { className: clsx("flex w-0 flex-1", index > 0 && "-ml-px"), children: /* @__PURE__ */ jsx(
-      "a",
-      {
-        ref,
-        className: clsx(
-          "relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-white/5",
-          className
-        ),
-        ...rest,
-        children
-      }
-    ) });
+    return (
+      // The cell's position picks the card corner it rounds: first bottom-left, last bottom-right.
+      /* @__PURE__ */ jsx("div", { className: clsx("group/action flex w-0 flex-1", index > 0 && "-ml-px"), children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref,
+          className: clsx(
+            "relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 border border-transparent py-4 text-sm font-semibold text-gray-900 group-first/action:rounded-bl-lg group-last/action:rounded-br-lg hover:bg-gray-50 dark:text-white dark:hover:bg-white/5",
+            className
+          ),
+          ...rest,
+          children
+        }
+      ) })
+    );
   }
 );
 var GridList = Object.assign(Root5, {
@@ -1213,74 +1459,73 @@ var Breadcrumb = ({ items, separator = "chevron", className }) => /* @__PURE__ *
 );
 var ROOT_BG = {
   light: "bg-white shadow-sm border-b border-gray-200 dark:bg-gray-800 dark:border-white/10",
-  dark: "bg-gray-800"
+  dark: "bg-gray-800 text-white"
 };
-var ITEM_BASE = {
-  light: "rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-white/5",
-  dark: "rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+var ITEM_BASE = "rounded-md px-3 py-2 text-sm font-medium";
+var ITEM_IDLE = {
+  light: "text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-white/5",
+  dark: "text-gray-300 hover:bg-gray-700 hover:text-white"
 };
 var ITEM_ACTIVE = {
   light: "bg-gray-100 text-gray-900 dark:bg-white/10 dark:text-white",
   dark: "bg-gray-900 text-white"
 };
+var NavbarThemeContext = createContext("light");
 var RootCmp = forwardRef(function NavbarRoot({ theme = "light", maxWidth = "7xl", heightClassName = "h-16", className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsx("nav", { ref, className: clsx(ROOT_BG[theme], className), "data-theme": theme, ...rest, children: /* @__PURE__ */ jsx("div", { className: clsx("px-4 sm:px-6 lg:px-8", maxWidth === "7xl" && "mx-auto max-w-7xl"), children: /* @__PURE__ */ jsx("div", { className: clsx("flex items-center justify-between", heightClassName), children }) }) });
+  return /* @__PURE__ */ jsx("nav", { ref, className: clsx(ROOT_BG[theme], className), "data-theme": theme, ...rest, children: /* @__PURE__ */ jsx("div", { className: clsx("px-4 sm:px-6 lg:px-8", maxWidth === "7xl" && "mx-auto max-w-7xl"), children: /* @__PURE__ */ jsx("div", { className: clsx("flex items-center justify-between", heightClassName), children: /* @__PURE__ */ jsx(NavbarThemeContext.Provider, { value: theme, children }) }) }) });
 });
 var Brand = ({ className, children, ...rest }) => /* @__PURE__ */ jsx("div", { className: clsx("flex shrink-0 items-center", className), ...rest, children });
 var Items = ({ className, children, ...rest }) => /* @__PURE__ */ jsx("div", { className: clsx("hidden md:ml-10 md:block", className), ...rest, children: /* @__PURE__ */ jsx("div", { className: "flex items-baseline space-x-4", children }) });
-var Item2 = ({
-  active = false,
-  theme = "light",
-  className,
-  children,
-  ...rest
-}) => /* @__PURE__ */ jsx(
-  "a",
-  {
-    "aria-current": active ? "page" : void 0,
-    className: clsx(ITEM_BASE[theme], active && ITEM_ACTIVE[theme], className),
-    ...rest,
-    children
-  }
-);
+var Item2 = ({ active = false, theme, className, children, ...rest }) => {
+  const inherited = useContext(NavbarThemeContext);
+  const resolved = theme ?? inherited;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      "aria-current": active ? "page" : void 0,
+      className: clsx(ITEM_BASE, active ? ITEM_ACTIVE[resolved] : ITEM_IDLE[resolved], className),
+      ...rest,
+      children
+    }
+  );
+};
 var Actions = ({ className, children, ...rest }) => /* @__PURE__ */ jsx("div", { className: clsx("hidden md:block", className), ...rest, children: /* @__PURE__ */ jsx("div", { className: "ml-4 flex items-center gap-3 md:ml-6", children }) });
-var MobileMenuButton = ({
-  theme = "light",
-  className,
-  children,
-  ...rest
-}) => /* @__PURE__ */ jsx(
-  "button",
-  {
-    type: "button",
-    "aria-label": "Toggle menu",
-    className: clsx(
-      "relative inline-flex size-10 items-center justify-center rounded-md md:hidden",
-      theme === "dark" ? "text-gray-400 hover:bg-gray-700 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-white" : "text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-500",
-      className
-    ),
-    ...rest,
-    children: children ?? /* @__PURE__ */ jsx(
-      "svg",
-      {
-        className: "size-6",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        strokeWidth: "1.5",
-        stroke: "currentColor",
-        "aria-hidden": true,
-        children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-          }
-        )
-      }
-    )
-  }
-);
+var MobileMenuButton = ({ theme, className, children, ...rest }) => {
+  const inherited = useContext(NavbarThemeContext);
+  const resolved = theme ?? inherited;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Toggle menu",
+      className: clsx(
+        "relative inline-flex size-10 items-center justify-center rounded-md md:hidden",
+        resolved === "dark" ? "text-gray-400 hover:bg-gray-700 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-white" : "focus-visible:outline-brand-500 text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus-visible:outline focus-visible:outline-2 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white",
+        className
+      ),
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "size-6",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          strokeWidth: "1.5",
+          stroke: "currentColor",
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+            }
+          )
+        }
+      )
+    }
+  );
+};
 var Navbar = Object.assign(RootCmp, {
   Brand,
   Items,
@@ -1597,7 +1842,7 @@ var StepperRoot = ({
     isValidElement
   );
   const effectiveOrientation = variant === "indicators" ? orientation : "horizontal";
-  const rootClass = variant === "panels" ? "divide-y divide-gray-200 overflow-hidden rounded-md border border-gray-300 md:flex md:divide-x md:divide-y-0 dark:divide-white/10 dark:border-white/10" : variant === "bars" ? "space-y-4 md:flex md:space-y-0 md:space-x-8" : effectiveOrientation === "horizontal" ? "flex w-full items-start" : "flex flex-col";
+  const rootClass = variant === "panels" ? "divide-y divide-gray-200 overflow-hidden rounded-md border border-gray-300 md:flex md:divide-y-0 dark:divide-white/10 dark:border-white/10" : variant === "bars" ? "space-y-4 md:flex md:space-y-0 md:space-x-8" : effectiveOrientation === "horizontal" ? "flex w-full items-start" : "flex flex-col";
   return /* @__PURE__ */ jsx("ol", { className: clsx(rootClass, className), "aria-label": "Progress", children: steps.map((step, i) => {
     const status = i < current ? "done" : i === current ? "active" : "pending";
     return cloneElement(step, {
@@ -1682,18 +1927,25 @@ var VARIANT_CLASS = {
   soft: "bg-brand-50 text-brand-700 hover:bg-brand-100 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-brand-500/10 dark:text-brand-300 dark:hover:bg-brand-500/20"
 };
 var SIZE_CLASS2 = {
-  xs: "h-7 px-2 text-xs gap-1",
-  sm: "h-8 px-3 text-xs gap-1.5",
-  md: "h-9 px-3.5 text-sm gap-2",
-  lg: "h-11 px-5 text-base gap-2",
-  xl: "h-12 px-6 text-base gap-2.5"
+  xs: "h-7 text-xs gap-1",
+  sm: "h-8 text-xs gap-1.5",
+  md: "h-9 text-sm gap-2",
+  lg: "h-11 text-base gap-2",
+  xl: "h-12 text-base gap-2.5"
+};
+var PADDING_X = {
+  xs: "px-2",
+  sm: "px-3",
+  md: "px-3.5",
+  lg: "px-5",
+  xl: "px-6"
 };
 var CIRCLE_SQUARE = {
-  xs: "w-7 px-0",
-  sm: "w-8 px-0",
-  md: "w-9 px-0",
-  lg: "w-11 px-0",
-  xl: "w-12 px-0"
+  xs: "w-7",
+  sm: "w-8",
+  md: "w-9",
+  lg: "w-11",
+  xl: "w-12"
 };
 var SHAPE_CLASS = {
   rounded: "rounded-lg",
@@ -1729,7 +1981,7 @@ var Button = ({
       VARIANT_CLASS[variant],
       SIZE_CLASS2[size],
       SHAPE_CLASS[shape],
-      shape === "circle" && CIRCLE_SQUARE[size],
+      shape === "circle" ? CIRCLE_SQUARE[size] : PADDING_X[size],
       className
     ),
     ...rest,
@@ -1831,7 +2083,7 @@ var VARIANT_SOLID = {
   info: "bg-blue-500 text-white"
 };
 var SIZE_CLASS3 = {
-  sm: "px-1.5 py-0.5 text-[10px] gap-1",
+  sm: "px-1.5 py-0.5 text-3xs gap-1",
   md: "px-2 py-0.5 text-xs gap-1.5"
 };
 var ICON_SIZE2 = {
@@ -1867,7 +2119,7 @@ var Badge = ({
   );
 };
 var SIZE_CLASS4 = {
-  xs: "h-6 w-6 text-[10px]",
+  xs: "h-6 w-6 text-3xs",
   sm: "h-8 w-8 text-xs",
   md: "h-10 w-10 text-sm",
   lg: "h-12 w-12 text-base",
@@ -1904,6 +2156,21 @@ var Avatar = ({ src, alt, name, size = "md", className }) => {
     }
   );
 };
+var SIZE = {
+  sm: "h-5 min-w-[20px] px-1.5 text-3xs",
+  md: "h-6 min-w-[24px] px-2 text-xs"
+};
+var Kbd = ({ children, size = "md", className }) => /* @__PURE__ */ jsx(
+  "kbd",
+  {
+    className: clsx(
+      "inline-flex shrink-0 items-center justify-center rounded border border-gray-200 bg-gray-50 font-mono font-medium text-gray-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.04)] dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:shadow-[inset_0_-1px_0_0_rgba(255,255,255,0.04)]",
+      SIZE[size],
+      className
+    ),
+    children
+  }
+);
 var BOX_POS = {
   top: "bottom-full left-1/2 -translate-x-1/2 mb-2.5",
   bottom: "top-full left-1/2 -translate-x-1/2 mt-2.5",
@@ -1919,54 +2186,124 @@ var ARROW_POS = {
 var VARIANT_BOX = {
   dark: "bg-gray-900 text-white shadow-[0_0_20px_rgba(0,0,0,0.35)] dark:bg-gray-700",
   white: "bg-white text-gray-700 border border-gray-200 shadow-[0_0_20px_rgba(0,0,0,0.15)] dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700",
-  brand: "bg-brand-500 text-white shadow-[0_0_20px_rgba(0,0,0,0.25)]"
+  brand: "bg-brand-500 text-white shadow-[0_0_20px_rgba(0,0,0,0.25)]",
+  // Shades picked for 4.5:1 text contrast; amber is too light for white text.
+  success: "bg-green-700 text-white shadow-[0_0_20px_rgba(0,0,0,0.25)]",
+  warning: "bg-amber-400 text-gray-900 shadow-[0_0_20px_rgba(0,0,0,0.25)]",
+  danger: "bg-red-600 text-white shadow-[0_0_20px_rgba(0,0,0,0.25)]"
 };
 var VARIANT_ARROW = {
   dark: "bg-gray-900 dark:bg-gray-700",
   white: "bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700",
-  brand: "bg-brand-500"
+  brand: "bg-brand-500",
+  success: "bg-green-700",
+  warning: "bg-amber-400",
+  danger: "bg-red-600"
 };
 var Tooltip = ({
   content,
   children,
   position = "top",
   variant = "dark",
-  maxWidth = "max-w-xs"
-}) => (
-  // `inline-block w-fit` keeps the wrapper exactly the size of the children even
-  // inside grid/flex parents, so the absolute-positioned tooltip stays anchored
-  // on the trigger rather than on the parent cell.
-  /* @__PURE__ */ jsxs("span", { className: "group relative inline-block w-fit align-middle", children: [
-    children,
+  maxWidth = "max-w-xs",
+  shortcut,
+  title,
+  arrow = true,
+  delay = 0
+}) => {
+  const id = useId();
+  const [open, setOpen] = useState(false);
+  const [engaged, setEngaged] = useState(false);
+  const timer = useRef(void 0);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const show = () => {
+    setEngaged(true);
+    clearTimeout(timer.current);
+    if (delay > 0) timer.current = setTimeout(() => setOpen(true), delay);
+    else setOpen(true);
+  };
+  const hide = () => {
+    setEngaged(false);
+    clearTimeout(timer.current);
+    setOpen(false);
+  };
+  useEffect(() => {
+    if (!engaged) return;
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape") return;
+      if (open) e.stopPropagation();
+      clearTimeout(timer.current);
+      setEngaged(false);
+      setOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [engaged, open]);
+  const trigger = isValidElement(children) ? cloneElement(children, {
+    "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" ")
+  }) : children;
+  return (
+    // `inline-block w-fit` keeps the wrapper exactly the size of the children even
+    // inside grid/flex parents, so the absolute-positioned tooltip stays anchored
+    // on the trigger rather than on the parent cell.
     /* @__PURE__ */ jsxs(
       "span",
       {
-        role: "tooltip",
-        className: clsx(
-          "pointer-events-none absolute z-50 block w-max rounded-lg px-3 py-2 text-xs leading-relaxed font-normal whitespace-normal opacity-0 transition-opacity duration-150 group-hover:opacity-100",
-          maxWidth,
-          BOX_POS[position],
-          VARIANT_BOX[variant]
-        ),
+        className: "relative inline-block w-fit align-middle",
+        onMouseEnter: show,
+        onMouseLeave: hide,
+        onFocus: show,
+        onBlur: hide,
         children: [
-          content,
-          /* @__PURE__ */ jsx(
+          trigger,
+          /* @__PURE__ */ jsxs(
             "span",
             {
-              "aria-hidden": true,
-              className: clsx("absolute h-2 w-2 rotate-45", ARROW_POS[position], VARIANT_ARROW[variant])
+              id,
+              role: "tooltip",
+              className: clsx(
+                "pointer-events-none absolute z-50 block w-max rounded-lg px-3 py-2 text-xs leading-relaxed font-normal whitespace-normal transition-opacity duration-150",
+                open ? "opacity-100" : "opacity-0",
+                maxWidth,
+                BOX_POS[position],
+                VARIANT_BOX[variant]
+              ),
+              children: [
+                title && /* @__PURE__ */ jsx("span", { className: "block font-semibold", children: title }),
+                title ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 block opacity-80", children: content }) : content,
+                shortcut && /* @__PURE__ */ jsx("span", { className: "ml-2 inline-flex gap-0.5 align-middle", children: shortcut.map((key, i) => /* @__PURE__ */ jsx(Kbd, { size: "sm", children: key }, i)) }),
+                arrow && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: clsx(
+                      "absolute h-2 w-2 rotate-45",
+                      ARROW_POS[position],
+                      VARIANT_ARROW[variant]
+                    )
+                  }
+                )
+              ]
             }
           )
         ]
       }
     )
-  ] })
-);
+  );
+};
 var TooltipHelp = ({
   text,
   position = "top",
   variant = "dark"
-}) => /* @__PURE__ */ jsx(Tooltip, { content: text, position, variant, maxWidth: "max-w-[260px]", children: /* @__PURE__ */ jsx(HelpCircle, { className: "h-3.5 w-3.5 cursor-help text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300" }) });
+}) => /* @__PURE__ */ jsx(Tooltip, { content: text, position, variant, maxWidth: "max-w-[260px]", children: /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    "aria-label": "Help",
+    className: "focus-visible:ring-brand-500 inline-flex cursor-help rounded-full text-gray-400 transition-colors hover:text-gray-600 focus:outline-none focus-visible:ring-2 dark:text-gray-500 dark:hover:text-gray-300",
+    children: /* @__PURE__ */ jsx(HelpCircle, { className: "h-3.5 w-3.5", "aria-hidden": true })
+  }
+) });
 var isDivider = (item) => item.divider === true;
 var Dropdown = ({
   label,
@@ -2529,25 +2866,91 @@ var useTabs = () => {
   if (!ctx) throw new Error("Tabs.* must be used inside <Tabs>");
   return ctx;
 };
-var Root10 = ({ value, onChange, orientation = "horizontal", children, className }) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value, onChange, orientation }, children: /* @__PURE__ */ jsx("div", { className: clsx(orientation === "vertical" ? "flex gap-6" : "", className), children }) });
+var LIST_CLASSES = {
+  underline: {
+    horizontal: "flex items-center gap-1 border-b border-gray-200 dark:border-gray-800",
+    vertical: "flex shrink-0 flex-col gap-1 border-r border-gray-200 dark:border-gray-800"
+  },
+  // The list's border is the panel's edge: it runs under the inactive tabs and
+  // the active tab covers it.
+  folder: {
+    horizontal: "flex items-end gap-1 border-b border-[var(--color-border)]",
+    vertical: "flex shrink-0 flex-col gap-1 border-r border-[var(--color-border)]"
+  }
+};
+var TRIGGER_CLASSES = {
+  underline: {
+    horizontal: {
+      base: "-mb-px border-b-2 px-3 py-2",
+      active: "border-brand-500 text-brand-600 dark:text-brand-400",
+      inactive: "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+    },
+    vertical: {
+      base: "-mr-px justify-start rounded-l-lg border-r-2 px-3 py-2 text-left whitespace-nowrap",
+      active: "border-brand-500 bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400",
+      inactive: "border-transparent text-gray-500 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-200"
+    }
+  },
+  // Every tab overlaps the list's border by 1px. The active one has the
+  // panel's background and a transparent edge on the panel side, so it covers
+  // the line and opens into the panel; it is also 4px taller (wider when
+  // vertical) than the inactive ones, which sit on the line with the page's
+  // background. The padding moves with the size so the labels don't shift.
+  folder: {
+    horizontal: {
+      base: "-mb-px rounded-t-lg border border-[var(--color-border)] px-3 pb-2",
+      active: "border-b-transparent bg-[var(--color-bg-panel)] pt-3 text-brand-600 dark:text-brand-400",
+      inactive: "bg-[var(--color-bg-base)] pt-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+    },
+    vertical: {
+      base: "-mr-px justify-start rounded-l-lg border border-[var(--color-border)] py-2 pr-3 text-left whitespace-nowrap",
+      active: "border-r-transparent bg-[var(--color-bg-panel)] pl-4 text-brand-600 dark:text-brand-400",
+      inactive: "ml-1 bg-[var(--color-bg-base)] pl-3 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+    }
+  }
+};
+var PANEL_CLASSES = {
+  underline: { horizontal: "pt-5", vertical: "flex-1" },
+  // Bordered on three sides: the list's border closes the side facing the tabs.
+  folder: {
+    horizontal: "rounded-b-xl border border-t-0 border-[var(--color-border)] bg-[var(--color-bg-panel)] p-5",
+    vertical: "flex-1 rounded-r-xl border border-l-0 border-[var(--color-border)] bg-[var(--color-bg-panel)] p-5"
+  }
+};
+var Root10 = ({
+  value,
+  onChange,
+  orientation = "horizontal",
+  variant = "underline",
+  children,
+  className
+}) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value, onChange, orientation, variant }, children: /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: clsx(
+      // Folder tabs touch their panel, so no gap between list and panel.
+      orientation === "vertical" && (variant === "folder" ? "flex" : "flex gap-6"),
+      className
+    ),
+    children
+  }
+) });
 var List = ({ children, className }) => {
-  const { orientation } = useTabs();
+  const { orientation, variant } = useTabs();
   return /* @__PURE__ */ jsx(
     "div",
     {
       role: "tablist",
       "aria-orientation": orientation,
-      className: clsx(
-        orientation === "vertical" ? "flex shrink-0 flex-col gap-1 border-r border-gray-200 dark:border-gray-800" : "flex items-center gap-1 border-b border-gray-200 dark:border-gray-800",
-        className
-      ),
+      className: clsx(LIST_CLASSES[variant][orientation], className),
       children
     }
   );
 };
 var Trigger = ({ value, children, icon: Icon2, badge, disabled, className }) => {
-  const { value: active, onChange, orientation } = useTabs();
+  const { value: active, onChange, orientation, variant } = useTabs();
   const isActive = value === active;
+  const styles = TRIGGER_CLASSES[variant][orientation];
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -2558,13 +2961,8 @@ var Trigger = ({ value, children, icon: Icon2, badge, disabled, className }) =>
       onClick: () => onChange(value),
       className: clsx(
         "flex items-center gap-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
-        orientation === "vertical" ? clsx(
-          "-mr-px justify-start rounded-l-lg border-r-2 px-3 py-2 text-left whitespace-nowrap",
-          isActive ? "border-brand-500 bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400" : "border-transparent text-gray-500 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-200"
-        ) : clsx(
-          "-mb-px border-b-2 px-3 py-2",
-          isActive ? "border-brand-500 text-brand-600 dark:text-brand-400" : "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-        ),
+        styles.base,
+        isActive ? styles.active : styles.inactive,
         className
       ),
       children: [
@@ -2574,7 +2972,7 @@ var Trigger = ({ value, children, icon: Icon2, badge, disabled, className }) =>
           "span",
           {
             className: clsx(
-              "ms-auto rounded-full px-1.5 py-0.5 text-[10px] font-bold",
+              "text-3xs ms-auto rounded-full px-1.5 py-0.5 font-bold",
               isActive ? "bg-brand-100 text-brand-600 dark:bg-brand-500/20 dark:text-brand-400" : "bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400"
             ),
             children: badge
@@ -2589,16 +2987,9 @@ var Panel = ({
   children,
   className
 }) => {
-  const { value: active, orientation } = useTabs();
+  const { value: active, orientation, variant } = useTabs();
   if (value !== active) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "tabpanel",
-      className: clsx(orientation === "vertical" ? "flex-1" : "pt-5", className),
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { role: "tabpanel", className: clsx(PANEL_CLASSES[variant][orientation], className), children });
 };
 var Tabs = Object.assign(Root10, { List, Trigger, Panel });
 var SIZE_ICON = {
@@ -2688,7 +3079,13 @@ var Clipboard = forwardRef(function Clipboard2({
     }
   );
 });
-var CodeBlock = ({ code, language, showCopy = true, className }) => /* @__PURE__ */ jsxs(
+var CodeBlock = ({
+  code,
+  language,
+  highlight,
+  showCopy = true,
+  className
+}) => /* @__PURE__ */ jsxs(
   "div",
   {
     className: clsx(
@@ -2697,10 +3094,10 @@ var CodeBlock = ({ code, language, showCopy = true, className }) => /* @__PURE__
     ),
     children: [
       language && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-4 py-1.5 dark:border-gray-800", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400", children: language }),
+        /* @__PURE__ */ jsx("span", { className: "text-3xs font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400", children: language }),
         showCopy && /* @__PURE__ */ jsx(Clipboard, { value: code, floating: true })
       ] }),
-      /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto p-4 text-xs leading-relaxed text-gray-800 dark:text-gray-200", children: /* @__PURE__ */ jsx("code", { children: code }) }),
+      /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto p-4 text-xs leading-relaxed text-gray-800 dark:text-gray-200", children: /* @__PURE__ */ jsx("code", { children: highlight ? highlight(code, language) : code }) }),
       showCopy && !language && /* @__PURE__ */ jsx(Clipboard, { value: code, floating: true, className: "absolute top-2 right-2" })
     ]
   }
@@ -2909,7 +3306,7 @@ var SectionLabel = ({ children, className }) => /* @__PURE__ */ jsx(
   "p",
   {
     className: clsx(
-      "text-[10px] font-semibold tracking-wider text-gray-400 uppercase dark:text-gray-600",
+      "text-3xs font-semibold tracking-wider text-gray-400 uppercase dark:text-gray-600",
       className
     ),
     children
@@ -3205,7 +3602,7 @@ var BADGE_BG = {
   success: "bg-green-500"
 };
 var NotificationsPanelContext = createContext(null);
-var useCtx = () => {
+var useCtx2 = () => {
   const ctx = useContext(NotificationsPanelContext);
   if (!ctx) throw new Error("NotificationsPanel.* must be used inside <NotificationsPanel>");
   return ctx;
@@ -3263,7 +3660,7 @@ var NotificationsPanelRoot = ({
 };
 var NotificationsPanelTrigger = forwardRef(
   function NotificationsPanelTrigger2({ count = 0, muted = false, ping, className, ...rest }, forwardedRef) {
-    const { open, setOpen, triggerRef, refreshRect } = useCtx();
+    const { open, setOpen, triggerRef, refreshRect } = useCtx2();
     const setRef = (node) => {
       triggerRef.current = node;
       if (typeof forwardedRef === "function") forwardedRef(node);
@@ -3305,7 +3702,7 @@ var NotificationsPanelContent = ({
   className,
   children
 }) => {
-  const { open, setOpen, triggerRect, align } = useCtx();
+  const { open, setOpen, triggerRect, align } = useCtx2();
   if (!open || !triggerRect) return null;
   const top = triggerRect.bottom + 8;
   const positionStyle2 = align === "right" ? { top, right: window.innerWidth - triggerRect.right } : { top, left: triggerRect.left };
@@ -3404,7 +3801,7 @@ var NotificationsPanelItem = forwardRef(
     className,
     ...rest
   }, ref) {
-    const { setOpen } = useCtx();
+    const { setOpen } = useCtx2();
     const meta = SEVERITY_META[severity];
     const Icon2 = meta.icon;
     const defaultLabel = severity === "success" ? "OK" : severity.toUpperCase();
@@ -3436,13 +3833,13 @@ var NotificationsPanelItem = forwardRef(
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold text-gray-900 dark:text-white", children: title }),
             subtitle && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-gray-500 dark:text-gray-400", children: subtitle }),
-            caption && /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate font-mono text-[10px] text-gray-400", children: caption })
+            caption && /* @__PURE__ */ jsx("p", { className: "text-3xs mt-0.5 truncate font-mono text-gray-400", children: caption })
           ] }),
           /* @__PURE__ */ jsx(
             "span",
             {
               className: clsx(
-                "mt-0.5 shrink-0 rounded-full px-2 py-0.5 text-[10px] font-bold text-white",
+                "text-3xs mt-0.5 shrink-0 rounded-full px-2 py-0.5 font-bold text-white",
                 BADGE_BG[severity]
               ),
               children: badgeLabel ?? defaultLabel
@@ -3469,7 +3866,7 @@ var NotificationsPanelFooter = ({
   className,
   ...rest
 }) => {
-  const { setOpen } = useCtx();
+  const { setOpen } = useCtx2();
   return /* @__PURE__ */ jsx("div", { className: "border-t border-gray-100 p-2 dark:border-gray-800", children: /* @__PURE__ */ jsx(
     "button",
     {
@@ -3591,7 +3988,7 @@ var NotificationCard = Object.assign(Root11, {
   Condensed: CondensedVariant
 });
 var UserMenuContext = createContext(null);
-var useCtx2 = () => {
+var useCtx3 = () => {
   const ctx = useContext(UserMenuContext);
   if (!ctx) throw new Error("UserMenu.* must be used inside <UserMenu>");
   return ctx;
@@ -3647,7 +4044,7 @@ var UserMenuRoot = ({
 };
 var UserMenuTrigger = forwardRef(
   function UserMenuTrigger2({ name, avatarSrc, hideName = false, className, ...rest }, forwardedRef) {
-    const { open, setOpen, triggerRef, refreshRect } = useCtx2();
+    const { open, setOpen, triggerRef, refreshRect } = useCtx3();
     const setRef = (node) => {
       triggerRef.current = node;
       if (typeof forwardedRef === "function") forwardedRef(node);
@@ -3688,7 +4085,7 @@ var UserMenuTrigger = forwardRef(
   }
 );
 var UserMenuContent = ({ width = "w-56", className, children }) => {
-  const { open, setOpen, triggerRect, align } = useCtx2();
+  const { open, setOpen, triggerRect, align } = useCtx3();
   if (!open || !triggerRect) return null;
   const top = triggerRect.bottom + 8;
   const positionStyle2 = align === "right" ? { top, right: window.innerWidth - triggerRect.right } : { top, left: triggerRect.left };
@@ -3731,7 +4128,7 @@ var UserMenuHeader = ({ name, email, avatarSrc, className }) => /* @__PURE__ */
 );
 var UserMenuItems = ({ children }) => /* @__PURE__ */ jsx("div", { role: "group", className: "py-1", children });
 var UserMenuItem = forwardRef(function UserMenuItem2({ icon: Icon2, variant = "default", closeOnClick = true, onClick, className, children, ...rest }, ref) {
-  const { setOpen } = useCtx2();
+  const { setOpen } = useCtx3();
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -3908,7 +4305,7 @@ var ButtonGroup = ({
   );
 };
 var CarouselContext = createContext(null);
-var useCtx3 = () => {
+var useCtx4 = () => {
   const ctx = useContext(CarouselContext);
   if (!ctx) throw new Error("Carousel.* must be used inside <Carousel>");
   return ctx;
@@ -3964,7 +4361,7 @@ var CarouselRoot = ({
   );
 };
 var CarouselViewport = ({ children, className }) => {
-  const { emblaRef } = useCtx3();
+  const { emblaRef } = useCtx4();
   return /* @__PURE__ */ jsx("div", { ref: emblaRef, className: clsx("overflow-hidden", className), children: /* @__PURE__ */ jsx("div", { className: "flex", children }) });
 };
 var CarouselSlide = ({ basis = "basis-full", className, children }) => /* @__PURE__ */ jsx("div", { className: clsx("min-w-0 shrink-0 grow-0 px-1", basis, className), children });
@@ -3974,7 +4371,7 @@ var CarouselControls = ({
   prevLabel = "Previous slide",
   nextLabel = "Next slide"
 }) => {
-  const { scrollPrev, scrollNext, canScrollPrev, canScrollNext } = useCtx3();
+  const { scrollPrev, scrollNext, canScrollPrev, canScrollNext } = useCtx4();
   const baseBtn = "flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-600 shadow-sm transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700";
   if (position === "outside") {
     return /* @__PURE__ */ jsxs("div", { className: clsx("mt-3 flex items-center justify-center gap-2", className), children: [
@@ -3985,252 +4382,73 @@ var CarouselControls = ({
           "aria-label": prevLabel,
           disabled: !canScrollPrev,
           onClick: scrollPrev,
-          className: baseBtn,
-          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": nextLabel,
-          disabled: !canScrollNext,
-          onClick: scrollNext,
-          className: baseBtn,
-          children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": prevLabel,
-        disabled: !canScrollPrev,
-        onClick: scrollPrev,
-        className: clsx("absolute top-1/2 left-2 z-10 -translate-y-1/2", baseBtn, className),
-        children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": nextLabel,
-        disabled: !canScrollNext,
-        onClick: scrollNext,
-        className: clsx("absolute top-1/2 right-2 z-10 -translate-y-1/2", baseBtn, className),
-        children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
-      }
-    )
-  ] });
-};
-var CarouselIndicators = ({ className }) => {
-  const { scrollSnaps, selectedIndex, scrollTo } = useCtx3();
-  return /* @__PURE__ */ jsx("div", { className: clsx("mt-3 flex items-center justify-center gap-2", className), children: scrollSnaps.map((_, i) => {
-    const active = i === selectedIndex;
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": `Go to slide ${i + 1}`,
-        "aria-current": active,
-        onClick: () => scrollTo(i),
-        className: clsx(
-          "h-2 rounded-full transition-all",
-          active ? "bg-brand-500 w-6" : "w-2 bg-gray-300 dark:bg-gray-600"
-        )
-      },
-      i
-    );
-  }) });
-};
-var Carousel = Object.assign(CarouselRoot, {
-  Viewport: CarouselViewport,
-  Slide: CarouselSlide,
-  Controls: CarouselControls,
-  Indicators: CarouselIndicators
-});
-var PopoverContext = createContext(null);
-var useCtx4 = () => {
-  const ctx = useContext(PopoverContext);
-  if (!ctx) throw new Error("Popover.* must be used inside <Popover>");
-  return ctx;
-};
-var PopoverRoot = ({
-  open: openProp,
-  defaultOpen = false,
-  onOpenChange,
-  children
-}) => {
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
-  const isControlled = openProp !== void 0;
-  const open = isControlled ? openProp : internalOpen;
-  const triggerRef = useRef(null);
-  const [triggerRect, setTriggerRect] = useState(null);
-  const refreshRect = useCallback(() => {
-    if (triggerRef.current) setTriggerRect(triggerRef.current.getBoundingClientRect());
-  }, []);
-  const setOpen = useCallback(
-    (v) => {
-      if (v) refreshRect();
-      if (!isControlled) setInternalOpen(v);
-      onOpenChange?.(v);
-    },
-    [isControlled, onOpenChange, refreshRect]
-  );
-  useEffect(() => {
-    if (!open) return;
-    const handler = () => refreshRect();
-    window.addEventListener("resize", handler);
-    window.addEventListener("scroll", handler, true);
-    const observer = new ResizeObserver(handler);
-    if (triggerRef.current) observer.observe(triggerRef.current, { box: "border-box" });
-    return () => {
-      window.removeEventListener("resize", handler);
-      window.removeEventListener("scroll", handler, true);
-      observer.disconnect();
-    };
-  }, [open, refreshRect]);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [open, setOpen]);
-  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: { open, setOpen, triggerRef, triggerRect, refreshRect }, children });
-};
-var PopoverTrigger = forwardRef(function PopoverTrigger2({ onClick, children, ...rest }, forwardedRef) {
-  const { open, setOpen, triggerRef, refreshRect } = useCtx4();
-  const setRef = (node) => {
-    triggerRef.current = node;
-    if (typeof forwardedRef === "function") forwardedRef(node);
-    else if (forwardedRef) forwardedRef.current = node;
-  };
-  useEffect(() => {
-    if (open) refreshRect();
-  }, [open, refreshRect]);
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref: setRef,
-      type: "button",
-      "aria-haspopup": "dialog",
-      "aria-expanded": open,
-      onClick: (e) => {
-        onClick?.(e);
-        setOpen(!open);
-      },
-      ...rest,
-      children
-    }
-  );
-});
-var VIEWPORT_MARGIN = 16;
-var positionStyle = (position, align, rect, offset) => {
-  const left = align === "end" ? rect.right : rect.left + rect.width / 2;
-  const shiftX = align === "end" ? "-100%" : "-50%";
-  const maxWidth = align === "end" ? rect.right - VIEWPORT_MARGIN : void 0;
-  switch (position) {
-    case "top":
-      return {
-        top: rect.top - offset,
-        left,
-        maxWidth,
-        transform: `translate(${shiftX}, -100%)`
-      };
-    case "right":
-      return {
-        top: rect.top + rect.height / 2,
-        left: rect.right + offset,
-        transform: "translateY(-50%)"
-      };
-    case "left":
-      return {
-        top: rect.top + rect.height / 2,
-        left: rect.left - offset,
-        transform: "translate(-100%, -50%)"
-      };
-    case "bottom":
-    default:
-      return {
-        top: rect.bottom + offset,
-        left,
-        maxWidth,
-        transform: `translateX(${shiftX})`
-      };
-  }
-};
-var arrowStyle = (position, align, rect) => {
-  const base = {
-    position: "absolute",
-    width: 8,
-    height: 8,
-    transform: "rotate(45deg)"
-  };
-  const x = align === "end" ? { right: rect.width / 2 - 1, marginRight: -4 } : { left: "50%", marginLeft: -4 };
-  switch (position) {
-    case "top":
-      return { ...base, bottom: -4, ...x };
-    case "right":
-      return { ...base, left: -4, top: "50%", marginTop: -4 };
-    case "left":
-      return { ...base, right: -4, top: "50%", marginTop: -4 };
-    case "bottom":
-    default:
-      return { ...base, top: -4, ...x };
-  }
-};
-var PopoverContent = ({
-  position = "bottom",
-  align = "center",
-  "aria-label": ariaLabel,
-  offset = 8,
-  arrow = false,
-  width = "w-64",
-  className,
-  children
-}) => {
-  const { open, setOpen, triggerRect } = useCtx4();
-  if (!open || !triggerRect) return null;
-  return createPortal(
-    /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[9998]", onClick: () => setOpen(false) }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          role: "dialog",
-          "aria-label": ariaLabel,
-          style: positionStyle(position, align, triggerRect, offset),
-          className: clsx(
-            "fixed z-[9999] rounded-xl border border-gray-200 bg-white p-4 text-sm shadow-xl dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100",
-            width,
-            className
-          ),
-          children: [
-            arrow && /* @__PURE__ */ jsx(
-              "span",
-              {
-                "aria-hidden": true,
-                style: arrowStyle(position, align, triggerRect),
-                className: "border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: "relative", children })
-          ]
+          className: baseBtn,
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": nextLabel,
+          disabled: !canScrollNext,
+          onClick: scrollNext,
+          className: baseBtn,
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
         }
       )
-    ] }),
-    document.body
-  );
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": prevLabel,
+        disabled: !canScrollPrev,
+        onClick: scrollPrev,
+        className: clsx("absolute top-1/2 left-2 z-10 -translate-y-1/2", baseBtn, className),
+        children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": nextLabel,
+        disabled: !canScrollNext,
+        onClick: scrollNext,
+        className: clsx("absolute top-1/2 right-2 z-10 -translate-y-1/2", baseBtn, className),
+        children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+      }
+    )
+  ] });
 };
-var Popover = Object.assign(PopoverRoot, {
-  Trigger: PopoverTrigger,
-  Content: PopoverContent
+var CarouselIndicators = ({ className }) => {
+  const { scrollSnaps, selectedIndex, scrollTo } = useCtx4();
+  return /* @__PURE__ */ jsx("div", { className: clsx("mt-3 flex items-center justify-center gap-2", className), children: scrollSnaps.map((_, i) => {
+    const active = i === selectedIndex;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Go to slide ${i + 1}`,
+        "aria-current": active,
+        onClick: () => scrollTo(i),
+        className: clsx(
+          "h-2 rounded-full transition-all",
+          active ? "bg-brand-500 w-6" : "w-2 bg-gray-300 dark:bg-gray-600"
+        )
+      },
+      i
+    );
+  }) });
+};
+var Carousel = Object.assign(CarouselRoot, {
+  Viewport: CarouselViewport,
+  Slide: CarouselSlide,
+  Controls: CarouselControls,
+  Indicators: CarouselIndicators
 });
 var SIZE_TRACK = {
   xs: "h-1",
@@ -4300,7 +4518,7 @@ var ProgressBar = ({
                 INTENT_BG2[intent],
                 striped && "motion-safe:animate-[progressStripes_1s_linear_infinite]"
               ),
-              children: showInsideLabel && /* @__PURE__ */ jsx("span", { className: "px-2 text-[10px] leading-none font-bold text-white", children: labelText })
+              children: showInsideLabel && /* @__PURE__ */ jsx("span", { className: "text-3xs px-2 leading-none font-bold text-white", children: labelText })
             }
           )
         }
@@ -4357,7 +4575,7 @@ var Ribbon = ({
       "span",
       {
         className: clsx(
-          "absolute z-10 w-40 px-2 py-1 text-center text-[11px] font-bold tracking-wide uppercase shadow-md",
+          "text-2xs absolute z-10 w-40 px-2 py-1 text-center font-bold tracking-wide uppercase shadow-md",
           INTENT_BG3[intent],
           ANGLED_POSITION[position],
           className
@@ -4370,7 +4588,7 @@ var Ribbon = ({
     "span",
     {
       className: clsx(
-        "absolute z-10 px-2.5 py-1 text-[11px] font-bold tracking-wide uppercase shadow",
+        "text-2xs absolute z-10 px-2.5 py-1 font-bold tracking-wide uppercase shadow",
         INTENT_BG3[intent],
         FLAT_POSITION[position],
         className
@@ -4937,7 +5155,7 @@ var CommandPaletteGroup = forwardRef(
       {
         ref,
         className: clsx(
-          "px-1 pb-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:tracking-wider [&_[cmdk-group-heading]]:text-gray-400 [&_[cmdk-group-heading]]:uppercase dark:[&_[cmdk-group-heading]]:text-gray-500",
+          "[&_[cmdk-group-heading]]:text-2xs px-1 pb-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:tracking-wider [&_[cmdk-group-heading]]:text-gray-400 [&_[cmdk-group-heading]]:uppercase dark:[&_[cmdk-group-heading]]:text-gray-500",
           className
         ),
         ...rest
@@ -4962,7 +5180,7 @@ var CommandPaletteItem = forwardRef(
         children: [
           Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 shrink-0 text-gray-400", "aria-hidden": true }),
           /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children }),
-          shortcut && /* @__PURE__ */ jsx("kbd", { className: "shrink-0 rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400", children: shortcut })
+          shortcut && /* @__PURE__ */ jsx("kbd", { className: "text-3xs shrink-0 rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono font-medium text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400", children: shortcut })
         ]
       }
     );
@@ -5002,7 +5220,7 @@ var CommandPaletteFooter = ({ className, children }) => /* @__PURE__ */ jsx(
   "div",
   {
     className: clsx(
-      "flex items-center justify-between border-t border-gray-100 px-4 py-2 text-[11px] text-gray-500 dark:border-gray-800 dark:text-gray-400",
+      "text-2xs flex items-center justify-between border-t border-gray-100 px-4 py-2 text-gray-500 dark:border-gray-800 dark:text-gray-400",
       className
     ),
     children
@@ -5127,11 +5345,11 @@ var formatKey = (raw, isMac) => {
   if (KEY_LABEL[key]) return KEY_LABEL[key];
   return raw.length === 1 ? raw.toUpperCase() : raw;
 };
-var Kbd = ({ children, className }) => /* @__PURE__ */ jsx(
+var Kbd2 = ({ children, className }) => /* @__PURE__ */ jsx(
   "kbd",
   {
     className: clsx(
-      "inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded border border-gray-200 bg-gray-50 px-1.5 font-mono text-[11px] font-medium text-gray-700 shadow-[0_1px_0_0_rgba(0,0,0,0.05)] dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
+      "text-2xs inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded border border-gray-200 bg-gray-50 px-1.5 font-mono font-medium text-gray-700 shadow-[0_1px_0_0_rgba(0,0,0,0.05)] dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
       className
     ),
     children
@@ -5221,7 +5439,7 @@ var HelpOverlayRoot = ({
               /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-x-8 gap-y-6 overflow-y-auto px-5 py-5 sm:grid-cols-2", children }),
               (footer ?? true) && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-2 border-t border-gray-200 bg-gray-50 px-5 py-2.5 text-xs text-gray-500 dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-400", children: footer ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
                 "Press ",
-                /* @__PURE__ */ jsx(Kbd, { children: "Esc" }),
+                /* @__PURE__ */ jsx(Kbd2, { children: "Esc" }),
                 " to close"
               ] }) })
             ]
@@ -5232,7 +5450,7 @@ var HelpOverlayRoot = ({
   );
 };
 var HelpOverlaySection = ({ title, className, children }) => /* @__PURE__ */ jsxs("section", { className: clsx("space-y-2", className), children: [
-  /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold tracking-wider text-gray-400 uppercase dark:text-gray-500", children: title }),
+  /* @__PURE__ */ jsx("h3", { className: "text-2xs font-semibold tracking-wider text-gray-400 uppercase dark:text-gray-500", children: title }),
   /* @__PURE__ */ jsx("ul", { className: "divide-y divide-gray-100 dark:divide-gray-800", children })
 ] });
 var HelpOverlayShortcut = ({ keys, description, className }) => {
@@ -5243,10 +5461,10 @@ var HelpOverlayShortcut = ({ keys, description, className }) => {
     /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center gap-1", children: sequence.map((combo, idx) => {
       const parts = combo.split("+");
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        idx > 0 && /* @__PURE__ */ jsx("span", { className: "px-0.5 text-[10px] text-gray-400 uppercase dark:text-gray-500", children: "then" }),
+        idx > 0 && /* @__PURE__ */ jsx("span", { className: "text-3xs px-0.5 text-gray-400 uppercase dark:text-gray-500", children: "then" }),
         /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1", children: parts.map((part, pIdx) => /* @__PURE__ */ jsxs(Fragment, { children: [
           pIdx > 0 && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "+" }),
-          /* @__PURE__ */ jsx(Kbd, { children: formatKey(part, isMac) })
+          /* @__PURE__ */ jsx(Kbd2, { children: formatKey(part, isMac) })
         ] }, `${part}-${pIdx}`)) })
       ] }, `${combo}-${idx}`);
     }) })
@@ -5506,13 +5724,14 @@ var StepperInput = ({
   className
 }) => {
   const clamp = (v) => Math.min(max, Math.max(min, v));
-  const arrowBtn = "flex flex-1 items-center justify-center px-1.5 transition-colors hover:bg-gray-50 dark:hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-40";
+  const arrowBtn = "flex flex-1 items-center justify-center text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 active:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200 dark:active:bg-white/15";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: clsx(
         fullWidth ? "flex w-full" : "inline-flex",
-        "h-9 overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800",
+        // dark:focus-within: is explicit, dark:border-gray-700 would win otherwise.
+        "focus-within:border-brand-500 dark:focus-within:border-brand-500 h-9 overflow-hidden rounded-lg border border-gray-200 bg-white transition-colors dark:border-gray-700 dark:bg-gray-800",
         disabled && "opacity-50",
         className
       ),
@@ -5531,13 +5750,14 @@ var StepperInput = ({
             max,
             step,
             className: clsx(
-              "h-full [appearance:textfield] bg-transparent pr-1 pl-3 text-sm font-medium text-gray-700 focus:outline-none disabled:cursor-not-allowed dark:text-gray-200 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+              // min-w-0: in a narrower container the input gives way, not the arrows.
+              "h-full min-w-0 [appearance:textfield] bg-transparent pr-1 pl-3 text-sm font-medium text-gray-700 focus:outline-none disabled:cursor-not-allowed dark:text-gray-200 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
               fullWidth ? "flex-1" : width
             )
           }
         ),
-        unit && /* @__PURE__ */ jsx("span", { className: "flex items-center pr-1.5 text-xs text-gray-400 select-none dark:text-gray-500", children: unit }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-gray-200 dark:border-gray-700", children: [
+        unit && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center pr-1.5 text-xs text-gray-400 select-none dark:text-gray-500", children: unit }),
+        /* @__PURE__ */ jsxs("div", { className: "flex w-7 shrink-0 flex-col border-l border-gray-200 dark:border-gray-700", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -5547,7 +5767,7 @@ var StepperInput = ({
               tabIndex: -1,
               "aria-label": "Increase",
               className: arrowBtn,
-              children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-3.5 w-3.5 text-gray-500 dark:text-gray-400", strokeWidth: 2.5 })
+              children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3", strokeWidth: 2.25, "aria-hidden": true })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -5559,7 +5779,7 @@ var StepperInput = ({
               tabIndex: -1,
               "aria-label": "Decrease",
               className: clsx("border-t border-gray-200 dark:border-gray-700", arrowBtn),
-              children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-gray-500 dark:text-gray-400", strokeWidth: 2.5 })
+              children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3", strokeWidth: 2.25, "aria-hidden": true })
             }
           )
         ] })
@@ -6636,7 +6856,7 @@ var Calendar = ({ classNames, components, className, ...rest }) => {
           months_dropdown: "",
           years_dropdown: "",
           weekdays: clsx(def.weekdays, ""),
-          weekday: "h-8 w-8 text-center text-[11px] font-medium text-gray-400 dark:text-gray-500",
+          weekday: "h-8 w-8 text-center text-2xs font-medium text-gray-400 dark:text-gray-500",
           week: clsx(def.week, ""),
           day: "h-8 w-8 p-0 text-center align-middle",
           day_button: "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-white/5",
@@ -6992,7 +7212,7 @@ var OtpInput = ({
 }) => {
   const refs = useRef([]);
   useEffect(() => {
-    if (autoFocus) refs.current[0]?.focus();
+    if (autoFocus) refs.current[0]?.focus({ preventScroll: true });
   }, [autoFocus]);
   const setCell = (idx, char) => {
     const cleaned = sanitize(char, alphanumeric).slice(0, 1);
@@ -7354,30 +7574,84 @@ var StepperIndicator = ({
     children: Icon2 ? /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-current" })
   }
 );
+var Meta = ({ meta }) => meta ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: meta }) : null;
 var Body5 = ({ item }) => /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pb-2 last:pb-0", children: [
   /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: item.title }),
   item.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: item.description }),
-  item.time && /* @__PURE__ */ jsx("p", { className: "mt-0.5 font-mono text-[10px] text-gray-400 uppercase", children: item.time })
+  /* @__PURE__ */ jsx(Meta, { meta: item.meta }),
+  item.time && /* @__PURE__ */ jsx("p", { className: "text-3xs mt-0.5 font-mono text-gray-400 uppercase", children: item.time })
 ] });
-var Timeline = ({ items, variant = "dot", className }) => {
+var TimelineList = ({
+  items,
+  variant = "dot",
+  className,
+  startIndex = 0,
+  labelledBy
+}) => {
   if (variant === "card") {
-    return /* @__PURE__ */ jsx("ol", { className: clsx("space-y-3", className), children: items.map((item) => /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("ol", { "aria-labelledby": labelledBy, className: clsx("space-y-3", className), children: items.map((item) => /* @__PURE__ */ jsx(
       "li",
       {
         className: "rounded-xl border border-gray-200 bg-white p-3 dark:border-gray-800 dark:bg-gray-900",
         children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: item.title }),
-            item.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: item.description })
+            item.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: item.description }),
+            /* @__PURE__ */ jsx(Meta, { meta: item.meta })
           ] }),
-          item.time && /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-[10px] text-gray-400 uppercase", children: item.time })
+          item.time && /* @__PURE__ */ jsx("span", { className: "text-3xs shrink-0 font-mono text-gray-400 uppercase", children: item.time })
         ] })
       },
       item.id
     )) });
   }
+  if (variant === "alternating") {
+    return /* @__PURE__ */ jsx("ol", { "aria-labelledby": labelledBy, className: clsx("flex flex-col", className), children: items.map((item, i) => {
+      const isLast = i === items.length - 1;
+      const left = (startIndex + i) % 2 === 0;
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "grid grid-cols-[2.5rem_minmax(0,1fr)] gap-x-4 md:grid-cols-[minmax(0,1fr)_2.5rem_minmax(0,1fr)]",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "col-start-1 row-start-1 flex flex-col items-center md:col-start-2", children: [
+              /* @__PURE__ */ jsx(StepperIndicator, { icon: item.icon, tone: item.tone }),
+              !isLast && /* @__PURE__ */ jsx("span", { className: "my-1 w-px flex-1 bg-gray-200 dark:bg-gray-700" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  "col-start-2 row-start-1",
+                  left ? "md:col-start-1" : "md:col-start-3",
+                  !isLast && "pb-6"
+                ),
+                children: /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: item.title }),
+                  item.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: item.description }),
+                  /* @__PURE__ */ jsx(Meta, { meta: item.meta }),
+                  item.time && /* @__PURE__ */ jsx("p", { className: "text-3xs mt-2 font-mono text-gray-400 uppercase md:hidden", children: item.time })
+                ] })
+              }
+            ),
+            item.time && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: clsx(
+                  "text-3xs row-start-1 hidden pt-3 font-mono text-gray-400 uppercase md:block",
+                  left ? "md:col-start-3" : "md:col-start-1 md:text-right"
+                ),
+                children: item.time
+              }
+            )
+          ]
+        },
+        item.id
+      );
+    }) });
+  }
   const gap = variant === "stepper" ? "gap-x-4" : "gap-x-3";
-  return /* @__PURE__ */ jsx("ol", { className: clsx("flex flex-col", className), children: items.map((item, i) => {
+  return /* @__PURE__ */ jsx("ol", { "aria-labelledby": labelledBy, className: clsx("flex flex-col", className), children: items.map((item, i) => {
     const isLast = i === items.length - 1;
     return /* @__PURE__ */ jsxs("li", { className: clsx("flex", gap), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
@@ -7388,7 +7662,50 @@ var Timeline = ({ items, variant = "dot", className }) => {
     ] }, item.id);
   }) });
 };
-var WEEK_DAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+var groupRuns = (items) => {
+  const runs = [];
+  items.forEach((item, i) => {
+    const last = runs[runs.length - 1];
+    if (last && last.group === item.group) last.items.push(item);
+    else runs.push({ group: item.group, start: i, items: [item] });
+  });
+  return runs;
+};
+var GroupHeader = ({ id, label, centred }) => centred ? (
+  // A pill on the line; it moves to the left with the line below `md`.
+  /* @__PURE__ */ jsx("h3", { id, className: "mb-4 flex md:justify-center", children: /* @__PURE__ */ jsx("span", { className: "rounded-full border border-gray-200 bg-white px-3 py-1 text-xs font-semibold text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200", children: label }) })
+) : /* @__PURE__ */ jsx(
+  "h3",
+  {
+    id,
+    className: "mb-3 text-xs font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400",
+    children: label
+  }
+);
+var Timeline = ({ items, variant = "dot", className }) => {
+  const baseId = useId();
+  const runs = groupRuns(items);
+  if (runs.every((run) => !run.group)) {
+    return /* @__PURE__ */ jsx(TimelineList, { items, variant, className });
+  }
+  return /* @__PURE__ */ jsx("div", { className: clsx("space-y-6", className), children: runs.map((run, i) => {
+    const headerId = `${baseId}-group-${i}`;
+    return /* @__PURE__ */ jsxs("div", { children: [
+      run.group && /* @__PURE__ */ jsx(GroupHeader, { id: headerId, label: run.group, centred: variant === "alternating" }),
+      /* @__PURE__ */ jsx(
+        TimelineList,
+        {
+          items: run.items,
+          variant,
+          startIndex: run.start,
+          labelledBy: run.group ? headerId : void 0
+        }
+      )
+    ] }, run.start);
+  }) });
+};
+
+// src/data/calendar-dates.ts
 var MONTHS = [
   "January",
   "February",
@@ -7405,6 +7722,8 @@ var MONTHS = [
 ];
 var isoDate = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
 var sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var isoWeekday = (d) => (d.getDay() + 6) % 7;
+var WEEK_DAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
 var MiniCalendar = ({
   today = /* @__PURE__ */ new Date(),
   selected,
@@ -7416,7 +7735,7 @@ var MiniCalendar = ({
   const cells = useMemo(() => {
     const firstOfMonth = new Date(view.getFullYear(), view.getMonth(), 1);
     const daysInMonth = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate();
-    const isoOffset = (firstOfMonth.getDay() + 6) % 7;
+    const isoOffset = isoWeekday(firstOfMonth);
     const arr = Array(isoOffset).fill(null);
     for (let d = 1; d <= daysInMonth; d++)
       arr.push(new Date(view.getFullYear(), view.getMonth(), d));
@@ -7473,7 +7792,7 @@ var MiniCalendar = ({
           WEEK_DAYS.map((d) => /* @__PURE__ */ jsx(
             "span",
             {
-              className: "py-1 text-[10px] font-semibold tracking-wider text-gray-400 uppercase",
+              className: "text-3xs py-1 font-semibold tracking-wider text-gray-400 uppercase",
               children: d
             },
             d
@@ -7513,6 +7832,275 @@ var MiniCalendar = ({
     }
   );
 };
+var WEEK_DAYS2 = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+var WEEK_DAYS_LONG = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday"
+];
+var MAX_CHIPS = 3;
+var TONE_DOT = {
+  brand: "bg-brand-500",
+  success: "bg-green-500",
+  warning: "bg-amber-500",
+  danger: "bg-red-500",
+  info: "bg-blue-500",
+  violet: "bg-violet-500"
+};
+var TONE_CHIP = {
+  brand: "bg-brand-50 dark:bg-brand-500/15",
+  success: "bg-green-50 dark:bg-green-500/15",
+  warning: "bg-amber-50 dark:bg-amber-500/15",
+  danger: "bg-red-50 dark:bg-red-500/15",
+  info: "bg-blue-50 dark:bg-blue-500/15",
+  violet: "bg-violet-50 dark:bg-violet-500/15"
+};
+var TONE_CHIP_HOVER = {
+  brand: "hover:bg-brand-100 dark:hover:bg-brand-500/25",
+  success: "hover:bg-green-100 dark:hover:bg-green-500/25",
+  warning: "hover:bg-amber-100 dark:hover:bg-amber-500/25",
+  danger: "hover:bg-red-100 dark:hover:bg-red-500/25",
+  info: "hover:bg-blue-100 dark:hover:bg-blue-500/25",
+  violet: "hover:bg-violet-100 dark:hover:bg-violet-500/25"
+};
+var FOCUS_RING = "focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500";
+var addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+var startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+var dayLabel = (d) => `${WEEK_DAYS_LONG[isoWeekday(d)]} ${d.getDate()} ${MONTHS[d.getMonth()]} ${d.getFullYear()}`;
+var monthGrid = (month) => {
+  const first = startOfMonth(month);
+  const last = new Date(first.getFullYear(), first.getMonth() + 1, 0);
+  const end = addDays(last, 6 - isoWeekday(last));
+  const days = [];
+  for (let d = addDays(first, -isoWeekday(first)); d <= end; d = addDays(d, 1)) days.push(d);
+  return days;
+};
+var indexByDay = (events, first, last) => {
+  const byDay = /* @__PURE__ */ new Map();
+  const sorted = [...events].sort((a, b) => a.start.getTime() - b.start.getTime());
+  for (const event of sorted) {
+    const start = startOfDay(event.start);
+    const end = event.end && event.end > event.start ? startOfDay(event.end) : start;
+    const to = end < last ? end : last;
+    for (let d = start < first ? first : start; d <= to; d = addDays(d, 1)) {
+      const key = isoDate(d);
+      const list = byDay.get(key);
+      if (list) list.push(event);
+      else byDay.set(key, [event]);
+    }
+  }
+  return byDay;
+};
+var EventChip = ({
+  event,
+  onClick,
+  compact = false
+}) => {
+  const tone = event.tone ?? "brand";
+  const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: clsx("h-1.5 w-1.5 shrink-0 rounded-full", TONE_DOT[tone]) }),
+    /* @__PURE__ */ jsx("span", { className: clsx("truncate", compact && "max-sm:sr-only"), children: event.title })
+  ] });
+  const className = clsx(
+    "flex min-w-0 items-center gap-1.5 rounded-md px-1.5 py-0.5 text-left text-xs text-gray-700 dark:text-gray-200",
+    TONE_CHIP[tone],
+    compact ? "max-sm:bg-transparent max-sm:px-1 sm:w-full max-sm:dark:bg-transparent" : "w-full"
+  );
+  if (!onClick) {
+    return /* @__PURE__ */ jsx("div", { title: event.title, className, children: content });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      title: event.title,
+      onClick: () => onClick(event),
+      className: clsx(className, TONE_CHIP_HOVER[tone], FOCUS_RING),
+      children: content
+    }
+  );
+};
+var EventCalendar = ({
+  events,
+  month,
+  defaultMonth,
+  onMonthChange,
+  today = /* @__PURE__ */ new Date(),
+  onEventClick,
+  onDayClick,
+  className
+}) => {
+  const [internalMonth, setInternalMonth] = useState(() => startOfMonth(defaultMonth ?? today));
+  const [openDay, setOpenDay] = useState(null);
+  const shown = startOfMonth(month ?? internalMonth);
+  const { days, byDay } = useMemo(() => {
+    const grid = monthGrid(month ?? internalMonth);
+    return { days: grid, byDay: indexByDay(events, grid[0], grid[grid.length - 1]) };
+  }, [events, month, internalMonth]);
+  const goTo = (next) => {
+    if (month === void 0) setInternalMonth(next);
+    onMonthChange?.(next);
+  };
+  const isTodayMonth = shown.getFullYear() === today.getFullYear() && shown.getMonth() === today.getMonth();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("h3", { "aria-live": "polite", className: "text-base font-semibold text-[var(--color-text-primary)]", children: [
+            MONTHS[shown.getMonth()],
+            " ",
+            shown.getFullYear()
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                size: "sm",
+                onClick: () => goTo(startOfMonth(today)),
+                disabled: isTodayMonth,
+                className: "mr-1",
+                children: "Today"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => goTo(new Date(shown.getFullYear(), shown.getMonth() - 1, 1)),
+                "aria-label": "Previous month",
+                className: clsx(
+                  "flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-200",
+                  FOCUS_RING
+                ),
+                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => goTo(new Date(shown.getFullYear(), shown.getMonth() + 1, 1)),
+                "aria-label": "Next month",
+                className: clsx(
+                  "flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-200",
+                  FOCUS_RING
+                ),
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4", "aria-hidden": true })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 border-y border-gray-200 dark:border-gray-800", "aria-hidden": true, children: WEEK_DAYS2.map((d) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-2xs py-2 text-center font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400",
+            children: d
+          },
+          d
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: "-mb-px grid grid-cols-7", children: days.map((day, i) => {
+          const key = isoDate(day);
+          const label = dayLabel(day);
+          const dayEvents = byDay.get(key) ?? [];
+          const hidden = dayEvents.length - MAX_CHIPS;
+          const outside = day.getMonth() !== shown.getMonth();
+          const isToday = sameDay(day, today);
+          const numberClass = clsx(
+            "inline-flex h-6 min-w-6 items-center justify-center rounded-full px-1 text-xs font-medium",
+            isToday ? "bg-brand-500 text-white" : outside ? "text-gray-400 dark:text-gray-500" : "text-gray-700 dark:text-gray-200"
+          );
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "group",
+              "aria-label": label,
+              className: clsx(
+                "min-h-20 min-w-0 border-b border-gray-200 p-1.5 sm:min-h-28 dark:border-gray-800",
+                i % 7 !== 6 && "border-r",
+                outside && "bg-gray-50 dark:bg-white/[0.02]"
+              ),
+              children: [
+                onDayClick ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": label,
+                    "aria-current": isToday ? "date" : void 0,
+                    onClick: () => onDayClick(day),
+                    className: clsx(
+                      numberClass,
+                      !isToday && "hover:bg-gray-100 dark:hover:bg-white/5",
+                      FOCUS_RING
+                    ),
+                    children: day.getDate()
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "time",
+                  {
+                    dateTime: key,
+                    "aria-current": isToday ? "date" : void 0,
+                    className: numberClass,
+                    children: day.getDate()
+                  }
+                ),
+                dayEvents.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-1 flex flex-wrap gap-0.5 sm:flex-col sm:flex-nowrap", children: dayEvents.slice(0, MAX_CHIPS).map((event) => /* @__PURE__ */ jsx("li", { className: "min-w-0", children: /* @__PURE__ */ jsx(EventChip, { event, onClick: onEventClick, compact: true }) }, event.id)) }),
+                hidden > 0 && /* @__PURE__ */ jsxs(
+                  Popover,
+                  {
+                    open: openDay === key,
+                    onOpenChange: (open) => setOpenDay(open ? key : null),
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        Popover.Trigger,
+                        {
+                          "aria-label": `+${hidden} more on ${label}`,
+                          className: clsx(
+                            "mt-0.5 rounded px-1.5 text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white",
+                            FOCUS_RING
+                          ),
+                          children: [
+                            "+",
+                            hidden,
+                            /* @__PURE__ */ jsx("span", { className: "max-sm:sr-only", children: " more" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(Popover.Content, { "aria-label": `Events on ${label}`, width: "w-60", children: [
+                        /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-semibold text-[var(--color-text-primary)]", children: label }),
+                        /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: dayEvents.map((event) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                          EventChip,
+                          {
+                            event,
+                            onClick: onEventClick && ((e) => {
+                              setOpenDay(null);
+                              onEventClick(e);
+                            })
+                          }
+                        ) }, event.id)) })
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            },
+            key
+          );
+        }) })
+      ]
+    }
+  );
+};
 var ColumnFilterDropdown = ({
   values,
   selected,
@@ -7577,6 +8165,16 @@ var ColumnFilterDropdown = ({
     }
   );
 };
+
+// src/table/density.ts
+var HEADER_CELL_PADDING = {
+  default: "py-3",
+  comfortable: "py-4"
+};
+var BODY_CELL_PADDING = {
+  default: "py-3.5",
+  comfortable: "py-5"
+};
 var ALIGN_CLASS2 = {
   left: "text-left",
   right: "text-right",
@@ -7593,6 +8191,7 @@ var ColumnHeader = ({
   filterSelected,
   onFilterToggle,
   onFilterClear,
+  density = "default",
   className
 }) => {
   const [open, setOpen] = useState(false);
@@ -7610,7 +8209,9 @@ var ColumnHeader = ({
     "th",
     {
       className: clsx(
-        "bg-gray-50 px-4 py-3 text-xs font-semibold tracking-wider text-gray-500 uppercase dark:bg-gray-800 dark:text-gray-400",
+        "bg-gray-50 px-4",
+        HEADER_CELL_PADDING[density],
+        "text-xs font-semibold tracking-wider text-gray-500 uppercase dark:bg-gray-800 dark:text-gray-400",
         ALIGN_CLASS2[align],
         className
       ),
@@ -7641,7 +8242,7 @@ var ColumnHeader = ({
               ),
               children: [
                 /* @__PURE__ */ jsx(Filter, { className: "h-3 w-3" }),
-                filterCount > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px]", children: filterCount })
+                filterCount > 0 && /* @__PURE__ */ jsx("span", { className: "text-3xs", children: filterCount })
               ]
             }
           ),
@@ -7841,6 +8442,7 @@ var DataTable = ({
   onRetry,
   emptyTitle = "No results",
   emptyDescription,
+  density = "default",
   selectable = false,
   selection: selectionProp,
   defaultSelection,
@@ -8067,15 +8669,25 @@ var DataTable = ({
             renderRowAction && /* @__PURE__ */ jsx("col", { style: { width: "8%" } })
           ] }),
           /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10", children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-gray-100 dark:border-gray-800", children: [
-            selectable && /* @__PURE__ */ jsx("th", { className: "bg-gray-50 px-4 py-3 dark:bg-gray-800", children: /* @__PURE__ */ jsx(
-              Checkbox,
+            selectable && /* @__PURE__ */ jsx(
+              "th",
               {
-                "aria-label": "Select all rows",
-                checked: allVisibleSelected,
-                indeterminate: someVisibleSelected,
-                onChange: toggleAllVisible
+                className: clsx(
+                  "bg-gray-50 px-4",
+                  HEADER_CELL_PADDING[density],
+                  "dark:bg-gray-800"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    "aria-label": "Select all rows",
+                    checked: allVisibleSelected,
+                    indeterminate: someVisibleSelected,
+                    onChange: toggleAllVisible
+                  }
+                )
               }
-            ) }),
+            ),
             columns.map((col) => /* @__PURE__ */ jsx(
               ColumnHeader,
               {
@@ -8088,11 +8700,22 @@ var DataTable = ({
                 filterValues: columnFilterValues[col.key],
                 filterSelected: filters[col.key],
                 onFilterToggle: (v) => handleFilterToggle(col.key, v),
-                onFilterClear: () => clearFilter(col.key)
+                onFilterClear: () => clearFilter(col.key),
+                density
               },
               col.key
             )),
-            renderRowAction && /* @__PURE__ */ jsx("th", { className: "bg-gray-50 px-4 py-3 text-right text-xs font-semibold tracking-wider text-gray-500 uppercase dark:bg-gray-800 dark:text-gray-400", children: "Action" })
+            renderRowAction && /* @__PURE__ */ jsx(
+              "th",
+              {
+                className: clsx(
+                  "bg-gray-50 px-4",
+                  HEADER_CELL_PADDING[density],
+                  "text-right text-xs font-semibold tracking-wider text-gray-500 uppercase dark:bg-gray-800 dark:text-gray-400"
+                ),
+                children: "Action"
+              }
+            )
           ] }) }),
           /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-gray-100 dark:divide-gray-800", children: pageRows.map((row) => {
             const key = rowKey(row);
@@ -8105,7 +8728,7 @@ var DataTable = ({
                   isSelected && "bg-brand-50/40 dark:bg-brand-500/5"
                 ),
                 children: [
-                  selectable && /* @__PURE__ */ jsx("td", { className: "px-4 py-3.5", children: /* @__PURE__ */ jsx(
+                  selectable && /* @__PURE__ */ jsx("td", { className: clsx("px-4", BODY_CELL_PADDING[density]), children: /* @__PURE__ */ jsx(
                     Checkbox,
                     {
                       "aria-label": `Select row ${key}`,
@@ -8116,12 +8739,17 @@ var DataTable = ({
                   columns.map((col) => /* @__PURE__ */ jsx(
                     "td",
                     {
-                      className: clsx("px-4 py-3.5 text-sm", ALIGN_CELL[col.align ?? "left"]),
+                      className: clsx(
+                        "px-4",
+                        BODY_CELL_PADDING[density],
+                        "text-sm",
+                        ALIGN_CELL[col.align ?? "left"]
+                      ),
                       children: col.render(row)
                     },
                     col.key
                   )),
-                  renderRowAction && /* @__PURE__ */ jsx("td", { className: "px-4 py-3.5 text-right", children: renderRowAction(row) })
+                  renderRowAction && /* @__PURE__ */ jsx("td", { className: clsx("px-4", BODY_CELL_PADDING[density], "text-right"), children: renderRowAction(row) })
                 ]
               },
               key
@@ -8233,7 +8861,7 @@ var IntegrationCard = ({
         status && /* @__PURE__ */ jsx(Badge, { variant: STATUS_VARIANT[status], appearance: "light", children: STATUS_LABEL2[status] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "mt-4 min-w-0 flex-1", children: [
-        category && /* @__PURE__ */ jsx("p", { className: "font-mono text-[10px] tracking-wide text-gray-400 uppercase dark:text-gray-500", children: category }),
+        category && /* @__PURE__ */ jsx("p", { className: "text-3xs font-mono tracking-wide text-gray-400 uppercase dark:text-gray-500", children: category }),
         /* @__PURE__ */ jsx("h3", { className: "mt-0.5 truncate text-sm font-semibold text-gray-900 dark:text-white", children: name }),
         description && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 text-xs text-gray-600 dark:text-gray-400", children: description })
       ] }),
@@ -8792,7 +9420,7 @@ var ColorSwatch = ({
         "span",
         {
           className: clsx(
-            "text-[10px] leading-none font-medium",
+            "text-3xs leading-none font-medium",
             active ? "text-gray-700 dark:text-gray-200" : "text-gray-400 dark:text-gray-500"
           ),
           children: label
@@ -8879,7 +9507,7 @@ var PaletteCard = ({ meta, active = false, onClick, className }) => /* @__PURE__
                   children: meta.label
                 }
               ),
-              meta.desc && /* @__PURE__ */ jsx("span", { className: "block text-[10px]", style: { color: meta.preview.text ?? "#9ca3af" }, children: meta.desc })
+              meta.desc && /* @__PURE__ */ jsx("span", { className: "text-3xs block", style: { color: meta.preview.text ?? "#9ca3af" }, children: meta.desc })
             ] }),
             active && /* @__PURE__ */ jsx("span", { className: "bg-brand-500 flex h-4 w-4 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(Check, { className: "h-2.5 w-2.5 text-white", "aria-hidden": true }) })
           ]
@@ -8934,7 +9562,7 @@ var OptionCard = ({
             children: label
           }
         ),
-        desc && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: desc })
+        desc && /* @__PURE__ */ jsx("p", { className: "text-3xs text-gray-400 dark:text-gray-500", children: desc })
       ] }),
       active && /* @__PURE__ */ jsx("span", { className: "bg-brand-500 absolute top-1.5 right-1.5 flex h-4 w-4 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(Check, { className: "h-2.5 w-2.5 text-white", "aria-hidden": true }) })
     ]
@@ -9007,15 +9635,37 @@ var COSMOS_ACCENTS = [
   { id: "amber", label: "Amber", hex: "#a46800" },
   { id: "green", label: "Green", hex: "#02863c" }
 ];
+var COSMOS_FONTS = [
+  { id: "outfit", label: "Outfit", family: "'Outfit', system-ui, sans-serif" },
+  { id: "inter", label: "Inter", family: "'Inter Variable', system-ui, sans-serif" },
+  { id: "plex", label: "IBM Plex Sans", family: "'IBM Plex Sans Variable', system-ui, sans-serif" },
+  { id: "montserrat", label: "Montserrat", family: "'Montserrat Variable', system-ui, sans-serif" },
+  { id: "open-sans", label: "Open Sans", family: "'Open Sans Variable', system-ui, sans-serif" },
+  {
+    id: "system",
+    label: "System",
+    family: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+  }
+];
+var COSMOS_TEXT_SIZES = [
+  { id: "sm", label: "Small", scale: 0.9375 },
+  { id: "md", label: "Default", scale: 1 },
+  { id: "lg", label: "Large", scale: 1.125 },
+  { id: "xl", label: "Extra large", scale: 1.25 }
+];
 var THEME_CLASSES = COSMOS_THEMES.map((t) => t.id).filter((id) => id !== "light");
 var isDarkTheme = (theme) => COSMOS_THEMES.some((t) => t.id === theme && t.dark);
-var applyAppearance = ({ theme, accent }, root) => {
+var applyAppearance = ({ theme, accent, font, textSize }, root) => {
   const el = root ?? (typeof document === "undefined" ? void 0 : document.documentElement);
   if (!el) return;
   el.classList.remove(...THEME_CLASSES);
   if (theme !== "light") el.classList.add(theme);
   if (accent === "blue") delete el.dataset.accent;
   else el.dataset.accent = accent;
+  if (font === "outfit") delete el.dataset.font;
+  else if (font) el.dataset.font = font;
+  if (textSize === "md") delete el.dataset.textSize;
+  else if (textSize) el.dataset.textSize = textSize;
 };
 var AppearanceSettings = ({
   theme,
@@ -9027,10 +9677,20 @@ var AppearanceSettings = ({
   themes = COSMOS_THEMES,
   accents = COSMOS_ACCENTS,
   themeColumns = 4,
+  font = "outfit",
+  onFontChange,
+  textSize = "md",
+  onTextSizeChange,
+  fontLabel = "Font",
+  textSizeLabel = "Text size",
+  fonts = COSMOS_FONTS,
+  textSizes = COSMOS_TEXT_SIZES,
   className
 }) => {
   const themeHeadingId = useId();
   const accentHeadingId = useId();
+  const fontHeadingId = useId();
+  const textSizeHeadingId = useId();
   return /* @__PURE__ */ jsxs("div", { className: clsx("space-y-6", className), children: [
     /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": themeHeadingId, children: [
       /* @__PURE__ */ jsx("p", { id: themeHeadingId, className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: themeLabel }),
@@ -9057,6 +9717,64 @@ var AppearanceSettings = ({
           cols: 6
         }
       )
+    ] }),
+    onFontChange && /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": fontHeadingId, children: [
+      /* @__PURE__ */ jsx("p", { id: fontHeadingId, className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: fontLabel }),
+      /* @__PURE__ */ jsx(
+        OptionPicker,
+        {
+          className: "mt-3",
+          cols: 3,
+          value: font,
+          onChange: (id) => onFontChange(id),
+          options: fonts.map((f) => ({
+            id: f.id,
+            label: f.label,
+            preview: /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                style: { fontFamily: f.family },
+                className: "text-xl text-gray-900 dark:text-gray-100",
+                children: "Aa"
+              }
+            )
+          }))
+        }
+      )
+    ] }),
+    onTextSizeChange && /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": textSizeHeadingId, children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: textSizeHeadingId,
+          className: "text-sm font-medium text-gray-700 dark:text-gray-300",
+          children: textSizeLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        OptionPicker,
+        {
+          className: "mt-3",
+          cols: 4,
+          value: textSize,
+          onChange: (id) => onTextSizeChange(id),
+          options: textSizes.map((t) => ({
+            id: t.id,
+            label: t.label,
+            // Pixel sizes, so the previews don't scale with the setting.
+            preview: /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                style: { fontSize: `${16 * t.scale}px` },
+                className: "text-gray-900 dark:text-gray-100",
+                children: "Aa"
+              }
+            )
+          }))
+        }
+      )
     ] })
   ] });
 };
@@ -9085,10 +9803,10 @@ var AppearanceMenu = ({
         children: /* @__PURE__ */ jsx(Palette, { className: icon, "aria-hidden": true })
       }
     ),
-    /* @__PURE__ */ jsx(Popover.Content, { align: "end", width: "w-96", "aria-label": label, children: /* @__PURE__ */ jsx(AppearanceSettings, { themeColumns: 2, ...settings }) })
+    /* @__PURE__ */ jsx(Popover.Content, { align: "end", width: "w-96", "aria-label": label, children: /* @__PURE__ */ jsx("div", { className: "-m-4 max-h-[calc(100dvh-6rem)] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(AppearanceSettings, { themeColumns: 2, ...settings }) }) })
   ] });
 };
-var SIZE = {
+var SIZE2 = {
   sm: "text-base leading-relaxed",
   md: "text-lg leading-relaxed",
   lg: "text-2xl leading-snug"
@@ -9108,7 +9826,7 @@ var Blockquote = ({
   authorAvatar,
   className
 }) => {
-  const text = /* @__PURE__ */ jsx("p", { className: clsx("font-medium text-gray-700 italic dark:text-gray-200", SIZE[size]), children });
+  const text = /* @__PURE__ */ jsx("p", { className: clsx("font-medium text-gray-700 italic dark:text-gray-200", SIZE2[size]), children });
   if (variant === "icon") {
     return /* @__PURE__ */ jsxs("blockquote", { className: clsx(ALIGN[align], className), children: [
       /* @__PURE__ */ jsx(
@@ -9190,21 +9908,6 @@ var Blockquote = ({
     }
   );
 };
-var SIZE2 = {
-  sm: "h-5 min-w-[20px] px-1.5 text-[10px]",
-  md: "h-6 min-w-[24px] px-2 text-xs"
-};
-var Kbd2 = ({ children, size = "md", className }) => /* @__PURE__ */ jsx(
-  "kbd",
-  {
-    className: clsx(
-      "inline-flex shrink-0 items-center justify-center rounded border border-gray-200 bg-gray-50 font-mono font-medium text-gray-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.04)] dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:shadow-[inset_0_-1px_0_0_rgba(255,255,255,0.04)]",
-      SIZE2[size],
-      className
-    ),
-    children
-  }
-);
 var SIZE3 = {
   xs: "max-w-xs",
   sm: "max-w-sm",
@@ -9255,6 +9958,6 @@ var Figure = ({
   caption && /* @__PURE__ */ jsx("figcaption", { className: "mt-2 text-center text-xs text-gray-500 italic dark:text-gray-400", children: caption })
 ] });
 
-export { AccentPicker, Accordion2 as Accordion, ActionPanel, ActiveFiltersBar, ActivityFeed, AlertBanner, AnnouncementBar, AppearanceMenu, AppearanceSettings, AuthLayout, Avatar, AvatarUploader, BackToTopFab, Backdrop, Badge, Blockquote, Breadcrumb, Button, ButtonGroup, COSMOS_ACCENTS, COSMOS_THEMES, Calendar, Card2 as Card, Carousel, CarouselRoot, Checkbox, CheckboxGroup, ClickableRow, Clipboard, CodeBlock, ColBox, ColorSwatch, ColumnFilterDropdown, ColumnHeader, Combobox, CommandPalette, ConfirmationModal, ContentNarrow, ContentStackedList, CookieBanner, DataTable, DatePicker, DescriptionList, Divider, Drawer, Dropdown, Dropzone, EmptyState, ErrorPage, ErrorState, Figure, FileInput, FilterPills, FormFooter, FormRow, GridList, HealthBadge, HealthDot, HelpOverlay, IconBox, ImageGrid, Input, IntegrationCard, Kbd2 as Kbd, KpiCard, Link, List2 as List, LoadingState, MediaObject, MiniCalendar, Modal, NarrowStackedList, Navbar, NotificationCard, NotificationsPanel, NumberInput, OptionCard, OptionPicker, OtpInput, PageActionButton, PageActionIconButton, PageBreadcrumb, PageCard, PageHeader, Pagination, PaletteCard, PalettePicker, PasswordInput, PasswordPolicyChecker, Popover, ProgressBar, REFRESH_OPTIONS, Radio, RadioGroup, RefreshButton, ResetPasswordForm, Ribbon, RowActionButton, STATUS_COLOR, STATUS_PILL, SearchInput, SectionCard, SectionLabel, SegmentedControl, Select, SelectInput, Shell, Sidebar, SignInForm, SignUpForm, SimpleRow, Sk, SkeletonList, SkeletonTable, SkeletonText, SocialAuthButtons, Spinner, StackedList, StackedListInCard, StatefulSaveButton, StatusBadge, StatusRow, Stepper, StepperInput, StepperRoot, StickyScrollNav, Tabs, Textarea, ThemeToggle, ThemeToggleTri, TimePicker, Timeline, Toaster, Toggle, Tooltip, TooltipHelp, Topbar, TwoStepVerificationForm, UnsavedIndicator, UserMenu, VerticalNavigation, VideoEmbed, ZoomBar, applyAppearance, defaultPasswordRules, isDarkTheme, useAutoRefresh };
+export { AccentPicker, Accordion2 as Accordion, ActionPanel, ActiveFiltersBar, ActivityFeed, AlertBanner, AnnouncementBar, AppearanceMenu, AppearanceSettings, AuthLayout, Avatar, AvatarUploader, BackToTopFab, Backdrop, Badge, Blockquote, Breadcrumb, Button, ButtonGroup, COSMOS_ACCENTS, COSMOS_FONTS, COSMOS_TEXT_SIZES, COSMOS_THEMES, Calendar, Card2 as Card, Carousel, CarouselRoot, Checkbox, CheckboxGroup, ClickableRow, Clipboard, CodeBlock, ColBox, ColorSwatch, ColumnFilterDropdown, ColumnHeader, Combobox, CommandPalette, ConfirmationModal, ContentNarrow, ContentStackedList, CookieBanner, DataTable, DatePicker, DescriptionList, Divider, Drawer, Dropdown, Dropzone, EmptyState, ErrorPage, ErrorState, EventCalendar, Figure, FileInput, FilterPills, FormFooter, FormRow, GridList, HealthBadge, HealthDot, HelpOverlay, IconBox, ImageGrid, Input, IntegrationCard, Kbd, KpiCard, Link, List2 as List, LoadingState, MediaObject, MiniCalendar, Modal, NarrowStackedList, Navbar, NotificationCard, NotificationsPanel, NumberInput, OptionCard, OptionPicker, OtpInput, PageActionButton, PageActionIconButton, PageBreadcrumb, PageHeader, Pagination, PaletteCard, PalettePicker, PasswordInput, PasswordPolicyChecker, Popover, ProgressBar, REFRESH_OPTIONS, Radio, RadioGroup, RefreshButton, ResetPasswordForm, Ribbon, RowActionButton, STATUS_COLOR, STATUS_PILL, SearchInput, SectionCard, SectionLabel, SegmentedControl, Select, SelectInput, Shell, Sidebar, SignInForm, SignUpForm, SimpleRow, Sk, SkeletonList, SkeletonTable, SkeletonText, SocialAuthButtons, Spinner, StackedList, StackedListInCard, StatefulSaveButton, StatusBadge, StatusRow, Stepper, StepperInput, StepperRoot, StickyScrollNav, Tabs, Textarea, ThemeToggle, ThemeToggleTri, TimePicker, Timeline, Toaster, Toggle, Tooltip, TooltipHelp, Topbar, TwoStepVerificationForm, UnsavedIndicator, UserMenu, VerticalNavigation, VideoEmbed, ZoomBar, applyAppearance, defaultPasswordRules, isDarkTheme, useAutoRefresh };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map