markgraphy 0.1.1

package/dist/animated/GraphTerminal.svelte

@@ -0,0 +1,238 @@
+<script module lang="ts">
+	export interface TerminalLine {
+		/** 'prompt' for the `$ ` prefix line, 'output' for streamed text. */
+		kind: 'prompt' | 'output';
+		/** Text content. For 'prompt' this is the typed command; for 'output' the streamed block. */
+		text: string;
+	}
+
+	export interface GraphTerminalProps {
+		/** Caption on the frame's top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+		title: string;
+		/** Scripted session: prompt lines get typed character-by-character; output lines stream. */
+		lines: TerminalLine[];
+		/** Milliseconds per character (typing). Default 28. */
+		typeMs?: number;
+		/** Milliseconds per character (streaming output). Default 14. */
+		streamMs?: number;
+		/** Milliseconds to hold the fully-revealed script before restarting. Default 1600. */
+		holdMs?: number;
+		/** Loop the session. Default true. */
+		loop?: boolean;
+		/** Animate the typing and streaming. Default true. Reduced motion shows full script. */
+		animated?: boolean;
+		/** Short caption under the art. */
+		label?: string;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+
+	let {
+		title,
+		lines,
+		typeMs = 28,
+		streamMs = 14,
+		holdMs = 1600,
+		loop = true,
+		animated = true,
+		label = 'a session, scripted',
+		class: className = ''
+	}: GraphTerminalProps = $props();
+
+	interface Seg {
+		text: string;
+		cls?: string;
+	}
+
+	// svelte-ignore state_referenced_locally
+	const script: TerminalLine[] = lines.length > 0
+		? lines
+		: [
+				{ kind: 'prompt', text: 'echo ready' },
+				{ kind: 'output', text: 'ready' }
+			];
+
+	// Per-character durations for each line, in ticks (1 char = 1 tick).
+	// svelte-ignore state_referenced_locally
+	const charMs: number[] = script.map((l) => (l.kind === 'prompt' ? typeMs : streamMs));
+	// svelte-ignore state_referenced_locally
+	const totalChars: number = script.reduce((sum, l) => sum + l.text.length, 0);
+
+	// svelte-ignore state_referenced_locally
+	const initialChar = animated ? Math.floor(totalChars * 0.55) : totalChars;
+
+	// svelte-ignore state_referenced_locally
+	let char = $state(initialChar);
+
+	const moving = $derived(
+		animated &&
+			(typeof window === 'undefined' ||
+				!window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+	);
+
+	$effect(() => {
+		if (!moving) {
+			return;
+		}
+
+		if (char < totalChars) {
+			// We have to advance at a variable rate depending on the current line's kind.
+			// Find the active line by accumulating characters, then advance one char
+			// at the current line's per-char duration.
+			let acc = 0;
+			let active = 0;
+			for (let i = 0; i < script.length; i++) {
+				const next = acc + script[i]!.text.length;
+				if (char >= acc && char < next) {
+					active = i;
+					break;
+				}
+				acc = next;
+			}
+			const delay = charMs[active] ?? typeMs;
+
+			const timer = window.setTimeout(() => {
+				char += 1;
+			}, delay);
+
+			return () => window.clearTimeout(timer);
+		}
+
+		if (loop) {
+			const timer = window.setTimeout(() => {
+				char = 0;
+			}, holdMs);
+
+			return () => window.clearTimeout(timer);
+		}
+	});
+
+	// Reveal computation: how many chars of each line are visible.
+	// Frozen: char = totalChars (everything revealed).
+	const view = $derived.by((): Seg[] => {
+		const out: Seg[] = [];
+		const totalReveal = moving ? char : Number.POSITIVE_INFINITY;
+		let remaining = totalReveal;
+		let lastActiveIndex = -1;
+
+		for (let i = 0; i < script.length; i++) {
+			const line = script[i]!;
+			const take = Math.max(0, Math.min(line.text.length, remaining));
+
+			if (line.kind === 'prompt') {
+				out.push({ text: '$ ', cls: 'prompt' });
+				out.push({ text: line.text.slice(0, take), cls: 'cmd' });
+			} else {
+				out.push({ text: '  ' });
+				out.push({ text: line.text.slice(0, take), cls: 'out' });
+			}
+
+			if (take > 0) {
+				lastActiveIndex = i;
+			}
+
+			if (i < script.length - 1) {
+				out.push({ text: '\n' });
+			}
+
+			remaining -= take;
+		}
+
+		// Trailing cursor on the active prompt line, or on the last active line.
+		// Only show a cursor if not finished, or if still animating.
+		const finished = char >= totalChars;
+		const showCursor = !finished || (loop && moving);
+
+		if (showCursor && lastActiveIndex >= 0) {
+			// Find the most recent prompt line; if none, append cursor at the end.
+			let promptLine = -1;
+			for (let i = 0; i <= lastActiveIndex; i++) {
+				if (script[i]!.kind === 'prompt') {
+					promptLine = i;
+				}
+			}
+
+			if (promptLine >= 0) {
+				// Tag the cursor on the next push (after the line's text); we
+				// instead render a blinking cursor below all lines as a new
+				// segment so the line above stays simple.
+				out.push({ text: '\n' });
+				out.push({ text: '$ ', cls: 'prompt' });
+				out.push({ text: '█', cls: 'cursor blinking' });
+			}
+		}
+
+		return out;
+	});
+</script>
+
+<Graph {title} class={className}>
+	<GraphBody>
+		<div class="terminal">
+			<div class="viewport">
+				<pre class="art" aria-hidden="true"><code>{#each view as seg, i (i)}{#if seg.cls}<span class={seg.cls}>{seg.text}</span>{:else}{seg.text}{/if}{/each}</code></pre>
+			</div>
+			<p class="caption">{label}</p>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.terminal {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		min-width: 0;
+	}
+
+	.viewport {
+		overflow-x: auto;
+	}
+
+	.art {
+		margin: 0;
+		font-size: 0.85rem;
+		line-height: 1.45;
+		color: var(--graph-foreground, oklch(0.93 0 0));
+		white-space: pre;
+		font-family: var(--graph-font, ui-monospace, monospace);
+	}
+
+	.prompt {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.cmd {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.out {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.cursor {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.cursor.blinking {
+			animation: blink 1s steps(1) infinite;
+		}
+
+		@keyframes blink {
+			50% {
+				opacity: 0;
+			}
+		}
+	}
+
+	.caption {
+		margin: 0;
+		font-size: 0.8rem;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+</style>

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

@@ -0,0 +1,28 @@
+export interface TerminalLine {
+    /** 'prompt' for the `$ ` prefix line, 'output' for streamed text. */
+    kind: 'prompt' | 'output';
+    /** Text content. For 'prompt' this is the typed command; for 'output' the streamed block. */
+    text: string;
+}
+export interface GraphTerminalProps {
+    /** Caption on the frame's top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+    title: string;
+    /** Scripted session: prompt lines get typed character-by-character; output lines stream. */
+    lines: TerminalLine[];
+    /** Milliseconds per character (typing). Default 28. */
+    typeMs?: number;
+    /** Milliseconds per character (streaming output). Default 14. */
+    streamMs?: number;
+    /** Milliseconds to hold the fully-revealed script before restarting. Default 1600. */
+    holdMs?: number;
+    /** Loop the session. Default true. */
+    loop?: boolean;
+    /** Animate the typing and streaming. Default true. Reduced motion shows full script. */
+    animated?: boolean;
+    /** Short caption under the art. */
+    label?: string;
+    class?: string;
+}
+declare const GraphTerminal: import("svelte").Component<GraphTerminalProps, {}, "">;
+type GraphTerminal = ReturnType<typeof GraphTerminal>;
+export default GraphTerminal;

package/dist/animated/GraphTicker.svelte

@@ -0,0 +1,163 @@
+<script module lang="ts">
+	/** One token of the marquee: a label plus its health status. */
+	export interface TickerItem {
+		label: string;
+		status: 'ok' | 'warn' | 'down';
+	}
+
+	export interface GraphTickerProps {
+		/** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+		title: string;
+		/** Tokens rotated through the row, in order. */
+		items: TickerItem[];
+		/** Milliseconds per rotation step. Default 140. */
+		speedMs?: number;
+		/** Animate the rotation. Default true. Reduced motion shows the first items. */
+		animated?: boolean;
+		/** Character at each corner of the frame. Default '+'. */
+		corner?: string;
+		class?: string;
+	}
+
+	interface Seg {
+		text: string;
+		cls?: string;
+	}
+
+	/** Visible columns the row is padded to. */
+	const COLS = 44;
+	/** Separator between tokens. '·' is U+00B7, covered by Geist Mono. */
+	const SEP = '  ·  ';
+
+	const BADGE: Record<TickerItem['status'], string> = {
+		ok: '[ OK ]',
+		warn: '[ WARN ]',
+		down: '[ DOWN ]'
+	};
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+
+	let {
+		title,
+		items,
+		speedMs = 140,
+		animated = true,
+		corner,
+		class: className = ''
+	}: GraphTickerProps = $props();
+
+	let offset = $state(0);
+
+	const moving = $derived(
+		animated &&
+			(typeof window === 'undefined' ||
+				!window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+	);
+
+	$effect(() => {
+		if (!moving || items.length < 2) {
+			return;
+		}
+
+		const timer = window.setInterval(() => {
+			offset = (offset + 1) % items.length;
+		}, speedMs);
+
+		return () => window.clearInterval(timer);
+	});
+
+	// Whole tokens rotate position, so status colors stay attached to their
+	// labels — the row is never sliced mid-token. Frozen state always renders
+	// from the first item.
+	const row = $derived.by((): Seg[] => {
+		const base = moving ? offset : 0;
+		const segs: Seg[] = [];
+		let used = 0;
+
+		for (let i = 0; i < items.length; i += 1) {
+			const item = items[(base + i) % items.length];
+			const token = `${BADGE[item.status]} ${item.label}`;
+
+			if (segs.length > 0 && used + SEP.length + token.length > COLS) {
+				break;
+			}
+
+			if (segs.length > 0) {
+				segs.push({ text: SEP, cls: 'sep' });
+				used += SEP.length;
+			}
+
+			segs.push({ text: token, cls: item.status });
+			used += token.length;
+		}
+
+		if (used < COLS) {
+			segs.push({ text: ' '.repeat(COLS - used) });
+		}
+
+		return segs;
+	});
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="viewport">
+			<pre class="art"><code>{#key offset}<span class="tick" class:live={moving}>{#each row as seg, i (i)}{#if seg.cls}<span class={seg.cls}>{seg.text}</span>{:else}{seg.text}{/if}{/each}</span>{/key}</code></pre>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.viewport {
+		overflow-x: auto;
+	}
+
+	.art {
+		margin: 0;
+		font-size: 0.85rem;
+		line-height: 1.4;
+		color: var(--graph-muted, oklch(0.62 0 0));
+		white-space: pre;
+	}
+
+	.tick {
+		display: inline-block;
+	}
+
+	.ok {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.warn {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.down {
+		color: var(--graph-faint, oklch(0.3 0 0));
+	}
+
+	.sep {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.tick.live {
+			animation: tick 0.14s ease-out;
+		}
+
+		@keyframes tick {
+			from {
+				opacity: 0.4;
+				transform: translateX(0.3rem);
+			}
+
+			to {
+				opacity: 1;
+				transform: translateX(0);
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,21 @@
+/** One token of the marquee: a label plus its health status. */
+export interface TickerItem {
+    label: string;
+    status: 'ok' | 'warn' | 'down';
+}
+export interface GraphTickerProps {
+    /** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+    title: string;
+    /** Tokens rotated through the row, in order. */
+    items: TickerItem[];
+    /** Milliseconds per rotation step. Default 140. */
+    speedMs?: number;
+    /** Animate the rotation. Default true. Reduced motion shows the first items. */
+    animated?: boolean;
+    /** Character at each corner of the frame. Default '+'. */
+    corner?: string;
+    class?: string;
+}
+declare const GraphTicker: import("svelte").Component<GraphTickerProps, {}, "">;
+type GraphTicker = ReturnType<typeof GraphTicker>;
+export default GraphTicker;

package/dist/animated/GraphTypewriter.svelte

@@ -0,0 +1,130 @@
+<script module lang="ts">
+	export interface GraphTypewriterProps {
+		/** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+		title: string;
+		/** Lines typed one character at a time, in order. */
+		lines: string[];
+		/** Milliseconds per character. Default 55. */
+		speedMs?: number;
+		/** Milliseconds to hold the full text before restarting. Default 1400. */
+		holdMs?: number;
+		/** Clear and retype after the hold. Default true. */
+		loop?: boolean;
+		/** Cursor character shown after the last revealed character. Default '█'. */
+		cursor?: string;
+		/** Animate the typing. Default true. Reduced motion shows the full text. */
+		animated?: boolean;
+		/** Character at each corner of the frame. Default '+'. */
+		corner?: string;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+
+	let {
+		title,
+		lines,
+		speedMs = 55,
+		holdMs = 1400,
+		loop = true,
+		cursor = '█',
+		animated = true,
+		corner,
+		class: className = ''
+	}: GraphTypewriterProps = $props();
+
+	let count = $state(0);
+
+	const moving = $derived(
+		animated &&
+			(typeof window === 'undefined' ||
+				!window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+	);
+
+	const total = $derived(lines.reduce((sum, line) => sum + line.length, 0));
+	const finished = $derived(count >= total);
+	const blinking = $derived(moving && !(finished && !loop));
+
+	$effect(() => {
+		if (!moving) {
+			return;
+		}
+
+		if (count < total) {
+			const timer = window.setTimeout(() => {
+				count += 1;
+			}, speedMs);
+
+			return () => window.clearTimeout(timer);
+		}
+
+		if (loop) {
+			const timer = window.setTimeout(() => {
+				count = 0;
+			}, holdMs);
+
+			return () => window.clearTimeout(timer);
+		}
+	});
+
+	const view = $derived.by(() => {
+		// Frozen (reduced motion or animated=false): everything revealed at once.
+		let left = moving ? count : Number.POSITIVE_INFINITY;
+		const rows: string[] = [];
+		let at = lines.length > 0 ? 0 : -1;
+
+		for (let i = 0; i < lines.length; i += 1) {
+			const take = Math.max(0, Math.min(lines[i].length, left));
+			rows.push(lines[i].slice(0, take));
+
+			if (take > 0) {
+				at = i;
+			}
+
+			left -= take;
+		}
+
+		return { rows, at };
+	});
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="viewport">
+			<pre class="art"><code>{#each view.rows as row, i (i)}{row}{#if i === view.at}<span class="cursor" class:blinking>{cursor}</span>{/if}{#if i < view.rows.length - 1}{'\n'}{/if}{/each}</code></pre>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.viewport {
+		overflow-x: auto;
+	}
+
+	.art {
+		margin: 0;
+		font-size: 0.85rem;
+		line-height: 1.4;
+		color: var(--graph-muted, oklch(0.62 0 0));
+		white-space: pre;
+	}
+
+	.cursor {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.cursor.blinking {
+			animation: blink 1.1s steps(1) infinite;
+		}
+
+		@keyframes blink {
+			50% {
+				opacity: 0;
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,22 @@
+export interface GraphTypewriterProps {
+    /** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+    title: string;
+    /** Lines typed one character at a time, in order. */
+    lines: string[];
+    /** Milliseconds per character. Default 55. */
+    speedMs?: number;
+    /** Milliseconds to hold the full text before restarting. Default 1400. */
+    holdMs?: number;
+    /** Clear and retype after the hold. Default true. */
+    loop?: boolean;
+    /** Cursor character shown after the last revealed character. Default '█'. */
+    cursor?: string;
+    /** Animate the typing. Default true. Reduced motion shows the full text. */
+    animated?: boolean;
+    /** Character at each corner of the frame. Default '+'. */
+    corner?: string;
+    class?: string;
+}
+declare const GraphTypewriter: import("svelte").Component<GraphTypewriterProps, {}, "">;
+type GraphTypewriter = ReturnType<typeof GraphTypewriter>;
+export default GraphTypewriter;