@glyph-engine/web 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,1821 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+
+// src/modules/camera.ts
+var exports_camera = {};
+__export(exports_camera, {
+  default: () => camera_default
+});
+
+// src/modules/canvas.ts
+var exports_canvas = {};
+__export(exports_canvas, {
+  MODE_CENTER: () => MODE_CENTER,
+  MODE_COVER: () => MODE_COVER,
+  MODE_FIT: () => MODE_FIT,
+  default: () => Canvas
+});
+
+// src/modules/exportframe.ts
+var exports_exportframe = {};
+__export(exports_exportframe, {
+  exportFrame: () => exportFrame
+});
+
+// src/modules/filedownload.ts
+var exports_filedownload = {};
+__export(exports_filedownload, {
+  saveBlobAsFile: () => saveBlobAsFile,
+  saveSourceAsFile: () => saveSourceAsFile
+});
+
+// src/modules/image.ts
+var exports_image = {};
+__export(exports_image, {
+  default: () => image_default
+});
+
+// src/modules/load.ts
+var exports_load = {};
+__export(exports_load, {
+  default: () => load_default
+});
+
+// src/modules/sort.ts
+var exports_sort = {};
+__export(exports_sort, {
+  sort: () => sort
+});
+
+// src/index.ts
+export * from "@glyph-engine/core";
+
+// src/run.ts
+import { startLoop } from "@glyph-engine/core";
+
+// src/canvasrenderer.ts
+import { colorString, cssColor, getChar, weightString } from "@glyph-engine/core";
+
+// src/canvassize.ts
+function fitCanvas(canvas, context, scale) {
+  const size = context.settings.canvasSize;
+  const w = Math.trunc((size ? size.width : context.width) * scale);
+  const h = Math.trunc((size ? size.height : context.height) * scale);
+  if (canvas.width !== w)
+    canvas.width = w;
+  if (canvas.height !== h)
+    canvas.height = h;
+  if (size) {
+    canvas.style.width = size.width + "px";
+    canvas.style.height = size.height + "px";
+  }
+}
+
+// src/cellspan.ts
+var cache = new Map;
+function cellSpan(ctx, font, char, cellWidth) {
+  if (char.length < 2 && !(char.charCodeAt(0) >= 4352))
+    return 1;
+  const key = font + "|" + cellWidth + "|" + char;
+  let span = cache.get(key);
+  if (span === undefined) {
+    span = ctx.measureText(char).width > cellWidth * 1.5 ? 2 : 1;
+    if (cache.size > 65536)
+      cache.clear();
+    cache.set(key, span);
+  }
+  return span;
+}
+
+// src/canvasrenderer.ts
+var canvasrenderer_default = {
+  preferredElementNodeName: "CANVAS",
+  render
+};
+function render(context, frame) {
+  const canvas = context.settings.element;
+  const scale = devicePixelRatio;
+  const c = context.cols;
+  const r = context.rows;
+  const m = context.metrics;
+  const cw = m.cellWidth;
+  const ch = Math.round(m.lineHeight);
+  const settings = context.settings;
+  fitCanvas(canvas, context, scale);
+  const ff = " " + m.fontSize + "px " + m.fontFamily;
+  const bg = settings && settings.backgroundColor ? settings.backgroundColor : "white";
+  const fg = settings && settings.color ? settings.color : "black";
+  const fontWeight = settings && settings.fontWeight ? settings.fontWeight : "400";
+  const ctx = canvas.getContext("2d");
+  if (!ctx)
+    throw new Error("Canvas not supported");
+  ctx.fillStyle = bg;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.save();
+  ctx.scale(scale, scale);
+  ctx.fillStyle = fg;
+  ctx.textBaseline = "top";
+  if (settings.canvasOffset) {
+    const offs = settings.canvasOffset;
+    const ox = Math.round(offs.x == "auto" ? (canvas.width / scale - c * cw) / 2 : offs.x);
+    const oy = Math.round(offs.y == "auto" ? (canvas.height / scale - r * ch) / 2 : offs.y);
+    ctx.translate(ox, oy);
+  }
+  const { chars, fg: fgs, bg: bgs, weight } = frame;
+  const bgPacked = cssColor(bg);
+  const fonts = [];
+  const fontOf = (w) => fonts[w] ??= (w ? weightString(w) : fontWeight) + ff;
+  if (settings.textAlign == "center") {
+    const widths = [];
+    for (let j = 0;j < r; j++) {
+      const offs = j * c;
+      let totalWidth = 0;
+      for (let i = 0;i < c; i++) {
+        ctx.font = fontOf(weight[offs + i]);
+        const w = ctx.measureText(getChar(frame, offs + i)).width;
+        totalWidth += w;
+        widths[i] = w;
+      }
+      let ox = (canvas.width / scale - totalWidth) * 0.5;
+      const y = j * ch;
+      for (let i = 0;i < c; i++) {
+        const k = offs + i;
+        const x = ox;
+        if (bgs[k] && bgs[k] !== bgPacked) {
+          ctx.fillStyle = colorString(bgs[k]);
+          ctx.fillRect(Math.round(x), y, Math.ceil(widths[i]), ch);
+        }
+        ctx.font = fontOf(weight[k]);
+        ctx.fillStyle = fgs[k] ? colorString(fgs[k]) : fg;
+        ctx.fillText(getChar(frame, k), ox, y);
+        ox += widths[i];
+      }
+    }
+  } else {
+    let font = "";
+    for (let j = 0;j < r; j++) {
+      let col = 0;
+      for (let i = 0;i < c && col < c; i++) {
+        const k = j * c + i;
+        const x = col * cw;
+        const y = j * ch;
+        const cp = chars[k];
+        const empty = cp === 32 || cp === 0;
+        let char = "";
+        let span = 1;
+        if (!empty) {
+          const next = fontOf(weight[k]);
+          if (next !== font)
+            ctx.font = font = next;
+          char = getChar(frame, k);
+          if (cp >= 4352)
+            span = cellSpan(ctx, font, char, cw);
+        }
+        col += span;
+        if (bgs[k] && bgs[k] !== bgPacked) {
+          ctx.fillStyle = colorString(bgs[k]);
+          ctx.fillRect(Math.round(x), y, Math.ceil(cw * span), ch);
+        }
+        if (empty)
+          continue;
+        ctx.fillStyle = fgs[k] ? colorString(fgs[k]) : fg;
+        ctx.fillText(char, x, y);
+      }
+    }
+  }
+  ctx.restore();
+}
+
+// src/storage.ts
+var storage = {
+  store: function(key, obj) {
+    try {
+      localStorage.setItem(key, JSON.stringify(obj));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  },
+  restore: function(key, target) {
+    const obj = JSON.parse(localStorage.getItem(key) || "{}");
+    Object.assign(target, obj);
+    return target;
+  },
+  clear: function(key) {
+    localStorage.removeItem(key);
+  }
+};
+var storage_default = storage;
+
+// src/textrenderer.ts
+import { colorString as colorString2, createFrame, getChar as getChar2, weightString as weightString2 } from "@glyph-engine/core";
+var textrenderer_default = {
+  preferredElementNodeName: "PRE",
+  render: render2
+};
+var states = new WeakMap;
+function render2(context, frame) {
+  const element = context.settings.element;
+  let state = states.get(element);
+  if (!state)
+    states.set(element, state = { back: null });
+  const { cols, rows } = frame;
+  let back = state.back;
+  if (!back || back.cols !== cols || back.rows !== rows) {
+    back = state.back = createFrame(cols, rows);
+    back.chars.fill(4294967295);
+  }
+  while (element.childElementCount < rows) {
+    const span = document.createElement("span");
+    span.style.display = "block";
+    element.appendChild(span);
+  }
+  while (element.childElementCount > rows) {
+    element.removeChild(element.lastChild);
+  }
+  const { chars, fg, bg, weight, html } = frame;
+  const fontWeight = context.settings.fontWeight;
+  for (let j = 0;j < rows; j++) {
+    const start = j * cols;
+    const end = start + cols;
+    let changed = html.size > 0;
+    for (let k = start;k < end && !changed; k++) {
+      changed = chars[k] !== back.chars[k] || fg[k] !== back.fg[k] || bg[k] !== back.bg[k] || weight[k] !== back.weight[k];
+    }
+    if (!changed)
+      continue;
+    back.chars.set(chars.subarray(start, end), start);
+    back.fg.set(fg.subarray(start, end), start);
+    back.bg.set(bg.subarray(start, end), start);
+    back.weight.set(weight.subarray(start, end), start);
+    let markup = "";
+    let tagIsOpen = false;
+    let pf = 0, pb = 0, pw = 0;
+    for (let k = start;k < end; k++) {
+      const extra = html.size > 0 ? html.get(k) : undefined;
+      if (extra?.begin) {
+        if (tagIsOpen) {
+          markup += "</span>";
+          pf = pb = pw = 0;
+          tagIsOpen = false;
+        }
+        markup += extra.begin;
+      }
+      const f = fg[k], b = bg[k], w = weight[k];
+      if (f !== pf || b !== pb || w !== pw) {
+        if (tagIsOpen)
+          markup += "</span>";
+        let css = "";
+        if (f)
+          css += "color:" + colorString2(f) + ";";
+        if (b)
+          css += "background:" + colorString2(b) + ";";
+        if (w && weightString2(w) !== fontWeight)
+          css += "font-weight:" + weightString2(w) + ";";
+        if (css)
+          css = ' style="' + css + '"';
+        markup += "<span" + css + ">";
+        tagIsOpen = true;
+        pf = f;
+        pb = b;
+        pw = w;
+      }
+      markup += getChar2(frame, k);
+      if (extra?.end) {
+        if (tagIsOpen) {
+          markup += "</span>";
+          pf = pb = pw = 0;
+          tagIsOpen = false;
+        }
+        markup += extra.end;
+      }
+    }
+    if (tagIsOpen)
+      markup += "</span>";
+    element.childNodes[j].innerHTML = markup;
+  }
+}
+
+// src/webglrenderer.ts
+import { cssColor as cssColor2 } from "@glyph-engine/core";
+
+// src/glyphatlas.ts
+import { getChar as getChar3, GRAPHEME, weightString as weightString3 } from "@glyph-engine/core";
+var FLAG_COLOR_GLYPH = 1;
+
+class GlyphAtlas {
+  size;
+  upload;
+  key = "";
+  slotW = 0;
+  slotH = 0;
+  perRow = 0;
+  capacity = 0;
+  next = 1;
+  generation = 0;
+  glyphs = new Map;
+  colored = new Uint8Array(0);
+  wide = new Uint8Array(0);
+  scratch = document.createElement("canvas");
+  #ctx = this.scratch.getContext("2d", { willReadFrequently: true });
+  constructor(size, upload) {
+    this.size = size;
+    this.upload = upload;
+  }
+  ensure(slotW, slotH, font) {
+    const key = font + "|" + slotW + "x" + slotH;
+    if (this.key === key)
+      return false;
+    this.key = key;
+    this.slotW = slotW;
+    this.slotH = slotH;
+    this.perRow = Math.floor(this.size / slotW);
+    this.capacity = this.perRow * Math.floor(this.size / slotH);
+    this.colored = new Uint8Array(this.capacity);
+    this.wide = new Uint8Array(this.capacity);
+    this.#forget();
+    this.scratch.width = slotW;
+    this.scratch.height = slotH;
+    return true;
+  }
+  cellSlot(frame, k, defaultWeight, fontSize, family) {
+    const code = frame.chars[k];
+    if (code === 32 || code === 0)
+      return 0;
+    const key = code >= GRAPHEME ? getChar3(frame, k) : code;
+    return this.slot(frame.weight[k], key, getChar3(frame, k), defaultWeight, fontSize, family);
+  }
+  slot(weight, key, char, defaultWeight, fontSize, family) {
+    let slot = this.glyphs.get(weight)?.get(key);
+    if (slot !== undefined)
+      return slot;
+    if (this.next >= this.capacity)
+      this.#forget();
+    slot = this.next++;
+    const ctx = this.#ctx;
+    ctx.clearRect(0, 0, this.slotW, this.slotH);
+    ctx.font = (weight ? weightString3(weight) : defaultWeight) + " " + fontSize + "px " + family;
+    ctx.textBaseline = "top";
+    ctx.fillStyle = "white";
+    ctx.fillText(char, 0, 0);
+    this.colored[slot] = isColorGlyph(ctx.getImageData(0, 0, this.slotW, this.slotH).data) ? 1 : 0;
+    this.wide[slot] = cellSpan(ctx, ctx.font, char, this.slotW / 2) - 1;
+    this.upload(slot % this.perRow * this.slotW, Math.floor(slot / this.perRow) * this.slotH, this.scratch);
+    let byChar = this.glyphs.get(weight);
+    if (!byChar)
+      this.glyphs.set(weight, byChar = new Map);
+    byChar.set(key, slot);
+    return slot;
+  }
+  writeCells(data, frame, fg, bg, fontWeight, fontSize, family) {
+    const { cols, rows, fg: fgs, bg: bgs } = frame;
+    for (let j = 0;j < rows; j++) {
+      const row = j * cols;
+      let col = 0;
+      for (let i = 0;i < cols && col < cols; i++) {
+        const k = row + i;
+        const slot = this.cellSlot(frame, k, fontWeight, fontSize, family);
+        const f = fgs[k] || fg;
+        const b = bgs[k] || bg;
+        let o = (row + col++) * 4;
+        data[o] = slot;
+        data[o + 1] = f;
+        data[o + 2] = b;
+        data[o + 3] = this.colored[slot] ? FLAG_COLOR_GLYPH : 0;
+        if (this.wide[slot] && col < cols) {
+          o = (row + col++) * 4;
+          data[o] = 0;
+          data[o + 1] = f;
+          data[o + 2] = b;
+          data[o + 3] = 0;
+        }
+      }
+    }
+  }
+  #forget() {
+    this.glyphs.clear();
+    this.colored.fill(0);
+    this.wide.fill(0);
+    this.next = 1;
+    this.generation++;
+  }
+}
+function isColorGlyph(px) {
+  for (let i = 0;i < px.length; i += 4) {
+    if (px[i + 3] > 0 && (px[i] !== px[i + 1] || px[i + 1] !== px[i + 2]))
+      return true;
+  }
+  return false;
+}
+
+// src/shaders/grid.frag
+var grid_default = `#version 300 es
+// Draws the whole character grid: one fragment = one screen pixel.
+// Finds its cell, reads the cell texel, samples the glyph atlas, mixes fg/bg.
+// Layering: this cell's background, the left neighbour's glyph overflow (right
+// half of a wide glyph), then this cell's glyph.
+precision highp float;
+precision highp int;
+precision highp usampler2D;
+
+uniform usampler2D u_cells;  // per cell: x = atlas slot, y = fg RGBA8, z = bg RGBA8, w = flags
+uniform sampler2D u_atlas;   // glyphs drawn white by Canvas2D, premultiplied alpha
+uniform vec2 u_cellSize;     // cell size in device pixels (x may be fractional)
+uniform vec2 u_offset;       // grid origin in device pixels, from the top-left
+uniform float u_height;      // canvas height in device pixels (gl_FragCoord is bottom-up)
+uniform ivec2 u_grid;        // cols, rows
+uniform ivec2 u_slotSize;    // atlas slot size in pixels: two cells wide, for wide glyphs
+uniform int u_slotsPerRow;
+uniform vec4 u_background;   // canvas background, also outside the grid
+uniform uint u_backgroundPacked; // same colour as RGBA8: cells with it draw no background
+
+out vec4 outColor;
+
+const uint FLAG_COLOR_GLYPH = 1u; // emoji etc.: keep the glyph's own colours
+
+vec4 unpack(uint c) {
+  return vec4(uvec4(c >> 24, (c >> 16) & 255u, (c >> 8) & 255u, c & 255u)) / 255.0;
+}
+
+// Draws the glyph of cell \`c\` over \`color\`; \`local\` is the pixel relative to
+// that cell's top-left corner.
+vec3 drawGlyph(vec3 color, uvec4 c, vec2 local) {
+  if (c.x == 0u) return color; // slot 0: space
+  int slot = int(c.x);
+  ivec2 origin = ivec2(slot % u_slotsPerRow, slot / u_slotsPerRow) * u_slotSize;
+  ivec2 p = ivec2(local);
+  if (p.x >= u_slotSize.x || p.y >= u_slotSize.y) return color;
+  vec4 glyph = texelFetch(u_atlas, origin + p, 0);
+  vec4 fg = unpack(c.y);
+  bool colorGlyph = (c.w & FLAG_COLOR_GLYPH) != 0u;
+  float coverage = colorGlyph ? glyph.a : glyph.a * fg.a;
+  vec3 ink = colorGlyph ? glyph.rgb : fg.rgb * coverage;
+  return color * (1.0 - coverage) + ink;
+}
+
+void main() {
+  vec2 px = vec2(gl_FragCoord.x, u_height - gl_FragCoord.y) - u_offset;
+  ivec2 cell = ivec2(floor(px / u_cellSize));
+  if (px.x < 0.0 || px.y < 0.0 || cell.x >= u_grid.x || cell.y >= u_grid.y) {
+    outColor = u_background;
+    return;
+  }
+
+  vec3 color = u_background.rgb;
+  vec2 local = px - vec2(cell) * u_cellSize;
+
+  uvec4 c = texelFetch(u_cells, cell, 0);
+  if (c.z != u_backgroundPacked) {
+    vec4 bg = unpack(c.z); // translucent backgrounds blend, as with Canvas2D
+    color = mix(color, bg.rgb, bg.a);
+  }
+  if (cell.x > 0) {
+    uvec4 left = texelFetch(u_cells, cell - ivec2(1, 0), 0);
+    color = drawGlyph(color, left, local + vec2(u_cellSize.x, 0.0));
+  }
+  outColor = vec4(drawGlyph(color, c, local), 1.0);
+}
+`;
+
+// src/shaders/grid.vert
+var grid_default2 = `#version 300 es
+// Fullscreen triangle built from gl_VertexID: no vertex buffers needed.
+void main() {
+  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
+}
+`;
+
+// src/webglrenderer.ts
+var webglrenderer_default = {
+  preferredElementNodeName: "CANVAS",
+  render: render3
+};
+var FALLBACK = "canvas";
+var states2 = new WeakMap;
+var ATLAS_UNIT = 1;
+function render3(context, frame) {
+  const canvas = context.settings.element;
+  let state = states2.get(canvas);
+  if (!state) {
+    const gl = context.settings.textAlign == "center" ? null : canvas.getContext("webgl2", {
+      alpha: false,
+      antialias: false,
+      preserveDrawingBuffer: true
+    });
+    if (gl?.isContextLost())
+      return;
+    state = gl ? createState(gl) : FALLBACK;
+    if (gl) {
+      canvas.addEventListener("webglcontextlost", (e) => e.preventDefault(), {
+        once: true
+      });
+      canvas.addEventListener("webglcontextrestored", () => states2.delete(canvas), { once: true });
+    }
+    states2.set(canvas, state);
+  }
+  if (state === FALLBACK)
+    return canvasrenderer_default.render(context, frame);
+  if (state.gl.isContextLost())
+    return;
+  draw(state, context, frame);
+}
+function createState(gl) {
+  const program = linkProgram(gl, grid_default2, grid_default);
+  const u = (name) => gl.getUniformLocation(program, name);
+  const atlasTexture = gl.createTexture();
+  return {
+    gl,
+    program,
+    uniforms: {
+      cells: u("u_cells"),
+      atlas: u("u_atlas"),
+      cellSize: u("u_cellSize"),
+      offset: u("u_offset"),
+      height: u("u_height"),
+      grid: u("u_grid"),
+      slotSize: u("u_slotSize"),
+      slotsPerRow: u("u_slotsPerRow"),
+      background: u("u_background"),
+      backgroundPacked: u("u_backgroundPacked")
+    },
+    vao: gl.createVertexArray(),
+    cellTexture: gl.createTexture(),
+    cells: new Uint32Array(0),
+    cols: 0,
+    rows: 0,
+    atlasTexture,
+    atlas: new GlyphAtlas(Math.min(2048, gl.getParameter(gl.MAX_TEXTURE_SIZE)), (x, y, glyph) => {
+      gl.activeTexture(gl.TEXTURE0 + ATLAS_UNIT);
+      gl.bindTexture(gl.TEXTURE_2D, atlasTexture);
+      setUnpack(gl, true);
+      gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, gl.RGBA, gl.UNSIGNED_BYTE, glyph);
+    })
+  };
+}
+function draw(s, context, frame) {
+  const { gl, uniforms } = s;
+  const canvas = gl.canvas;
+  const settings = context.settings;
+  const m = context.metrics;
+  const scale = devicePixelRatio;
+  fitCanvas(canvas, context, scale);
+  const cols = context.cols;
+  const rows = context.rows;
+  const cw = m.cellWidth;
+  const ch = Math.round(m.lineHeight);
+  const fontSize = m.fontSize * scale;
+  ensureAtlas(s, 2 * Math.ceil(cw * scale), Math.ceil(ch * scale), fontSize + "px " + m.fontFamily);
+  ensureCells(s, cols, rows);
+  const bg = cssColor2(settings.backgroundColor || "white");
+  const fg = cssColor2(settings.color || "black");
+  const fontWeight = String(settings.fontWeight || "400");
+  const data = s.cells;
+  s.atlas.writeCells(data, frame, fg, bg, fontWeight, fontSize, m.fontFamily);
+  let ox = 0;
+  let oy = 0;
+  if (settings.canvasOffset) {
+    const offs = settings.canvasOffset;
+    ox = Math.round(offs.x == "auto" ? (canvas.width / scale - cols * cw) / 2 : offs.x);
+    oy = Math.round(offs.y == "auto" ? (canvas.height / scale - rows * ch) / 2 : offs.y);
+  }
+  gl.viewport(0, 0, canvas.width, canvas.height);
+  gl.useProgram(s.program);
+  gl.bindVertexArray(s.vao);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, s.cellTexture);
+  setUnpack(gl, false);
+  gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, cols, rows, gl.RGBA_INTEGER, gl.UNSIGNED_INT, data);
+  gl.activeTexture(gl.TEXTURE0 + ATLAS_UNIT);
+  gl.bindTexture(gl.TEXTURE_2D, s.atlasTexture);
+  const a = s.atlas;
+  gl.uniform1i(uniforms.cells, 0);
+  gl.uniform1i(uniforms.atlas, ATLAS_UNIT);
+  gl.uniform2f(uniforms.cellSize, cw * scale, ch * scale);
+  gl.uniform2f(uniforms.offset, ox * scale, oy * scale);
+  gl.uniform1f(uniforms.height, canvas.height);
+  gl.uniform2i(uniforms.grid, cols, rows);
+  gl.uniform2i(uniforms.slotSize, a.slotW, a.slotH);
+  gl.uniform1i(uniforms.slotsPerRow, a.perRow);
+  gl.uniform4f(uniforms.background, (bg >>> 24) / 255, (bg >>> 16 & 255) / 255, (bg >>> 8 & 255) / 255, 1);
+  gl.uniform1ui(uniforms.backgroundPacked, bg);
+  gl.drawArrays(gl.TRIANGLES, 0, 3);
+  gl.bindVertexArray(null);
+}
+function ensureCells(s, cols, rows) {
+  if (s.cols === cols && s.rows === rows)
+    return;
+  const { gl } = s;
+  s.cols = cols;
+  s.rows = rows;
+  s.cells = new Uint32Array(cols * rows * 4);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, s.cellTexture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32UI, cols, rows, 0, gl.RGBA_INTEGER, gl.UNSIGNED_INT, null);
+  setNearest(gl);
+}
+function ensureAtlas(s, slotW, slotH, font) {
+  if (!s.atlas.ensure(slotW, slotH, font))
+    return;
+  const { gl } = s;
+  gl.activeTexture(gl.TEXTURE0 + ATLAS_UNIT);
+  gl.bindTexture(gl.TEXTURE_2D, s.atlasTexture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, s.atlas.size, s.atlas.size, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+  setNearest(gl);
+}
+function setUnpack(gl, premultiply) {
+  gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, premultiply);
+}
+function setNearest(gl) {
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+}
+function linkProgram(gl, vert, frag) {
+  const compile = (type, src) => {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, src);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      throw new Error("Shader compile failed: " + gl.getShaderInfoLog(shader));
+    }
+    return shader;
+  };
+  const program = gl.createProgram();
+  const vs = compile(gl.VERTEX_SHADER, vert);
+  const fs = compile(gl.FRAGMENT_SHADER, frag);
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error("Shader link failed: " + gl.getProgramInfoLog(program));
+  }
+  gl.deleteShader(vs);
+  gl.deleteShader(fs);
+  return program;
+}
+
+// src/webgpurenderer.ts
+import { cssColor as cssColor3 } from "@glyph-engine/core";
+
+// src/shaders/grid.wgsl
+var grid_default3 = `// Draws the whole character grid, as grid.frag does for WebGL2: one fragment =
+// one screen pixel. Finds its cell, reads it, samples the glyph atlas, mixes
+// fg/bg. Layering: this cell's background, the left neighbour's glyph overflow
+// (right half of a wide glyph), then this cell's glyph.
+
+struct Draw {
+  cellSize: vec2f,         // cell size in device pixels (x may be fractional)
+  offset: vec2f,           // grid origin in device pixels, from the top-left
+  grid: vec2u,             // cols, rows
+  slotSize: vec2u,         // atlas slot size in pixels: two cells wide, for wide glyphs
+  background: vec4f,       // canvas background, also outside the grid
+  slotsPerRow: u32,
+  backgroundPacked: u32,   // same colour as RGBA8: cells with it draw no background
+  useOverlay: u32,         // 1: cells flagged in \`overlay\` win over \`cells\`
+}
+
+@group(0) @binding(0) var<uniform> d: Draw;
+@group(0) @binding(1) var<storage, read> cells: array<vec4u>;   // per cell: atlas slot, fg RGBA8, bg RGBA8, flags
+@group(0) @binding(2) var<storage, read> overlay: array<vec4u>; // same layout: what pre()/post() drew over a GPU program
+@group(0) @binding(3) var atlas: texture_2d<f32>;               // glyphs drawn white by Canvas2D, premultiplied alpha
+
+const FLAG_COLOR_GLYPH = 1u; // emoji etc.: keep the glyph's own colours
+const FLAG_OVERLAY = 2u;     // overlay cell present
+
+// Fullscreen triangle built from the vertex index: no vertex buffers needed.
+@vertex
+fn vs(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
+  let p = vec2f(f32((i << 1u) & 2u), f32(i & 2u));
+  return vec4f(p * 2.0 - 1.0, 0.0, 1.0);
+}
+
+fn unpack(c: u32) -> vec4f {
+  return vec4f(f32(c >> 24u), f32((c >> 16u) & 255u), f32((c >> 8u) & 255u), f32(c & 255u)) / 255.0;
+}
+
+fn cellAt(k: u32) -> vec4u {
+  if (d.useOverlay != 0u) {
+    let o = overlay[k];
+    if ((o.w & FLAG_OVERLAY) != 0u) { return o; }
+  }
+  return cells[k];
+}
+
+// Draws the glyph of cell \`c\` over \`color\`; \`local\` is the pixel relative to
+// that cell's top-left corner.
+fn drawGlyph(color: vec3f, c: vec4u, local: vec2f) -> vec3f {
+  if (c.x == 0u) { return color; } // slot 0: space
+  let origin = vec2u(c.x % d.slotsPerRow, c.x / d.slotsPerRow) * d.slotSize;
+  let p = vec2u(local);
+  if (p.x >= d.slotSize.x || p.y >= d.slotSize.y) { return color; }
+  let glyph = textureLoad(atlas, origin + p, 0);
+  let fg = unpack(c.y);
+  let colorGlyph = (c.w & FLAG_COLOR_GLYPH) != 0u;
+  let coverage = select(glyph.a * fg.a, glyph.a, colorGlyph);
+  let ink = select(fg.rgb * coverage, glyph.rgb, colorGlyph);
+  return color * (1.0 - coverage) + ink;
+}
+
+@fragment
+fn fs(@builtin(position) pos: vec4f) -> @location(0) vec4f {
+  let px = pos.xy - d.offset;
+  let cell = vec2i(floor(px / d.cellSize));
+  if (px.x < 0.0 || px.y < 0.0 || cell.x >= i32(d.grid.x) || cell.y >= i32(d.grid.y)) {
+    return d.background;
+  }
+
+  var color = d.background.rgb;
+  let local = px - vec2f(cell) * d.cellSize;
+  let k = u32(cell.y) * d.grid.x + u32(cell.x);
+
+  let c = cellAt(k);
+  if (c.z != d.backgroundPacked) {
+    let bg = unpack(c.z); // translucent backgrounds blend, as with Canvas2D
+    color = mix(color, bg.rgb, bg.a);
+  }
+  if (cell.x > 0) {
+    color = drawGlyph(color, cellAt(k - 1u), local + vec2f(d.cellSize.x, 0.0));
+  }
+  return vec4f(drawGlyph(color, c, local), 1.0);
+}
+`;
+
+// src/shaders/program.wgsl
+var program_default = `// Runs a program's WGSL main() for every cell, like the JS loop in computeFrame.
+// The program's source replaces the PROGRAM line; everything above it is what
+// a program can use.
+
+struct Context {
+  time: f32,      // ms
+  delta: f32,     // ms since the previous frame
+  frame: u32,
+  cols: u32,
+  rows: u32,
+  aspect: f32,    // cell width / height
+  cursor: vec2f,  // in cells (fractional)
+  pressed: u32,   // 1 while the pointer is down
+}
+
+// What main() writes. Colours are 0-1 per channel, alpha included.
+struct Cell {
+  char: u32,          // a code point; glyph(i) gives the i-th of the program's glyphs
+  color: vec4f,       // starts as settings.color
+  background: vec4f,  // starts as settings.backgroundColor
+}
+
+struct GeEngine {
+  ctx: Context,
+  color: vec4f,
+  background: vec4f,
+}
+
+@group(0) @binding(0) var<uniform> ge_engine: GeEngine;
+@group(0) @binding(1) var<storage, read> ge_glyphs: array<u32>; // the program's glyphs, as code points
+@group(0) @binding(2) var<storage, read> ge_slots: array<u32>;  // code point (< 0x10000) -> atlas slot | flags << 16
+@group(0) @binding(3) var<storage, read_write> ge_cells: array<vec4u>;
+
+// The i-th glyph of the program's \`glyphs\` string (clamped to the last one).
+fn glyph(i: u32) -> u32 {
+  return ge_glyphs[min(i, GLYPHS - 1u)];
+}
+
+// PROGRAM
+
+fn ge_pack(c: vec4f) -> u32 {
+  let v = vec4u(round(clamp(c, vec4f(0.0), vec4f(1.0)) * 255.0));
+  return (v.r << 24u) | (v.g << 16u) | (v.b << 8u) | v.a;
+}
+
+@compute @workgroup_size(8, 8)
+fn ge_main(@builtin(global_invocation_id) id: vec3u) {
+  let ctx = ge_engine.ctx;
+  if (id.x >= ctx.cols || id.y >= ctx.rows) { return; }
+  var out = Cell(32u, ge_engine.color, ge_engine.background);
+  main(vec2f(id.xy), ctx, &out);
+  var entry = 0u; // glyphs not in the program's set draw nothing
+  if (out.char < 65536u) { entry = ge_slots[out.char]; }
+  ge_cells[id.y * ctx.cols + id.x] = vec4u(entry & 0xffffu, ge_pack(out.color), ge_pack(out.background), entry >> 16u);
+}
+`;
+
+// src/webgpurenderer.ts
+var webgpurenderer_default = {
+  preferredElementNodeName: "CANVAS",
+  render: render4
+};
+var FLAG_OVERLAY = 2;
+var device;
+async function initWebGPU() {
+  if (device !== undefined)
+    return !!device;
+  try {
+    const adapter = await navigator.gpu?.requestAdapter();
+    device = adapter ? await adapter.requestDevice() : null;
+  } catch {
+    device = null;
+  }
+  device?.lost.then(() => device = null);
+  return !!device;
+}
+var compiled = new Map;
+var PRELUDE_LINES = program_default.slice(0, program_default.indexOf("// PROGRAM")).split(`
+`).length;
+async function compileGpuProgram(wgsl, glyphs) {
+  const dev = device;
+  if (!dev)
+    throw new Error("WebGPU is not available");
+  const id = glyphs + "\x00" + wgsl;
+  if (compiled.has(id))
+    return;
+  const points = [...glyphs].map((c) => c.codePointAt(0));
+  if (points.length === 0)
+    points.push(32);
+  const code = `const GLYPHS: u32 = ${points.length}u;
+` + program_default.replace("// PROGRAM", wgsl);
+  const module = dev.createShaderModule({ code });
+  const errors = (await module.getCompilationInfo()).messages.filter((m) => m.type === "error");
+  if (errors.length) {
+    const lines = errors.map((m) => {
+      const line = m.lineNum - PRELUDE_LINES;
+      return (line > 0 ? `line ${line}:${m.linePos}: ` : "") + m.message;
+    });
+    throw new Error(`WGSL error in the program:
+` + lines.join(`
+`));
+  }
+  const entry = (type) => ({
+    binding: 0,
+    visibility: GPUShaderStage.COMPUTE,
+    buffer: { type }
+  });
+  const layout = dev.createBindGroupLayout({
+    entries: [
+      { ...entry("uniform"), binding: 0 },
+      { ...entry("read-only-storage"), binding: 1 },
+      { ...entry("read-only-storage"), binding: 2 },
+      { ...entry("storage"), binding: 3 }
+    ]
+  });
+  const pipeline = await dev.createComputePipelineAsync({
+    layout: dev.createPipelineLayout({ bindGroupLayouts: [layout] }),
+    compute: { module, entryPoint: "ge_main" }
+  });
+  compiled.set(id, { pipeline, layout, glyphs: points });
+}
+var states3 = new WeakMap;
+function render4(context, frame, gpu) {
+  const dev = device;
+  const canvas = context.settings.element;
+  let s = states3.get(canvas);
+  if (!dev && s)
+    return;
+  if (!dev || context.settings.textAlign == "center")
+    return webglrenderer_default.render(context, frame);
+  if (!s || s.device !== dev)
+    states3.set(canvas, s = createState2(dev, canvas));
+  draw2(s, context, frame, gpu);
+}
+function createState2(dev, canvas) {
+  const ctx = canvas.getContext("webgpu");
+  const format = navigator.gpu.getPreferredCanvasFormat();
+  ctx.configure({ device: dev, format, alphaMode: "opaque" });
+  const module = dev.createShaderModule({ code: grid_default3 });
+  const layout = dev.createBindGroupLayout({
+    entries: [
+      {
+        binding: 0,
+        visibility: GPUShaderStage.FRAGMENT,
+        buffer: { type: "uniform" }
+      },
+      {
+        binding: 1,
+        visibility: GPUShaderStage.FRAGMENT,
+        buffer: { type: "read-only-storage" }
+      },
+      {
+        binding: 2,
+        visibility: GPUShaderStage.FRAGMENT,
+        buffer: { type: "read-only-storage" }
+      },
+      {
+        binding: 3,
+        visibility: GPUShaderStage.FRAGMENT,
+        texture: { sampleType: "float" }
+      }
+    ]
+  });
+  const pipeline = dev.createRenderPipeline({
+    layout: dev.createPipelineLayout({ bindGroupLayouts: [layout] }),
+    vertex: { module, entryPoint: "vs" },
+    fragment: { module, entryPoint: "fs", targets: [{ format }] }
+  });
+  const size = Math.min(2048, dev.limits.maxTextureDimension2D);
+  const s = {
+    device: dev,
+    ctx,
+    pipeline,
+    layout,
+    drawUniforms: dev.createBuffer({
+      size: 64,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    }),
+    drawData: new ArrayBuffer(64),
+    atlasTexture: createAtlasTexture(dev, size),
+    atlas: null,
+    cols: 0,
+    rows: 0,
+    cells: null,
+    overlay: null,
+    cellData: new Uint32Array(0),
+    overlayData: new Uint32Array(0),
+    overlayEmpty: false,
+    bindGroup: null,
+    engineUniforms: dev.createBuffer({
+      size: 80,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    }),
+    engineData: new ArrayBuffer(80),
+    program: null
+  };
+  s.atlas = new GlyphAtlas(size, (x, y, glyph) => {
+    dev.queue.copyExternalImageToTexture({ source: glyph }, { texture: s.atlasTexture, origin: { x, y }, premultipliedAlpha: true }, [glyph.width, glyph.height]);
+  });
+  return s;
+}
+function createAtlasTexture(dev, size) {
+  return dev.createTexture({
+    size: [size, size],
+    format: "rgba8unorm",
+    usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+  });
+}
+function draw2(s, context, frame, gpu) {
+  const dev = s.device;
+  const canvas = context.settings.element;
+  const settings = context.settings;
+  const m = context.metrics;
+  const scale = devicePixelRatio;
+  fitCanvas(canvas, context, scale);
+  const cols = context.cols;
+  const rows = context.rows;
+  const cw = m.cellWidth;
+  const ch = Math.round(m.lineHeight);
+  const fontSize = m.fontSize * scale;
+  if (s.atlas.ensure(2 * Math.ceil(cw * scale), Math.ceil(ch * scale), fontSize + "px " + m.fontFamily)) {
+    s.atlasTexture.destroy();
+    s.atlasTexture = createAtlasTexture(dev, s.atlas.size);
+    s.bindGroup = null;
+  }
+  ensureCells2(s, cols, rows);
+  const bg = cssColor3(settings.backgroundColor || "white");
+  const fg = cssColor3(settings.color || "black");
+  const fontWeight = String(settings.fontWeight || "400");
+  const encoder = dev.createCommandEncoder();
+  if (gpu) {
+    const data = s.overlayData;
+    let any = false;
+    for (let k = 0, n = cols * rows;k < n; k++) {
+      const o = k * 4;
+      if (frame.chars[k] === 0) {
+        data[o] = data[o + 1] = data[o + 2] = data[o + 3] = 0;
+        continue;
+      }
+      any = true;
+      const slot = s.atlas.cellSlot(frame, k, fontWeight, fontSize, m.fontFamily);
+      data[o] = slot;
+      data[o + 1] = frame.fg[k] || fg;
+      data[o + 2] = frame.bg[k] || bg;
+      data[o + 3] = FLAG_OVERLAY | (s.atlas.colored[slot] ? FLAG_COLOR_GLYPH : 0);
+    }
+    if (any || !s.overlayEmpty)
+      dev.queue.writeBuffer(s.overlay, 0, data);
+    s.overlayEmpty = !any;
+    runProgram(s, encoder, context, gpu, fg, bg, fontWeight, fontSize, m.fontFamily);
+  } else {
+    s.atlas.writeCells(s.cellData, frame, fg, bg, fontWeight, fontSize, m.fontFamily);
+    dev.queue.writeBuffer(s.cells, 0, s.cellData);
+  }
+  let ox = 0;
+  let oy = 0;
+  if (settings.canvasOffset) {
+    const offs = settings.canvasOffset;
+    ox = Math.round(offs.x == "auto" ? (canvas.width / scale - cols * cw) / 2 : offs.x);
+    oy = Math.round(offs.y == "auto" ? (canvas.height / scale - rows * ch) / 2 : offs.y);
+  }
+  const f = new Float32Array(s.drawData);
+  const u = new Uint32Array(s.drawData);
+  f.set([cw * scale, ch * scale, ox * scale, oy * scale], 0);
+  u.set([cols, rows, s.atlas.slotW, s.atlas.slotH], 4);
+  f.set([(bg >>> 24) / 255, (bg >>> 16 & 255) / 255, (bg >>> 8 & 255) / 255, 1], 8);
+  u.set([s.atlas.perRow, bg, gpu ? 1 : 0], 12);
+  dev.queue.writeBuffer(s.drawUniforms, 0, s.drawData);
+  s.bindGroup ??= dev.createBindGroup({
+    layout: s.layout,
+    entries: [
+      { binding: 0, resource: { buffer: s.drawUniforms } },
+      { binding: 1, resource: { buffer: s.cells } },
+      { binding: 2, resource: { buffer: s.overlay } },
+      { binding: 3, resource: s.atlasTexture.createView() }
+    ]
+  });
+  const pass = encoder.beginRenderPass({
+    colorAttachments: [
+      {
+        view: s.ctx.getCurrentTexture().createView(),
+        loadOp: "clear",
+        storeOp: "store",
+        clearValue: [0, 0, 0, 1]
+      }
+    ]
+  });
+  pass.setPipeline(s.pipeline);
+  pass.setBindGroup(0, s.bindGroup);
+  pass.draw(3);
+  pass.end();
+  dev.queue.submit([encoder.finish()]);
+}
+function runProgram(s, encoder, context, gpu, fg, bg, fontWeight, fontSize, family) {
+  const dev = s.device;
+  const id = gpu.glyphs + "\x00" + gpu.wgsl;
+  const c = compiled.get(id);
+  if (!c)
+    throw new Error("WGSL program not compiled: run() compiles it before the first frame");
+  let p = s.program;
+  if (!p || p.id !== id) {
+    p?.glyphBuffer.destroy();
+    p?.slotBuffer.destroy();
+    const glyphBuffer = dev.createBuffer({
+      size: c.glyphs.length * 4,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+    });
+    dev.queue.writeBuffer(glyphBuffer, 0, new Uint32Array(c.glyphs));
+    const slotBuffer = dev.createBuffer({
+      size: 65536 * 4,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+    });
+    s.program = p = {
+      id,
+      glyphBuffer,
+      slotBuffer,
+      generation: -1,
+      bindGroup: null
+    };
+  }
+  if (p.generation !== s.atlas.generation) {
+    const slots = new Uint32Array(65536);
+    for (const cp of c.glyphs) {
+      if (cp >= 65536 || cp === 32)
+        continue;
+      const slot = s.atlas.slot(0, cp, String.fromCodePoint(cp), fontWeight, fontSize, family);
+      slots[cp] = slot | (s.atlas.colored[slot] ? FLAG_COLOR_GLYPH : 0) << 16;
+    }
+    dev.queue.writeBuffer(p.slotBuffer, 0, slots);
+    p.generation = s.atlas.generation;
+  }
+  const f = new Float32Array(s.engineData);
+  const u = new Uint32Array(s.engineData);
+  f[0] = context.time;
+  f[1] = context.delta;
+  u[2] = context.frame;
+  u[3] = context.cols;
+  u[4] = context.rows;
+  f[5] = context.metrics.aspect;
+  f[6] = gpu.cursor.x;
+  f[7] = gpu.cursor.y;
+  u[8] = gpu.cursor.pressed ? 1 : 0;
+  f.set(unpack(fg), 12);
+  f.set(unpack(bg), 16);
+  dev.queue.writeBuffer(s.engineUniforms, 0, s.engineData);
+  p.bindGroup ??= dev.createBindGroup({
+    layout: c.layout,
+    entries: [
+      { binding: 0, resource: { buffer: s.engineUniforms } },
+      { binding: 1, resource: { buffer: p.glyphBuffer } },
+      { binding: 2, resource: { buffer: p.slotBuffer } },
+      { binding: 3, resource: { buffer: s.cells } }
+    ]
+  });
+  const pass = encoder.beginComputePass();
+  pass.setPipeline(c.pipeline);
+  pass.setBindGroup(0, p.bindGroup);
+  pass.dispatchWorkgroups(Math.ceil(context.cols / 8), Math.ceil(context.rows / 8));
+  pass.end();
+}
+var unpack = (c) => [c >>> 24, c >>> 16 & 255, c >>> 8 & 255, c & 255].map((v) => v / 255);
+function ensureCells2(s, cols, rows) {
+  if (s.cols === cols && s.rows === rows)
+    return;
+  s.cols = cols;
+  s.rows = rows;
+  const size = Math.max(16, cols * rows * 16);
+  const usage = GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST;
+  s.cells?.destroy();
+  s.overlay?.destroy();
+  s.cells = s.device.createBuffer({ size, usage });
+  s.overlay = s.device.createBuffer({ size, usage });
+  s.cellData = new Uint32Array(cols * rows * 4);
+  s.overlayData = new Uint32Array(cols * rows * 4);
+  s.overlayEmpty = true;
+  s.bindGroup = null;
+  if (s.program)
+    s.program.bindGroup = null;
+}
+
+// src/run.ts
+var renderers = {
+  canvas: canvasrenderer_default,
+  text: textrenderer_default,
+  webgl: webglrenderer_default,
+  webgpu: webgpurenderer_default
+};
+var defaultSettings = {
+  element: null,
+  cols: 0,
+  rows: 0,
+  once: false,
+  fps: 30,
+  renderer: "text",
+  allowSelect: false,
+  restoreState: false
+};
+var CSSStyles = ["backgroundColor", "color", "fontFamily", "fontSize", "fontWeight", "letterSpacing", "lineHeight", "textAlign"];
+function run(program, runSettings = {}, userData = {}) {
+  return new Promise(function(resolve, reject) {
+    const settings = {
+      ...defaultSettings,
+      ...runSettings,
+      ...program.settings
+    };
+    const state = {
+      time: 0,
+      frame: 0,
+      cycle: 0,
+      fps: settings.fps
+    };
+    const LOCAL_STORAGE_KEY_STATE = "currentState";
+    if (settings.restoreState) {
+      storage_default.restore(LOCAL_STORAGE_KEY_STATE, state);
+      state.cycle++;
+      addEventListener("pagehide", () => storage_default.store(LOCAL_STORAGE_KEY_STATE, state));
+    }
+    const renderer = renderers[settings.renderer] || renderers["text"];
+    if (!settings.element) {
+      settings.element = document.createElement(renderer.preferredElementNodeName);
+      document.body.appendChild(settings.element);
+    } else if (settings.element.nodeName == "CANVAS" != (renderer.preferredElementNodeName == "CANVAS")) {
+      console.warn(`The "${settings.renderer}" renderer expects a ${renderer.preferredElementNodeName} target element.`);
+    }
+    for (const s of CSSStyles) {
+      const v = settings[s];
+      if (v)
+        settings.element.style[s] = v;
+    }
+    const eventQueue = [];
+    const pointer = {
+      x: 0,
+      y: 0,
+      pressed: false,
+      px: 0,
+      py: 0,
+      ppressed: false
+    };
+    settings.element.addEventListener("pointermove", (e) => {
+      const rect = settings.element?.getBoundingClientRect();
+      if (!rect)
+        return;
+      pointer.x = e.clientX - rect.left;
+      pointer.y = e.clientY - rect.top;
+      eventQueue.push("pointerMove");
+    });
+    settings.element.addEventListener("pointerdown", (e) => {
+      pointer.pressed = true;
+      eventQueue.push("pointerDown");
+    });
+    settings.element.addEventListener("pointerup", (e) => {
+      pointer.pressed = false;
+      eventQueue.push("pointerUp");
+    });
+    const touchHandler = (e) => {
+      const rect = settings.element?.getBoundingClientRect();
+      if (!rect)
+        return;
+      pointer.x = e.touches[0].clientX - rect.left;
+      pointer.y = e.touches[0].clientY - rect.top;
+      eventQueue.push("pointerMove");
+    };
+    settings.element.addEventListener("touchmove", touchHandler);
+    settings.element.addEventListener("touchstart", touchHandler);
+    settings.element.addEventListener("touchend", touchHandler);
+    settings.element.style.fontStretch = "normal";
+    if (!settings.allowSelect)
+      disableSelect(settings.element);
+    document.fonts.ready.then((e) => {
+      let count = 3;
+      (function __run_thrice__() {
+        if (--count > 0) {
+          requestAnimationFrame(__run_thrice__);
+        } else {
+          prepareGpu().then(boot, reject);
+        }
+      })();
+    });
+    let gpu;
+    async function prepareGpu() {
+      const device = settings.renderer == "webgpu" ? await initWebGPU() : null;
+      if (program.wgsl && device) {
+        await compileGpuProgram(program.wgsl, program.glyphs ?? " ");
+        gpu = { wgsl: program.wgsl, glyphs: program.glyphs ?? " " };
+      } else if (program.wgsl && typeof program.main != "function") {
+        throw new Error(device === false ? "This program needs WebGPU, which this browser does not provide." : 'This program runs on the GPU: set renderer: "webgpu".');
+      }
+    }
+    function boot() {
+      const el = settings.element;
+      let rect = el.getBoundingClientRect();
+      new ResizeObserver(() => rect = el.getBoundingClientRect()).observe(el);
+      const host = {
+        requestFrame: (cb) => requestAnimationFrame(cb),
+        metrics: calcMetrics(el),
+        size: () => rect,
+        pointer,
+        events: eventQueue,
+        render: (context, frame, cursor) => renderer.render(context, frame, gpu && { ...gpu, cursor }),
+        onGpu: !!gpu,
+        storeState: (state) => storage_default.store(LOCAL_STORAGE_KEY_STATE, state)
+      };
+      startLoop(program, settings, userData, state, host, resolve);
+    }
+  });
+}
+function disableSelect(el) {
+  el.style.userSelect = "none";
+  el.style.webkitUserSelect = "none";
+  el.style.userSelect = "none";
+  el.dataset.selectionEnabled = "false";
+}
+function enableSelect(el) {
+  el.style.userSelect = "auto";
+  el.style.webkitUserSelect = "auto";
+  el.style.userSelect = "auto";
+  el.dataset.selectionEnabled = "true";
+}
+function copyContent(el) {
+  const selectionEnabled = !el.dataset.selectionEnabled === false;
+  if (!selectionEnabled)
+    enableSelect(el);
+  const range = document.createRange();
+  range.selectNode(el);
+  const sel = window.getSelection();
+  if (!sel)
+    throw new Error("Could not get selection");
+  sel.removeAllRanges();
+  sel.addRange(range);
+  navigator.clipboard.writeText(el.innerText);
+  sel.removeAllRanges();
+  if (!selectionEnabled)
+    disableSelect(el);
+}
+function calcMetrics(el) {
+  const style = getComputedStyle(el);
+  const fontFamily = style.getPropertyValue("font-family");
+  const fontSize = parseFloat(style.getPropertyValue("font-size"));
+  const lineHeight = parseFloat(style.getPropertyValue("line-height"));
+  let cellWidth;
+  if (el.nodeName == "CANVAS") {
+    const ctx = document.createElement("canvas").getContext("2d");
+    if (!ctx)
+      throw new Error("Could not get 2d context");
+    ctx.font = fontSize + "px " + fontFamily;
+    cellWidth = ctx.measureText("".padEnd(50, "X")).width / 50;
+  } else {
+    const span = document.createElement("span");
+    el.appendChild(span);
+    span.innerHTML = "".padEnd(50, "X");
+    cellWidth = span.getBoundingClientRect().width / 50;
+    el.removeChild(span);
+  }
+  const metrics = {
+    aspect: cellWidth / lineHeight,
+    cellWidth,
+    lineHeight,
+    fontFamily,
+    fontSize,
+    _update: function() {
+      const tmp = calcMetrics(el);
+      for (var k in tmp) {}
+    }
+  };
+  return metrics;
+}
+// src/modules/camera.ts
+var camera_default = { init };
+var video = null;
+function init(callback) {
+  video = video || getUserMedia(callback);
+  return video;
+}
+function getUserMedia(callback) {
+  if (!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)) {
+    throw new DOMException("getUserMedia not supported in this browser");
+  }
+  const video = document.createElement("video");
+  video.setAttribute("playsinline", "");
+  const constraints = {
+    audio: false,
+    video: { facingMode: "user" }
+  };
+  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
+    if ("srcObject" in video) {
+      video.srcObject = stream;
+    } else {
+      video.src = window.URL.createObjectURL(stream);
+    }
+  }).catch(function(err) {
+    let msg = "No camera available.";
+    if (err.code == 1)
+      msg = "User denied access to use camera.";
+    console.log(msg);
+    console.error(err);
+  });
+  video.addEventListener("loadedmetadata", function() {
+    video.play();
+    if (typeof callback === "function")
+      callback(video.srcObject);
+  });
+  return video;
+}
+// src/modules/canvas.ts
+import { num } from "@glyph-engine/core";
+var { clamp, map, mix } = num;
+var MODE_COVER = Symbol();
+var MODE_FIT = Symbol();
+var MODE_CENTER = Symbol();
+var BLACK = { r: 0, g: 0, b: 0, a: 1, v: 0 };
+class Canvas {
+  canvas;
+  ctx;
+  pixels = [];
+  constructor(sourceCanvas) {
+    this.canvas = sourceCanvas || document.createElement("canvas");
+    if (!this.canvas) {
+      throw new Error(`Canvas 2d context is not supported on this browser.
+Can’t sort chars for brightness.`);
+    }
+    this.canvas.width = 1;
+    this.canvas.height = 1;
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error(`Canvas 2d context is not supported on this browser.
+Can’t sort chars for brightness.`);
+    }
+    this.ctx = ctx;
+    this.ctx.putImageData(this.ctx.createImageData(1, 1), 0, 0);
+    this.pixels = [];
+    this.loadPixels();
+  }
+  get width() {
+    return this.canvas.width;
+  }
+  get height() {
+    return this.canvas.height;
+  }
+  resize(dWidth, dHeight) {
+    this.canvas.width = dWidth;
+    this.canvas.height = dHeight;
+    this.pixels.length = 0;
+    return this;
+  }
+  copy(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) {
+    sx = sx || 0;
+    sy = sy || 0;
+    sWidth = sWidth || (source instanceof HTMLImageElement || source instanceof HTMLVideoElement ? source.videoWidth : source.width);
+    sHeight = sHeight || (source instanceof HTMLImageElement || source instanceof HTMLVideoElement ? source.videoHeight : source.height);
+    dx = dx || 0;
+    dy = dy || 0;
+    dWidth = dWidth || this.canvas.width;
+    dHeight = dHeight || this.canvas.height;
+    this.ctx.drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+    this.loadPixels();
+    return this;
+  }
+  image(source) {
+    if (!source)
+      return this;
+    const w = source.videoWidth || source.width;
+    const h = source.videoHeight || source.height;
+    this.resize(w, h);
+    this.copy(source, 0, 0, w, h, 0, 0, w, h);
+    return this;
+  }
+  cover(source, aspect = 1) {
+    centerImage(source, this.canvas, 1, aspect, MODE_COVER);
+    this.loadPixels();
+    return this;
+  }
+  fit(source, aspect = 1) {
+    centerImage(source, this.canvas, 1, aspect, MODE_FIT);
+    this.loadPixels();
+    return this;
+  }
+  center(source, scaleX = 1, scaleY = 1) {
+    centerImage(source, this.canvas, scaleX, scaleY, MODE_CENTER);
+    this.loadPixels();
+    return this;
+  }
+  mirrorX() {
+    const w = this.canvas.width;
+    const h = this.canvas.height;
+    const buf = this.pixels;
+    const half = Math.floor(w / 2);
+    for (let j = 0;j < h; j++) {
+      for (let i = 0;i < half; i++) {
+        const a = w * j + i;
+        const b = w * (j + 1) - i - 1;
+        const t = buf[b];
+        buf[b] = buf[a];
+        buf[a] = t;
+      }
+    }
+    return this;
+  }
+  normalize() {
+    normalizeGray(this.pixels, this.pixels, 0, 1);
+    return this;
+  }
+  quantize(palette) {
+    paletteQuantize(this.pixels, this.pixels, palette);
+    return this;
+  }
+  get(x, y) {
+    if (x < 0 || x >= this.canvas.width)
+      return BLACK;
+    if (y < 0 || y >= this.canvas.height)
+      return BLACK;
+    return this.pixels[x + y * this.canvas.width];
+  }
+  sample(sx, sy, gray = false) {
+    const w = this.canvas.width;
+    const h = this.canvas.height;
+    const x = sx * w - 0.5;
+    const y = sy * h - 0.5;
+    let l = Math.floor(x);
+    let b = Math.floor(y);
+    let r = l + 1;
+    let t = b + 1;
+    const lr = x - l;
+    const bt = y - b;
+    if (gray) {
+      const p1 = mix(this.get(l, b).v || 0, this.get(r, b).v || 0, lr);
+      const p2 = mix(this.get(l, t).v || 0, this.get(r, t).v || 0, lr);
+      return mix(p1, p2, bt);
+    } else {
+      const p1 = mixColors(this.get(l, b), this.get(r, b), lr);
+      const p2 = mixColors(this.get(l, t), this.get(r, t), lr);
+      return mixColors(p1, p2, bt);
+    }
+  }
+  loadPixels() {
+    this.pixels.length = 0;
+    const w = this.canvas.width;
+    const h = this.canvas.height;
+    const data = this.ctx.getImageData(0, 0, w, h).data;
+    let idx = 0;
+    for (let i = 0;i < data.length; i += 4) {
+      const r = data[i];
+      const g = data[i + 1];
+      const b = data[i + 2];
+      const a = data[i + 3] / 255;
+      this.pixels[idx++] = {
+        r,
+        g,
+        b,
+        a,
+        v: toGray(r, g, b)
+      };
+    }
+    return this;
+  }
+  writeTo(buf) {
+    if (Array.isArray(buf)) {
+      for (let i = 0;i < this.pixels.length; i++)
+        buf[i] = this.pixels[i];
+    }
+    return this;
+  }
+  display(target, x = 0, y = 0) {
+    target = target || document.body;
+    this.canvas.style.position = "absolute";
+    this.canvas.style.left = x + "px";
+    this.canvas.style.top = y + "px";
+    this.canvas.style.width = "auto";
+    this.canvas.style.height = "auto";
+    this.canvas.style.zIndex = "10";
+    document.body.appendChild(this.canvas);
+  }
+}
+function mixColors(a, b, amt) {
+  return {
+    r: mix(a.r, b.r, amt),
+    g: mix(a.g, b.g, amt),
+    b: mix(a.b, b.b, amt),
+    v: mix(a.v || 0, b.v || 0, amt)
+  };
+}
+function getElementSize(source) {
+  const type = source.nodeName;
+  const width = type == "VIDEO" ? source.videoWidth : source.width || 0;
+  const height = type == "VIDEO" ? source.videoHeight : source.height || 0;
+  return { width, height };
+}
+function centerImage(sourceCanvas, targetCanvas, scaleX = 1, scaleY = 1, mode = MODE_CENTER) {
+  const s = getElementSize(sourceCanvas);
+  const sa = scaleX * s.width / (s.height * scaleY);
+  const tw = targetCanvas.width;
+  const th = targetCanvas.height;
+  const ta = tw / th;
+  let dw = 0, dh = 0;
+  if (mode == MODE_COVER) {
+    if (sa > ta) {
+      dw = th * sa;
+      dh = th;
+    } else {
+      dw = tw;
+      dh = tw / sa;
+    }
+  } else if (mode == MODE_FIT) {
+    if (sa > ta) {
+      dw = tw;
+      dh = tw / sa;
+    } else {
+      dw = th * sa;
+      dh = th;
+    }
+  } else if (mode == MODE_CENTER) {
+    dw = s.width * scaleX;
+    dh = s.height * scaleY;
+  }
+  const ctx = targetCanvas.getContext("2d");
+  if (!ctx)
+    throw new Error("Canvas 2d context is not supported on this browser.");
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, tw, th);
+  ctx.save();
+  ctx.translate(tw / 2, th / 2);
+  if (!dw || !dh)
+    return;
+  ctx.drawImage(sourceCanvas, -dw / 2, -dh / 2, dw, dh);
+  ctx.restore();
+}
+function toGray(r, g, b) {
+  return Math.round(r * 0.2126 + g * 0.7152 + b * 0.0722) / 255;
+}
+function paletteQuantize(arrayIn, arrayOut, palette) {
+  arrayOut = arrayOut || [];
+  const distFn = (a, b) => {
+    const r = (a.r + b.r) * 0.5;
+    let s = 0;
+    s += (2 + r / 256) * Math.pow(a.r - b.r, 2);
+    s += 4 * Math.pow(a.g - b.g, 2);
+    s += (2 + (255 - r) / 256) * Math.pow(a.b - b.b, 2);
+    return Math.sqrt(s);
+  };
+  for (let i = 0;i < arrayIn.length; i++) {
+    const a = arrayIn[i];
+    let dist = Number.MAX_VALUE;
+    let nearest;
+    for (const b of palette) {
+      const d = distFn(a, b);
+      if (d < dist) {
+        dist = d;
+        nearest = b;
+      }
+    }
+    arrayOut[i] = { ...nearest, v: arrayIn[i].v };
+  }
+  return arrayOut;
+}
+function normalizeGray(arrayIn, arrayOut, lower = 0, upper = 1) {
+  arrayOut = arrayOut || [];
+  let min = Number.MAX_VALUE;
+  let max = 0;
+  for (let i = 0;i < arrayIn.length; i++) {
+    min = Math.min(arrayIn[i].v || 0, min);
+    max = Math.max(arrayIn[i].v || 0, max);
+  }
+  for (let i = 0;i < arrayIn.length; i++) {
+    const v = min == max ? min : map(arrayIn[i].v || 0, min, max, lower, upper);
+    arrayOut[i] = { ...arrayOut[i], v };
+  }
+  return arrayOut;
+}
+// src/modules/filedownload.ts
+var mimeTypes = {
+  js: "text/javascript",
+  txt: "text/plain",
+  png: "image/png",
+  jpg: "text/jpeg"
+};
+function saveSourceAsFile(src, filename) {
+  const ext = getFileExt(filename);
+  const type = mimeTypes[ext];
+  const blob = type ? new Blob([src], { type }) : new Blob([src]);
+  saveBlobAsFile(blob, filename);
+}
+function getFileExt(filename) {
+  const ext = filename.split(".").pop() || "";
+  const exts = ["js", "txt", "png", "jpg"];
+  if (exts.includes(ext)) {
+    return ext;
+  }
+  return "txt";
+}
+function saveBlobAsFile(blob, filename) {
+  const a = document.createElement("a");
+  a.download = filename;
+  a.rel = "noopener";
+  a.href = URL.createObjectURL(blob);
+  setTimeout(() => {
+    URL.revokeObjectURL(a.href);
+  }, 1e4);
+  setTimeout(() => {
+    click(a);
+  }, 0);
+}
+function click(node) {
+  try {
+    node.dispatchEvent(new MouseEvent("click"));
+  } catch (err) {
+    var e = document.createEvent("MouseEvents");
+    e.initMouseEvent("click");
+    node.dispatchEvent(e);
+  }
+}
+
+// src/modules/exportframe.ts
+var warnedNoCanvas = false;
+function exportFrame(context, filename, from = 1, to = from) {
+  const canvas = context.settings.element;
+  if (canvas?.nodeName != "CANVAS") {
+    if (!warnedNoCanvas)
+      console.warn("exportframe.js: Can’t export, a canvas renderer is required.");
+    warnedNoCanvas = true;
+    return;
+  }
+  if (!filename) {
+    console.warn("exportframe.js: Filename not provided.");
+    return;
+  }
+  const m = filename.match(/(.+)\.([0-9a-z]+$)/i) || [];
+  if (m.length < 3) {
+    console.warn("exportframe.js: Invalid filename.");
+    return;
+  }
+  const base = m[1];
+  const ext = m[2];
+  const f = context.frame;
+  if (f >= from && f <= to) {
+    const out = base + "_" + f.toString().padStart(5, "0") + "." + ext;
+    console.info("exportframe.js: Exporting frame " + out + ". Will stop at " + to + ".");
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        console.warn("exportframe.js: No data to export.");
+        return;
+      }
+      saveBlobAsFile(blob, out);
+    });
+  }
+}
+// src/modules/load.ts
+var load_default = { json, image, text };
+function image(url) {
+  return new Promise((resolve, reject) => {
+    const img = new Image;
+    img.onload = () => resolve(img);
+    img.onerror = () => {
+      console.log("Loader: error loading image " + url);
+      resolve(null);
+    };
+    img.src = url;
+  });
+}
+function text(url) {
+  return fetch(url).then((response) => {
+    return response.text();
+  }).catch((err) => {
+    console.log("Loader: error loading text " + url);
+    return "";
+  });
+}
+function json(url) {
+  return fetch(url).then((response) => {
+    return response.json();
+  }).catch((err) => {
+    console.log("Loader: error loading json " + url);
+    return {};
+  });
+}
+
+// src/modules/image.ts
+var image_default = {
+  load
+};
+function load(path) {
+  const source = document.createElement("canvas");
+  source.width = 1;
+  source.height = 1;
+  const can = new Canvas(source);
+  load_default.image(path).then((img) => {
+    if (!img) {
+      console.warn("Image " + path + " could not be loaded.");
+      return;
+    }
+    const imageElement = img;
+    console.log("Image " + path + " loaded. Size: " + imageElement.width + "×" + imageElement.height);
+    can.resize(imageElement.width, imageElement.height);
+    can.copy(imageElement, 0, 0, imageElement.width, imageElement.height, 0, 0, imageElement.width, imageElement.height);
+  }).catch((err) => {
+    console.warn("There was an error loading image " + path + ".");
+  });
+  return can;
+}
+// src/modules/sort.ts
+function sort(charSet, fontFamily, ascending = false) {
+  if (typeof document === "undefined")
+    return charSet;
+  const size = 30;
+  const ctx = document.createElement("canvas").getContext("2d");
+  if (!ctx) {
+    console.warn(`Canvas 2d context is not supported on this browser.
+Can’t sort chars for brightness.`);
+    return charSet;
+  }
+  ctx.canvas.width = size * 2;
+  ctx.canvas.height = size * 2;
+  ctx.canvas.style.right = "0";
+  ctx.canvas.style.top = "0";
+  ctx.canvas.style.position = "absolute";
+  document.body.appendChild(ctx.canvas);
+  if (ctx.getImageData(0, 0, 1, 1).data.length == 0) {
+    console.warn(`getImageData() is not supported on this browser.
+Can’t sort chars for brightness.`);
+    return charSet;
+  }
+  let out = [];
+  for (let i = 0;i < charSet.length; i++) {
+    ctx.fillStyle = "black";
+    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    ctx.fillStyle = "rgb(255,255,255)";
+    ctx.font = size + "px " + fontFamily;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(charSet[i], ctx.canvas.width / 2, ctx.canvas.height / 2);
+    out[i] = {
+      count: 0,
+      char: charSet[i],
+      index: i
+    };
+    const data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data;
+    for (let y = 0;y < ctx.canvas.height; y++) {
+      const oy = y * ctx.canvas.width;
+      for (let x = 0;x < ctx.canvas.width; x++) {
+        let r = data[4 * (x + oy)];
+        out[i].count += r;
+      }
+    }
+  }
+  document.body.removeChild(ctx.canvas);
+  if (ascending) {
+    return out.sort((a, b) => a.count - b.count).map((x) => x.char).join("");
+  } else {
+    return out.sort((a, b) => b.count - a.count).map((x) => x.char).join("");
+  }
+}
+export {
+  calcMetrics,
+  exports_camera as camera,
+  exports_canvas as canvas,
+  copyContent,
+  run as default,
+  exports_exportframe as exportframe,
+  exports_filedownload as filedownload,
+  exports_image as image,
+  exports_load as load,
+  run,
+  exports_sort as sort
+};