ntk 8.13.1 → 8.14.0

package/lib/app.js

@@ -1,4 +1,5 @@
 import { connectionGone } from './cleanup.js';
+import { cssColor } from './color.js';
 import Clipboard from './clipboard.js';
 import { CursorCache } from './cursor.js';
 import {
@@ -147,6 +148,8 @@ export default class App {
     sharedGlyphsFor(this);
     this._cursors = null;
     this._solidPictures = new Map();
+    // the same pictures by the CSS colour that asked for them (solidPictureOf)
+    this._solidByName = new Map();
     this._rasterizer = undefined;
     this._shm = undefined;
     this._extensionPromises = new Map();
@@ -992,6 +995,26 @@ export default class App {
     return p;
   }
 
+  /**
+   * The solid picture a CSS colour string paints with. A UI sets the same few
+   * strings again on every paint — every box's background, every border —
+   * and the way to `solidPicture` is a parse, a premultiply and a key made of
+   * four numbers turned into text; by the string it is one lookup. Throws, as
+   * `fillStyle` always has, for a string that is not a colour.
+   */
+  solidPictureOf(value) {
+    let p = this._solidByName.get(value);
+    if (p !== undefined) return p;
+    const c = cssColor(value);
+    if (!c) throw new Error(`Not a color: ${JSON.stringify(value)}`);
+    p = this.solidPicture(c[0], c[1], c[2], c[3]);
+    // spellings are unbounded where solids are not: an app animating a
+    // colour writes a new string every frame
+    if (this._solidByName.size >= 1024) this._solidByName.clear();
+    this._solidByName.set(value, p);
+    return p;
+  }
+
   // flush pending requests and close the connection
   close() {
     if (this._cursors) {
@@ -1012,6 +1035,7 @@ export default class App {
       picture._sourcePixmap?.destroy();
     }
     this._solidPictures.clear();
+    this._solidByName.clear();
     // GPU contexts are shared by every direct GL surface on this connection
     // (see renderingcontext_gles.js), so they outlive individual contexts and
     // are the connection's to release. Each holds an EGL display, a GBM device

package/lib/cliprect.js

@@ -4,8 +4,19 @@
 // out of the paint that drew it. A box of a code block twenty thousand lines
 // tall in a scroll pane was one, filled as a rounded rectangle.
 //
-// Only what reaches past the rectangle is clipped: everything else goes out
-// as it came, so a drawing that fits is sent exactly as before.
+// Only what reaches past what the wire can carry is clipped (`WIRE_REACH`):
+// everything else goes out as it came, so a drawing that fits is sent exactly
+// as before.
+
+/**
+ * How far from a picture's origin a coordinate may reach and still be
+ * carried: half of what 16.16 fixed point and a 16-bit origin hold, so an
+ * offset the size of a surface on top of it still fits. Geometry within it
+ * goes to the server as it came, and the server clips it — cutting it here
+ * costs more than that, and a zoomed graph has hundreds of edges a little
+ * past the window every frame. Only geometry past it is cut.
+ */
+export const WIRE_REACH = 16384;
 
 /** Whether every point of a flat `[x, y, …]` list is inside the rectangle. */
 export function withinRect(pts, x0, y0, x1, y1) {

package/lib/color.js

@@ -42,6 +42,17 @@ function parseHex(value) {
   return [part(0) / 255, part(1) / 255, part(2) / 255, hasAlpha ? part(3) / 255 : 1];
 }
 
+// Each spelling is parsed once. A UI draws with a few dozen colours and sets
+// them again on every paint — every box's background, every border, every
+// edge of a graph — and a parse is a regular expression and an allocation
+// or two: 6% of a 2D graph pan's frame, 3% of a table's. Bounded, and
+// dropped whole rather than evicted, since a palette is a few dozen strings
+// (react-x11's Cocoa context keeps the same cache for the same reason). The
+// caller gets a copy, as it always has: an array handed out is its to keep
+// or scale.
+const parsed = new Map();
+const PARSED_MAX = 512;
+
 /**
  * Parse a CSS colour to `[r, g, b, a]` floats in 0..1 with **straight**
  * (unassociated) alpha, or null if it is not a colour.
@@ -57,6 +68,16 @@ function parseHex(value) {
  */
 export function cssColorStraight(value) {
   if (typeof value !== 'string') return null;
+  let rgba = parsed.get(value);
+  if (rgba === undefined) {
+    rgba = parseStraight(value);
+    if (parsed.size >= PARSED_MAX) parsed.clear();
+    parsed.set(value, rgba);
+  }
+  return rgba && rgba.slice();
+}
+
+function parseStraight(value) {
   const v = value.trim();
   if (!v) return null;
   if (v.toLowerCase() === 'transparent') return [0, 0, 0, 0];

package/lib/fontconfig.js

@@ -294,6 +294,11 @@ function cacheMatches(fc, out) {
 // child whose answer only reaches the event loop.
 const inflight = new Map();
 
+// fc -> the prewarm entry of a `best` job: the one face fontconfig picks for a
+// pattern, asked for beside its chain so a layout can take it first
+// (`bestOfPrewarm`)
+const bestInflight = new Map();
+
 /**
  * fc-match for a pattern, off the event loop — one child per pattern however
  * many callers ask at once, so a prewarm and an awaiting `matchSorted` share
@@ -326,11 +331,31 @@ function runFcMatch(fc) {
   return entry.promise;
 }
 
-// What a prewarm's child runs: fc-match with its answer in a file, then —
-// once that file is complete — the exit status in another, which is what a
-// synchronous caller waits for (`answerSync`). Nothing but shell builtins
-// runs after fc-match, so a PATH that holds fc-match alone is enough.
-const PREWARM_SCRIPT = 'fc-match "$@" > "$0.out" 2> "$0.err"; echo $? > "$0.done"';
+// What a prewarm's child runs: an fc-match for each job, side by side, each
+// with its answer in a file and then — once that file is complete — its exit
+// status in another, which is what a synchronous caller waits for
+// (`answerSync`). The arguments are fc-match's own (`fcMatchArgs`, the sort
+// flag first), then a file base, a kind and a pattern for each job: `sorted`
+// asks for the whole fallback chain, `best` for the one face fontconfig
+// would pick, which it answers in half the time, since it sorts nothing and
+// writes one line (`bestOfPrewarm`). The shell exits once every job has.
+// Nothing but shell builtins runs besides fc-match, so a PATH that holds
+// fc-match alone is enough.
+const PREWARM_SCRIPT = [
+  ...fcMatchArgs.map((_, i) => `a${i}=\${${i + 1}}`),
+  `shift ${fcMatchArgs.length}`,
+  'while [ $# -gt 2 ]; do ' +
+    'if [ "$2" = best ]; then ' +
+    `(fc-match ${fcMatchArgs
+      .slice(1)
+      .map((_, i) => `"$a${i + 1}"`)
+      .join(' ')} "$3" > "$1.out" 2> "$1.err"; echo $? > "$1.done") & ` +
+    'else ' +
+    `(fc-match ${fcMatchArgs.map((_, i) => `"$a${i}"`).join(' ')} "$3" > "$1.out" 2> "$1.err"; ` +
+    'echo $? > "$1.done") & ' +
+    'fi; shift 3; done',
+  'wait'
+].join('; ');
 
 // The directory prewarms write into, made on first use: undefined until
 // then, null where it cannot be (no shell, no writable tmpdir), which leaves
@@ -364,9 +389,9 @@ function prewarmBase() {
   return prewarmDir === null ? null : path.join(prewarmDir, String(prewarmCount++));
 }
 
-/** The status and answer a prewarm left, once it has left them; null while
- *  it is still running. */
-function readPrewarm(base) {
+/** The exit status a prewarm left, once it has left it; null while it is
+ *  still running. */
+function prewarmStatus(base) {
   const fs = builtin('node:fs');
   let done;
   try {
@@ -377,7 +402,15 @@ function readPrewarm(base) {
   // `echo` writes the status and the newline in one go, but a read can land
   // between the file appearing and its bytes arriving
   if (!done.endsWith('\n')) return null;
-  const status = Number(done);
+  return Number(done);
+}
+
+/** The status and answer a prewarm left, once it has left them; null while
+ *  it is still running. */
+function readPrewarm(base) {
+  const fs = builtin('node:fs');
+  const status = prewarmStatus(base);
+  if (status === null) return null;
   let out = '';
   if (status === 0) {
     try {
@@ -408,38 +441,56 @@ function removePrewarm(base) {
  * that, so the layout it was started for spawned fc-match a second time and
  * waited for that one instead.
  *
- * Null where files cannot be used; the caller prewarms the old way.
+ * One child for all the patterns handed over, because what a spawn costs is
+ * node's: libuv forks the whole process to start one, and a fork copies page
+ * tables that grow with the heap. Four spawns took 4.7 ms of the main thread
+ * at 130 MB and 33 ms at 260 MB on a Linux desktop; one shell starting the
+ * same four took 1.4 and 8, since the shell's own forks cost next to nothing.
+ *
+ * The answers stay in their files until something asks for one
+ * (`answerSync`), so a face no text is set in — a family's italics, as often
+ * as not — is never read. Read and parsed as each child exited, a family's
+ * answers were 9 ms of the main thread while the connection was still being
+ * set up: 634 KB apiece, most of it the coverage of every face fontconfig
+ * sorts behind the first.
+ *
+ * An entry a pattern, in order; null where files cannot be used, and the
+ * caller prewarms the old way.
  */
-function spawnToFiles(fc) {
+function spawnToFiles(fcs, bests = []) {
   const cp = childProcess();
-  const base = cp ? prewarmBase() : null;
-  if (base === null) return null;
+  const all = [...fcs, ...bests];
+  const bases = cp ? all.map(() => prewarmBase()) : [];
+  if (bases.length === 0 || bases[0] === null) return null;
+  const jobs = [];
+  all.forEach((fc, i) => jobs.push(bases[i], i < fcs.length ? 'sorted' : 'best', fc));
   let child;
   try {
-    child = cp.spawn('/bin/sh', ['-c', PREWARM_SCRIPT, base, ...fcMatchArgs, fc], {
+    child = cp.spawn('/bin/sh', ['-c', PREWARM_SCRIPT, 'ntk-fc-match', ...fcMatchArgs, ...jobs], {
       stdio: 'ignore'
     });
   } catch {
     return null;
   }
-  const entry = { promise: null, base, answer: undefined };
-  entry.promise = new Promise((resolve, reject) => {
-    const settle = () => {
-      if (inflight.get(fc) === entry) inflight.delete(fc);
-      // answered already, by a synchronous caller that could not wait
-      if (entry.answer === undefined) {
-        const left = readPrewarm(base);
-        removePrewarm(base);
-        entry.answer = left && left.status === 0 ? left.out : null;
-      }
-      if (entry.answer !== null) resolve(entry.answer);
-      else reject(new Error(`fc-match for "${fc}" did not answer`));
-    };
-    child.once('error', settle);
-    child.once('exit', settle);
+  // `promise` resolves once the child is gone, with what it left in the
+  // files; `exited` tells a synchronous caller there is nothing to wait for
+  const entries = all.map((fc, i) => {
+    const entry = { promise: null, base: bases[i], answer: undefined, exited: false, gone: null };
+    entry.promise = new Promise((resolve) => {
+      entry.gone = resolve;
+    });
+    (i < fcs.length ? inflight : bestInflight).set(fc, entry);
+    return entry;
   });
-  inflight.set(fc, entry);
-  return entry;
+  const gone = () => {
+    for (const entry of entries) {
+      entry.exited = true;
+      entry.gone();
+    }
+  };
+  child.once('error', gone);
+  child.once('exit', gone);
+  return entries;
 }
 
 // the synchronous path's nap while a prewarm finishes
@@ -451,14 +502,15 @@ const nap = new Int32Array(new SharedArrayBuffer(4));
 const PREWARM_WAIT_MS = 3000;
 
 /**
- * An in-flight prewarm's answer, waited for synchronously: its stdout, or
- * null if it failed or took too long — the caller then spawns fc-match
- * itself, which is also what reports why.
+ * A prewarm's answer, read from its files — waited for synchronously while
+ * the child still runs: its stdout, or null if it failed or took too long.
+ * The caller then spawns fc-match itself, which is also what reports why.
  */
 function answerSync(fc, entry) {
   const deadline = performance.now() + PREWARM_WAIT_MS;
   let left = readPrewarm(entry.base);
-  while (left === null && performance.now() < deadline) {
+  // a child that is gone has left all it ever will
+  while (left === null && !entry.exited && performance.now() < deadline) {
     Atomics.wait(nap, 0, 0, 1);
     left = readPrewarm(entry.base);
   }
@@ -470,6 +522,105 @@ function answerSync(fc, entry) {
   return entry.answer;
 }
 
+/**
+ * The first candidate of a prewarm's answer that ntk can open, read from the
+ * head of its file — waited for synchronously while the child still runs.
+ * Null where the answer failed, took too long, or holds no such candidate;
+ * the caller then reads it whole (`matchSortedSync`), which also reports why.
+ *
+ * An answer is the whole fallback chain, each face with its coverage: 634 KB
+ * for `sans-serif` on a Linux desktop, 2-3 ms to read and parse, where a
+ * layout setting text in the face needs its first line. The rest waits in
+ * the file for the first character that falls back, which Latin text in a
+ * face that covers it never has.
+ */
+function firstOfPrewarm(entry) {
+  if (entry.first !== undefined) return entry.first;
+  const deadline = performance.now() + PREWARM_WAIT_MS;
+  let status = prewarmStatus(entry.base);
+  while (status === null && !entry.exited && performance.now() < deadline) {
+    Atomics.wait(nap, 0, 0, 1);
+    status = prewarmStatus(entry.base);
+  }
+  // not answered, or not yet: the whole read is what decides, and reports
+  if (status !== 0) return null;
+  entry.first = firstCandidate(`${entry.base}.out`);
+  return entry.first;
+}
+
+/**
+ * The face a prewarm's `best` job found for a pattern, if ntk can open it —
+ * waited for synchronously while the job still runs. Null where it failed,
+ * took too long or named a face ntk cannot open; the caller then takes the
+ * chain's head (`firstOfPrewarm`).
+ *
+ * A `best` job asks fontconfig for the face it would pick, which it answers
+ * in about half the time the whole chain takes (15 ms against 30 on a Linux
+ * desktop): no sort, one line. A layout that asks for a family warmed while
+ * its component rendered waits on the prewarm, and the chain was most of
+ * that wait.
+ */
+function bestOfPrewarm(entry) {
+  if (entry.first !== undefined) return entry.first;
+  const deadline = performance.now() + PREWARM_WAIT_MS;
+  let left = readPrewarm(entry.base);
+  while (left === null && !entry.exited && performance.now() < deadline) {
+    Atomics.wait(nap, 0, 0, 1);
+    left = readPrewarm(entry.base);
+  }
+  if (left === null) return null;
+  removePrewarm(entry.base);
+  const [best] = left.status === 0 ? parseMatches(left.out) : [];
+  entry.first = best ?? null;
+  return entry.first;
+}
+
+// how much of an answer's head a read takes at a time: a line is a face's
+// path, names and coverage, a few KB at most
+const HEAD_CHUNK = 16384;
+
+/** The first line of an fc-match answer naming a face ntk can open, parsed;
+ *  null if the file has none, or cannot be read. */
+function firstCandidate(file) {
+  const fs = builtin('node:fs');
+  let fd;
+  try {
+    fd = fs.openSync(file, 'r');
+  } catch {
+    return null;
+  }
+  const decoder = new TextDecoder();
+  try {
+    let pending = new Uint8Array(0);
+    const chunk = new Uint8Array(HEAD_CHUNK);
+    for (;;) {
+      const read = fs.readSync(fd, chunk, 0, HEAD_CHUNK, null);
+      let bytes = pending;
+      if (read > 0) {
+        bytes = new Uint8Array(pending.length + read);
+        bytes.set(pending);
+        bytes.set(chunk.subarray(0, read), pending.length);
+      }
+      let start = 0;
+      // a newline never falls inside a UTF-8 sequence, so whole lines decode
+      for (let nl = bytes.indexOf(10, start); nl !== -1; nl = bytes.indexOf(10, start)) {
+        const [candidate] = parseMatches(decoder.decode(bytes.subarray(start, nl)));
+        if (candidate) return candidate;
+        start = nl + 1;
+      }
+      if (read <= 0) {
+        const [candidate] = parseMatches(decoder.decode(bytes.subarray(start)));
+        return candidate ?? null;
+      }
+      pending = bytes.slice(start);
+    }
+  } catch {
+    return null;
+  } finally {
+    fs.closeSync(fd);
+  }
+}
+
 /**
  * Seed the match cache for a pattern ahead of time, off the event loop.
  *
@@ -491,22 +642,54 @@ function answerSync(fc, entry) {
  * `matchSorted` is the reporting variant: same spawn, same cache, but it
  * awaits an answer and so has somewhere to put a failure.
  *
- * @returns {Promise<void>} resolves once the cache is seeded or the attempt
- *   abandoned
+ * @returns {Promise<void>} resolves once the answer is ready for the first
+ *   layout that asks — in the cache, or in the prewarm's files — or the
+ *   attempt abandoned
  */
 export function prewarm(pattern = {}) {
-  const fc = patternFor(pattern);
-  if (sortedCache.has(fc) || unavailable) return Promise.resolve();
-  const pending = inflight.get(fc)?.promise ?? spawnToFiles(fc)?.promise ?? runFcMatch(fc);
-  return pending.then(
-    (out) => {
-      if (!sortedCache.has(fc)) {
-        const list = parseMatches(out);
-        if (list.length > 0) sortedCache.set(fc, list);
-      }
-    },
-    () => {}
-  );
+  return warm([patternFor(pattern)])[0];
+}
+
+/**
+ * `prewarm` for several patterns at once, started together in one child: the
+ * faces a caller knows text will be set in besides a family's four — a menu's
+ * medium. Patterns already cached or running are not asked again.
+ *
+ * @returns {Promise<void>} once every pattern's answer is ready or given
+ *   up on; never rejects
+ */
+export function prewarmPatterns(patterns) {
+  return Promise.all(warm(patterns.map(patternFor))).then(() => {});
+}
+
+/**
+ * `prewarm` for a list of fontconfig patterns: the ones neither cached nor
+ * already running start together, in one child (`spawnToFiles`). A promise a
+ * pattern, resolving once its answer is ready or given up on; none rejects.
+ */
+function warm(fcs, best = null) {
+  if (unavailable) return fcs.map(() => Promise.resolve());
+  const fresh = [...new Set(fcs)].filter((fc) => !sortedCache.has(fc) && !inflight.has(fc));
+  // the best face only beside its own chain: once that is running or read,
+  // the chain's head answers as soon as a best job would
+  const bests = best !== null && fresh.includes(best) && !bestInflight.has(best) ? [best] : [];
+  if (fresh.length > 0) spawnToFiles(fresh, bests);
+  return fcs.map((fc) => {
+    if (sortedCache.has(fc)) return Promise.resolve();
+    // a prewarm's answer waits in its files for the first ask
+    const running = inflight.get(fc);
+    if (running?.base) return running.promise;
+    const pending = running?.promise ?? runFcMatch(fc);
+    return pending.then(
+      (out) => {
+        if (!sortedCache.has(fc)) {
+          const list = parseMatches(out);
+          if (list.length > 0) sortedCache.set(fc, list);
+        }
+      },
+      () => {}
+    );
+  });
 }
 
 // the faces a family is asked for in: regular, bold, and both in italic
@@ -524,14 +707,20 @@ const facesWarmed = new Set();
  * A document asks for its family's faces one at a time, as layout reaches
  * the first bold word, the first emphasis, and each ask that misses is a
  * synchronous fc-match on the way to the first frame: a Markdown document
- * waited on five of them, 600 ms on XQuartz. Started together they run side
- * by side, and each later ask finds its answer there.
+ * waited on five of them, 600 ms on XQuartz. Started together, from one
+ * child, they run side by side, and each later ask finds its answer there.
  */
 export function prewarmFaces(pattern = {}) {
   const family = pattern.family || 'sans-serif';
   if (facesWarmed.has(family) || unavailable) return;
   facesWarmed.add(family);
-  for (const [weight, style] of FACES) prewarm({ family, weight, style });
+  // the face a layout will ask for first gets a `best` job beside the chains:
+  // the one being asked for, or, warmed ahead, the regular
+  const first = patternFor(pattern.weight === undefined && pattern.style === undefined ? { family, weight: 400, style: 'normal' } : pattern);
+  warm(
+    FACES.map(([weight, style]) => patternFor({ family, weight, style })),
+    first
+  );
 }
 
 /**
@@ -561,9 +750,10 @@ export async function matchSorted(pattern = {}) {
   let out;
   const pending = inflight.get(fc);
   if (pending?.base) {
-    // a prewarm running for the pattern: its answer, or — if it has none —
-    // a spawn of our own, which is what reports why
-    out = await pending.promise.catch(() => undefined);
+    // a prewarm for the pattern: its answer once the child is gone, or — if
+    // it left none — a spawn of our own, which is what reports why
+    await pending.promise;
+    out = answerSync(fc, pending) ?? undefined;
   }
   if (out === undefined) {
     try {
@@ -617,6 +807,34 @@ export function matchSortedSync(pattern) {
   return cacheMatches(fc, out);
 }
 
+/**
+ * The best face for a pattern: `matchSortedSync(pattern)[0]`, without reading
+ * the rest of the fallback chain where a prewarm's answer is waiting in its
+ * file (`firstOfPrewarm`). A layout setting text in a face asks for this;
+ * the first character it has to fall back for reads the chain whole.
+ *
+ * @returns {{path, postscriptName, family: string, families: string[],
+ *   charset: string}}
+ */
+export function matchFirstSync(pattern) {
+  const fc = patternFor(pattern);
+  const cached = sortedCache.get(fc);
+  if (cached) return cached[0];
+  if (unavailable) throw noFontsError(unavailable);
+  prewarmFaces(pattern);
+  const best = bestInflight.get(fc);
+  if (best) {
+    const first = bestOfPrewarm(best);
+    if (first) return first;
+  }
+  const pending = inflight.get(fc);
+  if (pending?.base) {
+    const first = firstOfPrewarm(pending);
+    if (first) return first;
+  }
+  return matchSortedSync(pattern)[0];
+}
+
 /**
  * Resolve a font pattern ({family, weight, style}) to the best matching font
  * file. Returns { path, postscriptName, family, families } or throws if

package/lib/renderingcontext_2d.js

@@ -33,6 +33,7 @@ import {
   clipRingToRect,
   clipTrianglesToRect,
   rectsOnSurface,
+  WIRE_REACH,
   withinRect,
 } from "./cliprect.js";
 import {
@@ -1035,6 +1036,13 @@ class RenderingContext2d {
   }
 
   _stylePicture(value) {
+    if (typeof value === "string") {
+      // by the string, where the app keeps that index (App#solidPictureOf);
+      // an app that only answers solidPicture — a host's own, a test's
+      // stand-in — takes the long way below
+      const app = this.window.app;
+      if (app.solidPictureOf) return app.solidPictureOf(value);
+    }
     if (typeof value === "string" || Array.isArray(value)) {
       const c = parseColor(value);
       return this.createSolidPicture(c[0], c[1], c[2], c[3]);
@@ -1885,9 +1893,10 @@ class RenderingContext2d {
   ) {
     if (!shapes.length) return;
     // Trapezoids are 16.16 fixed point, and a coordinate past 32,767 throws
-    // out of the paint (lib/cliprect.js). A shape that reaches past the
-    // picture is cut to it first, a pixel to spare on every side: nothing
-    // outside the picture is ever composited.
+    // out of the paint (lib/cliprect.js). A shape that reaches that far is
+    // cut to the picture first, a pixel to spare on every side: nothing
+    // outside the picture is ever composited. One that does not goes as it
+    // came, for the server to clip.
     const x0 = -dx - 1;
     const y0 = -dy - 1;
     const x1 = w - dx + 1;
@@ -1895,7 +1904,7 @@ class RenderingContext2d {
     let fitted = null;
     for (let i = 0; i < shapes.length; i++) {
       const shape = shapes[i];
-      if (withinRect(shape, x0, y0, x1, y1)) {
+      if (withinRect(shape, -WIRE_REACH - dx, -WIRE_REACH - dy, WIRE_REACH - dx, WIRE_REACH - dy)) {
         if (fitted) fitted.push(shape);
         continue;
       }
@@ -2498,28 +2507,44 @@ class RenderingContext2d {
     // cuts above are meant to keep the extruder off that path; this keeps
     // a future miss from being catastrophic. A sum is finite iff every
     // term is.
+    //
+    // A triangle wholly off the surface is left out as well: it adds
+    // nothing on either route — the rasterizer would walk its rows only for
+    // its edges to cancel on the border column, and the server would be
+    // sent it only to clip it away — and a zoomed graph has hundreds of
+    // edges past the window every frame.
+    const right = this.width + 1;
+    const bottom = this.height + 1;
     let w = 0;
     for (let i = 0; i < tris.length; i += 6) {
-      const sum =
-        tris[i] +
-        tris[i + 1] +
-        tris[i + 2] +
-        tris[i + 3] +
-        tris[i + 4] +
-        tris[i + 5];
-      if (!Number.isFinite(sum)) continue;
+      const ax = tris[i];
+      const ay = tris[i + 1];
+      const bx = tris[i + 2];
+      const by = tris[i + 3];
+      const cx = tris[i + 4];
+      const cy = tris[i + 5];
+      if (!Number.isFinite(ax + ay + bx + by + cx + cy)) continue;
+      if (
+        (ax < -1 && bx < -1 && cx < -1) ||
+        (ay < -1 && by < -1 && cy < -1) ||
+        (ax > right && bx > right && cx > right) ||
+        (ay > bottom && by > bottom && cy > bottom)
+      ) {
+        continue;
+      }
       if (w < i) for (let k = 0; k < 6; k++) tris[w + k] = tris[i + k];
       w += 6;
     }
     if (w < tris.length) tris.length = w;
     if (!tris.length) return;
     // Triangles are 16.16 fixed point, and the source origin a direct stroke
-    // hands the server is 16 bits: a stroke that reaches past the surface is
-    // cut to it first (lib/cliprect.js), a pixel to spare on every side, so
-    // what the surface shows is drawn exactly as before.
+    // hands the server is 16 bits: a stroke that reaches that far is cut to
+    // the surface first (lib/cliprect.js), a pixel to spare on every side, so
+    // what the surface shows is drawn exactly as before. One that does not
+    // goes as it came, for the server to clip.
     const edgeX = this.width + 1;
     const edgeY = this.height + 1;
-    if (!withinRect(tris, -1, -1, edgeX, edgeY)) {
+    if (!withinRect(tris, -WIRE_REACH, -WIRE_REACH, WIRE_REACH, WIRE_REACH)) {
       const cut = clipTrianglesToRect(tris, -1, -1, edgeX, edgeY);
       tris.length = 0;
       for (let i = 0; i < cut.length; i++) tris.push(cut[i]);

package/lib/text/font.js

@@ -1,6 +1,7 @@
 import * as fontkit from 'fontkit';
 
 import { flatten, rasterizePath } from '../rasterize.js';
+import { marksCover, standInMarks } from './marks.js';
 
 // Axis coordinates are rounded to this many decimals before anything is
 // instantiated or cached. Every distinct coordinate is a font in its own
@@ -122,6 +123,10 @@ export default class Font {
     this._upem = 0;
     this._vertical = null;
     this._space = -1;
+    // the face's mark lookups while they are stood in for (./marks.js), set
+    // at its first shaping; null once the real ones are back, or never were
+    // stood in for
+    this._marks = undefined;
   }
 
   static loadSync(path, postscriptName) {
@@ -339,7 +344,7 @@ export default class Font {
    *   ax = advance, dx/dy = drawing offset from pen position (y up = positive dy)
    */
   shape(text, size, opts = {}) {
-    const run = this.fk.layout(text, opts.features, opts.script, opts.language, opts.direction);
+    const run = this._layout(text, opts);
     const s = this.scale(size);
     const glyphs = new Array(run.glyphs.length);
     let width = 0;
@@ -358,6 +363,31 @@ export default class Font {
     return { font: this, size, direction: run.direction, width, glyphs };
   }
 
+  /**
+   * fontkit's layout, with the face's mark lookups stood in for until a run
+   * holds a glyph they act at.
+   *
+   * fontkit decodes a feature's lookups the first time a run asks for it,
+   * and a face's mark attachment can be most of its tables: 14 ms of Noto
+   * Sans' first shaping, in the first frame. Until a run needs them the
+   * lookups are empty stand-ins (./marks.js), which a run holding none of
+   * their glyphs comes out the same with. A run that holds one puts the
+   * real ones back and is shaped again, and so is every run after it.
+   */
+  _layout(text, opts) {
+    const { features, script, language, direction } = opts;
+    if (this._marks === undefined) this._marks = standInMarks(this.fk);
+    const marks = this._marks;
+    // fontkit adds to the features object it is handed: a second shaping
+    // gets what the caller asked for, not what the first left there
+    const again = marks === null || features == null ? features : Array.isArray(features) ? [...features] : { ...features };
+    const run = this.fk.layout(text, features, script, language, direction);
+    if (marks === null || !run.glyphs.some((glyph) => marksCover(marks.bits, glyph.id))) return run;
+    marks.restore();
+    this._marks = null;
+    return this.fk.layout(text, again, script, language, direction);
+  }
+
   /** nominal (unshaped) advance of a glyph id, in pixels */
   advanceOf(glyphId, size) {
     return this.fk.getGlyph(glyphId).advanceWidth * this.scale(size);

package/lib/text/fontmanager.js

@@ -227,6 +227,32 @@ export default class FontManager {
     return this._source ?? defaultFontSource();
   }
 
+  /**
+   * Have `family` ready before a layout asks for it: a source that resolves
+   * families by asking the system (fontconfig) starts on its faces now, off
+   * the event loop, so the first layout in that family takes the answer
+   * instead of stalling for it. For a family the caller knows is coming — a
+   * code editor's monospace, set before it renders. A source with nothing to
+   * look up ignores it, and it never throws.
+   *
+   * `faces`, each `{ weight, style }`, names the faces to start on instead
+   * of the family's regular, bold, italic and bold italic: a face outside
+   * those that the caller knows text will be set in, such as a menu's
+   * medium. The family is spelled the way `match` spells it, so a list or a
+   * quoted name warms the pattern a layout will ask for.
+   */
+  prewarm(family, faces) {
+    const spelled = familiesOf(family).join(',');
+    if (!spelled) return;
+    this.source.prewarm?.(
+      spelled,
+      faces?.map(({ weight, style }) => ({
+        weight: numWeight(weight),
+        style: style?.includes('italic') ? 'italic' : 'normal'
+      }))
+    );
+  }
+
   /** open (and cache) a match candidate — see fontsource.js for the shape */
   _open(candidate) {
     const key = candidate.key ?? `${candidate.path}#${candidate.postscriptName || ''}`;
@@ -333,9 +359,14 @@ export default class FontManager {
       italic
     );
     if (!face) {
-      // sources understand comma-separated family lists natively
-      const candidates = this.source.matchSorted(patternOf(family, weight, italic));
-      face = this._open(candidates[0]);
+      // sources understand comma-separated family lists natively; one that
+      // can answer the best face alone saves reading the fallback chain the
+      // face may never need
+      const pattern = patternOf(family, weight, italic);
+      const source = this.source;
+      face = this._open(
+        typeof source.matchFirst === 'function' ? source.matchFirst(pattern) : source.matchSorted(pattern)[0]
+      );
     }
     this._matches.set(cacheKey, face);
     // A long-lived app can name a lot of families. Same sweep as the shaping

package/lib/text/fontsource.js

@@ -48,10 +48,12 @@
 import { builtin } from '../builtin.js';
 import {
   charsetHas,
+  matchFirstSync,
   matchSorted,
   matchSortedSync,
   noFontsError,
   prewarmFaces,
+  prewarmPatterns,
   supported
 } from '../fontconfig.js';
 import Font from './font.js';
@@ -129,6 +131,29 @@ export class FontconfigFontSource {
     return matchSortedSync(pattern);
   }
 
+  /**
+   * `matchSorted(pattern)[0]`, reading only the head of a prewarm's answer
+   * where one is waiting (`matchFirstSync` in fontconfig.js): a face's
+   * match needs its first candidate, and the fallback chain behind it is
+   * read when a character first falls back.
+   */
+  matchFirst(pattern) {
+    return matchFirstSync(pattern);
+  }
+
+  /**
+   * The family's faces — regular, bold, and both in italic, or the `faces`
+   * named, each `{ weight, style }` — matched off the event loop, as the
+   * constructor does for sans-serif, and answerable by a layout that asks
+   * before the loop runs again (see `prewarm` in fontconfig.js). A pattern
+   * already cached or running is not asked again; never rejects and never
+   * reports.
+   */
+  prewarm(family, faces) {
+    if (faces) prewarmPatterns(faces.map(({ weight, style }) => ({ family, weight, style })));
+    else prewarmFaces({ family });
+  }
+
   /**
    * Non-blocking sibling: the fc-match spawn runs off the event loop and
    * seeds the same cache, so a later synchronous layout for the pattern is

package/lib/text/layout.js

@@ -407,7 +407,7 @@ export class TextLayout {
         const shaped = this.fonts._shapeCached(fragText, shaping, fragLevels);
         // the levels ride along so a later split can re-shape a piece at the
         // level it actually has, rather than assuming ltr
-        fragments.push({ text: fragText, span, shaped, start: pos, levels: fragLevels });
+        fragments.push({ text: fragText, span, shaping, shaped, start: pos, levels: fragLevels });
         width += shaped.width;
       }
       pos = fragEnd;
@@ -497,33 +497,47 @@ export class TextLayout {
         used += frag.shaped.width;
         continue;
       }
-      // binary search the longest grapheme prefix of this fragment that fits.
+      // shaped at the bidi level this text actually has: assuming level 0
+      // here re-shapes an rtl word as ltr, which lays its glyphs out
+      // backwards and hands reorderRuns an even level that stops it from
+      // being reordered at all
+      const shaping = frag.shaping ?? frag.span;
+      const shape = (text, from, to) =>
+        this.fonts._shapeCached(text, shaping, sliceLevels(frag.levels, from, to));
+      let best = null;
       // Graphemes rather than code points: cutting between a base character
       // and its combining mark, or inside an emoji ZWJ sequence, leaves a
       // dotted circle or a pair of half-emoji on the two sides of the break.
-      const cps = graphemes(frag.text);
-      let lo = 0;
-      let hi = cps.length - 1;
-      let best = null;
-      while (lo <= hi) {
-        const mid = (lo + hi) >> 1;
-        const prefix = cps.slice(0, mid + 1).join('');
-        // shaped at the bidi level this text actually has: assuming level 0
-        // here re-shapes an rtl word as ltr, which lays its glyphs out
-        // backwards and hands reorderRuns an even level that stops it from
-        // being reordered at all
-        const shaped = this.fonts._shapeCached(prefix, frag.span, sliceLevels(frag.levels, 0, prefix.length));
-        if (used + shaped.width <= maxWidth) {
-          best = { len: prefix.length, shaped, text: prefix };
-          lo = mid + 1;
-        } else {
-          hi = mid - 1;
+      const lead = firstGrapheme(frag.text);
+      if (used + shape(lead, 0, lead.length).width <= maxWidth) {
+        // binary search the longest grapheme prefix of this fragment that fits
+        const cps = graphemes(frag.text);
+        let lo = 0;
+        let hi = cps.length - 1;
+        while (lo <= hi) {
+          const mid = (lo + hi) >> 1;
+          const prefix = cps.slice(0, mid + 1).join('');
+          const shaped = shape(prefix, 0, prefix.length);
+          if (used + shaped.width <= maxWidth) {
+            best = { len: prefix.length, shaped, text: prefix };
+            lo = mid + 1;
+          } else {
+            hi = mid - 1;
+          }
         }
+      } else if (!headFrags.length) {
+        // Not even its first cluster fits, so nothing of the token does: the
+        // caller lets it overflow whole. That is every word at width 0, where
+        // a layout is asked for the narrowest it can be, and the search found
+        // it out by segmenting the whole word and shaping a dozen prefixes of
+        // it, each a word the memo had never seen.
+        return [null, token];
       }
       if (best) {
         headFrags.push({
           text: best.text,
           span: frag.span,
+          shaping,
           shaped: best.shaped,
           start: frag.start,
           levels: sliceLevels(frag.levels, 0, best.len)
@@ -538,7 +552,8 @@ export class TextLayout {
         restFrags.push({
           text: restText,
           span: frag.span,
-          shaped: this.fonts._shapeCached(restText, frag.span, restLevels),
+          shaping,
+          shaped: this.fonts._shapeCached(restText, shaping, restLevels),
           start: frag.start + cut,
           levels: restLevels
         });
@@ -958,19 +973,48 @@ export class TextLayout {
 // somehow absent, code points are the old behaviour and still safe for the
 // scripts that reach a force-break most often.
 let segmenter;
-function graphemes(text) {
+function graphemeSegmenter() {
   if (segmenter === undefined) {
     segmenter =
       typeof Intl !== 'undefined' && Intl.Segmenter
         ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
         : null;
   }
-  if (!segmenter) return Array.from(text);
+  return segmenter;
+}
+
+// Two ASCII characters are never one cluster, bar a CR before a LF (UAX#29
+// GB3): whatever extends a cluster or joins into one — marks, joiners,
+// spacing marks, prepends — sits above U+02FF. So text of nothing else,
+// which is most of what a document cuts, needs no segmenter: it costs a
+// microsecond a call, and the width floors ask once a word.
+function plainAscii(text) {
+  for (let i = 0; i < text.length; i++) {
+    const c = text.charCodeAt(i);
+    if (c >= 0x80 || (c === 13 && text.charCodeAt(i + 1) === 10)) return false;
+  }
+  return true;
+}
+
+function graphemes(text) {
+  if (plainAscii(text)) return text.split('');
+  const segments = graphemeSegmenter();
+  if (!segments) return Array.from(text);
   const out = [];
-  for (const { segment } of segmenter.segment(text)) out.push(segment);
+  for (const { segment } of segments.segment(text)) out.push(segment);
   return out;
 }
 
+/** The first grapheme cluster of `text`, without segmenting the rest. */
+function firstGrapheme(text) {
+  const c0 = text.charCodeAt(0);
+  if (c0 < 0x80 && c0 !== 13 && !(text.charCodeAt(1) >= 0x80)) return text.slice(0, 1);
+  const segments = graphemeSegmenter();
+  if (!segments) return String.fromCodePoint(text.codePointAt(0));
+  for (const { segment } of segments.segment(text)) return segment;
+  return '';
+}
+
 // UTF-16 length of a glyph cluster's codePoints array
 function cuLength(codePoints) {
   let len = 0;

package/lib/text/marks.js

@@ -0,0 +1,212 @@
+// The glyphs a face's mark positioning can move, read from the GPOS table's
+// own bytes, so that its lookups need not be decoded until a run holds one.
+//
+// fontkit decodes a lookup whole the first time a run asks for its feature,
+// and `mark` is the one that costs: Noto Sans' mark-to-base subtable holds an
+// anchor for every base glyph in every mark class, and decoding it took 14 ms
+// of each face's first shaping (21 ms in all), inside the first frame of
+// every app whose sans-serif is Noto. A line of Latin UI text has no glyph
+// any of those lookups acts on.
+//
+// So each `mark` and `mkmk` lookup is stood in for, in fontkit's cache of the
+// face's lookups, by an empty one (`standInMarks`): a run applies the stand-in
+// and decodes nothing, and fontkit is handed the caller's features as they
+// are. A run that turns out to hold a glyph one of the real lookups acts at
+// puts them back and is shaped again (`Font#_layout`).
+//
+// That is exact rather than a guess about scripts. Every GPOS lookup acts
+// only at a glyph in its first coverage — the mark coverage of a mark
+// attachment, the first glyph's of a pair, the first input's of a context —
+// wherever it is reached from: its feature, another feature that names it,
+// the feature table a variation swaps in, a context that nests it. A run
+// holding no glyph from the coverage of any stood-in lookup is one the real
+// lookups would have left as it is.
+//
+// An earlier cut left the two features out through fontkit's own feature
+// overrides instead. That was exact too, and cost every shaping a pass over
+// the overrides that deletes the tags from the plan: 1-3 us a word, 6% of a
+// frame scrolling a long document into text it had not shaped.
+//
+// Null — shape as fontkit shapes — for a face that has nothing to stand in
+// for, that fontkit shapes through AAT's morx rather than GPOS, or whose
+// tables this cannot read to the end.
+
+const TAGS = new Set(['mark', 'mkmk']);
+
+/**
+ * @param {object} fk a fontkit font
+ * @returns {{ bits: Uint8Array, lookups: Set<number> }|null} the `mark` and
+ *   `mkmk` lookups, and a bit per glyph id, set for every glyph one of them
+ *   can act at; null where none can be stood in for
+ */
+export function markGlyphs(fk) {
+  try {
+    if (fk.directory?.tables?.morx) return null;
+    const gpos = table(fk, 'GPOS');
+    if (!gpos) return null;
+    const lookups = markLookups(gpos);
+    if (lookups.size === 0) return null;
+    const bits = new Uint8Array(8192);
+    const lookupList = gpos.offset(8, 0);
+    for (const index of lookups) {
+      if (!coverLookup(gpos, lookupList, index, bits)) return null;
+    }
+    return { bits, lookups };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Stand an empty lookup in for each `mark` and `mkmk` lookup of a face, in
+ * fontkit's cache of its GPOS lookups (restructure's lazy array, which
+ * decodes an index the first time it is asked and keeps it in `items`).
+ * Applied, a stand-in has no subtables and moves nothing.
+ *
+ * @param {object} fk a fontkit font, before its first layout
+ * @returns {{ bits: Uint8Array, restore: () => void }|null} `restore` puts the
+ *   real lookups back, to be decoded by the next run that asks; null where
+ *   there is nothing to stand in for, where fontkit's cache is not the shape
+ *   this knows, or where a lookup was decoded already
+ */
+export function standInMarks(fk) {
+  const marks = markGlyphs(fk);
+  if (marks === null) return null;
+  let list;
+  try {
+    list = fk.GPOS?.lookupList;
+  } catch {
+    return null;
+  }
+  if (!list || typeof list.get !== 'function' || !Array.isArray(list.items)) return null;
+  for (const index of marks.lookups) if (list.items[index] != null) return null;
+  const standIn = { lookupType: 0, flags: {}, subTableCount: 0, subTables: [] };
+  for (const index of marks.lookups) list.items[index] = standIn;
+  return {
+    bits: marks.bits,
+    restore() {
+      for (const index of marks.lookups) {
+        if (list.items[index] === standIn) list.items[index] = null;
+      }
+    }
+  };
+}
+
+/** Whether `bits` (from `markGlyphs`) has glyph `id`. */
+export function marksCover(bits, id) {
+  return (bits[id >> 3] & (1 << (id & 7))) !== 0;
+}
+
+/**
+ * A table's bytes, read big-endian at positions from its start. `offset(pos,
+ * base)` reads the 16-bit offset stored at `pos` and answers where it
+ * points, `base` being what the format measures it from.
+ */
+function table(fk, tag) {
+  const entry = fk.directory?.tables?.[tag];
+  if (!entry) return null;
+  const stream = fk._getTableStream(tag);
+  if (!stream) return null;
+  const buf = stream.buffer;
+  const start = stream.pos;
+  const end = Math.min(start + entry.length, buf.length);
+  const u16 = (pos) => {
+    const p = start + pos;
+    if (pos < 0 || p + 2 > end) throw new RangeError(`${tag} read past its end`);
+    return (buf[p] << 8) | buf[p + 1];
+  };
+  const u32 = (pos) => u16(pos) * 65536 + u16(pos + 2);
+  const offset = (pos, base) => base + u16(pos);
+  return { u16, u32, offset };
+}
+
+/**
+ * The lookup indices of every `mark` and `mkmk` feature record, in any
+ * script: a superset of what fontkit applies, which only widens what
+ * counts as a mark.
+ */
+function markLookups(t) {
+  const list = t.offset(6, 0);
+  const lookups = new Set();
+  for (let i = 0, n = t.u16(list); i < n; i++) {
+    const rec = list + 2 + i * 6;
+    const tag = String.fromCharCode(t.u16(rec) >> 8, t.u16(rec) & 255, t.u16(rec + 2) >> 8, t.u16(rec + 2) & 255);
+    if (!TAGS.has(tag)) continue;
+    const feature = t.offset(rec + 4, list);
+    for (let j = 0, m = t.u16(feature + 2); j < m; j++) lookups.add(t.u16(feature + 4 + j * 2));
+  }
+  return lookups;
+}
+
+/** Adds the first coverage of each of a lookup's subtables; false for one it cannot read. */
+function coverLookup(t, lookupList, index, bits) {
+  if (index >= t.u16(lookupList)) return false;
+  const lookup = t.offset(lookupList + 2 + index * 2, lookupList);
+  const type = t.u16(lookup);
+  for (let i = 0, n = t.u16(lookup + 4); i < n; i++) {
+    let sub = t.offset(lookup + 6 + i * 2, lookup);
+    let subType = type;
+    if (subType === 9) {
+      // an extension: the real subtable, at a 32-bit offset from here
+      if (t.u16(sub) !== 1) return false;
+      subType = t.u16(sub + 2);
+      sub += t.u32(sub + 4);
+    }
+    const coverage = firstCoverage(t, subType, sub);
+    if (coverage < 0) return false;
+    addCoverage(t, coverage, bits);
+  }
+  return true;
+}
+
+/**
+ * Where the coverage a subtable is entered from starts, or -1 for a
+ * subtable this does not know.
+ */
+function firstCoverage(t, type, sub) {
+  const format = t.u16(sub);
+  switch (type) {
+    case 1: // single adjustment
+    case 2: // pair adjustment: the pair's first glyph
+      return format === 1 || format === 2 ? t.offset(sub + 2, sub) : -1;
+    case 3: // cursive attachment
+    case 4: // mark to base: the mark
+    case 5: // mark to ligature: the mark
+    case 6: // mark to mark: the mark that attaches
+      return format === 1 ? t.offset(sub + 2, sub) : -1;
+    case 7: // context
+      if (format === 1 || format === 2) return t.offset(sub + 2, sub);
+      // the first input glyph's, after the glyph and lookup counts
+      return format === 3 && t.u16(sub + 2) > 0 ? t.offset(sub + 6, sub) : -1;
+    case 8: {
+      // chained context
+      if (format === 1 || format === 2) return t.offset(sub + 2, sub);
+      if (format !== 3) return -1;
+      // past the backtrack coverages to the input's count, then its first
+      const input = sub + 4 + t.u16(sub + 2) * 2;
+      return t.u16(input) > 0 ? t.offset(input + 2, sub) : -1;
+    }
+    default:
+      return -1;
+  }
+}
+
+function addCoverage(t, coverage, bits) {
+  const format = t.u16(coverage);
+  const count = t.u16(coverage + 2);
+  if (format === 1) {
+    for (let i = 0; i < count; i++) set(bits, t.u16(coverage + 4 + i * 2));
+  } else if (format === 2) {
+    for (let i = 0; i < count; i++) {
+      const rec = coverage + 4 + i * 6;
+      const last = t.u16(rec + 2);
+      for (let id = t.u16(rec); id <= last; id++) set(bits, id);
+    }
+  } else {
+    throw new RangeError(`coverage format ${format}`);
+  }
+}
+
+function set(bits, id) {
+  bits[id >> 3] |= 1 << (id & 7);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "8.13.1",
+  "version": "8.14.0",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",