@actioneer/ads 1.0.8 → 1.0.10

package/components/sidebar.js

@@ -1,56 +1,56 @@
 "use client";
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import * as o from "react";
-import { MotionConfig as _, motion as z } from "motion/react";
-import { User as j, PanelLeft as E } from "../lib/icons.js";
+import { MotionConfig as j, motion as _ } from "motion/react";
+import { User as E, PanelLeft as H } from "../lib/icons.js";
 import { cn as n } from "../lib/cn.js";
-import { springSidebar as H } from "../lib/motion.js";
-import { Tooltip as I } from "./tooltip.js";
-import { Avatar as L } from "./avatar.js";
-const R = o.createContext({
+import { springSidebar as I } from "../lib/motion.js";
+import { Tooltip as L } from "./tooltip.js";
+import { Avatar as M } from "./avatar.js";
+const z = o.createContext({
   collapsed: !1,
   toggle: () => {
   },
   setCollapsed: () => {
   }
 });
-function M() {
-  return o.useContext(R);
+function W() {
+  return o.useContext(z);
 }
 const K = o.forwardRef(
   ({
-    className: t,
+    className: a,
     collapsed: e,
-    defaultCollapsed: a = !1,
-    onCollapsedChange: i,
+    defaultCollapsed: i = !1,
+    onCollapsedChange: t,
     animateOnMount: s = !1,
     keyboardToggle: d = !0,
     ...l
-  }, m) => {
-    const [v, y] = o.useState(a), g = e !== void 0, u = g ? e : v, b = o.useCallback(
+  }, b) => {
+    const [g, y] = o.useState(i), f = e !== void 0, u = f ? e : g, m = o.useCallback(
       (p) => {
-        g || y(p), i == null || i(p);
+        f || y(p), t == null || t(p);
       },
-      [g, i]
-    ), h = o.useCallback(
-      () => b(!u),
-      [u, b]
+      [f, t]
+    ), v = o.useCallback(
+      () => m(!u),
+      [u, m]
     );
     o.useEffect(() => {
       if (!d) return;
-      const p = (f) => {
-        (f.metaKey || f.ctrlKey) && f.key.toLowerCase() === "b" && (f.preventDefault(), h());
+      const p = (h) => {
+        (h.metaKey || h.ctrlKey) && h.key.toLowerCase() === "b" && (h.preventDefault(), v());
       };
       return document.addEventListener("keydown", p), () => document.removeEventListener("keydown", p);
-    }, [d, h]);
+    }, [d, v]);
     const x = o.useMemo(
-      () => ({ collapsed: u, toggle: h, setCollapsed: b }),
-      [u, h, b]
+      () => ({ collapsed: u, toggle: v, setCollapsed: m }),
+      [u, v, m]
     );
-    return /* @__PURE__ */ r(R.Provider, { value: x, children: /* @__PURE__ */ r(_, { reducedMotion: "user", children: /* @__PURE__ */ r(
-      z.aside,
+    return /* @__PURE__ */ r(z.Provider, { value: x, children: /* @__PURE__ */ r(j, { reducedMotion: "user", children: /* @__PURE__ */ r(
+      _.aside,
       {
-        ref: m,
+        ref: b,
         "data-collapsed": u ? "true" : "false",
         initial: s ? {
           width: u ? 56 : 240,
@@ -62,10 +62,10 @@ const K = o.forwardRef(
           transform: "translate3d(0, 0, 0)",
           opacity: 1
         },
-        transition: H,
+        transition: I,
         className: n(
           "group/sidebar flex h-full shrink-0 flex-col bg-background",
-          t
+          a
         ),
         ...l
       }
@@ -73,20 +73,20 @@ const K = o.forwardRef(
   }
 );
 K.displayName = "Sidebar";
-function S({ children: t }) {
-  return /* @__PURE__ */ r("kbd", { className: "inline-flex h-4 min-w-4 items-center justify-center rounded bg-background/20 px-1 text-xs leading-none", children: t });
+function S({ children: a }) {
+  return /* @__PURE__ */ r("kbd", { className: "inline-flex h-4 min-w-4 items-center justify-center rounded bg-background/20 px-1 text-xs leading-none", children: a });
 }
 function k({
-  className: t,
+  className: a,
   onClick: e,
-  tooltipSide: a = "right",
-  ...i
+  tooltipSide: i = "right",
+  ...t
 }) {
-  const { collapsed: s, toggle: d } = M();
+  const { collapsed: s, toggle: d } = W();
   return /* @__PURE__ */ r(
-    I,
+    L,
     {
-      side: a,
+      side: i,
       content: /* @__PURE__ */ c("span", { className: "flex items-center gap-1.5", children: [
         s ? "Expand" : "Collapse",
         /* @__PURE__ */ c("span", { className: "flex items-center gap-0.5", children: [
@@ -108,33 +108,35 @@ function k({
             "transition-colors hover:border-border hover:bg-elevated hover:text-foreground",
             "outline-none focus-visible:ring-3 focus-visible:ring-ring",
             "[&_svg]:size-4.5",
-            t
+            a
           ),
-          ...i,
-          children: /* @__PURE__ */ r(E, {})
+          ...t,
+          children: /* @__PURE__ */ r(H, {})
         }
       )
     }
   );
 }
-function Y({
-  logo: t,
+function Z({
+  logo: a,
   href: e,
-  label: a = "Home",
-  showTrigger: i = !0,
+  label: i = "Home",
+  showTrigger: t = !0,
   children: s,
   className: d,
   ...l
 }) {
-  const m = n(
-    // 20px mark centered in a 32px square — the same box as every other rail icon.
-    // group/brand lets a BrandMark logo play its blip loop on hover.
-    "group/brand flex size-(--sidebar-item) items-center justify-center",
-    "[&_img]:size-(--sidebar-logo) [&_svg]:size-(--sidebar-logo)",
+  const b = o.isValidElement(a) && a.type === R, g = n(
+    b ? "flex min-w-0 items-center rounded-m outline-none focus-visible:ring-3 focus-visible:ring-ring" : n(
+      // 20px mark centered in a 32px square — the same box as every other rail icon.
+      // group/brand lets a BrandMark logo play its blip loop on hover.
+      "group/brand flex size-(--sidebar-item) items-center justify-center",
+      "[&_img]:size-(--sidebar-logo) [&_svg]:size-(--sidebar-logo)"
+    ),
     // The logo owns the header at rest in BOTH states. On the collapsed rail
     // it swaps for the expand trigger only while the rail is hovered (or
     // holds keyboard focus, so the control stays reachable).
-    i && "group-data-[collapsed=true]/sidebar:group-hover/sidebar:hidden group-data-[collapsed=true]/sidebar:group-focus-within/sidebar:hidden"
+    t && "group-data-[collapsed=true]/sidebar:group-hover/sidebar:hidden group-data-[collapsed=true]/sidebar:group-focus-within/sidebar:hidden"
   );
   return /* @__PURE__ */ c(
     "div",
@@ -146,57 +148,91 @@ function Y({
       ),
       ...l,
       children: [
-        e ? /* @__PURE__ */ r("a", { href: e, "aria-label": a, className: m, children: t }) : /* @__PURE__ */ r("span", { className: m, children: t }),
-        i && /* @__PURE__ */ r("div", { className: "hidden group-data-[collapsed=true]/sidebar:group-hover/sidebar:flex group-data-[collapsed=true]/sidebar:group-focus-within/sidebar:flex", children: /* @__PURE__ */ r(k, { tooltipSide: "right" }) }),
+        e ? /* @__PURE__ */ r("a", { href: e, "aria-label": i, className: g, children: a }) : /* @__PURE__ */ r("span", { className: g, children: a }),
+        t && /* @__PURE__ */ r("div", { className: "hidden group-data-[collapsed=true]/sidebar:group-hover/sidebar:flex group-data-[collapsed=true]/sidebar:group-focus-within/sidebar:flex", children: /* @__PURE__ */ r(k, { tooltipSide: "right" }) }),
         /* @__PURE__ */ c("div", { className: "flex items-center gap-1 group-data-[collapsed=true]/sidebar:hidden", children: [
-          i && /* @__PURE__ */ r(k, { tooltipSide: "bottom" }),
+          t && /* @__PURE__ */ r(k, { tooltipSide: "bottom" }),
           s
         ] })
       ]
     }
   );
 }
+const R = o.forwardRef(
+  ({ className: a, name: e, logoSrc: i, showName: t = !0, ...s }, d) => {
+    const l = e.trim().charAt(0).toUpperCase();
+    return /* @__PURE__ */ c(
+      "span",
+      {
+        ref: d,
+        className: n("flex min-w-0 items-center gap-2.5", a),
+        ...s,
+        children: [
+          i ? /* @__PURE__ */ r(
+            "img",
+            {
+              src: i,
+              alt: t ? "" : e,
+              className: "size-(--sidebar-item) shrink-0 rounded-m object-contain"
+            }
+          ) : /* @__PURE__ */ r(
+            "span",
+            {
+              "aria-hidden": t || void 0,
+              role: t ? void 0 : "img",
+              "aria-label": t ? void 0 : e,
+              className: "flex size-(--sidebar-item) shrink-0 items-center justify-center rounded-m bg-wg12 text-m leading-[var(--text-m--line-height)] font-medium text-white",
+              children: l
+            }
+          ),
+          t && /* @__PURE__ */ r("span", { className: "min-w-0 truncate text-l leading-[var(--text-l--line-height)] font-medium text-foreground group-data-[collapsed=true]/sidebar:sr-only", children: e })
+        ]
+      }
+    );
+  }
+);
+R.displayName = "SidebarWorkspace";
 const q = o.forwardRef(
-  ({ className: t, ...e }, a) => /* @__PURE__ */ r(
+  ({ className: a, ...e }, i) => /* @__PURE__ */ r(
     "div",
     {
-      ref: a,
+      ref: i,
       className: n(
         "flex h-(--sidebar-header) shrink-0 items-center justify-between gap-2 px-3",
         "group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
-        t
+        a
       ),
       ...e
     }
   )
 );
 q.displayName = "SidebarHeader";
-const B = o.forwardRef(
-  ({ className: t, ...e }, a) => /* @__PURE__ */ r("nav", { ref: a, className: n("min-h-0 flex-1 space-y-5 overflow-y-auto p-3", t), ...e })
+const A = o.forwardRef(
+  ({ className: a, ...e }, i) => /* @__PURE__ */ r("nav", { ref: i, className: n("min-h-0 flex-1 space-y-5 overflow-y-auto p-3", a), ...e })
 );
-B.displayName = "SidebarNav";
-const D = o.forwardRef(
-  ({ className: t, label: e, children: a, ...i }, s) => /* @__PURE__ */ c("div", { ref: s, className: t, ...i, children: [
+A.displayName = "SidebarNav";
+const B = o.forwardRef(
+  ({ className: a, label: e, children: i, ...t }, s) => /* @__PURE__ */ c("div", { ref: s, className: a, ...t, children: [
     e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-s font-normal uppercase leading-4 tracking-wider text-tertiary group-data-[collapsed=true]/sidebar:hidden", children: e }),
-    /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5 group-data-[collapsed=true]/sidebar:gap-2", children: a })
+    /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5 group-data-[collapsed=true]/sidebar:gap-2", children: i })
   ] })
 );
-D.displayName = "SidebarSection";
-const F = o.forwardRef(
-  ({ className: t, icon: e, isActive: a, endContent: i, children: s, title: d, ...l }, m) => /* @__PURE__ */ c(
+B.displayName = "SidebarSection";
+const D = o.forwardRef(
+  ({ className: a, icon: e, isActive: i, endContent: t, children: s, title: d, ...l }, b) => /* @__PURE__ */ c(
     "a",
     {
-      ref: m,
-      "aria-current": a ? "page" : void 0,
+      ref: b,
+      "aria-current": i ? "page" : void 0,
       title: d ?? (typeof s == "string" ? s : void 0),
       className: n(
         "group/sidebar-item flex h-9 items-center gap-2.5 rounded-md border border-transparent px-3 text-m leading-[var(--text-m--line-height)] font-normal text-sidebar-foreground",
-        "transition-[background-color,border-color,color] duration-150 ease-out motion-reduce:transition-none",
+        "transition-[background-color,border-color,color,box-shadow] duration-150 ease-out motion-reduce:transition-none",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         // Collapsed: a centered square (--sidebar-item) so every rail item lines up.
         "group-data-[collapsed=true]/sidebar:mx-auto group-data-[collapsed=true]/sidebar:size-(--sidebar-item) group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:p-0",
-        a ? "bg-sidebar-accent text-sidebar-accent-foreground" : "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground",
-        t
+        i ? "bg-sidebar-accent text-sidebar-accent-foreground shadow-nav-active" : "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground",
+        a
       ),
       ...l,
       children: [
@@ -205,29 +241,29 @@ const F = o.forwardRef(
           {
             "aria-hidden": !0,
             className: "flex shrink-0 items-center justify-center transition-transform duration-150 ease-out group-hover/sidebar-item:scale-110 motion-reduce:transition-none motion-reduce:group-hover/sidebar-item:scale-100 [&_svg]:size-4 [&_svg]:shrink-0",
-            children: a && o.isValidElement(e) ? o.cloneElement(e, { weight: "fill" }) : e
+            children: i && o.isValidElement(e) ? o.cloneElement(e, { weight: "fill" }) : e
           }
         ),
         /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:hidden", children: s }),
-        i && /* @__PURE__ */ r("span", { className: "shrink-0 group-data-[collapsed=true]/sidebar:hidden", children: i })
+        t && /* @__PURE__ */ r("span", { className: "shrink-0 group-data-[collapsed=true]/sidebar:hidden", children: t })
       ]
     }
   )
 );
-F.displayName = "SidebarItem";
-const W = o.forwardRef(
-  ({ className: t, ...e }, a) => /* @__PURE__ */ r(
+D.displayName = "SidebarItem";
+const F = o.forwardRef(
+  ({ className: a, ...e }, i) => /* @__PURE__ */ r(
     "div",
     {
-      ref: a,
-      className: n("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", t),
+      ref: i,
+      className: n("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", a),
       ...e
     }
   )
 );
-W.displayName = "SidebarFooter";
-const $ = o.forwardRef(
-  ({ className: t, icon: e, children: a, ...i }, s) => /* @__PURE__ */ r("div", { className: "px-3 pb-0.5 group-data-[collapsed=true]/sidebar:px-2", children: /* @__PURE__ */ c(
+F.displayName = "SidebarFooter";
+const U = o.forwardRef(
+  ({ className: a, icon: e, children: i, ...t }, s) => /* @__PURE__ */ r("div", { className: "px-3 pb-0.5 group-data-[collapsed=true]/sidebar:px-2", children: /* @__PURE__ */ c(
     "button",
     {
       ref: s,
@@ -242,53 +278,53 @@ const $ = o.forwardRef(
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         "[&_svg]:size-4 [&_svg]:shrink-0",
         "group-data-[collapsed=true]/sidebar:mx-auto group-data-[collapsed=true]/sidebar:size-(--sidebar-item) group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-0",
-        t
+        a
       ),
-      ...i,
+      ...t,
       children: [
         e,
-        /* @__PURE__ */ r("span", { className: "truncate group-data-[collapsed=true]/sidebar:hidden", children: a })
+        /* @__PURE__ */ r("span", { className: "truncate group-data-[collapsed=true]/sidebar:hidden", children: i })
       ]
     }
   ) })
 );
-$.displayName = "SidebarAction";
-const A = o.forwardRef(
-  ({ className: t, label: e, children: a, ...i }, s) => /* @__PURE__ */ c(
+U.displayName = "SidebarAction";
+const V = o.forwardRef(
+  ({ className: a, label: e, children: i, ...t }, s) => /* @__PURE__ */ c(
     "div",
     {
       ref: s,
-      className: n("group-data-[collapsed=true]/sidebar:hidden", t),
-      ...i,
+      className: n("group-data-[collapsed=true]/sidebar:hidden", a),
+      ...t,
       children: [
-        e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-s leading-[var(--text-s--line-height)] font-medium text-on-warm-grey-secondary", children: e }),
-        /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: a })
+        e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-s font-normal uppercase leading-4 tracking-wider text-tertiary", children: e }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: i })
       ]
     }
   )
 );
-A.displayName = "SidebarHistory";
-const O = o.forwardRef(({ className: t, children: e, title: a, action: i, isActive: s, icon: d, ...l }, m) => {
-  const v = o.useRef(null), y = o.useRef(null), [g, u] = o.useState(0);
+V.displayName = "SidebarHistory";
+const $ = o.forwardRef(({ className: a, children: e, title: i, action: t, isActive: s, icon: d, ...l }, b) => {
+  const g = o.useRef(null), y = o.useRef(null), [f, u] = o.useState(0);
   o.useLayoutEffect(() => {
-    const x = v.current, p = y.current;
+    const x = g.current, p = y.current;
     if (!x || !p) return;
-    const f = () => {
+    const h = () => {
       const w = p.scrollWidth - x.clientWidth;
-      u(w > 0 ? w + (i ? 32 : 0) : 0);
+      u(w > 0 ? w + (t ? 32 : 0) : 0);
     };
-    f();
-    const N = new ResizeObserver(f);
+    h();
+    const N = new ResizeObserver(h);
     return N.observe(x), N.observe(p), () => N.disconnect();
-  }, [e, i]);
-  const b = g > 0, h = Math.max(500, Math.round(g * 18));
+  }, [e, t]);
+  const m = f > 0, v = Math.max(500, Math.round(f * 18));
   return /* @__PURE__ */ c(
     "div",
     {
       className: n(
         "group/hist relative flex items-center rounded-md transition-colors",
         "text-sidebar-foreground",
-        s ? "bg-sidebar-accent text-sidebar-accent-foreground" : "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground"
+        s ? "bg-sidebar-accent text-sidebar-accent-foreground shadow-nav-active" : "hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground"
       ),
       children: [
         d && /* @__PURE__ */ r(
@@ -302,27 +338,27 @@ const O = o.forwardRef(({ className: t, children: e, title: a, action: i, isActi
         /* @__PURE__ */ r(
           "a",
           {
-            ref: m,
-            title: a ?? (typeof e == "string" ? e : void 0),
+            ref: b,
+            title: i ?? (typeof e == "string" ? e : void 0),
             className: n(
               // Left pad matches a SidebarItem's text column (px-3 + icon size-4 +
               // gap-2.5 = 2.375rem) so history titles line up under the nav labels.
               "block min-w-0 flex-1 rounded-md py-1.5 pr-3 ps-(--sidebar-text-indent) text-m leading-[var(--text-m--line-height)] font-normal",
               "outline-none focus-visible:ring-3 focus-visible:ring-ring",
-              t
+              a
             ),
             ...l,
             children: /* @__PURE__ */ r(
               "span",
               {
-                ref: v,
+                ref: g,
                 className: n(
                   "block overflow-hidden",
                   // Rest: fade the right edge (no ellipsis). Hover: the title scrolls,
                   // so fade the LEFT edge where it exits; the action backdrop (or the
                   // string's own end) handles the right.
-                  b && "[mask-image:linear-gradient(to_right,var(--color-wg12)_calc(100%-1.5rem),transparent)]",
-                  b && "group-hover/hist:[mask-image:linear-gradient(to_right,transparent,var(--color-wg12)_1.25rem,var(--color-wg12)_100%)]"
+                  m && "[mask-image:linear-gradient(to_right,var(--color-wg12)_calc(100%-1.5rem),transparent)]",
+                  m && "group-hover/hist:[mask-image:linear-gradient(to_right,transparent,var(--color-wg12)_1.25rem,var(--color-wg12)_100%)]"
                 ),
                 children: /* @__PURE__ */ r(
                   "span",
@@ -330,12 +366,12 @@ const O = o.forwardRef(({ className: t, children: e, title: a, action: i, isActi
                     ref: y,
                     className: n(
                       "block w-max whitespace-nowrap transition-transform ease-linear",
-                      b && "group-hover/hist:[transform:translateX(var(--mq-x))]",
+                      m && "group-hover/hist:[transform:translateX(var(--mq-x))]",
                       "motion-reduce:transition-none motion-reduce:group-hover/hist:[transform:none]"
                     ),
                     style: {
-                      "--mq-x": `-${g}px`,
-                      transitionDuration: `${h}ms`
+                      "--mq-x": `-${f}px`,
+                      transitionDuration: `${v}ms`
                     },
                     children: e
                   }
@@ -344,7 +380,7 @@ const O = o.forwardRef(({ className: t, children: e, title: a, action: i, isActi
             )
           }
         ),
-        i && /* @__PURE__ */ r(
+        t && /* @__PURE__ */ r(
           "span",
           {
             className: n(
@@ -357,16 +393,16 @@ const O = o.forwardRef(({ className: t, children: e, title: a, action: i, isActi
               "pointer-events-none group-hover/hist:pointer-events-auto",
               "focus-within:pointer-events-auto focus-within:opacity-100"
             ),
-            children: i
+            children: t
           }
         )
       ]
     }
   );
 });
-O.displayName = "SidebarHistoryItem";
-const P = o.forwardRef(
-  ({ className: t, name: e, role: a, src: i, hideAvatar: s, ...d }, l) => /* @__PURE__ */ c(
+$.displayName = "SidebarHistoryItem";
+const O = o.forwardRef(
+  ({ className: a, name: e, role: i, src: t, hideAvatar: s, ...d }, l) => /* @__PURE__ */ c(
     "a",
     {
       ref: l,
@@ -374,13 +410,13 @@ const P = o.forwardRef(
         "flex items-center gap-2.5 rounded-md border border-transparent p-2 transition-colors hover:border-wg10",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         "group-data-[collapsed=true]/sidebar:mx-auto group-data-[collapsed=true]/sidebar:size-(--sidebar-item) group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:p-0",
-        t
+        a
       ),
       ...d,
       children: [
-        !s && /* @__PURE__ */ r(L, { size: "sm", name: e, src: i }),
+        !s && /* @__PURE__ */ r(M, { size: "sm", name: e, src: t }),
         s && /* @__PURE__ */ r(
-          j,
+          E,
           {
             "aria-hidden": !0,
             className: "hidden size-4 shrink-0 text-muted-foreground group-data-[collapsed=true]/sidebar:block"
@@ -388,25 +424,26 @@ const P = o.forwardRef(
         ),
         /* @__PURE__ */ c("div", { className: "min-w-0 leading-tight group-data-[collapsed=true]/sidebar:hidden", children: [
           /* @__PURE__ */ r("div", { className: "truncate text-base leading-[var(--text-base--line-height)] font-normal text-foreground", children: e }),
-          a && /* @__PURE__ */ r("div", { className: "truncate text-s leading-[var(--text-s--line-height)] text-tertiary", children: a })
+          i && /* @__PURE__ */ r("div", { className: "truncate text-s leading-[var(--text-s--line-height)] text-tertiary", children: i })
         ] })
       ]
     }
   )
 );
-P.displayName = "SidebarAccount";
+O.displayName = "SidebarAccount";
 export {
   K as Sidebar,
-  P as SidebarAccount,
-  $ as SidebarAction,
-  Y as SidebarBrand,
-  W as SidebarFooter,
+  O as SidebarAccount,
+  U as SidebarAction,
+  Z as SidebarBrand,
+  F as SidebarFooter,
   q as SidebarHeader,
-  A as SidebarHistory,
-  O as SidebarHistoryItem,
-  F as SidebarItem,
-  B as SidebarNav,
-  D as SidebarSection,
+  V as SidebarHistory,
+  $ as SidebarHistoryItem,
+  D as SidebarItem,
+  A as SidebarNav,
+  B as SidebarSection,
   k as SidebarTrigger,
-  M as useSidebar
+  R as SidebarWorkspace,
+  W as useSidebar
 };

package/components/sparkline.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+/**
+ * Sparkline — a tiny, axis-less trend line for a stat card (principle
+ * `analytics-surfaces`, user-mandated 2026-11-14).
+ *
+ * It draws one series in a chart-palette colour: a 2px line, a wash under it
+ * that fades top-to-bottom from 20% of the colour to nothing (the same wash
+ * `LineChart` carries), and a dot on the latest value. There are no axes,
+ * gridlines, labels or tooltip — the stat card's number is the value; the
+ * sparkline only says which way it has been moving. It fills its container's
+ * width; give it a height.
+ *
+ * Use it inside a resting stat card, beside the number, or in a table's
+ * "Last 7 days" column at `height={28}` with `dot={false}` (principle
+ * `collection-screens`). For a trend people read values from, use `LineChart`.
+ */
+export type SparklineColor = 1 | 2 | 3 | 4 | 5 | 6;
+export interface SparklineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+    /** The series, oldest first. Needs at least two values to draw. */
+    data: number[];
+    /** Which `chart-1…6` series colour to draw in. @default 1 */
+    color?: SparklineColor;
+    /** Height in px. @default 48 */
+    height?: number;
+    /** Mark the latest value with a round dot. Turn off in table cells. @default true */
+    dot?: boolean;
+    /** Accessible summary of the trend, e.g. "Calls analysed rising over 7 days". */
+    label: string;
+}
+export declare const Sparkline: React.ForwardRefExoticComponent<SparklineProps & React.RefAttributes<HTMLDivElement>>;

package/components/sparkline.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import * as u from "react";
+import { cn as j } from "../lib/cn.js";
+const r = 100, m = 4, z = u.forwardRef(
+  ({ className: $, data: k, color: h = 1, height: e = 48, dot: v = !0, label: x, style: b, ...y }, g) => {
+    const d = u.useId().replace(/[^a-zA-Z0-9]/g, ""), n = `var(--color-chart-${h})`, s = k.filter((a) => Number.isFinite(a)), p = Math.min(...s), w = Math.max(...s) - p || 1, t = s.map((a, i) => [
+      s.length > 1 ? i / (s.length - 1) * r : r,
+      m + (e - 2 * m) * (1 - (a - p) / w)
+    ]), f = t.map(([a, i], N) => `${N === 0 ? "M" : "L"}${a.toFixed(2)},${i.toFixed(2)}`).join(" "), L = t.length > 1 ? `${f} L${r},${e} L0,${e} Z` : "", l = t[t.length - 1];
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        ref: g,
+        "data-slot": "sparkline",
+        role: "img",
+        "aria-label": x,
+        className: j("relative w-full", $),
+        style: { height: e, ...b },
+        ...y,
+        children: [
+          t.length > 1 && /* @__PURE__ */ c(
+            "svg",
+            {
+              "aria-hidden": !0,
+              className: "absolute inset-0 size-full overflow-visible",
+              viewBox: `0 0 ${r} ${e}`,
+              preserveAspectRatio: "none",
+              children: [
+                /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ c("linearGradient", { id: `${d}-wash`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ o("stop", { offset: "0%", stopColor: n, stopOpacity: 0.2 }),
+                  /* @__PURE__ */ o("stop", { offset: "100%", stopColor: n, stopOpacity: 0 })
+                ] }) }),
+                /* @__PURE__ */ o("path", { "data-slot": "sparkline-area", d: L, fill: `url(#${d}-wash)`, stroke: "none" }),
+                /* @__PURE__ */ o(
+                  "path",
+                  {
+                    "data-slot": "sparkline-line",
+                    d: f,
+                    fill: "none",
+                    stroke: n,
+                    strokeWidth: 2,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    vectorEffect: "non-scaling-stroke"
+                  }
+                )
+              ]
+            }
+          ),
+          v && l && t.length > 1 && // The end dot is HTML so it stays round while the SVG stretches.
+          /* @__PURE__ */ o(
+            "span",
+            {
+              "aria-hidden": !0,
+              "data-slot": "sparkline-dot",
+              className: "absolute size-2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-card",
+              style: { left: `${l[0] / r * 100}%`, top: `${l[1] / e * 100}%`, background: n }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+z.displayName = "Sparkline";
+export {
+  z as Sparkline
+};

package/components/table.d.ts

@@ -95,6 +95,14 @@ export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement>
     disclosureLabel?: string;
     /** @deprecated Existing visual-only marker. New rows should pass an action via onClick. */
     isInteractive?: boolean;
+    /**
+     * This row's detail panel is open (e.g. the shell-level inline `Drawer`
+     * that `onClick` opened). Paints the same soft-teal left-to-right fade as a
+     * selected row and sets `aria-current="true"`, without needing a selection
+     * column. Clear it when the panel closes. Independent of `selectionMode`:
+     * a row can be both active and checked.
+     */
+    isActive?: boolean;
 }
 export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
 export interface TableColumnProps extends React.ThHTMLAttributes<HTMLTableCellElement> {