@devalok/shilp-sutra 0.22.2 → 0.23.0

package/dist/shell/notification-center.js

@@ -13,8 +13,8 @@ function v(t, d) {
   return t.getFullYear() === d.getFullYear() && t.getMonth() === d.getMonth() && t.getDate() === d.getDate();
 }
 function M(t) {
-  const d = new Date(t), i = /* @__PURE__ */ new Date(), l = /* @__PURE__ */ new Date();
-  return l.setDate(i.getDate() - 1), v(d, i) ? "Today" : v(d, l) ? "Yesterday" : "Earlier";
+  const d = new Date(t), n = /* @__PURE__ */ new Date(), l = /* @__PURE__ */ new Date();
+  return l.setDate(n.getDate() - 1), v(d, n) ? "Today" : v(d, l) ? "Yesterday" : "Earlier";
 }
 const w = {
   INFO: "bg-info-9",
@@ -24,25 +24,25 @@ const w = {
 function ee({
   notification: t,
   onRead: d,
-  onNavigate: i,
+  onNavigate: n,
   getRoute: l,
   onDismiss: u
 }) {
-  const g = l(t), o = () => {
-    t.isRead || d(t.id), g && i(g);
+  const h = l(t), i = () => {
+    t.isRead || d(t.id), h && n(h);
   };
   return /* @__PURE__ */ a(
     "div",
     {
       role: "button",
       tabIndex: 0,
-      onClick: o,
+      onClick: i,
       onKeyDown: (r) => {
-        (r.key === "Enter" || r.key === " ") && (r.preventDefault(), o());
+        (r.key === "Enter" || r.key === " ") && (r.preventDefault(), i());
       },
       className: p(
         "group relative flex w-full cursor-pointer items-start gap-ds-04 px-ds-05 py-ds-04 text-left transition-colors duration-fast-02 ease-productive-standard",
-        "hover:bg-surface-2",
+        "hover:bg-surface-raised",
         !t.isRead && "bg-accent-1"
       ),
       children: [
@@ -85,7 +85,7 @@ function ee({
               onKeyDown: (c) => c.stopPropagation(),
               className: p(
                 "rounded-ds-md px-ds-03 py-ds-01 text-ds-sm font-medium transition-colors duration-fast-02 ease-productive-standard",
-                r.variant === "primary" ? "bg-accent-9 text-accent-fg hover:bg-accent-10" : r.variant === "danger" ? "text-error-11 hover:bg-error-3" : "text-surface-fg-muted hover:bg-surface-3"
+                r.variant === "primary" ? "bg-accent-9 text-accent-fg hover:bg-accent-10" : r.variant === "danger" ? "text-error-11 hover:bg-error-3" : "text-surface-fg-muted hover:bg-surface-raised-hover"
               ),
               children: r.label
             },
@@ -101,7 +101,7 @@ function ee({
               r.stopPropagation(), u(t.id);
             },
             onKeyDown: (r) => r.stopPropagation(),
-            className: "absolute right-ds-03 top-ds-03 hidden rounded-ds-sm p-ds-01 text-surface-fg-subtle transition-[color,background-color,opacity] duration-fast-01 ease-productive-standard hover:bg-surface-3 hover:text-surface-fg-muted group-hover:flex group-focus-within:flex",
+            className: "absolute right-ds-03 top-ds-03 hidden rounded-ds-sm p-ds-01 text-surface-fg-subtle transition-[color,background-color,opacity] duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted group-hover:flex group-focus-within:flex",
             children: /* @__PURE__ */ e(W, { className: "h-ico-sm w-ico-sm" })
           }
         )
@@ -113,12 +113,12 @@ const te = z.forwardRef(
   ({
     notifications: t = [],
     unreadCount: d,
-    open: i,
+    open: n,
     onOpenChange: l,
     isLoading: u = !1,
-    hasMore: g = !1,
-    onFetchMore: o,
-    onMarkRead: h,
+    hasMore: h = !1,
+    onFetchMore: i,
+    onMarkRead: g,
     onMarkAllRead: r,
     onNavigate: c,
     getNotificationRoute: D,
@@ -130,48 +130,48 @@ const te = z.forwardRef(
     className: R,
     ...k
   }, P) => {
-    const y = B(null), n = d ?? t.filter((s) => !s.isRead).length, K = D ?? (() => null), Y = x(
+    const y = B(null), o = d ?? t.filter((s) => !s.isRead).length, K = D ?? (() => null), Y = x(
       (s) => {
         l == null || l(!1), c == null || c(s);
       },
       [c, l]
     ), E = x(
       (s) => {
-        h == null || h(s);
+        g == null || g(s);
       },
-      [h]
+      [g]
     ), S = x(() => {
       const s = y.current;
-      !s || u || !g || s.scrollTop + s.clientHeight >= s.scrollHeight - 50 && (o == null || o());
-    }, [u, g, o]), A = t.reduce(
+      !s || u || !h || s.scrollTop + s.clientHeight >= s.scrollHeight - 50 && (i == null || i());
+    }, [u, h, i]), A = t.reduce(
       (s, m) => {
         const f = M(m.createdAt);
         return s[f] || (s[f] = []), s[f].push(m), s;
       },
       {}
     ), H = ["Today", "Yesterday", "Earlier"];
-    return /* @__PURE__ */ a(X, { open: i, onOpenChange: l, children: [
+    return /* @__PURE__ */ a(X, { open: n, onOpenChange: l, children: [
       /* @__PURE__ */ a(F, { children: [
         /* @__PURE__ */ e(J, { asChild: !0, children: /* @__PURE__ */ e(_, { asChild: !0, children: /* @__PURE__ */ a(
           "button",
           {
             ...k,
             ref: P,
-            "aria-label": n > 0 ? `Notifications, ${n} unread` : "Notifications",
+            "aria-label": o > 0 ? `Notifications, ${o} unread` : "Notifications",
             className: p(
-              "relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-2 text-surface-fg-muted transition-colors ease-productive-standard hover:bg-surface-3",
+              "relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised text-surface-fg-muted transition-colors ease-productive-standard hover:bg-surface-raised-hover",
               R
             ),
             children: [
               /* @__PURE__ */ e(Q, { className: "h-ico-sm w-ico-sm", "aria-hidden": "true" }),
-              n > 0 && /* @__PURE__ */ e(
+              o > 0 && /* @__PURE__ */ e(
                 N.span,
                 {
                   initial: { rotate: 0 },
                   animate: { rotate: [0, -3, 3, -1, 1, 0] },
                   transition: { duration: 0.4, ease: "easeInOut" },
                   className: "absolute -right-ds-01 -top-ds-01 flex h-4 min-w-4 items-center justify-center rounded-ds-full bg-accent-9 px-ds-02 text-ds-xs font-semibold text-accent-fg",
-                  children: n > 99 ? "99+" : n
+                  children: o > 99 ? "99+" : o
                 }
               )
             ]
@@ -183,7 +183,7 @@ const te = z.forwardRef(
         q,
         {
           className: p(
-            "w-[380px] rounded-ds-xl border border-surface-border-strong bg-surface-1 p-0 shadow-03",
+            "w-[380px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating",
             j
           ),
           sideOffset: 8,
@@ -192,10 +192,10 @@ const te = z.forwardRef(
             /* @__PURE__ */ a("div", { className: "flex items-center justify-between border-b border-surface-border-strong px-ds-05 py-ds-04", children: [
               /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
                 /* @__PURE__ */ e("h3", { className: "text-ds-md font-semibold text-surface-fg", children: "Notifications" }),
-                n > 0 && /* @__PURE__ */ e("span", { className: "flex h-5 min-w-5 items-center justify-center rounded-ds-full bg-accent-2 px-ds-02b text-ds-sm font-semibold text-accent-11", children: n })
+                o > 0 && /* @__PURE__ */ e("span", { className: "flex h-5 min-w-5 items-center justify-center rounded-ds-full bg-accent-2 px-ds-02b text-ds-sm font-semibold text-accent-11", children: o })
               ] }),
               /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
-                n > 0 && r && /* @__PURE__ */ a(
+                o > 0 && r && /* @__PURE__ */ a(
                   "button",
                   {
                     type: "button",
@@ -218,13 +218,13 @@ const te = z.forwardRef(
                 className: "max-h-[420px] overflow-y-auto",
                 children: [
                   t.length === 0 ? T || /* @__PURE__ */ a("div", { className: "flex flex-col items-center justify-center px-ds-05 py-ds-09", children: [
-                    /* @__PURE__ */ e("div", { className: "flex h-ds-lg w-ds-lg items-center justify-center rounded-ds-full bg-surface-2", children: /* @__PURE__ */ e(V, { className: "h-ico-lg w-ico-lg text-surface-fg-subtle" }) }),
+                    /* @__PURE__ */ e("div", { className: "flex h-ds-lg w-ds-lg items-center justify-center rounded-ds-full bg-surface-raised", children: /* @__PURE__ */ e(V, { className: "h-ico-lg w-ico-lg text-surface-fg-subtle" }) }),
                     /* @__PURE__ */ e("p", { className: "mt-ds-04 text-ds-md text-surface-fg-subtle", children: "No notifications yet" }),
                     /* @__PURE__ */ e("p", { className: "mt-ds-02 text-ds-sm text-surface-fg-subtle", children: "You're all caught up!" })
                   ] }) : H.map((s) => {
                     const m = A[s];
                     return !m || m.length === 0 ? null : /* @__PURE__ */ a("div", { children: [
-                      /* @__PURE__ */ e("div", { className: "sticky top-0 z-raised bg-surface-1 px-ds-05 py-ds-02b", children: /* @__PURE__ */ e("span", { className: "text-ds-sm font-medium text-surface-fg-subtle", children: s }) }),
+                      /* @__PURE__ */ e("div", { className: "sticky top-0 z-raised bg-surface-overlay px-ds-05 py-ds-02b", children: /* @__PURE__ */ e("span", { className: "text-ds-sm font-medium text-surface-fg-subtle", children: s }) }),
                       m.map((f, O) => /* @__PURE__ */ e(
                         N.div,
                         {

package/dist/shell/notification-preferences.js

@@ -79,7 +79,7 @@ const _ = {
                 t < f.length - 1 && "border-b border-surface-border-strong"
               ),
               children: [
-                /* @__PURE__ */ e("div", { className: "flex h-ds-sm w-ds-sm shrink-0 items-center justify-center rounded-ds-lg bg-surface-2", children: /* @__PURE__ */ e("span", { className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm text-surface-fg-muted", "aria-hidden": "true", children: a.icon }) }),
+                /* @__PURE__ */ e("div", { className: "flex h-ds-sm w-ds-sm shrink-0 items-center justify-center rounded-ds-lg bg-surface-raised", children: /* @__PURE__ */ e("span", { className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm text-surface-fg-muted", "aria-hidden": "true", children: a.icon }) }),
                 /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ e("p", { className: "text-ds-md font-medium text-surface-fg", children: a.label }),
                   /* @__PURE__ */ e("p", { className: "text-ds-sm text-surface-fg-subtle", children: V(l.projectId) })
@@ -110,7 +110,7 @@ const _ = {
                   {
                     type: "button",
                     onClick: () => p == null ? void 0 : p(l.id),
-                    className: "shrink-0 rounded p-ds-02b text-surface-fg-subtle transition-colors hover:bg-surface-2 hover:text-error-11",
+                    className: "shrink-0 rounded p-ds-02b text-surface-fg-subtle transition-colors hover:bg-surface-raised hover:text-error-11",
                     children: /* @__PURE__ */ e(ee, { className: "h-ico-sm w-ico-sm" })
                   }
                 )

package/dist/shell/sidebar.js

@@ -45,7 +45,7 @@ function re({ className: r }) {
     }
   );
 }
-const B = "relative gap-ds-04 rounded-ds-lg px-ds-04 py-ds-03 transition-colors duration-fast-02", F = "bg-accent-2 text-accent-11 after:absolute after:right-0 after:top-0 after:h-full after:w-ds-01 after:rounded-l-ds-full after:bg-accent-9 after:content-['']", G = "text-surface-fg-subtle hover:bg-surface-3 hover:text-surface-fg";
+const B = "relative gap-ds-04 rounded-ds-lg px-ds-04 py-ds-03 transition-colors duration-fast-02", F = "bg-accent-2 text-accent-11 after:absolute after:right-0 after:top-0 after:h-full after:w-ds-01 after:rounded-l-ds-full after:bg-accent-9 after:content-['']", G = "text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg";
 function se({
   item: r,
   isActive: t,
@@ -86,7 +86,7 @@ function se({
         /* @__PURE__ */ e(Y, { asChild: !0, children: /* @__PURE__ */ e(
           "button",
           {
-            className: "absolute right-ds-02 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-ds-md text-surface-fg-subtle transition-colors hover:bg-surface-3 hover:text-surface-fg group-data-[collapsible=icon]:hidden",
+            className: "absolute right-ds-02 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-ds-md text-surface-fg-subtle transition-colors hover:bg-surface-raised-hover hover:text-surface-fg group-data-[collapsible=icon]:hidden",
             "aria-label": `Toggle ${r.title}`,
             children: /* @__PURE__ */ e(ae, { className: "h-4 w-4 transition-transform duration-fast-02 ease-productive-standard group-data-[state=open]/collapsible:rotate-90" })
           }
@@ -167,7 +167,7 @@ const ne = m.forwardRef(
         ref: W,
         "aria-label": "Main navigation",
         className: b(
-          "z-raised hidden h-full flex-col border-r border-surface-border-strong bg-surface-1 md:flex",
+          "z-raised hidden h-full flex-col border-r border-surface-border-strong bg-surface-sunken md:flex",
           D
         ),
         children: [
@@ -175,7 +175,7 @@ const ne = m.forwardRef(
           t && /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-04 px-ds-06 pb-ds-05", children: [
             /* @__PURE__ */ s(_, { className: "h-ds-sm-plus w-ds-sm-plus", children: [
               t.image ? /* @__PURE__ */ e(P, { src: t.image, alt: t.name }) : null,
-              /* @__PURE__ */ e(ee, { className: "bg-surface-3 text-surface-fg", children: (N = t.name) == null ? void 0 : N.charAt(0).toUpperCase() })
+              /* @__PURE__ */ e(ee, { className: "bg-surface-raised-hover text-surface-fg", children: (N = t.name) == null ? void 0 : N.charAt(0).toUpperCase() })
             ] }),
             /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-col", children: [
               /* @__PURE__ */ e("span", { className: "truncate text-ds-md text-surface-fg", children: t.name }),
@@ -216,13 +216,13 @@ const ne = m.forwardRef(
           ] }),
           a ? /* @__PURE__ */ s(M, { className: "gap-ds-03 px-ds-06 py-ds-05", children: [
             a.slot && /* @__PURE__ */ e("div", { children: a.slot }),
-            a.promo && /* @__PURE__ */ s("div", { className: "relative rounded-ds-lg border border-surface-border bg-surface-2 p-ds-04 shadow-01", children: [
+            a.promo && /* @__PURE__ */ s("div", { className: "relative rounded-ds-lg border border-surface-border bg-surface-raised p-ds-04 shadow-raised", children: [
               a.promo.onDismiss && /* @__PURE__ */ e(
                 "button",
                 {
                   onClick: a.promo.onDismiss,
                   "aria-label": "Dismiss",
-                  className: "absolute right-ds-02 top-ds-02 flex h-5 w-5 items-center justify-center rounded-ds-md text-surface-fg-subtle transition-colors hover:bg-surface-3 hover:text-surface-fg",
+                  className: "absolute right-ds-02 top-ds-02 flex h-5 w-5 items-center justify-center rounded-ds-md text-surface-fg-subtle transition-colors hover:bg-surface-raised-hover hover:text-surface-fg",
                   children: /* @__PURE__ */ e(re, { className: "h-3.5 w-3.5" })
                 }
               ),

package/dist/shell/top-bar.js

@@ -1,14 +1,14 @@
 "use client";
-import { jsx as e, jsxs as c, Fragment as D } from "react/jsx-runtime";
+import { jsx as e, jsxs as d, Fragment as D } from "react/jsx-runtime";
 import * as l from "react";
 import { useColorMode as U } from "../hooks/use-color-mode.js";
 import { Avatar as A, AvatarImage as I, AvatarFallback as L } from "../ui/avatar.js";
 import { DropdownMenu as S, DropdownMenuTrigger as F, DropdownMenuContent as O, DropdownMenuItem as f, DropdownMenuSeparator as h } from "../ui/dropdown-menu.js";
 import { Tooltip as x, TooltipTrigger as b, TooltipContent as w } from "../ui/tooltip.js";
 import { IconUser as _, IconSun as z, IconMoon as E, IconLogout as P } from "@tabler/icons-react";
-import { cn as d } from "../ui/lib/utils.js";
+import { cn as c } from "../ui/lib/utils.js";
 const N = l.forwardRef(
-  ({ className: r, children: s, ...t }, a) => {
+  ({ className: r, children: s, ...t }, o) => {
     const n = l.Children.toArray(s).some(
       (i) => l.isValidElement(i) && i.type === p
     );
@@ -16,9 +16,9 @@ const N = l.forwardRef(
       "div",
       {
         ...t,
-        ref: a,
-        className: d(
-          "z-sticky w-full border-b border-surface-border-strong bg-surface-2 px-ds-05 py-ds-04 md:px-ds-06",
+        ref: o,
+        className: c(
+          "z-sticky w-full border-b border-surface-border-strong bg-surface-sunken px-ds-05 py-ds-04 md:px-ds-06",
           n ? "grid grid-cols-[1fr_auto_1fr] items-center" : "flex items-center",
           r
         ),
@@ -28,81 +28,81 @@ const N = l.forwardRef(
   }
 );
 N.displayName = "TopBar";
-const T = l.forwardRef(
-  ({ className: r, children: s, ...t }, a) => /* @__PURE__ */ e(
+const y = l.forwardRef(
+  ({ className: r, children: s, ...t }, o) => /* @__PURE__ */ e(
     "div",
     {
-      ref: a,
-      className: d("flex items-center gap-ds-04", r),
+      ref: o,
+      className: c("flex items-center gap-ds-04", r),
       ...t,
       children: s
     }
   )
 );
-T.displayName = "TopBar.Left";
+y.displayName = "TopBar.Left";
 const p = l.forwardRef(
-  ({ className: r, children: s, ...t }, a) => /* @__PURE__ */ e(
+  ({ className: r, children: s, ...t }, o) => /* @__PURE__ */ e(
     "div",
     {
-      ref: a,
-      className: d("flex items-center justify-center px-ds-04", r),
+      ref: o,
+      className: c("flex items-center justify-center px-ds-04", r),
       ...t,
       children: s
     }
   )
 );
 p.displayName = "TopBar.Center";
-const y = l.forwardRef(
-  ({ className: r, children: s, ...t }, a) => /* @__PURE__ */ e(
+const T = l.forwardRef(
+  ({ className: r, children: s, ...t }, o) => /* @__PURE__ */ e(
     "div",
     {
-      ref: a,
-      className: d("ml-auto flex items-center gap-ds-04", r),
+      ref: o,
+      className: c("ml-auto flex items-center gap-ds-04", r),
       ...t,
       children: s
     }
   )
 );
-y.displayName = "TopBar.Right";
+T.displayName = "TopBar.Right";
 const V = {
   tight: "gap-ds-02",
   default: "gap-ds-04",
   loose: "gap-ds-06"
 }, B = l.forwardRef(
-  ({ gap: r = "default", className: s, children: t, ...a }, n) => /* @__PURE__ */ e(
+  ({ gap: r = "default", className: s, children: t, ...o }, n) => /* @__PURE__ */ e(
     "div",
     {
       ref: n,
-      className: d("flex items-center", V[r], s),
-      ...a,
+      className: c("flex items-center", V[r], s),
+      ...o,
       children: t
     }
   )
 );
 B.displayName = "TopBar.Section";
-const C = l.forwardRef(({ icon: r, tooltip: s, className: t, ...a }, n) => /* @__PURE__ */ c(x, { children: [
+const C = l.forwardRef(({ icon: r, tooltip: s, className: t, ...o }, n) => /* @__PURE__ */ d(x, { children: [
   /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(
     "button",
     {
       ref: n,
       type: "button",
-      className: d(
-        "flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-3 text-surface-fg-muted transition-[color,background-color,border-color,transform] hover:bg-surface-4 active:scale-90 duration-fast-01 ease-productive-standard",
+      className: c(
+        "flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised-hover text-surface-fg-muted transition-[color,background-color,border-color,transform] hover:bg-surface-raised-active active:scale-90 duration-fast-01 ease-productive-standard",
         t
       ),
-      ...a,
+      ...o,
       children: /* @__PURE__ */ e("span", { className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm", "aria-hidden": "true", children: r })
     }
   ) }),
   /* @__PURE__ */ e(w, { side: "bottom", align: "center", children: s })
 ] }));
 C.displayName = "TopBar.IconButton";
-const k = l.forwardRef(
-  ({ className: r, children: s, ...t }, a) => /* @__PURE__ */ e(
+const v = l.forwardRef(
+  ({ className: r, children: s, ...t }, o) => /* @__PURE__ */ e(
     "h2",
     {
-      ref: a,
-      className: d(
+      ref: o,
+      className: c(
         "hidden text-ds-lg text-surface-fg md:block",
         r
       ),
@@ -111,42 +111,42 @@ const k = l.forwardRef(
     }
   )
 );
-k.displayName = "TopBar.Title";
-const M = l.forwardRef(
-  ({ user: r, onNavigate: s, onLogout: t, userMenuItems: a, className: n }, i) => {
+v.displayName = "TopBar.Title";
+const k = l.forwardRef(
+  ({ user: r, onNavigate: s, onLogout: t, userMenuItems: o, className: n }, i) => {
     var u;
-    const { colorMode: m, toggleColorMode: R } = U();
-    return /* @__PURE__ */ c(S, { children: [
-      /* @__PURE__ */ c(x, { children: [
+    const { colorMode: m, toggleColorMode: M } = U();
+    return /* @__PURE__ */ d(S, { children: [
+      /* @__PURE__ */ d(x, { children: [
         /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(F, { asChild: !0, children: /* @__PURE__ */ e(
           "button",
           {
             ref: i,
             type: "button",
-            className: d("flex items-center gap-ds-03 outline-none", n),
-            children: /* @__PURE__ */ c(A, { className: "h-ds-sm-plus w-ds-sm-plus cursor-pointer", children: [
+            className: c("flex items-center gap-ds-03 outline-none", n),
+            children: /* @__PURE__ */ d(A, { className: "h-ds-sm-plus w-ds-sm-plus cursor-pointer", children: [
               r.image ? /* @__PURE__ */ e(I, { src: r.image, alt: r.name }) : null,
-              /* @__PURE__ */ e(L, { className: "bg-surface-3 text-surface-fg", children: (u = r.name) == null ? void 0 : u.charAt(0).toUpperCase() })
+              /* @__PURE__ */ e(L, { className: "bg-surface-raised-hover text-surface-fg", children: (u = r.name) == null ? void 0 : u.charAt(0).toUpperCase() })
             ] })
           }
         ) }) }),
         /* @__PURE__ */ e(w, { side: "bottom", align: "center", children: "User Menu" })
       ] }),
-      /* @__PURE__ */ c(
+      /* @__PURE__ */ d(
         O,
         {
-          className: "w-[200px] rounded-ds-xl border border-surface-border-strong bg-surface-1 p-0 shadow-03",
+          className: "w-[200px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating",
           sideOffset: 8,
           align: "end",
           children: [
-            /* @__PURE__ */ c("div", { className: "border-b border-surface-border-strong px-ds-05 py-ds-04", children: [
+            /* @__PURE__ */ d("div", { className: "border-b border-surface-border-strong px-ds-05 py-ds-04", children: [
               /* @__PURE__ */ e("p", { className: "text-ds-md text-surface-fg", children: r.name }),
               r.email && /* @__PURE__ */ e("p", { className: "text-ds-sm text-surface-fg-subtle", children: r.email })
             ] }),
-            /* @__PURE__ */ c(
+            /* @__PURE__ */ d(
               f,
               {
-                className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-2",
+                className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
                 onClick: () => s == null ? void 0 : s("/profile"),
                 children: [
                   /* @__PURE__ */ e(_, { className: "h-ico-sm w-ico-sm text-surface-fg-muted" }),
@@ -154,61 +154,61 @@ const M = l.forwardRef(
                 ]
               }
             ),
-            a == null ? void 0 : a.map((o, v) => {
+            o == null ? void 0 : o.map((a, R) => {
               const j = {
                 error: "text-error-11",
                 success: "text-success-11",
                 warning: "text-warning-11",
                 info: "text-info-11"
-              }, g = o.color ? j[o.color] ?? "text-surface-fg-muted" : "text-surface-fg-muted";
-              return /* @__PURE__ */ c(l.Fragment, { children: [
-                o.separator && /* @__PURE__ */ e(h, { className: "bg-surface-border" }),
-                /* @__PURE__ */ c(
+              }, g = a.color ? j[a.color] ?? "text-surface-fg-muted" : "text-surface-fg-muted";
+              return /* @__PURE__ */ d(l.Fragment, { children: [
+                a.separator && /* @__PURE__ */ e(h, { className: "bg-surface-border" }),
+                /* @__PURE__ */ d(
                   f,
                   {
-                    className: d(
-                      "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-2",
-                      o.disabled && "pointer-events-none opacity-action-disabled"
+                    className: c(
+                      "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
+                      a.disabled && "pointer-events-none opacity-action-disabled"
                     ),
-                    disabled: o.disabled,
+                    disabled: a.disabled,
                     onClick: () => {
-                      o.disabled || (o.onClick ? o.onClick() : o.href && (s == null || s(o.href)));
+                      a.disabled || (a.onClick ? a.onClick() : a.href && (s == null || s(a.href)));
                     },
                     children: [
-                      o.icon && /* @__PURE__ */ e(
+                      a.icon && /* @__PURE__ */ e(
                         "span",
                         {
-                          className: d(
+                          className: c(
                             "[&>svg]:h-ico-sm [&>svg]:w-ico-sm",
                             g
                           ),
-                          children: o.icon
+                          children: a.icon
                         }
                       ),
-                      /* @__PURE__ */ e("span", { className: d("text-ds-md", g), children: o.label }),
-                      o.badge != null && o.badge !== !1 && (typeof o.badge == "string" ? /* @__PURE__ */ e("span", { className: "ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-ds-full bg-error-9 px-ds-02 text-[10px] font-semibold leading-none text-accent-fg", children: o.badge }) : /* @__PURE__ */ e("span", { className: "ml-auto h-[8px] w-[8px] rounded-ds-full bg-error-9" }))
+                      /* @__PURE__ */ e("span", { className: c("text-ds-md", g), children: a.label }),
+                      a.badge != null && a.badge !== !1 && (typeof a.badge == "string" ? /* @__PURE__ */ e("span", { className: "ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-ds-full bg-error-9 px-ds-02 text-[10px] font-semibold leading-none text-accent-fg", children: a.badge }) : /* @__PURE__ */ e("span", { className: "ml-auto h-[8px] w-[8px] rounded-ds-full bg-error-9" }))
                     ]
                   }
                 )
-              ] }, o.label + v);
+              ] }, a.label + R);
             }),
-            /* @__PURE__ */ c(
+            /* @__PURE__ */ d(
               f,
               {
-                className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-2",
-                onClick: R,
+                className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
+                onClick: M,
                 children: [
                   m === "dark" ? /* @__PURE__ */ e(z, { className: "h-ico-sm w-ico-sm text-surface-fg-muted" }) : /* @__PURE__ */ e(E, { className: "h-ico-sm w-ico-sm text-surface-fg-muted" }),
                   /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg-muted", children: m === "dark" ? "Light Mode" : "Dark Mode" })
                 ]
               }
             ),
-            t && /* @__PURE__ */ c(D, { children: [
+            t && /* @__PURE__ */ d(D, { children: [
               /* @__PURE__ */ e(h, { className: "bg-surface-border" }),
-              /* @__PURE__ */ c(
+              /* @__PURE__ */ d(
                 f,
                 {
-                  className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-2",
+                  className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
                   onClick: t,
                   children: [
                     /* @__PURE__ */ e(P, { className: "h-ico-sm w-ico-sm text-error-11" }),
@@ -223,15 +223,15 @@ const M = l.forwardRef(
     ] });
   }
 );
-M.displayName = "TopBar.UserMenu";
+k.displayName = "TopBar.UserMenu";
 const X = Object.assign(N, {
-  Left: T,
+  Left: y,
   Center: p,
-  Right: y,
+  Right: T,
   Section: B,
   IconButton: C,
-  Title: k,
-  UserMenu: M
+  Title: v,
+  UserMenu: k
 });
 export {
   X as TopBar

package/dist/tailwind/index.cjs

@@ -178,15 +178,28 @@ const o = {
         "secondary-12": "var(--color-secondary-12)",
         "secondary-fg": "var(--color-secondary-fg)",
         // ═══ NEW: Surface ═══
-        "surface-1": "var(--color-surface-1)",
-        "surface-2": "var(--color-surface-2)",
-        "surface-3": "var(--color-surface-3)",
-        "surface-4": "var(--color-surface-4)",
+        "surface-base": "var(--color-surface-base)",
+        "surface-sunken": "var(--color-surface-sunken)",
+        "surface-raised": "var(--color-surface-raised)",
+        "surface-overlay": "var(--color-surface-overlay)",
+        "surface-raised-hover": "var(--color-surface-raised-hover)",
+        "surface-raised-active": "var(--color-surface-raised-active)",
+        "surface-inverted": "var(--color-surface-inverted)",
+        "surface-inverted-fg": "var(--color-surface-inverted-fg)",
+        "surface-disabled": "var(--color-surface-disabled)",
+        "surface-fg-disabled": "var(--color-surface-fg-disabled)",
+        // Deprecated — remove in next major
+        "surface-1": "var(--color-surface-base)",
+        "surface-2": "var(--color-surface-raised)",
+        "surface-3": "var(--color-surface-raised-hover)",
+        "surface-4": "var(--color-surface-raised-active)",
         "surface-fg": "var(--color-surface-fg)",
         "surface-fg-muted": "var(--color-surface-fg-muted)",
         "surface-fg-subtle": "var(--color-surface-fg-subtle)",
         "surface-border": "var(--color-surface-border)",
         "surface-border-strong": "var(--color-surface-border-strong)",
+        "surface-border-subtle": "var(--color-surface-border-subtle)",
+        backdrop: "var(--color-backdrop)",
         // ═══ NEW: Status (step subsets) ═══
         "error-3": "var(--color-error-3)",
         "error-7": "var(--color-error-7)",
@@ -310,12 +323,21 @@ const o = {
         "gradient-brand-dark": "var(--gradient-brand-dark)"
       },
       boxShadow: {
-        "01": "var(--shadow-01)",
-        "02": "var(--shadow-02)",
-        "03": "var(--shadow-03)",
-        "04": "var(--shadow-04)",
-        "05": "var(--shadow-05)",
-        brand: "var(--shadow-brand)"
+        raised: "var(--shadow-raised)",
+        "raised-hover": "var(--shadow-raised-hover)",
+        floating: "var(--shadow-floating)",
+        overlay: "var(--shadow-overlay)",
+        brand: "var(--shadow-brand)",
+        glow: "var(--shadow-glow)",
+        inset: "var(--shadow-inset)",
+        "ring-sm": "var(--shadow-ring-sm)",
+        ring: "var(--shadow-ring)",
+        // Deprecated — remove in next major
+        "01": "var(--shadow-raised)",
+        "02": "var(--shadow-raised-hover)",
+        "03": "var(--shadow-floating)",
+        "04": "var(--shadow-overlay)",
+        "05": "var(--shadow-overlay)"
       },
       transitionDuration: {
         instant: "var(--duration-instant)",
@@ -358,7 +380,7 @@ const o = {
         ".focus-ring": {
           "&:focus-visible": {
             outline: "none",
-            "box-shadow": "0 0 0 2px var(--color-surface-1), 0 0 0 4px var(--color-accent-9)"
+            "box-shadow": "0 0 0 2px var(--color-surface-base), 0 0 0 4px var(--color-accent-9)"
           }
         },
         ".focus-ring-inset": {

package/dist/tailwind/preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAiY3B,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAuZ3B,CAAA;AAED,eAAe,MAAM,CAAA"}