markgraphy 0.1.1

package/dist/animated/GraphMandala.svelte

@@ -0,0 +1,262 @@
+<script module lang="ts">
+	export interface GraphMandalaProps {
+		/** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+		title: string;
+		/** Animate the bloom. Default true. Reduced motion freezes a fully bloomed frame. */
+		animated?: boolean;
+		/** Width of the scene in characters; at least 38 so the outermost ring fits. Default 48. */
+		cols?: number;
+		/** Height of the scene in rows; at least 20 so the circle fits the cell aspect. Default 24. */
+		rows?: number;
+		/** Rotational folds (K). One cell of the canonical petal is rotated K times. Default 8. */
+		folds?: number;
+		/** Number of concentric lotus-petal rings. Default 5. */
+		rings?: number;
+		/** Milliseconds per tick. Default 130. */
+		speedMs?: number;
+		/** Seed for the per-ring radius and phase perturbation. Default 11. */
+		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 mandala. */
+	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 = 48,
+		rows = 24,
+		folds = 8,
+		rings = 5,
+		speedMs = 130,
+		seedNum = 11,
+		label = 'the circle that holds',
+		class: className = ''
+	}: GraphMandalaProps = $props();
+
+	// Character cells are ~2x taller than wide; aspect-correct so the lotus reads round.
+	const aspect = 2.1;
+
+	// svelte-ignore state_referenced_locally
+	const width = Math.max(38, cols);
+	// svelte-ignore state_referenced_locally
+	const height = Math.max(20, rows);
+	const cx = width / 2;
+	const cy = height / 2;
+	// svelte-ignore state_referenced_locally
+	const K = Math.max(3, Math.min(16, Math.round(folds)));
+	// svelte-ignore state_referenced_locally
+	const N = Math.max(3, Math.min(7, Math.round(rings)));
+
+	// svelte-ignore state_referenced_locally
+	const rand = mulberry32(seedNum);
+
+	// Per-ring radii; seeded perturbation so every seed is a different mandala.
+	interface Ring {
+		r_in: number;
+		r_out: number;
+		phase: number;
+	}
+
+	// svelte-ignore state_referenced_locally
+	const ringData: Ring[] = (() => {
+		const maxR = Math.min(width / 2 - 0.5, (height / 2) * aspect - 0.5);
+		const baseR = maxR / (N - 0.2);
+		const out: Ring[] = [];
+
+		for (let i = 0; i < N; i++) {
+			const center = (i + 0.5) * baseR;
+			const half = 0.38 * baseR * (0.85 + 0.3 * rand());
+			const r_in = Math.max(0, center - half);
+			const r_out = Math.min(maxR, center + half);
+			const phase = (rand() - 0.5) * 0.5;
+			out.push({ r_in, r_out, phase });
+		}
+
+		return out;
+	})();
+
+	const ringTicks = 14;
+	const maxBloom = N * ringTicks;
+	const phaseSpeed = 0.02;
+
+	// svelte-ignore state_referenced_locally
+	const initialTick = animated ? Math.floor(maxBloom * 0.65) : maxBloom;
+
+	// 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 phase = tick * phaseSpeed;
+		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++) {
+				const dx = x - cx;
+				const dy = (y - cy) * aspect;
+				const d = Math.sqrt(dx * dx + dy * dy);
+				// Angle in [-π, π]; subtract phase so the whole figure slowly rotates.
+				const a = Math.atan2(dy, dx) - phase;
+				// Find the petal this cell belongs to: nearest of K divisions of the circle.
+				const kFloat = (a + Math.PI) * (K / (Math.PI * 2));
+				const k = Math.round(kFloat);
+				const localA = a - k * ((Math.PI * 2) / K) + Math.PI;
+				const localAbs = Math.abs(localA);
+
+				let ch = ' ';
+				let next: string | undefined;
+
+				for (let i = 0; i < N; i++) {
+					const r = ringData[i]!;
+					if (d < r.r_in || d > r.r_out) {
+						continue;
+					}
+					// t goes 0 (inner edge of ring) to 1 (outer edge).
+					const t = (d - r.r_in) / (r.r_out - r.r_in);
+					// Lotus petal: half-width peaks at the middle, narrows at both ends.
+					const halfWidth = (Math.PI / K) * Math.sin(Math.PI * t);
+					if (localAbs > halfWidth) {
+						continue;
+					}
+					// Per-ring bloom progress: 0 → 1 over `ringTicks`, then stays 1.
+					const growth = Math.min(1, Math.max(0, (tick - i * ringTicks) / ringTicks));
+					if (t > growth) {
+						break; // not yet reached at this radius; nothing deeper
+					}
+					// Glyph by ring: bindu ring hot, middle rings mid, outer rings faint.
+					if (i === 0) {
+						ch = '█';
+						next = 'hot';
+					} else if (i < N / 2) {
+						ch = '▓';
+						next = 'mid';
+					} else {
+						ch = '▒';
+						next = 'faint';
+					}
+					break;
+				}
+
+				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="mandala">
+			<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>
+	.mandala {
+		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/GraphMandala.svelte.d.ts

@@ -0,0 +1,24 @@
+export interface GraphMandalaProps {
+    /** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+    title: string;
+    /** Animate the bloom. Default true. Reduced motion freezes a fully bloomed frame. */
+    animated?: boolean;
+    /** Width of the scene in characters; at least 38 so the outermost ring fits. Default 48. */
+    cols?: number;
+    /** Height of the scene in rows; at least 20 so the circle fits the cell aspect. Default 24. */
+    rows?: number;
+    /** Rotational folds (K). One cell of the canonical petal is rotated K times. Default 8. */
+    folds?: number;
+    /** Number of concentric lotus-petal rings. Default 5. */
+    rings?: number;
+    /** Milliseconds per tick. Default 130. */
+    speedMs?: number;
+    /** Seed for the per-ring radius and phase perturbation. Default 11. */
+    seedNum?: number;
+    /** Short caption under the art; the art itself is decorative. */
+    label?: string;
+    class?: string;
+}
+declare const GraphMandala: import("svelte").Component<GraphMandalaProps, {}, "">;
+type GraphMandala = ReturnType<typeof GraphMandala>;
+export default GraphMandala;

package/dist/animated/GraphMandel.svelte

@@ -0,0 +1,290 @@
+<script module lang="ts">
+	/** ASCII Mandelbrot with a slow cinematic zoom into seahorse valley. */
+	export interface GraphMandelProps {
+		/** Caption drawn on the top edge as `[ TITLE ]`. */
+		title: string;
+		/** Columns of the grid. Default 66. */
+		cols?: number;
+		/** Rows of the grid. Default 20. */
+		rows?: number;
+		/** Escape count -> glyph, low to high. Keep it ASCII for grid alignment. */
+		charset?: string;
+		/** Milliseconds per zoom tick. Default 140. */
+		speedMs?: number;
+		/** Window shrink factor per tick. Default 1.06. */
+		zoomPerTick?: number;
+		/** Starting iteration budget; grows +2 per tick, capped at 300. Default 90. */
+		maxIter?: 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;
+	}
+
+	/** The classic seahorse valley point the zoom converges toward. */
+	const TARGET_X = -0.743643887037151;
+	const TARGET_Y = 0.131825904205330;
+	const START_X = -0.7;
+	const START_Y = 0;
+	/** Half of the re span [-2.2, 0.9]. */
+	const START_HALF_RE = 1.55;
+	const ITER_CAP = 300;
+	/** Character cells are roughly twice as tall as they are wide. */
+	const CELL_ASPECT = 2;
+	/** Glyphs this far from the end of the charset render with the accent 'hot' tint. */
+	const HOT_FROM_END = 3;
+
+	/** Iterations before |z| escapes the radius-2 disc; `budget` means inside the set. */
+	function escapeCount(re0: number, im0: number, budget: number): number {
+		let zr = 0;
+		let zi = 0;
+		let count = 0;
+
+		while (count < budget) {
+			const zr2 = zr * zr;
+			const zi2 = zi * zi;
+
+			if (zr2 + zi2 > 4) {
+				return count;
+			}
+
+			zi = 2 * zr * zi + im0;
+			zr = zr2 - zi2 + re0;
+			count++;
+		}
+
+		return count;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+
+	let {
+		title,
+		cols = 66,
+		rows = 20,
+		charset = ' .:-=+*#%@',
+		speedMs = 140,
+		zoomPerTick = 1.06,
+		maxIter = 90,
+		animated = true,
+		showControls = true,
+		corner,
+		class: className = ''
+	}: GraphMandelProps = $props();
+
+	interface ArtSeg {
+		text: string;
+		cls?: string;
+	}
+
+	// svelte-ignore state_referenced_locally
+	let cx = $state(START_X);
+	let cy = $state(START_Y);
+	let halfRe = $state(START_HALF_RE);
+	// svelte-ignore state_referenced_locally
+	let iters = $state(Math.max(1, maxIter));
+	// svelte-ignore state_referenced_locally
+	let isPlaying = $state(animated);
+
+	$effect(() => {
+		// Reduced motion never auto-plays. Explicit play 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(tick, Math.max(30, speedMs));
+
+		return () => window.clearInterval(timer);
+	});
+
+	function tick(): void {
+		const factor = Math.max(1.0001, zoomPerTick);
+		// Close the same fraction of the remaining distance to the target each tick,
+		// so the seahorse valley point stays at a fixed offset inside the window.
+		const drift = 1 - 1 / factor;
+
+		cx += (TARGET_X - cx) * drift;
+		cy += (TARGET_Y - cy) * drift;
+		halfRe /= factor;
+		iters = Math.min(ITER_CAP, iters + 2);
+	}
+
+	function handleToggle() {
+		isPlaying = !isPlaying;
+	}
+
+	function handleReset() {
+		cx = START_X;
+		cy = START_Y;
+		halfRe = START_HALF_RE;
+		iters = Math.max(1, maxIter);
+	}
+
+	const halfIm = $derived((halfRe * rows * CELL_ASPECT) / cols);
+	const zoom = $derived(START_HALF_RE / halfRe);
+	const zoomLabel = $derived(zoom >= 100 ? String(Math.round(zoom)) : zoom.toFixed(1));
+	const iterLabel = $derived(String(iters).padStart(3, '0'));
+
+	// Every row is padded to exactly `cols` cells so the grid width never shifts.
+	const art = $derived.by((): ArtSeg[][] => {
+		const glyphs = Array.from(charset.length > 0 ? charset : ' ');
+		const last = glyphs.length - 1;
+		const hotFloor = Math.max(0, glyphs.length - HOT_FROM_END);
+		const out: ArtSeg[][] = [];
+
+		for (let r = 0; r < rows; r++) {
+			const im0 = cy + halfIm - ((r + 0.5) / rows) * 2 * halfIm;
+			const row: ArtSeg[] = [];
+			let buf = '';
+			let hot = false;
+
+			const flush = () => {
+				if (buf.length > 0) {
+					row.push(hot ? { text: buf, cls: 'hot' } : { text: buf });
+					buf = '';
+				}
+			};
+
+			for (let c = 0; c < cols; c++) {
+				const re0 = cx - halfRe + ((c + 0.5) / cols) * 2 * halfRe;
+				const count = escapeCount(re0, im0, iters);
+				const idx = Math.min(last, Math.floor((count / iters) * glyphs.length));
+				const isHot = idx >= hotFloor;
+
+				if (isHot !== hot) {
+					flush();
+					hot = isHot;
+				}
+
+				buf += glyphs[idx] ?? ' ';
+			}
+
+			flush();
+			out.push(row);
+		}
+
+		return out;
+	});
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="mandel">
+			<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">zoom {zoomLabel}x · iter {iterLabel}</p>
+
+			{#if showControls}
+				<div class="controls">
+					<div class="buttons">
+						<button
+							class="ctrl primary"
+							type="button"
+							onclick={handleToggle}
+							aria-label={isPlaying ? 'Pause zoom' : 'Play zoom'}
+						>
+							{isPlaying ? '❚❚ pause' : '▶ play'}
+						</button>
+						<button class="ctrl" type="button" onclick={handleReset} aria-label="Reset zoom">
+							reset
+						</button>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.mandel {
+		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-muted, oklch(0.62 0 0));
+		white-space: pre;
+	}
+
+	.hot {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 600;
+	}
+
+	.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/GraphMandel.svelte.d.ts

@@ -0,0 +1,27 @@
+/** ASCII Mandelbrot with a slow cinematic zoom into seahorse valley. */
+export interface GraphMandelProps {
+    /** Caption drawn on the top edge as `[ TITLE ]`. */
+    title: string;
+    /** Columns of the grid. Default 66. */
+    cols?: number;
+    /** Rows of the grid. Default 20. */
+    rows?: number;
+    /** Escape count -> glyph, low to high. Keep it ASCII for grid alignment. */
+    charset?: string;
+    /** Milliseconds per zoom tick. Default 140. */
+    speedMs?: number;
+    /** Window shrink factor per tick. Default 1.06. */
+    zoomPerTick?: number;
+    /** Starting iteration budget; grows +2 per tick, capped at 300. Default 90. */
+    maxIter?: 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 GraphMandel: import("svelte").Component<GraphMandelProps, {}, "">;
+type GraphMandel = ReturnType<typeof GraphMandel>;
+export default GraphMandel;