@refraction-ui/react 0.20.1 → 0.22.0

package/dist/index.cjs

@@ -1751,7 +1751,14 @@ function AuthGuard({
 }
 
 // ../badge/dist/index.js
-var statusVariants = ["success", "warning", "destructive"];
+var statusVariants = [
+  "success",
+  "warning",
+  "destructive",
+  "positive",
+  "caution",
+  "done"
+];
 function createBadge(props = {}) {
   const { variant = "default" } = props;
   const ariaProps = {};
@@ -1766,7 +1773,7 @@ function createBadge(props = {}) {
   };
 }
 var badgeVariants = cva({
-  base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  base: "inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   variants: {
     variant: {
       default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
@@ -1775,7 +1782,12 @@ var badgeVariants = cva({
       destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80 font-semibold",
       outline: "text-foreground",
       success: "border-transparent bg-success text-success-foreground shadow hover:bg-success/80 font-semibold",
-      warning: "border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80 font-semibold"
+      warning: "border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80 font-semibold",
+      // Second brand accent + extended status roles (issue #485).
+      tertiary: "border-transparent bg-tertiary text-tertiary-foreground shadow hover:bg-tertiary/80 font-semibold",
+      positive: "border-transparent bg-positive text-positive-foreground shadow hover:bg-positive/80 font-semibold",
+      caution: "border-transparent bg-caution text-caution-foreground shadow hover:bg-caution/80 font-semibold",
+      done: "border-transparent bg-done text-info-foreground shadow hover:bg-done/80 font-semibold"
     },
     size: {
       sm: "px-2 py-0 text-[10px]",
@@ -2060,7 +2072,7 @@ var buttonTokens = {
   }
 };
 var buttonVariants = cva({
-  base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  base: "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   variants: {
     variant: {
       default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
@@ -2071,15 +2083,21 @@ var buttonVariants = cva({
       destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
       outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
       secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+      // Soft tinted brand fill — lower-emphasis primary action (issue #485).
+      soft: "bg-primary-soft text-primary-soft-foreground shadow-sm hover:bg-primary-soft/80",
+      // Second brand accent (issue #485).
+      tertiary: "bg-tertiary text-tertiary-foreground shadow-sm hover:bg-tertiary/90",
       ghost: "hover:bg-accent hover:text-accent-foreground",
       link: "text-primary underline-offset-4 hover:underline"
     },
     size: {
       xs: "h-7 rounded px-2 text-xs",
       sm: "h-8 rounded-md px-3 text-xs",
-      default: "h-9 px-4 py-2",
-      lg: "h-10 rounded-md px-8",
-      icon: "h-9 w-9"
+      default: "h-9 rounded-md px-4 py-2 text-sm",
+      lg: "h-10 rounded-md px-8 text-sm",
+      icon: "h-9 w-9 rounded-md text-sm",
+      "icon-sm": "h-8 w-8 rounded-md text-xs",
+      "icon-xs": "h-7 w-7 rounded text-xs"
     }
   },
   defaultVariants: {
@@ -12427,11 +12445,11 @@ function createInput(props = {}) {
   };
 }
 var inputVariants = cva({
-  base: "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  base: "flex w-full rounded-md border border-input bg-transparent px-3 py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
   variants: {
     size: {
       sm: "h-8 text-xs",
-      default: "h-9",
+      default: "h-9 text-sm",
       lg: "h-10 text-base"
     },
     validationState: {
@@ -14578,6 +14596,23 @@ function createTabs(props = {}) {
     idPrefix
   };
 }
+function getNextTabIndex(current, key, count, orientation = "horizontal") {
+  if (count === 0) return null;
+  const prev = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+  const next = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+  switch (key) {
+    case next:
+      return current < 0 ? 0 : (current + 1) % count;
+    case prev:
+      return current < 0 ? count - 1 : (current - 1 + count) % count;
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return null;
+  }
+}
 var tabsListVariants = cva({
   base: "inline-flex max-w-full overflow-x-auto items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground"
 });
@@ -14634,17 +14669,48 @@ var Tabs = React52__namespace.forwardRef(
   }
 );
 var TabsList = React52__namespace.forwardRef(
-  function TabsList2({ className, ...props }, ref) {
+  function TabsList2({ className, onKeyDown, ...props }, forwardedRef) {
     const { orientation } = useTabsContext();
+    const listRef = React52__namespace.useRef(null);
+    const ref = React52__namespace.useCallback(
+      (node) => {
+        listRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    React52__namespace.useEffect(() => {
+      const tabs = enabledTabs(listRef.current);
+      const stop = tabs.find((tab) => tab.getAttribute("aria-selected") === "true") ?? tabs[0];
+      for (const tab of tabs) tab.tabIndex = tab === stop ? 0 : -1;
+    });
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      const tabs = enabledTabs(listRef.current);
+      const current = tabs.indexOf(e.target);
+      if (current === -1) return;
+      const next = getNextTabIndex(current, e.key, tabs.length, orientation);
+      if (next === null) return;
+      e.preventDefault();
+      tabs[next].focus();
+      tabs[next].click();
+    };
     return React52__namespace.createElement("div", {
       ref,
       role: "tablist",
       "aria-orientation": orientation,
       className: cn(tabsListVariants(), className),
+      onKeyDown: handleKeyDown,
       ...props
     });
   }
 );
+function enabledTabs(list) {
+  if (!list) return [];
+  return Array.from(list.querySelectorAll('[role="tab"]:not([disabled])'));
+}
 var TabsTrigger = React52__namespace.forwardRef(
   function TabsTrigger2({ value, className, onClick, onKeyDown, children, ...props }, ref) {
     const { value: activeValue, onValueChange, orientation, idPrefix } = useTabsContext();
@@ -14736,11 +14802,11 @@ function createTextarea(props = {}) {
   };
 }
 var textareaVariants = cva({
-  base: "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  base: "flex w-full rounded-md border border-input bg-transparent px-3 py-2 shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
   variants: {
     size: {
       sm: "min-h-[40px] text-xs",
-      default: "min-h-[60px]",
+      default: "min-h-[60px] text-sm",
       lg: "min-h-[80px] text-base"
     }
   },
@@ -16277,7 +16343,7 @@ var badgeItemVariants = cva({
   }
 });
 var progressBarVariants = cva({
-  base: "h-2 w-full overflow-hidden rounded-full bg-secondary",
+  base: "w-full overflow-hidden rounded-full bg-secondary",
   variants: {
     size: {
       sm: "h-1",
@@ -16496,6 +16562,8 @@ var slideViewerProgressBarVariants = cva({
 var slideTypeBadgeVariants = cva({
   base: "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
   variants: {
+    // Slide-type accents are a content-category palette (lesson/quiz/exercise…),
+    // not status tones — deliberately not routed through the theme tokens.
     type: {
       lesson: "bg-blue-100 text-blue-800",
       quiz: "bg-purple-100 text-purple-800",
@@ -18200,6 +18268,9 @@ var diffViewerTokens = {
     sidebarBg: { variable: "--rfr-diff-sidebar-bg", fallback: "hsl(var(--muted))" },
     headerBg: { variable: "--rfr-diff-header-bg", fallback: "hsl(var(--muted))" },
     border: { variable: "--rfr-diff-border", fallback: "hsl(var(--border))" },
+    // Diff add/del colors are syntax semantics (like code highlighting), not
+    // theme status tones — deliberately NOT routed through the success/
+    // destructive tokens. The --rfr-diff-* variables are the theming seam.
     addBg: { variable: "--rfr-diff-add-bg", fallback: "rgba(46, 160, 67, 0.15)" },
     delBg: { variable: "--rfr-diff-del-bg", fallback: "rgba(248, 81, 73, 0.15)" },
     addFg: { variable: "--rfr-diff-add-fg", fallback: "#3fb950" },
@@ -18807,8 +18878,16 @@ var cardTokens = {
   }
 };
 var cardVariants = cva({
-  base: "rounded-lg border bg-card text-card-foreground shadow",
+  base: "rounded-lg border shadow",
   variants: {
+    variant: {
+      // Default — unchanged surface (bg-card + border via the global token).
+      default: "bg-card text-card-foreground",
+      // Lower-emphasis container on the subtle surface token (issue #485).
+      subtle: "bg-surface-subtle text-card-foreground",
+      // Tinted second-accent card (issue #485).
+      tertiary: "border-transparent bg-tertiary-soft text-tertiary-soft-foreground"
+    },
     padding: {
       none: "",
       default: "p-6",
@@ -18816,6 +18895,7 @@ var cardVariants = cva({
     }
   },
   defaultVariants: {
+    variant: "default",
     padding: "none"
   }
 });
@@ -18845,9 +18925,9 @@ var cardFooterVariants = cva({
   base: "flex items-center p-6 pt-0"
 });
 var Card = React52__namespace.forwardRef(
-  function Card2({ className, asChild = false, ...props }, ref) {
+  function Card2({ className, variant, padding, asChild = false, ...props }, ref) {
     const api = createCard();
-    const classes = cn(cardVariants(), className);
+    const classes = cn(cardVariants({ variant, padding }), className);
     if (asChild) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Slot,
@@ -18887,10 +18967,10 @@ var CardHeader = React52__namespace.forwardRef(
   }
 );
 var CardTitle = React52__namespace.forwardRef(
-  function CardTitle2({ className, ...props }, ref) {
+  function CardTitle2({ className, as: Heading = "h3", ...props }, ref) {
     const api = createCardTitle();
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "h3",
+      Heading,
       {
         ref,
         className: cn(cardTitleVariants(), className),
@@ -20449,13 +20529,12 @@ function createSelect(props = {}) {
   } = props;
   const isInteractive = !disabled;
   const selectedOption = options.find((o) => o.value === value);
-  const triggerId = generateId("select-trigger");
-  const contentId = generateId("select-content");
+  const triggerId = props.ids?.trigger ?? generateId("select-trigger");
+  const contentId = props.ids?.content ?? generateId("select-content");
   const triggerAriaProps = {
     role: "combobox",
     "aria-expanded": open,
-    "aria-controls": contentId,
-    "aria-labelledby": triggerId
+    "aria-controls": contentId
   };
   if (disabled) {
     triggerAriaProps["aria-disabled"] = true;
@@ -20537,7 +20616,7 @@ var selectTokens = {
   }
 };
 var selectTriggerVariants = cva({
-  base: "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  base: "flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
   variants: {
     size: {
       sm: "h-8 text-xs",
@@ -20550,10 +20629,10 @@ var selectTriggerVariants = cva({
   }
 });
 var selectContentVariants = cva({
-  base: "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95",
+  base: "absolute left-0 top-full z-50 mt-1 max-h-96 w-full min-w-[8rem] overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95",
   variants: {
     position: {
-      popper: "translate-y-1",
+      popper: "",
       "item-aligned": ""
     }
   },
@@ -20573,6 +20652,8 @@ var selectItemVariants = cva({
     selected: "false"
   }
 });
+var selectRootClass = "relative";
+var selectValueClass = "truncate text-left data-[placeholder]:text-muted-foreground";
 var SelectContext = React52__namespace.createContext({
   __isDefault: true,
   value: void 0,
@@ -20585,7 +20666,10 @@ var SelectContext = React52__namespace.createContext({
   disabled: false,
   placeholder: "Select an option",
   triggerId: "",
-  contentId: ""
+  contentId: "",
+  labels: /* @__PURE__ */ new Map(),
+  registerLabel: () => {
+  }
 });
 function useSelectContext(part) {
   const ctx = React52__namespace.useContext(SelectContext);
@@ -20597,22 +20681,70 @@ function useSelectContext(part) {
   }
   return ctx;
 }
+function collectItemLabels(node, into) {
+  React52__namespace.Children.forEach(node, (child) => {
+    if (!React52__namespace.isValidElement(child)) return;
+    if (child.type === SelectItem && typeof child.props.value === "string") {
+      into.set(child.props.value, child.props.children);
+      return;
+    }
+    collectItemLabels(child.props.children, into);
+  });
+  return into;
+}
 function Select({
-  value,
+  value: controlledValue,
+  defaultValue,
   onValueChange,
   disabled = false,
   children,
-  placeholder = "Select an option"
+  placeholder = "Select an option",
+  className
 }) {
   const [open, setOpen] = React52__namespace.useState(false);
-  const api = createSelect({ value, disabled, open, placeholder });
+  const [uncontrolledValue, setUncontrolledValue] = React52__namespace.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const rootRef = React52__namespace.useRef(null);
+  const baseId = React52__namespace.useId();
+  const triggerId = `${baseId}-trigger`;
+  const contentId = `${baseId}-content`;
+  const [registered, setRegistered] = React52__namespace.useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const registerLabel = React52__namespace.useCallback((itemValue, label) => {
+    setRegistered((prev) => {
+      if (prev.get(itemValue) === label) return prev;
+      const next = new Map(prev);
+      next.set(itemValue, label);
+      return next;
+    });
+  }, []);
+  const labels = React52__namespace.useMemo(
+    () => collectItemLabels(children, new Map(registered)),
+    [children, registered]
+  );
+  React52__namespace.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (rootRef.current && !rootRef.current.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+  const handleValueChange = React52__namespace.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectContext.Provider,
     {
       value: {
         value,
-        onValueChange: onValueChange ?? (() => {
-        }),
+        onValueChange: handleValueChange,
         open,
         setOpen: (v2) => {
           if (!disabled) setOpen(v2);
@@ -20620,17 +20752,19 @@ function Select({
         options: [],
         disabled,
         placeholder,
-        triggerId: api.ids.trigger,
-        contentId: api.ids.content
+        triggerId,
+        contentId,
+        labels,
+        registerLabel
       },
-      children
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rootRef, className: cn(selectRootClass, className), "data-slot": "select", children })
     }
   );
 }
 var SelectTrigger = React52__namespace.forwardRef(
   function SelectTrigger2({ className, children, size = "default", ...props }, ref) {
     const { open, setOpen, disabled, triggerId, contentId } = useSelectContext("SelectTrigger");
-    const api = createSelect({ disabled, open });
+    const api = createSelect({ disabled, open, ids: { trigger: triggerId, content: contentId } });
     const handleClick = () => {
       if (!disabled) {
         setOpen(!open);
@@ -20661,7 +20795,6 @@ var SelectTrigger = React52__namespace.forwardRef(
         disabled,
         ...api.triggerProps.ariaProps,
         ...api.triggerProps.dataAttributes,
-        "aria-controls": contentId,
         ...props,
         children: [
           children,
@@ -20747,8 +20880,11 @@ var SelectContent = React52__namespace.forwardRef(
 );
 var SelectItem = React52__namespace.forwardRef(
   function SelectItem2({ className, children, value: itemValue, disabled: itemDisabled = false, ...props }, ref) {
-    const { value, onValueChange, setOpen, triggerId } = useSelectContext("SelectItem");
+    const { value, onValueChange, setOpen, triggerId, registerLabel } = useSelectContext("SelectItem");
     const isSelected = value === itemValue;
+    React52__namespace.useEffect(() => {
+      registerLabel(itemValue, children);
+    }, [registerLabel, itemValue, children]);
     const handleClick = () => {
       if (!itemDisabled) {
         onValueChange(itemValue);
@@ -20802,6 +20938,23 @@ var SelectItem = React52__namespace.forwardRef(
     );
   }
 );
+var SelectValue = React52__namespace.forwardRef(
+  function SelectValue2({ placeholder, className, children, ...props }, ref) {
+    const ctx = useSelectContext("SelectValue");
+    const label = ctx.value !== void 0 ? ctx.labels.get(ctx.value) : void 0;
+    const showPlaceholder = children == null && label === void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: cn(selectValueClass, className),
+        "data-placeholder": showPlaceholder ? "" : void 0,
+        ...props,
+        children: children ?? (showPlaceholder ? placeholder ?? ctx.placeholder : label)
+      }
+    );
+  }
+);
 
 // ../status-indicator/dist/index.js
 var STATUS_INDICATOR_COLORS = {
@@ -21583,7 +21736,9 @@ function createCallout(props = {}) {
   const ariaProps = {};
   if (props.role) {
     ariaProps.role = props.role;
-  } else {
+  } else if (props.destructive) {
+    ariaProps.role = "alert";
+  } else if (props.labelled) {
     ariaProps.role = "region";
   }
   return {
@@ -21626,7 +21781,10 @@ var calloutDescriptionVariants = cva({
 });
 var Callout = React52__namespace.forwardRef(
   function Callout2({ className, variant, asChild = false, ...props }, ref) {
-    const api = createCallout({ role: variant === "destructive" ? "alert" : "region" });
+    const api = createCallout({
+      destructive: variant === "destructive",
+      labelled: Boolean(props["aria-label"] || props["aria-labelledby"])
+    });
     const classes = cn(calloutVariants({ variant }), className);
     if (asChild) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -24951,8 +25109,16 @@ var separatorVariants = cva({
   base: "",
   variants: {
     orientation: {
-      horizontal: "h-px w-full bg-border",
-      vertical: "w-px h-full bg-border"
+      horizontal: "h-px w-full",
+      vertical: "w-px h-full"
+    },
+    // Line color (issue #485). `default` is the standard border token;
+    // `subtle` uses the hairline `border-subtle` token for a lighter rule.
+    // Keeping the color here (not in `orientation`) keeps every existing call
+    // pixel-identical while adding the subtle option.
+    tone: {
+      default: "bg-border",
+      subtle: "bg-border-subtle"
     },
     labeled: {
       true: "flex items-center",
@@ -24961,31 +25127,35 @@ var separatorVariants = cva({
   },
   defaultVariants: {
     orientation: "horizontal",
+    tone: "default",
     labeled: "false"
   }
 });
 var separatorLineClass = "h-px flex-1 bg-border";
+var separatorSubtleLineClass = "h-px flex-1 bg-border-subtle";
 var separatorLabelClass = "px-3 text-xs uppercase tracking-wide text-muted-foreground";
 var Separator = React52__namespace.forwardRef(
   function Separator2({
     orientation = "horizontal",
+    tone = "default",
     label,
     decorative = true,
     className,
     ...props
   }, ref) {
     if (orientation === "horizontal" && label != null) {
+      const lineClass = tone === "subtle" ? separatorSubtleLineClass : separatorLineClass;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           ref,
           role: "none",
-          className: cn(separatorVariants({ labeled: "true" }), className),
+          className: cn(separatorVariants({ labeled: "true", tone }), className),
           ...props,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorLineClass }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: lineClass }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorLabelClass, children: label }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorLineClass })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: lineClass })
           ]
         }
       );
@@ -24998,7 +25168,7 @@ var Separator = React52__namespace.forwardRef(
       "div",
       {
         ref,
-        className: cn(separatorVariants({ orientation }), className),
+        className: cn(separatorVariants({ orientation, tone }), className),
         ...ariaProps,
         ...dataAttributes,
         ...props
@@ -25887,7 +26057,7 @@ function createEditorTabs(props = {}) {
   }
   return { ariaProps, dataAttributes };
 }
-function getNextTabIndex(currentIndex, key, count) {
+function getNextTabIndex2(currentIndex, key, count) {
   if (count <= 0) return currentIndex;
   switch (key) {
     case "ArrowRight":
@@ -25945,7 +26115,7 @@ var EditorTabs = React52__namespace.forwardRef(
     const activeIndex = tabs.findIndex((t) => t.id === activeId);
     const tabbableIndex = activeIndex === -1 ? 0 : activeIndex;
     const handleKeyDown = (event, index2) => {
-      const next = getNextTabIndex(index2, event.key, tabs.length);
+      const next = getNextTabIndex2(index2, event.key, tabs.length);
       if (next !== index2) {
         event.preventDefault();
         onSelect(tabs[next].id);
@@ -27707,6 +27877,8 @@ var stickyNoteVariants = cva({
     "min-w-[160px] min-h-[120px]"
   ].join(" "),
   variants: {
+    // Named paper colors are product semantics (physical sticky notes),
+    // not status tones — deliberately not routed through the theme tokens.
     color: {
       yellow: "bg-yellow-100 text-yellow-900",
       pink: "bg-pink-100 text-pink-900",
@@ -29628,11 +29800,420 @@ var SlotPicker = React52__namespace.forwardRef(
   }
 );
 
+// ../action-list/dist/index.js
+function createActionListItem(props = {}) {
+  const { disabled = false, density = "default" } = props;
+  const dataAttributes = {
+    "data-slot": "action-list-item",
+    "data-density": density
+  };
+  if (disabled) dataAttributes["data-disabled"] = "";
+  const ariaProps = {};
+  if (disabled) ariaProps["aria-disabled"] = true;
+  return { ariaProps, dataAttributes };
+}
+var actionListClass = "m-0 flex list-none flex-col divide-y divide-border-subtle p-0";
+var actionListItemVariants = cva({
+  base: "flex w-full items-center gap-4 bg-transparent text-left text-sm text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  variants: {
+    density: {
+      default: "px-4 py-3",
+      compact: "px-3 py-2"
+    }
+  },
+  defaultVariants: {
+    density: "default"
+  }
+});
+var actionListItemBodyClass = "flex min-w-0 flex-1 flex-col gap-0.5";
+var actionListItemTitleClass = "break-words font-semibold text-foreground";
+var actionListItemDescriptionClass = "break-words text-xs text-muted-foreground";
+var actionListItemMetaClass = "break-words text-xs text-muted-foreground";
+var actionListItemTrailingClass = "flex flex-none items-center gap-4 text-xs tabular-nums text-muted-foreground";
+var ActionList = React52__namespace.forwardRef(function ActionList2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { ref, className: cn(actionListClass, className), "data-slot": "action-list", ...props });
+});
+var ActionListItem = React52__namespace.forwardRef(
+  function ActionListItem2({ title, description, meta, trailing, density = "default", disabled, className, ...props }, ref) {
+    const api = createActionListItem({ disabled, density });
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled,
+        className: cn(actionListItemVariants({ density }), className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: actionListItemBodyClass, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionListItemTitleClass, children: title }),
+            description != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionListItemDescriptionClass, children: description }),
+            meta != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionListItemMetaClass, children: meta })
+          ] }),
+          trailing != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionListItemTrailingClass, children: trailing })
+        ]
+      }
+    ) });
+  }
+);
+
+// ../funnel-chart/dist/index.js
+var DEFAULT_FUNNEL_MIN_BAR_PERCENT = 6;
+var percentOf = (part, whole) => whole ? part / whole * 100 : 0;
+function computeFunnel(steps, minBarPercent = DEFAULT_FUNNEL_MIN_BAR_PERCENT) {
+  const top = steps.length ? steps[0].value : 0;
+  return steps.map((step, i) => {
+    const shareOfTop = percentOf(step.value, top);
+    const following = steps[i + 1];
+    return {
+      step,
+      shareOfTop,
+      barPercent: Math.min(100, Math.max(shareOfTop, minBarPercent)),
+      next: following ? {
+        conversion: percentOf(following.value, step.value),
+        dropped: step.value - following.value
+      } : void 0
+    };
+  });
+}
+var funnelChartDefaults = {
+  formatValue: (value) => value.toLocaleString("en-US"),
+  formatPercent: (percent) => `${percent.toFixed(1)}%`,
+  shareLabel: (share) => `${share} of top`,
+  conversionLabel: (percent) => `${percent} continue`,
+  droppedLabel: (count) => `\u2212${count} dropped`
+};
+var funnelChartClasses = {
+  root: "m-0 grid list-none p-0",
+  bar: "relative flex items-center gap-3 overflow-hidden rounded-lg border border-border bg-background px-3.5 py-3",
+  fill: "absolute inset-y-0 left-0 border-r-2 border-primary bg-accent",
+  chevron: "relative shrink-0 text-primary",
+  text: "relative grid min-w-0 flex-1",
+  label: "text-[13px] font-bold text-foreground",
+  description: "text-[11px] text-muted-foreground",
+  figure: "relative grid text-right",
+  value: "text-[15px] font-bold tabular-nums text-foreground",
+  share: "text-[10.5px] text-muted-foreground",
+  transition: "flex items-center gap-2 py-1.5 pl-[18px] text-[11px] text-muted-foreground",
+  conversion: "font-semibold text-success",
+  dropped: "font-semibold text-destructive"
+};
+function Chevron() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: funnelChartClasses.chevron,
+      width: "15",
+      height: "15",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+var FunnelChart = React52__namespace.forwardRef(function FunnelChart2({
+  steps,
+  formatValue = funnelChartDefaults.formatValue,
+  formatPercent = funnelChartDefaults.formatPercent,
+  minBarPercent = DEFAULT_FUNNEL_MIN_BAR_PERCENT,
+  shareLabel = funnelChartDefaults.shareLabel,
+  conversionLabel = funnelChartDefaults.conversionLabel,
+  droppedLabel = funnelChartDefaults.droppedLabel,
+  className,
+  ...rest
+}, ref) {
+  const rows = React52__namespace.useMemo(() => computeFunnel(steps, minBarPercent), [steps, minBarPercent]);
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { ref, className: cn(funnelChartClasses.root, className), "data-slot": "funnel-chart", ...rest, children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: funnelChartClasses.bar, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: funnelChartClasses.fill, style: { width: `${row.barPercent}%` }, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Chevron, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: funnelChartClasses.text, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("b", { className: funnelChartClasses.label, children: row.step.label }),
+        row.step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: funnelChartClasses.description, children: row.step.description })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: funnelChartClasses.figure, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("b", { className: funnelChartClasses.value, children: formatValue(row.step.value) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: funnelChartClasses.share, children: shareLabel(formatPercent(row.shareOfTop)) })
+      ] })
+    ] }),
+    row.next && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: funnelChartClasses.transition, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: funnelChartClasses.conversion, children: conversionLabel(formatPercent(row.next.conversion)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: funnelChartClasses.dropped, children: droppedLabel(formatValue(row.next.dropped)) })
+    ] })
+  ] }, row.step.id)) });
+});
+
+// ../line-chart/dist/index.js
+var DEFAULT_LINE_CHART_PADDING = {
+  top: 14,
+  right: 14,
+  bottom: 24,
+  left: 40
+};
+var DEFAULT_LINE_CHART_WIDTH = 760;
+var DEFAULT_LINE_CHART_HEIGHT = 230;
+var DEFAULT_TICK_COUNT = 4;
+var DEFAULT_HEADROOM = 1.08;
+var DEFAULT_LABEL_EVERY = 2;
+var CHART_TOKEN_COUNT = 5;
+function lineChartColor(index2) {
+  return `hsl(var(--chart-${index2 % CHART_TOKEN_COUNT + 1}))`;
+}
+function pathFrom(points) {
+  return points.map(([px, py], i) => (i ? "L" : "M") + px.toFixed(1) + " " + py.toFixed(1)).join(" ");
+}
+function computeLineChart(options) {
+  const {
+    series,
+    labels,
+    width,
+    height,
+    tickCount = DEFAULT_TICK_COUNT,
+    headroom = DEFAULT_HEADROOM,
+    labelEvery = DEFAULT_LABEL_EVERY
+  } = options;
+  const padding = { ...DEFAULT_LINE_CHART_PADDING, ...options.padding };
+  const n = labels.length;
+  const values = series.flatMap((s) => s.data);
+  const peak = values.length ? Math.max(...values) : 0;
+  const max = peak > 0 ? peak * headroom : 1;
+  const plotW = width - padding.left - padding.right;
+  const plotTop = padding.top;
+  const plotBottom = height - padding.bottom;
+  const plotH = plotBottom - plotTop;
+  const x = (index2) => padding.left + (n > 1 ? index2 / (n - 1) * plotW : plotW / 2);
+  const y = (value) => plotTop + (1 - value / max) * plotH;
+  const ticks = Array.from({ length: tickCount + 1 }, (_2, t) => {
+    const value = max / tickCount * t;
+    return { value, y: y(value) };
+  });
+  const xLabels = labels.map((label, index2) => ({ index: index2, label, x: x(index2) })).filter(({ index: index2 }) => index2 % labelEvery === 0 || index2 === n - 1);
+  const paths = series.map((s, si) => {
+    const points = s.data.map((v2, i) => [x(i), y(v2)]);
+    const line = pathFrom(points);
+    const first = points.length ? points[0][0] : x(0);
+    const last = points.length ? points[points.length - 1][0] : x(0);
+    const base = y(0).toFixed(1);
+    const area = `${line} L ${last.toFixed(1)} ${base} L ${first.toFixed(1)} ${base} Z`;
+    return { id: s.id, color: s.color ?? lineChartColor(si), line, area };
+  });
+  const colW = n > 1 ? plotW / (n - 1) : plotW;
+  const columns = labels.map((_2, index2) => ({
+    index: index2,
+    x: x(index2) - colW / 2,
+    width: colW
+  }));
+  return { width, height, padding, max, ticks, xLabels, paths, columns, x, y, plotTop, plotBottom };
+}
+function tooltipLeftPercent(geometry, index2) {
+  return geometry.x(index2) / geometry.width * 100;
+}
+function nextLineChartIndex(current, key, count) {
+  if (count === 0) return null;
+  const last = count - 1;
+  switch (key) {
+    case "ArrowRight":
+      return current == null ? 0 : Math.min(current + 1, last);
+    case "ArrowLeft":
+      return current == null ? last : Math.max(current - 1, 0);
+    case "Home":
+      return 0;
+    case "End":
+      return last;
+    default:
+      return current;
+  }
+}
+var lineChartClasses = {
+  root: "relative",
+  svg: "block w-full rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  gridline: "stroke-border",
+  axis: "fill-muted-foreground text-[9px]",
+  crosshair: "stroke-border",
+  marker: "stroke-card",
+  tooltip: "pointer-events-none absolute z-10 -translate-x-1/2 whitespace-nowrap rounded-md bg-tertiary px-2.5 py-2 text-[11px] text-tertiary-foreground shadow-lg",
+  tooltipLabel: "mb-1 opacity-60",
+  tooltipRow: "flex justify-between gap-2",
+  legend: "mt-2.5 flex flex-wrap gap-3.5",
+  legendItem: "inline-flex items-center gap-1.5 text-[11px] text-muted-foreground",
+  legendSwatch: "h-[3px] w-2.5 rounded-sm"
+};
+var defaultFormat = (value) => String(Math.round(value));
+var MARKER_RADIUS = 3.5;
+var STROKE_WIDTH = 2.2;
+var TOOLTIP_TOP_PX = 8;
+var LineChart = React52__namespace.forwardRef(function LineChart2({
+  series,
+  labels,
+  ariaLabel,
+  height = DEFAULT_LINE_CHART_HEIGHT,
+  width = DEFAULT_LINE_CHART_WIDTH,
+  formatValue = defaultFormat,
+  formatTick: formatTick2,
+  area,
+  showLegend = true,
+  className,
+  ...rest
+}, ref) {
+  const [active, setActive] = React52__namespace.useState(null);
+  const gradientBase = React52__namespace.useId().replace(/:/g, "");
+  const geo = React52__namespace.useMemo(
+    () => computeLineChart({ series, labels, width, height }),
+    [series, labels, width, height]
+  );
+  const fillArea = area ?? series.length === 1;
+  const tick = formatTick2 ?? formatValue;
+  const handleKeyDown = (event) => {
+    const next = nextLineChartIndex(active, event.key, labels.length);
+    if (next === active) return;
+    event.preventDefault();
+    setActive(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn(lineChartClasses.root, className), "data-slot": "line-chart", ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        className: lineChartClasses.svg,
+        viewBox: `0 0 ${width} ${height}`,
+        style: { height },
+        role: "img",
+        "aria-label": ariaLabel,
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        onBlur: () => setActive(null),
+        onMouseLeave: () => setActive(null),
+        children: [
+          geo.ticks.map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("line", { className: lineChartClasses.gridline, x1: geo.padding.left, y1: t.y, x2: width - geo.padding.right, y2: t.y }),
+            /* @__PURE__ */ jsxRuntime.jsx("text", { className: lineChartClasses.axis, x: geo.padding.left - 8, y: t.y + 3, textAnchor: "end", children: tick(t.value) })
+          ] }, i)),
+          geo.xLabels.map((l2) => /* @__PURE__ */ jsxRuntime.jsx("text", { className: lineChartClasses.axis, x: l2.x, y: height - 6, textAnchor: "middle", children: l2.label }, l2.index)),
+          geo.paths.map((p, si) => {
+            const gid = `${gradientBase}-${si}`;
+            const value = active != null ? series[si].data[active] : void 0;
+            return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+              fillArea && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gid, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: p.color, stopOpacity: "0.22" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: p.color, stopOpacity: "0" })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: p.area, fill: `url(#${gid})` })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: p.line,
+                  fill: "none",
+                  stroke: p.color,
+                  strokeWidth: STROKE_WIDTH,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ),
+              active != null && value != null && /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  className: lineChartClasses.marker,
+                  cx: geo.x(active),
+                  cy: geo.y(value),
+                  r: MARKER_RADIUS,
+                  fill: p.color,
+                  strokeWidth: "1.5"
+                }
+              )
+            ] }, p.id);
+          }),
+          active != null && /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              className: lineChartClasses.crosshair,
+              x1: geo.x(active),
+              y1: geo.plotTop,
+              x2: geo.x(active),
+              y2: geo.plotBottom,
+              strokeDasharray: "3 3"
+            }
+          ),
+          geo.columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              "data-index": col.index,
+              x: col.x,
+              y: 0,
+              width: col.width,
+              height,
+              fill: "transparent",
+              onMouseEnter: () => setActive(col.index)
+            },
+            col.index
+          ))
+        ]
+      }
+    ),
+    active != null && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: lineChartClasses.tooltip,
+        role: "status",
+        style: { left: `${tooltipLeftPercent(geo, active)}%`, top: TOOLTIP_TOP_PX },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: lineChartClasses.tooltipLabel, children: labels[active] }),
+          series.map((s, si) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: lineChartClasses.tooltipRow, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: geo.paths[si].color }, children: s.name }),
+            /* @__PURE__ */ jsxRuntime.jsx("b", { children: s.data[active] != null ? formatValue(s.data[active]) : "\u2014" })
+          ] }, s.id))
+        ]
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsxRuntime.jsx("div", { className: lineChartClasses.legend, children: series.map((s, si) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: lineChartClasses.legendItem, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("i", { className: lineChartClasses.legendSwatch, style: { background: geo.paths[si].color }, "aria-hidden": "true" }),
+      s.name
+    ] }, s.id)) })
+  ] });
+});
+
+// ../page-header/dist/index.js
+function createPageHeader(props = {}) {
+  return {
+    dataAttributes: {
+      "data-slot": "page-header",
+      "data-has-actions": props.hasActions ? "true" : "false"
+    }
+  };
+}
+var pageHeaderClass = "flex flex-wrap items-start justify-between gap-4";
+var pageHeaderTextClass = "flex min-w-0 flex-1 flex-col gap-1";
+var pageHeaderKickerClass = "break-words text-[11px] uppercase tracking-wider text-muted-foreground";
+var pageHeaderTitleClass = "break-words text-xl font-semibold text-foreground";
+var pageHeaderDescriptionClass = "max-w-prose text-sm text-muted-foreground";
+var pageHeaderActionsClass = "flex flex-none flex-wrap items-center gap-2";
+var PageHeader = React52__namespace.forwardRef(function PageHeader2({ kicker, title, description, actions, as: Title = "h1", className, ...props }, ref) {
+  const { dataAttributes } = createPageHeader({ hasActions: actions != null });
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { ref, className: cn(pageHeaderClass, className), ...dataAttributes, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: pageHeaderTextClass, children: [
+      kicker != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: pageHeaderKickerClass, children: kicker }),
+      /* @__PURE__ */ jsxRuntime.jsx(Title, { className: pageHeaderTitleClass, children: title }),
+      description != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: pageHeaderDescriptionClass, children: description })
+    ] }),
+    actions != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: pageHeaderActionsClass, children: actions })
+  ] });
+});
+
 exports.AIProvider = AIProvider;
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
 exports.AccordionItem = AccordionItem;
 exports.AccordionTrigger = AccordionTrigger;
+exports.ActionList = ActionList;
+exports.ActionListItem = ActionListItem;
 exports.AltHintState = AltHintState;
 exports.AnalyticsProvider = AnalyticsProvider;
 exports.AnimatedText = AnimatedText;
@@ -29750,6 +30331,7 @@ exports.FileUpload = FileUpload;
 exports.FloatingReactions = FloatingReactions;
 exports.FlowEditor = FlowEditor;
 exports.Footer = Footer;
+exports.FunnelChart = FunnelChart;
 exports.Gradient = Gradient;
 exports.GraphView = GraphView;
 exports.Histogram = Histogram;
@@ -29768,6 +30350,7 @@ exports.KanbanColumn = KanbanColumn;
 exports.KeyboardShortcut = KeyboardShortcut;
 exports.LanguageSelector = LanguageSelector;
 exports.Line = Line;
+exports.LineChart = LineChart;
 exports.LinkCard = LinkCard;
 exports.LiveCaptions = LiveCaptions;
 exports.LiveCursors = LiveCursors;
@@ -29787,6 +30370,7 @@ exports.NumberedSteps = NumberedSteps;
 exports.OtpInput = OtpInput;
 exports.PRESENCE_STATUS_COLORS = STATUS_COLORS;
 exports.PRESENCE_STATUS_LABELS = STATUS_LABELS;
+exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
 exports.PasswordInput = PasswordInput;
 exports.Payment = Payment;
@@ -29826,6 +30410,7 @@ exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectItem = SelectItem;
 exports.SelectTrigger = SelectTrigger;
+exports.SelectValue = SelectValue;
 exports.Separator = Separator;
 exports.Sheet = Sheet;
 exports.SheetClose = SheetClose;