@protolabsai/ui 0.22.1 → 0.23.0

package/dist/plugin-kit.css

@@ -372,6 +372,45 @@ a:hover {
   margin-top: var(--pl-space-2);
 }
 
+/* ── count badge (round numeric pill) — shared by Tabs / TabBar / SurfaceRail.
+   Distinct from .pl-badge (a lowercase text/label pill). ── */
+.pl-count {
+  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;
+}
+
+/* ── icon button (bare clickable glyph) — shared base for close / add / copy /
+   dialog + toast dismiss. Each use adds its own size/margin delta. ── */
+.pl-iconbtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--pl-color-fg-muted);
+  background: none;
+  border: none;
+  border-radius: var(--pl-radius);
+  cursor: pointer;
+  transition:
+    background var(--pl-motion-fast) var(--pl-motion-ease),
+    color var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-iconbtn:hover {
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-hover);
+}
+
 /* ── divider ── */
 .pl-divider {
   border: 0;
@@ -1137,23 +1176,8 @@ a.pl-changelog__version:hover {
   height: 15px;
 }
 
-.pl-tab__badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 5px;
-  font-family: var(--pl-font-mono);
-  font-size: 10px;
-  line-height: 1;
-  color: var(--pl-color-fg-muted);
-  background: var(--pl-color-bg-subtle);
-  border: var(--pl-border-width) solid var(--pl-color-border);
-  border-radius: 999px;
-}
-
-.pl-tab--active .pl-tab__badge {
+/* count badge is the shared .pl-count (primitives.css) */
+.pl-tab--active .pl-count {
   color: var(--pl-color-fg);
 }
 
@@ -1420,76 +1444,24 @@ a.pl-changelog__version:hover {
   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;
-}
+/* inline rename uses the shared EditableText control (.pl-editable__input) */
+/* count badge is the shared .pl-count (primitives.css) */
+/* close / add extend the shared .pl-iconbtn (primitives.css) — deltas only */
 .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);
+  transition: 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 ───────────────────────────────────────────────── */
@@ -1748,6 +1720,33 @@ a.pl-changelog__version:hover {
   color: var(--pl-color-fg);
 }
 
+/* ── EditableText (inline rename) ── */
+/* Both states are font:inherit so the label↔input flip is seamless in any context. */
+.pl-editable {
+  cursor: text;
+  border-radius: calc(var(--pl-radius) - 2px);
+}
+.pl-editable:hover {
+  background: var(--pl-color-bg-hover);
+}
+.pl-editable:focus-visible {
+  outline: 2px solid var(--pl-color-accent);
+  outline-offset: 2px;
+}
+.pl-editable__input {
+  min-width: 60px;
+  padding: 1px 4px;
+  font: inherit;
+  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-editable__input--invalid {
+  border-color: var(--pl-color-status-error);
+}
+
 /* ── ui component: overlays.css ────────────────────────────────────────────── */
 /* @protolabsai/ui — overlays styles (over @protolabsai/design --pl-* tokens). */
 
@@ -1799,28 +1798,14 @@ a.pl-changelog__version:hover {
   color: var(--pl-color-fg);
 }
 
+/* extends the shared .pl-iconbtn (primitives.css) — delta only */
 .pl-dialog__close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   width: 24px;
   height: 24px;
   font-size: 18px;
   line-height: 1;
-  color: var(--pl-color-fg-muted);
-  background: transparent;
-  border: none;
-  border-radius: var(--pl-radius);
-  cursor: pointer;
-  transition:
-    color var(--pl-motion-fast) var(--pl-motion-ease),
-    background var(--pl-motion-fast) var(--pl-motion-ease);
 }
 
-.pl-dialog__close:hover {
-  color: var(--pl-color-fg);
-  background: var(--pl-color-bg-hover);
-}
 
 .pl-dialog__body {
   padding: var(--pl-space-4);
@@ -1979,19 +1964,13 @@ a.pl-changelog__version:hover {
   color: var(--pl-color-fg-muted);
 }
 
+/* extends the shared .pl-iconbtn (primitives.css) — delta only */
 .pl-toast__close {
   flex-shrink: 0;
   font-size: 16px;
   line-height: 1;
-  color: var(--pl-color-fg-muted);
-  background: transparent;
-  border: none;
-  cursor: pointer;
 }
 
-.pl-toast__close:hover {
-  color: var(--pl-color-fg);
-}
 
 /* ── Tooltip (CSS-only) ──────────────────────────────────────────────────────── */
 .pl-tip-wrap {
@@ -2546,22 +2525,17 @@ a.pl-changelog__version:hover {
   white-space: nowrap;
 }
 
-.pl-rail__badge {
+/* rail count badge = shared .pl-count (primitives.css) + absolute positioning */
+.pl-count--rail {
   position: absolute;
   top: 4px;
   right: 9px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   min-width: 15px;
   height: 15px;
   padding: 0 4px;
-  font-family: var(--pl-font-mono);
   font-size: 9px;
   color: var(--pl-color-fg);
-  background: var(--pl-color-bg-subtle);
-  border: var(--pl-border-width) solid var(--pl-color-border-strong);
-  border-radius: 999px;
+  border-color: var(--pl-color-border-strong);
 }
 
 .pl-rail__dot {
@@ -2984,13 +2958,9 @@ a.pl-changelog__version:hover {
 .pl-toolcard__status--running {
   color: var(--pl-color-status-warning);
 }
+/* reuses the shared `pl-spin` keyframe (data.css) */
 .pl-toolcard__spin {
-  animation: pl-toolcard-spin 0.8s linear infinite;
-}
-@keyframes pl-toolcard-spin {
-  to {
-    transform: rotate(360deg);
-  }
+  animation: pl-spin 0.8s linear infinite;
 }
 
 .pl-toolcard__body {
@@ -3032,23 +3002,9 @@ a.pl-changelog__version:hover {
   letter-spacing: 0.04em;
   color: var(--pl-color-fg-subtle);
 }
+/* extends the shared .pl-iconbtn (primitives.css) — delta only */
 .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 ─────────────────────────────────────────────── */

package/package.json

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

package/src/EditableText.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { EditableText } from "./forms";
+
+const meta: Meta = { title: "Components/Forms/EditableText" };
+export default meta;
+type Story = StoryObj;
+
+/** Uncontrolled: double-click (or focus + Enter) to edit; Enter commits, Esc cancels.
+ *  The input is `font: inherit`, so it flips in place seamlessly. */
+export const Inline: Story = {
+  render: () => {
+    function Demo() {
+      const [name, setName] = useState("untitled-agent");
+      return (
+        <div style={{ fontSize: 16, fontWeight: 600, color: "var(--pl-color-fg)" }}>
+          <EditableText value={name} onCommit={setName} aria-label="Agent name" />
+          <p style={{ fontFamily: "var(--pl-font-mono)", fontSize: 12, color: "var(--pl-color-fg-muted)", fontWeight: 400 }}>
+            value: {name} · double-click to rename
+          </p>
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+/** With inline validation — slugs only; commit is blocked while invalid (red border). */
+export const Validated: Story = {
+  render: () => {
+    function Demo() {
+      const [slug, setSlug] = useState("my-project");
+      return (
+        <div style={{ fontFamily: "var(--pl-font-mono)", fontSize: 14, color: "var(--pl-color-fg)" }}>
+          <EditableText value={slug} onCommit={setSlug} validate={(v) => /^[a-z0-9-]+$/.test(v)} aria-label="Slug" />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/app-shell.tsx

@@ -50,7 +50,7 @@ function RailItemInner({ item }: { item: RailItem }) {
       </span>
       <span className="pl-rail__label">{item.label}</span>
       {item.badge ? (
-        <span className="pl-rail__badge">{item.badge > 9 ? "9+" : item.badge}</span>
+        <span className="pl-count pl-count--rail">{item.badge > 9 ? "9+" : item.badge}</span>
       ) : item.dot ? (
         <span className="pl-rail__dot" aria-label="active" />
       ) : null}

package/src/forms.tsx

@@ -1,5 +1,5 @@
 import type { InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import { cx } from "./internal";
 
 /** A labeled input/textarea bound to a string value (form fields, editors). */
@@ -171,3 +171,105 @@ export function Radio({
     </label>
   );
 }
+
+/** Inline rename: a text label that flips to an input in place — Enter commits,
+ *  Esc cancels, blur commits (or cancels via `commitOnBlur={false}`). Uncontrolled
+ *  by default (double-click / Enter to edit); pass `editing` + `onEditingChange` to
+ *  drive it from a host (e.g. a paired trigger). The input is `font: inherit`, so the
+ *  flip is visually seamless. The canonical inline-edit control — TabBar renders this. */
+export function EditableText({
+  value,
+  onCommit,
+  onCancel,
+  validate,
+  commitOnBlur = true,
+  editing: editingProp,
+  onEditingChange,
+  placeholder,
+  className,
+  inputClassName,
+  "aria-label": ariaLabel,
+}: {
+  value: string;
+  onCommit: (next: string) => void;
+  onCancel?: () => void;
+  /** Optional inline validity — a falsy result blocks commit (stays in edit). */
+  validate?: (v: string) => boolean;
+  /** Blur commits (default) or cancels. */
+  commitOnBlur?: boolean;
+  /** Controlled edit state. Omit for uncontrolled (double-click to edit). */
+  editing?: boolean;
+  onEditingChange?: (editing: boolean) => void;
+  placeholder?: string;
+  className?: string;
+  inputClassName?: string;
+  "aria-label"?: string;
+}) {
+  const [uncontrolled, setUncontrolled] = useState(false);
+  const editing = editingProp ?? uncontrolled;
+  const setEditing = (v: boolean) => {
+    if (editingProp === undefined) setUncontrolled(v);
+    onEditingChange?.(v);
+  };
+  const [draft, setDraft] = useState(value);
+  // Reset the draft to the live value each time editing (re)starts.
+  useEffect(() => {
+    if (editing) setDraft(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editing]);
+
+  const invalid = validate ? !validate(draft.trim()) : false;
+  const commit = () => {
+    const next = draft.trim();
+    if (validate && !validate(next)) return; // stay in edit while invalid
+    if (next && next !== value) onCommit(next);
+    setEditing(false);
+  };
+  const cancel = () => {
+    setDraft(value);
+    onCancel?.();
+    setEditing(false);
+  };
+
+  if (!editing) {
+    return (
+      <span
+        className={cx("pl-editable", className)}
+        tabIndex={0}
+        role="button"
+        aria-label={ariaLabel}
+        onDoubleClick={() => setEditing(true)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === "F2") {
+            e.preventDefault();
+            setEditing(true);
+          }
+        }}
+      >
+        {value || placeholder}
+      </span>
+    );
+  }
+  return (
+    <input
+      className={cx("pl-editable__input", invalid && "pl-editable__input--invalid", inputClassName)}
+      autoFocus
+      value={draft}
+      placeholder={placeholder}
+      aria-label={ariaLabel}
+      aria-invalid={invalid || undefined}
+      onChange={(e) => setDraft(e.target.value)}
+      onClick={(e) => e.stopPropagation()}
+      onBlur={() => (commitOnBlur ? commit() : cancel())}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commit();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          cancel();
+        }
+      }}
+    />
+  );
+}

package/src/navigation.tsx

@@ -1,6 +1,7 @@
 import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
 import { useId, useState } from "react";
 import { cx } from "./internal";
+import { EditableText } from "./forms";
 
 export type TabItem = {
   id: string;
@@ -50,7 +51,7 @@ export function Tabs({
             </span>
           )}
           <span className="pl-tab__label">{t.label}</span>
-          {t.badge != null && <span className="pl-tab__badge">{t.badge}</span>}
+          {t.badge != null && <span className="pl-count">{t.badge}</span>}
           {t.locked ? (
             <span className="pl-tab__lock" aria-hidden>
               🔒
@@ -111,20 +112,8 @@ export function TabBar({
   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);
-  };
+  // Which tab is mid-rename; the inline editor itself is the shared EditableText.
+  const [editingId, setEditingId] = useState<string | null>(null);
   return (
     <div className="pl-tabbar" role="tablist" aria-label={ariaLabel}>
       {items.map((t) => (
@@ -134,10 +123,10 @@ export function TabBar({
           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)}
+          onClick={() => editingId !== t.id && onSelect(t.id)}
+          onDoubleClick={() => onRename && setEditingId(t.id)}
           onKeyDown={(e) => {
-            if (editing === t.id) return;
+            if (editingId === t.id) return;
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
               onSelect(t.id);
@@ -149,32 +138,24 @@ export function TabBar({
               {t.icon}
             </span>
           )}
-          {editing === t.id ? (
-            <input
-              className="pl-tabbar__edit"
-              autoFocus
-              value={draft}
+          {editingId === t.id ? (
+            <EditableText
+              editing
+              value={t.label}
               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);
-                }
+              onCommit={(v) => onRename?.(t.id, v)}
+              onEditingChange={(e) => {
+                if (!e) setEditingId(null);
               }}
             />
           ) : (
             <span className="pl-tabbar__label">{t.label}</span>
           )}
-          {t.badge != null && <span className="pl-tabbar__badge">{t.badge}</span>}
-          {onClose && editing !== t.id && (
+          {t.badge != null && <span className="pl-count">{t.badge}</span>}
+          {onClose && editingId !== t.id && (
             <button
               type="button"
-              className="pl-tabbar__close"
+              className="pl-iconbtn pl-tabbar__close"
               aria-label={`Close ${t.label}`}
               onClick={(e) => {
                 e.stopPropagation();
@@ -189,7 +170,7 @@ export function TabBar({
         </div>
       ))}
       {onAdd && (
-        <button type="button" className="pl-tabbar__add" aria-label={addLabel} title={addLabel} onClick={onAdd}>
+        <button type="button" className="pl-iconbtn 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>

package/src/overlays.tsx

@@ -100,7 +100,7 @@ export function Dialog({
               {title}
             </div>
             {onClose && (
-              <button type="button" className="pl-dialog__close" aria-label="Close" onClick={onClose}>
+              <button type="button" className="pl-iconbtn pl-dialog__close" aria-label="Close" onClick={onClose}>
                 ×
               </button>
             )}
@@ -200,7 +200,7 @@ export function Drawer({
               {title}
             </div>
             {onClose && (
-              <button type="button" className="pl-dialog__close" aria-label="Close" onClick={onClose}>
+              <button type="button" className="pl-iconbtn pl-dialog__close" aria-label="Close" onClick={onClose}>
                 ×
               </button>
             )}
@@ -265,7 +265,7 @@ function ToastView({ toast, onDismiss }: { toast: ToastItem; onDismiss: (id: str
         {toast.title != null && <div className="pl-toast__title">{toast.title}</div>}
         <div className="pl-toast__msg">{toast.message}</div>
       </div>
-      <button type="button" className="pl-toast__close" aria-label="Dismiss" onClick={() => onDismiss(toast.id)}>
+      <button type="button" className="pl-iconbtn pl-toast__close" aria-label="Dismiss" onClick={() => onDismiss(toast.id)}>
         ×
       </button>
     </div>

package/src/styles/app-shell.css

@@ -65,22 +65,17 @@
   white-space: nowrap;
 }
 
-.pl-rail__badge {
+/* rail count badge = shared .pl-count (primitives.css) + absolute positioning */
+.pl-count--rail {
   position: absolute;
   top: 4px;
   right: 9px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   min-width: 15px;
   height: 15px;
   padding: 0 4px;
-  font-family: var(--pl-font-mono);
   font-size: 9px;
   color: var(--pl-color-fg);
-  background: var(--pl-color-bg-subtle);
-  border: var(--pl-border-width) solid var(--pl-color-border-strong);
-  border-radius: 999px;
+  border-color: var(--pl-color-border-strong);
 }
 
 .pl-rail__dot {

package/src/styles/forms.css

@@ -252,3 +252,30 @@
   font-size: 13px;
   color: var(--pl-color-fg);
 }
+
+/* ── EditableText (inline rename) ── */
+/* Both states are font:inherit so the label↔input flip is seamless in any context. */
+.pl-editable {
+  cursor: text;
+  border-radius: calc(var(--pl-radius) - 2px);
+}
+.pl-editable:hover {
+  background: var(--pl-color-bg-hover);
+}
+.pl-editable:focus-visible {
+  outline: 2px solid var(--pl-color-accent);
+  outline-offset: 2px;
+}
+.pl-editable__input {
+  min-width: 60px;
+  padding: 1px 4px;
+  font: inherit;
+  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-editable__input--invalid {
+  border-color: var(--pl-color-status-error);
+}

package/src/styles/navigation.css

@@ -32,23 +32,8 @@
   height: 15px;
 }
 
-.pl-tab__badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 5px;
-  font-family: var(--pl-font-mono);
-  font-size: 10px;
-  line-height: 1;
-  color: var(--pl-color-fg-muted);
-  background: var(--pl-color-bg-subtle);
-  border: var(--pl-border-width) solid var(--pl-color-border);
-  border-radius: 999px;
-}
-
-.pl-tab--active .pl-tab__badge {
+/* count badge is the shared .pl-count (primitives.css) */
+.pl-tab--active .pl-count {
   color: var(--pl-color-fg);
 }
 
@@ -315,74 +300,22 @@
   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;
-}
+/* inline rename uses the shared EditableText control (.pl-editable__input) */
+/* count badge is the shared .pl-count (primitives.css) */
+/* close / add extend the shared .pl-iconbtn (primitives.css) — deltas only */
 .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);
+  transition: 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/overlays.css

@@ -48,28 +48,14 @@
   color: var(--pl-color-fg);
 }
 
+/* extends the shared .pl-iconbtn (primitives.css) — delta only */
 .pl-dialog__close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   width: 24px;
   height: 24px;
   font-size: 18px;
   line-height: 1;
-  color: var(--pl-color-fg-muted);
-  background: transparent;
-  border: none;
-  border-radius: var(--pl-radius);
-  cursor: pointer;
-  transition:
-    color var(--pl-motion-fast) var(--pl-motion-ease),
-    background var(--pl-motion-fast) var(--pl-motion-ease);
 }
 
-.pl-dialog__close:hover {
-  color: var(--pl-color-fg);
-  background: var(--pl-color-bg-hover);
-}
 
 .pl-dialog__body {
   padding: var(--pl-space-4);
@@ -228,19 +214,13 @@
   color: var(--pl-color-fg-muted);
 }
 
+/* extends the shared .pl-iconbtn (primitives.css) — delta only */
 .pl-toast__close {
   flex-shrink: 0;
   font-size: 16px;
   line-height: 1;
-  color: var(--pl-color-fg-muted);
-  background: transparent;
-  border: none;
-  cursor: pointer;
 }
 
-.pl-toast__close:hover {
-  color: var(--pl-color-fg);
-}
 
 /* ── Tooltip (CSS-only) ──────────────────────────────────────────────────────── */
 .pl-tip-wrap {

package/src/styles/primitives.css

@@ -135,6 +135,45 @@
   margin-top: var(--pl-space-2);
 }
 
+/* ── count badge (round numeric pill) — shared by Tabs / TabBar / SurfaceRail.
+   Distinct from .pl-badge (a lowercase text/label pill). ── */
+.pl-count {
+  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;
+}
+
+/* ── icon button (bare clickable glyph) — shared base for close / add / copy /
+   dialog + toast dismiss. Each use adds its own size/margin delta. ── */
+.pl-iconbtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--pl-color-fg-muted);
+  background: none;
+  border: none;
+  border-radius: var(--pl-radius);
+  cursor: pointer;
+  transition:
+    background var(--pl-motion-fast) var(--pl-motion-ease),
+    color var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-iconbtn:hover {
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-hover);
+}
+
 /* ── divider ── */
 .pl-divider {
   border: 0;

package/src/styles/tool-card.css

@@ -112,13 +112,9 @@
 .pl-toolcard__status--running {
   color: var(--pl-color-status-warning);
 }
+/* reuses the shared `pl-spin` keyframe (data.css) */
 .pl-toolcard__spin {
-  animation: pl-toolcard-spin 0.8s linear infinite;
-}
-@keyframes pl-toolcard-spin {
-  to {
-    transform: rotate(360deg);
-  }
+  animation: pl-spin 0.8s linear infinite;
 }
 
 .pl-toolcard__body {
@@ -160,21 +156,7 @@
   letter-spacing: 0.04em;
   color: var(--pl-color-fg-subtle);
 }
+/* extends the shared .pl-iconbtn (primitives.css) — delta only */
 .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);
 }

package/src/tool-card.tsx

@@ -133,7 +133,7 @@ function CopyButton({ text }: { text: string }) {
   return (
     <button
       type="button"
-      className="pl-toolcard__copy"
+      className="pl-iconbtn pl-toolcard__copy"
       title="Copy to clipboard"
       aria-label={copied ? "Copied" : "Copy"}
       onClick={async () => {