markgraphy 0.1.1

package/dist/animated/GraphStream.svelte

@@ -0,0 +1,223 @@
+<script module lang="ts">
+	/** Live appending sparkline with a big current value, like a terminal KPI. */
+	export type StreamKind = 'elapsed' | 'ago';
+
+	export interface GraphStreamProps {
+		/** Caption on the frame's top edge. */
+		title: string;
+		/** Points kept in the rolling history. Default 40. */
+		length?: number;
+		/** Milliseconds between appends. Default 900. */
+		intervalMs?: number;
+		/** Initial history. Default a seeded, SSR-safe random walk from 50. */
+		values?: number[];
+		/** Next-value generator. Default a gentle random walk clamped to 0..100. */
+		generate?: (tick: number, previous: number) => number;
+		/** Suffix after the value, e.g. 'ms' or '%'. Default ''. */
+		unit?: string;
+		/** Caption flavor: 'ago' counts since the last append; 'elapsed' since mount. */
+		kind?: StreamKind;
+		/** Animate the appends. Default true. Reduced motion freezes the stream. */
+		animated?: boolean;
+		class?: string;
+	}
+
+	const SPARK: readonly string[] = ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█'];
+
+	const DEFAULT_GENERATE = (_tick: number, previous: number): number => {
+		const drift = (Math.random() - 0.5) * 12;
+		return Math.min(100, Math.max(0, previous + drift));
+	};
+
+	/**
+	 * Deterministic walk so server and client render the same default
+	 * history — no hydration mismatch, and it still reads as random.
+	 */
+	function seededWalk(count: number, start = 50): number[] {
+		let seed = 0x9e3779b9;
+
+		const rand = () => {
+			seed = (seed + 0x6d2b79f5) | 0;
+			let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+			t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+			return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+		};
+
+		const out = [start];
+
+		for (let i = 1; i < count; i++) {
+			const previous = out[out.length - 1] ?? start;
+			out.push(Math.min(100, Math.max(0, previous + (rand() - 0.5) * 10)));
+		}
+
+		return out;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+	import { formatAgo, formatHms, graphNow } from '../frame/clock';
+	import { reveal } from '../frame/motion';
+
+	let {
+		title,
+		length = 40,
+		intervalMs = 900,
+		values,
+		generate,
+		unit = '',
+		kind = 'ago',
+		animated = true,
+		class: className = ''
+	}: GraphStreamProps = $props();
+
+	// svelte-ignore state_referenced_locally
+	let history = $state(
+		values == null
+			? seededWalk(Math.max(1, Math.floor(length)))
+			: values.slice(-Math.max(1, Math.floor(length)))
+	);
+	let tick = $state(0);
+	let updatedAt = $state(Date.now());
+	const startedAt = Date.now();
+
+	const now = graphNow();
+	const nextValue = $derived(generate ?? DEFAULT_GENERATE);
+
+	const moving = $derived(
+		animated &&
+			(typeof window === 'undefined' ||
+				!window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+	);
+
+	const cap = $derived(Math.max(1, Math.floor(length)));
+
+	$effect(() => {
+		if (!moving) {
+			return;
+		}
+
+		const timer = window.setInterval(() => {
+			tick += 1;
+			const previous = history[history.length - 1] ?? 50;
+			const next = nextValue(tick, previous);
+			const keep = cap - 1;
+
+			history = keep > 0 ? [...history.slice(-keep), next] : [next];
+			updatedAt = Date.now();
+		}, intervalMs);
+
+		return () => window.clearInterval(timer);
+	});
+
+	const current = $derived(history.length > 0 ? (history[history.length - 1] ?? 0) : 0);
+	const display = $derived(
+		Number.isFinite(current) ? (Number.isInteger(current) ? String(current) : current.toFixed(1)) : '—'
+	);
+
+	/** Block-glyph mapping, same approach as GraphSpark. */
+	const max = $derived(Math.max(...history, 1));
+	const points = $derived(
+		history.map((value) => {
+			const index = Math.round((value / max) * (SPARK.length - 1));
+			return SPARK[index] ?? SPARK[0] ?? '▁';
+		})
+	);
+
+	const caption = $derived.by(() => {
+		const time = $now;
+
+		if (time == null) {
+			return kind === 'ago' ? 'updated 0s ago' : 'elapsed 00:00:00';
+		}
+
+		if (!moving || kind === 'elapsed') {
+			return `elapsed ${formatHms(Math.max(0, time - startedAt))}`;
+		}
+
+		return `updated ${formatAgo(Math.max(0, time - updatedAt))}`;
+	});
+</script>
+
+<Graph {title} class={className}>
+	<GraphBody>
+		<div class="stream" use:reveal={{ amount: 0.5 }}>
+			<p class="value">
+				{display}{#if unit}<span class="unit"> {unit}</span>{/if}
+			</p>
+			{#if points.length > 0}
+				<div class="spark" aria-hidden="true">
+					{#each points as glyph, i (i)}
+						<span class="cell" class:c-accent={i === points.length - 1}>{glyph}</span>
+					{/each}
+				</div>
+			{/if}
+			<p class="muted">{caption}</p>
+		</div>
+		<span class="sr-only">{display}{unit}. {caption}</span>
+	</GraphBody>
+</Graph>
+
+<style>
+	.stream {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.value {
+		margin: 0;
+		font-size: 1.875rem;
+		line-height: 1.2;
+		letter-spacing: -0.025em;
+		font-variant-numeric: tabular-nums;
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	@media (min-width: 640px) {
+		.value {
+			font-size: 2.25rem;
+		}
+	}
+
+	.unit {
+		font-size: 1.25rem;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.spark {
+		display: flex;
+		justify-content: flex-start;
+		column-gap: 0.125rem;
+		width: 100%;
+		min-width: 0;
+		user-select: none;
+	}
+
+	.cell {
+		flex: none;
+		min-width: 1ch;
+	}
+
+	.c-accent {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.muted {
+		margin: 0;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+		border-width: 0;
+	}
+</style>

package/dist/animated/GraphStream.svelte.d.ts

@@ -0,0 +1,24 @@
+/** Live appending sparkline with a big current value, like a terminal KPI. */
+export type StreamKind = 'elapsed' | 'ago';
+export interface GraphStreamProps {
+    /** Caption on the frame's top edge. */
+    title: string;
+    /** Points kept in the rolling history. Default 40. */
+    length?: number;
+    /** Milliseconds between appends. Default 900. */
+    intervalMs?: number;
+    /** Initial history. Default a seeded, SSR-safe random walk from 50. */
+    values?: number[];
+    /** Next-value generator. Default a gentle random walk clamped to 0..100. */
+    generate?: (tick: number, previous: number) => number;
+    /** Suffix after the value, e.g. 'ms' or '%'. Default ''. */
+    unit?: string;
+    /** Caption flavor: 'ago' counts since the last append; 'elapsed' since mount. */
+    kind?: StreamKind;
+    /** Animate the appends. Default true. Reduced motion freezes the stream. */
+    animated?: boolean;
+    class?: string;
+}
+declare const GraphStream: import("svelte").Component<GraphStreamProps, {}, "">;
+type GraphStream = ReturnType<typeof GraphStream>;
+export default GraphStream;

package/dist/animated/GraphSurya.svelte

@@ -0,0 +1,268 @@
+<script module lang="ts">
+	export interface GraphSuryaProps {
+		/** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+		title: string;
+		/** Animate the day cycle. Default true. Reduced motion freezes a mid-morning frame. */
+		animated?: boolean;
+		/** Width of the scene in characters. Default 60. */
+		cols?: number;
+		/** Height of the scene in rows. Default 18. */
+		rows?: number;
+		/** Milliseconds per tick. Default 120. */
+		speedMs?: number;
+		/** Number of spokes on the wheel. Default 12. */
+		rays?: number;
+		/** Seed for the per-spoke length jitter. Default 5. */
+		seedNum?: number;
+		/** Short caption under the art; the art itself is decorative. */
+		label?: string;
+		class?: string;
+	}
+
+	/** Deterministic mulberry32 PRNG so a seed replays the same wheel. */
+	function mulberry32(seed: number): () => number {
+		let a = seed >>> 0;
+
+		return () => {
+			a = (a + 0x6d2b79f5) | 0;
+			let t = Math.imul(a ^ (a >>> 15), 1 | a);
+			t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+
+			return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+		};
+	}
+
+	interface Seg {
+		text: string;
+		cls?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+
+	let {
+		title,
+		animated = true,
+		cols = 60,
+		rows = 18,
+		speedMs = 120,
+		rays = 12,
+		seedNum = 5,
+		label = 'the mover of days',
+		class: className = ''
+	}: GraphSuryaProps = $props();
+
+	// svelte-ignore state_referenced_locally
+	const width = Math.max(32, cols);
+	// svelte-ignore state_referenced_locally
+	const height = Math.max(12, rows);
+	const horizonY = height - 3;
+	const radius = 5;
+	const centerX = Math.floor(width / 2);
+	const riseTicks = 90;
+	// Character cells are ~2x taller than wide; correct so the disc reads round.
+	const aspect = 2.1;
+	const halo = radius + 1.1;
+
+	// svelte-ignore state_referenced_locally
+	const rand = mulberry32(seedNum);
+	// svelte-ignore state_referenced_locally
+	const rayLens = Array.from({ length: Math.max(3, rays) }, () => 2.5 + 2 * rand());
+
+	// The sun rises from below the horizon to the apex and sets again, forever.
+	function sunY(tick: number): number {
+		const pp = tick % (riseTicks * 2);
+		const tri = pp < riseTicks ? pp / riseTicks : (riseTicks * 2 - pp) / riseTicks;
+		const ease = tri * tri * (3 - 2 * tri);
+
+		return horizonY - (radius + 1 + ease * Math.max(2, horizonY - radius - 3.5));
+	}
+
+	function initialTick(): number {
+		// Mid-morning: disc clear of the horizon, no ray clipped by the top edge.
+		return Math.round(riseTicks * 0.3);
+	}
+
+	// svelte-ignore state_referenced_locally
+	let tick = $state(initialTick());
+
+	const moving = $derived(
+		animated &&
+			(typeof window === 'undefined' ||
+				!window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+	);
+
+	$effect(() => {
+		if (!moving) {
+			return;
+		}
+
+		const timer = window.setInterval(() => {
+			tick += 1;
+		}, speedMs);
+
+		return () => window.clearInterval(timer);
+	});
+
+	const view = $derived.by((): Seg[][] => {
+		const cy = sunY(tick);
+		const phase = tick * 0.09;
+		const sector = (Math.PI * 2) / Math.max(3, rays);
+		const n = Math.max(3, rays);
+
+		// Spokes are dense line segments painted from the halo outward; a
+		// brightness wave rides the wheel so one spoke glints at a time.
+		const rayMap = new Map<number, { u: number; b: number }>();
+
+		for (let k = 0; k < n; k++) {
+			const th = k * sector - Math.PI / 2;
+			const len = rayLens[k];
+			const b = 0.5 + 0.5 * Math.cos(th - phase);
+			const steps = Math.ceil(len * 4);
+
+			for (let i = 0; i <= steps; i++) {
+				const r = halo + 0.5 + (i / steps) * len;
+				const px = Math.round(centerX + r * Math.cos(th));
+				const py = Math.round(cy + (r * Math.sin(th)) / aspect);
+				const key = py * width + px;
+
+				if (px >= 0 && px < width && py >= 0 && py < horizonY && !rayMap.has(key)) {
+					rayMap.set(key, { u: i / steps, b });
+				}
+			}
+		}
+
+		const out: Seg[][] = [];
+
+		for (let y = 0; y < height; y++) {
+			const segs: Seg[] = [];
+			let buf = '';
+			let cls: string | undefined;
+
+			const flush = () => {
+				if (buf.length > 0) {
+					segs.push({ text: buf, cls });
+				}
+
+				buf = '';
+			};
+
+			for (let x = 0; x < width; x++) {
+				let ch = ' ';
+				let next: string | undefined;
+
+				if (y === horizonY) {
+					ch = '─';
+				} else if (y < horizonY) {
+					const dx = x - centerX;
+					const dy = (y - cy) * aspect;
+					const d = Math.sqrt(dx * dx + dy * dy);
+
+					if (d <= radius) {
+						const t = d / radius;
+
+						if (t < 0.45) {
+							ch = '█';
+							next = 'hot';
+						} else if (t < 0.8) {
+							ch = '▓';
+						} else {
+							ch = '▒';
+							next = 'mid';
+						}
+					} else if (d <= halo) {
+						ch = '░';
+						next = 'faint';
+					} else {
+						const rc = rayMap.get(y * width + x);
+
+						if (rc) {
+							if (rc.u < 0.45) {
+								ch = '▓';
+							} else if (rc.u < 0.8) {
+								ch = '▒';
+								next = 'mid';
+							} else {
+								ch = '░';
+								next = 'faint';
+							}
+
+							if (rc.b > 0.8) {
+								next = 'hot';
+							}
+						}
+					}
+				}
+
+				if (next === cls) {
+					buf += ch;
+				} else {
+					flush();
+					cls = next;
+					buf = ch;
+				}
+			}
+
+			flush();
+			out.push(segs);
+		}
+
+		return out;
+	});
+</script>
+
+<Graph {title} class={className}>
+	<GraphBody>
+		<div class="surya">
+			<div class="viewport">
+				<pre class="art" aria-hidden="true"><code>{#each view as line, i (i)}{#each line as seg, j (j)}{#if seg.cls}<span class={seg.cls}>{seg.text}</span>{:else}{seg.text}{/if}{/each}{#if i < view.length - 1}{'\n'}{/if}{/each}</code></pre>
+			</div>
+			{#if label}
+				<p class="caption">{label}</p>
+			{/if}
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.surya {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		min-width: 0;
+		font-size: 0.875rem;
+	}
+
+	.viewport {
+		overflow-x: auto;
+	}
+
+	.art {
+		margin: 0;
+		font-size: 0.85rem;
+		line-height: 1.15;
+		color: var(--graph-foreground, oklch(0.93 0 0));
+		white-space: pre;
+	}
+
+	.hot {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 600;
+	}
+
+	.mid {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.faint {
+		color: var(--graph-faint, oklch(0.3 0 0));
+	}
+
+	.caption {
+		margin: 0;
+		font-size: 0.8rem;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+</style>

package/dist/animated/GraphSurya.svelte.d.ts

@@ -0,0 +1,22 @@
+export interface GraphSuryaProps {
+    /** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+    title: string;
+    /** Animate the day cycle. Default true. Reduced motion freezes a mid-morning frame. */
+    animated?: boolean;
+    /** Width of the scene in characters. Default 60. */
+    cols?: number;
+    /** Height of the scene in rows. Default 18. */
+    rows?: number;
+    /** Milliseconds per tick. Default 120. */
+    speedMs?: number;
+    /** Number of spokes on the wheel. Default 12. */
+    rays?: number;
+    /** Seed for the per-spoke length jitter. Default 5. */
+    seedNum?: number;
+    /** Short caption under the art; the art itself is decorative. */
+    label?: string;
+    class?: string;
+}
+declare const GraphSurya: import("svelte").Component<GraphSuryaProps, {}, "">;
+type GraphSurya = ReturnType<typeof GraphSurya>;
+export default GraphSurya;