markgraphy 0.1.1

package/dist/graphs/GraphHeatmap.svelte

@@ -0,0 +1,287 @@
+<script module lang="ts">
+	import type { Glyphs } from '../frame/glyphs';
+	import type { GraphPalette } from '../frame/tone';
+
+	/** Labeled 2d intensity matrix with an optional less/more legend. */
+	export interface HeatRow {
+		label: string;
+		values: number[];
+	}
+
+	export interface GraphHeatmapProps {
+		title: string;
+		columns: string[];
+		rows: HeatRow[];
+		max?: number;
+		legend?: boolean;
+		caption?: 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 { intensityGlyph, intensityLevel, resolveGlyphs } from '../frame/glyphs';
+	import { intensityRole } from '../frame/tone';
+	import type { ToneRole } from '../frame/tone';
+	import { reveal, stagger } from '../frame/motion';
+
+	let {
+		title,
+		columns,
+		rows,
+		max,
+		legend = true,
+		caption,
+		glyphs,
+		palette,
+		corner,
+		class: className = ''
+	}: GraphHeatmapProps = $props();
+
+	const set = $derived(resolveGlyphs(glyphs));
+	const peak = $derived(max ?? Math.max(0, ...rows.flatMap((row) => row.values), 0));
+
+	const scale = $derived(
+		set.map((glyph, index) => ({
+			glyph,
+			key: `${glyph}-${index}`,
+			role: intensityRole(Math.round((index / Math.max(set.length - 1, 1)) * 4), palette)
+		}))
+	);
+
+	const view = $derived(
+		rows.map((row) => ({
+			label: row.label,
+			spoken: `${row.label}: ${columns
+				.map((column, index) => `${column} ${row.values[index] ?? 0}`)
+				.join(', ')}`,
+			cells: columns.map((_, index) => {
+				const level = intensityLevel(row.values[index] ?? 0, peak);
+				return {
+					glyph: intensityGlyph(level, set),
+					role: intensityRole(level, palette) as ToneRole
+				};
+			})
+		}))
+	);
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody>
+		<div class="hm">
+			<div class="wrap">
+				<div class="cols">
+					<span class="spacer"></span>
+					{#each columns as column, c (c)}
+						<span class="colhead">{column}</span>
+					{/each}
+				</div>
+				<ul class="rows" role="list">
+					{#each view as row, r (row.label)}
+						<li
+							class="row"
+							aria-label={row.spoken}
+							use:reveal={{ delay: stagger(r, 40), amount: 0.4 }}
+						>
+							<span class="label">{row.label}</span>
+							<span class="cells" aria-hidden="true">
+								{#each row.cells as cell, c (c)}
+									<span
+										class="cell"
+										class:c-frame={cell.role === 'empty'}
+										class:c-muted={cell.role === 'muted'}
+										class:c-fg={cell.role === 'foreground'}
+										class:c-accent={cell.role === 'accent'}
+										class:c-accent2={cell.role === 'accent2'}
+										class:c-accent3={cell.role === 'accent3'}
+									>
+										{cell.glyph}
+									</span>
+								{/each}
+							</span>
+						</li>
+					{/each}
+				</ul>
+			</div>
+			{#if legend || caption}
+				<div class="foot">
+					{#if caption}
+						<p class="muted">{caption}</p>
+					{:else}
+						<span></span>
+					{/if}
+					{#if legend}
+						<p class="legend">
+							<span>Less</span>
+							<span class="scale" aria-hidden="true">
+								{#each scale as entry (entry.key)}
+									<span
+										class="sglyph"
+										class:c-frame={entry.role === 'empty'}
+										class:c-muted={entry.role === 'muted'}
+										class:c-fg={entry.role === 'foreground'}
+										class:c-accent={entry.role === 'accent'}
+										class:c-accent2={entry.role === 'accent2'}
+										class:c-accent3={entry.role === 'accent3'}
+									>
+										{entry.glyph}
+									</span>
+								{/each}
+							</span>
+							<span>More</span>
+						</p>
+					{/if}
+				</div>
+			{/if}
+			<span class="sr-only">{rows.length} rows across {columns.length} columns</span>
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.hm {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.wrap {
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.cols {
+		display: flex;
+		width: 100%;
+		align-items: flex-end;
+		gap: 0.25rem;
+	}
+
+	.spacer {
+		width: 7rem;
+		flex: 0 0 auto;
+	}
+
+	.colhead {
+		overflow: hidden;
+		min-width: 1.25ch;
+		flex: 1 1 0%;
+		text-align: center;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.rows {
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		list-style: none;
+	}
+
+	.row {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.label {
+		overflow: hidden;
+		width: 7rem;
+		flex: 0 0 auto;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.cells {
+		display: flex;
+		min-width: 0;
+		flex: 1 1 0%;
+		gap: 0.25rem;
+	}
+
+	.cell {
+		min-width: 1.25ch;
+		flex: 1 1 0%;
+		line-height: 1;
+		text-align: center;
+		user-select: none;
+	}
+
+	.foot {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+	}
+
+	.legend {
+		margin: 0;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.scale {
+		display: flex;
+		user-select: none;
+	}
+
+	.sglyph {
+		width: 1ch;
+		text-align: center;
+	}
+
+	.muted {
+		margin: 0;
+		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));
+	}
+
+	.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/GraphHeatmap.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Glyphs } from '../frame/glyphs';
+import type { GraphPalette } from '../frame/tone';
+/** Labeled 2d intensity matrix with an optional less/more legend. */
+export interface HeatRow {
+    label: string;
+    values: number[];
+}
+export interface GraphHeatmapProps {
+    title: string;
+    columns: string[];
+    rows: HeatRow[];
+    max?: number;
+    legend?: boolean;
+    caption?: string;
+    glyphs?: Glyphs;
+    palette?: GraphPalette;
+    corner?: string;
+    class?: string;
+}
+declare const GraphHeatmap: import("svelte").Component<GraphHeatmapProps, {}, "">;
+type GraphHeatmap = ReturnType<typeof GraphHeatmap>;
+export default GraphHeatmap;

package/dist/graphs/GraphInvoice.svelte

@@ -0,0 +1,294 @@
+<script module lang="ts">
+	/** Invoice document: from / bill-to blocks, meta, line items, totals. */
+	export interface InvoiceParty {
+		name: string;
+		lines?: string[];
+	}
+
+	export interface InvoiceMeta {
+		label: string;
+		value: string;
+	}
+
+	export interface InvoiceItem {
+		description: string;
+		qty?: string;
+		rate?: string;
+		amount: string;
+	}
+
+	export interface InvoiceTotal {
+		label: string;
+		value: string;
+		accent?: boolean;
+	}
+
+	export interface GraphInvoiceProps {
+		title: string;
+		from?: InvoiceParty;
+		to?: InvoiceParty;
+		meta?: InvoiceMeta[];
+		items: InvoiceItem[];
+		totals?: InvoiceTotal[];
+		note?: string;
+		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';
+
+	let {
+		title,
+		from,
+		to,
+		meta,
+		items,
+		totals,
+		note,
+		corner,
+		class: className = ''
+	}: GraphInvoiceProps = $props();
+
+	const showQty = $derived(items.some((row) => row.qty != null));
+	const showRate = $derived(items.some((row) => row.rate != null));
+	const columns = $derived(1 + Number(showQty) + Number(showRate) + 1);
+</script>
+
+<Graph {title} {corner} class={className}>
+	<GraphBody tight>
+		<div class="inv">
+			{#if from || to}
+				<div class="parties">
+					{#if from}
+						<div class="party">
+							<p class="kicker">From</p>
+							<p class="name">{from.name}</p>
+							{#each from.lines ?? [] as line}
+								<p class="muted">{line}</p>
+							{/each}
+						</div>
+					{/if}
+					{#if to}
+						<div class="party">
+							<p class="kicker">Bill to</p>
+							<p class="name">{to.name}</p>
+							{#each to.lines ?? [] as line}
+								<p class="muted">{line}</p>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/if}
+
+			{#if meta && meta.length > 0}
+				<dl class="meta">
+					{#each meta as entry (entry.label)}
+						<div class="party">
+							<dt class="kicker">{entry.label}</dt>
+							<dd class="name">{entry.value}</dd>
+						</div>
+					{/each}
+				</dl>
+			{/if}
+
+			<div class="scroll">
+				<table class="table">
+					<thead>
+						<tr>
+							<th scope="col" class="cell head">Description</th>
+							{#if showQty}
+								<th scope="col" class="cell head pad">Qty</th>
+							{/if}
+							{#if showRate}
+								<th scope="col" class="cell head pad">Rate</th>
+							{/if}
+							<th scope="col" class="cell head right">Amount</th>
+						</tr>
+						<tr>
+							<th class="rulecell" colspan={columns}>
+								<GraphRule />
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each items as row, i (row.description)}
+							<tr use:reveal={{ delay: stagger(i, 40), amount: 0.4 }}>
+								<td class="cell">{row.description}</td>
+								{#if showQty}
+									<td class="cell pad right">{row.qty ?? ''}</td>
+								{/if}
+								{#if showRate}
+									<td class="cell pad right">{row.rate ?? ''}</td>
+								{/if}
+								<td class="cell right">{row.amount}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+
+			{#if totals && totals.length > 0}
+				<div class="totals">
+					<GraphRule />
+					<dl class="total-list">
+						{#each totals as entry, i (entry.label)}
+							<div class="total-row" use:reveal={{ delay: stagger(i, 40) }}>
+								<dt class="total-label" class:c-fg={entry.accent} class:c-muted={!entry.accent}>
+									{entry.label}
+								</dt>
+								<dd class="total-value" class:c-accent={entry.accent} class:c-fg={!entry.accent}>
+									{entry.value}
+								</dd>
+							</div>
+						{/each}
+					</dl>
+				</div>
+			{/if}
+
+			{#if note}
+				<p class="note">{note}</p>
+			{/if}
+		</div>
+	</GraphBody>
+</Graph>
+
+<style>
+	.inv {
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+	}
+
+	.parties {
+		display: grid;
+		gap: 1.5rem;
+	}
+
+	@media (min-width: 640px) {
+		.parties {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+	}
+
+	.party {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.kicker {
+		margin: 0;
+		letter-spacing: 0.025em;
+		text-transform: uppercase;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.name {
+		margin: 0;
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.muted {
+		margin: 0;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.meta {
+		margin: 0;
+		display: flex;
+		flex-wrap: wrap;
+		column-gap: 2rem;
+		row-gap: 0.75rem;
+	}
+
+	.scroll {
+		overflow-x: auto;
+	}
+
+	.table {
+		width: 100%;
+		min-width: 32rem;
+		border-collapse: separate;
+		border-spacing: 0;
+	}
+
+	.cell {
+		padding: 0.625rem 0;
+		text-align: left;
+	}
+
+	.cell.pad {
+		padding-left: 0.75rem;
+		padding-right: 0.75rem;
+	}
+
+	.cell.right {
+		text-align: right;
+	}
+
+	.cell.head {
+		padding-top: 0;
+		padding-bottom: 0.75rem;
+		font-weight: 400;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.rulecell {
+		padding: 0;
+	}
+
+	.totals {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.total-list {
+		margin: 0 0 0 auto;
+		display: flex;
+		width: 100%;
+		max-width: 22rem;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.total-row {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) 8rem;
+		align-items: baseline;
+		column-gap: 1rem;
+	}
+
+	.total-label {
+		margin: 0;
+	}
+
+	.total-value {
+		margin: 0;
+		text-align: right;
+	}
+
+	.note {
+		margin: 0;
+		max-width: 48ch;
+		text-wrap: pretty;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.c-accent {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.c-fg {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.c-muted {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+</style>

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

@@ -0,0 +1,34 @@
+/** Invoice document: from / bill-to blocks, meta, line items, totals. */
+export interface InvoiceParty {
+    name: string;
+    lines?: string[];
+}
+export interface InvoiceMeta {
+    label: string;
+    value: string;
+}
+export interface InvoiceItem {
+    description: string;
+    qty?: string;
+    rate?: string;
+    amount: string;
+}
+export interface InvoiceTotal {
+    label: string;
+    value: string;
+    accent?: boolean;
+}
+export interface GraphInvoiceProps {
+    title: string;
+    from?: InvoiceParty;
+    to?: InvoiceParty;
+    meta?: InvoiceMeta[];
+    items: InvoiceItem[];
+    totals?: InvoiceTotal[];
+    note?: string;
+    corner?: string;
+    class?: string;
+}
+declare const GraphInvoice: import("svelte").Component<GraphInvoiceProps, {}, "">;
+type GraphInvoice = ReturnType<typeof GraphInvoice>;
+export default GraphInvoice;