@ai-matrx/design-system 0.50.6 → 0.50.9

package/dist/index.d.cts

@@ -2019,8 +2019,11 @@ interface AppRailItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEle
 }
 declare const AppRailItem: React.ForwardRefExoticComponent<AppRailItemProps & React.RefAttributes<HTMLButtonElement>>;
 interface AppRailAvatarProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
-    initials: string;
+    /** Up to two letters. Ignored when `children` is given. */
+    initials?: string;
     label: string;
+    /** A glyph instead of initials (e.g. a neutral person while signed out). */
+    children?: React.ReactNode;
 }
 /** The person, at the bottom of the rail (Codex's initials circle). */
 declare const AppRailAvatar: React.ForwardRefExoticComponent<AppRailAvatarProps & React.RefAttributes<HTMLButtonElement>>;
@@ -2034,6 +2037,10 @@ interface BrowserTab {
     title: string;
     /** A favicon URL; a globe is drawn without one. */
     icon?: string | null;
+    /** A glyph instead of a favicon (a terminal tab draws its prompt icon). */
+    glyph?: React.ReactNode;
+    /** Small trailing state after the title, e.g. "exited". */
+    note?: string;
 }
 interface BrowserTabsProps {
     tabs: BrowserTab[];
@@ -2041,9 +2048,16 @@ interface BrowserTabsProps {
     onSelect: (id: string) => void;
     onClose: (id: string) => void;
     onNew: () => void;
+    /** The "+" button's name (default "New tab"). */
+    newLabel?: string;
+    /** The tab list's name (default "Tabs"). */
+    label?: string;
     className?: string;
 }
-declare function BrowserTabs({ tabs, activeId, onSelect, onClose, onNew, className }: BrowserTabsProps): React.JSX.Element;
+/**
+ * Codex's tab strip, for any panel with tabs: the browser's pages, the terminal's shells.
+ */
+declare function BrowserTabs({ tabs, activeId, onSelect, onClose, onNew, newLabel, label, className }: BrowserTabsProps): React.JSX.Element;
 interface BrowserBarProps {
     url: string;
     canGoBack: boolean;
@@ -2053,9 +2067,11 @@ interface BrowserBarProps {
     onReload: () => void;
     /** Called with the typed address when the person presses Enter. */
     onNavigate: (address: string) => void;
+    /** Controls after the address (Codex: screenshot, open in browser, more). */
+    trailing?: React.ReactNode;
     className?: string;
 }
-declare function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, className }: BrowserBarProps): React.JSX.Element;
+declare function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, trailing, className }: BrowserBarProps): React.JSX.Element;
 
 /**
  * The canvas: a right-hand workspace of panels (terminal, files, browser, info) beside the

package/dist/index.d.ts

@@ -2019,8 +2019,11 @@ interface AppRailItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEle
 }
 declare const AppRailItem: React.ForwardRefExoticComponent<AppRailItemProps & React.RefAttributes<HTMLButtonElement>>;
 interface AppRailAvatarProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
-    initials: string;
+    /** Up to two letters. Ignored when `children` is given. */
+    initials?: string;
     label: string;
+    /** A glyph instead of initials (e.g. a neutral person while signed out). */
+    children?: React.ReactNode;
 }
 /** The person, at the bottom of the rail (Codex's initials circle). */
 declare const AppRailAvatar: React.ForwardRefExoticComponent<AppRailAvatarProps & React.RefAttributes<HTMLButtonElement>>;
@@ -2034,6 +2037,10 @@ interface BrowserTab {
     title: string;
     /** A favicon URL; a globe is drawn without one. */
     icon?: string | null;
+    /** A glyph instead of a favicon (a terminal tab draws its prompt icon). */
+    glyph?: React.ReactNode;
+    /** Small trailing state after the title, e.g. "exited". */
+    note?: string;
 }
 interface BrowserTabsProps {
     tabs: BrowserTab[];
@@ -2041,9 +2048,16 @@ interface BrowserTabsProps {
     onSelect: (id: string) => void;
     onClose: (id: string) => void;
     onNew: () => void;
+    /** The "+" button's name (default "New tab"). */
+    newLabel?: string;
+    /** The tab list's name (default "Tabs"). */
+    label?: string;
     className?: string;
 }
-declare function BrowserTabs({ tabs, activeId, onSelect, onClose, onNew, className }: BrowserTabsProps): React.JSX.Element;
+/**
+ * Codex's tab strip, for any panel with tabs: the browser's pages, the terminal's shells.
+ */
+declare function BrowserTabs({ tabs, activeId, onSelect, onClose, onNew, newLabel, label, className }: BrowserTabsProps): React.JSX.Element;
 interface BrowserBarProps {
     url: string;
     canGoBack: boolean;
@@ -2053,9 +2067,11 @@ interface BrowserBarProps {
     onReload: () => void;
     /** Called with the typed address when the person presses Enter. */
     onNavigate: (address: string) => void;
+    /** Controls after the address (Codex: screenshot, open in browser, more). */
+    trailing?: React.ReactNode;
     className?: string;
 }
-declare function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, className }: BrowserBarProps): React.JSX.Element;
+declare function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, trailing, className }: BrowserBarProps): React.JSX.Element;
 
 /**
  * The canvas: a right-hand workspace of panels (terminal, files, browser, info) beside the

package/dist/index.js

@@ -5074,7 +5074,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__ */ jsxs26(Tooltip, { children: [
     /* @__PURE__ */ jsx44(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx44(
       "button",
@@ -5084,12 +5084,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__ */ jsx44(TooltipContent, { side: "right", align: "center", children: label })
@@ -5099,8 +5099,8 @@ var AppRailAvatar = React34.forwardRef(function AppRailAvatar2({ initials, label
 // src/app-shell/browser.tsx
 import * as React35 from "react";
 import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
-function BrowserTabs({ tabs, activeId, onSelect, onClose, onNew, className }) {
-  return /* @__PURE__ */ jsxs27("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__ */ jsxs27("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__ */ jsxs27(
@@ -5124,8 +5124,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__ */ jsx45("img", { src: tab.icon, alt: "", className: "size-3.5 shrink-0 rounded-sm" }) : /* @__PURE__ */ jsx45(GlobeIcon, { className: "size-3.5 shrink-0 opacity-70" }),
+            tab.glyph ? /* @__PURE__ */ jsx45("span", { className: "flex size-3.5 shrink-0 items-center justify-center opacity-70 [&_svg]:size-3.5", children: tab.glyph }) : tab.icon ? /* @__PURE__ */ jsx45("img", { src: tab.icon, alt: "", className: "size-3.5 shrink-0 rounded-sm" }) : /* @__PURE__ */ jsx45(GlobeIcon, { className: "size-3.5 shrink-0 opacity-70" }),
             /* @__PURE__ */ jsx45("span", { className: "min-w-0 flex-1 truncate", children: tab.title || "New tab" }),
+            tab.note ? /* @__PURE__ */ jsx45("span", { "data-slot": "browser-tab-note", className: "shrink-0 text-[11px] text-foreground/40", children: tab.note }) : null,
             /* @__PURE__ */ jsx45(
               "button",
               {
@@ -5153,7 +5154,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",
@@ -5179,7 +5180,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(() => {
@@ -5221,7 +5222,8 @@ function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload,
           }
         )
       }
-    )
+    ),
+    trailing ? /* @__PURE__ */ jsx45("div", { "data-slot": "browser-bar-trailing", className: "ml-1 flex shrink-0 items-center gap-0.5", children: trailing }) : null
   ] });
 }