@heyramzi/ui 2.22.1 → 2.24.0

package/src/shadcn/command/command-dialog.svelte

@@ -40,9 +40,7 @@
 			"rounded-2xl! top-[max(0.5rem,env(safe-area-inset-top))] right-2 bottom-auto left-2 w-auto max-h-[70svh] translate-y-0 gap-0 overflow-hidden p-0 sm:p-0",
 			// WHY no border and no card background here: the palette is a floating
 
-			// object, so its edge is a lit rim and a cast shadow rather than a drawn line, and the surface itself belongs to the Command root beneath so its translucency
-
-			// can read the dimmed page through it.
+			// object, so its edge is a lit rim and a cast shadow rather than a drawn line, and the surface belongs to the Command root beneath.
 			"border-0 bg-transparent shadow-edge-overlay",
 			// WHY a third of the way down rather than centred: the eye is already at
 
@@ -55,12 +53,9 @@
 		{showCloseButton}
 		{portalProps}
 	>
-		<Command
-			{...restProps}
-			bind:value
-			bind:ref
-			class="bg-popover supports-backdrop-filter:bg-popover/94 supports-backdrop-filter:backdrop-blur-2xl"
-			{children}
-		/>
+		<!-- WHY the root's opaque `bg-popover`, no glass: `.t-modal` on the content sets `will-change:
+		     opacity`, which makes the content the backdrop root, so a blur here read only the empty content
+		     box, never the page. Its 94% surface let page text show through the rows (light, 390px). -->
+		<Command {...restProps} bind:value bind:ref {children} />
 	</Dialog.Content>
 </Dialog.Root>

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

@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="dialog-overlay"
 	class={cn(
-		"t-modal-backdrop supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
+		"t-modal-backdrop fixed inset-0 isolate z-50",
 		className,
 	)}
 	{...restProps}

package/src/shadcn/input/input.svelte

@@ -25,7 +25,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input enabled:hover:border-foreground/20 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 any-pointer-coarse:h-11 rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input enabled:hover:border-foreground/20 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-(--control-height) rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className,
 		)}
 		type="file"
@@ -38,7 +38,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input enabled:hover:border-foreground/20 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 any-pointer-coarse:h-11 rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input enabled:hover:border-foreground/20 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-(--control-height) rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className,
 		)}
 		{type}

package/src/shadcn/sheet/sheet-overlay.svelte

@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="sheet-overlay"
 	class={cn(
-		"t-modal-backdrop bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",
+		"t-modal-backdrop fixed inset-0 z-50",
 		className,
 	)}
 	{...restProps}

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/tokens/craft.css

@@ -23,6 +23,21 @@
   --text-2xs: 0.6875rem; /* a count, a kbd hint, a meta line under a tile; the floor */
 }
 
+/* ── Control height ──────────────────────────────────────────
+   One height for every control that sits in a row together: an input, a
+   default button, a select trigger. 32px on a desktop row, 44px under a finger
+   (DESIGN.md rule 12), so a search field and its button always line up. Write
+   it `h-(--control-height)`. */
+:root {
+  --control-height: 2rem;
+}
+
+@media (any-pointer: coarse) {
+  :root {
+    --control-height: 2.75rem;
+  }
+}
+
 /* ── Elevation ───────────────────────────────────────────────
    `--elev-card` and its hover carry their own hairline, so a box that also
    draws `border` gets a 2px edge. The other steps carry none. */
@@ -88,6 +103,21 @@
   --elev-field: inset 0 1px 2px color-mix(in oklab, black 40%, transparent);
 }
 
+/* ── Scrim ───────────────────────────────────────────────────
+   The dim behind a dialog, an alert dialog and a sheet. A dim with a 2px blur:
+   the page behind stays legible as the page you came from, so the overlay reads
+   as on top of it, not instead of it. Dark needs a deeper dim, since 32% black
+   on an already dark page barely moves it. */
+:root {
+  --scrim: color-mix(in oklab, var(--elev-tint) 32%, transparent);
+  --scrim-blur: var(--blur-small);
+}
+
+/* After `:root`, since `.dark` sits on the same element at the same specificity. */
+.dark {
+  --scrim: color-mix(in oklab, black 55%, transparent);
+}
+
 /* ── Focus ───────────────────────────────────────────────────
    One variable, so every control focuses the same way: a solid accent edge,
    then a soft halo. */

package/src/triage/README.md

@@ -0,0 +1,28 @@
+# @heyramzi/ui/triage
+
+The three pieces of an email triage screen. They never fetch: you pass the words and callbacks, and they hand back what the person did.
+
+- `TriagePlan` is one email with the plan the model proposes ("Create a task in Clients") and three ways out: approve, type another task, dismiss.
+- `TriageTask` is one settled email: what happened, the task it became, when, and Undo when the host passes `onUndo`.
+- `TriageQueue` is the list around them, with the empty state. `kind="plans"` stacks cards, `kind="tasks"` draws one divided list.
+
+```svelte
+<script lang="ts">
+  import { TriageQueue, TriagePlan } from "@heyramzi/ui/triage";
+</script>
+
+<TriageQueue items={emails} key={(e) => e.id} empty="Nothing to review.">
+  {#snippet row(e)}
+    <TriagePlan
+      sender={e.from}
+      subject={e.subject}
+      plan={e.plan}
+      onApprove={() => approve(e.id)}
+      onPick={(task) => approve(e.id, task)}
+      onDismiss={() => dismiss(e.id)}
+    />
+  {/snippet}
+</TriageQueue>
+```
+
+`labels` on each piece is a partial, so a host translates it. A callback may return a promise: the buttons stay disabled until it settles.

package/src/triage/index.ts

@@ -0,0 +1,10 @@
+export { default as TriagePlan } from "./triage-plan.svelte";
+export { default as TriageTask } from "./triage-task.svelte";
+export { default as TriageQueue } from "./triage-queue.svelte";
+export { DEFAULT_TRIAGE_PLAN_LABELS, DEFAULT_TRIAGE_TASK_LABELS } from "./types.js";
+export type {
+  TriageOutcome,
+  TriagePlanLabels,
+  TriageTaskLabels,
+  TriageTaskLink,
+} from "./types.js";

package/src/triage/triage-plan.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { Button } from "../shadcn/button/index.js";
+	import { Input } from "../shadcn/input/index.js";
+	import { cn } from "../lib/utils.js";
+	import { DEFAULT_TRIAGE_PLAN_LABELS, type TriagePlanLabels } from "./types.js";
+
+	interface Props {
+		/** Who sent the email. */
+		sender: string;
+		subject: string;
+		/** The first lines of the body. */
+		snippet?: string;
+		/** When it arrived, as text the host already formatted. */
+		received?: string | null;
+		/** The ISO time behind `received`, for the `time` element. */
+		receivedAt?: string | null;
+		/** What the plan will do, as one sentence. Without it the card only offers to dismiss. */
+		plan?: string | null;
+		/** Why the model wasn't sure. */
+		reason?: string | null;
+		/** A failed attempt, shown on the card. */
+		error?: string | null;
+		labels?: Partial<TriagePlanLabels>;
+		/** Run the plan. The buttons stay disabled until it settles. */
+		onApprove: () => void | Promise<void>;
+		/** Run a task the person typed instead of the plan. */
+		onPick: (task: string) => void | Promise<void>;
+		onDismiss: () => void | Promise<void>;
+		class?: string;
+	}
+
+	let {
+		sender,
+		subject,
+		snippet,
+		received,
+		receivedAt,
+		plan = null,
+		reason,
+		error,
+		labels,
+		onApprove,
+		onPick,
+		onDismiss,
+		class: className,
+	}: Props = $props();
+
+	const id = $props.id();
+	let words = $derived({ ...DEFAULT_TRIAGE_PLAN_LABELS, ...labels });
+	let picking = $state(false);
+	let busy = $state(false);
+	let task = $state("");
+
+	async function run(job: () => void | Promise<void>) {
+		busy = true;
+		try {
+			await job();
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<article class={cn("bg-card border-border rounded-xl border p-5", className)}>
+	<div class="flex items-start justify-between gap-3">
+		<h2 class="text-foreground min-w-0 text-sm font-semibold [overflow-wrap:anywhere]">
+			{sender}: “{subject}”
+		</h2>
+		{#if received}
+			<time class="text-muted-foreground shrink-0 text-xs" datetime={receivedAt ?? undefined}>
+				{received}
+			</time>
+		{/if}
+	</div>
+
+	{#if snippet}
+		<p class="text-muted-foreground mt-2 line-clamp-2 text-sm [overflow-wrap:anywhere]">
+			{snippet}
+		</p>
+	{/if}
+
+	{#if plan}
+		<p
+			class="bg-primary/10 text-primary mt-4 inline-block max-w-full rounded-md px-2.5 py-1 text-xs font-medium [overflow-wrap:anywhere]"
+		>
+			{plan}
+		</p>
+	{/if}
+	{#if reason}
+		<p class="text-muted-foreground mt-2 text-xs [overflow-wrap:anywhere]">{reason}</p>
+	{/if}
+
+	{#if error}
+		<p
+			class="bg-destructive/10 text-destructive mt-3 rounded-lg px-3 py-2 text-sm [overflow-wrap:anywhere]"
+			role="alert"
+		>
+			{error}
+		</p>
+	{/if}
+
+	{#if picking}
+		<form
+			class="mt-4 space-y-2"
+			onsubmit={(event) => {
+				event.preventDefault();
+				run(() => onPick(task.trim()));
+			}}
+		>
+			<label for="{id}-task" class="text-foreground block text-sm font-medium">
+				{words.taskLabel}
+			</label>
+			<Input id="{id}-task" bind:value={task} required autocomplete="off" />
+			<div class="flex flex-wrap gap-2">
+				<Button type="submit" disabled={busy}>{words.useTask}</Button>
+				<Button type="button" variant="outline" onclick={() => (picking = false)}>
+					{words.cancel}
+				</Button>
+			</div>
+		</form>
+	{:else}
+		<div class="mt-4 flex flex-wrap gap-2">
+			{#if plan}
+				<Button disabled={busy} onclick={() => run(onApprove)}>{words.approve}</Button>
+				<Button variant="outline" onclick={() => (picking = true)}>{words.pick}</Button>
+			{/if}
+			<Button variant="ghost" disabled={busy} onclick={() => run(onDismiss)}>
+				{words.dismiss}
+			</Button>
+		</div>
+	{/if}
+</article>

package/src/triage/triage-queue.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from "svelte";
+	import { cn } from "../lib/utils.js";
+
+	interface Props {
+		items: readonly T[];
+		/** The key a row is tracked by. */
+		key: (item: T) => string;
+		/**
+		 * `plans` stacks cards that need a decision. `tasks` is one divided list of what was
+		 * decided.
+		 */
+		kind?: "plans" | "tasks";
+		/** One row: a `TriagePlan` for `plans`, a `TriageTask` for `tasks`. */
+		row: Snippet<[T]>;
+		/** What the person reads when nothing is waiting. */
+		empty: string;
+		/** The glyph above the empty text. */
+		icon?: Snippet;
+		class?: string;
+	}
+
+	let { items, key, kind = "plans", row, empty, icon, class: className }: Props = $props();
+</script>
+
+{#if items.length === 0}
+	<div
+		class={cn(
+			"border-border flex flex-col items-center gap-3 rounded-xl border border-dashed px-6 py-14 text-center",
+			className,
+		)}
+	>
+		<span class="text-muted-foreground" aria-hidden="true">{@render icon?.()}</span>
+		<p class="text-muted-foreground text-sm">{empty}</p>
+	</div>
+{:else if kind === "plans"}
+	<div class={cn("space-y-4", className)}>
+		{#each items as item (key(item))}
+			{@render row(item)}
+		{/each}
+	</div>
+{:else}
+	<ul class={cn("bg-card border-border divide-border divide-y rounded-xl border", className)}>
+		{#each items as item (key(item))}
+			{@render row(item)}
+		{/each}
+	</ul>
+{/if}

package/src/triage/triage-task.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { Button } from "../shadcn/button/index.js";
+	import StatusBadge from "../status/status-badge.svelte";
+	import { cn } from "../lib/utils.js";
+	import {
+		DEFAULT_TRIAGE_TASK_LABELS,
+		type TriageOutcome,
+		type TriageTaskLabels,
+		type TriageTaskLink,
+	} from "./types.js";
+
+	interface Props {
+		sender: string;
+		subject: string;
+		/** What happened to the email. */
+		outcome: TriageOutcome;
+		/** The task it became. */
+		task?: TriageTaskLink | null;
+		/** When it settled, as text the host already formatted. */
+		when: string;
+		whenAt?: string | null;
+		/** Why it failed. */
+		detail?: string | null;
+		error?: string | null;
+		labels?: Partial<TriageTaskLabels>;
+		/** Takes the change back. The button shows only when this is passed. */
+		onUndo?: () => void | Promise<void>;
+		class?: string;
+	}
+
+	let {
+		sender,
+		subject,
+		outcome,
+		task,
+		when,
+		whenAt,
+		detail,
+		error,
+		labels,
+		onUndo,
+		class: className,
+	}: Props = $props();
+
+	let words = $derived({ ...DEFAULT_TRIAGE_TASK_LABELS, ...labels });
+	let busy = $state(false);
+
+	async function undo() {
+		busy = true;
+		try {
+			await onUndo?.();
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<li
+	class={cn(
+		"flex flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between",
+		className,
+	)}
+>
+	<div class="min-w-0 space-y-1">
+		<p class="text-foreground text-sm font-medium [overflow-wrap:anywhere]">
+			{sender}: {subject}
+		</p>
+		<div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+			<StatusBadge tone={outcome.tone} capitalize={false}>{outcome.label}</StatusBadge>
+			{#if task}
+				<a
+					href={task.url}
+					target="_blank"
+					rel="noreferrer"
+					class="text-primary min-w-0 text-xs [overflow-wrap:anywhere] hover:underline"
+				>
+					{task.name ?? words.openTask}
+				</a>
+			{/if}
+			<time class="text-muted-foreground text-xs" datetime={whenAt ?? undefined}>{when}</time>
+		</div>
+		{#if detail}
+			<p class="text-muted-foreground text-xs [overflow-wrap:anywhere]">{detail}</p>
+		{/if}
+		{#if error}
+			<p class="text-destructive text-xs [overflow-wrap:anywhere]" role="alert">{error}</p>
+		{/if}
+	</div>
+
+	{#if onUndo}
+		<Button variant="outline" class="shrink-0" disabled={busy} onclick={undo}>
+			{words.undo}
+		</Button>
+	{/if}
+</li>

package/src/triage/types.ts

@@ -0,0 +1,35 @@
+import type { Tone } from "../lib/tone.js";
+
+/** The words a plan card shows. Pass a partial to translate or reword. */
+export type TriagePlanLabels = {
+  approve: string;
+  pick: string;
+  dismiss: string;
+  /** The label over the field where the person types the task to use instead. */
+  taskLabel: string;
+  useTask: string;
+  cancel: string;
+};
+
+export const DEFAULT_TRIAGE_PLAN_LABELS: TriagePlanLabels = {
+  approve: "Approve",
+  pick: "Pick another task",
+  dismiss: "Dismiss",
+  taskLabel: "Task",
+  useTask: "Use this task",
+  cancel: "Cancel",
+};
+
+/** The words a task row shows. */
+export type TriageTaskLabels = { undo: string; openTask: string };
+
+export const DEFAULT_TRIAGE_TASK_LABELS: TriageTaskLabels = {
+  undo: "Undo",
+  openTask: "Open task",
+};
+
+/** What happened to a settled email: the chip's words and its tone. */
+export type TriageOutcome = { label: string; tone: Tone };
+
+/** The task the email ended up as, when there is one. */
+export type TriageTaskLink = { name?: string | null; url: string };

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)" },