@heyramzi/ui 3.0.0 → 3.1.0

package/dist/charts/dual-axis.js

@@ -0,0 +1,38 @@
+const NICE = [
+	1,
+	2,
+	2.5,
+	5,
+	10
+];
+/** The smallest 1, 2, 2.5 or 5 times a power of ten that is at least `raw`. */
+export function niceStep(raw) {
+	if (!(raw > 0) || !Number.isFinite(raw)) return 1;
+	const power = 10 ** Math.floor(Math.log10(raw));
+	// WHY the epsilon: 0.3 / 0.1 is 2.9999999999999996, which would skip 3 x 0.1 for the next step.
+	const multiple = NICE.find((m) => m * power >= raw * (1 - 1e-9)) ?? 10;
+	return multiple * power;
+}
+function ticksOf(step, count) {
+	// Rounded so 0.1 x 3 reads 0.3 on the axis, not 0.30000000000000004.
+	return Array.from({ length: count + 1 }, (_, i) => Number((i * step).toPrecision(12)));
+}
+/**
+* Left and right domains from 0, with the same tick count so both axes sit on one grid.
+* `target` is the number of intervals wanted; the left data may round it to one more or less.
+*/
+export function dualAxis(leftMax, rightMax, target = 4) {
+	const leftStep = niceStep(Math.max(0, leftMax) / target);
+	const count = Math.max(1, Math.ceil(Math.max(0, leftMax) / leftStep - 1e-9));
+	const rightStep = niceStep(Math.max(0, rightMax) / count);
+	return {
+		left: {
+			max: leftStep * count,
+			ticks: ticksOf(leftStep, count)
+		},
+		right: {
+			max: rightStep * count,
+			ticks: ticksOf(rightStep, count)
+		}
+	};
+}

package/dist/slides/deck-controller.svelte.js

@@ -5,9 +5,19 @@ import { resolveLabels } from "./labels.js";
 import { DEFAULT_CANVAS } from "./types.js";
 /** Height the controls bar takes at the bottom of the overview, in px. */
 const CONTROLS_ROOM = 56;
-/** How long the overview morph flag stays up, a little past the longest stagger. */
-const MORPH_MS = 900;
 const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+/**
+* Where `cell` lands when the camera moves `target` onto `fit`. Every box shares one scale and
+* shift, and a transform tween is linear in both, so the grid stays rigid while it zooms.
+*/
+function frame(cell, target, fit) {
+	const k = fit.scale / target.scale;
+	return {
+		x: fit.x + (cell.x - target.x) * k,
+		y: fit.y + (cell.y - target.y) * k,
+		scale: cell.scale * k
+	};
+}
 function isEditable(el) {
 	return el.isContentEditable || [
 		"INPUT",
@@ -22,7 +32,7 @@ export class DeckController {
 	/** The highlighted thumbnail in the overview, as an index among the visible slides. */
 	cursor = $state(0);
 	direction = $state(1);
-	morphing = $state(false);
+	zoom = $state(null);
 	size = $state({
 		w: 0,
 		h: 0
@@ -30,6 +40,7 @@ export class DeckController {
 	options;
 	#listeners = new Set();
 	#timer;
+	#frame = 0;
 	constructor(options) {
 		this.options = options;
 	}
@@ -61,8 +72,13 @@ export class DeckController {
 	}, this.canvas, this.visible.length));
 	/** Where slide `index` sits right now: centred to fit, or in its overview cell. */
 	boxOf(index) {
-		if (!this.overview) return this.fit;
-		return this.grid.boxes[this.visible.indexOf(index)];
+		const zoom = this.zoom;
+		const cell = this.grid.boxes[this.visible.indexOf(index)];
+		if (zoom?.framed) {
+			const target = this.grid.boxes[this.visible.indexOf(zoom.index)];
+			return cell && target ? frame(cell, target, this.fit) : this.fit;
+		}
+		return this.overview || zoom ? cell : this.fit;
 	}
 	register(entry) {
 		untrack(() => {
@@ -78,7 +94,7 @@ export class DeckController {
 		return () => this.#listeners.delete(listener);
 	}
 	mount() {
-		return () => clearTimeout(this.#timer);
+		return () => this.#stopZoom();
 	}
 	/** Which deck hears a key is the page's call: Deck passes only keys from focus inside it. */
 	get listening() {
@@ -88,14 +104,15 @@ export class DeckController {
 		this.options.index = position.index;
 		this.options.step = position.step;
 	}
-	commit(target, source = "local") {
+	/** `animate: false` skips the slide transition, for a move the overview zoom already shows. */
+	commit(target, source = "local", animate = true) {
 		if (!target) return;
 		const from = this.position;
 		const to = settle(this.slides, target);
 		if (to.index === from.index && to.step === from.step) return;
 		this.direction = to.index >= from.index ? 1 : -1;
 		const apply = () => this.#write(to);
-		if (to.index !== from.index && this.options.transition) this.options.transition(apply);
+		if (animate && to.index !== from.index && this.options.transition) this.options.transition(apply);
 		else apply();
 		for (const listener of this.#listeners) listener(to, source);
 	}
@@ -111,23 +128,53 @@ export class DeckController {
 			step
 		}, source);
 	}
+	/**
+	* Opening zooms the camera out from the current slide to the whole grid. Closing zooms into
+	* the current slide, so `select` moves there first.
+	*/
 	toggleOverview(force) {
 		const open = force ?? !this.overview;
 		if (open === this.overview) return;
-		if (open) this.cursor = Math.max(0, this.visible.indexOf(this.position.index));
+		const index = this.position.index;
+		if (open) this.cursor = Math.max(0, this.visible.indexOf(index));
 		this.view = open ? "overview" : "slide";
-		this.#morph();
+		this.#stopZoom();
+		const ms = this.options.zoomMs?.() ?? 0;
+		if (ms <= 0 || !this.visible.includes(index)) return;
+		/*
+		* Each way paints its start state first and moves on a later frame. Moved in the same
+		* flush, a style read in between (the overview handing focus back) commits the boxes
+		* before the transition rule is on, and the zoom jumps to its end.
+		*/
+		this.zoom = {
+			index,
+			framed: open,
+			running: !open
+		};
+		this.#frame = requestAnimationFrame(() => {
+			this.#frame = requestAnimationFrame(() => {
+				this.zoom = {
+					index,
+					framed: !open,
+					running: true
+				};
+				this.#timer = setTimeout(() => this.#stopZoom(), ms);
+			});
+		});
 	}
 	/** Leaves the overview on slide `index`. Picking the current slide keeps its step. */
 	select(index) {
-		this.toggleOverview(false);
 		const keep = index === this.position.index;
-		this.go(index, keep ? this.position.step : 0);
+		this.commit({
+			index,
+			step: keep ? this.position.step : 0
+		}, "local", false);
+		this.toggleOverview(false);
 	}
-	#morph() {
-		this.morphing = true;
+	#stopZoom() {
 		clearTimeout(this.#timer);
-		this.#timer = setTimeout(() => this.morphing = false, MORPH_MS);
+		cancelAnimationFrame(this.#frame);
+		this.zoom = null;
 	}
 	#moveCursor(to) {
 		this.cursor = clamp(to, 0, this.visible.length - 1);

package/dist/slides/layout.js

@@ -10,7 +10,8 @@ export function fitBox(view, canvas) {
 function scaleFor(cols, count, view, canvas, pad, gap) {
 	const rows = Math.ceil(count / cols);
 	const byWidth = (view.w - 2 * pad - (cols - 1) * gap) / cols / canvas.w;
-	const byHeight = (view.h - 2 * pad - (rows - 1) * gap) / rows / canvas.h;
+	/* Every row, the last too, keeps a gap under it for its numbers. */
+	const byHeight = (view.h - 2 * pad - rows * gap) / rows / canvas.h;
 	return Math.min(byWidth, byHeight);
 }
 /** Lays `count` canvases in the roomiest grid that shows them all, centred. */
@@ -32,7 +33,7 @@ export function gridBoxes(view, canvas, count) {
 	const cellH = canvas.h * scale;
 	const rows = Math.ceil(count / cols);
 	const left = (view.w - (cols * cellW + (cols - 1) * gap)) / 2;
-	const top = (view.h - (rows * cellH + (rows - 1) * gap)) / 2;
+	const top = (view.h - rows * (cellH + gap)) / 2;
 	const boxes = Array.from({ length: count }, (_, i) => ({
 		x: left + i % cols * (cellW + gap),
 		y: top + Math.floor(i / cols) * (cellH + gap),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "3.0.0",
+  "version": "3.1.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",
@@ -271,6 +271,10 @@
       "default": "./src/editor/block-ops.ts"
     },
     "./editor/inline-editor": {
+      "types": [
+        "./src/editor/inline-editor.svelte.d.ts",
+        "./src/editor/inline-editor.svelte"
+      ],
       "svelte": "./src/editor/inline-editor.svelte",
       "default": "./src/editor/inline-editor.svelte"
     },
@@ -291,7 +295,10 @@
       "default": "./src/canvas/index.ts"
     },
     "./canvas/*.svelte": {
-      "types": "./src/canvas/*.svelte",
+      "types": [
+        "./src/canvas/*.svelte.d.ts",
+        "./src/canvas/*.svelte"
+      ],
       "svelte": "./src/canvas/*.svelte",
       "default": "./src/canvas/*.svelte"
     },

package/scripts/svelte-dts.mjs

@@ -3,6 +3,9 @@
 // `.svelte` under node_modules, so without them every component types as `any`.
 
 // prepack writes them, postpack deletes them (`--clean`): left in src, they'd shadow the components.
+// An export whose target is a `.svelte` file lists its `types` as [`x.svelte.d.ts`, `x.svelte`]:
+// from a `.svelte` target TypeScript only looks for `x.d.svelte.ts`, and svelte-check stops
+// faking that file once a real `x.svelte.d.ts` sits beside it, so the import found nothing (3.0.0).
 import { existsSync, mkdtempSync, readdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { createRequire } from "node:module";
 import { tmpdir } from "node:os";

package/src/charts/area-chart.css

@@ -15,6 +15,12 @@
     width: 100%;
   }
 
+  /* A value axis owned by one series wears its colour. Mixed toward the foreground like the
+     figure above it, since a line colour clears 3:1 and 11px text needs 4.5:1. */
+  .hr-area-chart .hr-axis-tone[style*="--hr-axis-tone"] .lc-axis-tick-label {
+    fill: color-mix(in oklab, var(--hr-axis-tone) 70%, var(--foreground, oklch(0.2 0.01 286)));
+  }
+
   .hr-area-chart .empty {
     display: flex;
     align-items: center;

package/src/charts/area-chart.svelte

@@ -23,6 +23,7 @@
 	import { resolveEdgeFade } from "./edge-fade.js";
 	import Figure from "./figure.svelte";
 	import HoverFocus from "./hover-focus.svelte";
+	import { dualAxis } from "./dual-axis.js";
 	import { DOMAIN_MOTION, TOOLTIP_GAP, TOOLTIP_TOP } from "./motion.js";
 	import { valueTick } from "./primitives/chart-utils.js";
 	import Reveal from "./reveal.svelte";
@@ -44,6 +45,11 @@
 		key: keyof TData & string;
 		label?: string;
 		color?: string;
+		/**
+		 * `"right"` plots the series on a second value axis with its own scale, for a measure in a
+		 * different unit or about 10x larger than the rest. It draws as a line, without the fill.
+		 */
+		axis?: "left" | "right";
 	};
 
 	interface Props {
@@ -68,8 +74,15 @@
 		xTicks?: number;
 		/** A target drawn across the plot, like the deal a cost runs up to. */
 		reference?: ChartReference;
-		/** The headline while no point is hovered, like a period total. Defaults to the last point. */
-		resting?: { value: number; label: string };
+		/**
+		 * The headline while no point is hovered, like a period total. Defaults to the last point.
+		 * `values`, keyed by series, shows one figure per series side by side in its colour, so it also reads as the legend.
+		 */
+		resting?: {
+			value?: number;
+			values?: Partial<Record<keyof TData & string, number>>;
+			label: string;
+		};
 		/** Smooths the drawn line by the window shown; the resting figure stays the caller's total. */
 		smoothing?: Smoothing;
 		/** The chart's accessible name. Its data range and values are read after it. */
@@ -146,11 +159,14 @@
 					key: s.key,
 					label: s.label ?? s.key,
 					color: s.color ?? `var(--chart-series-${(i % 6) + 1})`,
+					axis: s.axis === "right" ? ("right" as const) : ("left" as const),
 				}))
 			: yKey
-				? [{ key: yKey, label: yKey, color }]
+				? [{ key: yKey, label: yKey, color, axis: "left" as const }]
 				: [],
 	);
+	const leftSeries = $derived(series.filter((s) => s.axis === "left"));
+	const rightSeries = $derived(series.filter((s) => s.axis === "right"));
 	const smoothed = $derived(
 		smoothing
 			? smoothSeries(
@@ -167,12 +183,41 @@
 	const averageLabel = $derived(mode === "rolling" ? averageName(smoothed.window) : null);
 	const dataMax = $derived.by(() => {
 		if (stacked) {
-			return Math.max(0, ...data.map((d) => series.reduce((s, k) => s + Number(d[k.key] ?? 0), 0)));
+			return Math.max(
+				0,
+				...data.map((d) => leftSeries.reduce((s, k) => s + Number(d[k.key] ?? 0), 0)),
+			);
 		}
-		return Math.max(0, ...data.flatMap((d) => series.map((s) => Number(d[s.key] ?? 0))));
+		return Math.max(0, ...data.flatMap((d) => leftSeries.map((s) => Number(d[s.key] ?? 0))));
 	});
 	// A target above every point would sit off the plot.
 	const yMax = $derived(Math.max(dataMax, reference?.value ?? 0));
+	// A right-axis series lives on the chart's one y scale, rescaled so its domain fills the same
+	// height; the right axis labels that height in the series' own unit.
+	const axes = $derived.by(() => {
+		if (rightSeries.length === 0) return null;
+		const rightMax = Math.max(
+			0,
+			...data.flatMap((d) => rightSeries.map((s) => Number(d[s.key] ?? 0))),
+		);
+		return dualAxis(yMax, rightMax);
+	});
+	const plotKey = (s: { key: string; axis: "left" | "right" }) =>
+		s.axis === "right" ? `__hr_right_${s.key}` : s.key;
+	const plotData = $derived.by((): TData[] => {
+		if (!axes) return data;
+		const factor = axes.left.max / axes.right.max;
+		return data.map((d) => {
+			const row: Record<string, unknown> = { ...d };
+			// A gap stays a gap: null times a factor would draw a 0.
+			for (const s of rightSeries)
+				row[plotKey(s)] = d[s.key] == null ? null : Number(d[s.key]) * factor;
+			return row as TData;
+		});
+	});
+	// An axis takes its series' colour only when one series owns it; with two on a side the colour would name one of them.
+	const leftTone = $derived(axes && leftSeries.length === 1 ? leftSeries[0].color : undefined);
+	const rightTone = $derived(rightSeries.length === 1 ? rightSeries[0].color : undefined);
 	const curve = $derived(smooth ? curveMonotoneX : undefined);
 	const fade = $derived(resolveEdgeFade(edgeFade));
 	const fadeMask = $derived(fade > 0 ? `url(#${uid}-fade)` : undefined);
@@ -206,7 +251,16 @@
 <!-- WHY: leaving only resets the hover readout; the keyboard path is ChartPlot's. -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="hr-area-chart {className ?? ''}" onpointerleave={() => (active = null)}>
-	{#if resting && !active && series[0]}
+	{#if resting?.values && !active}
+		<Figure
+			series={series
+				.filter((s) => resting.values?.[s.key] != null)
+				.map((s) => ({ value: Number(resting.values?.[s.key]), label: s.label, color: s.color }))}
+			eyebrow={resting.label}
+			format={formatValue}
+			size="md"
+		/>
+	{:else if resting && resting.value != null && !active && series[0]}
 		<Figure
 			series={[{ value: resting.value, label: series[0].label, color: series[0].color }]}
 			eyebrow={resting.label}
@@ -226,21 +280,43 @@
 			<div class="empty"><p>No data</p></div>
 		{:else}
 			<Chart
-				{data}
+				data={plotData}
 				x={xKey}
-				y={series[0]?.key}
-				yDomain={[0, yMax || 1]}
-				yNice
-				padding={{ left: 48, bottom: 28, top: 8, right: 12 }}
+				y={series[0] ? plotKey(series[0]) : undefined}
+				yDomain={[0, axes ? axes.left.max : yMax || 1]}
+				yNice={!axes}
+				padding={{ left: 48, bottom: 28, top: 8, right: axes ? 48 : 12 }}
 				tooltipContext={{ mode: "quadtree-x" }}
 				motion={DOMAIN_MOTION}
 				bind:context
 			>
 				<Svg aria-hidden="true">
-					<Axis placement="left" format={(v) => tick(Number(v))} ticks={4} />
+					<g class="hr-axis-tone" style:--hr-axis-tone={leftTone}>
+						<Axis
+							placement="left"
+							format={(v) => tick(Number(v))}
+							ticks={axes ? axes.left.ticks : 4}
+						/>
+					</g>
+					{#if axes}
+						<g class="hr-axis-tone" style:--hr-axis-tone={rightTone}>
+							<Axis
+								placement="right"
+								domain={[0, axes.right.max]}
+								format={(v) => tick(Number(v))}
+								ticks={axes.right.ticks}
+							/>
+						</g>
+					{/if}
 					<Axis placement="bottom" format={(v) => formatX(v)} ticks={ticksForWidth(xTicks)} />
 					<g class="hr-area-grid">
-						<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />
+						<Axis
+							placement="left"
+							grid
+							rule={false}
+							ticks={axes ? axes.left.ticks : 4}
+							format={() => ""}
+						/>
 					</g>
 					{#if fade > 0}
 						<EdgeFade id="{uid}-fade" amount={fade} />
@@ -261,17 +337,39 @@
 								<!-- WHY `y1` and not `y`: layerchart's Area has no `y` prop, so every
 							     series drew the first series' shape and the gradients stacked on
 							     one path. See `Area.shared.svelte.js`. -->
-								<Area y1={s.key} {curve} fill="url(#{uid}-{i})" mask={fadeMask} />
-								<Spline y={s.key} {curve} style="stroke: {s.color}; fill: none" stroke-width="2" />
+								{#if s.axis === "left"}
+									<Area y1={s.key} {curve} fill="url(#{uid}-{i})" mask={fadeMask} />
+								{/if}
+								<Spline
+									y={plotKey(s)}
+									{curve}
+									style="stroke: {s.color}; fill: none"
+									stroke-width="2"
+								/>
 							{/each}
 						</Reveal>
 						{#snippet segment()}
 							{#each series as s (s.key)}
-								<Spline y={s.key} {curve} style="stroke: {s.color}; fill: none" stroke-width="2" />
+								<Spline
+									y={plotKey(s)}
+									{curve}
+									style="stroke: {s.color}; fill: none"
+									stroke-width="2"
+								/>
 							{/each}
 						{/snippet}
 					</HoverFocus>
-					<Highlight points lines={{ style: `stroke: url(#${uid}-cross)` }} />
+					{#if axes}
+						<!-- WHY `data`: without it Highlight places dots from the tooltip's raw values, off the rescaled right series. -->
+						<Highlight lines={{ style: `stroke: url(#${uid}-cross)` }} />
+						{#if context?.tooltip.data}
+							{#each series as s (s.key)}
+								<Highlight data={context.tooltip.data} y={plotKey(s)} points={{ fill: s.color }} />
+							{/each}
+						{/if}
+					{:else}
+						<Highlight points lines={{ style: `stroke: url(#${uid}-cross)` }} />
+					{/if}
 				</Svg>
 				<Tooltip.Root x="data" y={TOOLTIP_TOP} xOffset={TOOLTIP_GAP}>
 					{#snippet children({ data: d })}

package/src/charts/area-chart.svelte.d.ts

@@ -11,6 +11,11 @@ declare function $$render<TData extends Record<string, unknown>>(): {
             key: keyof TData & string;
             label?: string;
             color?: string;
+            /**
+             * `"right"` plots the series on a second value axis with its own scale, for a measure in a
+             * different unit or about 10x larger than the rest. It draws as a line, without the fill.
+             */
+            axis?: "left" | "right";
         }[];
         color?: string;
         height?: number;
@@ -25,9 +30,13 @@ declare function $$render<TData extends Record<string, unknown>>(): {
         xTicks?: number;
         /** A target drawn across the plot, like the deal a cost runs up to. */
         reference?: ChartReference;
-        /** The headline while no point is hovered, like a period total. Defaults to the last point. */
+        /**
+         * The headline while no point is hovered, like a period total. Defaults to the last point.
+         * `values`, keyed by series, shows one figure per series side by side in its colour, so it also reads as the legend.
+         */
         resting?: {
-            value: number;
+            value?: number;
+            values?: Partial<Record<keyof TData & string, number>>;
             label: string;
         };
         /** Smooths the drawn line by the window shown; the resting figure stays the caller's total. */

package/src/charts/chart-tokens.css

@@ -4,8 +4,8 @@
    `@heyramzi/ui/charts/dashboard` keeps its card edge without the barrel. */
 
 @layer components {
-  /* Shared chart tokens, held at zero specificity by `:where()`. The reveal pair
-     is the entrance every chart shares; motion.ts mirrors its duration. */
+  /* Shared chart tokens, held at zero specificity by `:where()`. The tooltip portals to
+     `body`, outside its chart, so it is listed for its series dots to match the lines. */
   :where(
     .hr-area-chart,
     .hr-bar-chart,
@@ -17,7 +17,8 @@
     .hr-ts-chart,
     .hr-donut-chart,
     .hr-ring,
-    .hr-gauge
+    .hr-gauge,
+    .lc-tooltip-container
   ) {
     /* Series palette: brand, then hues round the wheel, blue and orange first for colour
        blindness. Each is pulled 15% toward the text, clearing 3:1 on the card in both themes. */

package/src/charts/dual-axis.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vite-plus/test";
+import { dualAxis, niceStep } from "./dual-axis.js";
+
+describe("niceStep", () => {
+  it("rounds up to 1, 2, 2.5 or 5 times a power of ten", () => {
+    expect(niceStep(40)).toBe(50);
+    expect(niceStep(1500)).toBe(2000);
+    expect(niceStep(2100)).toBe(2500);
+    expect(niceStep(0.3)).toBeCloseTo(0.5);
+    expect(niceStep(0)).toBe(1);
+  });
+});
+
+describe("dualAxis", () => {
+  it("gives clicks and impressions the same number of grid lines", () => {
+    const { left, right } = dualAxis(160, 6000);
+    expect(left).toEqual({ max: 200, ticks: [0, 50, 100, 150, 200] });
+    expect(right).toEqual({ max: 8000, ticks: [0, 2000, 4000, 6000, 8000] });
+  });
+
+  it("keeps every point inside both domains", () => {
+    for (const [l, r] of [
+      [7, 9_999],
+      [123_456, 3],
+      [1, 1],
+      [0.42, 87],
+    ]) {
+      const { left, right } = dualAxis(l, r);
+      expect(left.max).toBeGreaterThanOrEqual(l);
+      expect(right.max).toBeGreaterThanOrEqual(r);
+      expect(left.ticks.length).toBe(right.ticks.length);
+    }
+  });
+
+  it("draws one interval for an empty series instead of dividing by zero", () => {
+    const { left, right } = dualAxis(0, 0);
+    expect(left.ticks).toEqual([0, 1]);
+    expect(right.ticks).toEqual([0, 1]);
+  });
+});

package/src/charts/dual-axis.ts

@@ -0,0 +1,43 @@
+/**
+ * Two value axes that share one set of grid lines.
+ *
+ * A right axis with its own nice ticks lands its labels between the left axis's grid lines, so a
+ * reader can't trace either. Both axes here get the same number of intervals: the left picks a nice
+ * step for its data, and the right picks the smallest nice step that fits its data in that many.
+ */
+
+export type AxisScale = { max: number; ticks: number[] };
+
+const NICE = [1, 2, 2.5, 5, 10];
+
+/** The smallest 1, 2, 2.5 or 5 times a power of ten that is at least `raw`. */
+export function niceStep(raw: number): number {
+  if (!(raw > 0) || !Number.isFinite(raw)) return 1;
+  const power = 10 ** Math.floor(Math.log10(raw));
+  // WHY the epsilon: 0.3 / 0.1 is 2.9999999999999996, which would skip 3 x 0.1 for the next step.
+  const multiple = NICE.find((m) => m * power >= raw * (1 - 1e-9)) ?? 10;
+  return multiple * power;
+}
+
+function ticksOf(step: number, count: number): number[] {
+  // Rounded so 0.1 x 3 reads 0.3 on the axis, not 0.30000000000000004.
+  return Array.from({ length: count + 1 }, (_, i) => Number((i * step).toPrecision(12)));
+}
+
+/**
+ * Left and right domains from 0, with the same tick count so both axes sit on one grid.
+ * `target` is the number of intervals wanted; the left data may round it to one more or less.
+ */
+export function dualAxis(
+  leftMax: number,
+  rightMax: number,
+  target = 4,
+): { left: AxisScale; right: AxisScale } {
+  const leftStep = niceStep(Math.max(0, leftMax) / target);
+  const count = Math.max(1, Math.ceil(Math.max(0, leftMax) / leftStep - 1e-9));
+  const rightStep = niceStep(Math.max(0, rightMax) / count);
+  return {
+    left: { max: leftStep * count, ticks: ticksOf(leftStep, count) },
+    right: { max: rightStep * count, ticks: ticksOf(rightStep, count) },
+  };
+}

package/src/editor/editor-toolbar.svelte

@@ -58,6 +58,14 @@
 	// =========================
 	// FUNCTIONS
 	// =========================
+	/**
+	 * Active state for a toolbar button. `editor` is the same object every transaction, so a
+	 * derived of it never re-runs the template; reading `tick` here does.
+	 */
+	function isActive(name: string, attributes?: Record<string, unknown>): boolean {
+		return tick >= 0 && (editor?.isActive(name, attributes) ?? false);
+	}
+
 	/** Opens the link field, or removes the link under the cursor. The editor binds Cmd+K to it. */
 	export function toggleLink() {
 		if (!editor) return;
@@ -128,7 +136,7 @@
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand font-heading text-xs font-bold"
-				aria-pressed={editor.isActive("heading", { level: 1 })}
+				aria-pressed={isActive("heading", { level: 1 })}
 				onclick={() => editor?.chain().focus().toggleHeading({ level: 1 }).run()}
 				title="Heading 1"
 			>
@@ -139,7 +147,7 @@
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand font-heading text-xs font-bold"
-				aria-pressed={editor.isActive("heading", { level: 2 })}
+				aria-pressed={isActive("heading", { level: 2 })}
 				onclick={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()}
 				title="Heading 2"
 			>
@@ -150,7 +158,7 @@
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand font-heading text-xs font-bold"
-				aria-pressed={editor.isActive("heading", { level: 3 })}
+				aria-pressed={isActive("heading", { level: 3 })}
 				onclick={() => editor?.chain().focus().toggleHeading({ level: 3 }).run()}
 				title="Heading 3"
 			>
@@ -164,7 +172,7 @@
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				aria-pressed={editor.isActive("bold")}
+				aria-pressed={isActive("bold")}
 				onclick={() => editor?.chain().focus().toggleBold().run()}
 				title="Bold (Cmd+B)"
 			>
@@ -175,7 +183,7 @@
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				aria-pressed={editor.isActive("italic")}
+				aria-pressed={isActive("italic")}
 				onclick={() => editor?.chain().focus().toggleItalic().run()}
 				title="Italic (Cmd+I)"
 			>
@@ -186,7 +194,7 @@
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				aria-pressed={editor.isActive("strike")}
+				aria-pressed={isActive("strike")}
 				onclick={() => editor?.chain().focus().toggleStrike().run()}
 				title="Strikethrough"
 			>
@@ -195,7 +203,7 @@
 
 			<div class="toolbar-divider"></div>
 
-			{#if editor.isActive("link")}
+			{#if isActive("link")}
 				<Button
 					variant="ghost"
 					size="sm"
@@ -227,7 +235,7 @@
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				aria-pressed={editor.isActive("bulletList")}
+				aria-pressed={isActive("bulletList")}
 				onclick={() => editor?.chain().focus().toggleBulletList().run()}
 				title="Bullet list"
 			>
@@ -238,7 +246,7 @@
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				aria-pressed={editor.isActive("orderedList")}
+				aria-pressed={isActive("orderedList")}
 				onclick={() => editor?.chain().focus().toggleOrderedList().run()}
 				title="Ordered list"
 			>
@@ -249,7 +257,7 @@
 				size="sm"
 				icon
 				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				aria-pressed={editor.isActive("blockquote")}
+				aria-pressed={isActive("blockquote")}
 				onclick={() => editor?.chain().focus().toggleBlockquote().run()}
 				title="Quote"
 			>
@@ -264,7 +272,7 @@
 					size="sm"
 					icon
 					class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-					aria-pressed={editor.isActive("youtube")}
+					aria-pressed={isActive("youtube")}
 					onclick={onInsertYoutube}
 					title="Insert YouTube video"
 				>

package/src/editor/editor.svelte

@@ -388,7 +388,7 @@
 <!-- =========================== -->
 <div
 	class="editor-wrapper"
-	class:focused={editor?.isFocused && !isPage}
+	class:focused={tick >= 0 && editor?.isFocused && !isPage}
 	class:page={isPage}
 	class:doc-surface={isPage}
 	style="--editor-min-height: {minHeight};"

package/src/slides/Deck.svelte

@@ -72,6 +72,7 @@
 			return labels;
 		},
 		transition: viewTransition,
+		zoomMs,
 	});
 	controller = deck;
 	setContext(DECK_KEY, deck);
@@ -88,6 +89,14 @@
 		run.finished.finally(() => delete document.documentElement.dataset.deckVt);
 	}
 
+	/* The overview zoom's length, read from the CSS so it follows the token. 0 under reduced motion. */
+	function zoomMs() {
+		if (!root || matchMedia("(prefers-reduced-motion: reduce)").matches) return 0;
+		const value = getComputedStyle(root).getPropertyValue("--deck-t-zoom").trim();
+		const ms = Number.parseFloat(value) * (value.endsWith("ms") ? 1 : 1000);
+		return Number.isFinite(ms) ? ms : 0;
+	}
+
 	onMount(() => deck.mount());
 
 	$effect(() => deck.listen((position) => onIndexChange?.(position.index, position.step)));
@@ -175,7 +184,7 @@
 	data-deck={id}
 	data-view={deck.view}
 	data-transition={transition}
-	data-morphing={deck.morphing || undefined}
+	data-zoom={deck.zoom ? (deck.zoom.running ? "run" : "hold") : undefined}
 	{onpointerdown}
 	{onpointerup}
 >
@@ -185,7 +194,8 @@
 		{:else}
 			{@render children?.()}
 		{/if}
-		{#if deck.overview}
+		<!-- The tiles mount once the camera starts pulling back, and fade in as it lands. -->
+		{#if deck.overview && !deck.zoom?.framed}
 			<Overview {deck} returnFocus={root} />
 		{/if}
 	</div>

package/src/slides/Overview.svelte

@@ -60,7 +60,7 @@
 			padding: 0;
 			list-style: none;
 			/* The ring and number appear once the thumbnails have landed. */
-			animation: tiles-in var(--deck-t-quick) linear var(--deck-t-morph) backwards;
+			animation: tiles-in var(--deck-t-quick) linear var(--deck-t-zoom) backwards;
 		}
 		@media (prefers-reduced-motion: reduce) {
 			.deck__tiles {
@@ -94,14 +94,20 @@
 		.deck__tile:focus-visible {
 			outline-color: var(--deck-fg);
 		}
+		/*
+		 * The number sits in the gap under its thumbnail, never on it: straddling the edge put
+		 * half of it under the slide. 7px clears the 5px ring, and 7 + 18 fits the grid's 26px gap.
+		 */
 		.deck__tile-n {
 			position: absolute;
-			bottom: -12px;
+			top: calc(100% + 7px);
 			left: 50%;
-			min-width: 22px;
+			z-index: 1;
+			box-sizing: border-box;
+			min-width: 24px;
 			transform: translateX(-50%);
 			padding: 3px 6px;
-			font: 600 11px/1 var(--deck-font);
+			font: 600 12px/1 var(--deck-font);
 			font-variant-numeric: tabular-nums;
 			text-align: center;
 			color: var(--deck-fg);

package/src/slides/README.md

@@ -43,7 +43,7 @@ Keys: arrows, Space (Shift+Space back), PageUp/PageDown, Home/End, `O` overview,
 
 ## Theming
 
-Set variables on `.deck`: `--deck-bg`, `--deck-fg`, `--deck-accent`, `--deck-on-accent`, `--deck-font`, `--deck-font-display`, `--deck-pad`, `--deck-text-*` (design px) and the timing tokens `--deck-t-slide`, `--deck-t-morph`, `--deck-stagger`, `--deck-ease`. They default to the `@heyramzi/ui` motion tokens when present. Motion is transform and opacity only and stops under `prefers-reduced-motion`.
+Set variables on `.deck`: `--deck-bg`, `--deck-fg`, `--deck-accent`, `--deck-on-accent`, `--deck-font`, `--deck-font-display`, `--deck-pad`, `--deck-text-*` (design px) and the timing tokens `--deck-t-slide`, `--deck-t-morph`, `--deck-t-zoom` (the overview zoom), `--deck-stagger`, `--deck-ease`. They default to the `@heyramzi/ui` motion tokens when present. `--deck-accent` and `--deck-on-accent` follow the app's `--primary` and `--primary-foreground`, and fall back to the deck's ink. Motion is transform and opacity only and stops under `prefers-reduced-motion`.
 
 ## Data-driven decks
 

package/src/slides/Slide.svelte

@@ -152,19 +152,19 @@
 			transition-delay: 0s;
 		}
 
-		/* The overview shows every slide. They all leave the stack at once and settle in turn, later ones slower. */
-		:global(.deck[data-view="overview"]) .slide {
+		/*
+		 * The overview shows every slide. Opening and closing move them as one rigid grid, like a
+		 * camera pulling back or pushing in, so no slide gets its own delay.
+		 */
+		:global(.deck[data-view="overview"]) .slide,
+		:global(.deck[data-zoom]) .slide {
 			visibility: visible;
+			transition-delay: 0s;
 		}
-		:global(.deck[data-morphing]) .slide {
+		:global(.deck[data-zoom="run"]) .slide {
 			transition:
-				visibility 0s linear calc(var(--deck-t-morph) + 10 * var(--deck-stagger)),
-				transform calc(var(--deck-t-morph) + min(var(--i), 10) * var(--deck-stagger))
-					var(--deck-ease);
-		}
-		/* Opening shows the slides at once, so only closing waits before hiding them. */
-		:global(.deck[data-morphing][data-view="overview"]) .slide {
-			transition-delay: 0s;
+				visibility 0s,
+				transform var(--deck-t-zoom) var(--deck-ease);
 		}
 
 		.slide__surface {
@@ -178,11 +178,17 @@
 			font-family: var(--deck-font);
 			animation: var(--deck-t-slide) var(--deck-ease) backwards;
 		}
-		:global(.deck[data-view="overview"]) .slide__surface {
+		/* Framed on one slide the grid looks like that slide, so it keeps a slide's square corners. */
+		:global(.deck[data-view="overview"]:not([data-zoom="hold"])) .slide__surface {
 			/* Design px, so divide by the scale to get the same corner on every thumbnail. */
 			border-radius: calc(10px / var(--slide-scale, 1));
 			box-shadow: 0 0 0 calc(1px / var(--slide-scale, 1)) var(--deck-line);
 		}
+		:global(.deck[data-zoom="run"]) .slide__surface {
+			transition:
+				border-radius var(--deck-t-zoom) var(--deck-ease),
+				box-shadow var(--deck-t-zoom) var(--deck-ease);
+		}
 
 		.slide__surface[data-align="center"],
 		.slide__surface[data-align="start"] {

package/src/slides/deck-controller.svelte.ts

@@ -44,16 +44,34 @@ export type ControllerOptions = {
   labels?: Partial<DeckLabels>;
   /** Wraps a position change so a View Transition can snapshot around it. */
   transition?: (update: () => void) => void;
+  /** How long the overview zoom plays, in ms. 0, or left out, swaps at once. */
+  zoomMs?: () => number;
 };
 
+/**
+ * The overview zoom while it plays. `index` is the slide the camera frames. `framed` puts that
+ * slide in its full-size spot with the grid around it, and `running` lets the boxes transition.
+ */
+export type Zoom = { index: number; framed: boolean; running: boolean };
+
 /** Height the controls bar takes at the bottom of the overview, in px. */
 const CONTROLS_ROOM = 56;
 
-/** How long the overview morph flag stays up, a little past the longest stagger. */
-const MORPH_MS = 900;
-
 const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
 
+/**
+ * Where `cell` lands when the camera moves `target` onto `fit`. Every box shares one scale and
+ * shift, and a transform tween is linear in both, so the grid stays rigid while it zooms.
+ */
+function frame(cell: Box, target: Box, fit: Box): Box {
+  const k = fit.scale / target.scale;
+  return {
+    x: fit.x + (cell.x - target.x) * k,
+    y: fit.y + (cell.y - target.y) * k,
+    scale: cell.scale * k,
+  };
+}
+
 function isEditable(el: HTMLElement) {
   return el.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(el.tagName);
 }
@@ -71,12 +89,13 @@ export class DeckController {
   /** The highlighted thumbnail in the overview, as an index among the visible slides. */
   cursor = $state(0);
   direction = $state<1 | -1>(1);
-  morphing = $state(false);
+  zoom = $state<Zoom | null>(null);
   size = $state<Size>({ w: 0, h: 0 });
 
   readonly options!: ControllerOptions;
   #listeners = new Set<Listener>();
   #timer: ReturnType<typeof setTimeout> | undefined;
+  #frame = 0;
 
   constructor(options: ControllerOptions) {
     this.options = options;
@@ -116,8 +135,13 @@ export class DeckController {
 
   /** Where slide `index` sits right now: centred to fit, or in its overview cell. */
   boxOf(index: number): Box | undefined {
-    if (!this.overview) return this.fit;
-    return this.grid.boxes[this.visible.indexOf(index)];
+    const zoom = this.zoom;
+    const cell = this.grid.boxes[this.visible.indexOf(index)];
+    if (zoom?.framed) {
+      const target = this.grid.boxes[this.visible.indexOf(zoom.index)];
+      return cell && target ? frame(cell, target, this.fit) : this.fit;
+    }
+    return this.overview || zoom ? cell : this.fit;
   }
 
   register(entry: SlideEntry): () => void {
@@ -137,7 +161,7 @@ export class DeckController {
   }
 
   mount(): () => void {
-    return () => clearTimeout(this.#timer);
+    return () => this.#stopZoom();
   }
 
   /** Which deck hears a key is the page's call: Deck passes only keys from focus inside it. */
@@ -150,14 +174,16 @@ export class DeckController {
     this.options.step = position.step;
   }
 
-  commit(target: Position | null, source: Source = "local") {
+  /** `animate: false` skips the slide transition, for a move the overview zoom already shows. */
+  commit(target: Position | null, source: Source = "local", animate = true) {
     if (!target) return;
     const from = this.position;
     const to = settle(this.slides, target);
     if (to.index === from.index && to.step === from.step) return;
     this.direction = to.index >= from.index ? 1 : -1;
     const apply = () => this.#write(to);
-    if (to.index !== from.index && this.options.transition) this.options.transition(apply);
+    if (animate && to.index !== from.index && this.options.transition)
+      this.options.transition(apply);
     else apply();
     for (const listener of this.#listeners) listener(to, source);
   }
@@ -174,25 +200,45 @@ export class DeckController {
     this.commit({ index, step }, source);
   }
 
+  /**
+   * Opening zooms the camera out from the current slide to the whole grid. Closing zooms into
+   * the current slide, so `select` moves there first.
+   */
   toggleOverview(force?: boolean) {
     const open = force ?? !this.overview;
     if (open === this.overview) return;
-    if (open) this.cursor = Math.max(0, this.visible.indexOf(this.position.index));
+    const index = this.position.index;
+    if (open) this.cursor = Math.max(0, this.visible.indexOf(index));
     this.view = open ? "overview" : "slide";
-    this.#morph();
+    this.#stopZoom();
+    const ms = this.options.zoomMs?.() ?? 0;
+    if (ms <= 0 || !this.visible.includes(index)) return;
+
+    /*
+     * Each way paints its start state first and moves on a later frame. Moved in the same
+     * flush, a style read in between (the overview handing focus back) commits the boxes
+     * before the transition rule is on, and the zoom jumps to its end.
+     */
+    this.zoom = { index, framed: open, running: !open };
+    this.#frame = requestAnimationFrame(() => {
+      this.#frame = requestAnimationFrame(() => {
+        this.zoom = { index, framed: !open, running: true };
+        this.#timer = setTimeout(() => this.#stopZoom(), ms);
+      });
+    });
   }
 
   /** Leaves the overview on slide `index`. Picking the current slide keeps its step. */
   select(index: number) {
-    this.toggleOverview(false);
     const keep = index === this.position.index;
-    this.go(index, keep ? this.position.step : 0);
+    this.commit({ index, step: keep ? this.position.step : 0 }, "local", false);
+    this.toggleOverview(false);
   }
 
-  #morph() {
-    this.morphing = true;
+  #stopZoom() {
     clearTimeout(this.#timer);
-    this.#timer = setTimeout(() => (this.morphing = false), MORPH_MS);
+    cancelAnimationFrame(this.#frame);
+    this.zoom = null;
   }
 
   #moveCursor(to: number) {

package/src/slides/layout.ts

@@ -25,7 +25,8 @@ function scaleFor(
 ): number {
   const rows = Math.ceil(count / cols);
   const byWidth = (view.w - 2 * pad - (cols - 1) * gap) / cols / canvas.w;
-  const byHeight = (view.h - 2 * pad - (rows - 1) * gap) / rows / canvas.h;
+  /* Every row, the last too, keeps a gap under it for its numbers. */
+  const byHeight = (view.h - 2 * pad - rows * gap) / rows / canvas.h;
   return Math.min(byWidth, byHeight);
 }
 
@@ -47,7 +48,7 @@ export function gridBoxes(view: Size, canvas: Canvas, count: number): Grid {
   const cellH = canvas.h * scale;
   const rows = Math.ceil(count / cols);
   const left = (view.w - (cols * cellW + (cols - 1) * gap)) / 2;
-  const top = (view.h - (rows * cellH + (rows - 1) * gap)) / 2;
+  const top = (view.h - rows * (cellH + gap)) / 2;
 
   const boxes = Array.from({ length: count }, (_, i) => ({
     x: left + (i % cols) * (cellW + gap),

package/src/slides/theme.css

@@ -2,7 +2,8 @@
 
 /*
  * Everything global to a deck, in design px since the whole canvas scales, and in flat
- * hex because Chromium's PDF pipeline shifts oklch.
+ * hex because Chromium's PDF pipeline shifts oklch. The accent comes from the host app's
+ * `--primary`, which is often oklch, so it goes through `color-mix(in srgb)` to land as sRGB.
  */
 
 @layer components {
@@ -12,8 +13,30 @@
 
     --deck-bg: light-dark(#f2f1ec, #0e1014);
     --deck-fg: light-dark(#15171b, #f3f1ea);
-    --deck-accent: light-dark(#3e6b00, #c8f15a);
-    --deck-on-accent: light-dark(#f6f6f0, #0e1014);
+    /* Without a `--primary` the accent is the deck's own ink, so nothing ships a colour the app never chose. */
+    /*
+     * `--primary` follows the page's theme and the deck sets its own scheme: a dark deck on a
+     * light page got the page's dark primary on a dark slide (2.7:1). The brand pair is picked
+     * by the deck's scheme; `--primary` is the fallback for an app without the kit palette.
+     */
+    --deck-accent: color-mix(
+      in srgb,
+      light-dark(
+          var(--brand-primary, var(--primary, #15171b)),
+          var(--brand-primary-on-dark, var(--primary, #f3f1ea))
+        )
+        100%,
+      #000
+    );
+    --deck-on-accent: color-mix(
+      in srgb,
+      light-dark(
+          var(--brand-primary-foreground, var(--primary-foreground, #f6f6f0)),
+          var(--brand-primary-foreground-on-dark, var(--primary-foreground, #0e1014))
+        )
+        100%,
+      #000
+    );
     --deck-muted: color-mix(in srgb, var(--deck-fg) 66%, transparent);
     --deck-line: color-mix(in srgb, var(--deck-fg) 14%, transparent);
     --deck-surface: color-mix(in srgb, var(--deck-fg) 6%, transparent);
@@ -32,6 +55,8 @@
 
     --deck-t-slide: var(--duration-fast, 250ms);
     --deck-t-morph: var(--duration-slow, 300ms);
+    /* The overview zoom moves the whole canvas, so it takes the overlay length, not the UI ceiling. */
+    --deck-t-zoom: var(--duration-overlay, 500ms);
     --deck-t-quick: var(--duration-quick, 150ms);
     --deck-stagger: var(--duration-stagger, 40ms);
     --deck-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
@@ -124,8 +149,12 @@
     animation-name: deck-zoom;
   }
 
-  .deck[data-morphing] .slide__surface {
-    animation: none !important;
+  /*
+   * The zoom already shows the slide arriving, so its enter animation finishes at once. A
+   * 0s duration, not `animation: none`, which would replay the enter when the zoom ends.
+   */
+  .deck[data-zoom] .slide__surface {
+    animation-duration: 0s !important;
   }
 
   /* A morph runs on the whole page, so it gets the deck's timing while it plays. */