gridsmith-ui 0.6.3 → 0.6.5

package/dist/index.js

@@ -1,13 +1,13 @@
 import { Skeleton } from './chunk-QGBG72OB.js';
 export { Skeleton } from './chunk-QGBG72OB.js';
-import { Badge } from './chunk-TYU2LQGK.js';
-export { Badge } from './chunk-TYU2LQGK.js';
-import { useBreakpoint } from './chunk-DPF6776I.js';
-export { BreakpointWidthProvider, useBreakpoint } from './chunk-DPF6776I.js';
-import { Tooltip, useTextOverflow, usePosition, Slot } from './chunk-R5QGJURZ.js';
-export { Tooltip, useTextOverflow } from './chunk-R5QGJURZ.js';
+import { Badge } from './chunk-KXNJJKIV.js';
+export { Badge } from './chunk-KXNJJKIV.js';
+import { useBreakpoint } from './chunk-EKQHHP72.js';
+export { BreakpointWidthProvider, useBreakpoint } from './chunk-EKQHHP72.js';
+import { Tooltip, useTextOverflow, usePosition, Slot, useLatest } from './chunk-DDKCQVKO.js';
+export { Tooltip, useTextOverflow } from './chunk-DDKCQVKO.js';
 import { Icon } from './chunk-GX6O72IV.js';
-import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, FOCUS_RING, HAS_FOCUS_RING, FOCUS_WITHIN_RING } from './chunk-TTZSZNJ6.js';
+import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, FOCUS_RING, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, HAS_FOCUS_RING, FOCUS_WITHIN_RING } from './chunk-TTZSZNJ6.js';
 import { createContext, forwardRef, useContext, useState, useRef, useEffect, useCallback, useId, isValidElement, cloneElement, Fragment as Fragment$1, useMemo, Children, useLayoutEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -149,11 +149,13 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
     if (!isDivider(item) && !item.disabled) acc.push(i);
     return acc;
   }, []);
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (!open) setFocusedIdx(-1);
+  }
   useEffect(() => {
-    if (!open) {
-      setFocusedIdx(-1);
-      return;
-    }
+    if (!open) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") setOpen(false);
     };
@@ -534,13 +536,15 @@ function Dropdown({
     }
     setPos({ top, left, width });
   }, []);
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) setSearch("");
+    else setPositioned(false);
+  }
   useEffect(() => {
-    if (!open) {
-      setPositioned(false);
-      return;
-    }
+    if (!open) return;
     updatePos();
-    setSearch("");
     requestAnimationFrame(() => {
       if (searchRef.current) {
         searchRef.current.focus();
@@ -570,14 +574,14 @@ function Dropdown({
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
   const typeahead = useRef({ buffer: "", at: 0 });
-  const optionButtons = () => Array.from(menuRef.current?.querySelectorAll('[role="option"]') ?? []);
-  const focusOption = (idx) => {
-    const els = optionButtons();
-    if (els.length === 0) return;
-    els[(idx % els.length + els.length) % els.length].focus();
-  };
   useEffect(() => {
     if (!open) return;
+    const optionButtons = () => Array.from(menuRef.current?.querySelectorAll('[role="option"]') ?? []);
+    const focusOption = (idx) => {
+      const els = optionButtons();
+      if (els.length === 0) return;
+      els[(idx % els.length + els.length) % els.length].focus();
+    };
     const onKey = (e) => {
       const inMenu = menuRef.current?.contains(document.activeElement) || triggerRef.current === document.activeElement;
       if (!inMenu) return;
@@ -812,6 +816,7 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
   const [highlightIdx, setHighlightIdx] = useState(0);
   const inputRef = useRef(null);
   const triggerRef = useRef(null);
+  const [triggerWidth, setTriggerWidth] = useState(void 0);
   const listRef = useRef(null);
   const listboxId = useId();
   const pos = usePosition(triggerRef, listRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
@@ -820,9 +825,11 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
   );
   const selectedLabel = options.find((o) => o.value === value)?.label ?? "";
   const { ref: overflowRef, isTruncated: labelTruncated } = useTextOverflow({ lines: 1, content: selectedLabel, disabled: open });
-  useEffect(() => {
+  const [prevQuery, setPrevQuery] = useState(query);
+  if (query !== prevQuery) {
+    setPrevQuery(query);
     setHighlightIdx(0);
-  }, [query]);
+  }
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -870,6 +877,7 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
   }, [overflowRef]);
   const triggerContent = /* @__PURE__ */ jsxs("div", { ref: (node) => {
     triggerRef.current = node;
+    setTriggerWidth(node?.offsetWidth);
     if (typeof ref === "function") ref(node);
     else if (ref) ref.current = node;
   }, className: cn("relative", className), children: [
@@ -950,7 +958,7 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
             "rounded-[var(--ds-radius-md)]",
             "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]"
           ),
-          style: { top: pos.top, left: pos.left, width: triggerRef.current?.offsetWidth },
+          style: { top: pos.top, left: pos.left, width: triggerWidth },
           children: /* @__PURE__ */ jsx("div", { style: { padding: "var(--ds-space-1)" }, children: loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-ds-4", children: /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "Loading options" }) }) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-ds-2 py-ds-3 text-sm text-[var(--ds-text-muted)] text-center", children: "No results" }) : filtered.map((opt, i) => /* @__PURE__ */ jsxs(
             "button",
             {
@@ -1491,7 +1499,7 @@ function getMonthGrid(year, month, weekStartsOn = 0) {
   const firstOfMonth = new Date(year, month, 1);
   const gridStart = startOfWeek(firstOfMonth, weekStartsOn);
   const weeks = [];
-  let current = new Date(gridStart);
+  const current = new Date(gridStart);
   for (let w = 0; w < 6; w++) {
     const week = [];
     for (let d = 0; d < 7; d++) {
@@ -2292,11 +2300,11 @@ function NumberInput({
   const [focused, setFocused] = useState(false);
   const [draft, setDraft] = useState(String(value));
   const decimals = allowDecimals ?? step % 1 !== 0;
-  useEffect(() => {
-    if (!focused) {
-      setDraft(String(value));
-    }
-  }, [value, focused]);
+  const [prevSync, setPrevSync] = useState({ value, focused });
+  if (value !== prevSync.value || focused !== prevSync.focused) {
+    setPrevSync({ value, focused });
+    if (!focused) setDraft(String(value));
+  }
   const clamp = useCallback(
     (v) => Math.min(max, Math.max(min, v)),
     [min, max]
@@ -2397,7 +2405,7 @@ function NumberInput({
             onMouseDown: (e) => {
               e.preventDefault();
               inputRef.current?.focus();
-              !disabled && !atMin && startRepeat(decrement);
+              if (!disabled && !atMin) startRepeat(decrement);
             },
             onMouseUp: stopRepeat,
             onMouseLeave: stopRepeat,
@@ -2453,7 +2461,7 @@ function NumberInput({
             onMouseDown: (e) => {
               e.preventDefault();
               inputRef.current?.focus();
-              !disabled && !atMax && startRepeat(increment);
+              if (!disabled && !atMax) startRepeat(increment);
             },
             onMouseUp: stopRepeat,
             onMouseLeave: stopRepeat,
@@ -3012,11 +3020,12 @@ function ColorPicker({
   const [hexInput, setHexInput] = useState(value);
   const satLightRef = useRef(null);
   const draggingRef = useRef(false);
-  useEffect(() => {
-    const parsed = hexToHsl(value);
-    setHsl(parsed);
+  const [prevValue, setPrevValue] = useState(value);
+  if (value !== prevValue) {
+    setPrevValue(value);
+    setHsl(hexToHsl(value));
     setHexInput(value);
-  }, [value]);
+  }
   const emitChange = useCallback(
     (newHsl) => {
       setHsl(newHsl);
@@ -3250,17 +3259,15 @@ function useFormContext() {
 function FormWrapper({ onSubmit, validationMode = "onSubmit", children, className, ref }) {
   const [errors, setErrors] = useState({});
   const [submitted, setSubmitted] = useState(false);
-  const errorsRef = useRef(errors);
-  errorsRef.current = errors;
+  const errorsRef = useLatest(errors);
   const pendingSubmit = useRef(false);
-  const onSubmitRef = useRef(onSubmit);
-  onSubmitRef.current = onSubmit;
+  const onSubmitRef = useLatest(onSubmit);
   useEffect(() => {
     if (pendingSubmit.current && submitted) {
       pendingSubmit.current = false;
       onSubmitRef.current(errorsRef.current);
     }
-  }, [submitted, errors]);
+  }, [submitted, errors, errorsRef, onSubmitRef]);
   const setError = useCallback((field, message) => {
     setErrors((prev) => ({ ...prev, [field]: message }));
   }, []);
@@ -5818,9 +5825,12 @@ function MonthDropdown({
     offset: 8,
     flip: true
   });
-  useEffect(() => {
+  const browseSyncKey = open ? currentDate.getTime() : null;
+  const [prevBrowseSyncKey, setPrevBrowseSyncKey] = useState(browseSyncKey);
+  if (browseSyncKey !== prevBrowseSyncKey) {
+    setPrevBrowseSyncKey(browseSyncKey);
     if (open) setBrowseYear(currentDate.getFullYear());
-  }, [open, currentDate]);
+  }
   useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
@@ -5938,9 +5948,12 @@ function YearDropdown({
   });
   const currentYear = currentDate.getFullYear();
   const [rangeStart, setRangeStart] = useState(() => currentYear - 4);
-  useEffect(() => {
+  const rangeSyncKey = open ? currentYear : null;
+  const [prevRangeSyncKey, setPrevRangeSyncKey] = useState(rangeSyncKey);
+  if (rangeSyncKey !== prevRangeSyncKey) {
+    setPrevRangeSyncKey(rangeSyncKey);
     if (open) setRangeStart(currentYear - 4);
-  }, [open, currentYear]);
+  }
   useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
@@ -6662,6 +6675,13 @@ function TruncLabel2({ children }) {
   if (!isTruncated) return label;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: label });
 }
+function allDescendantIds(node) {
+  const ids = [node.id];
+  if (node.children) {
+    for (const child of node.children) ids.push(...allDescendantIds(child));
+  }
+  return ids;
+}
 function TreeView({
   nodes,
   selectable,
@@ -6704,13 +6724,6 @@ function TreeView({
     },
     [selectable, multiSelect, onSelect]
   );
-  const allDescendantIds = useCallback((node) => {
-    const ids = [node.id];
-    if (node.children) {
-      for (const child of node.children) ids.push(...allDescendantIds(child));
-    }
-    return ids;
-  }, []);
   const handleCheck = useCallback(
     (node) => {
       if (!checkable) return;
@@ -6726,7 +6739,7 @@ function TreeView({
         return next;
       });
     },
-    [checkable, allDescendantIds, onCheck]
+    [checkable, onCheck]
   );
   const getCheckState = useCallback(
     (node) => {
@@ -6737,7 +6750,7 @@ function TreeView({
       if (checkedCount > 0) return "indeterminate";
       return "unchecked";
     },
-    [checked, allDescendantIds]
+    [checked]
   );
   const flatNodes = useCallback(() => {
     const result = [];
@@ -6833,7 +6846,9 @@ function TreeNodeRow({
         className: cn(
           "flex items-center gap-ds-2 py-ds-1.5 px-ds-2 rounded-[var(--ds-radius-md)] cursor-pointer transition-colors",
           "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-          isSelected ? "bg-[var(--ds-tab-active-bg)] text-[var(--ds-accent-primary)] font-medium border-l-2 border-[var(--ds-accent-primary)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)] hover:text-[var(--ds-text-primary)]",
+          // Active style comes from the theme's --ds-tree-* tokens (rail / tint;
+          // pill degrades to tint). The rail is drawn on the selected row only.
+          isSelected ? "bg-[var(--ds-tree-active-bg)] text-[var(--ds-tree-active-text)] font-medium border-l-[length:var(--ds-tree-active-rail)] border-[var(--ds-accent-primary)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)] hover:text-[var(--ds-text-primary)]",
           node.disabled && "opacity-disabled pointer-events-none"
         ),
         style: { paddingLeft: `calc(var(--ds-space-5) * ${depth} + var(--ds-space-2))` },
@@ -6860,7 +6875,7 @@ function TreeNodeRow({
                 {
                   name: "chevron-right",
                   size: 14,
-                  className: cn("text-[var(--ds-text-muted)] transition-transform", isExpanded && "rotate-90")
+                  className: cn(isSelected ? "text-[var(--ds-tree-active-muted)]" : "text-[var(--ds-text-muted)]", "transition-transform", isExpanded && "rotate-90")
                 }
               )
             }
@@ -6875,7 +6890,7 @@ function TreeNodeRow({
               }
             }
           ),
-          node.icon && /* @__PURE__ */ jsx(Icon, { name: node.icon, size: 16, className: cn("shrink-0", isSelected ? "text-[var(--ds-accent-primary)]" : "text-[var(--ds-text-muted)]") }),
+          node.icon && /* @__PURE__ */ jsx(Icon, { name: node.icon, size: 16, className: cn("shrink-0", isSelected ? "text-[var(--ds-tree-active-text)]" : "text-[var(--ds-text-muted)]") }),
           /* @__PURE__ */ jsx(TruncLabel2, { children: node.label })
         ]
       }
@@ -7363,6 +7378,19 @@ function useTabsCtx() {
   if (!ctx) throw new Error("Tabs.List / Tabs.Trigger / Tabs.Content must be used inside <Tabs>");
   return ctx;
 }
+function trackClasses(orientation) {
+  if (orientation === "vertical") {
+    return cn(
+      "flex flex-col gap-ds-0.5 min-w-[var(--ds-tab-rail-width)]",
+      "border-r-[length:var(--ds-nav-v-track-border)] border-[var(--ds-border-default)]",
+      "pr-[var(--ds-nav-v-track-padding)]"
+    );
+  }
+  return cn(
+    "flex gap-[var(--ds-nav-h-track-gap)]",
+    "border-b-[length:var(--ds-nav-h-track-border)] border-[var(--ds-border-default)]"
+  );
+}
 function getTabsFromDOM(el) {
   const tablist = el.closest('[role="tablist"]');
   if (!tablist) return [];
@@ -7410,7 +7438,6 @@ function TabButton({
   icon,
   disabled,
   orientation,
-  variant,
   activeTab,
   onTabChange,
   fullWidth,
@@ -7423,10 +7450,11 @@ function TabButton({
   const isActive = activeTab === id;
   const tabId = `ds-tab-${id}`;
   const panelId = hasPanel === false ? void 0 : `ds-tabpanel-${id}`;
+  const badgeBg = orientation === "vertical" ? "bg-[var(--ds-nav-v-badge-bg)]" : "bg-[var(--ds-nav-h-badge-bg)]";
   const countBadge = count !== void 0 ? /* @__PURE__ */ jsx("span", { className: cn(
     orientation === "vertical" ? "ml-ds-2" : "",
     "px-ds-1.5 py-ds-0.5 text-xs rounded-[var(--ds-radius-sm)]",
-    variant === "pill" && isActive ? "bg-[var(--ds-bg-canvas)]/20 text-[var(--ds-text-on-primary)]" : isActive ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "bg-[var(--ds-bg-emphasis)] text-[var(--ds-text-muted)]"
+    isActive ? cn(badgeBg, "text-[var(--ds-text-on-primary)]") : "bg-[var(--ds-bg-emphasis)] text-[var(--ds-text-muted)]"
   ), children: count }) : null;
   if (orientation === "vertical") {
     const btn2 = /* @__PURE__ */ jsxs(
@@ -7443,10 +7471,12 @@ function TabButton({
         className: cn(
           "flex items-center justify-between px-ds-3 py-ds-2 text-sm font-medium text-left",
           disabled ? "cursor-not-allowed opacity-disabled" : "cursor-pointer",
-          "rounded-[var(--ds-radius-sm)]",
+          "rounded-[var(--ds-nav-v-item-radius)]",
           "transition-colors duration-[var(--ds-transition-speed)]",
           "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-          variant === "pill" ? isActive ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)]" : isActive ? "text-[var(--ds-accent-primary)] bg-[var(--ds-tab-active-bg)] border-l-[length:var(--ds-border-width-thicker)] border-[var(--ds-accent-primary)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)]",
+          // The rail is drawn on the active item only (today's behaviour; a
+          // transparent placeholder on every item is a future layout tweak).
+          isActive ? "bg-[var(--ds-nav-v-active-bg)] text-[var(--ds-nav-v-active-text)] border-l-[length:var(--ds-nav-v-active-rail)] border-[var(--ds-accent-primary)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)]",
           className
         ),
         children: [
@@ -7479,13 +7509,11 @@ function TabButton({
         "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
         fullWidth && "flex-1",
         truncate && "flex-1 min-w-0 flex items-center",
-        variant === "pill" ? cn(
-          "rounded-[var(--ds-radius-md)]",
-          isActive ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)]"
-        ) : isActive ? "text-[var(--ds-text-primary)] border-b-[length:var(--ds-border-width)] border-[var(--ds-accent-primary)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]",
+        "rounded-[var(--ds-nav-h-item-radius)]",
+        isActive ? "bg-[var(--ds-nav-h-active-bg)] text-[var(--ds-nav-h-active-text)] border-[var(--ds-accent-primary)]" : "text-[var(--ds-nav-h-inactive-text)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-nav-h-hover-bg)]",
         className
       ),
-      style: variant === "underline" && orientation === "horizontal" && isActive ? { borderBottomWidth: "calc(var(--ds-border-width) * 3)", marginBottom: "calc(var(--ds-border-width) * -1)" } : void 0,
+      style: isActive ? { borderBottomWidth: "var(--ds-nav-h-indicator)", marginBottom: "calc(var(--ds-nav-h-track-border) * -1)" } : void 0,
       children: truncate ? /* @__PURE__ */ jsxs(Fragment, { children: [
         icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: 16, className: "shrink-0" }),
         /* @__PURE__ */ jsx("span", { ref: truncRef, className: "truncate min-w-0 flex-1", children: label }),
@@ -7501,18 +7529,14 @@ function TabButton({
   return btn;
 }
 function TabsList({ children, className }) {
-  const { orientation, variant, fullWidth, overflow } = useTabsCtx();
+  const { orientation, fullWidth, overflow } = useTabsCtx();
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsx(
       "div",
       {
         role: "tablist",
         "aria-orientation": "vertical",
-        className: cn(
-          "flex flex-col gap-ds-0.5 min-w-[var(--ds-tab-rail-width)]",
-          variant === "underline" && "border-r-[length:var(--ds-border-width)] border-[var(--ds-border-default)] pr-ds-1",
-          className
-        ),
+        className: cn(trackClasses("vertical"), className),
         children
       }
     );
@@ -7522,10 +7546,9 @@ function TabsList({ children, className }) {
     {
       role: "tablist",
       className: cn(
-        "flex gap-0 max-w-full",
+        trackClasses("horizontal"),
+        "max-w-full",
         overflow === "hidden" ? "overflow-hidden" : overflow === "truncate" ? "overflow-hidden" : "overflow-x-auto overflow-y-hidden",
-        variant === "underline" && "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-        variant === "pill" && "gap-ds-1 p-ds-0.5 bg-[var(--ds-bg-muted)] rounded-[var(--ds-radius-lg)]",
         fullWidth && "w-full",
         className
       ),
@@ -7534,7 +7557,7 @@ function TabsList({ children, className }) {
   );
 }
 function TabsTrigger({ value, children, count, icon, disabled, truncate, className }) {
-  const { activeTab, onTabChange, orientation, variant, fullWidth, overflow } = useTabsCtx();
+  const { activeTab, onTabChange, orientation, fullWidth, overflow } = useTabsCtx();
   return /* @__PURE__ */ jsx(
     TabButton,
     {
@@ -7545,7 +7568,6 @@ function TabsTrigger({ value, children, count, icon, disabled, truncate, classNa
       disabled,
       truncate: overflow === "truncate" || truncate,
       orientation,
-      variant,
       activeTab,
       onTabChange,
       fullWidth,
@@ -7574,7 +7596,6 @@ function TabsRoot(props) {
     activeTab,
     onTabChange,
     orientation = "horizontal",
-    variant = "underline",
     fullWidth = false,
     overflow = "scroll",
     className
@@ -7601,11 +7622,7 @@ function TabsRoot(props) {
         {
           role: "tablist",
           "aria-orientation": "vertical",
-          className: cn(
-            "flex flex-col gap-ds-0.5 min-w-[var(--ds-tab-rail-width)]",
-            variant === "underline" && "border-r-[length:var(--ds-border-width)] border-[var(--ds-border-default)] pr-ds-1",
-            className
-          ),
+          className: cn(trackClasses("vertical"), className),
           children: tabs.map((tab, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
             tab.group && tab.group !== tabs[i - 1]?.group && /* @__PURE__ */ jsx(
               "span",
@@ -7618,7 +7635,7 @@ function TabsRoot(props) {
                 children: tab.group
               }
             ),
-            /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, variant, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) })
+            /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) })
           ] }, tab.id))
         }
       );
@@ -7629,18 +7646,16 @@ function TabsRoot(props) {
       {
         role: "tablist",
         className: cn(
-          "flex gap-0",
+          trackClasses("horizontal"),
           effectiveOverflow === "scroll" ? "overflow-x-auto overflow-y-hidden" : "overflow-hidden",
-          variant === "underline" && "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-          variant === "pill" && "gap-ds-1 p-ds-0.5 bg-[var(--ds-bg-muted)] rounded-[var(--ds-radius-lg)]",
           fullWidth && "w-full",
           className
         ),
-        children: tabs.map((tab) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, variant, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) }, tab.id))
+        children: tabs.map((tab) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) }, tab.id))
       }
     );
   }
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation: effectiveOrientation, variant, fullWidth, overflow }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation: effectiveOrientation, fullWidth, overflow }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
 }
 var Tabs = Object.assign(TabsRoot, {
   List: TabsList,
@@ -7845,6 +7860,11 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
 function Popover({ open, onOpenChange, trigger, children, side = "bottom", align = "center", width, className, container }) {
   const triggerRef = useRef(null);
   const floatingRef = useRef(null);
+  const [triggerWidth, setTriggerWidth] = useState(void 0);
+  const setTriggerNode = useCallback((node) => {
+    triggerRef.current = node;
+    setTriggerWidth(node?.offsetWidth);
+  }, []);
   const pos = usePosition(triggerRef, floatingRef, open, { side, align, offset: 8, flip: true });
   useEffect(() => {
     if (!open) return;
@@ -7870,8 +7890,11 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
     /* @__PURE__ */ jsx(
       Slot,
       {
-        ref: triggerRef,
-        onClick: () => onOpenChange(!open),
+        ref: setTriggerNode,
+        onClick: () => {
+          setTriggerWidth(triggerRef.current?.offsetWidth);
+          onOpenChange(!open);
+        },
         children: trigger
       }
     ),
@@ -7891,7 +7914,7 @@ function Popover({ open, onOpenChange, trigger, children, side = "bottom", align
           style: {
             top: pos.top,
             left: pos.left,
-            width: width === "trigger" ? triggerRef.current?.offsetWidth : width === "auto" ? void 0 : width
+            width: width === "trigger" ? triggerWidth : width === "auto" ? void 0 : width
           },
           children
         }
@@ -8507,10 +8530,7 @@ function CompactFlyout({
   onMouseEnter,
   onMouseLeave
 }) {
-  const [pos, setPos] = useState(() => computeCompactFlyoutPos(anchorEl, items.length));
-  useLayoutEffect(() => {
-    setPos(computeCompactFlyoutPos(anchorEl, items.length));
-  }, [anchorEl, items.length]);
+  const pos = useMemo(() => computeCompactFlyoutPos(anchorEl, items.length), [anchorEl, items.length]);
   useEffect(() => {
     function handler(e) {
       if (e.key === "Escape") onClose();
@@ -8549,7 +8569,7 @@ function CompactFlyout({
                 },
                 className: cn(
                   "flex items-center gap-ds-2 px-ds-2 py-ds-1.5 text-xs rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer",
-                  child.active ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)] font-medium" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
+                  child.active ? "bg-[var(--ds-sidebar-active-bg)] text-[var(--ds-sidebar-active-accent)] font-medium" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
                 ),
                 children: [
                   child.icon && /* @__PURE__ */ jsx(Icon, { name: child.icon, size: 14 }),
@@ -8655,7 +8675,10 @@ function SidebarNav({
           "flex items-center gap-ds-2 transition-colors cursor-pointer",
           isRoot ? cn(rootPy, rootText, isMinimal ? "rounded-[var(--ds-radius-full)]" : "rounded-[var(--ds-radius-md)]") : cn(childPy, "text-xs rounded-[var(--ds-radius-sm)]"),
           isRoot ? collapsed ? "justify-center px-0" : "px-ds-3" : "px-ds-2",
-          item.active ? isRoot ? isMinimal ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-text)] font-medium" : "bg-sidebar-accent-subtle text-[var(--ds-sidebar-text)] font-medium border-l-2 border-[var(--ds-sidebar-accent)]" : "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)] font-medium" : isRoot ? isMinimal ? "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)] border-l-2 border-transparent" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
+          // Active style comes from the theme's --ds-sidebar-active-* tokens
+          // (rail / tint / pill). The rail token is 0px for minimal sidebars,
+          // so the transparent placeholder on inactive roots is harmless there.
+          item.active ? isRoot ? "bg-[var(--ds-sidebar-active-bg)] text-[var(--ds-sidebar-active-text)] font-medium border-l-[length:var(--ds-sidebar-active-rail)] border-[var(--ds-sidebar-active-accent)]" : "bg-[var(--ds-sidebar-active-bg)] text-[var(--ds-sidebar-active-accent)] font-medium" : isRoot ? "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)] border-l-[length:var(--ds-sidebar-active-rail)] border-transparent" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
         ),
         children: [
           item.icon && /* @__PURE__ */ jsx(
@@ -8663,7 +8686,7 @@ function SidebarNav({
             {
               name: item.icon,
               size: isRoot ? rootIconSize : childIconSize,
-              className: cn("shrink-0", item.active && "text-[var(--ds-sidebar-accent)]")
+              className: cn("shrink-0", item.active && "text-[var(--ds-sidebar-active-accent)]")
             }
           ),
           !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -8735,7 +8758,10 @@ function SidebarNav({
             "flex items-center gap-ds-2 w-full text-left transition-colors cursor-pointer",
             isRoot ? cn(rootPy, rootText, isMinimal ? "rounded-[var(--ds-radius-full)]" : "rounded-[var(--ds-radius-md)]") : cn(childPy, "text-xs rounded-[var(--ds-radius-sm)]"),
             isRoot ? collapsed ? "justify-center px-0" : "px-ds-3" : "px-ds-2",
-            item.active || childActive ? isRoot ? isMinimal ? "text-[var(--ds-sidebar-text)] font-medium" : "text-[var(--ds-sidebar-text)] font-medium border-l-2 border-transparent" : "text-[var(--ds-sidebar-text)] font-medium" : isRoot ? isMinimal ? "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)] border-l-2 border-transparent" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
+            // This row has no fill, so its label, icon and chevron keep the plain
+            // sidebar tokens: --ds-sidebar-active-accent is on-primary white under
+            // `pill` and would vanish here. Only filled elements read the active set.
+            item.active || childActive ? isRoot ? "text-[var(--ds-sidebar-text)] font-medium border-l-[length:var(--ds-sidebar-active-rail)] border-transparent" : "text-[var(--ds-sidebar-text)] font-medium" : isRoot ? "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)] border-l-[length:var(--ds-sidebar-active-rail)] border-transparent" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
           ),
           children: [
             item.icon && /* @__PURE__ */ jsx(
@@ -8900,7 +8926,7 @@ function CompactNavItem({
   expanded,
   onToggleExpand
 }) {
-  const triggerRef = useRef(null);
+  const [triggerEl, setTriggerEl] = useState(null);
   const handleMouseEnter = useCallback(() => {
     onCancelClose();
     if (hasChildren && !isOpen) onOpen(flyoutKey);
@@ -8919,14 +8945,16 @@ function CompactNavItem({
     /* @__PURE__ */ jsxs(
       "button",
       {
-        ref: triggerRef,
+        ref: setTriggerEl,
         onMouseEnter: !mobile && hasChildren ? handleMouseEnter : void 0,
         onMouseLeave: !mobile && hasChildren && isOpen ? handleMouseLeave : void 0,
         onClick: handleClick,
         "aria-expanded": hasChildren ? mobile ? expanded : isOpen : void 0,
         className: cn(
           "relative flex flex-col items-center justify-center gap-[3px] w-full py-ds-3 px-ds-1 rounded-[var(--ds-radius-md)] transition-colors cursor-pointer",
-          item.active || childActive ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)]" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
+          // Compact tiles have no edge to stroke: they read the fill and text
+          // tokens only, never --ds-sidebar-active-rail.
+          item.active || childActive ? "bg-[var(--ds-sidebar-active-bg)] text-[var(--ds-sidebar-active-accent)]" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
         ),
         children: [
           item.icon && /* @__PURE__ */ jsx(
@@ -8934,7 +8962,7 @@ function CompactNavItem({
             {
               name: item.icon,
               size: 20,
-              className: cn((item.active || childActive) && "text-[var(--ds-sidebar-accent)]")
+              className: cn((item.active || childActive) && "text-[var(--ds-sidebar-active-accent)]")
             }
           ),
           /* @__PURE__ */ jsx(TruncLabel3, { className: "text-[clamp(9px,var(--ds-font-size-2xs),12px)] leading-tight max-w-full", side: "right", container: portalContainer ?? void 0, children: item.label }),
@@ -8945,7 +8973,7 @@ function CompactNavItem({
               size: 10,
               className: cn(
                 "absolute right-1 top-1/2 -translate-y-1/2 transition-transform",
-                item.active || childActive ? "text-[var(--ds-sidebar-accent)]" : "text-[var(--ds-sidebar-text-muted)]",
+                item.active || childActive ? "text-[var(--ds-sidebar-active-accent)]" : "text-[var(--ds-sidebar-text-muted)]",
                 expanded && "rotate-180"
               )
             }
@@ -8953,12 +8981,12 @@ function CompactNavItem({
         ]
       }
     ),
-    !mobile && isOpen && hasChildren && item.children && triggerRef.current && /* @__PURE__ */ jsx(
+    !mobile && isOpen && hasChildren && item.children && triggerEl && /* @__PURE__ */ jsx(
       CompactFlyout,
       {
         parentLabel: item.label,
         items: item.children,
-        anchorEl: triggerRef.current,
+        anchorEl: triggerEl,
         portalContainer,
         onItemClick,
         onClose,
@@ -8972,7 +9000,7 @@ function CompactNavItem({
         onClick: () => onItemClick?.(child, ci),
         className: cn(
           "flex items-center gap-ds-2 px-ds-3 py-ds-1.5 text-[length:var(--ds-font-size-xs)] rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer w-full",
-          child.active ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)] font-medium" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
+          child.active ? "bg-[var(--ds-sidebar-active-bg)] text-[var(--ds-sidebar-active-accent)] font-medium" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
         ),
         children: [
           child.icon && /* @__PURE__ */ jsx(Icon, { name: child.icon, size: 14, className: "shrink-0" }),
@@ -9948,6 +9976,187 @@ function Dock({
     }
   );
 }
+function Sheet({ open, onClose, title, children, footer, snapPoints = [0.5, 0.92], container, flush }) {
+  const titleId = useId();
+  const panelRef = useRef(null);
+  const [mounted, setMounted] = useState(open);
+  const [snapIdx, setSnapIdx] = useState(0);
+  const [dragOffset, setDragOffset] = useState(0);
+  const [dragging, setDragging] = useState(false);
+  const dragStartY = useRef(0);
+  const startHeight = useRef(0);
+  const onCloseRef = useLatest(onClose);
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) {
+      setMounted(true);
+      setSnapIdx(0);
+      setDragOffset(0);
+    }
+  }
+  const viewportHeight = useCallback(
+    () => container instanceof HTMLElement ? container.clientHeight : window.innerHeight,
+    [container]
+  );
+  function handleTransitionEnd() {
+    if (!open) setMounted(false);
+  }
+  useReturnFocus(open);
+  useEffect(() => {
+    if (!open || !mounted) return;
+    const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
+    return () => cancelAnimationFrame(raf);
+  }, [open, mounted]);
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onCloseRef.current();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    if (!container) lockBodyScroll();
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      if (!container) unlockBodyScroll();
+    };
+  }, [open, container, onCloseRef]);
+  const handlePointerDown = useCallback((e) => {
+    setDragging(true);
+    dragStartY.current = e.clientY;
+    startHeight.current = (snapPoints[snapIdx] ?? snapPoints[0]) * viewportHeight();
+    setDragOffset(0);
+    e.target.setPointerCapture(e.pointerId);
+  }, [snapIdx, snapPoints, viewportHeight]);
+  const handlePointerMove = useCallback((e) => {
+    if (!dragging) return;
+    const delta = dragStartY.current - e.clientY;
+    setDragOffset(delta);
+  }, [dragging]);
+  const handlePointerUp = useCallback(() => {
+    if (!dragging) return;
+    setDragging(false);
+    const currentHeightPx = startHeight.current + dragOffset;
+    const currentFraction = currentHeightPx / viewportHeight();
+    if (currentFraction < snapPoints[0] * 0.6) {
+      onClose();
+      setDragOffset(0);
+      return;
+    }
+    let bestIdx = 0;
+    let bestDist = Math.abs(currentFraction - snapPoints[0]);
+    for (let i = 1; i < snapPoints.length; i++) {
+      const dist = Math.abs(currentFraction - snapPoints[i]);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestIdx = i;
+      }
+    }
+    setSnapIdx(bestIdx);
+    setDragOffset(0);
+  }, [dragging, dragOffset, snapPoints, onClose, viewportHeight]);
+  if (!mounted) return null;
+  const baseHeight = (snapPoints[snapIdx] ?? snapPoints[0]) * 100;
+  const heightUnit = container ? "%" : "vh";
+  const dragPx = dragging ? dragOffset : 0;
+  const positionClass = container ? "absolute" : "fixed";
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          `${positionClass} inset-0 z-[var(--ds-z-modal)] transition-opacity duration-[var(--ds-transition-speed)]`,
+          open ? "pointer-events-auto" : "pointer-events-none"
+        ),
+        onTransitionEnd: handleTransitionEnd,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 bg-black/50 transition-opacity duration-[var(--ds-transition-speed)]",
+                open ? "opacity-100" : "opacity-0"
+              ),
+              onClick: onClose
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: panelRef,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": title ? titleId : void 0,
+              "data-ds-sheet": "",
+              className: cn(
+                `${positionClass} bottom-0 left-0 right-0 z-10 flex flex-col`,
+                "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
+                GLASS_OVERLAY,
+                "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+                "rounded-t-[var(--ds-radius-xl)]",
+                !dragging && "transition-[transform,height] duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
+                open ? "translate-y-0" : "translate-y-full"
+              ),
+              style: {
+                containerType: "inline-size",
+                height: dragPx ? `calc(${baseHeight}${heightUnit} + ${dragPx}px)` : `${baseHeight}${heightUnit}`
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex justify-center pt-ds-2 pb-ds-1 cursor-grab active:cursor-grabbing touch-none",
+                    onPointerDown: handlePointerDown,
+                    onPointerMove: handlePointerMove,
+                    onPointerUp: handlePointerUp,
+                    onPointerCancel: handlePointerUp,
+                    children: /* @__PURE__ */ jsx("div", { className: "w-10 h-1 rounded-[var(--ds-radius-full)] bg-[var(--ds-border-default)]" })
+                  }
+                ),
+                title && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center justify-between shrink-0 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+                    style: { padding: "var(--ds-space-2) var(--ds-space-5)" },
+                    children: [
+                      /* @__PURE__ */ jsx("h2", { id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: onClose,
+                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
+                          className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+                          "aria-label": "Close",
+                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex-1 overflow-y-auto",
+                    style: flush ? void 0 : { padding: "var(--ds-space-5)" },
+                    children
+                  }
+                ),
+                footer && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "shrink-0 flex items-center justify-end gap-ds-2 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+                    style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
+                    children: footer
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    container ?? document.body
+  );
+}
 var slideClasses = {
   right: {
     panel: "top-0 right-0 h-full",
@@ -9970,19 +10179,23 @@ var borderByPosition = {
   left: "border-r-[length:var(--ds-border-width)] border-r-[var(--ds-border-default)]",
   bottom: "border-t-[length:var(--ds-border-width)] border-t-[var(--ds-border-default)]"
 };
-function Drawer({ open, onClose, position = "right", width = "400px", title, children, footer, container, flush, lightBackdrop, topOffset }) {
+function Drawer(props) {
+  const { position = "right", mobile, snapPoints, open, onClose, title, children, footer, container, flush } = props;
+  const isPhone = useBreakpoint("sm");
+  const mobileMode = mobile ?? (position === "left" ? "panel" : "sheet");
+  if (isPhone && mobileMode === "sheet") {
+    return /* @__PURE__ */ jsx(Sheet, { open, onClose, title, footer, container, flush, snapPoints, children });
+  }
+  return /* @__PURE__ */ jsx(DrawerPanel, { ...props });
+}
+function DrawerPanel({ open, onClose, position = "right", width = "400px", title, children, footer, container, flush, lightBackdrop, topOffset }) {
   const titleId = useId();
   const { ref: titleOverflowRef, isTruncated: titleTruncated } = useTextOverflow({ lines: 1 });
   const isMobile = useBreakpoint("sm");
   const panelRef = useRef(null);
-  const [mounted, setMounted] = useState(false);
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-  useEffect(() => {
-    if (open) {
-      setMounted(true);
-    }
-  }, [open]);
+  const [mounted, setMounted] = useState(open);
+  const onCloseRef = useLatest(onClose);
+  if (open && !mounted) setMounted(true);
   function handleTransitionEnd() {
     if (!open) setMounted(false);
   }
@@ -9997,7 +10210,7 @@ function Drawer({ open, onClose, position = "right", width = "400px", title, chi
       document.removeEventListener("keydown", onKeyDown);
       if (!container) unlockBodyScroll();
     };
-  }, [open, container]);
+  }, [open, container, onCloseRef]);
   useReturnFocus(open);
   useEffect(() => {
     if (!open || !mounted) return;
@@ -10132,13 +10345,13 @@ var AppShell = forwardRef(function AppShell2({
   const hasMobileMenu = mobileMenu != null;
   const hasMobileNav = mobileNav != null;
   const showMobileDrawer = hasMobileMenu && !(isSmallMobile && hasMobileNav);
-  const shellRef = useRef(null);
+  const [shellEl, setShellEl] = useState(null);
   return /* @__PURE__ */ jsx(
     AppShellContext,
     {
       value: { hasSidebar, hasMobileMenu, hasMobileNav, sidebarOpen, setSidebarOpen, isMobile, isTablet },
       children: /* @__PURE__ */ jsxs("div", { ref: (el) => {
-        shellRef.current = el;
+        setShellEl(el);
         if (typeof ref === "function") ref(el);
         else if (ref) ref.current = el;
       }, className: cn("relative h-screen flex flex-col bg-[var(--ds-bg-canvas)] overflow-hidden", className), children: [
@@ -10170,7 +10383,7 @@ var AppShell = forwardRef(function AppShell2({
             onClose: () => setSidebarOpen(false),
             position: "left",
             width: mobileMenuWidth ?? "var(--ds-drawer-width)",
-            container: shellRef.current ?? void 0,
+            container: shellEl ?? void 0,
             flush: mobileMenuFlush,
             lightBackdrop: mobileMenuLightBackdrop,
             topOffset: layout !== "stacked" && navbar != null ? "var(--ds-navbar-height)" : void 0,
@@ -10182,10 +10395,13 @@ var AppShell = forwardRef(function AppShell2({
     }
   );
 });
-var NavbarTypeContext = createContext("default");
+function resolveNavItemType(type) {
+  return type === "default" ? "tint" : type;
+}
+var NavbarTypeContext = createContext("tint");
 var NavItem = forwardRef(function NavItem2({ label, icon, active = false, href, onClick, type: typeProp, className, children }, ref) {
   const contextType = useContext(NavbarTypeContext);
-  const type = typeProp ?? contextType;
+  const type = resolveNavItemType(typeProp ?? contextType);
   const baseClasses = cn(
     "inline-flex items-center gap-ds-2 cursor-pointer select-none",
     "transition-colors duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
@@ -10217,6 +10433,11 @@ var NavItem = forwardRef(function NavItem2({ label, icon, active = false, href,
 });
 function getTypeClasses(type, active) {
   switch (type) {
+    case "pill":
+      return cn(
+        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
+        active ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
+      );
     case "underline":
       return cn(
         "px-ds-2 py-ds-2 relative",
@@ -10227,7 +10448,7 @@ function getTypeClasses(type, active) {
         "px-ds-2 py-ds-1",
         active ? "text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]"
       );
-    default:
+    case "tint":
       return cn(
         "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
         active ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
@@ -10261,7 +10482,7 @@ var Navbar = forwardRef(function Navbar2({
   actions,
   userMenu,
   variant = "default",
-  type = "default",
+  type: typeProp = "tint",
   align = "left",
   size,
   position = "flush",
@@ -10275,6 +10496,7 @@ var Navbar = forwardRef(function Navbar2({
   const showHamburger = appShell?.isMobile && appShell.hasMobileMenu && !(isSmallPhone && appShell.hasMobileNav) || !!onMenuClick;
   const handleHamburger = () => onMenuClick ? onMenuClick() : appShell?.setSidebarOpen(!appShell.sidebarOpen);
   const hideNavLinks = appShell?.isMobile && (appShell.hasMobileMenu || appShell.hasMobileNav);
+  const type = resolveNavItemType(typeProp);
   const isMinimal = type === "minimal";
   const isFloating = position === "floating";
   const resolvedSize = size ?? (variant === "compact" ? "sm" : "md");
@@ -10381,7 +10603,7 @@ function NavMenu({
   label,
   items,
   active = false,
-  type = "default",
+  type = "tint",
   onItemClick,
   className
 }) {
@@ -10421,6 +10643,7 @@ function NavMenu({
   );
   const isUnderline = type === "underline";
   const isMinimal = type === "minimal";
+  const isPill = type === "pill";
   const triggerClasses = cn(
     "inline-flex items-center gap-ds-1 cursor-pointer transition-colors whitespace-nowrap",
     "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
@@ -10430,9 +10653,14 @@ function NavMenu({
     ) : isMinimal ? cn(
       "px-ds-2 py-ds-1 text-sm",
       hasActiveChild ? "text-[var(--ds-text-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)]"
+    ) : isPill ? cn(
+      "px-ds-3 py-ds-1.5 text-sm rounded-[var(--ds-radius-md)]",
+      hasActiveChild ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
     ) : cn(
+      // tint (and the deprecated `default` alias) — the same soft accent fill
+      // NavItem uses, so a menu trigger and a link read as one row (decision 30).
       "px-ds-3 py-ds-1.5 text-sm rounded-[var(--ds-radius-md)]",
-      hasActiveChild ? "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
+      hasActiveChild ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
     ),
     className
   );
@@ -10519,7 +10747,9 @@ function NavMenuItemRow({
       },
       className: cn(
         "flex items-center gap-ds-2 mx-ds-1 px-ds-2 py-ds-1.5 rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer",
-        item.active ? "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
+        // The active row takes the accent tint like an active NavItem; it marks
+        // the current page, not a hover.
+        item.active ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
       ),
       children: [
         item.icon && /* @__PURE__ */ jsx(
@@ -10562,7 +10792,7 @@ function NavMenuGroup({
     ))
   ] });
 }
-function MobileHeaderMenu({ items, type = "default", onItemClick, className }) {
+function MobileHeaderMenu({ items, type = "tint", onItemClick, className }) {
   return /* @__PURE__ */ jsx("nav", { className: cn("flex flex-col", className), style: { padding: "var(--ds-space-4)" }, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", style: { gap: type === "underline" ? 0 : "var(--ds-space-1)" }, children: items.map((item, i) => /* @__PURE__ */ jsx(
     MobileMenuItem,
     {
@@ -10619,6 +10849,23 @@ function MobileMenuItem({
       }
     );
   }
+  if (type === "pill") {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick,
+        className: cn(
+          "flex items-center gap-ds-3 px-ds-3 py-ds-2.5 text-sm rounded-[var(--ds-radius-md)] cursor-pointer w-full text-left",
+          "transition-colors duration-[var(--ds-transition-speed)]",
+          item.active ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
+        ),
+        children: [
+          item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 18, className: "shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: item.label })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -10649,8 +10896,7 @@ function Dialog({ open, onClose, title, description, children, footer, variant =
   const overlayRef = useRef(null);
   const dialogRef = useRef(null);
   const triggerRef = useRef(null);
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
+  const onCloseRef = useLatest(onClose);
   const trapFocus = useCallback((e) => {
     if (e.key !== "Tab" || !dialogRef.current) return;
     const focusable = dialogRef.current.querySelectorAll(FOCUSABLE);
@@ -10686,7 +10932,7 @@ function Dialog({ open, onClose, title, description, children, footer, variant =
     return () => {
       document.removeEventListener("keydown", handler);
     };
-  }, [open, trapFocus, alert]);
+  }, [open, trapFocus, alert, onCloseRef]);
   useEffect(() => {
     if (!open) return;
     lockBodyScroll();
@@ -10798,16 +11044,22 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
     groups.get(g).push(cmd);
   }
   const flatFiltered = filtered;
-  useEffect(() => {
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
     if (open) {
       setQuery("");
       setSelectedIdx(0);
-      requestAnimationFrame(() => inputRef.current?.focus());
     }
-  }, [open]);
-  useEffect(() => {
+  }
+  const [prevQuery, setPrevQuery] = useState(query);
+  if (query !== prevQuery) {
+    setPrevQuery(query);
     setSelectedIdx(0);
-  }, [query]);
+  }
+  useEffect(() => {
+    if (open) requestAnimationFrame(() => inputRef.current?.focus());
+  }, [open]);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -10823,23 +11075,20 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
     },
     [onOpenChange]
   );
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        setSelectedIdx((prev) => Math.min(prev + 1, flatFiltered.length - 1));
-        listRef.current?.children[Math.min(selectedIdx + 1, flatFiltered.length - 1)]?.scrollIntoView({ block: "nearest" });
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault();
-        setSelectedIdx((prev) => Math.max(prev - 1, 0));
-        listRef.current?.children[Math.max(selectedIdx - 1, 0)]?.scrollIntoView({ block: "nearest" });
-      } else if (e.key === "Enter" && flatFiltered[selectedIdx]) {
-        e.preventDefault();
-        handleSelect(flatFiltered[selectedIdx]);
-      }
-    },
-    [flatFiltered, selectedIdx, handleSelect]
-  );
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIdx((prev) => Math.min(prev + 1, flatFiltered.length - 1));
+      listRef.current?.children[Math.min(selectedIdx + 1, flatFiltered.length - 1)]?.scrollIntoView({ block: "nearest" });
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIdx((prev) => Math.max(prev - 1, 0));
+      listRef.current?.children[Math.max(selectedIdx - 1, 0)]?.scrollIntoView({ block: "nearest" });
+    } else if (e.key === "Enter" && flatFiltered[selectedIdx]) {
+      e.preventDefault();
+      handleSelect(flatFiltered[selectedIdx]);
+    }
+  };
   if (!open) return null;
   let flatIdx = 0;
   return createPortal(
@@ -11132,179 +11381,6 @@ function ContextMenu({ items, children, className, ref, container }) {
     }
   );
 }
-function Sheet({ open, onClose, title, children, footer, snapPoints = [0.5, 0.92] }) {
-  const titleId = useId();
-  const panelRef = useRef(null);
-  const [mounted, setMounted] = useState(false);
-  const [snapIdx, setSnapIdx] = useState(0);
-  const [dragOffset, setDragOffset] = useState(0);
-  const isDragging = useRef(false);
-  const dragStartY = useRef(0);
-  const startHeight = useRef(0);
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-  useEffect(() => {
-    if (open) {
-      setMounted(true);
-      setSnapIdx(0);
-      setDragOffset(0);
-    }
-  }, [open]);
-  function handleTransitionEnd() {
-    if (!open) setMounted(false);
-  }
-  useReturnFocus(open);
-  useEffect(() => {
-    if (!open || !mounted) return;
-    const raf = requestAnimationFrame(() => focusInitial(panelRef.current));
-    return () => cancelAnimationFrame(raf);
-  }, [open, mounted]);
-  useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") onCloseRef.current();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    lockBodyScroll();
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-      unlockBodyScroll();
-    };
-  }, [open]);
-  const handlePointerDown = useCallback((e) => {
-    isDragging.current = true;
-    dragStartY.current = e.clientY;
-    startHeight.current = (snapPoints[snapIdx] ?? snapPoints[0]) * window.innerHeight;
-    setDragOffset(0);
-    e.target.setPointerCapture(e.pointerId);
-  }, [snapIdx, snapPoints]);
-  const handlePointerMove = useCallback((e) => {
-    if (!isDragging.current) return;
-    const delta = dragStartY.current - e.clientY;
-    setDragOffset(delta);
-  }, []);
-  const handlePointerUp = useCallback(() => {
-    if (!isDragging.current) return;
-    isDragging.current = false;
-    const currentHeightPx = startHeight.current + dragOffset;
-    const currentFraction = currentHeightPx / window.innerHeight;
-    if (currentFraction < snapPoints[0] * 0.6) {
-      onClose();
-      setDragOffset(0);
-      return;
-    }
-    let bestIdx = 0;
-    let bestDist = Math.abs(currentFraction - snapPoints[0]);
-    for (let i = 1; i < snapPoints.length; i++) {
-      const dist = Math.abs(currentFraction - snapPoints[i]);
-      if (dist < bestDist) {
-        bestDist = dist;
-        bestIdx = i;
-      }
-    }
-    setSnapIdx(bestIdx);
-    setDragOffset(0);
-  }, [dragOffset, snapPoints, onClose]);
-  if (!mounted) return null;
-  const baseHeightVh = (snapPoints[snapIdx] ?? snapPoints[0]) * 100;
-  const dragPx = isDragging.current ? dragOffset : 0;
-  return createPortal(
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "fixed inset-0 z-[var(--ds-z-modal)] transition-opacity duration-[var(--ds-transition-speed)]",
-          open ? "pointer-events-auto" : "pointer-events-none"
-        ),
-        onTransitionEnd: handleTransitionEnd,
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "absolute inset-0 bg-black/50 transition-opacity duration-[var(--ds-transition-speed)]",
-                open ? "opacity-100" : "opacity-0"
-              ),
-              onClick: onClose
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: panelRef,
-              role: "dialog",
-              "aria-modal": "true",
-              "aria-labelledby": title ? titleId : void 0,
-              className: cn(
-                "fixed bottom-0 left-0 right-0 z-10 flex flex-col",
-                "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
-                GLASS_OVERLAY,
-                "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-                "rounded-t-[var(--ds-radius-xl)]",
-                !isDragging.current && "transition-[transform,height] duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
-                open ? "translate-y-0" : "translate-y-full"
-              ),
-              style: {
-                containerType: "inline-size",
-                height: dragPx ? `calc(${baseHeightVh}vh + ${dragPx}px)` : `${baseHeightVh}vh`
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "flex justify-center pt-ds-2 pb-ds-1 cursor-grab active:cursor-grabbing touch-none",
-                    onPointerDown: handlePointerDown,
-                    onPointerMove: handlePointerMove,
-                    onPointerUp: handlePointerUp,
-                    onPointerCancel: handlePointerUp,
-                    children: /* @__PURE__ */ jsx("div", { className: "w-10 h-1 rounded-[var(--ds-radius-full)] bg-[var(--ds-border-default)]" })
-                  }
-                ),
-                title && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "flex items-center justify-between shrink-0 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                    style: { padding: "var(--ds-space-2) var(--ds-space-5)" },
-                    children: [
-                      /* @__PURE__ */ jsx("h2", { id: titleId, className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] truncate", children: title }),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          onClick: onClose,
-                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
-                          className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
-                          "aria-label": "Close",
-                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "flex-1 overflow-y-auto",
-                    style: { padding: "var(--ds-space-5)" },
-                    children
-                  }
-                ),
-                footer && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "shrink-0 flex items-center justify-end gap-ds-2 border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                    style: { padding: "var(--ds-space-3) var(--ds-space-5)" },
-                    children: footer
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    document.body
-  );
-}
 function TruncTitle({ children }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
   const el = /* @__PURE__ */ jsx("span", { ref, className: "truncate", children });
@@ -11335,7 +11411,10 @@ function NotificationCenter({
   const [internalFilter, setInternalFilter] = useState("all");
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const setOpen = isControlled ? (v) => onOpenChange?.(v) : setInternalOpen;
+  const setOpen = useCallback((v) => {
+    if (isControlled) onOpenChange?.(v);
+    else setInternalOpen(v);
+  }, [isControlled, onOpenChange]);
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "end", offset: 8, flip: true });
@@ -11359,7 +11438,7 @@ function NotificationCenter({
       document.removeEventListener("keydown", onKey);
       document.removeEventListener("mousedown", onClick);
     };
-  }, [open]);
+  }, [open, setOpen]);
   const grouped = groupByDate(filteredNotifications);
   if (variant === "page") {
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), children: [
@@ -11606,11 +11685,13 @@ function Tour({ steps, open, onClose, onComplete, container }) {
     if (el) setRect(el.getBoundingClientRect());
     else setRect(null);
   }, [step]);
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (!open) setCurrent(0);
+  }
   useEffect(() => {
-    if (!open) {
-      setCurrent(0);
-      return;
-    }
+    if (!open) return;
     measureTarget();
     window.addEventListener("resize", measureTarget);
     window.addEventListener("scroll", measureTarget, true);
@@ -11619,16 +11700,6 @@ function Tour({ steps, open, onClose, onComplete, container }) {
       window.removeEventListener("scroll", measureTarget, true);
     };
   }, [open, current, measureTarget]);
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e) => {
-      if (e.key === "Escape") onClose();
-      else if (e.key === "ArrowRight") handleNext();
-      else if (e.key === "ArrowLeft") handlePrev();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  });
   const handleNext = useCallback(() => {
     if (current < steps.length - 1) setCurrent((c) => c + 1);
     else {
@@ -11639,6 +11710,16 @@ function Tour({ steps, open, onClose, onComplete, container }) {
   const handlePrev = useCallback(() => {
     if (current > 0) setCurrent((c) => c - 1);
   }, [current]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+      else if (e.key === "ArrowRight") handleNext();
+      else if (e.key === "ArrowLeft") handlePrev();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose, handleNext, handlePrev]);
   if (!open || !step) return null;
   const padding = 8;
   const spotlightRadius = 8;
@@ -11942,15 +12023,14 @@ function Toast({ variant = "default", message, visible, onDismiss, duration = 3e
   const timerRef = useRef(void 0);
   const startedAtRef = useRef(0);
   const remainingRef = useRef(duration);
-  const onDismissRef = useRef(onDismiss);
-  onDismissRef.current = onDismiss;
+  const onDismissRef = useLatest(onDismiss);
   const startTimer = useCallback((ms) => {
     const delay = ms ?? remainingRef.current;
     remainingRef.current = delay;
     startedAtRef.current = Date.now();
     if (!Number.isFinite(delay) || delay <= 0) return;
     timerRef.current = setTimeout(() => onDismissRef.current(), delay);
-  }, []);
+  }, [onDismissRef]);
   const clearTimer = useCallback(() => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);