markgraphy 0.1.1

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

@@ -0,0 +1,18 @@
+import type { GraphPalette } 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;
+}
+declare const GraphDiff: import("svelte").Component<GraphDiffProps, {}, "">;
+type GraphDiff = ReturnType<typeof GraphDiff>;
+export default GraphDiff;

package/dist/graphs/GraphFlow.svelte

@@ -0,0 +1,137 @@
+<script module lang="ts">
+	import type { GraphPalette } from '../frame/tone';
+
+	/** Tone of a flow node: default foreground, accent (live path), or muted. */
+	export type FlowTone = 'default' | 'accent' | 'muted';
+
+	export interface FlowNode {
+		label: string;
+		tone?: FlowTone;
+		stretch?: boolean;
+	}
+
+	export interface FlowRow {
+		nodes: FlowNode[];
+	}
+
+	export interface GraphFlowProps {
+		title: string;
+		rows: FlowRow[];
+		palette?: GraphPalette;
+		corner?: string;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+	import GraphArrow from '../frame/GraphArrow.svelte';
+	import { reveal, stagger } from '../frame/motion';
+	import { toneRole, type ToneRole } from '../frame/tone';
+
+	let {
+		title,
+		rows,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphFlowProps = $props();
+
+	function nodeRole(tone: FlowTone): ToneRole {
+		if (tone === 'accent') {
+			return toneRole(palette, 'primary');
+		}
+
+		if (tone === 'muted') {
+			return toneRole(palette, 'secondary');
+		}
+
+		return 'foreground';
+	}
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="flow">
+			{#each rows as row, rowIndex (rowIndex)}
+				<div class="row" use:reveal={{ delay: stagger(rowIndex, 80), amount: 0.5 }}>
+					{#each row.nodes as node, nodeIndex (`${node.label}-${nodeIndex}`)}
+						{@const tone = node.tone ?? 'default'}
+						{@const role = nodeRole(tone)}
+						<div class="node" class:stretch={node.stretch}>
+							{#if nodeIndex > 0}
+								<GraphArrow accent={tone === 'accent'} stretch={node.stretch} />
+							{/if}
+							<span
+								class="label"
+								class:c-accent={role === 'accent'}
+								class:c-accent2={role === 'accent2'}
+								class:c-muted={role === 'muted'}
+								class:c-fg={role === 'foreground'}
+							>
+								{node.label}
+							</span>
+						</div>
+					{/each}
+				</div>
+			{/each}
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.flow {
+		display: flex;
+		flex-direction: column;
+		gap: 1.75rem;
+	}
+
+	.row {
+		display: flex;
+		min-width: 0;
+		flex-wrap: wrap;
+		align-items: center;
+		column-gap: 0.75rem;
+		row-gap: 0.5rem;
+	}
+
+	@media (min-width: 640px) {
+		.row {
+			flex-wrap: nowrap;
+		}
+	}
+
+	.node {
+		display: flex;
+		min-width: 0;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	.node.stretch {
+		min-width: 4rem;
+		flex: 1;
+	}
+
+	.label {
+		flex-shrink: 0;
+		white-space: nowrap;
+	}
+
+	.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/GraphFlow.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { GraphPalette } from '../frame/tone';
+/** Tone of a flow node: default foreground, accent (live path), or muted. */
+export type FlowTone = 'default' | 'accent' | 'muted';
+export interface FlowNode {
+    label: string;
+    tone?: FlowTone;
+    stretch?: boolean;
+}
+export interface FlowRow {
+    nodes: FlowNode[];
+}
+export interface GraphFlowProps {
+    title: string;
+    rows: FlowRow[];
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphFlow: import("svelte").Component<GraphFlowProps, {}, "">;
+type GraphFlow = ReturnType<typeof GraphFlow>;
+export default GraphFlow;

package/dist/graphs/GraphFunnel.svelte

@@ -0,0 +1,190 @@
+<script module lang="ts">
+	import type { Glyphs } from '../frame/glyphs';
+	import type { GraphPalette } from '../frame/tone';
+
+	/** One stage of the funnel. */
+	export interface FunnelStep {
+		label: string;
+		value: number;
+		display?: string;
+	}
+
+	export interface GraphFunnelProps {
+		title: string;
+		steps: FunnelStep[];
+		ticks?: number;
+		stage?: string;
+		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 GraphTrack from '../frame/GraphTrack.svelte';
+	import GraphTick from '../frame/GraphTick.svelte';
+	import { trackMarks } from '../frame/glyphs';
+	import { isDim, isMonoPalette, seriesRole, type ToneRole } from '../frame/tone';
+	import { reveal, stagger } from '../frame/motion';
+
+	let {
+		title,
+		steps,
+		ticks = 20,
+		stage,
+		glyphs,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphFunnelProps = $props();
+
+	const mono = $derived(isMonoPalette(palette));
+	const max = $derived(Math.max(...steps.map((step) => step.value), 1));
+	const head = $derived(steps[0]?.value || 1);
+	const marks = $derived(trackMarks(glyphs));
+
+	const view = $derived.by(() =>
+		steps.map((step, index) => {
+			const width = Math.max(1, Math.round((step.value / max) * ticks));
+			const percent = Math.round((step.value / head) * 100);
+			const focused = Boolean(stage) && step.label === stage;
+			const receded = Boolean(stage) && !focused;
+			const role: ToneRole = mono ? 'accent' : seriesRole(palette, index);
+
+			const cells = Array.from({ length: ticks }, (_, cell) => {
+				const filled = cell < width;
+
+				return {
+					glyph: filled ? marks.fill : marks.empty,
+					role: filled ? role : ('empty' as const)
+				};
+			});
+
+			return {
+				label: step.label,
+				value: step.display ?? step.value.toLocaleString(),
+				percent: index === 0 ? '' : `${percent}%`,
+				dim: isDim(palette, !receded),
+				cells
+			};
+		})
+	);
+
+	const spoken = $derived(
+		steps
+			.map((step) => `${step.label} ${step.display ?? step.value.toLocaleString()}`)
+			.join(', ')
+	);
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<ol class="steps" role="list">
+			{#each view as step, i (step.label)}
+				<li
+					class="step"
+					class:dim={step.dim}
+					use:reveal={{ delay: stagger(i, 40), amount: 0.4 }}
+				>
+					<span class="label">{step.label}</span>
+					<GraphTrack>
+						{#each step.cells as cell}
+							<GraphTick>
+								<span
+									class="g"
+									class:c-accent={cell.role === 'accent'}
+									class:c-accent2={cell.role === 'accent2'}
+									class:c-accent3={cell.role === 'accent3'}
+									class:c-frame={cell.role === 'empty'}
+								>
+									{cell.glyph}
+								</span>
+							</GraphTick>
+						{/each}
+					</GraphTrack>
+					<span class="value">{step.value}</span>
+					<span class="pct muted">{step.percent}</span>
+				</li>
+			{/each}
+		</ol>
+		<span class="sr-only">{spoken}</span>
+	</GraphBody>
+</Graph>
+
+<style>
+	.steps {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.step {
+		display: grid;
+		grid-template-columns: 7rem minmax(0, 1fr) 8ch 4ch;
+		column-gap: 1rem;
+		align-items: center;
+	}
+
+	.label {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.g {
+		display: block;
+	}
+
+	.value {
+		text-align: right;
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.pct {
+		text-align: right;
+	}
+
+	.muted {
+		color: var(--graph-muted, oklch(0.62 0 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-frame {
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.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/GraphFunnel.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Glyphs } from '../frame/glyphs';
+import type { GraphPalette } from '../frame/tone';
+/** One stage of the funnel. */
+export interface FunnelStep {
+    label: string;
+    value: number;
+    display?: string;
+}
+export interface GraphFunnelProps {
+    title: string;
+    steps: FunnelStep[];
+    ticks?: number;
+    stage?: string;
+    glyphs?: Glyphs;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphFunnel: import("svelte").Component<GraphFunnelProps, {}, "">;
+type GraphFunnel = ReturnType<typeof GraphFunnel>;
+export default GraphFunnel;

package/dist/graphs/GraphGantt.svelte

@@ -0,0 +1,258 @@
+<script module lang="ts">
+	import type { Glyphs } from '../frame/glyphs';
+	import type { GraphPalette } from '../frame/tone';
+
+	/** Tasks on a shared character track: spans positioned via --start/--span. */
+	export interface GanttItem {
+		label: string;
+		start: number;
+		end: number;
+		accent?: boolean;
+		complete?: number;
+	}
+
+	export interface GraphGanttProps {
+		title: string;
+		items: GanttItem[];
+		ticks?: string[];
+		columns?: number;
+		stage?: string;
+		progress?: 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 { clamp01, trackMarks } from '../frame/glyphs';
+	import { isDim, toneRole } from '../frame/tone';
+	import type { ToneRole } from '../frame/tone';
+	import { reveal, stagger } from '../frame/motion';
+
+	let {
+		title,
+		items,
+		ticks,
+		columns = 24,
+		stage,
+		progress,
+		glyphs,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphGanttProps = $props();
+
+	const marks = $derived(trackMarks(glyphs));
+	const playhead = $derived(
+		progress == null ? null : Math.round(clamp01(progress) * (columns - 1))
+	);
+	const cols = $derived(Array.from({ length: columns }, (_, index) => index));
+
+	const view = $derived(
+		items.map((entry) => {
+			const start = Math.round(clamp01(entry.start) * columns);
+			const end = Math.max(start + 1, Math.round(clamp01(entry.end) * columns));
+			const span = end - start;
+			const done = Math.round(clamp01(entry.complete ?? 1) * span);
+			const focused = stage ? entry.label === stage : Boolean(entry.accent);
+			const dim = Boolean(stage) && !focused;
+			const spoken = `${entry.label} from ${Math.round(entry.start * 100)}% to ${Math.round(
+				entry.end * 100
+			)}%${entry.complete != null ? `, ${Math.round(entry.complete * 100)}% complete` : ''}`;
+			const bar = Array.from({ length: span }, (_, index) => {
+				const filled = index < done;
+				return {
+					glyph: filled ? marks.fill : marks.rest,
+					role: (
+						filled
+							? focused
+								? toneRole(palette, 'primary')
+								: 'foreground'
+							: toneRole(palette, 'secondary')
+					) as ToneRole
+				};
+			});
+			return { entry, start, span, done, focused, dim, spoken, bar };
+		})
+	);
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="gantt">
+			{#if playhead != null}
+				<div class="rowcols">
+					<span class="spacer"></span>
+					<span class="track" aria-hidden="true" style:--cols={columns}>
+						<span class="marker c-accent" style:--pos={playhead}>▾</span>
+					</span>
+				</div>
+			{/if}
+			<ul class="items" role="list">
+				{#each view as item, i (item.entry.label)}
+					<li
+						class="row"
+						class:dim={isDim(palette, !item.dim)}
+						aria-label={item.spoken}
+						use:reveal={{ delay: stagger(i, 50), amount: 0.4 }}
+					>
+						<span class="label" class:c-accent={item.focused} class:c-fg={!item.focused}>
+							{item.entry.label}
+						</span>
+						<span class="track" aria-hidden="true" style:--cols={columns}>
+							{#each cols as c (c)}
+								<span class="cell">
+									{c >= item.start && c < item.start + item.span ? '' : marks.empty}
+								</span>
+							{/each}
+							<span class="bar" style:--start={item.start + 1} style:--span={item.span}>
+								{#each item.bar as cell, index (index)}
+									<span
+										class="bcell"
+										class:c-accent={cell.role === 'accent'}
+										class:c-fg={cell.role === 'foreground'}
+										class:c-muted={cell.role === 'muted'}
+										class:c-accent2={cell.role === 'accent2'}
+									>
+										{cell.glyph}
+									</span>
+								{/each}
+							</span>
+						</span>
+					</li>
+				{/each}
+			</ul>
+			{#if ticks && ticks.length > 0}
+				<div class="rowcols">
+					<span class="spacer"></span>
+					<div class="ticks">
+						{#each ticks as tick (tick)}
+							<span>{tick}</span>
+						{/each}
+					</div>
+				</div>
+			{/if}
+			<span class="sr-only">{items.length} tasks</span>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.gantt {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.rowcols {
+		display: grid;
+		grid-template-columns: 7rem minmax(0, 1fr);
+		align-items: center;
+		column-gap: 1rem;
+	}
+
+	.spacer {
+		min-width: 0;
+	}
+
+	.items {
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		list-style: none;
+	}
+
+	.row {
+		display: grid;
+		grid-template-columns: 7rem minmax(0, 1fr);
+		align-items: center;
+		column-gap: 1rem;
+	}
+
+	.row.dim {
+		opacity: 0.4;
+	}
+
+	.label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.track {
+		position: relative;
+		display: flex;
+		width: 100%;
+		min-width: 0;
+		user-select: none;
+	}
+
+	.cell {
+		min-width: 1ch;
+		flex: 1 1 0%;
+		text-align: center;
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.bar {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: calc((var(--start) - 1) * 100% / var(--cols));
+		width: calc(var(--span) * 100% / var(--cols));
+		display: flex;
+	}
+
+	.bcell {
+		min-width: 0;
+		flex: 1 1 0%;
+		text-align: center;
+	}
+
+	.marker {
+		position: absolute;
+		top: 0;
+		left: calc((var(--pos) + 0.5) * 100% / var(--cols));
+		transform: translateX(-50%);
+	}
+
+	.ticks {
+		display: flex;
+		justify-content: space-between;
+		color: var(--graph-muted, oklch(0.62 0 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-fg {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.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/GraphGantt.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Glyphs } from '../frame/glyphs';
+import type { GraphPalette } from '../frame/tone';
+/** Tasks on a shared character track: spans positioned via --start/--span. */
+export interface GanttItem {
+    label: string;
+    start: number;
+    end: number;
+    accent?: boolean;
+    complete?: number;
+}
+export interface GraphGanttProps {
+    title: string;
+    items: GanttItem[];
+    ticks?: string[];
+    columns?: number;
+    stage?: string;
+    progress?: number;
+    glyphs?: Glyphs;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphGantt: import("svelte").Component<GraphGanttProps, {}, "">;
+type GraphGantt = ReturnType<typeof GraphGantt>;
+export default GraphGantt;