@heyramzi/tasks 0.4.0 → 0.5.1

package/README.md

@@ -6,11 +6,12 @@ Status badges, dots and icons come from one map too. Live at
 [ui.heyramzi.com/tasks](https://ui.heyramzi.com/tasks).
 
 Every view knows nothing about your data. You pass items and a few accessors,
-and it hands back a change to persist. No runtime dependencies: `svelte` is the
-only peer. This package was `@heyramzi/board` up to 0.2.
+and it hands back a change to persist. It builds on `@heyramzi/ui` and
+`phosphor-svelte`, which are peers, plus `svelte`. This package was
+`@heyramzi/board` up to 0.2.
 
 ```
-pnpm add @heyramzi/tasks
+pnpm add @heyramzi/tasks @heyramzi/ui phosphor-svelte
 ```
 
 ## Board
@@ -194,10 +195,34 @@ It opens scrolled to today, a third of the way in. Call `scrollToToday()` on a
 
 ## View switch
 
-`TaskViewSwitch` is the segmented control the demo uses to flip between views,
-with a pill that slides to the active option. Pass `views`
-(`{ id, label, icon? }[]`) and `bind:value`. `BoardIcon`, `ListIcon` and
-`GanttIcon` are exported for it.
+There is no switch in this package. The demo flips between views with
+`SegmentedFilter` from `@heyramzi/ui/components/segmented` and the Phosphor
+icons `Kanban`, `ListBullets` and `ChartBarHorizontal`. Phosphor has no gantt
+icon, so `ChartBarHorizontal` stands in.
+
+## Side panel
+
+`SidePanel` is a sheet for one record: a title, a description, status chips, doors
+out to other tools (`openIn`), a copy-a-prompt `handoff`, a strip of `stats`, then
+the body and an optional pinned `footer`. You pass the tools; the panel knows none.
+Import it from `@heyramzi/tasks` or alone from `@heyramzi/tasks/side-panel`.
+
+```svelte
+<SidePanel
+  bind:open
+  title="Pricing page"
+  description="Ada, due Friday"
+  badges={[{ label: "Review", tone: "warning" }]}
+  openIn={[{ tool: github, href: issueUrl, label: "Open the issue on GitHub" }]}
+  stats={[{ label: "Logged", value: "6h 30m", sub: "of 8h" }]}
+>
+  ...
+</SidePanel>
+```
+
+`tool` is an `OpenInTool` from `@heyramzi/ui/components/open-in`:
+`{ name, action, icon }`. `bare` hands the whole panel to the body, and `width`
+runs from `sm` to `2xl`.
 
 ## Time tracking
 
@@ -258,11 +283,13 @@ exported helpers.
 - `StatusBadge`, `StatusDot`, `StatusIcon`: chips, dots and icons from one config.
   A badge also takes its text as children, for a caller that already has the word.
 - `defineStatuses`: builds a status registry from a plain map.
-- `TONE_CLASS`, `TONE_COLOR`, `TONE_ICON`, `TONE_TEXT`, `insetWellClass`: the severity scale.
+- `SidePanel`: a sheet for one record, above.
 - `salesStatuses`: an example pipeline map.
 
 ## Styling
 
+The severity scale (`TONE_CLASS`, `TONE_TEXT`, `TONE_ICON`, `TONE_COLOR`) lives in
+`@heyramzi/ui/lib/tone.js`, and `insetWellClass` in `@heyramzi/ui/lib/panel.js`.
 The accent tone reads `--tone-accent` and falls back to `--color-primary`. Set
 `--tone-accent` when your primary is a neutral and your accent is a brand color.
 
@@ -275,7 +302,7 @@ same values when they aren't. Everything goes still under
 
 ## Demo
 
-`src/demo.svelte` puts one task list behind a Board, List and Gantt switch, with
+`src/demo.svelte` puts one task list behind a Board, List and Gantt filter, with
 sorting, a Days and Weeks scale and a status badge strip.
 
 The fractional ordering in `board-order.ts` is the CC0 algorithm from

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/tasks",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Svelte 5 task views: a drag-and-drop board, a grouped list and a gantt timeline from one config, plus status badges, dots and icons.",
   "keywords": [
     "svelte",
@@ -74,6 +74,11 @@
       "types": "./src/inbox/index.ts",
       "default": "./src/inbox/index.ts"
     },
+    "./side-panel": {
+      "svelte": "./src/side-panel.svelte",
+      "types": "./src/side-panel.svelte",
+      "default": "./src/side-panel.svelte"
+    },
     "./presets/sales": {
       "svelte": "./src/presets/sales.ts",
       "types": "./src/presets/sales.ts",
@@ -85,13 +90,18 @@
     },
     "./demo.svelte": "./src/demo.svelte"
   },
+  "dependencies": {
+    "@heyramzi/utils": "^1.3.3"
+  },
   "peerDependencies": {
     "@heyramzi/ui": "*",
+    "phosphor-svelte": "^3.1.0",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@heyramzi/ui": "7.0.0",
+    "@heyramzi/ui": "8.0.0",
     "@types/node": "^26.6.4",
+    "phosphor-svelte": "^3.1.0",
     "svelte-check": "^4.7.6",
     "typescript": "~7.0.2"
   },

package/src/ambient.d.ts

@@ -1,6 +1,3 @@
-// Vite's ?raw import hands back the file as a string. Declared here so svelte-check passes
-// without pulling in vite/client.
-declare module "*.svg?raw" {
-	const svg: string;
-	export default svg;
-}
+// A kit component pulls its stylesheet in with a side-effect import. Vite handles it at
+// build time; this declaration lets svelte-check accept it without pulling in vite/client.
+declare module "*.css";

package/src/board-order.ts

@@ -4,7 +4,7 @@
 // (see the README credit). Kept inline so this package carries no runtime deps.
 const DIGITS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
 const INT_DIGITS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
-const ZERO = DIGITS[0];
+const ZERO = DIGITS.charAt(0);
 
 function integerLength(head: string): number {
   const i = INT_DIGITS.indexOf(head);
@@ -14,13 +14,13 @@ function integerLength(head: string): number {
 }
 
 function integerPart(key: string): string {
-  const length = integerLength(key[0]);
+  const length = integerLength(key.charAt(0));
   if (length > key.length) throw new Error("invalid order key: " + key);
   return key.slice(0, length);
 }
 
 function smallestInteger(): string {
-  return INT_DIGITS[0] + ZERO.repeat(INT_DIGITS.length / 2);
+  return INT_DIGITS.charAt(0) + ZERO.repeat(INT_DIGITS.length / 2);
 }
 
 function midpoint(a: string, b: string | null): string {
@@ -33,44 +33,44 @@ function midpoint(a: string, b: string | null): string {
     if (n > 0) return b.slice(0, n) + midpoint(a.slice(n), b.slice(n));
   }
 
-  const digitA = a ? DIGITS.indexOf(a[0]) : 0;
-  const digitB = b != null ? DIGITS.indexOf(b[0]) : DIGITS.length;
+  const digitA = a ? DIGITS.indexOf(a.charAt(0)) : 0;
+  const digitB = b != null ? DIGITS.indexOf(b.charAt(0)) : DIGITS.length;
   if (digitB - digitA > 1) {
-    return DIGITS[Math.round(0.5 * (digitA + digitB))];
+    return DIGITS.charAt(Math.round(0.5 * (digitA + digitB)));
   }
   if (b && b.length > 1) return b.slice(0, 1);
-  return DIGITS[digitA] + midpoint(a.slice(1), null);
+  return DIGITS.charAt(digitA) + midpoint(a.slice(1), null);
 }
 
 function incrementInteger(x: string): string | null {
-  const head = x[0];
+  const head = x.charAt(0);
   let trailing = "";
   for (let i = x.length - 1; i >= 1; i--) {
-    const d = DIGITS.indexOf(x[i]) + 1;
+    const d = DIGITS.indexOf(x.charAt(i)) + 1;
     if (d === DIGITS.length) trailing = ZERO + trailing;
-    else return head + x.slice(1, i) + DIGITS[d] + trailing;
+    else return head + x.slice(1, i) + DIGITS.charAt(d) + trailing;
   }
 
   const headIndex = INT_DIGITS.indexOf(head);
   if (headIndex === INT_DIGITS.length - 1) return null;
-  const h = INT_DIGITS[headIndex + 1];
+  const h = INT_DIGITS.charAt(headIndex + 1);
   const delta = integerLength(h) - integerLength(head);
   return h + (delta > 0 ? trailing + ZERO : delta < 0 ? trailing.slice(1) : trailing);
 }
 
 function decrementInteger(x: string): string | null {
-  const head = x[0];
-  const last = DIGITS[DIGITS.length - 1];
+  const head = x.charAt(0);
+  const last = DIGITS.charAt(DIGITS.length - 1);
   let trailing = "";
   for (let i = x.length - 1; i >= 1; i--) {
-    const d = DIGITS.indexOf(x[i]) - 1;
+    const d = DIGITS.indexOf(x.charAt(i)) - 1;
     if (d === -1) trailing = last + trailing;
-    else return head + x.slice(1, i) + DIGITS[d] + trailing;
+    else return head + x.slice(1, i) + DIGITS.charAt(d) + trailing;
   }
 
   const headIndex = INT_DIGITS.indexOf(head);
   if (headIndex === 0) return null;
-  const h = INT_DIGITS[headIndex - 1];
+  const h = INT_DIGITS.charAt(headIndex - 1);
   const delta = integerLength(h) - integerLength(head);
   return h + (delta > 0 ? trailing + last : delta < 0 ? trailing.slice(1) : trailing);
 }
@@ -80,7 +80,7 @@ export function keyBetween(a: string | null, b: string | null): string {
   if (a != null && b != null && a > b) [a, b] = [b, a];
 
   if (a == null) {
-    if (b == null) return INT_DIGITS[INT_DIGITS.length / 2] + ZERO;
+    if (b == null) return INT_DIGITS.charAt(INT_DIGITS.length / 2) + ZERO;
     const ib = integerPart(b);
     const fb = b.slice(ib.length);
     if (ib === smallestInteger()) return ib + midpoint("", fb);

package/src/dates.ts

@@ -4,7 +4,7 @@ const DAY_MS = 86_400_000;
 
 /** Days since 1970-01-01 for an ISO date. Anything after the date part is ignored. */
 export function dayNumber(iso: string): number {
-  const [y, m, d] = iso.slice(0, 10).split("-").map(Number);
+  const [y = 1970, m = 1, d = 1] = iso.slice(0, 10).split("-").map(Number);
   return Math.round(Date.UTC(y, m - 1, d) / DAY_MS);
 }
 

package/src/demo.svelte

@@ -2,12 +2,10 @@
 	import KanbanBoard from "./kanban-board.svelte";
 	import TaskList from "./task-list.svelte";
 	import TaskGantt from "./task-gantt.svelte";
-	import TaskViewSwitch from "./task-view-switch.svelte";
+	import { SegmentedFilter } from "@heyramzi/ui/components/segmented";
+	import { ChartBarHorizontal, Kanban, ListBullets } from "phosphor-svelte";
 	import StatusBadge from "./status-badge.svelte";
 	import StatusDot from "./status-dot.svelte";
-	import BoardIcon from "./icons/board-icon.svelte";
-	import ListIcon from "./icons/list-icon.svelte";
-	import GanttIcon from "./icons/gantt-icon.svelte";
 	import { defineStatuses } from "./define-statuses.js";
 	import { addDays, dayNumber, todayIso } from "./dates.js";
 	import { salesStatuses } from "./presets/sales.js";
@@ -63,12 +61,16 @@
 	]);
 
 	const views = [
-		{ id: "board", label: "Board", icon: BoardIcon },
-		{ id: "list", label: "List", icon: ListIcon },
-		{ id: "gantt", label: "Gantt", icon: GanttIcon },
-	];
-
-	let view = $state("board");
+		{ value: "board", label: "Board", icon: Kanban },
+		{ value: "list", label: "List", icon: ListBullets },
+		{ value: "gantt", label: "Gantt", icon: ChartBarHorizontal },
+	] as const;
+	const scales = [
+		{ value: "days", label: "Days" },
+		{ value: "weeks", label: "Weeks" },
+	] as const;
+
+	let view = $state<(typeof views)[number]["value"]>("board");
 	let sortKey = $state("manual");
 	let scale = $state<"days" | "weeks">("days");
 
@@ -172,21 +174,14 @@
 <div class="flex flex-col gap-6 rounded-xl border border-border bg-background p-4">
 	<div class="flex h-[600px] flex-col gap-3">
 		<div class="flex flex-wrap items-center gap-2">
-			<TaskViewSwitch {views} bind:value={view} label="Task view" />
+			<SegmentedFilter options={views} bind:value={view} ariaLabel="Task view" block={false} />
 			<div class="ml-auto flex items-center gap-3">
 				<label class="flex cursor-pointer items-center gap-1.5 text-xs font-medium text-muted-foreground">
 					<input type="checkbox" bind:checked={tracking} class="size-3.5 accent-[var(--tone-accent,var(--color-primary))]" />
 					Time tracking
 				</label>
 				{#if view === "gantt"}
-					<TaskViewSwitch
-						views={[
-							{ id: "days", label: "Days" },
-							{ id: "weeks", label: "Weeks" },
-						]}
-						bind:value={scale}
-						label="Timeline scale"
-					/>
+					<SegmentedFilter options={scales} bind:value={scale} ariaLabel="Timeline scale" block={false} />
 				{:else}
 					<label for="tasks-sort" class="text-xs font-medium text-muted-foreground">Sort</label>
 					<select

package/src/inbox/inbox-card.svelte

@@ -4,10 +4,10 @@
 	import { PixelLoader } from "@heyramzi/ui/ai/loading-state";
 	import { Button } from "@heyramzi/ui/shadcn/button";
 	import { Textarea } from "@heyramzi/ui/shadcn/textarea";
-	import { cn } from "../lib/cn.js";
+	import { cn } from "@heyramzi/utils";
 	import StatusBadge from "../status-badge.svelte";
 	import StatusDot from "../status-dot.svelte";
-	import { TONE_TEXT } from "../tone.js";
+	import { TONE_TEXT } from "@heyramzi/ui/lib/tone.js";
 	import InboxDraftEditor from "./inbox-draft.svelte";
 	import { canUndo, isOpen, startDraft } from "./inbox-logic.js";
 	import {
@@ -37,6 +37,7 @@
 	let open = $derived(isOpen(item));
 	let level = $derived(confidenceLevel(item.confidence.score));
 	let tone = $derived(inboxConfidence.tone(level));
+	let SourceIcon = $derived(SOURCE_ICON[item.trace.source.type]);
 
 	let pickedDraft = $state<string>();
 	let edits = $state<InboxDraftEdits>({});
@@ -185,7 +186,7 @@
 
 	<div class="text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1 pl-6 text-xs">
 		<span class="inline-flex items-center gap-1.5">
-			<span class="size-3.5 [&>svg]:size-full" aria-hidden="true">{@html SOURCE_ICON[item.trace.source.type]}</span>
+			<SourceIcon size={14} aria-hidden="true" />
 			{SOURCE_LABEL[item.trace.source.type]}, {item.trace.source.at}
 		</span>
 		<span class={cn("inline-flex items-center gap-1.5 tabular-nums", TONE_TEXT[tone])}>

package/src/inbox/inbox-draft.svelte

@@ -2,8 +2,8 @@
 	import { Input } from "@heyramzi/ui/shadcn/input";
 	import { Textarea } from "@heyramzi/ui/shadcn/textarea";
 	import { ToggleGroup, ToggleGroupItem } from "@heyramzi/ui/shadcn/toggle-group";
-	import { cn } from "../lib/cn.js";
-	import { insetWellClass } from "../tone.js";
+	import { cn } from "@heyramzi/utils";
+	import { insetWellClass } from "@heyramzi/ui/lib/panel.js";
 	import type { InboxDraft, InboxDraftEdits } from "./inbox-types.js";
 
 	type Props = {

package/src/inbox/inbox-statuses.ts

@@ -1,8 +1,6 @@
 import { defineStatuses } from "../define-statuses.js";
-import callIcon from "./icons/call.svg?raw";
-import emailIcon from "./icons/email.svg?raw";
-import formIcon from "./icons/form.svg?raw";
-import slackIcon from "./icons/slack.svg?raw";
+import { ClipboardText, EnvelopeSimple, Hash, Phone } from "phosphor-svelte";
+import type { PhosphorIcon } from "@heyramzi/ui/lib/icon-types.js";
 import type { InboxSourceType } from "./inbox-types.js";
 
 /** The lifecycle of an item. The dot and the badge both read this one map. */
@@ -35,11 +33,11 @@ export function confidenceLevel(score: number): "high" | "medium" | "low" {
 	return "low";
 }
 
-export const SOURCE_ICON: Record<InboxSourceType, string> = {
-	call: callIcon,
-	email: emailIcon,
-	slack: slackIcon,
-	form: formIcon,
+export const SOURCE_ICON: Record<InboxSourceType, PhosphorIcon> = {
+	call: Phone,
+	email: EnvelopeSimple,
+	slack: Hash,
+	form: ClipboardText,
 };
 
 export const SOURCE_LABEL: Record<InboxSourceType, string> = {

package/src/inbox/inbox-trace.svelte

@@ -8,13 +8,14 @@
 	let { trace }: Props = $props();
 
 	let count = $derived(trace.evidence.length);
+	let SourceIcon = $derived(SOURCE_ICON[trace.source.type]);
 </script>
 
 <!-- WHY the shared Reasoning and not a local disclosure: it is already the
      collapsed-by-default "how the agent got here" pattern, with the same chevron. -->
 <Reasoning>
 	<ReasoningTrigger class="w-auto">
-		<span class="size-3.5 shrink-0 [&>svg]:size-full" aria-hidden="true">{@html SOURCE_ICON[trace.source.type]}</span>
+		<SourceIcon size={14} class="shrink-0" aria-hidden="true" />
 		<span>
 			Trace: {SOURCE_LABEL[trace.source.type]}, {trace.source.at}, {count}
 			{count === 1 ? "quote" : "quotes"}

package/src/inbox/inbox.svelte

@@ -6,7 +6,7 @@
 	import { Kbd, KbdGroup } from "@heyramzi/ui/shadcn/kbd";
 	import { Tabs, TabsList, TabsTrigger } from "@heyramzi/ui/shadcn/tabs";
 	import { ToggleGroup, ToggleGroupItem } from "@heyramzi/ui/shadcn/toggle-group";
-	import { cn } from "../lib/cn.js";
+	import { cn } from "@heyramzi/utils";
 	import StatusDot from "../status-dot.svelte";
 	import InboxCard from "./inbox-card.svelte";
 	import { flatten, groupByProject, inLane, isTyping, laneOf } from "./inbox-logic.js";

package/src/index.ts

@@ -17,28 +17,23 @@ export { default as StatusBadge } from "./status-badge.svelte";
 export { default as StatusDot } from "./status-dot.svelte";
 export { default as StatusIcon } from "./status-icon.svelte";
 export { defineStatuses } from "./define-statuses.js";
-export { TONE_CLASS, TONE_COLOR, TONE_ICON, TONE_TEXT, insetWellClass } from "./tone.js";
 export type {
 	StatusDef,
 	StatusDotVariant,
 	StatusId,
 	StatusMap,
 	Statuses,
-	Tone,
 } from "./status-types.js";
+export { default as SidePanel } from "./side-panel.svelte";
+export type { PanelStat, SidePanelWidth } from "./side-panel-types.js";
 export { default as TaskList } from "./task-list.svelte";
 export { default as TaskGantt } from "./task-gantt.svelte";
-export { default as TaskViewSwitch } from "./task-view-switch.svelte";
-export { default as BoardIcon } from "./icons/board-icon.svelte";
-export { default as ListIcon } from "./icons/list-icon.svelte";
-export { default as GanttIcon } from "./icons/gantt-icon.svelte";
 export { addDays, dayNumber, isoFromDay, todayIso } from "./dates.js";
 export type {
 	GanttChange,
 	GanttLabelContext,
 	TaskListGroupContext,
 	TaskListRowContext,
-	TaskView,
 } from "./task-types.js";
 export { default as TimeTracker } from "./time/time-tracker.svelte";
 export { default as TimeChip } from "./time/time-chip.svelte";

package/src/kanban-board.svelte

@@ -7,9 +7,9 @@
 	import KanbanColumn from "./kanban-column.svelte";
 	import { liftDragImage } from "./kanban-drag.js";
 	import { boardOrderAt } from "./board-order.js";
-	import { cn } from "./lib/cn.js";
+	import { cn } from "@heyramzi/utils";
 	import { createKanbanDnd } from "./use-kanban-dnd.svelte.js";
-	import chevronDownIcon from "./icons/chevron-down.svg?raw";
+	import { CaretDown } from "phosphor-svelte";
 	import type {
 		KanbanCardContext,
 		KanbanColumn as KanbanColumnDef,
@@ -447,7 +447,7 @@
 						"size-2.5 transition-transform duration-[var(--duration-fast,160ms)] ease-[var(--ease-smooth-out,ease-out)] [&>svg]:size-full",
 						!railOpen && "-rotate-90",
 					)}
-					aria-hidden="true">{@html chevronDownIcon}</span
+					aria-hidden="true"><CaretDown weight="bold" /></span
 				>
 				{hiddenLabel}
 			</button>

package/src/kanban-column.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "./lib/cn.js";
+	import { cn } from "@heyramzi/utils";
 
 	type Props = {
 		/** Any CSS color. Only shows while a card is held over the column. */

package/src/reorder.ts

@@ -14,7 +14,6 @@ export function reorderByIds<Item extends Identifiable>(
   }
 
   const next = items.slice();
-  const [moved] = next.splice(activeIndex, 1);
-  next.splice(overIndex, 0, moved);
+  next.splice(overIndex, 0, ...next.splice(activeIndex, 1));
   return next;
 }

package/src/side-panel-types.ts

@@ -0,0 +1,16 @@
+// In a .ts file, not the panel's module script, so a plain `tsc` consumer of the
+// barrel can read them. tsc sees a .svelte file as a default export only.
+
+/** How wide the panel opens from `sm` (a short form) to `2xl` (a reader). Under
+    the `sm` breakpoint every panel is full width. */
+export type SidePanelWidth = "sm" | "md" | "lg" | "xl" | "2xl";
+
+/** One number the record is judged on. They sit in the header, in the order given. */
+export type PanelStat = {
+  label: string;
+  value: string;
+  /** A quiet note beside the value: the rate behind a count, or what the figure is. */
+  sub?: string;
+  /** One severity vocabulary: a count that should be zero is `bad`. */
+  tone?: "default" | "muted" | "good" | "bad";
+};

package/src/side-panel.svelte

@@ -0,0 +1,193 @@
+<script lang="ts" module>
+import type { PanelStat, SidePanelWidth } from "./side-panel-types.js";
+export type { PanelStat, SidePanelWidth };
+</script>
+
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { Snippet } from "svelte";
+import * as Sheet from "@heyramzi/ui/shadcn/sheet";
+import { OpenIn, type OpenInTool } from "@heyramzi/ui/components/open-in";
+import { CopyButton } from "@heyramzi/ui/components/copy";
+import type { Tone } from "@heyramzi/ui/lib/tone.js";
+import { cn } from "@heyramzi/utils";
+import StatusBadge from "./status-badge.svelte";
+
+// =========================
+// PROPS
+// =========================
+type Props = {
+	open: boolean;
+	/** Names the dialog for screen readers and heads the panel. */
+	title: string;
+	/** Merged onto the title. A short path is set `font-mono`, a subject is not. */
+	titleClass?: string;
+	/** The facts the record is filed under, read out under the title. */
+	description?: string;
+	/** Status chips, left of the action row. */
+	badges?: { label: string; tone: Tone }[];
+	/** Doors out to another tool. `text` replaces the tool's name on the button. */
+	openIn?: { tool: OpenInTool; href: string; label: string; text?: string }[];
+	/** A prompt for an AI about this record, copied on click. */
+	handoff?: { value: () => string | Promise<string>; label: string; copiedLabel: string };
+	/** The record's numbers, as a strip under the badges. Same place in every panel. */
+	stats?: PanelStat[];
+	/** Anything else the record can do, drawn last in the action row. */
+	actions?: Snippet;
+	/** Pinned actions. The body scrolls above it; the caller aligns the row. */
+	footer?: Snippet;
+	children: Snippet;
+	width?: SidePanelWidth;
+	/** The body brings its own header: the title is read out but not drawn, and
+	    the body is neither padded nor scrolled by the panel. */
+	bare?: boolean;
+	/** Fires once when the panel closes, from the close button, Escape or the overlay. */
+	onClose?: () => void;
+};
+let {
+	open = $bindable(),
+	title,
+	titleClass,
+	description,
+	badges = [],
+	openIn = [],
+	handoff,
+	stats = [],
+	actions,
+	footer,
+	children,
+	width = "sm",
+	bare = false,
+	onClose,
+}: Props = $props();
+
+// =========================
+// STATE
+// =========================
+let panel = $state<HTMLElement | null>(null);
+
+// =========================
+// DERIVED
+// =========================
+let hasRow = $derived(badges.length > 0 || openIn.length > 0 || Boolean(handoff || actions));
+const STAT_TONE = {
+	default: "",
+	muted: "text-muted-foreground",
+	good: "text-success",
+	bad: "text-destructive",
+} as const;
+const WIDTH: Record<SidePanelWidth, string> = {
+	sm: "sm:max-w-sm",
+	md: "sm:max-w-md",
+	lg: "sm:max-w-xl",
+	xl: "sm:max-w-2xl",
+	"2xl": "sm:max-w-3xl",
+};
+
+// =========================
+// HANDLERS
+// =========================
+// WHY focus goes to the panel unless a text field comes first: the dialog otherwise
+// opens on its first control, which draws a ring on a record nobody has touched.
+// A form that opens on its field keeps the default, since that is where you type.
+const FIRST_CONTROL =
+	'a[href], button:not([disabled]), input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])';
+function onOpenAutoFocus(event: Event) {
+	if (!panel || panel.querySelector(FIRST_CONTROL)?.matches("input, textarea, select")) return;
+	event.preventDefault();
+	panel.focus();
+}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<Sheet.Root
+	bind:open
+	onOpenChange={(next) => {
+		if (!next) onClose?.();
+	}}
+>
+	<Sheet.Content
+		side="right"
+		bind:ref={panel}
+		tabindex={-1}
+		class={cn("flex w-full flex-col gap-0 p-0", WIDTH[width], bare && "overflow-hidden")}
+		{onOpenAutoFocus}
+	>
+		{#if bare}
+			<Sheet.Header class="sr-only">
+				<Sheet.Title>{title}</Sheet.Title>
+			</Sheet.Header>
+			{@render children()}
+		{:else}
+			<Sheet.Header class="gap-1 border-b border-border">
+				<!-- WHY the right padding: the close button sits over this corner and
+				     a long title runs straight under it. -->
+				<Sheet.Title class={cn("pr-9 text-base leading-snug", titleClass)}>{title}</Sheet.Title>
+				{#if description}
+					<Sheet.Description>{description}</Sheet.Description>
+				{/if}
+				{#if hasRow}
+					<div class="flex items-center justify-between gap-3 pt-1.5">
+						<div class="flex min-w-0 flex-wrap items-center gap-2">
+							{#each badges as badge (`${badge.tone}:${badge.label}`)}
+								<StatusBadge tone={badge.tone}>{badge.label}</StatusBadge>
+							{/each}
+						</div>
+						<div class="flex shrink-0 items-center gap-1">
+							{#each openIn as door (door.href)}
+								<OpenIn
+									tool={door.tool}
+									href={door.href}
+									title={door.label}
+									label={door.text}
+									variant="button"
+									size="sm"
+								/>
+							{/each}
+							{#if handoff}
+								<CopyButton
+									agent
+									value={handoff.value}
+									label={handoff.label}
+									copiedLabel={handoff.copiedLabel}
+								/>
+							{/if}
+							{@render actions?.()}
+						</div>
+					</div>
+				{/if}
+				{#if stats.length > 0}
+					<dl class="flex flex-wrap gap-x-6 gap-y-3 pt-3">
+						{#each stats as stat (stat.label)}
+							<div class="min-w-0">
+								<dt class="text-xs text-muted-foreground">{stat.label}</dt>
+								<dd class={cn("text-sm font-medium tabular-nums", STAT_TONE[stat.tone ?? "default"])}>
+									{stat.value}
+									{#if stat.sub}
+										<span class="text-xs font-normal text-muted-foreground">{stat.sub}</span>
+									{/if}
+								</dd>
+							</div>
+						{/each}
+					</dl>
+				{/if}
+			</Sheet.Header>
+
+			<!-- WHY the body pads and spaces its sections itself: a panel that lets the
+			     caller choose drifts, one with a grey band and one with a white page. -->
+			<div class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">
+				{@render children()}
+			</div>
+
+			{#if footer}
+				<Sheet.Footer class="mt-0 flex-row items-center justify-end border-t border-border">
+					{@render footer()}
+				</Sheet.Footer>
+			{/if}
+		{/if}
+	</Sheet.Content>
+</Sheet.Root>

package/src/status-badge.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import { cn } from "./lib/cn.js";
-	import { TONE_CLASS } from "./tone.js";
-	import type { Tone, Statuses } from "./status-types.js";
-	import spinnerIcon from "./icons/spinner.svg?raw";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "@heyramzi/utils";
+	import { Badge } from "@heyramzi/ui/shadcn/badge";
+	import { Spinner } from "@heyramzi/ui/shadcn/spinner";
+	import { TONE_COLOR, type Tone } from "@heyramzi/ui/lib/tone.js";
+	import type { Statuses } from "./status-types.js";
 
-	type Props = {
+	type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class" | "children"> & {
 		/** A registry from `defineStatuses`. Supplies the label and tone. */
 		statuses?: Statuses;
 		/** The status id to look up in `statuses`. Leave it out when you pass `children`. */
@@ -14,6 +16,8 @@
 		label?: string;
 		/** Override the registry tone. */
 		tone?: Tone;
+		/** Shows a dot in the tone's colour before the label. */
+		dot?: boolean;
 		/** Shows a spinner: a background job is still working on the record. */
 		busy?: boolean;
 		/** Capitalizes the first letter of each word. Turn off for a name or a number. */
@@ -28,30 +32,32 @@
 		status,
 		label,
 		tone,
+		dot = false,
 		busy = false,
 		capitalize = true,
 		children,
 		class: className,
+		...restProps
 	}: Props = $props();
 
 	let resolvedTone = $derived(tone ?? (statuses && status ? statuses.tone(status) : "neutral"));
 	let resolvedLabel = $derived(label ?? (statuses && status ? statuses.label(status) : (status ?? "")));
 </script>
 
-<span
-	class={cn(
-		"inline-flex h-5 shrink-0 items-center justify-center gap-1 rounded-full border px-2 text-xs font-medium whitespace-nowrap",
-		capitalize && "capitalize",
-		TONE_CLASS[resolvedTone],
-		className,
-	)}
->
+<Badge tone={resolvedTone} class={cn(capitalize && "capitalize", className)} {...restProps}>
+	{#if dot}
+		<span
+			class="size-1.5 shrink-0 rounded-full"
+			style:background-color={TONE_COLOR[resolvedTone]}
+			aria-hidden="true"
+		></span>
+	{/if}
 	{#if busy}
-		<span class="size-3 animate-spin [&>svg]:size-full" aria-hidden="true">{@html spinnerIcon}</span>
+		<Spinner class="size-3" aria-hidden="true" />
 	{/if}
 	{#if children}
 		{@render children()}
 	{:else}
 		{resolvedLabel}
 	{/if}
-</span>
+</Badge>

package/src/status-dot.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from "./lib/cn.js";
-	import { TONE_COLOR } from "./tone.js";
+	import { cn } from "@heyramzi/utils";
+	import { TONE_COLOR } from "@heyramzi/ui/lib/tone.js";
 	import type { StatusDotVariant, Statuses } from "./status-types.js";
 
 	interface Props {

package/src/status-icon.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { Component } from "svelte";
 	import StatusDot from "./status-dot.svelte";
-	import { cn } from "./lib/cn.js";
-	import { TONE_ICON } from "./tone.js";
+	import { cn } from "@heyramzi/utils";
+	import { TONE_ICON } from "@heyramzi/ui/lib/tone.js";
 	import type { Statuses } from "./status-types.js";
 
 	type Props = {

package/src/status-types.ts

@@ -1,7 +1,5 @@
 import type { Component } from "svelte";
-
-/** The one severity scale the kit ships. */
-export type Tone = "neutral" | "accent" | "info" | "success" | "warning" | "destructive";
+import type { Tone } from "@heyramzi/ui/lib/tone.js";
 
 /**
  * The shape the dot can take. `progress` needs a `progress` value between 0 and 1.

package/src/task-gantt.svelte

@@ -1,11 +1,10 @@
 <script lang="ts" generics="T">
 	import type { Snippet } from "svelte";
-	import { cn } from "./lib/cn.js";
+	import { cn } from "@heyramzi/utils";
 	import { dayNumber, isoFromDay, todayIso, weekday } from "./dates.js";
 	import type { KanbanColumn as KanbanColumnDef } from "./kanban-types.js";
 	import type { GanttChange, GanttLabelContext } from "./task-types.js";
-	import chevronIcon from "./icons/chevron-right.svg?raw";
-	import flagIcon from "./icons/milestone-flag.svg?raw";
+	import { CaretRight, FlagPennant } from "phosphor-svelte";
 
 	type Props<T> = {
 		items: T[];
@@ -534,7 +533,7 @@
 										class="-ml-1 grid size-5 shrink-0 place-items-center rounded-md text-muted-foreground outline-none transition-colors duration-[var(--duration-quick,150ms)] hover:bg-foreground/5 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/60"
 									>
 										<span class="g-chevron size-3.5 [&>svg]:size-full" class:g-chevron-open={row.open} aria-hidden="true">
-											{@html chevronIcon}
+											<CaretRight weight="bold" />
 										</span>
 									</button>
 								{:else}
@@ -567,7 +566,7 @@
 									onpointerenter={() => (hoveredId = row.id)}
 									onpointerleave={() => (hoveredId = hoveredId === row.id ? null : hoveredId)}
 								>
-									<span class="size-5 [&>svg]:size-full" aria-hidden="true">{@html flagIcon}</span>
+									<span class="size-5 [&>svg]:size-full" aria-hidden="true"><FlagPennant weight="fill" /></span>
 								</button>
 							{:else if !row.own}
 								<!-- A parent with no dates of its own: the span of what is below it. Not draggable. -->

package/src/task-list.svelte

@@ -4,9 +4,9 @@
 	import { cubicOut } from "svelte/easing";
 	import { liftDragImage } from "./kanban-drag.js";
 	import { boardOrderAt } from "./board-order.js";
-	import { cn } from "./lib/cn.js";
+	import { cn } from "@heyramzi/utils";
 	import { createKanbanDnd } from "./use-kanban-dnd.svelte.js";
-	import chevronIcon from "./icons/chevron-right.svg?raw";
+	import { CaretRight } from "phosphor-svelte";
 	import type { KanbanColumn as KanbanColumnDef, KanbanMove, KanbanSortKey } from "./kanban-types.js";
 	import type { TaskListGroupContext, TaskListRowContext } from "./task-types.js";
 
@@ -228,7 +228,7 @@
 					class="-ml-1 grid size-6 place-items-center rounded-md text-muted-foreground outline-none transition-colors duration-[var(--duration-quick,150ms)] hover:bg-foreground/5 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/60"
 				>
 					<span class="tl-chevron size-3.5 [&>svg]:size-full" class:tl-chevron-open={open} aria-hidden="true">
-						{@html chevronIcon}
+						<CaretRight weight="bold" />
 					</span>
 				</button>
 			{/if}

package/src/task-types.ts

@@ -1,5 +1,3 @@
-import type { Component } from "svelte";
-
 /** Second argument handed to the list row snippet. */
 export type TaskListRowContext = {
   groupId: string;
@@ -25,14 +23,6 @@ export type GanttChange = {
   end: string;
 };
 
-/** One option in the view switch. */
-export type TaskView = {
-  id: string;
-  label: string;
-  /** Any Svelte component that takes `size` and `class`, e.g. `BoardIcon`. */
-  icon?: Component<{ size?: number; class?: string }>;
-};
-
 /** Second argument handed to the gantt label snippet. */
 export type GanttLabelContext = {
   /** 0 for a top-level task. Only grows when `getParent` is set. */

package/src/time/duration.ts

@@ -1,4 +1,4 @@
-import type { Tone } from "../status-types.js";
+import type { Tone } from "@heyramzi/ui/lib/tone.js";
 
 /** "90", "45m", "1h", "1.5h", "1h30", "1h 30m" and "1:30" to whole minutes. Null when it isn't a duration. */
 export function parseMinutes(text: string): number | null {

package/src/time/time-chip.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { cn } from "../lib/cn.js";
-	import { TONE_CLASS, TONE_TEXT } from "../tone.js";
+	import { cn } from "@heyramzi/utils";
+	import { TONE_CLASS, TONE_TEXT } from "@heyramzi/ui/lib/tone.js";
 	import { budgetTone, formatMinutes } from "./duration.js";
 	import TimeDot from "./time-dot.svelte";
 	import TimeRing from "./time-ring.svelte";
-	import clockIcon from "../icons/clock.svg?raw";
+	import { Clock } from "phosphor-svelte";
 
 	type Props = {
 		/** Minutes logged on the task. */
@@ -53,7 +53,7 @@
 		{:else if estimate}
 			<TimeRing value={minutes} max={estimate} size={12} stroke={6} />
 		{:else}
-			<span class="size-3 shrink-0 [&>svg]:size-full" aria-hidden="true">{@html clockIcon}</span>
+			<span class="size-3 shrink-0 [&>svg]:size-full" aria-hidden="true"><Clock /></span>
 		{/if}
 		<span aria-hidden="true">
 			{formatMinutes(minutes)}{#if estimate}<span class={cn("font-normal", tone === "neutral" ? "text-muted-foreground/70" : TONE_TEXT[tone])}> / {formatMinutes(estimate)}</span>{/if}

package/src/time/time-dot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "../lib/cn.js";
+	import { cn } from "@heyramzi/utils";
 
 	type Props = {
 		/** Pulses while true. The dot takes its color from the text around it. */

package/src/time/time-ring.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import { cn } from "../lib/cn.js";
-	import { TONE_TEXT } from "../tone.js";
+	import { cn } from "@heyramzi/utils";
+	import { TONE_TEXT } from "@heyramzi/ui/lib/tone.js";
 	import { budgetTone } from "./duration.js";
 
 	type Props = {

package/src/time/time-tracker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="T">
 	import type { Snippet } from "svelte";
-	import { cn } from "../lib/cn.js";
-	import { TONE_TEXT } from "../tone.js";
+	import { cn } from "@heyramzi/utils";
+	import { TONE_TEXT } from "@heyramzi/ui/lib/tone.js";
 	import {
 		budgetTone,
 		dayLabel,
@@ -15,8 +15,7 @@
 	import type { TimeLabels, TimeLogInput, TimeRunning, TimeStopInfo } from "./time-types.js";
 	import TimeDot from "./time-dot.svelte";
 	import TimeRing from "./time-ring.svelte";
-	import closeIcon from "../icons/close.svg?raw";
-	import playIcon from "../icons/play.svg?raw";
+	import { Play, Stop, X } from "phosphor-svelte";
 
 	type Props<T> = {
 		/** Every entry logged on the task. Order within a day is kept. */
@@ -255,11 +254,9 @@
 				class:is-running={!!running}
 			>
 				{#if running}
-					<svg viewBox="0 0 24 24" class="size-4.5" fill="currentColor" aria-hidden="true">
-						<rect x="6" y="6" width="12" height="12" rx="2.5" />
-					</svg>
+					<Stop weight="fill" class="size-4.5" aria-hidden="true" />
 				{:else}
-					<span class="size-5 translate-x-px [&>svg]:size-full" aria-hidden="true">{@html playIcon}</span>
+					<span class="size-5 translate-x-px [&>svg]:size-full" aria-hidden="true"><Play weight="fill" /></span>
 				{/if}
 			</button>
 		</div>
@@ -404,7 +401,7 @@
 										aria-label={labels.deleteEntry(formatMinutes(getMinutes(entry)))}
 										class="time-delete -my-1 -me-1 grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-destructive/10 hover:text-destructive focus-visible:ring-[3px] focus-visible:ring-ring/50"
 									>
-										<span class="size-3.5 [&>svg]:size-full" aria-hidden="true">{@html closeIcon}</span>
+										<span class="size-3.5 [&>svg]:size-full" aria-hidden="true"><X weight="bold" /></span>
 									</button>
 								{/if}
 							</li>

package/src/icons/board-icon.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-	let { size = 16, class: className }: { size?: number; class?: string } = $props();
-</script>
-
-<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" class={className}>
-	<g stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
-		<line x1="4" y1="3" x2="4" y2="11"></line>
-		<line x1="8" y1="3" x2="8" y2="7.5"></line>
-		<line x1="12" y1="3" x2="12" y2="13"></line>
-	</g>
-</svg>

package/src/icons/chevron-down.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 3.5 5 6.5 8 3.5"/></svg>

package/src/icons/chevron-right.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/clock.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="8" r="6"/><path d="M8 4.75V8l2.25 1.5"/></svg>

package/src/icons/close.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="m4 4 8 8M12 4l-8 8"/></svg>

package/src/icons/gantt-icon.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-	let { size = 16, class: className }: { size?: number; class?: string } = $props();
-</script>
-
-<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" class={className}>
-	<g stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
-		<line x1="2" y1="4" x2="8" y2="4"></line>
-		<line x1="5" y1="8" x2="12" y2="8"></line>
-		<line x1="9" y1="12" x2="14" y2="12"></line>
-	</g>
-</svg>

package/src/icons/list-icon.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	let { size = 16, class: className }: { size?: number; class?: string } = $props();
-</script>
-
-<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" class={className}>
-	<g stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
-		<line x1="6" y1="4" x2="14" y2="4"></line>
-		<line x1="6" y1="8" x2="14" y2="8"></line>
-		<line x1="6" y1="12" x2="14" y2="12"></line>
-	</g>
-	<g fill="currentColor">
-		<circle cx="2.75" cy="4" r="1"></circle>
-		<circle cx="2.75" cy="8" r="1"></circle>
-		<circle cx="2.75" cy="12" r="1"></circle>
-	</g>
-</svg>

package/src/icons/milestone-flag.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2v12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none"/><path d="M4.75 2.75h8l-2 3 2 3h-8z" fill="currentColor"/></svg>

package/src/icons/play.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5.6v12.8a1 1 0 0 0 1.5.86l10.6-6.4a1 1 0 0 0 0-1.72L9.5 4.74A1 1 0 0 0 8 5.6Z"/></svg>

package/src/icons/spinner.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" opacity="0.25"/><path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>

package/src/inbox/icons/call.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 2.5h2l1 3-1.5 1a7 7 0 0 0 4 4l1-1.5 3 1v2a1.5 1.5 0 0 1-1.5 1.5A10.5 10.5 0 0 1 2 4a1.5 1.5 0 0 1 1.5-1.5Z"/></svg>

package/src/inbox/icons/email.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3.5" width="12" height="9" rx="1.5"/><path d="m2.5 4.5 5.5 4 5.5-4"/></svg>

package/src/inbox/icons/form.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="2" width="10" height="12" rx="1.5"/><path d="M5.5 5.5h5M5.5 8h5M5.5 10.5h3"/></svg>

package/src/inbox/icons/slack.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 2.5 5.5 13.5M10.5 2.5l-1 11M3 6h10.5M2.5 10H13"/></svg>

package/src/lib/cn.ts

@@ -1,11 +0,0 @@
-export type ClassValue = string | false | null | undefined;
-
-/** Join class values, dropping empties. Deliberately dependency-free. */
-export function cn(...values: ClassValue[]): string {
-  let out = "";
-  for (const value of values) {
-    if (!value) continue;
-    out = out ? out + " " + value : value;
-  }
-  return out;
-}

package/src/task-view-switch.svelte

@@ -1,118 +0,0 @@
-<script lang="ts">
-	import { cn } from "./lib/cn.js";
-	import type { TaskView } from "./task-types.js";
-
-	type Props = {
-		views: TaskView[];
-		/** The active view id. Bindable. */
-		value: string;
-		onchange?: (id: string) => void;
-		label?: string;
-		class?: string;
-	};
-
-	let {
-		views,
-		value = $bindable(),
-		onchange,
-		label = "View",
-		class: className,
-	}: Props = $props();
-
-	let track = $state<HTMLDivElement>();
-	let pill = $state<{ x: number; width: number } | null>(null);
-	// The pill's first position is written without a transition, or it slides in from 0.
-	let placed = $state(false);
-
-	function measure(): void {
-		const button = track?.querySelector<HTMLElement>(`[data-view="${CSS.escape(value)}"]`);
-		if (!button) return;
-		pill = { x: button.offsetLeft, width: button.offsetWidth };
-	}
-
-	$effect(() => {
-		void value;
-		void views.length;
-		measure();
-		if (!placed) requestAnimationFrame(() => (placed = true));
-	});
-
-	$effect(() => {
-		if (!track) return;
-		const observer = new ResizeObserver(() => measure());
-		observer.observe(track);
-		return () => observer.disconnect();
-	});
-
-	function select(id: string): void {
-		if (id === value) return;
-		value = id;
-		onchange?.(id);
-	}
-
-	function onKeyDown(e: KeyboardEvent): void {
-		if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
-		e.preventDefault();
-		const at = views.findIndex((view) => view.id === value);
-		const next = views[(at + (e.key === "ArrowRight" ? 1 : -1) + views.length) % views.length];
-		select(next.id);
-		track?.querySelector<HTMLElement>(`[data-view="${CSS.escape(next.id)}"]`)?.focus();
-	}
-</script>
-
-<div
-	bind:this={track}
-	role="tablist"
-	aria-label={label}
-	tabindex="-1"
-	onkeydown={onKeyDown}
-	class={cn(
-		"task-view-switch relative inline-flex shrink-0 items-center gap-0.5 rounded-lg bg-muted/70 p-0.5 dark:bg-muted/40",
-		className,
-	)}
->
-	{#if pill}
-		<span
-			aria-hidden="true"
-			class="tvs-pill absolute inset-y-0.5 left-0 rounded-md bg-background shadow-sm ring-1 ring-foreground/5 dark:bg-foreground/10"
-			class:tvs-pill-placed={placed}
-			style:width="{pill.width}px"
-			style:transform="translateX({pill.x}px)"
-		></span>
-	{/if}
-	{#each views as view (view.id)}
-		{@const active = view.id === value}
-		<button
-			type="button"
-			role="tab"
-			data-view={view.id}
-			aria-selected={active}
-			tabindex={active ? 0 : -1}
-			onclick={() => select(view.id)}
-			class={cn(
-				"relative z-10 inline-flex h-7 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium outline-none transition-colors duration-[var(--duration-quick,150ms)] focus-visible:ring-2 focus-visible:ring-ring/60",
-				active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
-			)}
-		>
-			{#if view.icon}
-				{@const Icon = view.icon}
-				<Icon size={14} class="shrink-0" />
-			{/if}
-			{view.label}
-		</button>
-	{/each}
-</div>
-
-<style>
-	.tvs-pill-placed {
-		transition:
-			transform var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
-			width var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.tvs-pill-placed {
-			transition: none;
-		}
-	}
-</style>

package/src/tone.ts

@@ -1,54 +0,0 @@
-import type { Tone } from "./status-types.js";
-
-/**
- * The severity scale, as Tailwind classes for a chip and as CSS colors for the
- * dot. Tokens are plain CSS variables, so a host app can retheme them. The
- * accent tone reads `--tone-accent` and falls back to `--color-primary`, for a
- * host whose primary is a neutral and whose accent is a brand color.
- */
-
-export const TONE_CLASS: Record<Tone, string> = {
-	neutral: "border-border bg-muted/40 text-muted-foreground",
-	accent:
-		"border-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_30%,transparent)] bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_10%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
-	info: "border-info/30 bg-info/10 text-info-800 dark:text-info-400",
-	success: "border-success/30 bg-success/10 text-success-800 dark:text-success-400",
-	warning: "border-warning/30 bg-warning/10 text-warning-800 dark:text-warning-400",
-	destructive: "border-destructive/30 bg-destructive/10 text-destructive",
-};
-
-/** The same scale as text, for a verdict inside a line of muted facts. */
-export const TONE_TEXT: Record<Tone, string> = {
-	neutral: "text-muted-foreground",
-	accent: "text-[color:var(--tone-accent,var(--color-primary))]",
-	info: "text-info-800 dark:text-info-400",
-	success: "text-success-800 dark:text-success-400",
-	warning: "text-warning-800 dark:text-warning-400",
-	destructive: "text-destructive",
-};
-
-/** The same scale as icon color. */
-export const TONE_ICON: Record<Tone, string> = {
-	neutral: "text-muted-foreground",
-	accent: "text-[color:var(--tone-accent,var(--color-primary))]",
-	info: "text-info",
-	success: "text-success",
-	warning: "text-warning",
-	destructive: "text-destructive",
-};
-
-/** The scale as CSS colors, for the SVG dot. */
-export const TONE_COLOR: Record<Tone, string> = {
-	neutral: "var(--color-muted-foreground)",
-	accent: "var(--tone-accent,var(--color-primary))",
-	info: "var(--color-info)",
-	success: "var(--color-success)",
-	warning: "var(--color-warning)",
-	destructive: "var(--color-destructive)",
-};
-
-/**
- * The inset well for a control block inside a panel. A visible step
- * at the same depth, for filter rows and grouped controls.
- */
-export const insetWellClass = "rounded-lg border border-border bg-muted/40 p-2";