@heyramzi/ui 2.8.0 → 2.10.0

package/dist/work/use-kanban-dnd.svelte.js

@@ -0,0 +1,128 @@
+import { boardOrderAt } from "./board-order.js";
+export function createKanbanDnd(config) {
+    let draggedId = $state(null);
+    let dragOver = $state(null);
+    function readDraggedId(e) {
+        const raw = e.dataTransfer?.getData("text/plain");
+        if (!raw) return null;
+        try {
+            const parsed = JSON.parse(raw);
+            return parsed.id ?? null;
+        } catch  {
+            return null;
+        }
+    }
+    function onDragStart(e, id) {
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = "move";
+            e.dataTransfer.setData("text/plain", JSON.stringify({
+                id
+            }));
+        }
+        requestAnimationFrame(()=>{
+            draggedId = id;
+        });
+    }
+    function onItemDragOver(e, columnId, overId, nextId) {
+        if (config.isDroppable && !config.isDroppable(columnId)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+        const rect = e.currentTarget.getBoundingClientRect();
+        const insertAfter = e.clientY > rect.top + rect.height / 2;
+        const targetOverId = insertAfter ? nextId : overId;
+        if (targetOverId === draggedId) return;
+        if (dragOver?.columnId === columnId && dragOver.overId === targetOverId) return;
+        dragOver = {
+            columnId,
+            overId: targetOverId
+        };
+    }
+    function onColumnDragOver(e, columnId) {
+        if (config.isDroppable && !config.isDroppable(columnId)) return;
+        e.preventDefault();
+        if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+        if (dragOver?.columnId !== columnId || dragOver.overId !== null) {
+            dragOver = {
+                columnId,
+                overId: null
+            };
+        }
+    }
+    function onDragLeave(e) {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            dragOver = null;
+        }
+    }
+    function clearDragOver() {
+        dragOver = null;
+    }
+    function resetDrag() {
+        draggedId = null;
+        dragOver = null;
+    }
+    function manualInsertIndex(column, overId, columnId) {
+        const overIndex = overId ? column.findIndex((item)=>config.getId(item) === overId) : -1;
+        if (overIndex !== -1) return overIndex;
+        return config.dropAtTop?.(columnId) ? 0 : column.length;
+    }
+    function onDrop(e, targetColumnId) {
+        e.preventDefault();
+        if (config.isDroppable && !config.isDroppable(targetColumnId)) return;
+        const overId = dragOver?.overId ?? null;
+        dragOver = null;
+        draggedId = null;
+        const id = readDraggedId(e);
+        const item = id ? config.items().find((entry)=>config.getId(entry) === id) : undefined;
+        if (!item) return;
+        const movedId = config.getId(item);
+        if (config.getSortKey() !== "manual") {
+            if (config.getColumn(item) !== targetColumnId) {
+                void config.onMove(movedId, {
+                    columnId: targetColumnId
+                });
+            }
+            return;
+        }
+        const column = config.getColumnItems(targetColumnId).filter((entry)=>config.getId(entry) !== movedId);
+        const index = manualInsertIndex(column, overId, targetColumnId);
+        const before = column[index - 1];
+        const after = column[index];
+        const orderOf = config.boardOrder;
+        void config.onMove(movedId, {
+            columnId: targetColumnId,
+            ...orderOf ? {
+                boardOrder: boardOrderAt(column, index, orderOf)
+            } : {},
+            beforeId: before === undefined ? null : config.getId(before),
+            afterId: after === undefined ? null : config.getId(after)
+        });
+    }
+    return {
+        get draggedId () {
+            return draggedId;
+        },
+        get dragOver () {
+            return dragOver;
+        },
+        set dragOver (value){
+            dragOver = value;
+        },
+        onDragStart,
+        onItemDragOver,
+        onColumnDragOver,
+        onDragLeave,
+        onDrop,
+        clearDragOver,
+        resetDrag,
+        isDragSource (id) {
+            return draggedId === id;
+        },
+        showIndicatorBefore (columnId, itemId) {
+            return dragOver?.columnId === columnId && dragOver.overId === itemId && draggedId !== null;
+        },
+        showIndicatorEnd (columnId) {
+            return dragOver?.columnId === columnId && dragOver.overId === null && draggedId !== null;
+        }
+    };
+}

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.10.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": {
@@ -14,7 +14,8 @@
     "scripts",
     "package.json",
     "README.md",
-    "COMPONENTS.md"
+    "COMPONENTS.md",
+    "dist"
   ],
   "type": "module",
   "svelte": "./src/index.ts",
@@ -26,22 +27,27 @@
     ".": {
       "svelte": "./src/index.ts",
       "types": "./src/index.ts",
+      "node": "./dist/index.js",
       "default": "./src/index.ts"
     },
+    "./package.json": "./package.json",
     "./tokens.css": "./src/tokens/index.css",
     "./brand": {
       "svelte": "./src/brand/index.ts",
       "types": "./src/brand/index.ts",
+      "node": "./dist/brand/index.js",
       "default": "./src/brand/index.ts"
     },
     "./lib/*.js": {
       "svelte": "./src/lib/*.ts",
       "types": "./src/lib/*.ts",
+      "node": "./dist/lib/*.js",
       "default": "./src/lib/*.ts"
     },
     "./lib/*": {
       "svelte": "./src/lib/*.ts",
       "types": "./src/lib/*.ts",
+      "node": "./dist/lib/*.js",
       "default": "./src/lib/*.ts"
     },
     "./border-beam": {
@@ -63,6 +69,7 @@
     "./effects/animated-beam": {
       "svelte": "./src/effects/animated-beam/index.ts",
       "types": "./src/effects/animated-beam/index.ts",
+      "node": "./dist/effects/animated-beam/index.js",
       "default": "./src/effects/animated-beam/index.ts"
     },
     "./effects/spotlight": {
@@ -80,16 +87,19 @@
     "./effects/image-reveal": {
       "svelte": "./src/effects/image-reveal/index.ts",
       "types": "./src/effects/image-reveal/index.ts",
+      "node": "./dist/effects/image-reveal/index.js",
       "default": "./src/effects/image-reveal/index.ts"
     },
     "./effects/shader-gradient": {
       "svelte": "./src/effects/shader-gradient/index.ts",
       "types": "./src/effects/shader-gradient/index.ts",
+      "node": "./dist/effects/shader-gradient/index.js",
       "default": "./src/effects/shader-gradient/index.ts"
     },
     "./effects/reveal": {
       "svelte": "./src/effects/reveal/index.ts",
       "types": "./src/effects/reveal/index.ts",
+      "node": "./dist/effects/reveal/index.js",
       "default": "./src/effects/reveal/index.ts"
     },
     "./effects/progressive-blur": {
@@ -107,16 +117,19 @@
     "./effects/magnetic": {
       "svelte": "./src/effects/magnetic/magnetic.ts",
       "types": "./src/effects/magnetic/magnetic.ts",
+      "node": "./dist/effects/magnetic/magnetic.js",
       "default": "./src/effects/magnetic/magnetic.ts"
     },
     "./icons/sf-symbols": {
       "svelte": "./src/icons/sf-symbols.ts",
       "types": "./src/icons/sf-symbols.ts",
+      "node": "./dist/icons/sf-symbols.js",
       "default": "./src/icons/sf-symbols.ts"
     },
     "./icons/trades": {
       "svelte": "./src/icons/trades.ts",
       "types": "./src/icons/trades.ts",
+      "node": "./dist/icons/trades.js",
       "default": "./src/icons/trades.ts"
     },
     "./icons/TradeIcon": {
@@ -132,6 +145,7 @@
       "default": "./src/animations/index.css"
     },
     "./animations/text-swap": {
+      "node": "./dist/animations/text-swap.js",
       "default": "./src/animations/text-swap.ts"
     },
     "./animations/*": {
@@ -140,16 +154,19 @@
     "./shadcn/hooks/*": {
       "svelte": "./src/shadcn/hooks/*.ts",
       "types": "./src/shadcn/hooks/*.ts",
+      "node": "./dist/shadcn/hooks/*.js",
       "default": "./src/shadcn/hooks/*.ts"
     },
     "./shadcn/*": {
       "svelte": "./src/shadcn/*/index.ts",
       "types": "./src/shadcn/*/index.ts",
+      "node": "./dist/shadcn/*/index.js",
       "default": "./src/shadcn/*/index.ts"
     },
     "./components/*": {
       "svelte": "./src/components/*/index.ts",
       "types": "./src/components/*/index.ts",
+      "node": "./dist/components/*/index.js",
       "default": "./src/components/*/index.ts"
     },
     "./shadcn/utilities.css": {
@@ -159,137 +176,135 @@
     "./ai": {
       "svelte": "./src/ai/index.ts",
       "types": "./src/ai/index.ts",
+      "node": "./dist/ai/index.js",
       "default": "./src/ai/index.ts"
     },
     "./ai/*": {
       "svelte": "./src/ai/*/index.ts",
       "types": "./src/ai/*/index.ts",
+      "node": "./dist/ai/*/index.js",
       "default": "./src/ai/*/index.ts"
     },
     "./agents": {
       "svelte": "./src/agents/index.ts",
       "types": "./src/agents/index.ts",
+      "node": "./dist/agents/index.js",
       "default": "./src/agents/index.ts"
     },
     "./agents/demo.svelte": "./src/agents/demo.svelte",
     "./status": {
       "svelte": "./src/status/index.ts",
       "types": "./src/status/index.ts",
+      "node": "./dist/status/index.js",
       "default": "./src/status/index.ts"
     },
     "./panel": {
       "svelte": "./src/panel/index.ts",
       "types": "./src/panel/index.ts",
+      "node": "./dist/panel/index.js",
       "default": "./src/panel/index.ts"
     },
     "./record": {
       "svelte": "./src/record/index.ts",
       "types": "./src/record/index.ts",
+      "node": "./dist/record/index.js",
       "default": "./src/record/index.ts"
     },
+    "./record/demo.svelte": "./src/record/record-demo.svelte",
     "./thread": {
       "svelte": "./src/thread/index.ts",
       "types": "./src/thread/index.ts",
+      "node": "./dist/thread/index.js",
       "default": "./src/thread/index.ts"
     },
     "./inbox": {
       "svelte": "./src/inbox/index.ts",
       "types": "./src/inbox/index.ts",
+      "node": "./dist/inbox/index.js",
       "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",
+      "node": "./dist/work/index.js",
+      "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",
+      "node": "./dist/work/inbox/index.js",
+      "default": "./src/work/inbox/index.ts"
+    },
+    "./work/presets/sales": {
+      "svelte": "./src/work/presets/sales.ts",
+      "types": "./src/work/presets/sales.ts",
+      "node": "./dist/work/presets/sales.js",
+      "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",
+      "node": "./dist/work/docs/index.js",
+      "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",
+      "node": "./dist/charts/index.js",
       "default": "./src/charts/index.ts"
     },
     "./charts/dashboard": {
       "svelte": "./src/charts/dashboard/index.ts",
       "types": "./src/charts/dashboard/index.ts",
+      "node": "./dist/charts/dashboard/index.js",
       "default": "./src/charts/dashboard/index.ts"
     },
     "./slides": {
       "types": "./src/slides/index.ts",
       "svelte": "./src/slides/index.ts",
+      "node": "./dist/slides/index.js",
       "default": "./src/slides/index.ts"
     },
     "./slides/model": {
       "types": "./src/slides/model.ts",
+      "node": "./dist/slides/model.js",
       "default": "./src/slides/model.ts"
     },
     "./slides/export": {
       "types": "./src/slides/export/index.ts",
+      "node": "./dist/slides/export/index.js",
       "default": "./src/slides/export/index.ts"
     },
     "./slides/demo": {
@@ -305,18 +320,22 @@
     "./editor": {
       "svelte": "./src/editor/index.ts",
       "types": "./src/editor/index.ts",
+      "node": "./dist/editor/index.js",
       "default": "./src/editor/index.ts"
     },
     "./editor/serializer": {
       "types": "./src/editor/serializer.ts",
+      "node": "./dist/editor/serializer.js",
       "default": "./src/editor/serializer.ts"
     },
     "./editor/markdown": {
       "types": "./src/editor/markdown.ts",
+      "node": "./dist/editor/markdown.js",
       "default": "./src/editor/markdown.ts"
     },
     "./editor/block-ops": {
       "types": "./src/editor/block-ops.ts",
+      "node": "./dist/editor/block-ops.js",
       "default": "./src/editor/block-ops.ts"
     },
     "./editor/inline-editor": {
@@ -330,11 +349,13 @@
     "./onboarding": {
       "svelte": "./src/onboarding/index.ts",
       "types": "./src/onboarding/index.ts",
+      "node": "./dist/onboarding/index.js",
       "default": "./src/onboarding/index.ts"
     },
     "./onboarding/stores": {
       "svelte": "./src/onboarding/stores.ts",
       "types": "./src/onboarding/stores.ts",
+      "node": "./dist/onboarding/stores.js",
       "default": "./src/onboarding/stores.ts"
     },
     "./onboarding/demo": {
@@ -345,6 +366,7 @@
     "./canvas": {
       "types": "./src/canvas/index.ts",
       "svelte": "./src/canvas/index.ts",
+      "node": "./dist/canvas/index.js",
       "default": "./src/canvas/index.ts"
     },
     "./canvas/*.svelte": {
@@ -356,6 +378,7 @@
     "./canvas/*.js": {
       "types": "./src/canvas/*.ts",
       "svelte": "./src/canvas/*.ts",
+      "node": "./dist/canvas/*.js",
       "default": "./src/canvas/*.ts"
     }
   },
@@ -365,7 +388,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",
@@ -432,6 +457,7 @@
     "sync:shadcn": "node scripts/sync-shadcn.mjs",
     "sync": "pnpm sync:transitions && pnpm sync:shadcn",
     "sync:check": "node scripts/sync-transitions.mjs --check && node scripts/sync-shadcn.mjs --check",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "build": "node ../../../vibe-kit/scripts/build-dist.mjs"
   }
 }

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={() => ""} />