textmode.export.js 0.0.1

package/dist/textmode.export.esm.js

@@ -0,0 +1,2061 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("@layer textmode-export-overlay{.textmode-export-overlay{--overlay-bg: rgba(20, 20, 20, .8);--overlay-surface: rgba(40, 40, 40, .9);--overlay-border: rgba(255, 255, 255, .14);--overlay-border-strong: rgba(255, 255, 255, .2);--overlay-border-focus: rgba(160, 160, 160, .6);--overlay-focus-shadow: 0 0 0 1px rgba(140, 140, 140, .28);--overlay-text: #ffffff;--overlay-muted: rgba(200, 200, 200, .74);--overlay-radius: .75rem;--overlay-stack-gap: .55rem;position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:var(--overlay-stack-gap);min-width:236px;max-width:236px;padding:.65rem .8rem;background:var(--overlay-bg);color:var(--overlay-text);border-radius:var(--overlay-radius);border:1px solid var(--overlay-border);box-shadow:0 12px 28px #0000004d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.82rem;line-height:1.35;pointer-events:auto;z-index:2147483647}.textmode-export-overlay *{box-sizing:border-box}.textmode-export-overlay__header{display:flex;flex-direction:column;gap:.4rem}.textmode-export-overlay__header-title-row{display:flex;align-items:center;justify-content:space-between;gap:.4rem}.textmode-export-overlay__header-links{display:inline-flex;align-items:center;gap:.3rem}.textmode-export-overlay__support-link{display:inline-flex;align-items:center;justify-content:center;padding:.2rem;border-radius:.45rem;border:1px solid transparent;color:#d7d7d7d1;background:transparent;text-decoration:none;line-height:0;transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease}.textmode-export-overlay__support-link:hover{color:#fff;background:#5a5a5a4d;border-color:#c8c8c824}.textmode-export-overlay__support-link:focus-visible{outline:none;border-color:var(--overlay-border-focus);box-shadow:var(--overlay-focus-shadow)}.textmode-export-overlay__support-icon,.textmode-export-overlay__link-icon{display:block;width:1rem;height:1rem}.textmode-export-overlay__stack{display:flex;flex-direction:column;gap:var(--overlay-stack-gap)}.textmode-export-overlay__stack--dense{gap:.3rem}.textmode-export-overlay__stack--compact{gap:.45rem}.textmode-export-overlay__section{display:flex;flex-direction:column;gap:.4rem}.textmode-export-overlay__title{font-size:.92rem;font-weight:600}.textmode-export-overlay__divider{width:100%;height:1px;background:#ffffff29;margin-top:.25rem}.textmode-export-overlay__label{font-weight:500;opacity:.9}.textmode-export-overlay__checkbox{display:flex;align-items:center;gap:.5rem}.textmode-export-overlay__checkbox input[type=checkbox]{width:1rem;height:1rem;accent-color:rgba(100,100,100,.9)}.textmode-export-overlay__row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-start;width:100%}.textmode-export-overlay__field{display:flex;flex-direction:column;gap:.3rem;flex:1 1 120px;min-width:120px}.textmode-export-overlay__field--compact{flex:1 1 100px;min-width:100px}.textmode-export-overlay__field--dense{flex:1 1 90px;min-width:90px}.textmode-export-overlay__field--channel{flex:1 1 0;min-width:0}.textmode-export-overlay__field--full{width:100%;flex:1 1 100%}.textmode-export-overlay__input,.textmode-export-overlay select.textmode-export-overlay__input,.textmode-export-overlay input.textmode-export-overlay__input{width:100%;padding:.35rem .5rem;border-radius:.4rem;border:1px solid var(--overlay-border-strong);background:var(--overlay-surface);color:var(--overlay-text);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.textmode-export-overlay__input:focus{outline:none;border-color:var(--overlay-border-focus);box-shadow:var(--overlay-focus-shadow);background:#2d2f42eb}.textmode-export-overlay__input::placeholder{color:var(--overlay-muted);opacity:.7}.textmode-export-overlay__muted{font-size:.75rem;opacity:.7;display:block}.textmode-export-overlay__button{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;border-radius:.45rem;border:none;font-weight:600;padding:.45rem .7rem;cursor:pointer;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.textmode-export-overlay__button--primary{background:#505050;color:#fff}.textmode-export-overlay__button--secondary{background:#606060;color:#fff}.textmode-export-overlay__button--full{width:100%}.textmode-export-overlay__button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 7px 18px #00000073}.textmode-export-overlay__button--primary:hover:not(:disabled){background:#404040}.textmode-export-overlay__button--secondary:hover:not(:disabled){background:#4a4a4a}.textmode-export-overlay__button:disabled{cursor:default;opacity:.55;transform:none;box-shadow:none}.textmode-export-overlay__status{display:flex;flex-direction:column;gap:.25rem;padding:.45rem .55rem;border-radius:.45rem;border:1px solid rgba(110,110,110,.22);background:#4646462e}.textmode-export-overlay__status--gif{background:#5050501f;border-color:#78787840}.textmode-export-overlay__status--video{background:#4646461f;border-color:#6e6e6e40}.textmode-export-overlay__status-title{font-weight:600;font-size:.75rem;opacity:.85;text-transform:uppercase;letter-spacing:.04em}.textmode-export-overlay__status-value{font-size:.82rem;color:#dedede;transition:color .18s ease}.textmode-export-overlay__status-value--neutral{color:#cfcfcf}.textmode-export-overlay__status-value--active{color:#f5f5f5}.textmode-export-overlay__status-value--alert{color:#b8b8b8}.textmode-export-number-input,.textmode-export-overlay .textmode-export-number-input{display:flex;align-items:stretch;width:100%;background:var(--overlay-surface);border:1px solid var(--overlay-border-strong);border-radius:.4rem;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;position:relative}.textmode-export-number-input:focus-within{border-color:var(--overlay-border-focus);box-shadow:var(--overlay-focus-shadow)}.textmode-export-number-input.is-disabled{opacity:.55}.textmode-export-number-input__field{flex:1 1 auto;min-width:0;border:none;background:transparent;color:var(--overlay-text);font:inherit;padding:.35rem .5rem;appearance:textfield}.textmode-export-number-input__field::-webkit-outer-spin-button,.textmode-export-number-input__field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.textmode-export-number-input__field:focus{outline:none}.textmode-export-number-input__controls{display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.12);min-width:1.6rem}.textmode-export-number-input__control{display:flex;align-items:center;justify-content:center;width:100%;flex:1;border:none;background:#32323299;color:#d0d0d0;font-size:.68rem;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease;padding:0}.textmode-export-number-input__control:hover:not(:disabled){background:#5a5a5ad9;color:#fff}.textmode-export-number-input__control:disabled{cursor:default;opacity:.4;background:#28282880;color:#c8c8c866}.textmode-export-number-input:focus-within .textmode-export-number-input__control{background:#3c3c3cbf;color:#e8e8e8}.textmode-export-number-input__display{position:absolute;inset:0;display:flex;align-items:center;padding:.4rem .55rem;pointer-events:none;color:#f8fafc;opacity:0;transition:opacity .14s ease}.textmode-export-number-input__display--visible{opacity:1}.textmode-export-range-input{position:relative;width:100%}.textmode-export-range-input.is-disabled{opacity:.55}.textmode-export-range-input__field{width:100%;height:1.4rem;padding:0;margin:0;background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none}.textmode-export-range-input__field::-webkit-slider-thumb{width:12px;height:12px;margin-top:-3.5px;-webkit-appearance:none;border-radius:50%;background:#a0a0a0;border:2px solid #303030;box-shadow:0 0 0 2px #00000059}.textmode-export-range-input__field::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:linear-gradient(90deg,#8c8c8cd9,#646464a6)}.textmode-export-range-input__field::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#a0a0a0;border:2px solid #303030;margin-top:-3.5px}.textmode-export-range-input__field::-moz-range-track{height:5px;border-radius:999px;background:linear-gradient(90deg,#8c8c8cd9,#646464a6)}.textmode-export-range-input__tooltip{position:absolute;top:-1.5rem;left:0;transform:translate(-50%);padding:.2rem .35rem;border-radius:.35rem;background:#1e1e1ee0;color:#f8fafc;font-size:.68rem;line-height:1;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease}.textmode-export-range-input__tooltip--visible{opacity:1}}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+class At {
+  $extractFramebufferData(t) {
+    const e = t.readPixels(0), r = t.readPixels(1), a = t.readPixels(2), i = t.readPixels(3);
+    return { characterPixels: e, primaryColorPixels: r, secondaryColorPixels: a, transformPixels: t.readPixels(4), rotationPixels: i };
+  }
+  $getCharacterIndex(t, e) {
+    return t[e] + (t[e + 1] << 8);
+  }
+}
+class Q {
+  $downloadFile(t, e) {
+    try {
+      const r = this._sanitizeFilename(e), a = URL.createObjectURL(t), i = document.createElement("a");
+      i.href = a, i.download = r, i.style.display = "none", i.rel = "noopener", document.body.appendChild(i), i.click(), document.body.removeChild(i), URL.revokeObjectURL(a);
+    } catch (r) {
+      console.error("[textmode-export] Failed to download file:", r);
+    }
+  }
+  _sanitizeFilename(t) {
+    if (!t) return this._generateDefaultFilename();
+    const e = t.trim();
+    return e ? e.replace(/[<>:"/\\|?*]/g, "_").replace(/\s+/g, "_").replace(/_{2,}/g, "_").replace(/^_+|_+$/g, "").substring(0, 255) || this._generateDefaultFilename() : this._generateDefaultFilename();
+  }
+  _generateDefaultFilename() {
+    return `textmode-export-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/:/g, "-")}`;
+  }
+}
+function ft(o, t) {
+  return { r: o[t], g: o[t + 1], b: o[t + 2], a: o[t + 3] };
+}
+class qt extends At {
+  _extractTransformData(t, e, r) {
+    const a = t[r] === 255, i = t[r + 1] === 255, n = t[r + 2] === 255, c = e[r] + e[r + 1] / 255;
+    return { isInverted: a, flipHorizontal: i, flipVertical: n, rotation: Math.round(360 * c / 255 * 100) / 100 };
+  }
+  _calculateCellPosition(t, e, r) {
+    return { x: t, y: e, cellX: t * r.cellWidth, cellY: e * r.cellHeight };
+  }
+  $extractSVGCellData(t, e) {
+    const r = [];
+    let a = 0;
+    for (let i = 0; i < e.rows; i++) for (let n = 0; n < e.cols; n++) {
+      const c = 4 * a, l = this.$getCharacterIndex(t.characterPixels, c);
+      let h = ft(t.primaryColorPixels, c), s = ft(t.secondaryColorPixels, c);
+      const d = this._extractTransformData(t.transformPixels, t.rotationPixels, c);
+      if (d.isInverted) {
+        const m = h;
+        h = s, s = m;
+      }
+      const u = this._calculateCellPosition(n, i, e);
+      r.push({ charIndex: l, primaryColor: h, secondaryColor: s, transform: d, position: u }), a++;
+    }
+    return r;
+  }
+}
+class zt {
+  _createGlyphPath(t, e, r, a, i) {
+    const n = i / t.head.unitsPerEm;
+    return { getBoundingBox: () => ({ x1: r + e.xMin * n, y1: a + -e.yMax * n, x2: r + e.xMax * n, y2: a + -e.yMin * n }), toSVG: () => this._glyphToSVGPath(e, r, a, n) };
+  }
+  _glyphToSVGPath(t, e, r, a) {
+    if (!t || !t.xs) return "";
+    const { xs: i, ys: n, endPts: c, flags: l } = t;
+    if (!(i && n && c && l)) return "";
+    let h = "", s = 0;
+    for (let d = 0; d < c.length; d++) {
+      const u = c[d];
+      if (!(u < s)) {
+        if (u >= s) {
+          const m = e + i[s] * a, y = r - n[s] * a;
+          h += `M${m.toFixed(2)},${y.toFixed(2)}`;
+          let p = s + 1;
+          for (; p <= u; )
+            if (1 & l[p]) {
+              const f = e + i[p] * a, _ = r - n[p] * a;
+              h += `L${f.toFixed(2)},${_.toFixed(2)}`, p++;
+            } else {
+              const f = e + i[p] * a, _ = r - n[p] * a;
+              let b = p + 1 > u ? s : p + 1;
+              if (1 & l[b]) {
+                const g = e + i[b] * a, C = r - n[b] * a;
+                h += `Q${f.toFixed(2)},${_.toFixed(2)} ${g.toFixed(2)},${C.toFixed(2)}`, p = b + 1;
+              } else {
+                const g = (f + (e + i[b] * a)) / 2, C = (_ + (r - n[b] * a)) / 2;
+                h += `Q${f.toFixed(2)},${_.toFixed(2)} ${g.toFixed(2)},${C.toFixed(2)}`, p = b;
+              }
+            }
+          h += "Z";
+        }
+        s = u + 1;
+      }
+    }
+    return h;
+  }
+  _generateCharacterPath(t, e, r, a, i) {
+    const n = t.codePointAt(0) ?? 0, c = e.getGlyphData(n);
+    return c ? this._createGlyphPath(e.font, c, r, a, i) : null;
+  }
+  $generatePositionedCharacterPath(t, e, r, a, i, n, c, l) {
+    const h = r + (i - l * (c / e.font.head.unitsPerEm)) / 2, s = a + (n + 0.7 * c) / 2, d = this._generateCharacterPath(t, e, h, s, c);
+    return d && d.toSVG() || null;
+  }
+}
+class jt {
+  _pathGenerator;
+  constructor() {
+    this._pathGenerator = new zt();
+  }
+  $generateSVGHeader(t) {
+    const { width: e, height: r } = t;
+    return `<?xml version="1.0" encoding="UTF-8"?><svg width="${e}" height="${r}" viewBox="0 0 ${e} ${r}" xmlns="http://www.w3.org/2000/svg"><title>textmode.js sketch</title>`;
+  }
+  $generateSVGFooter() {
+    return "</g></svg>";
+  }
+  _generateTransformAttribute(t, e) {
+    const { transform: r, position: a } = t;
+    if (!r.flipHorizontal && !r.flipVertical && !r.rotation) return "";
+    const i = a.cellX + e.cellWidth / 2, n = a.cellY + e.cellHeight / 2, c = [];
+    if (r.flipHorizontal || r.flipVertical) {
+      const l = r.flipHorizontal ? -1 : 1, h = r.flipVertical ? -1 : 1;
+      c.push(`translate(${i} ${n})scale(${l} ${h})translate(${-i} ${-n})`);
+    }
+    return r.rotation && c.push(`rotate(${r.rotation} ${i} ${n})`), ` transform="${c.join(" ")}"`;
+  }
+  _generateCellBackground(t, e, r) {
+    if (!r.includeBackgroundRectangles || t.secondaryColor.a === 0) return "";
+    const { position: a } = t, { r: i, g: n, b: c, a: l } = t.secondaryColor, h = `rgba(${i},${n},${c},${l / 255})`;
+    return r.drawMode === "stroke" ? `<rect x="${a.cellX}" y="${a.cellY}" width="${e.cellWidth}" height="${e.cellHeight}" stroke="${h}" fill="none" stroke-width="${r.strokeWidth}"/>` : `<rect x="${a.cellX}" y="${a.cellY}" width="${e.cellWidth}" height="${e.cellHeight}" fill="${h}"/>`;
+  }
+  _generateCharacterPath(t, e, r, a) {
+    const i = r.characters[t.charIndex];
+    if (!i) return "";
+    const n = this._pathGenerator.$generatePositionedCharacterPath(i.character, r, t.position.cellX, t.position.cellY, e.cellWidth, e.cellHeight, r.fontSize, i.advanceWidth);
+    if (!n) return "";
+    const { r: c, g: l, b: h, a: s } = t.primaryColor, d = `rgba(${c},${l},${h},${s / 255})`;
+    return a.drawMode === "stroke" ? `<path d="${n}" stroke="${d}" stroke-width="${a.strokeWidth}" fill="none"/>` : `<path d="${n}" fill="${d}"/>`;
+  }
+  $generateCellContent(t, e, r, a) {
+    const i = [], n = this._generateCellBackground(t, e, a);
+    n && i.push(n);
+    const c = this._generateCharacterPath(t, e, r, a);
+    if (c) {
+      const l = this._generateTransformAttribute(t, e);
+      i.push(l ? `<g${l}>${c}</g>` : c);
+    }
+    return i.join("");
+  }
+  $generateSVGContent(t, e, r, a) {
+    const i = [this.$generateSVGHeader(e), '<g id="ascii-cells">'];
+    for (const n of t) i.push(this.$generateCellContent(n, e, r, a));
+    return i.push(this.$generateSVGFooter()), i.join("");
+  }
+  $optimizeSVGContent(t) {
+    return t.replace(/<path[^>]*d=""[^>]*\/>/g, "").replace(/\s+/g, " ").replace(/> </g, "><");
+  }
+}
+class gt {
+  _applyDefaultOptions(t) {
+    return { includeBackgroundRectangles: t.includeBackgroundRectangles ?? !0, drawMode: t.drawMode ?? "fill", strokeWidth: t.strokeWidth ?? 1, filename: t.filename };
+  }
+  $generateSVG(t, e = {}) {
+    const r = new qt(), a = new jt(), i = r.$extractSVGCellData(r.$extractFramebufferData(t.drawFramebuffer), t.grid), n = a.$generateSVGContent(i, t.grid, t.font, this._applyDefaultOptions(e));
+    return a.$optimizeSVGContent(n);
+  }
+  $saveSVG(t, e = {}) {
+    new Q().$downloadFile(new Blob([this.$generateSVG(t, e)], { type: "image/svg+xml;charset=utf-8" }), e.filename);
+  }
+}
+const ot = { png: "image/png", jpg: "image/jpeg", webp: "image/webp" }, lt = { png: ".png", jpg: ".jpg", webp: ".webp" };
+class vt {
+  _applyDefaultOptions(t) {
+    return { format: t.format ?? "png", scale: Math.abs(t.scale ?? 1), filename: t.filename };
+  }
+  _validateOptions(t) {
+    if (!(t.format in ot)) throw new Error(`Saving '${t.format}' files is not supported`);
+  }
+  async $generateImageBlob(t, e) {
+    const r = t, a = document.createElement("canvas"), i = a.getContext("2d"), n = Math.round(r.width * e.scale), c = Math.round(r.height * e.scale);
+    return a.width = n, a.height = c, i.imageSmoothingEnabled = !1, i.clearRect(0, 0, n, c), i.drawImage(r, 0, 0, r.width, r.height, 0, 0, n, c), await new Promise((l, h) => {
+      a.toBlob((s) => {
+        s ? l(s) : h(new Error(`Failed to generate ${e.format.toUpperCase()} blob`));
+      }, ot[e.format]);
+    });
+  }
+  async $saveImage(t, e = {}) {
+    const r = this._applyDefaultOptions(e);
+    this._validateOptions(r);
+    const a = await this.$generateImageBlob(t, r);
+    new Q().$downloadFile(a, r.filename);
+  }
+  async $copyImageToClipboard(t, e = {}) {
+    if (typeof navigator > "u" || !navigator.clipboard || typeof navigator.clipboard.write != "function") throw new Error("Clipboard API is not available in this environment");
+    const r = this._applyDefaultOptions(e);
+    this._validateOptions(r);
+    const a = await this.$generateImageBlob(t, r), i = new ClipboardItem({ [ot[r.format]]: a });
+    await navigator.clipboard.write([i]);
+  }
+}
+class bt {
+  _applyDefaultOptions(t) {
+    return { preserveTrailingSpaces: t.preserveTrailingSpaces ?? !1, emptyCharacter: t.emptyCharacter ?? " ", filename: t.filename };
+  }
+  _createTXTContent(t, e) {
+    const r = new At();
+    let a = r.$extractFramebufferData(t.drawFramebuffer);
+    const i = [];
+    let n = 0;
+    for (let l = 0; l < t.grid.rows; l++) {
+      const h = [];
+      for (let s = 0; s < t.grid.cols; s++) {
+        const d = 4 * n, u = r.$getCharacterIndex(a.characterPixels, d), m = t.font.characters[u]?.character || e.emptyCharacter;
+        h.push(m), n++;
+      }
+      i.push(h);
+    }
+    const c = [];
+    for (const l of i) {
+      let h = l.join("");
+      e.preserveTrailingSpaces || (h = h.replace(/\s+$/, "")), c.push(h);
+    }
+    return c.join(`
+`);
+  }
+  $generateTXT(t, e = {}) {
+    return this._createTXTContent(t, this._applyDefaultOptions(e));
+  }
+  $saveTXT(t, e = {}) {
+    const r = this._applyDefaultOptions(e), a = this._createTXTContent(t, r), i = new Blob([a], { type: "text/plain;charset=utf-8" });
+    new Q().$downloadFile(i, r.filename);
+  }
+}
+class Ht {
+  _canvas;
+  _ctx;
+  async $record(t, e, r, a) {
+    const i = Math.max(1, Math.round(e.frameRate)), n = Math.round(1e3 / i), c = Math.max(1, Math.round(e.frameCount));
+    return await new Promise((l, h) => {
+      const s = [];
+      let d, u = 0, m = !1;
+      const y = () => {
+        d && (d(), d = void 0);
+      }, p = (_) => {
+        m || (m = !0, y(), l(_));
+      }, f = () => {
+        if (u >= c) p(s);
+        else try {
+          const _ = e.scale, b = Math.max(1, Math.round(t.width * _)), g = Math.max(1, Math.round(t.height * _));
+          this._canvas || (this._canvas = document.createElement("canvas")), this._canvas.width === b && this._canvas.height === g || (this._canvas.width = b, this._canvas.height = g), this._ctx || (this._ctx = this._canvas.getContext("2d"));
+          const C = this._ctx;
+          C.imageSmoothingEnabled = !1, C.clearRect(0, 0, b, g), C.drawImage(t, 0, 0, t.width, t.height, 0, 0, b, g);
+          const S = { imageData: C.getImageData(0, 0, b, g), width: b, height: g, delayMs: n };
+          s.push(S), u += 1, a?.({ state: "recording", frameIndex: u, totalFrames: c }), u >= c && p(s);
+        } catch (_) {
+          ((b) => {
+            if (m) return;
+            m = !0, y();
+            const g = b instanceof Error ? b.message : "GIF recording failed";
+            a?.({ state: "error", message: g }), h(b instanceof Error ? b : new Error(String(b)));
+          })(_);
+        }
+      };
+      d = r(() => {
+        f();
+      }), a?.({ state: "recording", frameIndex: 0, totalFrames: c });
+    });
+  }
+}
+var Pt = Object.defineProperty, Qt = (o) => Pt(o, "__esModule", { value: !0 }), Xt = (o, t) => () => (t || o((t = { exports: {} }).exports, t), t.exports), Yt = (o, t) => {
+  for (var e in t) Pt(o, e, { get: t[e], enumerable: !0 });
+}, Jt = Xt((o) => {
+  function t(d, u, m) {
+    return 0.29889531 * d + 0.58662247 * u + 0.11448223 * m;
+  }
+  function e(d, u, m) {
+    return 0.59597799 * d - 0.2741761 * u - 0.32180189 * m;
+  }
+  function r(d, u, m) {
+    return 0.21147017 * d - 0.52261711 * u + 0.31114694 * m;
+  }
+  function a(d, u) {
+    let m = d[0] - u[0], y = d[1] - u[1], p = d[2] - u[2], f = i(d) - i(u);
+    return m * m * 0.5053 + y * y * 0.299 + p * p * 0.1957 + f * f;
+  }
+  function i(d) {
+    return d[3] != null ? d[3] : 255;
+  }
+  function n(d, u) {
+    return Math.sqrt(a(d, u));
+  }
+  function c(d, u) {
+    let [m, y, p] = d, [f, _, b] = u, g = t(m, y, p) - t(f, _, b), C = e(m, y, p) - e(f, _, b), S = r(m, y, p) - r(f, _, b), E = i(d) - i(u);
+    return g * g * 0.5053 + C * C * 0.299 + S * S * 0.1957 + E * E;
+  }
+  function l(d, u) {
+    return Math.sqrt(c(d, u));
+  }
+  function h(d, u) {
+    var m, y = 0;
+    for (m = 0; m < d.length; m++) {
+      let p = d[m] - u[m];
+      y += p * p;
+    }
+    return y;
+  }
+  function s(d, u) {
+    return Math.sqrt(h(d, u));
+  }
+  Qt(o), Yt(o, { colorDifferenceRGBToYIQ: () => l, colorDifferenceRGBToYIQSquared: () => c, colorDifferenceYIQ: () => n, colorDifferenceYIQSquared: () => a, euclideanDistance: () => s, euclideanDistanceSquared: () => h });
+}), Kt = { trailer: 59 };
+function Dt(o = 256) {
+  let t = 0, e = new Uint8Array(o);
+  return { get buffer() {
+    return e.buffer;
+  }, reset() {
+    t = 0;
+  }, bytesView: () => e.subarray(0, t), bytes: () => e.slice(0, t), writeByte(a) {
+    r(t + 1), e[t] = a, t++;
+  }, writeBytes(a, i = 0, n = a.length) {
+    r(t + n);
+    for (let c = 0; c < n; c++) e[t++] = a[c + i];
+  }, writeBytesView(a, i = 0, n = a.byteLength) {
+    r(t + n), e.set(a.subarray(i, i + n), t), t += n;
+  } };
+  function r(a) {
+    var i = e.length;
+    if (i >= a) return;
+    a = Math.max(a, i * (i < 1048576 ? 2 : 1.125) >>> 0), i != 0 && (a = Math.max(a, 256));
+    let n = e;
+    e = new Uint8Array(a), t > 0 && e.set(n.subarray(0, t), 0);
+  }
+}
+var Z = 12, yt = 5003, Zt = [0, 1, 3, 7, 15, 31, 63, 127, 255, 511, 1023, 2047, 4095, 8191, 16383, 32767, 65535];
+function te(o, t, e, r, a, i, n, c) {
+  a = a || Dt(512), i = i || new Uint8Array(256), n = n || new Int32Array(yt), c = c || new Int32Array(yt);
+  let l = n.length, h = Math.max(2, r);
+  i.fill(0), c.fill(0), L();
+  let s = 0, d = 0, u = h + 1, m = u, y = !1, p = m, f = D(p), _ = 1 << u - 1, b = _ + 1, g = _ + 2, C = 0, S = e[0], E = 0;
+  for (let B = l; B < 65536; B *= 2) ++E;
+  E = 8 - E, a.writeByte(h), T(_);
+  for (let B = 1; B < e.length; B++) V(e[B]);
+  return T(S), T(b), a.writeByte(0), a.bytesView();
+  function A(B) {
+    i[C++] = B, C >= 254 && I();
+  }
+  function L() {
+    n.fill(-1);
+  }
+  function V(B) {
+    let R = (B << Z) + S, w = B << E ^ S;
+    if (n[w] === R) S = c[w];
+    else {
+      if (n[w] >= 0) {
+        let x = w === 0 ? 1 : l - w;
+        do
+          if (w -= x, w < 0 && (w += l), n[w] === R) return void (S = c[w]);
+        while (n[w] >= 0);
+      }
+      T(S), S = B, g < 1 << Z ? (c[w] = g++, n[w] = R) : (L(), g = _ + 2, y = !0, T(_));
+    }
+  }
+  function I() {
+    C > 0 && (a.writeByte(C), a.writeBytesView(i, 0, C), C = 0);
+  }
+  function D(B) {
+    return (1 << B) - 1;
+  }
+  function T(B) {
+    for (s &= Zt[d], d > 0 ? s |= B << d : s = B, d += p; d >= 8; ) A(255 & s), s >>= 8, d -= 8;
+    if ((g > f || y) && (y ? (p = m, f = D(p), y = !1) : (++p, f = p == Z ? 1 << Z : D(p))), B == b) {
+      for (; d > 0; ) A(255 & s), s >>= 8, d -= 8;
+      I();
+    }
+  }
+}
+var ee = te;
+function Vt(o, t, e) {
+  return o << 8 & 63488 | t << 2 & 992 | e >> 3 & 31;
+}
+function Ot(o, t, e, r) {
+  return o >> 4 | 240 & t | (240 & e) << 4 | (240 & r) << 8;
+}
+function Tt(o, t, e) {
+  return o >> 4 << 8 | t >> 4 << 4 | e >> 4;
+}
+function tt(o, t, e) {
+  return o < t ? t : o > e ? e : o;
+}
+function at(o) {
+  return o * o;
+}
+function wt(o, t, e) {
+  for (var r = 0, a = 1e100, i = o[t], n = i.cnt, c = (i.ac, i.rc), l = i.gc, h = i.bc, s = i.fw; s != 0; s = o[s].fw) {
+    var d = o[s].cnt, u = n * d / (n + d);
+    if (!(u >= a)) {
+      var m = 0;
+      !((m += u * at(o[s].rc - c)) >= a) && !((m += u * at(o[s].gc - l)) >= a) && !((m += u * at(o[s].bc - h)) >= a) && (a = m, r = s);
+    }
+  }
+  i.err = a, i.nn = r;
+}
+function dt() {
+  return { ac: 0, rc: 0, gc: 0, bc: 0, cnt: 0, nn: 0, fw: 0, bk: 0, tm: 0, mtm: 0, err: 0 };
+}
+function re(o, t) {
+  let e = new Array(t === "rgb444" ? 4096 : 65536), r = o.length;
+  if (t === "rgba4444") for (let a = 0; a < r; ++a) {
+    let i = o[a], n = i >> 24 & 255, c = i >> 16 & 255, l = i >> 8 & 255, h = 255 & i, s = Ot(h, l, c, n), d = s in e ? e[s] : e[s] = dt();
+    d.rc += h, d.gc += l, d.bc += c, d.ac += n, d.cnt++;
+  }
+  else if (t === "rgb444") for (let a = 0; a < r; ++a) {
+    let i = o[a], n = i >> 16 & 255, c = i >> 8 & 255, l = 255 & i, h = Tt(l, c, n), s = h in e ? e[h] : e[h] = dt();
+    s.rc += l, s.gc += c, s.bc += n, s.cnt++;
+  }
+  else for (let a = 0; a < r; ++a) {
+    let i = o[a], n = i >> 16 & 255, c = i >> 8 & 255, l = 255 & i, h = Vt(l, c, n), s = h in e ? e[h] : e[h] = dt();
+    s.rc += l, s.gc += c, s.bc += n, s.cnt++;
+  }
+  return e;
+}
+function ae(o, t, e) {
+  let { format: r = "rgb565", clearAlpha: a = !0, clearAlphaColor: i = 0, clearAlphaThreshold: n = 0, oneBitAlpha: c = !1 } = e || {}, l = e.useSqrt !== !1, h = r === "rgba4444", s = re(o, r), d = s.length, u = d - 1, m = new Uint32Array(d + 1);
+  for (var y = 0, p = 0; p < s.length; ++p) {
+    let B = s[p];
+    if (B != null) {
+      var f = 1 / B.cnt;
+      h && (B.ac *= f), B.rc *= f, B.gc *= f, B.bc *= f, s[y++] = B;
+    }
+  }
+  for (at(t) / y < 0.022 && (l = !1), p = 0; p < y - 1; ++p) s[p].fw = p + 1, s[p + 1].bk = p, l && (s[p].cnt = Math.sqrt(s[p].cnt));
+  var _, b, g;
+  for (l && (s[p].cnt = Math.sqrt(s[p].cnt)), p = 0; p < y; ++p) {
+    wt(s, p);
+    var C = s[p].err;
+    for (b = ++m[0]; b > 1 && !(s[_ = m[g = b >> 1]].err <= C); b = g) m[b] = _;
+    m[b] = p;
+  }
+  var S = y - t;
+  for (p = 0; p < S; ) {
+    for (var E; ; ) {
+      var A = m[1];
+      if ((E = s[A]).tm >= E.mtm && s[E.nn].mtm <= E.tm) break;
+      for (E.mtm == u ? A = m[1] = m[m[0]--] : (wt(s, A), E.tm = p), C = s[A].err, b = 1; (g = b + b) <= m[0] && (g < m[0] && s[m[g]].err > s[m[g + 1]].err && g++, !(C <= s[_ = m[g]].err)); b = g) m[b] = _;
+      m[b] = A;
+    }
+    var L = s[E.nn], V = E.cnt, I = L.cnt;
+    f = 1 / (V + I), h && (E.ac = f * (V * E.ac + I * L.ac)), E.rc = f * (V * E.rc + I * L.rc), E.gc = f * (V * E.gc + I * L.gc), E.bc = f * (V * E.bc + I * L.bc), E.cnt += L.cnt, E.mtm = ++p, s[L.bk].fw = L.fw, s[L.fw].bk = L.bk, L.mtm = u;
+  }
+  let D = [];
+  var T = 0;
+  for (p = 0; ; ++T) {
+    let B = tt(Math.round(s[p].rc), 0, 255), R = tt(Math.round(s[p].gc), 0, 255), w = tt(Math.round(s[p].bc), 0, 255), x = 255;
+    h && (x = tt(Math.round(s[p].ac), 0, 255), c && (x = x <= (typeof c == "number" ? c : 127) ? 0 : 255), a && x <= n && (B = R = w = i, x = 0));
+    let k = h ? [B, R, w, x] : [B, R, w];
+    if (ie(D, k) || D.push(k), (p = s[p].fw) == 0) break;
+  }
+  return D;
+}
+function ie(o, t) {
+  for (let e = 0; e < o.length; e++) {
+    let r = o[e], a = r[0] === t[0] && r[1] === t[1] && r[2] === t[2], i = !(r.length >= 4 && t.length >= 4) || r[3] === t[3];
+    if (a && i) return !0;
+  }
+  return !1;
+}
+function se(o, t, e) {
+  let r = (e = e || "rgb565") === "rgb444" ? 4096 : 65536, a = new Uint8Array(o.length), i = new Array(r);
+  if (e === "rgba4444") for (let n = 0; n < o.length; n++) {
+    let c, l = o[n], h = l >> 24 & 255, s = l >> 16 & 255, d = l >> 8 & 255, u = 255 & l, m = Ot(u, d, s, h);
+    i[m] != null ? c = i[m] : (c = ne(u, d, s, h, t), i[m] = c), a[n] = c;
+  }
+  else for (let n = 0; n < o.length; n++) {
+    let c, l = o[n], h = l >> 16 & 255, s = l >> 8 & 255, d = 255 & l, u = e === "rgb444" ? Tt(d, s, h) : Vt(d, s, h);
+    i[u] != null ? c = i[u] : (c = oe(d, s, h, t), i[u] = c), a[n] = c;
+  }
+  return a;
+}
+function ne(o, t, e, r, a) {
+  let i = 0, n = 1e100;
+  for (let c = 0; c < a.length; c++) {
+    let l = a[c], h = l[0], s = l[1], d = l[2], u = q(l[3] - r);
+    u > n || (u += q(h - o), !(u > n) && (u += q(s - t), !(u > n) && (u += q(d - e), !(u > n) && (n = u, i = c))));
+  }
+  return i;
+}
+function oe(o, t, e, r) {
+  let a = 0, i = 1e100;
+  for (let n = 0; n < r.length; n++) {
+    let c = r[n], l = c[0], h = c[1], s = c[2], d = q(l - o);
+    d > i || (d += q(h - t), !(d > i) && (d += q(s - e), !(d > i) && (i = d, a = n)));
+  }
+  return a;
+}
+function q(o) {
+  return o * o;
+}
+function le(o = {}) {
+  let { initialCapacity: t = 4096, auto: e = !0 } = o, r = Dt(t), a = new Uint8Array(256), i = new Int32Array(5003), n = new Int32Array(5003), c = !1;
+  return { reset() {
+    r.reset(), c = !1;
+  }, finish() {
+    r.writeByte(Kt.trailer);
+  }, bytes: () => r.bytes(), bytesView: () => r.bytesView(), get buffer() {
+    return r.buffer;
+  }, get stream() {
+    return r;
+  }, writeHeader: l, writeFrame(h, s, d, u = {}) {
+    let { transparent: m = !1, transparentIndex: y = 0, delay: p = 0, palette: f = null, repeat: _ = 0, colorDepth: b = 8, dispose: g = -1 } = u, C = !1;
+    if (e ? c || (C = !0, l(), c = !0) : C = !!u.first, s = Math.max(0, Math.floor(s)), d = Math.max(0, Math.floor(d)), C) {
+      if (!f) throw new Error("First frame must include a { palette } option");
+      ce(r, s, d, f, b), _t(r, f), _ >= 0 && ue(r, _);
+    }
+    let S = Math.round(p / 10);
+    de(r, g, S, m, y);
+    let E = !!f && !C;
+    he(r, s, d, E ? f : null), E && _t(r, f), pe(r, h, s, d, b, a, i, n);
+  } };
+  function l() {
+    Rt(r, "GIF89a");
+  }
+}
+function de(o, t, e, r, a) {
+  var i, n;
+  o.writeByte(33), o.writeByte(249), o.writeByte(4), a < 0 && (a = 0, r = !1), r ? (i = 1, n = 2) : (i = 0, n = 0), t >= 0 && (n = 7 & t), n <<= 2, o.writeByte(0 | n | i), N(o, e), o.writeByte(a || 0), o.writeByte(0);
+}
+function ce(o, t, e, r, a = 8) {
+  let i = 128 | a - 1 << 4 | pt(r.length) - 1;
+  N(o, t), N(o, e), o.writeBytes([i, 0, 0]);
+}
+function ue(o, t) {
+  o.writeByte(33), o.writeByte(255), o.writeByte(11), Rt(o, "NETSCAPE2.0"), o.writeByte(3), o.writeByte(1), N(o, t), o.writeByte(0);
+}
+function _t(o, t) {
+  let e = 1 << pt(t.length);
+  for (let r = 0; r < e; r++) {
+    let a = [0, 0, 0];
+    r < t.length && (a = t[r]), o.writeByte(a[0]), o.writeByte(a[1]), o.writeByte(a[2]);
+  }
+}
+function he(o, t, e, r) {
+  if (o.writeByte(44), N(o, 0), N(o, 0), N(o, t), N(o, e), r) {
+    let a = 0, i = 0, n = pt(r.length) - 1;
+    o.writeByte(128 | a | i | n);
+  } else o.writeByte(0);
+}
+function pe(o, t, e, r, a = 8, i, n, c) {
+  ee(e, r, t, a, o, i, n, c);
+}
+function N(o, t) {
+  o.writeByte(255 & t), o.writeByte(t >> 8 & 255);
+}
+function Rt(o, t) {
+  for (var e = 0; e < t.length; e++) o.writeByte(t.charCodeAt(e));
+}
+function pt(o) {
+  return Math.max(Math.ceil(Math.log2(o)), 1);
+}
+Jt();
+class me {
+  _recorder;
+  _textmodifier;
+  _registerPostDrawHook;
+  constructor(t, e) {
+    this._recorder = new Ht(), this._textmodifier = t, this._registerPostDrawHook = e;
+  }
+  async $saveGIF(t = {}) {
+    const e = this._textmodifier.canvas, r = this._applyDefaultOptions(t), a = t.onProgress;
+    try {
+      const i = await this._recorder.$record(e, r, this._registerPostDrawHook, a), n = le(), { repeat: c } = t;
+      i.forEach((s, d) => {
+        const { width: u, height: m, imageData: y, delayMs: p } = s, f = new Uint32Array(y.data.buffer.slice(0)), _ = ae(f, 256, {}), b = se(f, _);
+        n.writeFrame(b, u, m, { palette: _, delay: p, repeat: d === 0 ? c : -1 });
+      }), n.finish();
+      const l = n.bytes(), h = l.buffer.slice(l.byteOffset, l.byteOffset + l.byteLength);
+      new Q().$downloadFile(new Blob([h], { type: "image/gif" }), r.filename), a?.({ state: "completed", totalFrames: r.frameCount });
+    } catch (i) {
+      throw a?.({ state: "error", message: i instanceof Error ? i.message : "GIF export failed" }), i;
+    }
+  }
+  _applyDefaultOptions(t) {
+    const e = Math.abs(Math.round(t.frameCount ?? 300)), r = Math.abs(t.frameRate ?? 60), a = Math.abs(t.scale ?? 1), i = Math.max(-1, Math.round(t.repeat ?? 0));
+    return { filename: t.filename, frameCount: e, frameRate: r, scale: a, repeat: i };
+  }
+}
+function fe(o) {
+  return o && o.__esModule && Object.prototype.hasOwnProperty.call(o, "default") ? o.default : o;
+}
+var xt, Ct = { exports: {} };
+function ge() {
+  return xt || (xt = 1, o = Ct, (function() {
+    function t(l, h) {
+      return (function(s) {
+        if (typeof s != "string" || !s.match(/^data:image\/webp;base64,/i)) throw new Error("Failed to decode WebP Base64 URL");
+        return window.atob(s.substring(23));
+      })(typeof l == "string" && /^data:image\/webp/.test(l) ? l : l.toDataURL("image/webp", h));
+    }
+    function e(l) {
+      return (l.charCodeAt(0) | l.charCodeAt(1) << 8 | l.charCodeAt(2) << 16 | l.charCodeAt(3) << 24) >>> 0;
+    }
+    function r(l) {
+      let h = l.indexOf("VP8", 12);
+      if (h === -1) throw new Error("Bad image format, does this browser support WebP?");
+      let s = !1;
+      for (; h < l.length - 8; ) {
+        let d, u;
+        switch (u = l.substring(h, h + 4), h += 4, d = e(l.substring(h, h + 4)), h += 4, u) {
+          case "VP8 ":
+            return { frame: l.substring(h, h + d), hasAlpha: s };
+          case "ALPH":
+            s = !0;
+        }
+        h += d, 1 & d && h++;
+      }
+      throw new Error("Failed to find VP8 keyframe in WebP image, is this image mistakenly encoded in the Lossless WebP format?");
+    }
+    function a(l) {
+      this.value = l;
+    }
+    function i(l) {
+      this.value = l;
+    }
+    function n(l, h, s) {
+      if (Array.isArray(s)) for (let d = 0; d < s.length; d++) n(l, h, s[d]);
+      else if (typeof s == "string") l.writeString(s);
+      else if (s instanceof Uint8Array) l.writeBytes(s);
+      else {
+        if (!s.id) throw new Error("Bad EBML datatype " + typeof s.data);
+        if (s.offset = l.pos + h, l.writeUnsignedIntBE(s.id), Array.isArray(s.data)) {
+          let d, u, m;
+          s.size === -1 ? l.writeByte(255) : s.size === -2 ? (d = l.pos, l.writeBytes([15, 255, 255, 255, 255])) : (d = l.pos, l.writeBytes([0, 0, 0, 0])), u = l.pos, s.dataOffset = u + h, n(l, h, s.data), s.size !== -1 && s.size !== -2 && (m = l.pos, s.size = m - u, l.seek(d), l.writeEBMLVarIntWidth(s.size, 4), l.seek(m));
+        } else if (typeof s.data == "string") l.writeEBMLVarInt(s.data.length), s.dataOffset = l.pos + h, l.writeString(s.data);
+        else if (typeof s.data == "number") s.size || (s.size = l.measureUnsignedInt(s.data)), l.writeEBMLVarInt(s.size), s.dataOffset = l.pos + h, l.writeUnsignedIntBE(s.data, s.size);
+        else if (s.data instanceof i) l.writeEBMLVarInt(8), s.dataOffset = l.pos + h, l.writeDoubleBE(s.data.value);
+        else if (s.data instanceof a) l.writeEBMLVarInt(4), s.dataOffset = l.pos + h, l.writeFloatBE(s.data.value);
+        else {
+          if (!(s.data instanceof Uint8Array)) throw new Error("Bad EBML datatype " + typeof s.data);
+          l.writeEBMLVarInt(s.data.byteLength), s.dataOffset = l.pos + h, l.writeBytes(s.data);
+        }
+      }
+    }
+    let c = function(l, h) {
+      return function(s) {
+        let d, u, m = !1, y = 0, p = 0, f = null, _ = null, b = null, g = [], C = 0, S = 0, E = { quality: 0.95, transparent: !1, alphaQuality: void 0, fileWriter: null, fd: null, frameDuration: null, frameRate: null }, A = { Cues: { id: new Uint8Array([28, 83, 187, 107]), positionEBML: null }, SegmentInfo: { id: new Uint8Array([21, 73, 169, 102]), positionEBML: null }, Tracks: { id: new Uint8Array([22, 84, 174, 107]), positionEBML: null } }, L = { id: 17545, data: new i(0) }, V = [], I = new h(s.fileWriter || s.fd);
+        function D(w) {
+          return w - d.dataOffset;
+        }
+        function T() {
+          u = (function() {
+            let M = { id: 21420, size: 5, data: 0 }, U = { id: 290298740, data: [] };
+            for (let F in A) {
+              let z = A[F];
+              z.positionEBML = Object.create(M), U.data.push({ id: 19899, data: [{ id: 21419, data: z.id }, z.positionEBML] });
+            }
+            return U;
+          })();
+          let w = { id: 357149030, data: [{ id: 2807729, data: 1e6 }, { id: 19840, data: "webm-writer-js" }, { id: 22337, data: "webm-writer-js" }, L] }, x = [{ id: 176, data: y }, { id: 186, data: p }];
+          s.transparent && x.push({ id: 21440, data: 1 });
+          let k = { id: 374648427, data: [{ id: 174, data: [{ id: 215, data: 1 }, { id: 29637, data: 1 }, { id: 156, data: 0 }, { id: 2274716, data: "und" }, { id: 134, data: "V_VP8" }, { id: 2459272, data: "VP8" }, { id: 131, data: 1 }, { id: 224, data: x }] }] };
+          d = { id: 408125543, size: -2, data: [u, w, k] };
+          let $ = new l(256);
+          n($, I.pos, [{ id: 440786851, data: [{ id: 17030, data: 1 }, { id: 17143, data: 1 }, { id: 17138, data: 4 }, { id: 17139, data: 8 }, { id: 17026, data: "webm" }, { id: 17031, data: 2 }, { id: 17029, data: 2 }] }, d]), I.write($.getAsDataArray()), A.SegmentInfo.positionEBML.data = D(w.offset), A.Tracks.positionEBML.data = D(k.offset), m = !0;
+        }
+        function B(w) {
+          return w.alpha ? (function(x) {
+            let k, $, M = new l(4);
+            if (!(x.trackNumber > 0 && x.trackNumber < 127)) throw new Error("TrackNumber must be > 0 and < 127");
+            return M.writeEBMLVarInt(x.trackNumber), M.writeU16BE(x.timecode), M.writeByte(0), k = { id: 161, data: [M.getAsDataArray(), x.frame] }, $ = { id: 30113, data: [{ id: 166, data: [{ id: 238, data: 1 }, { id: 165, data: x.alpha }] }] }, { id: 160, data: [k, $] };
+          })(w) : (function(x) {
+            let k = new l(4);
+            if (!(x.trackNumber > 0 && x.trackNumber < 127)) throw new Error("TrackNumber must be > 0 and < 127");
+            return k.writeEBMLVarInt(x.trackNumber), k.writeU16BE(x.timecode), k.writeByte(128), { id: 163, data: [k.getAsDataArray(), x.frame] };
+          })(w);
+        }
+        function R() {
+          if (g.length === 0) return;
+          let w = 0;
+          for (let F = 0; F < g.length; F++) w += g[F].frame.length + (g[F].alpha ? g[F].alpha.length : 0);
+          let x = new l(w + 64 * g.length), k = (function(F) {
+            return { id: 524531317, data: [{ id: 231, data: Math.round(F.timecode) }] };
+          })({ timecode: Math.round(C) });
+          for (let F = 0; F < g.length; F++) k.data.push(B(g[F]));
+          var $, M, U;
+          n(x, I.pos, k), I.write(x.getAsDataArray()), $ = 1, M = Math.round(C), U = k.offset, V.push({ id: 187, data: [{ id: 179, data: M }, { id: 183, data: [{ id: 247, data: $ }, { id: 241, data: D(U) }] }] }), g = [], C += S, S = 0;
+        }
+        this.addFrame = function(w, x, k) {
+          m || (y = w.width || 0, p = w.height || 0, T());
+          let $, M = r(t(w, s.quality)), U = null;
+          $ = k || (typeof x == "number" ? x : s.frameDuration), s.transparent && (x instanceof HTMLCanvasElement || typeof x == "string" ? U = x : M.hasAlpha && (U = (function(F) {
+            f !== null && f.width === F.width && f.height === F.height || (f = document.createElement("canvas"), f.width = F.width, f.height = F.height, _ = f.getContext("2d"), b = _.createImageData(f.width, f.height));
+            let z = F.getContext("2d").getImageData(0, 0, F.width, F.height).data, J = b.data, K = 0, Wt = F.width * F.height * 4;
+            for (let st = 3; st < Wt; st += 4) {
+              let nt = z[st];
+              J[K++] = nt, J[K++] = nt, J[K++] = nt, J[K++] = 255;
+            }
+            return _.putImageData(b, 0, 0), f;
+          })(w))), (function(F) {
+            F.trackNumber = 1, F.timecode = Math.round(S), g.push(F), S += F.duration, S >= 5e3 && R();
+          })({ frame: M.frame, duration: $, alpha: U ? r(t(U, s.alphaQuality)).frame : null });
+        }, this.complete = function() {
+          return m || T(), R(), (function() {
+            let w = { id: 475249515, data: V }, x = new l(16 + 32 * V.length);
+            n(x, I.pos, w), I.write(x.getAsDataArray()), A.Cues.positionEBML.data = D(w.offset);
+          })(), (function() {
+            let w = new l(u.size), x = I.pos;
+            n(w, u.dataOffset, u.data), I.seek(u.dataOffset), I.write(w.getAsDataArray()), I.seek(x);
+          })(), (function() {
+            let w = new l(8), x = I.pos;
+            w.writeDoubleBE(C), I.seek(L.dataOffset), I.write(w.getAsDataArray()), I.seek(x);
+          })(), (function() {
+            let w = new l(10), x = I.pos;
+            w.writeUnsignedIntBE(d.id), w.writeEBMLVarIntWidth(I.pos - d.dataOffset, 5), I.seek(d.offset), I.write(w.getAsDataArray()), I.seek(x);
+          })(), I.complete("video/webm");
+        }, this.getWrittenSize = function() {
+          return I.length;
+        }, s = (function(w, x) {
+          let k = {};
+          return [w, x].forEach(function($) {
+            for (let M in $) Object.prototype.hasOwnProperty.call($, M) && (k[M] = $[M]);
+          }), k;
+        })(E, s || {}), (function() {
+          if (!s.frameDuration) {
+            if (!s.frameRate) throw new Error("Missing required frameDuration or frameRate setting");
+            s.frameDuration = 1e3 / s.frameRate;
+          }
+          s.quality = Math.max(Math.min(s.quality, 0.99999), 0), s.alphaQuality === void 0 ? s.alphaQuality = s.quality : s.alphaQuality = Math.max(Math.min(s.alphaQuality, 0.99999), 0);
+        })();
+      };
+    };
+    o.exports = c;
+  })()), Ct.exports;
+  var o;
+}
+var Et, Bt = { exports: {} };
+function ve() {
+  return Et || (Et = 1, o = Bt, (function() {
+    let t = function(e) {
+      this.data = new Uint8Array(e), this.pos = 0;
+    };
+    t.prototype.seek = function(e) {
+      this.pos = e;
+    }, t.prototype.writeBytes = function(e) {
+      for (let r = 0; r < e.length; r++) this.data[this.pos++] = e[r];
+    }, t.prototype.writeByte = function(e) {
+      this.data[this.pos++] = e;
+    }, t.prototype.writeU8 = t.prototype.writeByte, t.prototype.writeU16BE = function(e) {
+      this.data[this.pos++] = e >> 8, this.data[this.pos++] = e;
+    }, t.prototype.writeDoubleBE = function(e) {
+      let r = new Uint8Array(new Float64Array([e]).buffer);
+      for (let a = r.length - 1; a >= 0; a--) this.writeByte(r[a]);
+    }, t.prototype.writeFloatBE = function(e) {
+      let r = new Uint8Array(new Float32Array([e]).buffer);
+      for (let a = r.length - 1; a >= 0; a--) this.writeByte(r[a]);
+    }, t.prototype.writeString = function(e) {
+      for (let r = 0; r < e.length; r++) this.data[this.pos++] = e.charCodeAt(r);
+    }, t.prototype.writeEBMLVarIntWidth = function(e, r) {
+      switch (r) {
+        case 1:
+          this.writeU8(128 | e);
+          break;
+        case 2:
+          this.writeU8(64 | e >> 8), this.writeU8(e);
+          break;
+        case 3:
+          this.writeU8(32 | e >> 16), this.writeU8(e >> 8), this.writeU8(e);
+          break;
+        case 4:
+          this.writeU8(16 | e >> 24), this.writeU8(e >> 16), this.writeU8(e >> 8), this.writeU8(e);
+          break;
+        case 5:
+          this.writeU8(8 | e / 4294967296 & 7), this.writeU8(e >> 24), this.writeU8(e >> 16), this.writeU8(e >> 8), this.writeU8(e);
+          break;
+        default:
+          throw new Error("Bad EBML VINT size " + r);
+      }
+    }, t.prototype.measureEBMLVarInt = function(e) {
+      if (e < 127) return 1;
+      if (e < 16383) return 2;
+      if (e < 2097151) return 3;
+      if (e < 268435455) return 4;
+      if (e < 34359738367) return 5;
+      throw new Error("EBML VINT size not supported " + e);
+    }, t.prototype.writeEBMLVarInt = function(e) {
+      this.writeEBMLVarIntWidth(e, this.measureEBMLVarInt(e));
+    }, t.prototype.writeUnsignedIntBE = function(e, r) {
+      switch (r === void 0 && (r = this.measureUnsignedInt(e)), r) {
+        case 5:
+          this.writeU8(Math.floor(e / 4294967296));
+        case 4:
+          this.writeU8(e >> 24);
+        case 3:
+          this.writeU8(e >> 16);
+        case 2:
+          this.writeU8(e >> 8);
+        case 1:
+          this.writeU8(e);
+          break;
+        default:
+          throw new Error("Bad UINT size " + r);
+      }
+    }, t.prototype.measureUnsignedInt = function(e) {
+      return e < 256 ? 1 : e < 65536 ? 2 : e < 1 << 24 ? 3 : e < 4294967296 ? 4 : 5;
+    }, t.prototype.getAsDataArray = function() {
+      if (this.pos < this.data.byteLength) return this.data.subarray(0, this.pos);
+      if (this.pos == this.data.byteLength) return this.data;
+      throw new Error("ArrayBufferDataStream's pos lies beyond end of buffer");
+    }, o.exports = t;
+  })()), Bt.exports;
+  var o;
+}
+var It, Ft, St, kt = { exports: {} };
+function be() {
+  return It || (It = 1, o = kt, (function() {
+    let t = function(e) {
+      return function(r) {
+        let a = [], i = Promise.resolve(), n = null, c = null;
+        function l(d) {
+          return new Promise(function(u, m) {
+            let y = new FileReader();
+            y.addEventListener("loadend", function() {
+              u(y.result);
+            }), y.readAsArrayBuffer(d);
+          });
+        }
+        function h(d) {
+          return new Promise(function(u, m) {
+            d instanceof Uint8Array ? u(d) : d instanceof ArrayBuffer || ArrayBuffer.isView(d) ? u(new Uint8Array(d)) : d instanceof Blob ? u(l(d).then(function(y) {
+              return new Uint8Array(y);
+            })) : u(l(new Blob([d])).then(function(y) {
+              return new Uint8Array(y);
+            }));
+          });
+        }
+        function s(d) {
+          let u = d.byteLength || d.length || d.size;
+          if (!Number.isInteger(u)) throw new Error("Failed to determine size of element");
+          return u;
+        }
+        r && r.constructor.name === "FileWriter" ? n = r : e && r && (c = r), this.pos = 0, this.length = 0, this.seek = function(d) {
+          if (d < 0) throw new Error("Offset may not be negative");
+          if (isNaN(d)) throw new Error("Offset may not be NaN");
+          if (d > this.length) throw new Error("Seeking beyond the end of file is not allowed");
+          this.pos = d;
+        }, this.write = function(d) {
+          let u = { offset: this.pos, data: d, length: s(d) }, m = u.offset >= this.length;
+          this.pos += u.length, this.length = Math.max(this.length, this.pos), i = i.then(function() {
+            if (c) return new Promise(function(y, p) {
+              h(u.data).then(function(f) {
+                let _ = 0, b = Buffer.from(f.buffer), g = function(C, S, E) {
+                  _ += S, _ >= E.length ? y() : e.write(c, E, _, E.length - _, u.offset + _, g);
+                };
+                e.write(c, b, 0, b.length, u.offset, g);
+              });
+            });
+            if (n) return new Promise(function(y, p) {
+              n.onwriteend = y, n.seek(u.offset), n.write(new Blob([u.data]));
+            });
+            if (!m) for (let y = 0; y < a.length; y++) {
+              let p = a[y];
+              if (!(u.offset + u.length <= p.offset || u.offset >= p.offset + p.length)) {
+                if (u.offset < p.offset || u.offset + u.length > p.offset + p.length) throw new Error("Overwrite crosses blob boundaries");
+                return u.offset == p.offset && u.length == p.length ? void (p.data = u.data) : h(p.data).then(function(f) {
+                  return p.data = f, h(u.data);
+                }).then(function(f) {
+                  u.data = f, p.data.set(u.data, u.offset - p.offset);
+                });
+              }
+            }
+            a.push(u);
+          });
+        }, this.complete = function(d) {
+          return i = c || n ? i.then(function() {
+            return null;
+          }) : i.then(function() {
+            let u = [];
+            for (let m = 0; m < a.length; m++) u.push(a[m].data);
+            return new Blob(u, { type: d });
+          }), i;
+        };
+      };
+    };
+    o.exports = t;
+  })()), kt.exports;
+  var o;
+}
+function ye() {
+  return St ? Ft : (St = 1, Ft = ge()(ve(), be()(null)));
+}
+var we = ye();
+const _e = fe(we);
+class xe {
+  async $record(t, e, r, a) {
+    const i = Math.max(1, Math.round(e.frameRate)), n = Math.max(1, Math.round(e.frameCount)), c = new _e({ quality: e.quality, alphaQuality: e.transparent ? e.quality : void 0, transparent: e.transparent, frameRate: i }), l = this._createSnapshotSurface();
+    return await new Promise((h, s) => {
+      let d, u = "capturing", m = !1, y = 0;
+      const p = () => {
+        d && (d(), d = void 0);
+      }, f = () => {
+        a?.({ state: "recording", frameIndex: y, totalFrames: n });
+      }, _ = (g) => {
+        if (m) return;
+        m = !0, p();
+        const C = g instanceof Error ? g.message : "WEBM export failed";
+        a?.({ state: "error", message: C }), s(g instanceof Error ? g : new Error(String(g)));
+      }, b = () => {
+        u !== "capturing" || m || (u = "encoding", p(), c.complete().then((g) => {
+          ((C) => {
+            m || (m = !0, a?.({ state: "completed", frameIndex: Math.min(n, y), totalFrames: n }), h(C));
+          })(g);
+        }).catch(_));
+      };
+      d = r(() => {
+        (() => {
+          if (u === "capturing") if (y >= n) b();
+          else try {
+            const g = l(t);
+            c.addFrame(g), y += 1, f(), y >= n && b();
+          } catch (g) {
+            _(g);
+          }
+        })();
+      }), f();
+    });
+  }
+  _createSnapshotSurface() {
+    let t = null, e = null;
+    return (r) => {
+      const a = Math.max(1, r.width), i = Math.max(1, r.height), n = ((c, l) => (t || (t = document.createElement("canvas")), t.width !== c || t.height !== l ? (t.width = c, t.height = l, e = t.getContext("2d"), e && (e.imageSmoothingEnabled = !1)) : e || (e = t.getContext("2d"), e && (e.imageSmoothingEnabled = !1)), e ? t : null))(a, i);
+      return n && e ? (e.clearRect(0, 0, a, i), e.drawImage(r, 0, 0, a, i), n) : r;
+    };
+  }
+}
+class Ce {
+  _recorder;
+  _textmodifier;
+  _registerPostDrawHook;
+  constructor(t, e) {
+    this._recorder = new xe(), this._textmodifier = t, this._registerPostDrawHook = e;
+  }
+  async $saveWEBM(t = {}) {
+    const e = this._textmodifier.canvas, r = this._applyDefaultOptions(t);
+    try {
+      const a = await this._recorder.$record(e, r, this._registerPostDrawHook, t.onProgress);
+      new Q().$downloadFile(a, r.filename);
+    } catch (a) {
+      throw t.onProgress?.({ state: "error", message: a instanceof Error ? a.message : "WEBM export failed" }), a;
+    }
+  }
+  _applyDefaultOptions(t) {
+    return { filename: t.filename, frameRate: Math.abs(Math.round(t.frameRate ?? 60)), frameCount: Math.abs(Math.round(t.frameCount ?? 300)), quality: Math.abs(Math.min(Math.max(t.quality ?? 1, 0), 1)), transparent: !!t.transparent, debugLogging: !!t.debugLogging };
+  }
+}
+const v = { root: "textmode-export-overlay", stack: "textmode-export-overlay__stack", stackDense: "textmode-export-overlay__stack--dense", stackCompact: "textmode-export-overlay__stack--compact", section: "textmode-export-overlay__section", header: "textmode-export-overlay__header", headerTitleRow: "textmode-export-overlay__header-title-row", headerLinks: "textmode-export-overlay__header-links", row: "textmode-export-overlay__row", label: "textmode-export-overlay__label", field: "textmode-export-overlay__field", fieldCompact: "textmode-export-overlay__field--compact", fieldDense: "textmode-export-overlay__field--dense", fieldFull: "textmode-export-overlay__field--full", fieldChannel: "textmode-export-overlay__field--channel", input: "textmode-export-overlay__input", checkbox: "textmode-export-overlay__checkbox", muted: "textmode-export-overlay__muted", status: "textmode-export-overlay__status", statusGif: "textmode-export-overlay__status--gif", statusVideo: "textmode-export-overlay__status--video", statusTitle: "textmode-export-overlay__status-title", statusValue: "textmode-export-overlay__status-value", divider: "textmode-export-overlay__divider", title: "textmode-export-overlay__title", button: "textmode-export-overlay__button", buttonPrimary: "textmode-export-overlay__button--primary", buttonSecondary: "textmode-export-overlay__button--secondary", buttonFull: "textmode-export-overlay__button--full", supportLink: "textmode-export-overlay__support-link", supportIcon: "textmode-export-overlay__support-icon", linkIcon: "textmode-export-overlay__link-icon" };
+class O {
+  element;
+  mounted = !1;
+  destroyed = !1;
+  mount(t) {
+    if (this.destroyed) throw new Error("Cannot mount a destroyed component");
+    if (this.mounted) return;
+    const e = this.render();
+    t.appendChild(e), this.element = e, this.onMount(), this.mounted = !0;
+  }
+  unmount() {
+    this.mounted && this.element && (this._onUnmount(), this.element.remove(), this.element = void 0, this.mounted = !1);
+  }
+  destroy() {
+    this.destroyed || (this.unmount(), this._onDestroy(), this.destroyed = !0);
+  }
+  update(t) {
+    this.mounted && this.onUpdate(t);
+  }
+  onMount() {
+  }
+  _onUnmount() {
+  }
+  _onDestroy() {
+  }
+  onUpdate(t) {
+  }
+  get root() {
+    if (!this.element) throw new Error("Component is not mounted yet");
+    return this.element;
+  }
+  isMounted() {
+    return this.mounted;
+  }
+}
+class j extends O {
+  static _iconNamespace = "http://www.w3.org/2000/svg";
+  render() {
+    const t = document.createElement("div");
+    t.classList.add(v.stack, v.stackDense, v.header);
+    const e = document.createElement("div");
+    e.classList.add(v.headerTitleRow);
+    const r = document.createElement("strong");
+    r.textContent = "textmode.export.js", r.classList.add(v.title);
+    const a = document.createElement("div");
+    a.classList.add(v.headerLinks);
+    const i = this._createLink("https://github.com/humanbydefinition/textmode.export.js", "View repository on GitHub", v.linkIcon, [{ d: "M0 0h24v24H0z", fill: "none", stroke: "none" }, { d: "M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" }]), n = this._createLink("https://code.textmode.art/support.html", "Support textmode.export.js", v.supportIcon, [{ d: "M0 0h24v24H0z", fill: "none", stroke: "none" }, { d: "M3 14c.83 .642 2.077 1.017 3.5 1c1.423 .017 2.67 -.358 3.5 -1c.83 -.642 2.077 -1.017 3.5 -1c1.423 -.017 2.67 .358 3.5 1" }, { d: "M8 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" }, { d: "M12 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" }, { d: "M3 10h14v5a6 6 0 0 1 -6 6h-2a6 6 0 0 1 -6 -6v-5z" }, { d: "M16.746 16.726a3 3 0 1 0 .252 -5.555" }]);
+    a.appendChild(i), a.appendChild(n), e.appendChild(r), e.appendChild(a);
+    const c = document.createElement("div");
+    return c.classList.add(v.divider), t.appendChild(e), t.appendChild(c), t;
+  }
+  _createLink(t, e, r, a) {
+    const i = document.createElement("a");
+    return i.href = t, i.target = "_blank", i.rel = "noopener noreferrer", i.classList.add(v.supportLink), i.setAttribute("aria-label", e), i.appendChild(this._createIcon(r, a)), i;
+  }
+  _createIcon(t, e) {
+    const r = document.createElementNS(j._iconNamespace, "svg");
+    r.setAttribute("xmlns", j._iconNamespace), r.setAttribute("width", "18"), r.setAttribute("height", "18"), r.setAttribute("viewBox", "0 0 24 24"), r.setAttribute("fill", "none"), r.setAttribute("stroke", "currentColor"), r.setAttribute("stroke-width", "2"), r.setAttribute("stroke-linecap", "round"), r.setAttribute("stroke-linejoin", "round"), r.classList.add(t);
+    for (const a of e) {
+      const i = document.createElementNS(j._iconNamespace, "path");
+      for (const [n, c] of Object.entries(a)) i.setAttribute(n, c);
+      r.appendChild(i);
+    }
+    return r;
+  }
+}
+class P extends O {
+  props;
+  constructor(t) {
+    super(), this.props = t;
+  }
+  render() {
+    const t = document.createElement("div");
+    t.classList.add(v.field), this.applyVariant(t, this.props.variant);
+    const e = document.createElement("label");
+    if (e.classList.add(v.label), e.textContent = this.props.label, this.props.labelFor && (e.htmlFor = this.props.labelFor), t.appendChild(e), this.props.description) {
+      const r = document.createElement("span");
+      r.classList.add(v.muted), r.textContent = this.props.description, t.appendChild(r);
+    }
+    return t;
+  }
+  attachControl(t) {
+    this.root.appendChild(t);
+  }
+  update(t) {
+    this.props = t, super.update(t);
+  }
+  onUpdate(t) {
+    const e = this.root;
+    for (; e.firstChild; ) e.removeChild(e.firstChild);
+    this.props = t, e.classList.add(v.field), this.applyVariant(e, t.variant);
+    const r = document.createElement("label");
+    if (r.classList.add(v.label), r.textContent = t.label, t.labelFor && (r.htmlFor = t.labelFor), e.appendChild(r), t.description) {
+      const a = document.createElement("span");
+      a.classList.add(v.muted), a.textContent = t.description, e.appendChild(a);
+    }
+  }
+  applyVariant(t, e) {
+    switch (t.classList.remove(v.fieldCompact, v.fieldDense, v.fieldFull, v.fieldChannel), e) {
+      case "compact":
+        t.classList.add(v.fieldCompact);
+        break;
+      case "dense":
+        t.classList.add(v.fieldDense);
+        break;
+      case "full":
+        t.classList.add(v.fieldFull);
+        break;
+      case "channel":
+        t.classList.add(v.fieldChannel);
+    }
+  }
+}
+class mt extends O {
+  props;
+  select;
+  handleChange = () => {
+    this.props.defaultValue = this.select.value;
+  };
+  constructor(t) {
+    super(), this.props = t;
+  }
+  render() {
+    return this.select = document.createElement("select"), this.select.classList.add(v.input), this.props.id && (this.select.id = this.props.id), this.populateOptions(), this.select.addEventListener("change", this.handleChange), this.select;
+  }
+  get selectElement() {
+    return this.select;
+  }
+  get value() {
+    return this.select.value;
+  }
+  set value(t) {
+    this.select && (this.select.value = t), this.props.defaultValue = t;
+  }
+  _onUnmount() {
+    this.select.removeEventListener("change", this.handleChange);
+  }
+  onUpdate(t) {
+    this.props = t, this.populateOptions(), t.defaultValue && (this.select.value = t.defaultValue);
+  }
+  update(t) {
+    this.props = { ...this.props, ...t }, this.select && (t.id && (this.select.id = t.id), t.options && this.populateOptions(), t.defaultValue !== void 0 && (this.select.value = t.defaultValue));
+  }
+  populateOptions() {
+    if (this.select) {
+      this.select.innerHTML = "";
+      for (const t of this.props.options) {
+        const e = document.createElement("option");
+        e.value = t.value, e.textContent = t.label, this.select.appendChild(e);
+      }
+      this.props.defaultValue && (this.select.value = this.props.defaultValue);
+    }
+  }
+}
+class Lt extends O {
+  props;
+  button;
+  constructor(t) {
+    super(), this.props = t;
+  }
+  render() {
+    return this.button = document.createElement("button"), this.button.type = "button", this.button.textContent = this.props.label, this.button.classList.add(v.button), this.props.variant === "secondary" ? this.button.classList.add(v.buttonSecondary) : this.button.classList.add(v.buttonPrimary), this.props.fullWidth && this.button.classList.add(v.buttonFull), this.button.disabled = !!this.props.disabled, this.button;
+  }
+  get buttonElement() {
+    return this.button;
+  }
+  setLabel(t) {
+    this.props.label = t, this.button.textContent = t;
+  }
+  setDisabled(t) {
+    this.props.disabled = t, this.button.disabled = t;
+  }
+  onUpdate(t) {
+    this.props = t, this.button.textContent = t.label, this.button.disabled = !!t.disabled, t.variant === "secondary" ? (this.button.classList.add(v.buttonSecondary), this.button.classList.remove(v.buttonPrimary)) : (this.button.classList.add(v.buttonPrimary), this.button.classList.remove(v.buttonSecondary)), this.button.classList.toggle(v.buttonFull, !!t.fullWidth);
+  }
+}
+class Ee {
+  api;
+  constructor(t) {
+    this.api = t;
+  }
+  async $copy(t, e) {
+    switch (t) {
+      case "txt": {
+        const r = this.api.toString(e);
+        await navigator.clipboard.writeText(r);
+        break;
+      }
+      case "svg": {
+        const r = this.api.toSVG(e);
+        await navigator.clipboard.writeText(r);
+        break;
+      }
+      case "image":
+        await this.api.copyCanvas(e);
+        break;
+      default:
+        throw new Error(`Clipboard not supported for ${t}`);
+    }
+  }
+}
+class Be {
+  api;
+  events;
+  constructor(t, e) {
+    this.api = t, this.events = e;
+  }
+  async $requestExport(t, e, r = {}) {
+    this.events.$emit("export:request", { format: t });
+    try {
+      const a = { onGIFProgress: r.onGIFProgress ? (i) => {
+        r.onGIFProgress?.(i), this.events.$emit("export:progress", { format: t, progress: i });
+      } : t === "gif" ? (i) => this.events.$emit("export:progress", { format: t, progress: i }) : void 0, onVideoProgress: r.onVideoProgress ? (i) => {
+        r.onVideoProgress?.(i), this.events.$emit("export:progress", { format: t, progress: i });
+      } : t === "video" ? (i) => this.events.$emit("export:progress", { format: t, progress: i }) : void 0 };
+      await this._execute(t, e, a), this.events.$emit("export:success", { format: t });
+    } catch (a) {
+      throw this.events.$emit("export:error", { format: t, error: a }), a;
+    }
+  }
+  _execute(t, e, r) {
+    switch (t) {
+      case "txt":
+        return Promise.resolve(this.api.saveStrings(e));
+      case "image":
+        return this.api.saveCanvas(e);
+      case "svg":
+        return Promise.resolve(this.api.saveSVG(e));
+      case "gif": {
+        const a = { ...e, onProgress: r.onGIFProgress };
+        return this.api.saveGIF(a);
+      }
+      case "video": {
+        const a = { ...e, onProgress: r.onVideoProgress };
+        return this.api.saveWEBM(a);
+      }
+    }
+  }
+}
+class Ie {
+  modifier;
+  overlay;
+  animationFrameId = null;
+  handleUpdate;
+  bound = !1;
+  constructor(t, e) {
+    this.modifier = t, this.overlay = e, this.handleUpdate = () => this.scheduleUpdate();
+  }
+  scheduleUpdate() {
+    this.animationFrameId !== null && cancelAnimationFrame(this.animationFrameId), this.animationFrameId = requestAnimationFrame(() => this.update());
+  }
+  bind() {
+    this.bound || (window.addEventListener("resize", this.handleUpdate), window.addEventListener("scroll", this.handleUpdate, !0), this.bound = !0, this.handleUpdate());
+  }
+  update() {
+    this.animationFrameId = null;
+    const t = this.modifier.canvas.getBoundingClientRect();
+    this.overlay.style.top = `${t.top + window.scrollY + 8}px`, this.overlay.style.left = `${t.left + window.scrollX + 8}px`;
+  }
+  dispose() {
+    this.animationFrameId !== null && (cancelAnimationFrame(this.animationFrameId), this.animationFrameId = null), this.bound && (window.removeEventListener("resize", this.handleUpdate), window.removeEventListener("scroll", this.handleUpdate, !0), this.bound = !1);
+  }
+}
+const X = "textmode-export-number-input", Fe = `${X}__field`, Se = `${X}__controls`, ke = `${X}__control`, Ut = `${X}__display`, et = `${Ut}--visible`, Le = (o) => {
+  o.dispatchEvent(new Event("input", { bubbles: !0 })), o.dispatchEvent(new Event("change", { bubbles: !0 }));
+}, Mt = (o) => {
+  const t = document.createElement("button");
+  return t.type = "button", t.className = ke, t.textContent = o > 0 ? "▲" : "▼", t;
+};
+class G extends O {
+  props;
+  input;
+  display;
+  incrementButton;
+  decrementButton;
+  suppressClickAfterPointer = /* @__PURE__ */ new WeakMap();
+  holdTimeoutId;
+  holdIntervalId;
+  activePointerId;
+  disabledObserver;
+  constructor(t) {
+    super(), this.props = t;
+  }
+  render() {
+    const t = document.createElement("div");
+    t.className = X, this.input = document.createElement("input"), this.input.type = "number", this.input.value = this.props.defaultValue, Object.assign(this.input, this.props.attributes), this.input.className = Fe, this.display = document.createElement("div"), this.display.className = Ut;
+    const e = document.createElement("div");
+    return e.className = Se, this.incrementButton = Mt(1), this.decrementButton = Mt(-1), e.appendChild(this.incrementButton), e.appendChild(this.decrementButton), t.appendChild(this.input), t.appendChild(this.display), t.appendChild(e), this.bindStepControls(), this.bindHoldBehavior(), this.bindInputListeners(), this.observeDisabledState(t), this.updateDisplay(), t;
+  }
+  get inputElement() {
+    return this.input;
+  }
+  get value() {
+    return this.input.value;
+  }
+  set value(t) {
+    this.input.value = t, this.updateDisplay();
+  }
+  refresh() {
+    this.updateDisplay();
+  }
+  _onDestroy() {
+    this.clearHoldTimers(), this.disabledObserver?.disconnect();
+  }
+  bindStepControls() {
+    const t = (i) => () => {
+      if (this.input.disabled) return;
+      const n = this.input.value, c = this.input.getAttribute("step");
+      if (c && c !== "any") i > 0 ? this.input.stepUp() : this.input.stepDown();
+      else {
+        const l = i > 0 ? 1 : -1, h = Number.parseFloat(this.input.value || "0"), s = Number.isFinite(h) ? h + l : l;
+        this.input.value = String(s);
+      }
+      this.input.value !== n && Le(this.input), this.updateDisplay(), this.input.focus({ preventScroll: !0 });
+    }, e = t(1), r = t(-1), a = (i, n) => (c) => {
+      if (this.suppressClickAfterPointer.get(i)) return this.suppressClickAfterPointer.set(i, !1), void c.preventDefault();
+      n();
+    };
+    this.incrementButton.addEventListener("click", a(this.incrementButton, e)), this.decrementButton.addEventListener("click", a(this.decrementButton, r));
+  }
+  bindHoldBehavior() {
+    const t = (e, r) => {
+      const a = r > 0 ? () => this.incrementButton.click() : () => this.decrementButton.click();
+      e.addEventListener("pointerdown", (c) => {
+        if (c.button === 0) {
+          c.preventDefault(), this.suppressClickAfterPointer.set(e, !0), this.activePointerId = c.pointerId;
+          try {
+            e.setPointerCapture(c.pointerId);
+          } catch {
+          }
+          a(), this.holdTimeoutId = window.setTimeout(() => {
+            this.holdIntervalId = window.setInterval(a, 80);
+          }, 380);
+        }
+      });
+      const i = () => {
+        if (this.activePointerId !== void 0) {
+          try {
+            e.releasePointerCapture(this.activePointerId);
+          } catch {
+          }
+          this.activePointerId = void 0;
+        }
+      }, n = () => {
+        this.clearHoldTimers(), i();
+      };
+      e.addEventListener("pointerup", n), e.addEventListener("pointerleave", n), e.addEventListener("pointercancel", n);
+    };
+    t(this.incrementButton, 1), t(this.decrementButton, -1);
+  }
+  bindInputListeners() {
+    const t = () => {
+      this.props.defaultValue = this.input.value, this.updateDisplay();
+    };
+    this.input.addEventListener("input", t), this.input.addEventListener("change", t);
+  }
+  observeDisabledState(t) {
+    const e = () => {
+      const r = this.input.disabled;
+      this.incrementButton.disabled = r, this.decrementButton.disabled = r, t.classList.toggle("is-disabled", r), r ? (this.display.classList.remove(et), this.input.style.removeProperty("color"), this.input.style.removeProperty("caretColor")) : this.updateDisplay();
+    };
+    typeof MutationObserver < "u" && (this.disabledObserver = new MutationObserver(e), this.disabledObserver.observe(this.input, { attributes: !0, attributeFilter: ["disabled"] })), e();
+  }
+  updateDisplay() {
+    const t = this.props.formatDisplay;
+    if (!t) return this.display.textContent = "", this.display.classList.remove(et), this.input.style.removeProperty("color"), void this.input.style.removeProperty("caretColor");
+    const e = this.input.value, r = Number.parseFloat(e), a = t(Number.isFinite(r) ? r : Number.NaN, e, this.input);
+    a ? (this.display.textContent = a, this.display.classList.add(et), this.input.style.color = "transparent", this.input.style.caretColor = "#f8fafc") : (this.display.textContent = "", this.display.classList.remove(et), this.input.style.removeProperty("color"), this.input.style.removeProperty("caretColor"));
+  }
+  clearHoldTimers() {
+    this.holdTimeoutId !== void 0 && (window.clearTimeout(this.holdTimeoutId), this.holdTimeoutId = void 0), this.holdIntervalId !== void 0 && (window.clearInterval(this.holdIntervalId), this.holdIntervalId = void 0);
+  }
+}
+class H extends O {
+  variant;
+  additionalClasses;
+  constructor(t = "stack", e = []) {
+    super(), this.variant = t, this.additionalClasses = e;
+  }
+  render() {
+    const t = document.createElement("div"), e = [this.variant === "stack" ? v.stack : void 0, this.variant === "stackDense" ? v.stackDense : void 0, this.variant === "stackCompact" ? v.stackCompact : void 0, this.variant === "row" ? v.row : void 0, this.variant === "section" ? v.section : void 0, ...this.additionalClasses].filter(Boolean);
+    return t.classList.add(...e), t;
+  }
+}
+const $t = { neutral: "textmode-export-overlay__status-value--neutral", active: "textmode-export-overlay__status-value--active", alert: "textmode-export-overlay__status-value--alert" };
+class Nt extends O {
+  props;
+  container;
+  messageElement;
+  constructor(t) {
+    super(), this.props = t;
+  }
+  render() {
+    this.container = document.createElement("div"), this.container.classList.add(v.status), this.props.context === "gif" ? this.container.classList.add(v.statusGif) : this.props.context === "video" && this.container.classList.add(v.statusVideo);
+    const t = document.createElement("span");
+    return t.classList.add(v.statusTitle), t.textContent = this.props.title, this.messageElement = document.createElement("span"), this.messageElement.classList.add(v.statusValue), this.messageElement.textContent = this.props.message, this.applyVariant(this.props.variant ?? "neutral"), this.container.appendChild(t), this.container.appendChild(this.messageElement), this.container;
+  }
+  setMessage(t, e = "neutral") {
+    this.messageElement.textContent = t, this.applyVariant(e);
+  }
+  onUpdate(t) {
+    this.props = t, this.setMessage(t.message, t.variant ?? "neutral");
+  }
+  applyVariant(t) {
+    this.messageElement.classList.remove(...Object.values($t)), this.messageElement.classList.add($t[t]);
+  }
+}
+class Y extends O {
+  _config;
+  _managedComponents = /* @__PURE__ */ new Set();
+  constructor(t) {
+    super(), this._config = t;
+  }
+  _manageComponent(t) {
+    return this._managedComponents.add(t), t;
+  }
+  _onUnmount() {
+    for (const t of this._managedComponents) t.unmount();
+  }
+  _onDestroy() {
+    for (const t of this._managedComponents) t.destroy();
+    this._managedComponents.clear();
+  }
+}
+const W = { frameCount: 300, frameRate: 60, scale: 1, repeat: 0 };
+class ut extends Y {
+  frameCountInput = this._manageComponent(new G({ defaultValue: String(W.frameCount), attributes: { min: "1", max: "600", step: "1" } }));
+  frameRateInput = this._manageComponent(new G({ defaultValue: String(W.frameRate), attributes: { min: "1", max: "60", step: "1" } }));
+  scaleInput = this._manageComponent(new G({ defaultValue: String(W.scale), attributes: { min: "0.1", max: "8", step: "0.1" } }));
+  repeatInput = this._manageComponent(new G({ defaultValue: "0", attributes: { min: "0", max: "50", step: "1" }, formatDisplay: (t, e) => Number.isFinite(t) ? t === 0 ? "∞" : null : e.trim() === "" ? null : e }));
+  status = this._manageComponent(new Nt({ title: "status", message: "ready to record", variant: "neutral", context: "gif" }));
+  recordingState = "idle";
+  constructor(t) {
+    super(t);
+  }
+  render() {
+    const t = document.createElement("div");
+    t.classList.add(v.stack);
+    const e = new H("row");
+    e.mount(t);
+    const r = new P({ label: "number of frames", labelFor: "textmode-export-gif-frame-count", variant: "dense" });
+    r.mount(e.root), this.frameCountInput.mount(r.root), this.frameCountInput.inputElement.id = "textmode-export-gif-frame-count";
+    const a = new P({ label: "frame rate (fps)", labelFor: "textmode-export-gif-frame-rate", variant: "dense" });
+    a.mount(e.root), this.frameRateInput.mount(a.root), this.frameRateInput.inputElement.id = "textmode-export-gif-frame-rate";
+    const i = new H("row");
+    i.mount(t);
+    const n = new P({ label: "scale", labelFor: "textmode-export-gif-scale", variant: "dense" });
+    n.mount(i.root), this.scaleInput.mount(n.root), this.scaleInput.inputElement.id = "textmode-export-gif-scale";
+    const c = new P({ label: "loop count", labelFor: "textmode-export-gif-repeat", variant: "dense" });
+    return c.mount(i.root), this.repeatInput.mount(c.root), this.repeatInput.inputElement.id = "textmode-export-gif-repeat", this.status.mount(t), t;
+  }
+  getOptions() {
+    const t = this._config.defaultOptions ?? {};
+    return { frameCount: this.safeParseInt(this.frameCountInput.value, t.frameCount ?? 300), frameRate: this.safeParseInt(this.frameRateInput.value, t.frameRate ?? 60), scale: this.safeParseFloat(this.scaleInput.value, t.scale ?? 1), repeat: this.safeParseInt(this.repeatInput.value, t.repeat ?? 0) };
+  }
+  reset() {
+    this.recordingState = "idle", this.applyDefaults(), this.setRecordingState("idle");
+  }
+  validate() {
+    const t = Number.parseInt(this.frameCountInput.value, 10), e = Number.parseInt(this.frameRateInput.value, 10), r = Number.parseFloat(this.scaleInput.value);
+    return Number.isFinite(t) && t > 0 && Number.isFinite(e) && e > 0 && Number.isFinite(r) && r > 0;
+  }
+  isRecording() {
+    return this.recordingState === "recording";
+  }
+  setRecordingState(t, e) {
+    this.recordingState = t;
+    const r = t === "recording";
+    switch (this.frameCountInput.inputElement.disabled = r, this.frameRateInput.inputElement.disabled = r, this.scaleInput.inputElement.disabled = r, this.repeatInput.inputElement.disabled = r, t) {
+      case "recording":
+        if (e?.totalFrames) {
+          const a = e.frameIndex ?? 0;
+          this.status.setMessage(`recording ${a}/${e.totalFrames}`, "active");
+        } else this.status.setMessage("recording…", "active");
+        break;
+      case "completed":
+        this.status.setMessage("GIF saved successfully", "active");
+        break;
+      case "error":
+        this.status.setMessage(e?.message ?? "failed to export GIF", "alert");
+        break;
+      default:
+        this.status.setMessage("ready to record", "neutral");
+    }
+  }
+  handleProgress(t) {
+    t.state === "recording" && t.totalFrames ? this.status.setMessage(`recording ${t.frameIndex ?? 0}/${t.totalFrames}`, "active") : t.state === "completed" ? this.status.setMessage("GIF saved successfully", "active") : t.state === "error" && this.status.setMessage(t.message ?? "failed to export GIF", "alert");
+  }
+  applyDefaults() {
+    const t = this._config.defaultOptions ?? {}, e = t.frameCount ?? W.frameCount, r = t.frameRate ?? W.frameRate, a = t.scale ?? W.scale, i = t.repeat ?? W.repeat;
+    this.frameCountInput.value = String(e), this.frameRateInput.value = String(r), this.scaleInput.value = String(a), this.repeatInput.value = String(i), this.frameCountInput.refresh(), this.frameRateInput.refresh(), this.scaleInput.refresh(), this.repeatInput.refresh();
+  }
+  safeParseInt(t, e) {
+    const r = Number.parseInt(t, 10);
+    return Number.isFinite(r) ? r : e;
+  }
+  safeParseFloat(t, e) {
+    const r = Number.parseFloat(t);
+    return Number.isFinite(r) ? r : e;
+  }
+}
+const it = "textmode-export-range-input", Me = `${it}__field`, $e = `${it}__tooltip`, ct = `${it}__tooltip--visible`, rt = (o, t) => {
+  if (typeof o != "string" || o.length === 0) return t;
+  const e = Number.parseFloat(o);
+  return Number.isFinite(e) ? e : t;
+}, Ae = (o, t, e) => Math.min(e, Math.max(t, o));
+class Pe extends O {
+  props;
+  input;
+  tooltip;
+  hoverActive = !1;
+  focusActive = !1;
+  pointerActive = !1;
+  suppressFocusFromPointer = !1;
+  activePointerId;
+  disabledObserver;
+  resizeObserver;
+  constructor(t) {
+    super(), this.props = t;
+  }
+  render() {
+    const t = document.createElement("div");
+    return t.className = it, this.input = document.createElement("input"), this.input.type = "range", this.input.value = this.props.defaultValue, Object.assign(this.input, this.props.attributes), this.input.className = Me, this.tooltip = document.createElement("div"), this.tooltip.className = $e, t.appendChild(this.input), t.appendChild(this.tooltip), this.bindEvents(t), this.updateTooltip(), this.syncDisabledState(t), t;
+  }
+  get inputElement() {
+    return this.input;
+  }
+  get value() {
+    return this.input.value;
+  }
+  set value(t) {
+    this.input.value = t, this.updateTooltip();
+  }
+  _onDestroy() {
+    this.disabledObserver?.disconnect(), this.resizeObserver?.disconnect();
+  }
+  bindEvents(t) {
+    this.input.addEventListener("pointerenter", () => {
+      this.hoverActive = !0, this.refreshTooltipVisibility();
+    }), this.input.addEventListener("pointerleave", () => {
+      this.hoverActive = !1, this.refreshTooltipVisibility();
+    }), this.input.addEventListener("focus", () => {
+      let r = !1;
+      try {
+        r = this.input.matches(":focus-visible");
+      } catch {
+        r = !this.suppressFocusFromPointer;
+      }
+      this.suppressFocusFromPointer || !r || this.input.disabled ? this.focusActive = !1 : this.focusActive = !0, this.suppressFocusFromPointer = !1, this.refreshTooltipVisibility();
+    }), this.input.addEventListener("blur", () => {
+      this.focusActive = !1, this.refreshTooltipVisibility();
+    }), this.input.addEventListener("pointerdown", (r) => {
+      this.pointerActive = !0, this.suppressFocusFromPointer = !0, this.hoverActive = !0, this.refreshTooltipVisibility();
+      try {
+        this.input.setPointerCapture(r.pointerId), this.activePointerId = r.pointerId;
+      } catch {
+        this.activePointerId = void 0;
+      }
+    });
+    const e = () => {
+      this.pointerActive = !1, this.suppressFocusFromPointer = !1, this.hoverActive = this.input.matches(":hover"), this.releasePointerCapture(), this.refreshTooltipVisibility();
+    };
+    this.input.addEventListener("pointerup", e), this.input.addEventListener("pointercancel", e), this.input.addEventListener("lostpointercapture", e), this.input.addEventListener("input", () => {
+      (this.hoverActive || this.focusActive || this.pointerActive) && this.updateTooltip(), this.props.defaultValue = this.input.value;
+    }), this.input.addEventListener("change", () => {
+      this.pointerActive || this.updateTooltip(), this.props.defaultValue = this.input.value;
+    }), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => {
+      this.tooltip.classList.contains(ct) && this.updateTooltipPosition();
+    }), this.resizeObserver.observe(t));
+  }
+  refreshTooltipVisibility() {
+    const t = (this.hoverActive || this.focusActive || this.pointerActive) && !this.input.disabled;
+    t && this.updateTooltip(), this.tooltip.classList.toggle(ct, t);
+  }
+  syncDisabledState(t) {
+    const e = () => {
+      const r = this.input.disabled;
+      t.classList.toggle("is-disabled", r), r && (this.hoverActive = !1, this.focusActive = !1, this.pointerActive = !1, this.suppressFocusFromPointer = !1, this.releasePointerCapture(), this.tooltip.classList.remove(ct));
+    };
+    typeof MutationObserver < "u" && (this.disabledObserver = new MutationObserver(e), this.disabledObserver.observe(this.input, { attributes: !0, attributeFilter: ["disabled"] })), e();
+  }
+  releasePointerCapture() {
+    if (this.activePointerId !== void 0) {
+      try {
+        this.input.releasePointerCapture(this.activePointerId);
+      } catch {
+      }
+      this.activePointerId = void 0;
+    }
+  }
+  updateTooltip() {
+    this.updateTooltipContent(), this.updateTooltipPosition();
+  }
+  updateTooltipContent() {
+    const t = this.props.formatValue ?? ((r) => `${r}`), e = this.getCurrentValue();
+    this.tooltip.textContent = t(e, this.input);
+  }
+  updateTooltipPosition() {
+    const t = this.getMin(), e = this.getMax(), r = Ae(this.getCurrentValue(), t, e), a = e - t, i = a === 0 ? 0 : (r - t) / a;
+    this.tooltip.style.left = 100 * i + "%";
+  }
+  getMin() {
+    return rt(this.input.min, 0);
+  }
+  getMax() {
+    return rt(this.input.max, 100);
+  }
+  getCurrentValue() {
+    return rt(this.input.value, rt(this.props.defaultValue, 0));
+  }
+}
+function De(o) {
+  if (!Number.isFinite(o)) return "default quality";
+  const t = Math.max(0, Math.min(1, o));
+  return t >= 0.995 ? "near-lossless" : t >= 0.98 ? "maximum detail" : t >= 0.88 ? "ultra quality" : t >= 0.7 ? "high quality" : t >= 0.5 ? "balanced" : t >= 0.25 ? "compact" : t >= 0.1 ? "lightweight" : "draft";
+}
+function Ve(o) {
+  return `${De(o)} (quality ≈ ${o.toFixed(3)})`;
+}
+class ht extends Y {
+  frameRateInput = this._manageComponent(new G({ defaultValue: String(60), attributes: { min: String(1), max: String(60), step: "1" }, formatDisplay: (t) => Number.isFinite(t) ? `${t} fps` : null }));
+  frameCountInput = this._manageComponent(new G({ defaultValue: String(480), attributes: { min: String(1), max: String(3600), step: "1" } }));
+  qualityInput = this._manageComponent(new Pe({ defaultValue: String(0.7), attributes: { min: String(0), max: String(1), step: "0.001" }, formatValue: (t) => Ve(t) }));
+  status = this._manageComponent(new Nt({ title: "status", message: "ready to record", variant: "neutral", context: "video" }));
+  recordingState = "idle";
+  constructor(t) {
+    super(t);
+  }
+  render() {
+    const t = document.createElement("div");
+    t.classList.add(v.stack);
+    const e = new H("row");
+    e.mount(t);
+    const r = new P({ label: "number of frames", labelFor: "textmode-export-video-frame-count", variant: "compact" });
+    r.mount(e.root), this.frameCountInput.mount(r.root), this.frameCountInput.inputElement.id = "textmode-export-video-frame-count";
+    const a = new P({ label: "frame rate (fps)", labelFor: "textmode-export-video-frame-rate", variant: "compact" });
+    a.mount(e.root), this.frameRateInput.mount(a.root), this.frameRateInput.inputElement.id = "textmode-export-video-frame-rate";
+    const i = new P({ label: "quality", labelFor: "textmode-export-video-quality", variant: "full" });
+    return i.mount(t), this.qualityInput.mount(i.root), this.qualityInput.inputElement.id = "textmode-export-video-quality", this.status.mount(t), t;
+  }
+  getOptions() {
+    const t = this._config.defaultOptions ?? {}, e = Number.parseInt(this.frameCountInput.value, 10), r = Number.parseFloat(this.frameRateInput.value), a = Number.parseFloat(this.qualityInput.value);
+    return { frameCount: Number.isFinite(e) ? e : t.frameCount ?? 480, frameRate: Number.isFinite(r) ? r : t.frameRate ?? 60, quality: Number.isFinite(a) ? a : t.quality ?? 0.7 };
+  }
+  reset() {
+    this.recordingState = "idle", this.applyDefaults(), this.status.setMessage("ready to record", "neutral");
+  }
+  validate() {
+    const t = Number.parseInt(this.frameCountInput.value, 10), e = Number.parseFloat(this.frameRateInput.value);
+    return Number.isFinite(t) && t >= 1 && Number.isFinite(e) && e >= 1;
+  }
+  isRecording() {
+    return this.recordingState === "recording";
+  }
+  setRecordingState(t, e) {
+    this.recordingState = t;
+    const r = t === "recording";
+    this.frameCountInput.inputElement.disabled = r, this.frameRateInput.inputElement.disabled = r, this.qualityInput.inputElement.disabled = r, this.syncStatus(t, e);
+  }
+  handleProgress(t) {
+    this.syncStatus(t.state, t);
+  }
+  syncStatus(t, e) {
+    switch (t) {
+      case "recording": {
+        const r = e?.frameIndex ?? 0, a = e?.totalFrames ?? this.resolvePlannedFrameCount();
+        if (a) {
+          const i = Math.min(Math.max(0, Math.round(r)), a);
+          this.status.setMessage(`recording ${i}/${a} frames`, "active");
+        } else this.status.setMessage(`recording ${Math.max(0, Math.round(r))} frames`, "active");
+        break;
+      }
+      case "completed":
+        this.status.setMessage("saved to disk", "active");
+        break;
+      case "error":
+        this.status.setMessage(e?.message ? `error: ${e.message}` : "recording failed", "alert");
+        break;
+      default:
+        this.status.setMessage("ready to record", "neutral");
+    }
+  }
+  resolvePlannedFrameCount() {
+    const t = Number.parseInt(this.frameCountInput.value, 10);
+    return Number.isFinite(t) && t > 0 ? Math.round(t) : void 0;
+  }
+  applyDefaults() {
+    const t = this._config.defaultOptions ?? {}, e = t.frameCount ?? 480, r = t.frameRate ?? 60, a = t.quality ?? 0.7;
+    this.frameCountInput.value = String(e), this.frameRateInput.value = String(r), this.qualityInput.value = String(a), this.frameCountInput.refresh(), this.frameRateInput.refresh();
+  }
+}
+class Oe {
+  _textmodifier;
+  _state;
+  _events;
+  _exportService;
+  _clipboardService;
+  _definitions;
+  _formats = /* @__PURE__ */ new Map();
+  _eventUnsubscribers = [];
+  _overlayElement;
+  _optionsContainer;
+  _copyButtonContainer;
+  _positionService;
+  _header = new j();
+  _formatField = new P({ label: "export format", labelFor: "textmode-export-format", variant: "full" });
+  _formatSelect = new mt({ id: "textmode-export-format", options: [] });
+  _exportButton = new Lt({ label: "download file", fullWidth: !0, variant: "primary" });
+  _copyButton = new Lt({ label: "copy to clipboard", fullWidth: !0, variant: "primary" });
+  _currentFormat;
+  _currentBlade;
+  _handleFormatSelectChange = () => {
+    this._handleFormatChange(this._formatSelect.value);
+  };
+  _handleExportClickSafe = () => {
+    this._handleExportClick().catch((t) => {
+      console.error("[textmode-export] Export failed", t);
+    });
+  };
+  _handleCopyClickSafe = () => {
+    this._handleCopyClick().catch((t) => {
+      console.error("[textmode-export] Copy failed", t);
+    });
+  };
+  constructor(t, e, r, a, i) {
+    this._textmodifier = t, this._state = r, this._events = a, this._exportService = new Be(e, a), this._clipboardService = new Ee(e), this._definitions = i, this._currentFormat = r.snapshot.format, this._initializeFormatMap(), this._registerEventHandlers();
+  }
+  $mount() {
+    this._createOverlay(), this._renderStaticContent(), this._positionService = new Ie(this._textmodifier, this._overlayElement), this._positionService.bind(), this._switchFormat(this._currentFormat);
+  }
+  $dispose() {
+    this._formatSelect.isMounted() && this._formatSelect.selectElement.removeEventListener("change", this._handleFormatSelectChange), this._exportButton.isMounted() && this._exportButton.buttonElement.removeEventListener("click", this._handleExportClickSafe), this._copyButton.isMounted() && this._copyButton.buttonElement.removeEventListener("click", this._handleCopyClickSafe);
+    for (const t of this._eventUnsubscribers) t();
+    this._eventUnsubscribers.length = 0, this._events.$clear();
+    for (const t of this._formats.values()) t.blade.destroy();
+    this._formats.clear(), this._currentBlade = void 0, this._overlayElement?.isConnected && this._overlayElement.remove(), this._positionService?.dispose();
+  }
+  _initializeFormatMap() {
+    for (const t of this._definitions) {
+      const e = t.createBlade();
+      this._formats.set(t.format, { definition: t, blade: e, initialized: !1 });
+    }
+  }
+  _createOverlay() {
+    this._overlayElement = document.createElement("div"), this._overlayElement.dataset.plugin = "textmode-export-overlay", this._overlayElement.classList.add(v.root, v.stack), document.body.appendChild(this._overlayElement);
+  }
+  _renderStaticContent() {
+    this._header.mount(this._overlayElement);
+    const t = document.createElement("div");
+    t.classList.add(v.section), this._overlayElement.appendChild(t), this._formatField.mount(t), this._prepareFormatOptions(), this._formatSelect.mount(this._formatField.root), this._formatSelect.selectElement.addEventListener("change", this._handleFormatSelectChange), this._optionsContainer = document.createElement("div"), this._optionsContainer.classList.add(v.stack, v.stackCompact), this._overlayElement.appendChild(this._optionsContainer), this._exportButton.mount(this._overlayElement), this._exportButton.buttonElement.addEventListener("click", this._handleExportClickSafe), this._copyButtonContainer = document.createElement("div"), this._copyButtonContainer.classList.add(v.stack, v.stackDense), this._overlayElement.appendChild(this._copyButtonContainer), this._copyButton.mount(this._copyButtonContainer), this._copyButton.buttonElement.dataset.defaultLabel = "copy to clipboard", this._copyButton.buttonElement.addEventListener("click", this._handleCopyClickSafe);
+  }
+  _prepareFormatOptions() {
+    const t = this._definitions.map((e) => ({ value: e.format, label: e.label }));
+    this._formatSelect.update({ options: t, defaultValue: this._currentFormat });
+  }
+  _registerEventHandlers() {
+    this._eventUnsubscribers.push(this._events.$on("export:request", ({ format: t }) => {
+      t === this._currentFormat && (this._state.$set({ isBusy: !0, error: void 0 }), this._updateExportButton());
+    }), this._events.$on("export:success", ({ format: t }) => {
+      if (t === this._currentFormat) {
+        const e = { isBusy: !1 };
+        t === "gif" && (e.gifProgress = void 0), t === "video" && (e.videoProgress = void 0), this._state.$set(e), this._updateExportButton();
+      }
+    }), this._events.$on("export:error", ({ format: t, error: e }) => {
+      t === this._currentFormat && (this._state.$set({ isBusy: !1, error: e }), this._updateExportButton());
+    }), this._events.$on("export:progress", ({ format: t, progress: e }) => {
+      if (e) {
+        if (t === "gif" && this._currentBlade?.blade instanceof ut) {
+          const r = e;
+          this._state.$set({ gifProgress: r }), this._currentBlade.blade.handleProgress(r);
+        } else if (t === "video" && this._currentBlade?.blade instanceof ht) {
+          const r = e;
+          this._state.$set({ videoProgress: r }), this._currentBlade.blade.handleProgress(r);
+        }
+        this._updateExportButton();
+      }
+    }));
+  }
+  _handleFormatChange(t) {
+    this._currentFormat = t, this._state.$set({ format: t }), this._switchFormat(t), this._events.$emit("format:change", { format: t });
+  }
+  _switchFormat(t) {
+    const e = this._formats.get(t);
+    if (!e) throw new Error(`Unknown export format: ${t}`);
+    this._currentBlade && this._currentBlade.blade.unmount(), this._optionsContainer.innerHTML = "", e.blade.mount(this._optionsContainer), e.initialized || (e.blade.reset(), e.initialized = !0), this._currentBlade = e, this._formatSelect.value = t, this._updateCopyButtonState(), this._updateExportButton(), this._positionService?.scheduleUpdate();
+  }
+  _updateCopyButtonState() {
+    const t = this._currentBlade?.definition.supportsClipboard ?? !1;
+    this._copyButtonContainer.style.display = t ? "flex" : "none", this._copyButton.setDisabled(!t);
+  }
+  async _handleExportClick() {
+    if (!this._currentBlade) return;
+    const t = this._currentBlade.definition.format, e = this._currentBlade.blade.getOptions();
+    if (this._currentBlade.blade.validate()) {
+      if (t === "gif") {
+        const r = this._currentBlade.blade;
+        if (r.isRecording()) return;
+        r.setRecordingState("recording");
+        try {
+          await this._exportService.$requestExport("gif", e, { onGIFProgress: (a) => {
+            r.setRecordingState(a.state, a);
+          } });
+        } catch (a) {
+          throw r.setRecordingState("error"), a;
+        }
+        return void window.setTimeout(() => {
+          r.setRecordingState("idle"), this._updateExportButton();
+        }, 1600);
+      }
+      if (t === "video") {
+        const r = this._currentBlade.blade;
+        if (r.isRecording()) return;
+        r.setRecordingState("recording");
+        try {
+          await this._exportService.$requestExport("video", e, { onVideoProgress: (a) => {
+            r.setRecordingState(a.state, a);
+          } });
+        } catch (a) {
+          throw r.setRecordingState("error"), a;
+        }
+        return void window.setTimeout(() => {
+          r.setRecordingState("idle"), this._updateExportButton();
+        }, 1600);
+      }
+      this._exportButton.setDisabled(!0), this._exportButton.setLabel("exporting…");
+      try {
+        await this._exportService.$requestExport(t, e);
+      } finally {
+        this._exportButton.setDisabled(!1), this._exportButton.setLabel("download file");
+      }
+    } else console.warn("[textmode-export] Export options failed validation");
+  }
+  async _handleCopyClick() {
+    if (!this._currentBlade || !this._currentBlade.definition.supportsClipboard) return;
+    const t = this._currentBlade.definition.format, e = this._currentBlade.blade.getOptions(), r = this._copyButton.buttonElement.dataset.defaultLabel ?? "copy to clipboard";
+    this._copyButton.setDisabled(!0), this._copyButton.setLabel("copying…");
+    try {
+      await this._clipboardService.$copy(t, e), this._copyButton.setLabel("copied!");
+    } catch (a) {
+      console.error("[textmode-export] Failed to copy to clipboard", a), this._copyButton.setLabel("copy failed!");
+    } finally {
+      window.setTimeout(() => {
+        this._copyButton.setLabel(r), this._copyButton.setDisabled(!1);
+      }, 1200);
+    }
+  }
+  _updateExportButton() {
+    if (!this._currentBlade) return;
+    const t = this._currentBlade.definition.format;
+    if (t === "gif" && this._currentBlade.blade instanceof ut) {
+      const r = this._currentBlade.blade, a = this._state.snapshot.gifProgress;
+      if (r.isRecording()) if (this._exportButton.setDisabled(!0), a?.totalFrames) {
+        const i = a.frameIndex ?? 0;
+        this._exportButton.setLabel(`recording ${i}/${a.totalFrames}`);
+      } else this._exportButton.setLabel("recording…");
+      else this._exportButton.setDisabled(!1), this._exportButton.setLabel("start recording");
+      return;
+    }
+    if (t === "video" && this._currentBlade.blade instanceof ht) {
+      const r = this._currentBlade.blade, a = this._state.snapshot.videoProgress;
+      if (r.isRecording()) if (this._exportButton.setDisabled(!0), a?.totalFrames) {
+        const i = a.frameIndex ?? 0;
+        this._exportButton.setLabel(`recording ${i}/${a.totalFrames} frames`);
+      } else this._exportButton.setLabel("recording…");
+      else this._exportButton.setDisabled(!1), this._exportButton.setLabel("start recording");
+      return;
+    }
+    const e = this._state.snapshot.isBusy;
+    this._exportButton.setDisabled(e), this._exportButton.setLabel(e ? "exporting…" : "download file");
+  }
+}
+class Te {
+  _listeners = /* @__PURE__ */ new Map();
+  $on(t, e) {
+    this._listeners.has(t) || this._listeners.set(t, /* @__PURE__ */ new Set());
+    const r = this._listeners.get(t);
+    return r.add(e), () => {
+      r.delete(e), r.size === 0 && this._listeners.delete(t);
+    };
+  }
+  $emit(t, e) {
+    const r = this._listeners.get(t);
+    if (r) for (const a of [...r]) try {
+      a(e);
+    } catch (i) {
+      console.error("[textmode-export] Event handler failed", i);
+    }
+  }
+  $clear() {
+    this._listeners.clear();
+  }
+}
+class Re {
+  _state;
+  _listeners = /* @__PURE__ */ new Set();
+  constructor(t) {
+    this._state = t;
+  }
+  get snapshot() {
+    return Object.freeze({ ...this._state });
+  }
+  $set(t) {
+    this._state = Object.assign({}, this._state, t);
+    const e = this.snapshot;
+    for (const r of [...this._listeners]) try {
+      r(e);
+    } catch (a) {
+      console.error("[textmode-export] State listener failed", a);
+    }
+  }
+  $subscribe(t) {
+    return this._listeners.add(t), t(this.snapshot), () => {
+      this._listeners.delete(t);
+    };
+  }
+  $reset(t) {
+    this._state = t;
+    const e = this.snapshot;
+    for (const r of [...this._listeners]) r(e);
+  }
+}
+const Ue = (o) => ({ format: o, isBusy: !1 });
+class Gt extends O {
+  props;
+  checkbox;
+  labelElement;
+  handleChange = () => {
+    this.props.defaultChecked = this.checkbox.checked;
+  };
+  constructor(t) {
+    super(), this.props = t;
+  }
+  render() {
+    this.labelElement = document.createElement("label"), this.labelElement.classList.add(v.checkbox), this.checkbox = document.createElement("input"), this.checkbox.type = "checkbox", this.props.id && (this.checkbox.id = this.props.id), this.checkbox.checked = !!this.props.defaultChecked, this.checkbox.addEventListener("change", this.handleChange);
+    const t = document.createElement("span");
+    return t.textContent = this.props.label, this.labelElement.htmlFor = this.props.id ?? "", this.labelElement.appendChild(this.checkbox), this.labelElement.appendChild(t), this.labelElement;
+  }
+  get inputElement() {
+    return this.checkbox;
+  }
+  get checked() {
+    return this.checkbox.checked;
+  }
+  set checked(t) {
+    this.checkbox.checked = t;
+  }
+  _onUnmount() {
+    this.checkbox.removeEventListener("change", this.handleChange);
+  }
+  onUpdate(t) {
+    this.props = t, t.id && (this.checkbox.id = t.id, this.labelElement.htmlFor = t.id), this.checkbox.checked = !!t.defaultChecked, this.labelElement.lastElementChild && (this.labelElement.lastElementChild.textContent = t.label);
+  }
+}
+class Ne extends O {
+  props;
+  input;
+  handleInput = () => {
+    this.props.defaultValue = this.input.value;
+  };
+  constructor(t) {
+    super(), this.props = t;
+  }
+  render() {
+    return this.input = document.createElement("input"), this.input.type = "text", this.input.classList.add(v.input), this.props.id && (this.input.id = this.props.id), this.props.maxLength !== void 0 && (this.input.maxLength = this.props.maxLength), this.props.defaultValue !== void 0 && (this.input.value = this.props.defaultValue), this.input.addEventListener("input", this.handleInput), this.input;
+  }
+  get inputElement() {
+    return this.input;
+  }
+  get value() {
+    return this.input.value;
+  }
+  set value(t) {
+    this.input.value = t;
+  }
+  _onUnmount() {
+    this.input.removeEventListener("input", this.handleInput);
+  }
+  onUpdate(t) {
+    this.props = t, t.id && (this.input.id = t.id), t.maxLength !== void 0 && (this.input.maxLength = t.maxLength), t.defaultValue !== void 0 && (this.input.value = t.defaultValue);
+  }
+}
+class Ge extends Y {
+  trailingSpaces = this._manageComponent(new Gt({ label: "preserve trailing spaces", defaultChecked: !1 }));
+  emptyCharacter = this._manageComponent(new Ne({ id: "textmode-export-empty-character", defaultValue: " ", maxLength: 1 }));
+  constructor(t) {
+    super(t);
+  }
+  render() {
+    const t = document.createElement("div");
+    t.classList.add(v.stack), this.trailingSpaces.mount(t);
+    const e = new P({ label: "empty character", labelFor: "textmode-export-empty-character", variant: "full" });
+    return e.mount(t), this.emptyCharacter.mount(e.root), t;
+  }
+  getOptions() {
+    const t = this._config.defaultOptions ?? {}, e = this.emptyCharacter.value || t.emptyCharacter || " ";
+    return { preserveTrailingSpaces: this.trailingSpaces.checked, emptyCharacter: e };
+  }
+  reset() {
+    this.applyDefaults();
+  }
+  validate() {
+    return this.emptyCharacter.value.length <= 1;
+  }
+  applyDefaults() {
+    const t = this._config.defaultOptions ?? {};
+    this.trailingSpaces.checked = t.preserveTrailingSpaces ?? !1, this.emptyCharacter.value = t.emptyCharacter ?? " ";
+  }
+}
+class We extends Y {
+  formatSelect = this._manageComponent(new mt({ id: "textmode-export-image-format", options: [{ value: "png", label: `PNG (${lt.png})` }, { value: "jpg", label: `JPG (${lt.jpg})` }, { value: "webp", label: `WEBP (${lt.webp})` }], defaultValue: "png" }));
+  scaleInput = this._manageComponent(new G({ defaultValue: "1", attributes: { min: "0.1", step: "0.1" } }));
+  constructor(t) {
+    super(t);
+  }
+  render() {
+    const t = document.createElement("div");
+    t.classList.add(v.stack);
+    const e = new H("row");
+    e.mount(t);
+    const r = new P({ label: "image format", labelFor: "textmode-export-image-format", variant: "compact" });
+    r.mount(e.root), this.formatSelect.mount(r.root);
+    const a = new P({ label: "scale", labelFor: "textmode-export-image-scale", variant: "dense" });
+    return a.mount(e.root), this.scaleInput.mount(a.root), this.scaleInput.inputElement.id = "textmode-export-image-scale", t;
+  }
+  getOptions() {
+    const t = Number.parseFloat(this.scaleInput.value);
+    return { format: this.formatSelect.value, scale: Number.isFinite(t) ? t : this._config.defaultOptions?.scale ?? 1 };
+  }
+  reset() {
+    this.applyDefaults(), this.scaleInput.refresh();
+  }
+  validate() {
+    const t = Number.parseFloat(this.scaleInput.value);
+    return Number.isFinite(t) && t > 0;
+  }
+  applyDefaults() {
+    const t = this._config.defaultOptions ?? {};
+    this.formatSelect.value = t.format ?? "png";
+    const e = t.scale ?? 1;
+    this.scaleInput.value = String(e);
+  }
+}
+class qe extends Y {
+  includeBackground = this._manageComponent(new Gt({ id: "textmode-export-svg-include-backgrounds", label: "include cell backgrounds", defaultChecked: !0 }));
+  drawMode = this._manageComponent(new mt({ id: "textmode-export-svg-draw-mode", options: [{ value: "fill", label: "fill" }, { value: "stroke", label: "stroke" }], defaultValue: "fill" }));
+  strokeWidth = this._manageComponent(new G({ defaultValue: "1", attributes: { min: "0", step: "0.1" } }));
+  constructor(t) {
+    super(t);
+  }
+  render() {
+    const t = document.createElement("div");
+    t.classList.add(v.stack), this.includeBackground.mount(t);
+    const e = new H("row");
+    e.mount(t);
+    const r = new P({ label: "draw mode", labelFor: "textmode-export-svg-draw-mode", variant: "compact" });
+    r.mount(e.root), this.drawMode.mount(r.root);
+    const a = new P({ label: "stroke width", labelFor: "textmode-export-svg-stroke-width", variant: "compact" });
+    return a.mount(e.root), this.strokeWidth.mount(a.root), this.strokeWidth.inputElement.id = "textmode-export-svg-stroke-width", this.drawMode.selectElement.addEventListener("change", () => this.updateStrokeControls()), this.updateStrokeControls(), t;
+  }
+  getOptions() {
+    return { includeBackgroundRectangles: this.includeBackground.checked, drawMode: this.drawMode.value, strokeWidth: Number.parseFloat(this.strokeWidth.value) };
+  }
+  reset() {
+    this.applyDefaults(), this.updateStrokeControls();
+  }
+  validate() {
+    const t = Number.parseFloat(this.strokeWidth.value);
+    return this.drawMode.value !== "stroke" || Number.isFinite(t) && t >= 0;
+  }
+  updateStrokeControls() {
+    const t = this.drawMode.value === "stroke";
+    this.strokeWidth.inputElement.disabled = !t, this.strokeWidth.refresh();
+  }
+  applyDefaults() {
+    const t = this._config.defaultOptions ?? {};
+    this.includeBackground.checked = t.includeBackgroundRectangles ?? !0, this.drawMode.value = t.drawMode ?? "fill";
+    const e = t.strokeWidth ?? 1;
+    this.strokeWidth.value = String(e), this.strokeWidth.refresh();
+  }
+}
+const ze = [{ format: "txt", label: "plain text (.txt)", supportsClipboard: !0, createBlade: () => new Ge({ format: "txt", label: "plain text (.txt)", supportsClipboard: !0, defaultOptions: { preserveTrailingSpaces: !1, emptyCharacter: " " } }) }, { format: "image", label: "image (.png / .jpg / .webp)", supportsClipboard: !0, createBlade: () => new We({ format: "image", label: "image (.png / .jpg / .webp)", supportsClipboard: !0, defaultOptions: { format: "png", scale: 1 } }) }, { format: "svg", label: "vector (.svg)", supportsClipboard: !0, createBlade: () => new qe({ format: "svg", label: "vector (.svg)", supportsClipboard: !0, defaultOptions: { includeBackgroundRectangles: !0, drawMode: "fill", strokeWidth: 1 } }) }, { format: "gif", label: "animated GIF (.gif)", supportsClipboard: !1, createBlade: () => new ut({ format: "gif", label: "animated GIF (.gif)", supportsClipboard: !1, defaultOptions: { frameCount: 300, frameRate: 60, scale: 1, repeat: 0 } }) }, { format: "video", label: "video (.webm)", supportsClipboard: !1, createBlade: () => new ht({ format: "video", label: "video (.webm)", supportsClipboard: !1, defaultOptions: { frameCount: 480, frameRate: 60, quality: 0.7 } }) }];
+function je() {
+  return ze;
+}
+function He(o, t) {
+  const e = je(), r = e[0]?.format, a = new Re(Ue(r)), i = new Te(), n = new Oe(o, t, a, i, e);
+  return n.$mount(), n;
+}
+const Qe = (o = {}) => {
+  const t = o.overlay ?? !0;
+  let e;
+  return { name: "textmode-export", version: "1.0.0", async install(r, a) {
+    const i = { saveCanvas: async (n = {}) => (a.flushDrawCommands(), new vt().$saveImage(r.canvas, n)), copyCanvas: async (n = {}) => (a.flushDrawCommands(), new vt().$copyImageToClipboard(r.canvas, n)), saveSVG: (n = {}) => {
+      a.flushDrawCommands(), new gt().$saveSVG(r, n);
+    }, saveStrings: (n = {}) => {
+      a.flushDrawCommands(), new bt().$saveTXT(r, n);
+    }, toSVG: (n = {}) => (a.flushDrawCommands(), new gt().$generateSVG(r, n)), toString: (n = {}) => (a.flushDrawCommands(), new bt().$generateTXT(r, n)), saveGIF: async (n = {}) => (a.flushDrawCommands(), new me(r, a.registerPostDrawHook).$saveGIF(n)), saveWEBM: async (n = {}) => (a.flushDrawCommands(), new Ce(r, a.registerPostDrawHook).$saveWEBM(n)) };
+    Object.assign(r, i), t && (e = He(r, i));
+  }, async uninstall(r) {
+    e?.$dispose(), e = void 0;
+    const a = ["saveCanvas", "copyCanvas", "saveSVG", "saveStrings", "toSVG", "toString", "saveGIF", "saveWEBM"];
+    for (const i of a) delete r[i];
+  } };
+};
+typeof window < "u" && (window.createTextmodeExportPlugin = Qe);
+export {
+  Qe as createTextmodeExportPlugin
+};