@ai-matrx/design-system 0.50.7 → 0.50.11

package/dist/index.cjs

@@ -5398,7 +5398,7 @@ var AppRailItem = React34.forwardRef(function AppRailItem2({ icon, label, shortc
     ] }) })
   ] });
 });
-var AppRailAvatar = React34.forwardRef(function AppRailAvatar2({ initials, label, className, ...props }, ref) {
+var AppRailAvatar = React34.forwardRef(function AppRailAvatar2({ initials = "", label, className, children, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "button",
@@ -5408,12 +5408,12 @@ var AppRailAvatar = React34.forwardRef(function AppRailAvatar2({ initials, label
         "data-slot": "app-rail-avatar",
         "aria-label": label,
         className: cn(
-          "flex size-7 items-center justify-center rounded-full bg-success text-[10px] font-semibold leading-none tracking-wide text-success-foreground outline-none",
+          "flex size-6 items-center justify-center rounded-full bg-foreground/[0.12] text-[10px] font-semibold leading-none text-foreground/80 outline-none [&_svg]:size-3.5",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
           className
         ),
         ...props,
-        children: initials.slice(0, 2).toUpperCase()
+        children: children ?? initials.slice(0, 2).toUpperCase()
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TooltipContent, { side: "right", align: "center", children: label })
@@ -5423,8 +5423,8 @@ var AppRailAvatar = React34.forwardRef(function AppRailAvatar2({ initials, label
 // src/app-shell/browser.tsx
 var React35 = __toESM(require("react"), 1);
 var import_jsx_runtime45 = require("react/jsx-runtime");
-function BrowserTabs({ tabs, activeId, onSelect, onClose, onNew, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { "data-slot": "browser-tabs", role: "tablist", "aria-label": "Tabs", className: cn("flex min-w-0 flex-1 items-center gap-0.5", className), children: [
+function BrowserTabs({ tabs, activeId, onSelect, onClose, onNew, newLabel = "New tab", label = "Tabs", className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { "data-slot": "browser-tabs", role: "tablist", "aria-label": label, className: cn("flex min-w-0 flex-1 items-center gap-0.5", className), children: [
     tabs.map((tab) => {
       const active = tab.id === activeId;
       return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
@@ -5448,8 +5448,9 @@ function BrowserTabs({ tabs, activeId, onSelect, onClose, onNew, className }) {
             "aria-selected:bg-background aria-selected:text-foreground aria-selected:shadow-[0_0_0_0.5px_hsl(var(--border)),0_1px_2px_hsl(var(--foreground)/0.06)]"
           ),
           children: [
-            tab.icon ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("img", { src: tab.icon, alt: "", className: "size-3.5 shrink-0 rounded-sm" }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(GlobeIcon, { className: "size-3.5 shrink-0 opacity-70" }),
+            tab.glyph ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "flex size-3.5 shrink-0 items-center justify-center opacity-70 [&_svg]:size-3.5", children: tab.glyph }) : tab.icon ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("img", { src: tab.icon, alt: "", className: "size-3.5 shrink-0 rounded-sm" }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(GlobeIcon, { className: "size-3.5 shrink-0 opacity-70" }),
             /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "min-w-0 flex-1 truncate", children: tab.title || "New tab" }),
+            tab.note ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { "data-slot": "browser-tab-note", className: "shrink-0 text-[11px] text-foreground/40", children: tab.note }) : null,
             /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               "button",
               {
@@ -5477,7 +5478,7 @@ function BrowserTabs({ tabs, activeId, onSelect, onClose, onNew, className }) {
       "button",
       {
         type: "button",
-        "aria-label": "New tab",
+        "aria-label": newLabel,
         "data-slot": "browser-tab-new",
         onClick: onNew,
         className: "flex size-6 shrink-0 items-center justify-center rounded-md text-foreground/55 outline-none hover:bg-foreground/[0.07] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-3.5",
@@ -5503,7 +5504,7 @@ function BarButton({ label, onClick, available = true, children }) {
     }
   );
 }
-function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, className }) {
+function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, trailing, className }) {
   const [draft, setDraft] = React35.useState(url);
   const [editing, setEditing] = React35.useState(false);
   React35.useEffect(() => {
@@ -5545,7 +5546,8 @@ function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload,
           }
         )
       }
-    )
+    ),
+    trailing ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { "data-slot": "browser-bar-trailing", className: "ml-1 flex shrink-0 items-center gap-0.5", children: trailing }) : null
   ] });
 }