markgraphy 0.1.1

package/dist/animated/GraphJapa.svelte

@@ -0,0 +1,253 @@
+<script module lang="ts">
+	export interface GraphJapaProps {
+		/** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+		title: string;
+		/** Animate the marker around the mala. Default true. Reduced motion freezes a mid-mala frame. */
+		animated?: boolean;
+		/** Width of the scene in characters. Default 60. */
+		cols?: number;
+		/** Height of the scene in rows. Default 22. */
+		rows?: number;
+		/** Total beads per mala. The mala is 108; the counter shows current/total. Default 108. */
+		beads?: number;
+		/** Milliseconds per bead. Default 110. */
+		speedMs?: number;
+		/** Short caption under the art; the art itself is decorative. */
+		label?: string;
+		class?: 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 = 60,
+		rows = 22,
+		beads = 108,
+		speedMs = 110,
+		label = 'a breath for every bead',
+		class: className = ''
+	}: GraphJapaProps = $props();
+
+	// Character cells are ~2x taller than wide; correct so the mala reads round.
+	const aspect = 2.1;
+
+	// svelte-ignore state_referenced_locally
+	const width = Math.max(28, cols);
+	// svelte-ignore state_referenced_locally
+	const height = Math.max(14, rows);
+	// svelte-ignore state_referenced_locally
+	const N = Math.max(8, Math.min(216, Math.round(beads)));
+
+	// svelte-ignore state_referenced_locally
+	const cx = width / 2;
+	// svelte-ignore state_referenced_locally
+	const cy = (height - 2) / 2 + 1; // leave two rows for the counter at the bottom
+
+	// Radius: prefer the horizontal budget, fall back to the vertical (aspect-corrected).
+	const r = Math.min(cx - 3, (cy - 1.5) * aspect);
+
+	// Bead positions, in display cells. Multiple beads may map to the same cell at
+	// the top/bottom of the circle (aspect squeezes them); the map keeps the first index.
+	interface Bead {
+		x: number;
+		y: number;
+		i: number;
+	}
+
+	// svelte-ignore state_referenced_locally
+	const beads$: Bead[] = (() => {
+		const out: Bead[] = [];
+
+		for (let i = 0; i < N; i++) {
+			const a = (i / N) * Math.PI * 2 - Math.PI / 2;
+			const x = Math.round(cx + r * Math.cos(a));
+			const y = Math.round(cy + (r * Math.sin(a)) / aspect);
+			out.push({ x, y, i });
+		}
+
+		return out;
+	})();
+
+	// svelte-ignore state_referenced_locally
+	const beadCells = new Map<number, number[]>(
+		beads$.map((b) => {
+			const key = b.y * width + b.x;
+			return [key, [b.i]];
+		}).reduce((m, [k, v]) => {
+			const existing = m.get(k as number);
+			if (existing) {
+				existing.push(...(v as number[]));
+			} else {
+				m.set(k as number, v as number[]);
+			}
+			return m;
+		}, new Map<number, number[]>())
+	);
+
+	// svelte-ignore state_referenced_locally
+	const initialTick = animated ? Math.floor(N * 0.55) : Math.floor(N * 0.5);
+
+	// 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 TAIL = 5;
+	const SHIMMER_TICKS = 6;
+
+	const view = $derived.by((): Seg[][] => {
+		const marker = ((tick % N) + N) % N;
+		const inMala = marker; // 0..N-1
+		const shimmering = tick > 0 && inMala < SHIMMER_TICKS;
+
+		// Tail indices (the TAIL beads behind the marker, mod N).
+		const tailSet = new Set<number>();
+
+		for (let k = 1; k <= TAIL; k++) {
+			tailSet.add((marker - k + N) % N);
+		}
+
+		const out: Seg[][] = [];
+		const counter = `${inMala + 1} / ${N}`;
+		const counterRow = height - 1;
+		const counterStart = width - counter.length;
+
+		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;
+
+				// Counter on the bottom row, right-aligned.
+				if (y === counterRow && x >= counterStart) {
+					ch = counter[x - counterStart]!;
+				} else {
+					const indices = beadCells.get(y * width + x);
+
+					if (indices && indices.length > 0) {
+						const isMarker = indices.includes(marker);
+						const isTail = !isMarker && indices.some((i) => tailSet.has(i));
+
+						if (isMarker) {
+							ch = '█';
+							next = 'hot';
+						} else if (shimmering) {
+							ch = '▓';
+							next = 'mid';
+						} else if (isTail) {
+							ch = '▒';
+							next = 'faint';
+						} else {
+							ch = '·';
+							next = 'faint';
+						}
+					}
+				}
+
+				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="japa">
+			<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>
+	.japa {
+		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/GraphJapa.svelte.d.ts

@@ -0,0 +1,20 @@
+export interface GraphJapaProps {
+    /** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+    title: string;
+    /** Animate the marker around the mala. Default true. Reduced motion freezes a mid-mala frame. */
+    animated?: boolean;
+    /** Width of the scene in characters. Default 60. */
+    cols?: number;
+    /** Height of the scene in rows. Default 22. */
+    rows?: number;
+    /** Total beads per mala. The mala is 108; the counter shows current/total. Default 108. */
+    beads?: number;
+    /** Milliseconds per bead. Default 110. */
+    speedMs?: number;
+    /** Short caption under the art; the art itself is decorative. */
+    label?: string;
+    class?: string;
+}
+declare const GraphJapa: import("svelte").Component<GraphJapaProps, {}, "">;
+type GraphJapa = ReturnType<typeof GraphJapa>;
+export default GraphJapa;

package/dist/animated/GraphLife.svelte

@@ -0,0 +1,312 @@
+<script module lang="ts">
+	/** Conway's Game of Life in block glyphs, framed. Alive is accent, the dead leave a faint trail. */
+	export interface GraphLifeProps {
+		/** Caption drawn on the top edge as `[ TITLE ]`. */
+		title: string;
+		/** Columns of the board. Default 44. */
+		cols?: number;
+		/** Rows of the board. Default 14. */
+		rows?: number;
+		/** Random fill probability when no `seed` is given. Default 0.28. */
+		density?: number;
+		/** Explicit initial board. Padded/cropped to `cols` x `rows`. */
+		seed?: boolean[][];
+		/** PRNG seed for the random board, reproducible. Default 7. */
+		seedNum?: number;
+		/** Milliseconds per generation. Default 220. */
+		speedMs?: number;
+		/** Start playing on mount. Default true. Reduced motion starts paused. */
+		animated?: boolean;
+		/** Show the playback controls. Default true. */
+		showControls?: boolean;
+		/** Character at each corner of the frame. Default "+". */
+		corner?: string;
+		class?: string;
+	}
+
+	/** Deterministic PRNG so `seedNum` reproduces the same board. */
+	function mulberry32(seedValue: number): () => number {
+		let a = seedValue >>> 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;
+		};
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+
+	let {
+		title,
+		cols = 44,
+		rows = 14,
+		density = 0.28,
+		seed,
+		seedNum = 7,
+		speedMs = 220,
+		animated = true,
+		showControls = true,
+		corner,
+		class: className = ''
+	}: GraphLifeProps = $props();
+
+	interface ArtSeg {
+		text: string;
+		cls?: string;
+	}
+
+	function initialBoard(): boolean[][] {
+		if (seed) {
+			return Array.from({ length: rows }, (_, r) =>
+				Array.from({ length: cols }, (_, c) => seed[r]?.[c] === true)
+			);
+		}
+
+		const rng = mulberry32(seedNum);
+
+		return Array.from({ length: rows }, () => Array.from({ length: cols }, () => rng() < density));
+	}
+
+	function emptyGrid(): boolean[][] {
+		return Array.from({ length: rows }, () => Array.from({ length: cols }, () => false));
+	}
+
+	function emptyTrail(): number[][] {
+		return Array.from({ length: rows }, () => Array.from({ length: cols }, () => 0));
+	}
+
+	// svelte-ignore state_referenced_locally
+	let grid = $state(initialBoard());
+	// svelte-ignore state_referenced_locally
+	let trail = $state(emptyTrail());
+	let gen = $state(0);
+	// svelte-ignore state_referenced_locally
+	let isPlaying = $state(animated);
+
+	$effect(() => {
+		// Reduced motion never auto-plays. Explicit play/step by the user is still fine.
+		const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+		if (query.matches) {
+			isPlaying = false;
+		}
+
+		const onChange = (event: MediaQueryListEvent) => {
+			if (event.matches) {
+				isPlaying = false;
+			}
+		};
+
+		query.addEventListener('change', onChange);
+		return () => query.removeEventListener('change', onChange);
+	});
+
+	$effect(() => {
+		if (!isPlaying) {
+			return;
+		}
+
+		const timer = window.setInterval(step, Math.max(30, speedMs));
+
+		return () => window.clearInterval(timer);
+	});
+
+	function step(): void {
+		const nextGrid = emptyGrid();
+		const nextTrail = emptyTrail();
+
+		for (let r = 0; r < rows; r++) {
+			const up = (r - 1 + rows) % rows;
+			const down = (r + 1) % rows;
+
+			for (let c = 0; c < cols; c++) {
+				const left = (c - 1 + cols) % cols;
+				const right = (c + 1) % cols;
+				const neighbors =
+					(grid[up][left] ? 1 : 0) +
+					(grid[up][c] ? 1 : 0) +
+					(grid[up][right] ? 1 : 0) +
+					(grid[r][left] ? 1 : 0) +
+					(grid[r][right] ? 1 : 0) +
+					(grid[down][left] ? 1 : 0) +
+					(grid[down][c] ? 1 : 0) +
+					(grid[down][right] ? 1 : 0);
+
+				const wasAlive = grid[r][c];
+				const lives = wasAlive ? neighbors === 2 || neighbors === 3 : neighbors === 3;
+				nextGrid[r][c] = lives;
+
+				if (wasAlive && !lives) {
+					nextTrail[r][c] = 2;
+				} else if (!lives) {
+					nextTrail[r][c] = Math.max(0, trail[r][c] - 1);
+				}
+			}
+		}
+
+		grid = nextGrid;
+		trail = nextTrail;
+		gen += 1;
+	}
+
+	function handleToggle() {
+		isPlaying = !isPlaying;
+	}
+
+	function handleStep() {
+		step();
+	}
+
+	function handleReset() {
+		grid = initialBoard();
+		trail = emptyTrail();
+		gen = 0;
+	}
+
+	const pop = $derived(grid.flat().filter((cell) => cell).length);
+	const genLabel = $derived(String(gen).padStart(3, '0'));
+	const popLabel = $derived(String(pop).padStart(3, '0'));
+
+	// Every row is padded to exactly `cols` cells so the grid width never shifts.
+	const art = $derived.by((): ArtSeg[][] => {
+		const out: ArtSeg[][] = [];
+
+		for (let r = 0; r < rows; r++) {
+			const segs: ArtSeg[] = [];
+			let buf = '';
+			let mode: 'plain' | 'on' | 'trail' = 'plain';
+
+			const flush = () => {
+				if (buf.length > 0) {
+					segs.push(mode === 'plain' ? { text: buf } : { text: buf, cls: mode });
+					buf = '';
+				}
+			};
+
+			for (let c = 0; c < cols; c++) {
+				const next = grid[r][c] ? 'on' : trail[r][c] > 0 ? 'trail' : 'plain';
+
+				if (next !== mode) {
+					flush();
+					mode = next;
+				}
+
+				buf += grid[r][c] ? '█' : trail[r][c] > 0 ? '▒' : ' ';
+			}
+
+			flush();
+			out.push(segs);
+		}
+
+		return out;
+	});
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="life">
+			<div class="viewport">
+				<pre class="art"><code>{#each art 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 < art.length - 1}{'\n'}{/if}{/each}</code></pre>
+			</div>
+
+			<p class="caption">gen {genLabel} · pop {popLabel}</p>
+
+			{#if showControls}
+				<div class="controls">
+					<div class="buttons">
+						<button
+							class="ctrl primary"
+							type="button"
+							onclick={handleToggle}
+							aria-label={isPlaying ? 'Pause simulation' : 'Play simulation'}
+						>
+							{isPlaying ? '❚❚ pause' : '▶ play'}
+						</button>
+						<button class="ctrl" type="button" onclick={handleStep} aria-label="Advance one generation">
+							step >
+						</button>
+						<button class="ctrl" type="button" onclick={handleReset} aria-label="Reset simulation">
+							reset
+						</button>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.life {
+		display: flex;
+		flex-direction: column;
+		gap: 0.875rem;
+		min-width: 0;
+		font-size: 0.875rem;
+	}
+
+	.viewport {
+		overflow-x: auto;
+	}
+
+	.art {
+		margin: 0;
+		font-size: 0.85rem;
+		line-height: 1.2;
+		color: var(--graph-faint, oklch(0.3 0 0));
+		white-space: pre;
+	}
+
+	.on {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.trail {
+		color: var(--graph-faint, oklch(0.3 0 0));
+	}
+
+	.caption {
+		margin: 0;
+		font-size: 0.75rem;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.controls {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: 1rem;
+		padding-top: 0.875rem;
+		border-top: 1px dashed var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.buttons {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+	}
+
+	.ctrl {
+		padding: 0.25rem 0.6rem;
+		font-size: 0.75rem;
+		color: var(--graph-muted, oklch(0.62 0 0));
+		background: none;
+		border: 1px dashed var(--graph-frame, oklch(0.6 0 0 / 0.5));
+		border-radius: 0;
+		cursor: pointer;
+	}
+
+	.ctrl:hover {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+		border-color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.primary {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		border-color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 600;
+	}
+</style>

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

@@ -0,0 +1,27 @@
+/** Conway's Game of Life in block glyphs, framed. Alive is accent, the dead leave a faint trail. */
+export interface GraphLifeProps {
+    /** Caption drawn on the top edge as `[ TITLE ]`. */
+    title: string;
+    /** Columns of the board. Default 44. */
+    cols?: number;
+    /** Rows of the board. Default 14. */
+    rows?: number;
+    /** Random fill probability when no `seed` is given. Default 0.28. */
+    density?: number;
+    /** Explicit initial board. Padded/cropped to `cols` x `rows`. */
+    seed?: boolean[][];
+    /** PRNG seed for the random board, reproducible. Default 7. */
+    seedNum?: number;
+    /** Milliseconds per generation. Default 220. */
+    speedMs?: number;
+    /** Start playing on mount. Default true. Reduced motion starts paused. */
+    animated?: boolean;
+    /** Show the playback controls. Default true. */
+    showControls?: boolean;
+    /** Character at each corner of the frame. Default "+". */
+    corner?: string;
+    class?: string;
+}
+declare const GraphLife: import("svelte").Component<GraphLifeProps, {}, "">;
+type GraphLife = ReturnType<typeof GraphLife>;
+export default GraphLife;