@heyramzi/ui 2.23.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.23.0",
+  "version": "3.0.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",
@@ -18,18 +18,11 @@
     "dist"
   ],
   "type": "module",
-  "svelte": "./src/index.ts",
   "imports": {
     "#scripts/*": "./scripts/*",
     "#src/*": "./src/*"
   },
   "exports": {
-    ".": {
-      "svelte": "./src/index.ts",
-      "types": "./src/index.ts",
-      "node": "./dist/index.js",
-      "default": "./src/index.ts"
-    },
     "./package.json": "./package.json",
     "./tokens.css": "./src/tokens/index.css",
     "./brand": {
@@ -44,27 +37,17 @@
       "node": "./dist/lib/*.js",
       "default": "./src/lib/*.ts"
     },
-    "./lib/*": {
-      "svelte": "./src/lib/*.ts",
-      "types": "./src/lib/*.ts",
-      "node": "./dist/lib/*.js",
-      "default": "./src/lib/*.ts"
-    },
-    "./border-beam": {
-      "svelte": "./src/effects/border-beam/BorderBeam.svelte",
-      "default": "./src/effects/border-beam/BorderBeam.svelte"
-    },
     "./effects/border-beam": {
-      "svelte": "./src/effects/border-beam/BorderBeam.svelte",
-      "default": "./src/effects/border-beam/BorderBeam.svelte"
-    },
-    "./theme-toggle": {
-      "svelte": "./src/effects/theme-toggle/ThemeToggle.svelte",
-      "default": "./src/effects/theme-toggle/ThemeToggle.svelte"
+      "svelte": "./src/effects/border-beam/index.ts",
+      "types": "./src/effects/border-beam/index.ts",
+      "node": "./dist/effects/border-beam/index.js",
+      "default": "./src/effects/border-beam/index.ts"
     },
     "./effects/theme-toggle": {
-      "svelte": "./src/effects/theme-toggle/ThemeToggle.svelte",
-      "default": "./src/effects/theme-toggle/ThemeToggle.svelte"
+      "svelte": "./src/effects/theme-toggle/index.ts",
+      "types": "./src/effects/theme-toggle/index.ts",
+      "node": "./dist/effects/theme-toggle/index.js",
+      "default": "./src/effects/theme-toggle/index.ts"
     },
     "./effects/animated-beam": {
       "svelte": "./src/effects/animated-beam/index.ts",
@@ -73,16 +56,22 @@
       "default": "./src/effects/animated-beam/index.ts"
     },
     "./effects/spotlight": {
-      "svelte": "./src/effects/spotlight/Spotlight.svelte",
-      "default": "./src/effects/spotlight/Spotlight.svelte"
+      "svelte": "./src/effects/spotlight/index.ts",
+      "types": "./src/effects/spotlight/index.ts",
+      "node": "./dist/effects/spotlight/index.js",
+      "default": "./src/effects/spotlight/index.ts"
     },
     "./effects/magic-card": {
-      "svelte": "./src/effects/magic-card/MagicCard.svelte",
-      "default": "./src/effects/magic-card/MagicCard.svelte"
+      "svelte": "./src/effects/magic-card/index.ts",
+      "types": "./src/effects/magic-card/index.ts",
+      "node": "./dist/effects/magic-card/index.js",
+      "default": "./src/effects/magic-card/index.ts"
     },
     "./effects/marquee": {
-      "svelte": "./src/effects/marquee/Marquee.svelte",
-      "default": "./src/effects/marquee/Marquee.svelte"
+      "svelte": "./src/effects/marquee/index.ts",
+      "types": "./src/effects/marquee/index.ts",
+      "node": "./dist/effects/marquee/index.js",
+      "default": "./src/effects/marquee/index.ts"
     },
     "./effects/image-reveal": {
       "svelte": "./src/effects/image-reveal/index.ts",
@@ -103,16 +92,22 @@
       "default": "./src/effects/reveal/index.ts"
     },
     "./effects/progressive-blur": {
-      "svelte": "./src/effects/progressive-blur/ProgressiveBlur.svelte",
-      "default": "./src/effects/progressive-blur/ProgressiveBlur.svelte"
+      "svelte": "./src/effects/progressive-blur/index.ts",
+      "types": "./src/effects/progressive-blur/index.ts",
+      "node": "./dist/effects/progressive-blur/index.js",
+      "default": "./src/effects/progressive-blur/index.ts"
     },
     "./effects/interactive-hover-button": {
-      "svelte": "./src/effects/interactive-hover-button/InteractiveHoverButton.svelte",
-      "default": "./src/effects/interactive-hover-button/InteractiveHoverButton.svelte"
+      "svelte": "./src/effects/interactive-hover-button/index.ts",
+      "types": "./src/effects/interactive-hover-button/index.ts",
+      "node": "./dist/effects/interactive-hover-button/index.js",
+      "default": "./src/effects/interactive-hover-button/index.ts"
     },
     "./effects/image-comparison": {
-      "svelte": "./src/effects/image-comparison/ImageComparison.svelte",
-      "default": "./src/effects/image-comparison/ImageComparison.svelte"
+      "svelte": "./src/effects/image-comparison/index.ts",
+      "types": "./src/effects/image-comparison/index.ts",
+      "node": "./dist/effects/image-comparison/index.js",
+      "default": "./src/effects/image-comparison/index.ts"
     },
     "./effects/magnetic": {
       "svelte": "./src/effects/magnetic/magnetic.ts",
@@ -126,19 +121,9 @@
       "node": "./dist/icons/sf-symbols.js",
       "default": "./src/icons/sf-symbols.ts"
     },
-    "./icons/trades": {
-      "svelte": "./src/icons/trades.ts",
-      "types": "./src/icons/trades.ts",
-      "node": "./dist/icons/trades.js",
-      "default": "./src/icons/trades.ts"
-    },
-    "./icons/TradeIcon": {
-      "svelte": "./src/icons/TradeIcon.svelte",
-      "default": "./src/icons/TradeIcon.svelte"
-    },
     "./design": {
-      "style": "./src/design/index.css",
-      "default": "./src/design/index.css"
+      "style": "./src/tokens/design.css",
+      "default": "./src/tokens/design.css"
     },
     "./animations": {
       "style": "./src/animations/index.css",
@@ -175,12 +160,6 @@
       "style": "./src/shadcn/utilities.css",
       "default": "./src/shadcn/utilities.css"
     },
-    "./ai": {
-      "svelte": "./src/ai/index.ts",
-      "types": "./src/ai/index.ts",
-      "node": "./dist/ai/index.js",
-      "default": "./src/ai/index.ts"
-    },
     "./ai/*": {
       "svelte": "./src/ai/*/index.ts",
       "types": "./src/ai/*/index.ts",
@@ -193,7 +172,6 @@
       "node": "./dist/agents/index.js",
       "default": "./src/agents/index.ts"
     },
-    "./agents/demo.svelte": "./src/agents/demo.svelte",
     "./status": {
       "svelte": "./src/status/index.ts",
       "types": "./src/status/index.ts",
@@ -212,7 +190,6 @@
       "node": "./dist/record/index.js",
       "default": "./src/record/index.ts"
     },
-    "./record/demo.svelte": "./src/record/record-demo.svelte",
     "./thread": {
       "svelte": "./src/thread/index.ts",
       "types": "./src/thread/index.ts",
@@ -237,56 +214,18 @@
       "node": "./dist/work/index.js",
       "default": "./src/work/index.ts"
     },
-    "./work/kanban": {
-      "svelte": "./src/work/kanban-board.svelte",
-      "types": "./src/work/kanban-board.svelte",
-      "default": "./src/work/kanban-board.svelte"
-    },
-    "./work/list": {
-      "svelte": "./src/work/task-list.svelte",
-      "types": "./src/work/task-list.svelte",
-      "default": "./src/work/task-list.svelte"
-    },
-    "./work/gantt": {
-      "svelte": "./src/work/task-gantt.svelte",
-      "types": "./src/work/task-gantt.svelte",
-      "default": "./src/work/task-gantt.svelte"
-    },
-    "./work/time": {
-      "svelte": "./src/work/time/time-tracker.svelte",
-      "types": "./src/work/time/time-tracker.svelte",
-      "default": "./src/work/time/time-tracker.svelte"
-    },
     "./work/inbox": {
       "svelte": "./src/work/inbox/index.ts",
       "types": "./src/work/inbox/index.ts",
       "node": "./dist/work/inbox/index.js",
       "default": "./src/work/inbox/index.ts"
     },
-    "./work/presets/sales": {
-      "svelte": "./src/work/presets/sales.ts",
-      "types": "./src/work/presets/sales.ts",
-      "node": "./dist/work/presets/sales.js",
-      "default": "./src/work/presets/sales.ts"
-    },
-    "./work/detail": {
-      "svelte": "./src/work/detail/task-detail.svelte",
-      "types": "./src/work/detail/task-detail.svelte",
-      "default": "./src/work/detail/task-detail.svelte"
-    },
     "./work/docs": {
       "svelte": "./src/work/docs/index.ts",
       "types": "./src/work/docs/index.ts",
       "node": "./dist/work/docs/index.js",
       "default": "./src/work/docs/index.ts"
     },
-    "./work/docs-demo.svelte": "./src/work/docs/docs-demo.svelte",
-    "./work/detail-demo.svelte": "./src/work/detail/detail-demo.svelte",
-    "./work/demo": {
-      "svelte": "./src/work/demo.svelte",
-      "default": "./src/work/demo.svelte"
-    },
-    "./work/demo.svelte": "./src/work/demo.svelte",
     "./charts": {
       "svelte": "./src/charts/index.ts",
       "types": "./src/charts/index.ts",
@@ -315,27 +254,12 @@
       "node": "./dist/slides/export/index.js",
       "default": "./src/slides/export/index.ts"
     },
-    "./slides/demo": {
-      "svelte": "./src/slides/demo.svelte",
-      "default": "./src/slides/demo.svelte"
-    },
-    "./slides/demo.svelte": "./src/slides/demo.svelte",
-    "./slides/demo-slides": {
-      "svelte": "./src/slides/demo-slides.svelte",
-      "default": "./src/slides/demo-slides.svelte"
-    },
-    "./slides/demo-slides.svelte": "./src/slides/demo-slides.svelte",
     "./editor": {
       "svelte": "./src/editor/index.ts",
       "types": "./src/editor/index.ts",
       "node": "./dist/editor/index.js",
       "default": "./src/editor/index.ts"
     },
-    "./editor/serializer": {
-      "types": "./src/editor/serializer.ts",
-      "node": "./dist/editor/serializer.js",
-      "default": "./src/editor/serializer.ts"
-    },
     "./editor/markdown": {
       "types": "./src/editor/markdown.ts",
       "node": "./dist/editor/markdown.js",
@@ -360,17 +284,6 @@
       "node": "./dist/onboarding/index.js",
       "default": "./src/onboarding/index.ts"
     },
-    "./onboarding/stores": {
-      "svelte": "./src/onboarding/stores.ts",
-      "types": "./src/onboarding/stores.ts",
-      "node": "./dist/onboarding/stores.js",
-      "default": "./src/onboarding/stores.ts"
-    },
-    "./onboarding/demo": {
-      "svelte": "./src/onboarding/demo.svelte",
-      "default": "./src/onboarding/demo.svelte"
-    },
-    "./onboarding/demo.svelte": "./src/onboarding/demo.svelte",
     "./canvas": {
       "types": "./src/canvas/index.ts",
       "svelte": "./src/canvas/index.ts",
@@ -431,12 +344,12 @@
     "svelte": "^5.57.3",
     "svelte-check": "^4.7.8",
     "svelte-sonner": "^1.2.3",
+    "svelte2tsx": "^0.7.63",
     "typescript": "~7.0.2",
     "vite-plus": "1.5.0"
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.4",
-    "@tabler/icons-svelte-runes": "^3.46.0",
     "@xyflow/svelte": "^1.7.0",
     "bits-ui": "^2.19.5",
     "mode-watcher": "^1.1.0",
@@ -453,9 +366,6 @@
     "@internationalized/date": {
       "optional": true
     },
-    "@tabler/icons-svelte-runes": {
-      "optional": true
-    },
     "@xyflow/svelte": {
       "optional": true
     }

package/scripts/svelte-dts.mjs

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+// Writes `x.svelte.d.ts` beside each `x.svelte` for the tarball: native TypeScript can't read a
+// `.svelte` under node_modules, so without them every component types as `any`.
+
+// prepack writes them, postpack deletes them (`--clean`): left in src, they'd shadow the components.
+import { existsSync, mkdtempSync, readdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { tmpdir } from "node:os";
+import { dirname, join, relative } from "node:path";
+import { argv, chdir, exit } from "node:process";
+import { fileURLToPath } from "node:url";
+import { emitDts } from "svelte2tsx";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const src = join(root, "src");
+
+function walk(dir, test, out = []) {
+  for (const e of readdirSync(dir, { withFileTypes: true })) {
+    const p = join(dir, e.name);
+    if (e.isDirectory()) walk(p, test, out);
+    else if (test(e.name)) out.push(p);
+  }
+  return out;
+}
+
+for (const file of walk(src, (n) => n.endsWith(".svelte.d.ts"))) rmSync(file);
+if (argv.includes("--clean")) exit(0);
+
+// emitDts also declares every .ts file; only the component ones are copied out.
+const out = mkdtempSync(join(tmpdir(), "svelte-dts-"));
+chdir(root);
+await emitDts({
+  libRoot: src,
+  tsconfig: join(root, "tsconfig.json"),
+  // svelte2tsx's own option name, a computed key because the old-names gate reads a bare key as ours.
+  ["svelteShimsPath"]: createRequire(import.meta.url).resolve("svelte2tsx/svelte-shims-v4.d.ts"),
+  declarationDir: out,
+});
+
+const components = walk(src, (n) => n.endsWith(".svelte"));
+const dtsOf = (file) => join(out, `${relative(src, file)}.d.ts`);
+const missing = components.filter((file) => !existsSync(dtsOf(file)));
+if (missing.length) {
+  rmSync(out, { recursive: true, force: true });
+  const list = missing.map((file) => relative(root, file)).join("\n");
+  console.error(`svelte-dts: no declaration for ${missing.length} file(s):\n${list}`);
+  exit(1);
+}
+
+// emitDts names the component after its file, a name 5 files also import (calendar's
+// `* as Calendar`): a circular alias on TypeScript 7, so the default gets a neutral name.
+function unnamed(dts) {
+  const name = dts.match(/^export default (\w+);$/m)[1];
+  const own = new RegExp(`^(declare const |type |export default )${name}\\b.*$`, "gm");
+  return dts.replace(own, (line) =>
+    line.replaceAll(new RegExp(`\\b${name}\\b`, "g"), "$$$$Component"),
+  );
+}
+for (const file of components)
+  writeFileSync(`${file}.d.ts`, unnamed(readFileSync(dtsOf(file), "utf8")));
+rmSync(out, { recursive: true, force: true });
+console.log(`svelte-dts: ${components.length} declaration(s) beside src/**/*.svelte`);

package/scripts/sync-shadcn.mjs

@@ -131,7 +131,9 @@ const meta = (doc, name) => {
       .match(new RegExp(`^${key}:\\s*(.+)$`, "m"))?.[1]
       .trim()
       .replace(/^["']|["']$/g, "");
-  return { title: field("title") ?? pascal(name), note: field("description") ?? "" };
+  // Upstream sets clauses off with em dashes; the site's copy uses commas.
+  const note = (field("description") ?? "").replace(/\s*—\s*/g, ", ");
+  return { title: field("title") ?? pascal(name), note };
 };
 
 /** The demo's own shadcn imports, as it spells them for a consumer. */

package/src/agents/agent-avatar.svelte

@@ -568,6 +568,17 @@
 
 	/* No box: the slot carries no border, background or padding. Without an
      explicit size it stays square, and the avatar fills three quarters of it. */
+	const label = $derived(
+		ariaLabel ??
+			(name
+				? `${name}${role ? `, ${role}` : ""}`
+				: `${preset.label} agent, ${stateLabels[stateKey]}`),
+	);
+	// A hidden avatar sits inside a parent control that names it, so only a visible one becomes the button.
+	const asButton = $derived(userClick !== undefined && !ariaHidden);
+	const BUTTON_RESET =
+		"appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;";
+
 	const hostStyle = $derived.by(() => {
 		const base =
 			size === undefined
@@ -592,10 +603,16 @@
 	}
 </script>
 
-<span
+<!-- WHY the host turns button: onclick is the caller's action, so it needs focus and Enter. The jump alone is decoration. -->
+<!-- svelte-ignore a11y_no_static_element_interactions (the handler is set only when it's a button) -->
+<svelte:element
+	this={asButton ? "button" : "span"}
 	bind:this={hostEl}
+	type={asButton ? "button" : undefined}
+	aria-label={asButton ? label : undefined}
 	class={className ? `agent-avatar ${className}` : "agent-avatar"}
-	style={hostStyle}
+	style={asButton ? `${hostStyle}${BUTTON_RESET}` : hostStyle}
+	onclick={asButton ? handleClick : undefined}
 	data-agent-shape={type}
 >
 	{#if drawnSize > 0}
@@ -604,17 +621,12 @@
 			data-bot-avatar={type}
 			data-face={faceKind}
 			data-state={stateKey}
-			role={ariaHidden ? undefined : "img"}
-			aria-hidden={ariaHidden ? "true" : undefined}
-			aria-label={ariaHidden
-				? undefined
-				: (ariaLabel ??
-					(name
-						? `${name}${role ? `, ${role}` : ""}`
-						: `${preset.label} agent, ${stateLabels[stateKey]}`))}
+			role={ariaHidden || asButton ? undefined : "img"}
+			aria-hidden={ariaHidden || asButton ? "true" : undefined}
+			aria-label={ariaHidden || asButton ? undefined : label}
 			style={canvasStyle}
-			onclick={handleClick}
+			onclick={asButton ? undefined : handleClick}
 			{...rest}
 		></canvas>
 	{/if}
-</span>
+</svelte:element>

package/src/agents/agent-avatar.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { AgentAvatarProps } from "./types.js";
+declare const $$Component: import("svelte").Component<AgentAvatarProps, {
+    getCanvas: () => HTMLCanvasElement | null;
+}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/agents/agent-avatar.test.ts

@@ -0,0 +1,40 @@
+import { afterEach, describe, expect, it } from "vite-plus/test";
+import { flushSync, mount, unmount } from "svelte";
+import AgentAvatar from "./agent-avatar.svelte";
+
+// jsdom has no canvas paths; the avatar builds its body shape with one while it mounts.
+globalThis.Path2D ??= class {} as unknown as typeof Path2D;
+
+let app: ReturnType<typeof mount> | null = null;
+
+afterEach(() => {
+  if (app) unmount(app);
+  app = null;
+  document.body.innerHTML = "";
+});
+
+function render(props: Record<string, unknown>) {
+  app = mount(AgentAvatar, { target: document.body, props: { size: 48, ...props } as never });
+  flushSync();
+  return document.querySelector<HTMLElement>(".agent-avatar");
+}
+
+describe("AgentAvatar's host", () => {
+  it("is a named button when the caller attaches an action", () => {
+    let clicks = 0;
+    const host = render({ name: "Ada", role: "Researcher", onclick: () => clicks++ });
+    expect(host?.tagName).toBe("BUTTON");
+    expect(host?.getAttribute("type")).toBe("button");
+    expect(host?.getAttribute("aria-label")).toBe("Ada, Researcher");
+    host?.click();
+    expect(clicks).toBe(1);
+  });
+
+  it("stays a plain span when the jump is the only thing a click does", () => {
+    expect(render({ name: "Ada" })?.tagName).toBe("SPAN");
+  });
+
+  it("stays a span inside a parent control that hides it", () => {
+    expect(render({ name: "Ada", onclick: () => {}, "aria-hidden": true })?.tagName).toBe("SPAN");
+  });
+});

package/src/agents/agent-cast.svelte

@@ -106,88 +106,93 @@
 </div>
 
 <style>
-	.agent-cast {
-		width: 100%;
-		color: var(--color-foreground, #18181b);
-	}
-	.agent-cast__section + .agent-cast__section {
-		margin-top: 2rem;
-	}
-	.agent-cast__heading {
-		margin: 0 0 0.75rem;
-		font-size: 0.9375rem;
-		font-weight: 600;
-		letter-spacing: -0.015em;
-	}
-	.agent-cast__grid {
-		display: grid;
-		gap: 0.75rem;
-		grid-template-columns: repeat(auto-fill, minmax(var(--agent-cast-min, 8.5rem), 1fr));
-		margin: 0;
-		padding: 0;
-		list-style: none;
-	}
-	.agent-cast__card {
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-		padding: 0;
-		text-align: left;
-		background: var(--color-card, #fff);
-		border: 1px solid var(--color-border, #e4e4e7);
-		border-radius: 0.75rem;
-		cursor: pointer;
-		transition:
-			border-color var(--duration-quick, 150ms)
-				var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
-			transform var(--duration-quick, 150ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-	}
-	@media (prefers-reduced-motion: reduce) {
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.agent-cast {
+			width: 100%;
+			color: var(--color-foreground, #18181b);
+		}
+		.agent-cast__section + .agent-cast__section {
+			margin-top: 2rem;
+		}
+		.agent-cast__heading {
+			margin: 0 0 0.75rem;
+			font-size: 0.9375rem;
+			font-weight: 600;
+			letter-spacing: -0.015em;
+		}
+		.agent-cast__grid {
+			display: grid;
+			gap: 0.75rem;
+			grid-template-columns: repeat(auto-fill, minmax(var(--agent-cast-min, 8.5rem), 1fr));
+			margin: 0;
+			padding: 0;
+			list-style: none;
+		}
 		.agent-cast__card {
-			transition: border-color var(--duration-quick, 150ms) linear;
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+			padding: 0;
+			text-align: left;
+			background: var(--color-card, #fff);
+			border: 1px solid var(--color-border, #e4e4e7);
+			border-radius: 0.75rem;
+			cursor: pointer;
+			transition:
+				border-color var(--duration-quick, 150ms)
+					var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
+				transform var(--duration-quick, 150ms)
+					var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+		}
+		@media (prefers-reduced-motion: reduce) {
+			.agent-cast__card {
+				transition: border-color var(--duration-quick, 150ms) linear;
+			}
+			.agent-cast__card:active {
+				transform: none;
+			}
+		}
+		@media (hover: hover) and (pointer: fine) {
+			.agent-cast__card:hover {
+				border-color: color-mix(in oklab, var(--color-foreground, #18181b) 25%, transparent);
+			}
 		}
 		.agent-cast__card:active {
-			transform: none;
+			transform: scale(0.985);
 		}
-	}
-	@media (hover: hover) and (pointer: fine) {
-		.agent-cast__card:hover {
-			border-color: color-mix(in oklab, var(--color-foreground, #18181b) 25%, transparent);
+		.agent-cast__card:focus-visible {
+			outline: 2px solid var(--color-ring, #6366f1);
+			outline-offset: 2px;
+		}
+		.agent-cast__card[aria-pressed="true"] {
+			border-color: var(--color-accent, #6366f1);
+			box-shadow: 0 0 0 1px var(--color-accent, #6366f1);
+		}
+		/* Room above the head, so a hop or a hat never meets the card's edge. */
+		.agent-cast__slot {
+			display: block;
+			width: 100%;
+			padding: 0.5rem 0.5rem 0;
+		}
+		.agent-cast__meta {
+			display: flex;
+			flex-direction: column;
+			gap: 0.125rem;
+			padding: 0.625rem;
+		}
+		.agent-cast__name {
+			font-size: 0.8125rem;
+			font-weight: 500;
+			line-height: 1.2;
+		}
+		.agent-cast__role {
+			font-size: 0.75rem;
+			line-height: 1.3;
+			color: var(--color-muted-foreground, #71717a);
 		}
-	}
-	.agent-cast__card:active {
-		transform: scale(0.985);
-	}
-	.agent-cast__card:focus-visible {
-		outline: 2px solid var(--color-ring, #6366f1);
-		outline-offset: 2px;
-	}
-	.agent-cast__card[aria-pressed="true"] {
-		border-color: var(--color-accent, #6366f1);
-		box-shadow: 0 0 0 1px var(--color-accent, #6366f1);
-	}
-	/* Room above the head, so a hop or a hat never meets the card's edge. */
-	.agent-cast__slot {
-		display: block;
-		width: 100%;
-		padding: 0.5rem 0.5rem 0;
-	}
-	.agent-cast__meta {
-		display: flex;
-		flex-direction: column;
-		gap: 0.125rem;
-		padding: 0.625rem;
-	}
-	.agent-cast__name {
-		font-size: 0.8125rem;
-		font-weight: 500;
-		line-height: 1.2;
-	}
-	.agent-cast__role {
-		font-size: 0.75rem;
-		line-height: 1.3;
-		color: var(--color-muted-foreground, #71717a);
 	}
 </style>