textmode.js 0.2.1-beta.8 → 0.3.0

package/README.md

@@ -10,25 +10,40 @@
 
 </div>
 
-textmode.js is a lightweight creative-coding library for real‑time ASCII and textmode graphics in the browser. It combines a grid‑based API with a modern `WebGL2` pipeline, multiple render targets, and aggressive instanced rendering to deliver smooth, high‑performance rendering.
+textmode.js is a free, lightweight, and framework-agnostic creative-coding library for real‑time ASCII and textmode graphics in the browser. It combines a grid‑based API with a modern [`WebGL2`](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext) pipeline, multiple render targets, and aggressive instanced rendering to deliver smooth, high‑performance rendering.
 
 The library is designed to be easy to use and accessible to developers of all skill levels. Whether you're a seasoned developer or just starting out, `textmode.js` provides a simple and intuitive API that makes it easy to create stunning textmode art and animations.
 
-Key ideas in one sentence: you draw with simple shape calls; under the hood we batch instances and write to a special framebuffer with five render targets; a conversion pass maps those buffers to a crisp grid of characters on the canvas.
-
 ## Features
+
 - Real‑time* ASCII/textmode rendering with a simple drawing API
 - `WebGL2` pipeline with [Multiple Render Targets (MRT)](https://en.wikipedia.org/wiki/Multiple_Render_Targets) for rich per‑cell data
 - Instanced rendering and batching for low draw call counts
-- Font system with runtime font loading and dynamic sizing
+- Font system with runtime font loading and dynamic sizing *(supports TTF/OTF/WOFF)*
 - Author custom filter shaders in [`GLSL ES 3.00`](https://registry.khronos.org/OpenGL/specs/es/3.0/GLSL_ES_Specification_3.00.pdf) for advanced effects
 - Flexible exporting: TXT, SVG, and raster images *(PNG/JPG/WebP)*
 - Animation loop control: `frameRate`, `loop`/`noLoop`, `redraw`, `frameCount`, etc.
+- Framework-agnostic: Use `textmode.js` with any canvas-based framework or library
 - Zero dependencies, written in TypeScript, with comprehensive type definitions
 
 > [!NOTE]
 > *Performance depends on the complexity of your scene and device capabilities. Consider authoring filter shaders for complex effects at low cost.
 
+## Try it online first
+
+Before installing anything locally, you can try `textmode.js` directly in your browser using our dedicated web editor:
+
+🌐 **[editor.textmode.art](https://editor.textmode.art)**
+
+The web editor is specifically designed for `textmode.js` and provides:
+- ✨ **Zero setup required** - Start coding immediately
+- 🚀 **Live preview** - See your creations in real-time  
+- 💾 **Save & share** - Export your sketches and share with others
+- 📚 **Built-in examples** - Learn from interactive examples
+- 🔧 **Full API access** - All `textmode.js` features available
+
+The web editor is perfect for learning, prototyping, or creating quick experiments without any local setup!
+
 ## Installation
 
 ### Prerequisites
@@ -47,10 +62,10 @@ To get started with `textmode.js`, you'll need:
 
 | Bundle type | File size | Font included? | Best for |
 |-------------|-----------|---------------|----------|
-| **Standard UMD** (`textmode.umd.js`) | ~112kB | ✅ [UrsaFont](https://ursafrank.itch.io/ursafont) embedded | Quick setup, prototyping |
-| **Standard ESM** (`textmode.esm.js`) | ~130kB | ✅ [UrsaFont](https://ursafrank.itch.io/ursafont) embedded | Quick setup, prototyping |
-| **Minified UMD** (`textmode.umd.min.js`) | ~65kB | ❌ Requires external font | Custom fonts |
-| **Minified ESM** (`textmode.esm.min.js`) | ~84kB | ❌ Requires external font | Custom fonts |
+| **Standard UMD** (`textmode.umd.js`) | ~86kB | ✅ [UrsaFont](https://ursafrank.itch.io/ursafont) embedded | Quick setup, prototyping |
+| **Standard ESM** (`textmode.esm.js`) | ~111kB | ✅ [UrsaFont](https://ursafrank.itch.io/ursafont) embedded | Quick setup, prototyping |
+| **Minified UMD** (`textmode.umd.min.js`) | ~79kB | ❌ Requires external font | Custom fonts |
+| **Minified ESM** (`textmode.esm.min.js`) | ~103kB | ❌ Requires external font | Custom fonts |
 
 **Choose standard bundles for:**
 - Quick setup with no additional configuration
@@ -62,7 +77,7 @@ To get started with `textmode.js`, you'll need:
 > [!NOTE]
 > Apart from the font inclusion, both bundle types are functionally identical and equally minified.
 
-### UMD
+#### UMD
 
 To use `textmode.js` in a UMD environment, download the latest `umd` build from the [**GitHub releases page**](https://github.com/humanbydefinition/textmode.js/releases/) or import it directly from a CDN like [**jsDelivr**](https://www.jsdelivr.com/package/npm/textmode.js). The library is distributed as a single JavaScript file, which you can include in your project by adding the following script tag to your HTML file:
 
@@ -113,7 +128,7 @@ t.windowResized(() => {
 });
 ```
 
-### ESM
+#### ESM
 
 To use `textmode.js` in an ESM environment, you can install it via `npm`:
 
@@ -171,18 +186,6 @@ t.windowResized(() => {
 });
 ```
 
-## Verification
-
-To verify your installation is working correctly, try this simple test:
-
-```javascript
-// Test if textmode.js is available
-console.log('textmode.js version:', textmode.version);
-```
-
-> [!NOTE]
-> If you see the version number printed in the console, your installation was successful!
-
 ## Next steps
 
 Now that you have `textmode.js` set up, you can start creating your textmode art projects! Going forward, here are some resources to help you get the most out of the library:

package/dist/textmode.esm.js

@@ -141,34 +141,34 @@ class q {
     a(this, "u");
     a(this, "_t", null);
     a(this, "vt");
+    a(this, "yt");
+    a(this, "At", []);
     a(this, "wt");
-    a(this, "yt", []);
-    a(this, "At");
     a(this, "Ct", null);
     a(this, "bt", []);
     a(this, "xt", null);
     a(this, "$t", !1);
     a(this, "Mt", null);
-    this.dt = e, this.gt = i, this.u = { filter: "nearest", wrap: "clamp", format: "rgba", type: "unsigned_byte", ...r }, this.vt = t, this.At = Math.min(Math.max(1, s), 8), this.xt = n, this.$t = !!o, this.Mt = this.$t ? new ht() : null;
+    this.dt = e, this.gt = i, this.u = { filter: "nearest", wrap: "clamp", format: "rgba", type: "unsigned_byte", ...r }, this.vt = t, this.wt = Math.min(Math.max(1, s), 8), this.xt = n, this.$t = !!o, this.Mt = this.$t ? new ht() : null;
     const c = t.getParameter(t.MAX_DRAW_BUFFERS), l = t.getParameter(t.MAX_COLOR_ATTACHMENTS);
-    this.At = Math.min(this.At, c, l), this.wt = t.createFramebuffer(), this.Ft(), this.Rt(), this.bt = Array(this.At).fill(null);
+    this.wt = Math.min(this.wt, c, l), this.yt = t.createFramebuffer(), this.Ft(), this.Rt(), this.bt = Array(this.wt).fill(null);
   }
   Ft() {
     const t = this.vt, e = this.u.filter === "linear" ? t.LINEAR : t.NEAREST, i = this.u.wrap === "repeat" ? t.REPEAT : t.CLAMP_TO_EDGE, s = this.u.type === "float" ? t.FLOAT : t.UNSIGNED_BYTE;
-    for (let r = 0; r < this.At; r++) {
+    for (let r = 0; r < this.wt; r++) {
       const n = t.createTexture();
-      t.bindTexture(t.TEXTURE_2D, n), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MIN_FILTER, e), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MAG_FILTER, e), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_S, i), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_T, i), t.texImage2D(t.TEXTURE_2D, 0, t.RGBA, this.dt, this.gt, 0, t.RGBA, s, null), this.yt.push(n);
+      t.bindTexture(t.TEXTURE_2D, n), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MIN_FILTER, e), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MAG_FILTER, e), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_S, i), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_T, i), t.texImage2D(t.TEXTURE_2D, 0, t.RGBA, this.dt, this.gt, 0, t.RGBA, s, null), this.At.push(n);
     }
     t.bindTexture(t.TEXTURE_2D, null);
   }
   Rt() {
     const t = this.vt;
-    if (t.bindFramebuffer(t.FRAMEBUFFER, this.wt), this.At === 1) t.framebufferTexture2D(t.FRAMEBUFFER, t.COLOR_ATTACHMENT0, t.TEXTURE_2D, this.yt[0], 0);
+    if (t.bindFramebuffer(t.FRAMEBUFFER, this.yt), this.wt === 1) t.framebufferTexture2D(t.FRAMEBUFFER, t.COLOR_ATTACHMENT0, t.TEXTURE_2D, this.At[0], 0);
     else {
       const i = [];
-      for (let s = 0; s < this.At; s++) {
+      for (let s = 0; s < this.wt; s++) {
         const r = t.COLOR_ATTACHMENT0 + s;
-        t.framebufferTexture2D(t.FRAMEBUFFER, r, t.TEXTURE_2D, this.yt[s], 0), i.push(r);
+        t.framebufferTexture2D(t.FRAMEBUFFER, r, t.TEXTURE_2D, this.At[s], 0), i.push(r);
       }
       t.drawBuffers(i);
     }
@@ -177,19 +177,19 @@ class q {
   }
   zt(t) {
     const e = this.vt;
-    e.bindTexture(e.TEXTURE_2D, this.yt[0]), e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL, 1), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, e.RGBA, e.UNSIGNED_BYTE, t), e.bindTexture(e.TEXTURE_2D, null);
+    e.bindTexture(e.TEXTURE_2D, this.At[0]), e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL, 1), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, e.RGBA, e.UNSIGNED_BYTE, t), e.bindTexture(e.TEXTURE_2D, null);
   }
   resize(t, e) {
-    this.dt = t, this.gt = e, this._t = null, this.bt = Array(this.At).fill(null);
+    this.dt = t, this.gt = e, this._t = null, this.bt = Array(this.wt).fill(null);
     const i = this.vt, s = this.u.type === "float" ? i.FLOAT : i.UNSIGNED_BYTE;
-    for (const r of this.yt) i.bindTexture(i.TEXTURE_2D, r), i.texImage2D(i.TEXTURE_2D, 0, i.RGBA, this.dt, this.gt, 0, i.RGBA, s, null);
+    for (const r of this.At) i.bindTexture(i.TEXTURE_2D, r), i.texImage2D(i.TEXTURE_2D, 0, i.RGBA, this.dt, this.gt, 0, i.RGBA, s, null);
     i.bindTexture(i.TEXTURE_2D, null);
   }
   Pt(t) {
     const e = this.vt, i = this.bt[t];
     if (i) return i;
     const s = this.dt, r = this.gt, n = new Uint8Array(s * r * 4), o = e.getParameter(e.READ_FRAMEBUFFER_BINDING);
-    e.bindFramebuffer(e.READ_FRAMEBUFFER, this.wt), e.readBuffer(e.COLOR_ATTACHMENT0 + t), e.readPixels(0, 0, s, r, e.RGBA, e.UNSIGNED_BYTE, n), e.bindFramebuffer(e.READ_FRAMEBUFFER, o);
+    e.bindFramebuffer(e.READ_FRAMEBUFFER, this.yt), e.readBuffer(e.COLOR_ATTACHMENT0 + t), e.readPixels(0, 0, s, r, e.RGBA, e.UNSIGNED_BYTE, n), e.bindFramebuffer(e.READ_FRAMEBUFFER, o);
     const c = 4 * s, l = new Uint8Array(n.length);
     for (let u = 0; u < r; u++) {
       const f = (r - 1 - u) * c, g = u * c;
@@ -204,8 +204,8 @@ class q {
       const n = ((i = (e = this.xt).Tt) == null ? void 0 : i.call(e)) ?? null;
       n && this.xt.St(n), this.$t && this.Mt && ((r = (s = this.xt).Et) == null || r.call(s, this.Mt));
     }
-    this.Ct = { framebuffer: t.getParameter(t.FRAMEBUFFER_BINDING), viewport: t.getParameter(t.VIEWPORT) }, t.bindFramebuffer(t.FRAMEBUFFER, this.wt), this.bt = Array(this.At).fill(null);
-    for (let n = 0; n < this.At; n++) t.clearBufferfv(t.COLOR, n, new Float32Array([0, 0, 0, 0]));
+    this.Ct = { framebuffer: t.getParameter(t.FRAMEBUFFER_BINDING), viewport: t.getParameter(t.VIEWPORT) }, t.bindFramebuffer(t.FRAMEBUFFER, this.yt), this.bt = Array(this.wt).fill(null);
+    for (let n = 0; n < this.wt; n++) t.clearBufferfv(t.COLOR, n, new Float32Array([0, 0, 0, 0]));
     t.viewport(0, 0, this.dt, this.gt), H(t, [0, 0, this.dt, this.gt]);
   }
   end() {
@@ -220,8 +220,8 @@ class q {
   }
   Gt() {
     const t = this.vt;
-    t.deleteFramebuffer(this.wt);
-    for (const e of this.yt) t.deleteTexture(e);
+    t.deleteFramebuffer(this.yt);
+    for (const e of this.At) t.deleteTexture(e);
   }
   get width() {
     return this.dt;
@@ -230,7 +230,7 @@ class q {
     return this.gt;
   }
   get textures() {
-    return [...this.yt];
+    return [...this.At];
   }
 }
 class I {
@@ -363,7 +363,7 @@ class I {
   }
 }
 const W = `#version 300 es
-in vec2 a_position;in vec2 a_texCoord;in vec2 a_instancePosition;in vec2 a_instanceSize;in vec3 a_instanceCharacter;in vec4 a_instancePrimaryColor;in vec4 a_instanceSecondaryColor;in vec2 a_instanceRotation;in vec3 a_instanceTransform;in vec3 a_instanceGlobalRotation;in vec2 a_instanceRotationCenter;in vec2 a_instanceBezierCP1;in vec2 a_instanceBezierCP2;in vec2 a_instanceBezierStart;in vec2 a_instanceBezierEnd;in vec2 a_instanceArcAngles;uniform float U9;uniform vec2 Uw;out vec2 v_uv;out vec3 v_character;out vec4 v_primaryColor;out vec4 v_secondaryColor;out vec2 v_rotation;out vec3 v_transform;mat3 A(float B){float C=sin(B),D=cos(B);return mat3(1,0,0,0,D,-C,0,C,D);}mat3 E(float B){float C=sin(B),D=cos(B);return mat3(D,0,C,0,1,0,-C,0,D);}mat3 F(float B){float C=sin(B),D=cos(B);return mat3(D,-C,0,C,D,0,0,0,1);}vec2 G(float H,vec2 I,vec2 J,vec2 K,vec2 L){float M=1.-H,N=M*M,O=H*H;return N*M*I+3.*N*H*J+3.*M*O*K+O*H*L;}vec2 P(float H,vec2 I,vec2 J,vec2 K,vec2 L){float M=1.-H,N=M*M,O=H*H;return-3.*N*I+3.*N*J-6.*M*H*J+6.*M*H*K-3.*O*K+3.*O*L;}void main(){v_uv=a_texCoord;v_character=a_instanceCharacter;v_primaryColor=a_instancePrimaryColor;v_secondaryColor=a_instanceSecondaryColor;v_rotation=a_instanceRotation;v_transform=a_instanceTransform;vec2 Q;bool R=length(a_instanceBezierCP1)+length(a_instanceBezierCP2)+length(a_instanceBezierStart)+length(a_instanceBezierEnd)>0.;bool S=a_instanceArcAngles.x!=0.||a_instanceArcAngles.y!=0.;if(R){float H=a_position.x;vec2 T=G(H,a_instanceBezierStart,a_instanceBezierCP1,a_instanceBezierCP2,a_instanceBezierEnd);vec2 U=P(H,a_instanceBezierStart,a_instanceBezierCP1,a_instanceBezierCP2,a_instanceBezierEnd);float V=length(U);U=V>0.?U/V:vec2(1,0);Q=T+vec2(-U.y,U.x)*a_position.y*a_instanceSize.y;}else if(S){float C=a_instanceArcAngles.x,W=a_instanceArcAngles.y;C=mod(C,6.28318530718);if(C<0.)C+=6.28318530718;W=mod(W,6.28318530718);if(W<0.)W+=6.28318530718;float X=C-W;if(X<=0.)X+=6.28318530718;float Y=C-a_position.x*X;vec2 Z=vec2(cos(Y),sin(Y))*a_position.y;Q=Z*a_instanceSize*.5+a_instanceSize*.5+a_instancePosition;}else{Q=a_position*a_instanceSize+a_instancePosition;}vec2 a=(Q/Uw)*2.-1.;a.y=-a.y;if(length(a_instanceGlobalRotation)>0.){vec3 b=vec3(a-a_instanceRotationCenter,0);b.x*=U9;if(a_instanceGlobalRotation.x!=0.)b=A(-a_instanceGlobalRotation.x)*b;if(a_instanceGlobalRotation.y!=0.)b=E(-a_instanceGlobalRotation.y)*b;if(a_instanceGlobalRotation.z!=0.)b=F(-a_instanceGlobalRotation.z)*b;b.x/=U9;a=b.xy+a_instanceRotationCenter;}gl_Position=vec4(a,0,1);}`, at = "attribute vec2 a_position;attribute vec2 a_texCoord;varying vec2 v_uv;void main(){v_uv=a_texCoord;gl_Position=vec4(a_position,0.,1.);}";
+in vec2 a_position;in vec2 a_texCoord;in vec2 a_instancePosition;in vec2 a_instanceSize;in vec3 a_instanceCharacter;in vec4 a_instancePrimaryColor;in vec4 a_instanceSecondaryColor;in vec2 a_instanceRotation;in vec3 a_instanceTransform;in vec3 a_instanceGlobalRotation;in vec2 a_instanceRotationCenter;in vec2 a_instanceBezierCP1;in vec2 a_instanceBezierCP2;in vec2 a_instanceBezierStart;in vec2 a_instanceBezierEnd;in vec2 a_instanceArcAngles;uniform float U9;uniform vec2 Uy;out vec2 v_uv;out vec3 v_character;out vec4 v_primaryColor;out vec4 v_secondaryColor;out vec2 v_rotation;out vec3 v_transform;mat3 A(float B){float C=sin(B),D=cos(B);return mat3(1,0,0,0,D,-C,0,C,D);}mat3 E(float B){float C=sin(B),D=cos(B);return mat3(D,0,C,0,1,0,-C,0,D);}mat3 F(float B){float C=sin(B),D=cos(B);return mat3(D,-C,0,C,D,0,0,0,1);}vec2 G(float H,vec2 I,vec2 J,vec2 K,vec2 L){float M=1.-H,N=M*M,O=H*H;return N*M*I+3.*N*H*J+3.*M*O*K+O*H*L;}vec2 P(float H,vec2 I,vec2 J,vec2 K,vec2 L){float M=1.-H,N=M*M,O=H*H;return-3.*N*I+3.*N*J-6.*M*H*J+6.*M*H*K-3.*O*K+3.*O*L;}void main(){v_uv=a_texCoord;v_character=a_instanceCharacter;v_primaryColor=a_instancePrimaryColor;v_secondaryColor=a_instanceSecondaryColor;v_rotation=a_instanceRotation;v_transform=a_instanceTransform;vec2 Q;bool R=length(a_instanceBezierCP1)+length(a_instanceBezierCP2)+length(a_instanceBezierStart)+length(a_instanceBezierEnd)>0.;bool S=a_instanceArcAngles.x!=0.||a_instanceArcAngles.y!=0.;if(R){float H=a_position.x;vec2 T=G(H,a_instanceBezierStart,a_instanceBezierCP1,a_instanceBezierCP2,a_instanceBezierEnd);vec2 U=P(H,a_instanceBezierStart,a_instanceBezierCP1,a_instanceBezierCP2,a_instanceBezierEnd);float V=length(U);U=V>0.?U/V:vec2(1,0);Q=T+vec2(-U.y,U.x)*a_position.y*a_instanceSize.y;}else if(S){float C=a_instanceArcAngles.x,W=a_instanceArcAngles.y;C=mod(C,6.28318530718);if(C<0.)C+=6.28318530718;W=mod(W,6.28318530718);if(W<0.)W+=6.28318530718;float X=C-W;if(X<=0.)X+=6.28318530718;float Y=C-a_position.x*X;vec2 Z=vec2(cos(Y),sin(Y))*a_position.y;Q=Z*a_instanceSize*.5+a_instanceSize*.5+a_instancePosition;}else{Q=a_position*a_instanceSize+a_instancePosition;}vec2 a=(Q/Uy)*2.-1.;a.y=-a.y;if(length(a_instanceGlobalRotation)>0.){vec3 b=vec3(a-a_instanceRotationCenter,0);b.x*=U9;if(a_instanceGlobalRotation.x!=0.)b=A(-a_instanceGlobalRotation.x)*b;if(a_instanceGlobalRotation.y!=0.)b=E(-a_instanceGlobalRotation.y)*b;if(a_instanceGlobalRotation.z!=0.)b=F(-a_instanceGlobalRotation.z)*b;b.x/=U9;a=b.xy+a_instanceRotationCenter;}gl_Position=vec4(a,0,1);}`, at = "attribute vec2 a_position;attribute vec2 a_texCoord;varying vec2 v_uv;void main(){v_uv=a_texCoord;gl_Position=vec4(a_position,0.,1.);}";
 class ft {
   constructor(t) {
     a(this, "vt");
@@ -437,12 +437,12 @@ class gt {
   }
   ve(t, e, i) {
     const { shader: s } = t, r = k(this.vt) || this.vt.getParameter(this.vt.VIEWPORT);
-    s.Vt({ U9: r[2] / r[3], Uw: [r[2], r[3]] });
+    s.Vt({ U9: r[2] / r[3], Uy: [r[2], r[3]] });
     const n = (l) => {
-      if (!l || !l.we()) return;
+      if (!l || !l.ye()) return;
       const u = l.unitGeometry, f = l.unitBuffer;
       try {
-        this.me.ce(s.Qt, l.type + "", u, f), l.batch.ye(s), l.batch.Ae(u.Ce, u.be);
+        this.me.ce(s.Qt, l.type + "", u, f), l.batch.Ae(s), l.batch.we(u.Ce, u.be);
       } finally {
         l.batch.xe(s), this.me.pe(), l.$e();
       }
@@ -468,10 +468,10 @@ class gt {
   ze(t, e, i, s, r, n, o, c) {
     e.Xt(), e.Vt(i);
     const l = this.vt.getParameter(this.vt.VIEWPORT);
-    if (e.Vt({ U9: l[2] / l[3], Uw: [l[2], l[3]] }), t.$e(), t.Fe({ x: s, y: r, width: n, height: o }, c), t.we()) {
+    if (e.Vt({ U9: l[2] / l[3], Uy: [l[2], l[3]] }), t.$e(), t.Fe({ x: s, y: r, width: n, height: o }, c), t.ye()) {
       const u = t.unitGeometry, f = t.unitBuffer;
       try {
-        this.me.ce(e.Qt, t.type + "", u, f), t.batch.ye(e), t.batch.Ae(u.Ce, u.be);
+        this.me.ce(e.Qt, t.type + "", u, f), t.batch.Ae(e), t.batch.we(u.Ce, u.be);
       } finally {
         t.batch.xe(e), this.me.pe(), t.$e();
       }
@@ -623,7 +623,7 @@ class mt {
     }
     return e;
   }
-  ye(t) {
+  Ae(t) {
     if (!this.ss || this.Je.length === 0) return;
     const e = this.vt, i = t.Qt;
     this.fs();
@@ -638,7 +638,7 @@ class mt {
     const e = this.vt, i = this.ds(t.Qt);
     for (const [, s] of i) e.disableVertexAttribArray(s), e.vertexAttribDivisor(s, 0);
   }
-  Ae(t, e) {
+  we(t, e) {
     this.Je.length !== 0 && this.vt.drawArraysInstanced(t, 0, e, this.Je.length);
   }
   Gt() {
@@ -655,7 +655,7 @@ class _ {
     this.vt = t, this.ps = e, this.gs = i, this._s = s;
     const r = this.vt.createBuffer();
     if (!r) throw Error("Failed to create unit geometry buffer");
-    this.vt.bindBuffer(this.vt.ARRAY_BUFFER, r), this.vt.bufferData(this.vt.ARRAY_BUFFER, this._s.ws, this.vt.STATIC_DRAW), this.vt.bindBuffer(this.vt.ARRAY_BUFFER, null), this.vs = r;
+    this.vt.bindBuffer(this.vt.ARRAY_BUFFER, r), this.vt.bufferData(this.vt.ARRAY_BUFFER, this._s.As, this.vt.STATIC_DRAW), this.vt.bindBuffer(this.vt.ARRAY_BUFFER, null), this.vs = r;
   }
   get type() {
     return this.gs;
@@ -672,13 +672,13 @@ class _ {
   $e() {
     this.ps.clear();
   }
-  we() {
+  ye() {
     return !this.ps.isEmpty;
   }
   Gt() {
     this.ps.Gt(), this.vt.deleteBuffer(this.vs);
   }
-  As(t, e, i, s, r) {
+  ws(t, e, i, s, r) {
     const n = this.Cs(t, e, i, s, r.N || 0, r.X || 0, r.W || 0);
     return { le: [t, e], Ee: [i, s], j: r.j || [0, 0, 0], Y: r.Y || [1, 1, 1, 1], q: r.q || [0, 0, 0, 1], L: r.L || [0, 0], We: [r.D ? 1 : 0, r.V ? 1 : 0, r.K ? 1 : 0], N: n.radiansX, X: n.radiansY, W: n.radiansZ, Ve: [n.centerX, n.centerY] };
   }
@@ -695,27 +695,27 @@ class _ {
     return { centerX: (t + i / 2) / l * 2 - 1, centerY: 1 - (e + s / 2) / u * 2, radiansX: -r * Math.PI / 180, radiansY: -n * Math.PI / 180, radiansZ: -o * Math.PI / 180, aspectRatio: l / u };
   }
 }
-const vt = { ws: new Float32Array([0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1]), be: 6, Ce: WebGL2RenderingContext.TRIANGLES, fe: 16, ue: { le: { size: 2, offset: 0 }, de: { size: 2, offset: 8 } } };
+const vt = { As: new Float32Array([0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1]), be: 6, Ce: WebGL2RenderingContext.TRIANGLES, fe: 16, ue: { le: { size: 2, offset: 0 }, de: { size: 2, offset: 8 } } };
 class At extends _ {
   constructor(t, e) {
     super(t, e, y.RECTANGLE, vt);
   }
   Fe(t, e) {
-    const i = this.As(t.x, t.y, t.width, t.height, e);
+    const i = this.ws(t.x, t.y, t.width, t.height, e);
     return this.ps.Fe(i);
   }
 }
-const xt = { ws: new Float32Array([0, -0.5, 0, 0, 1, -0.5, 1, 0, 0, 0.5, 0, 1, 0, 0.5, 0, 1, 1, -0.5, 1, 0, 1, 0.5, 1, 1]), be: 6, Ce: WebGL2RenderingContext.TRIANGLES, fe: 16, ue: { le: { size: 2, offset: 0 }, de: { size: 2, offset: 8 } } };
+const xt = { As: new Float32Array([0, -0.5, 0, 0, 1, -0.5, 1, 0, 0, 0.5, 0, 1, 0, 0.5, 0, 1, 1, -0.5, 1, 0, 1, 0.5, 1, 1]), be: 6, Ce: WebGL2RenderingContext.TRIANGLES, fe: 16, ue: { le: { size: 2, offset: 0 }, de: { size: 2, offset: 8 } } };
 class Et extends _ {
   constructor(t, e) {
     super(t, e, y.LINE, xt);
   }
   Fe(t, e) {
-    const i = t.x2 - t.x1, s = t.y2 - t.y1, r = Math.hypot(i, s), n = t.thickness || e.I || 1, o = t.x1 + i / 2, c = t.y1 + s / 2, l = o - r / 2, u = c, f = this.As(l, u, r, n, e);
+    const i = t.x2 - t.x1, s = t.y2 - t.y1, r = Math.hypot(i, s), n = t.thickness || e.I || 1, o = t.x1 + i / 2, c = t.y1 + s / 2, l = o - r / 2, u = c, f = this.ws(l, u, r, n, e);
     return this.$s(f, o, c), this.ps.Fe(f);
   }
 }
-const yt = { ws: function(h = 32) {
+const yt = { As: function(h = 32) {
   const t = [], e = 2 * Math.PI / h;
   for (let i = 0; i < h; i++) {
     const s = i * e, r = (i + 1) % h * e, n = Math.cos(s), o = Math.sin(s), c = 0.5 * (n + 1), l = 0.5 * (o + 1), u = Math.cos(r), f = Math.sin(r), g = 0.5 * (u + 1), v = 0.5 * (f + 1);
@@ -728,11 +728,11 @@ class wt extends _ {
     super(t, e, y.ELLIPSE, yt);
   }
   Fe(t, e) {
-    const i = this.As(t.x, t.y, t.width, t.height, e);
+    const i = this.ws(t.x, t.y, t.width, t.height, e);
     return this.$s(i, t.x, t.y), this.ps.Fe(i);
   }
 }
-let bt = { ws: function(h) {
+let bt = { As: function(h) {
   const t = [];
   for (let e = 0; e < h; e++) {
     const i = e / h, s = (e + 1) / h;
@@ -745,17 +745,17 @@ class Rt extends _ {
     super(t, e, y.ARC, bt);
   }
   Fe(t, e) {
-    const i = t.x - t.width / 2, s = t.y - t.height / 2, r = t.start * Math.PI / 180, n = t.stop * Math.PI / 180, o = this.As(i, s, t.width, t.height, e);
+    const i = t.x - t.width / 2, s = t.y - t.height / 2, r = t.start * Math.PI / 180, n = t.stop * Math.PI / 180, o = this.ws(i, s, t.width, t.height, e);
     return this.$s(o, t.x, t.y), o.Ke = [r, n], this.ps.Fe(o);
   }
 }
-const Tt = { ws: new Float32Array([0, 0, 0, 0, 1, 0, 1, 0, 0.5, 1, 0.5, 1]), be: 3, Ce: WebGL2RenderingContext.TRIANGLES, fe: 16, ue: { le: { size: 2, offset: 0 }, de: { size: 2, offset: 8 } } };
+const Tt = { As: new Float32Array([0, 0, 0, 0, 1, 0, 1, 0, 0.5, 1, 0.5, 1]), be: 3, Ce: WebGL2RenderingContext.TRIANGLES, fe: 16, ue: { le: { size: 2, offset: 0 }, de: { size: 2, offset: 8 } } };
 class Ct extends _ {
   constructor(t, e) {
     super(t, e, y.TRIANGLE, Tt);
   }
   Fe(t, e) {
-    const i = Math.min(t.x1, t.x2, t.x3), s = Math.max(t.x1, t.x2, t.x3), r = Math.min(t.y1, t.y2, t.y3), n = s - i, o = Math.max(t.y1, t.y2, t.y3) - r, c = this.As(i, r, n, o, e), l = i + 0.5 * n, u = r + o * (1 / 3);
+    const i = Math.min(t.x1, t.x2, t.x3), s = Math.max(t.x1, t.x2, t.x3), r = Math.min(t.y1, t.y2, t.y3), n = s - i, o = Math.max(t.y1, t.y2, t.y3) - r, c = this.ws(i, r, n, o, e), l = i + 0.5 * n, u = r + o * (1 / 3);
     return this.$s(c, l, u), this.ps.Fe(c);
   }
 }
@@ -763,7 +763,7 @@ function et(h, t, e, i, s) {
   const r = 1 - h, n = r * r, o = h * h;
   return n * r * t + 3 * n * h * e + 3 * r * o * i + o * h * s;
 }
-const Ut = { ws: function(h = 16) {
+const Ut = { As: function(h = 16) {
   const t = [];
   for (let e = 0; e < h; e++) {
     const i = e / h, s = (e + 1) / h;
@@ -776,7 +776,7 @@ class Ft extends _ {
     super(t, e, y.BEZIER_CURVE, Ut);
   }
   Fe(t, e) {
-    const i = e.I || 1, s = et(0.5, t.x1, t.cp1x, t.cp2x, t.x2), r = et(0.5, t.y1, t.cp1y, t.cp2y, t.y2), n = this.As(0, 0, 1, i, e);
+    const i = e.I || 1, s = et(0.5, t.x1, t.cp1x, t.cp2x, t.x2), r = et(0.5, t.y1, t.cp1y, t.cp2y, t.y2), n = this.ws(0, 0, 1, i, e);
     return this.$s(n, s, r), n.qe = [t.x1, t.y1], n.je = [t.cp1x, t.cp1y], n.Ye = [t.cp2x, t.cp2y], n.Ze = [t.x2, t.y2], this.ps.Fe(n);
   }
 }
@@ -1363,7 +1363,7 @@ class Z {
     const i = e / t.head.unitsPerEm, s = t.hhea.ascender * i, r = t.hhea.descender * i, n = t.hhea.lineGap * i;
     return { ascender: s, descender: r, lineGap: n, lineHeight: s - r + n, unitsPerEm: t.head.unitsPerEm, scale: i };
   }
-  wi() {
+  yi() {
     this.ci.clear(), this.li.clear();
   }
   fi(t) {
@@ -1398,20 +1398,20 @@ class Z {
 }
 class Gt {
   constructor(t) {
-    a(this, "yi");
     a(this, "Ai");
+    a(this, "wi");
     a(this, "xt");
     a(this, "Ci");
-    this.xt = t, this.Ci = new Z(), this.yi = document.createElement("canvas"), this.Ai = this.yi.getContext("2d", { willReadFrequently: !0, alpha: !1 });
+    this.xt = t, this.Ci = new Z(), this.Ai = document.createElement("canvas"), this.wi = this.Ai.getContext("2d", { willReadFrequently: !0, alpha: !1 });
   }
   createTextureAtlas(t, e, i, s) {
     const r = t.length, n = Math.ceil(Math.sqrt(r)), o = Math.ceil(r / n), c = e.width * n, l = e.height * o, u = typeof s == "object" ? s : null;
     this.bi(c, l), this.xi(t, e, n, i, u);
     const f = this.xt.Ys(c, l, 1, { filter: "nearest" });
-    return f.zt(this.yi), { framebuffer: f, columns: n, rows: o };
+    return f.zt(this.Ai), { framebuffer: f, columns: n, rows: o };
   }
   bi(t, e) {
-    this.yi.width = t, this.yi.height = e, this.yi.style.width = t + "px", this.yi.style.height = t + "px", this.Ai.imageSmoothingEnabled = !1, this.yi.style.imageRendering = "pixelated", this.Ai.fillStyle = "black", this.Ai.fillRect(0, 0, t, e), this.Ai.textBaseline = "top", this.Ai.textAlign = "left", this.Ai.fillStyle = "white";
+    this.Ai.width = t, this.Ai.height = e, this.Ai.style.width = t + "px", this.Ai.style.height = t + "px", this.wi.imageSmoothingEnabled = !1, this.Ai.style.imageRendering = "pixelated", this.wi.fillStyle = "black", this.wi.fillRect(0, 0, t, e), this.wi.textBaseline = "top", this.wi.textAlign = "left", this.wi.fillStyle = "white";
   }
   xi(t, e, i, s, r) {
     const n = s / r.head.unitsPerEm;
@@ -1440,36 +1440,36 @@ class Gt {
     if (!t || !t.xs || t.noc === 0) return;
     const { xs: r, ys: n, endPts: o, flags: c } = t;
     if (!(r && n && o && c)) return;
-    this.Ai.beginPath();
+    this.wi.beginPath();
     let l = 0;
     for (let u = 0; u < o.length; u++) {
       const f = o[u];
       if (!(f < l)) {
         if (f >= l) {
           const g = e + r[l] * s, v = i - n[l] * s;
-          this.Ai.moveTo(g, v);
+          this.wi.moveTo(g, v);
           let m = l + 1;
           for (; m <= f; )
             if (1 & c[m]) {
               const d = e + r[m] * s, A = i - n[m] * s;
-              this.Ai.lineTo(d, A), m++;
+              this.wi.lineTo(d, A), m++;
             } else {
               const d = e + r[m] * s, A = i - n[m] * s;
               let p = m + 1 > f ? l : m + 1;
               if (1 & c[p]) {
                 const E = e + r[p] * s, x = i - n[p] * s;
-                this.Ai.quadraticCurveTo(d, A, E, x), m = p + 1;
+                this.wi.quadraticCurveTo(d, A, E, x), m = p + 1;
               } else {
                 const E = (d + (e + r[p] * s)) / 2, x = (A + (i - n[p] * s)) / 2;
-                this.Ai.quadraticCurveTo(d, A, E, x), m = p;
+                this.wi.quadraticCurveTo(d, A, E, x), m = p;
               }
             }
-          this.Ai.closePath();
+          this.wi.closePath();
         }
         l = f + 1;
       }
     }
-    this.Ai.fill();
+    this.wi.fill();
   }
 }
 class zt {
@@ -1488,8 +1488,8 @@ class zt {
     }
     return { width: Math.ceil(s), height: Math.ceil(n) };
   }
-  wi() {
-    this.Ri.wi();
+  yi() {
+    this.Ri.yi();
   }
 }
 class Wt {
@@ -1742,11 +1742,11 @@ class z {
     a(this, "V", 0);
     a(this, "K", 0);
     a(this, "L", [0, 0]);
-    a(this, "wr", "sampled");
-    a(this, "yr", "fixed");
+    a(this, "yr", "sampled");
+    a(this, "Ar", "fixed");
     a(this, "Y", [1, 1, 1]);
     a(this, "q", [0, 0, 0]);
-    a(this, "Ar", [0, 0, 0, 1]);
+    a(this, "wr", [0, 0, 0, 1]);
     a(this, "Cr", [[0.1, 0, 0]]);
     a(this, "br");
     this.vt = t, this.vr = e, this.dt = i, this.gt = s;
@@ -1771,13 +1771,13 @@ class z {
     return this.L = [i, s], this;
   }
   Is() {
-    return { texture: this.vr, invert: this.D, flipX: this.V, flipY: this.K, charRotation: this.L, charColorFixed: this.wr === "fixed", charColor: this.Y, cellColorFixed: this.yr === "fixed", cellColor: this.q, backgroundColor: this.Ar, charCount: this.Cr.length, charList: this.Cr };
+    return { texture: this.vr, invert: this.D, flipX: this.V, flipY: this.K, charRotation: this.L, charColorFixed: this.yr === "fixed", charColor: this.Y, cellColorFixed: this.Ar === "fixed", cellColor: this.q, backgroundColor: this.wr, charCount: this.Cr.length, charList: this.Cr };
   }
   charColorMode(t) {
-    return this.wr = t, this;
+    return this.yr = t, this;
   }
   cellColorMode(t) {
-    return this.yr = t, this;
+    return this.Ar = t, this;
   }
   charColor(t, e, i) {
     return this.Y = [(t ?? 0) / 255, (e ?? t ?? 0) / 255, (i ?? t ?? 0) / 255], this;
@@ -1786,7 +1786,7 @@ class z {
     return this.q = [(t ?? 0) / 255, (e ?? t ?? 0) / 255, (i ?? t ?? 0) / 255], this;
   }
   background(t, e, i, s) {
-    return this.Ar = [(t ?? 0) / 255, (e ?? t ?? 0) / 255, (i ?? t ?? 0) / 255, (s ?? 255) / 255], this;
+    return this.wr = [(t ?? 0) / 255, (e ?? t ?? 0) / 255, (i ?? t ?? 0) / 255, (s ?? 255) / 255], this;
   }
   characters(t) {
     const e = this.br(t).filter((i) => Array.isArray(i)).slice(0, 64);
@@ -1963,9 +1963,9 @@ class jt {
     a(this, "_n");
     a(this, "Nr", !1);
     a(this, "vn");
-    a(this, "wn");
     a(this, "yn");
     a(this, "An");
+    a(this, "wn");
     a(this, "Cn");
     this.er = t;
   }
@@ -2008,13 +2008,13 @@ class jt {
     this.vn = t;
   }
   Zr(t) {
-    this.wn = t;
+    this.yn = t;
   }
   Qr(t) {
-    this.yn = t;
+    this.An = t;
   }
   Tn(t) {
-    this.An = t;
+    this.wn = t;
   }
   Sn(t) {
     this.Cn = t;
@@ -2023,21 +2023,21 @@ class jt {
     return { x: this.cn.x, y: this.cn.y };
   }
   $n(t) {
-    if (this.An) {
+    if (this.wn) {
       const e = { position: { ...this.cn }, previousPosition: { ...this.ln }, originalEvent: t };
-      this.An(e);
+      this.wn(e);
     }
   }
   Mn(t) {
-    if (this.wn) {
+    if (this.yn) {
       const e = { position: { ...this.cn }, previousPosition: { ...this.ln }, button: t.button, originalEvent: t };
-      this.wn(e);
+      this.yn(e);
     }
   }
   Fn(t) {
-    if (this.yn) {
+    if (this.An) {
       const e = { position: { ...this.cn }, previousPosition: { ...this.ln }, button: t.button, originalEvent: t };
-      this.yn(e);
+      this.An(e);
     }
   }
   Rn(t) {
@@ -2415,11 +2415,11 @@ class te {
   }
 }
 class ee extends J {
-  wo(t, e) {
-    const i = this.yo(e);
+  yo(t, e) {
+    const i = this.Ao(e);
     this.On(t, i, "text/plain;charset=utf-8");
   }
-  yo(t) {
+  Ao(t) {
     let e = this.In(t);
     return e === ".txt" || e.length <= 4 ? this.Nn() : e;
   }
@@ -2434,12 +2434,12 @@ class rt {
   po(t) {
     return { preserveTrailingSpaces: t.preserveTrailingSpaces ?? !1, lineEnding: t.lineEnding ?? "lf", emptyCharacter: t.emptyCharacter ?? " ", filename: t.filename || this.do.Nn() };
   }
-  Ao(t, e = {}) {
+  wo(t, e = {}) {
     const i = this.po(e), s = this.uo._o(this.uo.Bn(t.pipeline), t.grid, t.font, i.emptyCharacter);
     return this.fo.vo(s, i);
   }
-  wo(t, e = {}) {
-    this.do.wo(this.Ao(t, e), e.filename);
+  yo(t, e = {}) {
+    this.do.yo(this.wo(t, e), e.filename);
   }
 }
 class ie extends $ {
@@ -2527,10 +2527,10 @@ const he = (h) => class extends h {
     this.xt.St(this.To);
   }
   toString(t = {}) {
-    return this.Po(), new rt().Ao({ pipeline: this.So, grid: this.hn, font: this.Ei }, t);
+    return this.Po(), new rt().wo({ pipeline: this.So, grid: this.hn, font: this.Ei }, t);
   }
   saveStrings(t = {}) {
-    this.Po(), new rt().wo({ pipeline: this.So, grid: this.hn, font: this.Ei }, t);
+    this.Po(), new rt().yo({ pipeline: this.So, grid: this.hn, font: this.Ei }, t);
   }
   toSVG(t = {}) {
     return this.Po(), new st().mo({ pipeline: this.So, grid: this.hn, font: this.Ei }, t);
@@ -2737,7 +2737,7 @@ class Q {
     G.A(t);
   }
   static get version() {
-    return "0.2.1-beta.8";
+    return "0.3.0";
   }
 }
 const pe = Object.freeze(Object.defineProperty({ __proto__: null }, Symbol.toStringTag, { value: "Module" })), me = Q.create, ve = Q.setErrorLevel, Ae = Q.version;

package/dist/textmode.esm.min.js

@@ -2737,7 +2737,7 @@ class Z {
     $.C(t);
   }
   static get version() {
-    return "0.2.1-beta.8";
+    return "0.3.0";
   }
 }
 const pe = Object.freeze(Object.defineProperty({ __proto__: null }, Symbol.toStringTag, { value: "Module" })), me = Z.create, ve = Z.setErrorLevel, xe = Z.version;