@heyramzi/ui 2.22.1 → 2.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.22.1",
+  "version": "2.24.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",
@@ -126,16 +126,6 @@
       "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": {
-      "svelte": "./src/icons/TradeIcon.svelte",
-      "default": "./src/icons/TradeIcon.svelte"
-    },
     "./design": {
       "style": "./src/design/index.css",
       "default": "./src/design/index.css"
@@ -225,6 +215,12 @@
       "node": "./dist/inbox/index.js",
       "default": "./src/inbox/index.ts"
     },
+    "./triage": {
+      "svelte": "./src/triage/index.ts",
+      "types": "./src/triage/index.ts",
+      "node": "./dist/triage/index.js",
+      "default": "./src/triage/index.ts"
+    },
     "./work": {
       "svelte": "./src/work/index.ts",
       "types": "./src/work/index.ts",
@@ -257,12 +253,6 @@
       "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",
@@ -430,7 +420,6 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.4",
-    "@tabler/icons-svelte-runes": "^3.46.0",
     "@xyflow/svelte": "^1.7.0",
     "bits-ui": "^2.19.5",
     "mode-watcher": "^1.1.0",
@@ -447,9 +436,6 @@
     "@internationalized/date": {
       "optional": true
     },
-    "@tabler/icons-svelte-runes": {
-      "optional": true
-    },
     "@xyflow/svelte": {
       "optional": true
     }

package/scripts/sync-shadcn.mjs

@@ -141,24 +141,22 @@ const publicImports = (demo) =>
     .join("\n");
 
 /* The section's list, generated: a primitive reaches the page by being synced,
- * never by being typed into an array. */
+ * never by being typed into an array. Names and words only: the site's navigation reads this
+ * list on every page, and each demo loads from `./<name>.svelte` on its own page. */
 async function writeManifest(demos) {
   const rows = demos.map(
     (d) =>
-      `  { name: ${JSON.stringify(d.name)}, title: ${JSON.stringify(d.title)}, note: ${JSON.stringify(d.note)}, path: ${JSON.stringify(d.imports)}, Comp: ${pascal(d.name)}Demo },`,
+      `  { name: ${JSON.stringify(d.name)}, title: ${JSON.stringify(d.title)}, note: ${JSON.stringify(d.note)}, path: ${JSON.stringify(d.imports)} },`,
   );
   const text = [
     "/* Generated by scripts/sync-shadcn.mjs. Do not edit: the demos are upstream's",
-    " * own, and the sync rewrites this list. */",
-    'import type { Component } from "svelte";',
-    ...demos.map((d) => `import ${pascal(d.name)}Demo from "./${d.name}.svelte";`),
+    " * own, and the sync rewrites this list. Each demo loads from `./<name>.svelte`. */",
     "",
     "export type ShadcnDemo = {",
     "  name: string;",
     "  title: string;",
     "  note: string;",
     "  path: string;",
-    "  Comp: Component;",
     "};",
     "",
     "export const SHADCN_DEMOS: ShadcnDemo[] = [",

package/src/ai/confirmation/Confirmation.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>
 	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { ConfirmationState } from "./confirmation-context.svelte.js";
+	import type { ConfirmationKind } from "./confirmation-context.svelte.js";
 
 	export interface ConfirmationProps extends HTMLAttributes<HTMLElement> {
-		kind: ConfirmationState;
+		kind: ConfirmationKind;
 		executing?: boolean;
 		class?: string;
 		children?: Snippet;

package/src/ai/confirmation/{ConfirmationRequest.svelte → ConfirmationState.svelte}

@@ -1,7 +1,10 @@
 <script lang="ts" module>
 	import type { Snippet } from "svelte";
+	import type { ConfirmationKind } from "./confirmation-context.svelte.js";
 
-	export interface ConfirmationRequestProps {
+	export interface ConfirmationStateProps {
+		/** The state whose content this shows. */
+		when: Exclude<ConfirmationKind, "idle">;
 		children?: Snippet;
 	}
 </script>
@@ -9,12 +12,12 @@
 <script lang="ts">
 	import { getConfirmationContext } from "./confirmation-context.svelte.js";
 
-	let { children }: ConfirmationRequestProps = $props();
+	let { when, children }: ConfirmationStateProps = $props();
 
 	const ctx = getConfirmationContext();
 </script>
 
-{#if ctx.kind === "requested"}
+{#if ctx.kind === when}
 	<!-- WHY: the wrapper mirrors the parent section's stack so the state swap can
        animate as one block without changing the children's layout. -->
 	<div

package/src/ai/confirmation/confirmation-context.svelte.ts

@@ -2,10 +2,10 @@ import { getContext, setContext } from "svelte";
 
 const CONFIRMATION_CONTEXT_KEY = Symbol("confirmation-context");
 
-export type ConfirmationState = "idle" | "requested" | "accepted" | "rejected" | "failed";
+export type ConfirmationKind = "idle" | "requested" | "accepted" | "rejected" | "failed";
 
 export interface ConfirmationContextValue {
-  readonly kind: ConfirmationState;
+  readonly kind: ConfirmationKind;
   readonly executing: boolean;
 }
 

package/src/ai/confirmation/confirmation-parts.test.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	// Every state part under one Confirmation, for the state-swap test.
+	import {
+		Confirmation,
+		ConfirmationState,
+		type ConfirmationKind,
+	} from "./index.js";
+
+	let { kind }: { kind: ConfirmationKind } = $props();
+</script>
+
+<Confirmation {kind}>
+	<ConfirmationState when="requested">request</ConfirmationState>
+	<ConfirmationState when="accepted">accepted</ConfirmationState>
+	<ConfirmationState when="rejected">rejected</ConfirmationState>
+	<ConfirmationState when="failed">failed</ConfirmationState>
+</Confirmation>

package/src/ai/confirmation/confirmation-parts.test.ts

@@ -0,0 +1,23 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import type { ConfirmationKind } from "./index.js";
+import Parts from "./confirmation-parts.test.svelte";
+
+function shown(kind: ConfirmationKind): string {
+  const target = document.createElement("div");
+  const app = mount(Parts, { target, props: { kind } });
+  flushSync();
+  const text = target.textContent?.replace(/\s+/g, " ").trim() ?? "";
+  void unmount(app);
+  return text;
+}
+
+describe("ConfirmationState", () => {
+  it("shows only the part whose `when` matches the kind", () => {
+    expect(shown("requested")).toBe("request");
+    expect(shown("accepted")).toBe("accepted");
+    expect(shown("rejected")).toBe("rejected");
+    expect(shown("failed")).toBe("failed");
+    expect(shown("idle")).toBe("");
+  });
+});

package/src/ai/confirmation/index.ts

@@ -1,50 +1,35 @@
 import Confirmation from "./Confirmation.svelte";
 import ConfirmationTitle from "./ConfirmationTitle.svelte";
-import ConfirmationRequest from "./ConfirmationRequest.svelte";
-import ConfirmationAccepted from "./ConfirmationAccepted.svelte";
-import ConfirmationRejected from "./ConfirmationRejected.svelte";
-import ConfirmationFailed from "./ConfirmationFailed.svelte";
+import ConfirmationState from "./ConfirmationState.svelte";
 import ConfirmationActions from "./ConfirmationActions.svelte";
 import ConfirmationAction from "./ConfirmationAction.svelte";
 
 import type { ConfirmationProps } from "./Confirmation.svelte";
 import type { ConfirmationTitleProps } from "./ConfirmationTitle.svelte";
-import type { ConfirmationRequestProps } from "./ConfirmationRequest.svelte";
-import type { ConfirmationAcceptedProps } from "./ConfirmationAccepted.svelte";
-import type { ConfirmationRejectedProps } from "./ConfirmationRejected.svelte";
-import type { ConfirmationFailedProps } from "./ConfirmationFailed.svelte";
+import type { ConfirmationStateProps } from "./ConfirmationState.svelte";
 import type { ConfirmationActionsProps } from "./ConfirmationActions.svelte";
 import type { ConfirmationActionProps } from "./ConfirmationAction.svelte";
 
 export type {
   ConfirmationContextValue,
-  ConfirmationState,
+  ConfirmationKind,
 } from "./confirmation-context.svelte.js";
 
 export {
   Confirmation,
   ConfirmationTitle,
-  ConfirmationRequest,
-  ConfirmationAccepted,
-  ConfirmationRejected,
-  ConfirmationFailed,
+  ConfirmationState,
   ConfirmationActions,
   ConfirmationAction,
   type ConfirmationProps,
   type ConfirmationTitleProps,
-  type ConfirmationRequestProps,
-  type ConfirmationAcceptedProps,
-  type ConfirmationRejectedProps,
-  type ConfirmationFailedProps,
+  type ConfirmationStateProps,
   type ConfirmationActionsProps,
   type ConfirmationActionProps,
   //
   Confirmation as Root,
   ConfirmationTitle as Title,
-  ConfirmationRequest as Request,
-  ConfirmationAccepted as Accepted,
-  ConfirmationRejected as Rejected,
-  ConfirmationFailed as Failed,
+  ConfirmationState as State,
   ConfirmationActions as Actions,
   ConfirmationAction as Action,
 };

package/src/ai/index.ts

@@ -46,28 +46,18 @@ export {
 export {
   Confirmation,
   ConfirmationTitle,
-  ConfirmationRequest,
-  ConfirmationAccepted,
-  ConfirmationRejected,
+  ConfirmationState,
   ConfirmationActions,
   ConfirmationAction,
   type ConfirmationProps,
   type ConfirmationTitleProps,
-  type ConfirmationRequestProps,
-  type ConfirmationAcceptedProps,
-  type ConfirmationRejectedProps,
+  type ConfirmationStateProps,
   type ConfirmationActionsProps,
   type ConfirmationActionProps,
   type ConfirmationContextValue,
-  type ConfirmationState,
+  type ConfirmationKind,
 } from "./confirmation/index.js";
 
-// =========================
-// THINKING DOTS
-// =========================
-
-export { ThinkingDots, type ThinkingDotsProps } from "./thinking-dots/index.js";
-
 // =========================
 // VOICE WAVEFORM
 // =========================

package/src/ai/typing-dots/TypingDots.svelte

@@ -1,9 +1,11 @@
 <script lang="ts" module>
 	import type { HTMLAttributes } from "svelte/elements";
 
-	export interface TypingDotsProps extends HTMLAttributes<HTMLSpanElement> {
+	export interface TypingDotsProps extends HTMLAttributes<HTMLElement> {
 		/** Dot diameter in px. */
 		size?: number;
+		/** Set, even to "", the dots become a `role="status"` line; the text shows when non-empty. */
+		label?: string;
 		class?: string;
 	}
 </script>
@@ -12,16 +14,34 @@
 	import "./TypingDots.css";
 	import { cn } from "../../lib/utils.js";
 
-	let { size = 4, class: className, ...rest }: TypingDotsProps = $props();
+	let { size = 4, label, class: className, ...rest }: TypingDotsProps = $props();
 </script>
 
-<span
-	class={cn("typing-dots", className)}
-	style:--typing-dot-size="{size}px"
-	aria-hidden="true"
-	{...rest}
->
-	<span class="typing-dot"></span>
-	<span class="typing-dot"></span>
-	<span class="typing-dot"></span>
-</span>
+{#snippet dots(extra?: HTMLAttributes<HTMLElement>, dotsClass?: string)}
+	<span
+		class={cn("typing-dots", dotsClass)}
+		style:--typing-dot-size="{size}px"
+		aria-hidden="true"
+		{...extra}
+	>
+		<span class="typing-dot"></span>
+		<span class="typing-dot"></span>
+		<span class="typing-dot"></span>
+	</span>
+{/snippet}
+
+{#if label === undefined}
+	{@render dots(rest, className)}
+{:else}
+	<div
+		class={cn(
+			"inline-flex items-center gap-2 text-sm text-[color:var(--ai-thinking-fg,inherit)]",
+			className,
+		)}
+		role="status"
+		{...rest}
+	>
+		{#if label}<span>{label}</span>{/if}
+		{@render dots()}
+	</div>
+{/if}

package/src/ai/typing-dots/typing-dots.test.ts

@@ -0,0 +1,36 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import TypingDots, { type TypingDotsProps } from "./TypingDots.svelte";
+
+function render(props: TypingDotsProps): HTMLElement {
+  const target = document.createElement("div");
+  const app = mount(TypingDots, { target, props });
+  flushSync();
+  const root = target.firstElementChild as HTMLElement;
+  void unmount(app);
+  return root;
+}
+
+describe("TypingDots", () => {
+  it("is three hidden dots with no label", () => {
+    const root = render({});
+    expect(root.getAttribute("aria-hidden")).toBe("true");
+    expect(root.getAttribute("role")).toBeNull();
+    expect(root.querySelectorAll(".typing-dot")).toHaveLength(3);
+  });
+
+  it("becomes a status line with its text when labelled", () => {
+    const root = render({ label: "Thinking", class: "extra" });
+    expect(root.getAttribute("role")).toBe("status");
+    expect(root.textContent?.trim()).toBe("Thinking");
+    expect(root.classList.contains("extra")).toBe(true);
+    expect(root.querySelector(".typing-dots")?.getAttribute("aria-hidden")).toBe("true");
+  });
+
+  it("keeps the status role and the caller's aria-label for an empty label", () => {
+    const root = render({ label: "", "aria-label": "Thinking" });
+    expect(root.getAttribute("role")).toBe("status");
+    expect(root.getAttribute("aria-label")).toBe("Thinking");
+    expect(root.textContent?.trim()).toBe("");
+  });
+});

package/src/animations/modal.css

@@ -7,7 +7,8 @@
   --modal-scale: var(--scale-large, 0.96);
   --modal-scale-close: var(--scale-large, 0.96);
   --modal-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --modal-backdrop-color: rgb(0 0 0 / 0.5);
+  --modal-backdrop-color: var(--scrim, rgb(0 0 0 / 0.32));
+  --modal-backdrop-blur: var(--scrim-blur, 2px);
 }
 
 /* === Upstream: class-based toggle === */
@@ -54,6 +55,8 @@
 /* WHY: pair .t-modal-backdrop with the modal so the overlay fades in sync. */
 .t-modal-backdrop {
   background: var(--modal-backdrop-color);
+  -webkit-backdrop-filter: blur(var(--modal-backdrop-blur));
+  backdrop-filter: blur(var(--modal-backdrop-blur));
   opacity: 0;
   transition: opacity var(--modal-open-dur) var(--modal-ease);
 }

package/src/canvas/editor/rebase.test.ts

@@ -62,6 +62,15 @@ describe("diffToOps", () => {
     const replayed = applyOps({ nodes: [], edges: [] }, diffToOps(base, current));
     expect(replayed.nodes).toHaveLength(2);
   });
+
+  it("replays the delete of a connected node", () => {
+    const base = doc([n("a"), n("b")], [{ id: "e1", source: "a", target: "b" }]);
+    const current = doc([n("a")]);
+
+    const replayed = applyOps({ nodes: base.nodes, edges: base.edges }, diffToOps(base, current));
+    expect(replayed.nodes).toHaveLength(1);
+    expect(replayed.edges).toHaveLength(0);
+  });
 });
 
 describe("rebaseDiagram", () => {
@@ -186,6 +195,34 @@ describe("rebaseDiagram", () => {
     const local = doc([n("a"), n("b", { data: { label: "edited" } })]);
     expect(rebaseDiagram(serverDoc, lastSaved, local)).toBeNull();
   });
+
+  describe("deletes", () => {
+    const connected = doc([n("a"), n("b")], [{ id: "e1", source: "a", target: "b" }]);
+
+    it("merges a local delete of a connected node", () => {
+      const server = doc([n("a"), n("b"), n("c")], [{ id: "e1", source: "a", target: "b" }]);
+      const local = doc([n("a")]);
+
+      const rebased = expectDefined(rebaseDiagram(server, connected, local), "rebased doc");
+      expect(rebased.nodes.map((node) => node.id)).toEqual(["a", "c"]);
+      expect(rebased.edges).toEqual([]);
+    });
+
+    it("merges when both sides deleted the same node", () => {
+      const server = doc([n("a"), n("c")]);
+      const local = doc([n("a")]);
+
+      const rebased = expectDefined(rebaseDiagram(server, connected, local), "rebased doc");
+      expect(rebased.nodes.map((node) => node.id)).toEqual(["a", "c"]);
+    });
+
+    it("merges when both sides deleted the same edge", () => {
+      const both = doc([n("a"), n("b")]);
+
+      const rebased = expectDefined(rebaseDiagram(both, connected, both), "rebased doc");
+      expect(rebased.edges).toHaveLength(0);
+    });
+  });
 });
 
 describe("a new edge keeps everything it was drawn with", () => {

package/src/canvas/editor/rebase.ts

@@ -164,8 +164,14 @@ function patchEdgeOps(before: DocEdge, edge: DocEdge): CanvasOp[] {
 function edgeOps(base: DiagramDoc, current: DiagramDoc): CanvasOp[] {
   const baseEdges = new Map(base.edges.map((e) => [e.id, e]));
   const currentIds = new Set(current.edges.map((e) => e.id));
+  const currentNodeIds = new Set(current.nodes.map((n) => n.id));
+  const removedNodeIds = new Set(
+    base.nodes.filter((n) => !currentNodeIds.has(n.id)).map((n) => n.id),
+  );
+  // WHY: removeNode already takes the node's edges, and removeEdge throws on a missing id.
   const removed: CanvasOp[] = base.edges
     .filter((e) => !currentIds.has(e.id))
+    .filter((e) => !removedNodeIds.has(String(e.source)) && !removedNodeIds.has(String(e.target)))
     .map((e) => ({ kind: "removeEdge", edgeId: e.id }));
   const upserted = current.edges.flatMap((edge) => {
     const before = baseEdges.get(edge.id);
@@ -255,6 +261,32 @@ function parentsFirst(nodes: Record<string, unknown>[]): Record<string, unknown>
   return sortParentsFirst(wrapped).map(({ node }) => node);
 }
 
+/**
+ * Drops removals the server already made, so a delete on both sides merges. Only
+ * removeNode and removeEdge: an edit to a node the server deleted must still throw.
+ */
+function withoutServerRemovals(serverDoc: DiagramDoc, ops: CanvasOp[]): CanvasOp[] {
+  const serverNodeIds = new Set(serverDoc.nodes.map((n) => n.id));
+  const serverEdges = new Map(serverDoc.edges.map((e) => [e.id, e]));
+  const removedNodeIds = new Set<string>();
+  return ops.filter((op) => {
+    if (op.kind === "removeNode") {
+      if (!serverNodeIds.has(op.nodeId)) return false;
+      removedNodeIds.add(op.nodeId);
+      return true;
+    }
+    if (op.kind === "removeEdge") {
+      const edge = serverEdges.get(op.edgeId);
+      return (
+        edge !== undefined &&
+        !removedNodeIds.has(String(edge.source)) &&
+        !removedNodeIds.has(String(edge.target))
+      );
+    }
+    return true;
+  });
+}
+
 /**
  * Replay local changes (lastSaved -> local) on the server document. Returns
  * null when impossible, like a patched node deleted, so the save error shows.
@@ -264,7 +296,7 @@ export function rebaseDiagram(
   lastSaved: DiagramDoc,
   local: DiagramDoc,
 ): RawCanvasData | null {
-  const ops = diffToOps(lastSaved, local);
+  const ops = withoutServerRemovals(serverDoc, diffToOps(lastSaved, local));
   const res = tryCatch(() => applyOps({ nodes: serverDoc.nodes, edges: serverDoc.edges }, ops));
   if (!res.ok) return null;
   const nodes = applyNodeFieldPatches(res.value.nodes, nodeFieldPatches(lastSaved, local));

package/src/canvas/ui/canvas-ui.css

@@ -43,6 +43,49 @@
   transform: translateX(-50%);
 }
 
+/* A phone has no room for a side rail: at 390px a rail on the left covers the
+   board xyflow just fitted. The rail lies flat along the bottom edge instead,
+   with its style bar stacked above it. */
+@media (max-width: 639px) {
+  .svelte-flow .svelte-flow__panel.cv-dock.left.center {
+    top: auto;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .cv-dock > .cv-row {
+    flex-direction: column-reverse;
+  }
+
+  .cv-dock .cv-rail {
+    flex-direction: row;
+  }
+}
+
+/* xyflow's credit is #999 on a half-white wash, which turns grey on grey on a
+   dark board. It takes the chrome's surface and muted ink in both themes. */
+.svelte-flow .svelte-flow__attribution {
+  border-top-left-radius: var(--radius-sm, 4px);
+  background: var(--cv-surface);
+}
+
+/* On a phone the rail runs along the bottom edge and the credit would sit under
+   it, in the frame's rounded corner. It moves to the top right, inset off the
+   corner's curve. */
+@media (max-width: 639px) {
+  .svelte-flow .svelte-flow__panel.svelte-flow__attribution {
+    top: 0;
+    bottom: auto;
+    margin: 6px 8px;
+    border-radius: var(--radius-sm, 4px);
+  }
+}
+
+.svelte-flow .svelte-flow__attribution a {
+  color: var(--cv-ink-muted);
+}
+
 /* Beside the selection: StylePanel writes the spot, and a phone keeps its own row above the pill. */
 @media (min-width: 640px) {
   .svelte-flow .svelte-flow__panel.cv-dock.cv-style-dock.is-placed {
@@ -115,7 +158,7 @@
 }
 
 .cv-btn:active:not(:disabled) {
-  scale: 0.94;
+  scale: 0.96;
 }
 
 /* One active style for a tool, a size, a brush and an open popover. */

package/src/charts/README.md

@@ -71,8 +71,8 @@ The `@source` line matters: the chart markup carries Tailwind classes, and Tailw
 | --- | --- |
 | `DashboardSection`, `PanelGrid`, `StatBand` | A named area, a row of panels side by side, a row of number cards |
 | `StatTile` | A number card on `NumberChart`: a delta, a share track, a trend shape behind the figure, an optional link |
-| `DataPanel`, `DashboardEmpty` | A titled panel for a table or chart, and the dashed empty state |
-| `DataTable`, `DataSortHead`, `RatingChip` | The one data table: sortable heads, a row that opens, columns that hide on a phone, share bars, loading and empty states. An A to E grade chip |
+| `DataPanel` | A titled panel for a table or chart. The dashed empty state is `EmptyState surface="dashed"` from `@heyramzi/ui/components/list-page` |
+| `DataTable`, `RatingChip` | The one data table: sortable heads (bind `sort`, the `SortState` TableView takes; a new column starts descending), a row that opens, columns that hide on a phone, share bars, loading and empty states. An A to E grade chip |
 | `PeriodFilter`, `DAY_WINDOWS` | The 7, 30 and 90 day window, as a filter or as links |
 | `CHART_HEIGHT`, `dataTableClass` and friends | The one chart height and the table skin |
 

package/src/charts/area-chart.svelte

@@ -12,6 +12,7 @@
 	import Figure from "./figure.svelte";
 	import HoverFocus from "./hover-focus.svelte";
 	import { DOMAIN_MOTION, TOOLTIP_GAP, TOOLTIP_TOP } from "./motion.js";
+	import { valueTick } from "./primitives/chart-utils.js";
 	import Reveal from "./reveal.svelte";
 	import ReferenceLine, { type ChartReference } from "./reference-line.svelte";
 	import {
@@ -70,7 +71,7 @@
 		xKey,
 		yKey,
 		series: seriesInput,
-		color = "var(--chart-1)",
+		color = "var(--chart-series-1)",
 		height = 240,
 		stacked = false,
 		smooth = true,
@@ -119,7 +120,7 @@
 			? seriesInput.map((s, i) => ({
 					key: s.key,
 					label: s.label ?? s.key,
-					color: s.color ?? `var(--chart-${(i % 5) + 1})`,
+					color: s.color ?? `var(--chart-series-${(i % 6) + 1})`,
 				}))
 			: yKey
 				? [{ key: yKey, label: yKey, color }]
@@ -153,15 +154,7 @@
 	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 tick = $derived(valueTick(formatValue));
 	const figureRows = $derived(
 		display
 			? series.map((s) => ({
@@ -212,7 +205,7 @@
 				motion={DOMAIN_MOTION}
 			>
 				<Svg>
-					<Axis placement="left" format={(v) => valueTick(Number(v))} ticks={4} />
+					<Axis placement="left" format={(v) => tick(Number(v))} ticks={4} />
 					<Axis placement="bottom" format={(v) => formatX(v)} ticks={ticksForWidth(xTicks)} />
 					<g class="hr-area-grid">
 						<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />