@heyramzi/ui 2.1.0 → 2.2.0

package/src/canvas/ui/StylePanel.svelte

@@ -1,112 +1,123 @@
 <script lang="ts" module>
-import type { PenColor } from "../pen/types.js";
+	import type { PenColor } from "../pen/types.js";
 
-export interface StyleLabels {
-	panel: string;
-	fill: string;
-	stroke: string;
-	/** The stroke row's name when the selection has no outline, only ink, like text. */
-	colour: string;
-	none: string;
-	width: string;
-	/** Thin, regular, thick. */
-	widths: readonly [string, string, string];
-	font: string;
-	regular: string;
-	bold: string;
-	colors: Record<PenColor, string>;
-}
+	export interface StyleLabels {
+		panel: string;
+		fill: string;
+		stroke: string;
+		/** The stroke row's name when the selection has no outline, only ink, like text. */
+		colour: string;
+		none: string;
+		width: string;
+		/** Thin, regular, thick. */
+		widths: readonly [string, string, string];
+		font: string;
+		regular: string;
+		bold: string;
+		colors: Record<PenColor, string>;
+	}
 </script>
 
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { Panel, useStore } from "@xyflow/svelte";
-import type { CanvasOp } from "../ops/ops.js";
-import {
-	FONT_SIZES,
-	styleOps,
-	summarizeStyle,
-	type FontWeight,
-	type StyleNode,
-	type StyleValues,
-	type WidthLevel,
-} from "../editor/style.js";
-import { PEN_COLORS } from "../pen/types.js";
-import "../pen/pen.css";
-import { placeBeside, type Box } from "./place-panel.js";
-import "./canvas-ui.css";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { Panel, useStore } from "@xyflow/svelte";
+	import type { CanvasOp } from "../ops/ops.js";
+	import {
+		FONT_SIZES,
+		styleOps,
+		summarizeStyle,
+		type FontWeight,
+		type StyleNode,
+		type StyleValues,
+		type WidthLevel,
+	} from "../editor/style.js";
+	import { PEN_COLORS } from "../pen/types.js";
+	import "../pen/pen.css";
+	import { placeBeside, type Box } from "./place-panel.js";
+	import "./canvas-ui.css";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	/** The selected cards. The panel hides when none of them takes a style. */
-	nodes: readonly StyleNode[];
-	/** The node type of a frame or group, whose fill and outline the panel sets. */
-	frameType?: string;
-	labels: StyleLabels;
-	/** One call per change, so each is one undo step. */
-	commit: (ops: CanvasOp[]) => void;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** The selected cards. The panel hides when none of them takes a style. */
+		nodes: readonly StyleNode[];
+		/** The node type of a frame or group, whose fill and outline the panel sets. */
+		frameType?: string;
+		labels: StyleLabels;
+		/** One call per change, so each is one undo step. */
+		commit: (ops: CanvasOp[]) => void;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { nodes, frameType = "group", labels, commit }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { nodes, frameType = "group", labels, commit }: Props = $props();
 
-// =========================
-// STATE
-// =========================
-const store = useStore();
-let barWidth = $state(0);
-let barHeight = $state(0);
+	// =========================
+	// STATE
+	// =========================
+	const store = useStore();
+	let barWidth = $state(0);
+	let barHeight = $state(0);
 
-// =========================
-// DERIVED
-// =========================
-const WEIGHTS: readonly FontWeight[] = ["regular", "bold"];
-const LEVELS: readonly WidthLevel[] = [0, 1, 2];
+	// =========================
+	// DERIVED
+	// =========================
+	const WEIGHTS: readonly FontWeight[] = ["regular", "bold"];
+	const LEVELS: readonly WidthLevel[] = [0, 1, 2];
 
-let summary = $derived(summarizeStyle(nodes, frameType));
-let strokeLabel = $derived(summary?.controls.has("fill") || summary?.controls.has("width") ? labels.stroke : labels.colour);
+	let summary = $derived(summarizeStyle(nodes, frameType));
+	let strokeLabel = $derived(
+		summary?.controls.has("fill") || summary?.controls.has("width") ? labels.stroke : labels.colour,
+	);
 
-// The selection in screen pixels, read from the live viewport so the panel follows a pan, a zoom and a drag.
-let selection = $derived.by<Box | null>(() => {
-	const { x, y, zoom } = store.viewport;
-	let box: Box | null = null;
-	for (const node of nodes) {
-		const internal = store.nodeLookup.get(node.id);
-		if (!internal) continue;
-		const at = internal.internals.positionAbsolute;
-		const width = internal.measured.width ?? internal.width ?? 0;
-		const height = internal.measured.height ?? internal.height ?? 0;
-		const left = at.x * zoom + x;
-		const top = at.y * zoom + y;
-		const right = left + width * zoom;
-		const bottom = top + height * zoom;
-		box = box
-			? { left: Math.min(box.left, left), top: Math.min(box.top, top), right: Math.max(box.right, right), bottom: Math.max(box.bottom, bottom) }
-			: { left, top, right, bottom };
-	}
-	return box;
-});
+	// The selection in screen pixels, read from the live viewport so the panel follows a pan, a zoom and a drag.
+	let selection = $derived.by<Box | null>(() => {
+		const { x, y, zoom } = store.viewport;
+		let box: Box | null = null;
+		for (const node of nodes) {
+			const internal = store.nodeLookup.get(node.id);
+			if (!internal) continue;
+			const at = internal.internals.positionAbsolute;
+			const width = internal.measured.width ?? internal.width ?? 0;
+			const height = internal.measured.height ?? internal.height ?? 0;
+			const left = at.x * zoom + x;
+			const top = at.y * zoom + y;
+			const right = left + width * zoom;
+			const bottom = top + height * zoom;
+			box = box
+				? {
+						left: Math.min(box.left, left),
+						top: Math.min(box.top, top),
+						right: Math.max(box.right, right),
+						bottom: Math.max(box.bottom, bottom),
+					}
+				: { left, top, right, bottom };
+		}
+		return box;
+	});
 
-// Beside the selection on the side with room, never over its grips. Null leaves the panel docked at the right edge.
-let placed = $derived(
-	selection && barWidth > 0
-		? placeBeside(selection, { width: barWidth, height: barHeight }, { width: store.width, height: store.height })
-		: null,
-);
+	// Beside the selection on the side with room, never over its grips. Null leaves the panel docked at the right edge.
+	let placed = $derived(
+		selection && barWidth > 0
+			? placeBeside(
+					selection,
+					{ width: barWidth, height: barHeight },
+					{ width: store.width, height: store.height },
+				)
+			: null,
+	);
 
-// =========================
-// FUNCTIONS
-// =========================
-function change(next: Partial<StyleValues>) {
-	const ops = styleOps(nodes, next, frameType);
-	if (ops.length > 0) commit(ops);
-}
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function change(next: Partial<StyleValues>) {
+		const ops = styleOps(nodes, next, frameType);
+		if (ops.length > 0) commit(ops);
+	}
 </script>
 
 <!-- =========================== -->
@@ -116,13 +127,19 @@ function change(next: Partial<StyleValues>) {
 	<Panel
 		position="center-right"
 		class="cv-dock cv-style-dock {placed ? 'is-placed' : ''}"
-		style={placed ? `--cv-style-x:${Math.round(placed.x)}px;--cv-style-y:${Math.round(placed.y)}px` : undefined}
+		style={placed
+			? `--cv-style-x:${Math.round(placed.x)}px;--cv-style-y:${Math.round(placed.y)}px`
+			: undefined}
 		data-side={placed?.side}
 	>
 		<div
 			bind:offsetWidth={barWidth}
 			bind:offsetHeight={barHeight}
-			class="cv-bar cv-side cv-style t-enter" role="toolbar" aria-label={labels.panel} data-testid="style-panel">
+			class="cv-bar cv-side cv-style t-enter"
+			role="toolbar"
+			aria-label={labels.panel}
+			data-testid="style-panel"
+		>
 			{#if summary.controls.has("fill")}
 				<div class="cv-section" role="group" aria-label={labels.fill} data-testid="style-fill">
 					<span class="cv-label" aria-hidden="true">{labels.fill}</span>
@@ -199,8 +216,8 @@ function change(next: Partial<StyleValues>) {
 								class="cv-btn cv-figure"
 								aria-pressed={summary.values.fontSize === size}
 								aria-label="{labels.font}: {size}"
-								onclick={() => change({ fontSize: size })}
-							>{size}</button>
+								onclick={() => change({ fontSize: size })}>{size}</button
+							>
 						{/each}
 						{#each WEIGHTS as weight (weight)}
 							<button
@@ -210,8 +227,8 @@ function change(next: Partial<StyleValues>) {
 								aria-pressed={summary.values.fontWeight === weight}
 								aria-label={weight === "bold" ? labels.bold : labels.regular}
 								data-tip={weight === "bold" ? labels.bold : labels.regular}
-								onclick={() => change({ fontWeight: weight })}
-							>Aa</button>
+								onclick={() => change({ fontWeight: weight })}>Aa</button
+							>
 						{/each}
 					</div>
 				</div>

package/src/canvas/ui/canvas-grid.svelte

@@ -1,148 +1,156 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { useStore } from "@xyflow/svelte";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { useStore } from "@xyflow/svelte";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	/** Flow units between dots at the finest level, the same as the snap grid. */
-	gap?: number;
-	/** Dot diameter in flow units at the finest level, so it grows and shrinks with zoom. */
-	size?: number;
-	/** Any CSS colour; the theme's pattern colour when unset. */
-	color?: string;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** Flow units between dots at the finest level, the same as the snap grid. */
+		gap?: number;
+		/** Dot diameter in flow units at the finest level, so it grows and shrinks with zoom. */
+		size?: number;
+		/** Any CSS colour; the theme's pattern colour when unset. */
+		color?: string;
+	}
 
-// =========================
-// CONSTANTS
-// =========================
-// Five levels, each twice as wide. A level fades out between these screen spacings,
-// so a zoomed-out board keeps an even texture instead of a grey haze.
-const LEVELS = 5;
-const FADE_START = 6;
-const FADE_END = 12;
-// Screen-pixel bounds: a dot never vanishes zoomed out or turns into a blob zoomed in.
-const MIN_RADIUS = 0.5;
-const MAX_RADIUS = 2;
+	// =========================
+	// CONSTANTS
+	// =========================
+	// Five levels, each twice as wide. A level fades out between these screen spacings,
+	// so a zoomed-out board keeps an even texture instead of a grey haze.
+	const LEVELS = 5;
+	const FADE_START = 6;
+	const FADE_END = 12;
+	// Screen-pixel bounds: a dot never vanishes zoomed out or turns into a blob zoomed in.
+	const MIN_RADIUS = 0.5;
+	const MAX_RADIUS = 2;
 
-// =========================
-// PROPS
-// =========================
-let { gap = 20, size = 2, color = "var(--xy-background-pattern-color, var(--xy-background-pattern-color-default))" }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		gap = 20,
+		size = 2,
+		color = "var(--xy-background-pattern-color, var(--xy-background-pattern-color-default))",
+	}: Props = $props();
 
-// =========================
-// STATE
-// =========================
-const store = useStore();
-let canvas = $state<HTMLCanvasElement | null>(null);
-let width = $state(0);
-let height = $state(0);
-let ratio = $state(1);
-let theme = $state(0);
+	// =========================
+	// STATE
+	// =========================
+	const store = useStore();
+	let canvas = $state<HTMLCanvasElement | null>(null);
+	let width = $state(0);
+	let height = $state(0);
+	let ratio = $state(1);
+	let theme = $state(0);
 
-// =========================
-// FUNCTIONS
-// =========================
-function smoothstep(from: number, to: number, value: number) {
-	const t = Math.min(1, Math.max(0, (value - from) / (to - from)));
-	return t * t * (3 - 2 * t);
-}
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function smoothstep(from: number, to: number, value: number) {
+		const t = Math.min(1, Math.max(0, (value - from) / (to - from)));
+		return t * t * (3 - 2 * t);
+	}
 
-// 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>();
+	// 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>();
 
-function dotTile(step: number, radius: number, fill: string) {
-	const key = `${step}:${radius.toFixed(2)}:${fill}`;
-	const hit = tiles.get(key);
-	if (hit) return hit;
-	if (tiles.size > 64) tiles.clear();
-	const tile = document.createElement("canvas");
-	tiles.set(key, tile);
-	tile.width = step;
-	tile.height = step;
-	const context = tile.getContext("2d");
-	if (!context) return tile;
-	context.fillStyle = fill;
-	context.beginPath();
-	context.arc(step / 2, step / 2, radius, 0, Math.PI * 2);
-	context.fill();
-	return tile;
-}
+	function dotTile(step: number, radius: number, fill: string) {
+		const key = `${step}:${radius.toFixed(2)}:${fill}`;
+		const hit = tiles.get(key);
+		if (hit) return hit;
+		if (tiles.size > 64) tiles.clear();
+		const tile = document.createElement("canvas");
+		tiles.set(key, tile);
+		tile.width = step;
+		tile.height = step;
+		const context = tile.getContext("2d");
+		if (!context) return tile;
+		context.fillStyle = fill;
+		context.beginPath();
+		context.arc(step / 2, step / 2, radius, 0, Math.PI * 2);
+		context.fill();
+		return tile;
+	}
 
-// 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;
-	context.setTransform(1, 0, 0, 1, 0, 0);
-	context.clearRect(0, 0, element.width, element.height);
+	// 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;
+		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;
-		// A coarser level draws bigger dots, so zooming out reads as moving away.
-		const screenRadius = (size / 2) * 2 ** level * view.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);
-		if (alpha <= 0.01) continue;
-		const step = spacing * ratio;
-		const tileSize = Math.max(2, Math.round(step));
-		const scale = step / tileSize;
-		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]),
-		);
-		context.globalAlpha = alpha;
-		context.fillStyle = pattern;
-		context.fillRect(0, 0, element.width, element.height);
-		if (alpha >= 0.999) break;
+		for (let level = 0; level < LEVELS; level++) {
+			const spacing = gap * 2 ** level * view.zoom;
+			// A coarser level draws bigger dots, so zooming out reads as moving away.
+			const screenRadius = (size / 2) * 2 ** level * view.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);
+			if (alpha <= 0.01) continue;
+			const step = spacing * ratio;
+			const tileSize = Math.max(2, Math.round(step));
+			const scale = step / tileSize;
+			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]),
+			);
+			context.globalAlpha = alpha;
+			context.fillStyle = pattern;
+			context.fillRect(0, 0, element.width, element.height);
+			if (alpha >= 0.999) break;
+		}
+		context.globalAlpha = 1;
 	}
-	context.globalAlpha = 1;
-}
 
-// =========================
-// EFFECTS
-// =========================
-$effect(() => {
-	if (!canvas) return;
-	const element = canvas;
-	const observer = new ResizeObserver(() => {
-		width = element.clientWidth;
-		height = element.clientHeight;
-		ratio = window.devicePixelRatio || 1;
+	// =========================
+	// EFFECTS
+	// =========================
+	$effect(() => {
+		if (!canvas) return;
+		const element = canvas;
+		const observer = new ResizeObserver(() => {
+			width = element.clientWidth;
+			height = element.clientHeight;
+			ratio = window.devicePixelRatio || 1;
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
 	});
-	observer.observe(element);
-	return () => observer.disconnect();
-});
 
-// The dot colour is a theme token, so a theme switch redraws.
-$effect(() => {
-	const root = document.documentElement;
-	const observer = new MutationObserver(() => (theme += 1));
-	observer.observe(root, { attributes: true, attributeFilter: ["class"] });
-	return () => observer.disconnect();
-});
+	// The dot colour is a theme token, so a theme switch redraws.
+	$effect(() => {
+		const root = document.documentElement;
+		const observer = new MutationObserver(() => (theme += 1));
+		observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+		return () => observer.disconnect();
+	});
 
-// Read once per theme: a computed style read mid-pan restyles the whole page every frame.
-let fill = $derived.by(() => {
-	void theme;
-	void color;
-	return canvas ? getComputedStyle(canvas).color : "";
-});
+	// Read once per theme: a computed style read mid-pan restyles the whole page every frame.
+	let fill = $derived.by(() => {
+		void theme;
+		void color;
+		return canvas ? getComputedStyle(canvas).color : "";
+	});
 
-// fallow-ignore-next-line complexity
-$effect(() => {
-	if (!canvas || !width || !height) return;
-	const pixelWidth = Math.round(width * ratio);
-	const pixelHeight = Math.round(height * ratio);
-	if (canvas.width !== pixelWidth) canvas.width = pixelWidth;
-	if (canvas.height !== pixelHeight) canvas.height = pixelHeight;
-	draw(canvas, store.viewport, fill);
-});
+	// fallow-ignore-next-line complexity
+	$effect(() => {
+		if (!canvas || !width || !height) return;
+		const pixelWidth = Math.round(width * ratio);
+		const pixelHeight = Math.round(height * ratio);
+		if (canvas.width !== pixelWidth) canvas.width = pixelWidth;
+		if (canvas.height !== pixelHeight) canvas.height = pixelHeight;
+		draw(canvas, store.viewport, fill);
+	});
 </script>
 
 <!-- =========================== -->

package/src/charts/animated-value.svelte

@@ -28,7 +28,7 @@
 		suffix?: string;
 		class?: string;
 		style?: string;
-	};
+	}
 
 	// =========================
 	// PROPS

package/src/charts/area-chart.css

@@ -1,8 +1,5 @@
-/* Styles for AreaChart. Shipped as a plain stylesheet (imported by the
-   component) instead of a Svelte `<style>` block: a `<style>` block becomes a
-   `?type=style&lang.css` virtual module that Tailwind v4's Vite plugin mis-parses
-   when this package is consumed as source from node_modules (tailwindlabs/
-   tailwindcss#20000). Selectors are namespaced under `.hr-area-chart`. */
+/* A plain stylesheet, not a `<style>` block, because Tailwind v4's Vite plugin mis-parses that
+   virtual module when this package is consumed from node_modules (tailwindcss#20000). */
 
 .hr-area-chart {
   width: 100%;

package/src/charts/area-chart.svelte

@@ -46,7 +46,7 @@
 		/** A target drawn across the plot, like the deal a cost runs up to. */
 		reference?: ChartReference;
 		class?: string;
-	};
+	}
 
 	// =========================
 	// PROPS

package/src/charts/bar-chart.css

@@ -24,9 +24,8 @@
   width: 100%;
 }
 
-/* WHY: height="fill" grows the chart to its parent's height (e.g. a card that
-   stretches to match a taller sibling) instead of the fixed body height. The
-   parent must be a flex column that gives this a determinate height. */
+/* height="fill" grows the chart to its parent's height, so the parent must be a
+   flex column with a determinate height. */
 .hr-bar-chart.hr-bar-fill {
   flex: 1 1 auto;
   min-height: 0;

package/src/charts/bar-chart.svelte

@@ -44,7 +44,7 @@
 		/** Show the value/label figure above the chart. */
 		showFigure?: boolean;
 		class?: string;
-	};
+	}
 
 	// =========================
 	// PROPS

package/src/charts/charts.css

@@ -1,16 +1,6 @@
-/* Global theming for layerchart-rendered chrome shared by every chart in this
-   package (tooltip surface, header, rows). Ships with `@heyramzi/ui/charts`, so
-   any consumer that defines the shadcn token set gets a legible tooltip in both
-   themes for free.
-
-   WHY: layerchart's built-in `default` tooltip paints itself with
-   `light-dark(var(--color-surface-100, white), var(--color-surface-300, black))`
-   and a `backdrop-filter` blur. Apps that don't define `--color-surface-*` (and
-   don't set `color-scheme`) fall back to a translucent white card, which is
-   unreadable on a dark page. These rules repaint it with `--popover` /
-   `--border` / `--muted-foreground`, which already flip per theme. The selectors
-   stay unlayered so they beat layerchart's `@layer component` defaults
-   regardless of specificity. */
+/* Layerchart's tooltip falls back to translucent white on a dark page without
+   `--color-surface-*`, so these unlayered rules repaint it with `--popover`,
+   beating its `@layer component` defaults. */
 
 .lc-tooltip-container[data-variant="default"] {
   color: var(--popover-foreground, var(--foreground));
@@ -109,10 +99,8 @@
   --chart-card-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.04), 0 1px 3px 0 oklch(0 0 0 / 0.06);
 }
 
-/* Shared layerchart chrome: axis labels, grid rules, and hover highlights were
-   duplicated identically across every chart's scoped <style>. Centralize them
-   here, scoped to the chart roots, so the look is defined once. `:where()` keeps
-   specificity at 0 so a component can still override locally if it must. */
+/* Axis labels, grid rules and hover highlights for every chart, defined once.
+   `:where()` keeps specificity at 0 so a component can still override them. */
 :where(
     .hr-area-chart,
     .hr-bar-chart,

package/src/charts/crosshair.svelte

@@ -10,7 +10,7 @@
 	interface Props {
 		/** Gradient id. Paint the highlight line with `stroke: url(#id)`. */
 		id: string;
-	};
+	}
 
 	// =========================
 	// PROPS