@protolabsai/ui 0.19.1 → 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). */
 
@@ -2515,6 +2725,56 @@ a.pl-changelog__version:hover {
   outline: none;
 }
 
+/* Reopen handle — the grab strip a collapsed side leaves at its edge. Drag it in to
+   size the panel open (VS Code style), or tap/Enter to pop it to its min width. */
+.pl-appshell__reopen {
+  position: relative;
+  flex: 0 0 6px;
+  align-self: stretch;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: col-resize;
+  touch-action: none;
+  transition: background var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-appshell__reopen--right {
+  border-left: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-appshell__reopen--left {
+  border-right: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-appshell__reopen:hover,
+.pl-appshell__reopen:focus-visible {
+  background: var(--pl-color-bg-hover);
+  outline: none;
+}
+/* a centered grip that surfaces on hover/focus so the affordance is discoverable */
+.pl-appshell__reopen::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: 24px;
+  transform: translate(-50%, -50%);
+  border-radius: 2px;
+  background: var(--pl-color-border-strong);
+  opacity: 0;
+  transition: opacity var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-appshell__reopen:hover::after,
+.pl-appshell__reopen:focus-visible::after {
+  opacity: 1;
+}
+
+/* While a divider/reopen gesture is live, kill text selection + force the resize
+   cursor everywhere (the pointer roams the whole window during the drag). */
+.pl-appshell-frame--dragging {
+  cursor: col-resize;
+  user-select: none;
+}
+
 .pl-appshell--mobile {
   flex-direction: column;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.19.1",
+  "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/app-shell.tsx

@@ -253,6 +253,11 @@ function useIsMobile(breakpoint: number) {
 
 type RailOrder = { left: string[]; right: string[] };
 
+// An active divider/reopen gesture. `move`/`up` are the window listeners for this
+// gesture (stored so they can be detached) — see the drag block in AppShell.
+type DragKind = "divider" | "reopen-right" | "reopen-left";
+type DragSession = { kind: DragKind; move: (e: PointerEvent) => void; up: (e: PointerEvent) => void };
+
 export type AppShellProps = {
   leftItems: RailItem[];
   rightItems: RailItem[];
@@ -331,70 +336,107 @@ export function AppShell({
 }: AppShellProps) {
   const isMobile = useIsMobile(mobileBreakpoint);
 
-  // ── resize handle ──
-  // One divider, zero-sum: the right column is width-controlled and the left
-  // flexes to fill, so dragging grows one column as it shrinks the other. Each
-  // side is held at its min on the way in; OVERDRAG px past that min snaps that
-  // side closed (collapse is controlled — the host restores it).
-  const OVERDRAG = 64;
+  // ── divider + collapse/reopen drag ──
+  // One divider, zero-sum: the right column is width-controlled and the left flexes,
+  // so dragging grows one column as it shrinks the other. The gesture runs on WINDOW
+  // listeners so it survives the layout change when a side closes — collapse is only
+  // COMMITTED on pointer-up (drag back out before releasing to recover an accidental
+  // close), the panel can shrink past its min toward the edge, and a collapsed side
+  // exposes a reopen handle you can drag (or tap) back open. Collapse fires once the
+  // side is dragged below half its min — you have to bring it well in, not just nudge.
+  const COLLAPSE_RIGHT = Math.round(minRightWidth * 0.5);
+  const COLLAPSE_LEFT = Math.round(minLeftWidth * 0.5);
+  const REOPEN_TAP = 6; // movement under this on a reopen handle counts as a tap (open at min)
   const leftColRef = useRef<HTMLElement | null>(null);
-  const drag = useRef<{ startX: number; startW: number; startLeftW: number } | null>(null);
-  /** Resize `rightWidth` to `raw` px, holding both columns at their minimums. */
-  const commit = useCallback(
-    (raw: number, startLeftW: number, startW: number) => {
-      const upper = Math.max(minRightWidth, Math.min(maxRightWidth, startLeftW + startW - minLeftWidth));
-      onRightWidthChange(Math.min(upper, Math.max(minRightWidth, raw)));
+  const drag = useRef<DragSession | null>(null);
+  const [dragging, setDragging] = useState(false);
+
+  /** rightWidth snapped back into the valid open range (left keeps its min). */
+  const clampOpen = useCallback(
+    (w: number, spanW: number) => {
+      const upper = Math.max(minRightWidth, Math.min(maxRightWidth, spanW - minLeftWidth));
+      return Math.min(upper, Math.max(minRightWidth, w));
     },
-    [minRightWidth, maxRightWidth, minLeftWidth, onRightWidthChange],
+    [minRightWidth, maxRightWidth, minLeftWidth],
   );
-  const onPointerDown = useCallback(
-    (e: ReactPointerEvent<HTMLDivElement>) => {
+
+  const endGesture = useCallback(() => {
+    const d = drag.current;
+    if (d) {
+      window.removeEventListener("pointermove", d.move);
+      window.removeEventListener("pointerup", d.up);
+      window.removeEventListener("pointercancel", d.up);
+    }
+    drag.current = null;
+    setDragging(false);
+  }, []);
+
+  const beginDrag = useCallback(
+    (kind: DragKind, e: ReactPointerEvent<HTMLElement>) => {
       e.preventDefault();
-      drag.current = { startX: e.clientX, startW: rightWidth, startLeftW: leftColRef.current?.clientWidth ?? 0 };
-      e.currentTarget.setPointerCapture(e.pointerId);
-    },
-    [rightWidth],
-  );
-  const onPointerMove = useCallback(
-    (e: ReactPointerEvent<HTMLDivElement>) => {
-      const d = drag.current;
-      if (!d) return;
-      const raw = d.startW + (d.startX - e.clientX);
-      const predictedLeft = d.startLeftW - (raw - d.startW);
-      const endDrag = () => {
-        drag.current = null;
-        e.currentTarget.releasePointerCapture?.(e.pointerId);
-      };
-      // Overdrag toward the right rail → snap the right column closed.
-      if (onCollapse && raw < minRightWidth - OVERDRAG) {
-        endDrag();
-        onCollapse(true);
-        return;
-      }
-      // Overdrag toward the left rail → snap the left column closed.
-      if (onLeftCollapse && predictedLeft < minLeftWidth - OVERDRAG) {
-        endDrag();
-        onLeftCollapse(true);
-        return;
+      const leftW = leftColRef.current?.clientWidth ?? 0;
+      // Reopen reveals the side first so it can grow from the edge under the pointer.
+      const startW = kind === "reopen-right" ? 0 : rightWidth;
+      if (kind === "reopen-right") {
+        onCollapse?.(false);
+        onRightWidthChange(0);
+      } else if (kind === "reopen-left") {
+        onLeftCollapse?.(false);
       }
-      commit(raw, d.startLeftW, d.startW);
+      const startX = e.clientX;
+      // The two columns share a fixed span during the gesture (zero-sum divider).
+      const spanW = startW + leftW;
+      const rightFromPointer = (clientX: number) =>
+        Math.max(0, Math.min(spanW || maxRightWidth, startW + (startX - clientX)));
+
+      const move = (ev: PointerEvent) => {
+        if (kind === "reopen-left") return; // left is the flex column — reopening is binary
+        onRightWidthChange(rightFromPointer(ev.clientX));
+      };
+      const up = (ev: PointerEvent) => {
+        if (kind === "reopen-left") {
+          endGesture();
+          return;
+        }
+        const moved = Math.abs(ev.clientX - startX);
+        const raw = rightFromPointer(ev.clientX);
+        const span = spanW || raw + minLeftWidth;
+        const leftAtRaw = span - raw;
+        if (kind === "reopen-right" && moved < REOPEN_TAP) {
+          onCollapse?.(false); // a tap on the reopen handle → just open at min
+          onRightWidthChange(clampOpen(minRightWidth, span));
+        } else if (onCollapse && raw < COLLAPSE_RIGHT) {
+          onCollapse(true);
+          onRightWidthChange(clampOpen(startW || minRightWidth, span)); // sane width for next open
+        } else if (onLeftCollapse && spanW > 0 && leftAtRaw < COLLAPSE_LEFT) {
+          onLeftCollapse(true);
+          onRightWidthChange(clampOpen(startW || minRightWidth, span)); // restore right for when left reopens
+        } else {
+          onCollapse?.(false);
+          onRightWidthChange(clampOpen(raw, span));
+        }
+        endGesture();
+      };
+
+      drag.current = { kind, move, up };
+      window.addEventListener("pointermove", move);
+      window.addEventListener("pointerup", up);
+      window.addEventListener("pointercancel", up);
+      setDragging(true);
     },
-    [minRightWidth, minLeftWidth, onCollapse, onLeftCollapse, commit],
+    [rightWidth, minRightWidth, minLeftWidth, maxRightWidth, onRightWidthChange, onCollapse, onLeftCollapse, clampOpen, endGesture, COLLAPSE_RIGHT, COLLAPSE_LEFT],
   );
-  const onPointerUp = useCallback((e: ReactPointerEvent<HTMLDivElement>) => {
-    drag.current = null;
-    e.currentTarget.releasePointerCapture?.(e.pointerId);
-  }, []);
+
   const onKeyDown = useCallback(
     (e: ReactKeyboardEvent<HTMLDivElement>) => {
       if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
       e.preventDefault();
       const step = e.shiftKey ? 48 : 16;
-      const startLeftW = leftColRef.current?.clientWidth ?? 0;
+      const spanW = rightWidth + (leftColRef.current?.clientWidth ?? minLeftWidth);
       // ArrowLeft grows the right column (shrinks the left); ArrowRight reverses.
-      commit(rightWidth + (e.key === "ArrowLeft" ? step : -step), startLeftW, rightWidth);
+      onRightWidthChange(clampOpen(rightWidth + (e.key === "ArrowLeft" ? step : -step), spanW));
     },
-    [rightWidth, commit],
+    [rightWidth, onRightWidthChange, clampOpen],
   );
 
   // ── rail drag-and-drop (only when onRailReorder is provided) ──
@@ -493,11 +535,30 @@ export function AppShell({
   const ctxLeft = onRailContextMenu ? (e: ReactMouseEvent, id: string) => onRailContextMenu("left", e, id) : undefined;
   const ctxRight = onRailContextMenu ? (e: ReactMouseEvent, id: string) => onRailContextMenu("right", e, id) : undefined;
 
+  // Collapsed-but-present sides expose a reopen handle (drag in to size it open, or
+  // tap to pop it to min) — VS Code style.
+  const canReopenRight = !showRight && rightItems.length > 0 && showLeft;
+  const canReopenLeft = leftCollapsed && showRight;
+
   const renderShell = (leftRail: ReactNode, rightRail: ReactNode) => (
-    <div className={cx("pl-appshell-frame", className)}>
+    <div className={cx("pl-appshell-frame", dragging && "pl-appshell-frame--dragging", className)}>
       {header != null && <div className="pl-appshell__header">{header}</div>}
       <div className="pl-appshell">
         {leftRail}
+        {canReopenLeft && (
+          <button
+            type="button"
+            className="pl-appshell__reopen pl-appshell__reopen--left"
+            aria-label="Open left panel"
+            onPointerDown={(e) => beginDrag("reopen-left", e)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onLeftCollapse?.(false);
+              }
+            }}
+          />
+        )}
         {showLeft && (
           <main ref={leftColRef} className="pl-appshell__col pl-appshell__col--left">
             {leftContent}
@@ -514,9 +575,7 @@ export function AppShell({
             aria-valuemax={maxRightWidth}
             aria-valuetext={`Right panel ${rightWidth}px`}
             tabIndex={0}
-            onPointerDown={onPointerDown}
-            onPointerMove={onPointerMove}
-            onPointerUp={onPointerUp}
+            onPointerDown={(e) => beginDrag("divider", e)}
             onKeyDown={onKeyDown}
             onDoubleClick={() => onCollapse?.(true)}
           />
@@ -529,6 +588,20 @@ export function AppShell({
             {rightContent}
           </aside>
         )}
+        {canReopenRight && (
+          <button
+            type="button"
+            className="pl-appshell__reopen pl-appshell__reopen--right"
+            aria-label="Open right panel"
+            onPointerDown={(e) => beginDrag("reopen-right", e)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onCollapse?.(false);
+              }
+            }}
+          />
+        )}
         {rightRail}
       </div>
       {utilityBar != null && <div className="pl-appshell__utility">{utilityBar}</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;

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/app-shell.css

@@ -244,6 +244,56 @@
   outline: none;
 }
 
+/* Reopen handle — the grab strip a collapsed side leaves at its edge. Drag it in to
+   size the panel open (VS Code style), or tap/Enter to pop it to its min width. */
+.pl-appshell__reopen {
+  position: relative;
+  flex: 0 0 6px;
+  align-self: stretch;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: col-resize;
+  touch-action: none;
+  transition: background var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-appshell__reopen--right {
+  border-left: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-appshell__reopen--left {
+  border-right: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-appshell__reopen:hover,
+.pl-appshell__reopen:focus-visible {
+  background: var(--pl-color-bg-hover);
+  outline: none;
+}
+/* a centered grip that surfaces on hover/focus so the affordance is discoverable */
+.pl-appshell__reopen::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: 24px;
+  transform: translate(-50%, -50%);
+  border-radius: 2px;
+  background: var(--pl-color-border-strong);
+  opacity: 0;
+  transition: opacity var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-appshell__reopen:hover::after,
+.pl-appshell__reopen:focus-visible::after {
+  opacity: 1;
+}
+
+/* While a divider/reopen gesture is live, kill text selection + force the resize
+   cursor everywhere (the pointer roams the whole window during the drag). */
+.pl-appshell-frame--dragging {
+  cursor: col-resize;
+  user-select: none;
+}
+
 .pl-appshell--mobile {
   flex-direction: column;
 }

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;