@protolabsai/ui 0.20.0 → 0.22.0

package/dist/plugin-kit.css

@@ -336,6 +336,42 @@ a:hover {
   padding: 1rem 0;
 }
 
+/* Slotted form (icon/title/description/action) — centered scaffold. */
+.pl-empty--slotted {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--pl-space-2);
+  padding: var(--pl-space-6) var(--pl-space-4);
+  text-align: center;
+}
+.pl-empty__icon {
+  display: inline-flex;
+  margin-bottom: var(--pl-space-1);
+  color: var(--pl-color-fg-subtle);
+}
+.pl-empty__icon svg {
+  width: 28px;
+  height: 28px;
+}
+.pl-empty__title {
+  font-family: var(--pl-font-sans);
+  font-size: 14px;
+  font-weight: var(--pl-font-weight-medium);
+  color: var(--pl-color-fg);
+}
+.pl-empty__desc {
+  max-width: 44ch;
+  font-family: var(--pl-font-sans);
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--pl-color-fg-muted);
+}
+.pl-empty__action {
+  margin-top: var(--pl-space-2);
+}
+
 /* ── divider ── */
 .pl-divider {
   border: 0;
@@ -572,6 +608,49 @@ a:hover {
   }
 }
 
+/* ── Grid (responsive card grid) ── */
+.pl-grid {
+  display: grid;
+}
+.pl-grid--gap-sm {
+  gap: var(--pl-space-2);
+}
+.pl-grid--gap-md {
+  gap: var(--pl-space-4);
+}
+.pl-grid--gap-lg {
+  gap: var(--pl-space-6);
+}
+/* auto-fill: as many columns of >= --pl-grid-min as fit */
+.pl-grid--auto {
+  grid-template-columns: repeat(auto-fill, minmax(var(--pl-grid-min, 14rem), 1fr));
+}
+/* fixed/responsive column count — each breakpoint falls back to the nearest
+   smaller value that was set, so `cols={{ base:1, md:2, xl:3 }}` cascades cleanly */
+.pl-grid--cols {
+  grid-template-columns: repeat(var(--pl-grid-cols, 1), minmax(0, 1fr));
+}
+@media (min-width: 640px) {
+  .pl-grid--cols {
+    grid-template-columns: repeat(var(--pl-grid-cols-sm, var(--pl-grid-cols, 1)), minmax(0, 1fr));
+  }
+}
+@media (min-width: 768px) {
+  .pl-grid--cols {
+    grid-template-columns: repeat(var(--pl-grid-cols-md, var(--pl-grid-cols-sm, var(--pl-grid-cols, 1))), minmax(0, 1fr));
+  }
+}
+@media (min-width: 1024px) {
+  .pl-grid--cols {
+    grid-template-columns: repeat(var(--pl-grid-cols-lg, var(--pl-grid-cols-md, var(--pl-grid-cols-sm, var(--pl-grid-cols, 1)))), minmax(0, 1fr));
+  }
+}
+@media (min-width: 1280px) {
+  .pl-grid--cols {
+    grid-template-columns: repeat(var(--pl-grid-cols-xl, var(--pl-grid-cols-lg, var(--pl-grid-cols-md, var(--pl-grid-cols-sm, var(--pl-grid-cols, 1))))), minmax(0, 1fr));
+  }
+}
+
 /* ── row (label | body [| status]) ── */
 .pl-row {
   display: grid;
@@ -1282,6 +1361,137 @@ a.pl-changelog__version:hover {
   color: var(--pl-color-fg-muted);
 }
 
+/* ── TabBar (browser-style session tabs) ────────────────────────────────────── */
+/* On a narrow window session tabs scroll horizontally (browser/VS Code behaviour) —
+   they do NOT collapse to a <select> like Tabs, because a select can't host the
+   per-tab close / inline rename / add-new affordances that are the point of TabBar. */
+.pl-tabbar {
+  display: flex;
+  align-items: stretch;
+  gap: 2px;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-tabbar__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  flex: 0 1 auto;
+  min-width: 92px;
+  max-width: 220px;
+  padding: 7px 10px 7px 12px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--pl-color-fg-muted);
+  font-family: var(--pl-font-sans);
+  font-size: 13px;
+  cursor: pointer;
+  border-radius: var(--pl-radius) var(--pl-radius) 0 0;
+  transition:
+    background var(--pl-motion-fast) var(--pl-motion-ease),
+    color var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-tabbar__tab:hover {
+  background: var(--pl-color-bg-hover);
+  color: var(--pl-color-fg);
+}
+.pl-tabbar__tab:focus-visible {
+  outline: 2px solid var(--pl-color-accent);
+  outline-offset: -2px;
+}
+.pl-tabbar__tab--active {
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-subtle);
+  border-bottom-color: var(--pl-color-accent);
+}
+.pl-tabbar__icon {
+  display: inline-flex;
+  align-items: center;
+}
+.pl-tabbar__icon svg {
+  width: 15px;
+  height: 15px;
+}
+.pl-tabbar__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pl-tabbar__edit {
+  min-width: 60px;
+  max-width: 140px;
+  padding: 1px 4px;
+  font: inherit;
+  font-size: 13px;
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-inset);
+  border: var(--pl-border-width) solid var(--pl-color-accent);
+  border-radius: calc(var(--pl-radius) - 2px);
+  outline: none;
+}
+.pl-tabbar__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-tabbar__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-right: -3px;
+  padding: 0;
+  color: var(--pl-color-fg-subtle);
+  background: none;
+  border: none;
+  border-radius: var(--pl-radius);
+  cursor: pointer;
+  opacity: 0.7;
+  transition:
+    background var(--pl-motion-fast) var(--pl-motion-ease),
+    color var(--pl-motion-fast) var(--pl-motion-ease),
+    opacity var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-tabbar__close:hover {
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-hover);
+  opacity: 1;
+}
+.pl-tabbar__add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  flex-shrink: 0;
+  margin-left: 2px;
+  color: var(--pl-color-fg-muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+  border-radius: var(--pl-radius);
+  transition:
+    background var(--pl-motion-fast) var(--pl-motion-ease),
+    color var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-tabbar__add:hover {
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-hover);
+}
+
 /* ── ui component: forms.css ───────────────────────────────────────────────── */
 /* @protolabsai/ui — forms styles (over @protolabsai/design --pl-* tokens). */
 
@@ -2659,6 +2869,175 @@ a.pl-changelog__version:hover {
   gap: var(--pl-space-2);
 }
 
+/* ── ui component: tool-card.css ───────────────────────────────────────────── */
+/* @protolabsai/ui — ToolCard (streamed tool-call disclosure). Ported from the
+   protoAgent console's tool-card family onto --pl-* tokens. The frame only — the
+   body is a host-filled slot (per-tool value rendering stays app-side). */
+
+.pl-toolcard-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pl-space-2);
+  min-width: 0;
+}
+.pl-toolcard-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.pl-toolcard {
+  min-width: 0;
+  max-width: 100%;
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+  overflow: hidden;
+}
+
+.pl-toolcard__head {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  padding: 6px 9px;
+  background: none;
+  border: none;
+  color: var(--pl-color-fg-muted);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+.pl-toolcard__head:disabled {
+  cursor: default;
+}
+.pl-toolcard__head:hover:not(:disabled) .pl-toolcard__name {
+  color: var(--pl-color-fg);
+}
+
+.pl-toolcard__caret {
+  flex: none;
+  display: inline-flex;
+  color: var(--pl-color-fg-subtle);
+  transition: transform var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-toolcard__caret--open {
+  transform: rotate(90deg);
+}
+.pl-toolcard__caret--hidden {
+  visibility: hidden;
+}
+
+.pl-toolcard__icon {
+  flex: none;
+  display: inline-flex;
+  color: var(--pl-color-fg-muted);
+}
+.pl-toolcard__icon svg {
+  width: 13px;
+  height: 13px;
+}
+
+.pl-toolcard__name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--pl-font-mono);
+  color: var(--pl-color-fg);
+}
+
+.pl-toolcard__dur {
+  flex: none;
+  font-family: var(--pl-font-mono);
+  font-size: 10px;
+  color: var(--pl-color-fg-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.pl-toolcard__status {
+  flex: none;
+  display: inline-flex;
+}
+.pl-toolcard__status--done {
+  color: var(--pl-color-status-success);
+}
+.pl-toolcard__status--error {
+  color: var(--pl-color-status-error);
+}
+.pl-toolcard__status--running {
+  color: var(--pl-color-status-warning);
+}
+.pl-toolcard__spin {
+  animation: pl-toolcard-spin 0.8s linear infinite;
+}
+@keyframes pl-toolcard-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.pl-toolcard__body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 9px;
+  border-top: var(--pl-border-width) solid var(--pl-color-border);
+}
+
+/* subagent `task` nesting — indented rail of child cards */
+.pl-toolcard__children {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  margin-left: 14px;
+  padding-left: 10px;
+  border-left: 2px solid var(--pl-color-border);
+}
+
+/* body section (input / result) */
+.pl-toolcard__section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.pl-toolcard__section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.pl-toolcard__label {
+  font-family: var(--pl-font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--pl-color-fg-subtle);
+}
+.pl-toolcard__copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  background: none;
+  border: none;
+  border-radius: var(--pl-radius);
+  color: var(--pl-color-fg-muted);
+  cursor: pointer;
+  transition:
+    background var(--pl-motion-fast) var(--pl-motion-ease),
+    color var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-toolcard__copy:hover {
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-hover);
+}
+
 /* ── ui component: theming.css ─────────────────────────────────────────────── */
 /* @protolabsai/ui — ThemePanel (live token editor). All --pl-* driven, so the
    panel itself re-skins live as you edit. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -21,6 +21,7 @@
     "./data": "./src/data.tsx",
     "./menu": "./src/menu.tsx",
     "./app-shell": "./src/app-shell.tsx",
+    "./tool-card": "./src/tool-card.tsx",
     "./theming": "./src/theming.tsx",
     "./styles.css": "./src/styles.css",
     "./plugin-kit.css": "./dist/plugin-kit.css",

package/src/Empty.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Empty, Button } from "./primitives";
+
+const meta: Meta<typeof Empty> = { title: "Components/Primitives/Empty" };
+export default meta;
+type Story = StoryObj<typeof Empty>;
+
+const Inbox = () => (
+  <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M22 12h-6l-2 3h-4l-2-3H2" />
+    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+  </svg>
+);
+
+/** Slotted: icon + title + description + action — the standard scaffold. */
+export const Slotted: Story = {
+  render: () => (
+    <div style={{ maxWidth: 420, border: "1px solid var(--pl-color-border)", borderRadius: 8 }}>
+      <Empty
+        icon={<Inbox />}
+        title="No agents yet"
+        description="Discover protoAgents on your network to add them as delegates."
+        action={<Button>Discover</Button>}
+      />
+    </div>
+  ),
+};
+
+/** Bare form still works unchanged (back-compat). */
+export const Bare: Story = {
+  render: () => <Empty>no open contracts</Empty>,
+};

package/src/Grid.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Grid } from "./layout";
+import { Card } from "./primitives";
+
+const meta: Meta<typeof Grid> = { title: "Components/Layout/Grid" };
+export default meta;
+type Story = StoryObj<typeof Grid>;
+
+const cards = (n: number) =>
+  Array.from({ length: n }, (_, i) => (
+    <Card key={i} style={{ padding: 16, fontFamily: "var(--pl-font-mono)", fontSize: 13, color: "var(--pl-color-fg-muted)" }}>
+      card {i + 1}
+    </Card>
+  ));
+
+/** `min` — auto-fill: as many columns of ≥ the floor as fit. Resize the canvas. */
+export const AutoFill: Story = {
+  render: () => <Grid min="14rem" gap="md">{cards(8)}</Grid>,
+};
+
+/** `cols` — responsive count, cascading by breakpoint (1 → 2 at md → 3 at xl). */
+export const ResponsiveCols: Story = {
+  render: () => (
+    <Grid cols={{ base: 1, md: 2, xl: 3 }} gap="md">
+      {cards(6)}
+    </Grid>
+  ),
+};
+
+/** `cols` — a fixed count. */
+export const FixedCols: Story = {
+  render: () => (
+    <Grid cols={4} gap="lg">
+      {cards(8)}
+    </Grid>
+  ),
+};

package/src/TabBar.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { TabBar } from "./navigation";
+import type { TabBarItem } from "./navigation";
+
+const meta: Meta = { title: "Components/Navigation/TabBar" };
+export default meta;
+type Story = StoryObj;
+
+/** Full browser-style session tabs: close ✕, double-click to rename, "+" to add.
+ *  Drop any callback to hide its affordance. On a narrow canvas the strip scrolls
+ *  (it does NOT collapse to a select — that can't carry close/rename/add). */
+export const Sessions: Story = {
+  render: () => {
+    function Demo() {
+      const [tabs, setTabs] = useState<TabBarItem[]>([
+        { id: "a", label: "research" },
+        { id: "b", label: "draft", badge: 3 },
+        { id: "c", label: "review" },
+      ]);
+      const [active, setActive] = useState("a");
+      let seq = tabs.length;
+      return (
+        <div style={{ maxWidth: 520 }}>
+          <TabBar
+            ariaLabel="Sessions"
+            items={tabs}
+            activeId={active}
+            onSelect={setActive}
+            onClose={(id) => {
+              setTabs((ts) => {
+                const next = ts.filter((t) => t.id !== id);
+                if (id === active && next[0]) setActive(next[0].id);
+                return next;
+              });
+            }}
+            onRename={(id, label) => setTabs((ts) => ts.map((t) => (t.id === id ? { ...t, label } : t)))}
+            onAdd={() => {
+              const id = `s${++seq}`;
+              setTabs((ts) => [...ts, { id, label: `session ${seq}` }]);
+              setActive(id);
+            }}
+          />
+          <p style={{ fontFamily: "var(--pl-font-mono)", fontSize: 12, color: "var(--pl-color-fg-muted)" }}>
+            active: {active} · double-click a tab to rename
+          </p>
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+/** Read-only: no callbacks beyond select → degrades to a plain strip. */
+export const SelectOnly: Story = {
+  render: () => {
+    function Demo() {
+      const [active, setActive] = useState("a");
+      return (
+        <TabBar
+          ariaLabel="Views"
+          items={[
+            { id: "a", label: "overview" },
+            { id: "b", label: "activity" },
+            { id: "c", label: "settings" },
+          ]}
+          activeId={active}
+          onSelect={setActive}
+        />
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/ToolCard.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ToolCard, ToolCardList, ToolSection } from "./tool-card";
+
+const meta: Meta = { title: "Components/ToolCard" };
+export default meta;
+type Story = StoryObj;
+
+const Mono = ({ children }: { children: string }) => (
+  <pre style={{ margin: 0, fontFamily: "var(--pl-font-mono)", fontSize: 12, color: "var(--pl-color-fg-muted)", whiteSpace: "pre-wrap" }}>{children}</pre>
+);
+
+const Globe = () => (
+  <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+    <circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />
+  </svg>
+);
+
+/** The three states + a collapsed (no-detail) running call. Body is a host slot —
+ *  here filled with `ToolSection`s; in protoAgent it's the per-tool value renderer. */
+export const States: Story = {
+  render: () => (
+    <div style={{ maxWidth: 460 }}>
+      <ToolCardList>
+        <ToolCard name="web_fetch" status="done" icon={<Globe />} duration={1240} defaultOpen>
+          <ToolSection label="input" copyText='{"url":"https://protolabs.studio"}'>
+            <Mono>{`{ "url": "https://protolabs.studio" }`}</Mono>
+          </ToolSection>
+          <ToolSection label="result" copyText="200 OK · 18kb">
+            <Mono>200 OK · 18kb · text/html</Mono>
+          </ToolSection>
+        </ToolCard>
+        <ToolCard name="web_search" status="running" duration={820}>
+          <ToolSection label="input">
+            <Mono>protoLabs design system</Mono>
+          </ToolSection>
+        </ToolCard>
+        <ToolCard name="calculator" status="error">
+          <ToolSection label="result">
+            <Mono>SyntaxError: unexpected token</Mono>
+          </ToolSection>
+        </ToolCard>
+        <ToolCard name="current_time" status="done" duration={12} />
+      </ToolCardList>
+    </div>
+  ),
+};
+
+/** Subagent `task` with nested child tool calls (the `parentId` grouping). */
+export const Nested: Story = {
+  render: () => (
+    <div style={{ maxWidth: 460 }}>
+      <ToolCard
+        name="task"
+        status="done"
+        duration={4300}
+        nested={
+          <>
+            <ToolCard name="web_search" status="done" duration={910}>
+              <ToolSection label="result"><Mono>7 results</Mono></ToolSection>
+            </ToolCard>
+            <ToolCard name="web_fetch" status="done" duration={1320}>
+              <ToolSection label="result"><Mono>200 OK</Mono></ToolSection>
+            </ToolCard>
+          </>
+        }
+      >
+        <ToolSection label="input"><Mono>research the brand voice</Mono></ToolSection>
+      </ToolCard>
+    </div>
+  ),
+};

package/src/layout.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
 import { cx } from "./internal";
 
 export function Stat({ value, label }: { value: ReactNode; label: ReactNode }) {
@@ -23,6 +23,45 @@ export function Stats({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return <div className={cx("pl-stats", className)} {...rest} />;
 }
 
+type GridCols = number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
+
+/** Responsive card grid — the generic `repeat(auto-fill, minmax())` every surface
+ *  was re-rolling. Pass `min` (auto-fill floor — packs in as many columns as fit)
+ *  OR `cols` (a fixed count, or a per-breakpoint map). `gap` is on the token scale. */
+export function Grid({
+  min,
+  cols,
+  gap = "md",
+  className,
+  style,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & {
+  /** Auto-fill column floor, e.g. "14rem". Columns wrap to fit the container. */
+  min?: string;
+  /** Fixed column count, or per-breakpoint `{ base, sm, md, lg, xl }`. Ignored if `min` is set. */
+  cols?: GridCols;
+  gap?: "sm" | "md" | "lg";
+}) {
+  const vars: Record<string, string> = {};
+  if (min) {
+    vars["--pl-grid-min"] = min;
+  } else if (cols != null) {
+    const c = typeof cols === "number" ? { base: cols } : cols;
+    if (c.base != null) vars["--pl-grid-cols"] = String(c.base);
+    if (c.sm != null) vars["--pl-grid-cols-sm"] = String(c.sm);
+    if (c.md != null) vars["--pl-grid-cols-md"] = String(c.md);
+    if (c.lg != null) vars["--pl-grid-cols-lg"] = String(c.lg);
+    if (c.xl != null) vars["--pl-grid-cols-xl"] = String(c.xl);
+  }
+  return (
+    <div
+      className={cx("pl-grid", min ? "pl-grid--auto" : "pl-grid--cols", `pl-grid--gap-${gap}`, className)}
+      style={{ ...vars, ...style } as CSSProperties}
+      {...rest}
+    />
+  );
+}
+
 export type RowProps = {
   /** Left mono label / layer. */
   label: string;