@devalok/shilp-sutra 0.18.2 → 0.19.0

package/dist/shell/bottom-navbar.js

@@ -82,7 +82,7 @@ const B = w.forwardRef(
             /* @__PURE__ */ t(
               "div",
               {
-                className: "absolute bottom-[72px] left-0 right-0 rounded-t-ds-2xl border-t border-surface-border-strong bg-surface-1 p-ds-05 pb-ds-03",
+                className: "absolute bottom-[72px] left-0 right-0 rounded-t-ds-2xl border-t border-surface-border-strong bg-surface-2 p-ds-05 pb-ds-03",
                 onClick: (e) => e.stopPropagation(),
                 onKeyDown: (e) => e.stopPropagation(),
                 children: [
@@ -93,7 +93,7 @@ const B = w.forwardRef(
                       {
                         onClick: () => c(!1),
                         "aria-label": "Close more menu",
-                        className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-full hover:bg-surface-2",
+                        className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-full hover:bg-surface-3",
                         children: /* @__PURE__ */ s(k, { className: "h-ico-sm w-ico-sm text-surface-fg-muted", "aria-hidden": "true" })
                       }
                     )
@@ -105,7 +105,7 @@ const B = w.forwardRef(
                       onClick: () => c(!1),
                       className: o(
                         "flex flex-col items-center gap-ds-02b rounded-ds-xl p-ds-04 text-ds-sm transition-colors",
-                        m(e.href, e.exact) ? "bg-surface-2 text-accent-11" : "text-surface-fg-subtle hover:bg-surface-2"
+                        m(e.href, e.exact) ? "bg-surface-3 text-accent-11" : "text-surface-fg-subtle hover:bg-surface-3"
                       ),
                       children: [
                         /* @__PURE__ */ s("span", { className: "[&>svg]:h-ico-md [&>svg]:w-ico-md", children: e.icon }),
@@ -127,7 +127,7 @@ const B = w.forwardRef(
           ref: b,
           "aria-label": "Mobile navigation",
           className: o(
-            "fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-1 px-ds-05 pb-ds-05b pt-0 md:hidden",
+            "fixed bottom-0 left-0 right-0 z-sticky flex w-full flex-row items-start justify-between border-t border-surface-border-strong bg-surface-2 px-ds-05 pb-ds-05b pt-0 md:hidden",
             h
           ),
           children: [

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", 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-2 hover:text-surface-fg";
+const B = "relative gap-ds-04 rounded-ds-lg px-ds-04 py-ds-03 transition-colors", 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";
 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-2 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-3 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" })
           }

package/dist/shell/top-bar.d.ts

@@ -1,7 +1,9 @@
 "use client";
 /**
- * TopBar -- Application top bar with sidebar trigger, user menu, and action
- * buttons. All data is props-driven (no Zustand stores or Remix hooks).
+ * TopBar v2 — Composition-based application top bar.
+ *
+ * Subcomponents: TopBar.Left, TopBar.Center, TopBar.Right,
+ * TopBar.Section, TopBar.IconButton, TopBar.Title, TopBar.UserMenu.
  */
 import * as React from 'react';
 export interface TopBarUser {
@@ -27,28 +29,51 @@ export interface UserMenuItem {
     /** Whether the item is disabled */
     disabled?: boolean;
 }
-export interface TopBarProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Page title displayed on desktop */
-    pageTitle?: string;
-    /** Current user information for the avatar dropdown */
-    user?: TopBarUser | null;
-    /** Called when the user clicks a navigation item (e.g. "Profile", "Login") */
+interface TopBarRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+interface TopBarLeftProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+interface TopBarCenterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+interface TopBarRightProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+declare const gapMap: {
+    readonly tight: "gap-ds-02";
+    readonly default: "gap-ds-04";
+    readonly loose: "gap-ds-06";
+};
+interface TopBarSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+    gap?: keyof typeof gapMap;
+    children: React.ReactNode;
+}
+interface TopBarIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: React.ReactNode;
+    tooltip: string;
+}
+interface TopBarTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    children: React.ReactNode;
+}
+interface TopBarUserMenuProps {
+    user: TopBarUser;
     onNavigate?: (path: string) => void;
-    /** Called when the user clicks the logout button */
     onLogout?: () => void;
-    /** Called when the search button is clicked */
-    onSearchClick?: () => void;
-    /** Called when the AI chat button is clicked */
-    onAiChatClick?: () => void;
-    /** Optional mobile logo element */
-    mobileLogo?: React.ReactNode;
-    /** Notification center slot -- render your NotificationCenter here */
-    notificationSlot?: React.ReactNode;
-    /** Custom menu items rendered between Profile and Dark/Light Mode */
     userMenuItems?: UserMenuItem[];
-    /** Additional className */
     className?: string;
 }
-declare const TopBar: React.ForwardRefExoticComponent<TopBarProps & React.RefAttributes<HTMLDivElement>>;
+export type TopBarProps = TopBarRootProps;
+declare const TopBar: React.ForwardRefExoticComponent<TopBarRootProps & React.RefAttributes<HTMLDivElement>> & {
+    Left: React.ForwardRefExoticComponent<TopBarLeftProps & React.RefAttributes<HTMLDivElement>>;
+    Center: React.ForwardRefExoticComponent<TopBarCenterProps & React.RefAttributes<HTMLDivElement>>;
+    Right: React.ForwardRefExoticComponent<TopBarRightProps & React.RefAttributes<HTMLDivElement>>;
+    Section: React.ForwardRefExoticComponent<TopBarSectionProps & React.RefAttributes<HTMLDivElement>>;
+    IconButton: React.ForwardRefExoticComponent<TopBarIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    Title: React.ForwardRefExoticComponent<TopBarTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    UserMenu: React.ForwardRefExoticComponent<TopBarUserMenuProps & React.RefAttributes<HTMLButtonElement>>;
+};
 export { TopBar };
 //# sourceMappingURL=top-bar.d.ts.map

package/dist/shell/top-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../src/shell/top-bar.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuB9B,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uDAAuD;IACvD,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IACxB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,mCAAmC;IACnC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,sEAAsE;IACtE,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,qEAAqE;IACrE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;IAC9B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAMD,QAAA,MAAM,MAAM,oFAwOX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../src/shell/top-bar.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsB9B,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAMD,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAgCD,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAmBD,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAmBD,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAmBD,QAAA,MAAM,MAAM;;;;CAIF,CAAA;AAEV,UAAU,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,GAAG,CAAC,EAAE,MAAM,OAAO,MAAM,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAmBD,UAAU,qBACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;CAChB;AAiCD,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAsBD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,UAAU,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAiJD,MAAM,MAAM,WAAW,GAAG,eAAe,CAAA;AAEzC,QAAA,MAAM,MAAM;;;;;;;;CAQV,CAAA;AAEF,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/shell/top-bar.js

@@ -1,175 +1,238 @@
 "use client";
-import { jsxs as s, jsx as e, Fragment as I } from "react/jsx-runtime";
-import * as w from "react";
-import { useColorMode as j } from "../hooks/use-color-mode.js";
-import { Avatar as A, AvatarImage as K, AvatarFallback as F } from "../ui/avatar.js";
-import { DropdownMenu as U, DropdownMenuTrigger as B, DropdownMenuContent as E, DropdownMenuItem as a, DropdownMenuSeparator as N } from "../ui/dropdown-menu.js";
-import { Tooltip as t, TooltipTrigger as n, TooltipContent as i } from "../ui/tooltip.js";
-import { SidebarTrigger as R } from "../ui/sidebar.js";
-import { IconSearch as z, IconSparkles as L, IconUser as O, IconSun as P, IconMoon as q, IconLogout as G } from "@tabler/icons-react";
-import { cn as l } from "../ui/lib/utils.js";
-const H = w.forwardRef(
-  ({
-    pageTitle: m = "",
-    user: c,
-    onNavigate: d,
-    onLogout: f,
-    onSearchClick: u,
-    onAiChatClick: p,
-    mobileLogo: h,
-    notificationSlot: y,
-    userMenuItems: o,
-    className: C,
-    ...k
-  }, v) => {
-    var g;
-    const { colorMode: b, toggleColorMode: M } = j(), S = () => {
-      u ? u() : document.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          key: "k",
-          ctrlKey: !0,
-          bubbles: !0
-        })
-      );
-    };
-    return /* @__PURE__ */ s(
+import { jsx as e, jsxs as c, 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";
+const N = l.forwardRef(
+  ({ className: r, children: s, ...t }, a) => {
+    const n = l.Children.toArray(s).some(
+      (i) => l.isValidElement(i) && i.type === p
+    );
+    return /* @__PURE__ */ e(
       "div",
       {
-        ...k,
-        ref: v,
-        className: l(
-          "z-sticky flex w-full items-center border-b border-surface-border-strong bg-surface-1 px-ds-05 py-ds-04 md:px-ds-06",
-          C
+        ...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",
+          n ? "grid grid-cols-[1fr_auto_1fr] items-center" : "flex items-center",
+          r
         ),
-        children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-04", children: [
-            /* @__PURE__ */ e(R, { className: "hidden text-surface-fg-muted md:flex" }),
-            h && /* @__PURE__ */ e("div", { className: "md:hidden", children: h }),
-            m && /* @__PURE__ */ e("h2", { className: "hidden text-ds-lg text-surface-fg md:block", children: m })
-          ] }),
-          /* @__PURE__ */ s("div", { className: "ml-auto flex items-center gap-ds-03 md:gap-ds-05", children: [
-            /* @__PURE__ */ s(t, { children: [
-              /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ e(
-                "button",
-                {
-                  type: "button",
-                  onClick: S,
-                  "aria-label": "Search (Ctrl+K)",
-                  className: "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 hover:bg-surface-3",
-                  children: /* @__PURE__ */ e(z, { className: "h-ico-sm w-ico-sm", "aria-hidden": "true" })
-                }
-              ) }),
-              /* @__PURE__ */ e(i, { side: "bottom", align: "center", children: "Search (Ctrl+K)" })
-            ] }),
-            y,
-            p && /* @__PURE__ */ s(t, { children: [
-              /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ e(
-                "button",
-                {
-                  type: "button",
-                  onClick: p,
-                  "aria-label": "AI Chat",
-                  className: "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 hover:bg-surface-3",
-                  children: /* @__PURE__ */ e(L, { className: "h-ico-sm w-ico-sm", "aria-hidden": "true" })
-                }
-              ) }),
-              /* @__PURE__ */ e(i, { side: "bottom", align: "center", children: "AI Chat" })
+        children: s
+      }
+    );
+  }
+);
+N.displayName = "TopBar";
+const T = l.forwardRef(
+  ({ className: r, children: s, ...t }, a) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: a,
+      className: d("flex items-center gap-ds-04", r),
+      ...t,
+      children: s
+    }
+  )
+);
+T.displayName = "TopBar.Left";
+const p = l.forwardRef(
+  ({ className: r, children: s, ...t }, a) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: a,
+      className: d("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(
+    "div",
+    {
+      ref: a,
+      className: d("ml-auto flex items-center gap-ds-04", r),
+      ...t,
+      children: s
+    }
+  )
+);
+y.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(
+    "div",
+    {
+      ref: n,
+      className: d("flex items-center", V[r], s),
+      ...a,
+      children: t
+    }
+  )
+);
+B.displayName = "TopBar.Section";
+const C = l.forwardRef(({ icon: r, tooltip: s, className: t, ...a }, n) => /* @__PURE__ */ c(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-colors hover:bg-surface-4",
+        t
+      ),
+      ...a,
+      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 M = l.forwardRef(
+  ({ className: r, children: s, ...t }, a) => /* @__PURE__ */ e(
+    "h2",
+    {
+      ref: a,
+      className: d(
+        "hidden text-ds-lg text-surface-fg md:block",
+        r
+      ),
+      ...t,
+      children: s
+    }
+  )
+);
+M.displayName = "TopBar.Title";
+const R = l.forwardRef(
+  ({ user: r, onNavigate: s, onLogout: t, userMenuItems: a, className: n }, i) => {
+    var u;
+    const { colorMode: m, toggleColorMode: k } = U();
+    return /* @__PURE__ */ c(S, { children: [
+      /* @__PURE__ */ c(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: [
+              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(w, { side: "bottom", align: "center", children: "User Menu" })
+      ] }),
+      /* @__PURE__ */ c(
+        O,
+        {
+          className: "w-[200px] rounded-ds-xl border border-surface-border-strong bg-surface-1 p-0 shadow-03",
+          sideOffset: 8,
+          align: "end",
+          children: [
+            /* @__PURE__ */ c("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 })
             ] }),
-            c && /* @__PURE__ */ s(U, { children: [
-              /* @__PURE__ */ s(t, { children: [
-                /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ e(B, { asChild: !0, children: /* @__PURE__ */ e("button", { type: "button", className: "flex items-center gap-ds-03 outline-none", children: /* @__PURE__ */ s(A, { className: "h-ds-sm-plus w-ds-sm-plus cursor-pointer", children: [
-                  c.image ? /* @__PURE__ */ e(K, { src: c.image, alt: c.name }) : null,
-                  /* @__PURE__ */ e(F, { className: "bg-surface-2 text-surface-fg", children: (g = c.name) == null ? void 0 : g.charAt(0).toUpperCase() })
-                ] }) }) }) }),
-                /* @__PURE__ */ e(i, { side: "bottom", align: "center", children: "User Menu" })
-              ] }),
-              /* @__PURE__ */ s(
-                E,
-                {
-                  className: "w-[200px] rounded-ds-xl border border-surface-border-strong bg-surface-1 p-0 shadow-03",
-                  sideOffset: 8,
-                  align: "end",
-                  children: [
-                    /* @__PURE__ */ s("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: c.name }),
-                      c.email && /* @__PURE__ */ e("p", { className: "text-ds-sm text-surface-fg-subtle", children: c.email })
-                    ] }),
-                    /* @__PURE__ */ s(
-                      a,
-                      {
-                        className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-2",
-                        onClick: () => d == null ? void 0 : d("/profile"),
-                        children: [
-                          /* @__PURE__ */ e(O, { className: "h-ico-sm w-ico-sm text-surface-fg-muted" }),
-                          /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg-muted", children: "Profile" })
-                        ]
-                      }
+            /* @__PURE__ */ c(
+              f,
+              {
+                className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-2",
+                onClick: () => s == null ? void 0 : s("/profile"),
+                children: [
+                  /* @__PURE__ */ e(_, { className: "h-ico-sm w-ico-sm text-surface-fg-muted" }),
+                  /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg-muted", children: "Profile" })
+                ]
+              }
+            ),
+            a == null ? void 0 : a.map((o, v) => {
+              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(
+                  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"
                     ),
-                    o == null ? void 0 : o.map((r, T) => {
-                      const D = {
-                        error: "text-error-11",
-                        success: "text-success-11",
-                        warning: "text-warning-11",
-                        info: "text-info-11"
-                      }, x = r.color ? D[r.color] ?? "text-surface-fg-muted" : "text-surface-fg-muted";
-                      return /* @__PURE__ */ s(w.Fragment, { children: [
-                        r.separator && /* @__PURE__ */ e(N, { className: "bg-surface-border" }),
-                        /* @__PURE__ */ s(
-                          a,
-                          {
-                            className: l(
-                              "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-2",
-                              r.disabled && "pointer-events-none opacity-action-disabled"
-                            ),
-                            disabled: r.disabled,
-                            onClick: () => {
-                              r.disabled || (r.onClick ? r.onClick() : r.href && (d == null || d(r.href)));
-                            },
-                            children: [
-                              r.icon && /* @__PURE__ */ e("span", { className: l("[&>svg]:h-ico-sm [&>svg]:w-ico-sm", x), children: r.icon }),
-                              /* @__PURE__ */ e("span", { className: l("text-ds-md", x), children: r.label }),
-                              r.badge != null && r.badge !== !1 && (typeof r.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: r.badge }) : /* @__PURE__ */ e("span", { className: "ml-auto h-[8px] w-[8px] rounded-ds-full bg-error-9" }))
-                            ]
-                          }
-                        )
-                      ] }, r.label + T);
-                    }),
-                    /* @__PURE__ */ s(
-                      a,
-                      {
-                        className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-2",
-                        onClick: M,
-                        children: [
-                          b === "dark" ? /* @__PURE__ */ e(P, { className: "h-ico-sm w-ico-sm text-surface-fg-muted" }) : /* @__PURE__ */ e(q, { className: "h-ico-sm w-ico-sm text-surface-fg-muted" }),
-                          /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg-muted", children: b === "dark" ? "Light Mode" : "Dark Mode" })
-                        ]
-                      }
-                    ),
-                    f && /* @__PURE__ */ s(I, { children: [
-                      /* @__PURE__ */ e(N, { className: "bg-surface-border" }),
-                      /* @__PURE__ */ s(
-                        a,
+                    disabled: o.disabled,
+                    onClick: () => {
+                      o.disabled || (o.onClick ? o.onClick() : o.href && (s == null || s(o.href)));
+                    },
+                    children: [
+                      o.icon && /* @__PURE__ */ e(
+                        "span",
                         {
-                          className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-2",
-                          onClick: f,
-                          children: [
-                            /* @__PURE__ */ e(G, { className: "h-ico-sm w-ico-sm text-error-11" }),
-                            /* @__PURE__ */ e("span", { className: "text-ds-md text-error-11", children: "Logout" })
-                          ]
+                          className: d(
+                            "[&>svg]:h-ico-sm [&>svg]:w-ico-sm",
+                            g
+                          ),
+                          children: o.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" }))
+                    ]
+                  }
+                )
+              ] }, o.label + v);
+            }),
+            /* @__PURE__ */ c(
+              f,
+              {
+                className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-2",
+                onClick: k,
+                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: [
+              /* @__PURE__ */ e(h, { className: "bg-surface-border" }),
+              /* @__PURE__ */ c(
+                f,
+                {
+                  className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-2",
+                  onClick: t,
+                  children: [
+                    /* @__PURE__ */ e(P, { className: "h-ico-sm w-ico-sm text-error-11" }),
+                    /* @__PURE__ */ e("span", { className: "text-ds-md text-error-11", children: "Logout" })
                   ]
                 }
               )
             ] })
-          ] })
-        ]
-      }
-    );
+          ]
+        }
+      )
+    ] });
   }
 );
-H.displayName = "TopBar";
+R.displayName = "TopBar.UserMenu";
+const X = Object.assign(N, {
+  Left: T,
+  Center: p,
+  Right: y,
+  Section: B,
+  IconButton: C,
+  Title: M,
+  UserMenu: R
+});
 export {
-  H as TopBar
+  X as TopBar
 };

package/dist/tokens/semantic.css

@@ -104,8 +104,8 @@
   --color-surface-fg: var(--neutral-12);
   --color-surface-fg-muted: var(--neutral-11);
   --color-surface-fg-subtle: var(--neutral-8);
-  --color-surface-border: var(--neutral-6);
-  --color-surface-border-strong: var(--neutral-7);
+  --color-surface-border: var(--neutral-5);
+  --color-surface-border-strong: var(--neutral-6);
 
   /* ═══════════════════════════════════════════════════════════
      STATUS — Error
@@ -353,9 +353,9 @@
   --color-info-fg: var(--neutral-12);
 
   /* Dark mode borders need lower contrast — bright borders look harsh.
-     Drop 2 steps: subtle=4 (L=0.29), strong=5 (L=0.34) */
-  --color-surface-border: var(--neutral-4);
-  --color-surface-border-strong: var(--neutral-5);
+     Drop to step 3/4 for subtle resting borders that don't overpower surfaces */
+  --color-surface-border: var(--neutral-3);
+  --color-surface-border-strong: var(--neutral-4);
 
   /* Overlay */
   --color-overlay: oklch(0 0 0 / 0.70);