@actioneer/ads 0.6.0 → 0.7.0

package/components/sidebar.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import * as o from "react";
-import { MotionConfig as R, motion as _ } from "motion/react";
-import { User as j, PanelLeft as H } from "../lib/icons.js";
-import { cn as n } from "../lib/cn.js";
-import { springSidebar as E } from "../lib/motion.js";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import * as s from "react";
+import { MotionConfig as z, motion as _ } from "motion/react";
+import { User as j, PanelLeft as E } from "../lib/icons.js";
+import { cn as o } 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 k = o.createContext({
+const R = s.createContext({
   collapsed: !1,
   toggle: () => {
   },
@@ -15,94 +15,103 @@ const k = o.createContext({
   }
 });
 function M() {
-  return o.useContext(k);
+  return s.useContext(R);
 }
-const K = o.forwardRef(
+const K = s.forwardRef(
   ({
     className: t,
-    collapsed: r,
-    defaultCollapsed: i = !1,
-    onCollapsedChange: a,
-    keyboardToggle: s = !0,
-    ...d
-  }, l) => {
-    const [m, x] = o.useState(i), f = r !== void 0, u = f ? r : m, h = o.useCallback(
+    collapsed: e,
+    defaultCollapsed: a = !1,
+    onCollapsedChange: i,
+    animateOnMount: n = !1,
+    keyboardToggle: d = !0,
+    ...l
+  }, m) => {
+    const [v, y] = s.useState(a), b = e !== void 0, u = b ? e : v, g = s.useCallback(
       (p) => {
-        f || x(p), a == null || a(p);
+        b || y(p), i == null || i(p);
       },
-      [f, a]
-    ), g = o.useCallback(
-      () => h(!u),
-      [u, h]
+      [b, i]
+    ), h = s.useCallback(
+      () => g(!u),
+      [u, g]
     );
-    o.useEffect(() => {
-      if (!s) return;
-      const p = (b) => {
-        (b.metaKey || b.ctrlKey) && b.key.toLowerCase() === "b" && (b.preventDefault(), g());
+    s.useEffect(() => {
+      if (!d) return;
+      const p = (f) => {
+        (f.metaKey || f.ctrlKey) && f.key.toLowerCase() === "b" && (f.preventDefault(), h());
       };
       return document.addEventListener("keydown", p), () => document.removeEventListener("keydown", p);
-    }, [s, g]);
-    const v = o.useMemo(
-      () => ({ collapsed: u, toggle: g, setCollapsed: h }),
-      [u, g, h]
+    }, [d, h]);
+    const x = s.useMemo(
+      () => ({ collapsed: u, toggle: h, setCollapsed: g }),
+      [u, h, g]
     );
-    return /* @__PURE__ */ e(k.Provider, { value: v, children: /* @__PURE__ */ e(R, { reducedMotion: "user", children: /* @__PURE__ */ e(
+    return /* @__PURE__ */ r(R.Provider, { value: x, children: /* @__PURE__ */ r(z, { reducedMotion: "user", children: /* @__PURE__ */ r(
       _.aside,
       {
-        ref: l,
+        ref: m,
         "data-collapsed": u ? "true" : "false",
-        initial: !1,
-        animate: { width: u ? 56 : 240 },
-        transition: E,
-        className: n(
-          "group/sidebar flex h-full shrink-0 flex-col bg-transparent",
+        initial: n ? {
+          width: u ? 56 : 240,
+          transform: "translate3d(-100%, 0, 0)",
+          opacity: 0
+        } : !1,
+        animate: {
+          width: u ? 56 : 240,
+          transform: "translate3d(0, 0, 0)",
+          opacity: 1
+        },
+        transition: H,
+        className: o(
+          "group/sidebar flex h-full shrink-0 flex-col bg-background",
           t
         ),
-        ...d
+        ...l
       }
     ) }) });
   }
 );
 K.displayName = "Sidebar";
-function w({ children: t }) {
-  return /* @__PURE__ */ e("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: 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 z({
+function k({
   className: t,
-  onClick: r,
-  tooltipSide: i = "right",
-  ...a
+  onClick: e,
+  tooltipSide: a = "right",
+  ...i
 }) {
-  const { collapsed: s, toggle: d } = M();
-  return /* @__PURE__ */ e(
+  const { collapsed: n, toggle: d } = M();
+  return /* @__PURE__ */ r(
     I,
     {
-      side: i,
+      side: a,
       content: /* @__PURE__ */ c("span", { className: "flex items-center gap-1.5", children: [
-        s ? "Expand" : "Collapse",
+        n ? "Expand" : "Collapse",
         /* @__PURE__ */ c("span", { className: "flex items-center gap-0.5", children: [
-          /* @__PURE__ */ e(w, { children: "⌘" }),
-          /* @__PURE__ */ e(w, { children: "B" })
+          /* @__PURE__ */ r(S, { children: "⌘" }),
+          /* @__PURE__ */ r(S, { children: "B" })
         ] })
       ] }),
-      children: /* @__PURE__ */ e(
+      children: /* @__PURE__ */ r(
         "button",
         {
           type: "button",
-          "aria-label": s ? "Expand sidebar" : "Collapse sidebar",
-          "aria-pressed": s,
+          "aria-label": n ? "Expand sidebar" : "Collapse sidebar",
+          "aria-pressed": n,
           onClick: (l) => {
-            r == null || r(l), d();
+            e == null || e(l), d();
           },
-          className: n(
+          className: o(
             "inline-flex size-(--sidebar-item) shrink-0 items-center justify-center rounded-sm border border-transparent text-muted-foreground",
             "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,
-          children: /* @__PURE__ */ e(H, {})
+          ...i,
+          children: /* @__PURE__ */ r(E, {})
         }
       )
     }
@@ -110,14 +119,14 @@ function z({
 }
 function Y({
   logo: t,
-  href: r,
-  label: i = "Home",
-  showTrigger: a = !0,
-  children: s,
+  href: e,
+  label: a = "Home",
+  showTrigger: i = !0,
+  children: n,
   className: d,
   ...l
 }) {
-  const m = n(
+  const m = o(
     // 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",
@@ -125,156 +134,157 @@ function Y({
     // 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).
-    a && "group-data-[collapsed=true]/sidebar:group-hover/sidebar:hidden group-data-[collapsed=true]/sidebar:group-focus-within/sidebar:hidden"
+    i && "group-data-[collapsed=true]/sidebar:group-hover/sidebar:hidden group-data-[collapsed=true]/sidebar:group-focus-within/sidebar:hidden"
   );
   return /* @__PURE__ */ c(
     "div",
     {
-      className: n(
-        "flex h-(--sidebar-header) shrink-0 items-center justify-between gap-2 px-3",
+      className: o(
+        "flex h-(--sidebar-header) shrink-0 items-center justify-between gap-2 px-4",
         "group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
         d
       ),
       ...l,
       children: [
-        r ? /* @__PURE__ */ e("a", { href: r, "aria-label": i, className: m, children: t }) : /* @__PURE__ */ e("span", { className: m, children: t }),
-        a && /* @__PURE__ */ e("div", { className: "hidden group-data-[collapsed=true]/sidebar:group-hover/sidebar:flex group-data-[collapsed=true]/sidebar:group-focus-within/sidebar:flex", children: /* @__PURE__ */ e(z, { tooltipSide: "right" }) }),
+        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" }) }),
         /* @__PURE__ */ c("div", { className: "flex items-center gap-1 group-data-[collapsed=true]/sidebar:hidden", children: [
-          a && /* @__PURE__ */ e(z, { tooltipSide: "bottom" }),
-          s
+          i && /* @__PURE__ */ r(k, { tooltipSide: "bottom" }),
+          n
         ] })
       ]
     }
   );
 }
-const A = o.forwardRef(
-  ({ className: t, ...r }, i) => /* @__PURE__ */ e(
+const q = s.forwardRef(
+  ({ className: t, ...e }, a) => /* @__PURE__ */ r(
     "div",
     {
-      ref: i,
-      className: n(
+      ref: a,
+      className: o(
         "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
       ),
-      ...r
+      ...e
     }
   )
 );
-A.displayName = "SidebarHeader";
-const q = o.forwardRef(
-  ({ className: t, ...r }, i) => /* @__PURE__ */ e("nav", { ref: i, className: n("min-h-0 flex-1 space-y-5 overflow-y-auto p-3", t), ...r })
+q.displayName = "SidebarHeader";
+const A = s.forwardRef(
+  ({ className: t, ...e }, a) => /* @__PURE__ */ r("nav", { ref: a, className: o("min-h-0 flex-1 space-y-5 overflow-y-auto p-3", t), ...e })
 );
-q.displayName = "SidebarNav";
-const B = o.forwardRef(
-  ({ className: t, label: r, children: i, ...a }, s) => /* @__PURE__ */ c("div", { ref: s, className: t, ...a, children: [
-    r && /* @__PURE__ */ e("div", { className: "mb-1.5 px-3 text-[length:var(--sidebar-section-label-size)] leading-[var(--text-xs--line-height)] font-normal text-secondary group-data-[collapsed=true]/sidebar:hidden", children: r }),
-    /* @__PURE__ */ e("div", { className: "flex flex-col gap-0.5", children: i })
+A.displayName = "SidebarNav";
+const B = s.forwardRef(
+  ({ className: t, label: e, children: a, ...i }, n) => /* @__PURE__ */ c("div", { ref: n, className: t, ...i, children: [
+    e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-s leading-[var(--text-s--line-height)] font-medium text-ng10 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 })
   ] })
 );
 B.displayName = "SidebarSection";
-const D = o.forwardRef(
-  ({ className: t, icon: r, isActive: i, endContent: a, children: s, title: d, ...l }, m) => /* @__PURE__ */ c(
+const D = s.forwardRef(
+  ({ className: t, icon: e, isActive: a, endContent: i, children: n, title: d, ...l }, m) => /* @__PURE__ */ c(
     "a",
     {
       ref: m,
-      "aria-current": i ? "page" : void 0,
-      title: d ?? (typeof s == "string" ? s : void 0),
-      className: n(
-        "flex h-9 items-center gap-2.5 rounded-md px-3 text-[length:var(--sidebar-navigation-text-size)] leading-[var(--text-xs--line-height)] transition-colors",
+      "aria-current": a ? "page" : void 0,
+      title: d ?? (typeof n == "string" ? n : void 0),
+      className: o(
+        "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-ng12 transition-colors",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         "[&_svg]:size-4 [&_svg]:shrink-0",
         // 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",
-        i ? "bg-sidebar-accent font-normal text-foreground" : "text-primary hover:bg-sidebar-accent/60 hover:text-foreground",
+        a ? "border-ng4 bg-white" : "hover:bg-sidebar-accent/60",
         t
       ),
       ...l,
       children: [
-        r,
-        /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:hidden", children: s }),
-        a && /* @__PURE__ */ e("span", { className: "shrink-0 group-data-[collapsed=true]/sidebar:hidden", children: a })
+        a && s.isValidElement(e) ? s.cloneElement(e, { weight: "fill" }) : e,
+        /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:hidden", children: n }),
+        i && /* @__PURE__ */ r("span", { className: "shrink-0 group-data-[collapsed=true]/sidebar:hidden", children: i })
       ]
     }
   )
 );
 D.displayName = "SidebarItem";
-const F = o.forwardRef(
-  ({ className: t, ...r }, i) => /* @__PURE__ */ e(
+const F = s.forwardRef(
+  ({ className: t, ...e }, a) => /* @__PURE__ */ r(
     "div",
     {
-      ref: i,
-      className: n("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", t),
-      ...r
+      ref: a,
+      className: o("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", t),
+      ...e
     }
   )
 );
 F.displayName = "SidebarFooter";
-const W = o.forwardRef(
-  ({ className: t, icon: r, children: i, ...a }, s) => /* @__PURE__ */ e("div", { className: "px-3 pb-0.5 group-data-[collapsed=true]/sidebar:px-2", children: /* @__PURE__ */ c(
+const W = s.forwardRef(
+  ({ className: t, icon: e, children: a, ...i }, n) => /* @__PURE__ */ r("div", { className: "px-3 pb-0.5 group-data-[collapsed=true]/sidebar:px-2", children: /* @__PURE__ */ c(
     "button",
     {
-      ref: s,
+      ref: n,
       type: "button",
-      className: n(
+      className: o(
         "flex h-9 w-full items-center justify-start gap-2 rounded-md px-3",
-        "text-[length:var(--sidebar-navigation-text-size)] leading-[var(--text-xs--line-height)] font-normal text-primary",
+        "text-m leading-[var(--text-m--line-height)] font-normal text-ng12",
         // Reads as a normal nav item: transparent at rest, the shared grey
         // hover wash on hover (no fill-at-rest, no elevation).
         "transition-colors duration-150 ease-out motion-reduce:transition-none",
-        "hover:bg-sidebar-accent/60 hover:text-foreground",
+        "hover:bg-sidebar-accent/60",
         "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,
       children: [
-        r,
-        /* @__PURE__ */ e("span", { className: "truncate group-data-[collapsed=true]/sidebar:hidden", children: i })
+        e,
+        /* @__PURE__ */ r("span", { className: "truncate group-data-[collapsed=true]/sidebar:hidden", children: a })
       ]
     }
   ) })
 );
 W.displayName = "SidebarAction";
-const $ = o.forwardRef(
-  ({ className: t, label: r, children: i, ...a }, s) => /* @__PURE__ */ c(
+const $ = s.forwardRef(
+  ({ className: t, label: e, children: a, ...i }, n) => /* @__PURE__ */ c(
     "div",
     {
-      ref: s,
-      className: n("group-data-[collapsed=true]/sidebar:hidden", t),
-      ...a,
+      ref: n,
+      className: o("group-data-[collapsed=true]/sidebar:hidden", t),
+      ...i,
       children: [
-        r && /* @__PURE__ */ e("div", { className: "mb-1.5 px-3 text-[length:var(--sidebar-section-label-size)] leading-[var(--text-xs--line-height)] font-normal text-secondary", children: r }),
-        /* @__PURE__ */ e("div", { className: "flex flex-col gap-0.5", children: i })
+        e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-s leading-[var(--text-s--line-height)] font-medium text-ng10", children: e }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: a })
       ]
     }
   )
 );
 $.displayName = "SidebarHistory";
-const O = o.forwardRef(({ className: t, children: r, title: i, action: a, isActive: s, icon: d, ...l }, m) => {
-  const x = o.useRef(null), f = o.useRef(null), [u, h] = o.useState(0);
-  o.useLayoutEffect(() => {
-    const p = x.current, b = f.current;
-    if (!p || !b) return;
-    const N = () => {
-      const S = b.scrollWidth - p.clientWidth;
-      h(S > 0 ? S + (a ? 32 : 0) : 0);
+const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActive: n, icon: d, ...l }, m) => {
+  const v = s.useRef(null), y = s.useRef(null), [b, u] = s.useState(0);
+  s.useLayoutEffect(() => {
+    const x = v.current, p = y.current;
+    if (!x || !p) return;
+    const f = () => {
+      const w = p.scrollWidth - x.clientWidth;
+      u(w > 0 ? w + (i ? 32 : 0) : 0);
     };
-    N();
-    const y = new ResizeObserver(N);
-    return y.observe(p), y.observe(b), () => y.disconnect();
-  }, [r, a]);
-  const g = u > 0, v = Math.max(500, Math.round(u * 18));
+    f();
+    const N = new ResizeObserver(f);
+    return N.observe(x), N.observe(p), () => N.disconnect();
+  }, [e, i]);
+  const g = b > 0, h = Math.max(500, Math.round(b * 18));
   return /* @__PURE__ */ c(
     "div",
     {
-      className: n(
+      className: o(
         "group/hist relative flex items-center rounded-md transition-colors",
-        s ? "bg-sidebar-accent/60 text-foreground" : "text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground"
+        "text-ng12",
+        n ? "bg-sidebar-accent/60" : "hover:bg-sidebar-accent/60"
       ),
       children: [
-        d && /* @__PURE__ */ e(
+        d && /* @__PURE__ */ r(
           "span",
           {
             "aria-hidden": !0,
@@ -282,24 +292,24 @@ const O = o.forwardRef(({ className: t, children: r, title: i, action: a, isActi
             children: d
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r(
           "a",
           {
             ref: m,
-            title: i ?? (typeof r == "string" ? r : void 0),
-            className: n(
+            title: a ?? (typeof e == "string" ? e : void 0),
+            className: o(
               // 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-[length:var(--sidebar-navigation-text-size)] leading-[var(--text-xs--line-height)]",
+              "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
             ),
             ...l,
-            children: /* @__PURE__ */ e(
+            children: /* @__PURE__ */ r(
               "span",
               {
-                ref: x,
-                className: n(
+                ref: v,
+                className: o(
                   "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
@@ -307,30 +317,30 @@ const O = o.forwardRef(({ className: t, children: r, title: i, action: a, isActi
                   g && "[mask-image:linear-gradient(to_right,#000_calc(100%-1.5rem),transparent)]",
                   g && "group-hover/hist:[mask-image:linear-gradient(to_right,transparent,#000_1.25rem,#000_100%)]"
                 ),
-                children: /* @__PURE__ */ e(
+                children: /* @__PURE__ */ r(
                   "span",
                   {
-                    ref: f,
-                    className: n(
+                    ref: y,
+                    className: o(
                       "block w-max whitespace-nowrap transition-transform ease-linear",
                       g && "group-hover/hist:[transform:translateX(var(--mq-x))]",
                       "motion-reduce:transition-none motion-reduce:group-hover/hist:[transform:none]"
                     ),
                     style: {
-                      "--mq-x": `-${u}px`,
-                      transitionDuration: `${v}ms`
+                      "--mq-x": `-${b}px`,
+                      transitionDuration: `${h}ms`
                     },
-                    children: r
+                    children: e
                   }
                 )
               }
             )
           }
         ),
-        a && /* @__PURE__ */ e(
+        i && /* @__PURE__ */ r(
           "span",
           {
-            className: n(
+            className: o(
               // Rounded end matches the row's radius so the backdrop doesn't
               // square off the highlight's right corners.
               "absolute inset-y-0 right-0 flex items-center rounded-e-md pl-8 pr-1",
@@ -339,7 +349,7 @@ const O = o.forwardRef(({ className: t, children: r, title: i, action: a, isActi
               "pointer-events-none group-hover/hist:pointer-events-auto",
               "focus-within:pointer-events-auto focus-within:opacity-100"
             ),
-            children: a
+            children: i
           }
         )
       ]
@@ -347,21 +357,21 @@ const O = o.forwardRef(({ className: t, children: r, title: i, action: a, isActi
   );
 });
 O.displayName = "SidebarHistoryItem";
-const P = o.forwardRef(
-  ({ className: t, name: r, role: i, src: a, hideAvatar: s, ...d }, l) => /* @__PURE__ */ c(
+const P = s.forwardRef(
+  ({ className: t, name: e, role: a, src: i, hideAvatar: n, ...d }, l) => /* @__PURE__ */ c(
     "a",
     {
       ref: l,
-      className: n(
-        "flex items-center gap-2.5 rounded-md p-2 transition-colors hover:bg-sidebar-accent/60",
+      className: o(
+        "flex items-center gap-2.5 rounded-md border border-transparent p-2 transition-colors hover:border-ng10",
         "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
       ),
       ...d,
       children: [
-        !s && /* @__PURE__ */ e(L, { size: "sm", name: r, src: a }),
-        s && /* @__PURE__ */ e(
+        !n && /* @__PURE__ */ r(L, { size: "sm", name: e, src: i }),
+        n && /* @__PURE__ */ r(
           j,
           {
             "aria-hidden": !0,
@@ -369,8 +379,8 @@ const P = o.forwardRef(
           }
         ),
         /* @__PURE__ */ c("div", { className: "min-w-0 leading-tight group-data-[collapsed=true]/sidebar:hidden", children: [
-          /* @__PURE__ */ e("div", { className: "truncate text-base leading-[var(--text-base--line-height)] font-normal text-foreground", children: r }),
-          i && /* @__PURE__ */ e("div", { className: "truncate text-xs leading-[var(--text-xs--line-height)] text-tertiary", children: i })
+          /* @__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-xs leading-[var(--text-xs--line-height)] text-tertiary", children: a })
         ] })
       ]
     }
@@ -383,12 +393,12 @@ export {
   W as SidebarAction,
   Y as SidebarBrand,
   F as SidebarFooter,
-  A as SidebarHeader,
+  q as SidebarHeader,
   $ as SidebarHistory,
   O as SidebarHistoryItem,
   D as SidebarItem,
-  q as SidebarNav,
+  A as SidebarNav,
   B as SidebarSection,
-  z as SidebarTrigger,
+  k as SidebarTrigger,
   M as useSidebar
 };

package/components/skeleton.js

@@ -1,19 +1,20 @@
 "use client";
-import { jsx as o } from "react/jsx-runtime";
-import * as f from "react";
-import { cn as n } from "../lib/cn.js";
-const i = f.forwardRef(
-  ({ className: e, circle: r = !1, ...t }, a) => /* @__PURE__ */ o(
+import { jsx as n } from "react/jsx-runtime";
+import * as o from "react";
+import { cn as f } from "../lib/cn.js";
+const i = o.forwardRef(
+  ({ className: e, circle: r = !1, ...t }, a) => /* @__PURE__ */ n(
     "div",
     {
       ref: a,
       "aria-hidden": !0,
-      className: n(
+      className: f(
         "relative overflow-hidden bg-muted",
         r ? "rounded-full" : "rounded-md",
         "after:absolute after:inset-0 after:-translate-x-full",
         "after:bg-gradient-to-r after:from-transparent after:via-foreground/10 after:to-transparent",
-        "after:animate-[ads-shimmer_1.5s_infinite]",
+        "after:will-change-transform after:animate-[ads-shimmer_1.8s_ease-in-out_infinite]",
+        "motion-reduce:after:animate-none",
         e
       ),
       ...t

package/components/slider.js

@@ -44,7 +44,7 @@ const m = v.forwardRef(
             {
               className: s(
                 "pointer-events-none absolute size-4 -translate-x-1/2 rounded-full",
-                "border-2 border-background bg-brand shadow-elevation transition-shadow",
+                "border border-background bg-brand shadow-elevation transition-shadow",
                 "peer-focus-visible:ring-3 peer-focus-visible:ring-ring"
               ),
               style: { left: `${o}%` },

package/components/surface-loader.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface SurfaceLoaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Short status shown below the loader. */
+    label?: React.ReactNode;
+}
+/**
+ * Canonical loading state for a blocked panel, modal, or page. Owns the ADS
+ * surface spinner, spacing, and accessible busy semantics so products do not
+ * need to assemble their own full-surface loading moment.
+ */
+export declare const SurfaceLoader: React.ForwardRefExoticComponent<SurfaceLoaderProps & React.RefAttributes<HTMLDivElement>>;

package/components/surface-loader.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import * as u from "react";
+import { cn as c } from "../lib/cn.js";
+import { Spinner as f } from "./spinner.js";
+import { Text as n } from "./typography.js";
+const l = u.forwardRef(
+  ({
+    className: a,
+    label: r = "Preparing your workspace…",
+    role: i,
+    "aria-busy": t,
+    ...s
+  }, o) => /* @__PURE__ */ m(
+    "div",
+    {
+      ref: o,
+      role: i ?? "status",
+      "aria-busy": t ?? !0,
+      className: c(
+        "flex min-h-44 w-full flex-col items-center justify-center gap-3",
+        a
+      ),
+      ...s,
+      children: [
+        /* @__PURE__ */ e(f, { variant: "surface", size: "lg", "aria-hidden": !0 }),
+        r ? /* @__PURE__ */ e(n, { size: "sm", muted: !0, children: r }) : null
+      ]
+    }
+  )
+);
+l.displayName = "SurfaceLoader";
+export {
+  l as SurfaceLoader
+};