@heyramzi/ui 2.8.0 → 2.9.0

package/COMPONENTS.md

@@ -139,6 +139,6 @@ Generic pieces built on the primitives, imported from `@heyramzi/ui/components/<
 
 ---
 
-Skipped on purpose: brand assets (logos, marks, brand renderer), kanban, list, gantt and status (they live in `@heyramzi/ui/tasks`), and charts
+Skipped on purpose: brand assets (logos, marks, brand renderer), kanban, list, gantt and status (they live in `@heyramzi/ui/work`), and charts
 (they live in `@heyramzi/ui/charts`). The bot avatars
 are in `src/agents`, imported from `@heyramzi/ui/agents`.

package/README.md

@@ -65,7 +65,7 @@ One package, six larger parts, each imported from its own subpath:
 
 | Subpath | What it is |
 | --- | --- |
-| `@heyramzi/ui/tasks` | Board, list, gantt, status badges, task detail, record, time tracker, inbox |
+| `@heyramzi/ui/work` | Board, list, gantt, status badges, task detail, record, time tracker, inbox |
 | `@heyramzi/ui/charts` | LayerChart charts, sparklines, stat cards, and `/charts/dashboard` |
 | `@heyramzi/ui/slides` | Decks on a fixed canvas, plus `/slides/model` and `/slides/export` |
 | `@heyramzi/ui/editor` | The Tiptap editor, its renderer, `/editor/markdown`, `/editor/block-ops` |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.8.0",
-  "description": "Svelte 5 UI for apps: primitives, effects and animations, plus tasks, charts, slides, an editor, onboarding and a canvas as subpaths.",
+  "version": "2.9.0",
+  "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",
   "repository": {
@@ -28,6 +28,7 @@
       "types": "./src/index.ts",
       "default": "./src/index.ts"
     },
+    "./package.json": "./package.json",
     "./tokens.css": "./src/tokens/index.css",
     "./brand": {
       "svelte": "./src/brand/index.ts",
@@ -187,6 +188,7 @@
       "types": "./src/record/index.ts",
       "default": "./src/record/index.ts"
     },
+    "./record/demo.svelte": "./src/record/record-demo.svelte",
     "./thread": {
       "svelte": "./src/thread/index.ts",
       "types": "./src/thread/index.ts",
@@ -197,78 +199,58 @@
       "types": "./src/inbox/index.ts",
       "default": "./src/inbox/index.ts"
     },
-    "./tasks": {
-      "svelte": "./src/tasks/index.ts",
-      "types": "./src/tasks/index.ts",
-      "default": "./src/tasks/index.ts"
-    },
-    "./tasks/kanban": {
-      "svelte": "./src/tasks/kanban-board.svelte",
-      "types": "./src/tasks/kanban-board.svelte",
-      "default": "./src/tasks/kanban-board.svelte"
-    },
-    "./tasks/list": {
-      "svelte": "./src/tasks/task-list.svelte",
-      "types": "./src/tasks/task-list.svelte",
-      "default": "./src/tasks/task-list.svelte"
-    },
-    "./tasks/gantt": {
-      "svelte": "./src/tasks/task-gantt.svelte",
-      "types": "./src/tasks/task-gantt.svelte",
-      "default": "./src/tasks/task-gantt.svelte"
-    },
-    "./tasks/status": {
-      "svelte": "./src/status/status-badge.svelte",
-      "types": "./src/status/status-badge.svelte",
-      "default": "./src/status/status-badge.svelte"
-    },
-    "./tasks/status-dot": {
-      "svelte": "./src/status/status-dot.svelte",
-      "types": "./src/status/status-dot.svelte",
-      "default": "./src/status/status-dot.svelte"
-    },
-    "./tasks/statuses": {
-      "svelte": "./src/status/define-statuses.ts",
-      "types": "./src/status/define-statuses.ts",
-      "default": "./src/status/define-statuses.ts"
-    },
-    "./tasks/time": {
-      "svelte": "./src/tasks/time/time-tracker.svelte",
-      "types": "./src/tasks/time/time-tracker.svelte",
-      "default": "./src/tasks/time/time-tracker.svelte"
-    },
-    "./tasks/inbox": {
-      "svelte": "./src/tasks/inbox/index.ts",
-      "types": "./src/tasks/inbox/index.ts",
-      "default": "./src/tasks/inbox/index.ts"
-    },
-    "./tasks/side-panel": {
-      "svelte": "./src/panel/side-panel.svelte",
-      "types": "./src/panel/side-panel.svelte",
-      "default": "./src/panel/side-panel.svelte"
-    },
-    "./tasks/presets/sales": {
-      "svelte": "./src/tasks/presets/sales.ts",
-      "types": "./src/tasks/presets/sales.ts",
-      "default": "./src/tasks/presets/sales.ts"
-    },
-    "./tasks/detail": {
-      "svelte": "./src/tasks/detail/task-detail.svelte",
-      "types": "./src/tasks/detail/task-detail.svelte",
-      "default": "./src/tasks/detail/task-detail.svelte"
-    },
-    "./tasks/detail-demo.svelte": "./src/tasks/detail/detail-demo.svelte",
-    "./tasks/record": {
-      "svelte": "./src/record/index.ts",
-      "types": "./src/record/index.ts",
-      "default": "./src/record/index.ts"
-    },
-    "./tasks/record-demo.svelte": "./src/record/record-demo.svelte",
-    "./tasks/demo": {
-      "svelte": "./src/tasks/demo.svelte",
-      "default": "./src/tasks/demo.svelte"
-    },
-    "./tasks/demo.svelte": "./src/tasks/demo.svelte",
+    "./work": {
+      "svelte": "./src/work/index.ts",
+      "types": "./src/work/index.ts",
+      "default": "./src/work/index.ts"
+    },
+    "./work/kanban": {
+      "svelte": "./src/work/kanban-board.svelte",
+      "types": "./src/work/kanban-board.svelte",
+      "default": "./src/work/kanban-board.svelte"
+    },
+    "./work/list": {
+      "svelte": "./src/work/task-list.svelte",
+      "types": "./src/work/task-list.svelte",
+      "default": "./src/work/task-list.svelte"
+    },
+    "./work/gantt": {
+      "svelte": "./src/work/task-gantt.svelte",
+      "types": "./src/work/task-gantt.svelte",
+      "default": "./src/work/task-gantt.svelte"
+    },
+    "./work/time": {
+      "svelte": "./src/work/time/time-tracker.svelte",
+      "types": "./src/work/time/time-tracker.svelte",
+      "default": "./src/work/time/time-tracker.svelte"
+    },
+    "./work/inbox": {
+      "svelte": "./src/work/inbox/index.ts",
+      "types": "./src/work/inbox/index.ts",
+      "default": "./src/work/inbox/index.ts"
+    },
+    "./work/presets/sales": {
+      "svelte": "./src/work/presets/sales.ts",
+      "types": "./src/work/presets/sales.ts",
+      "default": "./src/work/presets/sales.ts"
+    },
+    "./work/detail": {
+      "svelte": "./src/work/detail/task-detail.svelte",
+      "types": "./src/work/detail/task-detail.svelte",
+      "default": "./src/work/detail/task-detail.svelte"
+    },
+    "./work/docs": {
+      "svelte": "./src/work/docs/index.ts",
+      "types": "./src/work/docs/index.ts",
+      "default": "./src/work/docs/index.ts"
+    },
+    "./work/docs-demo.svelte": "./src/work/docs/docs-demo.svelte",
+    "./work/detail-demo.svelte": "./src/work/detail/detail-demo.svelte",
+    "./work/demo": {
+      "svelte": "./src/work/demo.svelte",
+      "default": "./src/work/demo.svelte"
+    },
+    "./work/demo.svelte": "./src/work/demo.svelte",
     "./charts": {
       "svelte": "./src/charts/index.ts",
       "types": "./src/charts/index.ts",
@@ -365,7 +347,9 @@
     "@tiptap/core": "^3.32.0",
     "@tiptap/extension-drag-handle": "^3.32.0",
     "@tiptap/extension-image": "^3.32.0",
+    "@tiptap/extension-list": "^3.32.0",
     "@tiptap/extension-placeholder": "^3.32.0",
+    "@tiptap/extension-table": "^3.32.0",
     "@tiptap/pm": "^3.32.0",
     "@tiptap/starter-kit": "^3.32.0",
     "@zag-js/svelte": "^1.46.0",

package/src/agents/vendor/draw.ts

@@ -102,9 +102,9 @@ const HALF_DEPTH = 15;
 const CAP = 0.9;
 const profile = (z: number, cap: number) => cap + (1 - cap) * Math.sqrt(Math.max(0, 1 - z * z));
 
-/* Big, plain dark eyes: they carry the face at 24px. */
+/* Big, plain eyes, a little taller than wide: a round dot reads as a button at 24px. */
 const EYE_GAP = 25;
-const EYE_RX = 6.3;
+const EYE_RX = 5.6;
 const EYE_Y = { eyes: 1, mouth: -3.5 } as const;
 
 interface Palette {
@@ -781,9 +781,9 @@ function drawFace(ctx: CanvasRenderingContext2D, pose: Pose, cfg: DrawConfig): [
       kSleep = ws;
     const x0 = kOpen * 0.01 + kShut * 5.4 + kLaugh * 6.2 + kSleep * 6;
     const y0 =
-      kOpen * 1.1 * tall + kShut * 0.6 + kLaugh * (2.2 - lift * 1.5) + kSleep * (-1.4 + sag);
+      kOpen * 2 * tall + kShut * 0.6 + kLaugh * (2.2 - lift * 1.5) + kSleep * (-1.4 + sag);
     const cy =
-      kOpen * -3.3 * tall + kShut * 0.6 + kLaugh * (-11.4 - 4 * lift) + kSleep * (5.4 + 2 * sag);
+      kOpen * -6 * tall + kShut * 0.6 + kLaugh * (-11.4 - 4 * lift) + kSleep * (5.4 + 2 * sag);
     const w = kOpen * EYE_RX * 2 * wide + kShut * 2.8 + kLaugh * 4.4 + kSleep * 4;
     /* the eyes drift toward the look when open, less so when shut */
     const dx = lx * (kOpen + 0.5 * (kShut + kLaugh)),

package/src/canvas/headless/canvas-cleanup.test.ts

@@ -3,7 +3,7 @@ import { sortParentsFirst, stripCallbacks } from "./canvas-cleanup.js";
 import { makeNode } from "../test-utils.js";
 import type { CanvasNode } from "../types.js";
 
-/** Read serialized data as a loose record: these tests exercise legacy fields
+/** Read serialized data as a loose record: these tests exercise old fields
  * that are no longer part of any per-type shape but must survive the denylist. */
 function loose(node: { data: unknown }): Record<string, unknown> {
   return node.data as Record<string, unknown>;

package/src/canvas/ops/ops.ts

@@ -36,7 +36,7 @@ export const patchNodeOp = z.object({
   kind: z.literal("patchNode"),
   nodeId: z.string().min(1),
   data: z.record(z.string(), z.unknown()).optional(),
-  // Merged into the node's style object. A legacy CSS-string style is replaced
+  // Merged into the node's style object. A CSS-string style from an old save is replaced
   // wholesale (there is nothing sane to merge into).
   style: z.record(z.string(), z.unknown()).optional(),
   width: z.number().optional(),

package/src/charts/area-chart.svelte

@@ -114,6 +114,16 @@
 	const fadeMask = $derived(fade > 0 ? `url(#${uid}-fade)` : undefined);
 	const fallback = $derived(data.length > 0 ? data[data.length - 1] : null);
 	const display = $derived(active ?? fallback);
+
+	// A long tick label ("1,000,000") falls back to "1M" so the left gutter holds it.
+	const compact = new Intl.NumberFormat(undefined, {
+		notation: "compact",
+		maximumFractionDigits: 1,
+	});
+	function valueTick(v: number): string {
+		const full = formatValue(v);
+		return full.length > 6 && Number.isFinite(v) ? compact.format(v) : full;
+	}
 	const figureRows = $derived(
 		display
 			? series.map((s) => ({ value: Number(display[s.key]), label: s.label, color: s.color }))
@@ -158,7 +168,7 @@
 				motion={DOMAIN_MOTION}
 			>
 				<Svg>
-					<Axis placement="left" format={(v) => formatValue(Number(v))} ticks={4} />
+					<Axis placement="left" format={(v) => valueTick(Number(v))} ticks={4} />
 					<Axis placement="bottom" format={(v) => formatX(v)} ticks={xTicks} />
 					<g class="hr-area-grid">
 						<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />

package/src/charts/bar-chart.svelte

@@ -75,7 +75,11 @@
 	// =========================
 	let active = $state<TData | null>(null);
 
-	// ========================= FUNCTIONS ========================= WHY: called from the tooltip header's value expression so it re-runs on every active-band change; an unread {@const} side effect only evaluates once.
+	// =========================
+	// FUNCTIONS
+	// =========================
+
+	// WHY: the tooltip header calls this so it re-runs per active band; an unread {@const} runs once.
 
 	// The microtask defers the state write out of template evaluation.
 	function trackActive(d: TData): string {
@@ -128,6 +132,17 @@
 		return [...groups].map(([c, rows]) => ({ key: c, color: c, rows, at: undefined }));
 	});
 	const activeColor = $derived(active && colorOf ? colorOf(active) : color);
+
+	// WHY: "1,000,000" overflows the 48px gutter and the gap between ticks, so a long label
+	// falls back to "1M"; the tooltip keeps the full value.
+	const compact = new Intl.NumberFormat(undefined, {
+		notation: "compact",
+		maximumFractionDigits: 1,
+	});
+	function valueTick(v: number): string {
+		const full = formatValue(v);
+		return full.length > 6 && Number.isFinite(v) ? compact.format(v) : full;
+	}
 </script>
 
 <!-- =========================== -->
@@ -172,12 +187,12 @@
 				<Svg>
 					{#if horizontal}
 						<Axis placement="left" format={(v) => (formatTick ?? formatX)(v)} />
-						<Axis placement="bottom" format={(v) => formatValue(Number(v))} ticks={4} />
+						<Axis placement="bottom" format={(v) => valueTick(Number(v))} ticks={4} />
 						<g class="hr-bar-grid">
 							<Axis placement="bottom" grid rule={false} ticks={4} format={() => ""} />
 						</g>
 					{:else}
-						<Axis placement="left" format={(v) => formatValue(Number(v))} ticks={4} />
+						<Axis placement="left" format={(v) => valueTick(Number(v))} ticks={4} />
 						<Axis placement="bottom" format={(v) => (formatTick ?? formatX)(v)} />
 						<g class="hr-bar-grid">
 							<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />

package/src/charts/line-chart.svelte

@@ -117,6 +117,16 @@
 	const fadeMask = $derived(fade > 0 ? `url(#${uid}-fade)` : undefined);
 	const fallback = $derived(data.length > 0 ? data[data.length - 1] : null);
 	const display = $derived(active ?? fallback);
+
+	// A long tick label ("1,000,000") falls back to "1M" so the left gutter holds it.
+	const compact = new Intl.NumberFormat(undefined, {
+		notation: "compact",
+		maximumFractionDigits: 1,
+	});
+	function valueTick(v: number): string {
+		const full = formatValue(v);
+		return full.length > 6 && Number.isFinite(v) ? compact.format(v) : full;
+	}
 	// WHY: a dashed tail is two splines sharing the boundary point so the solid
 	// and dashed segments meet without a gap.
 	const hasTail = $derived(
@@ -189,7 +199,7 @@
 				motion={DOMAIN_MOTION}
 			>
 				<Svg>
-					<Axis placement="left" format={(v) => formatValue(Number(v))} ticks={4} />
+					<Axis placement="left" format={(v) => valueTick(Number(v))} ticks={4} />
 					<Axis placement="bottom" format={(v) => formatX(v)} />
 					<g class="hr-line-grid">
 						<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />

package/src/components/data-table/data-table.ts

@@ -69,9 +69,8 @@ export function totalPages(total: number, pageSize: number): number {
 
 export function formatCount(visible: number, total: number, label: string): string {
   const singular = label.endsWith("s") ? label.slice(0, -1) : label;
-  if (visible === total) {
-    const displayLabel = visible === 1 ? singular : label;
-    return `${total} ${displayLabel}`;
-  }
-  return `${visible} of ${total} ${label}`;
+  // The noun agrees with the total: "0 of 1 item", not "0 of 1 items".
+  const noun = total === 1 ? singular : label;
+  if (visible === total) return `${total.toLocaleString()} ${noun}`;
+  return `${visible.toLocaleString()} of ${total.toLocaleString()} ${noun}`;
 }

package/src/components/data-table/pagination.svelte

@@ -26,7 +26,9 @@
 
 {#if pages > 1}
 	<div class="flex items-center justify-between border-t px-4 py-3 text-sm text-muted-foreground">
-		<span>{start}-{end} of {total}</span>
+		<span class="tabular-nums"
+			>{start.toLocaleString()}-{end.toLocaleString()} of {total.toLocaleString()}</span
+		>
 		<div class="flex items-center gap-1">
 			{#if buildHref}
 				{#if hasPrev}
@@ -38,7 +40,7 @@
 						<CaretLeft class="size-4" />
 					</Button>
 				{/if}
-				<span class="mx-2 tabular-nums">{page} / {pages}</span>
+				<span class="mx-2 tabular-nums">{page.toLocaleString()} / {pages.toLocaleString()}</span>
 				{#if hasNext}
 					<Button variant="outline" size="sm" icon href={buildHref(page + 1)}>
 						<CaretRight class="size-4" />
@@ -58,7 +60,7 @@
 				>
 					<CaretLeft class="size-4" />
 				</Button>
-				<span class="mx-2 tabular-nums">{page} / {pages}</span>
+				<span class="mx-2 tabular-nums">{page.toLocaleString()} / {pages.toLocaleString()}</span>
 				<Button
 					variant="outline"
 					size="sm"

package/src/components/docs/on-this-page.svelte

@@ -17,10 +17,10 @@
 		label: string;
 		onselect: (id: string) => void;
 		/**
-		 * `rail` is the column beside the document. `bar` is the strip that takes
-		 * its place on a narrow pane: it names where you are and opens the list.
+		 * `rail` sits beside the document, `bar` replaces it on a narrow pane, and `ticks` marks
+		 * each heading in the gutter with a card of headings on hover or focus.
 		 */
-		variant?: "rail" | "bar";
+		variant?: "rail" | "bar" | "ticks";
 	}
 
 	// =========================
@@ -28,6 +28,10 @@
 	// =========================
 	let { items, active, label, onselect, variant = "rail" }: Props = $props();
 
+	let hovering = $state(false);
+	let focusing = $state(false);
+	let showCard = $derived(hovering || focusing);
+
 	// =========================
 	// STATE
 	// =========================
@@ -101,7 +105,63 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-{#if variant === "rail"}
+{#if variant === "ticks"}
+	<nav
+		aria-label={label}
+		class="otp-ticks relative"
+		onpointerenter={() => (hovering = true)}
+		onpointerleave={() => (hovering = false)}
+		onfocusin={() => (focusing = true)}
+		onfocusout={(event) => {
+			if (!event.currentTarget.contains(event.relatedTarget as Node | null)) focusing = false;
+		}}
+	>
+		<ul class="flex flex-col py-2">
+			{#each items as item (item.id)}
+				{@const current = item.id === active}
+				<li>
+					<button
+						type="button"
+						aria-label={item.label}
+						aria-current={current ? "location" : undefined}
+						onclick={() => pick(item.id)}
+						class="otp-tick group/tick flex h-3.5 w-7 items-center pl-2 any-pointer-coarse:h-6"
+					>
+						<span
+							class="block h-0.5 rounded-full transition-[width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] {current
+								? 'w-3 bg-foreground'
+								: 'w-2 bg-foreground/25 group-hover/tick:bg-foreground/60'}"
+						></span>
+					</button>
+				</li>
+			{/each}
+		</ul>
+		<!-- The card starts inside the nav's own box, so moving from a tick onto it never leaves
+		     the hover. Rows are for the pointer; the ticks are the keyboard path. -->
+		<div
+			inert={!showCard}
+			data-open={showCard}
+			class="otp-card thin-scrollbar absolute left-full top-1/2 z-30 max-h-[min(70svh,28rem)] w-max min-w-44 max-w-64 overflow-y-auto rounded-xl bg-popover p-1.5 shadow-raised ring-1 ring-foreground/10"
+		>
+			{#each items as item (item.id)}
+				{@const current = item.id === active}
+				<button
+					type="button"
+					tabindex="-1"
+					onclick={() => pick(item.id)}
+					class="block w-full truncate rounded-md py-1 pr-3 text-left text-[13px] leading-5 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] hover:bg-foreground/6 {item.level ===
+					3
+						? 'pl-5'
+						: 'pl-2'} {current
+						? 'font-medium text-foreground'
+						: 'text-muted-foreground hover:text-foreground'}"
+				>
+					{item.label}
+				</button>
+			{/each}
+		</div>
+	</nav>
+{:else if variant === "rail"}
 	<nav aria-label={label} class="flex max-h-[calc(100svh-8rem)] flex-col gap-3">
 		<!-- Set like the map's own headings on the left, so the two rails read as one. -->
 		<p class="font-heading text-xs font-semibold uppercase tracking-wider text-muted-foreground">
@@ -221,9 +281,26 @@
 		);
 	}
 
+	/* Opacity and a short slide, no scale: the card is anchored to a line of ticks. */
+	.otp-card {
+		opacity: 0;
+		translate: -4px -50%;
+		pointer-events: none;
+		transition:
+			opacity var(--duration-fast) var(--ease-smooth-out),
+			translate var(--duration-fast) var(--ease-smooth-out);
+	}
+
+	.otp-card[data-open="true"] {
+		opacity: 1;
+		translate: 0 -50%;
+		pointer-events: auto;
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		.otp-marker.is-ready,
-		.otp-progress {
+		.otp-progress,
+		.otp-card {
 			transition: none;
 		}
 	}

package/src/components/docs/scroll-spy.svelte.ts

@@ -3,7 +3,12 @@
  * side rail and the compact bar, so the two can never disagree.
  */
 
-export type DocHeading = { id: string; label: string };
+export type DocHeading = {
+  id: string;
+  label: string;
+  /** 2 or 3. A list with no levels is flat; the edge ticks indent a 3 under its 2. */
+  level?: 2 | 3;
+};
 
 /**
  * A heading's offset in scroller coordinates. A framed document must supply its own, since

package/src/components/list-page/detail-header.svelte

@@ -77,14 +77,18 @@
 			     flex sibling it wrapped to its own row on every two-line title. -->
 			<!-- No text-balance: it evens the lines out, so a two-line title stopped
 			     short of the corner instead of running the full width. -->
-			<h2 class="min-w-0 font-heading text-lg font-semibold leading-snug tracking-tight">
+			<h2
+				class="min-w-0 font-heading text-lg [overflow-wrap:anywhere] font-semibold leading-snug tracking-tight"
+			>
 				{title}{#if badge}<span class="ms-2 inline-flex align-middle">{@render badge()}</span>{/if}
 			</h2>
 			{#if facts.length > 0}
 				<!-- Each dot hangs off the fact it leads, so a wrapped line's dot stays
 				     in the gutter. A standalone flex-item dot dangled on the line above. -->
 				<div class="mt-1 overflow-hidden">
-					<p class="-ms-3 flex flex-wrap items-center text-sm text-muted-foreground">
+					<p
+						class="-ms-3 flex flex-wrap items-center text-sm text-muted-foreground [overflow-wrap:anywhere]"
+					>
 						{#each facts as fact, i (i)}
 							<span
 								class="relative ps-3 before:absolute before:start-1 before:opacity-40 before:content-['·']"
@@ -95,7 +99,7 @@
 				</div>
 			{/if}
 			{#if note}
-				<p class="mt-1 text-sm text-muted-foreground">{note}</p>
+				<p class="mt-1 text-sm text-muted-foreground [overflow-wrap:anywhere]">{note}</p>
 			{/if}
 			<!-- With a picture or a corner, actions sit in this column. Pinned right
 			     they wrapped under the picture and read like its caption. -->

package/src/components/list-page/empty-state.svelte

@@ -45,7 +45,9 @@
 				<Icon weight={iconWeight} class="size-8" />
 			</Empty.Media>
 		{/if}
-		<Empty.Title class="font-heading text-lg font-semibold">{title}</Empty.Title>
+		<Empty.Title class="font-heading text-lg font-semibold [overflow-wrap:anywhere]"
+			>{title}</Empty.Title
+		>
 		{#if description}
 			<Empty.Description>{description}</Empty.Description>
 		{/if}

package/src/components/list-page/filter-popover.svelte

@@ -71,9 +71,9 @@
 		{/if}
 		{#if hasCount}
 			<span
-				class="ml-0.5 inline-flex size-4 items-center justify-center rounded-full bg-brand/15 text-[10px] font-semibold text-brand dark:text-brand-light"
+				class="ml-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-brand/15 px-1 text-[10px] tabular-nums font-semibold text-brand dark:text-brand-light"
 			>
-				{count}
+				{count.toLocaleString()}
 			</span>
 		{/if}
 	</Popover.Trigger>

package/src/components/list-page/rail-row.svelte

@@ -122,6 +122,7 @@
 					titleLines === 2 ? "line-clamp-2" : "truncate",
 					selected && "text-accent-foreground",
 				)}
+				{title}
 			>
 				{title}
 			</span>
@@ -130,7 +131,7 @@
 			{#if preview || trailing}
 				<span class="flex min-w-0 items-center text-xs text-muted-foreground">
 					{#if preview}
-						<span class="truncate">{preview}</span>
+						<span class="truncate" title={preview}>{preview}</span>
 					{/if}
 					{#if trailing}
 						<span class="ml-auto flex shrink-0 items-center gap-1.5 pl-2">{@render trailing()}</span
@@ -146,7 +147,9 @@
 						{/if}
 						{@const flexible =
 							facts.length > 1 && i === (metaTruncate === "last" ? facts.length - 1 : 0)}
-						<span class={flexible ? "truncate" : "shrink-0"}>{fact}</span>
+						<span class={flexible ? "truncate" : "shrink-0"} title={flexible ? fact : undefined}
+							>{fact}</span
+						>
 					{/each}
 					{#if metaTrail}
 						<span class="ml-1.5 flex shrink-0 items-center gap-1">{@render metaTrail()}</span>

package/src/components/mark/mark.svelte

@@ -3,6 +3,7 @@
 	// IMPORTS
 	// =========================
 	import { cn } from "../../lib/utils.js";
+	import { initial } from "../../lib/initials.js";
 
 	// =========================
 	// TYPES
@@ -61,6 +62,6 @@
 			className,
 		)}
 	>
-		{label.charAt(0)}
+		{initial(label, "")}
 	</span>
 {/if}

package/src/components/section-card/section-card.svelte

@@ -32,7 +32,9 @@
 <!-- =========================== -->
 <Card.Root class={cn("gap-0 py-0", className)}>
 	<header class="flex min-h-14 items-center justify-between gap-3 border-b px-4 py-3 sm:px-6">
-		<Card.Title as="h3" class="text-base font-medium">{title}</Card.Title>
+		<Card.Title as="h3" class="min-w-0 text-base font-medium [overflow-wrap:anywhere]"
+			>{title}</Card.Title
+		>
 		{#if actions}
 			<div class="flex shrink-0 items-center gap-2">{@render actions()}</div>
 		{/if}

package/src/components/section-header/section-header.svelte

@@ -34,18 +34,18 @@
 <header class="flex items-end justify-between gap-3">
 	<div class="min-w-0 space-y-1">
 		<svelte:element this={`h${level}`} class="flex items-center gap-2">
-			<SectionLabel>{title}</SectionLabel>
+			<SectionLabel class="min-w-0 [overflow-wrap:anywhere]">{title}</SectionLabel>
 			{#if count !== undefined}
 				<span
-					class="rounded-md bg-muted px-1.5 py-0.5 text-xs leading-none font-medium tabular-nums text-muted-foreground"
-					aria-label={`${count} ${countLabel}`}
+					class="shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-xs leading-none font-medium tabular-nums text-muted-foreground"
+					aria-label={`${count.toLocaleString()} ${countLabel}`}
 				>
-					{count}
+					{count.toLocaleString()}
 				</span>
 			{/if}
 		</svelte:element>
 		{#if description}
-			<p class="text-sm text-muted-foreground">{description}</p>
+			<p class="text-sm text-muted-foreground [overflow-wrap:anywhere]">{description}</p>
 		{/if}
 	</div>
 	{#if actions}