markgraphy 0.1.1

package/dist/diagram/AmplifierDiagram.svelte

@@ -0,0 +1,206 @@
+<script module lang="ts">
+	export interface AmplifierDiagramProps {
+		/** Starting gain multiplier. Default 3.5. */
+		gain?: number;
+		/** Show the gain slider and dB readout. Default true. */
+		interactive?: boolean;
+		/** Animate the waves. Default true. Reduced motion freezes them. */
+		animated?: boolean;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { dashEdge, padRow, splitLabeledEdge, type ArtSeg } from './ascii';
+
+	let {
+		gain = 3.5,
+		interactive = true,
+		animated = true,
+		class: className = ''
+	}: AmplifierDiagramProps = $props();
+
+	const BARS = [' ', '▂', '▃', '▄', '▅', '▆', '▇', '█'];
+	const WIDTH = 66;
+
+	const uid = $props.id();
+
+	// svelte-ignore state_referenced_locally
+	let multiplier = $state(gain);
+	let frame = $state(0);
+
+	const moving = $derived(
+		animated &&
+			(typeof window === 'undefined' ||
+				!window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+	);
+
+	$effect(() => {
+		if (!moving) {
+			return;
+		}
+
+		const timer = window.setInterval(() => {
+			frame = (frame + 1) % 12;
+		}, 150);
+
+		return () => window.clearInterval(timer);
+	});
+
+	// Your taste: a small, calm wave. Five columns, always.
+	const tasteWave = $derived.by(() => {
+		const base = [1, 3, 5, 3, 1];
+		return base
+			.map((h, i) => BARS[Math.min(7, Math.max(0, h + Math.round(Math.sin((frame + i) * 0.8) * 0.8)))])
+			.join('');
+	});
+
+	// Amplified: large, scaled by the gain slider. Nine columns, always.
+	const ampWave = $derived.by(() => {
+		const base = [2, 4, 6, 7, 7, 7, 6, 4, 2];
+		return base
+			.map((h, i) => {
+				const scaled = Math.round((h * multiplier) / 3 + Math.sin((frame + i * 2) * 0.6) * 1.2);
+				return BARS[Math.min(7, Math.max(1, scaled))];
+			})
+			.join('');
+	});
+
+	const arrows = '- - - - ▶';
+
+	const art = $derived.by((): ArtSeg[][] => {
+		const [edgeBefore, edgeLabel, edgeAfter] = splitLabeledEdge(WIDTH, 'AI IS AN AMPLIFIER');
+
+		return [
+			[
+				{ text: edgeBefore },
+				{ text: edgeLabel, cls: 'title' },
+				{ text: edgeAfter }
+			],
+			[{ text: padRow(WIDTH) }],
+			[
+				{ text: '|        ' },
+				{ text: tasteWave, cls: 'taste' },
+				{ text: `     ${arrows}  ` },
+				{ text: 'AI', cls: 'chip' },
+				{ text: `  ${arrows}     ` },
+				{ text: ampWave, cls: 'wave' },
+				{ text: '        |' }
+			],
+			[
+				{ text: '|      ', cls: '' },
+				{ text: 'your taste', cls: 'muted' },
+				{ text: '                               ' },
+				{ text: 'amplified', cls: 'muted' },
+				{ text: '        |' }
+			],
+			[{ text: padRow(WIDTH) }],
+			[{ text: dashEdge(WIDTH) }]
+		];
+	});
+</script>
+
+<div class="amp {className}">
+	<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>
+
+	{#if interactive}
+		<div class="controls">
+			<label class="gain" for="{uid}-gain">
+				Amplification <span class="badge">{multiplier.toFixed(1)}x</span>
+				<input id="{uid}-gain" type="range" min="1" max="5" step="0.1" bind:value={multiplier} />
+			</label>
+			<p class="hint">Signal power: <code>+{(multiplier * 6).toFixed(1)} dB</code></p>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.amp {
+		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-frame, oklch(0.6 0 0 / 0.5));
+		white-space: pre;
+	}
+
+	.title {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 600;
+	}
+
+	.taste {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.chip {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 600;
+	}
+
+	.wave {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 600;
+	}
+
+	.muted {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.controls {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		padding-top: 0.875rem;
+		border-top: 1px dashed var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.gain {
+		display: flex;
+		flex: 1;
+		max-width: 20rem;
+		align-items: center;
+		gap: 0.75rem;
+		color: var(--graph-muted, oklch(0.62 0 0));
+		white-space: nowrap;
+	}
+
+	.gain input {
+		flex: 1;
+		min-width: 0;
+		height: 4px;
+		accent-color: var(--graph-accent, oklch(0.78 0.17 155));
+		cursor: pointer;
+	}
+
+	.badge {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		border: 1px dashed var(--graph-accent, oklch(0.78 0.17 155));
+		padding: 0.1rem 0.4rem;
+		font-size: 0.75rem;
+	}
+
+	.hint {
+		margin: 0;
+		font-size: 0.8rem;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.hint code {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+</style>

package/dist/diagram/AmplifierDiagram.svelte.d.ts

@@ -0,0 +1,12 @@
+export interface AmplifierDiagramProps {
+    /** Starting gain multiplier. Default 3.5. */
+    gain?: number;
+    /** Show the gain slider and dB readout. Default true. */
+    interactive?: boolean;
+    /** Animate the waves. Default true. Reduced motion freezes them. */
+    animated?: boolean;
+    class?: string;
+}
+declare const AmplifierDiagram: import("svelte").Component<AmplifierDiagramProps, {}, "">;
+type AmplifierDiagram = ReturnType<typeof AmplifierDiagram>;
+export default AmplifierDiagram;

package/dist/diagram/AsciiDiagram.svelte

@@ -0,0 +1,212 @@
+<script module lang="ts">
+	export interface AsciiDiagramProps {
+		/** Raw ASCII or Unicode diagram text. */
+		content?: string;
+		/** Optional label above the diagram. Uppercase, 1-2 words. */
+		title?: string;
+		/** Show a copy-to-clipboard button. Default true. */
+		showCopy?: boolean;
+		/** Dashed border around the diagram. Default true. */
+		bordered?: boolean;
+		/** Phosphor glow on accent tokens. Default false. */
+		glow?: boolean;
+		/** Font size of the diagram text. */
+		fontSize?: string;
+		/** Line height of the diagram text. */
+		lineHeight?: string;
+		align?: 'left' | 'center';
+		class?: string;
+		/** Custom content instead of text. */
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { formatDiagramHtml } from './parser';
+
+	let {
+		content = '',
+		title = '',
+		showCopy = true,
+		bordered = true,
+		glow = false,
+		fontSize = '0.85rem',
+		lineHeight = '1.35',
+		align = 'left',
+		class: className = '',
+		children
+	}: AsciiDiagramProps = $props();
+
+	let copied = $state(false);
+
+	const formattedHtml = $derived(content ? formatDiagramHtml(content) : '');
+
+	async function handleCopy() {
+		if (!content) {
+			return;
+		}
+
+		try {
+			await navigator.clipboard.writeText(content);
+			copied = true;
+			window.setTimeout(() => {
+				copied = false;
+			}, 2000);
+		} catch {
+			// Clipboard unavailable (permissions or non-secure context).
+		}
+	}
+</script>
+
+<div
+	class="diagram {className}"
+	class:bordered
+	class:glow
+	style:--diag-font-size={fontSize}
+	style:--diag-line-height={lineHeight}
+	style:text-align={align}
+>
+	{#if title || (showCopy && content)}
+		<div class="header">
+			{#if title}
+				<span class="label">{title}</span>
+			{/if}
+			{#if showCopy && content}
+				<button class="copy" type="button" onclick={handleCopy}>
+					{copied ? '✓ copied' : 'copy'}
+				</button>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="viewport">
+		{#if content}
+			<pre class="art"><code>{@html formattedHtml}</code></pre>
+		{:else if children}
+			<div class="custom">
+				{@render children()}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.diagram {
+		position: relative;
+		min-width: 0;
+		font-size: 0.875rem;
+		user-select: text;
+	}
+
+	.bordered {
+		border: 1px dashed var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.bordered .header + .viewport,
+	.bordered .viewport {
+		padding: 1.25rem 1.5rem;
+	}
+
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+
+	.bordered .header {
+		padding: 0.5rem 1.5rem;
+		border-bottom: 1px dashed var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.label {
+		font-size: 0.75rem;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.copy {
+		padding: 0.15rem 0.5rem;
+		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;
+	}
+
+	.copy:hover {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+		border-color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.viewport {
+		overflow-x: auto;
+		min-width: 0;
+	}
+
+	.viewport:not(:first-child) {
+		margin-top: 0.75rem;
+	}
+
+	.bordered .viewport:not(:first-child) {
+		margin-top: 0;
+	}
+
+	.art {
+		margin: 0;
+		font-size: var(--diag-font-size, 0.85rem);
+		line-height: var(--diag-line-height, 1.35);
+		color: var(--graph-muted, oklch(0.62 0 0));
+		tab-size: 2;
+		white-space: pre;
+	}
+
+	.custom {
+		font-size: var(--diag-font-size, 0.85rem);
+	}
+
+	/* Token classes come from formatDiagramHtml's {@html} output, so they are
+	   global descendants of the scoped wrapper. */
+	.diagram :global(.diag-title) {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 600;
+	}
+
+	.diagram :global(.diag-arrow) {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 600;
+	}
+
+	.diagram :global(.diag-corner) {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 500;
+	}
+
+	.diagram :global(.diag-box) {
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.diagram :global(.diag-glyph) {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.diagram :global(.diag-accent) {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 500;
+	}
+
+	.glow :global(.diag-title) {
+		text-shadow: 0 0 12px color-mix(in oklab, var(--graph-accent, oklch(0.78 0.17 155)) 40%, transparent);
+	}
+
+	.glow :global(.diag-arrow) {
+		text-shadow: 0 0 8px color-mix(in oklab, var(--graph-accent, oklch(0.78 0.17 155)) 40%, transparent);
+	}
+
+	.glow :global(.diag-glyph) {
+		text-shadow: 0 0 8px color-mix(in oklab, var(--graph-accent, oklch(0.78 0.17 155)) 40%, transparent);
+	}
+</style>

package/dist/diagram/AsciiDiagram.svelte.d.ts

@@ -0,0 +1,24 @@
+export interface AsciiDiagramProps {
+    /** Raw ASCII or Unicode diagram text. */
+    content?: string;
+    /** Optional label above the diagram. Uppercase, 1-2 words. */
+    title?: string;
+    /** Show a copy-to-clipboard button. Default true. */
+    showCopy?: boolean;
+    /** Dashed border around the diagram. Default true. */
+    bordered?: boolean;
+    /** Phosphor glow on accent tokens. Default false. */
+    glow?: boolean;
+    /** Font size of the diagram text. */
+    fontSize?: string;
+    /** Line height of the diagram text. */
+    lineHeight?: string;
+    align?: 'left' | 'center';
+    class?: string;
+    /** Custom content instead of text. */
+    children?: Snippet;
+}
+import type { Snippet } from 'svelte';
+declare const AsciiDiagram: import("svelte").Component<AsciiDiagramProps, {}, "">;
+type AsciiDiagram = ReturnType<typeof AsciiDiagram>;
+export default AsciiDiagram;