markgraphy 0.1.1

package/dist/diagram/NestedRadiiDiagram.svelte

@@ -0,0 +1,218 @@
+<script module lang="ts">
+	export interface NestedRadiiDiagramProps {
+		/** Starting outer radius in px. Default 16. */
+		initialOuter?: number;
+		/** Starting inset (padding) in px. Default 4. */
+		initialInset?: number;
+		/** Show the sliders and the live CSS preview. Default true. */
+		interactive?: boolean;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { dashEdge, labeledEdgeSegs, overlayRow, padRow, type ArtCell, type ArtSeg } from './ascii';
+
+	let {
+		initialOuter = 16,
+		initialInset = 4,
+		interactive = true,
+		class: className = ''
+	}: NestedRadiiDiagramProps = $props();
+
+	const WIDTH = 47;
+
+	const uid = $props.id();
+
+	// svelte-ignore state_referenced_locally
+	let outer = $state(initialOuter);
+	// svelte-ignore state_referenced_locally
+	let inset = $state(initialInset);
+	const inner = $derived(Math.max(0, outer - inset));
+
+	const px = (value: number) => `${String(value).padStart(2, ' ')}px`;
+
+	function edgeCells(left: number, right: number, cornerL: string, cornerR: string): ArtCell[] {
+		const cells: ArtCell[] = [
+			{ at: left, text: cornerL, cls: 'corner' },
+			{ at: right, text: cornerR, cls: 'corner' }
+		];
+		for (let i = left + 2; i <= right - 2; i += 2) {
+			cells.push({ at: i, text: '-' });
+		}
+		return cells;
+	}
+
+	const art = $derived.by((): ArtSeg[][] => {
+		return [
+			labeledEdgeSegs(WIDTH, 'Nested Radii'),
+			[{ text: padRow(WIDTH) }],
+			overlayRow(WIDTH, edgeCells(4, 42, '╭', '╮')),
+			overlayRow(WIDTH, [
+				{ at: 4, text: '|' },
+				{ at: 42, text: '|' },
+				{ at: 7, text: `outer   ${px(outer)}`, cls: 'val' }
+			]),
+			overlayRow(WIDTH, edgeCells(10, 36, '╭', '╮')),
+			overlayRow(WIDTH, [
+				{ at: 4, text: '|' },
+				{ at: 5, text: '◀ - ▶', cls: 'arrow' },
+				{ at: 10, text: '|' },
+				{ at: 13, text: `inner   ${px(inner)}`, cls: 'val' },
+				{ at: 36, text: '|' },
+				{ at: 42, text: '|' }
+			]),
+			overlayRow(WIDTH, edgeCells(10, 36, '╰', '╯')),
+			overlayRow(WIDTH, [
+				{ at: 4, text: '|' },
+				{ at: 42, text: '|' },
+				{ at: 15, text: `inset   ${px(inset)}`, cls: 'val' }
+			]),
+			overlayRow(WIDTH, edgeCells(4, 42, '╰', '╯')),
+			[{ text: padRow(WIDTH) }],
+			overlayRow(WIDTH, [{ at: 8, text: 'inner = outer - inset', cls: 'muted' }]),
+			overlayRow(WIDTH, [{ at: 8, text: `${px(inner)} = ${px(outer)} - ${px(inset)}`, cls: 'val' }]),
+			[{ text: dashEdge(WIDTH) }]
+		];
+	});
+</script>
+
+<div class="radii {className}">
+	<div class="viewport">
+		<pre class="art"><code>{#each art as line, i (i)}{#each line as seg, j (j)}{#if seg.cls}<span class={seg.cls}>{seg.text}</span>{:else}{seg.text}{/if}{/each}{#if i < art.length - 1}{'\n'}{/if}{/each}</code></pre>
+	</div>
+
+	{#if interactive}
+		<div class="controls">
+			<label class="row" for="{uid}-outer">
+				Outer radius <span class="badge">{outer}px</span>
+				<input id="{uid}-outer" type="range" min="6" max="48" step="1" bind:value={outer} />
+			</label>
+			<label class="row" for="{uid}-inset">
+				Inset <span class="badge">{inset}px</span>
+				<input id="{uid}-inset" type="range" min="0" max="32" step="1" bind:value={inset} />
+			</label>
+			<div class="preview-row">
+				<div class="box-outer" style:border-radius="{outer}px" style:padding="{inset}px">
+					<div class="box-inner" style:border-radius="{inner}px">
+						<span>{inner}px</span>
+					</div>
+				</div>
+				<p class="hint">inner = max(0, {outer} - {inset}) = {inner}px</p>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.radii {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		min-width: 0;
+		font-size: 0.875rem;
+	}
+
+	.viewport {
+		overflow-x: auto;
+	}
+
+	.art {
+		margin: 0;
+		font-size: 0.85rem;
+		line-height: 1.35;
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+		white-space: pre;
+	}
+
+	.title {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 600;
+	}
+
+	.corner {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 600;
+	}
+
+	.arrow {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 600;
+	}
+
+	.val {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+		font-weight: 500;
+	}
+
+	.muted {
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.controls {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding-top: 0.875rem;
+		border-top: 1px dashed var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		color: var(--graph-muted, oklch(0.62 0 0));
+		white-space: nowrap;
+	}
+
+	.row input {
+		flex: 1;
+		min-width: 0;
+		height: 4px;
+		accent-color: var(--graph-accent, oklch(0.78 0.17 155));
+		cursor: pointer;
+	}
+
+	.badge {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		border: 1px dashed var(--graph-accent, oklch(0.78 0.17 155));
+		padding: 0.1rem 0.4rem;
+		font-size: 0.75rem;
+	}
+
+	.preview-row {
+		display: flex;
+		align-items: center;
+		gap: 1.25rem;
+	}
+
+	.box-outer {
+		flex-shrink: 0;
+		width: 100px;
+		height: 70px;
+		border: 2px solid var(--graph-accent, oklch(0.78 0.17 155));
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.box-inner {
+		width: 100%;
+		height: 100%;
+		border: 1px dashed var(--graph-accent, oklch(0.78 0.17 155));
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 0.7rem;
+		color: var(--graph-foreground, oklch(0.93 0 0));
+	}
+
+	.hint {
+		margin: 0;
+		font-size: 0.75rem;
+		color: var(--graph-muted, oklch(0.62 0 0));
+	}
+</style>

package/dist/diagram/NestedRadiiDiagram.svelte.d.ts

@@ -0,0 +1,12 @@
+export interface NestedRadiiDiagramProps {
+    /** Starting outer radius in px. Default 16. */
+    initialOuter?: number;
+    /** Starting inset (padding) in px. Default 4. */
+    initialInset?: number;
+    /** Show the sliders and the live CSS preview. Default true. */
+    interactive?: boolean;
+    class?: string;
+}
+declare const NestedRadiiDiagram: import("svelte").Component<NestedRadiiDiagramProps, {}, "">;
+type NestedRadiiDiagram = ReturnType<typeof NestedRadiiDiagram>;
+export default NestedRadiiDiagram;

package/dist/diagram/PromptLoopDiagram.svelte

@@ -0,0 +1,331 @@
+<script module lang="ts">
+	export interface PromptLoopDiagramProps {
+		/** Start playing on mount. Default true. */
+		autoPlay?: boolean;
+		/** Milliseconds per step. Default 1200. */
+		speedMs?: number;
+		/** Show the playback controls. Default true. */
+		showControls?: boolean;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { dashEdge, labeledEdgeSegs, overlayRow, padRow, type ArtSeg } from './ascii';
+
+	let {
+		autoPlay = true,
+		speedMs = 1200,
+		showControls = true,
+		class: className = ''
+	}: PromptLoopDiagramProps = $props();
+
+	const WIDTH = 55;
+	const STEPS = 6;
+
+	const uid = $props.id();
+
+	// svelte-ignore state_referenced_locally
+	let step = $state(0);
+	// svelte-ignore state_referenced_locally
+	let isPlaying = $state(autoPlay);
+	// svelte-ignore state_referenced_locally
+	let intervalTime = $state(speedMs);
+
+	$effect(() => {
+		if (!isPlaying) {
+			return;
+		}
+
+		const timer = window.setInterval(() => {
+			step = (step + 1) % STEPS;
+		}, intervalTime);
+
+		return () => window.clearInterval(timer);
+	});
+
+	function handleTogglePlay() {
+		isPlaying = !isPlaying;
+	}
+
+	function handleNext() {
+		step = (step + 1) % STEPS;
+	}
+
+	function handlePrev() {
+		step = (step - 1 + STEPS) % STEPS;
+	}
+
+	const flow = (k: number) => (step === k ? 'flow on' : 'flow');
+	const node = (k: number) => (step === k ? 'node on' : 'node');
+	const back = () => (step === 5 ? 'back on' : 'back');
+
+	const art = $derived.by((): ArtSeg[][] => {
+		return [
+			labeledEdgeSegs(WIDTH, 'The Prompt Loop'),
+			[{ text: padRow(WIDTH) }],
+			overlayRow(WIDTH, [{ at: 8, text: '~> Ask for the thing you want', cls: node(0) }]),
+			overlayRow(WIDTH, [{ at: 26, text: '│', cls: flow(0) }]),
+			overlayRow(WIDTH, [{ at: 26, text: 'v', cls: flow(0) }]),
+			overlayRow(WIDTH, [
+				{ at: 21, text: 'AI builds it', cls: node(1) },
+				{ at: 35, text: '◀ - - - - - - - ┐', cls: back() }
+			]),
+			overlayRow(WIDTH, [
+				{ at: 26, text: '│', cls: flow(1) },
+				{ at: 51, text: '│', cls: back() }
+			]),
+			overlayRow(WIDTH, [
+				{ at: 26, text: 'v', cls: flow(1) },
+				{ at: 51, text: '│', cls: back() }
+			]),
+			overlayRow(WIDTH, [
+				{ at: 16, text: "It's not quite right", cls: node(2) },
+				{ at: 51, text: '│', cls: back() }
+			]),
+			overlayRow(WIDTH, [
+				{ at: 26, text: '│', cls: flow(2) },
+				{ at: 51, text: '│', cls: back() }
+			]),
+			overlayRow(WIDTH, [
+				{ at: 26, text: 'v', cls: flow(2) },
+				{ at: 51, text: '│', cls: back() }
+			]),
+			overlayRow(WIDTH, [
+				{ at: 8, text: '~> Make me a few variants', cls: node(3) },
+				{ at: 51, text: '│', cls: back() }
+			]),
+			overlayRow(WIDTH, [
+				{ at: 26, text: '│', cls: flow(3) },
+				{ at: 51, text: '│', cls: back() }
+			]),
+			overlayRow(WIDTH, [
+				{ at: 26, text: 'v', cls: flow(3) },
+				{ at: 51, text: '│', cls: back() }
+			]),
+			overlayRow(WIDTH, [
+				{ at: 16, text: 'v1 · v2 · v3 · v4', cls: node(3) },
+				{ at: 51, text: '│', cls: back() }
+			]),
+			overlayRow(WIDTH, [
+				{ at: 26, text: '│', cls: flow(3) },
+				{ at: 51, text: '│', cls: back() }
+			]),
+			overlayRow(WIDTH, [
+				{ at: 26, text: 'v', cls: flow(3) },
+				{ at: 51, text: '│', cls: back() }
+			]),
+			overlayRow(WIDTH, [
+				{ at: 17, text: 'None of them are it', cls: node(4) },
+				{ at: 51, text: '│', cls: back() }
+			]),
+			overlayRow(WIDTH, [
+				{ at: 26, text: '│', cls: flow(4) },
+				{ at: 51, text: '│', cls: back() }
+			]),
+			overlayRow(WIDTH, [
+				{ at: 26, text: 'v', cls: flow(4) },
+				{ at: 51, text: '│', cls: back() }
+			]),
+			overlayRow(WIDTH, [
+				{ at: 26, text: '└', cls: back() },
+				{ at: 28, text: '- - - - - - - - - - -', cls: back() },
+				{ at: 51, text: '┘', cls: back() }
+			]),
+			overlayRow(WIDTH, [{ at: 30, text: 'Repeat forever', cls: step === 5 ? 'tag on' : 'tag' }]),
+			[{ text: padRow(WIDTH) }],
+			[{ text: dashEdge(WIDTH) }]
+		];
+	});
+</script>
+
+<div class="loop {className}">
+	<div class="viewport">
+		<pre class="art"><code>{#each art as line, i (i)}{#each line as seg, j (j)}{#if seg.cls}<span class={seg.cls}>{seg.text}</span>{:else}{seg.text}{/if}{/each}{#if i < art.length - 1}{'\n'}{/if}{/each}</code></pre>
+	</div>
+
+	{#if showControls}
+		<div class="controls">
+			<div class="buttons">
+				<button class="ctrl" type="button" onclick={handlePrev} aria-label="Previous step">◀</button>
+				<button class="ctrl primary" type="button" onclick={handleTogglePlay}>
+					{isPlaying ? '❚❚ pause' : '▶ play'}
+				</button>
+				<button class="ctrl" type="button" onclick={handleNext} aria-label="Next step">▶</button>
+			</div>
+
+			<div class="dots">
+				{#each [0, 1, 2, 3, 4, 5] as s (s)}
+					<button
+						class="dot"
+						class:on={step === s}
+						type="button"
+						onclick={() => {
+							step = s;
+							isPlaying = false;
+						}}
+						aria-label="Step {s + 1}"
+					></button>
+				{/each}
+			</div>
+
+			<label class="speed" for="{uid}-speed">
+				Speed {(intervalTime / 1000).toFixed(1)}s
+				<input id="{uid}-speed" type="range" min="400" max="2500" step="100" bind:value={intervalTime} />
+			</label>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.back {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		min-width: 0;
+		font-size: 0.875rem;
+	}
+
+	.viewport {
+		overflow-x: auto;
+	}
+
+	.art {
+		margin: 0;
+		font-size: 0.85rem;
+		line-height: 1.35;
+		color: var(--graph-frame, oklch(0.6 0 0 / 0.5));
+		white-space: pre;
+	}
+
+	.title {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 600;
+	}
+
+	.node {
+		color: var(--graph-muted, oklch(0.62 0 0));
+		transition: color 0.25s ease;
+	}
+
+	.node.on {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+		font-weight: 600;
+	}
+
+	.flow {
+		color: var(--graph-faint, oklch(0.3 0 0));
+		transition: color 0.25s ease;
+	}
+
+	.back {
+		color: var(--graph-faint, oklch(0.3 0 0));
+		transition: color 0.25s ease;
+	}
+
+	.back.on {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 600;
+	}
+
+	.tag {
+		color: var(--graph-muted, oklch(0.62 0 0));
+		font-style: italic;
+		transition: color 0.25s ease;
+	}
+
+	.tag.on {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.flow.on {
+			color: var(--graph-accent, oklch(0.78 0.17 155));
+			font-weight: 600;
+			animation: pulse 1s infinite alternate;
+		}
+
+		@keyframes pulse {
+			from {
+				opacity: 0.7;
+			}
+
+			to {
+				opacity: 1;
+			}
+		}
+	}
+
+	.controls {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: 1rem;
+		padding-top: 0.875rem;
+		border-top: 1px dashed var(--graph-frame, oklch(0.6 0 0 / 0.5));
+	}
+
+	.buttons {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+	}
+
+	.ctrl {
+		padding: 0.25rem 0.6rem;
+		font-size: 0.75rem;
+		color: var(--graph-muted, oklch(0.62 0 0));
+		background: none;
+		border: 1px dashed var(--graph-frame, oklch(0.6 0 0 / 0.5));
+		border-radius: 0;
+		cursor: pointer;
+	}
+
+	.ctrl:hover {
+		color: var(--graph-foreground, oklch(0.93 0 0));
+		border-color: var(--graph-muted, oklch(0.62 0 0));
+	}
+
+	.primary {
+		color: var(--graph-accent, oklch(0.78 0.17 155));
+		border-color: var(--graph-accent, oklch(0.78 0.17 155));
+		font-weight: 600;
+	}
+
+	.dots {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+	}
+
+	.dot {
+		width: 8px;
+		height: 8px;
+		padding: 0;
+		background: var(--graph-faint, oklch(0.3 0 0));
+		border: none;
+		border-radius: 50%;
+		cursor: pointer;
+	}
+
+	.dot.on {
+		background: var(--graph-accent, oklch(0.78 0.17 155));
+	}
+
+	.speed {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.75rem;
+		color: var(--graph-muted, oklch(0.62 0 0));
+		white-space: nowrap;
+	}
+
+	.speed input {
+		width: 80px;
+		height: 4px;
+		accent-color: var(--graph-accent, oklch(0.78 0.17 155));
+		cursor: pointer;
+	}
+</style>

package/dist/diagram/PromptLoopDiagram.svelte.d.ts

@@ -0,0 +1,12 @@
+export interface PromptLoopDiagramProps {
+    /** Start playing on mount. Default true. */
+    autoPlay?: boolean;
+    /** Milliseconds per step. Default 1200. */
+    speedMs?: number;
+    /** Show the playback controls. Default true. */
+    showControls?: boolean;
+    class?: string;
+}
+declare const PromptLoopDiagram: import("svelte").Component<PromptLoopDiagramProps, {}, "">;
+type PromptLoopDiagram = ReturnType<typeof PromptLoopDiagram>;
+export default PromptLoopDiagram;

package/dist/diagram/ascii.d.ts

@@ -0,0 +1,35 @@
+export type ArtSeg = {
+    text: string;
+    cls?: string;
+};
+/** Left-pad a string with spaces to exactly `width` characters. */
+export declare function padStart(text: string, width: number): string;
+/** Right-pad a string with spaces to exactly `width` characters. */
+export declare function padEnd(text: string, width: number): string;
+/**
+ * A `+ - - - - +` frame edge of exactly `width` characters:
+ * dashes on odd columns, spaces elsewhere.
+ */
+export declare function dashEdge(width: number): string;
+/**
+ * A frame edge split into three segments around a centered `[ LABEL ]`
+ * overlay, so the label can take its own class without moving the dashes.
+ */
+export declare function splitLabeledEdge(width: number, label: string): [string, string, string];
+/** A row of `width` characters inside side borders: `| ... |`. */
+export declare function padRow(width: number): string;
+export type ArtCell = {
+    /** Column the text starts at, 0-based. */
+    at: number;
+    text: string;
+    cls?: string;
+};
+/**
+ * Builds one art row from absolutely-positioned cells. Side borders are
+ * painted at columns 0 and width-1, then the cells are stamped on top.
+ * The finished row is split into segments at class boundaries so styled
+ * cells (titles, values, arrows) can take their own classes.
+ */
+export declare function overlayRow(width: number, cells: ArtCell[]): ArtSeg[];
+/** A labeled frame edge as segments, so the label can take its own class. */
+export declare function labeledEdgeSegs(width: number, label: string): ArtSeg[];

package/dist/diagram/ascii.js

@@ -0,0 +1,83 @@
+/*
+ * Shared helpers for the diagram components' ASCII art.
+ * The art is built as segments so every line lands on the same width —
+ * borders line up because they are computed, not hand-counted.
+ */
+/** Left-pad a string with spaces to exactly `width` characters. */
+export function padStart(text, width) {
+    return text.length >= width ? text : text.padStart(width, ' ');
+}
+/** Right-pad a string with spaces to exactly `width` characters. */
+export function padEnd(text, width) {
+    return text.length >= width ? text : text.padEnd(width, ' ');
+}
+/**
+ * A `+ - - - - +` frame edge of exactly `width` characters:
+ * dashes on odd columns, spaces elsewhere.
+ */
+export function dashEdge(width) {
+    const chars = Array.from({ length: width }, (_, i) => (i % 2 === 1 ? '-' : ' '));
+    chars[0] = '+';
+    chars[width - 1] = '+';
+    return chars.join('');
+}
+/**
+ * A frame edge split into three segments around a centered `[ LABEL ]`
+ * overlay, so the label can take its own class without moving the dashes.
+ */
+export function splitLabeledEdge(width, label) {
+    const base = dashEdge(width);
+    const overlay = `[ ${label.toUpperCase()} ]`;
+    const start = Math.max(1, Math.round((width - overlay.length) / 2));
+    return [base.slice(0, start), overlay, base.slice(start + overlay.length)];
+}
+/** A row of `width` characters inside side borders: `| ... |`. */
+export function padRow(width) {
+    return '|' + ' '.repeat(Math.max(0, width - 2)) + '|';
+}
+/**
+ * Builds one art row from absolutely-positioned cells. Side borders are
+ * painted at columns 0 and width-1, then the cells are stamped on top.
+ * The finished row is split into segments at class boundaries so styled
+ * cells (titles, values, arrows) can take their own classes.
+ */
+export function overlayRow(width, cells) {
+    const chars = Array.from({ length: width }, () => ' ');
+    chars[0] = '|';
+    chars[width - 1] = '|';
+    const sorted = [...cells].sort((a, b) => a.at - b.at);
+    for (const cell of sorted) {
+        for (let i = 0; i < cell.text.length; i++) {
+            const at = cell.at + i;
+            if (at > 0 && at < width - 1) {
+                chars[at] = cell.text[i];
+            }
+        }
+    }
+    const segs = [];
+    let cursor = 0;
+    for (const cell of sorted) {
+        if (!cell.cls) {
+            continue;
+        }
+        const start = Math.max(cell.at, 1);
+        const end = Math.min(cell.at + cell.text.length, width - 1);
+        if (end <= start) {
+            continue;
+        }
+        if (start > cursor) {
+            segs.push({ text: chars.slice(cursor, start).join('') });
+        }
+        segs.push({ text: chars.slice(start, end).join(''), cls: cell.cls });
+        cursor = end;
+    }
+    if (cursor < width) {
+        segs.push({ text: chars.slice(cursor).join('') });
+    }
+    return segs;
+}
+/** A labeled frame edge as segments, so the label can take its own class. */
+export function labeledEdgeSegs(width, label) {
+    const [before, overlay, after] = splitLabeledEdge(width, label);
+    return [{ text: before }, { text: overlay, cls: 'title' }, { text: after }];
+}

package/dist/diagram/parser.d.ts

@@ -0,0 +1,16 @@
+export declare function escapeHtml(str: string): string;
+export interface DiagramToken {
+    type: 'box' | 'title' | 'arrow' | 'glyph' | 'accent' | 'text';
+    content: string;
+}
+export interface HighlightRule {
+    pattern: RegExp;
+    className: string;
+}
+/**
+ * Parses a raw text diagram into safe, syntax-highlighted HTML spans.
+ * Callers style the .diag-* classes; AsciiDiagram is the reference skin.
+ */
+export declare function formatDiagramHtml(rawText: string, customAccentPattern?: RegExp): string;
+/** Pads or trims every line to a shared width so box borders line up. */
+export declare function alignBoxLines(text: string, targetWidth?: number): string;