markgraphy 0.1.1

package/dist/diagram/parser.js

@@ -0,0 +1,71 @@
+/*
+ * ASCII and Unicode diagram tokenizer, ported from fractalsvelte.
+ * Formats box-drawing lines, titles, arrows, and glyphs into styled spans.
+ * The spans are plain class names — AsciiDiagram supplies the colors through
+ * the --graph-* variables. Input is HTML-escaped before tokenizing, so the
+ * formatted output is safe to inject with {@html}.
+ */
+// Regex patterns for the diagram elements we recognize.
+const TITLE_PATTERN = /\[\s*[A-Z0-9\s_\-\.·:]+\s*\]/g;
+const GLYPH_BLOCKS = /[▂▃▄▅▆▇█░▒▓■□▪▫◆◇●○•]/g;
+export function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+/**
+ * Parses a raw text diagram into safe, syntax-highlighted HTML spans.
+ * Callers style the .diag-* classes; AsciiDiagram is the reference skin.
+ */
+export function formatDiagramHtml(rawText, customAccentPattern) {
+    const lines = rawText.split('\n');
+    const processedLines = lines.map((line) => {
+        if (!line.trim()) {
+            return '';
+        }
+        // Escape first, then match against the escaped forms of < and >.
+        let escaped = escapeHtml(line);
+        escaped = escaped.replace(TITLE_PATTERN, (match) => {
+            return `<span class="diag-title">${match}</span>`;
+        });
+        const escapedArrowPattern = /(?:~&gt;|-&gt;|--&gt;|&lt;-|&lt;--|&lt;-&gt;|&lt;=|=&gt;|◀\s*-\s*▶|◀-▶|◀|▶|▼|▲|▷|◁|▸|◂|→|←|↑|↓|↔|↕|↖|↗|↘|↙)/g;
+        escaped = escaped.replace(escapedArrowPattern, (match) => {
+            return `<span class="diag-arrow">${match}</span>`;
+        });
+        if (customAccentPattern) {
+            escaped = escaped.replace(customAccentPattern, (match) => {
+                return `<span class="diag-accent">${match}</span>`;
+            });
+        }
+        escaped = escaped.replace(GLYPH_BLOCKS, (match) => {
+            return `<span class="diag-glyph">${match}</span>`;
+        });
+        // Rounded corners and junctions get their own class.
+        const roundedCorners = /[╭╮╯╰┏┓┗┛╔╗╚╝]/g;
+        escaped = escaped.replace(roundedCorners, (match) => {
+            return `<span class="diag-corner">${match}</span>`;
+        });
+        const boxBorderChars = /[┌┐└┘├┤┬┴┼─│━┃═║]/g;
+        escaped = escaped.replace(boxBorderChars, (match) => {
+            return `<span class="diag-box">${match}</span>`;
+        });
+        return escaped;
+    });
+    return processedLines.join('\n');
+}
+/** Pads or trims every line to a shared width so box borders line up. */
+export function alignBoxLines(text, targetWidth) {
+    const lines = text.split('\n');
+    const maxWidth = targetWidth ?? Math.max(...lines.map((l) => l.length));
+    return lines
+        .map((line) => {
+        if (line.length < maxWidth) {
+            return line + ' '.repeat(maxWidth - line.length);
+        }
+        return line;
+    })
+        .join('\n');
+}

package/dist/frame/Graph.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+		title?: string;
+		/** Character at each corner of the frame. Default "+". */
+		corner?: string;
+		/** Frame motion. 'march' animates the dashes; off under reduced motion. Default 'none'. */
+		motion?: 'none' | 'march';
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { title, corner = '+', motion = 'none', class: className = '', children }: Props = $props();
+
+	const uid = $props.id();
+</script>
+
+<figure class="graph {className}" data-motion={motion} aria-labelledby={title ? uid : undefined}>
+	{#if title}
+		<figcaption id={uid} class="title"><span class="ink">[ {title} ]</span></figcaption>
+	{/if}
+	<span aria-hidden="true" class="corner tl">{corner}</span>
+	<span aria-hidden="true" class="corner tr">{corner}</span>
+	<span aria-hidden="true" class="corner bl">{corner}</span>
+	<span aria-hidden="true" class="corner br">{corner}</span>
+	{@render children?.()}
+</figure>
+
+<style>
+	/*
+	 * The frame is four repeating gradients, one per edge. The dash pattern is
+	 * a token (--graph-framer) so a host can swap the rhythm without touching
+	 * the component; it falls back to 4px on / 4px off in --graph-frame.
+	 */
+	.graph {
+		--fg-dash: var(
+			--graph-framer,
+			var(--graph-frame, oklch(0.6 0 0 / 0.5)) 0 4px,
+			transparent 4px 8px
+		);
+		position: relative;
+		min-width: 0;
+		margin: 0;
+		font-family: var(--graph-font, ui-monospace, monospace);
+		font-size: 0.875rem;
+		line-height: 1.6;
+		color: var(--graph-foreground, oklch(0.93 0 0));
+		font-variant-numeric: tabular-nums;
+		background-image:
+			repeating-linear-gradient(to right, var(--fg-dash)),
+			repeating-linear-gradient(to bottom, var(--fg-dash)),
+			repeating-linear-gradient(to right, var(--fg-dash)),
+			repeating-linear-gradient(to bottom, var(--fg-dash));
+		background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
+		background-position:
+			0 0,
+			100% 0,
+			0 100%,
+			0 0;
+		background-size:
+			100% 1px,
+			1px 100%,
+			100% 1px,
+			1px 100%;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.graph[data-motion='march'] {
+			animation: fg-march 0.7s linear infinite;
+		}
+	}
+
+	@keyframes fg-march {
+		to {
+			background-position:
+				8px 0,
+				100% 8px,
+				-8px 100%,
+				0 -8px;
+		}
+	}
+
+	.corner {
+		position: absolute;
+		z-index: 10;
+		display: flex;
+		width: 1rem;
+		height: 1rem;
+		align-items: center;
+		justify-content: center;
+		background: var(--graph-background, oklch(0.16 0.01 160));
+		font-size: 0.875rem;
+		line-height: 1;
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		user-select: none;
+		pointer-events: none;
+	}
+
+	.tl {
+		top: 0;
+		left: 0;
+		transform: translate(-50%, -50%);
+	}
+
+	.tr {
+		top: 0;
+		right: 0;
+		transform: translate(50%, -50%);
+	}
+
+	.bl {
+		bottom: 0;
+		left: 0;
+		transform: translate(-50%, 50%);
+	}
+
+	.br {
+		right: 0;
+		bottom: 0;
+		transform: translate(50%, 50%);
+	}
+
+	.title {
+		position: absolute;
+		top: 0;
+		left: 50%;
+		z-index: 10;
+		transform: translate(-50%, -50%);
+		background: var(--graph-background, oklch(0.16 0.01 160));
+		padding: 0 0.625rem;
+		letter-spacing: 0.05em;
+		white-space: nowrap;
+		text-transform: uppercase;
+	}
+
+	.ink {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+</style>

package/dist/frame/Graph.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. */
+    title?: string;
+    /** Character at each corner of the frame. Default "+". */
+    corner?: string;
+    /** Frame motion. 'march' animates the dashes; off under reduced motion. Default 'none'. */
+    motion?: 'none' | 'march';
+    class?: string;
+    children?: Snippet;
+}
+declare const Graph: import("svelte").Component<Props, {}, "">;
+type Graph = ReturnType<typeof Graph>;
+export default Graph;

package/dist/frame/GraphArrow.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	/** Dashed arrow between flow nodes. `stretch` spans the available row. */
+	interface Props {
+		accent?: boolean;
+		stretch?: boolean;
+		class?: string;
+	}
+
+	let { accent = false, stretch = false, class: className = '' }: Props = $props();
+</script>
+
+<div class="arrow {className}" class:accent class:stretch aria-hidden="true">
+	{#if stretch}
+		<span class="line"></span>
+	{:else}
+		<span>- - -</span>
+	{/if}
+	<span class="head">▶</span>
+</div>
+
+<style>
+	.arrow {
+		display: flex;
+		min-width: 1.5rem;
+		align-items: center;
+		gap: 0.25rem;
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.stretch {
+		min-width: 2.5rem;
+		flex: 1;
+	}
+
+	.accent {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.line {
+		height: 1px;
+		min-width: 1.5rem;
+		flex: 1;
+		border-top: 1px dashed currentColor;
+	}
+
+	.head {
+		flex-shrink: 0;
+	}
+</style>

package/dist/frame/GraphArrow.svelte.d.ts

@@ -0,0 +1,9 @@
+/** Dashed arrow between flow nodes. `stretch` spans the available row. */
+interface Props {
+    accent?: boolean;
+    stretch?: boolean;
+    class?: string;
+}
+declare const GraphArrow: import("svelte").Component<Props, {}, "">;
+type GraphArrow = ReturnType<typeof GraphArrow>;
+export default GraphArrow;

package/dist/frame/GraphBody.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		/** Compact padding for dense graphs like Table and Invoice. */
+		tight?: boolean;
+		children?: Snippet;
+	}
+
+	let { class: className = '', tight = false, children }: Props = $props();
+</script>
+
+<div class="body {className}" class:tight>
+	{@render children?.()}
+</div>
+
+<style>
+	.body {
+		min-width: 0;
+		padding: 1.75rem 1.25rem;
+	}
+
+	@media (min-width: 640px) {
+		.body {
+			padding: 2rem;
+		}
+	}
+
+	.body.tight {
+		padding: 1.5rem 0.75rem;
+	}
+
+	@media (min-width: 640px) {
+		.body.tight {
+			padding: 2rem 1.5rem;
+		}
+	}
+</style>

package/dist/frame/GraphBody.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    /** Compact padding for dense graphs like Table and Invoice. */
+    tight?: boolean;
+    children?: Snippet;
+}
+declare const GraphBody: import("svelte").Component<Props, {}, "">;
+type GraphBody = ReturnType<typeof GraphBody>;
+export default GraphBody;

package/dist/frame/GraphRule.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+</script>
+
+<div class="rule {className}" aria-hidden="true"></div>
+
+<style>
+	.rule {
+		width: 100%;
+		height: 1px;
+		background-image: repeating-linear-gradient(
+			to right,
+			var(--graph-frame, oklch(0.6 0 0 / 0.5)) 0 2px,
+			transparent 2px 7px
+		);
+	}
+</style>

package/dist/frame/GraphRule.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    class?: string;
+}
+declare const GraphRule: import("svelte").Component<Props, {}, "">;
+type GraphRule = ReturnType<typeof GraphRule>;
+export default GraphRule;

package/dist/frame/GraphTick.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/** One glyph on a GraphTrack: flexes to fill, stays 1ch wide, centered. */
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<span class="tick {className}">
+	{@render children?.()}
+</span>
+
+<style>
+	.tick {
+		flex: 1 1 0%;
+		min-width: 1ch;
+		text-align: center;
+	}
+</style>

package/dist/frame/GraphTick.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+/** One glyph on a GraphTrack: flexes to fill, stays 1ch wide, centered. */
+interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const GraphTick: import("svelte").Component<Props, {}, "">;
+type GraphTick = ReturnType<typeof GraphTick>;
+export default GraphTick;

package/dist/frame/GraphTrack.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Horizontal track that spans the frame. Use for graphs that represent
+	 * a range (meter, stack, bullet, rank) — pair with GraphTick so ticks
+	 * flex edge to edge. Packed graphs (spark, bars, cells, uptime) should
+	 * not use tracks.
+	 */
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<span class="track {className}" aria-hidden="true">
+	{@render children?.()}
+</span>
+
+<style>
+	.track {
+		display: flex;
+		width: 100%;
+		min-width: 0;
+		user-select: none;
+	}
+</style>

package/dist/frame/GraphTrack.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+/**
+ * Horizontal track that spans the frame. Use for graphs that represent
+ * a range (meter, stack, bullet, rank) — pair with GraphTick so ticks
+ * flex edge to edge. Packed graphs (spark, bars, cells, uptime) should
+ * not use tracks.
+ */
+interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const GraphTrack: import("svelte").Component<Props, {}, "">;
+type GraphTrack = ReturnType<typeof GraphTrack>;
+export default GraphTrack;

package/dist/frame/clock.d.ts

@@ -0,0 +1,10 @@
+export declare function parseInstant(value: Date | number | string): number;
+export declare function pad2(value: number): string;
+export declare function formatHms(ms: number): string;
+export declare function formatAgo(ms: number): string;
+export declare function formatClock(ms: number): string;
+/**
+ * The current time, ticking once per interval. SSR-safe: renders null
+ * on the server and starts the interval on the client.
+ */
+export declare function graphNow(interval?: number): import("svelte/store").Readable<number | null>;

package/dist/frame/clock.js

@@ -0,0 +1,62 @@
+/*
+ * Clock helpers for Timer / Countdown, ported from markdown-graphs.
+ * Timers tick once a second — as text, never as animation.
+ */
+import { readable } from 'svelte/store';
+export function parseInstant(value) {
+    if (value instanceof Date) {
+        return value.getTime();
+    }
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? value : Number.NaN;
+    }
+    return Date.parse(value);
+}
+export function pad2(value) {
+    return String(Math.trunc(value)).padStart(2, '0');
+}
+export function formatHms(ms) {
+    const total = Math.max(0, Math.floor(ms / 1000));
+    const days = Math.floor(total / 86400);
+    const hours = Math.floor((total % 86400) / 3600);
+    const minutes = Math.floor((total % 3600) / 60);
+    const seconds = total % 60;
+    const clock = `${pad2(hours)}:${pad2(minutes)}:${pad2(seconds)}`;
+    if (days > 0) {
+        return `${days}d ${clock}`;
+    }
+    return clock;
+}
+export function formatAgo(ms) {
+    const seconds = Math.max(0, Math.floor(ms / 1000));
+    if (seconds < 60) {
+        return `${seconds}s ago`;
+    }
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) {
+        return `${minutes}m ago`;
+    }
+    const hours = Math.floor(minutes / 60);
+    if (hours < 48) {
+        return `${hours}h ago`;
+    }
+    return `${Math.floor(hours / 24)}d ago`;
+}
+export function formatClock(ms) {
+    const date = new Date(ms);
+    return `${pad2(date.getHours())}:${pad2(date.getMinutes())}:${pad2(date.getSeconds())}`;
+}
+/**
+ * The current time, ticking once per interval. SSR-safe: renders null
+ * on the server and starts the interval on the client.
+ */
+export function graphNow(interval = 1000) {
+    return readable(null, (set) => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        set(Date.now());
+        const id = window.setInterval(() => set(Date.now()), interval);
+        return () => window.clearInterval(id);
+    });
+}

package/dist/frame/glyphs.d.ts

@@ -0,0 +1,22 @@
+export declare const GLYPH_SETS: {
+    readonly shade: readonly ["·", "░", "▒", "▓", "█"];
+    readonly ascii: readonly [".", "-", "=", "#", "@"];
+    readonly hash: readonly [".", ":", "+", "#", "█"];
+    readonly bar: readonly ["▁", "▂", "▃", "▅", "█"];
+};
+export type GlyphSetName = keyof typeof GLYPH_SETS;
+export type Glyphs = GlyphSetName | readonly string[];
+export declare const INTENSITY_GLYPHS: readonly string[];
+export declare function clamp01(value: number): number;
+export declare function resolveGlyphs(glyphs?: Glyphs): readonly string[];
+export declare function trackMarks(glyphs?: Glyphs, fallback?: {
+    empty: string;
+    rest: string;
+    fill: string;
+}): {
+    empty: string;
+    rest: string;
+    fill: string;
+};
+export declare function intensityLevel(value: number, max: number): number;
+export declare function intensityGlyph(level: number, glyphs?: readonly string[]): string;

package/dist/frame/glyphs.js

@@ -0,0 +1,53 @@
+/*
+ * Glyph sets and intensity math, ported from markdown-graphs.
+ * Glyphs draw the chart — no SVG, no canvas.
+ */
+export const GLYPH_SETS = {
+    shade: ['·', '░', '▒', '▓', '█'],
+    ascii: ['.', '-', '=', '#', '@'],
+    hash: ['.', ':', '+', '#', '█'],
+    bar: ['▁', '▂', '▃', '▅', '█']
+};
+export const INTENSITY_GLYPHS = GLYPH_SETS.shade;
+export function clamp01(value) {
+    return Math.min(1, Math.max(0, value));
+}
+export function resolveGlyphs(glyphs) {
+    if (glyphs == null) {
+        return GLYPH_SETS.shade;
+    }
+    if (typeof glyphs === 'string') {
+        return GLYPH_SETS[glyphs] ?? GLYPH_SETS.shade;
+    }
+    return glyphs.length > 0 ? glyphs : GLYPH_SETS.shade;
+}
+export function trackMarks(glyphs, fallback = {
+    empty: '-',
+    rest: '░',
+    fill: '█'
+}) {
+    if (glyphs == null) {
+        return fallback;
+    }
+    const set = resolveGlyphs(glyphs);
+    const last = set.length - 1;
+    return {
+        empty: set[0] ?? fallback.empty,
+        rest: set[Math.min(1, last)] ?? fallback.rest,
+        fill: set[last] ?? fallback.fill
+    };
+}
+export function intensityLevel(value, max) {
+    if (value <= 0 || max <= 0) {
+        return 0;
+    }
+    return Math.max(1, Math.round(clamp01(value / max) * 4));
+}
+export function intensityGlyph(level, glyphs = INTENSITY_GLYPHS) {
+    if (glyphs.length === 0) {
+        return '·';
+    }
+    const clamped = Math.min(4, Math.max(0, Math.round(level)));
+    const index = Math.round((clamped / 4) * (glyphs.length - 1));
+    return glyphs[index] ?? glyphs[0] ?? '·';
+}

package/dist/frame/motion.css

@@ -0,0 +1,27 @@
+/*
+ * Markgraphy motion.
+ * Transform + opacity only, 220ms, ease-out cubic. No loops.
+ * prefers-reduced-motion: reduce disables everything.
+ */
+
+.fg-motion {
+	opacity: 0;
+	transform: translateY(var(--fg-y, 8px));
+	transition:
+		opacity 220ms cubic-bezier(0.215, 0.61, 0.355, 1),
+		transform 220ms cubic-bezier(0.215, 0.61, 0.355, 1);
+	transition-delay: var(--fg-delay, 0ms);
+}
+
+.fg-motion.is-revealed {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.fg-motion {
+		opacity: 1;
+		transform: none;
+		transition: none;
+	}
+}

package/dist/frame/motion.d.ts

@@ -0,0 +1,24 @@
+import './motion.css';
+export declare const EASE_OUT_CUBIC = "cubic-bezier(0.215, 0.61, 0.355, 1)";
+export declare const DIM_OPACITY = 0.4;
+export type RevealOptions = {
+    /** Delay in ms. Use `stagger()` — capped at 280ms. */
+    delay?: number;
+    /** IntersectionObserver threshold (0–1). Default 0.25. */
+    amount?: number;
+    /** Vertical offset in px. Default 8. */
+    y?: number;
+    /** Reveal once only. Default true. */
+    once?: boolean;
+};
+/**
+ * Svelte action: fade-and-rise when the element enters the viewport.
+ * Stagger rows, weeks, or lists — never hundreds of individual cells.
+ *
+ * <div use:reveal={{ delay: stagger(i, 40) }}>
+ */
+export declare function reveal(node: HTMLElement, options?: RevealOptions): {
+    destroy(): void;
+};
+/** Stagger delay for index `i`, capped at 280ms. */
+export declare function stagger(index: number, step?: number): number;