@protolabsai/ui 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -19,6 +19,7 @@
     "src"
   ],
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.17",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@protolabsai/design": "0.4.0"

package/src/AppShell.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Badge, Button, PanelHeader, Tabs } from "./index";
+
+const meta: Meta = { title: "Components/AppShell" };
+export default meta;
+type Story = StoryObj;
+
+const Glyph = () => (
+  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+    <rect x="2.5" y="2.5" width="11" height="11" rx="2" />
+  </svg>
+);
+
+export const Panel: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: 20, maxWidth: 560 }}>
+      <div style={{ border: "1px solid var(--pl-color-border)", borderRadius: 4 }}>
+        <PanelHeader
+          kicker="agent · streaming-router"
+          title="Activity"
+          actions={
+            <>
+              <Button>Filter</Button>
+              <Button variant="primary">New run</Button>
+            </>
+          }
+        />
+        <div style={{ padding: 16, color: "var(--pl-color-fg-muted)", fontSize: 13 }}>panel body…</div>
+      </div>
+
+      <div style={{ border: "1px solid var(--pl-color-border)", borderRadius: 4 }}>
+        <PanelHeader compact title="Inbox" actions={<Badge status="warning">3 unread</Badge>} />
+        <div style={{ padding: 12, color: "var(--pl-color-fg-muted)", fontSize: 13 }}>compact, nested panel…</div>
+      </div>
+    </div>
+  ),
+};
+
+export const TabsWithSlots: Story = {
+  render: () => {
+    function Demo() {
+      const [active, setActive] = useState("activity");
+      return (
+        <Tabs
+          active={active}
+          onSelect={setActive}
+          items={[
+            { id: "chat", label: "Chat", icon: <Glyph /> },
+            { id: "activity", label: "Activity", icon: <Glyph />, badge: 12 },
+            { id: "knowledge", label: "Knowledge", icon: <Glyph /> },
+            { id: "plugins", label: "Plugins", icon: <Glyph />, badge: "new" },
+            { id: "settings", label: "Settings", icon: <Glyph /> },
+            { id: "billing", label: "Billing", icon: <Glyph />, locked: true, disabled: true },
+          ]}
+        />
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/Menu.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useRef } from "react";
+import { Button, Menu, MenuHandle, MenuItem, MenuLabel, MenuSeparator, MenuSub } from "./index";
+
+const meta: Meta = { title: "Components/Menu" };
+export default meta;
+type Story = StoryObj;
+
+// Tiny inline icon so stories stay dependency-free.
+const Dot = () => (
+  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+    <circle cx="8" cy="8" r="3" />
+  </svg>
+);
+
+const Items = () => (
+  <>
+    <MenuLabel>Rail surface</MenuLabel>
+    <MenuItem icon={<Dot />}>Move up</MenuItem>
+    <MenuItem icon={<Dot />}>Move down</MenuItem>
+    <MenuSub label="Move to other rail" icon={<Dot />}>
+      <MenuItem>Left rail</MenuItem>
+      <MenuItem>Right rail</MenuItem>
+    </MenuSub>
+    <MenuSeparator />
+    <MenuItem disabled icon={<Dot />}>
+      Pin (coming soon)
+    </MenuItem>
+    <MenuItem destructive icon={<Dot />}>
+      Remove surface
+    </MenuItem>
+  </>
+);
+
+export const Trigger: Story = {
+  render: () => (
+    <Menu trigger={<Button>Surface actions ▾</Button>}>
+      <Items />
+    </Menu>
+  ),
+};
+
+export const RightClickAtCoords: Story = {
+  render: () => {
+    function Demo() {
+      const menu = useRef<MenuHandle>(null);
+      return (
+        <>
+          <div
+            onContextMenu={(e) => {
+              e.preventDefault();
+              menu.current?.open({ x: e.clientX, y: e.clientY });
+            }}
+            style={{
+              height: 180,
+              display: "grid",
+              placeItems: "center",
+              border: "1px dashed var(--pl-color-border-strong)",
+              borderRadius: 4,
+              color: "var(--pl-color-fg-muted)",
+              fontFamily: "var(--pl-font-mono)",
+              fontSize: 13,
+              userSelect: "none",
+            }}
+          >
+            right-click anywhere in this box
+          </div>
+          <Menu ref={menu}>
+            <Items />
+          </Menu>
+        </>
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/index.tsx

@@ -15,7 +15,18 @@ import type {
   TextareaHTMLAttributes,
   ThHTMLAttributes,
 } from "react";
-import { createContext, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import * as RDropdown from "@radix-ui/react-dropdown-menu";
 import "./styles.css";
 
 const cx = (...parts: Array<string | false | undefined>) => parts.filter(Boolean).join(" ");
@@ -240,9 +251,19 @@ export function TextLink({
 
 // ── App primitives (cockpit + future studio apps) ────────────────────────────
 
-export type TabItem = { id: string; label: ReactNode; disabled?: boolean; locked?: boolean };
+export type TabItem = {
+  id: string;
+  label: ReactNode;
+  /** Leading icon (e.g. a Lucide glyph). */
+  icon?: ReactNode;
+  /** Trailing badge / count (e.g. unread inbox count). */
+  badge?: ReactNode;
+  disabled?: boolean;
+  locked?: boolean;
+};
 
-/** A horizontal tab strip with disabled/locked support (gated workflows). */
+/** A horizontal tab strip with optional icon/badge slots + disabled/locked
+ *  support (gated workflows). */
 export function Tabs({ items, active, onSelect }: { items: TabItem[]; active: string; onSelect: (id: string) => void }) {
   return (
     <div className="pl-tabs" role="tablist">
@@ -256,7 +277,13 @@ export function Tabs({ items, active, onSelect }: { items: TabItem[]; active: st
           disabled={t.disabled}
           onClick={() => onSelect(t.id)}
         >
-          {t.label}
+          {t.icon != null && (
+            <span className="pl-tab__icon" aria-hidden>
+              {t.icon}
+            </span>
+          )}
+          <span className="pl-tab__label">{t.label}</span>
+          {t.badge != null && <span className="pl-tab__badge">{t.badge}</span>}
           {t.locked ? (
             <span className="pl-tab__lock" aria-hidden>
               🔒
@@ -322,6 +349,33 @@ export function Field({
   );
 }
 
+/** Dense operator-console panel header — title + optional kicker eyebrow +
+ *  right-aligned actions slot. `compact` tightens it for nested/secondary
+ *  panels. The most-used console composite. */
+export function PanelHeader({
+  title,
+  kicker,
+  actions,
+  compact,
+  className,
+}: {
+  title: ReactNode;
+  kicker?: ReactNode;
+  actions?: ReactNode;
+  compact?: boolean;
+  className?: string;
+}) {
+  return (
+    <div className={cx("pl-panel-header", compact && "pl-panel-header--compact", className)}>
+      <div className="pl-panel-header__titles">
+        {kicker != null && <div className="pl-panel-header__kicker">{kicker}</div>}
+        <h2 className="pl-panel-header__title">{title}</h2>
+      </div>
+      {actions != null && <div className="pl-panel-header__actions">{actions}</div>}
+    </div>
+  );
+}
+
 // ── Overlays & feedback ──────────────────────────────────────────────────────
 
 /** Esc-to-close + body scroll-lock while `open`. Shared by Dialog + Drawer. */
@@ -771,3 +825,142 @@ export function Checkbox({
     </label>
   );
 }
+
+// ── Menu / DropdownMenu (Radix-backed) ───────────────────────────────────────
+// Radix owns keyboard nav, focus management, and collision-aware positioning —
+// the reason this lives in the DS rather than being re-rolled per app. Styling
+// is token-only over --pl-*. Supports a standard click trigger AND imperative
+// open-at-coordinates for right-click / context menus.
+
+export type MenuHandle = {
+  /** Open the menu. Pass viewport coords (e.g. from a contextmenu event) to
+   *  open at a point; omit to open at the default anchor. */
+  open: (coords?: { x: number; y: number }) => void;
+  close: () => void;
+};
+
+export type MenuProps = {
+  /** Standard trigger (click to open). Omit and drive via the ref's
+   *  open({x,y}) for right-click / imperative menus. */
+  trigger?: ReactNode;
+  children: ReactNode;
+  align?: "start" | "center" | "end";
+  /** Fires on open/close — e.g. to clear the app's context state on dismiss. */
+  onOpenChange?: (open: boolean) => void;
+};
+
+export const Menu = forwardRef<MenuHandle, MenuProps>(function Menu(
+  { trigger, children, align = "start", onOpenChange },
+  ref,
+) {
+  const [open, setOpen] = useState(false);
+  const [coords, setCoords] = useState<{ x: number; y: number } | null>(null);
+  const setOpenState = useCallback(
+    (o: boolean) => {
+      setOpen(o);
+      onOpenChange?.(o);
+    },
+    [onOpenChange],
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: (c) => {
+        setCoords(c ?? null);
+        setOpenState(true);
+      },
+      close: () => setOpenState(false),
+    }),
+    [setOpenState],
+  );
+  return (
+    <RDropdown.Root open={open} onOpenChange={setOpenState} modal={false}>
+      {trigger != null ? (
+        <RDropdown.Trigger asChild>{trigger}</RDropdown.Trigger>
+      ) : (
+        <RDropdown.Trigger asChild>
+          <span
+            aria-hidden
+            className="pl-menu__anchor"
+            style={coords ? { position: "fixed", left: coords.x, top: coords.y } : undefined}
+          />
+        </RDropdown.Trigger>
+      )}
+      <RDropdown.Portal>
+        <RDropdown.Content className="pl-menu" align={align} sideOffset={4} collisionPadding={8} loop>
+          {children}
+        </RDropdown.Content>
+      </RDropdown.Portal>
+    </RDropdown.Root>
+  );
+});
+
+export function MenuItem({
+  icon,
+  disabled,
+  destructive,
+  onSelect,
+  children,
+}: {
+  icon?: ReactNode;
+  disabled?: boolean;
+  /** Error-toned (delete, remove, etc.). */
+  destructive?: boolean;
+  onSelect?: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <RDropdown.Item
+      className={cx("pl-menu__item", destructive && "pl-menu__item--destructive")}
+      disabled={disabled}
+      onSelect={onSelect}
+    >
+      {icon != null && (
+        <span className="pl-menu__icon" aria-hidden>
+          {icon}
+        </span>
+      )}
+      <span className="pl-menu__label">{children}</span>
+    </RDropdown.Item>
+  );
+}
+
+export function MenuSeparator() {
+  return <RDropdown.Separator className="pl-menu__sep" />;
+}
+
+export function MenuLabel({ children }: { children: ReactNode }) {
+  return <RDropdown.Label className="pl-menu__group-label">{children}</RDropdown.Label>;
+}
+
+/** Nested submenu — put MenuItem/MenuSeparator children inside. */
+export function MenuSub({
+  label,
+  icon,
+  children,
+}: {
+  label: ReactNode;
+  icon?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <RDropdown.Sub>
+      <RDropdown.SubTrigger className="pl-menu__item pl-menu__subtrigger">
+        {icon != null && (
+          <span className="pl-menu__icon" aria-hidden>
+            {icon}
+          </span>
+        )}
+        <span className="pl-menu__label">{label}</span>
+        <span className="pl-menu__subarrow" aria-hidden>
+          ›
+        </span>
+      </RDropdown.SubTrigger>
+      <RDropdown.Portal>
+        <RDropdown.SubContent className="pl-menu" sideOffset={2} alignOffset={-4} collisionPadding={8}>
+          {children}
+        </RDropdown.SubContent>
+      </RDropdown.Portal>
+    </RDropdown.Sub>
+  );
+}

package/src/styles.css

@@ -472,6 +472,9 @@ a.pl-row:hover {
   border-bottom: var(--pl-border-width) solid var(--pl-color-border);
 }
 .pl-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   background: none;
   border: none;
   border-bottom: 2px solid transparent;
@@ -482,6 +485,32 @@ a.pl-row:hover {
   cursor: pointer;
   border-radius: var(--pl-radius) var(--pl-radius) 0 0;
 }
+.pl-tab__icon {
+  display: inline-flex;
+  align-items: center;
+}
+.pl-tab__icon svg {
+  width: 15px;
+  height: 15px;
+}
+.pl-tab__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  font-family: var(--pl-font-mono);
+  font-size: 10px;
+  line-height: 1;
+  color: var(--pl-color-fg-muted);
+  background: var(--pl-color-bg-subtle);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: 999px;
+}
+.pl-tab--active .pl-tab__badge {
+  color: var(--pl-color-fg);
+}
 .pl-tab:hover:not(:disabled) {
   color: var(--pl-color-fg);
 }
@@ -579,6 +608,43 @@ a.pl-row:hover {
   border-color: var(--pl-color-fg);
 }
 
+/* ── PanelHeader (console panel header) ──────────────────────────────────────── */
+.pl-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--pl-space-3);
+  padding: var(--pl-space-3) var(--pl-space-4);
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-panel-header__kicker {
+  font-family: var(--pl-font-mono);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--pl-color-fg-muted);
+  margin-bottom: 2px;
+}
+.pl-panel-header__title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: var(--pl-font-weight-medium);
+  line-height: 1.2;
+  color: var(--pl-color-fg);
+}
+.pl-panel-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--pl-space-2);
+  flex-shrink: 0;
+}
+.pl-panel-header--compact {
+  padding: var(--pl-space-2) var(--pl-space-3);
+}
+.pl-panel-header--compact .pl-panel-header__title {
+  font-size: 13px;
+}
+
 /* ── Overlay scrim (Dialog + Drawer) ─────────────────────────────────────────── */
 .pl-overlay {
   position: fixed;
@@ -1097,6 +1163,82 @@ a.pl-row:hover {
   color: var(--pl-color-fg);
 }
 
+/* ── Menu / DropdownMenu (Radix-backed) ──────────────────────────────────────── */
+.pl-menu__anchor {
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+.pl-menu {
+  min-width: 180px;
+  padding: 4px;
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border-strong);
+  border-radius: var(--pl-radius);
+  box-shadow: var(--pl-shadow-popover);
+  z-index: 1200;
+}
+.pl-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  font-size: 13px;
+  color: var(--pl-color-fg);
+  border-radius: calc(var(--pl-radius) - 1px);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+/* Radix sets data-highlighted on the keyboard/pointer-focused item. */
+.pl-menu__item[data-highlighted] {
+  background: var(--pl-color-bg-hover);
+}
+.pl-menu__item[data-disabled] {
+  color: var(--pl-color-fg-muted);
+  opacity: 0.5;
+  pointer-events: none;
+}
+.pl-menu__item--destructive {
+  color: var(--pl-color-status-error);
+}
+.pl-menu__item--destructive[data-highlighted] {
+  background: color-mix(in oklch, var(--pl-color-status-error) 16%, transparent);
+}
+.pl-menu__icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--pl-color-fg-muted);
+}
+.pl-menu__icon svg {
+  width: 15px;
+  height: 15px;
+}
+.pl-menu__item--destructive .pl-menu__icon {
+  color: var(--pl-color-status-error);
+}
+.pl-menu__label {
+  flex: 1;
+}
+.pl-menu__subarrow {
+  color: var(--pl-color-fg-muted);
+  font-size: 14px;
+  line-height: 1;
+}
+.pl-menu__sep {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--pl-color-border);
+}
+.pl-menu__group-label {
+  padding: 4px 8px;
+  font-family: var(--pl-font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--pl-color-fg-muted);
+}
+
 /* Respect reduced-motion for every animation this package introduces. */
 @media (prefers-reduced-motion: reduce) {
   .pl-drawer,