markgraphy 0.1.1

package/dist/graphs/GraphBars.svelte

@@ -0,0 +1,194 @@
+<script module lang="ts">
+	import type { Glyphs } from '../frame/glyphs';
+	import type { GraphPalette, ToneRole } from '../frame/tone';
+
+	export interface BarSeries {
+		label: string;
+		values: number[];
+		size?: 'sm' | 'lg';
+	}
+
+	export interface GraphBarsProps {
+		title: string;
+		from: BarSeries;
+		to: BarSeries;
+		processor?: 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 GraphArrow from '../frame/GraphArrow.svelte';
+	import { trackMarks } from '../frame/glyphs';
+	import { toneRole } from '../frame/tone';
+	import { reveal, stagger } from '../frame/motion';
+
+	let {
+		title,
+		from,
+		to,
+		processor,
+		glyphs,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphBarsProps = $props();
+
+	const marks = $derived(trackMarks(glyphs));
+	const fromHeight = $derived(from.size === 'lg' ? 8 : 5);
+	const toHeight = $derived(to.size === 'lg' ? 8 : 5);
+	const fromRole = $derived(toneRole(palette, 'secondary'));
+	const spoken = $derived(
+		`${from.label} to ${to.label}${processor ? ` via ${processor}` : ''}`
+	);
+</script>
+
+{#snippet miniBars(values: number[], height: number, base: number, tone: 'accent' | 'muted')}
+	{@const onRole: ToneRole =
+		tone === 'accent' ? toneRole(palette, 'primary') : toneRole(palette, 'secondary')}
+	<div class="bars" aria-hidden="true">
+		{#each values as value, i (i)}
+			{@const max = Math.max(...values, 1)}
+			{@const level = Math.round((value / max) * (height - 1))}
+			<span class="col" use:reveal={{ delay: base + stagger(i, 30) }}>
+				{#each Array.from({ length: height }) as _, row (row)}
+					{@const fromBottom = height - 1 - row}
+					{@const on = fromBottom <= level}
+					<span
+						class="cell"
+						class:off={!on}
+						class:c-accent={on && onRole === 'accent'}
+						class:c-accent2={on && onRole === 'accent2'}
+						class:c-muted={on && onRole === 'muted'}>{on ? marks.fill : ' '}</span>
+				{/each}
+			</span>
+		{/each}
+	</div>
+{/snippet}
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="flow">
+			<div class="group">
+				{@render miniBars(from.values, fromHeight, 40, 'muted')}
+				<p
+					class="label"
+					class:c-muted={fromRole === 'muted'}
+					class:c-accent2={fromRole === 'accent2'}>{from.label}</p>
+			</div>
+
+			<div class="mid">
+				<GraphArrow />
+				{#if processor}
+					<span>{processor}</span>
+				{/if}
+				<GraphArrow />
+			</div>
+
+			<div class="group">
+				{@render miniBars(to.values, toHeight, 160, 'accent')}
+				<p class="label c-fg">{to.label}</p>
+			</div>
+		</div>
+		<span class="sr-only">{spoken}</span>
+	</GraphBody>
+</Graph>
+
+<style>
+	.flow {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 2rem;
+	}
+
+	@media (min-width: 640px) {
+		.flow {
+			flex-direction: row;
+			align-items: flex-end;
+			justify-content: center;
+			gap: 2rem;
+		}
+	}
+
+	.group {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	.bars {
+		display: flex;
+		align-items: flex-end;
+		gap: 0.25rem;
+	}
+
+	.col {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		width: 1ch;
+	}
+
+	.cell {
+		height: 1em;
+		width: 100%;
+		text-align: center;
+	}
+
+	.off {
+		color: transparent;
+	}
+
+	.mid {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.75rem;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	@media (max-width: 639.98px) {
+		.mid {
+			transform: rotate(90deg);
+		}
+	}
+
+	.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-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/GraphBars.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Glyphs } from '../frame/glyphs';
+import type { GraphPalette } from '../frame/tone';
+export interface BarSeries {
+    label: string;
+    values: number[];
+    size?: 'sm' | 'lg';
+}
+export interface GraphBarsProps {
+    title: string;
+    from: BarSeries;
+    to: BarSeries;
+    processor?: string;
+    glyphs?: Glyphs;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphBars: import("svelte").Component<GraphBarsProps, {}, "">;
+type GraphBars = ReturnType<typeof GraphBars>;
+export default GraphBars;

package/dist/graphs/GraphBullet.svelte

@@ -0,0 +1,208 @@
+<script module lang="ts">
+	import type { Glyphs } from '../frame/glyphs';
+	import type { GraphPalette } from '../frame/tone';
+
+	/** One bullet row: actual value against an optional target. */
+	export interface BulletItem {
+		label: string;
+		value: number;
+		target?: number;
+		max?: number;
+		display?: string;
+	}
+
+	export interface GraphBulletProps {
+		title: string;
+		items: BulletItem[];
+		ticks?: 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 GraphTrack from '../frame/GraphTrack.svelte';
+	import GraphTick from '../frame/GraphTick.svelte';
+	import { trackMarks } from '../frame/glyphs';
+	import { toneRole, type ToneRole } from '../frame/tone';
+	import { reveal, stagger } from '../frame/motion';
+
+	let {
+		title,
+		items,
+		ticks = 20,
+		glyphs,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphBulletProps = $props();
+
+	function formatItem(item: BulletItem) {
+		if (item.display) {
+			return item.display;
+		}
+
+		const value = item.value.toLocaleString('en-US', {
+			maximumFractionDigits: Number.isInteger(item.value) ? 0 : 1
+		});
+
+		if (item.target == null) {
+			return value;
+		}
+
+		const target = item.target.toLocaleString('en-US', {
+			maximumFractionDigits: Number.isInteger(item.target) ? 0 : 1
+		});
+
+		return `${value} / ${target}`;
+	}
+
+	const marks = $derived(trackMarks(glyphs, { empty: '-', rest: '=', fill: '=' }));
+
+	const rows = $derived.by(() =>
+		items.map((entry) => {
+			const peak = entry.max ?? Math.max(entry.value, entry.target ?? 0, 1);
+			const filled = Math.min(
+				ticks,
+				Math.round((Math.max(entry.value, 0) / peak) * ticks)
+			);
+			const mark =
+				entry.target == null
+					? null
+					: Math.min(
+							ticks - 1,
+							Math.max(0, Math.round((Math.max(entry.target, 0) / peak) * ticks))
+						);
+
+			const cells = Array.from({ length: ticks }, (_, index) => {
+				const isMark = mark != null && index === mark;
+				const isFill = index < filled;
+				const role: ToneRole = isMark
+					? toneRole(palette, 'secondary')
+					: isFill
+						? mark != null && index > mark
+							? toneRole(palette, 'secondary')
+							: toneRole(palette, 'primary')
+						: 'empty';
+
+				return {
+					glyph: isMark ? '|' : isFill ? marks.fill : marks.empty,
+					role
+				};
+			});
+
+			return {
+				label: entry.label,
+				spoken: `${entry.label} ${formatItem(entry)}`,
+				text: formatItem(entry),
+				cells
+			};
+		})
+	);
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<ul class="rows" role="list">
+			{#each rows as row, i (row.label)}
+				<li
+					class="row"
+					aria-label={row.spoken}
+					use:reveal={{ delay: stagger(i, 40), amount: 0.4 }}
+				>
+					<span class="label">{row.label}</span>
+					<span class="zone">
+						<span class="c-frame" aria-hidden="true">[</span>
+						<GraphTrack>
+							{#each row.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-muted={cell.role === 'muted'}
+										class:c-frame={cell.role === 'empty'}
+									>
+										{cell.glyph}
+									</span>
+								</GraphTick>
+							{/each}
+						</GraphTrack>
+						<span class="c-frame" aria-hidden="true">]</span>
+					</span>
+					<span class="num muted">{row.text}</span>
+				</li>
+			{/each}
+		</ul>
+	</GraphBody>
+</Graph>
+
+<style>
+	.rows {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.row {
+		display: grid;
+		grid-template-columns: 7rem minmax(0, 1fr) 7rem;
+		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));
+	}
+
+	.zone {
+		display: flex;
+		align-items: center;
+		min-width: 0;
+	}
+
+	.g {
+		display: block;
+	}
+
+	.num {
+		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-muted {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.c-frame {
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+</style>

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

@@ -0,0 +1,22 @@
+import type { Glyphs } from '../frame/glyphs';
+import type { GraphPalette } from '../frame/tone';
+/** One bullet row: actual value against an optional target. */
+export interface BulletItem {
+    label: string;
+    value: number;
+    target?: number;
+    max?: number;
+    display?: string;
+}
+export interface GraphBulletProps {
+    title: string;
+    items: BulletItem[];
+    ticks?: number;
+    glyphs?: Glyphs;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphBullet: import("svelte").Component<GraphBulletProps, {}, "">;
+type GraphBullet = ReturnType<typeof GraphBullet>;
+export default GraphBullet;

package/dist/graphs/GraphCalendar.svelte

@@ -0,0 +1,203 @@
+<script module lang="ts">
+	import type { GraphPalette } from '../frame/tone';
+
+	/** One month grid: weekday header, marked-day accent, optional today. */
+	export interface CalendarMark {
+		day: number;
+		accent?: boolean;
+	}
+
+	export interface GraphCalendarProps {
+		title?: string;
+		year: number;
+		month: number;
+		weekStartsOn?: 0 | 1;
+		marks?: CalendarMark[] | number[];
+		today?: number;
+		palette?: GraphPalette;
+		corner?: string;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Graph from '../frame/Graph.svelte';
+	import GraphBody from '../frame/GraphBody.svelte';
+	import { isMonoPalette, toneRole } from '../frame/tone';
+	import { reveal, stagger } from '../frame/motion';
+
+	const WEEKDAYS_SUN = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+	const WEEKDAYS_MON = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+	const MONTHS = [
+		'January',
+		'February',
+		'March',
+		'April',
+		'May',
+		'June',
+		'July',
+		'August',
+		'September',
+		'October',
+		'November',
+		'December'
+	];
+
+	let {
+		title,
+		year,
+		month,
+		weekStartsOn = 1,
+		marks,
+		today,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphCalendarProps = $props();
+
+	function monthLength(year: number, monthIndex: number) {
+		return new Date(Date.UTC(year, monthIndex + 1, 0)).getUTCDate();
+	}
+
+	function leadingBlanks(year: number, monthIndex: number, weekStartsOn: 0 | 1) {
+		const weekday = new Date(Date.UTC(year, monthIndex, 1)).getUTCDay();
+		return (weekday - weekStartsOn + 7) % 7;
+	}
+
+	function markSet(list: GraphCalendarProps['marks']) {
+		const map = new Map<number, boolean>();
+
+		if (!list) {
+			return map;
+		}
+
+		for (const mark of list) {
+			if (typeof mark === 'number') {
+				map.set(mark, true);
+				continue;
+			}
+
+			map.set(mark.day, mark.accent ?? true);
+		}
+
+		return map;
+	}
+
+	const todayRole = $derived(toneRole(palette, isMonoPalette(palette) ? 'primary' : 'secondary'));
+
+	const view = $derived.by(() => {
+		const monthIndex = month - 1;
+		const days = monthLength(year, monthIndex);
+		const pad = leadingBlanks(year, monthIndex, weekStartsOn);
+		const highlighted = markSet(marks);
+		const headers = weekStartsOn === 1 ? WEEKDAYS_MON : WEEKDAYS_SUN;
+		const trailing = (7 - ((pad + days) % 7)) % 7;
+		const caption = title ?? `${MONTHS[monthIndex]} ${year}`;
+		const grid: (number | null)[] = [
+			...Array.from({ length: pad }, () => null),
+			...Array.from({ length: days }, (_, index) => index + 1),
+			...Array.from({ length: trailing }, () => null)
+		];
+		const weeks: (number | null)[][] = [];
+
+		for (let index = 0; index < grid.length; index += 7) {
+			weeks.push(grid.slice(index, index + 7));
+		}
+
+		return { monthIndex, headers, weeks, highlighted, caption };
+	});
+</script>
+
+<Graph title={view.caption} {corner} class={className}>
+	<GraphBody>
+		<div class="cal">
+			<div class="week head" aria-hidden="true">
+				{#each view.headers as header, index (`${header}-${index}`)}
+					<span class="day muted">{header}</span>
+				{/each}
+			</div>
+			<div class="weeks" aria-hidden="true">
+				{#each view.weeks as week, weekIndex (weekIndex)}
+					<div class="week" use:reveal={{ delay: stagger(weekIndex, 40), amount: 0.4 }}>
+						{#each week as day, dayIndex (`${weekIndex}-${dayIndex}`)}
+							{@const inMonth = day != null}
+							{@const accent = day != null && view.highlighted.get(day) === true}
+							{@const isToday = day != null && today === day}
+							<span
+								class="day"
+								class:ghost={!inMonth}
+								class:c-fg={inMonth && !accent && !isToday}
+								class:c-accent={accent || (isToday && !accent && todayRole === 'accent')}
+								class:c-accent2={isToday && !accent && todayRole === 'accent2'}
+							>
+								{inMonth ? (isToday ? `[${day}]` : day) : '\u00a0'}
+							</span>
+						{/each}
+					</div>
+				{/each}
+			</div>
+			<span class="sr-only">
+				{MONTHS[view.monthIndex]} {year}{today ? `, today ${today}` : ''}{view.highlighted.size > 0
+					? `, marked ${[...view.highlighted.keys()].join(', ')}`
+					: ''}
+			</span>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.cal {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.weeks {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.week {
+		display: grid;
+		grid-template-columns: repeat(7, 1fr);
+		justify-items: center;
+	}
+
+	.day {
+		width: 4ch;
+		text-align: center;
+	}
+
+	.muted {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.ghost {
+		color: transparent;
+	}
+
+	.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));
+	}
+
+	.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/GraphCalendar.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { GraphPalette } from '../frame/tone';
+/** One month grid: weekday header, marked-day accent, optional today. */
+export interface CalendarMark {
+    day: number;
+    accent?: boolean;
+}
+export interface GraphCalendarProps {
+    title?: string;
+    year: number;
+    month: number;
+    weekStartsOn?: 0 | 1;
+    marks?: CalendarMark[] | number[];
+    today?: number;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphCalendar: import("svelte").Component<GraphCalendarProps, {}, "">;
+type GraphCalendar = ReturnType<typeof GraphCalendar>;
+export default GraphCalendar;