@heyramzi/ui 2.20.0 → 2.21.0

package/src/work/gantt/gantt-task-row.svelte

@@ -1,4 +1,7 @@
 <script lang="ts" generics="T">
+	import { ganttLooks } from "../../components/work-parts/looks.js";
+	import { Button } from "../../shadcn/button/index.js";
+	import { cn } from "../../lib/utils.js";
 	import type { Snippet } from "svelte";
 	import { CaretRight, FlagPennant } from "phosphor-svelte";
 	import type { GanttChange, GanttLabelContext } from "../task-types.js";
@@ -79,12 +82,14 @@
 	>
 		{#if nested}
 			{#if row.hasChildren}
-				<button
-					type="button"
+				<Button
+					variant="ghost"
+					size="sm"
+					icon
 					aria-expanded={row.open}
 					aria-label="{row.open ? 'Fold' : 'Unfold'} {title}"
 					onclick={() => onToggle(row.id)}
-					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"
+					class="-ml-1.5 size-6 text-muted-foreground"
 				>
 					<span
 						class="g-chevron size-3.5 [&>svg]:size-full"
@@ -93,7 +98,7 @@
 					>
 						<CaretRight weight="bold" />
 					</span>
-				</button>
+				</Button>
 			{:else}
 				<span class="-ml-1 size-5 shrink-0" aria-hidden="true"></span>
 			{/if}
@@ -117,7 +122,10 @@
 				type="button"
 				aria-label="{title}, {describe(span)}"
 				title="{title}, {describe(span)}"
-				class="g-flag absolute top-1/2 grid size-6 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+				class={cn(
+					"g-flag absolute top-1/2 grid size-6 -translate-x-1/2 -translate-y-1/2 place-items-center outline-none focus-visible:shadow-(--ring-focus)",
+					ganttLooks.mark,
+				)}
 				style:--g-hue={hue}
 				style:left="{dayX(layout, span.end) + layout.dayWidth / 2}px"
 				onclick={() => onSelect?.(row.id)}
@@ -135,7 +143,10 @@
 				tabindex="0"
 				aria-label="{title}, {describe(span)}"
 				title="{title}, {describe(span)}"
-				class="g-derived g-enter absolute top-1/2 -translate-y-1/2 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+				class={cn(
+					"g-derived g-enter absolute top-1/2 -translate-y-1/2 outline-none focus-visible:shadow-(--ring-focus)",
+					ganttLooks.mark,
+				)}
 				style:--g-hue={hue}
 				style:--g-i={Math.min(row.order, staggerCap)}
 				style:left="{dayX(layout, span.start) + layout.inset}px"
@@ -172,7 +183,7 @@
 
 <style>
 	.g-row {
-		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+		transition: background-color var(--duration-quick) var(--ease-smooth-out);
 	}
 
 	.g-row-hot {
@@ -180,8 +191,7 @@
 	}
 
 	.g-chevron {
-		transition: rotate var(--duration-fast, 250ms)
-			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+		transition: rotate var(--duration-fast) var(--ease-smooth-out);
 	}
 
 	.g-chevron-open {

package/src/work/gantt/gantt.css

@@ -1,18 +1,17 @@
 /* Shared by the bar, the derived bar and the group summary: they all slide in the same way. */
 .g-enter {
-  animation: g-bar-in var(--duration-slow, 300ms)
-    var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
-  animation-delay: calc(var(--g-i, 0) * var(--duration-stagger, 40ms));
+  animation: g-bar-in var(--duration-slow) var(--ease-smooth-out) backwards;
+  animation-delay: calc(var(--g-i, 0) * var(--duration-stagger));
 }
 
 @keyframes g-bar-in {
   from {
     opacity: 0;
-    clip-path: inset(0 100% 0 0 round 8px);
+    clip-path: inset(0 100% 0 0 round var(--radius-lg));
   }
   to {
     opacity: 1;
-    clip-path: inset(0 0 0 0 round 8px);
+    clip-path: inset(0 0 0 0 round var(--radius-lg));
   }
 }
 

package/src/work/inbox/inbox-card.svelte

@@ -26,6 +26,9 @@
 		inboxStates,
 	} from "./inbox-statuses.js";
 	import InboxTraceView from "./inbox-trace.svelte";
+	import { TagChip } from "../../components/chip/index.js";
+	import { workLooks } from "../../components/work-parts/looks.js";
+	import { FolderSimple } from "phosphor-svelte";
 	import type { InboxDraftEdits, InboxItem, InboxVerdict } from "./inbox-types.js";
 
 	interface Props {
@@ -173,8 +176,9 @@
 	);
 </script>
 
-<!-- WHY a bordered card only while it waits: a decided or automatic item is a
-     line in a log, so it loses the border and the queue stays scannable. -->
+<!-- WHY a card only while it waits: a decided or automatic item is a line in a log, so it
+     drops to the grey ground and the queue stays scannable. The card step draws its own
+     hairline, so a border on top of it would show a 2px edge. -->
 <!-- WHY a focusable article: j and k move focus card to card, and a screen reader
      reads the card as one labelled unit. -->
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
@@ -186,12 +190,10 @@
 	onfocusin={onselect}
 	onpointerdown={onselect}
 	class={cn(
-		"flex flex-col gap-3 rounded-xl p-3 outline-none transition-[background-color,border-color,box-shadow] duration-[var(--duration-quick,120ms)] ease-[var(--ease-smooth-out,ease-out)]",
-		"focus-visible:ring-ring/50 focus-visible:ring-3",
-		open
-			? "border-border bg-card border shadow-[var(--elev-card,none)]"
-			: "bg-muted/30 border border-transparent",
-		selected && open && "border-ring",
+		"flex flex-col gap-3 p-3 outline-none transition-[background-color,box-shadow] duration-quick ease-smooth-out motion-reduce:transition-none",
+		"focus-visible:shadow-(--ring-focus)",
+		open ? workLooks.panel : cn(workLooks.card, "bg-muted/30"),
+		selected && open && "ring-ring ring-1",
 	)}
 >
 	<header class="flex items-start gap-2.5">
@@ -214,7 +216,7 @@
 				{#if facts.command}
 					<div class="flex flex-col items-start gap-1">
 						<!-- The padding sits on a wrapper: on the clamped box itself, the 4th line showed through it. -->
-						<div class="bg-muted/50 w-full rounded-md px-2.5 py-2">
+						<div class={cn(workLooks.inset, "w-full px-2.5 py-2")}>
 							<pre
 								class={cn(
 									"text-foreground font-mono text-xs leading-5 break-words whitespace-pre-wrap",
@@ -263,6 +265,26 @@
 							{SOURCE_LABEL[item.trace.source.type]}
 						</span>
 					{/if}
+					<span class={FACT}>
+						<!-- The linked record is a chip inside the line, a link when the project has a page. -->
+						{#if item.project.href}
+							<a
+								href={item.project.href}
+								class={workLooks.chipLink}
+								aria-label="Project: {item.project.name}"
+							>
+								<TagChip class="hover:bg-muted">
+									{#snippet icon()}<FolderSimple aria-hidden="true" />{/snippet}
+									{item.project.name}
+								</TagChip>
+							</a>
+						{:else}
+							<TagChip>
+								{#snippet icon()}<FolderSimple aria-hidden="true" />{/snippet}
+								{item.project.name}
+							</TagChip>
+						{/if}
+					</span>
 					{#if time}
 						<span class={cn(FACT, "tabular-nums")}>{time}</span>
 					{/if}
@@ -323,7 +345,7 @@
 				onkeydown={onNoteKeydown}
 				placeholder="Tell the agent what to do instead"
 				aria-label="Note for the agent"
-				class="bg-background min-h-20 text-sm"
+				class="bg-card min-h-20 text-sm"
 			/>
 			<div class="flex flex-wrap items-center gap-2">
 				<Button size="sm" onclick={submitSteer} disabled={!note.trim()}>Send to agent</Button>

package/src/work/inbox/inbox-draft.svelte

@@ -68,7 +68,7 @@
 		oninput={(event) => write({ subject: event.currentTarget.value })}
 		aria-label="Subject"
 		{disabled}
-		class="bg-background"
+		class="bg-card"
 	/>
 	<Textarea
 		bind:ref={bodyEl}
@@ -76,7 +76,7 @@
 		oninput={(event) => write({ body: event.currentTarget.value })}
 		aria-label="Email body"
 		{disabled}
-		class="bg-background min-h-28 text-sm"
+		class="bg-card min-h-28 text-sm"
 	/>
 	<p class="text-muted-foreground text-xs" aria-live="polite">
 		{edited ? "Edited by you. Send uses your text." : "The agent's draft. Edit it before you send."}

package/src/work/kanban-column.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "../lib/utils.js";
+	import WorkWell from "../components/work-parts/work-well.svelte";
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		/** Any CSS color. Only shows while a card is held over the column. */
@@ -34,13 +35,6 @@
 		bodyClass,
 		...restProps
 	}: Props = $props();
-
-	// A column rests neutral. Its hue shows only while a card is held over it.
-	let style = $derived(
-		hue && active
-			? `background: color-mix(in oklch, ${hue} 8%, var(--color-muted, transparent)); outline: 1px solid color-mix(in oklch, ${hue} 30%, transparent);`
-			: undefined,
-	);
 </script>
 
 <div
@@ -53,14 +47,12 @@
 		className,
 	)}
 >
-	<div
+	<WorkWell
 		role="region"
 		aria-label={ariaLabel}
-		class={cn(
-			"flex min-h-0 flex-1 flex-col gap-1.5 overflow-y-auto overflow-x-hidden rounded-xl bg-muted/50 p-1.5 outline-offset-[-1px] transition-[background-color,outline-color] duration-[var(--duration-quick,120ms)] ease-[var(--ease-smooth-out,ease-out)] dark:bg-muted/30",
-			bodyClass,
-		)}
-		{style}
+		{hue}
+		{active}
+		class={cn("flex-1", bodyClass)}
 		{ondragover}
 		{ondragleave}
 		{ondrop}
@@ -69,7 +61,7 @@
 			{@render header()}
 		</div>
 		{@render children()}
-	</div>
+	</WorkWell>
 </div>
 
 <style>
@@ -79,7 +71,7 @@
 		flex: 1 1 0;
 		min-width: var(--kanban-column-min, 280px);
 		max-width: var(--kanban-column-max, 420px);
-		transition: opacity var(--duration-quick, 120ms) var(--ease-smooth-out, ease-out);
+		transition: opacity var(--duration-quick) var(--ease-smooth-out);
 	}
 
 	/* A board under 40rem wide (a phone, a side panel) shows one column and a peek of the next, as 82vw did on a phone. */

package/src/work/kanban-drag.ts

@@ -1,15 +1,17 @@
-const FRAME_PAD = 16;
+const FRAME_PAD = 24;
 
 /**
- * Native drag shows a flat, faded snapshot. This hands the browser a tilted
- * copy with a lifted shadow instead. Call it from `ondragstart`.
+ * Native drag shows a flat, faded snapshot. This hands the browser a lifted copy instead: the
+ * raised elevation step and a 2% grow, so the held card reads as picked up. The browser moves the
+ * image with the pointer itself, so there's no transition while it moves. Call it from
+ * `ondragstart`. `tilt` rotates the copy in degrees, 0 by default.
  */
-export function liftDragImage(e: DragEvent, tilt = -3): void {
+export function liftDragImage(e: DragEvent, tilt = 0): void {
   const source = e.currentTarget as HTMLElement | null;
   if (!source || !e.dataTransfer) return;
   const rect = source.getBoundingClientRect();
 
-  // The padded frame leaves room for the tilt and shadow, or the snapshot crops them.
+  // The padded frame leaves room for the shadow and the grow, or the snapshot crops them.
   const frame = document.createElement("div");
   Object.assign(frame.style, {
     position: "fixed",
@@ -20,13 +22,16 @@ export function liftDragImage(e: DragEvent, tilt = -3): void {
   });
 
   const ghost = source.cloneNode(true) as HTMLElement;
+  // The copy's first child is the card the consumer drew, so the shadow sits on its corners.
+  const card = (ghost.firstElementChild as HTMLElement | null) ?? ghost;
   Object.assign(ghost.style, {
     width: `${rect.width}px`,
     opacity: "1",
-    rotate: `${tilt}deg`,
-    filter:
-      "drop-shadow(0 2px 4px rgb(35 35 35 / 0.08)) drop-shadow(0 10px 18px rgb(35 35 35 / 0.14))",
+    rotate: tilt ? `${tilt}deg` : "",
+    // 2 minus the tooltip's shrink step is a 1.02 grow, kept on the motion scale.
+    scale: "calc(2 - var(--scale-small))",
   });
+  card.style.boxShadow = "var(--elev-raised)";
   frame.appendChild(ghost);
   document.body.appendChild(frame);
   e.dataTransfer.setDragImage(

package/src/work/task-gantt.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" generics="T">
+	import { workLooks } from "../components/work-parts/looks.js";
 	import type { Snippet } from "svelte";
 	import { cn } from "../lib/utils.js";
 	import { dayNumber, isoFromDay, todayIso } from "./dates.js";
@@ -193,7 +194,7 @@
 	bind:this={scroller}
 	class={cn(
 		"task-gantt relative min-h-0 flex-1 overflow-auto overscroll-x-contain",
-		flat ? "bg-background" : "rounded-xl border border-border bg-card text-card-foreground",
+		flat ? "bg-card" : workLooks.panel,
 		drag && "select-none",
 		className,
 	)}

package/src/work/task-list.svelte

@@ -2,11 +2,15 @@
 	import type { Snippet } from "svelte";
 	import { flip } from "svelte/animate";
 	import { cubicOut } from "svelte/easing";
+	import { durationMs } from "../lib/motion.js";
 	import { liftDragImage } from "./kanban-drag.js";
 	import { boardOrderAt } from "./board-order.js";
 	import { cn } from "../lib/utils.js";
 	import { createKanbanDnd } from "./use-kanban-dnd.svelte.js";
 	import { CaretRight } from "phosphor-svelte";
+	import { Button } from "../shadcn/button/index.js";
+	import GroupHead from "../components/work-parts/group-head.svelte";
+	import { workLooks } from "../components/work-parts/looks.js";
 	import type {
 		KanbanColumn as KanbanColumnDef,
 		KanbanMove,
@@ -55,6 +59,10 @@
 		/** Group ids that start folded. */
 		collapsed?: string[];
 		emptyLabel?: string;
+		/** Shows a plus in each default group head that adds a row to that group. */
+		onAdd?: (groupId: string) => void;
+		/** The plus button's accessible name, followed by the group label. */
+		addLabel?: string;
 		isDroppable?: (groupId: string) => boolean;
 		/** Drops the card chrome (border, radius, fill) so the list sits flat on the page. Group dividers stay. */
 		flat?: boolean;
@@ -83,6 +91,8 @@
 		collapsible = true,
 		collapsed = [],
 		emptyLabel = "Nothing here yet",
+		onAdd,
+		addLabel = "Add a task",
 		isDroppable,
 		flat = false,
 		class: className,
@@ -222,20 +232,22 @@
 	>
 		<div
 			class={cn(
-				"sticky z-10 flex h-10 items-center gap-2 px-3 backdrop-blur-sm",
-				flat ? "bg-background/90" : "bg-card/90",
+				"hover-row sticky z-10 flex h-10 items-center gap-2 px-3 backdrop-blur-sm",
+				flat ? "bg-card/90" : "bg-card/90",
 				depth === 0 && (head ? "top-9" : "top-0"),
 			)}
 			style:top={depth > 0 ? `${(head ? 2.25 : 0) + depth * 2.5}rem` : undefined}
 			style:padding-inline-start={depth > 0 ? `${0.75 + depth * 1.25}rem` : undefined}
 		>
 			{#if collapsible}
-				<button
-					type="button"
+				<Button
+					variant="ghost"
+					size="sm"
+					icon
 					aria-expanded={open}
 					aria-label="{open ? 'Fold' : 'Unfold'} {group.label}"
 					onclick={() => toggle(group.id)}
-					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"
+					class="-ml-1.5 text-muted-foreground"
 				>
 					<span
 						class="tl-chevron size-3.5 [&>svg]:size-full"
@@ -244,23 +256,21 @@
 					>
 						<CaretRight weight="bold" />
 					</span>
-				</button>
+				</Button>
 			{/if}
 			{#if groupHeader}
 				{@render groupHeader(group, context)}
 			{:else}
-				<span class="size-2 shrink-0 rounded-full" style:background={hue}></span>
-				<span class="truncate text-sm font-medium text-foreground">{group.label}</span>
-				<span
-					class="grid h-5 min-w-5 place-items-center rounded-sm bg-foreground/5 px-1 text-xs font-medium text-muted-foreground tabular-nums"
-				>
-					{count.toLocaleString()}
-				</span>
+				<GroupHead
+					label={group.label}
+					{hue}
+					{count}
+					onAdd={onAdd ? () => onAdd(group.id) : undefined}
+					{addLabel}
+				/>
 			{/if}
 			{#if actions}
-				<div
-					class="tl-actions ms-auto flex shrink-0 items-center gap-1 opacity-0 transition-opacity duration-[var(--duration-quick,150ms)] focus-within:opacity-100 any-pointer-coarse:opacity-100"
-				>
+				<div class="tl-actions row-action ms-auto flex shrink-0 items-center gap-1">
 					{@render actions(group, context)}
 				</div>
 			{/if}
@@ -286,10 +296,10 @@
 									: undefined)}
 							aria-keyshortcuts={draggable ? "Alt+ArrowUp Alt+ArrowDown" : undefined}
 							draggable={draggable ? "true" : undefined}
-							animate:flip={{ duration: 250, easing: cubicOut }}
+							animate:flip={{ duration: () => durationMs("fast"), easing: cubicOut }}
 							ondragstart={draggable
 								? (e) => {
-										liftDragImage(e, -1);
+										liftDragImage(e);
 										dnd.onDragStart(e, id);
 									}
 								: undefined}
@@ -300,7 +310,9 @@
 							onkeydown={draggable ? (e) => onRowKeyDown(e, id) : undefined}
 							style:--tl-i={Math.min(index, STAGGER_CAP)}
 							class={cn(
-								"tl-row relative mx-1.5 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
+								"tl-row relative mx-1.5 outline-none focus-visible:shadow-(--ring-focus)",
+								workLooks.row,
+								workLooks.rowHeight,
 								draggable && "cursor-grab active:cursor-grabbing",
 								dropBefore && "tl-drop-before",
 								dnd.isDragSource(id) && "opacity-40",
@@ -319,9 +331,7 @@
 					{/if}
 
 					{#if rows.length === 0 && children.length === 0 && !active}
-						<p
-							class="mx-1.5 rounded-lg border border-dashed border-border px-3 py-3 text-xs text-muted-foreground"
-						>
+						<p class={cn(workLooks.rowHole, "mx-1.5 px-3 py-3 text-xs text-muted-foreground")}>
 							{emptyLabel}
 						</p>
 					{/if}
@@ -338,7 +348,7 @@
 <div
 	class={cn(
 		"task-list flex min-h-0 flex-1 flex-col overflow-y-auto",
-		flat ? "bg-background" : "rounded-xl border border-border bg-card text-card-foreground",
+		flat ? "bg-card" : workLooks.panel,
 		className,
 	)}
 >
@@ -346,7 +356,7 @@
 		<div
 			class={cn(
 				"sticky top-0 z-20 flex h-9 shrink-0 items-center border-b border-border text-xs font-medium text-muted-foreground backdrop-blur-sm",
-				flat ? "bg-background/90" : "bg-card/90",
+				flat ? "bg-card/90" : "bg-card/90",
 			)}
 		>
 			{@render head()}
@@ -360,17 +370,7 @@
 
 <style>
 	.tl-group {
-		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
-	}
-
-	.tl-group :global(.tl-actions:focus-within) {
-		opacity: 1;
-	}
-
-	@media (hover: hover) and (pointer: fine) {
-		.tl-group:hover :global(.tl-actions) {
-			opacity: 1;
-		}
+		transition: background-color var(--duration-quick) var(--ease-smooth-out);
 	}
 
 	.tl-group-active {
@@ -378,8 +378,7 @@
 	}
 
 	.tl-chevron {
-		transition: rotate var(--duration-fast, 250ms)
-			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+		transition: rotate var(--duration-fast) var(--ease-smooth-out);
 	}
 
 	.tl-chevron-open {
@@ -392,9 +391,8 @@
 		grid-template-rows: 0fr;
 		opacity: 0;
 		transition:
-			grid-template-rows var(--duration-fast, 250ms)
-				var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
-			opacity var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+			grid-template-rows var(--duration-fast) var(--ease-smooth-out),
+			opacity var(--duration-quick) var(--ease-smooth-out);
 	}
 
 	.tl-fold-open {
@@ -408,15 +406,14 @@
 	}
 
 	.tl-row {
-		animation: tl-row-in var(--duration-slow, 300ms)
-			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
-		animation-delay: calc(var(--tl-i, 0) * var(--duration-stagger, 40ms));
-		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+		animation: tl-row-in var(--duration-slow) var(--ease-smooth-out) backwards;
+		animation-delay: calc(var(--tl-i, 0) * var(--duration-stagger));
+		transition: background-color var(--duration-quick) var(--ease-smooth-out);
 	}
 
 	@media (hover: hover) and (pointer: fine) {
 		.tl-row:hover {
-			background: color-mix(in oklab, var(--color-foreground, currentColor) 4%, transparent);
+			background: color-mix(in oklab, var(--color-foreground) 4%, transparent);
 		}
 	}
 
@@ -428,9 +425,8 @@
 		left: 0.5rem;
 		right: 0.5rem;
 		height: 2px;
-		border-radius: 1px;
 		background: var(--tl-hue);
-		animation: tl-line-in var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out) both;
+		animation: tl-line-in var(--duration-quick) var(--ease-smooth-out) both;
 	}
 
 	/* A ring where the line starts, so the drop point reads at a glance. */
@@ -441,10 +437,15 @@
 		left: 0.25rem;
 		width: 8px;
 		height: 8px;
-		border-radius: 999px;
-		border: 2px solid var(--tl-hue);
-		background: var(--color-card, white);
-		animation: tl-line-in var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out) both;
+		/* A ring drawn as a gradient, so the line needs no radius or border of its own. */
+		background: radial-gradient(
+			circle closest-side,
+			var(--color-card) calc(50% - 0.5px),
+			var(--tl-hue) 50%,
+			var(--tl-hue) calc(100% - 0.5px),
+			transparent 100%
+		);
+		animation: tl-line-in var(--duration-quick) var(--ease-smooth-out) both;
 	}
 
 	.tl-drop-before::before {
@@ -466,8 +467,8 @@
 	@keyframes tl-row-in {
 		from {
 			opacity: 0;
-			transform: translateY(var(--distance-micro, 4px));
-			filter: blur(var(--blur-small, 2px));
+			transform: translateY(var(--distance-micro));
+			filter: blur(var(--blur-small));
 		}
 	}
 

package/src/work/time/time-chip.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { cn } from "../../lib/utils.js";
-	import { TONE_CLASS, TONE_TEXT } from "../../lib/tone.js";
+	import { TONE_TEXT } from "../../lib/tone.js";
+	import StatusPill from "../../status/status-pill.svelte";
 	import { budgetTone, formatMinutes } from "./duration.js";
 	import TimeDot from "./time-dot.svelte";
 	import TimeRing from "./time-ring.svelte";
@@ -34,27 +35,23 @@
 	);
 </script>
 
+<!-- Logged time is a status of the task's budget, so it's a StatusPill: the icon sits in the tint. -->
 {#if visible}
-	<span
+	<StatusPill
 		role="img"
 		aria-label={spoken}
-		class={cn(
-			"inline-flex h-5 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md border px-1.5 text-xs font-medium tabular-nums",
-			running
-				? TONE_CLASS.accent
-				: tone === "neutral"
-					? "border-transparent text-muted-foreground"
-					: TONE_CLASS[tone],
-			className,
-		)}
+		tone={running ? "accent" : tone}
+		class={cn("tabular-nums", className)}
 	>
-		{#if running}
-			<TimeDot running size={6} />
-		{: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"><Clock /></span>
-		{/if}
+		{#snippet icon()}
+			{#if running}
+				<TimeDot running size={6} />
+			{:else if estimate}
+				<TimeRing value={minutes} max={estimate} size={12} stroke={6} />
+			{:else}
+				<Clock aria-hidden="true" />
+			{/if}
+		{/snippet}
 		<span aria-hidden="true">
 			{formatMinutes(minutes)}{#if estimate}<span
 					class={cn(
@@ -65,5 +62,5 @@
 					/ {formatMinutes(estimate)}</span
 				>{/if}
 		</span>
-	</span>
+	</StatusPill>
 {/if}

package/src/work/time/time-dot.svelte

@@ -24,7 +24,8 @@
 		flex: none;
 		width: var(--time-dot-size);
 		height: var(--time-dot-size);
-		border-radius: 9999px;
+		/* A dot, the one round shape DESIGN rule 15 allows for a status. */
+		border-radius: 50%;
 		background: currentColor;
 	}
 

package/src/work/time/time-ring.svelte

@@ -65,9 +65,8 @@
 <style>
 	.time-ring-arc {
 		transition:
-			stroke-dasharray var(--duration-slow, 300ms)
-				var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
-			color var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+			stroke-dasharray var(--duration-slow) var(--ease-smooth-out),
+			color var(--duration-fast) var(--ease-smooth-out);
 	}
 
 	.time-ring-arc.is-empty {