ntk 7.0.0 → 7.1.0

package/lib/app.js

@@ -8,6 +8,15 @@ import { ShmUploader } from './shm-upload.js';
 import FontManager from './text/fontmanager.js';
 import Window from './window.js';
 
+/**
+ * The highest predefined atom id in the core protocol, `XA_WM_TRANSIENT_FOR`.
+ *
+ * Atoms 1 to 68 are named by the protocol itself, so every server agrees on
+ * them and no server ever frees them. Anything above is interned at runtime
+ * and belongs to the connection that asked for it — see `_isolateAtoms`.
+ */
+const PREDEFINED_ATOM_MAX = 68;
+
 /**
  * Frame interval used before the display has been asked, in ms — and the one
  * kept on a server that cannot answer.
@@ -76,6 +85,7 @@ export default class App {
     this.display = display;
     this.X = display.client;
     this.options = options;
+    this._isolateAtoms();
     this._fonts = null;
     this._clipboard = null;
     this._cursors = null;
@@ -94,6 +104,47 @@ export default class App {
     });
   }
 
+  /**
+   * Give this connection an atom table of its own.
+   *
+   * node-x11 hands every client the *same* table object — `this.atoms =
+   * stdatoms` in xcore, assigned rather than copied — and `InternAtom`
+   * answers out of it without a round trip when the name is already there.
+   * So an id interned on one connection is handed to every other connection
+   * in the process, which have never asked the server for it.
+   *
+   * That is safe only while something keeps the server alive. An X server
+   * frees every atom it holds when its **last** client disconnects, and
+   * hands the same ids out again to whatever is interned next. A process
+   * that opens connections in sequence — a test suite, a tool that runs a
+   * few apps, anything under Xvfb with no window manager holding the server
+   * open — therefore writes properties with ids the server has forgotten.
+   * The visible half of that is `BadAtom` on a `ChangeProperty` naming an
+   * atom the app never chose; the quiet half is worse, because once the id
+   * has been reissued to a different name the write lands under *that* atom
+   * and no error is reported at all.
+   *
+   * Keeping only the predefined atoms is what makes the copy correct: ids 1
+   * to 68 are fixed by the core protocol, identical on every server, and
+   * never freed. Everything above that has to be interned per connection,
+   * which now happens because this table starts without it. Within one
+   * connection the caching still works, and it is still correct, because a
+   * live connection is exactly what stops the server resetting.
+   */
+  _isolateAtoms() {
+    const shared = this.X.atoms;
+    if (!shared) return;
+    const own = {};
+    const names = {};
+    for (const [name, id] of Object.entries(shared)) {
+      if (id > PREDEFINED_ATOM_MAX) continue;
+      own[name] = id;
+      names[id] = name;
+    }
+    this.X.atoms = own;
+    this.X.atom_names = names;
+  }
+
   /**
    * The fastest refresh rate any active output is running at, in Hz, or
    * `null` until the display has been asked — and on a server with no RandR

package/lib/renderingcontext_2d.js

@@ -60,6 +60,23 @@ function intersectBox(a, b) {
 
 const DEFAULT_FONT = "20px sans-serif";
 
+// `"wght" 460, "wdth" 87.5` — the CSS grammar, quotes optional. An object is
+// passed through, so callers can skip the string entirely.
+const VARIATION_RE = /["']?([a-zA-Z0-9]{4})["']?\s+(-?[\d.]+)/g;
+
+function parseVariationSettings(val) {
+  if (!val || val === "normal") return null;
+  if (typeof val === "object") return val;
+  if (typeof val !== "string") return null;
+  const out = {};
+  let any = false;
+  for (const [, tag, value] of val.matchAll(VARIATION_RE)) {
+    out[tag] = Number(value);
+    any = true;
+  }
+  return any ? out : null;
+}
+
 /**
  * Fallback for a context dropped without `destroy()`, matching Pixmap,
  * Picture and GlyphSet. Only the GCs are freed here: everything else a
@@ -507,6 +524,7 @@ class RenderingContext2d {
       gco: this._gco,
       textStyle: this._textStyle,
       fontString: this._lastFontString,
+      fontVariations: this._fontVariations,
       textAlign: this.textAlign,
       textBaseline: this.textBaseline,
       m: this._m.slice(),
@@ -529,6 +547,7 @@ class RenderingContext2d {
     this._gco = s.gco;
     this._textStyle = s.textStyle;
     this._lastFontString = s.fontString;
+    this._fontVariations = s.fontVariations;
     this.textAlign = s.textAlign;
     this.textBaseline = s.textBaseline;
     this._m = s.m;
@@ -2399,6 +2418,7 @@ class RenderingContext2d {
       weight: parsed.weight,
       style: parsed.style,
       size: parsed.size,
+      variations: this._fontVariations,
     };
     style.font = this.window.app.fonts.match(style.family, style);
     this._lastFontString = val;
@@ -2409,6 +2429,28 @@ class RenderingContext2d {
     return this._lastFontString || DEFAULT_FONT;
   }
 
+  /**
+   * CSS's `font-variation-settings`, for a variable font: `'"wght" 460'`,
+   * or `{ wght: 460 }`. Axes a font does not have are ignored and values are
+   * clamped to their range, so this is safe to set unconditionally.
+   *
+   * The `wght` axis needs none of this — a numeric weight in the `font`
+   * shorthand already drives it (`ctx.font = '460 40px Inter'`). This is for
+   * the rest: `wdth`, `slnt`, `opsz` and whatever a display face invents.
+   *
+   * Order-independent: setting it after `font` re-resolves the face, so the
+   * two can be assigned either way round.
+   */
+  set fontVariationSettings(val) {
+    this._fontVariations = parseVariationSettings(val);
+    // re-resolve against the font already in force, if there is one
+    if (this._textStyle) this.font = this._lastFontString;
+  }
+
+  get fontVariationSettings() {
+    return this._fontVariations ?? null;
+  }
+
   // ------------------------------------------------------------------
   // gradients / images
 

package/lib/text/font.js

@@ -2,6 +2,60 @@ import * as fontkit from 'fontkit';
 
 import { flatten, rasterizePath } from '../rasterize.js';
 
+// Axis coordinates are rounded to this many decimals before anything is
+// instantiated or cached. Every distinct coordinate is a font in its own
+// right — its own rasterized glyphs, its own server-side glyphset — so the
+// precision of the number that reaches here is the precision of the cache,
+// and a slider handing over 459.9999999997 must not mint a face that
+// 460 will never hit again. Two decimals is far finer than any axis is
+// perceptible at, and makes the coordinate that reaches fontkit and the
+// coordinate in the key the same number by construction.
+const AXIS_DECIMALS = 2;
+const round = (v) => Number(v.toFixed(AXIS_DECIMALS));
+
+// Instances kept per base font. Reached only by an app driving an axis
+// continuously — an animation, a drag — where the tail is cold by
+// definition; a design system's handful of weights never approaches it.
+// Server-side glyph pages have their own byte budget (text/glyphs.js), and
+// evicting a Font here does not strand them: the key is derived from the
+// coordinates, so re-instantiating the same point produces the same key and
+// finds the same page.
+const MAX_INSTANCES = 64;
+
+/**
+ * Clamp `settings` into a font's design space: drop axes it does not have,
+ * clamp the rest to their range, round, and drop anything left sitting on
+ * its own default (the base font already *is* the default instance).
+ *
+ * @returns {object|null} the coordinates to instantiate, or null for "this
+ *   font already is that instance"
+ */
+export function normalizeVariations(settings, axes) {
+  if (!settings || !axes) return null;
+  const coords = {};
+  let any = false;
+  for (const tag of Object.keys(settings).sort()) {
+    const axis = axes[tag];
+    if (!axis) continue; // a font that has no such axis is not wrong, just flat
+    const value = Number(settings[tag]);
+    if (!Number.isFinite(value)) continue;
+    const clamped = round(Math.min(axis.max, Math.max(axis.min, value)));
+    if (clamped === round(axis.default)) continue;
+    coords[tag] = clamped;
+    any = true;
+  }
+  return any ? coords : null;
+}
+
+/** Canonical cache key for normalized coordinates: `wdth=87.5,wght=460`. */
+export function variationKey(coords) {
+  if (!coords) return '';
+  return Object.keys(coords)
+    .sort()
+    .map((tag) => `${tag}=${coords[tag]}`)
+    .join(',');
+}
+
 /**
  * A single font face (one entry of a .ttc collection, or a whole .ttf/.otf),
  * parsed with fontkit. Wraps everything the text pipeline needs:
@@ -71,6 +125,94 @@ export default class Font {
     return this.fk.unitsPerEm;
   }
 
+  /**
+   * The variation axes this face offers, keyed by OpenType tag:
+   * `{ wght: { name, min, default, max } }`. `{}` for a static font, so
+   * `Object.keys(font.variationAxes).length` is the "is this variable?"
+   * question and needs no other API.
+   */
+  get variationAxes() {
+    return this.fk.variationAxes ?? {};
+  }
+
+  /**
+   * A static instance of this face at a point in its design space — the
+   * thing a variable font is *for*. `font.variation({ wght: 460 })` is the
+   * `font-variation-settings: "wght" 460` of CSS.
+   *
+   * Instances are ordinary `Font`s from here on: they shape, measure and
+   * rasterize like any face, and because the key is derived from the
+   * coordinates they get their own glyph page and their own server-side
+   * glyphset. That is what keeps the axis honest — leave the key alone and
+   * every instance of one file collides in the glyph cache, so the whole
+   * axis renders as whichever coordinate got there first.
+   *
+   * Nothing is rasterized here. Instantiating is a table-level operation;
+   * glyphs are still rasterized one at a time, on first use, at the size
+   * they are drawn at.
+   *
+   * Settings for axes this font does not have are ignored, values are
+   * clamped to each axis's range, and coordinates that land on their own
+   * default return **this font** rather than a redundant copy of it.
+   *
+   * @param {object} settings axis tag -> value, e.g. `{ wght: 460 }`
+   * @returns {Font} the instance, or `this` when the settings are a no-op
+   */
+  variation(settings) {
+    const coords = normalizeVariations(settings, this.variationAxes);
+    if (!coords) return this;
+    const suffix = variationKey(coords);
+
+    if (!this._variations) this._variations = new Map();
+    const cached = this._variations.get(suffix);
+    if (cached) {
+      // Map iterates in insertion order: re-inserting a hit moves it to the
+      // tail, so the eviction below drops the least recently asked for
+      this._variations.delete(suffix);
+      this._variations.set(suffix, cached);
+      return cached;
+    }
+
+    const instance = new Font(this._instantiate(coords), this.path, this.postscriptName);
+    instance.key = `${this.key}|${suffix}`;
+    /** the face this was cut from, for callers walking back to the axes */
+    instance.variationOf = this;
+    instance.variationCoords = coords;
+
+    this._variations.set(suffix, instance);
+    if (this._variations.size > MAX_INSTANCES) {
+      const oldest = this._variations.keys().next().value;
+      this._variations.delete(oldest);
+    }
+    return instance;
+  }
+
+  /**
+   * fontkit's instancing, with the one failure it has turned into something
+   * that says what to do about it.
+   *
+   * `getVariation` rebuilds the face from the original stream at the
+   * original directory offset. For a WOFF2 that stream is still
+   * Brotli-compressed, so the copy comes back with a directory parsed out of
+   * compressed bytes — no `cmap`, and a `Cannot read properties of undefined
+   * (reading 'tables')` from somewhere deep in shaping, at the first
+   * character drawn rather than here. Checking the instance is well-formed
+   * costs one property read and moves the report to the call that caused it.
+   */
+  _instantiate(coords) {
+    const instance = this.fk.getVariation(coords);
+    if (!instance?.directory?.tables?.cmap) {
+      throw new Error(
+        `ntk: cannot instantiate a variation of ${this.postscriptName || this.key}` +
+          (this.fk.type ? ` (${this.fk.type})` : '') +
+          '. fontkit can only instantiate axes from an uncompressed font — ' +
+          'ship the .ttf/.otf of a variable font rather than its .woff2. ' +
+          'See docs/fonts.md#variable-fonts'
+      );
+    }
+    return instance;
+  }
+
   scale(size) {
     return size / this.fk.unitsPerEm;
   }

package/lib/text/fontmanager.js

@@ -8,6 +8,41 @@ import {
 import { embeddingLevels, normalizedLevels, shapeText } from './shape.js';
 import { TextLayout } from './layout.js';
 
+// Bound on the resolved-match map. See the sweep in `match()`.
+const MAX_MATCHES = 512;
+
+/** Cache-key fragment for a style's `variations`, before any font is known. */
+function variationsKeyOf(variations) {
+  if (!variations) return '';
+  return Object.keys(variations)
+    .sort()
+    .map((tag) => `${tag}=${variations[tag]}`)
+    .join(',');
+}
+
+/**
+ * Put a resolved face at the point in its design space the style asked for.
+ *
+ * The interesting half is `weight`. CSS has said for years that
+ * `font-weight: 460` on a variable font means the `wght` axis at 460, not
+ * "the nearest face"; a face with a `wght` axis therefore takes the
+ * requested weight as a coordinate, and an app that hands ntk a variable
+ * file gets the weight it asked for without knowing an axis exists. An
+ * explicit `variations.wght` wins, because a caller naming the axis
+ * directly is being more specific than one naming a weight.
+ *
+ * Everything here is a no-op for a static face: `variation()` returns the
+ * font unchanged when the settings do not apply, so this costs one property
+ * read on the path every non-variable app is already on.
+ */
+function instantiate(font, weight, variations) {
+  const axes = font.variationAxes;
+  if (!axes || (!axes.wght && !variations)) return font;
+  const settings = { ...variations };
+  if (axes.wght && settings.wght === undefined) settings.wght = weight;
+  return font.variation(settings);
+}
+
 /**
  * Font lookup, loading and caching — the entry point of the text API,
  * available as `app.fonts` (and constructible standalone for headless
@@ -122,9 +157,14 @@ export default class FontManager {
   match(family = 'sans-serif', opts = {}) {
     const weight = numWeight(opts.weight);
     const italic = !!(opts.style && opts.style.includes('italic'));
-    const cacheKey = `${family}|${weight}|${italic}`;
+    const cacheKey = `${family}|${weight}|${italic}|${variationsKeyOf(opts.variations)}`;
     let font = this._matches.get(cacheKey);
-    if (font) return font;
+    if (font) {
+      // insertion order is LRU order; re-inserting a hit moves it to the tail
+      this._matches.delete(cacheKey);
+      this._matches.set(cacheKey, font);
+      return font;
+    }
 
     const families = String(family)
       .split(',')
@@ -145,7 +185,19 @@ export default class FontManager {
       });
       font = this._open(candidates[0]);
     }
+    font = instantiate(font, weight, opts.variations);
     this._matches.set(cacheKey, font);
+    // The key now carries a point in a continuous space rather than one of a
+    // handful of weights, so an app animating an axis walks this map instead
+    // of hitting it. Same sweep as the shaping memo: drop the stale half in
+    // one pass rather than one entry per insert.
+    if (this._matches.size > MAX_MATCHES) {
+      let drop = this._matches.size >> 1;
+      for (const key of this._matches.keys()) {
+        if (drop-- <= 0) break;
+        this._matches.delete(key);
+      }
+    }
     return font;
   }
 
@@ -239,7 +291,15 @@ export default class FontManager {
    */
   _shapeCached(text, style, levelsKey = '0') {
     const font = style.font;
-    const key = `${font ? font.key : style.family}|${style.size}|${style.weight}|${style.style}|${levelsKey}|${text}`;
+    // A resolved `font` already carries its coordinates in its key, so the
+    // variations fragment only earns its keep on the family path — where two
+    // points of one axis would otherwise share a shaped run, and the second
+    // would be drawn with the first's advances.
+    const key = font
+      ? `${font.key}|${style.size}|${style.weight}|${style.style}|${levelsKey}|${text}`
+      : `${style.family}|${style.size}|${style.weight}|${style.style}|${variationsKeyOf(
+          style.variations
+        )}|${levelsKey}|${text}`;
     let shaped = this._shapeCache.get(key);
     if (shaped) {
       // Map iterates in insertion order: re-inserting a hit moves it to the

package/lib/text/layout.js

@@ -66,6 +66,7 @@ export class TextLayout {
         size: s.size ?? style.size ?? 16,
         weight: s.weight ?? style.weight,
         style: s.style ?? style.style,
+        variations: s.variations ?? style.variations,
         features: s.features ?? style.features,
         language: s.language ?? style.language,
         color: s.color ?? style.color ?? null

package/lib/window.js

@@ -1902,8 +1902,9 @@ export default class Window extends Drawable {
 
   /**
    * Intern several atoms and hand them to `cb` as an object keyed by name.
-   * node-x11 caches interned atoms per connection, so a repeated call
-   * costs no round trip. Same deferred-chain hazards as setTitle: by the
+   * Interned atoms are cached per connection — which is true because App
+   * makes it true, see `_isolateAtoms` — so a repeated call costs no round
+   * trip. Same deferred-chain hazards as setTitle: by the
    * time the replies land the window may be gone, so callers re-check
    * `this._destroyed`.
    */
@@ -3371,8 +3372,9 @@ export default class Window extends Drawable {
 
   _emitCloseRequest(ev) {
     if (ev.format !== 32 || !this.listenerCount('close')) return;
-    // node-x11 caches interned atoms per connection, so these are the ids
-    // the 'close' listener's addProtocol already interned
+    // interned atoms are cached per connection (App#_isolateAtoms), so these
+    // are the ids this window's own addProtocol interned — an id another
+    // connection happened to intern would not be one this server still knows
     const X = this.X;
     if (!X.atoms.WM_PROTOCOLS || ev.message_type !== X.atoms.WM_PROTOCOLS) return;
     if (!X.atoms.WM_DELETE_WINDOW || ev.data?.[0] !== X.atoms.WM_DELETE_WINDOW) return;

package/package.json

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