@sckyzo/cosmos-react 0.0.3 → 0.2.0

package/dist/index.cjs

@@ -170,6 +170,7 @@ var Shell = ({
   defaultSidebarCollapsed = false,
   sidebarCollapsed: controlledCollapsed,
   onSidebarToggle,
+  collapseControl = "topbar",
   className
 }) => {
   const [internalCollapsed, setInternalCollapsed] = react.useState(defaultSidebarCollapsed);
@@ -179,12 +180,22 @@ var Shell = ({
     if (controlledCollapsed === void 0) setInternalCollapsed(next);
     onSidebarToggle?.(next);
   };
-  const enhancedTopbar = topbar && sidebar ? react.cloneElement(topbar, {
-    sidebarCollapsed: topbar.props.sidebarCollapsed ?? collapsed,
-    onToggleSidebar: topbar.props.onToggleSidebar ?? handleToggle
-  }) : topbar;
+  const inSidebar = collapseControl === "sidebar";
+  const enhancedTopbar = topbar && sidebar ? react.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 ? react.cloneElement(sidebar, {
-    collapsed: sidebar.props.collapsed ?? collapsed
+    collapsed: sidebar.props.collapsed ?? collapsed,
+    ...inSidebar && {
+      onCollapsedChange: sidebar.props.onCollapsedChange ?? handleToggle
+    }
   }) : sidebar;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -269,17 +280,200 @@ var Topbar = ({
     ]
   }
 );
+var PopoverContext = react.createContext(null);
+var useCtx = () => {
+  const ctx = react.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] = react.useState(defaultOpen);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : internalOpen;
+  const triggerRef = react.useRef(null);
+  const [triggerRect, setTriggerRect] = react.useState(null);
+  const refreshRect = react.useCallback(() => {
+    if (triggerRef.current) setTriggerRect(triggerRef.current.getBoundingClientRect());
+  }, []);
+  const setOpen = react.useCallback(
+    (v) => {
+      if (v) refreshRect();
+      if (!isControlled) setInternalOpen(v);
+      onOpenChange?.(v);
+    },
+    [isControlled, onOpenChange, refreshRect]
+  );
+  react.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]);
+  react.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__ */ jsxRuntime.jsx(PopoverContext.Provider, { value: { open, setOpen, triggerRef, triggerRect, refreshRect }, children });
+};
+var PopoverTrigger = react.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;
+  };
+  react.useEffect(() => {
+    if (open) refreshRect();
+  }, [open, refreshRect]);
+  return /* @__PURE__ */ jsxRuntime.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 reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[9998]", onClick: () => setOpen(false) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "dialog",
+          "aria-label": ariaLabel,
+          style: positionStyle(position, align, triggerRect, offset),
+          className: clsx.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "relative", children })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+};
+var Popover = Object.assign(PopoverRoot, {
+  Trigger: PopoverTrigger,
+  Content: PopoverContent
+});
 var SidebarContext = react.createContext({ collapsed: false });
 var useSidebarCollapsed = (override) => {
   const ctx = react.useContext(SidebarContext);
   return override ?? ctx.collapsed;
 };
+var SidebarDepthContext = react.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__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: { collapsed }, children: /* @__PURE__ */ jsxRuntime.jsxs(
   "nav",
@@ -293,10 +487,32 @@ var SidebarRoot = ({
     ),
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-x-hidden overflow-y-auto", children }),
-      footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 overflow-hidden border-t border-[var(--color-border)] p-3", children: footer })
+      footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 overflow-hidden border-t border-[var(--color-border)] p-3", children: footer }),
+      onCollapsedChange && /* @__PURE__ */ jsxRuntime.jsx(CollapseButton, { collapsed, onClick: () => onCollapsedChange(!collapsed) })
     ]
   }
 ) });
+var CollapseButton = ({ collapsed, onClick }) => {
+  const Icon2 = collapsed ? lucideReact.PanelLeftOpen : lucideReact.PanelLeftClose;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-t border-[var(--color-border)] py-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+      "aria-expanded": !collapsed,
+      title: collapsed ? "Expand sidebar" : void 0,
+      className: clsx.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__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 shrink-0", "aria-hidden": true }),
+        !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Collapse" })
+      ]
+    }
+  ) });
+};
 var SidebarBrand = ({
   logo,
   title,
@@ -339,17 +555,19 @@ var SidebarItem = ({
   onClick,
   badge,
   collapsed: collapsedProp,
-  depth = 0
+  depth: depthProp
 }) => {
   const collapsed = useSidebarCollapsed(collapsedProp);
+  const contextDepth = react.useContext(SidebarDepthContext);
+  const depth = depthProp ?? contextDepth;
   const baseClass = clsx.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-500" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
+    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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: clsx.clsx("h-5 w-5 shrink-0", active && "text-brand-500") }),
+    /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 shrink-0" }),
     !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: label }),
       badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge })
@@ -364,6 +582,7 @@ var SidebarItem = ({
         className: baseClass,
         style,
         "aria-current": active ? "page" : void 0,
+        "data-sidebar-item": "",
         children: content
       }
     );
@@ -377,10 +596,15 @@ var SidebarItem = ({
       className: clsx.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.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,
@@ -391,20 +615,35 @@ var SidebarSubMenu = ({
   children
 }) => {
   const collapsed = useSidebarCollapsed(collapsedProp);
+  const depth = react.useContext(SidebarDepthContext);
   const [open, setOpen] = react.useState(defaultOpen || active);
+  const [flyoutOpen, setFlyoutOpen] = react.useState(false);
   if (collapsed) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        title: label,
-        className: clsx.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-500" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: clsx.clsx("h-5 w-5 shrink-0", active && "text-brand-500") })
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: flyoutOpen, onOpenChange: setFlyoutOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Popover.Trigger,
+        {
+          title: label,
+          "aria-label": label,
+          className: clsx.clsx(SUBMENU_ROW(active), "justify-center px-2"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 shrink-0" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { position: "right", "aria-label": label, width: "w-64", className: "p-2!", children: /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: { collapsed: false }, children: /* @__PURE__ */ jsxRuntime.jsxs(SidebarDepthContext.Provider, { value: 0, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pt-1 pb-2 text-xs font-semibold tracking-wider text-[var(--color-text-muted)] uppercase", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "-mx-2 space-y-0.5",
+            onClick: (e) => {
+              if (e.target.closest("[data-sidebar-item]"))
+                setFlyoutOpen(false);
+            },
+            children
+          }
+        )
+      ] }) }) })
+    ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -413,12 +652,10 @@ var SidebarSubMenu = ({
         type: "button",
         onClick: () => setOpen((v) => !v),
         "aria-expanded": open,
-        className: clsx.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-500" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
-        ),
+        className: clsx.clsx(SUBMENU_ROW(active), "gap-3 px-3 text-left"),
+        style: depth > 0 ? { paddingLeft: rowPadding(depth) } : void 0,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: clsx.clsx("h-5 w-5 shrink-0", active && "text-brand-500") }),
+          /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 shrink-0" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: label }),
           badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -433,7 +670,17 @@ var SidebarSubMenu = ({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 space-y-0.5", children })
+    open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mt-0.5 space-y-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "absolute top-0 bottom-0 w-px bg-[var(--color-border)]",
+          style: { left: guideLeft(depth) }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(SidebarDepthContext.Provider, { value: depth + 1, children })
+    ] })
   ] });
 };
 var SidebarGroup = ({
@@ -453,7 +700,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__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-3 w-3" }),
           label
@@ -466,7 +713,7 @@ var SidebarGroup = ({
 var SidebarSection = ({ label, collapsed: collapsedProp, children }) => {
   const collapsed = useSidebarCollapsed(collapsedProp);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-2 border-t border-[var(--color-border)] pt-2", children: [
-    label && !collapsed && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-3xs px-5 py-1.5 font-bold tracking-wider text-[var(--color-text-muted)] uppercase", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children })
   ] });
 };
@@ -479,7 +726,7 @@ Sidebar.SubMenu = SidebarSubMenu;
 var PageBreadcrumb = ({ items, className }) => /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-wrap items-center gap-1 text-sm", children: items.map((item, i) => {
   const isFirst = i === 0;
   const isLast = i === items.length - 1;
-  const linkClass = "hover:text-brand-500 dark:hover:text-brand-400 flex items-center gap-1 text-[var(--color-text-secondary)] transition-colors";
+  const linkClass = "hover:text-brand-600 dark:hover:text-brand-400 flex items-center gap-1 text-[var(--color-text-secondary)] transition-colors";
   const renderInner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     isFirst && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Home, { className: "h-4 w-4" }),
     item.label
@@ -489,17 +736,22 @@ var PageBreadcrumb = ({ items, className }) => /* @__PURE__ */ jsxRuntime.jsx("n
     isLast ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-[var(--color-text-primary)]", children: item.label }) : item.onClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: item.onClick, className: linkClass, children: renderInner }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href ?? "#", className: clsx.clsx(linkClass), children: renderInner })
   ] }, item.label);
 }) }) });
-var Root3 = ({ title, description, breadcrumb, meta, actions, className }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-start justify-between gap-4 ${className ?? ""}`, children: [
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold text-[var(--color-text-primary)]", children: title }),
-    breadcrumb && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5", children: breadcrumb }),
-    !breadcrumb && description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-[var(--color-text-secondary)]", children: description }),
-    meta && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: `flex flex-wrap items-start justify-between gap-4 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 grow basis-64", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold text-[var(--color-text-primary)]", children: title }),
+      breadcrumb && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5", children: breadcrumb }),
+      !breadcrumb && description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-[var(--color-text-secondary)]", children: description }),
+      meta && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+  ] })
+);
 var MetaItem = ({ icon: Icon2, children }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-  Icon2 && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "mr-1.5 size-5 text-[var(--color-text-muted)]", "aria-hidden": true }),
+  Icon2 && /* @__PURE__ */ jsxRuntime.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 });
@@ -575,16 +827,6 @@ var SectionCard = ({
     }
   );
 };
-var PageCard = ({ children, className }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: clsx.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__ */ jsxRuntime.jsx("div", { className: `mx-auto w-full ${className ?? ""}`, style: { maxWidth }, children });
 var ColBox = ({ label, height = 80, className }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
@@ -623,7 +865,7 @@ var ErrorState = ({
     {
       type: "button",
       onClick: onRetry,
-      className: "text-brand-500 hover:text-brand-600 text-xs font-medium hover:underline",
+      className: "text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 text-xs font-medium hover:underline",
       children: "Try again"
     }
   )
@@ -689,7 +931,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"
 };
@@ -829,7 +1071,7 @@ var StackedListItem = react.forwardRef(function StackedListItem2({ avatar, title
         ] }),
         (meta || trailing || isLinked && chevron) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-x-4", children: [
           meta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:flex sm:flex-col sm:items-end", children: meta }),
-          trailing,
+          trailing && (isLinked ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex items-center gap-x-4", children: trailing }) : trailing),
           isLinked && chevron && /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.ChevronRight,
             {
@@ -875,9 +1117,9 @@ var ContentStackedListItem = react.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm/6 font-semibold text-gray-900 dark:text-white", children: titleEl }),
               badge
             ] }),
-            hasMeta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex items-center gap-x-2 text-xs/5 text-gray-500 dark:text-gray-400", children: react.Children.toArray(metaItems).map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+            hasMeta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex items-center gap-x-2 text-xs/5 text-gray-500 dark:text-gray-400", children: react.Children.toArray(metaItems).map((item, i, items) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsxRuntime.jsx(Dot, {}),
-              item
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: i === items.length - 1 ? "truncate" : "whitespace-nowrap", children: item })
             ] }, i)) })
           ] }),
           trailing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-none items-center gap-x-4", children: trailing })
@@ -934,7 +1176,7 @@ var NarrowStackedListHeader = react.forwardRef(
       {
         ref,
         className: clsx.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
         ),
@@ -957,7 +1199,8 @@ var NarrowStackedListItem = react.forwardRef(
           ] }),
           description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 line-clamp-2 text-sm/6 text-gray-600 dark:text-gray-400", children: description }),
           !description && subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 truncate text-xs/5 text-gray-500 dark:text-gray-400", children: subtitle })
-        ] })
+        ] }),
+        trailing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-none items-center", children: trailing })
       ] });
     }
     if (trailing) {
@@ -1058,7 +1301,7 @@ var StatusRow = ({
       "span",
       {
         className: clsx.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
@@ -1163,18 +1406,21 @@ var Footer = react.forwardRef(function GridListFooter({ className, children, ...
 });
 var FooterAction = react.forwardRef(
   function GridListFooterAction({ index = 0, className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("flex w-0 flex-1", index > 0 && "-ml-px"), children: /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
-      {
-        ref,
-        className: clsx.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__ */ jsxRuntime.jsx("div", { className: clsx.clsx("group/action flex w-0 flex-1", index > 0 && "-ml-px"), children: /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          ref,
+          className: clsx.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, {
@@ -1238,74 +1484,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 = react.createContext("light");
 var RootCmp = react.forwardRef(function NavbarRoot({ theme = "light", maxWidth = "7xl", heightClassName = "h-16", className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, className: clsx.clsx(ROOT_BG[theme], className), "data-theme": theme, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("px-4 sm:px-6 lg:px-8", maxWidth === "7xl" && "mx-auto max-w-7xl"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("flex items-center justify-between", heightClassName), children }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, className: clsx.clsx(ROOT_BG[theme], className), "data-theme": theme, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("px-4 sm:px-6 lg:px-8", maxWidth === "7xl" && "mx-auto max-w-7xl"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("flex items-center justify-between", heightClassName), children: /* @__PURE__ */ jsxRuntime.jsx(NavbarThemeContext.Provider, { value: theme, children }) }) }) });
 });
 var Brand = ({ className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("flex shrink-0 items-center", className), ...rest, children });
 var Items = ({ className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("hidden md:ml-10 md:block", className), ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-baseline space-x-4", children }) });
-var Item2 = ({
-  active = false,
-  theme = "light",
-  className,
-  children,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "a",
-  {
-    "aria-current": active ? "page" : void 0,
-    className: clsx.clsx(ITEM_BASE[theme], active && ITEM_ACTIVE[theme], className),
-    ...rest,
-    children
-  }
-);
+var Item2 = ({ active = false, theme, className, children, ...rest }) => {
+  const inherited = react.useContext(NavbarThemeContext);
+  const resolved = theme ?? inherited;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      "aria-current": active ? "page" : void 0,
+      className: clsx.clsx(ITEM_BASE, active ? ITEM_ACTIVE[resolved] : ITEM_IDLE[resolved], className),
+      ...rest,
+      children
+    }
+  );
+};
 var Actions = ({ className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("hidden md:block", className), ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4 flex items-center gap-3 md:ml-6", children }) });
-var MobileMenuButton = ({
-  theme = "light",
-  className,
-  children,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "button",
-  {
-    type: "button",
-    "aria-label": "Toggle menu",
-    className: clsx.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__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        className: "size-6",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        strokeWidth: "1.5",
-        stroke: "currentColor",
-        "aria-hidden": true,
-        children: /* @__PURE__ */ jsxRuntime.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 = react.useContext(NavbarThemeContext);
+  const resolved = theme ?? inherited;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Toggle menu",
+      className: clsx.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__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "size-6",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          strokeWidth: "1.5",
+          stroke: "currentColor",
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsxRuntime.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,
@@ -1622,7 +1867,7 @@ var StepperRoot = ({
     react.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__ */ jsxRuntime.jsx("ol", { className: clsx.clsx(rootClass, className), "aria-label": "Progress", children: steps.map((step, i) => {
     const status = i < current ? "done" : i === current ? "active" : "pending";
     return react.cloneElement(step, {
@@ -1707,18 +1952,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",
@@ -1754,7 +2006,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,
@@ -1856,7 +2108,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 = {
@@ -1892,7 +2144,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",
@@ -1929,6 +2181,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__ */ jsxRuntime.jsx(
+  "kbd",
+  {
+    className: clsx.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",
@@ -1944,54 +2211,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__ */ jsxRuntime.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 = react.useId();
+  const [open, setOpen] = react.useState(false);
+  const [engaged, setEngaged] = react.useState(false);
+  const timer = react.useRef(void 0);
+  react.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);
+  };
+  react.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 = react.isValidElement(children) ? react.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__ */ jsxRuntime.jsxs(
       "span",
       {
-        role: "tooltip",
-        className: clsx.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__ */ jsxRuntime.jsx(
+          trigger,
+          /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
-              "aria-hidden": true,
-              className: clsx.clsx("absolute h-2 w-2 rotate-45", ARROW_POS[position], VARIANT_ARROW[variant])
+              id,
+              role: "tooltip",
+              className: clsx.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__ */ jsxRuntime.jsx("span", { className: "block font-semibold", children: title }),
+                title ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 block opacity-80", children: content }) : content,
+                shortcut && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 inline-flex gap-0.5 align-middle", children: shortcut.map((key, i) => /* @__PURE__ */ jsxRuntime.jsx(Kbd, { size: "sm", children: key }, i)) }),
+                arrow && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: clsx.clsx(
+                      "absolute h-2 w-2 rotate-45",
+                      ARROW_POS[position],
+                      VARIANT_ARROW[variant]
+                    )
+                  }
+                )
+              ]
             }
           )
         ]
       }
     )
-  ] })
-);
+  );
+};
 var TooltipHelp = ({
   text,
   position = "top",
   variant = "dark"
-}) => /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: text, position, variant, maxWidth: "max-w-[260px]", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx(Tooltip, { content: text, position, variant, maxWidth: "max-w-[260px]", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.HelpCircle, { className: "h-3.5 w-3.5", "aria-hidden": true })
+  }
+) });
 var isDivider = (item) => item.divider === true;
 var Dropdown = ({
   label,
@@ -2554,25 +2891,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__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value, onChange, orientation }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.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__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value, onChange, orientation, variant }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: clsx.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__ */ jsxRuntime.jsx(
     "div",
     {
       role: "tablist",
       "aria-orientation": orientation,
-      className: clsx.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.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__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -2583,13 +2986,8 @@ var Trigger = ({ value, children, icon: Icon2, badge, disabled, className }) =>
       onClick: () => onChange(value),
       className: clsx.clsx(
         "flex items-center gap-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
-        orientation === "vertical" ? clsx.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.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: [
@@ -2599,7 +2997,7 @@ var Trigger = ({ value, children, icon: Icon2, badge, disabled, className }) =>
           "span",
           {
             className: clsx.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
@@ -2614,16 +3012,9 @@ var Panel = ({
   children,
   className
 }) => {
-  const { value: active, orientation } = useTabs();
+  const { value: active, orientation, variant } = useTabs();
   if (value !== active) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "tabpanel",
-      className: clsx.clsx(orientation === "vertical" ? "flex-1" : "pt-5", className),
-      children
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tabpanel", className: clsx.clsx(PANEL_CLASSES[variant][orientation], className), children });
 };
 var Tabs = Object.assign(Root10, { List, Trigger, Panel });
 var SIZE_ICON = {
@@ -2713,7 +3104,13 @@ var Clipboard = react.forwardRef(function Clipboard2({
     }
   );
 });
-var CodeBlock = ({ code, language, showCopy = true, className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+var CodeBlock = ({
+  code,
+  language,
+  highlight,
+  showCopy = true,
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
   "div",
   {
     className: clsx.clsx(
@@ -2722,10 +3119,10 @@ var CodeBlock = ({ code, language, showCopy = true, className }) => /* @__PURE__
     ),
     children: [
       language && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-4 py-1.5 dark:border-gray-800", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400", children: language }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xs font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400", children: language }),
         showCopy && /* @__PURE__ */ jsxRuntime.jsx(Clipboard, { value: code, floating: true })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "overflow-x-auto p-4 text-xs leading-relaxed text-gray-800 dark:text-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: code }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "overflow-x-auto p-4 text-xs leading-relaxed text-gray-800 dark:text-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: highlight ? highlight(code, language) : code }) }),
       showCopy && !language && /* @__PURE__ */ jsxRuntime.jsx(Clipboard, { value: code, floating: true, className: "absolute top-2 right-2" })
     ]
   }
@@ -2934,7 +3331,7 @@ var SectionLabel = ({ children, className }) => /* @__PURE__ */ jsxRuntime.jsx(
   "p",
   {
     className: clsx.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
@@ -3230,7 +3627,7 @@ var BADGE_BG = {
   success: "bg-green-500"
 };
 var NotificationsPanelContext = react.createContext(null);
-var useCtx = () => {
+var useCtx2 = () => {
   const ctx = react.useContext(NotificationsPanelContext);
   if (!ctx) throw new Error("NotificationsPanel.* must be used inside <NotificationsPanel>");
   return ctx;
@@ -3288,7 +3685,7 @@ var NotificationsPanelRoot = ({
 };
 var NotificationsPanelTrigger = react.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);
@@ -3330,7 +3727,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 };
@@ -3429,7 +3826,7 @@ var NotificationsPanelItem = react.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();
@@ -3461,13 +3858,13 @@ var NotificationsPanelItem = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-semibold text-gray-900 dark:text-white", children: title }),
             subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-gray-500 dark:text-gray-400", children: subtitle }),
-            caption && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 truncate font-mono text-[10px] text-gray-400", children: caption })
+            caption && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xs mt-0.5 truncate font-mono text-gray-400", children: caption })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               className: clsx.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
@@ -3494,7 +3891,7 @@ var NotificationsPanelFooter = ({
   className,
   ...rest
 }) => {
-  const { setOpen } = useCtx();
+  const { setOpen } = useCtx2();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-gray-100 p-2 dark:border-gray-800", children: /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -3504,7 +3901,7 @@ var NotificationsPanelFooter = ({
         if (closeOnClick && !e.defaultPrevented) setOpen(false);
       },
       className: clsx.clsx(
-        "text-brand-500 w-full rounded-lg py-2 text-center text-sm font-medium transition-colors hover:bg-gray-50 dark:hover:bg-white/5",
+        "text-brand-600 dark:text-brand-400 w-full rounded-lg py-2 text-center text-sm font-medium transition-colors hover:bg-gray-50 dark:hover:bg-white/5",
         className
       ),
       ...rest,
@@ -3616,7 +4013,7 @@ var NotificationCard = Object.assign(Root11, {
   Condensed: CondensedVariant
 });
 var UserMenuContext = react.createContext(null);
-var useCtx2 = () => {
+var useCtx3 = () => {
   const ctx = react.useContext(UserMenuContext);
   if (!ctx) throw new Error("UserMenu.* must be used inside <UserMenu>");
   return ctx;
@@ -3672,7 +4069,7 @@ var UserMenuRoot = ({
 };
 var UserMenuTrigger = react.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);
@@ -3713,7 +4110,7 @@ var UserMenuTrigger = react.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 };
@@ -3756,7 +4153,7 @@ var UserMenuHeader = ({ name, email, avatarSrc, className }) => /* @__PURE__ */
 );
 var UserMenuItems = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", className: "py-1", children });
 var UserMenuItem = react.forwardRef(function UserMenuItem2({ icon: Icon2, variant = "default", closeOnClick = true, onClick, className, children, ...rest }, ref) {
-  const { setOpen } = useCtx2();
+  const { setOpen } = useCtx3();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -3837,7 +4234,7 @@ var SIZE_CLASS9 = {
   sm: { box: "h-8 w-8", icon: "h-4 w-4" },
   md: { box: "h-10 w-10", icon: "h-5 w-5" }
 };
-var TRI_ORDER = ["light", "dark", "oled"];
+var TRI_ORDER = ["light", "dark", "deep-blue"];
 var nextInCycle = (current) => {
   const idx = TRI_ORDER.indexOf(current);
   return TRI_ORDER[(idx + 1) % TRI_ORDER.length];
@@ -3845,7 +4242,7 @@ var nextInCycle = (current) => {
 var ICON_FOR = {
   light: lucideReact.Sun,
   dark: lucideReact.Moon,
-  oled: lucideReact.MoonStar
+  "deep-blue": lucideReact.MoonStar
 };
 var ThemeToggleTri = react.forwardRef(
   function ThemeToggleTri2({
@@ -3854,12 +4251,12 @@ var ThemeToggleTri = react.forwardRef(
     size = "md",
     lightLabel = "Switch to light mode",
     darkLabel = "Switch to dark mode",
-    oledLabel = "Switch to OLED mode",
+    deepBlueLabel = "Switch to deep blue mode",
     className,
     ...rest
   }, ref) {
     const next = nextInCycle(theme);
-    const label = next === "light" ? lightLabel : next === "dark" ? darkLabel : oledLabel;
+    const label = next === "light" ? lightLabel : next === "dark" ? darkLabel : deepBlueLabel;
     const Icon2 = ICON_FOR[theme];
     const { box, icon } = SIZE_CLASS9[size];
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3933,7 +4330,7 @@ var ButtonGroup = ({
   );
 };
 var CarouselContext = react.createContext(null);
-var useCtx3 = () => {
+var useCtx4 = () => {
   const ctx = react.useContext(CarouselContext);
   if (!ctx) throw new Error("Carousel.* must be used inside <Carousel>");
   return ctx;
@@ -3989,7 +4386,7 @@ var CarouselRoot = ({
   );
 };
 var CarouselViewport = ({ children, className }) => {
-  const { emblaRef } = useCtx3();
+  const { emblaRef } = useCtx4();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: emblaRef, className: clsx.clsx("overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children }) });
 };
 var CarouselSlide = ({ basis = "basis-full", className, children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("min-w-0 shrink-0 grow-0 px-1", basis, className), children });
@@ -3999,7 +4396,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__ */ jsxRuntime.jsxs("div", { className: clsx.clsx("mt-3 flex items-center justify-center gap-2", className), children: [
@@ -4052,197 +4449,31 @@ var CarouselControls = ({
     )
   ] });
 };
-var CarouselIndicators = ({ className }) => {
-  const { scrollSnaps, selectedIndex, scrollTo } = useCtx3();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("mt-3 flex items-center justify-center gap-2", className), children: scrollSnaps.map((_, i) => {
-    const active = i === selectedIndex;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": `Go to slide ${i + 1}`,
-        "aria-current": active,
-        onClick: () => scrollTo(i),
-        className: clsx.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 = react.createContext(null);
-var useCtx4 = () => {
-  const ctx = react.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] = react.useState(defaultOpen);
-  const isControlled = openProp !== void 0;
-  const open = isControlled ? openProp : internalOpen;
-  const triggerRef = react.useRef(null);
-  const [triggerRect, setTriggerRect] = react.useState(null);
-  const refreshRect = react.useCallback(() => {
-    if (triggerRef.current) setTriggerRect(triggerRef.current.getBoundingClientRect());
-  }, []);
-  const setOpen = react.useCallback(
-    (v) => {
-      if (v) refreshRect();
-      if (!isControlled) setInternalOpen(v);
-      onOpenChange?.(v);
-    },
-    [isControlled, onOpenChange, refreshRect]
-  );
-  react.useEffect(() => {
-    if (!open) return;
-    const handler = () => refreshRect();
-    window.addEventListener("resize", handler);
-    window.addEventListener("scroll", handler, true);
-    return () => {
-      window.removeEventListener("resize", handler);
-      window.removeEventListener("scroll", handler, true);
-    };
-  }, [open, refreshRect]);
-  react.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__ */ jsxRuntime.jsx(PopoverContext.Provider, { value: { open, setOpen, triggerRef, triggerRect, refreshRect }, children });
-};
-var PopoverTrigger = react.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;
-  };
-  react.useEffect(() => {
-    if (open) refreshRect();
-  }, [open, refreshRect]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      ref: setRef,
-      type: "button",
-      "aria-haspopup": "dialog",
-      "aria-expanded": open,
-      onClick: (e) => {
-        onClick?.(e);
-        setOpen(!open);
-      },
-      ...rest,
-      children
-    }
-  );
-});
-var positionStyle = (position, rect, offset) => {
-  switch (position) {
-    case "top":
-      return {
-        top: rect.top - offset,
-        left: rect.left + rect.width / 2,
-        transform: "translate(-50%, -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: rect.left + rect.width / 2,
-        transform: "translateX(-50%)"
-      };
-  }
-};
-var arrowStyle = (position) => {
-  const base = {
-    position: "absolute",
-    width: 8,
-    height: 8,
-    transform: "rotate(45deg)"
-  };
-  switch (position) {
-    case "top":
-      return { ...base, bottom: -4, left: "50%", marginLeft: -4 };
-    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, left: "50%", marginLeft: -4 };
-  }
-};
-var PopoverContent = ({
-  position = "bottom",
-  offset = 8,
-  arrow = false,
-  width = "w-64",
-  className,
-  children
-}) => {
-  const { open, setOpen, triggerRect } = useCtx4();
-  if (!open || !triggerRect) return null;
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[9998]", onClick: () => setOpen(false) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          role: "dialog",
-          style: positionStyle(position, triggerRect, offset),
-          className: clsx.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__ */ jsxRuntime.jsx(
-              "span",
-              {
-                "aria-hidden": true,
-                style: arrowStyle(position),
-                className: "border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children })
-          ]
-        }
-      )
-    ] }),
-    document.body
-  );
-};
-var Popover = Object.assign(PopoverRoot, {
-  Trigger: PopoverTrigger,
-  Content: PopoverContent
+var CarouselIndicators = ({ className }) => {
+  const { scrollSnaps, selectedIndex, scrollTo } = useCtx4();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("mt-3 flex items-center justify-center gap-2", className), children: scrollSnaps.map((_, i) => {
+    const active = i === selectedIndex;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Go to slide ${i + 1}`,
+        "aria-current": active,
+        onClick: () => scrollTo(i),
+        className: clsx.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",
@@ -4312,7 +4543,7 @@ var ProgressBar = ({
                 INTENT_BG2[intent],
                 striped && "motion-safe:animate-[progressStripes_1s_linear_infinite]"
               ),
-              children: showInsideLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 text-[10px] leading-none font-bold text-white", children: labelText })
+              children: showInsideLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xs px-2 leading-none font-bold text-white", children: labelText })
             }
           )
         }
@@ -4369,7 +4600,7 @@ var Ribbon = ({
       "span",
       {
         className: clsx.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
@@ -4382,7 +4613,7 @@ var Ribbon = ({
     "span",
     {
       className: clsx.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
@@ -4949,7 +5180,7 @@ var CommandPaletteGroup = react.forwardRef(
       {
         ref,
         className: clsx.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
@@ -4974,7 +5205,7 @@ var CommandPaletteItem = react.forwardRef(
         children: [
           Icon2 && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-4 w-4 shrink-0 text-gray-400", "aria-hidden": true }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children }),
-          shortcut && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 })
         ]
       }
     );
@@ -5014,7 +5245,7 @@ var CommandPaletteFooter = ({ className, children }) => /* @__PURE__ */ jsxRunti
   "div",
   {
     className: clsx.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
@@ -5139,11 +5370,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__ */ jsxRuntime.jsx(
+var Kbd2 = ({ children, className }) => /* @__PURE__ */ jsxRuntime.jsx(
   "kbd",
   {
     className: clsx.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
@@ -5233,7 +5464,7 @@ var HelpOverlayRoot = ({
               /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 "Press ",
-                /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "Esc" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Kbd2, { children: "Esc" }),
                 " to close"
               ] }) })
             ]
@@ -5244,7 +5475,7 @@ var HelpOverlayRoot = ({
   );
 };
 var HelpOverlaySection = ({ title, className, children }) => /* @__PURE__ */ jsxRuntime.jsxs("section", { className: clsx.clsx("space-y-2", className), children: [
-  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[11px] font-semibold tracking-wider text-gray-400 uppercase dark:text-gray-500", children: title }),
+  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xs font-semibold tracking-wider text-gray-400 uppercase dark:text-gray-500", children: title }),
   /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "divide-y divide-gray-100 dark:divide-gray-800", children })
 ] });
 var HelpOverlayShortcut = ({ keys, description, className }) => {
@@ -5255,10 +5486,10 @@ var HelpOverlayShortcut = ({ keys, description, className }) => {
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center gap-1", children: sequence.map((combo, idx) => {
       const parts = combo.split("+");
       return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-        idx > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-0.5 text-[10px] text-gray-400 uppercase dark:text-gray-500", children: "then" }),
+        idx > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xs px-0.5 text-gray-400 uppercase dark:text-gray-500", children: "then" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center gap-1", children: parts.map((part, pIdx) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
           pIdx > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "+" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: formatKey(part, isMac) })
+          /* @__PURE__ */ jsxRuntime.jsx(Kbd2, { children: formatKey(part, isMac) })
         ] }, `${part}-${pIdx}`)) })
       ] }, `${combo}-${idx}`);
     }) })
@@ -5518,13 +5749,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__ */ jsxRuntime.jsxs(
     "div",
     {
       className: clsx.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
       ),
@@ -5543,13 +5775,14 @@ var StepperInput = ({
             max,
             step,
             className: clsx.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__ */ jsxRuntime.jsx("span", { className: "flex items-center pr-1.5 text-xs text-gray-400 select-none dark:text-gray-500", children: unit }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col border-l border-gray-200 dark:border-gray-700", children: [
+        unit && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex w-7 shrink-0 flex-col border-l border-gray-200 dark:border-gray-700", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
@@ -5559,7 +5792,7 @@ var StepperInput = ({
               tabIndex: -1,
               "aria-label": "Increase",
               className: arrowBtn,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-3.5 w-3.5 text-gray-500 dark:text-gray-400", strokeWidth: 2.5 })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-3 w-3", strokeWidth: 2.25, "aria-hidden": true })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -5571,7 +5804,7 @@ var StepperInput = ({
               tabIndex: -1,
               "aria-label": "Decrease",
               className: clsx.clsx("border-t border-gray-200 dark:border-gray-700", arrowBtn),
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5 text-gray-500 dark:text-gray-400", strokeWidth: 2.5 })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3 w-3", strokeWidth: 2.25, "aria-hidden": true })
             }
           )
         ] })
@@ -6648,7 +6881,7 @@ var Calendar = ({ classNames, components, className, ...rest }) => {
           months_dropdown: "",
           years_dropdown: "",
           weekdays: clsx.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.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",
@@ -7004,7 +7237,7 @@ var OtpInput = ({
 }) => {
   const refs = react.useRef([]);
   react.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);
@@ -7366,30 +7599,84 @@ var StepperIndicator = ({
     children: Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-current" })
   }
 );
+var Meta = ({ meta }) => meta ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: meta }) : null;
 var Body5 = ({ item }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 pb-2 last:pb-0", children: [
   /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: item.title }),
   item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: item.description }),
-  item.time && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 font-mono text-[10px] text-gray-400 uppercase", children: item.time })
+  /* @__PURE__ */ jsxRuntime.jsx(Meta, { meta: item.meta }),
+  item.time && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("ol", { className: clsx.clsx("space-y-3", className), children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("ol", { "aria-labelledby": labelledBy, className: clsx.clsx("space-y-3", className), children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
       "li",
       {
         className: "rounded-xl border border-gray-200 bg-white p-3 dark:border-gray-800 dark:bg-gray-900",
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: item.title }),
-            item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: item.description })
+            item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: item.description }),
+            /* @__PURE__ */ jsxRuntime.jsx(Meta, { meta: item.meta })
           ] }),
-          item.time && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-mono text-[10px] text-gray-400 uppercase", children: item.time })
+          item.time && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xs shrink-0 font-mono text-gray-400 uppercase", children: item.time })
         ] })
       },
       item.id
     )) });
   }
+  if (variant === "alternating") {
+    return /* @__PURE__ */ jsxRuntime.jsx("ol", { "aria-labelledby": labelledBy, className: clsx.clsx("flex flex-col", className), children: items.map((item, i) => {
+      const isLast = i === items.length - 1;
+      const left = (startIndex + i) % 2 === 0;
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "col-start-1 row-start-1 flex flex-col items-center md:col-start-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(StepperIndicator, { icon: item.icon, tone: item.tone }),
+              !isLast && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "my-1 w-px flex-1 bg-gray-200 dark:bg-gray-700" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: clsx.clsx(
+                  "col-start-2 row-start-1",
+                  left ? "md:col-start-1" : "md:col-start-3",
+                  !isLast && "pb-6"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: item.title }),
+                  item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: item.description }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Meta, { meta: item.meta }),
+                  item.time && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xs mt-2 font-mono text-gray-400 uppercase md:hidden", children: item.time })
+                ] })
+              }
+            ),
+            item.time && /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: clsx.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__ */ jsxRuntime.jsx("ol", { className: clsx.clsx("flex flex-col", className), children: items.map((item, i) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { "aria-labelledby": labelledBy, className: clsx.clsx("flex flex-col", className), children: items.map((item, i) => {
     const isLast = i === items.length - 1;
     return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: clsx.clsx("flex", gap), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
@@ -7400,7 +7687,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__ */ jsxRuntime.jsx("h3", { id, className: "mb-4 flex md:justify-center", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.useId();
+  const runs = groupRuns(items);
+  if (runs.every((run) => !run.group)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(TimelineList, { items, variant, className });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("space-y-6", className), children: runs.map((run, i) => {
+    const headerId = `${baseId}-group-${i}`;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      run.group && /* @__PURE__ */ jsxRuntime.jsx(GroupHeader, { id: headerId, label: run.group, centred: variant === "alternating" }),
+      /* @__PURE__ */ jsxRuntime.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",
@@ -7417,6 +7747,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,
@@ -7428,7 +7760,7 @@ var MiniCalendar = ({
   const cells = react.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));
@@ -7485,7 +7817,7 @@ var MiniCalendar = ({
           WEEK_DAYS.map((d) => /* @__PURE__ */ jsxRuntime.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
@@ -7525,6 +7857,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: clsx.clsx("h-1.5 w-1.5 shrink-0 rounded-full", TONE_DOT[tone]) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx("truncate", compact && "max-sm:sr-only"), children: event.title })
+  ] });
+  const className = clsx.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__ */ jsxRuntime.jsx("div", { title: event.title, className, children: content });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      title: event.title,
+      onClick: () => onClick(event),
+      className: clsx.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] = react.useState(() => startOfMonth(defaultMonth ?? today));
+  const [openDay, setOpenDay] = react.useState(null);
+  const shown = startOfMonth(month ?? internalMonth);
+  const { days, byDay } = react.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: clsx.clsx(
+        "overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-4 py-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("h3", { "aria-live": "polite", className: "text-base font-semibold text-[var(--color-text-primary)]", children: [
+            MONTHS[shown.getMonth()],
+            " ",
+            shown.getFullYear()
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "secondary",
+                size: "sm",
+                onClick: () => goTo(startOfMonth(today)),
+                disabled: isTodayMonth,
+                className: "mr-1",
+                children: "Today"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => goTo(new Date(shown.getFullYear(), shown.getMonth() - 1, 1)),
+                "aria-label": "Previous month",
+                className: clsx.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__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4", "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => goTo(new Date(shown.getFullYear(), shown.getMonth() + 1, 1)),
+                "aria-label": "Next month",
+                className: clsx.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__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4", "aria-hidden": true })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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.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__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              role: "group",
+              "aria-label": label,
+              className: clsx.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__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": label,
+                    "aria-current": isToday ? "date" : void 0,
+                    onClick: () => onDayClick(day),
+                    className: clsx.clsx(
+                      numberClass,
+                      !isToday && "hover:bg-gray-100 dark:hover:bg-white/5",
+                      FOCUS_RING
+                    ),
+                    children: day.getDate()
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "time",
+                  {
+                    dateTime: key,
+                    "aria-current": isToday ? "date" : void 0,
+                    className: numberClass,
+                    children: day.getDate()
+                  }
+                ),
+                dayEvents.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("li", { className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(EventChip, { event, onClick: onEventClick, compact: true }) }, event.id)) }),
+                hidden > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                  Popover,
+                  {
+                    open: openDay === key,
+                    onOpenChange: (open) => setOpenDay(open ? key : null),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        Popover.Trigger,
+                        {
+                          "aria-label": `+${hidden} more on ${label}`,
+                          className: clsx.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__ */ jsxRuntime.jsx("span", { className: "max-sm:sr-only", children: " more" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs(Popover.Content, { "aria-label": `Events on ${label}`, width: "w-60", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-semibold text-[var(--color-text-primary)]", children: label }),
+                        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", children: dayEvents.map((event) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                          EventChip,
+                          {
+                            event,
+                            onClick: onEventClick && ((e) => {
+                              setOpenDay(null);
+                              onEventClick(e);
+                            })
+                          }
+                        ) }, event.id)) })
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            },
+            key
+          );
+        }) })
+      ]
+    }
+  );
+};
 var ColumnFilterDropdown = ({
   values,
   selected,
@@ -7589,6 +8190,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",
@@ -7605,6 +8216,7 @@ var ColumnHeader = ({
   filterSelected,
   onFilterToggle,
   onFilterClear,
+  density = "default",
   className
 }) => {
   const [open, setOpen] = react.useState(false);
@@ -7622,7 +8234,9 @@ var ColumnHeader = ({
     "th",
     {
       className: clsx.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
       ),
@@ -7649,11 +8263,11 @@ var ColumnHeader = ({
               "aria-label": "Filter column",
               className: clsx.clsx(
                 "flex items-center gap-1 rounded p-0.5 transition-colors hover:bg-gray-200 dark:hover:bg-white/10",
-                filterCount > 0 && "text-brand-500"
+                filterCount > 0 && "text-brand-600 dark:text-brand-400"
               ),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-3 w-3" }),
-                filterCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px]", children: filterCount })
+                filterCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xs", children: filterCount })
               ]
             }
           ),
@@ -7853,6 +8467,7 @@ var DataTable = ({
   onRetry,
   emptyTitle = "No results",
   emptyDescription,
+  density = "default",
   selectable = false,
   selection: selectionProp,
   defaultSelection,
@@ -8079,15 +8694,25 @@ var DataTable = ({
             renderRowAction && /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: "8%" } })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-gray-100 dark:border-gray-800", children: [
-            selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "bg-gray-50 px-4 py-3 dark:bg-gray-800", children: /* @__PURE__ */ jsxRuntime.jsx(
-              Checkbox,
+            selectable && /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
               {
-                "aria-label": "Select all rows",
-                checked: allVisibleSelected,
-                indeterminate: someVisibleSelected,
-                onChange: toggleAllVisible
+                className: clsx.clsx(
+                  "bg-gray-50 px-4",
+                  HEADER_CELL_PADDING[density],
+                  "dark:bg-gray-800"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Checkbox,
+                  {
+                    "aria-label": "Select all rows",
+                    checked: allVisibleSelected,
+                    indeterminate: someVisibleSelected,
+                    onChange: toggleAllVisible
+                  }
+                )
               }
-            ) }),
+            ),
             columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
               ColumnHeader,
               {
@@ -8100,11 +8725,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "th",
+              {
+                className: clsx.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__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-gray-100 dark:divide-gray-800", children: pageRows.map((row) => {
             const key = rowKey(row);
@@ -8117,7 +8753,7 @@ var DataTable = ({
                   isSelected && "bg-brand-50/40 dark:bg-brand-500/5"
                 ),
                 children: [
-                  selectable && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  selectable && /* @__PURE__ */ jsxRuntime.jsx("td", { className: clsx.clsx("px-4", BODY_CELL_PADDING[density]), children: /* @__PURE__ */ jsxRuntime.jsx(
                     Checkbox,
                     {
                       "aria-label": `Select row ${key}`,
@@ -8128,12 +8764,17 @@ var DataTable = ({
                   columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
                     "td",
                     {
-                      className: clsx.clsx("px-4 py-3.5 text-sm", ALIGN_CELL[col.align ?? "left"]),
+                      className: clsx.clsx(
+                        "px-4",
+                        BODY_CELL_PADDING[density],
+                        "text-sm",
+                        ALIGN_CELL[col.align ?? "left"]
+                      ),
                       children: col.render(row)
                     },
                     col.key
                   )),
-                  renderRowAction && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3.5 text-right", children: renderRowAction(row) })
+                  renderRowAction && /* @__PURE__ */ jsxRuntime.jsx("td", { className: clsx.clsx("px-4", BODY_CELL_PADDING[density], "text-right"), children: renderRowAction(row) })
                 ]
               },
               key
@@ -8245,7 +8886,7 @@ var IntegrationCard = ({
         status && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: STATUS_VARIANT[status], appearance: "light", children: STATUS_LABEL2[status] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 min-w-0 flex-1", children: [
-        category && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-[10px] tracking-wide text-gray-400 uppercase dark:text-gray-500", children: category }),
+        category && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xs font-mono tracking-wide text-gray-400 uppercase dark:text-gray-500", children: category }),
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-0.5 truncate text-sm font-semibold text-gray-900 dark:text-white", children: name }),
         description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 line-clamp-2 text-xs text-gray-600 dark:text-gray-400", children: description })
       ] }),
@@ -8417,7 +9058,7 @@ var SignInForm = ({
           {
             type: "button",
             onClick: onForgotPassword,
-            className: "text-brand-500 hover:text-brand-600 text-xs font-medium transition-colors",
+            className: "text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 text-xs font-medium transition-colors",
             children: forgotLabel
           }
         )
@@ -8760,7 +9401,7 @@ var TwoStepVerificationForm = ({
             type: "button",
             onClick: onResend,
             disabled: loading,
-            className: "text-brand-500 hover:text-brand-600 font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+            className: "text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
             children: resendLabel
           }
         )
@@ -8804,7 +9445,7 @@ var ColorSwatch = ({
         "span",
         {
           className: clsx.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
@@ -8876,7 +9517,7 @@ var PaletteCard = ({ meta, active = false, onClick, className }) => /* @__PURE__
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "flex items-center justify-between px-2.5 py-1.5",
+          className: "flex flex-1 items-center justify-between px-2.5 py-1.5",
           style: {
             backgroundColor: meta.preview.surface,
             borderTop: `1px solid ${meta.preview.border}`
@@ -8887,11 +9528,11 @@ var PaletteCard = ({ meta, active = false, onClick, className }) => /* @__PURE__
                 "span",
                 {
                   className: "block text-xs font-semibold",
-                  style: { color: active ? void 0 : "#6b7280" },
+                  style: { color: meta.preview.text ?? (active ? void 0 : "#6b7280") },
                   children: meta.label
                 }
               ),
-              meta.desc && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-[10px]", style: { color: "#9ca3af" }, children: meta.desc })
+              meta.desc && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xs block", style: { color: meta.preview.text ?? "#9ca3af" }, children: meta.desc })
             ] }),
             active && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-brand-500 flex h-4 w-4 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-2.5 w-2.5 text-white", "aria-hidden": true }) })
           ]
@@ -8941,12 +9582,12 @@ var OptionCard = ({
           {
             className: clsx.clsx(
               "text-xs font-semibold",
-              active ? "text-brand-500" : "text-gray-700 dark:text-gray-300"
+              active ? "text-brand-600 dark:text-brand-400" : "text-gray-700 dark:text-gray-300"
             ),
             children: label
           }
         ),
-        desc && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: desc })
+        desc && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xs text-gray-400 dark:text-gray-500", children: desc })
       ] }),
       active && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-2.5 w-2.5 text-white", "aria-hidden": true }) })
     ]
@@ -8977,7 +9618,220 @@ var OptionPicker = ({
     ))
   }
 );
-var SIZE = {
+
+// src/settings/appearance.ts
+var COSMOS_THEMES = [
+  {
+    id: "light",
+    label: "Light",
+    dark: false,
+    preview: { bg: "#f9fafb", surface: "#ffffff", border: "#e5e7eb", text: "#667085" }
+  },
+  {
+    id: "sand",
+    label: "Sand",
+    dark: false,
+    preview: { bg: "#f9f5eb", surface: "#fffcf7", border: "#e7dfd0", text: "#746656" }
+  },
+  {
+    id: "dark",
+    label: "Dark",
+    dark: true,
+    preview: { bg: "#0a0a0a", surface: "#141414", border: "#3d3d3d", text: "#a3a3a3" }
+  },
+  {
+    id: "deep-blue",
+    label: "Deep Blue",
+    dark: true,
+    preview: { bg: "#0c111d", surface: "#101828", border: "#344054", text: "#98a2b3" }
+  }
+];
+var COSMOS_ACCENTS = [
+  { id: "blue", label: "Blue", hex: "#465fff" },
+  { id: "indigo", label: "Indigo", hex: "#5963e9" },
+  { id: "violet", label: "Violet", hex: "#8745f1" },
+  { id: "purple", label: "Purple", hex: "#ad2ecf" },
+  { id: "rose", label: "Rose", hex: "#d4166d" },
+  { id: "teal", label: "Teal", hex: "#038378" },
+  { id: "cyan", label: "Cyan", hex: "#017f9d" },
+  { id: "graphite", label: "Graphite", hex: "#707580" },
+  { id: "red", label: "Red", hex: "#db192a" },
+  { id: "orange", label: "Orange", hex: "#c04f01" },
+  { 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, 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,
+  accent,
+  onThemeChange,
+  onAccentChange,
+  themeLabel = "Theme",
+  accentLabel = "Accent color",
+  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 = react.useId();
+  const accentHeadingId = react.useId();
+  const fontHeadingId = react.useId();
+  const textSizeHeadingId = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-labelledby": themeHeadingId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { id: themeHeadingId, className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: themeLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PalettePicker,
+        {
+          className: "mt-3",
+          palettes: themes,
+          value: theme,
+          cols: themeColumns,
+          onChange: (id) => onThemeChange(id)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-labelledby": accentHeadingId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { id: accentHeadingId, className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: accentLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AccentPicker,
+        {
+          className: "mt-3",
+          colors: accents,
+          value: accent,
+          onChange: (id) => onAccentChange(id),
+          cols: 6
+        }
+      )
+    ] }),
+    onFontChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-labelledby": fontHeadingId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { id: fontHeadingId, className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: fontLabel }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                style: { fontFamily: f.family },
+                className: "text-xl text-gray-900 dark:text-gray-100",
+                children: "Aa"
+              }
+            )
+          }))
+        }
+      )
+    ] }),
+    onTextSizeChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-labelledby": textSizeHeadingId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          id: textSizeHeadingId,
+          className: "text-sm font-medium text-gray-700 dark:text-gray-300",
+          children: textSizeLabel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                style: { fontSize: `${16 * t.scale}px` },
+                className: "text-gray-900 dark:text-gray-100",
+                children: "Aa"
+              }
+            )
+          }))
+        }
+      )
+    ] })
+  ] });
+};
+var SIZE_CLASS12 = {
+  sm: { box: "h-8 w-8", icon: "h-4 w-4" },
+  md: { box: "h-10 w-10", icon: "h-5 w-5" }
+};
+var AppearanceMenu = ({
+  label = "Appearance",
+  size = "md",
+  className,
+  ...settings
+}) => {
+  const { box, icon } = SIZE_CLASS12[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Popover.Trigger,
+      {
+        title: label,
+        "aria-label": label,
+        className: clsx.clsx(
+          "flex items-center justify-center rounded-lg border border-gray-200 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white",
+          box,
+          className
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { className: icon, "aria-hidden": true })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { align: "end", width: "w-96", "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-m-4 max-h-[calc(100dvh-6rem)] overflow-y-auto p-4", children: /* @__PURE__ */ jsxRuntime.jsx(AppearanceSettings, { themeColumns: 2, ...settings }) }) })
+  ] });
+};
+var SIZE2 = {
   sm: "text-base leading-relaxed",
   md: "text-lg leading-relaxed",
   lg: "text-2xl leading-snug"
@@ -8997,7 +9851,7 @@ var Blockquote = ({
   authorAvatar,
   className
 }) => {
-  const text = /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx.clsx("font-medium text-gray-700 italic dark:text-gray-200", SIZE[size]), children });
+  const text = /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx.clsx("font-medium text-gray-700 italic dark:text-gray-200", SIZE2[size]), children });
   if (variant === "icon") {
     return /* @__PURE__ */ jsxRuntime.jsxs("blockquote", { className: clsx.clsx(ALIGN[align], className), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -9079,21 +9933,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__ */ jsxRuntime.jsx(
-  "kbd",
-  {
-    className: clsx.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",
@@ -9155,6 +9994,8 @@ exports.ActiveFiltersBar = ActiveFiltersBar;
 exports.ActivityFeed = ActivityFeed;
 exports.AlertBanner = AlertBanner;
 exports.AnnouncementBar = AnnouncementBar;
+exports.AppearanceMenu = AppearanceMenu;
+exports.AppearanceSettings = AppearanceSettings;
 exports.AuthLayout = AuthLayout;
 exports.Avatar = Avatar;
 exports.AvatarUploader = AvatarUploader;
@@ -9165,6 +10006,10 @@ exports.Blockquote = Blockquote;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
+exports.COSMOS_ACCENTS = COSMOS_ACCENTS;
+exports.COSMOS_FONTS = COSMOS_FONTS;
+exports.COSMOS_TEXT_SIZES = COSMOS_TEXT_SIZES;
+exports.COSMOS_THEMES = COSMOS_THEMES;
 exports.Calendar = Calendar;
 exports.Card = Card2;
 exports.Carousel = Carousel;
@@ -9194,6 +10039,7 @@ exports.Dropzone = Dropzone;
 exports.EmptyState = EmptyState;
 exports.ErrorPage = ErrorPage;
 exports.ErrorState = ErrorState;
+exports.EventCalendar = EventCalendar;
 exports.Figure = Figure;
 exports.FileInput = FileInput;
 exports.FilterPills = FilterPills;
@@ -9207,7 +10053,7 @@ exports.IconBox = IconBox;
 exports.ImageGrid = ImageGrid;
 exports.Input = Input;
 exports.IntegrationCard = IntegrationCard;
-exports.Kbd = Kbd2;
+exports.Kbd = Kbd;
 exports.KpiCard = KpiCard;
 exports.Link = Link;
 exports.List = List2;
@@ -9226,7 +10072,6 @@ exports.OtpInput = OtpInput;
 exports.PageActionButton = PageActionButton;
 exports.PageActionIconButton = PageActionIconButton;
 exports.PageBreadcrumb = PageBreadcrumb;
-exports.PageCard = PageCard;
 exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
 exports.PaletteCard = PaletteCard;
@@ -9287,7 +10132,9 @@ exports.UserMenu = UserMenu;
 exports.VerticalNavigation = VerticalNavigation;
 exports.VideoEmbed = VideoEmbed;
 exports.ZoomBar = ZoomBar;
+exports.applyAppearance = applyAppearance;
 exports.defaultPasswordRules = defaultPasswordRules;
+exports.isDarkTheme = isDarkTheme;
 exports.useAutoRefresh = useAutoRefresh;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map