@reekon-tools/boldr-cad 1.3.0 → 1.5.0

package/src/render/linkTile.ts

@@ -4,16 +4,24 @@ import type { LinkInfo, Note } from '../model/types';
 import type { DrawCtx } from './ctx';
 import { strokeMarkup } from './markup';
 import { smoothRectPath } from './squircle';
+import { drawSvgIcon, svgIcon, type SvgIcon } from './svgPath';
 import { FONT, TH } from './theme';
-import { cvs, leaderPath, linkBox, linkThumb, type ImageLike, type LinkBox, type Xform } from './view';
+import {
+  BADGE_CAD_SVG, BADGE_CON_CALC_SVG, BADGE_CONVERSION_SVG, BADGE_FILE_SVG, BADGE_LABEL_SVG, BADGE_NOTE_SVG, KEY_CAMERA_SVG,
+  KEY_MEASUREMENT_SVG, KEY_SKETCH_SVG,
+} from './tileIcons';
+import { cvs, leaderPath, linkBox, linkThumb, requestDraw, type ImageLike, type LinkBox, type Xform } from './view';
 
 /*
-  A link's tile on the plan: a square card for one of the job's files (a photo's picture edge to edge; anything else's
-  picture, or an icon for its kind, above its name) or measurements (its value and name), and its leader — a line in the markup's look from the card's edge to
-  what it points at. The card is laid out once at LINK_TILE_PX and scaled to its size on the drawing, so its shapes and
-  text are the same at every step of a pinch (kept, on a device). Small on the screen it shows less: its picture or
-  icon alone, then a pin of a fixed size. Where it is on the screen (and its handles) is view.ts's, and picking it
-  hit.ts's.
+  A link's tile on the plan, as Figma draws an object tile (657:8732): a square card filled with what the object looks
+  like (its picture, a note's text, a conversion's screen), a grey bar along its foot with the object's badge — its
+  type's colour and icon, as the add-object sheet has them — and its name. A photo or a sketch with its picture is that
+  picture alone, edge to edge. Selected, a yellow ring round its edge; otherwise a grey hairline inside it. The card is
+  laid out once at LINK_TILE_PX (Figma's 120 tile, scaled) and scaled to its size on the drawing; its bar, the bar's
+  badge and name, and the badge in the middle of a card with nothing to show stay one size on the screen (BAR_K), and a
+  wider card shows more of its name. What it's made of is kept, on a device: a pinch makes a few new shapes, not one a
+  step (screenW, cornerOf). Small on the screen it shows less: its picture or its badge alone, then a pin of a fixed
+  size. Where it is on the screen (and its handles) is view.ts's, and picking it hit.ts's.
 */
 
 export interface LinkDrawOpts {
@@ -25,6 +33,7 @@ export interface LinkDrawOpts {
 
 /** Draw tile `n` and its leader. */
 export function drawLink(c: DrawCtx, T: Xform, n: Note, o: LinkDrawOpts): void {
+  if (!watchingFonts) watchFonts();
   const b = linkBox(T, n), lp = leaderPath(T, n, b);
   c.save();
   c.globalAlpha = o.alpha;
@@ -41,8 +50,44 @@ export function drawLink(c: DrawCtx, T: Xform, n: Note, o: LinkDrawOpts): void {
  */
 const screenW = (px: number, k: number): number => Math.pow(2, Math.round(Math.log2(px / k) * 4) / 4);
 
-/** The layout's side, and its rounding; how wide a selected tile's ring is outside its edge (pt). */
-const L = LINK_TILE_PX, R = 12, SELECT_W = 3;
+/** Figma's 120 tile in the layout's units: every measure of the frame × F. */
+const L = LINK_TILE_PX, F = L / 120;
+/** The card's corners (10, smoothed 60% as every corner in the editor); how wide a selected tile's ring is (pt). */
+const R = 10 * F, SELECT_W = 3;
+/** The bar along the card's foot: 28 tall. */
+const FOOT_H = 28 * F;
+/** The badge in it (20, corners 6), 4 in from the card's side and the bar's top; the name 5.37 past it, 4 short of the far side. */
+const BADGE = 20 * F, BADGE_IN = 4 * F, NAME_X = 29.366 * F, NAME_END = 4 * F;
+/** The name: Inter Medium 10 in the frame, its baseline 18 below the bar's top. */
+const NAME_PX = 10 * F, NAME_BASE = 18 * F;
+/**
+ * The bar, its badge and its name are one size on the screen at any zoom (the user's call, 2026-10-26: "on zoom
+ * nothing scales but the text — the bottom banner stays the same height, and so does the icon"): the frame's, ×
+ * BAR_SCALE. Its name is 12 (the user's call, 2026-10-26: "make it 12 px font … adjust the banner and icon size if
+ * needed to scale properly"), so the bar is 33.6 and its badge 24, as the frame has them to its 10. The card and what
+ * it shows grow with the drawing; a name shows more of itself as the card widens. BAR_K: the card's scale at which its
+ * layout's bar is that size.
+ */
+const BAR_SCALE = 1.2, BAR_K = BAR_SCALE / F;
+/**
+ * The tile's type: Figma's Inter. BOLDR Web's pages load it; on a device the host's font is drawn whatever is named
+ * here (BOLDR passes Inter). Anywhere without it, the editor's own.
+ */
+const TILE_FONT = '"Inter",' + FONT;
+
+/**
+ * The card's corners at scale `k`: R, up to the card at BAR_K (144 across); bigger than that, about as big on the
+ * screen as they are there (12: the frame's 10, as the bar is the frame's × BAR_SCALE), so they never reach into its
+ * badge or its name's ends — in steps, as screenW's, so a pinch makes a few shapes and not one a step: 11 to 13.1.
+ */
+const cornerOf = (k: number): number => (k <= BAR_K ? R : R * Math.pow(2, Math.round(Math.log2(BAR_K / k) * 4) / 4));
+
+/**
+ * The tile's own colours (Figma's, the same in both themes: a tile is a dark card on any canvas): the card under its
+ * picture (General/Grey - 1), the bar (Grey - 2), its hairlines (Grey - 3), quiet text (Grey - 4), and the light grey a
+ * calculator's diagram sits on (Light Grey - 2).
+ */
+const TILE = { card: '#2B2C2E', bar: '#424345', line: '#626364', quiet: '#9FA0A2', name: '#FFFFFF', paper: '#E8EAED' } as const;
 
 /** A rounded rectangle's path, one shape for each size (as draw.ts's rr: kept by an engine that can). */
 function rr(c: DrawCtx, x: number, y: number, w: number, h: number, r: number): void {
@@ -50,91 +95,398 @@ function rr(c: DrawCtx, x: number, y: number, w: number, h: number, r: number):
   else smoothRectPath(c, x, y, w, h, r);
 }
 
-/** The kind of thing a tile is for, as its icon shows it. */
-type Glyph = 'photo' | 'pdf' | 'document' | 'note' | 'calculator' | 'label' | 'drawing' | 'tape' | 'removed';
-const glyphOf = (n: Note, info?: LinkInfo): Glyph => {
-  if (info?.exists === false) return 'removed';
-  if (n.link!.kind === 'measurement') return 'tape';
-  const t = info?.fileType ?? n.link!.fileType;
-  return t === 'photo' || t === 'pdf' || t === 'note' || t === 'calculator' || t === 'label' || t === 'drawing' ? t : 'document';
+/**
+ * Clip to the card above its bar, or (`bar`) to the bar — the bar drawn at its scale `u` within the card's. Described in
+ * the bar's own scale, where it's one size whatever the zoom, so it's one shape kept, never one a step of a pinch.
+ */
+function clipToBar(c: DrawCtx, u: number, bar: boolean): void {
+  // (far past the card every way but the one edge that counts, the bar's top: put where the shape starts, so it's
+  // exactly there however the rest rounds. The biggest card, 480" at the closest zoom (400 px an inch), is 128,000 of
+  // the bar's units across: LINK_MAX_IN × ZOOM_MAX / BAR_SCALE.)
+  const far = 1e6, d = bar ? far : -far;
+  const draw = (cc: DrawCtx, X: number, Y: number) => {
+    cc.beginPath(); cc.moveTo(X - far, Y); cc.lineTo(X + far, Y); cc.lineTo(X + far, Y + d); cc.lineTo(X - far, Y + d); cc.closePath();
+  };
+  c.translate(0, L); c.scale(u, u); c.translate(0, -L);
+  if (c.shape) c.shape('bar clip ' + bar, 0, L - FOOT_H, draw);
+  else draw(c, 0, L - FOOT_H);
+  c.clip();
+  c.translate(0, L); c.scale(1 / u, 1 / u); c.translate(0, -L);
+}
+
+/** What a tile is, by the object it's for: Figma's tile types (and a sketch, a measurement: no tile there). */
+export type TileType = 'image' | 'sketch' | 'file' | 'concalc' | 'conversion' | 'note' | 'cad' | 'label' | 'measurement';
+
+/** The host's kind of file (LinkInfo.fileType) as a tile type: a PDF or anything unknown is a file. */
+export function tileTypeOf(n: Note, info?: LinkInfo): TileType {
+  if (n.link!.kind === 'measurement') return 'measurement';
+  switch (info?.fileType ?? n.link!.fileType) {
+    case 'photo': return 'image';
+    case 'drawing': return 'sketch';
+    case 'calculator': return 'concalc';
+    case 'conversion': return 'conversion';
+    case 'note': return 'note';
+    case 'label': return 'label';
+    case 'cad': return 'cad';
+    default: return 'file';
+  }
+}
+
+/**
+ * A badge: its hue, its icon (render/tileIcons.ts) and where the icon sits in a badge 20 across. Figma's for six types
+ * ("Object Tile Icons" 704:23628, glyph boxes as drawn there); the rest from the add-object sheet, their glyphs as big
+ * in the badge as those are (about 13 of its 20).
+ */
+interface Badge { hue: string; icon: SvgIcon; key: string; x: number; y: number; size: number }
+const badge = (hue: string, svg: string, key: string, x: number, y: number, size: number): Badge => ({ hue, icon: svgIcon(svg), key, x, y, size });
+export const BADGES: Record<TileType, Badge> = {
+  file: badge('#E93C3E', BADGE_FILE_SVG, 'tile file', 5, 3.6034, 12.7932),
+  concalc: badge('#BD30A8', BADGE_CON_CALC_SVG, 'tile concalc', 2.9285, 4.5, 14.1429),
+  conversion: badge('#505DC1', BADGE_CONVERSION_SVG, 'tile conversion', 4.0002, 4.7068, 12),
+  note: badge('#0DBF4A', BADGE_NOTE_SVG, 'tile note', 3.5, 4, 13),
+  cad: badge('#23C7C7', BADGE_CAD_SVG, 'tile cad', 3.2557, 2.7557, 14.4887),
+  label: badge('#F7781E', BADGE_LABEL_SVG, 'tile label', 3.5, 3.7491, 13),
+  // (the sheet's icons are drawn on their 70 tile, their glyph in its middle: the tile scaled so the glyph is 13)
+  sketch: badge('#EFB107', KEY_SKETCH_SVG, 'tile sketch', 10 - 29.4 / 2, 10 - 29.4 / 2, 29.4),
+  measurement: badge('#0066FF', KEY_MEASUREMENT_SVG, 'tile measurement', 10 - 26.8 / 2, 10 - 26.8 / 2, 26.8),
+  image: badge('#000000', KEY_CAMERA_SVG, 'tile camera', 3.5, 10 - (26.8881 * 13) / 36 / 2, 13),
 };
 
+/** Badge `t` `size` across, its top left at x, y: its hue (or `hue`), its icon in white in its middle. */
+function drawBadge(c: DrawCtx, t: TileType, x: number, y: number, size: number, hue?: string): void {
+  const bd = BADGES[t], s = size / 20;
+  rr(c, x, y, size, size, 6 * s);
+  c.fillStyle = hue ?? bd.hue; c.fill();
+  drawSvgIcon(c, bd.icon, bd.key, x + bd.x * s, y + bd.y * s, bd.size * s);
+}
+
+/** Its picture, once loaded (asked for only near the screen: a drawing can link more than are kept). */
+function pictureOf(b: LinkBox, n: Note, info: LinkInfo | undefined): ImageLike | null {
+  const gone = info?.exists === false, near = b.x < cvs.W * 2 && b.y < cvs.H * 2 && b.x + b.s > -cvs.W && b.y + b.s > -cvs.H;
+  const pic = near && !gone && n.link!.kind === 'file' && info?.thumbUrl ? linkThumb(info.thumbUrl) : null;
+  return pic && pic.complete && pic.naturalWidth > 0 ? pic : null;
+}
+
+/** What the card is filled with under its preview: a calculator's light grey, a label's bar grey, a conversion's page. */
+function cardFill(type: TileType, pic: ImageLike | null, info: LinkInfo | undefined): string {
+  if (pic) return type === 'concalc' ? TILE.paper : type === 'label' ? TILE.bar : TILE.card;
+  return type === 'conversion' && info?.text ? CONV.page : TILE.card;
+}
+
 function drawCard(c: DrawCtx, b: LinkBox, n: Note, o: LinkDrawOpts): void {
-  const k = b.k, t = n.link!, info = o.info, gone = info?.exists === false, glyph = glyphOf(n, info);
+  const k = b.k, t = n.link!, info = o.info, gone = info?.exists === false, type = tileTypeOf(n, info);
+  const pic = pictureOf(b, n, info), picture = !!pic && (type === 'image' || type === 'sketch');
+  const withBar = !picture && b.lod !== 'compact';
+  // the bar's scale within the card's: one size on the screen (BAR_K)
+  const u = BAR_K / k, r = cornerOf(k);
   c.save();
   c.translate(b.x, b.y);
   c.scale(k, k);
-  rr(c, 0, 0, L, L, R);
+  rr(c, 0, 0, L, L, r);
   // selected: a yellow ring round the card's edge, the same 3 pt at any size — stroked twice as wide on the card's own
   // outline before it's filled, so the card covers the inside half (and no new shape is made as it zooms)
   if (o.selected) { c.lineWidth = screenW(2 * SELECT_W, k); c.strokeStyle = TH.yellow; c.stroke(); }
-  c.fillStyle = gone ? TH.chip : TH.badge; c.fill();
-  if (!o.selected) { c.lineWidth = screenW(1, k); c.strokeStyle = TH.badgeline; c.stroke(); }
-  // (its picture asked for only near the screen: a drawing can link more than are kept)
-  const near = b.x < cvs.W * 2 && b.y < cvs.H * 2 && b.x + b.s > -cvs.W && b.y + b.s > -cvs.H;
-  const pic = near && !gone && t.kind === 'file' && info?.thumbUrl ? linkThumb(info.thumbUrl) : null, shown = pic && pic.complete && pic.naturalWidth > 0;
-  // a photo is its picture, edge to edge — it says what it is (until it's loaded: its icon and name, as any file)
-  const photo = shown && glyph === 'photo';
-  if (photo) cover(c, pic, 0, 0, L, L, R);
-  else if (b.lod === 'compact') {
-    // the picture or the icon alone
-    if (shown) cover(c, pic, 6, 6, L - 12, L - 12, R - 4);
-    else drawGlyph(c, glyph, L / 2, L / 2, 46, TH.ink2);
-  } else if (t.kind === 'measurement' && !gone) {
-    // its value, and its name
-    drawGlyph(c, 'tape', 18, 17, 18, TH.ink2);
-    const value = info?.text ?? t.text ?? '—';
-    c.font = '700 18px ' + FONT; c.fillStyle = TH.blue; c.textAlign = 'center'; c.textBaseline = 'middle';
-    c.fillText(fit(c, value, L - 12), L / 2, 46);
-    drawName(c, k, info?.name ?? t.name ?? 'Measurement', 75, L - 14, TH.ink2, false);
-  } else if (gone) {
-    // the removed mark, and what it was
-    drawGlyph(c, glyph, L / 2, 30, 28, TH.ink2);
-    c.font = '700 11px ' + FONT; c.fillStyle = TH.ink2; c.textAlign = 'center'; c.textBaseline = 'middle';
-    c.fillText('Removed', L / 2, 58);
-    drawName(c, k, t.name ?? (t.kind === 'file' ? 'File' : 'Measurement'), 79, L - 12, TH.ink2, false);
+  c.fillStyle = cardFill(type, pic, gone ? undefined : info); c.fill();
+  // everything else within the card's edge: one clip, to the outline just filled (kept as it is, on a device)
+  c.clip();
+
+  if (picture) cover(c, pic!, 0, 0, L, L);
+  else if (!withBar) {
+    // small: the picture or the badge alone
+    if (pic) cover(c, pic, 0, 0, L, L);
+    else drawBadge(c, type, L / 4, L / 4, L / 2, gone ? TILE.line : undefined);
   } else {
-    // its picture or icon above, its name below
-    if (shown) cover(c, pic, 6, 6, L - 12, 62, R - 4);
+    drawPreview(c, type, pic, u, gone, gone ? undefined : info, t.text);
+    drawBar(c, u, k, type, gone, info?.name ?? t.name ?? (t.kind === 'file' ? 'File' : 'Measurement'));
+  }
+
+  // a grey hairline inside its edge, 1 px on the screen (the clip keeps the inside half of a line twice that); selected,
+  // the bar keeps its own inside the ring
+  if (!o.selected || withBar) {
+    if (o.selected) { c.save(); clipToBar(c, u, true); }
+    rr(c, 0, 0, L, L, r);
+    c.lineWidth = screenW(2, k); c.strokeStyle = TILE.line; c.stroke();
+    if (o.selected) c.restore();
+  }
+  c.restore();
+}
+
+/**
+ * Where a picture goes that isn't simply the whole card (Figma's frame, at its 120): a label as tall as the card, its
+ * foot under the bar, on the bar's grey, as the label printer shows it — kept whole within 8 of the card's sides; a
+ * calculator's diagram nine tenths of the card across, on light grey, its top cut off where the frame cuts it and its
+ * foot just above the bar. Each is a picture placed whole in that box, so the frame's own (a portrait label, a
+ * near-square diagram) land exactly there.
+ */
+const LABEL_BOX = [8 * F, 3.45 * F, L - 16 * F, 112 * F] as const;
+const CALC_BOX = [6.244 * F, -8.956 * F, 107.984 * F, 106.86 * F] as const;
+
+/**
+ * A label's box with the bar at `u`: the frame's, and on a card past the 144 tile, where the bar is less of it than the
+ * frame's, as much further down as keeps its foot as far under the bar as the frame's (23.45 of its 28).
+ */
+const labelBox = (u: number): readonly [number, number, number, number] =>
+  u >= 1 ? LABEL_BOX : [LABEL_BOX[0], LABEL_BOX[1], LABEL_BOX[2], L - 4.55 * F * u - LABEL_BOX[1]];
+
+/**
+ * What the object looks like, above its bar (drawn at scale `u` within the card's): its picture over the whole card (a
+ * label's and a calculator's placed whole, as LABEL_BOX and CALC_BOX), a note's text, a conversion's screen, a
+ * measurement's value (`was`: as it was when linked, till the host says) — or, with none of those, its badge, larger,
+ * in the middle: one size on the screen, as the bar's, but never more than three quarters of what's above the bar (so
+ * smaller on a card under about 98 across). Removed: says so.
+ *
+ * A label, a calculator's diagram and a conversion's screen are laid out as the frame has them over its bar. On a card
+ * under the 144 tile (BAR_K) the bar is more of the card than the frame's, so that layout is drawn smaller, to fit
+ * what's above this bar as the frame's fits what's above its own: the diagram's foot and the screen's second unit stay
+ * in sight, and a label's foot as far under the bar.
+ */
+function drawPreview(c: DrawCtx, type: TileType, pic: ImageLike | null, u: number, gone: boolean, info: LinkInfo | undefined, was?: string): void {
+  const foot = L - FOOT_H * u, mid = foot / 2;
+  if (gone) {
+    c.font = '500 ' + 11 * F + 'px ' + TILE_FONT; c.fillStyle = TILE.quiet; c.textAlign = 'center'; c.textBaseline = 'middle';
+    c.fillText('Removed', L / 2, mid);
+    return;
+  }
+  if (pic || (type === 'conversion' && info?.text)) {
+    // above the bar only: in Draft a tile is drawn see-through, and what's under the bar would show through it
+    c.save();
+    clipToBar(c, u, false);
+    if (pic && type !== 'label' && type !== 'concalc') cover(c, pic, 0, 0, L, L);
     else {
-      const a = c.globalAlpha;
-      rr(c, 6, 6, L - 12, 62, R - 4);
-      c.fillStyle = TH.chip; c.globalAlpha = a * 0.5; c.fill(); c.globalAlpha = a;
-      drawGlyph(c, glyph, L / 2, 37, 34, TH.ink2);
+      // (the frame's layout above its bar, in what's above this one: from its top middle)
+      const s = Math.min(1, foot / (L - FOOT_H));
+      if (s < 1) { c.translate(L / 2, 0); c.scale(s, s); c.translate(-L / 2, 0); }
+      if (!pic) drawConversion(c, info!.text!);
+      else contain(c, pic, ...(type === 'label' ? labelBox(u) : CALC_BOX));
     }
-    drawName(c, k, info?.name ?? t.name ?? 'File', 81, L - 12, TH.ink, true);
+    c.restore();
+    return;
   }
+  if (type === 'note' && info?.text) { drawNoteText(c, info.text, foot); return; }
+  if (type === 'measurement') {
+    c.font = '700 ' + 22 * F + 'px ' + TILE_FONT; c.fillStyle = TILE.name; c.textAlign = 'center'; c.textBaseline = 'middle';
+    c.fillText(fit(c, info?.text ?? was ?? '—', L - 16 * F), L / 2, mid);
+    return;
+  }
+  // (the frame's 40, one size on the screen as the bar's badge is, and as much bigger than the frame's: no bigger than
+  // three quarters of what's above the bar — drawn at 40 and scaled, so its shapes are the same at every step of a pinch)
+  const s = 40 * F, q = Math.min(u, (0.75 * foot) / s);
+  c.save();
+  c.translate(L / 2, mid); c.scale(q, q);
+  drawBadge(c, type, -s / 2, -s / 2, s);
+  c.restore();
+}
+
+/**
+ * The bar along the card's foot (Figma: 28 tall, General/Grey - 2, a Grey - 3 hairline along its top), drawn at its own
+ * scale `u` within the card's (one size on the screen: BAR_K), anchored at the card's foot: its badge, then the name —
+ * white, Medium, on one line, cut short with an ellipsis. Once the object's gone, a grey badge.
+ */
+function drawBar(c: DrawCtx, u: number, k: number, type: TileType, gone: boolean, name: string): void {
+  c.save();
+  c.translate(0, L); c.scale(u, u); c.translate(0, -L);
+  const W = L / u, top = L - FOOT_H;
+  c.fillStyle = TILE.bar; c.fillRect(0, top, W, FOOT_H);
+  c.fillStyle = TILE.line; c.fillRect(0, top, W, screenW(1, k * u));
+  drawBadge(c, type, BADGE_IN, top + BADGE_IN, BADGE, gone ? TILE.line : undefined);
+  c.font = '500 ' + NAME_PX + 'px ' + TILE_FONT; c.fillStyle = TILE.name; c.textAlign = 'left'; c.textBaseline = 'alphabetic';
+  c.fillText(fitName(c, name, W - NAME_X - NAME_END), NAME_X, top + NAME_BASE);
   c.restore();
 }
 
-/** Far out, a tile is a pin: a small fixed-size card with its icon. */
+/**
+ * A note's text over the card, as its editor shows it (Figma's preview: white on Grey - 1, about 9 to the 120 tile): a
+ * line every 13.5, and 4.25 more where a new block starts (the editor's half-em paragraph margin; the host marks one
+ * with a blank line). Each of the host's lines wraps to the card's width at its spaces. A line the host starts with
+ * "• " is a list item, a dot before it, and one it starts with a number ("1. ") a numbered item, the number before it
+ * (as the editor numbers them, and the job's own tile): its text further in, and so are its lines after the first. As
+ * many lines as fit above the bar.
+ */
+const NOTE_PX = 9 * F, NOTE_LINE = 13.5 * F, NOTE_GAP = 4.25 * F, NOTE_X = 8.75 * F, NOTE_FIRST = 17.25 * F;
+const NOTE_DOT_X = 14 * F, NOTE_DOT_R = 1.7 * F, NOTE_ITEM_X = 22.25 * F;
+/** where a number ends: a third of the type's size before its item's text */
+const NOTE_NUM_END = NOTE_ITEM_X - 3 * F;
+function drawNoteText(c: DrawCtx, text: string, foot: number): void {
+  c.font = '400 ' + NOTE_PX + 'px ' + TILE_FONT; c.fillStyle = TILE.name; c.textBaseline = 'alphabetic';
+  let y = NOTE_FIRST - NOTE_LINE;
+  for (const { text: line, x, mark, gap } of noteRows(c, text)) {
+    y += NOTE_LINE + (gap ? NOTE_GAP : 0);
+    if (y > foot - 4 * F) break;
+    if (mark === '•') {
+      // (its dot on the line's x-height middle, kept as the badges are)
+      dot(c, NOTE_DOT_X, y - NOTE_PX * 0.33, NOTE_DOT_R);
+      c.fill();
+    } else if (mark) { c.textAlign = 'right'; c.fillText(mark, NOTE_NUM_END, y); }
+    c.textAlign = 'left';
+    c.fillText(line, x, y);
+  }
+}
+/** A dot's path (kept, one a size). */
+function dot(c: DrawCtx, x: number, y: number, r: number): void {
+  if (c.shape) c.shape('dot ' + r, x - r, y - r, (cc, X, Y) => { cc.beginPath(); cc.arc(X + r, Y + r, r, 0, Math.PI * 2); });
+  else { c.beginPath(); c.arc(x, y, r, 0, Math.PI * 2); }
+}
+
+/**
+ * A note's text as the host's lines: each with its mark ("•" for a list item, its number for a numbered one) and
+ * whether a new block starts there (a blank line before it, left out itself) — at most NOTE_LINES, each no longer than
+ * NOTE_CHARS (more than a card shows of one: it's only wrapped as far as that). Split once for each text.
+ */
+const NOTE_LINES = 12, NOTE_CHARS = 400;
+const NUMBERED = /^(\d{1,3}\.)\s+/;
+interface NoteLine { text: string; mark?: string; gap: boolean }
+const lineCache = new Map<string, NoteLine[]>();
+function noteLines(text: string): NoteLine[] {
+  let lines = lineCache.get(text);
+  if (!lines) {
+    lines = [];
+    let gap = false;
+    for (const raw of text.split(/\r?\n/)) {
+      const l = raw.trim();
+      if (!l) { gap = lines.length > 0; continue; }
+      if (lines.length >= NOTE_LINES) break;
+      const num = NUMBERED.exec(l), mark = l.startsWith('• ') ? '•' : num?.[1];
+      const s = mark === '•' ? l.slice(2).trim() : num ? l.slice(num[0].length) : l;
+      lines.push({ text: s.length > NOTE_CHARS ? Array.from(s).slice(0, NOTE_CHARS).join('') : s, mark, gap });
+      gap = false;
+    }
+    if (lineCache.size > 500) lineCache.clear();
+    lineCache.set(text, lines);
+  }
+  return lines;
+}
+
+/**
+ * The lines a note's card shows: the host's, each wrapped to the card's width (at most NOTE_LINES in all), an item's
+ * mark on its first. A note's lines are the same width at every zoom: wrapped once for each text, at each font (one
+ * that arrives later wraps it again: watchFonts).
+ */
+interface NoteRow { text: string; x: number; mark?: string; gap: boolean }
+const rowCache = new Map<string, NoteRow[]>();
+function noteRows(c: DrawCtx, text: string): NoteRow[] {
+  const key = c.font + '|' + text;
+  let rows = rowCache.get(key);
+  if (rows) return rows;
+  rows = [];
+  for (const { text: line, mark, gap } of noteLines(text)) {
+    const x = mark ? NOTE_ITEM_X : NOTE_X;
+    wrap(c, line, L - NOTE_X - x, NOTE_LINES - rows.length).forEach((t, i) => rows!.push({ text: t, x, mark: i ? undefined : mark, gap: !i && gap }));
+    if (rows.length >= NOTE_LINES) break;
+  }
+  if (rowCache.size > 500) rowCache.clear();
+  rowCache.set(key, rows);
+  return rows;
+}
+
+/** `text` as at most `room` lines no wider than `maxW` at the current font, broken at its spaces (a word wider than a line, cut short). */
+function wrap(c: DrawCtx, text: string, maxW: number, room: number): string[] {
+  const out: string[] = [];
+  let line = '';
+  for (const word of text.split(/\s+/)) {
+    if (!word || out.length >= room) continue;
+    const next = line ? line + ' ' + word : word;
+    if (c.measureText(next).width <= maxW) { line = next; continue; }
+    if (line) out.push(line);
+    line = '';
+    if (c.measureText(word).width <= maxW) line = word;
+    else if (out.length < room) out.push(fit(c, word, maxW));
+  }
+  if (line && out.length < room) out.push(line);
+  return out;
+}
+
+/**
+ * A conversion as its screen shows it — Figma's preview is that screen, its top cut to the card (657:8990): the unit
+ * it's from on a grey header, what was typed under it (the field's INPUT, with nothing), the swap button, and the unit
+ * it's to on a blue header, the result's grey below. `text` is the host's: the two units' names, a line each, then the
+ * value typed, if any. Measured at the 120 tile from the frame's screenshot; the colours are BOLDR's palette, as the
+ * screen's are (General/Dark Grey, Grey - 1, Grey - 2, Grey - 4; Secondary/Accent Blue - 2 and - 3).
+ */
+const CONV = { page: '#181A1C', result: '#2B2C2E', head: '#424345', to: '#4B6074', chipLine: '#2E4C6A', hint: '#9FA0A2' } as const;
+/** its column (the screen's sides, 4.27 in), the headers' tops and height, the field's foot, the corners (8 pt) */
+const CV_X = 4.27 * F, CV_W = 111.46 * F, CV_FROM = 4.48 * F, CV_HEAD = 13.13 * F, CV_FIELD = 66.16 * F;
+const CV_TO = 69.21 * F, CV_RESULT = 82.04 * F, CV_R = 2.44 * F;
+/**
+ * the units' names: Semibold 16 pt, 21 pt in from the header's side; the value: Regular 32 pt, its ink 14 pt in from the
+ * field's (the screenshot's, both: the screen's code says 24); the swap button: 52 pt, its line 2 pt
+ */
+const CV_NAME_PX = 4.885 * F, CV_NAME_X = 10.74 * F, CV_VALUE_PX = 9.77 * F, CV_VALUE_X = 7.55 * F, CV_VALUE_Y = 45.1 * F;
+const CV_CHIP = [52.11 * F, 59.75 * F, 15.88 * F] as const, CV_CHIP_LINE = 0.61 * F;
+/** the chevrons (16 pt, 21 pt in from the header's right, as the screenshot's) and the swap arrows (20 pt), Lucide's, drawn with their 2-in-24 line */
+const CV_CHEV = 4.885 * F, CV_CHEV_X = 104.45 * F, CV_ARROWS = 6.107 * F;
+
+function drawConversion(c: DrawCtx, text: string): void {
+  const [from = '', to = '', value = ''] = text.split('\n').map(s => s.trim());
+  const headMid = (top: number) => top + CV_HEAD / 2;
+  // each header, its top rounded, its foot under what's below it: the result's grey, the field
+  rr(c, CV_X, CV_TO, CV_W, CV_RESULT - CV_TO + CV_R, CV_R); c.fillStyle = CONV.to; c.fill();
+  c.fillStyle = CONV.result; c.fillRect(CV_X, CV_RESULT, CV_W, L - CV_RESULT);
+  rr(c, CV_X, CV_FROM, CV_W, CV_HEAD + CV_R, CV_R); c.fillStyle = CONV.head; c.fill();
+  // the field: the page's dark, a Grey - 2 line round it (1 pt)
+  const fieldTop = CV_FROM + CV_HEAD, line = 0.305 * F;
+  c.fillStyle = CONV.page; c.fillRect(CV_X, fieldTop, CV_W, CV_FIELD - fieldTop);
+  c.lineWidth = line; c.strokeStyle = CONV.head; c.strokeRect(CV_X + line / 2, fieldTop, CV_W - line, CV_FIELD - fieldTop - line / 2);
+  // the units, white, and what was typed (or the field's hint)
+  c.textAlign = 'left'; c.textBaseline = 'middle'; c.fillStyle = TILE.name;
+  c.font = '600 ' + CV_NAME_PX + 'px ' + TILE_FONT;
+  c.fillText(fit(c, from, CV_CHEV_X - CV_NAME_X - 2 * F), CV_NAME_X, headMid(CV_FROM));
+  c.fillText(fit(c, to, CV_CHEV_X - CV_NAME_X - 2 * F), CV_NAME_X, headMid(CV_TO));
+  c.font = '400 ' + CV_VALUE_PX + 'px ' + TILE_FONT; c.textBaseline = 'alphabetic';
+  c.fillStyle = value ? TILE.name : CONV.hint;
+  c.fillText(fit(c, value || 'INPUT', CV_X + CV_W - CV_VALUE_X - 2 * F), CV_VALUE_X, CV_VALUE_Y);
+  // each header's chevron, and the swap button over where the two meet
+  c.lineCap = 'round'; c.lineJoin = 'round'; c.strokeStyle = TILE.name; c.lineWidth = (2 * CV_CHEV) / 24;
+  for (const top of [CV_FROM, CV_TO]) { icon(c, 'conv chevron', CHEVRON, CV_CHEV_X, headMid(top) - CV_CHEV / 2, CV_CHEV); c.stroke(); }
+  const [cx, cy, cs] = CV_CHIP;
+  rr(c, cx, cy, cs, cs, CV_R); c.fillStyle = CONV.chipLine; c.fill();
+  rr(c, cx + CV_CHIP_LINE, cy + CV_CHIP_LINE, cs - 2 * CV_CHIP_LINE, cs - 2 * CV_CHIP_LINE, CV_R - CV_CHIP_LINE); c.fillStyle = CONV.to; c.fill();
+  c.lineWidth = (2 * CV_ARROWS) / 24;
+  icon(c, 'conv arrows', ARROWS, cx + (cs - CV_ARROWS) / 2, cy + (cs - CV_ARROWS) / 2, CV_ARROWS); c.stroke();
+}
+
+/** Lucide's chevron-down and arrow-up-down, as polylines on their 24 grid. */
+const CHEVRON: number[][] = [[6, 9, 12, 15, 18, 9]];
+const ARROWS: number[][] = [[21, 16, 17, 20, 13, 16], [17, 20, 17, 4], [3, 8, 7, 4, 11, 8], [7, 4, 7, 20]];
+/** An icon's path (polylines on a 24 grid), `size` across with its top left at x, y: kept, one a size. */
+function icon(c: DrawCtx, key: string, lines: number[][], x: number, y: number, size: number): void {
+  const s = size / 24;
+  const draw = (cc: DrawCtx, X: number, Y: number) => {
+    cc.beginPath();
+    for (const p of lines) {
+      cc.moveTo(X + p[0] * s, Y + p[1] * s);
+      for (let i = 2; i < p.length; i += 2) cc.lineTo(X + p[i] * s, Y + p[i + 1] * s);
+    }
+  };
+  if (c.shape) c.shape(key + ' ' + size, x, y, draw);
+  else draw(c, x, y);
+}
+
+/** Far out, a tile is a pin: its badge, a fixed size, ringed when it's selected (a picture's: the camera's or sketch's). */
 function drawPin(c: DrawCtx, b: LinkBox, n: Note, o: LinkDrawOpts): void {
-  const s = LINK_PIN_PX;
-  rr(c, b.cx - s / 2, b.cy - s / 2, s, s, 6);
-  // (selected: ringed round its edge, as a card is)
-  if (o.selected) { c.lineWidth = 2 * SELECT_W; c.strokeStyle = TH.yellow; c.stroke(); }
-  c.fillStyle = o.info?.exists === false ? TH.chip : TH.badge; c.fill();
-  if (!o.selected) { c.lineWidth = 1; c.strokeStyle = TH.badgeline; c.stroke(); }
-  drawGlyph(c, glyphOf(n, o.info), b.cx, b.cy, 14, TH.ink2);
+  const s = LINK_PIN_PX, x = b.cx - s / 2, y = b.cy - s / 2, gone = o.info?.exists === false;
+  if (o.selected) {
+    rr(c, x, y, s, s, (6 * s) / 20);
+    c.lineWidth = 2 * SELECT_W; c.strokeStyle = TH.yellow; c.stroke();
+  }
+  drawBadge(c, tileTypeOf(n, o.info), x, y, s, gone ? TILE.line : undefined);
 }
 
-/** A picture filling the rounded rectangle x, y, w, h (its middle shown, its sides cut off). */
-function cover(c: DrawCtx, im: ImageLike, x: number, y: number, w: number, h: number, r: number): void {
+/** A picture filling x, y, w, h (its middle shown, its sides cut off: by the card's edge, which the card has clipped to). */
+function cover(c: DrawCtx, im: ImageLike, x: number, y: number, w: number, h: number): void {
   const iw = im.naturalWidth, ih = im.naturalHeight || 1, k = Math.max(w / iw, h / ih), dw = iw * k, dh = ih * k;
-  c.save();
-  rr(c, x, y, w, h, r);
-  c.clip();
   c.drawImage(im, x + (w - dw) / 2, y + (h - dh) / 2, dw, dh);
-  c.restore();
+}
+
+/** A picture whole within x, y, w, h, in its middle. */
+function contain(c: DrawCtx, im: ImageLike, x: number, y: number, w: number, h: number): void {
+  const iw = im.naturalWidth, ih = im.naturalHeight || 1, k = Math.min(w / iw, h / ih), dw = iw * k, dh = ih * k;
+  c.drawImage(im, x + (w - dw) / 2, y + (h - dh) / 2, dw, dh);
 }
 
 /*
-  A name grows with its card until it's NAME_MAX_PX on the screen; past that it stays that size, and the card, wider on
-  the screen as it's zoomed in, shows more of it — in the end all of it: on two even lines once two show the whole of it
-  (the strip under a picture always has the room by then), and on one once one does. Each name is measured once, at
-  each of its two sizes: laying it out again at another width, every step of a pinch, measures nothing.
+  A name is one size on the screen, as the bar it's on is; the card, wider on the screen as it's zoomed in, shows more
+  of it. Each name is measured once: fitting it again at another width, every step of a pinch, measures nothing.
 */
-const NAME_PX = 11, NAME_MAX_PX = 14, NAME_LINE = 1.25;
 
 /** A name's prefixes' widths at a font (w[i]: its first i characters), and an ellipsis's. */
 const prefixes = new Map<string, { w: number[]; ell: number }>();
@@ -150,83 +502,19 @@ function widthsOf(c: DrawCtx, text: string): { w: number[]; ell: number } {
   return p;
 }
 
+/** Where to cut `text` at `i` without parting a character in two (an emoji's surrogate pair): there, or one before. */
+const cutAt = (text: string, i: number): number => (i > 0 && (text.charCodeAt(i - 1) & 0xfc00) === 0xd800 ? i - 1 : i);
+
 /** The most of `text` that fits `maxW` at the current font: all of it, or its start and an ellipsis. */
 export function fitName(c: DrawCtx, text: string, maxW: number): string {
   const { w, ell } = widthsOf(c, text), n = text.length;
   if (w[n] <= maxW) return text;
   let lo = 0, hi = n;
   while (lo < hi) { const mid = (lo + hi + 1) >> 1; if (w[mid] + ell <= maxW) lo = mid; else hi = mid - 1; }
-  return text.slice(0, lo).trimEnd() + '…';
-}
-
-/**
- * Where a name breaks onto two lines: at the space nearest half its width (with none, after the _ - . or / nearest it;
- * with none of those, halfway across), so the two are even — and the same however wide its tile, so zooming never
- * moves the break. `width`: the wider of the two lines.
- */
-const splits = new Map<string, { cut: number; next: number; width: number }>();
-function splitOf(c: DrawCtx, text: string): { cut: number; next: number; width: number } {
-  const key = c.font + '|' + text;
-  let sp = splits.get(key);
-  if (sp) return sp;
-  const { w } = widthsOf(c, text), n = text.length, total = w[n];
-  sp = { cut: 0, next: 0, width: Infinity };
-  for (let i = 1; i < n - 1; i++) {
-    if (text[i] !== ' ') continue;
-    const width = Math.max(w[i], total - w[i + 1]);
-    if (width < sp.width) sp = { cut: i, next: i + 1, width };
-  }
-  // (no space, as a file's name often has none: after a _ - . or /, which stays on the first line)
-  if (!sp.cut) for (let i = 2; i < n - 1; i++) {
-    if (!'_-./'.includes(text[i - 1])) continue;
-    const width = Math.max(w[i], total - w[i]);
-    if (width < sp.width) sp = { cut: i, next: i, width };
-  }
-  if (!sp.cut) {
-    let i = 1;
-    while (i < n - 1 && w[i] < total / 2) i++;
-    sp = { cut: i, next: i, width: Math.max(w[i], total - w[i]) };
-  }
-  if (splits.size > 1000) splits.clear();
-  splits.set(key, sp);
-  return sp;
-}
-
-/** All of `text` on two lines `maxW` wide, evenly (see splitOf); null if one line takes it, or two can't. */
-export function twoLines(c: DrawCtx, text: string, maxW: number): [string, string] | null {
-  const n = text.length;
-  if (n < 2 || widthsOf(c, text).w[n] <= maxW) return null;
-  const sp = splitOf(c, text);
-  return sp.width <= maxW ? [text.slice(0, sp.cut).trimEnd(), text.slice(sp.next).trimStart()] : null;
-}
-
-/**
- * A name on card `k` (its scale from the layout), centred on `y` and at most `maxW` wide in the layout: the layout's
- * size until that's NAME_MAX_PX on the screen; past it, that size on the screen (drawn at the screen's own scale, so one
- * font does), showing more of the name as the card grows — and with `wrap`, on two lines once two show all of it.
- */
-function drawName(c: DrawCtx, k: number, text: string, y: number, maxW: number, color: string, wrap: boolean): void {
-  c.fillStyle = color; c.textAlign = 'center'; c.textBaseline = 'middle';
-  if (NAME_PX * k <= NAME_MAX_PX) {
-    c.font = '600 ' + NAME_PX + 'px ' + FONT;
-    c.fillText(fitName(c, text, maxW), L / 2, y);
-    return;
-  }
-  c.save();
-  c.scale(1 / k, 1 / k);
-  c.font = '600 ' + NAME_MAX_PX + 'px ' + FONT;
-  const W = maxW * k, x = (L / 2) * k, one = fitName(c, text, W);
-  const two = wrap && one !== text ? twoLines(c, text, W) : null;
-  if (two) {
-    // (centred in the strip under the picture: from 68 to the card's foot)
-    const h = NAME_MAX_PX * NAME_LINE, mid = 82 * k;
-    c.fillText(two[0], x, mid - h / 2);
-    c.fillText(two[1], x, mid + h / 2);
-  } else c.fillText(one, x, y * k);
-  c.restore();
+  return text.slice(0, cutAt(text, lo)).trimEnd() + '…';
 }
 
-/** Names cut to fit, by font, width and text: measured once, not every frame. */
+/** Text cut to fit, by font, width and text: measured once, not every frame. */
 const fitted = new Map<string, string>();
 function fit(c: DrawCtx, text: string, maxW: number): string {
   const key = c.font + '|' + maxW + '|' + text;
@@ -236,62 +524,20 @@ function fit(c: DrawCtx, text: string, maxW: number): string {
   if (c.measureText(text).width > maxW) {
     let lo = 0, hi = text.length;
     while (lo < hi) { const mid = (lo + hi + 1) >> 1; if (c.measureText(text.slice(0, mid) + '…').width <= maxW) lo = mid; else hi = mid - 1; }
-    out = text.slice(0, lo).trimEnd() + '…';
+    out = text.slice(0, cutAt(text, lo)).trimEnd() + '…';
   }
   if (fitted.size > 1000) fitted.clear();
   fitted.set(key, out);
   return out;
 }
 
-/** A glyph's parts on a 24-unit square: what's stroked (dashed, then solid), what's filled, and a word. */
-interface GlyphDraw { dashed?: (c: DrawCtx) => void; stroke?: (c: DrawCtx) => void; fill?: (c: DrawCtx) => void; text?: string }
-
-const page = (c: DrawCtx, fold: boolean) => {
-  c.moveTo(6, 3); c.lineTo(fold ? 14 : 18, 3);
-  if (fold) c.lineTo(18, 7);
-  c.lineTo(18, 21); c.lineTo(6, 21); c.closePath();
-  if (fold) { c.moveTo(14, 3); c.lineTo(14, 7); c.lineTo(18, 7); }
-};
-const rules = (c: DrawCtx, ys: number[]) => { for (const y of ys) { c.moveTo(9, y); c.lineTo(15, y); } };
-const dots = (c: DrawCtx, at: [number, number][], r: number) => { for (const [x, y] of at) { c.moveTo(x + r, y); c.arc(x, y, r, 0, Math.PI * 2); } };
-
-const GLYPHS: Record<Glyph, GlyphDraw> = {
-  photo: {
-    stroke: c => { c.roundRect(3, 5, 18, 14, 2); c.moveTo(5, 17); c.lineTo(10, 11); c.lineTo(13, 14); c.lineTo(15, 12); c.lineTo(19, 17); },
-    fill: c => dots(c, [[16, 9]], 1.6),
-  },
-  pdf: { stroke: c => page(c, true), text: 'PDF' },
-  note: { stroke: c => { page(c, false); rules(c, [8, 12, 16]); } },
-  calculator: {
-    stroke: c => { c.roundRect(5, 3, 14, 18, 2); c.moveTo(8, 7); c.lineTo(16, 7); },
-    fill: c => dots(c, [11.5, 15, 18.5].flatMap(y => [8.5, 12, 15.5].map(x => [x, y] as [number, number])), 0.9),
-  },
-  label: {
-    stroke: c => { c.moveTo(4, 8); c.lineTo(14, 8); c.lineTo(20, 12); c.lineTo(14, 16); c.lineTo(4, 16); c.closePath(); },
-    fill: c => dots(c, [[14, 12]], 1.2),
-  },
-  drawing: { stroke: c => { page(c, false); c.moveTo(9, 17); c.lineTo(15.5, 8.5); } },
-  tape: { stroke: c => { c.roundRect(2.5, 8, 19, 8, 1.5); for (const x of [6, 9, 12, 15, 18]) { c.moveTo(x, 8); c.lineTo(x, x === 12 ? 12.5 : 11); } } },
-  removed: { dashed: c => page(c, false), stroke: c => { c.moveTo(4, 20); c.lineTo(20, 4); } },
-  document: { stroke: c => { page(c, true); rules(c, [12, 16]); } },
-};
-
-/** A glyph part's path: kept as a shape where the engine can (a tile's icon is drawn every frame, the same each time). */
-function part(c: DrawCtx, key: string, draw: (c: DrawCtx) => void): void {
-  if (c.shape) c.shape(key, 0, 0, cc => draw(cc));
-  else { c.beginPath(); draw(c); }
-}
-
-/** An icon for kind `g`, `size` across, centred on cx, cy (paths: the canvas can't draw the chrome's SVG icons). */
-function drawGlyph(c: DrawCtx, g: Glyph, cx: number, cy: number, size: number, color: string): void {
-  const u = size / 24, d = GLYPHS[g];
-  c.save();
-  c.translate(cx - size / 2, cy - size / 2);
-  c.scale(u, u);
-  c.strokeStyle = color; c.fillStyle = color; c.lineWidth = 1.8; c.lineCap = 'round'; c.lineJoin = 'round';
-  if (d.dashed) { c.setLineDash([2.2, 2]); part(c, 'glyph- ' + g, d.dashed); c.stroke(); c.setLineDash([]); }
-  if (d.stroke) { part(c, 'glyph| ' + g, d.stroke); c.stroke(); }
-  if (d.fill) { part(c, 'glyph. ' + g, d.fill); c.fill(); }
-  if (d.text) { c.font = '700 6px ' + FONT; c.textAlign = 'center'; c.textBaseline = 'middle'; c.fillText(d.text, 12, 15); }
-  c.restore();
+/**
+ * In a browser, a font can arrive after a tile's text was measured in another (Inter, still loading, the first time a
+ * page draws): measured again once it has. (A device draws in the fonts it's given.)
+ */
+let watchingFonts = false;
+function watchFonts(): void {
+  watchingFonts = true;
+  const fonts = typeof document !== 'undefined' ? document.fonts : undefined;
+  fonts?.addEventListener?.('loadingdone', () => { prefixes.clear(); fitted.clear(); rowCache.clear(); requestDraw(); });
 }