@heyramzi/ui 2.22.1 → 2.24.0

package/src/editor/serializer.ts

@@ -1,3 +1,5 @@
+import { safeImageUrl, safeUrl } from "./safe-url.js";
+
 // WHY our own slugify: the website's uses NFKD, which strips accents from French
 // headings. The vibe-kit utils one doesn't, so accented anchors would differ.
 function slugify(input: string, maxLength = 60): string {
@@ -158,7 +160,7 @@ function numString(attrs: Record<string, unknown> | undefined, key: string): str
 }
 
 function renderImage(node: Node): string {
-  const src = strAttr(node.attrs, "src");
+  const src = safeImageUrl(strAttr(node.attrs, "src"));
   if (!src) return "";
   const attrs = renderAttributes({
     alt: strAttr(node.attrs, "alt") ?? "",
@@ -321,11 +323,12 @@ const MARK_TAGS: Record<string, string> = {
 
 function wrapMark(content: string, mark: Mark): string {
   if (mark.type === "link") {
-    const attrs = renderAttributes({
-      href: strAttr(mark.attrs, "href") ?? "",
-      target: strAttr(mark.attrs, "target"),
-      rel: strAttr(mark.attrs, "rel"),
-    });
+    // WHY: stored docs come from teammates, clients and CLIs that skip the editor's link filter.
+    const href = safeUrl(strAttr(mark.attrs, "href"));
+    if (!href) return content;
+    const target = strAttr(mark.attrs, "target");
+    const rel = strAttr(mark.attrs, "rel") || (target ? "noopener noreferrer" : undefined);
+    const attrs = renderAttributes({ href, target, rel });
     return `<a${attrs}>${content}</a>`;
   }
   const tag = pick(MARK_TAGS, mark.type);

package/src/editor/slash-query.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vite-plus/test";
+import { slashQueryAt } from "./slash-query.js";
+
+describe("slashQueryAt", () => {
+  it.each([
+    ["/", ""],
+    ["/head", "head"],
+    ["hello /bul", "bul"],
+    ["line one\n/", ""],
+    ["TCP/IP", null],
+    ["and/or", null],
+    ["src/lib", null],
+    ["https://example", null],
+    [`x/${"a".repeat(20)}`, null],
+    ["no slash here", null],
+  ])("reads %j as %j", (textBefore, expected) => {
+    expect(slashQueryAt(textBefore)).toBe(expected);
+  });
+});

package/src/editor/slash-query.ts

@@ -0,0 +1,11 @@
+// One character of context, the slash, and a query of up to 20.
+export const SLASH_WINDOW = 22;
+
+/**
+ * The slash command typed just before the caret, or null when there isn't one. The slash has to
+ * start the text or follow whitespace, so `TCP/IP` and `and/or` stay plain text.
+ */
+export function slashQueryAt(textBefore: string): string | null {
+  const match = textBefore.match(/(?:^|\s)\/([a-zA-Z0-9 ]{0,20})$/);
+  return match ? match[1] : null;
+}

package/src/effects/animated-beam/path-calculator.svelte.ts

@@ -34,12 +34,26 @@ export function usePathCalculator() {
     const rectA = fromRef.getBoundingClientRect();
     const rectB = toRef.getBoundingClientRect();
 
-    svgDimensions = { width: containerRect.width, height: containerRect.height };
+    // A scaled ancestor shrinks every rect, but the SVG draws in the container's own pixels.
+    // Divide the scale out, or the beams stop short of their nodes.
+    const scaleX = containerRef.offsetWidth ? containerRect.width / containerRef.offsetWidth : 1;
+    const scaleY = containerRef.offsetHeight ? containerRect.height / containerRef.offsetHeight : 1;
+    const local = (rect: DOMRect) =>
+      new DOMRect(
+        (rect.left - containerRect.left) / scaleX,
+        (rect.top - containerRect.top) / scaleY,
+        rect.width / scaleX,
+        rect.height / scaleY,
+      );
+    const a = local(rectA);
+    const b = local(rectB);
 
-    const startX = anchorX(rectA, containerRect.left, fromAnchor, startXOffset);
-    const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
-    const endX = anchorX(rectB, containerRect.left, toAnchor, endXOffset);
-    const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
+    svgDimensions = { width: containerRect.width / scaleX, height: containerRect.height / scaleY };
+
+    const startX = anchorX(a, 0, fromAnchor, startXOffset);
+    const startY = a.top + a.height / 2 + startYOffset;
+    const endX = anchorX(b, 0, toAnchor, endXOffset);
+    const endY = b.top + b.height / 2 + endYOffset;
 
     // A cubic with horizontal handles, not a quadratic through a raised midpoint.
 

package/src/effects/marquee/Marquee.css

@@ -23,9 +23,10 @@
 .marquee__track--reverse {
   animation-direction: reverse;
 }
+/* fit-content already stops at the parent's width. No max-width here: this sheet is unlayered, so
+   it would beat a caller's max-w-* utility and the line would never overflow its box. */
 .marquee[data-overflow-only] {
   width: fit-content;
-  max-width: 100%;
   padding: 0;
 }
 .marquee[data-still] .marquee__track {
@@ -49,8 +50,10 @@
     transparent
   );
 }
-.marquee[data-pause-hover]:hover .marquee__track {
-  animation-play-state: paused;
+@media (hover: hover) and (pointer: fine) {
+  .marquee[data-pause-hover]:hover .marquee__track {
+    animation-play-state: paused;
+  }
 }
 .marquee[data-paused] .marquee__track {
   animation-play-state: paused;

package/src/effects/marquee/Marquee.svelte

@@ -114,8 +114,12 @@
 			const track = firstTrack.getBoundingClientRect();
 			const padStart = parseFloat(vertical ? computed.paddingTop : computed.paddingLeft) || 0;
 			const padEnd = parseFloat(vertical ? computed.paddingBottom : computed.paddingRight) || 0;
-			boxSize = (vertical ? box.height : box.width) - padStart - padEnd;
-			trackSize = vertical ? track.height : track.width;
+			// Rects carry an ancestor's CSS scale, padding and speed don't. Back to the box's own
+			// pixels, or a scaled box loops at the wrong speed.
+			const own = vertical ? root.offsetHeight : root.offsetWidth;
+			const scale = own ? (vertical ? box.height : box.width) / own : 1;
+			boxSize = (vertical ? box.height : box.width) / scale - padStart - padEnd;
+			trackSize = (vertical ? track.height : track.width) / scale;
 			gapSize = parseFloat(vertical ? computed.rowGap : computed.columnGap) || 0;
 		};
 		measure();

package/src/inbox/thread-inbox.svelte

@@ -15,12 +15,12 @@
 		UserPlus,
 	} from "phosphor-svelte";
 	import DetailHeader from "../components/list-page/detail-header.svelte";
-	import DetailPanel from "../components/list-page/detail-panel.svelte";
+	import DetailPanel from "../lib/panel.svelte";
 	import FilterItem from "../components/list-page/filter-item.svelte";
 	import FilterPopover from "../components/list-page/filter-popover.svelte";
 	import MasterDetail from "../components/list-page/master-detail.svelte";
 	import RailBody from "../components/list-page/rail-body.svelte";
-	import RailEmpty from "../components/list-page/rail-empty.svelte";
+	import EmptyState from "../components/list-page/empty-state.svelte";
 	import RailHead from "../components/list-page/rail-head.svelte";
 	import RailRow from "../components/list-page/rail-row.svelte";
 	import { filterSectionClass } from "../components/list-page/filter-section.js";
@@ -427,7 +427,9 @@
 						</li>
 					{:else}
 						<li class="flex h-full flex-col items-center">
-							<RailEmpty
+							<EmptyState
+								size="sm"
+								class="h-full"
 								title={filtered
 									? filter.needsYou
 										? labels.emptyNeedsYou
@@ -531,7 +533,7 @@
 					</DetailPanel>
 				{/if}
 			{:else}
-				<RailEmpty title={labels.selectThread} />
+				<EmptyState size="sm" class="h-full" title={labels.selectThread} />
 			{/if}
 		{/snippet}
 	</MasterDetail>

package/src/lib/dates.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vite-plus/test";
+import { formatAge } from "../record/format.js";
+import { localDay as recordDay } from "../record/logic.js";
+import { whenOf } from "../work/inbox/inbox-logic.js";
+import { editStamp, editedLabel, shortDate as editedDate } from "../work/docs/edited.js";
+import { todayIso } from "../work/dates.js";
+import { localDay as timeDay } from "../work/time/duration.js";
+
+// The modules that kept their own date names, pinned so the shared helpers can't change a string.
+// 10:00 UTC is the same calendar day from Hawaii to Auckland, so whenOf's date holds in any zone.
+const NOW = Date.parse("2026-10-23T10:00:00Z");
+const ago = (seconds: number) => new Date(NOW - seconds * 1000).toISOString();
+
+describe("relative time", () => {
+  it("formatAge says it in long words", () => {
+    expect(formatAge(ago(20), NOW)).toBe("now");
+    expect(formatAge(ago(3 * 86_400), NOW)).toBe("3 days ago");
+    expect(formatAge(ago(-14 * 86_400), NOW)).toBe("in 2 weeks");
+    expect(formatAge(ago(70 * 86_400), NOW)).toBe("2 months ago");
+    expect(formatAge(ago(400 * 86_400), NOW)).toBe("last year");
+  });
+
+  it("whenOf says it short, then turns to a date at four weeks", () => {
+    expect(whenOf(ago(3 * 3_600), NOW)).toBe("3 hr ago");
+    expect(whenOf(ago(86_400), NOW)).toBe("yesterday");
+    expect(whenOf(ago(40 * 86_400), NOW)).toBe("13 Sept");
+    expect(whenOf(ago(40 * 86_400), NOW, "en-US")).toBe("Sep 13");
+    expect(whenOf("Tuesday", NOW)).toBe("Tuesday");
+    expect(whenOf("2026-13-45T00:00:00Z", NOW)).toBe("");
+  });
+});
+
+describe("short date", () => {
+  const options = { now: new Date(NOW), timeZone: "UTC" };
+
+  it("adds the year only when it isn't this one", () => {
+    expect(editedDate("2026-10-23T08:00:00Z", options)).toBe("Oct 23");
+    expect(editedDate("2025-10-23T08:00:00Z", options)).toBe("Oct 23, 2025");
+    expect(editedDate("not a date", options)).toBe("");
+  });
+
+  it("builds the edited chip and stamp on it", () => {
+    expect(editStamp("2026-10-23T14:44:00Z", options)).toBe("Oct 23, 14:44");
+    expect(editedLabel("2026-10-23T14:44:00Z", "Edited", options)).toBe("Edited Oct 23");
+    expect(editedLabel(null, "Edited", options)).toBe("Edited");
+  });
+});
+
+describe("local day", () => {
+  it("reads a timestamp's day in the given zone", () => {
+    expect(recordDay("2026-10-23T23:30:00Z", "Europe/Paris")).toBe("2026-10-24");
+    expect(recordDay("2026-10-23T23:30:00Z", "UTC")).toBe("2026-10-23");
+  });
+
+  it("reads a date's day in the viewer's zone", () => {
+    expect(timeDay(new Date(2026, 0, 5, 23, 59))).toBe("2026-01-05");
+    expect(recordDay(new Date(2026, 0, 5, 0, 1).toISOString())).toBe("2026-01-05");
+  });
+
+  it("today matches across the modules", () => {
+    expect(todayIso()).toBe(timeDay());
+  });
+});

package/src/lib/dates.ts

@@ -0,0 +1,63 @@
+// The date strings the library shows, through Intl so a locale and a zone are all a caller passes.
+
+type At = Date | string | number;
+
+export type ShortDateOptions = {
+  locale?: string;
+  timeZone?: string;
+  /** Adds the year: "Oct 23, 2025". */
+  year?: boolean;
+};
+
+/** "Oct 23" in the caller's locale. */
+export function shortDate(at: At, { locale, timeZone, year }: ShortDateOptions = {}): string {
+  return new Intl.DateTimeFormat(locale, {
+    month: "short",
+    day: "numeric",
+    year: year ? "numeric" : undefined,
+    timeZone,
+  }).format(new Date(at));
+}
+
+const UNITS: [number, Intl.RelativeTimeFormatUnit][] = [
+  [31_536_000, "year"],
+  [2_592_000, "month"],
+  [604_800, "week"],
+  [86_400, "day"],
+  [3_600, "hour"],
+  [60, "minute"],
+];
+
+export type RelativeTimeOptions = {
+  locale?: string;
+  /** `long` says "3 hours ago", `short` "3 hr ago". */
+  style?: Intl.RelativeTimeFormatStyle;
+};
+
+/** "3 days ago", "in 2 weeks", "now": the largest whole unit between `at` and `now`. */
+export function relativeTime(
+  at: At,
+  now: At = Date.now(),
+  { locale, style = "long" }: RelativeTimeOptions = {},
+): string {
+  const seconds = Math.round((new Date(at).getTime() - new Date(now).getTime()) / 1000);
+  const age = Math.abs(seconds);
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto", style });
+  for (const [size, unit] of UNITS) {
+    if (age >= size) return rtf.format(Math.round(seconds / size), unit);
+  }
+  return rtf.format(0, "second");
+}
+
+/** The calendar day of a moment as `YYYY-MM-DD`, in the given zone or the viewer's own. Today by default. */
+export function localDay(at: At = new Date(), timeZone?: string): string {
+  const parts = new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    timeZone,
+  }).formatToParts(new Date(at));
+  const part = (type: Intl.DateTimeFormatPartTypes) =>
+    parts.find((p) => p.type === type)?.value ?? "";
+  return `${part("year")}-${part("month")}-${part("day")}`;
+}

package/src/lib/panel.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	/*
+	 * The one titled panel, exported as `DataPanel` from the dashboard and `DetailPanel`
+	 * from list-page. Both drew the same box from `panel.ts` with different props.
+	 */
+
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import SectionLabel from "../components/section-header/section-label.svelte";
+	import { cn } from "./utils.js";
+	import { panelHeaderClass, panelShellClass } from "./panel.js";
+	import type { PhosphorIcon } from "./icon-types.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** What this panel is, drawn as the app's one panel label. No label, no actions: no header. */
+		label?: string;
+		labelIcon?: PhosphorIcon;
+		/** A mark the icon set lacks (a platform logo), drawn ahead of the label at the same size. */
+		labelLead?: Snippet;
+		/** A line under the label, for the scope a number was measured over. */
+		sublabel?: string;
+		/**
+		 * A row count, total or freshness stamp. A prop, not an action, because
+		 * hand-placed hints ended up at three type sizes on one screen.
+		 */
+		hint?: string;
+		/** Controls that act on this panel. Pinned right, after the hint. */
+		actions?: Snippet;
+		/** Off for a body that supplies its own padding: a table, a media grid, a full-bleed list. */
+		pad?: boolean;
+		/** The body scrolls sideways rather than squeezing, for a table wider than the window. */
+		scroll?: boolean;
+		/** Takes the height the panels above it left, inside a `fill` stack. One per stack. */
+		grow?: boolean;
+		children: Snippet;
+		class?: string;
+		bodyClass?: string;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		label,
+		labelIcon,
+		labelLead,
+		sublabel,
+		hint,
+		actions,
+		pad = true,
+		scroll = false,
+		grow = false,
+		children,
+		class: className,
+		bodyClass,
+	}: Props = $props();
+
+	// =========================
+	// DERIVED
+	// =========================
+	let titled = $derived(Boolean(label || labelLead || sublabel));
+	let hasHeader = $derived(titled || Boolean(hint || actions));
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<section class={cn(panelShellClass, grow && "flex min-h-0 flex-1 flex-col", className)}>
+	{#if hasHeader}
+		<div class={panelHeaderClass}>
+			{#if titled}
+				<div class="flex min-w-0 flex-col gap-0.5">
+					{#if label || labelLead}
+						<SectionLabel icon={labelIcon}>
+							{@render labelLead?.()}
+							{label}
+						</SectionLabel>
+					{/if}
+					{#if sublabel}
+						<span class="truncate text-xs text-muted-foreground">{sublabel}</span>
+					{/if}
+				</div>
+			{:else}
+				<!-- Holds the left slot so the actions stay pinned right. -->
+				<span></span>
+			{/if}
+			{#if hint || actions}
+				<div class="flex min-w-0 items-center gap-3">
+					{#if hint}
+						<span class="text-xs tabular-nums text-muted-foreground">{hint}</span>
+					{/if}
+					{#if actions}
+						<div class="flex min-w-0 flex-wrap items-center justify-end gap-2">
+							{@render actions()}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/if}
+	<div
+		class={cn(
+			pad && "p-4",
+			scroll && "overflow-x-auto",
+			grow && "flex min-h-0 flex-1 flex-col",
+			bodyClass,
+		)}
+	>
+		{@render children()}
+	</div>
+</section>

package/src/lib/panel.ts

@@ -1,7 +1,7 @@
 /** The one panel shell: a titled box holding a table, a chart or a stack. */
 
-// WHY tokens, not markup: `DetailPanel` and `DataPanel` draw the same box with
-// different props, and their edges drifted because the classes were typed twice.
+// Tokens beside `panel.svelte`, because skeletons and hand-built cards draw this
+// same edge without the panel's header.
 
 // Dashboards used `Card`, so /ads had a ring and a shadow where /social had a
 // hairline. Flat, one hairline, `rounded-xl`.

package/src/lib/tone.ts

@@ -15,6 +15,21 @@ export const TONE_CLASS: Record<Tone, string> = {
   destructive: "border-destructive/30 bg-destructive/10 text-destructive-ink",
 };
 
+/**
+ * The scale as a quiet tint with no border: the icon and the text carry the tone, the fill only
+ * groups them. Neutral reads off the foreground, not `bg-muted`, because muted sits 0.005 L from
+ * the canvas and vanishes there (tokens board, "what fights the new scale").
+ */
+export const TONE_TINT: Record<Tone, string> = {
+  neutral: "bg-foreground/6 text-muted-foreground",
+  accent:
+    "bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_12%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
+  info: "bg-info/12 text-info-800 dark:text-info-400",
+  success: "bg-success/12 text-success-800 dark:text-success-400",
+  warning: "bg-warning/14 text-warning-800 dark:text-warning-400",
+  destructive: "bg-destructive/10 text-destructive-ink",
+};
+
 /** 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",

package/src/modules.test.ts

@@ -5,6 +5,7 @@ import { describe, expect, it } from "vite-plus/test";
 import * as record from "./record/index.js";
 import * as inbox from "./inbox/index.js";
 import * as thread from "./thread/index.js";
+import * as triage from "./triage/index.js";
 
 const pkg = JSON.parse(
   readFileSync(join(dirname(fileURLToPath(import.meta.url)), "..", "package.json"), "utf8"),
@@ -23,6 +24,9 @@ describe("module split", () => {
     expect(inbox.ThreadInbox).toBeDefined();
     expect(inbox.InboxCard).toBeDefined();
     expect(inbox.threadsOf).toBeTypeOf("function");
+    expect(triage.TriagePlan).toBeDefined();
+    expect(triage.TriageTask).toBeDefined();
+    expect(triage.TriageQueue).toBeDefined();
   });
 
   it("resolves every export path to a file", () => {
@@ -37,7 +41,15 @@ describe("module split", () => {
   });
 
   it("exports each module once, under its own name", () => {
-    for (const name of ["./work", "./status", "./panel", "./record", "./thread", "./inbox"]) {
+    for (const name of [
+      "./work",
+      "./status",
+      "./panel",
+      "./record",
+      "./thread",
+      "./inbox",
+      "./triage",
+    ]) {
       expect(pkg.exports[name], name).toBeDefined();
     }
     expect(Object.keys(pkg.exports).filter((name) => name.startsWith("./tasks"))).toEqual([]);

package/src/panel/side-panel.svelte

@@ -11,7 +11,7 @@
 	import * as Sheet from "../shadcn/sheet/index.js";
 	import { OpenIn, type OpenInTool } from "../components/open-in/index.js";
 	import { CopyButton } from "../components/copy/index.js";
-	import type { Tone } from "../lib/tone.js";
+	import { TONE_TEXT, type Tone } from "../lib/tone.js";
 	import { cn } from "../lib/utils.js";
 	import StatusBadge from "../status/status-badge.svelte";
 	import PopValue from "../charts/pop-value.svelte";
@@ -75,9 +75,9 @@
 	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",
+		muted: TONE_TEXT.neutral,
+		good: TONE_TEXT.success,
+		bad: TONE_TEXT.destructive,
 	} as const;
 	const WIDTH: Record<SidePanelWidth, string> = {
 		sm: "sm:max-w-sm",

package/src/record/format.ts

@@ -1,6 +1,8 @@
 // Display formatting through Intl, so a locale string is all a host passes.
 // A date-only value ("2026-10-26") is a calendar day, read in UTC so no zone shifts it.
 
+import { relativeTime } from "../lib/dates.js";
+
 const DAY_ONLY = /^\d{4}-\d{2}-\d{2}$/;
 
 function parse(iso: string): { date: Date; timeZone?: string } {
@@ -61,21 +63,7 @@ export function formatTime(iso: string, locale = "en-GB", timeZone?: string): st
 
 /** "3 days ago", "in 2 weeks", "now". */
 export function formatAge(iso: string, now: Date | number = Date.now(), locale = "en-GB"): string {
-  const seconds = Math.round((new Date(iso).getTime() - new Date(now).getTime()) / 1000);
-  const abs = Math.abs(seconds);
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "long" });
-  const units: [number, Intl.RelativeTimeFormatUnit][] = [
-    [31_536_000, "year"],
-    [2_592_000, "month"],
-    [604_800, "week"],
-    [86_400, "day"],
-    [3_600, "hour"],
-    [60, "minute"],
-  ];
-  for (const [size, unit] of units) {
-    if (abs >= size) return rtf.format(Math.round(seconds / size), unit);
-  }
-  return rtf.format(0, "second");
+  return relativeTime(iso, now, { locale });
 }
 
 /** "€12,000". `compact` gives "€12K". */

package/src/record/logic.ts

@@ -1,4 +1,5 @@
 // The record's pure logic: grouping, merging, picking. No DOM, no clock of its own.
+import { localDay as dayOf } from "../lib/dates.js";
 import type {
   RecordEvent,
   RecordFilterDef,
@@ -16,12 +17,7 @@ import type {
 
 /** The calendar day of a timestamp as `YYYY-MM-DD`, in the given zone or the viewer's own. */
 export function localDay(iso: string, timeZone?: string): string {
-  return new Intl.DateTimeFormat("en-CA", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    timeZone,
-  }).format(new Date(iso));
+  return dayOf(iso, timeZone);
 }
 
 export type DayGroup = { day: string; events: RecordEvent[] };

package/src/record/record-stats.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import { TONE_TEXT } from "../lib/tone.js";
 	import { cn } from "../lib/utils.js";
 	import PopValue from "../charts/pop-value.svelte";
 	import type { PanelStat } from "../panel/side-panel-types.js";
@@ -23,9 +24,9 @@
 	// =========================
 	const TONE = {
 		default: "",
-		muted: "text-muted-foreground",
-		good: "text-success",
-		bad: "text-destructive",
+		muted: TONE_TEXT.neutral,
+		good: TONE_TEXT.success,
+		bad: TONE_TEXT.destructive,
 	} as const;
 </script>
 

package/src/record/steps-rail.svelte

@@ -14,6 +14,7 @@
 	} from "phosphor-svelte";
 	import { cn } from "../lib/utils.js";
 	import { Button } from "../shadcn/button/index.js";
+	import CountChip from "../components/chip/count-chip.svelte";
 	import { Input } from "../shadcn/input/index.js";
 	import { Skeleton } from "../shadcn/skeleton/index.js";
 	import * as Popover from "../shadcn/popover/index.js";
@@ -279,10 +280,12 @@
 						>
 							<DotsThreeVertical class="size-4" weight="bold" />
 							{#if hiddenCount > 0}
-								<span
-									class="absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-muted px-1 text-xs font-medium tabular-nums"
-									>{hiddenCount.toLocaleString()}</span
-								>
+								<!-- Opaque, since it sits over the icon's corner. -->
+								<CountChip
+									count={hiddenCount}
+									size="sm"
+									class="absolute -top-0.5 -right-0.5 bg-muted"
+								/>
 							{/if}
 						</Button>
 					{/snippet}

package/src/shadcn/alert-dialog/alert-dialog-overlay.svelte

@@ -12,6 +12,6 @@
 <AlertDialogPrimitive.Overlay
 	bind:ref
 	data-slot="alert-dialog-overlay"
-	class={cn("t-modal-backdrop fixed inset-0 z-50 bg-black/50", className)}
+	class={cn("t-modal-backdrop fixed inset-0 z-50", className)}
 	{...restProps}
 />

package/src/shadcn/button/button.svelte

@@ -47,7 +47,7 @@
 			size: {
 				sm: "relative after:absolute after:top-1/2 after:left-1/2 after:h-[max(100%,2rem)] after:w-[max(100%,2rem)] after:-translate-x-1/2 after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] any-pointer-coarse:after:w-[max(100%,2.75rem)] h-7 gap-1 px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 any-pointer-coarse:h-10 any-pointer-coarse:px-3",
 				default:
-					"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 any-pointer-coarse:h-11 any-pointer-coarse:px-3.5",
+					"h-(--control-height) gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 any-pointer-coarse:px-3.5",
 				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 any-pointer-coarse:h-11 any-pointer-coarse:px-3.5",
 			},
 			/** A glyph with no label: square at the height its size already sets. */

package/src/shadcn/button/button.test.ts

@@ -10,10 +10,10 @@ describe("buttonVariants text", () => {
       expect(classes).toContain("any-pointer-coarse:min-h-11");
       expect(classes).not.toContain("whitespace-nowrap");
       expect(classes).not.toContain("h-7");
-      expect(classes).not.toContain("h-8");
+      expect(classes).not.toContain("h-(--control-height)");
     });
   }
   it("leaves the other variants fixed-height", () => {
-    expect(buttonVariants({ variant: "ghost" }).split(" ")).toContain("h-8");
+    expect(buttonVariants({ variant: "ghost" }).split(" ")).toContain("h-(--control-height)");
   });
 });