@teja-app/ui 0.0.12 → 0.0.14

package/dist/theme/index.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const instrumentation = require("@teja-app/ui/instrumentation");
 const ReactDOM = require("react-dom");
 function _interopNamespaceDefault(e2) {
   const n2 = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -658,7 +659,7 @@ const VARIANT_STYLES = {
     border: "1px solid transparent"
   }
 };
-const SIZE_DIMS$1 = {
+const SIZE_DIMS$2 = {
   sm: { h: 28, pad: "0 10px", fz: 12 },
   md: { h: 32, pad: "0 12px", fz: 13 },
   lg: { h: 38, pad: "0 16px", fz: 14 }
@@ -674,9 +675,17 @@ const Button$1 = React.forwardRef(function Button2({
   type = "button",
   disabled,
   testId,
+  telemetryId,
+  onClick,
   ...rest
 }, ref) {
-  const dims = SIZE_DIMS$1[size2];
+  const dims = SIZE_DIMS$2[size2];
+  const instrumentedClick = instrumentation.useInstrumentedClick(onClick, {
+    telemetryId,
+    testId,
+    kind: "Button",
+    variant
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -684,6 +693,7 @@ const Button$1 = React.forwardRef(function Button2({
       type,
       disabled,
       "data-testid": testId,
+      onClick: instrumentedClick,
       style: {
         height: dims.h,
         padding: dims.pad,
@@ -740,13 +750,15 @@ function Badge({
   tone = "neutral",
   size: size2 = "md",
   dot,
+  colors,
   children,
   style,
   testId,
   "data-testid": dataTestId,
   ...rest
 }) {
-  const t2 = TONES$1[tone];
+  const base = TONES$1[tone] ?? TONES$1.neutral;
+  const t2 = colors ? { bg: colors.bg, fg: colors.fg, dot: colors.dot ?? colors.fg } : base;
   const h2 = size2 === "sm" ? 18 : 22;
   const fz = size2 === "sm" ? 10.5 : 11.5;
   const merged = {
@@ -783,16 +795,80 @@ function Badge({
     children
   ] });
 }
-function Card({ padding = 20, children, style, testId, ...rest }) {
-  const merged = {
-    background: "var(--surface-0)",
-    borderRadius: "var(--r-lg)",
-    border: "1px solid var(--border)",
+const Card = React.forwardRef(function Card2({
+  padding = 20,
+  children,
+  style,
+  testId,
+  selected = false,
+  interactive,
+  onClick,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const isInteractive = interactive ?? !!onClick;
+  const surfaceStyle = {
+    background: selected ? "var(--primary-soft)" : "var(--surface-0)",
+    borderRadius: isInteractive ? "var(--r-md)" : "var(--r-lg)",
+    border: selected ? "1px solid var(--primary)" : "1px solid var(--border)",
+    boxShadow: selected ? "0 0 0 3px var(--primary-ring)" : isInteractive ? "var(--shadow-xs)" : void 0,
     padding,
+    cursor: isInteractive ? "pointer" : void 0,
+    transition: isInteractive ? "background .12s, box-shadow .12s" : void 0,
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    textAlign: "inherit",
     ...style
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": testId, style: merged, ...rest, children });
-}
+  if (isInteractive) {
+    const handleKeyDown = (e2) => {
+      if ((e2.key === "Enter" || e2.key === " ") && onClick) {
+        e2.preventDefault();
+        onClick(
+          e2
+        );
+      }
+      if (onKeyDown) {
+        onKeyDown(e2);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "data-testid": testId,
+        "data-selected": selected ? "true" : void 0,
+        "data-interactive": "true",
+        onClick,
+        onKeyDown: handleKeyDown,
+        style: {
+          // Reset default button chrome
+          appearance: "none",
+          WebkitAppearance: "none",
+          display: "block",
+          width: "100%",
+          ...surfaceStyle,
+          // Re-apply border after reset (border: 'none' from reset would win)
+          border: surfaceStyle.border
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-testid": testId,
+      "data-selected": selected ? "true" : void 0,
+      style: surfaceStyle,
+      ...rest,
+      children
+    }
+  );
+});
 function TejaMark({ size: size2 = 22, style, testId }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -13311,6 +13387,65 @@ function RoleTile({
     }
   );
 }
+const SelectableCard = React.forwardRef(
+  function SelectableCard2({
+    selected,
+    role = "radio",
+    onSelect,
+    disabled = false,
+    testId,
+    children,
+    style,
+    onClick,
+    ...rest
+  }, ref) {
+    const cardStyle = {
+      // Layout
+      display: "block",
+      width: "100%",
+      textAlign: "left",
+      // Spacing — matches RoleTile (padding: 12)
+      padding: 12,
+      // Border — 1.5px primary when selected, border-strong when not
+      border: `1.5px solid ${selected ? "var(--primary)" : "var(--border-strong)"}`,
+      // Background — primary-soft when selected, surface-0 when not
+      background: selected ? "var(--primary-soft)" : "var(--surface-0)",
+      // Shape — matches RoleTile
+      borderRadius: "var(--r-md)",
+      // Shadow — shadow-xs when selected, none when not (matches RoleTile)
+      boxShadow: selected ? "var(--shadow-xs)" : "none",
+      // Typography reset
+      font: "inherit",
+      // Cursor
+      cursor: disabled ? "not-allowed" : "pointer",
+      // Disabled dimming
+      opacity: disabled ? 0.5 : 1,
+      // Merge caller overrides last
+      ...style
+    };
+    function handleClick(e2) {
+      if (!disabled) {
+        onSelect?.();
+        onClick?.(e2);
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        role,
+        "aria-checked": selected,
+        "data-testid": testId,
+        disabled,
+        onClick: handleClick,
+        style: cardStyle,
+        ...rest,
+        children
+      }
+    );
+  }
+);
 const CELL_COUNT = 6;
 const EMPTY_CELLS = Array.from(
   { length: CELL_COUNT },
@@ -14197,6 +14332,7 @@ function SegmentedControl({
             role: "tab",
             "aria-selected": active,
             "data-state": active ? "active" : "inactive",
+            "data-active": active ? "true" : "false",
             "data-testid": testId ? `${testId}-${it.value}` : void 0,
             onClick: () => onChange?.(it.value),
             style: {
@@ -15426,7 +15562,7 @@ function Drawer$1({
   testId,
   ariaLabel,
   style,
-  panelStyle
+  panelStyle: panelStyle2
 }) {
   const panelRef = React.useRef(null);
   const previouslyFocusedRef = React.useRef(null);
@@ -15528,7 +15664,7 @@ function Drawer$1({
               display: "flex",
               flexDirection: "column",
               outline: "none",
-              ...panelStyle
+              ...panelStyle2
             },
             children: [
               header,
@@ -15663,7 +15799,7 @@ function Modal$1({
   testId,
   ariaLabel,
   style,
-  panelStyle
+  panelStyle: panelStyle2
 }) {
   const panelRef = React.useRef(null);
   const previouslyFocusedRef = React.useRef(null);
@@ -15773,7 +15909,7 @@ function Modal$1({
               boxShadow: "0 24px 64px rgba(0,0,0,0.22), 0 4px 16px rgba(0,0,0,0.12)",
               overflow: "hidden",
               outline: "none",
-              ...panelStyle
+              ...panelStyle2
             },
             children: [
               header ?? (title || description ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -16397,8 +16533,14 @@ const Switch = React.forwardRef(function Switch2({ on = false, onChange, size: s
 });
 const SIZE_PX$1 = { sm: 22, md: 26, lg: 32 };
 const IconButton = React.forwardRef(
-  function IconButton2({ children, size: size2 = "md", tone = "default", style, testId, type = "button", ...rest }, ref) {
+  function IconButton2({ children, size: size2 = "md", tone = "default", style, testId, telemetryId, onClick, type = "button", ...rest }, ref) {
     const dim = SIZE_PX$1[size2];
+    const instrumentedClick = instrumentation.useInstrumentedClick(onClick, {
+      telemetryId,
+      testId,
+      kind: "IconButton",
+      variant: tone
+    });
     const merged = {
       width: dim,
       height: dim,
@@ -16422,6 +16564,7 @@ const IconButton = React.forwardRef(
         type,
         "data-testid": testId,
         "data-tone": tone,
+        onClick: instrumentedClick,
         style: merged,
         ...rest,
         children
@@ -16712,6 +16855,79 @@ const Chip = React.forwardRef(function Chip2({ active, count: count2, tone = "pr
     }
   );
 });
+const SIZE_DIMS$1 = {
+  sm: { height: 24, padding: "0 10px", fontSize: 11, gap: 4 },
+  md: { height: 28, padding: "0 12px", fontSize: 12, gap: 6 }
+};
+const ToggleChip = React.forwardRef(
+  function ToggleChip2({
+    pressed,
+    onPressedChange,
+    icon,
+    tone = "primary",
+    size: size2 = "md",
+    disabled = false,
+    style,
+    testId,
+    onClick,
+    children,
+    ...rest
+  }, ref) {
+    const dims = SIZE_DIMS$1[size2];
+    const pillStyle = {
+      // Geometry — from PillSelector item template
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: dims.gap,
+      height: dims.height,
+      padding: dims.padding,
+      fontSize: dims.fontSize,
+      fontWeight: 500,
+      borderRadius: "var(--r-pill)",
+      // Colours — tokens only, never hardcoded
+      border: "1px solid",
+      borderColor: pressed ? `var(--${tone})` : "var(--border)",
+      background: pressed ? `var(--${tone}-soft)` : "var(--surface-0)",
+      color: pressed ? `var(--${tone})` : "var(--ink-2)",
+      // Interaction
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.5 : 1,
+      whiteSpace: "nowrap",
+      flexShrink: 0,
+      transition: "background .12s, border-color .12s, color .12s",
+      // Reset button defaults
+      outline: "none",
+      ...style
+    };
+    const handleClick = (e2) => {
+      if (disabled) return;
+      onPressedChange?.(!pressed);
+      onClick?.(e2);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled,
+        "aria-pressed": pressed,
+        "data-state": pressed ? "on" : "off",
+        "data-active": pressed ? "true" : "false",
+        "data-tone": tone,
+        "data-testid": testId,
+        style: pillStyle,
+        onClick: handleClick,
+        ...rest,
+        children: [
+          icon != null ? icon : null,
+          children != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { children }) : null
+        ]
+      }
+    );
+  }
+);
+ToggleChip.displayName = "ToggleChip";
 const SIZE_DIMS = {
   sm: { height: 24, padding: "0 10px", fontSize: 11, gap: 4, iconSize: 12 },
   md: { height: 28, padding: "0 12px", fontSize: 12, gap: 6, iconSize: 14 },
@@ -17041,8 +17257,14 @@ function AIBadge({
   ] });
 }
 const AIComposeButton = React.forwardRef(
-  function AIComposeButton2({ size: size2 = "md", children = "Compose with AI", style, testId, type = "button", ...rest }, ref) {
+  function AIComposeButton2({ size: size2 = "md", children = "Compose with AI", style, testId, telemetryId, onClick, type = "button", ...rest }, ref) {
     const h2 = size2 === "sm" ? 28 : 32;
+    const instrumentedClick = instrumentation.useInstrumentedClick(onClick, {
+      telemetryId,
+      testId,
+      kind: "AIComposeButton",
+      variant: size2
+    });
     const fz = size2 === "sm" ? 12 : 13;
     const merged = {
       height: h2,
@@ -17067,6 +17289,7 @@ const AIComposeButton = React.forwardRef(
         type,
         "data-testid": testId,
         "data-size": size2,
+        onClick: instrumentedClick,
         style: merged,
         ...rest,
         children: [
@@ -18121,6 +18344,747 @@ function ConfirmDialog({
     }
   );
 }
+function panelStyle(placement, minWidth, zIndex) {
+  const isTop = placement.startsWith("top");
+  const isStart = placement.endsWith("start");
+  return {
+    position: "absolute",
+    // vertical
+    ...isTop ? { bottom: "100%", marginBottom: 4 } : { top: "100%", marginTop: 4 },
+    // horizontal
+    ...isStart ? { left: 0 } : { right: 0 },
+    zIndex,
+    minWidth,
+    background: "var(--surface-0)",
+    border: "1px solid var(--border)",
+    borderRadius: "var(--r-md)",
+    boxShadow: "var(--shadow-pop)",
+    padding: 4,
+    overflow: "hidden"
+  };
+}
+function Menu({
+  open,
+  onClose,
+  trigger,
+  children,
+  placement = "bottom-end",
+  minWidth = 220,
+  zIndex = 200,
+  testId,
+  style
+}) {
+  const panelRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onKey = (e2) => {
+      if (e2.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e2.key === "ArrowDown" || e2.key === "ArrowUp") {
+        e2.preventDefault();
+        const panel = panelRef.current;
+        if (!panel) return;
+        const items = Array.from(
+          panel.querySelectorAll('button[role="menuitem"]:not(:disabled)')
+        );
+        if (items.length === 0) return;
+        const focused = items.indexOf(document.activeElement);
+        const next = e2.key === "ArrowDown" ? (focused + 1) % items.length : (focused - 1 + items.length) % items.length;
+        items[next]?.focus();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  React.useEffect(() => {
+    if (!open) return;
+    const panel = panelRef.current;
+    if (!panel) return;
+    const first = panel.querySelector('button[role="menuitem"]:not(:disabled)');
+    if (first && !panel.contains(document.activeElement)) {
+      first.focus();
+    }
+  }, [open]);
+  const ps = panelStyle(placement, minWidth, zIndex);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", display: "inline-flex" }, children: [
+    trigger,
+    open && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          onClick: onClose,
+          style: { position: "fixed", inset: 0, zIndex: zIndex - 1 }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: panelRef,
+          role: "menu",
+          "aria-label": "menu",
+          "data-testid": testId,
+          onClick: onClose,
+          style: { ...ps, ...style },
+          children
+        }
+      )
+    ] })
+  ] });
+}
+const MenuItem = React.forwardRef(function MenuItem2({ icon, danger = false, children, onClick, disabled, testId, style, ...rest }, ref) {
+  const [hovered, setHovered] = React.useState(false);
+  const handleClick = React.useCallback(
+    (e2) => {
+      onClick?.(e2);
+    },
+    [onClick]
+  );
+  const merged = {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    width: "100%",
+    padding: "8px 10px",
+    border: 0,
+    borderRadius: "var(--r-sm)",
+    background: hovered && !disabled ? "var(--surface-1)" : "transparent",
+    cursor: disabled ? "not-allowed" : "pointer",
+    fontFamily: "inherit",
+    fontSize: 12.5,
+    color: disabled ? "var(--ink-4)" : danger ? "var(--danger)" : "var(--ink-1)",
+    textAlign: "left",
+    opacity: disabled ? 0.55 : 1,
+    transition: "background .1s",
+    outline: "none",
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref,
+      role: "menuitem",
+      type: "button",
+      disabled,
+      "data-testid": testId,
+      "data-danger": danger ? "true" : void 0,
+      style: merged,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onClick: handleClick,
+      ...rest,
+      children: [
+        icon ? /* @__PURE__ */ jsxRuntime.jsx(
+          Icon,
+          {
+            name: icon,
+            size: 12,
+            color: disabled ? "var(--ink-4)" : danger ? "var(--danger)" : "var(--ink-3)"
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+});
+function MenuDivider({ style, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      role: "separator",
+      style: {
+        border: 0,
+        borderTop: "1px solid var(--divider)",
+        margin: "4px 2px",
+        ...style
+      },
+      ...rest
+    }
+  );
+}
+const GAP = 8;
+const ARROW_SIZE = 5;
+function getBubbleStyle(placement) {
+  const base = {
+    position: "absolute",
+    zIndex: "var(--z-tooltip)"
+  };
+  switch (placement) {
+    case "top":
+      return {
+        ...base,
+        bottom: `calc(100% + ${GAP}px)`,
+        left: "50%",
+        transform: "translateX(-50%)"
+      };
+    case "bottom":
+      return {
+        ...base,
+        top: `calc(100% + ${GAP}px)`,
+        left: "50%",
+        transform: "translateX(-50%)"
+      };
+    case "left":
+      return {
+        ...base,
+        right: `calc(100% + ${GAP}px)`,
+        top: "50%",
+        transform: "translateY(-50%)"
+      };
+    case "right":
+      return {
+        ...base,
+        left: `calc(100% + ${GAP}px)`,
+        top: "50%",
+        transform: "translateY(-50%)"
+      };
+  }
+}
+function getArrowStyle(placement) {
+  const base = {
+    position: "absolute",
+    width: ARROW_SIZE * 2,
+    height: ARROW_SIZE * 2,
+    background: "var(--ink-1)",
+    transform: "rotate(45deg)"
+  };
+  switch (placement) {
+    case "top":
+      return {
+        ...base,
+        bottom: -4,
+        left: "50%",
+        marginLeft: -ARROW_SIZE
+      };
+    case "bottom":
+      return {
+        ...base,
+        top: -4,
+        left: "50%",
+        marginLeft: -ARROW_SIZE
+      };
+    case "left":
+      return {
+        ...base,
+        right: -4,
+        top: "50%",
+        marginTop: -ARROW_SIZE
+      };
+    case "right":
+      return {
+        ...base,
+        left: -4,
+        top: "50%",
+        marginTop: -ARROW_SIZE
+      };
+  }
+}
+const Tooltip = React.forwardRef(function Tooltip2({
+  label,
+  placement = "top",
+  delay = 400,
+  children,
+  testId,
+  maxWidth = 220,
+  style,
+  ...rest
+}, ref) {
+  const [visible, setVisible] = React.useState(false);
+  const timerRef = React.useRef(null);
+  const tooltipId = React.useId();
+  const show = React.useCallback(() => {
+    timerRef.current = setTimeout(() => setVisible(true), delay);
+  }, [delay]);
+  const hide = React.useCallback(() => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    setVisible(false);
+  }, []);
+  React.useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    };
+  }, []);
+  React.useEffect(() => {
+    if (!visible) return;
+    const onKey = (e2) => {
+      if (e2.key === "Escape") hide();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [visible, hide]);
+  const wrapperStyle = {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ...style
+  };
+  const bubbleStyle = {
+    ...getBubbleStyle(placement),
+    background: "var(--ink-1)",
+    color: "var(--surface-0)",
+    fontSize: 12,
+    fontWeight: 500,
+    lineHeight: 1.4,
+    padding: "6px 8px",
+    borderRadius: "var(--r-sm)",
+    boxShadow: "var(--shadow-pop)",
+    maxWidth,
+    whiteSpace: "nowrap",
+    pointerEvents: "none",
+    // Fade in
+    opacity: visible ? 1 : 0,
+    transition: "opacity 0.12s ease"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "data-testid": testId,
+      "data-placement": placement,
+      style: wrapperStyle,
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocusCapture: show,
+      onBlurCapture: hide,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-describedby": visible ? tooltipId : void 0,
+            style: { display: "contents" },
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            id: tooltipId,
+            role: "tooltip",
+            "aria-hidden": !visible,
+            style: bubbleStyle,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, style: getArrowStyle(placement) }),
+              label
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+const DarkScope = React.forwardRef(
+  function DarkScope2({ children, style, testId, "data-testid": dataTestId, ...rest }, ref) {
+    const merged = {
+      colorScheme: "dark",
+      ...style
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-theme": "dark",
+        "data-testid": dataTestId ?? testId,
+        style: merged,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+const TONE_SPECS = {
+  success: {
+    accent: "var(--success)",
+    iconBg: "var(--success-soft)",
+    iconColor: "var(--success)",
+    defaultIcon: "check-circle"
+  },
+  danger: {
+    accent: "var(--danger)",
+    iconBg: "var(--danger-soft)",
+    iconColor: "var(--danger)",
+    defaultIcon: "alert-circle"
+  },
+  info: {
+    accent: "var(--primary)",
+    iconBg: "var(--primary-soft)",
+    iconColor: "var(--primary)",
+    defaultIcon: "info"
+  },
+  neutral: {
+    accent: "var(--border)",
+    iconBg: "var(--surface-2)",
+    iconColor: "var(--ink-2)",
+    defaultIcon: "bell"
+  }
+};
+const ToastContext = React.createContext(null);
+let _idCounter = 0;
+const nextId = () => `toast-${++_idCounter}`;
+function useToast() {
+  const ctx = React.useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used within a <ToastHost />");
+  }
+  return ctx;
+}
+const Toast = React.forwardRef(function Toast2({
+  message: message2,
+  tone = "success",
+  icon,
+  action,
+  onDismiss,
+  style,
+  testId,
+  ...rest
+}, ref) {
+  const t2 = TONE_SPECS[tone];
+  const iconName = icon ?? t2.defaultIcon;
+  const merged = {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: 10,
+    padding: "11px 14px",
+    background: "var(--surface-0)",
+    border: "1px solid var(--border)",
+    borderLeft: `3px solid ${t2.accent}`,
+    borderRadius: "var(--r-md)",
+    boxShadow: "var(--shadow-pop)",
+    maxWidth: 320,
+    width: 320,
+    pointerEvents: "auto",
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, "data-testid": testId, "data-tone": tone, style: merged, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        style: {
+          width: 26,
+          height: 26,
+          borderRadius: 999,
+          flexShrink: 0,
+          background: t2.iconBg,
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: iconName, size: 12, color: t2.iconColor })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0, alignSelf: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            fontSize: 12.5,
+            fontWeight: 600,
+            color: "var(--ink-1)",
+            lineHeight: 1.4
+          },
+          children: message2
+        }
+      ),
+      action ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            action.onClick();
+            onDismiss?.();
+          },
+          style: {
+            marginTop: 4,
+            fontSize: 11.5,
+            fontWeight: 500,
+            color: "var(--primary)",
+            background: "none",
+            border: 0,
+            padding: 0,
+            cursor: "pointer",
+            lineHeight: 1
+          },
+          children: action.label
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Dismiss",
+        onClick: onDismiss,
+        style: {
+          background: "none",
+          border: 0,
+          padding: 2,
+          cursor: "pointer",
+          color: "var(--ink-3)",
+          display: "inline-flex",
+          alignItems: "center",
+          flexShrink: 0,
+          borderRadius: "var(--r-sm)"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "x", size: 12 })
+      }
+    )
+  ] });
+});
+function ToastEntry({ item, onRemove }) {
+  const [visible, setVisible] = React.useState(false);
+  const timerRef = React.useRef(null);
+  React.useEffect(() => {
+    const raf = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
+  React.useEffect(() => {
+    timerRef.current = setTimeout(() => {
+      setVisible(false);
+      setTimeout(() => {
+        onRemove(item.id);
+        item.then?.();
+      }, 220);
+    }, item.ms);
+    return () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    };
+  }, [item, onRemove]);
+  const handleDismiss = React.useCallback(() => {
+    if (timerRef.current !== null) clearTimeout(timerRef.current);
+    setVisible(false);
+    setTimeout(() => {
+      onRemove(item.id);
+      item.then?.();
+    }, 220);
+  }, [item, onRemove]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        transition: "opacity 0.2s ease, transform 0.2s ease",
+        opacity: visible ? 1 : 0,
+        transform: visible ? "translateX(0)" : "translateX(24px)"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Toast,
+        {
+          message: item.message,
+          tone: item.tone,
+          icon: item.icon,
+          action: item.action,
+          onDismiss: handleDismiss,
+          testId: `toast-${item.id}`
+        }
+      )
+    }
+  );
+}
+function ToastHost({ children, container }) {
+  const [items, setItems] = React.useState([]);
+  const showToast = React.useCallback((message2, opts = {}) => {
+    const tone = opts.tone ?? "success";
+    const t2 = TONE_SPECS[tone];
+    const item = {
+      id: nextId(),
+      message: message2,
+      tone,
+      icon: opts.icon ?? t2.defaultIcon,
+      ms: opts.ms ?? 2500,
+      action: opts.action,
+      then: opts.then
+    };
+    setItems((prev) => [...prev, item]);
+  }, []);
+  const removeItem = React.useCallback((id) => {
+    setItems((prev) => prev.filter((i2) => i2.id !== id));
+  }, []);
+  const hostStyle = {
+    position: "fixed",
+    top: 80,
+    right: 20,
+    zIndex: 200,
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    pointerEvents: "none"
+    // Ensure toasts stack above most content
+  };
+  const portal = ReactDOM.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "region",
+        "aria-live": "polite",
+        "aria-label": "Notifications",
+        style: hostStyle,
+        children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(ToastEntry, { item, onRemove: removeItem }, item.id))
+      }
+    ),
+    container ?? document.body
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { showToast }, children: [
+    children,
+    portal
+  ] });
+}
+const AccordionContext = React.createContext(null);
+function useAccordionCtx() {
+  const ctx = React.useContext(AccordionContext);
+  if (!ctx) {
+    throw new Error("AccordionItem must be rendered inside an Accordion.");
+  }
+  return ctx;
+}
+function Accordion({
+  multiple = false,
+  defaultValue,
+  value: controlledValue,
+  onChange,
+  children,
+  style,
+  testId
+}) {
+  const [internalOpen, setInternalOpen] = React.useState(() => {
+    if (defaultValue === void 0) return /* @__PURE__ */ new Set();
+    return new Set(Array.isArray(defaultValue) ? defaultValue : [defaultValue]);
+  });
+  const isControlled = controlledValue !== void 0;
+  const openSet = React.useMemo(
+    () => isControlled ? new Set(Array.isArray(controlledValue) ? controlledValue : [controlledValue]) : internalOpen,
+    [isControlled, controlledValue, internalOpen]
+  );
+  const isOpen = React.useCallback((v2) => openSet.has(v2), [openSet]);
+  const toggle = React.useCallback(
+    (v2) => {
+      let next;
+      if (openSet.has(v2)) {
+        next = new Set([...openSet].filter((x2) => x2 !== v2));
+      } else if (multiple) {
+        next = /* @__PURE__ */ new Set([...openSet, v2]);
+      } else {
+        next = /* @__PURE__ */ new Set([v2]);
+      }
+      if (!isControlled) {
+        setInternalOpen(next);
+      }
+      if (onChange) {
+        const arr = [...next];
+        onChange(multiple ? arr : arr[0] ?? "");
+      }
+    },
+    [openSet, multiple, isControlled, onChange]
+  );
+  const ctx = { isOpen, toggle };
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-testid": testId,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 0,
+        ...style
+      },
+      children
+    }
+  ) });
+}
+const AccordionItem = React.forwardRef(
+  function AccordionItem2({ value, title, children, testId, style, ...rest }, ref) {
+    const { isOpen, toggle } = useAccordionCtx();
+    const open = isOpen(value);
+    const uid = React.useId();
+    const headerId = `accordion-header-${uid}`;
+    const panelId = `accordion-panel-${uid}`;
+    const [hovered, setHovered] = React.useState(false);
+    const headerStyle = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+      padding: "10px 12px",
+      border: 0,
+      borderRadius: "var(--r-md)",
+      background: hovered ? "var(--surface-1)" : "transparent",
+      cursor: "pointer",
+      fontFamily: "inherit",
+      textAlign: "left",
+      transition: "background .1s",
+      outline: "none"
+    };
+    const titleStyle = {
+      fontSize: 13,
+      fontWeight: 600,
+      color: "var(--ink-1)",
+      flex: 1,
+      minWidth: 0
+    };
+    const chevronStyle = {
+      flexShrink: 0,
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      transform: open ? "rotate(180deg)" : "rotate(0deg)",
+      transition: "transform .15s"
+    };
+    const panelStyle2 = {
+      paddingTop: 8
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...style }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          ref,
+          id: headerId,
+          type: "button",
+          "aria-expanded": open,
+          "aria-controls": panelId,
+          "data-testid": testId ? `${testId}-header` : void 0,
+          onClick: () => toggle(value),
+          onMouseEnter: () => setHovered(true),
+          onMouseLeave: () => setHovered(false),
+          style: headerStyle,
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: titleStyle, children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, style: chevronStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                width: 11,
+                height: 11,
+                viewBox: "0 0 16 16",
+                fill: "none",
+                stroke: "var(--ink-3)",
+                strokeWidth: 1.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6l4 4 4-4" })
+              }
+            ) })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          id: panelId,
+          role: "region",
+          "aria-labelledby": headerId,
+          "data-testid": testId ? `${testId}-panel` : void 0,
+          style: panelStyle2,
+          children
+        }
+      )
+    ] });
+  }
+);
 exports.AIBadge = AIBadge;
 exports.AICard = AICard;
 exports.AIChip = AIChip;
@@ -18130,6 +19094,8 @@ exports.AISectionHeader = AISectionHeader;
 exports.AISparkle = AISparkle;
 exports.AIWorking = AIWorking;
 exports.AI_OPTIONS = AI_OPTIONS;
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;
 exports.Alert = Alert;
 exports.AppShell = AppShell;
 exports.AskTeja = AskTeja;
@@ -18148,6 +19114,7 @@ exports.CountryPicker = CountryPicker;
 exports.DEFAULT_LANG_OPTIONS = DEFAULT_LANG_OPTIONS;
 exports.DENSITY_OPTIONS = DENSITY_OPTIONS;
 exports.DISPLAY_OPTIONS = DISPLAY_OPTIONS;
+exports.DarkScope = DarkScope;
 exports.DateInput = DateInput;
 exports.Divider = Divider;
 exports.Drawer = Drawer;
@@ -18166,6 +19133,9 @@ exports.IconButton = IconButton;
 exports.KV = KV;
 exports.LabelGroup = LabelGroup;
 exports.LangSwitcher = LangSwitcher;
+exports.Menu = Menu;
+exports.MenuDivider = MenuDivider;
+exports.MenuItem = MenuItem;
 exports.MiniStat = MiniStat;
 exports.Modal = Modal;
 exports.ModalFooter = ModalFooter;
@@ -18188,6 +19158,7 @@ exports.SURFACE_OPTIONS = SURFACE_OPTIONS;
 exports.SectionLabel = SectionLabel;
 exports.SegmentedControl = SegmentedControl;
 exports.Select = Select$1;
+exports.SelectableCard = SelectableCard;
 exports.SettingRow = SettingRow;
 exports.Sidebar = Sidebar;
 exports.SidebarNav = SidebarNav;
@@ -18221,7 +19192,11 @@ exports.Textarea = Textarea;
 exports.ThemeProvider = ThemeProvider;
 exports.TimeZonePicker = TimeZonePicker;
 exports.TimelineRow = TimelineRow;
+exports.Toast = Toast;
+exports.ToastHost = ToastHost;
+exports.ToggleChip = ToggleChip;
 exports.ToolbarSearch = ToolbarSearch;
+exports.Tooltip = Tooltip;
 exports.TopBar = TopBar;
 exports.US_STATES = US_STATES;
 exports.ViewToggle = ViewToggle;
@@ -18240,4 +19215,5 @@ exports.parseDate = parseDate;
 exports.resolveThemeMode = resolveThemeMode;
 exports.shouldShowSidebarNavItem = shouldShowNavItem;
 exports.useTheme = useTheme;
+exports.useToast = useToast;
 //# sourceMappingURL=index.cjs.map