markgraphy 0.1.1

package/dist/graphs/GraphTimeline.svelte

@@ -0,0 +1,164 @@
+<script module lang="ts">
+	import type { GraphPalette } from '../frame/tone';
+
+	/** Progress state of a timeline event. */
+	export type TimelineState = 'done' | 'now' | 'next';
+
+	export interface TimelineEvent {
+		date: string;
+		label: string;
+		state?: TimelineState;
+	}
+
+	export interface GraphTimelineProps {
+		title: string;
+		events: TimelineEvent[];
+		palette?: GraphPalette;
+		corner?: string;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+	import { reveal, stagger } from '../frame/motion';
+	import { toneRole, type ToneRole } from '../frame/tone';
+
+	const MARK: Record<TimelineState, string> = {
+		done: '●',
+		now: '●',
+		next: '○'
+	};
+
+	let {
+		title,
+		events,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphTimelineProps = $props();
+
+	function eventRole(state: TimelineState): ToneRole {
+		if (state === 'now') {
+			return toneRole(palette, 'primary');
+		}
+
+		if (state === 'next') {
+			return toneRole(palette, 'secondary');
+		}
+
+		return 'foreground';
+	}
+
+	function dateRole(state: TimelineState): ToneRole {
+		return state === 'next' ? toneRole(palette, 'secondary') : 'foreground';
+	}
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<ol class="timeline" role="list">
+			{#each events as event, index (`${event.date}-${event.label}`)}
+				{@const state = event.state ?? 'done'}
+				{@const main = eventRole(state)}
+				{@const date = dateRole(state)}
+				<li class="event" use:reveal={{ delay: stagger(index, 50), amount: 0.4 }}>
+					<div class="line">
+						<span
+							class="mark"
+							aria-hidden="true"
+							class:c-accent={main === 'accent'}
+							class:c-accent2={main === 'accent2'}
+							class:c-muted={main === 'muted'}
+							class:c-fg={main === 'foreground'}
+						>
+							{MARK[state]}
+						</span>
+						<span
+							class="when"
+							class:c-accent={date === 'accent'}
+							class:c-accent2={date === 'accent2'}
+							class:c-muted={date === 'muted'}
+							class:c-fg={date === 'foreground'}
+						>
+							{event.date}
+						</span>
+						<span
+							class="label"
+							class:c-accent={main === 'accent'}
+							class:c-accent2={main === 'accent2'}
+							class:c-muted={main === 'muted'}
+							class:c-fg={main === 'foreground'}
+						>
+							{event.label}
+						</span>
+					</div>
+					{#if index < events.length - 1}
+						<div class="link" aria-hidden="true">
+							<span class="linkmark">│</span>
+						</div>
+					{/if}
+				</li>
+			{/each}
+		</ol>
+	</GraphBody>
+</Graph>
+
+<style>
+	.timeline {
+		display: flex;
+		flex-direction: column;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.event {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.line {
+		display: grid;
+		grid-template-columns: 1.25rem 7rem minmax(0, 1fr);
+		align-items: baseline;
+		column-gap: 1rem;
+	}
+
+	.mark {
+		text-align: center;
+		line-height: 1;
+		user-select: none;
+	}
+
+	.link {
+		display: grid;
+		grid-template-columns: 1.25rem 7rem minmax(0, 1fr);
+		column-gap: 1rem;
+		padding: 0.25rem 0;
+		user-select: none;
+	}
+
+	.linkmark {
+		grid-column: 1;
+		text-align: center;
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.c-accent {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.c-accent2 {
+		color: var(--graph-accent-2, oklch(0.78 0.12 70));
+	}
+
+	.c-muted {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.c-fg {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+</style>

package/dist/graphs/GraphTimeline.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { GraphPalette } from '../frame/tone';
+/** Progress state of a timeline event. */
+export type TimelineState = 'done' | 'now' | 'next';
+export interface TimelineEvent {
+    date: string;
+    label: string;
+    state?: TimelineState;
+}
+export interface GraphTimelineProps {
+    title: string;
+    events: TimelineEvent[];
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphTimeline: import("svelte").Component<GraphTimelineProps, {}, "">;
+type GraphTimeline = ReturnType<typeof GraphTimeline>;
+export default GraphTimeline;

package/dist/graphs/GraphTimer.svelte

@@ -0,0 +1,117 @@
+<script module lang="ts">
+	import type { GraphPalette } from '../frame/tone';
+
+	/** Elapsed time, how long ago, or the local clock. */
+	export type TimerKind = 'elapsed' | 'ago' | 'clock';
+
+	export interface GraphTimerProps {
+		title: string;
+		kind?: TimerKind;
+		at?: Date | number | string;
+		caption?: string;
+		palette?: GraphPalette;
+		corner?: string;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+	import { formatAgo, formatClock, formatHms, graphNow, parseInstant } from '../frame/clock';
+	import { reveal } from '../frame/motion';
+
+	let {
+		title,
+		kind = 'elapsed',
+		at,
+		caption,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphTimerProps = $props();
+
+	const time = graphNow();
+	const origin = $derived(at == null ? Number.NaN : parseInstant(at));
+
+	const view = $derived.by(() => {
+		const placeholder = { value: kind === 'ago' ? '0s ago' : '00:00:00', spoken: 'timer' };
+
+		if ($time == null) {
+			return placeholder;
+		}
+
+		if (kind === 'clock') {
+			const value = formatClock($time);
+			return { value, spoken: `local time ${value}` };
+		}
+
+		if (!Number.isFinite(origin)) {
+			return placeholder;
+		}
+
+		const elapsed = Math.max(0, $time - origin);
+
+		if (kind === 'ago') {
+			const value = formatAgo(elapsed);
+			return { value, spoken: value };
+		}
+
+		const value = formatHms(elapsed);
+		return { value, spoken: `elapsed ${value}` };
+	});
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="timer" use:reveal={{ amount: 0.5 }}>
+			<p class="value c-accent">{view.value}</p>
+			{#if caption}
+				<p class="muted">{caption}</p>
+			{/if}
+		</div>
+		<span class="sr-only">{view.spoken}</span>
+	</GraphBody>
+</Graph>
+
+<style>
+	.timer {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.value {
+		margin: 0;
+		font-size: 1.875rem;
+		line-height: 1.2;
+		letter-spacing: -0.025em;
+	}
+
+	@media (min-width: 640px) {
+		.value {
+			font-size: 2.25rem;
+		}
+	}
+
+	.muted {
+		margin: 0;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.c-accent {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+		border-width: 0;
+	}
+</style>

package/dist/graphs/GraphTimer.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { GraphPalette } from '../frame/tone';
+/** Elapsed time, how long ago, or the local clock. */
+export type TimerKind = 'elapsed' | 'ago' | 'clock';
+export interface GraphTimerProps {
+    title: string;
+    kind?: TimerKind;
+    at?: Date | number | string;
+    caption?: string;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphTimer: import("svelte").Component<GraphTimerProps, {}, "">;
+type GraphTimer = ReturnType<typeof GraphTimer>;
+export default GraphTimer;

package/dist/graphs/GraphTree.svelte

@@ -0,0 +1,147 @@
+<script module lang="ts">
+	/** Indented file/org tree with ├─/└─ branches. */
+	export interface TreeNode {
+		label: string;
+		meta?: string;
+		accent?: boolean;
+		children?: TreeNode[];
+	}
+
+	export interface GraphTreeProps {
+		title: string;
+		nodes: TreeNode[];
+		corner?: string;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+	import { reveal, stagger } from '../frame/motion';
+
+	let { title, nodes, corner, class: className = '' }: GraphTreeProps = $props();
+
+	interface FlatRow {
+		key: string;
+		branch: string;
+		label: string;
+		meta?: string;
+		accent?: boolean;
+	}
+
+	function flatten(
+		nodes: TreeNode[],
+		prefix = '',
+		trail = 'root',
+		isRoot = true
+	): FlatRow[] {
+		const singleRoot = isRoot && nodes.length === 1;
+
+		return nodes.flatMap((node, index) => {
+			const last = index === nodes.length - 1;
+			const branch = singleRoot ? '' : prefix + (last ? '└─ ' : '├─ ');
+			const key = `${trail}/${node.label}-${index}`;
+			const childPrefix = singleRoot ? '' : prefix + (last ? '   ' : '│  ');
+			const row: FlatRow = {
+				key,
+				branch,
+				label: node.label,
+				meta: node.meta,
+				accent: node.accent
+			};
+			const kids = node.children ? flatten(node.children, childPrefix, key, false) : [];
+			return [row, ...kids];
+		});
+	}
+
+	const rows = $derived(flatten(nodes));
+	const hasAccent = $derived(rows.some((row) => row.accent));
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="scroll">
+			<ul class="tree" role="list">
+				{#each rows as row, i (row.key)}
+					<li
+						class="row"
+						class:dim={hasAccent && !row.accent}
+						use:reveal={{ delay: stagger(i, 40), amount: 0.4 }}
+					>
+						<span class="entry">
+							<span class="branch" aria-hidden="true">{row.branch}</span>
+							<span class="label" class:c-accent={row.accent}>{row.label}</span>
+						</span>
+						{#if row.meta}
+							<span class="meta">{row.meta}</span>
+						{:else}
+							<span></span>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+		</div>
+		<span class="sr-only">Tree with {rows.length} nodes</span>
+	</GraphBody>
+</Graph>
+
+<style>
+	.scroll {
+		overflow-x: auto;
+	}
+
+	.tree {
+		display: flex;
+		min-width: max-content;
+		flex-direction: column;
+		gap: 0.25rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.row {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) auto;
+		align-items: baseline;
+		column-gap: 1.5rem;
+	}
+
+	.entry {
+		white-space: nowrap;
+	}
+
+	.branch {
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+		user-select: none;
+	}
+
+	.label {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.c-accent {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.meta {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.dim {
+		opacity: 0.4;
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+		border-width: 0;
+	}
+</style>

package/dist/graphs/GraphTree.svelte.d.ts

@@ -0,0 +1,16 @@
+/** Indented file/org tree with ├─/└─ branches. */
+export interface TreeNode {
+    label: string;
+    meta?: string;
+    accent?: boolean;
+    children?: TreeNode[];
+}
+export interface GraphTreeProps {
+    title: string;
+    nodes: TreeNode[];
+    corner?: string;
+    class?: string;
+}
+declare const GraphTree: import("svelte").Component<GraphTreeProps, {}, "">;
+type GraphTree = ReturnType<typeof GraphTree>;
+export default GraphTree;

package/dist/graphs/GraphUptime.svelte

@@ -0,0 +1,210 @@
+<script module lang="ts">
+	import type { Glyphs } from '../frame/glyphs';
+	import type { GraphPalette } from '../frame/tone';
+
+	/** Rows of day-status glyphs: ok / degraded / down. */
+	export type UptimeStatus = 'ok' | 'degraded' | 'down' | 'empty';
+
+	export interface GraphUptimeProps {
+		title: string;
+		days: UptimeStatus[];
+		from?: string;
+		to?: string;
+		columns?: number;
+		glyphs?: Glyphs;
+		palette?: GraphPalette;
+		corner?: string;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+	import { resolveGlyphs } from '../frame/glyphs';
+	import { isMonoPalette } from '../frame/tone';
+	import { reveal, stagger } from '../frame/motion';
+
+	let {
+		title,
+		days,
+		from,
+		to,
+		columns = 30,
+		glyphs,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphUptimeProps = $props();
+
+	const mono = $derived(isMonoPalette(palette));
+
+	const view = $derived.by(() => {
+		const set = resolveGlyphs(glyphs);
+		const last = set.length - 1;
+		const known = days.filter((day) => day !== 'empty');
+		const ok = known.filter((day) => day === 'ok').length;
+		const percent = known.length === 0 ? 0 : Math.round((ok / known.length) * 100);
+		const cols = Math.max(1, columns);
+		const rows: UptimeStatus[][] = [];
+		for (let index = 0; index < days.length; index += cols) {
+			rows.push(days.slice(index, index + cols));
+		}
+		const mark: Record<UptimeStatus, string> = {
+			ok: set[last] ?? '█',
+			degraded: set[Math.min(2, last)] ?? '▒',
+			down: set[0] ?? '·',
+			empty: '-'
+		};
+		return { percent, rows, mark, knownCount: known.length };
+	});
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="upt">
+			<div class="stack">
+				<div class="grid" aria-hidden="true">
+					{#each view.rows as row, rowIndex}
+						<div class="week" use:reveal={{ delay: stagger(rowIndex, 40), amount: 0.4 }}>
+							{#each row as day}
+								<span
+									class="cell"
+									class:c-accent={day === 'ok'}
+									class:c-accent2={day === 'degraded' && !mono}
+									class:c-muted={day === 'degraded' && mono}
+									class:c-frame={day === 'down' || day === 'empty'}
+								>
+									{view.mark[day]}
+								</span>
+							{/each}
+						</div>
+					{/each}
+				</div>
+				<div class="meta">
+					{#if from || to}
+						<p class="dates">
+							{#if from}<span>{from}</span>{/if}
+							{#if to}<span>{to}</span>{/if}
+						</p>
+					{/if}
+					<p class="pct c-accent">{view.percent}%</p>
+				</div>
+			</div>
+			<p class="legend">
+				<span>
+					<span class="lg c-accent" aria-hidden="true">{view.mark.ok}</span> up
+				</span>
+				<span>
+					<span class="lg" class:c-accent2={!mono} class:c-muted={mono} aria-hidden="true">
+						{view.mark.degraded}
+					</span>
+					slow
+				</span>
+				<span>
+					<span class="lg c-frame" aria-hidden="true">{view.mark.down}</span> down
+				</span>
+			</p>
+			<span class="sr-only">
+				{view.percent} percent uptime over {view.knownCount} days{#if from && to}, {from}
+				to {to}{/if}
+			</span>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.upt {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.stack {
+		display: flex;
+		width: fit-content;
+		max-width: 100%;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.grid {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		user-select: none;
+	}
+
+	.week {
+		display: flex;
+		justify-content: flex-start;
+		gap: 0.125rem;
+	}
+
+	.cell {
+		min-width: 1ch;
+		text-align: center;
+	}
+
+	.meta {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		justify-content: space-between;
+		gap: 0.75rem;
+	}
+
+	.dates {
+		display: flex;
+		margin: 0;
+		gap: 0.75rem;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.pct {
+		margin: 0 0 0 auto;
+		text-align: right;
+	}
+
+	.legend {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		margin: 0;
+		color: var(--graph-muted, oklch(0.62 0 0));
+		gap: 0.25rem 1rem;
+	}
+
+	.lg {
+		user-select: none;
+	}
+
+	.c-accent {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.c-accent2 {
+		color: var(--graph-accent-2, oklch(0.78 0.12 70));
+	}
+
+	.c-muted {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.c-frame {
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+		border-width: 0;
+	}
+</style>

package/dist/graphs/GraphUptime.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Glyphs } from '../frame/glyphs';
+import type { GraphPalette } from '../frame/tone';
+/** Rows of day-status glyphs: ok / degraded / down. */
+export type UptimeStatus = 'ok' | 'degraded' | 'down' | 'empty';
+export interface GraphUptimeProps {
+    title: string;
+    days: UptimeStatus[];
+    from?: string;
+    to?: string;
+    columns?: number;
+    glyphs?: Glyphs;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphUptime: import("svelte").Component<GraphUptimeProps, {}, "">;
+type GraphUptime = ReturnType<typeof GraphUptime>;
+export default GraphUptime;