markgraphy 0.1.1

package/dist/graphs/GraphCells.svelte

@@ -0,0 +1,181 @@
+<script module lang="ts">
+	import type { Glyphs } from '../frame/glyphs';
+	import type { GraphPalette } from '../frame/tone';
+
+	/** One labeled grid of cells; a value of `1` is filled, anything else is empty. */
+	export interface CellGrid {
+		label: string;
+		cells: number[][];
+	}
+
+	export interface GraphCellsProps {
+		title: string;
+		items: CellGrid[];
+		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 { trackMarks } from '../frame/glyphs';
+	import { isMonoPalette, seriesRole } from '../frame/tone';
+	import { reveal, stagger } from '../frame/motion';
+
+	let {
+		title,
+		items,
+		glyphs,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphCellsProps = $props();
+
+	const marks = $derived(trackMarks(glyphs, { empty: '·', rest: '░', fill: '█' }));
+
+	const summary = $derived.by(() => {
+		let filled = 0;
+		let total = 0;
+		for (const item of items) {
+			for (const row of item.cells) {
+				for (const cell of row) {
+					total += 1;
+					if (cell === 1) {
+						filled += 1;
+					}
+				}
+			}
+		}
+		return `${filled} of ${total} cells filled`;
+	});
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="wrap">
+			<div class="flow">
+				{#each items as item, itemIndex (item.label)}
+					{@const labelRole = isMonoPalette(palette) ? 'muted' : seriesRole(palette, itemIndex)}
+					<div class="group">
+						<div class="grid" aria-hidden="true">
+							{#each item.cells as row, rowIndex (rowIndex)}
+								<div class="row" use:reveal={{ delay: stagger(itemIndex * 8 + rowIndex, 40) }}>
+									{#each row as cell, cellIndex (cellIndex)}
+										{@const filled = cell === 1}
+										{@const role = filled
+											? isMonoPalette(palette)
+												? 'accent'
+												: seriesRole(palette, itemIndex)
+											: 'frame'}
+										<span
+											class="cell"
+											class:c-accent={role === 'accent'}
+											class:c-accent2={role === 'accent2'}
+											class:c-accent3={role === 'accent3'}
+											class:c-fg={role === 'foreground'}
+											class:c-frame={role === 'frame'}>{filled ? marks.fill : marks.empty}</span>
+									{/each}
+								</div>
+							{/each}
+						</div>
+						<p
+							class="label"
+							class:c-muted={labelRole === 'muted'}
+							class:c-accent={labelRole === 'accent'}
+							class:c-accent2={labelRole === 'accent2'}
+							class:c-accent3={labelRole === 'accent3'}>{item.label}</p>
+					</div>
+				{/each}
+			</div>
+		</div>
+		<span class="sr-only">{summary}</span>
+	</GraphBody>
+</Graph>
+
+<style>
+	.wrap {
+		container-type: inline-size;
+	}
+
+	.flow {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 2.5rem;
+	}
+
+	@container (min-width: 28rem) {
+		.flow {
+			flex-direction: row;
+			justify-content: center;
+			gap: 3rem;
+		}
+	}
+
+	.group {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.grid {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.row {
+		display: flex;
+		gap: 0.25rem;
+	}
+
+	.cell {
+		width: 1ch;
+		text-align: center;
+		user-select: none;
+	}
+
+	.label {
+		margin: 0;
+	}
+
+	.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-accent3 {
+		color: var(--graph-accent-3, oklch(0.75 0.1 200));
+	}
+
+	.c-fg {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.c-frame {
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.c-muted {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.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/GraphCells.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Glyphs } from '../frame/glyphs';
+import type { GraphPalette } from '../frame/tone';
+/** One labeled grid of cells; a value of `1` is filled, anything else is empty. */
+export interface CellGrid {
+    label: string;
+    cells: number[][];
+}
+export interface GraphCellsProps {
+    title: string;
+    items: CellGrid[];
+    glyphs?: Glyphs;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphCells: import("svelte").Component<GraphCellsProps, {}, "">;
+type GraphCells = ReturnType<typeof GraphCells>;
+export default GraphCells;

package/dist/graphs/GraphCompare.svelte

@@ -0,0 +1,192 @@
+<script module lang="ts">
+	import type { GraphPalette } from '../frame/tone';
+
+	export type CompareCell = string | boolean;
+
+	export interface CompareRow {
+		label: string;
+		values: CompareCell[];
+	}
+
+	export interface GraphCompareProps {
+		title: string;
+		columns: string[];
+		rows: CompareRow[];
+		accent?: string;
+		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 { isMonoPalette, seriesRole } from '../frame/tone';
+
+	let {
+		title,
+		columns,
+		rows,
+		accent,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphCompareProps = $props();
+
+	const template = $derived(`minmax(7rem, 1fr) repeat(${columns.length}, minmax(4.5rem, 7rem))`);
+	const summary = $derived(`${rows.length} features compared across ${columns.length} columns`);
+
+	function cellText(value: CompareCell): string {
+		if (typeof value === 'boolean') {
+			return value ? '✓' : '–';
+		}
+
+		return value;
+	}
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="scroll">
+			<div class="sheet">
+				<div class="head" style:--cols={template}>
+					<span></span>
+					{#each columns as column, index (column)}
+						{@const focused = !!accent && column === accent}
+						{@const role = isMonoPalette(palette)
+							? focused
+								? 'accent'
+								: 'muted'
+							: seriesRole(palette, index)}
+						<span
+							class="right"
+							class:c-accent={role === 'accent'}
+							class:c-accent2={role === 'accent2'}
+							class:c-accent3={role === 'accent3'}
+							class:c-muted={role === 'muted'}>{column}</span>
+					{/each}
+				</div>
+				<ul class="rows" role="list">
+					{#each rows as row, r (row.label)}
+						<li
+							class="line"
+							style:--cols={template}
+							use:reveal={{ delay: stagger(r, 40), amount: 0.4 }}
+						>
+							<span class="label">{row.label}</span>
+							{#each columns as column, index (index)}
+								{@const value = row.values[index]}
+								{@const mark = typeof value === 'boolean'}
+								{@const on = value === true}
+								{@const focused = !!accent && column === accent}
+								{@const dim = !!accent && !focused}
+								{@const mono = isMonoPalette(palette)}
+								{@const series = on && !mono ? seriesRole(palette, index) : null}
+								{@const faded = dim && !on && mono}
+								<span
+									class="right"
+									class:dim={faded}
+									class:c-accent={(on && mono && (focused || !accent)) || series === 'accent'}
+									class:c-accent2={series === 'accent2'}
+									class:c-accent3={series === 'accent3'}
+									class:c-fg={(on && mono && dim) || (!mark && focused)}
+									class:c-frame={mark && !on}
+									class:c-muted={!mark && dim}>{value == null ? '' : cellText(value)}</span>
+							{/each}
+						</li>
+					{/each}
+				</ul>
+			</div>
+		</div>
+		<span class="sr-only">{summary}</span>
+	</GraphBody>
+</Graph>
+
+<style>
+	.scroll {
+		overflow-x: auto;
+	}
+
+	.sheet {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		min-width: 32rem;
+	}
+
+	.head,
+	.line {
+		display: grid;
+		grid-template-columns: var(--cols);
+		column-gap: 1rem;
+	}
+
+	.head {
+		align-items: end;
+	}
+
+	.line {
+		align-items: baseline;
+	}
+
+	.rows {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.right {
+		text-align: right;
+	}
+
+	.dim {
+		opacity: 0.4;
+	}
+
+	.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-accent3 {
+		color: var(--graph-accent-3, oklch(0.75 0.1 200));
+	}
+
+	.c-fg {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.c-frame {
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.c-muted {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.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/GraphCompare.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { GraphPalette } from '../frame/tone';
+export type CompareCell = string | boolean;
+export interface CompareRow {
+    label: string;
+    values: CompareCell[];
+}
+export interface GraphCompareProps {
+    title: string;
+    columns: string[];
+    rows: CompareRow[];
+    accent?: string;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphCompare: import("svelte").Component<GraphCompareProps, {}, "">;
+type GraphCompare = ReturnType<typeof GraphCompare>;
+export default GraphCompare;

package/dist/graphs/GraphCountdown.svelte

@@ -0,0 +1,96 @@
+<script module lang="ts">
+	import type { GraphPalette } from '../frame/tone';
+
+	/** Time left until a date. */
+	export interface GraphCountdownProps {
+		title: string;
+		to: Date | number | string;
+		done?: 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 { formatHms, graphNow, parseInstant } from '../frame/clock';
+	import { reveal } from '../frame/motion';
+
+	let {
+		title,
+		to,
+		done = 'done',
+		caption,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphCountdownProps = $props();
+
+	const time = graphNow();
+	const target = $derived(parseInstant(to));
+
+	const view = $derived.by(() => {
+		const remaining = $time == null || !Number.isFinite(target) ? null : target - $time;
+		const finished = remaining != null && remaining <= 0;
+		const value = remaining == null ? '00:00:00' : finished ? done : formatHms(remaining);
+		return { value, finished };
+	});
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="countdown" use:reveal={{ amount: 0.5 }}>
+			<p class="value" class:c-accent={!view.finished} class:muted={view.finished}>
+				{view.value}
+			</p>
+			{#if caption}
+				<p class="muted">{caption}</p>
+			{/if}
+		</div>
+		<span class="sr-only">{view.finished ? done : `remaining ${view.value}`}</span>
+	</GraphBody>
+</Graph>
+
+<style>
+	.countdown {
+		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 {
+		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/GraphCountdown.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { GraphPalette } from '../frame/tone';
+/** Time left until a date. */
+export interface GraphCountdownProps {
+    title: string;
+    to: Date | number | string;
+    done?: string;
+    caption?: string;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphCountdown: import("svelte").Component<GraphCountdownProps, {}, "">;
+type GraphCountdown = ReturnType<typeof GraphCountdown>;
+export default GraphCountdown;

package/dist/graphs/GraphDiff.svelte

@@ -0,0 +1,181 @@
+<script module lang="ts">
+	import type { GraphPalette, ToneRole } from '../frame/tone';
+
+	export type DiffSign = 'add' | 'remove' | 'keep';
+
+	export interface DiffRow {
+		label: string;
+		value: string;
+		sign?: DiffSign;
+	}
+
+	export interface GraphDiffProps {
+		title: string;
+		rows: DiffRow[];
+		footer?: DiffRow;
+		palette?: GraphPalette;
+		corner?: string;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+	import GraphRule from '../frame/GraphRule.svelte';
+	import { reveal, stagger } from '../frame/motion';
+	import { toneRole } from '../frame/tone';
+
+	let {
+		title,
+		rows,
+		footer,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphDiffProps = $props();
+
+	const signGlyph: Record<DiffSign, string> = {
+		add: '+',
+		remove: '-',
+		keep: ' '
+	};
+
+	function toneOf(sign: DiffSign): ToneRole {
+		if (sign === 'add') {
+			return toneRole(palette, 'primary');
+		}
+
+		if (sign === 'remove') {
+			return toneRole(palette, 'secondary');
+		}
+
+		return 'foreground';
+	}
+
+	const summary = $derived.by(() => {
+		let add = 0;
+		let remove = 0;
+		let keep = 0;
+		for (const row of footer ? [...rows, footer] : rows) {
+			const sign = row.sign ?? 'keep';
+			if (sign === 'add') {
+				add += 1;
+			} else if (sign === 'remove') {
+				remove += 1;
+			} else {
+				keep += 1;
+			}
+		}
+		return `${add} added, ${remove} removed, ${keep} unchanged`;
+	});
+</script>
+
+{#snippet diffLine(row: DiffRow, delay: number)}
+	{@const sign = row.sign ?? 'keep'}
+	{@const tone = toneOf(sign)}
+	{@const mark = sign === 'keep' ? 'empty' : tone}
+	<div class="line" use:reveal={{ delay, amount: 0.4 }}>
+		<span
+			aria-hidden="true"
+			class="mark"
+			class:c-frame={mark === 'empty'}
+			class:c-accent={mark === 'accent'}
+			class:c-accent2={mark === 'accent2'}
+			class:c-muted={mark === 'muted'}>{signGlyph[sign]}</span>
+		<span
+			class="label"
+			class:c-accent={tone === 'accent'}
+			class:c-accent2={tone === 'accent2'}
+			class:c-muted={tone === 'muted'}
+			class:c-fg={tone === 'foreground'}>{row.label}</span>
+		<span
+			class="value"
+			class:c-accent={tone === 'accent'}
+			class:c-accent2={tone === 'accent2'}
+			class:c-muted={tone === 'muted'}
+			class:c-fg={tone === 'foreground'}>{row.value}</span>
+	</div>
+{/snippet}
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="stack">
+			<ul class="lines" role="list">
+				{#each rows as row, i (row.label)}
+					<li>{@render diffLine(row, stagger(i, 40))}</li>
+				{/each}
+			</ul>
+			{#if footer}
+				<GraphRule />
+				{@render diffLine(footer, 0)}
+			{/if}
+		</div>
+		<span class="sr-only">{summary}</span>
+	</GraphBody>
+</Graph>
+
+<style>
+	.stack {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.lines {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.line {
+		display: grid;
+		grid-template-columns: 1.25rem minmax(0, 1fr) 8ch;
+		align-items: baseline;
+		column-gap: 0.75rem;
+	}
+
+	.mark {
+		text-align: center;
+		user-select: none;
+	}
+
+	.value {
+		text-align: right;
+	}
+
+	.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-fg {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.c-frame {
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.c-muted {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.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>