@protolabsai/ui 0.20.0 → 0.21.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). */
 

package/package.json

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

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/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;

package/src/navigation.tsx

@@ -80,6 +80,125 @@ export function Tabs({
   );
 }
 
+export type TabBarItem = {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  badge?: ReactNode;
+};
+
+/** Browser-style session tabs: closable, inline-renamable, with an add-new "+".
+ *  Every interaction callback is optional — absence hides its affordance, so with
+ *  just `items`/`activeId`/`onSelect` it degrades to a plain tab strip. Pass
+ *  `onClose` for per-tab ✕, `onRename` to enable double-click-to-edit, `onAdd` for
+ *  the trailing "+". */
+export function TabBar({
+  items,
+  activeId,
+  onSelect,
+  onClose,
+  onRename,
+  onAdd,
+  addLabel = "New tab",
+  ariaLabel,
+}: {
+  items: TabBarItem[];
+  activeId: string;
+  onSelect: (id: string) => void;
+  onClose?: (id: string) => void;
+  onRename?: (id: string, label: string) => void;
+  onAdd?: () => void;
+  addLabel?: string;
+  ariaLabel?: string;
+}) {
+  const [editing, setEditing] = useState<string | null>(null);
+  const [draft, setDraft] = useState("");
+  const startEdit = (t: TabBarItem) => {
+    if (!onRename) return;
+    setEditing(t.id);
+    setDraft(t.label);
+  };
+  const commit = () => {
+    if (editing != null && onRename) {
+      const v = draft.trim();
+      if (v) onRename(editing, v);
+    }
+    setEditing(null);
+  };
+  return (
+    <div className="pl-tabbar" role="tablist" aria-label={ariaLabel}>
+      {items.map((t) => (
+        <div
+          key={t.id}
+          role="tab"
+          tabIndex={0}
+          aria-selected={t.id === activeId}
+          className={cx("pl-tabbar__tab", t.id === activeId && "pl-tabbar__tab--active")}
+          onClick={() => editing !== t.id && onSelect(t.id)}
+          onDoubleClick={() => startEdit(t)}
+          onKeyDown={(e) => {
+            if (editing === t.id) return;
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onSelect(t.id);
+            }
+          }}
+        >
+          {t.icon != null && (
+            <span className="pl-tabbar__icon" aria-hidden>
+              {t.icon}
+            </span>
+          )}
+          {editing === t.id ? (
+            <input
+              className="pl-tabbar__edit"
+              autoFocus
+              value={draft}
+              aria-label="Rename tab"
+              onChange={(e) => setDraft(e.target.value)}
+              onClick={(e) => e.stopPropagation()}
+              onBlur={commit}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  commit();
+                } else if (e.key === "Escape") {
+                  setEditing(null);
+                }
+              }}
+            />
+          ) : (
+            <span className="pl-tabbar__label">{t.label}</span>
+          )}
+          {t.badge != null && <span className="pl-tabbar__badge">{t.badge}</span>}
+          {onClose && editing !== t.id && (
+            <button
+              type="button"
+              className="pl-tabbar__close"
+              aria-label={`Close ${t.label}`}
+              onClick={(e) => {
+                e.stopPropagation();
+                onClose(t.id);
+              }}
+            >
+              <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
+                <path d="M6 6l12 12M18 6L6 18" />
+              </svg>
+            </button>
+          )}
+        </div>
+      ))}
+      {onAdd && (
+        <button type="button" className="pl-tabbar__add" aria-label={addLabel} title={addLabel} onClick={onAdd}>
+          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
+            <path d="M12 5v14M5 12h14" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}
+
 /** A horizontal kanban board. Wrap BoardColumn children. */
 export function Board({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return <div className={cx("pl-board", className)} {...rest} />;

package/src/primitives.tsx

@@ -40,9 +40,37 @@ export function Eyebrow({ children }: { children: ReactNode }) {
   return <div className="pl-eyebrow">{children}</div>;
 }
 
-/** Mono empty-state line. */
-export function Empty({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("pl-empty", className)} {...rest} />;
+/** Empty state. Bare `<Empty>body</Empty>` still works; pass any of the slots
+ *  (icon / title / description / action) for the standard centered scaffold so
+ *  surfaces stop re-composing it around the wrapper. */
+export function Empty({
+  icon,
+  title,
+  description,
+  action,
+  className,
+  children,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & {
+  icon?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+}) {
+  const slotted = icon != null || title != null || description != null || action != null;
+  return (
+    <div className={cx("pl-empty", slotted && "pl-empty--slotted", className)} {...rest}>
+      {icon != null && (
+        <div className="pl-empty__icon" aria-hidden>
+          {icon}
+        </div>
+      )}
+      {title != null && <div className="pl-empty__title">{title}</div>}
+      {description != null && <div className="pl-empty__desc">{description}</div>}
+      {children}
+      {action != null && <div className="pl-empty__action">{action}</div>}
+    </div>
+  );
 }
 
 /** Hairline rule. */

package/src/styles/layout.css

@@ -39,6 +39,49 @@
   }
 }
 
+/* ── 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;

package/src/styles/navigation.css

@@ -255,3 +255,134 @@
   line-height: 1.55;
   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);
+}

package/src/styles/primitives.css

@@ -99,6 +99,42 @@
   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;