@heyramzi/ui 2.23.0 → 2.24.0

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/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/status/index.ts

@@ -10,4 +10,4 @@ export type {
   Statuses,
 } from "./status-types.js";
 export { default as StatusPill } from "./status-pill.svelte";
-export { PILL_TINT } from "./pill-tint.js";
+export { TONE_TINT as PILL_TINT } from "../lib/tone.js";

package/src/status/status-pill.svelte

@@ -1,13 +1,7 @@
-<script lang="ts" module>
-	import type { Tone } from "../lib/tone.js";
-	import { PILL_TINT } from "./pill-tint.js";
-
-	export { PILL_TINT };
-</script>
-
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
+	import { TONE_TINT, type Tone } from "../lib/tone.js";
 	import { cn } from "../lib/utils.js";
 
 	interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "class" | "children"> {
@@ -30,7 +24,7 @@
 		"transition-[background-color,color] duration-quick ease-smooth-out motion-reduce:transition-none",
 		"[&>svg]:size-3 [&>svg]:shrink-0",
 		icon && "pl-1.5",
-		PILL_TINT[tone],
+		TONE_TINT[tone],
 		className,
 	)}
 	{...restProps}

package/src/thread/thread.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from "svelte";
 	import { ArrowBendDownRight, Check, MapPin, PencilSimple, Trash } from "phosphor-svelte";
 	import { cn } from "../lib/utils.js";
+	import { shortDate } from "../lib/dates.js";
 	import { initial } from "../lib/initials.js";
 	import { AgentAvatar } from "../agents/index.js";
 	import RichRenderer from "../editor/renderer.svelte";
@@ -64,8 +65,8 @@
 		avatar,
 		attachments,
 		anchorChip,
-		when = (comment) => shortDate(comment.createdAt),
-		whenEvent = (event) => shortDate(event.at),
+		when = (comment) => shortDate(comment.createdAt, { locale }),
+		whenEvent = (event) => shortDate(event.at, { locale }),
 		onPost,
 		onEdit,
 		onDelete,
@@ -84,10 +85,6 @@
 	let shown = $derived(showResolved ? nodes : nodes.filter((node) => !node.comment.resolved));
 	let items = $derived(interleave(shown, events));
 
-	function shortDate(at: string): string {
-		return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(new Date(at));
-	}
-
 	let draft = $state("");
 	let replyTo = $state<string | null>(null);
 	let replyDraft = $state("");

package/src/work/README.md

@@ -286,7 +286,6 @@ exported helpers.
   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.
 - `SidePanel`: a sheet for one record, above.
-- `salesStatuses`: an example pipeline map.
 
 ## Styling
 

package/src/work/dates.ts

@@ -1,5 +1,7 @@
 // Dates are plain "YYYY-MM-DD" strings, counted as whole UTC days. A timeline
 // only needs days, and day numbers dodge every timezone and DST edge.
+import { localDay } from "../lib/dates.js";
+
 const DAY_MS = 86_400_000;
 
 /** Days since 1970-01-01 for an ISO date. Anything after the date part is ignored. */
@@ -20,9 +22,7 @@ export function addDays(iso: string, days: number): string {
 
 /** Today in the viewer's own timezone, as an ISO date. */
 export function todayIso(): string {
-  const now = new Date();
-  const local = new Date(now.getTime() - now.getTimezoneOffset() * 60_000);
-  return local.toISOString().slice(0, 10);
+  return localDay();
 }
 
 /** 0 is Sunday, as in `Date.getUTCDay`. */

package/src/work/demo.svelte

@@ -20,7 +20,6 @@
 	import StatusDot from "../status/status-dot.svelte";
 	import { defineStatuses } from "../status/define-statuses.js";
 	import { addDays, dayNumber, todayIso } from "./dates.js";
-	import { salesStatuses } from "./presets/sales.js";
 	import type { KanbanMove } from "./kanban-types.js";
 	import type { GanttChange } from "./task-types.js";
 	import TimeTracker from "./time/time-tracker.svelte";
@@ -48,6 +47,15 @@
 		done: { label: "Done", tone: "success", variant: "completed" },
 	});
 
+	const salesStatuses = defineStatuses({
+		new: { label: "New", tone: "accent", variant: "open" },
+		contacted: { label: "Contacted", tone: "info", variant: "open" },
+		proposal: { label: "Proposal", tone: "accent", variant: "progress", progress: 0.25 },
+		negotiation: { label: "Negotiation", tone: "warning", variant: "progress", progress: 0.75 },
+		won: { label: "Won", tone: "success", variant: "completed" },
+		lost: { label: "Lost", tone: "destructive", variant: "lost" },
+	});
+
 	const columns = [
 		{ id: "todo", label: "To do", hue: "var(--color-muted-foreground)" },
 		{ id: "doing", label: "In progress", hue: "var(--color-info)" },