@protolabsai/ui 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -19,9 +19,10 @@
     "src"
   ],
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.17",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@protolabsai/design": "0.3.0"
+    "@protolabsai/design": "0.4.0"
   },
   "peerDependencies": {
     "react": "^19.0.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/Data.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Badge, ScrollArea, Spinner, StatusDot, TBody, THead, Table, Td, Th, Tr } from "./index";
+
+const meta: Meta = { title: "Components/Data" };
+export default meta;
+type Story = StoryObj;
+
+const ROWS = [
+  { agent: "streaming-router", status: "success", calls: 1284, p95: "180ms" },
+  { agent: "voice-intake", status: "warning", calls: 642, p95: "910ms" },
+  { agent: "polyglot-bridge", status: "error", calls: 17, p95: "—" },
+  { agent: "corpus-indexer", status: "info", calls: 3021, p95: "44ms" },
+] as const;
+
+export const DataTable: Story = {
+  render: () => {
+    function Demo() {
+      const [selected, setSelected] = useState("streaming-router");
+      return (
+        <Table>
+          <THead>
+            <Tr>
+              <Th>agent</Th>
+              <Th>status</Th>
+              <Th>calls</Th>
+              <Th>p95</Th>
+            </Tr>
+          </THead>
+          <TBody>
+            {ROWS.map((r) => (
+              <Tr key={r.agent} selected={r.agent === selected} onClick={() => setSelected(r.agent)}>
+                <Td style={{ fontFamily: "var(--pl-font-mono)" }}>{r.agent}</Td>
+                <Td>
+                  <Badge status={r.status}>{r.status}</Badge>
+                </Td>
+                <Td>{r.calls.toLocaleString()}</Td>
+                <Td>{r.p95}</Td>
+              </Tr>
+            ))}
+          </TBody>
+        </Table>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const StatusDots: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: 12 }}>
+      <StatusDot status="success" pulse label="connected" />
+      <StatusDot status="warning" label="degraded" />
+      <StatusDot status="error" pulse label="offline" />
+      <StatusDot status="info" label="review" />
+      <StatusDot label="idle" />
+    </div>
+  ),
+};
+
+export const Spinners: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
+      <Spinner size={12} />
+      <Spinner size={16} />
+      <Spinner size={24} />
+      <Spinner size={32} />
+    </div>
+  ),
+};
+
+export const Scroll: Story = {
+  render: () => (
+    <ScrollArea style={{ height: 160, maxWidth: 360, border: "1px solid var(--pl-color-border)", borderRadius: 4, padding: 12 }}>
+      <div style={{ display: "grid", gap: 8 }}>
+        {Array.from({ length: 24 }, (_, i) => (
+          <div key={i} style={{ fontFamily: "var(--pl-font-mono)", fontSize: 12, color: "var(--pl-color-fg-muted)" }}>
+            event #{i + 1} — dispatched
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+};

package/src/Forms.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Checkbox, Field, Input, Select, Switch, Textarea } from "./index";
+
+const meta: Meta = { title: "Components/Forms" };
+export default meta;
+type Story = StoryObj;
+
+export const Inputs: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: 16, maxWidth: 360 }}>
+      <Field label="Inline field (label + input)" value="streaming-router" />
+      <label style={{ display: "grid", gap: 6 }}>
+        <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--pl-color-fg-muted)" }}>
+          Standalone Input
+        </span>
+        <Input placeholder="e.g. claude-opus-4-8" />
+      </label>
+      <label style={{ display: "grid", gap: 6 }}>
+        <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--pl-color-fg-muted)" }}>
+          Select
+        </span>
+        <Select defaultValue="a2a">
+          <option value="in-process">in-process</option>
+          <option value="a2a">remote A2A</option>
+          <option value="fn">function handler</option>
+        </Select>
+      </label>
+      <label style={{ display: "grid", gap: 6 }}>
+        <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--pl-color-fg-muted)" }}>
+          Textarea
+        </span>
+        <Textarea placeholder="System prompt…" />
+      </label>
+      <Input placeholder="disabled" disabled />
+    </div>
+  ),
+};
+
+export const Toggles: Story = {
+  render: () => {
+    function Demo() {
+      const [stream, setStream] = useState(true);
+      const [trace, setTrace] = useState(false);
+      const [a, setA] = useState(true);
+      const [b, setB] = useState(false);
+      return (
+        <div style={{ display: "grid", gap: 16 }}>
+          <Switch checked={stream} onCheckedChange={setStream} label="Stream responses" />
+          <Switch checked={trace} onCheckedChange={setTrace} label="Verbose tracing" />
+          <Switch checked={false} disabled label="Locked (disabled)" />
+          <Checkbox checked={a} onCheckedChange={setA} label="Capture corpus pair" />
+          <Checkbox checked={b} onCheckedChange={setB} label="Pin to latest model" />
+          <Checkbox checked disabled label="Required (disabled)" />
+        </div>
+      );
+    }
+    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/Overlays.stories.tsx

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  Button,
+  ConfirmDialog,
+  Dialog,
+  Drawer,
+  Field,
+  Tooltip,
+  ToastProvider,
+  useToast,
+} from "./index";
+
+const meta: Meta = { title: "Components/Overlays" };
+export default meta;
+type Story = StoryObj;
+
+export const Modal: Story = {
+  render: () => {
+    function Demo() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <Button variant="primary" onClick={() => setOpen(true)}>
+            Open dialog
+          </Button>
+          <Dialog
+            open={open}
+            onClose={() => setOpen(false)}
+            title="Rename workflow"
+            footer={
+              <>
+                <Button onClick={() => setOpen(false)}>Cancel</Button>
+                <Button variant="primary" onClick={() => setOpen(false)}>
+                  Save
+                </Button>
+              </>
+            }
+          >
+            <Field label="Name" value="streaming-router" />
+            <p style={{ marginTop: 12 }}>Esc, the × button, or a backdrop click all close it. Focus is trapped inside.</p>
+          </Dialog>
+        </>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const Confirm: Story = {
+  render: () => {
+    function Demo() {
+      const [open, setOpen] = useState(false);
+      const [deleted, setDeleted] = useState(false);
+      return (
+        <>
+          <Button onClick={() => setOpen(true)}>Delete agent…</Button>
+          {deleted && <span style={{ marginLeft: 12, fontFamily: "var(--pl-font-mono)", fontSize: 12 }}>deleted.</span>}
+          <ConfirmDialog
+            open={open}
+            title="Delete this agent?"
+            destructive
+            confirmLabel="Delete"
+            onConfirm={() => {
+              setDeleted(true);
+              setOpen(false);
+            }}
+            onClose={() => setOpen(false)}
+          >
+            This removes the agent and its run history. This cannot be undone.
+          </ConfirmDialog>
+        </>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const SidePanel: Story = {
+  render: () => {
+    function Demo() {
+      const [side, setSide] = useState<"left" | "right" | null>(null);
+      return (
+        <div style={{ display: "flex", gap: 8 }}>
+          <Button onClick={() => setSide("left")}>Open left</Button>
+          <Button onClick={() => setSide("right")}>Open right</Button>
+          <Drawer open={side != null} side={side ?? "right"} title="Event detail" onClose={() => setSide(null)}>
+            <p>Slides in from the {side}. Same dismiss + focus-trap behavior as Dialog.</p>
+          </Drawer>
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const Toasts: Story = {
+  render: () => {
+    function Trigger() {
+      const toast = useToast();
+      return (
+        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+          <Button onClick={() => toast({ message: "Saved." })}>neutral</Button>
+          <Button onClick={() => toast({ tone: "success", title: "deployed", message: "Image is live on the studio stack." })}>
+            success
+          </Button>
+          <Button onClick={() => toast({ tone: "warning", title: "heads up", message: "main is protected — open a PR." })}>
+            warning
+          </Button>
+          <Button onClick={() => toast({ tone: "error", title: "failed", message: "Build red on the sixth attempt.", duration: 8000 })}>
+            error
+          </Button>
+        </div>
+      );
+    }
+    return (
+      <ToastProvider>
+        <Trigger />
+      </ToastProvider>
+    );
+  },
+};
+
+export const Tooltips: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 40, padding: 60, justifyContent: "center" }}>
+      <Tooltip label="on top">
+        <Button>top</Button>
+      </Tooltip>
+      <Tooltip label="on the bottom" side="bottom">
+        <Button>bottom</Button>
+      </Tooltip>
+      <Tooltip label="to the left" side="left">
+        <Button>left</Button>
+      </Tooltip>
+      <Tooltip label="to the right" side="right">
+        <Button>right</Button>
+      </Tooltip>
+    </div>
+  ),
+};