@protolabsai/ui 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/AppShell.full.stories.tsx

@@ -1,11 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { Badge, Button } from "./primitives";
+import { Badge, Button, Logo } from "./primitives";
 import { PanelHeader } from "./navigation";
 import { StatusDot } from "./data";
-import { AppShell, MobileNav, SurfaceRail, UtilityBar } from "./app-shell";
+import { AppShell, Header, MobileNav, SurfaceRail, UtilityBar } from "./app-shell";
 import type { MobileItem, RailItem } from "./app-shell";
 
+const LOGO =
+  "data:image/svg+xml," +
+  encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="6" fill="#9b87f2"/></svg>');
+
 const meta: Meta = { title: "Components/AppShell" };
 export default meta;
 type Story = StoryObj;
@@ -84,6 +88,19 @@ export const Full: Story = {
                 {surfaceBody(activeRight)}
               </>
             }
+            header={
+              <Header
+                logo={<Logo src={LOGO} alt="" />}
+                name="protoAgent"
+                org="protoLabs.studio"
+                status={<StatusDot status="success" pulse />}
+                actions={
+                  <Button size="sm" variant="ghost">
+                    Settings
+                  </Button>
+                }
+              />
+            }
             utilityBar={
               <UtilityBar
                 start={<StatusDot status="success" pulse label="connected · 3 agents" />}

package/src/app-shell.tsx

@@ -280,6 +280,9 @@ export type AppShellProps = {
   onMobileSelect?: (id: string) => void;
   quickBarIds?: string[];
   mobileBreakpoint?: number;
+  /** Top 48px bar — brand lockup + status/actions. Presentation only; the host
+   *  fills it (compose a `Header`). Renders on both desktop and mobile. */
+  header?: ReactNode;
   /** Bottom 40px track — global utility actions / status / tickers. Presentation
    *  only; the host fills it (compose a `UtilityBar`). Desktop only. */
   utilityBar?: ReactNode;
@@ -311,6 +314,7 @@ export function AppShell({
   onMobileSelect,
   quickBarIds,
   mobileBreakpoint = 768,
+  header,
   utilityBar,
   className,
 }: AppShellProps) {
@@ -433,6 +437,7 @@ export function AppShell({
   if (isMobile && mobileItems && onMobileSelect && quickBarIds) {
     return (
       <div className={cx("pl-appshell", "pl-appshell--mobile", className)}>
+        {header != null && <div className="pl-appshell__header">{header}</div>}
         <div className="pl-appshell__mobile-stage">{leftContent}</div>
         <MobileNav
           items={mobileItems}
@@ -450,6 +455,7 @@ export function AppShell({
 
   const renderShell = (leftRail: ReactNode, rightRail: ReactNode) => (
     <div className={cx("pl-appshell-frame", className)}>
+      {header != null && <div className="pl-appshell__header">{header}</div>}
       <div className="pl-appshell">
         {leftRail}
         <main className="pl-appshell__col pl-appshell__col--left">{leftContent}</main>
@@ -539,3 +545,41 @@ export function UtilityBar({
     </div>
   );
 }
+
+/** White-label top-bar chrome (48px header row) — brand lockup (logo · name ·
+ *  org) on the left, status + actions on the right. Pass to AppShell's `header`
+ *  slot. `dragRegion` marks it as the desktop window drag region (Tauri). */
+export function Header({
+  logo,
+  name,
+  org,
+  status,
+  actions,
+  dragRegion,
+  className,
+}: {
+  logo?: ReactNode;
+  name?: ReactNode;
+  org?: ReactNode;
+  status?: ReactNode;
+  actions?: ReactNode;
+  dragRegion?: boolean;
+  className?: string;
+}) {
+  return (
+    <div className={cx("pl-header", className)} {...(dragRegion ? { "data-tauri-drag-region": "" } : {})}>
+      <div className="pl-header__brand">
+        {logo}
+        {(name != null || org != null) && (
+          <div className="pl-header__lockup">
+            {name != null && <span className="pl-header__name">{name}</span>}
+            {org != null && <span className="pl-header__org">{org}</span>}
+          </div>
+        )}
+      </div>
+      <div className="pl-header__spacer" />
+      {status != null && <div className="pl-header__status">{status}</div>}
+      {actions != null && <div className="pl-header__actions">{actions}</div>}
+    </div>
+  );
+}

package/src/primitives.tsx

@@ -154,3 +154,19 @@ export function Tag({
     </span>
   );
 }
+
+/** Brand mark — a token-sized, contained `<img>` (square by default). The
+ *  white-label logo primitive (vs Avatar, which is a person/initials affordance). */
+export function Logo({
+  src,
+  alt = "",
+  size = 22,
+  className,
+}: {
+  src: string;
+  alt?: string;
+  size?: number;
+  className?: string;
+}) {
+  return <img className={cx("pl-logo", className)} src={src} alt={alt} width={size} height={size} />;
+}

package/src/styles/app-shell.css

@@ -274,3 +274,59 @@
   box-shadow: var(--pl-shadow-popover);
   cursor: grabbing;
 }
+
+/* ── Header (top bar) ─────────────────────────────────────────────────────────── */
+.pl-appshell__header {
+  flex: 0 0 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+  background: var(--pl-color-bg-raised);
+}
+.pl-header {
+  display: flex;
+  align-items: center;
+  gap: var(--pl-space-3);
+  width: 100%;
+  height: 100%;
+  padding: 0 var(--pl-space-3);
+}
+.pl-header__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--pl-space-2);
+  min-width: 0;
+}
+.pl-header__lockup {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  line-height: 1.15;
+}
+.pl-header__name {
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: var(--pl-font-weight-medium);
+  color: var(--pl-color-fg);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pl-header__org {
+  font-family: var(--pl-font-mono);
+  font-size: 10px;
+  color: var(--pl-color-fg-muted);
+}
+.pl-header__spacer {
+  flex: 1;
+}
+.pl-header__status {
+  display: flex;
+  align-items: center;
+}
+.pl-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--pl-space-2);
+}

package/src/styles/primitives.css

@@ -285,3 +285,10 @@
   color: var(--pl-color-fg);
   background: var(--pl-color-bg-hover);
 }
+
+/* ── Logo ────────────────────────────────────────────────────────────────────── */
+.pl-logo {
+  display: block;
+  flex-shrink: 0;
+  object-fit: contain;
+}