From c5d8d8bef438f7214636fd5cca59985f66db84bf Mon Sep 17 00:00:00 2001
From: chodaict <x@cver.net>
Date: Wed, 3 Jun 2026 00:56:33 +0900
Subject: [PATCH 1/2] feat(ascii): add braille, half-block, and edge fill modes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The renderer only did square density-glyph fills. Add a `mode` option with
three smoother methods, all returning the same Cell[][] so the existing
plain/HTML/ANSI serializers keep working:

- braille (⣿): 2×4 dot matrix per cell — 8× resolution, curves read smooth
- halfblock (▀): split each cell top/bottom; mono uses ▀▄█, coloured carries
  the top colour as foreground and the bottom as background (two colours +
  double vertical detail). Serializers gain background-colour support
  (HTML `background:`, ANSI `48;2`), with spaces/line-ends resetting cleanly.
- edge (╱): Sobel edge detect, then stroke the contour with direction glyphs
  (─ │ ╱ ╲) and leave flats blank — a hand-drawn outline. Crisp on vector
  input since the raster is clean, so gradient angles are accurate.

mode defaults to 'ramp': the original path is byte-identical (14 existing
tests unchanged). Studio's charset picker becomes a Style picker grouped
into Density ramp / Smooth; seam-fill applies only to the solid-block tilers.

12 new unit tests pin the sub-cell resolution, two-colour carriers, and edge
direction mapping. 204/204 tests pass.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/Studio.svelte |  44 +++--
 src/lib/ascii.test.ts        | 103 ++++++++++
 src/lib/ascii.ts             | 370 ++++++++++++++++++++++++++++++-----
 3 files changed, 456 insertions(+), 61 deletions(-)

diff --git a/src/components/Studio.svelte b/src/components/Studio.svelte
index 8e0ca82..01da50e 100644
--- a/src/components/Studio.svelte
+++ b/src/components/Studio.svelte
@@ -73,7 +73,7 @@
   import { History } from '~/lib/history';
   import { detectBackgroundColor, type PathBox } from '~/lib/background';
   import { applyEffects, type EffectOptions } from '~/lib/effects';
-  import { imageToAscii, type AsciiColor, TERMINAL_CELL_ASPECT } from '~/lib/ascii';
+  import { imageToAscii, type AsciiColor, type AsciiMode, TERMINAL_CELL_ASPECT } from '~/lib/ascii';
   import { previewView, hasImage } from '~/lib/view-store';
   import { buildSizeSet, DEFAULT_SCALES } from '~/lib/export-set';
   import {
@@ -1136,6 +1136,7 @@
     return imageToAscii(id.data, id.width, id.height, {
       cols: asciiCols,
       charAspect: TERMINAL_CELL_ASPECT,
+      mode: asciiMode,
       ramp: asciiRamp,
       invert: asciiInvert,
       color,
@@ -1211,7 +1212,21 @@
   let asciiBusy = $state(false);
   let asciiSeq = 0;
   let lastAsciiSig = ''; // inputs that produced the current asciiArt
-  let asciiRamp = $state<'standard' | 'blocks' | 'detailed'>('standard');
+  // ASCII style = fill method. The three ramp styles drive the density-glyph
+  // renderer (`ramp` mode); braille/halfblock/edge are the smoother sub-cell and
+  // contour modes. One picker, mapped to imageToAscii's {mode, ramp}.
+  type AsciiStyle = 'standard' | 'blocks' | 'detailed' | 'braille' | 'halfblock' | 'edge';
+  let asciiStyle = $state<AsciiStyle>('standard');
+  const asciiMode = $derived<AsciiMode>(
+    asciiStyle === 'braille' || asciiStyle === 'halfblock' || asciiStyle === 'edge'
+      ? asciiStyle
+      : 'ramp',
+  );
+  // Ramp name only matters in 'ramp' mode; harmless default otherwise.
+  const asciiRamp = $derived(asciiMode === 'ramp' ? (asciiStyle as string) : 'standard');
+  // Seam-fill only the solid-block tilers (█ and ▀▄█); braille is discrete dots
+  // that read best crisp, and edge strokes are sparse — dilating them muddies.
+  const asciiTight = $derived(asciiStyle === 'blocks' || asciiStyle === 'halfblock');
   let asciiInvert = $state(false);
   let asciiColor = $state(false); // keep each glyph's source colour (web + ANSI)
   // Measured advance ratio (glyph width ÷ font-size) of the preview's monospace
@@ -1244,7 +1259,7 @@
     const sig = [
       displaySvg,
       asciiCols,
-      asciiRamp,
+      asciiStyle,
       asciiInvert,
       asciiColor,
       backdrop.color,
@@ -2408,11 +2423,18 @@
                     <span class="value">{asciiCols} cols</span>
                   </label>
                   <label class="ascii-opt">
-                    <span>Charset</span>
-                    <select bind:value={asciiRamp} aria-label="ASCII character set">
-                      <option value="standard">Standard</option>
-                      <option value="blocks">Blocks</option>
-                      <option value="detailed">Detailed</option>
+                    <span>Style</span>
+                    <select bind:value={asciiStyle} aria-label="ASCII fill style">
+                      <optgroup label="Density ramp">
+                        <option value="standard">Standard</option>
+                        <option value="blocks">Blocks</option>
+                        <option value="detailed">Detailed</option>
+                      </optgroup>
+                      <optgroup label="Smooth">
+                        <option value="braille">Braille ⣿ (2×4)</option>
+                        <option value="halfblock">Half-block ▀ (2-colour)</option>
+                        <option value="edge">Edge ╱ (outline)</option>
+                      </optgroup>
                     </select>
                   </label>
                   <label class="ascii-opt">
@@ -2472,7 +2494,7 @@
                     ascii={asciiArt}
                     asciiHtml={asciiColor ? asciiHtml : undefined}
                     lineHeight={previewLineHeight}
-                    tight={asciiRamp === 'blocks'}
+                    tight={asciiTight}
                     busy={asciiBusy}
                   />
                 {:else if asciiColor && asciiHtml}
@@ -2480,14 +2502,14 @@
                   <pre
                     class="ascii-preview big"
                     class:busy={asciiBusy}
-                    class:tight={asciiRamp === 'blocks'}
+                    class:tight={asciiTight}
                     style:line-height={previewLineHeight}
                     aria-label="ASCII preview">{@html asciiHtml}</pre>
                 {:else}
                   <pre
                     class="ascii-preview big"
                     class:busy={asciiBusy}
-                    class:tight={asciiRamp === 'blocks'}
+                    class:tight={asciiTight}
                     style:line-height={previewLineHeight}
                     aria-label="ASCII preview">{asciiArt || '…'}</pre>
                 {/if}
diff --git a/src/lib/ascii.test.ts b/src/lib/ascii.test.ts
index 4d67caf..0f8c28c 100644
--- a/src/lib/ascii.test.ts
+++ b/src/lib/ascii.test.ts
@@ -129,3 +129,106 @@ describe('imageToAscii', () => {
     expect(out).not.toContain('\x1b');
   });
 });
+
+describe('mode: braille', () => {
+  // A solid black cell → all 8 dots set → the full braille block U+28FF (⣿).
+  it('packs 8 sub-samples; a solid cell is the full block ⣿', () => {
+    const data = img(8, 8, () => [0, 0, 0, 255]);
+    const out = imageToAscii(data, 8, 8, { cols: 2, charAspect: 1, mode: 'braille' });
+    expect([...out].every((c) => c === '⣿' || c === '\n')).toBe(true);
+  });
+
+  it('an empty (white) image is all spaces, trimmed away', () => {
+    const data = img(8, 8, () => [255, 255, 255, 255]);
+    const out = imageToAscii(data, 8, 8, { cols: 2, charAspect: 1, mode: 'braille' });
+    expect(out.replace(/\n/g, '')).toBe('');
+  });
+
+  it('resolves sub-cell detail a ramp cell would average away', () => {
+    // Left dot-column of each cell black, right white → only left dots fire.
+    // One braille cell spans 2 source px wide, so x<1 within each pair is "left".
+    const data = img(4, 4, (x) => (x % 2 === 0 ? [0, 0, 0, 255] : [255, 255, 255, 255]));
+    const out = imageToAscii(data, 4, 4, { cols: 2, charAspect: 1, mode: 'braille' });
+    // Left dots only = bits 0x01|0x02|0x04|0x40 = 0x47 → U+2847 (⡇).
+    expect(out.split('\n')[0][0]).toBe('⡇');
+  });
+
+  it('transparent pixels leave their dots unset (silhouette preserved)', () => {
+    const data = img(4, 4, (x) => (x < 2 ? [0, 0, 0, 255] : [0, 0, 0, 0]));
+    const lines = imageToAscii(data, 4, 4, { cols: 2, charAspect: 1, mode: 'braille' }).split('\n');
+    // Right half transparent → its cell trims away, leaving one full block.
+    expect(lines.every((l) => l === '⣿')).toBe(true);
+  });
+});
+
+describe('mode: halfblock', () => {
+  it('mono: top-only ink is ▀, bottom-only is ▄, both is █', () => {
+    const top = img(2, 2, (_x, y) => (y < 1 ? [0, 0, 0, 255] : [255, 255, 255, 255]));
+    const bot = img(2, 2, (_x, y) => (y < 1 ? [255, 255, 255, 255] : [0, 0, 0, 255]));
+    const full = img(2, 2, () => [0, 0, 0, 255]);
+    const o = { cols: 2, charAspect: 0.5, mode: 'halfblock' as const }; // 1 row, split 2
+    expect(imageToAscii(top, 2, 2, o).replace(/\n/g, '')).toBe('▀▀');
+    expect(imageToAscii(bot, 2, 2, o).replace(/\n/g, '')).toBe('▄▄');
+    expect(imageToAscii(full, 2, 2, o).replace(/\n/g, '')).toBe('██');
+  });
+
+  it('coloured: ▀ carries top as foreground and bottom as background', () => {
+    // Top red, bottom blue → one ▀ with fg=red, bg=blue.
+    const data = img(2, 2, (_x, y) => (y < 1 ? [255, 0, 0, 255] : [0, 0, 255, 255]));
+    const out = imageToAscii(data, 2, 2, {
+      cols: 2,
+      charAspect: 0.5,
+      mode: 'halfblock',
+      color: 'html',
+    });
+    expect(out).toContain('color:#ff0000');
+    expect(out).toContain('background:#0000ff');
+    expect(out).toContain('▀');
+  });
+
+  it('coloured ansi: emits both 38;2 fg and 48;2 bg, then resets', () => {
+    const data = img(2, 2, (_x, y) => (y < 1 ? [255, 0, 0, 255] : [0, 0, 255, 255]));
+    const out = imageToAscii(data, 2, 2, {
+      cols: 2,
+      charAspect: 0.5,
+      mode: 'halfblock',
+      color: 'ansi',
+    });
+    expect(out).toContain('\x1b[38;2;255;0;0m');
+    expect(out).toContain('\x1b[48;2;0;0;255m');
+    expect(out.endsWith('\x1b[0m')).toBe(true);
+  });
+});
+
+describe('mode: edge', () => {
+  // A 16×16 split image; the contour runs along the colour boundary.
+  function split(w: number, h: number, dark: (x: number, y: number) => boolean) {
+    return img(w, h, (x, y) => (dark(x, y) ? [0, 0, 0, 255] : [255, 255, 255, 255]));
+  }
+
+  it('a vertical boundary draws a vertical stroke │', () => {
+    const data = split(16, 16, (x) => x < 8);
+    const out = imageToAscii(data, 16, 16, { cols: 16, charAspect: 1, mode: 'edge' });
+    expect(out).toContain('│');
+    expect(out).not.toContain('─');
+  });
+
+  it('a horizontal boundary draws a horizontal stroke ─', () => {
+    const data = split(16, 16, (_x, y) => y < 8);
+    const out = imageToAscii(data, 16, 16, { cols: 16, charAspect: 1, mode: 'edge' });
+    expect(out).toContain('─');
+    expect(out).not.toContain('│');
+  });
+
+  it('a top-left/bottom-right boundary draws a diagonal stroke', () => {
+    const data = split(16, 16, (x, y) => x + y < 16); // dark top-left triangle
+    const out = imageToAscii(data, 16, 16, { cols: 16, charAspect: 1, mode: 'edge' });
+    expect(out.includes('╱') || out.includes('╲')).toBe(true);
+  });
+
+  it('a flat (solid) field draws nothing — no spurious strokes', () => {
+    const data = img(16, 16, () => [0, 0, 0, 255]);
+    const out = imageToAscii(data, 16, 16, { cols: 16, charAspect: 1, mode: 'edge' });
+    expect(out.replace(/\n/g, '').trim()).toBe('');
+  });
+});
diff --git a/src/lib/ascii.ts b/src/lib/ascii.ts
index 762a682..bb9d157 100644
--- a/src/lib/ascii.ts
+++ b/src/lib/ascii.ts
@@ -34,13 +34,32 @@ export const ASCII_RAMPS: Record<string, string> = {
 
 export type AsciiColor = 'none' | 'html' | 'ansi';
 
+/**
+ * How a cell is filled:
+ *   'ramp'      — one density glyph per cell (the classic look; uses `ramp`).
+ *   'braille'   — 2×4 dot matrix per cell (U+2800…), 8× the resolution. Smoothest
+ *                 for high-contrast marks: curves read as curves, not stair-steps.
+ *   'halfblock' — split each cell top/bottom (1×2). Mono picks ▀▄█; with colour
+ *                 it's ▀ carrying the top colour as foreground and the bottom as
+ *                 background — double the vertical detail *and* two colours/cell.
+ *   'edge'      — Sobel edge detect, then draw the contour with direction glyphs
+ *                 (─ │ ╱ ╲) and leave flats blank. A hand-drawn outline, not a
+ *                 fill. Shines on vector input — the raster is crisp, so the
+ *                 gradient angles (and thus the strokes) are clean.
+ */
+export type AsciiMode = 'ramp' | 'braille' | 'halfblock' | 'edge';
+
 export interface AsciiOptions {
   /** Output width in characters. */
   cols?: number;
+  /** Fill method. Defaults to 'ramp' (the original density-glyph renderer). */
+  mode?: AsciiMode;
   /** Ramp name (key of ASCII_RAMPS) or a custom light→dark glyph string. */
   ramp?: string;
-  /** Swap light/dark mapping. */
+  /** Swap light/dark mapping (and which side counts as ink in the binary modes). */
   invert?: boolean;
+  /** Edge mode: gradient magnitude (0–1) a cell must exceed to draw a stroke. */
+  edgeThreshold?: number;
   /** Treat transparent pixels as ink instead of spaces. */
   ignoreAlpha?: boolean;
   /** Character cell aspect (cell width ÷ height). Terminal glyphs are ~2× tall,
@@ -50,12 +69,16 @@ export interface AsciiOptions {
   color?: AsciiColor;
 }
 
-/** One rendered cell: its glyph plus the average colour of its source pixels. */
+/** One rendered cell: its glyph plus the average colour of its source pixels.
+ *  `bg` carries a second colour for glyphs that paint two regions (the half-block
+ *  `▀`, whose foreground fills the top sub-row and background the bottom) — null
+ *  for the common single-colour case. */
 interface Cell {
   ch: string;
   r: number;
   g: number;
   b: number;
+  bg?: { r: number; g: number; b: number } | null;
 }
 
 function luminance(r: number, g: number, b: number): number {
@@ -107,11 +130,13 @@ function serializeHtml(rows: Cell[][]): string {
   return rows
     .map((row) =>
       trimRow(row)
-        .map((c) =>
-          c.ch === ' '
-            ? ' '
-            : `<span style="color:${toHex(c.r, c.g, c.b)}">${escapeHtml(c.ch)}</span>`,
-        )
+        .map((c) => {
+          if (c.ch === ' ') return ' ';
+          const style = c.bg
+            ? `color:${toHex(c.r, c.g, c.b)};background:${toHex(c.bg.r, c.bg.g, c.bg.b)}`
+            : `color:${toHex(c.r, c.g, c.b)}`;
+          return `<span style="${style}">${escapeHtml(c.ch)}</span>`;
+        })
         .join(''),
     )
     .join('\n');
@@ -123,24 +148,258 @@ function serializeAnsi(rows: Cell[][]): string {
     .map((row) => {
       const cells = trimRow(row);
       let out = '';
-      let cur = ''; // current SGR colour code in effect
+      let curFg = ''; // current 38;2 foreground code in effect
+      let curBg = ''; // current 48;2 background code in effect ('' = none)
       for (const c of cells) {
         if (c.ch === ' ') {
-          out += ' '; // spaces need no colour
+          // A space must show no ink — clear any background still in effect so it
+          // doesn't paint a coloured block (half-block leaves bg set otherwise).
+          if (curFg || curBg) {
+            out += RESET;
+            curFg = curBg = '';
+          }
+          out += ' ';
           continue;
         }
-        const code = `\x1b[38;2;${clamp8(c.r)};${clamp8(c.g)};${clamp8(c.b)}m`;
-        if (code !== cur) {
-          out += code;
-          cur = code;
+        const fg = `\x1b[38;2;${clamp8(c.r)};${clamp8(c.g)};${clamp8(c.b)}m`;
+        if (fg !== curFg) {
+          out += fg;
+          curFg = fg;
+        }
+        const bg = c.bg ? `\x1b[48;2;${clamp8(c.bg.r)};${clamp8(c.bg.g)};${clamp8(c.bg.b)}m` : '';
+        if (bg !== curBg) {
+          out += bg || '\x1b[49m'; // 49 = default background (clears a prior bg)
+          curBg = bg;
         }
         out += c.ch;
       }
-      return cur ? out + RESET : out;
+      return curFg || curBg ? out + RESET : out;
     })
     .join('\n');
 }
 
+type Pixels = Uint8ClampedArray | Uint8Array | number[];
+
+/** The source-pixel span [lo, hi) that output index `i` of `count` maps to over
+ *  `total` source pixels — at least one pixel wide so nothing is skipped. */
+function span(i: number, count: number, total: number): [number, number] {
+  const lo = Math.floor((i * total) / count);
+  const hi = Math.max(lo + 1, Math.floor(((i + 1) * total) / count));
+  return [lo, hi];
+}
+
+interface RegionAvg {
+  lum: number;
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+/** Mean luminance / colour / alpha over a source rectangle (clamped to bounds). */
+function avgRegion(
+  data: Pixels,
+  width: number,
+  height: number,
+  x0: number,
+  x1: number,
+  y0: number,
+  y1: number,
+): RegionAvg {
+  let lum = 0;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let a = 0;
+  let n = 0;
+  for (let y = y0; y < y1 && y < height; y++) {
+    for (let x = x0; x < x1 && x < width; x++) {
+      const i = (y * width + x) * 4;
+      const R = data[i];
+      const G = data[i + 1];
+      const B = data[i + 2];
+      lum += luminance(R, G, B);
+      r += R;
+      g += G;
+      b += B;
+      a += data[i + 3];
+      n++;
+    }
+  }
+  return n
+    ? { lum: lum / n, r: r / n, g: g / n, b: b / n, a: a / n }
+    : { lum: 255, r: 0, g: 0, b: 0, a: 0 };
+}
+
+/** Binary ink test for the sub-cell modes: opaque enough, and on the dark side
+ *  of mid-grey (or the light side when inverted). */
+function isInk(region: RegionAvg, ignoreAlpha: boolean, invert: boolean): boolean {
+  if (!ignoreAlpha && region.a < 128) return false;
+  return invert ? region.lum >= 128 : region.lum < 128;
+}
+
+// Braille dot → bit value, indexed [rowInCell 0–3][colInCell 0–1] (U+2800 base).
+const BRAILLE_BITS = [
+  [0x01, 0x08],
+  [0x02, 0x10],
+  [0x04, 0x20],
+  [0x40, 0x80],
+];
+
+/** 2×4 dot matrix per cell — each char packs 8 thresholded sub-samples. */
+function brailleGrid(
+  data: Pixels,
+  width: number,
+  height: number,
+  cols: number,
+  rows: number,
+  ignoreAlpha: boolean,
+  invert: boolean,
+): Cell[][] {
+  const grid: Cell[][] = [];
+  for (let ry = 0; ry < rows; ry++) {
+    const row: Cell[] = [];
+    for (let cx = 0; cx < cols; cx++) {
+      let bits = 0;
+      let rs = 0;
+      let gs = 0;
+      let bs = 0;
+      let cnt = 0;
+      for (let dy = 0; dy < 4; dy++) {
+        const [y0, y1] = span(ry * 4 + dy, rows * 4, height);
+        for (let dx = 0; dx < 2; dx++) {
+          const [x0, x1] = span(cx * 2 + dx, cols * 2, width);
+          const a = avgRegion(data, width, height, x0, x1, y0, y1);
+          if (isInk(a, ignoreAlpha, invert)) {
+            bits |= BRAILLE_BITS[dy][dx];
+            rs += a.r;
+            gs += a.g;
+            bs += a.b;
+            cnt++;
+          }
+        }
+      }
+      if (!bits) row.push({ ch: ' ', r: 0, g: 0, b: 0 });
+      else
+        row.push({
+          ch: String.fromCodePoint(0x2800 + bits),
+          r: rs / cnt,
+          g: gs / cnt,
+          b: bs / cnt,
+        });
+    }
+    grid.push(row);
+  }
+  return grid;
+}
+
+/** Split each cell top/bottom. Mono → ▀▄█; coloured → ▀ with the top colour as
+ *  foreground and the bottom as background (two colours, double vertical detail). */
+function halfblockGrid(
+  data: Pixels,
+  width: number,
+  height: number,
+  cols: number,
+  rows: number,
+  ignoreAlpha: boolean,
+  invert: boolean,
+  coloured: boolean,
+): Cell[][] {
+  const grid: Cell[][] = [];
+  for (let ry = 0; ry < rows; ry++) {
+    const [y0, y1] = span(ry, rows, height);
+    const ymid = Math.min(y1, Math.max(y0 + 1, y0 + Math.floor((y1 - y0) / 2)));
+    const row: Cell[] = [];
+    for (let cx = 0; cx < cols; cx++) {
+      const [x0, x1] = span(cx, cols, width);
+      const top = avgRegion(data, width, height, x0, x1, y0, ymid);
+      const bot = avgRegion(data, width, height, x0, x1, ymid, y1);
+      const ti = isInk(top, ignoreAlpha, invert);
+      const bi = isInk(bot, ignoreAlpha, invert);
+      if (!ti && !bi) {
+        row.push({ ch: ' ', r: 0, g: 0, b: 0 });
+      } else if (coloured) {
+        if (ti && bi)
+          row.push({ ch: '▀', r: top.r, g: top.g, b: top.b, bg: { r: bot.r, g: bot.g, b: bot.b } });
+        else if (ti) row.push({ ch: '▀', r: top.r, g: top.g, b: top.b, bg: null });
+        else row.push({ ch: '▄', r: bot.r, g: bot.g, b: bot.b, bg: null });
+      } else {
+        const ch = ti && bi ? '█' : ti ? '▀' : '▄';
+        const src = ti ? top : bot;
+        row.push({ ch, r: src.r, g: src.g, b: src.b });
+      }
+    }
+    grid.push(row);
+  }
+  return grid;
+}
+
+// Edge-tangent glyph by 45°-quantised orientation (0=horizontal … 2=vertical).
+const EDGE_GLYPHS = ['─', '╲', '│', '╱'];
+
+/** Sobel edge detect on a per-cell ink field, then stroke the contour with a
+ *  direction glyph. Flats fall below threshold and stay blank → a clean outline. */
+function edgeGrid(
+  data: Pixels,
+  width: number,
+  height: number,
+  cols: number,
+  rows: number,
+  ignoreAlpha: boolean,
+  invert: boolean,
+  threshold: number,
+): Cell[][] {
+  // Per-cell ink intensity (0–1) and colour.
+  const field: number[][] = [];
+  const colour: RegionAvg[][] = [];
+  for (let ry = 0; ry < rows; ry++) {
+    const [y0, y1] = span(ry, rows, height);
+    const frow: number[] = [];
+    const crow: RegionAvg[] = [];
+    for (let cx = 0; cx < cols; cx++) {
+      const [x0, x1] = span(cx, cols, width);
+      const a = avgRegion(data, width, height, x0, x1, y0, y1);
+      const ink = !ignoreAlpha && a.a < 128 ? 0 : invert ? a.lum / 255 : 1 - a.lum / 255;
+      frow.push(ink);
+      crow.push(a);
+    }
+    field.push(frow);
+    colour.push(crow);
+  }
+
+  const at = (y: number, x: number) =>
+    field[Math.max(0, Math.min(rows - 1, y))][Math.max(0, Math.min(cols - 1, x))];
+
+  const grid: Cell[][] = [];
+  for (let ry = 0; ry < rows; ry++) {
+    const row: Cell[] = [];
+    for (let cx = 0; cx < cols; cx++) {
+      const gx =
+        at(ry - 1, cx + 1) +
+        2 * at(ry, cx + 1) +
+        at(ry + 1, cx + 1) -
+        (at(ry - 1, cx - 1) + 2 * at(ry, cx - 1) + at(ry + 1, cx - 1));
+      const gy =
+        at(ry + 1, cx - 1) +
+        2 * at(ry + 1, cx) +
+        at(ry + 1, cx + 1) -
+        (at(ry - 1, cx - 1) + 2 * at(ry - 1, cx) + at(ry - 1, cx + 1));
+      const mag = Math.hypot(gx, gy) / 4; // kernel sums to ±4 at full contrast
+      if (mag < threshold) {
+        row.push({ ch: ' ', r: 0, g: 0, b: 0 });
+        continue;
+      }
+      // Edge runs perpendicular to the gradient; fold to [0,π) and snap to 45°.
+      const o = (((Math.atan2(gy, gx) + Math.PI / 2) % Math.PI) + Math.PI) % Math.PI;
+      const ch = EDGE_GLYPHS[Math.round(o / (Math.PI / 4)) % 4];
+      const c = colour[ry][cx];
+      row.push({ ch, r: c.r, g: c.g, b: c.b });
+    }
+    grid.push(row);
+  }
+  return grid;
+}
+
 /**
  * Convert RGBA pixel data to ASCII. `data` is length `width*height*4`.
  * Lines are right-trimmed; rows are joined with "\n".
@@ -152,6 +411,7 @@ export function imageToAscii(
   options: AsciiOptions = {},
 ): string {
   const cols = Math.max(1, Math.floor(options.cols ?? 100));
+  const mode = options.mode ?? 'ramp';
   const ramp = ASCII_RAMPS[options.ramp ?? 'standard'] ?? options.ramp ?? ASCII_RAMPS.standard;
   const glyphs = [...ramp]; // spread so multi-byte block chars count as one
   const lastIdx = glyphs.length - 1;
@@ -159,50 +419,60 @@ export function imageToAscii(
   const ignoreAlpha = options.ignoreAlpha ?? false;
   const charAspect = options.charAspect ?? TERMINAL_CELL_ASPECT;
   const color = options.color ?? 'none';
+  const edgeThreshold = options.edgeThreshold ?? 0.5;
 
   if (width <= 0 || height <= 0 || lastIdx < 0) return '';
 
   const rows = Math.max(1, Math.round(cols * (height / width) * charAspect));
 
-  const grid: Cell[][] = [];
-  for (let ry = 0; ry < rows; ry++) {
-    const y0 = Math.floor((ry * height) / rows);
-    const y1 = Math.max(y0 + 1, Math.floor(((ry + 1) * height) / rows));
-    const row: Cell[] = [];
-    for (let cx = 0; cx < cols; cx++) {
-      const x0 = Math.floor((cx * width) / cols);
-      const x1 = Math.max(x0 + 1, Math.floor(((cx + 1) * width) / cols));
-      let lumSum = 0;
-      let rSum = 0;
-      let gSum = 0;
-      let bSum = 0;
-      let alphaSum = 0;
-      let n = 0;
-      for (let y = y0; y < y1 && y < height; y++) {
-        for (let x = x0; x < x1 && x < width; x++) {
-          const i = (y * width + x) * 4;
-          const r = data[i];
-          const g = data[i + 1];
-          const b = data[i + 2];
-          lumSum += luminance(r, g, b);
-          rSum += r;
-          gSum += g;
-          bSum += b;
-          alphaSum += data[i + 3];
-          n++;
+  let grid: Cell[][];
+  if (mode === 'braille') {
+    grid = brailleGrid(data, width, height, cols, rows, ignoreAlpha, invert);
+  } else if (mode === 'halfblock') {
+    grid = halfblockGrid(data, width, height, cols, rows, ignoreAlpha, invert, color !== 'none');
+  } else if (mode === 'edge') {
+    grid = edgeGrid(data, width, height, cols, rows, ignoreAlpha, invert, edgeThreshold);
+  } else {
+    grid = [];
+    for (let ry = 0; ry < rows; ry++) {
+      const y0 = Math.floor((ry * height) / rows);
+      const y1 = Math.max(y0 + 1, Math.floor(((ry + 1) * height) / rows));
+      const row: Cell[] = [];
+      for (let cx = 0; cx < cols; cx++) {
+        const x0 = Math.floor((cx * width) / cols);
+        const x1 = Math.max(x0 + 1, Math.floor(((cx + 1) * width) / cols));
+        let lumSum = 0;
+        let rSum = 0;
+        let gSum = 0;
+        let bSum = 0;
+        let alphaSum = 0;
+        let n = 0;
+        for (let y = y0; y < y1 && y < height; y++) {
+          for (let x = x0; x < x1 && x < width; x++) {
+            const i = (y * width + x) * 4;
+            const r = data[i];
+            const g = data[i + 1];
+            const b = data[i + 2];
+            lumSum += luminance(r, g, b);
+            rSum += r;
+            gSum += g;
+            bSum += b;
+            alphaSum += data[i + 3];
+            n++;
+          }
         }
+        const alpha = n ? alphaSum / n : 0;
+        if (!ignoreAlpha && alpha < 128) {
+          row.push({ ch: ' ', r: 0, g: 0, b: 0 });
+          continue;
+        }
+        const lum = n ? lumSum / n : 255;
+        const t = invert ? lum / 255 : 1 - lum / 255; // 0 = lightest glyph
+        const ch = glyphs[Math.round(t * lastIdx)] ?? ' ';
+        row.push({ ch, r: n ? rSum / n : 0, g: n ? gSum / n : 0, b: n ? bSum / n : 0 });
       }
-      const alpha = n ? alphaSum / n : 0;
-      if (!ignoreAlpha && alpha < 128) {
-        row.push({ ch: ' ', r: 0, g: 0, b: 0 });
-        continue;
-      }
-      const lum = n ? lumSum / n : 255;
-      const t = invert ? lum / 255 : 1 - lum / 255; // 0 = lightest glyph
-      const ch = glyphs[Math.round(t * lastIdx)] ?? ' ';
-      row.push({ ch, r: n ? rSum / n : 0, g: n ? gSum / n : 0, b: n ? bSum / n : 0 });
+      grid.push(row);
     }
-    grid.push(row);
   }
 
   if (color === 'html') return serializeHtml(grid);

From 6c2cb536412e2cc2a8caf6f294425d31ebd0e8a4 Mon Sep 17 00:00:00 2001
From: chodaict <x@cver.net>
Date: Wed, 3 Jun 2026 01:30:22 +0900
Subject: [PATCH 2/2] feat(ascii): add path-traced vector stroke mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Where `edge` guesses contours with Sobel on a rasterised mark, this samples
the *real* SVG geometry — the studio owns the vector, so it can do better.

- ascii.ts: strokeToAscii() rasterises grid-space polylines into connected
  box-drawing art. Each cell's glyph is chosen by which neighbouring cells the
  line also passes through, so turns become real corners (rounded ╭╮╯╰ or
  sharp ┌┐└┘) and diagonals become smooth rounded staircases instead of a
  field of ╱╲ that never join. Pure + unit-tested (7 cases: horizontal,
  vertical, rounded vs sharp corner, 4-way ┼ crossing, colour carry, empty).
- ascii-stroke-dom.ts: the thin browser membrane. Parses the composed SVG,
  mounts it offscreen at viewBox size (so getCTM maps element space → grid
  cleanly), walks each geometry element with getPointAtLength, and breaks the
  polyline on sub-path hops so we never draw a stray line across a hole.
  Node-guarded (returns null without a DOM); a smoke test pins that.
- Studio: new "Vector → Stroke ╭╮ (path-traced)" style with a Rounded toggle;
  it bypasses the rasterise path entirely. Seam-fill (.tight) now also applies
  to vector so box-drawing connectors touch across the stretched preview.

34 unit tests pass; both Svelte components parse clean.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/Studio.svelte     |  93 +++++++++++++---
 src/lib/ascii-stroke-dom.test.ts |  16 +++
 src/lib/ascii-stroke-dom.ts      | 152 ++++++++++++++++++++++++++
 src/lib/ascii.test.ts            |  75 ++++++++++++-
 src/lib/ascii.ts                 | 176 +++++++++++++++++++++++++++++++
 5 files changed, 494 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/ascii-stroke-dom.test.ts
 create mode 100644 src/lib/ascii-stroke-dom.ts

diff --git a/src/components/Studio.svelte b/src/components/Studio.svelte
index 01da50e..2dda562 100644
--- a/src/components/Studio.svelte
+++ b/src/components/Studio.svelte
@@ -73,7 +73,14 @@
   import { History } from '~/lib/history';
   import { detectBackgroundColor, type PathBox } from '~/lib/background';
   import { applyEffects, type EffectOptions } from '~/lib/effects';
-  import { imageToAscii, type AsciiColor, type AsciiMode, TERMINAL_CELL_ASPECT } from '~/lib/ascii';
+  import {
+    imageToAscii,
+    strokeToAscii,
+    type AsciiColor,
+    type AsciiMode,
+    TERMINAL_CELL_ASPECT,
+  } from '~/lib/ascii';
+  import { sampleSvgStrokes } from '~/lib/ascii-stroke-dom';
   import { previewView, hasImage } from '~/lib/view-store';
   import { buildSizeSet, DEFAULT_SCALES } from '~/lib/export-set';
   import {
@@ -1143,9 +1150,27 @@
     });
   }
 
+  // Vector mode: sample the composed SVG's path geometry and draw the centreline
+  // as connected box-drawing art — no rasterise step. Sync (DOM parse); cheap
+  // enough behind the preview debounce. Returns '' when there's nothing to draw.
+  function vectorAscii(color: AsciiColor): string | null {
+    const finalSvg = buildFinalSvg();
+    if (!finalSvg) return null;
+    const s = sampleSvgStrokes(finalSvg, asciiCols, TERMINAL_CELL_ASPECT);
+    if (!s) return '';
+    return strokeToAscii(s.polylines, {
+      cols: s.cols,
+      rows: s.rows,
+      color,
+      rounded: asciiRounded,
+      strokeColor: { r: 0, g: 0, b: 0 },
+    });
+  }
+
   /** Build the ASCII rendering for EXPORT (copy / .txt / .ans) — same bytes the
    *  preview shows. */
   async function buildAsciiText(color: AsciiColor = 'none'): Promise<string | null> {
+    if (isVector) return vectorAscii(color);
     const id = await buildAsciiData();
     return id ? asciiFrom(id, color) : null;
   }
@@ -1212,21 +1237,37 @@
   let asciiBusy = $state(false);
   let asciiSeq = 0;
   let lastAsciiSig = ''; // inputs that produced the current asciiArt
-  // ASCII style = fill method. The three ramp styles drive the density-glyph
-  // renderer (`ramp` mode); braille/halfblock/edge are the smoother sub-cell and
-  // contour modes. One picker, mapped to imageToAscii's {mode, ramp}.
-  type AsciiStyle = 'standard' | 'blocks' | 'detailed' | 'braille' | 'halfblock' | 'edge';
+  // ASCII style = fill method. The ramp styles drive the density-glyph renderer
+  // (`ramp` mode); braille/halfblock/edge are the smoother raster modes; `vector`
+  // is the standalone stroke renderer that samples the SVG geometry directly
+  // (strokeToAscii) instead of a rasterised buffer. One picker maps to all of it.
+  type AsciiStyle =
+    | 'standard'
+    | 'blocks'
+    | 'detailed'
+    | 'braille'
+    | 'halfblock'
+    | 'edge'
+    | 'vector';
   let asciiStyle = $state<AsciiStyle>('standard');
+  // The vector path doesn't go through imageToAscii — it samples paths directly.
+  const isVector = $derived(asciiStyle === 'vector');
   const asciiMode = $derived<AsciiMode>(
     asciiStyle === 'braille' || asciiStyle === 'halfblock' || asciiStyle === 'edge'
       ? asciiStyle
       : 'ramp',
   );
   // Ramp name only matters in 'ramp' mode; harmless default otherwise.
-  const asciiRamp = $derived(asciiMode === 'ramp' ? (asciiStyle as string) : 'standard');
-  // Seam-fill only the solid-block tilers (█ and ▀▄█); braille is discrete dots
-  // that read best crisp, and edge strokes are sparse — dilating them muddies.
-  const asciiTight = $derived(asciiStyle === 'blocks' || asciiStyle === 'halfblock');
+  const asciiRamp = $derived(
+    asciiMode === 'ramp' && !isVector ? (asciiStyle as string) : 'standard',
+  );
+  // Seam-fill the tilers/connected line art so glyphs touch across the stretched
+  // preview line box: solid blocks (█ ▀▄█) and the box-drawing vector strokes.
+  // Braille dots and sparse edge strokes read best crisp, so leave them be.
+  const asciiTight = $derived(
+    asciiStyle === 'blocks' || asciiStyle === 'halfblock' || asciiStyle === 'vector',
+  );
+  let asciiRounded = $state(true); // vector: rounded corners (╭╮╯╰) vs sharp (┌┐└┘)
   let asciiInvert = $state(false);
   let asciiColor = $state(false); // keep each glyph's source colour (web + ANSI)
   // Measured advance ratio (glyph width ÷ font-size) of the preview's monospace
@@ -1260,6 +1301,7 @@
       displaySvg,
       asciiCols,
       asciiStyle,
+      asciiRounded,
       asciiInvert,
       asciiColor,
       backdrop.color,
@@ -1273,10 +1315,17 @@
     const wantColor = asciiColor;
     asciiBusy = true;
     const timer = setTimeout(async () => {
-      const id = await buildAsciiData();
-      if (seq !== asciiSeq) return;
-      asciiArt = id ? asciiFrom(id, 'none') : '';
-      asciiHtml = id && wantColor ? asciiFrom(id, 'html') : '';
+      if (isVector) {
+        const plain = vectorAscii('none');
+        if (seq !== asciiSeq) return;
+        asciiArt = plain ?? '';
+        asciiHtml = wantColor ? (vectorAscii('html') ?? '') : '';
+      } else {
+        const id = await buildAsciiData();
+        if (seq !== asciiSeq) return;
+        asciiArt = id ? asciiFrom(id, 'none') : '';
+        asciiHtml = id && wantColor ? asciiFrom(id, 'html') : '';
+      }
       lastAsciiSig = sig;
       asciiBusy = false;
     }, 120);
@@ -2435,12 +2484,22 @@
                         <option value="halfblock">Half-block ▀ (2-colour)</option>
                         <option value="edge">Edge ╱ (outline)</option>
                       </optgroup>
+                      <optgroup label="Vector">
+                        <option value="vector">Stroke ╭╮ (path-traced)</option>
+                      </optgroup>
                     </select>
                   </label>
-                  <label class="ascii-opt">
-                    <input type="checkbox" bind:checked={asciiInvert} />
-                    <span>Invert</span>
-                  </label>
+                  {#if isVector}
+                    <label class="ascii-opt">
+                      <input type="checkbox" bind:checked={asciiRounded} />
+                      <span>Rounded</span>
+                    </label>
+                  {:else}
+                    <label class="ascii-opt">
+                      <input type="checkbox" bind:checked={asciiInvert} />
+                      <span>Invert</span>
+                    </label>
+                  {/if}
                   <label class="ascii-opt">
                     <input type="checkbox" bind:checked={asciiColor} />
                     <span>Color</span>
diff --git a/src/lib/ascii-stroke-dom.test.ts b/src/lib/ascii-stroke-dom.test.ts
new file mode 100644
index 0000000..a1c0afd
--- /dev/null
+++ b/src/lib/ascii-stroke-dom.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+import { sampleSvgStrokes } from './ascii-stroke-dom';
+
+// The geometry sampling itself needs a real SVG layout (getPointAtLength /
+// getCTM), so it's exercised in CI's build + the maintainer's click-test, not
+// here. This smoke test just pins the node-safe guard and that the module
+// transforms/loads cleanly — the connectivity→glyph logic it feeds is covered
+// by the strokeToAscii suite in ascii.test.ts.
+describe('sampleSvgStrokes', () => {
+  it('returns null without a DOM (node environment)', () => {
+    expect(typeof document).toBe('undefined');
+    expect(sampleSvgStrokes('<svg viewBox="0 0 10 10"><path d="M0 0 L10 10"/></svg>', 40)).toBe(
+      null,
+    );
+  });
+});
diff --git a/src/lib/ascii-stroke-dom.ts b/src/lib/ascii-stroke-dom.ts
new file mode 100644
index 0000000..6cd3c39
--- /dev/null
+++ b/src/lib/ascii-stroke-dom.ts
@@ -0,0 +1,152 @@
+/**
+ * Browser-only bridge for the vector-stroke ASCII mode: turn a composed SVG
+ * string into the grid-space polylines that {@link strokeToAscii} rasterises.
+ *
+ * Why this is separate (and untested): it leans on real SVG geometry —
+ * getTotalLength / getPointAtLength / getCTM — which only exist on elements
+ * mounted in a rendered document. The pure half (polylines → glyphs) lives in
+ * ascii.ts and carries the unit tests; this half is the thin DOM membrane.
+ *
+ * The studio already owns the real vector (no Sobel guessing): we sample each
+ * geometry element's centreline, project it through the element's CTM into the
+ * viewBox, then into the cell grid. Big jumps between sub-paths (M…Z M…Z) break
+ * the polyline so we never draw a stray line across a hole.
+ */
+import { TERMINAL_CELL_ASPECT, type StrokePoint } from './ascii';
+
+export interface SampledStrokes {
+  polylines: StrokePoint[][];
+  cols: number;
+  rows: number;
+}
+
+const GEOMETRY_SELECTOR = 'path, line, polyline, polygon, circle, ellipse, rect';
+
+/** Parse "rgb(r, g, b)" / "rgba(r, g, b, a)" → channels, or null (e.g. 'none'). */
+function parseRgb(value: string): { r: number; g: number; b: number } | null {
+  const m = value.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/i);
+  if (!m) return null;
+  return { r: +m[1], g: +m[2], b: +m[3] };
+}
+
+/** The colour to stamp on a geometry element's samples: its fill, else stroke. */
+function elementColor(el: Element): { r: number; g: number; b: number } | null {
+  const cs = getComputedStyle(el);
+  if (cs.fill && cs.fill !== 'none') {
+    const c = parseRgb(cs.fill);
+    if (c) return c;
+  }
+  if (cs.stroke && cs.stroke !== 'none') {
+    const c = parseRgb(cs.stroke);
+    if (c) return c;
+  }
+  return null;
+}
+
+/**
+ * Sample an SVG string into grid-space polylines. `cols` is the target width in
+ * characters; rows follow from the viewBox aspect and the terminal cell aspect,
+ * matching imageToAscii so the vector and raster modes line up.
+ *
+ * Returns null if the SVG can't be parsed or has no usable viewBox/geometry.
+ */
+export function sampleSvgStrokes(
+  svgText: string,
+  cols: number,
+  charAspect: number = TERMINAL_CELL_ASPECT,
+): SampledStrokes | null {
+  if (typeof document === 'undefined') return null;
+
+  const doc = new DOMParser().parseFromString(svgText, 'image/svg+xml');
+  const root = doc.documentElement;
+  if (!root || root.nodeName === 'parsererror' || root.tagName.toLowerCase() !== 'svg') return null;
+
+  // Resolve the user-space box: explicit viewBox, else width/height.
+  const vb = root.getAttribute('viewBox');
+  let vbX = 0;
+  let vbY = 0;
+  let vbW = 0;
+  let vbH = 0;
+  if (vb) {
+    const n = vb
+      .trim()
+      .split(/[\s,]+/)
+      .map(Number);
+    if (n.length === 4 && n.every((v) => Number.isFinite(v))) [vbX, vbY, vbW, vbH] = n;
+  }
+  if (!(vbW > 0 && vbH > 0)) {
+    vbW = parseFloat(root.getAttribute('width') ?? '') || 0;
+    vbH = parseFloat(root.getAttribute('height') ?? '') || 0;
+  }
+  if (!(vbW > 0 && vbH > 0)) return null;
+
+  const c = Math.max(1, Math.floor(cols));
+  const rows = Math.max(1, Math.round(c * (vbH / vbW) * charAspect));
+
+  // Mount offscreen so getCTM / getPointAtLength have a live layout to read.
+  // Force the viewport to the viewBox size so the viewBox→viewport transform is
+  // 1:1 (translate(-vbX,-vbY), scale 1): getCTM then maps element-local space to
+  // user space minus the viewBox origin, exactly what toGrid expects below.
+  const host = document.createElement('div');
+  host.setAttribute(
+    'style',
+    'position:absolute;left:-99999px;top:0;width:0;height:0;overflow:hidden',
+  );
+  const mounted = document.importNode(root, true) as SVGSVGElement;
+  mounted.setAttribute('width', String(vbW));
+  mounted.setAttribute('height', String(vbH));
+  mounted.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+  host.appendChild(mounted);
+  document.body.appendChild(host);
+
+  // px,py are post-CTM viewport coords (origin already at the viewBox corner).
+  const toGrid = (px: number, py: number): [number, number] => [(px / vbW) * c, (py / vbH) * rows];
+  // A jump larger than this (in cells) means a sub-path hop — break the line.
+  const BREAK = 1.8;
+  // Sample roughly every 0.4 cells along each path.
+  const stepUser = (vbW / c) * 0.4 || 1;
+  const MAX_SAMPLES = 40000;
+
+  const polylines: StrokePoint[][] = [];
+  try {
+    const geoms = Array.from(mounted.querySelectorAll(GEOMETRY_SELECTOR));
+    let budget = MAX_SAMPLES;
+    for (const el of geoms) {
+      const geo = el as SVGGeometryElement;
+      let total = 0;
+      try {
+        total = geo.getTotalLength();
+      } catch {
+        continue;
+      }
+      if (!(total > 0)) continue;
+      const ctm = geo.getCTM();
+      const col = elementColor(el) ?? undefined;
+
+      let cur: StrokePoint[] = [];
+      let prev: [number, number] | null = null;
+      const steps = Math.min(budget, Math.max(1, Math.ceil(total / stepUser)));
+      for (let i = 0; i <= steps && budget > 0; i++) {
+        budget--;
+        const raw = geo.getPointAtLength((i / steps) * total);
+        // With a CTM the point lands in viewport space (origin at viewBox corner);
+        // without one it's raw user space, so drop the viewBox origin ourselves.
+        const pt = ctm ? raw.matrixTransform(ctm) : { x: raw.x - vbX, y: raw.y - vbY };
+        const [gx, gy] = toGrid(pt.x, pt.y);
+        if (prev && Math.hypot(gx - prev[0], gy - prev[1]) > BREAK) {
+          if (cur.length > 1) polylines.push(cur);
+          cur = [];
+        }
+        cur.push(col ? { x: gx, y: gy, ...col } : { x: gx, y: gy });
+        prev = [gx, gy];
+      }
+      if (cur.length > 1) polylines.push(cur);
+      if (budget <= 0) break;
+    }
+  } finally {
+    document.body.removeChild(host);
+  }
+
+  if (!polylines.length) return null;
+  return { polylines, cols: c, rows };
+}
diff --git a/src/lib/ascii.test.ts b/src/lib/ascii.test.ts
index 0f8c28c..f15ad88 100644
--- a/src/lib/ascii.test.ts
+++ b/src/lib/ascii.test.ts
@@ -1,5 +1,11 @@
 import { describe, expect, it } from 'vitest';
-import { ASCII_RAMPS, imageToAscii, type AsciiOptions } from './ascii';
+import {
+  ASCII_RAMPS,
+  imageToAscii,
+  strokeToAscii,
+  type AsciiOptions,
+  type StrokePoint,
+} from './ascii';
 
 // Build a w×h RGBA buffer from a per-pixel callback.
 function img(w: number, h: number, px: (x: number, y: number) => [number, number, number, number]) {
@@ -232,3 +238,70 @@ describe('mode: edge', () => {
     expect(out.replace(/\n/g, '').trim()).toBe('');
   });
 });
+
+describe('strokeToAscii (vector)', () => {
+  // Sample a straight segment from a→b into many grid-space points.
+  function seg(a: [number, number], b: [number, number], steps = 40): StrokePoint[] {
+    const pts: StrokePoint[] = [];
+    for (let i = 0; i <= steps; i++) {
+      const t = i / steps;
+      pts.push({ x: a[0] + (b[0] - a[0]) * t, y: a[1] + (b[1] - a[1]) * t });
+    }
+    return pts;
+  }
+  const o = (rounded = true) => ({ cols: 8, rows: 8, rounded });
+
+  it('a horizontal segment is a run of ─ (with stub ends ╶ ╴)', () => {
+    const out = strokeToAscii([seg([0.5, 3.5], [7.5, 3.5])], o());
+    const line = out.split('\n').find((l) => l.includes('─'))!;
+    // Only horizontal connectors — interior ─, the two ends are half-line stubs.
+    expect([...line].every((c) => c === '─' || c === '╶' || c === '╴')).toBe(true);
+    expect(line.length).toBeGreaterThanOrEqual(7);
+  });
+
+  it('a vertical segment is a run of │ (with stub ends ╵ ╷)', () => {
+    const out = strokeToAscii([seg([3.5, 0.5], [3.5, 7.5])], o());
+    const inked = out
+      .split('\n')
+      .flatMap((l) => [...l.trimEnd()])
+      .filter((c) => c !== ' ');
+    expect(inked.length).toBeGreaterThanOrEqual(7);
+    expect(inked.every((c) => c === '│' || c === '╵' || c === '╷')).toBe(true);
+    expect(inked.includes('│')).toBe(true);
+  });
+
+  it('an L (right then down) turns the corner with ╮ (rounded)', () => {
+    // Right along row 1, then down column 6.
+    const path = [...seg([0.5, 1.5], [6.5, 1.5]), ...seg([6.5, 1.5], [6.5, 6.5])];
+    const out = strokeToAscii([path], o(true));
+    expect(out).toContain('╮'); // down+left corner at the bend
+    expect(out).toContain('─');
+    expect(out).toContain('│');
+    expect(out).not.toContain('┐'); // rounded, not sharp
+  });
+
+  it('sharp mode uses ┐ instead of ╮', () => {
+    const path = [...seg([0.5, 1.5], [6.5, 1.5]), ...seg([6.5, 1.5], [6.5, 6.5])];
+    const out = strokeToAscii([path], o(false));
+    expect(out).toContain('┐');
+    expect(out).not.toContain('╮');
+  });
+
+  it('a 4-way crossing yields ┼', () => {
+    const h = seg([0.5, 3.5], [7.5, 3.5]);
+    const v = seg([3.5, 0.5], [3.5, 7.5]);
+    const out = strokeToAscii([h, v], o());
+    expect(out).toContain('┼');
+  });
+
+  it('carries per-point colour into HTML spans', () => {
+    const pts = seg([0.5, 3.5], [7.5, 3.5]).map((p) => ({ ...p, r: 255, g: 0, b: 0 }));
+    const out = strokeToAscii([pts], { ...o(), color: 'html' });
+    expect(out).toContain('color:#ff0000');
+    expect(out).toContain('─');
+  });
+
+  it('empty input renders nothing', () => {
+    expect(strokeToAscii([], o()).replace(/\n/g, '').trim()).toBe('');
+  });
+});
diff --git a/src/lib/ascii.ts b/src/lib/ascii.ts
index bb9d157..9510d53 100644
--- a/src/lib/ascii.ts
+++ b/src/lib/ascii.ts
@@ -479,3 +479,179 @@ export function imageToAscii(
   if (color === 'ansi') return serializeAnsi(grid);
   return serializePlain(grid);
 }
+
+// ── Vector-stroke renderer ──────────────────────────────────────────────────
+//
+// The `edge` mode above *guesses* contours by running Sobel on a rasterised
+// mark. When you have the real vector — as an icon studio does — you can do
+// better: sample the actual path geometry and draw the centreline as a
+// connected line. Each cell's glyph is chosen by which neighbouring cells the
+// line also passes through (box-drawing connectivity), so turns become real
+// corners (rounded ╭╮╯╰) and diagonals become smooth rounded staircases rather
+// than a field of ╱╲ that never quite join up.
+//
+// This half is pure: it takes polylines already projected into grid space
+// (x∈[0,cols], y∈[0,rows]) and returns the same Cell[][] the serializers eat.
+// The browser-only part — turning an <svg>'s paths into those polylines via
+// getPointAtLength — lives in the component, thin and untested by design.
+
+/** One sampled point along a path, in grid space. Optional colour is the source
+ *  stroke/fill at that point; cells average the points that fall in them. */
+export interface StrokePoint {
+  x: number;
+  y: number;
+  r?: number;
+  g?: number;
+  b?: number;
+}
+
+export interface StrokeOptions {
+  cols: number;
+  rows: number;
+  /** Colour carrier, as in {@link AsciiOptions}. Defaults to 'none'. */
+  color?: AsciiColor;
+  /** Rounded corners (╭╮╯╰) vs sharp (┌┐└┘). Defaults to true. */
+  rounded?: boolean;
+  /** Colour for points (and the whole stroke in mono) that carry none. */
+  strokeColor?: { r: number; g: number; b: number };
+}
+
+// Connectivity bits: which orthogonal neighbour a cell's line links to.
+const DIR_U = 1;
+const DIR_D = 2;
+const DIR_L = 4;
+const DIR_R = 8;
+
+/** Box-drawing glyph for a connectivity mask. */
+function strokeGlyph(mask: number, rounded: boolean): string {
+  switch (mask) {
+    case DIR_L | DIR_R:
+      return '─';
+    case DIR_U | DIR_D:
+      return '│';
+    case DIR_D | DIR_R:
+      return rounded ? '╭' : '┌';
+    case DIR_D | DIR_L:
+      return rounded ? '╮' : '┐';
+    case DIR_U | DIR_R:
+      return rounded ? '╰' : '└';
+    case DIR_U | DIR_L:
+      return rounded ? '╯' : '┘';
+    case DIR_U | DIR_D | DIR_R:
+      return '├';
+    case DIR_U | DIR_D | DIR_L:
+      return '┤';
+    case DIR_L | DIR_R | DIR_D:
+      return '┬';
+    case DIR_L | DIR_R | DIR_U:
+      return '┴';
+    case DIR_U | DIR_D | DIR_L | DIR_R:
+      return '┼';
+    case DIR_U:
+      return '╵';
+    case DIR_D:
+      return '╷';
+    case DIR_L:
+      return '╴';
+    case DIR_R:
+      return '╶';
+    default:
+      return '·'; // isolated occupied cell (a lone sample)
+  }
+}
+
+/**
+ * Rasterise vector polylines (grid space) to ASCII line art via box-drawing
+ * connectivity. Returns the serialized string for the chosen colour carrier.
+ */
+export function strokeToAscii(polylines: StrokePoint[][], options: StrokeOptions): string {
+  const cols = Math.max(1, Math.floor(options.cols));
+  const rows = Math.max(1, Math.floor(options.rows));
+  const rounded = options.rounded ?? true;
+  const color = options.color ?? 'none';
+  const stroke = options.strokeColor ?? { r: 0, g: 0, b: 0 };
+
+  const n = cols * rows;
+  const mask = new Int32Array(n);
+  const occupied = new Uint8Array(n);
+  const rAcc = new Float64Array(n);
+  const gAcc = new Float64Array(n);
+  const bAcc = new Float64Array(n);
+  const cnt = new Int32Array(n);
+  const idx = (cx: number, cy: number) => cy * cols + cx;
+  const inB = (cx: number, cy: number) => cx >= 0 && cx < cols && cy >= 0 && cy < rows;
+
+  // Record that two orthogonally-adjacent cells are joined by the line.
+  const link = (ax: number, ay: number, bx: number, by: number) => {
+    const dx = bx - ax;
+    const dy = by - ay;
+    if (Math.abs(dx) + Math.abs(dy) !== 1) return; // only orthogonal neighbours
+    const aBit = dx === 1 ? DIR_R : dx === -1 ? DIR_L : dy === 1 ? DIR_D : DIR_U;
+    const bBit = dx === 1 ? DIR_L : dx === -1 ? DIR_R : dy === 1 ? DIR_U : DIR_D;
+    if (inB(ax, ay)) mask[idx(ax, ay)] |= aBit;
+    if (inB(bx, by)) mask[idx(bx, by)] |= bBit;
+  };
+
+  // Walk cell→cell orthogonally; diagonals become an L (staircase) so corners form.
+  const connect = (ax: number, ay: number, bx: number, by: number) => {
+    let x = ax;
+    let y = ay;
+    let guard = 0;
+    while ((x !== bx || y !== by) && guard++ < 4 * (cols + rows)) {
+      const sx = Math.sign(bx - x);
+      const sy = Math.sign(by - y);
+      if (sx !== 0) {
+        link(x, y, x + sx, y); // step horizontally first
+        x += sx;
+      } else if (sy !== 0) {
+        link(x, y, x, y + sy);
+        y += sy;
+      }
+    }
+  };
+
+  for (const pl of polylines) {
+    let pcx: number | null = null;
+    let pcy = 0;
+    for (const p of pl) {
+      const cx = Math.floor(p.x);
+      const cy = Math.floor(p.y);
+      if (inB(cx, cy)) {
+        const i = idx(cx, cy);
+        occupied[i] = 1;
+        rAcc[i] += p.r ?? stroke.r;
+        gAcc[i] += p.g ?? stroke.g;
+        bAcc[i] += p.b ?? stroke.b;
+        cnt[i]++;
+      }
+      if (pcx !== null && (cx !== pcx || cy !== pcy)) connect(pcx, pcy, cx, cy);
+      pcx = cx;
+      pcy = cy;
+    }
+  }
+
+  const grid: Cell[][] = [];
+  for (let cy = 0; cy < rows; cy++) {
+    const row: Cell[] = [];
+    for (let cx = 0; cx < cols; cx++) {
+      const i = idx(cx, cy);
+      if (!occupied[i] && mask[i] === 0) {
+        row.push({ ch: ' ', r: 0, g: 0, b: 0 });
+        continue;
+      }
+      const ch = strokeGlyph(mask[i], rounded);
+      const c = cnt[i];
+      row.push({
+        ch,
+        r: c ? rAcc[i] / c : stroke.r,
+        g: c ? gAcc[i] / c : stroke.g,
+        b: c ? bAcc[i] / c : stroke.b,
+      });
+    }
+    grid.push(row);
+  }
+
+  if (color === 'html') return serializeHtml(grid);
+  if (color === 'ansi') return serializeAnsi(grid);
+  return serializePlain(grid);
+}