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

package/dist/textmode.esm.js

@@ -1,12 +1,12 @@
 var iA = Object.defineProperty;
-var sA = (n, A, e) => A in n ? iA(n, A, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[A] = e;
-var a = (n, A, e) => sA(n, typeof A != "symbol" ? A + "" : A, e);
-class P extends Error {
+var sA = (a, A, e) => A in a ? iA(a, A, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[A] = e;
+var o = (a, A, e) => sA(a, typeof A != "symbol" ? A + "" : A, e);
+class p extends Error {
   constructor(e, t, r = {}) {
-    const i = P.createFormattedMessage(e, r);
+    const i = p.createFormattedMessage(e, r);
     super(i);
-    a(this, "originalError");
-    a(this, "context");
+    o(this, "originalError");
+    o(this, "context");
     this.name = "TextmodeError", this.originalError = t, this.context = r;
   }
   /**
@@ -19,9 +19,9 @@ class P extends Error {
 
 📋 Context:`;
       for (const [i, s] of Object.entries(t)) {
-        const o = P.formatValue(s);
+        const n = p.formatValue(s);
         r += `
-  - ${i}: ${o}`;
+  - ${i}: ${n}`;
       }
     }
     return r += `
@@ -38,24 +38,24 @@ class P extends Error {
     if (typeof e == "string") return `"${e}"`;
     if (typeof e == "number" || typeof e == "boolean") return String(e);
     if (Array.isArray(e))
-      return e.length === 0 ? "[]" : e.length <= 5 ? `[${e.map((t) => P.formatValue(t)).join(", ")}]` : `[${e.slice(0, 3).map((t) => P.formatValue(t)).join(", ")}, ... +${e.length - 3} more]`;
+      return e.length === 0 ? "[]" : e.length <= 5 ? `[${e.map((t) => p.formatValue(t)).join(", ")}]` : `[${e.slice(0, 3).map((t) => p.formatValue(t)).join(", ")}, ... +${e.length - 3} more]`;
     if (typeof e == "object") {
       const t = Object.keys(e);
-      return t.length === 0 ? "{}" : t.length <= 3 ? `{ ${t.map((s) => `${s}: ${P.formatValue(e[s])}`).join(", ")} }` : `{ ${t.slice(0, 2).map((i) => `${i}: ${P.formatValue(e[i])}`).join(", ")}, ... +${t.length - 2} more }`;
+      return t.length === 0 ? "{}" : t.length <= 3 ? `{ ${t.map((s) => `${s}: ${p.formatValue(e[s])}`).join(", ")} }` : `{ ${t.slice(0, 2).map((i) => `${i}: ${p.formatValue(e[i])}`).join(", ")}, ... +${t.length - 2} more }`;
     }
     return String(e);
   }
 }
-var oA = /* @__PURE__ */ ((n) => (n[n.SILENT = 0] = "SILENT", n[n.WARNING = 1] = "WARNING", n[n.ERROR = 2] = "ERROR", n[n.THROW = 3] = "THROW", n))(oA || {});
-const v = class v {
+var nA = /* @__PURE__ */ ((a) => (a[a.SILENT = 0] = "SILENT", a[a.WARNING = 1] = "WARNING", a[a.ERROR = 2] = "ERROR", a[a.THROW = 3] = "THROW", a))(nA || {});
+const b = class b {
   constructor() {
-    a(this, "_options", {
+    o(this, "_options", {
       globalLevel: 3
       /* THROW */
     });
   }
   static getInstance() {
-    return v._instance || (v._instance = new v()), v._instance;
+    return b._instance || (b._instance = new b()), b._instance;
   }
   /**
    * Handle an error based on the configured settings
@@ -71,15 +71,15 @@ const v = class v {
         return console.group(
           `%c${r} Oops! (╯°□°)╯︵ Something went wrong in your code.`,
           "color: #f44336; font-weight: bold; background: #ffebee; padding: 2px 6px; border-radius: 3px;"
-        ), console.warn(P.createFormattedMessage(A, e)), console.groupEnd(), !1;
+        ), console.warn(p.createFormattedMessage(A, e)), console.groupEnd(), !1;
       case 2:
         return console.group(
           `%c${r} Oops! (╯°□°)╯︵ Something went wrong in your code.`,
           "color: #f44336; font-weight: bold; background: #ffebee; padding: 2px 6px; border-radius: 3px;"
-        ), console.error(P.createFormattedMessage(A, e)), console.groupEnd(), !1;
+        ), console.error(p.createFormattedMessage(A, e)), console.groupEnd(), !1;
       case 3:
       default:
-        const i = new P(A, t, e);
+        const i = new p(A, t, e);
         throw console.group(
           `%c${r} Oops! (╯°□°)╯︵ Something went wrong in your code.`,
           "color: #d32f2f; font-weight: bold; background: #ffcdd2; padding: 2px 6px; border-radius: 3px;"
@@ -103,19 +103,19 @@ const v = class v {
     this._options.globalLevel = A;
   }
 };
-a(v, "_instance", null);
-let V = v;
+o(b, "_instance", null);
+let V = b;
 const f = V.getInstance();
-class aA {
+class oA {
   constructor(A, e, t = e, r = {}) {
-    a(this, "gl");
-    a(this, "_framebuffer");
-    a(this, "_texture");
-    a(this, "_width");
-    a(this, "_height");
-    a(this, "options");
-    a(this, "previousState", null);
-    a(this, "_pixels", null);
+    o(this, "gl");
+    o(this, "_framebuffer");
+    o(this, "_texture");
+    o(this, "_width");
+    o(this, "_height");
+    o(this, "options");
+    o(this, "previousState", null);
+    o(this, "_pixels", null);
     this.gl = A, this._width = e, this._height = t, this.options = {
       filter: "nearest",
       wrap: "clamp",
@@ -189,16 +189,16 @@ class aA {
   get(A, e, t, r) {
     const { gl: i } = this;
     if (A === void 0 && e === void 0) {
-      const s = new Uint8Array(this._width * this._height * 4), o = i.getParameter(i.FRAMEBUFFER_BINDING);
-      return i.bindFramebuffer(i.FRAMEBUFFER, this._framebuffer), i.readPixels(0, 0, this._width, this._height, i.RGBA, i.UNSIGNED_BYTE, s), i.bindFramebuffer(i.FRAMEBUFFER, o), s;
+      const s = new Uint8Array(this._width * this._height * 4), n = i.getParameter(i.FRAMEBUFFER_BINDING);
+      return i.bindFramebuffer(i.FRAMEBUFFER, this._framebuffer), i.readPixels(0, 0, this._width, this._height, i.RGBA, i.UNSIGNED_BYTE, s), i.bindFramebuffer(i.FRAMEBUFFER, n), s;
     } else if (t === void 0 && r === void 0) {
       (A < 0 || e < 0 || A >= this._width || e >= this._height) && (console.warn("The x and y values passed to Framebuffer.get are outside of its range and will be clamped."), A = Math.max(0, Math.min(A, this._width - 1)), e = Math.max(0, Math.min(e, this._height - 1)));
-      const s = new Uint8Array(4), o = i.getParameter(i.FRAMEBUFFER_BINDING);
-      return i.bindFramebuffer(i.FRAMEBUFFER, this._framebuffer), i.readPixels(A, e, 1, 1, i.RGBA, i.UNSIGNED_BYTE, s), i.bindFramebuffer(i.FRAMEBUFFER, o), [s[0], s[1], s[2], s[3]];
+      const s = new Uint8Array(4), n = i.getParameter(i.FRAMEBUFFER_BINDING);
+      return i.bindFramebuffer(i.FRAMEBUFFER, this._framebuffer), i.readPixels(A, e, 1, 1, i.RGBA, i.UNSIGNED_BYTE, s), i.bindFramebuffer(i.FRAMEBUFFER, n), [s[0], s[1], s[2], s[3]];
     } else {
       A = Math.max(0, Math.min(A, this._width - 1)), e = Math.max(0, Math.min(e, this._height - 1)), t = Math.max(1, Math.min(t, this._width - A)), r = Math.max(1, Math.min(r, this._height - e));
-      const s = new Uint8Array(t * r * 4), o = i.getParameter(i.FRAMEBUFFER_BINDING);
-      return i.bindFramebuffer(i.FRAMEBUFFER, this._framebuffer), i.readPixels(A, e, t, r, i.RGBA, i.UNSIGNED_BYTE, s), i.bindFramebuffer(i.FRAMEBUFFER, o), s;
+      const s = new Uint8Array(t * r * 4), n = i.getParameter(i.FRAMEBUFFER_BINDING);
+      return i.bindFramebuffer(i.FRAMEBUFFER, this._framebuffer), i.readPixels(A, e, t, r, i.RGBA, i.UNSIGNED_BYTE, s), i.bindFramebuffer(i.FRAMEBUFFER, n), s;
     }
   }
   /**
@@ -227,28 +227,28 @@ class aA {
 }
 class K {
   constructor(A, e, t) {
-    a(this, "gl");
-    a(this, "x");
-    a(this, "y");
+    o(this, "gl");
+    o(this, "x");
+    o(this, "y");
     this.gl = A, this.x = e, this.y = t;
   }
 }
 class y {
   constructor(A, e, t, r, i) {
     /** The WebGL rendering context */
-    a(this, "gl");
+    o(this, "gl");
     /** The vertex buffer containing position and texture coordinates */
-    a(this, "vertexBuffer");
+    o(this, "vertexBuffer");
     /** The number of vertices in this geometry (always 6 for two triangles) */
-    a(this, "vertexCount", 6);
+    o(this, "vertexCount", 6);
     /** Bytes per vertex: depends on position format (vec2 vs vec3) */
-    a(this, "bytesPerVertex");
+    o(this, "bytesPerVertex");
     this.gl = A, this.bytesPerVertex = 16;
-    const s = A.getParameter(A.VIEWPORT), o = s[2], g = s[3], B = A.getParameter(A.FRAMEBUFFER_BINDING) !== null, E = e / o * 2 - 1, l = (e + r) / o * 2 - 1;
-    let h, c;
-    B ? (h = t / g * 2 - 1, c = (t + i) / g * 2 - 1) : (h = 1 - t / g * 2, c = 1 - (t + i) / g * 2);
+    const s = A.getParameter(A.VIEWPORT), n = s[2], g = s[3], B = A.getParameter(A.FRAMEBUFFER_BINDING) !== null, h = e / n * 2 - 1, E = (e + r) / n * 2 - 1;
+    let l, c;
+    B ? (l = t / g * 2 - 1, c = (t + i) / g * 2 - 1) : (l = 1 - t / g * 2, c = 1 - (t + i) / g * 2);
     let d, u, m, D;
-    d = E, m = l, u = h, D = c;
+    d = h, m = E, u = l, D = c;
     const C = this.generateVertices(d, u, m, D);
     this.vertexBuffer = A.createBuffer(), A.bindBuffer(A.ARRAY_BUFFER, this.vertexBuffer), A.bufferData(A.ARRAY_BUFFER, C, A.STATIC_DRAW);
   }
@@ -300,11 +300,11 @@ class y {
     this.gl.enableVertexAttribArray(e), this.gl.vertexAttribPointer(e, 2, this.gl.FLOAT, !1, this.bytesPerVertex, 0), this.gl.enableVertexAttribArray(t), this.gl.vertexAttribPointer(t, 2, this.gl.FLOAT, !1, this.bytesPerVertex, 8), this.gl.drawArrays(this.gl.TRIANGLES, 0, this.vertexCount), this.gl.disableVertexAttribArray(e), this.gl.disableVertexAttribArray(t);
   }
 }
-class nA extends K {
+class aA extends K {
   constructor(e, t, r, i, s) {
     super(e, t, r);
-    a(this, "width");
-    a(this, "height");
+    o(this, "width");
+    o(this, "height");
     this.width = i, this.height = s;
   }
   /**
@@ -327,28 +327,28 @@ class nA extends K {
 class gA {
   constructor(A, e, t, r, i, s) {
     /** The WebGL rendering context */
-    a(this, "gl");
+    o(this, "gl");
     /** The vertex buffer containing position and texture coordinates */
-    a(this, "vertexBuffer");
+    o(this, "vertexBuffer");
     /** The number of vertices in this geometry (always 6 for two triangles) */
-    a(this, "vertexCount", 6);
+    o(this, "vertexCount", 6);
     /** Bytes per vertex: vec2+vec2 = 16 bytes */
-    a(this, "bytesPerVertex");
+    o(this, "bytesPerVertex");
     this.gl = A, this.bytesPerVertex = 16;
-    const o = A.getParameter(A.VIEWPORT), g = o[2], B = o[3], E = A.getParameter(A.FRAMEBUFFER_BINDING) !== null, l = r - e, h = i - t, c = Math.sqrt(l * l + h * h);
+    const n = A.getParameter(A.VIEWPORT), g = n[2], B = n[3], h = A.getParameter(A.FRAMEBUFFER_BINDING) !== null, E = r - e, l = i - t, c = Math.sqrt(E * E + l * l);
     if (c === 0) {
       const rA = this.generateVertices(0, 0, 0, 0);
       this.vertexBuffer = A.createBuffer(), A.bindBuffer(A.ARRAY_BUFFER, this.vertexBuffer), A.bufferData(A.ARRAY_BUFFER, rA, A.STATIC_DRAW);
       return;
     }
-    const d = l / c, m = -(h / c), D = d, C = s / 2, p = e + m * C, F = t + D * C, b = e - m * C, _ = t - D * C, R = r + m * C, T = i + D * C, j = r - m * C, X = i - D * C, Z = p / g * 2 - 1, q = b / g * 2 - 1, AA = R / g * 2 - 1, eA = j / g * 2 - 1;
-    let G, M, U, Y;
-    E ? (G = F / B * 2 - 1, M = _ / B * 2 - 1, U = T / B * 2 - 1, Y = X / B * 2 - 1) : (G = 1 - F / B * 2, M = 1 - _ / B * 2, U = 1 - T / B * 2, Y = 1 - X / B * 2);
+    const d = E / c, m = -(l / c), D = d, C = s / 2, P = e + m * C, F = t + D * C, v = e - m * C, I = t - D * C, R = r + m * C, T = i + D * C, j = r - m * C, W = i - D * C, Z = P / g * 2 - 1, q = v / g * 2 - 1, AA = R / g * 2 - 1, eA = j / g * 2 - 1;
+    let M, G, U, Y;
+    h ? (M = F / B * 2 - 1, G = I / B * 2 - 1, U = T / B * 2 - 1, Y = W / B * 2 - 1) : (M = 1 - F / B * 2, G = 1 - I / B * 2, U = 1 - T / B * 2, Y = 1 - W / B * 2);
     const tA = this.generateLineVertices(
       Z,
-      G,
-      q,
       M,
+      q,
+      G,
       AA,
       U,
       eA,
@@ -399,7 +399,7 @@ class gA {
    * Uses the four corners calculated based on line direction and thickness
    * @private
    */
-  generateLineVertices(A, e, t, r, i, s, o, g) {
+  generateLineVertices(A, e, t, r, i, s, n, g) {
     return new Float32Array([
       A,
       e,
@@ -421,7 +421,7 @@ class gA {
       0,
       1,
       // corner2 (start - perpendicular)
-      o,
+      n,
       g,
       1,
       1,
@@ -446,8 +446,8 @@ class gA {
 class BA extends K {
   constructor(e, t, r, i, s) {
     super(e, t, r);
-    a(this, "x2");
-    a(this, "y2");
+    o(this, "x2");
+    o(this, "y2");
     this.x2 = i, this.y2 = s;
   }
   /**
@@ -465,13 +465,13 @@ class BA extends K {
     new gA(this.gl, this.x, this.y, this.x2, this.y2, e).render();
   }
 }
-class I {
+class w {
   constructor(A, e, t) {
-    a(this, "gl");
-    a(this, "program");
-    a(this, "uniformLocations", /* @__PURE__ */ new Map());
-    a(this, "attributeLocations", /* @__PURE__ */ new Map());
-    a(this, "textureUnitCounter", 0);
+    o(this, "gl");
+    o(this, "program");
+    o(this, "uniformLocations", /* @__PURE__ */ new Map());
+    o(this, "attributeLocations", /* @__PURE__ */ new Map());
+    o(this, "textureUnitCounter", 0);
     this.gl = A, this.program = this.createProgram(e, t), this.cacheLocations();
   }
   createProgram(A, e) {
@@ -612,26 +612,26 @@ class I {
     this.textureUnitCounter = 0;
   }
 }
-var w = "attribute vec2 a_position;attribute vec2 a_texCoord;varying vec2 v_uv;uniform float u_rotation;uniform vec2 u_center;uniform float u_aspectRatio;mat2 rotate2D(float angle){float s=sin(angle);float c=cos(angle);return mat2(c,-s,s,c);}void main(){v_uv=a_texCoord;vec2 pos=a_position;pos-=u_center;pos.x*=u_aspectRatio;pos=rotate2D(-u_rotation)*pos;pos.x/=u_aspectRatio;pos+=u_center;gl_Position=vec4(pos,0.0,1.0);}", EA = "precision lowp float;uniform sampler2D u_texture;varying vec2 v_uv;void main(){gl_FragColor=texture2D(u_texture,v_uv);}", lA = "precision lowp float;uniform vec4 u_color;void main(){gl_FragColor=u_color;}";
-class hA {
+var _ = "attribute vec2 a_position;attribute vec2 a_texCoord;varying vec2 v_uv;uniform float u_rotation;uniform vec2 u_center;uniform float u_aspectRatio;mat2 rotate2D(float angle){float s=sin(angle);float c=cos(angle);return mat2(c,-s,s,c);}void main(){v_uv=a_texCoord;vec2 pos=a_position;pos-=u_center;pos.x*=u_aspectRatio;pos=rotate2D(-u_rotation)*pos;pos.x/=u_aspectRatio;pos+=u_center;gl_Position=vec4(pos,0.0,1.0);}", hA = "precision lowp float;uniform sampler2D u_texture;varying vec2 v_uv;void main(){gl_FragColor=texture2D(u_texture,v_uv);}", EA = "precision lowp float;uniform vec4 u_color;void main(){gl_FragColor=u_color;}";
+class lA {
   constructor(A) {
-    a(this, "gl");
-    a(this, "imageShader");
-    a(this, "solidColorShader");
-    a(this, "currentShader", null);
+    o(this, "gl");
+    o(this, "imageShader");
+    o(this, "solidColorShader");
+    o(this, "currentShader", null);
     // Fill state management - default: white fill enabled
-    a(this, "currentFillColor", [1, 1, 1, 1]);
-    a(this, "fillMode", !0);
+    o(this, "currentFillColor", [1, 1, 1, 1]);
+    o(this, "fillMode", !0);
     // Stroke state management - default: black stroke enabled, weight 1
-    a(this, "currentStrokeColor", [0, 0, 0, 1]);
-    a(this, "currentStrokeWeight", 1);
-    a(this, "strokeMode", !0);
+    o(this, "currentStrokeColor", [0, 0, 0, 1]);
+    o(this, "currentStrokeWeight", 1);
+    o(this, "strokeMode", !0);
     // Transformation state management
-    a(this, "currentRotation", 0);
+    o(this, "currentRotation", 0);
     // in degrees
     // State stack for push/pop functionality
-    a(this, "stateStack", []);
-    this.gl = A, this.imageShader = new I(this.gl, w, EA), this.solidColorShader = new I(this.gl, w, lA), this.gl.enable(this.gl.BLEND), this.gl.blendEquation(this.gl.FUNC_ADD), this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);
+    o(this, "stateStack", []);
+    this.gl = A, this.imageShader = new w(this.gl, _, hA), this.solidColorShader = new w(this.gl, _, EA), this.gl.enable(this.gl.BLEND), this.gl.blendEquation(this.gl.FUNC_ADD), this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);
   }
   /**
    * Set the current shader
@@ -732,10 +732,10 @@ class hA {
     this.currentShader = null, this.stateStack = [], this.currentRotation = 0, this.fillMode = !0, this.strokeMode = !0, this.currentFillColor = [1, 1, 1, 1], this.currentStrokeColor = [0, 0, 0, 1], this.currentStrokeWeight = 1;
   }
   createShader(A, e) {
-    return new I(this.gl, A, e);
+    return new w(this.gl, A, e);
   }
   createFilterShader(A) {
-    return new I(this.gl, w, A);
+    return new w(this.gl, _, A);
   }
   /**
    * Set a uniform value for the current shader
@@ -747,18 +747,18 @@ class hA {
    * Draw a rectangle with the current fill and/or stroke settings
    */
   rect(A, e, t, r) {
-    const i = new nA(this.gl, A, e, t, r);
+    const i = new aA(this.gl, A, e, t, r);
     if (this.currentShader !== null) {
       if (this.currentRotation !== 0) {
-        const { centerX: l, centerY: h, radians: c, aspectRatio: d } = this.calculateRotationParams(A, e, t, r);
-        this.setUniform("u_rotation", c), this.setUniform("u_center", [l, h]), this.setUniform("u_aspectRatio", d);
+        const { centerX: E, centerY: l, radians: c, aspectRatio: d } = this.calculateRotationParams(A, e, t, r);
+        this.setUniform("u_rotation", c), this.setUniform("u_center", [E, l]), this.setUniform("u_aspectRatio", d);
       } else
         this.setUniform("u_rotation", 0), this.setUniform("u_center", [0, 0]), this.setUniform("u_aspectRatio", 1);
       i.renderFill(), this.currentShader = null;
       return;
     }
-    const s = this.solidColorShader, { centerX: o, centerY: g, radians: B, aspectRatio: E } = this.calculateRotationParams(A, e, t, r);
-    this.fillMode && (this.shader(s), this.setUniform("u_color", this.currentFillColor), this.setUniform("u_rotation", B), this.setUniform("u_center", [o, g]), this.setUniform("u_aspectRatio", E), i.renderFill()), this.strokeMode && (this.shader(s), this.setUniform("u_color", this.currentStrokeColor), this.setUniform("u_rotation", B), this.setUniform("u_center", [o, g]), this.setUniform("u_aspectRatio", E), i.renderStroke(this.currentStrokeWeight)), this.currentShader = null;
+    const s = this.solidColorShader, { centerX: n, centerY: g, radians: B, aspectRatio: h } = this.calculateRotationParams(A, e, t, r);
+    this.fillMode && (this.shader(s), this.setUniform("u_color", this.currentFillColor), this.setUniform("u_rotation", B), this.setUniform("u_center", [n, g]), this.setUniform("u_aspectRatio", h), i.renderFill()), this.strokeMode && (this.shader(s), this.setUniform("u_color", this.currentStrokeColor), this.setUniform("u_rotation", B), this.setUniform("u_center", [n, g]), this.setUniform("u_aspectRatio", h), i.renderStroke(this.currentStrokeWeight)), this.currentShader = null;
   }
   /**
    * Draw a line from (x1, y1) to (x2, y2) with the current stroke settings.
@@ -773,31 +773,31 @@ class hA {
     const i = new BA(this.gl, A, e, t, r);
     if (this.currentShader !== null) {
       if (this.currentRotation !== 0) {
-        const u = (A + t) / 2, m = (e + r) / 2, D = Math.abs(t - A), C = Math.abs(r - e), { centerX: p, centerY: F, radians: b, aspectRatio: _ } = this.calculateRotationParams(u - D / 2, m - C / 2, D, C);
-        this.setUniform("u_rotation", b), this.setUniform("u_center", [p, F]), this.setUniform("u_aspectRatio", _);
+        const u = (A + t) / 2, m = (e + r) / 2, D = Math.abs(t - A), C = Math.abs(r - e), { centerX: P, centerY: F, radians: v, aspectRatio: I } = this.calculateRotationParams(u - D / 2, m - C / 2, D, C);
+        this.setUniform("u_rotation", v), this.setUniform("u_center", [P, F]), this.setUniform("u_aspectRatio", I);
       } else
         this.setUniform("u_rotation", 0), this.setUniform("u_center", [0, 0]), this.setUniform("u_aspectRatio", 1);
       i.renderStroke(this.currentStrokeWeight), this.currentShader = null;
       return;
     }
-    const s = this.solidColorShader, o = (A + t) / 2, g = (e + r) / 2, B = Math.abs(t - A), E = Math.abs(r - e), { centerX: l, centerY: h, radians: c, aspectRatio: d } = this.calculateRotationParams(o - B / 2, g - E / 2, B, E);
-    this.shader(s), this.setUniform("u_color", this.currentStrokeColor), this.setUniform("u_rotation", c), this.setUniform("u_center", [l, h]), this.setUniform("u_aspectRatio", d), i.renderStroke(this.currentStrokeWeight), this.currentShader = null;
+    const s = this.solidColorShader, n = (A + t) / 2, g = (e + r) / 2, B = Math.abs(t - A), h = Math.abs(r - e), { centerX: E, centerY: l, radians: c, aspectRatio: d } = this.calculateRotationParams(n - B / 2, g - h / 2, B, h);
+    this.shader(s), this.setUniform("u_color", this.currentStrokeColor), this.setUniform("u_rotation", c), this.setUniform("u_center", [E, l]), this.setUniform("u_aspectRatio", d), i.renderStroke(this.currentStrokeWeight), this.currentShader = null;
   }
   /**
    * Calculate rotation parameters for built-in shaders (NDC coordinates)
    */
   calculateRotationParams(A, e, t, r) {
-    const i = this.gl.getParameter(this.gl.VIEWPORT), s = i[2], o = i[3], g = s / o, B = this.gl.getParameter(this.gl.FRAMEBUFFER_BINDING) !== null, E = A + t / 2, l = e + r / 2, h = E / s * 2 - 1;
+    const i = this.gl.getParameter(this.gl.VIEWPORT), s = i[2], n = i[3], g = s / n, B = this.gl.getParameter(this.gl.FRAMEBUFFER_BINDING) !== null, h = A + t / 2, E = e + r / 2, l = h / s * 2 - 1;
     let c;
-    B ? c = l / o * 2 - 1 : c = 1 - l / o * 2;
+    B ? c = E / n * 2 - 1 : c = 1 - E / n * 2;
     const d = this.currentRotation * Math.PI / 180;
-    return { centerX: h, centerY: c, radians: d, aspectRatio: g };
+    return { centerX: l, centerY: c, radians: d, aspectRatio: g };
   }
   /**
    * Create a new framebuffer
    */
   createFramebuffer(A, e, t = {}) {
-    return new aA(this.gl, A, e, t);
+    return new oA(this.gl, A, e, t);
   }
   /**
    * Fill the current framebuffer with a solid color
@@ -812,10 +812,11 @@ class hA {
     this.gl.clearColor(A, e, t, r), 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(A, e) {
+    const t = A || this.gl.canvas.width, r = e || this.gl.canvas.height;
+    this.gl.viewport(0, 0, t, r);
   }
   /**
    * Get the WebGL context
@@ -835,19 +836,19 @@ class hA {
    */
   image(A, e, t, r, i) {
     this.shader(this.imageShader), this.setUniform("u_texture", A.texture);
-    const { centerX: s, centerY: o, radians: g, aspectRatio: B } = this.calculateRotationParams(
+    const { centerX: s, centerY: n, radians: g, aspectRatio: B } = this.calculateRotationParams(
       e,
       t,
       r ?? A.width,
       i ?? A.height
     );
-    this.setUniform("u_rotation", g), this.setUniform("u_center", [s, o]), this.setUniform("u_aspectRatio", B), this.rect(e, t, r ?? A.width, i ?? A.height);
+    this.setUniform("u_rotation", g), this.setUniform("u_center", [s, n]), this.setUniform("u_aspectRatio", B), this.rect(e, t, r ?? A.width, i ?? A.height);
   }
 }
 var Q = {};
-Q.parse = function(n) {
-  var A = function(i, s, o, g) {
-    var B = Q.T, E = {
+Q.parse = function(a) {
+  var A = function(i, s, n, g) {
+    var B = Q.T, h = {
       cmap: B.cmap,
       head: B.head,
       hhea: B.hhea,
@@ -855,119 +856,119 @@ Q.parse = function(n) {
       hmtx: B.hmtx,
       loca: B.loca,
       glyf: B.glyf
-    }, l = { _data: i, _index: s, _offset: o };
-    for (var h in E) {
-      var c = Q.findTable(i, h, o);
+    }, E = { _data: i, _index: s, _offset: n };
+    for (var l in h) {
+      var c = Q.findTable(i, l, n);
       if (c) {
         var d = c[0], u = g[d];
-        u == null && (u = E[h].parseTab(i, d, c[1], l)), l[h] = g[d] = u;
+        u == null && (u = h[l].parseTab(i, d, c[1], E)), E[l] = g[d] = u;
       }
     }
-    return l;
-  }, e = new Uint8Array(n), t = {}, r = A(e, 0, 0, t);
+    return E;
+  }, e = new Uint8Array(a), t = {}, r = A(e, 0, 0, t);
   return [r];
 };
-Q.findTable = function(n, A, e) {
-  for (var t = Q.B, r = t.readUshort(n, e + 4), i = e + 12, s = 0; s < r; s++) {
-    var o = t.readASCII(n, i, 4);
-    t.readUint(n, i + 4);
-    var g = t.readUint(n, i + 8), B = t.readUint(n, i + 12);
-    if (o == A) return [g, B];
+Q.findTable = function(a, A, e) {
+  for (var t = Q.B, r = t.readUshort(a, e + 4), i = e + 12, s = 0; s < r; s++) {
+    var n = t.readASCII(a, i, 4);
+    t.readUint(a, i + 4);
+    var g = t.readUint(a, i + 8), B = t.readUint(a, i + 12);
+    if (n == A) return [g, B];
     i += 16;
   }
   return null;
 };
 Q.T = {};
 Q.B = {
-  readShort: function(n, A) {
+  readShort: function(a, A) {
     var e = Q.B.t.uint16;
-    return e[0] = n[A] << 8 | n[A + 1], Q.B.t.int16[0];
+    return e[0] = a[A] << 8 | a[A + 1], Q.B.t.int16[0];
   },
-  readUshort: function(n, A) {
-    return n[A] << 8 | n[A + 1];
+  readUshort: function(a, A) {
+    return a[A] << 8 | a[A + 1];
   },
-  readUshorts: function(n, A, e) {
+  readUshorts: function(a, A, e) {
     for (var t = [], r = 0; r < e; r++)
-      t.push(Q.B.readUshort(n, A + r * 2));
+      t.push(Q.B.readUshort(a, A + r * 2));
     return t;
   },
-  readUint: function(n, A) {
+  readUint: function(a, A) {
     var e = Q.B.t.uint8;
-    return e[3] = n[A], e[2] = n[A + 1], e[1] = n[A + 2], e[0] = n[A + 3], Q.B.t.uint32[0];
+    return e[3] = a[A], e[2] = a[A + 1], e[1] = a[A + 2], e[0] = a[A + 3], Q.B.t.uint32[0];
   },
-  readASCII: function(n, A, e) {
-    for (var t = "", r = 0; r < e; r++) t += String.fromCharCode(n[A + r]);
+  readASCII: function(a, A, e) {
+    for (var t = "", r = 0; r < e; r++) t += String.fromCharCode(a[A + r]);
     return t;
   },
   // Simplified typed array buffer - only what's needed
   t: function() {
-    var n = new ArrayBuffer(8);
+    var a = new ArrayBuffer(8);
     return {
-      uint8: new Uint8Array(n),
-      int16: new Int16Array(n),
-      uint16: new Uint16Array(n),
-      uint32: new Uint32Array(n)
+      uint8: new Uint8Array(a),
+      int16: new Int16Array(a),
+      uint16: new Uint16Array(a),
+      uint32: new Uint32Array(a)
     };
   }()
 };
 Q.T.cmap = {
-  parseTab: function(n, A, e) {
+  parseTab: function(a, A, e) {
     var t = { tables: [], ids: {}, off: A };
-    n = new Uint8Array(n.buffer, A, e), A = 0;
+    a = new Uint8Array(a.buffer, A, e), A = 0;
     var r = Q.B, i = r.readUshort, s = Q.T.cmap;
-    i(n, A), A += 2;
-    var o = i(n, A);
+    i(a, A), A += 2;
+    var n = i(a, A);
     A += 2;
-    for (var g = [], B = 0; B < o; B++) {
-      var E = i(n, A);
+    for (var g = [], B = 0; B < n; B++) {
+      var h = i(a, A);
       A += 2;
-      var l = i(n, A);
+      var E = i(a, A);
       A += 2;
-      var h = r.readUint(n, A);
+      var l = r.readUint(a, A);
       A += 4;
-      var c = "p" + E + "e" + l, d = g.indexOf(h);
+      var c = "p" + h + "e" + E, d = g.indexOf(l);
       if (d == -1) {
         d = t.tables.length;
         var u = {};
-        g.push(h);
-        var m = u.format = i(n, h);
-        m == 4 ? u = s.parse4(n, h, u) : m == 12 && (u = s.parse12(n, h, u)), t.tables.push(u);
+        g.push(l);
+        var m = u.format = i(a, l);
+        m == 4 ? u = s.parse4(a, l, u) : m == 12 && (u = s.parse12(a, l, u)), t.tables.push(u);
       }
       t.ids[c] != null && console.log("multiple tables for one platform+encoding: " + c), t.ids[c] = d;
     }
     return t;
   },
-  parse4: function(n, A, e) {
+  parse4: function(a, A, e) {
     var t = Q.B, r = t.readUshort, i = t.readUshorts, s = A;
     A += 2;
-    var o = r(n, A);
-    A += 2, r(n, A), A += 2;
-    var g = r(n, A);
+    var n = r(a, A);
+    A += 2, r(a, A), A += 2;
+    var g = r(a, A);
     A += 2;
     var B = g >>> 1;
-    e.searchRange = r(n, A), A += 2, e.entrySelector = r(n, A), A += 2, e.rangeShift = r(n, A), A += 2, e.endCount = i(n, A, B), A += B * 2, A += 2, e.startCount = i(n, A, B), A += B * 2, e.idDelta = [];
-    for (var E = 0; E < B; E++)
-      e.idDelta.push(t.readShort(n, A)), A += 2;
-    return e.idRangeOffset = i(n, A, B), A += B * 2, e.glyphIdArray = i(n, A, s + o - A >> 1), e;
+    e.searchRange = r(a, A), A += 2, e.entrySelector = r(a, A), A += 2, e.rangeShift = r(a, A), A += 2, e.endCount = i(a, A, B), A += B * 2, A += 2, e.startCount = i(a, A, B), A += B * 2, e.idDelta = [];
+    for (var h = 0; h < B; h++)
+      e.idDelta.push(t.readShort(a, A)), A += 2;
+    return e.idRangeOffset = i(a, A, B), A += B * 2, e.glyphIdArray = i(a, A, s + n - A >> 1), e;
   },
-  parse12: function(n, A, e) {
+  parse12: function(a, A, e) {
     var t = Q.B, r = t.readUint;
-    A += 4, r(n, A), A += 4, r(n, A), A += 4;
-    var i = r(n, A) * 3;
+    A += 4, r(a, A), A += 4, r(a, A), A += 4;
+    var i = r(a, A) * 3;
     A += 4;
-    for (var s = e.groups = new Uint32Array(i), o = 0; o < i; o += 3)
-      s[o] = r(n, A + (o << 2)), s[o + 1] = r(n, A + (o << 2) + 4), s[o + 2] = r(n, A + (o << 2) + 8);
+    for (var s = e.groups = new Uint32Array(i), n = 0; n < i; n += 3)
+      s[n] = r(a, A + (n << 2)), s[n + 1] = r(a, A + (n << 2) + 4), s[n + 2] = r(a, A + (n << 2) + 8);
     return e;
   }
 };
 Q.T.head = {
-  parseTab: function(n, A, e) {
+  parseTab: function(a, A, e) {
     var t = Q.B, r = {};
-    return A += 18, r.unitsPerEm = t.readUshort(n, A), A += 2, A += 16, r.xMin = t.readShort(n, A), A += 2, r.yMin = t.readShort(n, A), A += 2, r.xMax = t.readShort(n, A), A += 2, r.yMax = t.readShort(n, A), A += 2, A += 6, r.indexToLocFormat = t.readShort(n, A), r;
+    return A += 18, r.unitsPerEm = t.readUshort(a, A), A += 2, A += 16, r.xMin = t.readShort(a, A), A += 2, r.yMin = t.readShort(a, A), A += 2, r.xMax = t.readShort(a, A), A += 2, r.yMax = t.readShort(a, A), A += 2, A += 6, r.indexToLocFormat = t.readShort(a, A), r;
   }
 };
 Q.T.hhea = {
-  parseTab: function(n, A, e) {
+  parseTab: function(a, A, e) {
     var t = Q.B, r = {};
     A += 4;
     for (var i = [
@@ -988,75 +989,75 @@ Q.T.hhea = {
       "metricDataFormat",
       "numberOfHMetrics"
     ], s = 0; s < i.length; s++) {
-      var o = i[s], g = o == "advanceWidthMax" || o == "numberOfHMetrics" ? t.readUshort : t.readShort;
-      r[o] = g(n, A + s * 2);
+      var n = i[s], g = n == "advanceWidthMax" || n == "numberOfHMetrics" ? t.readUshort : t.readShort;
+      r[n] = g(a, A + s * 2);
     }
     return r;
   }
 };
 Q.T.hmtx = {
-  parseTab: function(n, A, e, t) {
-    for (var r = Q.B, i = [], s = [], o = t.maxp.numGlyphs, g = t.hhea.numberOfHMetrics, B = 0, E = 0, l = 0; l < g; )
-      B = r.readUshort(n, A + (l << 2)), E = r.readShort(n, A + (l << 2) + 2), i.push(B), s.push(E), l++;
-    for (; l < o; )
-      i.push(B), s.push(E), l++;
+  parseTab: function(a, A, e, t) {
+    for (var r = Q.B, i = [], s = [], n = t.maxp.numGlyphs, g = t.hhea.numberOfHMetrics, B = 0, h = 0, E = 0; E < g; )
+      B = r.readUshort(a, A + (E << 2)), h = r.readShort(a, A + (E << 2) + 2), i.push(B), s.push(h), E++;
+    for (; E < n; )
+      i.push(B), s.push(h), E++;
     return { aWidth: i, lsBearing: s };
   }
 };
 Q.T.maxp = {
-  parseTab: function(n, A, e) {
+  parseTab: function(a, A, e) {
     var t = Q.B, r = t.readUshort, i = {};
-    return t.readUint(n, A), A += 4, i.numGlyphs = r(n, A), A += 2, i;
+    return t.readUint(a, A), A += 4, i.numGlyphs = r(a, A), A += 2, i;
   }
 };
 Q.T.loca = {
-  parseTab: function(n, A, e, t) {
-    var r = Q.B, i = [], s = t.head.indexToLocFormat, o = t.maxp.numGlyphs + 1;
-    if (s == 0) for (var g = 0; g < o; g++) i.push(r.readUshort(n, A + (g << 1)) << 1);
-    if (s == 1) for (var g = 0; g < o; g++) i.push(r.readUint(n, A + (g << 2)));
+  parseTab: function(a, A, e, t) {
+    var r = Q.B, i = [], s = t.head.indexToLocFormat, n = t.maxp.numGlyphs + 1;
+    if (s == 0) for (var g = 0; g < n; g++) i.push(r.readUshort(a, A + (g << 1)) << 1);
+    if (s == 1) for (var g = 0; g < n; g++) i.push(r.readUint(a, A + (g << 2)));
     return i;
   }
 };
 Q.T.glyf = {
-  parseTab: function(n, A, e, t) {
+  parseTab: function(a, A, e, t) {
     for (var r = [], i = t.maxp.numGlyphs, s = 0; s < i; s++) r.push(null);
     return r;
   },
-  _parseGlyf: function(n, A) {
-    var e = Q.B, t = n._data, r = n.loca;
+  _parseGlyf: function(a, A) {
+    var e = Q.B, t = a._data, r = a.loca;
     if (r[A] == r[A + 1]) return null;
-    var i = Q.findTable(t, "glyf", n._offset)[0] + r[A], s = {};
+    var i = Q.findTable(t, "glyf", a._offset)[0] + r[A], s = {};
     if (s.noc = e.readShort(t, i), i += 2, s.xMin = e.readShort(t, i), i += 2, s.yMin = e.readShort(t, i), i += 2, s.xMax = e.readShort(t, i), i += 2, s.yMax = e.readShort(t, i), i += 2, s.xMin >= s.xMax || s.yMin >= s.yMax) return null;
     if (s.noc > 0) {
       s.endPts = [];
-      for (var o = 0; o < s.noc; o++)
+      for (var n = 0; n < s.noc; n++)
         s.endPts.push(e.readUshort(t, i)), i += 2;
       var g = e.readUshort(t, i);
       if (i += 2, t.length - i < g) return null;
       i += g;
       var B = s.endPts[s.noc - 1] + 1;
       s.flags = [];
-      for (var o = 0; o < B; o++) {
-        var E = t[i];
-        if (i++, s.flags.push(E), E & 8) {
-          var l = t[i];
+      for (var n = 0; n < B; n++) {
+        var h = t[i];
+        if (i++, s.flags.push(h), h & 8) {
+          var E = t[i];
           i++;
-          for (var h = 0; h < l; h++)
-            s.flags.push(E), o++;
+          for (var l = 0; l < E; l++)
+            s.flags.push(h), n++;
         }
       }
       s.xs = [];
-      for (var o = 0; o < B; o++) {
-        var c = (s.flags[o] & 2) != 0, d = (s.flags[o] & 16) != 0;
+      for (var n = 0; n < B; n++) {
+        var c = (s.flags[n] & 2) != 0, d = (s.flags[n] & 16) != 0;
         c ? (s.xs.push(d ? t[i] : -t[i]), i++) : d ? s.xs.push(0) : (s.xs.push(e.readShort(t, i)), i += 2);
       }
       s.ys = [];
-      for (var o = 0; o < B; o++) {
-        var c = (s.flags[o] & 4) != 0, d = (s.flags[o] & 32) != 0;
+      for (var n = 0; n < B; n++) {
+        var c = (s.flags[n] & 4) != 0, d = (s.flags[n] & 32) != 0;
         c ? (s.ys.push(d ? t[i] : -t[i]), i++) : d ? s.ys.push(0) : (s.ys.push(e.readShort(t, i)), i += 2);
       }
-      for (var u = 0, m = 0, o = 0; o < B; o++)
-        u += s.xs[o], m += s.ys[o], s.xs[o] = u, s.ys[o] = m;
+      for (var u = 0, m = 0, n = 0; n < B; n++)
+        u += s.xs[n], m += s.ys[n], s.xs[n] = u, s.ys[n] = m;
     } else
       s.parts = [];
     return s;
@@ -1116,9 +1117,9 @@ class cA {
       return e;
     for (let t = 0; t < A.groups.length; t += 3) {
       const r = A.groups[t], i = A.groups[t + 1], s = A.groups[t + 2];
-      for (let o = r; o <= i; o++)
-        if (s + (o - r) > 0) {
-          const B = String.fromCodePoint(o);
+      for (let n = r; n <= i; n++)
+        if (s + (n - r) > 0) {
+          const B = String.fromCodePoint(n);
           e.push(B);
         }
     }
@@ -1168,9 +1169,9 @@ class uA {
    * @param renderer The WebGL renderer instance
    */
   constructor(A) {
-    a(this, "_textureCanvas");
-    a(this, "_textureContext");
-    a(this, "_renderer");
+    o(this, "_textureCanvas");
+    o(this, "_textureContext");
+    o(this, "_renderer");
     this._renderer = A, this._textureCanvas = document.createElement("canvas"), this._textureContext = this._textureCanvas.getContext("2d", { willReadFrequently: !0, alpha: !1 });
   }
   /**
@@ -1182,13 +1183,13 @@ class uA {
    * @returns Object containing framebuffer, columns, and rows
    */
   createTextureAtlas(A, e, t, r) {
-    const i = A.length, s = Math.ceil(Math.sqrt(i)), o = Math.ceil(i / s), g = e.width * s, B = e.height * o;
+    const i = A.length, s = Math.ceil(Math.sqrt(i)), n = Math.ceil(i / s), g = e.width * s, B = e.height * n;
     this._setupCanvas(g, B, t, r), this._renderCharactersToCanvas(A, e, s, t), this._applyBlackWhiteThreshold();
-    const E = this._renderer.createFramebuffer(g, B, { filter: "nearest" });
-    return E.update(this._textureCanvas), {
-      framebuffer: E,
+    const h = this._renderer.createFramebuffer(g, B, { filter: "nearest" });
+    return h.update(this._textureCanvas), {
+      framebuffer: h,
       columns: s,
-      rows: o
+      rows: n
     };
   }
   /**
@@ -1212,8 +1213,8 @@ class uA {
    */
   _renderCharactersToCanvas(A, e, t, r) {
     for (let i = 0; i < A.length; i++) {
-      const s = i % t, o = Math.floor(i / t), g = s * e.width + e.width * 0.5, B = o * e.height + e.height * 0.5, E = Math.round(g - e.width * 0.5), l = Math.round(B - r * 0.5);
-      this._textureContext.fillText(A[i].character, E, l);
+      const s = i % t, n = Math.floor(i / t), g = s * e.width + e.width * 0.5, B = n * e.height + e.height * 0.5, h = Math.round(g - e.width * 0.5), E = Math.round(B - r * 0.5);
+      this._textureContext.fillText(A[i].character, h, E);
     }
   }
   /**
@@ -1225,8 +1226,8 @@ class uA {
   _applyBlackWhiteThreshold(A = 128) {
     const e = this._textureContext.getImageData(0, 0, this._textureCanvas.width, this._textureCanvas.height), t = e.data;
     for (let r = 0; r < t.length; r += 4) {
-      const i = 0.299 * t[r] + 0.587 * t[r + 1] + 0.114 * t[r + 2], s = A + 32, o = i > s ? 255 : 0;
-      t[r] = o, t[r + 1] = o, t[r + 2] = o;
+      const i = 0.299 * t[r] + 0.587 * t[r + 1] + 0.114 * t[r + 2], s = A + 32, n = i > s ? 255 : 0;
+      t[r] = n, t[r + 1] = n, t[r + 2] = n;
     }
     this._textureContext.putImageData(e, 0, 0);
   }
@@ -1236,8 +1237,8 @@ class dA {
    * Creates a new MetricsCalculation instance.
    */
   constructor() {
-    a(this, "_tempCanvas");
-    a(this, "_tempContext");
+    o(this, "_tempCanvas");
+    o(this, "_tempContext");
     this._tempCanvas = document.createElement("canvas"), this._tempContext = this._tempCanvas.getContext("2d");
   }
   /**
@@ -1252,7 +1253,7 @@ class dA {
     this._tempContext.font = `${e}px ${t}`;
     let r = 0, i = 0;
     for (const s of A) {
-      const o = this._tempContext.measureText(s), g = o.width, B = o.actualBoundingBoxAscent + o.actualBoundingBoxDescent;
+      const n = this._tempContext.measureText(s), g = n.width, B = n.actualBoundingBoxAscent + n.actualBoundingBoxDescent;
       g > 0 && (r = Math.max(r, g), i = Math.max(i, B));
     }
     return {
@@ -1271,16 +1272,16 @@ class fA {
   createCharacterObjects(A, e) {
     return A.map((t, r) => {
       const i = t.codePointAt(0) || 0, s = this._generateCharacterColor(r);
-      let o = 0;
+      let n = 0;
       if (e.hmtx && e.hmtx.aWidth) {
         const g = this._getGlyphIndex(e, i);
-        g > 0 && e.hmtx.aWidth[g] !== void 0 && (o = e.hmtx.aWidth[g]);
+        g > 0 && e.hmtx.aWidth[g] !== void 0 && (n = e.hmtx.aWidth[g]);
       }
       return {
         character: t,
         unicode: i,
         color: s,
-        advanceWidth: o
+        advanceWidth: n
       };
     });
   }
@@ -1303,9 +1304,9 @@ class fA {
             {
               const s = r.idRangeOffset[i] / 2 + (e - r.startCount[i]) - (r.startCount.length - i);
               if (s >= 0 && s < r.glyphIdArray.length) {
-                const o = r.glyphIdArray[s];
-                if (o !== 0)
-                  return o + r.idDelta[i] & 65535;
+                const n = r.glyphIdArray[s];
+                if (n !== 0)
+                  return n + r.idDelta[i] & 65535;
               }
             }
           }
@@ -1359,20 +1360,20 @@ class CA {
    * @ignore
    */
   constructor(A, e = 16) {
-    a(this, "_font");
-    a(this, "_characters", []);
-    a(this, "_fontFramebuffer");
-    a(this, "_fontSize", 16);
-    a(this, "_textureColumns", 0);
-    a(this, "_textureRows", 0);
-    a(this, "_maxGlyphDimensions", { width: 0, height: 0 });
-    a(this, "_fontFace");
-    a(this, "_fontFamilyName", "UrsaFont");
+    o(this, "_font");
+    o(this, "_characters", []);
+    o(this, "_fontFramebuffer");
+    o(this, "_fontSize", 16);
+    o(this, "_textureColumns", 0);
+    o(this, "_textureRows", 0);
+    o(this, "_maxGlyphDimensions", { width: 0, height: 0 });
+    o(this, "_fontFace");
+    o(this, "_fontFamilyName", "UrsaFont");
     // Component classes
-    a(this, "_characterExtractor");
-    a(this, "_textureAtlas");
-    a(this, "_metricsCalculator");
-    a(this, "_characterColorMapper");
+    o(this, "_characterExtractor");
+    o(this, "_textureAtlas");
+    o(this, "_metricsCalculator");
+    o(this, "_characterColorMapper");
     this._fontSize = e, this._characterExtractor = new cA(), this._textureAtlas = new uA(A), this._metricsCalculator = new dA(), this._characterColorMapper = new fA();
   }
   /**
@@ -1386,7 +1387,7 @@ class CA {
     if (A) {
       const t = await fetch(A);
       if (!t.ok)
-        throw new P(`Failed to load font file: ${t.status} ${t.statusText}`);
+        throw new p(`Failed to load font file: ${t.status} ${t.statusText}`);
       e = await t.arrayBuffer();
     } else
       e = await (await fetch(QA)).arrayBuffer();
@@ -1422,7 +1423,7 @@ class CA {
     try {
       const e = await fetch(A);
       if (!e.ok)
-        throw new P(`Failed to load font file: ${e.status} ${e.statusText}`);
+        throw new p(`Failed to load font file: ${e.status} ${e.statusText}`);
       const t = await e.arrayBuffer();
       await this._loadFontFace(t);
       const r = Q.parse(t);
@@ -1430,7 +1431,7 @@ class CA {
         throw new Error("Failed to parse font file");
       this._font = r[0], await this._initializeFont();
     } catch (e) {
-      throw new P(`Failed to load font: ${e instanceof Error ? e.message : "Unknown error"}`, e);
+      throw new p(`Failed to load font: ${e instanceof Error ? e.message : "Unknown error"}`, e);
     }
   }
   /**
@@ -1537,25 +1538,25 @@ class mA {
    */
   constructor(A, e, t) {
     /** The number of columns in the grid. */
-    a(this, "_cols");
+    o(this, "_cols");
     /** The number of rows in the grid. */
-    a(this, "_rows");
+    o(this, "_rows");
     /** The total width of the grid in pixels. */
-    a(this, "_width");
+    o(this, "_width");
     /** The total height of the grid in pixels. */
-    a(this, "_height");
+    o(this, "_height");
     /** The offset to the outer canvas on the x-axis when centering the grid. */
-    a(this, "_offsetX");
+    o(this, "_offsetX");
     /** The offset to the outer canvas on the y-axis when centering the grid. */
-    a(this, "_offsetY");
+    o(this, "_offsetY");
     /** Whether the grid dimensions are fixed, or responsive based on the canvas dimensions. */
-    a(this, "_fixedDimensions", !1);
+    o(this, "_fixedDimensions", !1);
     /** The canvas element used to determine the grid dimensions. */
-    a(this, "_canvas");
+    o(this, "_canvas");
     /** The width of each cell in the grid. */
-    a(this, "_cellWidth");
+    o(this, "_cellWidth");
     /** The height of each cell in the grid. */
-    a(this, "_cellHeight");
+    o(this, "_cellHeight");
     this._canvas = A, this._cellWidth = e, this._cellHeight = t, this.reset();
   }
   /**
@@ -1666,10 +1667,12 @@ class mA {
 }
 class DA {
   constructor(A, e = !1, t = {}) {
-    a(this, "_canvas");
-    a(this, "captureSource");
-    a(this, "_isStandalone");
-    this.captureSource = A, this._isStandalone = e, this._canvas = this.createCanvas(t.width, t.height);
+    o(this, "_canvas");
+    o(this, "captureSource");
+    o(this, "_isStandalone");
+    o(this, "resizeObserver");
+    o(this, "onTransformChange");
+    this.captureSource = A, this._isStandalone = e, this._canvas = this.createCanvas(t.width, t.height), e && this.setupTransformObserver();
   }
   createCanvas(A, e) {
     var r;
@@ -1678,12 +1681,12 @@ class DA {
       t.width = A || 800, t.height = e || 600, document.body.appendChild(t);
     else {
       const i = this.captureSource.getBoundingClientRect();
-      let s = Math.round(i.width), o = Math.round(i.height);
+      let s = Math.round(i.width), n = Math.round(i.height);
       if (this.captureSource instanceof HTMLVideoElement) {
-        const E = this.captureSource;
-        (s === 0 || o === 0) && E.videoWidth > 0 && E.videoHeight > 0 && (s = E.videoWidth, o = E.videoHeight);
+        const h = this.captureSource;
+        (s === 0 || n === 0) && h.videoWidth > 0 && h.videoHeight > 0 && (s = h.videoWidth, n = h.videoHeight);
       }
-      t.width = s, t.height = o, t.style.position = "absolute", t.style.pointerEvents = "none";
+      t.width = s, t.height = n, t.style.position = "absolute", t.style.pointerEvents = "none";
       const g = window.getComputedStyle(this.captureSource);
       let B = parseInt(g.zIndex || "0", 10);
       isNaN(B) && (B = 0), t.style.zIndex = (B + 1).toString(), this.positionOverlayCanvas(t), (r = this.captureSource.parentNode) == null || r.insertBefore(t, this.captureSource.nextSibling);
@@ -1726,15 +1729,48 @@ class DA {
       powerPreference: "high-performance"
     }, e = this._canvas.getContext("webgl2", A) || this._canvas.getContext("webgl", A);
     if (!e)
-      throw new P("WebGL context could not be created. Ensure your browser supports WebGL.");
+      throw new p("WebGL context could not be created. Ensure your browser supports WebGL.");
     return e;
   }
+  /**
+   * Get the effective rendering dimensions accounting for CSS transforms
+   */
+  getEffectiveRenderingDimensions() {
+    if (!this._canvas)
+      return { width: 0, height: 0 };
+    const A = this._canvas.getBoundingClientRect(), e = Math.round(A.width), t = Math.round(A.height);
+    if (this._isStandalone) {
+      const r = this._canvas.width, i = this._canvas.height;
+      if (e !== r || t !== i)
+        return { width: e, height: t };
+    }
+    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 A = this._canvas.getBoundingClientRect(), e = Math.round(A.width), t = Math.round(A.height);
+    return e !== this._canvas.width || t !== this._canvas.height;
+  }
+  /**
+   * Set up ResizeObserver to monitor for CSS transform changes
+   */
+  setupTransformObserver() {
+    typeof ResizeObserver > "u" || (this.resizeObserver = new ResizeObserver((A) => {
+      for (const e of A) {
+        const t = e.contentRect, r = Math.round(t.width), i = Math.round(t.height);
+        this.onTransformChange && (r !== this._canvas.width || i !== 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 A = this._canvas.getContext("webgl") || this._canvas.getContext("webgl2");
       if (A) {
         const e = A.getExtension("WEBGL_lose_context");
@@ -1764,15 +1800,15 @@ class x {
    * @ignore
    */
   constructor(A, e, t, r = {}) {
-    a(this, "renderer");
-    a(this, "fontManager");
-    a(this, "grid");
-    a(this, "_characterFramebuffer");
-    a(this, "_primaryColorFramebuffer");
-    a(this, "_secondaryColorFramebuffer");
-    a(this, "_rotationFramebuffer");
-    a(this, "_transformFramebuffer");
-    a(this, "_options");
+    o(this, "renderer");
+    o(this, "fontManager");
+    o(this, "grid");
+    o(this, "_characterFramebuffer");
+    o(this, "_primaryColorFramebuffer");
+    o(this, "_secondaryColorFramebuffer");
+    o(this, "_rotationFramebuffer");
+    o(this, "_transformFramebuffer");
+    o(this, "_options");
     this.renderer = A, this.fontManager = e, this.grid = t, this._options = r, this._characterFramebuffer = this.renderer.createFramebuffer(this.grid.cols, this.grid.rows), this._primaryColorFramebuffer = this.renderer.createFramebuffer(this.grid.cols, this.grid.rows), this._secondaryColorFramebuffer = this.renderer.createFramebuffer(this.grid.cols, this.grid.rows), this._rotationFramebuffer = this.renderer.createFramebuffer(this.grid.cols, this.grid.rows), this._transformFramebuffer = this.renderer.createFramebuffer(this.grid.cols, this.grid.rows);
   }
   /**
@@ -1833,7 +1869,7 @@ class x {
     return this._options;
   }
 }
-class PA {
+class pA {
   /**
    * Create a new color palette instance.
    * @param renderer The renderer instance.
@@ -1841,9 +1877,9 @@ class PA {
    */
   constructor(A, e) {
     /** The framebuffer used to store the color palette. */
-    a(this, "_framebuffer");
-    a(this, "_renderer");
-    a(this, "_colors");
+    o(this, "_framebuffer");
+    o(this, "_renderer");
+    o(this, "_colors");
     this._renderer = A, this._colors = e;
     const t = Math.max(this._colors.length, 1);
     this._framebuffer = this._renderer.createFramebuffer(t, 1), this._updateFramebuffer();
@@ -1891,8 +1927,8 @@ class PA {
 class z extends x {
   constructor(e, t, r, i = {}) {
     super(e, t, r, i);
-    a(this, "palette");
-    this.palette = new PA(this.renderer, this.fontManager.getCharacterColors(" .:-=+*%@#"));
+    o(this, "palette");
+    this.palette = new pA(this.renderer, this.fontManager.getCharacterColors(" .:-=+*%@#"));
   }
   /**
    * Sets the characters used for mapping.
@@ -1914,10 +1950,10 @@ class z extends x {
    * @param a Alpha component (0-255).
    */
   characterColor(e, t, r, i = 255) {
-    let s, o, g, B;
+    let s, n, g, B;
     if (typeof e == "string") {
-      const E = this.parseHexColor(e);
-      if (!E) {
+      const h = this.parseHexColor(e);
+      if (!h) {
         f.validate(
           !1,
           "Invalid hex color format. Use '#FF0000', '#F00', 'FF0000', or 'F00'.",
@@ -1925,14 +1961,14 @@ class z extends x {
         );
         return;
       }
-      [s, o, g, B] = E;
-    } else if (s = e, o = t !== void 0 ? t : e, g = r !== void 0 ? r : e, B = i, !f.validate(
-      [s, o, g, B].every((E) => E >= 0 && E <= 255),
+      [s, n, g, B] = h;
+    } else if (s = e, n = t !== void 0 ? t : e, g = r !== void 0 ? r : e, B = i, !f.validate(
+      [s, n, g, B].every((h) => h >= 0 && h <= 255),
       "Character color values must be between 0 and 255",
-      { method: "characterColor", providedValues: { r: s, g: o, b: g, a: B } }
+      { method: "characterColor", providedValues: { r: s, g: n, b: g, a: B } }
     ))
       return;
-    this._options.characterColor = [s / 255, o / 255, g / 255, B / 255];
+    this._options.characterColor = [s / 255, n / 255, g / 255, B / 255];
   }
   /**
    * Sets the character color mode.
@@ -1956,10 +1992,10 @@ class z extends x {
    * @param a Alpha component (0-255).
    */
   cellColor(e, t, r, i = 255) {
-    let s, o, g, B;
+    let s, n, g, B;
     if (typeof e == "string") {
-      const E = this.parseHexColor(e);
-      if (!E) {
+      const h = this.parseHexColor(e);
+      if (!h) {
         f.validate(
           !1,
           "Invalid hex color format. Use '#FF0000', '#F00', 'FF0000', or 'F00'.",
@@ -1967,14 +2003,14 @@ class z extends x {
         );
         return;
       }
-      [s, o, g, B] = E;
-    } else if (s = e, o = t !== void 0 ? t : e, g = r !== void 0 ? r : e, B = i, !f.validate(
-      [s, o, g, B].every((E) => E >= 0 && E <= 255),
+      [s, n, g, B] = h;
+    } else if (s = e, n = t !== void 0 ? t : e, g = r !== void 0 ? r : e, B = i, !f.validate(
+      [s, n, g, B].every((h) => h >= 0 && h <= 255),
       "Cell color values must be between 0 and 255",
-      { method: "cellColor", providedValues: { r: s, g: o, b: g, a: B } }
+      { method: "cellColor", providedValues: { r: s, g: n, b: g, a: B } }
     ))
       return;
-    this._options.cellColor = [s / 255, o / 255, g / 255, B / 255];
+    this._options.cellColor = [s / 255, n / 255, g / 255, B / 255];
   }
   /**
    * Sets the cell color mode.
@@ -2050,8 +2086,8 @@ class z extends x {
     return [t, r, i, 255];
   }
 }
-var pA = "precision lowp float;uniform sampler2D u_sketchTexture;uniform vec2 u_gridCellDimensions;uniform vec2 u_brightnessRange;varying vec2 v_uv;void main(){vec2 cellCenter=(floor(v_uv*u_gridCellDimensions)+vec2(0.5))/u_gridCellDimensions;vec4 color=texture2D(u_sketchTexture,cellCenter);float brightness=dot(color.rgb,vec3(0.299,0.587,0.114));float brightnessValue=brightness*255.0;if(brightnessValue>=u_brightnessRange.x&&brightnessValue<=u_brightnessRange.y){gl_FragColor=color;}else{gl_FragColor=vec4(0.0);}}", IA = "precision lowp float;uniform sampler2D u_sampleTexture;uniform vec4 u_fillColor;uniform bool u_useFixedColor;varying vec2 v_uv;void main(){vec4 sampleColor=texture2D(u_sampleTexture,v_uv);if(sampleColor.a>0.0){if(u_useFixedColor){gl_FragColor=u_fillColor;}else{gl_FragColor=sampleColor;}}else{gl_FragColor=vec4(0.0);}}", wA = "precision lowp float;uniform sampler2D u_sampleTexture;uniform bool u_invert;uniform bool u_flipHorizontally;uniform bool u_flipVertically;varying vec2 v_uv;void main(){vec4 sampleColor=texture2D(u_sampleTexture,v_uv);if(sampleColor.a>0.0){float invertValue=u_invert ? 1.0 : 0.0;float flipHValue=u_flipHorizontally ? 1.0 : 0.0;float flipVValue=u_flipVertically ? 1.0 : 0.0;gl_FragColor=vec4(invertValue,flipHValue,flipVValue,1.0);}else{gl_FragColor=vec4(0.0);}}", _A = "precision lowp float;uniform sampler2D u_sampleTexture;uniform vec4 u_rotationColor;varying vec2 v_uv;void main(){vec4 sampleColor=texture2D(u_sampleTexture,v_uv);if(sampleColor.a>0.0){gl_FragColor=u_rotationColor;}else{gl_FragColor=vec4(0.0);}}", bA = "precision lowp float;uniform sampler2D u_colorSampleFramebuffer;uniform sampler2D u_charPaletteTexture;uniform vec2 u_charPaletteSize;uniform vec2 u_brightnessRange;varying vec2 v_uv;void main(){vec4 color=texture2D(u_colorSampleFramebuffer,v_uv);if(color.a==0.0){gl_FragColor=vec4(0.0);return;}float brightness=dot(color.rgb,vec3(0.299,0.587,0.114))*255.0;vec2 range=u_brightnessRange;if(brightness<range.x||brightness>range.y){gl_FragColor=vec4(0.0);return;}float t=(brightness-range.x)/(range.y-range.x);float idx=clamp(floor(t*u_charPaletteSize.x),0.0,u_charPaletteSize.x-1.0);vec3 charColor=texture2D(u_charPaletteTexture,vec2((idx+0.5)/u_charPaletteSize.x,0.0)).rgb;gl_FragColor=vec4(charColor,1.0);}";
-const vA = {
+var PA = "precision lowp float;uniform sampler2D u_sketchTexture;uniform vec2 u_gridCellDimensions;uniform vec2 u_brightnessRange;varying vec2 v_uv;void main(){vec2 cellCenter=(floor(v_uv*u_gridCellDimensions)+vec2(0.5))/u_gridCellDimensions;vec4 color=texture2D(u_sketchTexture,cellCenter);float brightness=dot(color.rgb,vec3(0.299,0.587,0.114));float brightnessValue=brightness*255.0;if(brightnessValue>=u_brightnessRange.x&&brightnessValue<=u_brightnessRange.y){gl_FragColor=color;}else{gl_FragColor=vec4(0.0);}}", wA = "precision lowp float;uniform sampler2D u_sampleTexture;uniform vec4 u_fillColor;uniform bool u_useFixedColor;varying vec2 v_uv;void main(){vec4 sampleColor=texture2D(u_sampleTexture,v_uv);if(sampleColor.a>0.0){if(u_useFixedColor){gl_FragColor=u_fillColor;}else{gl_FragColor=sampleColor;}}else{gl_FragColor=vec4(0.0);}}", _A = "precision lowp float;uniform sampler2D u_sampleTexture;uniform bool u_invert;uniform bool u_flipHorizontally;uniform bool u_flipVertically;varying vec2 v_uv;void main(){vec4 sampleColor=texture2D(u_sampleTexture,v_uv);if(sampleColor.a>0.0){float invertValue=u_invert ? 1.0 : 0.0;float flipHValue=u_flipHorizontally ? 1.0 : 0.0;float flipVValue=u_flipVertically ? 1.0 : 0.0;gl_FragColor=vec4(invertValue,flipHValue,flipVValue,1.0);}else{gl_FragColor=vec4(0.0);}}", IA = "precision lowp float;uniform sampler2D u_sampleTexture;uniform vec4 u_rotationColor;varying vec2 v_uv;void main(){vec4 sampleColor=texture2D(u_sampleTexture,v_uv);if(sampleColor.a>0.0){gl_FragColor=u_rotationColor;}else{gl_FragColor=vec4(0.0);}}", vA = "precision lowp float;uniform sampler2D u_colorSampleFramebuffer;uniform sampler2D u_charPaletteTexture;uniform vec2 u_charPaletteSize;uniform vec2 u_brightnessRange;varying vec2 v_uv;void main(){vec4 color=texture2D(u_colorSampleFramebuffer,v_uv);if(color.a==0.0){gl_FragColor=vec4(0.0);return;}float brightness=dot(color.rgb,vec3(0.299,0.587,0.114))*255.0;vec2 range=u_brightnessRange;if(brightness<range.x||brightness>range.y){gl_FragColor=vec4(0.0);return;}float t=(brightness-range.x)/(range.y-range.x);float idx=clamp(floor(t*u_charPaletteSize.x),0.0,u_charPaletteSize.x-1.0);vec3 charColor=texture2D(u_charPaletteTexture,vec2((idx+0.5)/u_charPaletteSize.x,0.0)).rgb;gl_FragColor=vec4(charColor,1.0);}";
+const bA = {
   /** Enable/disable the renderer */
   enabled: !0,
   /** Characters used for brightness mapping (from darkest to brightest) */
@@ -2077,7 +2113,7 @@ const vA = {
   /** Range of brightness values to map to ASCII characters */
   brightnessRange: [0, 255]
 };
-class O extends z {
+class k extends z {
   /**
    * Creates a new TextmodeBrightnessConverter instance.
    * @param renderer Renderer instance for texture creation
@@ -2086,14 +2122,14 @@ class O extends z {
    * @ignore
    */
   constructor(e, t, r) {
-    super(e, t, r, { ...vA });
-    a(this, "sampleShader");
-    a(this, "colorFillShader");
-    a(this, "charMappingShader");
-    a(this, "transformFillShader");
-    a(this, "rotationFillShader");
-    a(this, "sampleFramebuffer");
-    this.sampleShader = new I(e.context, w, pA), this.colorFillShader = new I(e.context, w, IA), this.transformFillShader = new I(e.context, w, wA), this.rotationFillShader = new I(e.context, w, _A), this.charMappingShader = new I(e.context, w, bA), this.sampleFramebuffer = this.renderer.createFramebuffer(this.grid.cols, this.grid.rows);
+    super(e, t, r, { ...bA });
+    o(this, "sampleShader");
+    o(this, "colorFillShader");
+    o(this, "charMappingShader");
+    o(this, "transformFillShader");
+    o(this, "rotationFillShader");
+    o(this, "sampleFramebuffer");
+    this.sampleShader = new w(e.context, _, PA), this.colorFillShader = new w(e.context, _, wA), this.transformFillShader = new w(e.context, _, _A), this.rotationFillShader = new w(e.context, _, IA), this.charMappingShader = new w(e.context, _, vA), this.sampleFramebuffer = this.renderer.createFramebuffer(this.grid.cols, this.grid.rows);
   }
   convert(e) {
     this.sampleFramebuffer.begin(), this.renderer.clear(), this.renderer.shader(this.sampleShader), this.renderer.setUniform("u_sketchTexture", e), this.renderer.setUniform("u_gridCellDimensions", [this.grid.cols, this.grid.rows]), this.renderer.setUniform("u_brightnessRange", this._options.brightnessRange), this.renderer.rect(0, 0, this.grid.cols, this.grid.rows), this.sampleFramebuffer.end(), this._primaryColorFramebuffer.begin(), this.renderer.clear(), this.renderer.shader(this.colorFillShader), this.renderer.setUniform("u_sampleTexture", this.sampleFramebuffer.texture), this.renderer.setUniform("u_fillColor", this._options.characterColor), this.renderer.setUniform("u_useFixedColor", this._options.characterColorMode === "fixed"), this.renderer.rect(0, 0, this.grid.cols, this.grid.rows), this._primaryColorFramebuffer.end(), this._secondaryColorFramebuffer.begin(), this.renderer.clear(), this.renderer.shader(this.colorFillShader), this.renderer.setUniform("u_sampleTexture", this.sampleFramebuffer.texture), this.renderer.setUniform("u_fillColor", this._options.cellColor), this.renderer.setUniform("u_useFixedColor", this._options.cellColorMode === "fixed"), this.renderer.rect(0, 0, this.grid.cols, this.grid.rows), this._secondaryColorFramebuffer.end(), this._transformFramebuffer.begin(), this.renderer.clear(), this.renderer.shader(this.transformFillShader), this.renderer.setUniform("u_sampleTexture", this.sampleFramebuffer.texture), this.renderer.setUniform("u_invert", this._options.invert), this.renderer.setUniform("u_flipHorizontally", this._options.flipHorizontally), this.renderer.setUniform("u_flipVertically", this._options.flipVertically), this.renderer.rect(0, 0, this.grid.cols, this.grid.rows), this._transformFramebuffer.end(), this._rotationFramebuffer.begin(), this.renderer.clear(), this.renderer.shader(this.rotationFillShader), this.renderer.setUniform("u_sampleTexture", this.sampleFramebuffer.texture), this.renderer.setUniform("u_rotationColor", this._options.rotation), this.renderer.rect(0, 0, this.grid.cols, this.grid.rows), this._rotationFramebuffer.end(), this._characterFramebuffer.begin(), this.renderer.clear(0, 0, 0, 0), this.renderer.shader(this.charMappingShader), this.renderer.setUniform("u_colorSampleFramebuffer", this.sampleFramebuffer.texture), this.renderer.setUniform("u_charPaletteTexture", this.palette.texture), this.renderer.setUniform("u_charPaletteSize", [this.palette.colors.length, 1]), this.renderer.setUniform("u_brightnessRange", this._options.brightnessRange), this.renderer.rect(0, 0, this.grid.cols, this.grid.rows), this._characterFramebuffer.end();
@@ -2118,7 +2154,7 @@ class O extends z {
 }
 const LA = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  TextmodeBrightnessConverter: O,
+  TextmodeBrightnessConverter: k,
   TextmodeConverter: x,
   TextmodeFeatureConverter: z
 }, Symbol.toStringTag, { value: "Module" }));
@@ -2132,19 +2168,19 @@ class FA {
    * @ignore
    */
   constructor(A, e, t) {
-    a(this, "renderer");
-    a(this, "font");
-    a(this, "grid");
-    a(this, "converters");
-    a(this, "_resultFramebuffer");
-    a(this, "_asciiShader");
-    a(this, "_characterFramebuffer");
-    a(this, "_primaryColorFramebuffer");
-    a(this, "_secondaryColorFramebuffer");
-    a(this, "_rotationFramebuffer");
-    a(this, "_transformFramebuffer");
-    this.renderer = A, this.font = e, this.grid = t, this._asciiShader = this.renderer.createShader(w, xA), this.converters = [
-      { name: "brightness", converter: new O(A, e, t) },
+    o(this, "renderer");
+    o(this, "font");
+    o(this, "grid");
+    o(this, "converters");
+    o(this, "_resultFramebuffer");
+    o(this, "_asciiShader");
+    o(this, "_characterFramebuffer");
+    o(this, "_primaryColorFramebuffer");
+    o(this, "_secondaryColorFramebuffer");
+    o(this, "_rotationFramebuffer");
+    o(this, "_transformFramebuffer");
+    this.renderer = A, this.font = e, this.grid = t, this._asciiShader = this.renderer.createShader(_, xA), this.converters = [
+      { name: "brightness", converter: new k(A, e, t) },
       { name: "custom", converter: new x(A, e, t) }
     ], this._characterFramebuffer = this.renderer.createFramebuffer(t.cols, t.rows), this._primaryColorFramebuffer = this.renderer.createFramebuffer(t.cols, t.rows), this._secondaryColorFramebuffer = this.renderer.createFramebuffer(t.cols, t.rows), this._rotationFramebuffer = this.renderer.createFramebuffer(t.cols, t.rows), this._transformFramebuffer = this.renderer.createFramebuffer(t.cols, t.rows), this._resultFramebuffer = this.renderer.createFramebuffer(this.grid.width, this.grid.height);
   }
@@ -2206,7 +2242,7 @@ class FA {
     ))
       return;
     let t;
-    return e === "brightness" ? t = new O(this.renderer, this.font, this.grid) : t = new x(this.renderer, this.font, this.grid), this.converters.push({ name: A, converter: t }), t;
+    return e === "brightness" ? t = new k(this.renderer, this.font, this.grid) : t = new x(this.renderer, this.font, this.grid), this.converters.push({ name: A, converter: t }), t;
   }
   /**
    * Removes a converter from the pipeline by name or instance.
@@ -2309,13 +2345,13 @@ class L {
    * @returns Object containing all pixel data arrays
    */
   extractFramebufferData(A) {
-    const e = A.get("brightness"), t = e == null ? void 0 : e.characterFramebuffer, r = e == null ? void 0 : e.primaryColorFramebuffer, i = e == null ? void 0 : e.secondaryColorFramebuffer, s = e == null ? void 0 : e.transformFramebuffer, o = e == null ? void 0 : e.rotationFramebuffer;
-    return t == null || t.loadPixels(), r == null || r.loadPixels(), i == null || i.loadPixels(), s == null || s.loadPixels(), o == null || o.loadPixels(), {
+    const e = A.get("brightness"), t = e == null ? void 0 : e.characterFramebuffer, r = e == null ? void 0 : e.primaryColorFramebuffer, i = e == null ? void 0 : e.secondaryColorFramebuffer, s = e == null ? void 0 : e.transformFramebuffer, n = e == null ? void 0 : e.rotationFramebuffer;
+    return t == null || t.loadPixels(), r == null || r.loadPixels(), i == null || i.loadPixels(), s == null || s.loadPixels(), n == null || n.loadPixels(), {
       characterPixels: (t == null ? void 0 : t.pixels) || new Uint8Array(0),
       primaryColorPixels: (r == null ? void 0 : r.pixels) || new Uint8Array(0),
       secondaryColorPixels: (i == null ? void 0 : i.pixels) || new Uint8Array(0),
       transformPixels: (s == null ? void 0 : s.pixels) || new Uint8Array(0),
-      rotationPixels: (o == null ? void 0 : o.pixels) || new Uint8Array(0)
+      rotationPixels: (n == null ? void 0 : n.pixels) || new Uint8Array(0)
     };
   }
   /**
@@ -2410,9 +2446,9 @@ class yA extends L {
    * @returns Transform data object
    */
   extractTransformData(A, e, t) {
-    const r = A[t], i = A[t + 1], s = A[t + 2], o = r === 255, g = i === 255, B = s === 255, E = e[t], l = e[t + 1], h = E + l / 255, c = Math.round(h * 360 / 255 * 100) / 100;
+    const r = A[t], i = A[t + 1], s = A[t + 2], n = r === 255, g = i === 255, B = s === 255, h = e[t], E = e[t + 1], l = h + E / 255, c = Math.round(l * 360 / 255 * 100) / 100;
     return {
-      isInverted: o,
+      isInverted: n,
       flipHorizontal: g,
       flipVertical: B,
       rotation: c
@@ -2445,27 +2481,27 @@ class yA extends L {
     let r = 0;
     for (let i = 0; i < e.rows; i++)
       for (let s = 0; s < e.cols; s++) {
-        const o = r * 4, g = this.getCharacterIndex(
+        const n = r * 4, g = this.getCharacterIndex(
           A.characterPixels,
-          o
+          n
         );
-        let B = this.pixelsToRGBA(A.primaryColorPixels, o), E = this.pixelsToRGBA(A.secondaryColorPixels, o);
-        const l = this.extractTransformData(
+        let B = this.pixelsToRGBA(A.primaryColorPixels, n), h = this.pixelsToRGBA(A.secondaryColorPixels, n);
+        const E = this.extractTransformData(
           A.transformPixels,
           A.rotationPixels,
-          o
+          n
         );
-        if (l.isInverted) {
+        if (E.isInverted) {
           const c = B;
-          B = E, E = c;
+          B = h, h = c;
         }
-        const h = this.calculateCellPosition(s, i, e);
+        const l = this.calculateCellPosition(s, i, e);
         t.push({
           charIndex: g,
           primaryColor: B,
-          secondaryColor: E,
-          transform: l,
-          position: h
+          secondaryColor: h,
+          transform: E,
+          position: l
         }), r++;
       }
     return t;
@@ -2490,9 +2526,9 @@ class TA {
             {
               const s = r.idRangeOffset[i] / 2 + (e - r.startCount[i]) - (r.startCount.length - i);
               if (s >= 0 && s < r.glyphIdArray.length) {
-                const o = r.glyphIdArray[s];
-                if (o !== 0)
-                  return o + r.idDelta[i] & 65535;
+                const n = r.glyphIdArray[s];
+                if (n !== 0)
+                  return n + r.idDelta[i] & 65535;
               }
             }
           }
@@ -2542,34 +2578,34 @@ class TA {
    */
   glyphToSVGPath(A, e, t, r) {
     if (!A || !A.xs) return "";
-    const { xs: i, ys: s, endPts: o, flags: g } = A;
-    if (!i || !s || !o || !g) return "";
-    let B = "", E = 0;
-    for (let l = 0; l < o.length; l++) {
-      const h = o[l];
-      if (!(h < E)) {
-        if (h >= E) {
-          const c = e + i[E] * r, d = t - s[E] * r;
+    const { xs: i, ys: s, endPts: n, flags: g } = A;
+    if (!i || !s || !n || !g) return "";
+    let B = "", h = 0;
+    for (let E = 0; E < n.length; E++) {
+      const l = n[E];
+      if (!(l < h)) {
+        if (l >= h) {
+          const c = e + i[h] * r, d = t - s[h] * r;
           B += `M${c.toFixed(2)},${d.toFixed(2)}`;
-          let u = E + 1;
-          for (; u <= h; )
+          let u = h + 1;
+          for (; u <= l; )
             if ((g[u] & 1) !== 0) {
               const D = e + i[u] * r, C = t - s[u] * r;
               B += `L${D.toFixed(2)},${C.toFixed(2)}`, u++;
             } else {
               const D = e + i[u] * r, C = t - s[u] * r;
-              let p = u + 1 > h ? E : u + 1;
-              if ((g[p] & 1) !== 0) {
-                const b = e + i[p] * r, _ = t - s[p] * r;
-                B += `Q${D.toFixed(2)},${C.toFixed(2)} ${b.toFixed(2)},${_.toFixed(2)}`, u = p + 1;
+              let P = u + 1 > l ? h : u + 1;
+              if ((g[P] & 1) !== 0) {
+                const v = e + i[P] * r, I = t - s[P] * r;
+                B += `Q${D.toFixed(2)},${C.toFixed(2)} ${v.toFixed(2)},${I.toFixed(2)}`, u = P + 1;
               } else {
-                const b = e + i[p] * r, _ = t - s[p] * r, R = (D + b) / 2, T = (C + _) / 2;
-                B += `Q${D.toFixed(2)},${C.toFixed(2)} ${R.toFixed(2)},${T.toFixed(2)}`, u = p;
+                const v = e + i[P] * r, I = t - s[P] * r, R = (D + v) / 2, T = (C + I) / 2;
+                B += `Q${D.toFixed(2)},${C.toFixed(2)} ${R.toFixed(2)},${T.toFixed(2)}`, u = P;
               }
             }
           B += "Z";
         }
-        E = h + 1;
+        h = l + 1;
       }
     }
     return B;
@@ -2585,14 +2621,14 @@ class TA {
    */
   generateCharacterPath(A, e, t, r, i) {
     try {
-      const s = A.codePointAt(0) || 0, o = this.getGlyphIndex(e, s);
-      if (o === 0)
+      const s = A.codePointAt(0) || 0, n = this.getGlyphIndex(e, s);
+      if (n === 0)
         return this.createEmptyPath();
       let g = null;
       try {
-        e.glyf && e.glyf[o] !== null ? g = e.glyf[o] : Q && Q.T && Q.T.glyf && Q.T.glyf._parseGlyf && (g = Q.T.glyf._parseGlyf(e, o), e.glyf && g && (e.glyf[o] = g));
+        e.glyf && e.glyf[n] !== null ? g = e.glyf[n] : Q && Q.T && Q.T.glyf && Q.T.glyf._parseGlyf && (g = Q.T.glyf._parseGlyf(e, n), e.glyf && g && (e.glyf[n] = g));
       } catch (B) {
-        console.warn(`Failed to parse glyph ${o}:`, B);
+        console.warn(`Failed to parse glyph ${n}:`, B);
       }
       return g ? this.createGlyphPath(e, g, t, r, i) : this.createEmptyPath();
     } catch (s) {
@@ -2611,10 +2647,10 @@ class TA {
    * @param advanceWidth Character advance width
    * @returns SVG path data string or null if generation fails
    */
-  generatePositionedCharacterPath(A, e, t, r, i, s, o, g) {
+  generatePositionedCharacterPath(A, e, t, r, i, s, n, g) {
     try {
-      const B = o / e.head.unitsPerEm, E = g * B, l = t + (i - E) / 2, h = r + (s + o * 0.7) / 2;
-      return this.generateCharacterPath(A, e, l, h, o).toSVG() || null;
+      const B = n / e.head.unitsPerEm, h = g * B, E = t + (i - h) / 2, l = r + (s + n * 0.7) / 2;
+      return this.generateCharacterPath(A, e, E, l, n).toSVG() || null;
     } catch (B) {
       return console.warn(`Failed to generate positioned character path for "${A}":`, B), null;
     }
@@ -2622,7 +2658,7 @@ class TA {
 }
 class SA {
   constructor() {
-    a(this, "pathGenerator");
+    o(this, "pathGenerator");
     this.pathGenerator = new TA();
   }
   /**
@@ -2675,12 +2711,12 @@ class SA {
    * @returns Transform attribute string or empty string
    */
   generateTransformAttribute(A, e) {
-    const { transform: t, position: r } = A, i = r.cellX + e.cellWidth / 2, s = r.cellY + e.cellHeight / 2, o = [];
+    const { transform: t, position: r } = A, i = r.cellX + e.cellWidth / 2, s = r.cellY + e.cellHeight / 2, n = [];
     if (t.flipHorizontal || t.flipVertical) {
       const g = t.flipHorizontal ? -1 : 1, B = t.flipVertical ? -1 : 1;
-      o.push(`translate(${i} ${s})`), o.push(`scale(${g} ${B})`), o.push(`translate(${-i} ${-s})`);
+      n.push(`translate(${i} ${s})`), n.push(`scale(${g} ${B})`), n.push(`translate(${-i} ${-s})`);
     }
-    return t.rotation && o.push(`rotate(${t.rotation} ${i} ${s})`), o.length ? ` transform="${o.join(" ")}"` : "";
+    return t.rotation && n.push(`rotate(${t.rotation} ${i} ${s})`), n.length ? ` transform="${n.join(" ")}"` : "";
   }
   /**
    * Generates background rectangle for a cell
@@ -2721,10 +2757,10 @@ class SA {
     );
     if (!s)
       return "";
-    const o = this.rgbaToColorString(A.primaryColor);
+    const n = this.rgbaToColorString(A.primaryColor);
     return r.drawMode === "stroke" ? `
-    <path id="${`path-${A.charIndex}-${A.position.cellX}-${A.position.cellY}`.replace(/\./g, "-")}" d="${s}" stroke="${o}" stroke-width="${r.strokeWidth}" fill="none" />` : `
-    <path d="${s}" fill="${o}" />`;
+    <path id="${`path-${A.charIndex}-${A.position.cellX}-${A.position.cellY}`.replace(/\./g, "-")}" d="${s}" stroke="${n}" stroke-width="${r.strokeWidth}" fill="none" />` : `
+    <path d="${s}" fill="${n}" />`;
   }
   /**
    * Generates complete SVG content for a single cell
@@ -2737,10 +2773,10 @@ class SA {
   generateCellContent(A, e, t, r) {
     let i = "";
     i += this.generateCellBackground(A, e, r);
-    const s = this.generateTransformAttribute(A, e), o = this.generateCharacterPath(A, e, t, r);
-    return o && (s ? (i += `
-  <g${s}>`, i += o, i += `
-  </g>`) : i += o), i;
+    const s = this.generateTransformAttribute(A, e), n = this.generateCharacterPath(A, e, t, r);
+    return n && (s ? (i += `
+  <g${s}>`, i += n, i += `
+  </g>`) : i += n), i;
   }
   /**
    * Generates the complete SVG content from cell data
@@ -2798,11 +2834,11 @@ class RA extends H {
     this.downloadSVG(A, e || this.generateDefaultFilename());
   }
 }
-class W {
+class X {
   constructor() {
-    a(this, "dataExtractor");
-    a(this, "contentGenerator");
-    a(this, "fileHandler");
+    o(this, "dataExtractor");
+    o(this, "contentGenerator");
+    o(this, "fileHandler");
     this.dataExtractor = new yA(), this.contentGenerator = new SA(), this.fileHandler = new RA();
   }
   /**
@@ -2850,7 +2886,7 @@ class W {
     }
   }
 }
-class GA extends L {
+class MA extends L {
   /**
    * Extracts character data for TXT generation
    * @param framebufferData Framebuffer pixel data
@@ -2860,16 +2896,16 @@ class GA extends L {
    * @returns 2D array of characters (rows x columns)
    */
   extractCharacterGrid(A, e, t, r = " ") {
-    var o;
+    var n;
     const i = [];
     let s = 0;
     for (let g = 0; g < e.rows; g++) {
       const B = [];
-      for (let E = 0; E < e.cols; E++) {
-        const l = s * 4, h = this.getCharacterIndex(
+      for (let h = 0; h < e.cols; h++) {
+        const E = s * 4, l = this.getCharacterIndex(
           A.characterPixels,
-          l
-        ), c = ((o = t.characters[h]) == null ? void 0 : o.character) || r;
+          E
+        ), c = ((n = t.characters[l]) == null ? void 0 : n.character) || r;
         B.push(c), s++;
       }
       i.push(B);
@@ -2877,7 +2913,7 @@ class GA extends L {
     return i;
   }
 }
-class MA {
+class GA {
   /**
    * Generates TXT content from a 2D character array
    * @param characterGrid 2D array of characters (rows x columns)
@@ -2922,10 +2958,10 @@ class UA extends H {
 }
 class $ {
   constructor() {
-    a(this, "dataExtractor");
-    a(this, "contentGenerator");
-    a(this, "fileHandler");
-    this.dataExtractor = new GA(), this.contentGenerator = new MA(), this.fileHandler = new UA();
+    o(this, "dataExtractor");
+    o(this, "contentGenerator");
+    o(this, "fileHandler");
+    this.dataExtractor = new MA(), this.contentGenerator = new GA(), this.fileHandler = new UA();
   }
   /**
    * Applies default values to TXT export options
@@ -2983,8 +3019,8 @@ class YA extends L {
     const r = A.canvas;
     if (e === 1 && t === "transparent")
       return r;
-    const i = document.createElement("canvas"), s = i.getContext("2d"), o = Math.round(r.width * e), g = Math.round(r.height * e);
-    return i.width = o, i.height = g, t !== "transparent" && (s.fillStyle = t, s.fillRect(0, 0, o, g)), s.imageSmoothingEnabled = !1, s.drawImage(
+    const i = document.createElement("canvas"), s = i.getContext("2d"), n = Math.round(r.width * e), g = Math.round(r.height * e);
+    return i.width = n, i.height = g, t !== "transparent" && (s.fillStyle = t, s.fillRect(0, 0, n, g)), s.imageSmoothingEnabled = !1, s.drawImage(
       r,
       0,
       0,
@@ -2992,12 +3028,12 @@ class YA extends L {
       r.height,
       0,
       0,
-      o,
+      n,
       g
     ), i;
   }
 }
-class kA {
+class OA {
   /**
    * Generates image data from canvas
    * @param canvas The canvas containing the image data
@@ -3016,8 +3052,8 @@ class kA {
    */
   async generateImageBlob(A, e) {
     return new Promise((t, r) => {
-      const i = this.getMimeType(e.format), s = (o) => {
-        o ? t(o) : r(new Error(`Failed to generate ${e.format.toUpperCase()} blob`));
+      const i = this.getMimeType(e.format), s = (n) => {
+        n ? t(n) : r(new Error(`Failed to generate ${e.format.toUpperCase()} blob`));
       };
       e.format === "png" ? A.toBlob(s, i) : A.toBlob(s, i, e.quality);
     });
@@ -3044,7 +3080,7 @@ const J = {
   png: "image/png",
   jpg: "image/jpeg",
   webp: "image/webp"
-}, k = {
+}, O = {
   png: ".png",
   jpg: ".jpg",
   webp: ".webp"
@@ -3058,7 +3094,7 @@ class VA extends H {
    */
   saveImage(A, e, t) {
     try {
-      const r = k[t];
+      const r = O[t];
       typeof A == "string" ? this.saveImageFromDataURL(A, this.sanitizeFilename(e) + r) : this.saveImageFromBlob(A, this.sanitizeFilename(e) + r);
     } catch (r) {
       throw console.error(`Failed to save ${t.toUpperCase()} image:`, r), new Error(`Image save failed: ${r instanceof Error ? r.message : "Unknown error"}`);
@@ -3093,7 +3129,7 @@ class VA extends H {
    * @returns True if the format is supported for saving
    */
   validateSaveSupport(A) {
-    return A in J && A in k;
+    return A in J && A in O;
   }
   /**
    * Gets the MIME type for the specified image format
@@ -3109,15 +3145,15 @@ class VA extends H {
    * @returns The file extension (including the dot)
    */
   getFileExtension(A) {
-    return k[A];
+    return O[A];
   }
 }
-class OA {
+class kA {
   constructor() {
-    a(this, "dataExtractor");
-    a(this, "contentGenerator");
-    a(this, "fileHandler");
-    this.dataExtractor = new YA(), this.contentGenerator = new kA(), this.fileHandler = new VA();
+    o(this, "dataExtractor");
+    o(this, "contentGenerator");
+    o(this, "fileHandler");
+    this.dataExtractor = new YA(), this.contentGenerator = new OA(), this.fileHandler = new VA();
   }
   /**
    * Applies default values to image export options
@@ -3203,38 +3239,38 @@ class OA {
 class S {
   constructor(A = null, e = {}) {
     /** The element to capture content from (optional for standalone mode) */
-    a(this, "captureSource");
+    o(this, "captureSource");
     /** Our WebGL overlay canvas manager */
-    a(this, "textmodeCanvas");
+    o(this, "textmodeCanvas");
     /** Core WebGL renderer */
-    a(this, "_renderer");
-    a(this, "_canvasFramebuffer");
-    a(this, "_font");
-    a(this, "_grid");
-    a(this, "resizeObserver");
+    o(this, "_renderer");
+    o(this, "_canvasFramebuffer");
+    o(this, "_font");
+    o(this, "_grid");
+    o(this, "resizeObserver");
     // Auto-rendering properties
-    a(this, "_mode");
-    a(this, "_frameRateLimit");
-    a(this, "animationFrameId", null);
-    a(this, "lastFrameTime", 0);
-    a(this, "frameInterval");
-    a(this, "_isLooping", !0);
-    a(this, "_frameRate", 0);
-    a(this, "lastRenderTime", 0);
-    a(this, "_frameCount", 0);
+    o(this, "_mode");
+    o(this, "_frameRateLimit");
+    o(this, "animationFrameId", null);
+    o(this, "lastFrameTime", 0);
+    o(this, "frameInterval");
+    o(this, "_isLooping", !0);
+    o(this, "_frameRate", 0);
+    o(this, "lastRenderTime", 0);
+    o(this, "_frameCount", 0);
     // Frame rate measurement smoothing
-    a(this, "frameTimeHistory", []);
-    a(this, "frameTimeHistorySize", 10);
-    a(this, "_pipeline");
-    a(this, "_isDisposed", !1);
+    o(this, "frameTimeHistory", []);
+    o(this, "frameTimeHistorySize", 10);
+    o(this, "_pipeline");
+    o(this, "_isDisposed", !1);
     // Standalone canvas properties
-    a(this, "_standalone", !1);
-    a(this, "_drawCallback", () => {
+    o(this, "_standalone", !1);
+    o(this, "_drawCallback", () => {
     });
-    a(this, "_resizedCallback", () => {
+    o(this, "_resizedCallback", () => {
     });
-    a(this, "_windowResizeListener", null);
-    a(this, "_printDebug", !1);
+    o(this, "_windowResizeListener", null);
+    o(this, "_printDebug", !1);
     this.captureSource = A, this._standalone = A === null, this._mode = e.renderMode ?? "auto", this._frameRateLimit = e.frameRate ?? 60, this.frameInterval = 1e3 / this._frameRateLimit;
   }
   /**
@@ -3245,11 +3281,14 @@ class S {
    */
   static async create(A = null, e = {}) {
     const t = new S(A, e), r = t._standalone ? e : void 0;
-    t.textmodeCanvas = new DA(t.captureSource, t._standalone, r), t._renderer = new hA(t.textmodeCanvas.getWebGLContext());
+    t.textmodeCanvas = new DA(t.captureSource, t._standalone, r), t._renderer = new lA(t.textmodeCanvas.getWebGLContext());
     let i, s;
     t._standalone ? (i = e.width || 800, s = e.height || 600) : (i = t.textmodeCanvas.width || 800, s = t.textmodeCanvas.height || 600), t._canvasFramebuffer = t._renderer.createFramebuffer(i, s), t._font = new CA(t._renderer, e.fontSize ?? 16), await t._font.initialize(e.fontSource);
-    const o = t._font.maxGlyphDimensions;
-    return t._grid = new mA(t.textmodeCanvas.canvas, o.width, o.height), t._pipeline = new FA(t._renderer, t._font, t._grid), t.setupEventListeners(), t.startAutoRendering(), t;
+    const n = t._font.maxGlyphDimensions;
+    return t._grid = new mA(t.textmodeCanvas.canvas, n.width, n.height), t._pipeline = new FA(t._renderer, t._font, t._grid), t.setupEventListeners(), t._standalone && (t.textmodeCanvas.onTransformChange = () => {
+      const g = t.textmodeCanvas.getEffectiveRenderingDimensions();
+      t._renderer.resetViewport(g.width, g.height), t._mode === "auto" && t.render();
+    }), t.startAutoRendering(), t;
   }
   setupEventListeners() {
     this._windowResizeListener = () => {
@@ -3351,7 +3390,7 @@ class S {
    * ```
    */
   toSVG(A = {}) {
-    return new W().generateSVG(this, A);
+    return new X().generateSVG(this, A);
   }
   /**
    * Export the current textmode rendering to an SVG file.
@@ -3375,7 +3414,7 @@ class S {
    * ```
    */
   saveSVG(A = {}) {
-    new W().saveSVG(this, A);
+    new X().saveSVG(this, A);
   }
   /**
    * Export the current textmode rendering to an image file.
@@ -3406,7 +3445,7 @@ class S {
    * ```
    */
   async saveCanvas(A, e = "png", t = {}) {
-    await new OA().saveImage(this.textmodeCanvas, {
+    await new kA().saveImage(this.textmodeCanvas, {
       ...t,
       filename: A,
       format: e
@@ -3490,7 +3529,12 @@ class S {
     }
   }
   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 A = this.textmodeCanvas.getEffectiveRenderingDimensions();
+      this._renderer.resetViewport(A.width, A.height);
+    } else
+      this._renderer.resetViewport();
+    this._mode !== "manual" && this.render();
   }
   /**
    * Start automatic rendering
@@ -3724,11 +3768,16 @@ class S {
    * ```
    */
   fontSize(A) {
-    f.validate(
+    if (f.validate(
       typeof A == "number" && A > 0,
       "Font size must be a positive number greater than 0.",
       { method: "fontSize", providedValue: A }
-    ) && this._font.fontSize !== A && (this._font.setFontSize(A), this._grid.resizeCellPixelDimensions(this._font.maxGlyphDimensions.width, this._font.maxGlyphDimensions.height), this._pipeline.resize(), this._renderer.resetViewport());
+    ) && this._font.fontSize !== A)
+      if (this._font.setFontSize(A), this._grid.resizeCellPixelDimensions(this._font.maxGlyphDimensions.width, this._font.maxGlyphDimensions.height), this._pipeline.resize(), this._standalone) {
+        const e = this.textmodeCanvas.getEffectiveRenderingDimensions();
+        this._renderer.resetViewport(e.width, e.height);
+      } else
+        this._renderer.resetViewport();
   }
   /**
    * Set a draw callback function that will be executed before each render.
@@ -3795,7 +3844,12 @@ class S {
    * @param height The new height of the canvas.
    */
   resizeCanvas(A, e) {
-    this.textmodeCanvas.resize(A, e), 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(A, e), this._canvasFramebuffer.resize(this.textmodeCanvas.width, this.textmodeCanvas.height), this._grid.resize(), this._pipeline.resize(), this._standalone) {
+      const t = this.textmodeCanvas.getEffectiveRenderingDimensions();
+      this._renderer.resetViewport(t.width, t.height);
+    } else
+      this._renderer.resetViewport();
+    this._mode !== "manual" && this.render();
   }
   /**
    * @inheritDoc TextmodeConversionPipeline.get
@@ -4406,7 +4460,7 @@ class N {
    * ```
    */
   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.");
@@ -4414,11 +4468,11 @@ class N {
 }
 const HA = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null
-}, Symbol.toStringTag, { value: "Module" })), NA = N.create, XA = N.setErrorLevel, WA = N.version;
+}, Symbol.toStringTag, { value: "Module" })), NA = N.create, WA = N.setErrorLevel, XA = N.version;
 export {
   DA as TextmodeCanvas,
   FA as TextmodeConversionPipeline,
-  oA as TextmodeErrorLevel,
+  nA as TextmodeErrorLevel,
   CA as TextmodeFont,
   mA as TextmodeGrid,
   S as Textmodifier,
@@ -4426,7 +4480,7 @@ export {
   NA as create,
   N as default,
   HA as export,
-  XA as setErrorLevel,
+  WA as setErrorLevel,
   N as textmode,
-  WA as version
+  XA as version
 };