@heyramzi/ui 2.22.0 → 2.23.0

package/dist/canvas/editor/rebase.js

@@ -151,7 +151,10 @@ function patchEdgeOps(before, edge) {
 function edgeOps(base, current) {
 	const baseEdges = new Map(base.edges.map((e) => [e.id, e]));
 	const currentIds = new Set(current.edges.map((e) => e.id));
-	const removed = base.edges.filter((e) => !currentIds.has(e.id)).map((e) => ({
+	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 = 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
 	}));
@@ -238,11 +241,32 @@ function parentsFirst(nodes) {
 	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, ops) {
+	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();
+	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.
 */
 export function rebaseDiagram(serverDoc, lastSaved, local) {
-	const ops = diffToOps(lastSaved, local);
+	const ops = withoutServerRemovals(serverDoc, diffToOps(lastSaved, local));
 	const res = tryCatch(() => applyOps({
 		nodes: serverDoc.nodes,
 		edges: serverDoc.edges

package/dist/editor/safe-url.js

@@ -0,0 +1,26 @@
+const SAFE_SCHEME = /^(?:https?:|mailto:|tel:)/i;
+const ANY_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
+// WHY no SVG: an SVG can carry script, and pasted images are stored as these data: URLs.
+const SAFE_IMAGE_DATA = /^data:image\/(?:png|jpe?g|gif|webp|avif);base64,/i;
+// WHY: browsers drop tabs, newlines and control bytes from a URL, so "java\tscript:" runs as javascript:.
+function clean(raw) {
+	return [...raw].filter((c) => c.charCodeAt(0) > 31 && c.charCodeAt(0) !== 127).join("").trim();
+}
+// The URL when it's safe to put in an href, else null.
+export function safeUrl(raw) {
+	if (!raw) return null;
+	const href = clean(raw);
+	// Relative URLs and same-page anchors carry no scheme, so they are safe.
+	if (href.startsWith("#") || href.startsWith("/") || href.startsWith(".")) return href;
+	if (SAFE_SCHEME.test(href)) return href;
+	if (!ANY_SCHEME.test(href)) return href;
+	return null;
+}
+// The URL when it's safe to put in an img src, else null.
+export function safeImageUrl(raw) {
+	const url = safeUrl(raw);
+	if (url !== null) return url;
+	if (!raw) return null;
+	const src = clean(raw);
+	return SAFE_IMAGE_DATA.test(src) ? src : null;
+}

package/dist/editor/serializer.js

@@ -1,3 +1,4 @@
+import { safeImageUrl, safeUrl } from "./safe-url.js";
 // WHY our own slugify: the website's uses NFKD, which strips accents from French
 // headings. The vibe-kit utils one doesn't, so accented anchors would differ.
 function slugify(input, maxLength = 60) {
@@ -99,7 +100,7 @@ function numString(attrs, key) {
 	return value === undefined ? undefined : String(value);
 }
 function renderImage(node) {
-	const src = strAttr(node.attrs, "src");
+	const src = safeImageUrl(strAttr(node.attrs, "src"));
 	if (!src) return "";
 	const attrs = renderAttributes({
 		alt: strAttr(node.attrs, "alt") ?? "",
@@ -237,10 +238,15 @@ const MARK_TAGS = {
 };
 function wrapMark(content, mark) {
 	if (mark.type === "link") {
+		// WHY: stored docs come from teammates, clients and CLIs that skip the editor's link filter.
+		const href = safeUrl(strAttr(mark.attrs, "href"));
+		if (!href) return content;
+		const target = strAttr(mark.attrs, "target");
+		const rel = strAttr(mark.attrs, "rel") || (target ? "noopener noreferrer" : undefined);
 		const attrs = renderAttributes({
-			href: strAttr(mark.attrs, "href") ?? "",
-			target: strAttr(mark.attrs, "target"),
-			rel: strAttr(mark.attrs, "rel")
+			href,
+			target,
+			rel
 		});
 		return `<a${attrs}>${content}</a>`;
 	}

package/dist/editor/slash-query.js

@@ -0,0 +1,10 @@
+// One character of context, the slash, and a query of up to 20.
+export const SLASH_WINDOW = 22;
+/**
+* The slash command typed just before the caret, or null when there isn't one. The slash has to
+* start the text or follow whitespace, so `TCP/IP` and `and/or` stay plain text.
+*/
+export function slashQueryAt(textBefore) {
+	const match = textBefore.match(/(?:^|\s)\/([a-zA-Z0-9 ]{0,20})$/);
+	return match ? match[1] : null;
+}

package/dist/triage/index.js

@@ -0,0 +1,4 @@
+export { default as TriagePlan } from "../../src/triage/triage-plan.svelte";
+export { default as TriageTask } from "../../src/triage/triage-task.svelte";
+export { default as TriageQueue } from "../../src/triage/triage-queue.svelte";
+export { DEFAULT_TRIAGE_PLAN_LABELS, DEFAULT_TRIAGE_TASK_LABELS } from "./types.js";

package/dist/triage/types.js

@@ -0,0 +1,12 @@
+export const DEFAULT_TRIAGE_PLAN_LABELS = {
+	approve: "Approve",
+	pick: "Pick another task",
+	dismiss: "Dismiss",
+	taskLabel: "Task",
+	useTask: "Use this task",
+	cancel: "Cancel"
+};
+export const DEFAULT_TRIAGE_TASK_LABELS = {
+	undo: "Undo",
+	openTask: "Open task"
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.22.0",
+  "version": "2.23.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",
@@ -225,6 +225,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",

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/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-grid.svelte

@@ -16,6 +16,9 @@
 		color?: string;
 	}
 
+	/** x, y, width, height in device pixels. */
+	type Rect = [number, number, number, number];
+
 	// =========================
 	// CONSTANTS
 	// =========================
@@ -58,6 +61,16 @@
 	// Pan redraws every frame, so a tile is built once per size and colour.
 	// eslint-disable-next-line svelte/prefer-svelte-reactivity -- render cache written inside the draw effect, never rendered
 	const tiles = new Map<string, HTMLCanvasElement>();
+	// What the canvas holds now, its origin in device pixels. Plain: only the draw effect reads it.
+	let painted: {
+		zoom: number;
+		ratio: number;
+		fill: string;
+		w: number;
+		h: number;
+		x: number;
+		y: number;
+	} | null = null;
 
 	function dotTile(step: number, radius: number, fill: string) {
 		const key = `${step}:${radius.toFixed(2)}:${fill}`;
@@ -77,21 +90,20 @@
 		return tile;
 	}
 
+	/** Fills the given device-pixel rects with the dots, the grid's origin at `originX`, `originY`. */
 	// fallow-ignore-next-line complexity
-	function draw(
-		element: HTMLCanvasElement,
-		view: { x: number; y: number; zoom: number },
+	function paint(
+		context: CanvasRenderingContext2D,
+		zoom: number,
 		fill: string,
+		originX: number,
+		originY: number,
+		rects: Rect[],
 	) {
-		const context = element.getContext("2d");
-		if (!context) return;
-		context.setTransform(1, 0, 0, 1, 0, 0);
-		context.clearRect(0, 0, element.width, element.height);
-
 		for (let level = 0; level < LEVELS; level++) {
-			const spacing = gap * 2 ** level * view.zoom;
+			const spacing = gap * 2 ** level * zoom;
 			// A coarser level draws bigger dots, so zooming out reads as moving away.
-			const screenRadius = (size / 2) * 2 ** level * view.zoom;
+			const screenRadius = (size / 2) * 2 ** level * zoom;
 			const radius = Math.min(MAX_RADIUS, Math.max(MIN_RADIUS, screenRadius)) * ratio;
 			const last = level === LEVELS - 1;
 			const alpha = last ? 1 : smoothstep(FADE_START, FADE_END, spacing);
@@ -102,16 +114,64 @@
 			const pattern = context.createPattern(dotTile(tileSize, radius / scale, fill), "repeat");
 			if (!pattern) return;
 			pattern.setTransform(
-				new DOMMatrix([scale, 0, 0, scale, view.x * ratio - step / 2, view.y * ratio - step / 2]),
+				new DOMMatrix([scale, 0, 0, scale, originX - step / 2, originY - step / 2]),
 			);
 			context.globalAlpha = alpha;
 			context.fillStyle = pattern;
-			context.fillRect(0, 0, element.width, element.height);
+			for (const [x, y, w, h] of rects) context.fillRect(x, y, w, h);
 			if (alpha >= 0.999) break;
 		}
 		context.globalAlpha = 1;
 	}
 
+	/** The strips a shift of `dx`, `dy` uncovers: a column on one side and a row on the other. */
+	function uncovered(dx: number, dy: number, w: number, h: number): Rect[] {
+		const rects: Rect[] = [];
+		if (dx > 0) rects.push([0, 0, dx, h]);
+		if (dx < 0) rects.push([w + dx, 0, -dx, h]);
+		if (dy > 0) rects.push([0, 0, w, dy]);
+		if (dy < 0) rects.push([0, h + dy, w, -dy]);
+		return rects;
+	}
+
+	// A pan moves the pixels already drawn and paints only the strip it uncovered; anything else repaints it all.
+	// fallow-ignore-next-line complexity
+	function draw(
+		element: HTMLCanvasElement,
+		view: { x: number; y: number; zoom: number },
+		fill: string,
+	) {
+		const context = element.getContext("2d");
+		if (!context) return;
+		const { width: w, height: h } = element;
+		const x = view.x * ratio;
+		const y = view.y * ratio;
+		const last = painted;
+		const same =
+			last &&
+			last.zoom === view.zoom &&
+			last.ratio === ratio &&
+			last.fill === fill &&
+			last.w === w &&
+			last.h === h;
+		// Whole pixels only, so the shifted dots stay sharp; the rest waits for the next pan or zoom, never past half a pixel.
+		const dx = same ? Math.round(x - last.x) : 0;
+		const dy = same ? Math.round(y - last.y) : 0;
+		if (same && Math.abs(dx) < w && Math.abs(dy) < h) {
+			if (!dx && !dy) return;
+			context.globalCompositeOperation = "copy";
+			context.drawImage(element, dx, dy);
+			context.globalCompositeOperation = "source-over";
+			painted = { ...last, x: last.x + dx, y: last.y + dy };
+			paint(context, view.zoom, fill, painted.x, painted.y, uncovered(dx, dy, w, h));
+			return;
+		}
+		context.setTransform(1, 0, 0, 1, 0, 0);
+		context.clearRect(0, 0, w, h);
+		painted = { zoom: view.zoom, ratio, fill, w, h, x, y };
+		paint(context, view.zoom, fill, x, y, [[0, 0, w, h]]);
+	}
+
 	// =========================
 	// EFFECTS
 	// =========================

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

@@ -43,6 +43,37 @@
   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);
+}
+
+.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 +146,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/area-chart.svelte

@@ -70,7 +70,7 @@
 		xKey,
 		yKey,
 		series: seriesInput,
-		color = "var(--chart-1)",
+		color = "var(--chart-series-1)",
 		height = 240,
 		stacked = false,
 		smooth = true,
@@ -119,7 +119,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 }]

package/src/charts/bar-chart.svelte

@@ -55,7 +55,7 @@
 		xKey,
 		yKey,
 		series,
-		color = "var(--chart-1)",
+		color = "var(--chart-series-1)",
 		colorOf,
 		height = 240,
 		orientation = "vertical",
@@ -161,7 +161,7 @@
 	{#if showFigure}
 		<Figure
 			value={active ? valueOf(active) : total}
-			color="var(--chart-1)"
+			color="var(--chart-series-1)"
 			eyebrow={active ? formatX(active[xKey]) : "Total"}
 			format={formatValue}
 			size="md"

package/src/charts/chart-tokens.css

@@ -16,6 +16,25 @@
   .hr-ring,
   .hr-gauge
 ) {
+  /* The categorical series palette. The brand leads, then hues spaced round the
+     wheel so neighbours never share a family (blue and orange first, the pair that
+     survives colour blindness). Each hue is a cat token pulled 15% toward the text
+     colour: darker on a light card, lighter on a dark one, so every series clears
+     3:1 against the card in both themes (lowest: teal, 3.6:1 light, 6.2:1 dark). */
+  --chart-series-1: var(--color-brand, oklch(0.28 0 0));
+  --chart-series-2: color-mix(in oklab, var(--color-cat-blue) 85%, var(--color-foreground));
+  --chart-series-3: color-mix(in oklab, var(--color-cat-orange) 85%, var(--color-foreground));
+  --chart-series-4: color-mix(in oklab, var(--color-cat-green) 85%, var(--color-foreground));
+  --chart-series-5: color-mix(in oklab, var(--color-cat-pink) 85%, var(--color-foreground));
+  --chart-series-6: color-mix(in oklab, var(--color-cat-teal) 85%, var(--color-foreground));
+  /* The palette's `--chart-N` names point here inside a chart, so a series passed as
+     `var(--chart-3)` gets a hue, not the brand's grey highlight. */
+  --chart-1: var(--chart-series-1);
+  --chart-2: var(--chart-series-2);
+  --chart-3: var(--chart-series-3);
+  --chart-4: var(--chart-series-4);
+  --chart-5: var(--chart-series-5);
+  --chart-6: var(--chart-series-6);
   --chart-label: var(--muted-foreground, oklch(0.5 0.01 286));
   --chart-grid: color-mix(in srgb, var(--border, oklch(0.5 0.01 286)) 50%, transparent);
   --chart-ease-out: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));

package/src/charts/dashboard/stat-tile.svelte

@@ -159,7 +159,7 @@
 				data={points}
 				xKey="i"
 				yKey="v"
-				color={color ?? "var(--chart-1)"}
+				color={color ?? "var(--chart-series-1)"}
 				height={48}
 				bare
 			/>

package/src/charts/donut-chart.svelte

@@ -130,7 +130,7 @@
 									cornerRadius={3}
 									fill={colorKey
 										? String((arc.data as TData)[colorKey])
-										: `var(--chart-${(i % 5) + 1})`}
+										: `var(--chart-series-${(i % 6) + 1})`}
 									class="hr-donut-arc"
 									data-hovered={isHovered ? "" : undefined}
 									style="opacity: {dimmed ? 0.4 : 1}; translate: {dx}px {dy}px"

package/src/charts/gauge-chart.svelte

@@ -90,7 +90,7 @@
 		endAngle = 405,
 		useGradient = false,
 		activeGradient,
-		activeFill = "var(--chart-1)",
+		activeFill = "var(--chart-series-1)",
 		inactiveFill,
 		activeFillOpacity = 1,
 		inactiveFillOpacity = 0.12,

package/src/charts/line-chart.svelte

@@ -68,7 +68,7 @@
 		xKey,
 		yKey,
 		series: seriesInput,
-		color = "var(--chart-1)",
+		color = "var(--chart-series-1)",
 		height = 240,
 		smooth = true,
 		edgeFade = true,
@@ -104,7 +104,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 }]

package/src/charts/number-chart.svelte

@@ -97,7 +97,7 @@
 		deltaThreshold = 0.5,
 		share,
 		shareLabel,
-		color = "var(--chart-1)",
+		color = "var(--chart-series-1)",
 		size = "md",
 		caption,
 		negative = false,

package/src/charts/ring-chart.svelte

@@ -16,7 +16,7 @@
 		value: number;
 		/** Denominator for the progress arc. */
 		maxValue: number;
-		/** CSS color or var. Falls back to --chart-1..5. */
+		/** CSS color or var. Falls back to --chart-series-1..6. */
 		color?: string;
 	};
 
@@ -82,7 +82,7 @@
 				index: i,
 				radius,
 				progress,
-				color: d.color ?? `var(--chart-${(i % 5) + 1})`,
+				color: d.color ?? `var(--chart-series-${(i % 6) + 1})`,
 			};
 		}),
 	);

package/src/charts/sparkline.svelte

@@ -54,7 +54,7 @@
 		data: input,
 		xKey,
 		yKey,
-		color = "var(--chart-1)",
+		color = "var(--chart-series-1)",
 		height = 44,
 		smooth = true,
 		endCap = true,

package/src/charts/stat-card.svelte

@@ -81,7 +81,7 @@
 		trend,
 		caption,
 		figureOnly = false,
-		color = "var(--chart-1)",
+		color = "var(--chart-series-1)",
 		height = 150,
 		smooth = true,
 		edgeFade = true,

package/src/charts/time-series-chart.svelte

@@ -62,7 +62,7 @@
 		data,
 		label = "Value",
 		label2,
-		color = "var(--chart-1)",
+		color = "var(--chart-series-1)",
 		color2 = "var(--muted-foreground)",
 		formatValue = (v) => v.toLocaleString(),
 		formatValue2,