@heyramzi/ui 2.7.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.7.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/ai/generation-progress/GenerationProgress.svelte

@@ -124,7 +124,7 @@
 		--shimmer-highlight: color-mix(in oklab, black 45%, var(--color-brand));
 		--shimmer-band: 400%;
 		--shimmer-ease: linear;
-		--digit-dur: var(--duration-very-slow);
+		--digit-dur: var(--duration-slow);
 		--digit-distance: var(--distance-base);
 		--digit-blur: var(--blur-small);
 		--digit-ease: var(--ease-smooth-out);
@@ -219,7 +219,7 @@
 		transform-origin: left;
 		border-radius: 9999px;
 		background: var(--color-brand);
-		transition: transform var(--duration-slow, 400ms) var(--ease-smooth-out, ease);
+		transition: transform var(--duration-slow, 300ms) var(--ease-smooth-out, ease);
 	}
 
 	/* A job with no step count still has to look like it is running, so the fill

package/src/animations/README.md

@@ -76,7 +76,7 @@ The two merged into components are the exception — `switch.svelte` and `checkb
 Every transition reads semantic CSS variables (`--modal-open-dur`, `--tilt-follow`, `--think-swap`). Where the shared motion scale in `@heyramzi/ui/design` has a token at that exact value, the variable defaults to it and keeps the literal as the fallback:
 
 ```css
---toast-open: var(--duration-medium, 350ms);
+--toast-open: var(--duration-medium, 280ms);
 ```
 
 So the scale is single-sourced when the design layer is imported, and the transition still runs at the shipped value when it is not. A value the scale has no token for — a 1000ms tilt return, a 90ms reel stagger — stays a literal rather than being rounded onto the nearest rung. Override any of them at `:root` or per-scope to retune without forking the CSS.

package/src/animations/card-tilt.css

@@ -5,7 +5,7 @@
   --tilt-perspective: 1000px;
   --tilt-return: 1000ms;
   --tilt-return-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --tilt-follow: var(--duration-slow, 400ms);
+  --tilt-follow: var(--duration-slow, 300ms);
   --tilt-follow-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
   --tilt-glare-opacity: 0.32;
   --tilt-glare-fade: 300ms;

package/src/animations/digit-pop-in.css

@@ -7,7 +7,7 @@
 */
 
 :root {
-  --digit-dur: var(--duration-very-slow, 500ms);
+  --digit-dur: var(--duration-slow, 300ms);
   --digit-distance: var(--distance-base, 8px);
   --digit-stagger: 70ms;
   --digit-blur: var(--blur-small, 2px);

package/src/animations/input-clear-dissolve.css

@@ -9,8 +9,8 @@
 
 :root {
   --clear-dur: 1000ms;
-  --clear-out-dur: var(--duration-slow, 400ms);
-  --clear-in-dur: var(--duration-slow, 400ms);
+  --clear-out-dur: var(--duration-slow, 300ms);
+  --clear-in-dur: var(--duration-slow, 300ms);
   --clear-out-fly: 12px;
   --clear-in-fly: 12px;
   --clear-out-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));

package/src/animations/learn-more-hover.css

@@ -3,8 +3,8 @@
 :root {
   --learn-shift: 2px;
   --learn-spread: 8deg;
-  --learn-in: var(--duration-medium, 350ms);
-  --learn-out: var(--duration-medium, 350ms);
+  --learn-in: var(--duration-medium, 280ms);
+  --learn-out: var(--duration-medium, 280ms);
   --learn-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
 }
 

package/src/animations/like-button.css

@@ -3,7 +3,7 @@
 :root {
   --like-color: #f40051;
   --like-fill: var(--duration-quick, 150ms);
-  --like-pop: var(--duration-medium, 350ms);
+  --like-pop: var(--duration-medium, 280ms);
   --like-pop-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
   --like-particle-dur: 600ms;
   --like-particle-dist: 20px;

package/src/animations/plus-menu-morph.css

@@ -1,7 +1,7 @@
 /* transitions.dev `dropdown-menu-morph`: the trigger itself becomes the menu. Set the open
    size on the consumer side, since these sizes are the upstream demo's. */
 :root {
-  --morph-open-dur: var(--duration-medium, 350ms);
+  --morph-open-dur: var(--duration-medium, 280ms);
   --morph-close-dur: var(--duration-fast, 250ms);
   --morph-ease: var(--ease-smooth-out);
   --morph-close-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));

package/src/animations/success-check.css

@@ -7,14 +7,14 @@
 */
 
 :root {
-  --check-opacity-dur: var(--duration-very-slow, 500ms);
-  --check-rotate-dur: var(--duration-very-slow, 500ms);
+  --check-opacity-dur: var(--duration-slow, 300ms);
+  --check-rotate-dur: var(--duration-slow, 300ms);
   --check-rotate-from: 80deg;
-  --check-bob-dur: var(--duration-very-slow, 500ms);
+  --check-bob-dur: var(--duration-slow, 300ms);
   --check-y-amount: 40px;
-  --check-blur-dur: var(--duration-very-slow, 500ms);
+  --check-blur-dur: var(--duration-slow, 300ms);
   --check-blur-from: 10px;
-  --check-path-dur: var(--duration-very-slow, 500ms);
+  --check-path-dur: var(--duration-slow, 300ms);
   --check-path-delay: 80ms;
   --check-ease-out: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
   --check-ease-opacity: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));

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.css

@@ -55,7 +55,8 @@
   transform-origin: bottom;
   animation: hr-bar-grow var(--chart-motion-reveal, 1100ms)
     var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
-  transition: opacity var(--chart-motion-fast, 150ms) ease-in-out;
+  transition: opacity var(--chart-motion-fast, 150ms)
+    var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1));
 }
 .hr-bar-chart .hr-bar-bars:nth-of-type(2) {
   animation-delay: var(--chart-stagger, 30ms);

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/charts.css

@@ -174,7 +174,8 @@
 /* bklit-ui's hover: the series drops to 0.3 and hover-focus.svelte redraws the
    stretch around the point at full strength. */
 .hr-hover-dim {
-  transition: opacity 400ms ease-in-out;
+  transition: opacity var(--duration-slow, 300ms)
+    var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1));
 }
 .hr-hover-dim.hr-hover-dimmed {
   opacity: 0.3;

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;
 		}
 	}