@reekon-tools/boldr-cad 1.3.0 → 1.5.0

package/dist/render/linkTile.js

@@ -2,10 +2,14 @@ import { LINK_PIN_PX, LINK_TILE_PX } from '../model/links';
 import { noteLook } from '../model/markup';
 import { strokeMarkup } from './markup';
 import { smoothRectPath } from './squircle';
+import { drawSvgIcon, svgIcon } from './svgPath';
 import { FONT, TH } from './theme';
-import { cvs, leaderPath, linkBox, linkThumb } 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 } from './view';
 /** Draw tile `n` and its leader. */
 export function drawLink(c, T, n, o) {
+    if (!watchingFonts)
+        watchFonts();
     const b = linkBox(T, n), lp = leaderPath(T, n, b);
     c.save();
     c.globalAlpha = o.alpha;
@@ -23,8 +27,42 @@ export function drawLink(c, T, n, o) {
  * (within a fifth of `px`): a pinch draws with the same few paints, on a device, not a new one at every step.
  */
 const screenW = (px, k) => 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) => (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' };
 /** A rounded rectangle's path, one shape for each size (as draw.ts's rr: kept by an engine that can). */
 function rr(c, x, y, w, h, r) {
     if (c.shape)
@@ -32,20 +70,93 @@ function rr(c, x, y, w, h, r) {
     else
         smoothRectPath(c, x, y, w, h, r);
 }
-const glyphOf = (n, info) => {
-    if (info?.exists === false)
-        return 'removed';
+/**
+ * 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, u, bar) {
+    // (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, X, Y) => {
+        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);
+}
+/** The host's kind of file (LinkInfo.fileType) as a tile type: a PDF or anything unknown is a file. */
+export function tileTypeOf(n, info) {
     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';
+        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';
+    }
+}
+const badge = (hue, svg, key, x, y, size) => ({ hue, icon: svgIcon(svg), key, x, y, size });
+export const BADGES = {
+    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, t, x, y, size, hue) {
+    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, n, info) {
+    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, pic, info) {
+    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, b, n, o) {
-    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) {
@@ -53,100 +164,371 @@ function drawCard(c, b, n, o) {
         c.strokeStyle = TH.yellow;
         c.stroke();
     }
-    c.fillStyle = gone ? TH.chip : TH.badge;
+    c.fillStyle = cardFill(type, pic, gone ? undefined : info);
     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);
+    // 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
-            drawGlyph(c, glyph, L / 2, L / 2, 46, TH.ink2);
+            drawBadge(c, type, L / 4, L / 4, L / 2, gone ? TILE.line : undefined);
+    }
+    else {
+        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();
     }
-    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.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];
+const CALC_BOX = [6.244 * F, -8.956 * F, 107.984 * F, 106.86 * F];
+/**
+ * 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) => 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, type, pic, u, gone, info, was) {
+    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(fit(c, value, L - 12), L / 2, 46);
-        drawName(c, k, info?.name ?? t.name ?? 'Measurement', 75, L - 14, TH.ink2, false);
+        c.fillText('Removed', L / 2, mid);
+        return;
     }
-    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;
+    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 {
+            // (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));
+        }
+        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('Removed', L / 2, 58);
-        drawName(c, k, t.name ?? (t.kind === 'file' ? 'File' : 'Measurement'), 79, L - 12, TH.ink2, false);
+        c.fillText(fit(c, info?.text ?? was ?? '—', L - 16 * F), L / 2, mid);
+        return;
     }
-    else {
-        // its picture or icon above, its name below
-        if (shown)
-            cover(c, pic, 6, 6, L - 12, 62, R - 4);
-        else {
-            const a = c.globalAlpha;
-            rr(c, 6, 6, L - 12, 62, R - 4);
-            c.fillStyle = TH.chip;
-            c.globalAlpha = a * 0.5;
+    // (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, u, k, type, gone, name) {
+    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();
+}
+/**
+ * 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, text, foot) {
+    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();
-            c.globalAlpha = a;
-            drawGlyph(c, glyph, L / 2, 37, 34, TH.ink2);
         }
-        drawName(c, k, info?.name ?? t.name ?? 'File', 81, L - 12, TH.ink, true);
+        else if (mark) {
+            c.textAlign = 'right';
+            c.fillText(mark, NOTE_NUM_END, y);
+        }
+        c.textAlign = 'left';
+        c.fillText(line, x, y);
     }
-    c.restore();
 }
-/** Far out, a tile is a pin: a small fixed-size card with its icon. */
+/** A dot's path (kept, one a size). */
+function dot(c, x, y, r) {
+    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+/;
+const lineCache = new Map();
+function noteLines(text) {
+    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;
+}
+const rowCache = new Map();
+function noteRows(c, text) {
+    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, text, maxW, room) {
+    const out = [];
+    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' };
+/** 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], 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, text) {
+    const [from = '', to = '', value = ''] = text.split('\n').map(s => s.trim());
+    const headMid = (top) => 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 = [[6, 9, 12, 15, 18, 9]];
+const ARROWS = [[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, key, lines, x, y, size) {
+    const s = size / 24;
+    const draw = (cc, X, Y) => {
+        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, b, n, o) {
-    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)
+    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();
     }
-    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);
+    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, im, x, y, w, h, r) {
+/** 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, im, x, y, w, h) {
     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, im, x, y, w, h) {
+    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();
 function widthsOf(c, text) {
@@ -163,6 +545,8 @@ function widthsOf(c, text) {
     prefixes.set(key, p);
     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, i) => (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, text, maxW) {
     const { w, ell } = widthsOf(c, text), n = text.length;
@@ -176,86 +560,9 @@ export function fitName(c, text, maxW) {
         else
             hi = mid - 1;
     }
-    return text.slice(0, lo).trimEnd() + '…';
+    return text.slice(0, cutAt(text, 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();
-function splitOf(c, text) {
-    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, text, maxW) {
-    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, k, text, y, maxW, color, wrap) {
-    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();
-}
-/** 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();
 function fit(c, text, maxW) {
     const key = c.font + '|' + maxW + '|' + text;
@@ -272,98 +579,21 @@ function fit(c, text, maxW) {
             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;
 }
-const page = (c, fold) => {
-    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, ys) => { for (const y of ys) {
-    c.moveTo(9, y);
-    c.lineTo(15, y);
-} };
-const dots = (c, at, r) => { for (const [x, y] of at) {
-    c.moveTo(x + r, y);
-    c.arc(x, y, r, 0, Math.PI * 2);
-} };
-const GLYPHS = {
-    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])), 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, key, draw) {
-    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, g, cx, cy, size, color) {
-    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() {
+    watchingFonts = true;
+    const fonts = typeof document !== 'undefined' ? document.fonts : undefined;
+    fonts?.addEventListener?.('loadingdone', () => { prefixes.clear(); fitted.clear(); rowCache.clear(); requestDraw(); });
 }
 //# sourceMappingURL=linkTile.js.map