markgraphy 0.1.1

package/dist/animated/GraphPulse.svelte

@@ -0,0 +1,248 @@
+<script module lang="ts">
+	/** Health of one appended blip. */
+	export type PulseStatus = 'ok' | 'degraded' | 'down';
+
+	export interface GraphPulseProps {
+		/** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+		title: string;
+		/** Append a live blip every interval. Default true. Reduced motion freezes a pre-filled window. */
+		animated?: boolean;
+		/** Window size in blips, newest at the right. Default 60. */
+		length?: number;
+		/** Milliseconds between appends. Default 1000. */
+		intervalMs?: number;
+		/** Chance an appended blip is ok; about 4% of the rest degrade, the rest go down. Default 0.94. */
+		okRate?: number;
+		/** Replace the built-in generator with your own stream of statuses. */
+		feed?: () => PulseStatus;
+		/** Seed for the reproducible generator. Default 11. */
+		seedNum?: number;
+		/** Label at the left edge of the caption row. Default 'now'. */
+		from?: string;
+		class?: string;
+	}
+
+	/** Deterministic mulberry32 PRNG so a seed replays the same window. */
+	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;
+		};
+	}
+
+	const MARK: Record<PulseStatus, string> = { ok: '█', degraded: '▒', down: '·' };
+	const TONE: Record<PulseStatus, string> = { ok: 'up', degraded: 'slow', down: 'down' };
+
+	interface Seg {
+		text: string;
+		cls: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+	import { formatAgo, graphNow } from '../frame/clock';
+
+	let {
+		title,
+		animated = true,
+		length = 60,
+		intervalMs = 1000,
+		okRate = 0.94,
+		feed,
+		seedNum = 11,
+		from = 'now',
+		class: className = ''
+	}: GraphPulseProps = $props();
+
+	// svelte-ignore state_referenced_locally
+	const rand = mulberry32(seedNum);
+
+	function draw(): PulseStatus {
+		if (feed) {
+			return feed();
+		}
+
+		const r = rand();
+
+		if (r < okRate) {
+			return 'ok';
+		}
+
+		return r < okRate + 0.04 ? 'degraded' : 'down';
+	}
+
+	function prefill(): PulseStatus[] {
+		const out: PulseStatus[] = [];
+		const size = Math.max(1, length);
+
+		for (let i = 0; i < size; i++) {
+			out.push(draw());
+		}
+
+		return out;
+	}
+
+	// svelte-ignore state_referenced_locally
+	let blips = $state<PulseStatus[]>(prefill());
+	let lastCheckAt = $state(Date.now());
+
+	const time = graphNow();
+
+	const moving = $derived(
+		animated &&
+			(typeof window === 'undefined' ||
+				!window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+	);
+
+	$effect(() => {
+		if (!moving) {
+			return;
+		}
+
+		const timer = window.setInterval(() => {
+			blips = [...blips.slice(1), draw()];
+			lastCheckAt = Date.now();
+		}, intervalMs);
+
+		return () => window.clearInterval(timer);
+	});
+
+	const segments = $derived.by((): Seg[] => {
+		const segs: Seg[] = [];
+
+		for (const blip of blips) {
+			const cls = TONE[blip];
+			const last = segs[segs.length - 1];
+
+			if (last && last.cls === cls) {
+				last.text += MARK[blip];
+			} else {
+				segs.push({ text: MARK[blip], cls });
+			}
+		}
+
+		return segs;
+	});
+
+	const percent = $derived.by(() => {
+		if (blips.length === 0) {
+			return 0;
+		}
+
+		const ok = blips.filter((blip) => blip === 'ok').length;
+
+		return Math.round((ok / blips.length) * 100);
+	});
+
+	const ago = $derived(
+		$time == null ? '0s ago' : formatAgo(Math.max(0, $time - lastCheckAt))
+	);
+</script>
+
+<Graph {title} class={className}>
+	<GraphBody>
+		<div class="pulse">
+			<div class="viewport">
+				<pre class="art" aria-hidden="true"><code>{#each segments as seg, i (i)}{#if seg.cls}<span class={seg.cls}>{seg.text}</span>{:else}{seg.text}{/if}{/each}</code></pre>
+			</div>
+			<div class="meta">
+				<p class="legend">
+					<span><span class="lg up" aria-hidden="true">█</span> up</span>
+					<span><span class="lg slow" aria-hidden="true">▒</span> slow</span>
+					<span><span class="lg down" aria-hidden="true">·</span> down</span>
+				</p>
+				<p class="pct">{percent}%</p>
+			</div>
+			<p class="caption"><span>{from}</span><span>last check {ago}</span></p>
+			<span class="sr-only">{percent} percent uptime over {blips.length} checks</span>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.pulse {
+		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.4;
+		color: var(--graph-foreground, oklch(0.93 0 0));
+		white-space: pre;
+	}
+
+	.up {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.slow {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.down {
+		color: var(--graph-faint, oklch(0.3 0 0));
+	}
+
+	.meta {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		justify-content: space-between;
+		gap: 0.75rem;
+	}
+
+	.legend {
+		display: flex;
+		flex-wrap: wrap;
+		margin: 0;
+		color: var(--graph-muted, oklch(0.62 0 0));
+		gap: 0.25rem 1rem;
+	}
+
+	.lg {
+		user-select: none;
+	}
+
+	.pct {
+		margin: 0 0 0 auto;
+		text-align: right;
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.caption {
+		display: flex;
+		justify-content: space-between;
+		gap: 1rem;
+		margin: 0;
+		font-size: 0.8rem;
+		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/GraphPulse.svelte.d.ts

@@ -0,0 +1,24 @@
+/** Health of one appended blip. */
+export type PulseStatus = 'ok' | 'degraded' | 'down';
+export interface GraphPulseProps {
+    /** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+    title: string;
+    /** Append a live blip every interval. Default true. Reduced motion freezes a pre-filled window. */
+    animated?: boolean;
+    /** Window size in blips, newest at the right. Default 60. */
+    length?: number;
+    /** Milliseconds between appends. Default 1000. */
+    intervalMs?: number;
+    /** Chance an appended blip is ok; about 4% of the rest degrade, the rest go down. Default 0.94. */
+    okRate?: number;
+    /** Replace the built-in generator with your own stream of statuses. */
+    feed?: () => PulseStatus;
+    /** Seed for the reproducible generator. Default 11. */
+    seedNum?: number;
+    /** Label at the left edge of the caption row. Default 'now'. */
+    from?: string;
+    class?: string;
+}
+declare const GraphPulse: import("svelte").Component<GraphPulseProps, {}, "">;
+type GraphPulse = ReturnType<typeof GraphPulse>;
+export default GraphPulse;

package/dist/animated/GraphRain.svelte

@@ -0,0 +1,280 @@
+<script module lang="ts">
+	export interface GraphRainProps {
+		/** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+		title: string;
+		/** Animate the rain. Default true. Reduced motion freezes a single frame. */
+		animated?: boolean;
+		/** Width in character columns. Default 56. */
+		cols?: number;
+		/** Height in rows. Default 16. */
+		rows?: number;
+		/** Milliseconds per tick. Default 110. */
+		speedMs?: number;
+		/** Trail length behind each head. Default 8. */
+		trail?: number;
+		/** Seed for the reproducible rain. 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 rain. */
+	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;
+		};
+	}
+
+	/** One-time reduced-motion check, for choosing the opening frame only. */
+	function prefersReduced(): boolean {
+		return (
+			typeof window !== 'undefined' &&
+			window.matchMedia('(prefers-reduced-motion: reduce)').matches
+		);
+	}
+
+	/** Stream characters: ASCII lowercase + digits mixed with shade glyphs. */
+	const GLYPHS = 'abcdefghijklmnopqrstuvwxyz0123456789░▒▓░▒';
+
+	function pickGlyph(rand: () => number): string {
+		return GLYPHS[Math.floor(rand() * GLYPHS.length)] ?? ' ';
+	}
+
+	function newStream(rand: () => number, trail: number): string[] {
+		const stream: string[] = [];
+
+		for (let i = 0; i < trail; i++) {
+			stream.push(pickGlyph(rand));
+		}
+
+		return stream;
+	}
+
+	interface Drop {
+		/** Head row; may sit above the frame (negative) while the stream enters. */
+		y: number;
+		/** Ticks between head advances, 1–3. */
+		advanceEvery: number;
+		step: number;
+		stream: string[];
+	}
+
+	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 = 56,
+		rows = 16,
+		speedMs = 110,
+		trail = 8,
+		seedNum = 5,
+		label = 'glyph rain',
+		class: className = ''
+	}: GraphRainProps = $props();
+
+	// svelte-ignore state_referenced_locally
+	const rand = mulberry32(seedNum);
+	// svelte-ignore state_referenced_locally
+	const width = Math.max(1, cols);
+	// svelte-ignore state_referenced_locally
+	const height = Math.max(1, rows);
+
+	function span(): number {
+		return Math.max(1, trail);
+	}
+
+	function spawn(): Drop {
+		return {
+			y: -Math.floor(rand() * height * 2),
+			advanceEvery: 1 + Math.floor(rand() * 3),
+			step: 0,
+			stream: newStream(rand, span())
+		};
+	}
+
+	function initialDrops(): Drop[] {
+		const out: Drop[] = [];
+
+		for (let i = 0; i < width; i++) {
+			out.push(spawn());
+		}
+
+		return out;
+	}
+
+	// svelte-ignore state_referenced_locally
+	let drops = $state<Drop[]>(initialDrops());
+
+	/** Advance every column; heads step on their own cadence and respawn once clear. */
+	function tickRain() {
+		const trailLen = span();
+
+		for (const d of drops) {
+			d.step += 1;
+
+			if (d.step >= d.advanceEvery) {
+				d.step = 0;
+				d.y += 1;
+			}
+
+			if (d.y - trailLen >= height) {
+				d.y = -Math.floor(rand() * 3);
+				d.advanceEvery = 1 + Math.floor(rand() * 3);
+				d.step = 0;
+				d.stream = newStream(rand, trailLen);
+			} else if (rand() < 0.08) {
+				d.stream[Math.floor(rand() * d.stream.length)] = pickGlyph(rand);
+			}
+		}
+	}
+
+	// svelte-ignore state_referenced_locally
+	const preTicks = animated && !prefersReduced() ? height * 2 : height * 4;
+
+	// Streams stagger in when animated; a settled mid-fall frame when frozen.
+	for (let i = 0; i < preTicks; i++) {
+		tickRain();
+	}
+
+	const moving = $derived(
+		animated &&
+			(typeof window === 'undefined' ||
+				!window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+	);
+
+	$effect(() => {
+		if (!moving) {
+			return;
+		}
+
+		const timer = window.setInterval(() => {
+			tickRain();
+		}, speedMs);
+
+		return () => window.clearInterval(timer);
+	});
+
+	const view = $derived.by((): Seg[][] => {
+		const trailLen = span();
+		const bright = Math.max(1, Math.round(trailLen / 3));
+		const dim = Math.max(bright + 1, Math.round((trailLen * 2) / 3));
+		const out: Seg[][] = [];
+
+		for (let r = 0; r < height; r++) {
+			const segs: Seg[] = [];
+			let buf = '';
+			let cls: string | undefined;
+
+			const flush = () => {
+				if (buf.length > 0) {
+					segs.push({ text: buf, cls });
+				}
+
+				buf = '';
+			};
+
+			for (let c = 0; c < width; c++) {
+				const d = drops[c];
+				const dist = d ? d.y - r : -1;
+				let ch = ' ';
+				let next: string | undefined;
+
+				if (d && dist === 0) {
+					ch = '█';
+					next = 'hot';
+				} else if (d && dist >= 1 && dist <= trailLen) {
+					ch = d.stream[dist - 1] ?? ' ';
+
+					if (dist > dim) {
+						next = 'faint';
+					} else if (dist > bright) {
+						next = 'mid';
+					}
+				}
+
+				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="rain">
+			<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>
+	.rain {
+		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/GraphRain.svelte.d.ts

@@ -0,0 +1,22 @@
+export interface GraphRainProps {
+    /** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+    title: string;
+    /** Animate the rain. Default true. Reduced motion freezes a single frame. */
+    animated?: boolean;
+    /** Width in character columns. Default 56. */
+    cols?: number;
+    /** Height in rows. Default 16. */
+    rows?: number;
+    /** Milliseconds per tick. Default 110. */
+    speedMs?: number;
+    /** Trail length behind each head. Default 8. */
+    trail?: number;
+    /** Seed for the reproducible rain. Default 5. */
+    seedNum?: number;
+    /** Short caption under the art; the art itself is decorative. */
+    label?: string;
+    class?: string;
+}
+declare const GraphRain: import("svelte").Component<GraphRainProps, {}, "">;
+type GraphRain = ReturnType<typeof GraphRain>;
+export default GraphRain;