textmode.js 0.1.6-beta.1 → 0.1.6-beta.2

package/dist/textmode.esm.min.js

@@ -1,6 +1,6 @@
 var se = Object.defineProperty;
-var ae = (h, e, t) => e in h ? se(h, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[e] = t;
-var o = (h, e, t) => ae(h, typeof e != "symbol" ? e + "" : e, t);
+var ne = (h, e, t) => e in h ? se(h, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[e] = t;
+var o = (h, e, t) => ne(h, typeof e != "symbol" ? e + "" : e, t);
 class F extends Error {
   constructor(t, r, i = {}) {
     const s = F.createFormattedMessage(t, i);
@@ -18,10 +18,10 @@ class F extends Error {
       i += `
 
 📋 Context:`;
-      for (const [s, a] of Object.entries(r)) {
-        const n = F.formatValue(a);
+      for (const [s, n] of Object.entries(r)) {
+        const a = F.formatValue(n);
         i += `
-  - ${s}: ${n}`;
+  - ${s}: ${a}`;
       }
     }
     return i += `
@@ -41,12 +41,12 @@ class F extends Error {
       return t.length === 0 ? "[]" : t.length <= 5 ? `[${t.map((r) => F.formatValue(r)).join(", ")}]` : `[${t.slice(0, 3).map((r) => F.formatValue(r)).join(", ")}, ... +${t.length - 3} more]`;
     if (typeof t == "object") {
       const r = Object.keys(t);
-      return r.length === 0 ? "{}" : r.length <= 3 ? `{ ${r.map((a) => `${a}: ${F.formatValue(t[a])}`).join(", ")} }` : `{ ${r.slice(0, 2).map((s) => `${s}: ${F.formatValue(t[s])}`).join(", ")}, ... +${r.length - 2} more }`;
+      return r.length === 0 ? "{}" : r.length <= 3 ? `{ ${r.map((n) => `${n}: ${F.formatValue(t[n])}`).join(", ")} }` : `{ ${r.slice(0, 2).map((s) => `${s}: ${F.formatValue(t[s])}`).join(", ")}, ... +${r.length - 2} more }`;
     }
     return String(t);
   }
 }
-var ne = /* @__PURE__ */ ((h) => (h[h.SILENT = 0] = "SILENT", h[h.WARNING = 1] = "WARNING", h[h.ERROR = 2] = "ERROR", h[h.THROW = 3] = "THROW", h))(ne || {});
+var ae = /* @__PURE__ */ ((h) => (h[h.SILENT = 0] = "SILENT", h[h.WARNING = 1] = "WARNING", h[h.ERROR = 2] = "ERROR", h[h.THROW = 3] = "THROW", h))(ae || {});
 const E = class E {
   constructor() {
     o(this, "_options", {
@@ -105,7 +105,7 @@ const E = class E {
 };
 o(E, "_instance", null);
 let $ = E;
-const x = $.getInstance();
+const v = $.getInstance();
 class oe {
   constructor(e, t, r = t, i = {}) {
     o(this, "gl");
@@ -189,16 +189,16 @@ class oe {
   get(e, t, r, i) {
     const { gl: s } = this;
     if (e === void 0 && t === void 0) {
-      const a = new Uint8Array(this._width * this._height * 4), n = s.getParameter(s.FRAMEBUFFER_BINDING);
-      return s.bindFramebuffer(s.FRAMEBUFFER, this._framebuffer), s.readPixels(0, 0, this._width, this._height, s.RGBA, s.UNSIGNED_BYTE, a), s.bindFramebuffer(s.FRAMEBUFFER, n), a;
+      const n = new Uint8Array(this._width * this._height * 4), a = s.getParameter(s.FRAMEBUFFER_BINDING);
+      return s.bindFramebuffer(s.FRAMEBUFFER, this._framebuffer), s.readPixels(0, 0, this._width, this._height, s.RGBA, s.UNSIGNED_BYTE, n), s.bindFramebuffer(s.FRAMEBUFFER, a), n;
     } else if (r === void 0 && i === void 0) {
       (e < 0 || t < 0 || e >= this._width || t >= this._height) && (console.warn("The x and y values passed to Framebuffer.get are outside of its range and will be clamped."), e = Math.max(0, Math.min(e, this._width - 1)), t = Math.max(0, Math.min(t, this._height - 1)));
-      const a = new Uint8Array(4), n = s.getParameter(s.FRAMEBUFFER_BINDING);
-      return s.bindFramebuffer(s.FRAMEBUFFER, this._framebuffer), s.readPixels(e, t, 1, 1, s.RGBA, s.UNSIGNED_BYTE, a), s.bindFramebuffer(s.FRAMEBUFFER, n), [a[0], a[1], a[2], a[3]];
+      const n = new Uint8Array(4), a = s.getParameter(s.FRAMEBUFFER_BINDING);
+      return s.bindFramebuffer(s.FRAMEBUFFER, this._framebuffer), s.readPixels(e, t, 1, 1, s.RGBA, s.UNSIGNED_BYTE, n), s.bindFramebuffer(s.FRAMEBUFFER, a), [n[0], n[1], n[2], n[3]];
     } else {
       e = Math.max(0, Math.min(e, this._width - 1)), t = Math.max(0, Math.min(t, this._height - 1)), r = Math.max(1, Math.min(r, this._width - e)), i = Math.max(1, Math.min(i, this._height - t));
-      const a = new Uint8Array(r * i * 4), n = s.getParameter(s.FRAMEBUFFER_BINDING);
-      return s.bindFramebuffer(s.FRAMEBUFFER, this._framebuffer), s.readPixels(e, t, r, i, s.RGBA, s.UNSIGNED_BYTE, a), s.bindFramebuffer(s.FRAMEBUFFER, n), a;
+      const n = new Uint8Array(r * i * 4), a = s.getParameter(s.FRAMEBUFFER_BINDING);
+      return s.bindFramebuffer(s.FRAMEBUFFER, this._framebuffer), s.readPixels(e, t, r, i, s.RGBA, s.UNSIGNED_BYTE, n), s.bindFramebuffer(s.FRAMEBUFFER, a), n;
     }
   }
   /**
@@ -244,13 +244,13 @@ class M {
     /** Bytes per vertex: depends on position format (vec2 vs vec3) */
     o(this, "bytesPerVertex");
     this.gl = e, this.bytesPerVertex = 16;
-    const a = e.getParameter(e.VIEWPORT), n = a[2], l = a[3], c = e.getParameter(e.FRAMEBUFFER_BINDING) !== null, u = t / n * 2 - 1, d = (t + i) / n * 2 - 1;
+    const n = e.getParameter(e.VIEWPORT), a = n[2], l = n[3], c = e.getParameter(e.FRAMEBUFFER_BINDING) !== null, u = t / a * 2 - 1, d = (t + i) / a * 2 - 1;
     let f, g;
     c ? (f = r / l * 2 - 1, g = (r + s) / l * 2 - 1) : (f = 1 - r / l * 2, g = 1 - (r + s) / l * 2);
     let _, p, b, C;
     _ = u, b = d, p = f, C = g;
-    const v = this.generateVertices(_, p, b, C);
-    this.vertexBuffer = e.createBuffer(), e.bindBuffer(e.ARRAY_BUFFER, this.vertexBuffer), e.bufferData(e.ARRAY_BUFFER, v, e.STATIC_DRAW);
+    const x = this.generateVertices(_, p, b, C);
+    this.vertexBuffer = e.createBuffer(), e.bindBuffer(e.ARRAY_BUFFER, this.vertexBuffer), e.bufferData(e.ARRAY_BUFFER, x, e.STATIC_DRAW);
   }
   /**
    * Generate vertex data for the rectangle with texture coordinates
@@ -301,11 +301,11 @@ class M {
   }
 }
 class he extends Q {
-  constructor(t, r, i, s, a) {
+  constructor(t, r, i, s, n) {
     super(t, r, i);
     o(this, "width");
     o(this, "height");
-    this.width = s, this.height = a;
+    this.width = s, this.height = n;
   }
   /**
    * Render the filled rectangle using the existing Rectangle geometry.
@@ -320,12 +320,12 @@ class he extends Q {
    */
   renderStroke(t) {
     if (t <= 0) return;
-    const r = new M(this.gl, this.x, this.y, this.width, t), i = new M(this.gl, this.x + this.width - t, this.y, t, this.height), s = new M(this.gl, this.x, this.y + this.height - t, this.width, t), a = new M(this.gl, this.x, this.y, t, this.height);
-    r.render(), i.render(), s.render(), a.render();
+    const r = new M(this.gl, this.x, this.y, this.width, t), i = new M(this.gl, this.x + this.width - t, this.y, t, this.height), s = new M(this.gl, this.x, this.y + this.height - t, this.width, t), n = new M(this.gl, this.x, this.y, t, this.height);
+    r.render(), i.render(), s.render(), n.render();
   }
 }
 class le {
-  constructor(e, t, r, i, s, a) {
+  constructor(e, t, r, i, s, n) {
     /** The WebGL rendering context */
     o(this, "gl");
     /** The vertex buffer containing position and texture coordinates */
@@ -335,13 +335,13 @@ class le {
     /** Bytes per vertex: vec2+vec2 = 16 bytes */
     o(this, "bytesPerVertex");
     this.gl = e, this.bytesPerVertex = 16;
-    const n = e.getParameter(e.VIEWPORT), l = n[2], c = n[3], u = e.getParameter(e.FRAMEBUFFER_BINDING) !== null, d = i - t, f = s - r, g = Math.sqrt(d * d + f * f);
+    const a = e.getParameter(e.VIEWPORT), l = a[2], c = a[3], u = e.getParameter(e.FRAMEBUFFER_BINDING) !== null, d = i - t, f = s - r, g = Math.sqrt(d * d + f * f);
     if (g === 0) {
       const ie = this.generateVertices(0, 0, 0, 0);
       this.vertexBuffer = e.createBuffer(), e.bindBuffer(e.ARRAY_BUFFER, this.vertexBuffer), e.bufferData(e.ARRAY_BUFFER, ie, e.STATIC_DRAW);
       return;
     }
-    const _ = d / g, b = -(f / g), C = _, v = a / 2, w = t + b * v, A = r + C * v, R = t - b * v, S = r - C * v, P = i + b * v, D = s + C * v, Z = i - b * v, W = s - C * v, J = w / l * 2 - 1, K = R / l * 2 - 1, ee = P / l * 2 - 1, te = Z / l * 2 - 1;
+    const _ = d / g, b = -(f / g), C = _, x = n / 2, w = t + b * x, A = r + C * x, R = t - b * x, S = r - C * x, P = i + b * x, D = s + C * x, Z = i - b * x, W = s - C * x, J = w / l * 2 - 1, K = R / l * 2 - 1, ee = P / l * 2 - 1, te = Z / l * 2 - 1;
     let B, G, V, k;
     u ? (B = A / c * 2 - 1, G = S / c * 2 - 1, V = D / c * 2 - 1, k = W / c * 2 - 1) : (B = 1 - A / c * 2, G = 1 - S / c * 2, V = 1 - D / c * 2, k = 1 - W / c * 2);
     const re = this.generateLineVertices(
@@ -399,7 +399,7 @@ class le {
    * Uses the four corners calculated based on line direction and thickness
    * @private
    */
-  generateLineVertices(e, t, r, i, s, a, n, l) {
+  generateLineVertices(e, t, r, i, s, n, a, l) {
     return new Float32Array([
       e,
       t,
@@ -412,7 +412,7 @@ class le {
       1,
       // corner2 (start - perpendicular)
       s,
-      a,
+      n,
       1,
       0,
       // corner3 (end + perpendicular)
@@ -421,13 +421,13 @@ class le {
       0,
       1,
       // corner2 (start - perpendicular)
-      n,
+      a,
       l,
       1,
       1,
       // corner4 (end - perpendicular)
       s,
-      a,
+      n,
       1,
       0
       // corner3 (end + perpendicular)
@@ -444,11 +444,11 @@ class le {
   }
 }
 class ce extends Q {
-  constructor(t, r, i, s, a) {
+  constructor(t, r, i, s, n) {
     super(t, r, i);
     o(this, "x2");
     o(this, "y2");
-    this.x2 = s, this.y2 = a;
+    this.x2 = s, this.y2 = n;
   }
   /**
    * Lines don't support fill rendering - this method does nothing.
@@ -477,8 +477,8 @@ class y {
   createProgram(e, t) {
     const r = this.createShader(this.gl.VERTEX_SHADER, e), i = this.createShader(this.gl.FRAGMENT_SHADER, t), s = this.gl.createProgram();
     if (this.gl.attachShader(s, r), this.gl.attachShader(s, i), this.gl.linkProgram(s), !this.gl.getProgramParameter(s, this.gl.LINK_STATUS)) {
-      const a = this.gl.getProgramInfoLog(s);
-      throw new Error(`Shader program link error: ${a}`);
+      const n = this.gl.getProgramInfoLog(s);
+      throw new Error(`Shader program link error: ${n}`);
     }
     return this.gl.deleteShader(r), this.gl.deleteShader(i), s;
   }
@@ -528,7 +528,7 @@ class y {
       this.gl.uniform1i(r, t ? 1 : 0);
     else if (Array.isArray(t))
       if (i && (i.type === this.gl.INT_VEC2 || i.type === this.gl.INT_VEC3 || i.type === this.gl.INT_VEC4)) {
-        const s = t.map((a) => Math.floor(a));
+        const s = t.map((n) => Math.floor(n));
         switch (s.length) {
           case 2:
             this.gl.uniform2iv(r, s);
@@ -757,8 +757,8 @@ class fe {
       s.renderFill(), this.currentShader = null;
       return;
     }
-    const a = this.solidColorShader, { centerX: n, centerY: l, radians: c, aspectRatio: u } = this.calculateRotationParams(e, t, r, i);
-    this.fillMode && (this.shader(a), this.setUniform("u_color", this.currentFillColor), this.setUniform("u_rotation", c), this.setUniform("u_center", [n, l]), this.setUniform("u_aspectRatio", u), s.renderFill()), this.strokeMode && (this.shader(a), this.setUniform("u_color", this.currentStrokeColor), this.setUniform("u_rotation", c), this.setUniform("u_center", [n, l]), this.setUniform("u_aspectRatio", u), s.renderStroke(this.currentStrokeWeight)), this.currentShader = null;
+    const n = this.solidColorShader, { centerX: a, centerY: l, radians: c, aspectRatio: u } = this.calculateRotationParams(e, t, r, i);
+    this.fillMode && (this.shader(n), this.setUniform("u_color", this.currentFillColor), this.setUniform("u_rotation", c), this.setUniform("u_center", [a, l]), this.setUniform("u_aspectRatio", u), s.renderFill()), this.strokeMode && (this.shader(n), this.setUniform("u_color", this.currentStrokeColor), this.setUniform("u_rotation", c), this.setUniform("u_center", [a, l]), this.setUniform("u_aspectRatio", u), s.renderStroke(this.currentStrokeWeight)), this.currentShader = null;
   }
   /**
    * Draw a line from (x1, y1) to (x2, y2) with the current stroke settings.
@@ -773,23 +773,23 @@ class fe {
     const s = new ce(this.gl, e, t, r, i);
     if (this.currentShader !== null) {
       if (this.currentRotation !== 0) {
-        const p = (e + r) / 2, b = (t + i) / 2, C = Math.abs(r - e), v = Math.abs(i - t), { centerX: w, centerY: A, radians: R, aspectRatio: S } = this.calculateRotationParams(p - C / 2, b - v / 2, C, v);
+        const p = (e + r) / 2, b = (t + i) / 2, C = Math.abs(r - e), x = Math.abs(i - t), { centerX: w, centerY: A, radians: R, aspectRatio: S } = this.calculateRotationParams(p - C / 2, b - x / 2, C, x);
         this.setUniform("u_rotation", R), this.setUniform("u_center", [w, A]), this.setUniform("u_aspectRatio", S);
       } else
         this.setUniform("u_rotation", 0), this.setUniform("u_center", [0, 0]), this.setUniform("u_aspectRatio", 1);
       s.renderStroke(this.currentStrokeWeight), this.currentShader = null;
       return;
     }
-    const a = this.solidColorShader, n = (e + r) / 2, l = (t + i) / 2, c = Math.abs(r - e), u = Math.abs(i - t), { centerX: d, centerY: f, radians: g, aspectRatio: _ } = this.calculateRotationParams(n - c / 2, l - u / 2, c, u);
-    this.shader(a), this.setUniform("u_color", this.currentStrokeColor), this.setUniform("u_rotation", g), this.setUniform("u_center", [d, f]), this.setUniform("u_aspectRatio", _), s.renderStroke(this.currentStrokeWeight), this.currentShader = null;
+    const n = this.solidColorShader, a = (e + r) / 2, l = (t + i) / 2, c = Math.abs(r - e), u = Math.abs(i - t), { centerX: d, centerY: f, radians: g, aspectRatio: _ } = this.calculateRotationParams(a - c / 2, l - u / 2, c, u);
+    this.shader(n), this.setUniform("u_color", this.currentStrokeColor), this.setUniform("u_rotation", g), this.setUniform("u_center", [d, f]), this.setUniform("u_aspectRatio", _), s.renderStroke(this.currentStrokeWeight), this.currentShader = null;
   }
   /**
    * Calculate rotation parameters for built-in shaders (NDC coordinates)
    */
   calculateRotationParams(e, t, r, i) {
-    const s = this.gl.getParameter(this.gl.VIEWPORT), a = s[2], n = s[3], l = a / n, c = this.gl.getParameter(this.gl.FRAMEBUFFER_BINDING) !== null, u = e + r / 2, d = t + i / 2, f = u / a * 2 - 1;
+    const s = this.gl.getParameter(this.gl.VIEWPORT), n = s[2], a = s[3], l = n / a, c = this.gl.getParameter(this.gl.FRAMEBUFFER_BINDING) !== null, u = e + r / 2, d = t + i / 2, f = u / n * 2 - 1;
     let g;
-    c ? g = d / n * 2 - 1 : g = 1 - d / n * 2;
+    c ? g = d / a * 2 - 1 : g = 1 - d / a * 2;
     const _ = this.currentRotation * Math.PI / 180;
     return { centerX: f, centerY: g, radians: _, aspectRatio: l };
   }
@@ -812,10 +812,11 @@ class fe {
     this.gl.clearColor(e, t, r, i), this.gl.clear(this.gl.COLOR_BUFFER_BIT);
   }
   /**
-   * Ensure viewport matches canvas dimensions
+   * Ensure viewport matches canvas dimensions, optionally using custom dimensions for CSS transforms
    */
-  resetViewport() {
-    this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+  resetViewport(e, t) {
+    const r = e || this.gl.canvas.width, i = t || this.gl.canvas.height;
+    this.gl.viewport(0, 0, r, i);
   }
   /**
    * Get the WebGL context
@@ -835,18 +836,18 @@ class fe {
    */
   image(e, t, r, i, s) {
     this.shader(this.imageShader), this.setUniform("u_texture", e.texture);
-    const { centerX: a, centerY: n, radians: l, aspectRatio: c } = this.calculateRotationParams(
+    const { centerX: n, centerY: a, radians: l, aspectRatio: c } = this.calculateRotationParams(
       t,
       r,
       i ?? e.width,
       s ?? e.height
     );
-    this.setUniform("u_rotation", l), this.setUniform("u_center", [a, n]), this.setUniform("u_aspectRatio", c), this.rect(t, r, i ?? e.width, s ?? e.height);
+    this.setUniform("u_rotation", l), this.setUniform("u_center", [n, a]), this.setUniform("u_aspectRatio", c), this.rect(t, r, i ?? e.width, s ?? e.height);
   }
 }
 var m = {};
 m.parse = function(h) {
-  var e = function(s, a, n, l) {
+  var e = function(s, n, a, l) {
     var c = m.T, u = {
       cmap: c.cmap,
       head: c.head,
@@ -855,9 +856,9 @@ m.parse = function(h) {
       hmtx: c.hmtx,
       loca: c.loca,
       glyf: c.glyf
-    }, d = { _data: s, _index: a, _offset: n };
+    }, d = { _data: s, _index: n, _offset: a };
     for (var f in u) {
-      var g = m.findTable(s, f, n);
+      var g = m.findTable(s, f, a);
       if (g) {
         var _ = g[0], p = l[_];
         p == null && (p = u[f].parseTab(s, _, g[1], d)), d[f] = l[_] = p;
@@ -868,11 +869,11 @@ m.parse = function(h) {
   return [i];
 };
 m.findTable = function(h, e, t) {
-  for (var r = m.B, i = r.readUshort(h, t + 4), s = t + 12, a = 0; a < i; a++) {
-    var n = r.readASCII(h, s, 4);
+  for (var r = m.B, i = r.readUshort(h, t + 4), s = t + 12, n = 0; n < i; n++) {
+    var a = r.readASCII(h, s, 4);
     r.readUint(h, s + 4);
     var l = r.readUint(h, s + 8), c = r.readUint(h, s + 12);
-    if (n == e) return [l, c];
+    if (a == e) return [l, c];
     s += 16;
   }
   return null;
@@ -914,11 +915,11 @@ m.T.cmap = {
   parseTab: function(h, e, t) {
     var r = { tables: [], ids: {}, off: e };
     h = new Uint8Array(h.buffer, e, t), e = 0;
-    var i = m.B, s = i.readUshort, a = m.T.cmap;
+    var i = m.B, s = i.readUshort, n = m.T.cmap;
     s(h, e), e += 2;
-    var n = s(h, e);
+    var a = s(h, e);
     e += 2;
-    for (var l = [], c = 0; c < n; c++) {
+    for (var l = [], c = 0; c < a; c++) {
       var u = s(h, e);
       e += 2;
       var d = s(h, e);
@@ -931,16 +932,16 @@ m.T.cmap = {
         var p = {};
         l.push(f);
         var b = p.format = s(h, f);
-        b == 4 ? p = a.parse4(h, f, p) : b == 12 && (p = a.parse12(h, f, p)), r.tables.push(p);
+        b == 4 ? p = n.parse4(h, f, p) : b == 12 && (p = n.parse12(h, f, p)), r.tables.push(p);
       }
       r.ids[g] != null && console.log("multiple tables for one platform+encoding: " + g), r.ids[g] = _;
     }
     return r;
   },
   parse4: function(h, e, t) {
-    var r = m.B, i = r.readUshort, s = r.readUshorts, a = e;
+    var r = m.B, i = r.readUshort, s = r.readUshorts, n = e;
     e += 2;
-    var n = i(h, e);
+    var a = i(h, e);
     e += 2, i(h, e), e += 2;
     var l = i(h, e);
     e += 2;
@@ -948,15 +949,15 @@ m.T.cmap = {
     t.searchRange = i(h, e), e += 2, t.entrySelector = i(h, e), e += 2, t.rangeShift = i(h, e), e += 2, t.endCount = s(h, e, c), e += c * 2, e += 2, t.startCount = s(h, e, c), e += c * 2, t.idDelta = [];
     for (var u = 0; u < c; u++)
       t.idDelta.push(r.readShort(h, e)), e += 2;
-    return t.idRangeOffset = s(h, e, c), e += c * 2, t.glyphIdArray = s(h, e, a + n - e >> 1), t;
+    return t.idRangeOffset = s(h, e, c), e += c * 2, t.glyphIdArray = s(h, e, n + a - e >> 1), t;
   },
   parse12: function(h, e, t) {
     var r = m.B, i = r.readUint;
     e += 4, i(h, e), e += 4, i(h, e), e += 4;
     var s = i(h, e) * 3;
     e += 4;
-    for (var a = t.groups = new Uint32Array(s), n = 0; n < s; n += 3)
-      a[n] = i(h, e + (n << 2)), a[n + 1] = i(h, e + (n << 2) + 4), a[n + 2] = i(h, e + (n << 2) + 8);
+    for (var n = t.groups = new Uint32Array(s), a = 0; a < s; a += 3)
+      n[a] = i(h, e + (a << 2)), n[a + 1] = i(h, e + (a << 2) + 4), n[a + 2] = i(h, e + (a << 2) + 8);
     return t;
   }
 };
@@ -987,20 +988,20 @@ m.T.hhea = {
       "res3",
       "metricDataFormat",
       "numberOfHMetrics"
-    ], a = 0; a < s.length; a++) {
-      var n = s[a], l = n == "advanceWidthMax" || n == "numberOfHMetrics" ? r.readUshort : r.readShort;
-      i[n] = l(h, e + a * 2);
+    ], n = 0; n < s.length; n++) {
+      var a = s[n], l = a == "advanceWidthMax" || a == "numberOfHMetrics" ? r.readUshort : r.readShort;
+      i[a] = l(h, e + n * 2);
     }
     return i;
   }
 };
 m.T.hmtx = {
   parseTab: function(h, e, t, r) {
-    for (var i = m.B, s = [], a = [], n = r.maxp.numGlyphs, l = r.hhea.numberOfHMetrics, c = 0, u = 0, d = 0; d < l; )
-      c = i.readUshort(h, e + (d << 2)), u = i.readShort(h, e + (d << 2) + 2), s.push(c), a.push(u), d++;
-    for (; d < n; )
-      s.push(c), a.push(u), d++;
-    return { aWidth: s, lsBearing: a };
+    for (var i = m.B, s = [], n = [], a = r.maxp.numGlyphs, l = r.hhea.numberOfHMetrics, c = 0, u = 0, d = 0; d < l; )
+      c = i.readUshort(h, e + (d << 2)), u = i.readShort(h, e + (d << 2) + 2), s.push(c), n.push(u), d++;
+    for (; d < a; )
+      s.push(c), n.push(u), d++;
+    return { aWidth: s, lsBearing: n };
   }
 };
 m.T.maxp = {
@@ -1011,55 +1012,55 @@ m.T.maxp = {
 };
 m.T.loca = {
   parseTab: function(h, e, t, r) {
-    var i = m.B, s = [], a = r.head.indexToLocFormat, n = r.maxp.numGlyphs + 1;
-    if (a == 0) for (var l = 0; l < n; l++) s.push(i.readUshort(h, e + (l << 1)) << 1);
-    if (a == 1) for (var l = 0; l < n; l++) s.push(i.readUint(h, e + (l << 2)));
+    var i = m.B, s = [], n = r.head.indexToLocFormat, a = r.maxp.numGlyphs + 1;
+    if (n == 0) for (var l = 0; l < a; l++) s.push(i.readUshort(h, e + (l << 1)) << 1);
+    if (n == 1) for (var l = 0; l < a; l++) s.push(i.readUint(h, e + (l << 2)));
     return s;
   }
 };
 m.T.glyf = {
   parseTab: function(h, e, t, r) {
-    for (var i = [], s = r.maxp.numGlyphs, a = 0; a < s; a++) i.push(null);
+    for (var i = [], s = r.maxp.numGlyphs, n = 0; n < s; n++) i.push(null);
     return i;
   },
   _parseGlyf: function(h, e) {
     var t = m.B, r = h._data, i = h.loca;
     if (i[e] == i[e + 1]) return null;
-    var s = m.findTable(r, "glyf", h._offset)[0] + i[e], a = {};
-    if (a.noc = t.readShort(r, s), s += 2, a.xMin = t.readShort(r, s), s += 2, a.yMin = t.readShort(r, s), s += 2, a.xMax = t.readShort(r, s), s += 2, a.yMax = t.readShort(r, s), s += 2, a.xMin >= a.xMax || a.yMin >= a.yMax) return null;
-    if (a.noc > 0) {
-      a.endPts = [];
-      for (var n = 0; n < a.noc; n++)
-        a.endPts.push(t.readUshort(r, s)), s += 2;
+    var s = m.findTable(r, "glyf", h._offset)[0] + i[e], n = {};
+    if (n.noc = t.readShort(r, s), s += 2, n.xMin = t.readShort(r, s), s += 2, n.yMin = t.readShort(r, s), s += 2, n.xMax = t.readShort(r, s), s += 2, n.yMax = t.readShort(r, s), s += 2, n.xMin >= n.xMax || n.yMin >= n.yMax) return null;
+    if (n.noc > 0) {
+      n.endPts = [];
+      for (var a = 0; a < n.noc; a++)
+        n.endPts.push(t.readUshort(r, s)), s += 2;
       var l = t.readUshort(r, s);
       if (s += 2, r.length - s < l) return null;
       s += l;
-      var c = a.endPts[a.noc - 1] + 1;
-      a.flags = [];
-      for (var n = 0; n < c; n++) {
+      var c = n.endPts[n.noc - 1] + 1;
+      n.flags = [];
+      for (var a = 0; a < c; a++) {
         var u = r[s];
-        if (s++, a.flags.push(u), u & 8) {
+        if (s++, n.flags.push(u), u & 8) {
           var d = r[s];
           s++;
           for (var f = 0; f < d; f++)
-            a.flags.push(u), n++;
+            n.flags.push(u), a++;
         }
       }
-      a.xs = [];
-      for (var n = 0; n < c; n++) {
-        var g = (a.flags[n] & 2) != 0, _ = (a.flags[n] & 16) != 0;
-        g ? (a.xs.push(_ ? r[s] : -r[s]), s++) : _ ? a.xs.push(0) : (a.xs.push(t.readShort(r, s)), s += 2);
+      n.xs = [];
+      for (var a = 0; a < c; a++) {
+        var g = (n.flags[a] & 2) != 0, _ = (n.flags[a] & 16) != 0;
+        g ? (n.xs.push(_ ? r[s] : -r[s]), s++) : _ ? n.xs.push(0) : (n.xs.push(t.readShort(r, s)), s += 2);
       }
-      a.ys = [];
-      for (var n = 0; n < c; n++) {
-        var g = (a.flags[n] & 4) != 0, _ = (a.flags[n] & 32) != 0;
-        g ? (a.ys.push(_ ? r[s] : -r[s]), s++) : _ ? a.ys.push(0) : (a.ys.push(t.readShort(r, s)), s += 2);
+      n.ys = [];
+      for (var a = 0; a < c; a++) {
+        var g = (n.flags[a] & 4) != 0, _ = (n.flags[a] & 32) != 0;
+        g ? (n.ys.push(_ ? r[s] : -r[s]), s++) : _ ? n.ys.push(0) : (n.ys.push(t.readShort(r, s)), s += 2);
       }
-      for (var p = 0, b = 0, n = 0; n < c; n++)
-        p += a.xs[n], b += a.ys[n], a.xs[n] = p, a.ys[n] = b;
+      for (var p = 0, b = 0, a = 0; a < c; a++)
+        p += n.xs[a], b += n.ys[a], n.xs[a] = p, n.ys[a] = b;
     } else
-      a.parts = [];
-    return a;
+      n.parts = [];
+    return n;
   }
 };
 typeof module < "u" && module.exports ? module.exports = m : typeof window < "u" && (window.Typr = m);
@@ -1094,9 +1095,9 @@ class me {
     for (let r = 0; r < e.startCount.length; r++) {
       const i = e.startCount[r], s = e.endCount[r];
       if (!(i === 65535 && s === 65535)) {
-        for (let a = i; a <= s; a++)
-          if (this._calculateGlyphIndexFormat4(e, a, r) > 0) {
-            const l = String.fromCodePoint(a);
+        for (let n = i; n <= s; n++)
+          if (this._calculateGlyphIndexFormat4(e, n, r) > 0) {
+            const l = String.fromCodePoint(n);
             t.push(l);
           }
       }
@@ -1113,10 +1114,10 @@ class me {
     if (!e.groups)
       return t;
     for (let r = 0; r < e.groups.length; r += 3) {
-      const i = e.groups[r], s = e.groups[r + 1], a = e.groups[r + 2];
-      for (let n = i; n <= s; n++)
-        if (a + (n - i) > 0) {
-          const c = String.fromCodePoint(n);
+      const i = e.groups[r], s = e.groups[r + 1], n = e.groups[r + 2];
+      for (let a = i; a <= s; a++)
+        if (n + (a - i) > 0) {
+          const c = String.fromCodePoint(a);
           t.push(c);
         }
     }
@@ -1180,13 +1181,13 @@ class ge {
    * @returns Object containing framebuffer, columns, and rows
    */
   createTextureAtlas(e, t, r, i) {
-    const s = e.length, a = Math.ceil(Math.sqrt(s)), n = Math.ceil(s / a), l = t.width * a, c = t.height * n;
-    this._setupCanvas(l, c, r, i), this._renderCharactersToCanvas(e, t, a, r), this._applyBlackWhiteThreshold();
+    const s = e.length, n = Math.ceil(Math.sqrt(s)), a = Math.ceil(s / n), l = t.width * n, c = t.height * a;
+    this._setupCanvas(l, c, r, i), this._renderCharactersToCanvas(e, t, n, r), this._applyBlackWhiteThreshold();
     const u = this._renderer.createFramebuffer(l, c, { filter: "nearest" });
     return u.update(this._textureCanvas), {
       framebuffer: u,
-      columns: a,
-      rows: n
+      columns: n,
+      rows: a
     };
   }
   /**
@@ -1210,7 +1211,7 @@ class ge {
    */
   _renderCharactersToCanvas(e, t, r, i) {
     for (let s = 0; s < e.length; s++) {
-      const a = s % r, n = Math.floor(s / r), l = a * t.width + t.width * 0.5, c = n * t.height + t.height * 0.5, u = Math.round(l - t.width * 0.5), d = Math.round(c - i * 0.5);
+      const n = s % r, a = Math.floor(s / r), l = n * t.width + t.width * 0.5, c = a * t.height + t.height * 0.5, u = Math.round(l - t.width * 0.5), d = Math.round(c - i * 0.5);
       this._textureContext.fillText(e[s].character, u, d);
     }
   }
@@ -1223,8 +1224,8 @@ class ge {
   _applyBlackWhiteThreshold(e = 128) {
     const t = this._textureContext.getImageData(0, 0, this._textureCanvas.width, this._textureCanvas.height), r = t.data;
     for (let i = 0; i < r.length; i += 4) {
-      const s = 0.299 * r[i] + 0.587 * r[i + 1] + 0.114 * r[i + 2], a = e + 32, n = s > a ? 255 : 0;
-      r[i] = n, r[i + 1] = n, r[i + 2] = n;
+      const s = 0.299 * r[i] + 0.587 * r[i + 1] + 0.114 * r[i + 2], n = e + 32, a = s > n ? 255 : 0;
+      r[i] = a, r[i + 1] = a, r[i + 2] = a;
     }
     this._textureContext.putImageData(t, 0, 0);
   }
@@ -1249,8 +1250,8 @@ class pe {
   calculateMaxGlyphDimensions(e, t, r) {
     this._tempContext.font = `${t}px ${r}`;
     let i = 0, s = 0;
-    for (const a of e) {
-      const n = this._tempContext.measureText(a), l = n.width, c = n.actualBoundingBoxAscent + n.actualBoundingBoxDescent;
+    for (const n of e) {
+      const a = this._tempContext.measureText(n), l = a.width, c = a.actualBoundingBoxAscent + a.actualBoundingBoxDescent;
       l > 0 && (i = Math.max(i, l), s = Math.max(s, c));
     }
     return {
@@ -1268,17 +1269,17 @@ class _e {
    */
   createCharacterObjects(e, t) {
     return e.map((r, i) => {
-      const s = r.codePointAt(0) || 0, a = this._generateCharacterColor(i);
-      let n = 0;
+      const s = r.codePointAt(0) || 0, n = this._generateCharacterColor(i);
+      let a = 0;
       if (t.hmtx && t.hmtx.aWidth) {
         const l = this._getGlyphIndex(t, s);
-        l > 0 && t.hmtx.aWidth[l] !== void 0 && (n = t.hmtx.aWidth[l]);
+        l > 0 && t.hmtx.aWidth[l] !== void 0 && (a = t.hmtx.aWidth[l]);
       }
       return {
         character: r,
         unicode: s,
-        color: a,
-        advanceWidth: n
+        color: n,
+        advanceWidth: a
       };
     });
   }
@@ -1299,11 +1300,11 @@ class _e {
             if (i.idRangeOffset[s] === 0)
               return t + i.idDelta[s] & 65535;
             {
-              const a = i.idRangeOffset[s] / 2 + (t - i.startCount[s]) - (i.startCount.length - s);
-              if (a >= 0 && a < i.glyphIdArray.length) {
-                const n = i.glyphIdArray[a];
-                if (n !== 0)
-                  return n + i.idDelta[s] & 65535;
+              const n = i.idRangeOffset[s] / 2 + (t - i.startCount[s]) - (i.startCount.length - s);
+              if (n >= 0 && n < i.glyphIdArray.length) {
+                const a = i.glyphIdArray[n];
+                if (a !== 0)
+                  return a + i.idDelta[s] & 65535;
               }
             }
           }
@@ -1326,7 +1327,7 @@ class _e {
    * @returns RGB color as a tuple [r, g, b], or [0, 0, 0] if not found
    */
   getCharacterColor(e, t) {
-    if (!x.validate(
+    if (!v.validate(
       typeof e == "string" && e.length === 1,
       "Character must be a single character string.",
       { method: "getCharacterColor", providedValue: e }
@@ -1342,14 +1343,14 @@ class _e {
    * @returns Array of RGB colors for each character
    */
   getCharacterColors(e, t) {
-    return x.validate(
+    return v.validate(
       typeof e == "string" && e.length > 0,
       "Characters must be a string with at least one character.",
       { method: "getCharacterColors", providedValue: e }
     ) ? e.split("").map((r) => this.getCharacterColor(r, t) || [0, 0, 0]) : [[0, 0, 0]];
   }
 }
-class xe {
+class ve {
   /**
    * Creates a new TextmodeFont instance.
    * @param renderer Renderer instance for texture creation
@@ -1525,7 +1526,7 @@ class xe {
     return this._font;
   }
 }
-class ve {
+class xe {
   /**
    * Create a new grid instance.
    * @param canvas The canvas element used to determine the grid dimensions.
@@ -1667,7 +1668,9 @@ class be {
     o(this, "_canvas");
     o(this, "captureSource");
     o(this, "_isStandalone");
-    this.captureSource = e, this._isStandalone = t, this._canvas = this.createCanvas(r.width, r.height);
+    o(this, "resizeObserver");
+    o(this, "onTransformChange");
+    this.captureSource = e, this._isStandalone = t, this._canvas = this.createCanvas(r.width, r.height), t && this.setupTransformObserver();
   }
   createCanvas(e, t) {
     var i;
@@ -1676,12 +1679,12 @@ class be {
       r.width = e || 800, r.height = t || 600, document.body.appendChild(r);
     else {
       const s = this.captureSource.getBoundingClientRect();
-      let a = Math.round(s.width), n = Math.round(s.height);
+      let n = Math.round(s.width), a = Math.round(s.height);
       if (this.captureSource instanceof HTMLVideoElement) {
         const u = this.captureSource;
-        (a === 0 || n === 0) && u.videoWidth > 0 && u.videoHeight > 0 && (a = u.videoWidth, n = u.videoHeight);
+        (n === 0 || a === 0) && u.videoWidth > 0 && u.videoHeight > 0 && (n = u.videoWidth, a = u.videoHeight);
       }
-      r.width = a, r.height = n, r.style.position = "absolute", r.style.pointerEvents = "none";
+      r.width = n, r.height = a, r.style.position = "absolute", r.style.pointerEvents = "none";
       const l = window.getComputedStyle(this.captureSource);
       let c = parseInt(l.zIndex || "0", 10);
       isNaN(c) && (c = 0), r.style.zIndex = (c + 1).toString(), this.positionOverlayCanvas(r), (i = this.captureSource.parentNode) == null || i.insertBefore(r, this.captureSource.nextSibling);
@@ -1704,8 +1707,8 @@ class be {
       const r = this.captureSource.getBoundingClientRect();
       let i = Math.round(r.width), s = Math.round(r.height);
       if (this.captureSource instanceof HTMLVideoElement) {
-        const a = this.captureSource;
-        (i === 0 || s === 0) && a.videoWidth > 0 && a.videoHeight > 0 && (i = a.videoWidth, s = a.videoHeight);
+        const n = this.captureSource;
+        (i === 0 || s === 0) && n.videoWidth > 0 && n.videoHeight > 0 && (i = n.videoWidth, s = n.videoHeight);
       }
       this._canvas.width = i, this._canvas.height = s, this.positionOverlayCanvas(this._canvas);
     }
@@ -1727,12 +1730,45 @@ class be {
       throw new F("WebGL context could not be created. Ensure your browser supports WebGL.");
     return t;
   }
+  /**
+   * Get the effective rendering dimensions accounting for CSS transforms
+   */
+  getEffectiveRenderingDimensions() {
+    if (!this._canvas)
+      return { width: 0, height: 0 };
+    const e = this._canvas.getBoundingClientRect(), t = Math.round(e.width), r = Math.round(e.height);
+    if (this._isStandalone) {
+      const i = this._canvas.width, s = this._canvas.height;
+      if (t !== i || r !== s)
+        return { width: t, height: r };
+    }
+    return { width: this._canvas.width, height: this._canvas.height };
+  }
+  /**
+   * Check if the canvas is affected by CSS transforms
+   */
+  isTransformed() {
+    if (!this._canvas || !this._isStandalone) return !1;
+    const e = this._canvas.getBoundingClientRect(), t = Math.round(e.width), r = Math.round(e.height);
+    return t !== this._canvas.width || r !== this._canvas.height;
+  }
+  /**
+   * Set up ResizeObserver to monitor for CSS transform changes
+   */
+  setupTransformObserver() {
+    typeof ResizeObserver > "u" || (this.resizeObserver = new ResizeObserver((e) => {
+      for (const t of e) {
+        const r = t.contentRect, i = Math.round(r.width), s = Math.round(r.height);
+        this.onTransformChange && (i !== this._canvas.width || s !== this._canvas.height) && this.onTransformChange();
+      }
+    }), this.resizeObserver.observe(this._canvas));
+  }
   /**
    * Dispose of this TextmodeCanvas and clean up all resources.
    * This method is idempotent and safe to call multiple times.
    */
   dispose() {
-    if (this._canvas) {
+    if (this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = void 0), this._canvas) {
       const e = this._canvas.getContext("webgl") || this._canvas.getContext("webgl2");
       if (e) {
         const t = e.getExtension("WEBGL_lose_context");
@@ -1855,8 +1891,8 @@ class Ce {
     this._framebuffer.width !== e && this._framebuffer.resize(e, t);
     const r = new Uint8Array(e * t * 4);
     for (let i = 0; i < e; i++) {
-      const s = i < this._colors.length ? this._colors[i] : [0, 0, 0], a = i * 4;
-      r[a] = s[0], r[a + 1] = s[1], r[a + 2] = s[2], r[a + 3] = 255;
+      const s = i < this._colors.length ? this._colors[i] : [0, 0, 0], n = i * 4;
+      r[n] = s[0], r[n + 1] = s[1], r[n + 2] = s[2], r[n + 3] = 255;
     }
     this._framebuffer.updatePixels(r, e, t);
   }
@@ -1886,7 +1922,7 @@ class Ce {
     return this._framebuffer.texture;
   }
 }
-class H extends U {
+class O extends U {
   constructor(t, r, i, s = {}) {
     super(t, r, i, s);
     o(this, "palette");
@@ -1897,7 +1933,7 @@ class H extends U {
    * @param characters The characters to use for mapping, usually ordered from darkest to brightest.
    */
   characters(t) {
-    x.validate(
+    v.validate(
       this.fontManager.hasAllCharacters(t),
       "One or more characters do not exist in the current font.",
       { method: "characters", providedValue: t }
@@ -1912,25 +1948,25 @@ class H extends U {
    * @param a Alpha component (0-255).
    */
   characterColor(t, r, i, s = 255) {
-    let a, n, l, c;
+    let n, a, l, c;
     if (typeof t == "string") {
       const u = this.parseHexColor(t);
       if (!u) {
-        x.validate(
+        v.validate(
           !1,
           "Invalid hex color format. Use '#FF0000', '#F00', 'FF0000', or 'F00'.",
           { method: "characterColor", providedValue: t }
         );
         return;
       }
-      [a, n, l, c] = u;
-    } else if (a = t, n = r !== void 0 ? r : t, l = i !== void 0 ? i : t, c = s, !x.validate(
-      [a, n, l, c].every((u) => u >= 0 && u <= 255),
+      [n, a, l, c] = u;
+    } else if (n = t, a = r !== void 0 ? r : t, l = i !== void 0 ? i : t, c = s, !v.validate(
+      [n, a, l, c].every((u) => u >= 0 && u <= 255),
       "Character color values must be between 0 and 255",
-      { method: "characterColor", providedValues: { r: a, g: n, b: l, a: c } }
+      { method: "characterColor", providedValues: { r: n, g: a, b: l, a: c } }
     ))
       return;
-    this._options.characterColor = [a / 255, n / 255, l / 255, c / 255];
+    this._options.characterColor = [n / 255, a / 255, l / 255, c / 255];
   }
   /**
    * Sets the character color mode.
@@ -1939,7 +1975,7 @@ class H extends U {
    * @param mode The color mode to use for characters.
    */
   characterColorMode(t) {
-    x.validate(
+    v.validate(
       ["sampled", "fixed"].includes(t),
       "Invalid character color mode. Must be 'sampled' or 'fixed'.",
       { method: "characterColorMode", providedValue: t }
@@ -1954,25 +1990,25 @@ class H extends U {
    * @param a Alpha component (0-255).
    */
   cellColor(t, r, i, s = 255) {
-    let a, n, l, c;
+    let n, a, l, c;
     if (typeof t == "string") {
       const u = this.parseHexColor(t);
       if (!u) {
-        x.validate(
+        v.validate(
           !1,
           "Invalid hex color format. Use '#FF0000', '#F00', 'FF0000', or 'F00'.",
           { method: "cellColor", providedValue: t }
         );
         return;
       }
-      [a, n, l, c] = u;
-    } else if (a = t, n = r !== void 0 ? r : t, l = i !== void 0 ? i : t, c = s, !x.validate(
-      [a, n, l, c].every((u) => u >= 0 && u <= 255),
+      [n, a, l, c] = u;
+    } else if (n = t, a = r !== void 0 ? r : t, l = i !== void 0 ? i : t, c = s, !v.validate(
+      [n, a, l, c].every((u) => u >= 0 && u <= 255),
       "Cell color values must be between 0 and 255",
-      { method: "cellColor", providedValues: { r: a, g: n, b: l, a: c } }
+      { method: "cellColor", providedValues: { r: n, g: a, b: l, a: c } }
     ))
       return;
-    this._options.cellColor = [a / 255, n / 255, l / 255, c / 255];
+    this._options.cellColor = [n / 255, a / 255, l / 255, c / 255];
   }
   /**
    * Sets the cell color mode.
@@ -1981,7 +2017,7 @@ class H extends U {
    * @param mode The color mode to use for background cells.
    */
   cellColorMode(t) {
-    x.validate(
+    v.validate(
       ["sampled", "fixed"].includes(t),
       "Invalid cell color mode. Must be 'sampled' or 'fixed'.",
       { method: "cellColorMode", providedValue: t }
@@ -1992,7 +2028,7 @@ class H extends U {
    * @param invert If `true`, the character color becomes the cell color and vice versa.
    */
   invert(t) {
-    x.validate(
+    v.validate(
       typeof t == "boolean" || typeof t == "number" && Number.isInteger(t),
       "Invert must be a boolean value or an integer (0 for false, any other number for true).",
       { method: "invert", providedValue: t }
@@ -2003,7 +2039,7 @@ class H extends U {
    * @param angle The rotation angle in degrees.
    */
   rotation(t) {
-    if (!x.validate(
+    if (!v.validate(
       typeof t == "number",
       "Rotation angle must be a number.",
       { method: "rotation", providedValue: t }
@@ -2018,7 +2054,7 @@ class H extends U {
    * @param flip If `true`, characters are flipped horizontally. If `false`, no flip is applied.
    */
   flipHorizontally(t) {
-    x.validate(
+    v.validate(
       typeof t == "boolean" || typeof t == "number" && Number.isInteger(t),
       "Flip horizontally must be a boolean value or an integer (0 for false, any other number for true).",
       { method: "flipHorizontally", providedValue: t }
@@ -2029,7 +2065,7 @@ class H extends U {
    * @param flip If `true`, characters are flipped vertically. If `false`, no flip is applied.
    */
   flipVertically(t) {
-    x.validate(
+    v.validate(
       typeof t == "boolean" || typeof t == "number" && Number.isInteger(t),
       "Flip vertically must be a boolean value or an integer (0 for false, any other number for true).",
       { method: "flipVertically", providedValue: t }
@@ -2043,7 +2079,7 @@ class H extends U {
   parseHexColor(t) {
     if (t = t.replace(/^#/, ""), !/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(t))
       return null;
-    t.length === 3 && (t = t.split("").map((a) => a + a).join(""));
+    t.length === 3 && (t = t.split("").map((n) => n + n).join(""));
     const r = parseInt(t.slice(0, 2), 16), i = parseInt(t.slice(2, 4), 16), s = parseInt(t.slice(4, 6), 16);
     return [r, i, s, 255];
   }
@@ -2075,7 +2111,7 @@ const Re = {
   /** Range of brightness values to map to ASCII characters */
   brightnessRange: [0, 255]
 };
-class L extends H {
+class L extends O {
   /**
    * Creates a new TextmodeBrightnessConverter instance.
    * @param renderer Renderer instance for texture creation
@@ -2107,18 +2143,18 @@ class L extends H {
    * @param range Array of two numbers `[min, max]`, where `min` is darkest and `max` is brightest.
    */
   brightnessRange(t) {
-    x.validate(
+    v.validate(
       Array.isArray(t) && t.length === 2 && t.every((r) => typeof r == "number" && r >= 0 && r <= 255),
       "Brightness range must be an array of two numbers between 0 and 255.",
       { method: "brightnessRange", providedValue: t }
     ) && (this._options.brightnessRange = t);
   }
 }
-const He = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Oe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   TextmodeBrightnessConverter: L,
   TextmodeConverter: U,
-  TextmodeFeatureConverter: H
+  TextmodeFeatureConverter: O
 }, Symbol.toStringTag, { value: "Module" }));
 var Ee = "precision mediump float;uniform sampler2D u_characterTexture;uniform vec2 u_charsetDimensions;uniform sampler2D u_primaryColorTexture;uniform sampler2D u_secondaryColorTexture;uniform sampler2D u_transformTexture;uniform sampler2D u_asciiCharacterTexture;uniform sampler2D u_rotationTexture;uniform sampler2D u_captureTexture;uniform vec2 u_captureDimensions;uniform int u_backgroundMode;uniform vec2 u_gridCellDimensions;uniform vec2 u_gridPixelDimensions;mat2 rotate2D(float angle){float s=sin(angle);float c=cos(angle);return mat2(c,-s,s,c);}void main(){vec2 adjustedCoord=gl_FragCoord.xy/u_gridPixelDimensions;vec2 gridCoord=adjustedCoord*u_gridCellDimensions;vec2 cellCoord=floor(gridCoord);vec2 charIndexTexCoord=(cellCoord+0.5)/u_gridCellDimensions;vec4 primaryColor=texture2D(u_primaryColorTexture,charIndexTexCoord);vec4 secondaryColor=texture2D(u_secondaryColorTexture,charIndexTexCoord);vec4 transformColor=texture2D(u_transformTexture,charIndexTexCoord);bool isInverted=transformColor.r>0.5;bool flipHorizontal=transformColor.g>0.5;bool flipVertical=transformColor.b>0.5;vec4 encodedIndexVec=texture2D(u_asciiCharacterTexture,charIndexTexCoord);if(encodedIndexVec.a<0.01){gl_FragColor=(u_backgroundMode==0)? vec4(0.0):texture2D(u_captureTexture,gl_FragCoord.xy/u_captureDimensions);return;}int charIndex=int(encodedIndexVec.r*255.0+0.5)+int(encodedIndexVec.g*255.0+0.5)*256;int charCol=int(mod(float(charIndex),u_charsetDimensions.x));int charRow=charIndex/int(u_charsetDimensions.x);vec2 charCoord=vec2(charCol,charRow)/u_charsetDimensions;vec4 rotationColor=texture2D(u_rotationTexture,charIndexTexCoord);float scaledAngle=rotationColor.r*255.0+rotationColor.g;float rotationAngle=(scaledAngle*360.0/255.0)*0.017453292;vec2 fractionalPart=fract(gridCoord)-0.5;if(flipHorizontal)fractionalPart.x=-fractionalPart.x;if(flipVertical)fractionalPart.y=-fractionalPart.y;fractionalPart=rotate2D(rotationAngle)*fractionalPart+0.5;vec2 cellSize=1.0/u_charsetDimensions;vec2 texCoord=charCoord+fractionalPart*cellSize;vec2 cellMax=charCoord+cellSize;if(any(lessThan(texCoord,charCoord))||any(greaterThan(texCoord,cellMax))){gl_FragColor=isInverted ? primaryColor : secondaryColor;return;}vec4 charTexel=texture2D(u_characterTexture,texCoord);if(isInverted)charTexel.rgb=1.0-charTexel.rgb;gl_FragColor=mix(secondaryColor,primaryColor,charTexel);}";
 class Ue {
@@ -2154,13 +2190,13 @@ class Ue {
   render(e) {
     for (const r of this.converters) {
       const i = r.converter;
-      i.options.enabled && i instanceof H && i.convert(e);
+      i.options.enabled && i instanceof O && i.convert(e);
     }
     const t = (r, i) => {
       r.begin(), this.renderer.clear();
       for (const s of this.converters) {
-        const a = s.converter;
-        a.options.enabled && this.renderer.image(i(a), 0, 0);
+        const n = s.converter;
+        n.options.enabled && this.renderer.image(i(n), 0, 0);
       }
       r.end();
     };
@@ -2172,14 +2208,14 @@ class Ue {
    * @returns The requested `TextmodeConverter` instance.
    */
   get(e) {
-    if (!x.validate(
+    if (!v.validate(
       typeof e == "string" && e.length > 0,
       "Converter name must be a non-empty string.",
       { method: "converter", providedValue: e }
     ))
       return;
     const t = this.converters.find((i) => i.name === e), r = t == null ? void 0 : t.converter;
-    if (x.validate(
+    if (v.validate(
       r instanceof U,
       `Converter "${e}" is not a valid TextmodeConverter.`,
       { method: "converter", providedValue: e, converterInstance: r }
@@ -2193,11 +2229,11 @@ class Ue {
    * @returns The newly created {@link TextmodeConverter} instance or `void` if the addition failed.
    */
   add(e, t) {
-    if (!x.validate(
+    if (!v.validate(
       typeof e == "string" && e.length > 0,
       "Converter name must be a non-empty string.",
       { method: "add", providedValue: e }
-    ) || !x.validate(
+    ) || !v.validate(
       t === "brightness" || t === "custom",
       `Converter type must be either "brightness" or "custom". Provided: ${t}`,
       { method: "add", providedValue: t }
@@ -2211,7 +2247,7 @@ class Ue {
    * @param nameOrInstance The unique name of the converter or the converter instance to remove.
    */
   remove(e) {
-    if (!x.validate(
+    if (!v.validate(
       typeof e == "string" || e instanceof U,
       "Parameter must be either a string (converter name) or a TextmodeConverter instance.",
       { method: "remove", providedValue: e }
@@ -2219,7 +2255,7 @@ class Ue {
       return;
     let t = -1;
     if (typeof e == "string") {
-      if (!x.validate(
+      if (!v.validate(
         e.length > 0,
         "Converter name must be a non-empty string.",
         { method: "remove", providedValue: e }
@@ -2228,7 +2264,7 @@ class Ue {
       t = this.converters.findIndex((r) => r.name === e);
     } else
       t = this.converters.findIndex((r) => r.converter === e);
-    x.validate(
+    v.validate(
       t !== -1,
       typeof e == "string" ? `Converter with name "${e}" not found in pipeline.` : "Converter instance not found in pipeline.",
       { method: "remove", providedValue: e, convertersCount: this.converters.length }
@@ -2300,20 +2336,20 @@ class Ue {
     return this._transformFramebuffer;
   }
 }
-class X {
+class H {
   /**
    * Extracts pixel data from all framebuffers needed for export
    * @param pipeline The conversion pipeline containing framebuffers
    * @returns Object containing all pixel data arrays
    */
   extractFramebufferData(e) {
-    const t = e.get("brightness"), r = t == null ? void 0 : t.characterFramebuffer, i = t == null ? void 0 : t.primaryColorFramebuffer, s = t == null ? void 0 : t.secondaryColorFramebuffer, a = t == null ? void 0 : t.transformFramebuffer, n = t == null ? void 0 : t.rotationFramebuffer;
-    return r == null || r.loadPixels(), i == null || i.loadPixels(), s == null || s.loadPixels(), a == null || a.loadPixels(), n == null || n.loadPixels(), {
+    const t = e.get("brightness"), r = t == null ? void 0 : t.characterFramebuffer, i = t == null ? void 0 : t.primaryColorFramebuffer, s = t == null ? void 0 : t.secondaryColorFramebuffer, n = t == null ? void 0 : t.transformFramebuffer, a = t == null ? void 0 : t.rotationFramebuffer;
+    return r == null || r.loadPixels(), i == null || i.loadPixels(), s == null || s.loadPixels(), n == null || n.loadPixels(), a == null || a.loadPixels(), {
       characterPixels: (r == null ? void 0 : r.pixels) || new Uint8Array(0),
       primaryColorPixels: (i == null ? void 0 : i.pixels) || new Uint8Array(0),
       secondaryColorPixels: (s == null ? void 0 : s.pixels) || new Uint8Array(0),
-      transformPixels: (a == null ? void 0 : a.pixels) || new Uint8Array(0),
-      rotationPixels: (n == null ? void 0 : n.pixels) || new Uint8Array(0)
+      transformPixels: (n == null ? void 0 : n.pixels) || new Uint8Array(0),
+      rotationPixels: (a == null ? void 0 : a.pixels) || new Uint8Array(0)
     };
   }
   /**
@@ -2342,7 +2378,7 @@ class X {
     };
   }
 }
-class N {
+class X {
   /**
    * Creates a downloadable blob from content
    * @param content The content to include in the blob
@@ -2360,8 +2396,8 @@ class N {
    */
   downloadFile(e, t, r) {
     try {
-      const i = this.createBlob(e, r), s = URL.createObjectURL(i), a = document.createElement("a");
-      a.href = s, a.download = t, a.style.display = "none", a.rel = "noopener", document.body.appendChild(a), a.click(), document.body.removeChild(a), URL.revokeObjectURL(s);
+      const i = this.createBlob(e, r), s = URL.createObjectURL(i), n = document.createElement("a");
+      n.href = s, n.download = t, n.style.display = "none", n.rel = "noopener", document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(s);
     } catch (i) {
       throw console.error("Failed to download file:", i), new Error(`File download failed: ${i instanceof Error ? i.message : "Unknown error"}`);
     }
@@ -2399,7 +2435,7 @@ class N {
     return `'textmode-export'-${this.generateTimestamp()}`;
   }
 }
-class Ae extends X {
+class Ae extends H {
   /**
    * Extracts transform data from transform pixels
    * @param transformPixels Transform framebuffer pixels
@@ -2408,9 +2444,9 @@ class Ae extends X {
    * @returns Transform data object
    */
   extractTransformData(e, t, r) {
-    const i = e[r], s = e[r + 1], a = e[r + 2], n = i === 255, l = s === 255, c = a === 255, u = t[r], d = t[r + 1], f = u + d / 255, g = Math.round(f * 360 / 255 * 100) / 100;
+    const i = e[r], s = e[r + 1], n = e[r + 2], a = i === 255, l = s === 255, c = n === 255, u = t[r], d = t[r + 1], f = u + d / 255, g = Math.round(f * 360 / 255 * 100) / 100;
     return {
-      isInverted: n,
+      isInverted: a,
       flipHorizontal: l,
       flipVertical: c,
       rotation: g
@@ -2442,22 +2478,22 @@ class Ae extends X {
     const r = [];
     let i = 0;
     for (let s = 0; s < t.rows; s++)
-      for (let a = 0; a < t.cols; a++) {
-        const n = i * 4, l = this.getCharacterIndex(
+      for (let n = 0; n < t.cols; n++) {
+        const a = i * 4, l = this.getCharacterIndex(
           e.characterPixels,
-          n
+          a
         );
-        let c = this.pixelsToRGBA(e.primaryColorPixels, n), u = this.pixelsToRGBA(e.secondaryColorPixels, n);
+        let c = this.pixelsToRGBA(e.primaryColorPixels, a), u = this.pixelsToRGBA(e.secondaryColorPixels, a);
         const d = this.extractTransformData(
           e.transformPixels,
           e.rotationPixels,
-          n
+          a
         );
         if (d.isInverted) {
           const g = c;
           c = u, u = g;
         }
-        const f = this.calculateCellPosition(a, s, t);
+        const f = this.calculateCellPosition(n, s, t);
         r.push({
           charIndex: l,
           primaryColor: c,
@@ -2486,11 +2522,11 @@ class Me {
             if (i.idRangeOffset[s] === 0)
               return t + i.idDelta[s] & 65535;
             {
-              const a = i.idRangeOffset[s] / 2 + (t - i.startCount[s]) - (i.startCount.length - s);
-              if (a >= 0 && a < i.glyphIdArray.length) {
-                const n = i.glyphIdArray[a];
-                if (n !== 0)
-                  return n + i.idDelta[s] & 65535;
+              const n = i.idRangeOffset[s] / 2 + (t - i.startCount[s]) - (i.startCount.length - s);
+              if (n >= 0 && n < i.glyphIdArray.length) {
+                const a = i.glyphIdArray[n];
+                if (a !== 0)
+                  return a + i.idDelta[s] & 65535;
               }
             }
           }
@@ -2519,15 +2555,15 @@ class Me {
   createGlyphPath(e, t, r, i, s) {
     if (!t || !t.xs || t.xs.length === 0)
       return this.createEmptyPath();
-    const a = s / e.head.unitsPerEm;
+    const n = s / e.head.unitsPerEm;
     return {
       getBoundingBox: () => ({
-        x1: r + t.xMin * a,
-        y1: i + -t.yMax * a,
-        x2: r + t.xMax * a,
-        y2: i + -t.yMin * a
+        x1: r + t.xMin * n,
+        y1: i + -t.yMax * n,
+        x2: r + t.xMax * n,
+        y2: i + -t.yMin * n
       }),
-      toSVG: () => this.glyphToSVGPath(t, r, i, a)
+      toSVG: () => this.glyphToSVGPath(t, r, i, n)
     };
   }
   /**
@@ -2540,29 +2576,29 @@ class Me {
    */
   glyphToSVGPath(e, t, r, i) {
     if (!e || !e.xs) return "";
-    const { xs: s, ys: a, endPts: n, flags: l } = e;
-    if (!s || !a || !n || !l) return "";
+    const { xs: s, ys: n, endPts: a, flags: l } = e;
+    if (!s || !n || !a || !l) return "";
     let c = "", u = 0;
-    for (let d = 0; d < n.length; d++) {
-      const f = n[d];
+    for (let d = 0; d < a.length; d++) {
+      const f = a[d];
       if (!(f < u)) {
         if (f >= u) {
-          const g = t + s[u] * i, _ = r - a[u] * i;
+          const g = t + s[u] * i, _ = r - n[u] * i;
           c += `M${g.toFixed(2)},${_.toFixed(2)}`;
           let p = u + 1;
           for (; p <= f; )
             if ((l[p] & 1) !== 0) {
-              const C = t + s[p] * i, v = r - a[p] * i;
-              c += `L${C.toFixed(2)},${v.toFixed(2)}`, p++;
+              const C = t + s[p] * i, x = r - n[p] * i;
+              c += `L${C.toFixed(2)},${x.toFixed(2)}`, p++;
             } else {
-              const C = t + s[p] * i, v = r - a[p] * i;
+              const C = t + s[p] * i, x = r - n[p] * i;
               let w = p + 1 > f ? u : p + 1;
               if ((l[w] & 1) !== 0) {
-                const R = t + s[w] * i, S = r - a[w] * i;
-                c += `Q${C.toFixed(2)},${v.toFixed(2)} ${R.toFixed(2)},${S.toFixed(2)}`, p = w + 1;
+                const R = t + s[w] * i, S = r - n[w] * i;
+                c += `Q${C.toFixed(2)},${x.toFixed(2)} ${R.toFixed(2)},${S.toFixed(2)}`, p = w + 1;
               } else {
-                const R = t + s[w] * i, S = r - a[w] * i, P = (C + R) / 2, D = (v + S) / 2;
-                c += `Q${C.toFixed(2)},${v.toFixed(2)} ${P.toFixed(2)},${D.toFixed(2)}`, p = w;
+                const R = t + s[w] * i, S = r - n[w] * i, P = (C + R) / 2, D = (x + S) / 2;
+                c += `Q${C.toFixed(2)},${x.toFixed(2)} ${P.toFixed(2)},${D.toFixed(2)}`, p = w;
               }
             }
           c += "Z";
@@ -2583,18 +2619,18 @@ class Me {
    */
   generateCharacterPath(e, t, r, i, s) {
     try {
-      const a = e.codePointAt(0) || 0, n = this.getGlyphIndex(t, a);
-      if (n === 0)
+      const n = e.codePointAt(0) || 0, a = this.getGlyphIndex(t, n);
+      if (a === 0)
         return this.createEmptyPath();
       let l = null;
       try {
-        t.glyf && t.glyf[n] !== null ? l = t.glyf[n] : m && m.T && m.T.glyf && m.T.glyf._parseGlyf && (l = m.T.glyf._parseGlyf(t, n), t.glyf && l && (t.glyf[n] = l));
+        t.glyf && t.glyf[a] !== null ? l = t.glyf[a] : m && m.T && m.T.glyf && m.T.glyf._parseGlyf && (l = m.T.glyf._parseGlyf(t, a), t.glyf && l && (t.glyf[a] = l));
       } catch (c) {
-        console.warn(`Failed to parse glyph ${n}:`, c);
+        console.warn(`Failed to parse glyph ${a}:`, c);
       }
       return l ? this.createGlyphPath(t, l, r, i, s) : this.createEmptyPath();
-    } catch (a) {
-      return console.warn(`Failed to generate path for character "${e}":`, a), this.createEmptyPath();
+    } catch (n) {
+      return console.warn(`Failed to generate path for character "${e}":`, n), this.createEmptyPath();
     }
   }
   /**
@@ -2609,10 +2645,10 @@ class Me {
    * @param advanceWidth Character advance width
    * @returns SVG path data string or null if generation fails
    */
-  generatePositionedCharacterPath(e, t, r, i, s, a, n, l) {
+  generatePositionedCharacterPath(e, t, r, i, s, n, a, l) {
     try {
-      const c = n / t.head.unitsPerEm, u = l * c, d = r + (s - u) / 2, f = i + (a + n * 0.7) / 2;
-      return this.generateCharacterPath(e, t, d, f, n).toSVG() || null;
+      const c = a / t.head.unitsPerEm, u = l * c, d = r + (s - u) / 2, f = i + (n + a * 0.7) / 2;
+      return this.generateCharacterPath(e, t, d, f, a).toSVG() || null;
     } catch (c) {
       return console.warn(`Failed to generate positioned character path for "${e}":`, c), null;
     }
@@ -2673,12 +2709,12 @@ class De {
    * @returns Transform attribute string or empty string
    */
   generateTransformAttribute(e, t) {
-    const { transform: r, position: i } = e, s = i.cellX + t.cellWidth / 2, a = i.cellY + t.cellHeight / 2, n = [];
+    const { transform: r, position: i } = e, s = i.cellX + t.cellWidth / 2, n = i.cellY + t.cellHeight / 2, a = [];
     if (r.flipHorizontal || r.flipVertical) {
       const l = r.flipHorizontal ? -1 : 1, c = r.flipVertical ? -1 : 1;
-      n.push(`translate(${s} ${a})`), n.push(`scale(${l} ${c})`), n.push(`translate(${-s} ${-a})`);
+      a.push(`translate(${s} ${n})`), a.push(`scale(${l} ${c})`), a.push(`translate(${-s} ${-n})`);
     }
-    return r.rotation && n.push(`rotate(${r.rotation} ${s} ${a})`), n.length ? ` transform="${n.join(" ")}"` : "";
+    return r.rotation && a.push(`rotate(${r.rotation} ${s} ${n})`), a.length ? ` transform="${a.join(" ")}"` : "";
   }
   /**
    * Generates background rectangle for a cell
@@ -2707,7 +2743,7 @@ class De {
     const s = r.characters[e.charIndex];
     if (!s)
       return "";
-    const a = this.pathGenerator.generatePositionedCharacterPath(
+    const n = this.pathGenerator.generatePositionedCharacterPath(
       s.character,
       r.font,
       e.position.cellX,
@@ -2717,12 +2753,12 @@ class De {
       r.fontSize,
       s.advanceWidth
     );
-    if (!a)
+    if (!n)
       return "";
-    const n = this.rgbaToColorString(e.primaryColor);
+    const a = this.rgbaToColorString(e.primaryColor);
     return i.drawMode === "stroke" ? `
-    <path id="${`path-${e.charIndex}-${e.position.cellX}-${e.position.cellY}`.replace(/\./g, "-")}" d="${a}" stroke="${n}" stroke-width="${i.strokeWidth}" fill="none" />` : `
-    <path d="${a}" fill="${n}" />`;
+    <path id="${`path-${e.charIndex}-${e.position.cellX}-${e.position.cellY}`.replace(/\./g, "-")}" d="${n}" stroke="${a}" stroke-width="${i.strokeWidth}" fill="none" />` : `
+    <path d="${n}" fill="${a}" />`;
   }
   /**
    * Generates complete SVG content for a single cell
@@ -2735,10 +2771,10 @@ class De {
   generateCellContent(e, t, r, i) {
     let s = "";
     s += this.generateCellBackground(e, t, i);
-    const a = this.generateTransformAttribute(e, t), n = this.generateCharacterPath(e, t, r, i);
-    return n && (a ? (s += `
-  <g${a}>`, s += n, s += `
-  </g>`) : s += n), s;
+    const n = this.generateTransformAttribute(e, t), a = this.generateCharacterPath(e, t, r, i);
+    return a && (n ? (s += `
+  <g${n}>`, s += a, s += `
+  </g>`) : s += a), s;
   }
   /**
    * Generates the complete SVG content from cell data
@@ -2752,8 +2788,8 @@ class De {
     let s = this.generateSVGHeader(t);
     s += this.generateBackground(t, i), s += `
 <g id="ascii-cells">`;
-    for (const a of e)
-      s += this.generateCellContent(a, t, r, i);
+    for (const n of e)
+      s += this.generateCellContent(n, t, r, i);
     return s += this.generateSVGFooter(), s;
   }
   /**
@@ -2766,7 +2802,7 @@ class De {
 `).replace(/[ \t]+$/gm, "");
   }
 }
-class Ie extends N {
+class Ie extends X {
   /**
    * Creates a downloadable blob from SVG content
    * @param svgContent The SVG content string
@@ -2826,13 +2862,13 @@ class Y {
     const r = this.applyDefaultOptions(t), i = this.dataExtractor.extractFramebufferData(e.pipeline), s = this.dataExtractor.extractSVGCellData(
       i,
       e.grid
-    ), a = this.contentGenerator.generateSVGContent(
+    ), n = this.contentGenerator.generateSVGContent(
       s,
       e.grid,
       e.font,
       r
     );
-    return this.contentGenerator.optimizeSVGContent(a);
+    return this.contentGenerator.optimizeSVGContent(n);
   }
   /**
    * Exports SVG content to a downloadable file
@@ -2848,7 +2884,7 @@ class Y {
     }
   }
 }
-class Pe extends X {
+class Pe extends H {
   /**
    * Extracts character data for TXT generation
    * @param framebufferData Framebuffer pixel data
@@ -2858,17 +2894,17 @@ class Pe extends X {
    * @returns 2D array of characters (rows x columns)
    */
   extractCharacterGrid(e, t, r, i = " ") {
-    var n;
+    var a;
     const s = [];
-    let a = 0;
+    let n = 0;
     for (let l = 0; l < t.rows; l++) {
       const c = [];
       for (let u = 0; u < t.cols; u++) {
-        const d = a * 4, f = this.getCharacterIndex(
+        const d = n * 4, f = this.getCharacterIndex(
           e.characterPixels,
           d
-        ), g = ((n = r.characters[f]) == null ? void 0 : n.character) || i;
-        c.push(g), a++;
+        ), g = ((a = r.characters[f]) == null ? void 0 : a.character) || i;
+        c.push(g), n++;
       }
       s.push(c);
     }
@@ -2885,8 +2921,8 @@ class Be {
   generateTXTContent(e, t) {
     const r = [];
     for (const s of e) {
-      let a = s.join("");
-      t.preserveTrailingSpaces || (a = a.replace(/\s+$/, "")), r.push(a);
+      let n = s.join("");
+      t.preserveTrailingSpaces || (n = n.replace(/\s+$/, "")), r.push(n);
     }
     const i = t.lineEnding === "crlf" ? `\r
 ` : `
@@ -2894,7 +2930,7 @@ class Be {
     return r.join(i);
   }
 }
-class Ge extends N {
+class Ge extends X {
   /**
    * Saves TXT content as a downloadable file
    * @param content The TXT content to save
@@ -2969,7 +3005,7 @@ class j {
     }
   }
 }
-class Ve extends X {
+class Ve extends H {
   /**
    * Captures the current state of the textmode canvas as image data
    * @param canvas The canvas data containing the rendered textmode graphics
@@ -2981,8 +3017,8 @@ class Ve extends X {
     const i = e.canvas;
     if (t === 1 && r === "transparent")
       return i;
-    const s = document.createElement("canvas"), a = s.getContext("2d"), n = Math.round(i.width * t), l = Math.round(i.height * t);
-    return s.width = n, s.height = l, r !== "transparent" && (a.fillStyle = r, a.fillRect(0, 0, n, l)), a.imageSmoothingEnabled = !1, a.drawImage(
+    const s = document.createElement("canvas"), n = s.getContext("2d"), a = Math.round(i.width * t), l = Math.round(i.height * t);
+    return s.width = a, s.height = l, r !== "transparent" && (n.fillStyle = r, n.fillRect(0, 0, a, l)), n.imageSmoothingEnabled = !1, n.drawImage(
       i,
       0,
       0,
@@ -2990,7 +3026,7 @@ class Ve extends X {
       i.height,
       0,
       0,
-      n,
+      a,
       l
     ), s;
   }
@@ -3014,10 +3050,10 @@ class ke {
    */
   async generateImageBlob(e, t) {
     return new Promise((r, i) => {
-      const s = this.getMimeType(t.format), a = (n) => {
-        n ? r(n) : i(new Error(`Failed to generate ${t.format.toUpperCase()} blob`));
+      const s = this.getMimeType(t.format), n = (a) => {
+        a ? r(a) : i(new Error(`Failed to generate ${t.format.toUpperCase()} blob`));
       };
-      t.format === "png" ? e.toBlob(a, s) : e.toBlob(a, s, t.quality);
+      t.format === "png" ? e.toBlob(n, s) : e.toBlob(n, s, t.quality);
     });
   }
   /**
@@ -3047,7 +3083,7 @@ const q = {
   jpg: ".jpg",
   webp: ".webp"
 };
-class ze extends N {
+class ze extends X {
   /**
    * Saves image content as a downloadable file
    * @param content The image content (data URL or blob)
@@ -3244,10 +3280,13 @@ class I {
   static async create(e = null, t = {}) {
     const r = new I(e, t), i = r._standalone ? t : void 0;
     r.textmodeCanvas = new be(r.captureSource, r._standalone, i), r._renderer = new fe(r.textmodeCanvas.getWebGLContext());
-    let s, a;
-    r._standalone ? (s = t.width || 800, a = t.height || 600) : (s = r.textmodeCanvas.width || 800, a = r.textmodeCanvas.height || 600), r._canvasFramebuffer = r._renderer.createFramebuffer(s, a), r._font = new xe(r._renderer, t.fontSize ?? 16), await r._font.initialize(t.fontSource);
-    const n = r._font.maxGlyphDimensions;
-    return r._grid = new ve(r.textmodeCanvas.canvas, n.width, n.height), r._pipeline = new Ue(r._renderer, r._font, r._grid), r.setupEventListeners(), r.startAutoRendering(), r;
+    let s, n;
+    r._standalone ? (s = t.width || 800, n = t.height || 600) : (s = r.textmodeCanvas.width || 800, n = r.textmodeCanvas.height || 600), r._canvasFramebuffer = r._renderer.createFramebuffer(s, n), r._font = new ve(r._renderer, t.fontSize ?? 16), await r._font.initialize(t.fontSource);
+    const a = r._font.maxGlyphDimensions;
+    return r._grid = new xe(r.textmodeCanvas.canvas, a.width, a.height), r._pipeline = new Ue(r._renderer, r._font, r._grid), r.setupEventListeners(), r._standalone && (r.textmodeCanvas.onTransformChange = () => {
+      const l = r.textmodeCanvas.getEffectiveRenderingDimensions();
+      r._renderer.resetViewport(l.width, l.height), r._mode === "auto" && r.render();
+    }), r.startAutoRendering(), r;
   }
   setupEventListeners() {
     this._windowResizeListener = () => {
@@ -3488,7 +3527,12 @@ class I {
     }
   }
   resize() {
-    this.textmodeCanvas.resize(), this._canvasFramebuffer.resize(this.textmodeCanvas.width, this.textmodeCanvas.height), this._grid.resize(), this._pipeline.resize(), this._renderer.resetViewport(), this._mode !== "manual" && this.render();
+    if (this.textmodeCanvas.resize(), this._canvasFramebuffer.resize(this.textmodeCanvas.width, this.textmodeCanvas.height), this._grid.resize(), this._pipeline.resize(), this._standalone) {
+      const e = this.textmodeCanvas.getEffectiveRenderingDimensions();
+      this._renderer.resetViewport(e.width, e.height);
+    } else
+      this._renderer.resetViewport();
+    this._mode !== "manual" && this.render();
   }
   /**
    * Start automatic rendering
@@ -3666,7 +3710,7 @@ class I {
    * ```
    */
   redraw(e = 1) {
-    if (x.validate(
+    if (v.validate(
       typeof e == "number" && e > 0 && Number.isInteger(e),
       "Redraw count must be a positive integer.",
       { method: "redraw", providedValue: e }
@@ -3722,11 +3766,16 @@ class I {
    * ```
    */
   fontSize(e) {
-    x.validate(
+    if (v.validate(
       typeof e == "number" && e > 0,
       "Font size must be a positive number greater than 0.",
       { method: "fontSize", providedValue: e }
-    ) && this._font.fontSize !== e && (this._font.setFontSize(e), this._grid.resizeCellPixelDimensions(this._font.maxGlyphDimensions.width, this._font.maxGlyphDimensions.height), this._pipeline.resize(), this._renderer.resetViewport());
+    ) && this._font.fontSize !== e)
+      if (this._font.setFontSize(e), this._grid.resizeCellPixelDimensions(this._font.maxGlyphDimensions.width, this._font.maxGlyphDimensions.height), this._pipeline.resize(), this._standalone) {
+        const t = this.textmodeCanvas.getEffectiveRenderingDimensions();
+        this._renderer.resetViewport(t.width, t.height);
+      } else
+        this._renderer.resetViewport();
   }
   /**
    * Set a draw callback function that will be executed before each render.
@@ -3793,7 +3842,12 @@ class I {
    * @param height The new height of the canvas.
    */
   resizeCanvas(e, t) {
-    this.textmodeCanvas.resize(e, t), this._canvasFramebuffer.resize(this.textmodeCanvas.width, this.textmodeCanvas.height), this._grid.resize(), this._pipeline.resize(), this._renderer.resetViewport(), this._mode !== "manual" && this.render();
+    if (this.textmodeCanvas.resize(e, t), this._canvasFramebuffer.resize(this.textmodeCanvas.width, this.textmodeCanvas.height), this._grid.resize(), this._pipeline.resize(), this._standalone) {
+      const r = this.textmodeCanvas.getEffectiveRenderingDimensions();
+      this._renderer.resetViewport(r.width, r.height);
+    } else
+      this._renderer.resetViewport();
+    this._mode !== "manual" && this.render();
   }
   /**
    * @inheritDoc TextmodeConversionPipeline.get
@@ -4314,7 +4368,7 @@ class I {
     return this._isDisposed;
   }
 }
-class O {
+class N {
   /**
    * Create a {@link Textmodifier} instance for textmode rendering.
    * 
@@ -4393,7 +4447,7 @@ class O {
    * ```
    */
   static setErrorLevel(e) {
-    x.setGlobalLevel(e);
+    v.setGlobalLevel(e);
   }
   /**
    * Returns the current version of the `textmode.js` library.
@@ -4404,27 +4458,27 @@ class O {
    * ```
    */
   static get version() {
-    return "0.1.6-beta.1";
+    return "0.1.6-beta.2";
   }
   constructor() {
     throw new Error("Textmode is a static class and cannot be instantiated.");
   }
 }
-const Xe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const He = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null
-}, Symbol.toStringTag, { value: "Module" })), Ne = O.create, Oe = O.setErrorLevel, We = O.version;
+}, Symbol.toStringTag, { value: "Module" })), Xe = N.create, Ne = N.setErrorLevel, We = N.version;
 export {
   be as TextmodeCanvas,
   Ue as TextmodeConversionPipeline,
-  ne as TextmodeErrorLevel,
-  xe as TextmodeFont,
-  ve as TextmodeGrid,
+  ae as TextmodeErrorLevel,
+  ve as TextmodeFont,
+  xe as TextmodeGrid,
   I as Textmodifier,
-  He as converters,
-  Ne as create,
-  O as default,
-  Xe as export,
-  Oe as setErrorLevel,
-  O as textmode,
+  Oe as converters,
+  Xe as create,
+  N as default,
+  He as export,
+  Ne as setErrorLevel,
+  N as textmode,
   We as version
 };