@protolabsai/ui 0.10.0 → 0.12.0

package/package.json

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

package/src/AppShell.full.stories.tsx

@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { Button } from "./primitives";
+import { Badge, Button } from "./primitives";
 import { PanelHeader } from "./navigation";
-import { AppShell, MobileNav, SurfaceRail } from "./app-shell";
+import { StatusDot } from "./data";
+import { AppShell, MobileNav, SurfaceRail, UtilityBar } from "./app-shell";
 import type { MobileItem, RailItem } from "./app-shell";
 
 const meta: Meta = { title: "Components/AppShell" };
@@ -83,6 +84,19 @@ export const Full: Story = {
                 {surfaceBody(activeRight)}
               </>
             }
+            utilityBar={
+              <UtilityBar
+                start={<StatusDot status="success" pulse label="connected · 3 agents" />}
+                end={
+                  <>
+                    <Button size="sm" variant="ghost">
+                      Docs
+                    </Button>
+                    <Badge status="info">v0.11.0</Badge>
+                  </>
+                }
+              />
+            }
             mobileItems={mobile}
             mobileActiveId={activeLeft}
             onMobileSelect={setActiveLeft}

package/src/Changelog.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Changelog, ChangelogChange, ChangelogEntry, Heading, Lead } from "./marketing";
+import { TextLink } from "./primitives";
+
+const meta: Meta = { title: "Components/Marketing/Changelog", parameters: { layout: "fullscreen" } };
+export default meta;
+type Story = StoryObj;
+
+const Page = ({ children }: { children: React.ReactNode }) => (
+  <div style={{ maxWidth: 680, margin: "0 auto", padding: "64px 24px" }}>
+    <Heading style={{ fontSize: "2rem" }}>Changelog</Heading>
+    <Lead>Every release, newest first.</Lead>
+    {children}
+    <div style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--pl-color-border)" }}>
+      <p style={{ fontSize: 13, color: "var(--pl-color-fg-subtle)" }}>
+        Full release notes and source on <TextLink href="#" external>GitHub Releases</TextLink>.
+      </p>
+    </div>
+  </div>
+);
+
+/** User-facing — flat bullets, LLM-summarized voice. The marketing-site layout. */
+export const UserFacing: Story = {
+  render: () => (
+    <Page>
+      <Changelog>
+        <ChangelogEntry version="@protolabsai/ui@0.11.0" date="Jun 9, 2026" latest href="#">
+          <ChangelogChange>Avatars and removable tags for identity and filters</ChangelogChange>
+          <ChangelogChange>A bottom utility bar in the app shell for global status and actions</ChangelogChange>
+          <ChangelogChange>Form toggles now associate with external labels</ChangelogChange>
+        </ChangelogEntry>
+        <ChangelogEntry version="@protolabsai/ui@0.10.0" date="Jun 9, 2026" href="#">
+          <ChangelogChange>Popover — anchored floating content for filters and pickers</ChangelogChange>
+        </ChangelogEntry>
+        <ChangelogEntry version="@protolabsai/ui@0.9.0" date="Jun 9, 2026" href="#">
+          <ChangelogChange>Drag a rail icon to reorder, or across to the other rail</ChangelogChange>
+        </ChangelogEntry>
+        <ChangelogEntry version="@protolabsai/design@0.5.0" date="Jun 9, 2026" href="#">
+          <ChangelogChange>Light mode, OS-driven, with a white-label token set</ChangelogChange>
+        </ChangelogEntry>
+      </Changelog>
+    </Page>
+  ),
+};
+
+/** Technical — typed entries (Keep-a-Changelog style) off the same layout. */
+export const Technical: Story = {
+  render: () => (
+    <Page>
+      <Changelog>
+        <ChangelogEntry version="ui@0.11.0" date="2026-06-09" latest href="#">
+          <ChangelogChange tag="added">Avatar, AvatarGroup, Tag (removable chip)</ChangelogChange>
+          <ChangelogChange tag="added">AppShell utilityBar slot + UtilityBar container</ChangelogChange>
+          <ChangelogChange tag="fixed">Checkbox/Switch spread ...rest for external-label association (#155)</ChangelogChange>
+        </ChangelogEntry>
+        <ChangelogEntry version="ui@0.10.0" date="2026-06-09" href="#">
+          <ChangelogChange tag="added">Popover + PopoverClose (Radix)</ChangelogChange>
+        </ChangelogEntry>
+        <ChangelogEntry version="ui@0.9.0" date="2026-06-09" href="#">
+          <ChangelogChange tag="added">AppShell rail drag-and-drop + cross-rail (dnd-kit)</ChangelogChange>
+          <ChangelogChange tag="changed">Drag overlay reuses the rail-item renderer (keeps badge/dot)</ChangelogChange>
+        </ChangelogEntry>
+      </Changelog>
+    </Page>
+  ),
+};

package/src/Primitives.stories.tsx

@@ -1,10 +1,46 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Callout, Divider, Kbd, TextLink } from "./primitives";
+import { useState } from "react";
+import { Avatar, AvatarGroup, Callout, Divider, Kbd, Tag, TextLink } from "./primitives";
 
 const meta: Meta = { title: "Components/Primitives/Atoms" };
 export default meta;
 type Story = StoryObj;
 
+export const Avatars: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
+      <Avatar name="Jon Reed" />
+      <Avatar name="Cindi Vox" size={40} />
+      <Avatar name="ORBIS" size={22} />
+      <AvatarGroup>
+        <Avatar name="Jon Reed" />
+        <Avatar name="Cindi Vox" />
+        <Avatar name="Beads" />
+        <Avatar name="+3" />
+      </AvatarGroup>
+    </div>
+  ),
+};
+
+export const Tags: Story = {
+  render: () => {
+    function Demo() {
+      const [tags, setTags] = useState(["streaming", "a2a", "voice", "router"]);
+      return (
+        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
+          <Tag>read-only</Tag>
+          {tags.map((t) => (
+            <Tag key={t} onRemove={() => setTags((ts) => ts.filter((x) => x !== t))}>
+              {t}
+            </Tag>
+          ))}
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
 export const Callouts: Story = {
   render: () => (
     <div style={{ display: "grid", gap: 16, maxWidth: 560 }}>

package/src/app-shell.tsx

@@ -280,6 +280,9 @@ export type AppShellProps = {
   onMobileSelect?: (id: string) => void;
   quickBarIds?: string[];
   mobileBreakpoint?: number;
+  /** Bottom 40px track — global utility actions / status / tickers. Presentation
+   *  only; the host fills it (compose a `UtilityBar`). Desktop only. */
+  utilityBar?: ReactNode;
   className?: string;
 };
 
@@ -308,6 +311,7 @@ export function AppShell({
   onMobileSelect,
   quickBarIds,
   mobileBreakpoint = 768,
+  utilityBar,
   className,
 }: AppShellProps) {
   const isMobile = useIsMobile(mobileBreakpoint);
@@ -445,35 +449,38 @@ export function AppShell({
   const ctxRight = onRailContextMenu ? (e: ReactMouseEvent, id: string) => onRailContextMenu("right", e, id) : undefined;
 
   const renderShell = (leftRail: ReactNode, rightRail: ReactNode) => (
-    <div className={cx("pl-appshell", className)}>
-      {leftRail}
-      <main className="pl-appshell__col pl-appshell__col--left">{leftContent}</main>
-      {showRight && (
-        <div
-          className="pl-appshell__handle"
-          role="separator"
-          aria-orientation="vertical"
-          aria-label="Resize right panel"
-          aria-valuenow={rightWidth}
-          aria-valuemin={minRightWidth}
-          aria-valuemax={maxRightWidth}
-          tabIndex={0}
-          onPointerDown={onPointerDown}
-          onPointerMove={onPointerMove}
-          onPointerUp={onPointerUp}
-          onKeyDown={onKeyDown}
-          onDoubleClick={() => onCollapse?.(true)}
-        />
-      )}
-      {showRight && (
-        <aside
-          className="pl-appshell__col pl-appshell__col--right"
-          style={{ flex: `0 0 ${rightWidth}px`, width: rightWidth }}
-        >
-          {rightContent}
-        </aside>
-      )}
-      {rightRail}
+    <div className={cx("pl-appshell-frame", className)}>
+      <div className="pl-appshell">
+        {leftRail}
+        <main className="pl-appshell__col pl-appshell__col--left">{leftContent}</main>
+        {showRight && (
+          <div
+            className="pl-appshell__handle"
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize right panel"
+            aria-valuenow={rightWidth}
+            aria-valuemin={minRightWidth}
+            aria-valuemax={maxRightWidth}
+            tabIndex={0}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={onPointerUp}
+            onKeyDown={onKeyDown}
+            onDoubleClick={() => onCollapse?.(true)}
+          />
+        )}
+        {showRight && (
+          <aside
+            className="pl-appshell__col pl-appshell__col--right"
+            style={{ flex: `0 0 ${rightWidth}px`, width: rightWidth }}
+          >
+            {rightContent}
+          </aside>
+        )}
+        {rightRail}
+      </div>
+      {utilityBar != null && <div className="pl-appshell__utility">{utilityBar}</div>}
     </div>
   );
 
@@ -511,3 +518,24 @@ export function AppShell({
     </DndContext>
   );
 }
+
+/** Bottom utility-bar chrome — start cluster · spacer · end cluster. Compose
+ *  shipped primitives (StatusDot, Badge, Spinner, Menu) inside; pass to
+ *  AppShell's `utilityBar` slot. Presentation only. */
+export function UtilityBar({
+  start,
+  end,
+  className,
+}: {
+  start?: ReactNode;
+  end?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cx("pl-utilitybar", className)}>
+      <div className="pl-utilitybar__cluster">{start}</div>
+      <div className="pl-utilitybar__spacer" />
+      <div className="pl-utilitybar__cluster">{end}</div>
+    </div>
+  );
+}

package/src/forms.tsx

@@ -48,27 +48,26 @@ export function Select({ className, children, ...rest }: SelectHTMLAttributes<HT
   );
 }
 
-/** Toggle switch. Controlled via `checked` / `onCheckedChange`. */
+/** Toggle switch. Controlled via `checked` / `onCheckedChange`. Spreads the
+ *  rest of the input attributes (id, name, aria-*, data-*) onto the inner input —
+ *  so an external `<label htmlFor>` can associate. */
 export function Switch({
   checked,
   onCheckedChange,
-  disabled,
   label,
   className,
-}: {
-  checked?: boolean;
+  ...rest
+}: Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type"> & {
   onCheckedChange?: (checked: boolean) => void;
-  disabled?: boolean;
   label?: ReactNode;
-  className?: string;
 }) {
   return (
-    <label className={cx("pl-switch", disabled && "pl-switch--disabled", className)}>
+    <label className={cx("pl-switch", rest.disabled && "pl-switch--disabled", className)}>
       <input
         type="checkbox"
+        {...rest}
         className="pl-switch__input"
         checked={checked}
-        disabled={disabled}
         onChange={(e) => onCheckedChange?.(e.target.checked)}
       />
       <span className="pl-switch__track" aria-hidden>
@@ -79,27 +78,26 @@ export function Switch({
   );
 }
 
-/** Checkbox. Controlled via `checked` / `onCheckedChange`. */
+/** Checkbox. Controlled via `checked` / `onCheckedChange`. Spreads the rest of
+ *  the input attributes (id, name, aria-*, data-*) onto the inner input, so an
+ *  external `<label htmlFor>` can associate. */
 export function Checkbox({
   checked,
   onCheckedChange,
-  disabled,
   label,
   className,
-}: {
-  checked?: boolean;
+  ...rest
+}: Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type"> & {
   onCheckedChange?: (checked: boolean) => void;
-  disabled?: boolean;
   label?: ReactNode;
-  className?: string;
 }) {
   return (
-    <label className={cx("pl-checkbox", disabled && "pl-checkbox--disabled", className)}>
+    <label className={cx("pl-checkbox", rest.disabled && "pl-checkbox--disabled", className)}>
       <input
         type="checkbox"
+        {...rest}
         className="pl-checkbox__input"
         checked={checked}
-        disabled={disabled}
         onChange={(e) => onCheckedChange?.(e.target.checked)}
       />
       <span className="pl-checkbox__box" aria-hidden />

package/src/marketing.tsx

@@ -93,3 +93,70 @@ export function PostItem({ meta, title, excerpt, href }: PostItemProps) {
 export function Prose({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return <div className={cx("pl-prose", className)} {...rest} />;
 }
+
+// ── Changelog (release timeline) — the standard marketing changelog layout ────
+
+/** Changelog timeline — newest first. Wrap ChangelogEntry children. */
+export function Changelog({ className, ...rest }: HTMLAttributes<HTMLOListElement>) {
+  return <ol className={cx("pl-changelog", className)} {...rest} />;
+}
+
+/** One release on the timeline. `latest` accents the dot + version pill. Put
+ *  ChangelogChange children inside. */
+export function ChangelogEntry({
+  version,
+  date,
+  latest,
+  href,
+  children,
+}: {
+  version: ReactNode;
+  date?: ReactNode;
+  latest?: boolean;
+  /** Links the version pill (e.g. to the GitHub release / download). */
+  href?: string;
+  children: ReactNode;
+}) {
+  return (
+    <li className={cx("pl-changelog__entry", latest && "pl-changelog__entry--latest")}>
+      <span className="pl-changelog__dot" aria-hidden />
+      <div className="pl-changelog__body">
+        <div className="pl-changelog__meta">
+          {href ? (
+            <a className="pl-changelog__version" href={href}>
+              {version}
+            </a>
+          ) : (
+            <span className="pl-changelog__version">{version}</span>
+          )}
+          {date != null && <span className="pl-changelog__date">{date}</span>}
+          {latest && <span className="pl-changelog__latest">latest</span>}
+        </div>
+        <div className="pl-changelog__changes">{children}</div>
+      </div>
+    </li>
+  );
+}
+
+/** A single change line. Flat (em-dash) for user-facing notes, or pass a `tag`
+ *  (added / changed / fixed / removed) for a technical changelog. */
+export function ChangelogChange({
+  tag,
+  children,
+}: {
+  tag?: "added" | "changed" | "fixed" | "removed";
+  children: ReactNode;
+}) {
+  return (
+    <div className="pl-changelog__change">
+      {tag ? (
+        <span className={cx("pl-changelog__tag", `pl-changelog__tag--${tag}`)}>{tag}</span>
+      ) : (
+        <span className="pl-changelog__bullet" aria-hidden>
+          —
+        </span>
+      )}
+      <span>{children}</span>
+    </div>
+  );
+}

package/src/primitives.tsx

@@ -88,3 +88,69 @@ export function TextLink({
     />
   );
 }
+
+/** Identity avatar — an image, or initials derived from `name`. */
+export function Avatar({
+  src,
+  alt,
+  name,
+  size = 28,
+  className,
+}: {
+  src?: string;
+  alt?: string;
+  name?: string;
+  size?: number;
+  className?: string;
+}) {
+  const initials = name
+    ? name
+        .trim()
+        .split(/\s+/)
+        .slice(0, 2)
+        .map((w) => w[0])
+        .join("")
+        .toUpperCase()
+    : "";
+  return (
+    <span
+      className={cx("pl-avatar", className)}
+      style={{ width: size, height: size, fontSize: Math.round(size * 0.38) }}
+      role="img"
+      aria-label={alt ?? name}
+    >
+      {src ? (
+        <img className="pl-avatar__img" src={src} alt={alt ?? name ?? ""} />
+      ) : (
+        <span aria-hidden>{initials || "?"}</span>
+      )}
+    </span>
+  );
+}
+
+/** Overlapping avatar stack — wrap Avatar children. */
+export function AvatarGroup({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-avatar-group", className)} {...rest} />;
+}
+
+/** Interactive token / chip. Pass `onRemove` for a removable chip. */
+export function Tag({
+  children,
+  onRemove,
+  className,
+}: {
+  children: ReactNode;
+  onRemove?: () => void;
+  className?: string;
+}) {
+  return (
+    <span className={cx("pl-tag", className)}>
+      <span className="pl-tag__label">{children}</span>
+      {onRemove && (
+        <button type="button" className="pl-tag__remove" aria-label="Remove" onClick={onRemove}>
+          ×
+        </button>
+      )}
+    </span>
+  );
+}

package/src/styles/app-shell.css

@@ -160,14 +160,50 @@
 }
 
 /* ── AppShell (dual-rail + 3-column) ─────────────────────────────────────────── */
+/* Vertical frame: content row (1fr) + optional utility bar (40px). */
+.pl-appshell-frame {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background: var(--pl-color-bg);
+  color: var(--pl-color-fg);
+}
 .pl-appshell {
   display: flex;
   align-items: stretch;
-  height: 100%;
+  flex: 1 1 auto;
   min-height: 0;
   background: var(--pl-color-bg);
   color: var(--pl-color-fg);
 }
+/* Utility bar — the bottom 40px track (third grid row). Desktop only. */
+.pl-appshell__utility {
+  flex: 0 0 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  border-top: var(--pl-border-width) solid var(--pl-color-border);
+  background: var(--pl-color-bg-raised);
+}
+.pl-utilitybar {
+  display: flex;
+  align-items: center;
+  gap: var(--pl-space-2);
+  width: 100%;
+  height: 100%;
+  padding: 0 var(--pl-space-3);
+  font-size: 12px;
+  color: var(--pl-color-fg-muted);
+}
+.pl-utilitybar__cluster {
+  display: flex;
+  align-items: center;
+  gap: var(--pl-space-3);
+}
+.pl-utilitybar__spacer {
+  flex: 1;
+}
 
 .pl-appshell__col {
   display: flex;

package/src/styles/marketing.css

@@ -247,3 +247,145 @@
   margin: 1.5rem 0;
   color: var(--pl-color-fg-muted);
 }
+
+/* ── Changelog (release timeline) ─────────────────────────────────────────────── */
+.pl-changelog {
+  position: relative;
+  display: grid;
+  gap: 40px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+/* the timeline spine */
+.pl-changelog::before {
+  content: "";
+  position: absolute;
+  left: 12px;
+  top: 8px;
+  bottom: 0;
+  width: 1px;
+  background: var(--pl-color-border);
+}
+.pl-changelog__entry {
+  position: relative;
+  display: flex;
+  gap: 20px;
+}
+.pl-changelog__dot {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  margin-top: 2px;
+  border-radius: 50%;
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-changelog__dot::after {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--pl-color-fg-subtle);
+}
+.pl-changelog__entry--latest .pl-changelog__dot {
+  background: color-mix(in oklch, var(--pl-color-accent) 15%, transparent);
+  border-color: color-mix(in oklch, var(--pl-color-accent) 50%, transparent);
+}
+.pl-changelog__entry--latest .pl-changelog__dot::after {
+  background: var(--pl-color-accent);
+}
+.pl-changelog__body {
+  flex: 1;
+  min-width: 0;
+  padding-bottom: 8px;
+}
+.pl-changelog__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.pl-changelog__version {
+  padding: 2px 8px;
+  font-family: var(--pl-font-mono);
+  font-size: 13px;
+  color: var(--pl-color-fg-muted);
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+  text-decoration: none;
+  transition: border-color var(--pl-motion-fast) var(--pl-motion-ease);
+}
+a.pl-changelog__version:hover {
+  border-color: var(--pl-color-accent);
+}
+.pl-changelog__entry--latest .pl-changelog__version {
+  color: var(--pl-color-accent-fg);
+  background: color-mix(in oklch, var(--pl-color-accent) 10%, transparent);
+  border-color: color-mix(in oklch, var(--pl-color-accent) 35%, transparent);
+}
+.pl-changelog__date {
+  font-size: 13px;
+  color: var(--pl-color-fg-subtle);
+}
+.pl-changelog__latest {
+  padding: 1px 6px;
+  font-family: var(--pl-font-mono);
+  font-size: 11px;
+  color: var(--pl-color-accent-fg);
+  background: color-mix(in oklch, var(--pl-color-accent) 8%, transparent);
+  border: var(--pl-border-width) solid color-mix(in oklch, var(--pl-color-accent) 25%, transparent);
+  border-radius: var(--pl-radius);
+}
+.pl-changelog__changes {
+  display: grid;
+  gap: 6px;
+}
+.pl-changelog__change {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--pl-color-fg);
+}
+.pl-changelog__bullet {
+  flex-shrink: 0;
+  margin-top: 1px;
+  color: var(--pl-color-fg-subtle);
+}
+.pl-changelog__tag {
+  flex-shrink: 0;
+  min-width: 52px;
+  padding: 0 6px;
+  font-family: var(--pl-font-mono);
+  font-size: 10px;
+  line-height: 18px;
+  text-align: center;
+  text-transform: lowercase;
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+}
+.pl-changelog__tag--added {
+  color: var(--pl-color-status-success);
+  border-color: color-mix(in oklch, var(--pl-color-status-success) 35%, transparent);
+}
+.pl-changelog__tag--fixed {
+  color: var(--pl-color-status-info);
+  border-color: color-mix(in oklch, var(--pl-color-status-info) 35%, transparent);
+}
+.pl-changelog__tag--changed {
+  color: var(--pl-color-status-warning);
+  border-color: color-mix(in oklch, var(--pl-color-status-warning) 35%, transparent);
+}
+.pl-changelog__tag--removed {
+  color: var(--pl-color-status-error);
+  border-color: color-mix(in oklch, var(--pl-color-status-error) 35%, transparent);
+}

package/src/styles/primitives.css

@@ -217,3 +217,71 @@
   width: 16px;
   height: 16px;
 }
+
+/* ── Avatar ──────────────────────────────────────────────────────────────────── */
+.pl-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 50%;
+  background: var(--pl-color-bg-subtle);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  color: var(--pl-color-fg-muted);
+  font-family: var(--pl-font-mono);
+  font-weight: var(--pl-font-weight-medium);
+  line-height: 1;
+  user-select: none;
+}
+.pl-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.pl-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+.pl-avatar-group > .pl-avatar {
+  margin-left: -8px;
+  box-shadow: 0 0 0 2px var(--pl-color-bg);
+}
+.pl-avatar-group > .pl-avatar:first-child {
+  margin-left: 0;
+}
+
+/* ── Tag / Chip ──────────────────────────────────────────────────────────────── */
+.pl-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 20px;
+  padding: 0 6px;
+  font-family: var(--pl-font-mono);
+  font-size: 11px;
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-subtle);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+}
+.pl-tag__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin-right: -2px;
+  padding: 0;
+  font-size: 13px;
+  line-height: 1;
+  color: var(--pl-color-fg-muted);
+  background: none;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.pl-tag__remove:hover {
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-hover);
+}