@panda-lingo/goldendict 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,11 +1,11 @@
-class E extends Error {
+class q extends Error {
   status;
   body;
   constructor(e, o, t) {
     super(e), this.name = "DictionaryApiError", this.status = o, this.body = t;
   }
 }
-function q(i) {
+function L(i) {
   const e = i.trim() || "/api/v1";
   return e.length > 1 ? e.replace(/\/+$/, "") : e;
 }
@@ -25,7 +25,7 @@ function y(i) {
     ...i.wordCount !== void 0 ? { wordCount: i.wordCount } : {}
   };
 }
-async function L(i) {
+async function B(i) {
   const e = await i.text();
   if (e)
     try {
@@ -40,7 +40,7 @@ class v {
   headers;
   credentials;
   constructor(e = {}) {
-    this.baseUrl = q(e.baseUrl ?? "/api/v1");
+    this.baseUrl = L(e.baseUrl ?? "/api/v1");
     const o = e.fetch ?? globalThis.fetch;
     if (!o)
       throw new TypeError("A fetch implementation is required");
@@ -94,12 +94,12 @@ class v {
         ...this.headers,
         ...o.headers
       }
-    }), n = await L(t);
+    }), n = await B(t);
     if (!t.ok) {
       let a = t.statusText;
       throw typeof n == "object" && n && ("message" in n ? a = String(n.message) : "error" in n && typeof n.error == "object" && n.error && "message" in n.error && (a = String(
         n.error.message
-      ))), new E(
+      ))), new q(
         a || `Dictionary request failed (${t.status})`,
         t.status,
         n
@@ -108,7 +108,7 @@ class v {
     return n;
   }
 }
-const B = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+const M = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
@@ -154,7 +154,7 @@ const B = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
        sodipodi:nodetypes="cccc" />
   </g>
 </svg>
-`, U = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfmAxMKDTHgIis/AAAAwUlEQVQoz33RsUtCcRTF8U+vJ8/RCAKHdEoc+isachBcMhranQQXt/YIGmxrLAgRac/JFsP+jVqaHVvkuTy0V/08dzzfC/eew2+1FWxRz1KCG42/ZuxeKpWgaeYub++ZStcAsRcddgwdgCPVDC1qOHat7F2dz2xvMwluXeDBWQgomeDSIAp8s1DEh8PIdqUhoOQbFV8h4MojTsxjb9mbNZW13bIwtu9U72dQr7mgeNIPR10z9CwKlzXStfv/eef5uldwrDr7rieveQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wMy0xOVQxMDoxMzo0OSswMDowMH0jItoAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDMtMTlUMTA6MTM6NDkrMDA6MDAMfppmAAAAAElFTkSuQmCC", M = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+`, U = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfmAxMKDTHgIis/AAAAwUlEQVQoz33RsUtCcRTF8U+vJ8/RCAKHdEoc+isachBcMhranQQXt/YIGmxrLAgRac/JFsP+jVqaHVvkuTy0V/08dzzfC/eew2+1FWxRz1KCG42/ZuxeKpWgaeYub++ZStcAsRcddgwdgCPVDC1qOHat7F2dz2xvMwluXeDBWQgomeDSIAp8s1DEh8PIdqUhoOQbFV8h4MojTsxjb9mbNZW13bIwtu9U72dQr7mgeNIPR10z9CwKlzXStfv/eef5uldwrDr7rieveQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wMy0xOVQxMDoxMzo0OSswMDowMH0jItoAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDMtMTlUMTA6MTM6NDkrMDA6MDAMfppmAAAAAElFTkSuQmCC", $ = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
@@ -196,7 +196,7 @@ const B = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
        d="m 9.8109427,14.803704 8.9999993,-8.9999986 -17.9999995,2e-7 z m 0,-4.225584 -4.7744158,-4.7744144 9.5488291,-2e-7 z"
        id="rect1"
        sodipodi:nodetypes="cccccccc" /></g></svg>
-`, $ = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+`, F = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
@@ -311,7 +311,7 @@ const B = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
      x="1.1215118e-09"
      y="4.9718442"
      ry="0.64957041" /></svg>
-`, F = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAATrAAAE6wHYKlsNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAcRJREFUOI2lkztvE0EQgL8Z7/rB2T5fCixhQQc00FAjJCRkiTYV/JH0adIgfgJVGn4CKRBUSIjCHYiOBimK7KA4ORw/dofC3Ck2dhpGGu1r5pvZmV0xM/5HXDEZDAbf2u12BkiM0UIImBlmRoyxHBeLBaPRaNzv9++tAJIkyVS1673HzBCRUtfFzEo/d/VAVRERzvf2uDw6AqB6eMhlt1va9Hq9FWgJiDEiIqgqcTwmnp4CUPeearu9EmRjDYp7qiqVNEV3dgCYx8hlniMimBlZlm0GFN0QERoHB7j9/bIGVUDiHCrVfzLQqwDvPSLCZDIhz3MuLi6YTye4eY58fkOnUbkeUERMkoRWq0WaptRqDaYfXvPr3StmP75cX4PZbIb3HoDx6TmttImveZoPn9N+0KfWvbsdYGY45xARvn76zvu3H8m6GS/2dpnefLRsb4Bb2wAhBJxbLoc/hwCcDc9QqVCvuzLy+uPa2IUnu4+p36hz5/5tGkmdxWKBc45Op0MIYXsNClAzTXj28imquqKFzUbA8fHxbzMbi0glhKBmpsuEREQkqmpU1Sgi8eTkJC/8ZNN3FhEHNIHG360pkJvZdN32D0SOwDehr1HXAAAAAElFTkSuQmCC", R = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+`, R = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAATrAAAE6wHYKlsNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAcRJREFUOI2lkztvE0EQgL8Z7/rB2T5fCixhQQc00FAjJCRkiTYV/JH0adIgfgJVGn4CKRBUSIjCHYiOBimK7KA4ORw/dofC3Ck2dhpGGu1r5pvZmV0xM/5HXDEZDAbf2u12BkiM0UIImBlmRoyxHBeLBaPRaNzv9++tAJIkyVS1673HzBCRUtfFzEo/d/VAVRERzvf2uDw6AqB6eMhlt1va9Hq9FWgJiDEiIqgqcTwmnp4CUPeearu9EmRjDYp7qiqVNEV3dgCYx8hlniMimBlZlm0GFN0QERoHB7j9/bIGVUDiHCrVfzLQqwDvPSLCZDIhz3MuLi6YTye4eY58fkOnUbkeUERMkoRWq0WaptRqDaYfXvPr3StmP75cX4PZbIb3HoDx6TmttImveZoPn9N+0KfWvbsdYGY45xARvn76zvu3H8m6GS/2dpnefLRsb4Bb2wAhBJxbLoc/hwCcDc9QqVCvuzLy+uPa2IUnu4+p36hz5/5tGkmdxWKBc45Op0MIYXsNClAzTXj28imquqKFzUbA8fHxbzMbi0glhKBmpsuEREQkqmpU1Sgi8eTkJC/8ZNN3FhEHNIHG360pkJvZdN32D0SOwDehr1HXAAAAAElFTkSuQmCC", N = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
@@ -399,7 +399,7 @@ const B = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
        d="m 14.310942,9.9316324 -8.9999991,-8.9999982 2e-7,17.9999978 z m -4.225584,0 -4.7744149,4.7744156 -2e-7,-9.5488279 z"
        id="rect1"
        sodipodi:nodetypes="cccccccc" /></g></svg>
-`, N = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+`, O = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
@@ -515,7 +515,7 @@ const B = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
      x="1.1215118e-09"
      y="4.9718442"
      ry="0.64957041" /></svg>
-`, O = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+`, H = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
@@ -575,7 +575,7 @@ const B = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
      id="path2"
      style="fill:url(#radialGradient2)" />
 </svg>
-`, H = `<?xml version="1.0" encoding="UTF-8"?>
+`, W = `<?xml version="1.0" encoding="UTF-8"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 <svg width="32" height="32" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <defs>
@@ -699,7 +699,7 @@ const B = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
      transform="matrix(0.71827705,0,0,0.71827705,-3.1349141,-8.3199121)"
      style="fill:url(#linearGradient9);fill-opacity:1;stroke:none" />
 </svg>
-`, W = `<svg fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+`, Z = `<svg fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <defs>
   <linearGradient id="videoGrad" y2="100%">
    <stop stop-color="#FF5F6D" offset="0"/>
@@ -709,7 +709,7 @@ const B = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <rect x="2" y="5" width="20" height="14" rx="2" ry="2" fill="url(#videoGrad)" stroke="none"/>
  <polygon points="10 9 15 12 10 15" fill="#fff"/>
 </svg>
-`, Z = `<svg fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+`, Q = `<svg fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <defs>
   <linearGradient id="warnGrad" y2="100%">
    <stop stop-color="#FF5F6D" offset="0"/>
@@ -724,31 +724,31 @@ const B = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 function s(i) {
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(i)}`;
 }
-const k = {
-  "arrow.svg": s(B),
+const u = {
+  "arrow.svg": s(M),
   "audio.png": U,
-  "collapse_article.svg": s($),
-  "collapse_article_hovered.svg": s(M),
+  "collapse_article.svg": s(F),
+  "collapse_article_hovered.svg": s($),
   "collapse_opt.svg": s(P),
-  "document.png": F,
-  "downarrow.svg": s(R),
-  "expand_article.svg": s(N),
+  "document.png": R,
+  "downarrow.svg": s(N),
+  "expand_article.svg": s(O),
   "expand_article_hovered.svg": s(G),
   "expand_opt.svg": s(V),
-  "old-arrow.svg": s(O),
-  "old-downarrow.svg": s(H),
+  "old-arrow.svg": s(H),
+  "old-downarrow.svg": s(W),
   "playsound.svg": s(j),
-  "video.svg": s(W),
-  "warning.svg": s(Z)
+  "video.svg": s(Z),
+  "warning.svg": s(Q)
 };
 function A(i) {
   const e = /^qrc:\/{2,3}(?:icons\/)?([^?#]+)(?:[?#].*)?$/i.exec(i);
-  return e?.[1] ? k[e[1]] : void 0;
+  return e?.[1] ? u[e[1]] : void 0;
 }
 function z(i) {
   return i.replace(
     /qrc:\/{2,3}icons\/([a-z0-9_.-]+)/gi,
-    (e, o) => k[o] ?? e
+    (e, o) => u[o] ?? e
   );
 }
 const h = { "article-style.css": `/******** Global, non-dictionary-specific classes ***********/
@@ -7883,25 +7883,151 @@ a:hover {
 code::selection {
   background: #333333;
 }
-` }, Q = h["article-style.css"], X = h["article-style-print.css"], J = h["article-style-st-babylon.css"], K = h["article-style-st-classic.css"], Y = h["article-style-st-lingoes-blue.css"], ee = h["article-style-st-lingoes.css"], ie = h["article-style-st-lingvo.css"], te = h["article-style-st-modern.css"], oe = {
+` }, X = h["article-style.css"], K = h["article-style-print.css"], J = h["article-style-st-babylon.css"], Y = h["article-style-st-classic.css"], ee = h["article-style-st-lingoes-blue.css"], ie = h["article-style-st-lingoes.css"], te = h["article-style-st-lingvo.css"], oe = h["article-style-st-modern.css"], ne = {
   default: "",
-  classic: K,
-  modern: te,
-  lingvo: ie,
+  classic: Y,
+  modern: oe,
+  lingvo: te,
   babylon: J,
-  lingoes: ee,
-  "lingoes-blue": Y
-}, ne = z(Q), re = z(X);
-function ae(i = "default") {
-  return z(oe[i]);
-}
-const T = /* @__PURE__ */ new Set([
+  lingoes: ie,
+  "lingoes-blue": ee
+}, re = z(X), ae = z(K);
+function de(i = "default") {
+  return z(ne[i]);
+}
+const le = `
+  :root {
+    --gd-responsive-gutter: clamp(0.5rem, 2.5vw, 1rem);
+  }
+
+  html,
+  body {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+
+  body {
+    margin: 0;
+    padding: var(--gd-responsive-gutter);
+    overflow-wrap: break-word;
+  }
+
+  .gdarticle,
+  .gdarticlebody,
+  .gdstemmedsuggestion {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+
+  .gddictname {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    max-inline-size: 100%;
+  }
+
+  .gddicticon,
+  .collapse_expand_area {
+    flex: 0 0 auto;
+  }
+
+  .gddicttitle {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .collapse_expand_area {
+    margin-inline-start: auto;
+  }
+
+  .gddictname:focus-visible {
+    outline: 2px solid var(--link-color, currentColor);
+    outline-offset: -2px;
+  }
+
+  /* Keep nested, absolutely positioned sidecar controls at their authored size. */
+  .gdarticlebody > :where(div, section, article, aside, header, footer, figure),
+  .gdarticlebody :where(img, picture, video, canvas, svg, iframe, object, embed),
+  .gdarticlebody :where(pre, table) {
+    max-inline-size: 100% !important;
+  }
+
+  .gdarticlebody :where(img, video, canvas, svg) {
+    block-size: auto !important;
+  }
+
+  .gdarticlebody :where(a, p, li, dd, dt, td, th, code) {
+    overflow-wrap: anywhere;
+  }
+
+  .gdarticlebody pre {
+    overflow-x: auto !important;
+    overscroll-behavior-inline: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .gdstemmedsuggestion_body {
+    inline-size: auto;
+    margin-inline: 0.75rem;
+  }
+
+  .empty-space {
+    block-size: clamp(6rem, 20vw, 15rem);
+  }
+
+  @media (max-width: 64rem) {
+    .gdarticlebody table {
+      display: block !important;
+      overflow-x: auto !important;
+      overscroll-behavior-inline: contain;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+  @media (max-width: 40rem) {
+    :root {
+      --gd-responsive-gutter: 0.5rem;
+    }
+
+    .gddictname {
+      min-block-size: 2.75rem;
+      margin-block: 0.35rem;
+    }
+
+    .gdarticlebody :where(.infobox, .navbox, .thumb, .tright, .tleft) {
+      float: none !important;
+      inline-size: auto !important;
+      max-inline-size: 100% !important;
+      margin-inline: 0 !important;
+    }
+
+    .gdarticlebody .thumbinner {
+      inline-size: 100% !important;
+      max-inline-size: 100% !important;
+    }
+  }
+
+  @media (pointer: coarse) {
+    .gddictname {
+      min-block-size: 2.75rem;
+    }
+  }
+`, T = /* @__PURE__ */ new Set([
   "bres",
   "qrcx",
   "gico",
   "gdau",
   "gdvideo"
-]), de = {
+]), se = {
   gdlookup: "lookup",
   bword: "lookup",
   entry: "lookup",
@@ -7916,8 +8042,8 @@ const T = /* @__PURE__ */ new Set([
   gdinternal: "unsupported",
   ankicard: "unsupported",
   ankisearch: "unsupported"
-}, le = new Set(
-  Object.entries(de).filter(([, i]) => i === "unsupported").map(([i]) => i)
+}, ce = new Set(
+  Object.entries(se).filter(([, i]) => i === "unsupported").map(([i]) => i)
 );
 function f(i) {
   try {
@@ -7929,10 +8055,10 @@ function f(i) {
 function I(i, e) {
   return `${i.replace(/\/+$/, "")}/${e.replace(/^\/+/, "")}`;
 }
-function se(i) {
+function me(i) {
   return i.pathname.replace(/^\/+/, "").split("/").map((e) => encodeURIComponent(f(e))).join("/");
 }
-function ce(i, e) {
+function pe(i, e) {
   return /^[a-z][a-z\d+.-]*:/i.test(i) || i.startsWith("//") ? i : /^[a-z][a-z\d+.-]*:/i.test(e) ? new URL(i, e.endsWith("/") ? e : `${e}/`).toString() : I(e, i);
 }
 function S(i) {
@@ -7940,7 +8066,7 @@ function S(i) {
   if (e)
     return e.startsWith("/") && !e.startsWith("//") && /^[a-z][a-z\d+.-]*:/i.test(i.apiBaseUrl) ? new URL(e, i.apiBaseUrl).toString() : e;
 }
-function m(i, e) {
+function p(i, e) {
   const o = A(i);
   if (o)
     return o;
@@ -7950,22 +8076,22 @@ function m(i, e) {
   try {
     t = new URL(i);
   } catch {
-    const l = S(e);
-    return l ? ce(i, l) : i;
+    const d = S(e);
+    return d ? pe(i, d) : i;
   }
   const n = t.protocol.slice(0, -1).toLowerCase();
   if (!T.has(n))
     return i;
   const a = t.hostname || e.dictionaryId;
   if (n === "gico")
-    return e.iconUrl ? m(e.iconUrl, {
+    return e.iconUrl ? p(e.iconUrl, {
       ...e,
       iconUrl: void 0
     }) : A("qrc:///icons/document.png") ?? "";
-  const r = se(t), d = `${e.apiBaseUrl.replace(/\/+$/, "")}/dictionaries/${encodeURIComponent(a)}/resources`, p = I(S(e) ?? d, r);
-  return t.hash ? `${p}${t.hash}` : p;
+  const r = me(t), l = `${e.apiBaseUrl.replace(/\/+$/, "")}/dictionaries/${encodeURIComponent(a)}/resources`, m = I(S(e) ?? l, r);
+  return t.hash ? `${m}${t.hash}` : m;
 }
-function me(i) {
+function ge(i) {
   const e = /^([a-z][a-z\d+.-]*):(.*)$/i.exec(i);
   if (!e)
     return;
@@ -7977,8 +8103,8 @@ function me(i) {
     const r = new URL(i);
     t = r.searchParams.get("word") ?? r.pathname.replace(/^\/+/, ""), n = r.searchParams.get("gdanchor") ?? (r.hash.slice(1) || void 0), a = r.searchParams.get("dictionaries")?.split(",").filter(Boolean), !t && (o === "bword" || o === "entry") && (t = r.hostname);
   } catch {
-    const r = e[2]?.replace(/^\/{0,2}/, "") ?? "", [d, p] = r.split("#", 2), [l, w] = (d ?? "").split("?", 2);
-    t = l ?? "", n = new URLSearchParams(w ?? "").get("gdanchor") ?? (p || void 0);
+    const r = e[2]?.replace(/^\/{0,2}/, "") ?? "", [l, m] = r.split("#", 2), [d, w] = (l ?? "").split("?", 2);
+    t = d ?? "", n = new URLSearchParams(w ?? "").get("gdanchor") ?? (m || void 0);
   }
   return t = f(t.replace(/^\/+/, "")), t ? {
     kind: "lookup",
@@ -7993,22 +8119,22 @@ function D(i, e) {
     return { kind: "anchor", anchor: "" };
   if (o.startsWith("#"))
     return { kind: "anchor", anchor: f(o.slice(1)) };
-  const t = me(o);
+  const t = ge(o);
   if (t)
     return t;
   const n = /^([a-z][a-z\d+.-]*):/i.exec(o)?.[1]?.toLowerCase();
   if (n === "javascript" || n === "vbscript" || n === "file" || n === "data")
     return { kind: "unsafe" };
-  if (n && le.has(n))
+  if (n && ce.has(n))
     return { kind: "unsafe" };
   if (n && T.has(n))
-    return { kind: n === "gdau" ? "audio" : n === "gdvideo" ? "video" : "resource", url: m(o, e) };
+    return { kind: n === "gdau" ? "audio" : n === "gdvideo" ? "video" : "resource", url: p(o, e) };
   if (o.startsWith("//") || n === "http" || n === "https" || n === "mailto" || n === "tel")
     return { kind: "external", url: o };
   if (n)
     return { kind: "unsafe" };
   if (o.startsWith("/"))
-    return { kind: "resource", url: m(o, e) };
+    return { kind: "resource", url: p(o, e) };
   const [a, r] = o.split("#", 2);
   return a ? {
     kind: "lookup",
@@ -8016,11 +8142,11 @@ function D(i, e) {
     ...r ? { anchor: f(r) } : {}
   } : { kind: "anchor", anchor: f(r ?? "") };
 }
-const pe = ["src", "poster", "data"];
-function u(i) {
+const he = ["src", "poster", "data"];
+function x(i) {
   return /^(?:data:|blob:|https?:|#)/i.test(i);
 }
-function ge(i, e, o) {
+function fe(i, e, o) {
   const t = [
     ["data-gd-audio", "audio"],
     ["data-gd-video", "video"],
@@ -8028,15 +8154,15 @@ function ge(i, e, o) {
   ];
   for (const [a, r] of t)
     if (i.hasAttribute(a)) {
-      const d = i.getAttribute(a)?.trim();
+      const l = i.getAttribute(a)?.trim();
       return {
         kind: r,
-        url: m(d || e, o)
+        url: p(l || e, o)
       };
     }
   const n = i.getAttribute("data-gd-action")?.trim().toLowerCase();
   if (n === "audio" || n === "video" || n === "resource")
-    return { kind: n, url: m(e, o) };
+    return { kind: n, url: p(e, o) };
   if (i.hasAttribute("data-gd-lookup") || n === "lookup") {
     const a = i.getAttribute("data-gd-lookup")?.trim();
     if (a && a !== "true" && a !== "1")
@@ -8044,13 +8170,13 @@ function ge(i, e, o) {
     const r = D(e, o);
     if (r.kind === "lookup")
       return r;
-    const d = i.getAttribute("data-gd-word")?.trim();
-    return d ? { kind: "lookup", word: d } : { kind: "unsafe" };
+    const l = i.getAttribute("data-gd-word")?.trim();
+    return l ? { kind: "lookup", word: l } : { kind: "unsafe" };
   }
   if (n === "unsafe")
     return { kind: "unsafe" };
 }
-function he(i, e, o) {
+function we(i, e, o) {
   switch (e.kind) {
     case "anchor":
       i.setAttribute(
@@ -8082,20 +8208,20 @@ function C(i, e) {
     /url\(\s*(["']?)([^"')]+)\1\s*\)/gi,
     (t, n, a) => {
       const r = a.trim();
-      return u(r) ? t : `url(${n}${m(r, e)}${n})`;
+      return x(r) ? t : `url(${n}${p(r, e)}${n})`;
     }
   ).replace(
     /@import\s+(["'])([^"']+)\1/gi,
-    (t, n, a) => u(a) ? t : `@import ${n}${m(a, e)}${n}`
+    (t, n, a) => x(a) ? t : `@import ${n}${p(a, e)}${n}`
   );
 }
-function fe(i, e) {
+function be(i, e) {
   return i.split(/,\s+(?=[^,]+(?:\s+\d+(?:\.\d+)?[wx])?(?:,|$))/).map((o) => {
     const t = /^(\S+)([\s\S]*)$/.exec(o.trim());
-    return !t?.[1] || u(t[1]) ? o.trim() : `${m(t[1], e)}${t[2] ?? ""}`;
+    return !t?.[1] || x(t[1]) ? o.trim() : `${p(t[1], e)}${t[2] ?? ""}`;
   }).join(", ");
 }
-function we(i) {
+function ke(i) {
   if (!i.classList.contains("hidden_expand_opt"))
     return;
   const e = i.getAttribute("onclick") ?? "", o = /gdExpandOptPart\(\s*['"]([^'"]+)['"]\s*,\s*['"]([^'"]+)['"]\s*\)/.exec(
@@ -8103,7 +8229,7 @@ function we(i) {
   );
   o?.[1] && o[2] && (i.setAttribute("data-gd-expander", o[1]), i.setAttribute("data-gd-optional", o[2]));
 }
-function be(i, e, o) {
+function ue(i, e, o) {
   if (typeof document > "u")
     throw new Error("Article rendering requires a browser document");
   const t = {
@@ -8116,37 +8242,37 @@ function be(i, e, o) {
     r.remove();
   }), o === "none" && a.querySelectorAll("script").forEach((r) => r.remove());
   for (const r of a.querySelectorAll("*")) {
-    if (we(r), o === "none")
-      for (const l of [...r.attributes])
-        (/^on/i.test(l.name) || l.name.toLowerCase() === "srcdoc") && r.removeAttribute(l.name);
+    if (ke(r), o === "none")
+      for (const d of [...r.attributes])
+        (/^on/i.test(d.name) || d.name.toLowerCase() === "srcdoc") && r.removeAttribute(d.name);
     if (r instanceof HTMLAnchorElement || r.tagName === "AREA") {
-      const l = r.getAttribute("href");
-      l !== null && he(
+      const d = r.getAttribute("href");
+      d !== null && we(
         r,
-        ge(r, l, t) ?? D(l, t),
+        fe(r, d, t) ?? D(d, t),
         i.dictionaryId
       );
     } else if (r.hasAttribute("href")) {
-      const l = r.getAttribute("href") ?? "";
-      u(l) || r.setAttribute("href", m(l, t));
+      const d = r.getAttribute("href") ?? "";
+      x(d) || r.setAttribute("href", p(d, t));
     }
-    for (const l of pe) {
-      const w = r.getAttribute(l);
-      w === null || u(w) || (/^(?:javascript|vbscript|file):/i.test(w) ? r.removeAttribute(l) : r.setAttribute(l, m(w, t)));
+    for (const d of he) {
+      const w = r.getAttribute(d);
+      w === null || x(w) || (/^(?:javascript|vbscript|file):/i.test(w) ? r.removeAttribute(d) : r.setAttribute(d, p(w, t)));
     }
-    const d = r.getAttribute("srcset");
-    d && r.setAttribute("srcset", fe(d, t));
-    const p = r.getAttribute("style");
-    p && r.setAttribute(
+    const l = r.getAttribute("srcset");
+    l && r.setAttribute("srcset", be(l, t));
+    const m = r.getAttribute("style");
+    m && r.setAttribute(
       "style",
-      C(p, t)
+      C(m, t)
     );
   }
   for (const r of a.querySelectorAll("style"))
     r.textContent = C(r.textContent ?? "", t);
   return a.innerHTML;
 }
-const ke = {
+const xe = {
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif',
   textColor: "#222222",
   mutedTextColor: "#555555",
@@ -8160,8 +8286,8 @@ const ke = {
   selectionTextColor: "#ffffff",
   radius: "8px",
   spacing: "8px"
-}, ue = {
-  fontFamily: ke.fontFamily,
+}, ye = {
+  fontFamily: xe.fontFamily,
   textColor: "#edf1f5",
   mutedTextColor: "#aeb8c3",
   linkColor: "#79bfff",
@@ -8175,17 +8301,17 @@ const ke = {
   radius: "8px",
   spacing: "8px"
 };
-function xe(i = "light") {
+function E(i = "light") {
   return i !== "auto" ? i : globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 function c(i, e) {
   return e === void 0 ? "" : `${i}:${e};`;
 }
-function x(i) {
+function k(i) {
   return i.replace(/<\/style/gi, "<\\/style");
 }
-function ye(i = {}) {
-  const e = xe(i.mode), o = i.tokens ?? {}, t = e === "dark" ? { ...ue, ...o } : o, n = [
+function ve(i = {}) {
+  const e = E(i.mode), o = i.tokens ?? {}, t = e === "dark" ? { ...ye, ...o } : o, n = [
     c("--gd-font-family", t.fontFamily),
     c("--gd-text-color", t.textColor),
     c("--gd-muted-text-color", t.mutedTextColor),
@@ -8212,36 +8338,36 @@ function ye(i = {}) {
     t.selectionColor || t.selectionTextColor ? "::selection{background:var(--gd-selection-color,var(--selection-bg));color:var(--gd-selection-text-color,var(--selection-text));}" : "",
     t.radius ? ".gdarticle{border-radius:var(--gd-radius);}" : ""
   ].join("");
-  return x(
+  return k(
     `:root{color-scheme:${e};${n}}${a}${i.cssText ?? ""}`
   );
 }
 function g(i) {
   return i.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
 }
-function ve(i) {
+function _e(i) {
   return i.replace(
     /[^a-zA-Z0-9_-]/g,
     (e) => `_u${e.codePointAt(0)?.toString(16) ?? "0"}_`
   );
 }
-function _e(i) {
+function ze(i) {
   return (i ?? "unknown").toLowerCase().replace(/[^a-z0-9_-]/g, "-");
 }
-function ze(i, e) {
-  return i.iconUrl ? m(i.iconUrl, {
+function Ae(i, e) {
+  return i.iconUrl ? p(i.iconUrl, {
     apiBaseUrl: e,
     dictionaryId: i.dictionaryId,
     ...i.resourceBaseUrl ? { resourceBaseUrl: i.resourceBaseUrl } : {}
-  }) : k["document.png"];
+  }) : u["document.png"];
 }
-function Ae(i, e, o) {
-  const t = g(i.dictionaryId), n = ve(i.dictionaryId), a = be(i, e, o), r = _e(i.sourceLanguage), d = g(i.targetLanguage ?? ""), p = g(ze(i, e));
+function Se(i, e, o) {
+  const t = g(i.dictionaryId), n = _e(i.dictionaryId), a = ue(i, e, o), r = ze(i.sourceLanguage), l = g(i.targetLanguage ?? ""), m = g(Ae(i, e));
   return `
     <article class="gdarticle" id="gdfrom-${n}" data-gd-id="${t}">
       <gd-dict-header class="gddictname" id="gddictname-${n}"
         role="button" tabindex="0" aria-expanded="true" aria-controls="gd-${n}">
-        <span class="gddicticon"><img src="${p}" alt=""></span>
+        <span class="gddicticon"><img src="${m}" alt=""></span>
         <span class="gdfromprefix">From </span>
         <span class="gddicttitle">${g(i.dictionaryName)}</span>
         <span class="collapse_expand_area" aria-hidden="true">
@@ -8249,12 +8375,12 @@ function Ae(i, e, o) {
         </span>
       </gd-dict-header>
       <section class="gdarticlebody gdlangfrom-${r}"
-        lang="${d}" id="gd-${n}">${a}</section>
+        lang="${l}" style="display:block" id="gd-${n}">${a}</section>
     </article>
-    <div class="gdclear" aria-hidden="true"></div>
+    <div style="clear:both;" aria-hidden="true"></div>
     <span class="gdarticleseparator"></span>`;
 }
-function Se(i) {
+function Ce(i) {
   return i.length ? `<div class="gdstemmedsuggestion">
     <span class="gdstemmedsuggestion_head">Close words: </span>
     <span class="gdstemmedsuggestion_body">${i.map(
@@ -8262,14 +8388,15 @@ function Se(i) {
   ).join(", ")}</span>
   </div>` : "";
 }
-function Ce(i) {
+function Te(i, e) {
   return `(function(){
     "use strict";
     const config=${JSON.stringify({
     namespace: "goldendict-web",
     instanceId: i,
-    expandOptIcon: k["expand_opt.svg"],
-    collapseOptIcon: k["collapse_opt.svg"]
+    themeMode: e,
+    expandOptIcon: u["expand_opt.svg"],
+    collapseOptIcon: u["collapse_opt.svg"]
   }).replace(/<\//g, "<\\/")};
     const post=(type,detail={})=>parent.postMessage({
       namespace:config.namespace,
@@ -8279,6 +8406,27 @@ function Ce(i) {
     },"*");
     const articleOf=(target)=>target instanceof Element?target.closest(".gdarticle"):null;
     const articleId=(article)=>article?.getAttribute("data-gd-id")||"";
+    const syncDictionaryTheme=()=>{
+      if(document.documentElement.getAttribute("data-gd-theme")!==config.themeMode){
+        document.documentElement.setAttribute("data-gd-theme",config.themeMode);
+      }
+      if(document.documentElement.getAttribute("data-darkreader-scheme")!==config.themeMode){
+        document.documentElement.setAttribute("data-darkreader-scheme",config.themeMode);
+      }
+      document.querySelectorAll(".oaldpe").forEach((container)=>{
+        if(container.getAttribute("data-theme")!==config.themeMode){
+          container.setAttribute("data-theme",config.themeMode);
+        }
+      });
+    };
+    const themeObserver=new MutationObserver(syncDictionaryTheme);
+    themeObserver.observe(document.documentElement,{
+      subtree:true,
+      childList:true,
+      attributes:true,
+      attributeFilter:["data-theme","data-darkreader-scheme"]
+    });
+    syncDictionaryTheme();
     const setActive=(article,notify=true)=>{
       if(!article)return;
       document.querySelector(".gdactivearticle")?.classList.remove("gdactivearticle");
@@ -8369,9 +8517,22 @@ function Ce(i) {
       const header=target.closest(".gddictname");
       if(header){event.preventDefault();toggleArticle(articleOf(header));}
     });
-    const requestSize=()=>requestAnimationFrame(()=>post("height",{
-      height:Math.max(document.body.scrollHeight,document.documentElement.scrollHeight)
-    }));
+    let resizeFrame=0;
+    let lastHeight=0;
+    const requestSize=()=>{
+      cancelAnimationFrame(resizeFrame);
+      resizeFrame=requestAnimationFrame(()=>{
+        resizeFrame=0;
+        const height=Math.ceil(Math.max(
+          document.body.scrollHeight,
+          document.body.offsetHeight,
+          document.body.getBoundingClientRect().height
+        ));
+        if(height===lastHeight)return;
+        lastHeight=height;
+        post("height",{height});
+      });
+    };
     addEventListener("message",(event)=>{
       const message=event.data;
       if(event.source!==parent||message?.namespace!==config.namespace||message?.instanceId!==config.instanceId)return;
@@ -8381,11 +8542,13 @@ function Ce(i) {
         article?.scrollIntoView({block:"start"});setActive(article,false);
       }
     });
-    new ResizeObserver(requestSize).observe(document.documentElement);
+    const resizeObserver=new ResizeObserver(requestSize);
+    resizeObserver.observe(document.body);
+    addEventListener("resize",requestSize,{passive:true});
     addEventListener("load",()=>{requestSize();post("ready",{});});
   })();`;
 }
-function Te(i, e) {
+function Ie(i, e) {
   const o = i === "none" ? `'nonce-${e}'` : "'unsafe-inline' 'unsafe-eval' data: blob: http: https:", t = i === "none" ? "'none'" : "http: https:";
   return [
     "default-src 'none'",
@@ -8401,24 +8564,25 @@ function Te(i, e) {
     "base-uri 'none'"
   ].join("; ");
 }
-function Ie(i, e) {
-  const o = e.theme ?? {}, t = e.instanceId.replace(/[^a-zA-Z0-9_-]/g, ""), n = i.articles.map(
-    (d) => Ae(d, e.apiBaseUrl, e.scriptPolicy)
-  ).join(""), a = n ? `${n}<div class="empty-space" aria-hidden="true"></div>` : `<div class="gdnotfound"><p>No translation for <b>${g(i.word)}</b> was found.</p></div>`, r = o.brandName ? `${i.word} — ${o.brandName}` : i.word;
+function De(i, e) {
+  const o = e.theme ?? {}, t = E(o.mode), n = e.layoutMode ?? "responsive", a = e.instanceId.replace(/[^a-zA-Z0-9_-]/g, ""), r = i.articles.map(
+    (d) => Se(d, e.apiBaseUrl, e.scriptPolicy)
+  ).join(""), l = r ? `${r}<div class="empty-space" aria-hidden="true"></div>` : `<div class="gdnotfound"><p>No translation for <b>${g(i.word)}</b> was found.</p></div>`, m = o.brandName ? `${i.word} — ${o.brandName}` : i.word;
   return `<!doctype html>
-<html><head>
+<html data-gd-theme="${t}" data-gd-layout="${n}" data-darkreader-scheme="${t}"><head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta http-equiv="Content-Security-Policy" content="${g(Te(e.scriptPolicy, t))}">
-  <title>${g(r)}</title>
-  <style>${x(ne)}</style>
-  <style>${x(ae(o.preset))}</style>
-  <style>${ye(o)}</style>
-  <style media="print">${x(re)}</style>
+  <meta http-equiv="Content-Security-Policy" content="${g(Ie(e.scriptPolicy, a))}">
+  <title>${g(m)}</title>
+  <style>${k(re)}</style>
+  <style>${k(de(o.preset))}</style>
+  ${n === "responsive" ? `<style data-gd-style="responsive">${k(le)}</style>` : ""}
+  <style>${ve(o)}</style>
+  <style media="print">${k(ae)}</style>
 </head><body>
-  ${a}
-  ${Se(i.suggestions)}
-  <script nonce="${t}">${Ce(e.instanceId).replace(/<\/script/gi, "<\\/script")}<\/script>
+  ${l}
+  ${Ce(i.suggestions)}
+  <script nonce="${a}">${Te(e.instanceId, t).replace(/<\/script/gi, "<\\/script")}<\/script>
 </body></html>`;
 }
 const b = {
@@ -8428,26 +8592,28 @@ const b = {
   mediaRequest: "goldendict-media-request",
   externalLink: "goldendict-external-link",
   stateChange: "goldendict-state-change"
-}, De = `
-  :host{display:block;min-width:0;color:#222;font-family:system-ui,sans-serif}
-  .shell{position:relative;min-height:8rem;border-radius:var(--gd-host-radius,8px);overflow:hidden;background:var(--gd-host-background,#fff)}
-  .brand{display:flex;align-items:center;gap:.65rem;padding:.65rem .9rem;border-bottom:1px solid var(--gd-host-border,#e3e3e3);background:var(--gd-host-surface,#f7f9fb);font-weight:650}
+}, Ee = `
+  :host{display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;color:#222;font-family:system-ui,sans-serif;container:goldendict-view / inline-size}
+  .shell{position:relative;box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:8rem;border-radius:var(--gd-host-radius,8px);overflow:hidden;background:var(--gd-host-background,#fff)}
+  .brand{display:flex;align-items:center;gap:.65rem;min-width:0;padding:.65rem .9rem;border-bottom:1px solid var(--gd-host-border,#e3e3e3);background:var(--gd-host-surface,#f7f9fb);font-weight:650}
   .brand[hidden]{display:none}
-  .brand img{display:block;width:1.75rem;height:1.75rem;object-fit:contain}
+  .brand img{display:block;flex:0 0 auto;width:1.75rem;height:1.75rem;object-fit:contain}
   .brand img[hidden]{display:none}
+  .brand span{min-width:0;overflow-wrap:anywhere}
   .status{display:grid;place-items:center;min-height:8rem;padding:1.25rem;text-align:center;color:var(--gd-host-muted,#59636e)}
   .status[hidden]{display:none}
   .status[data-state="error"]{color:var(--gd-host-error,#a21d2d)}
   .spinner{width:1.25rem;height:1.25rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .75s linear infinite;margin:0 auto .7rem}
-  iframe{display:block;width:100%;min-height:8rem;border:0;background:transparent}
+  iframe{display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:8rem;border:0;background:transparent}
   iframe[hidden]{display:none}
   @keyframes spin{to{transform:rotate(360deg)}}
+  @container goldendict-view (max-width:30rem){.brand{gap:.5rem;padding:.55rem .65rem}.status{padding:1rem .75rem}}
   @media (prefers-reduced-motion:reduce){.spinner{animation:none}}
 `;
-function Ee() {
+function qe() {
   return globalThis.crypto?.randomUUID?.() ?? `gd-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
 }
-function qe(i) {
+function Le(i) {
   return (i instanceof DOMException || i instanceof Error) && i.name === "AbortError";
 }
 class _ extends HTMLElement {
@@ -8456,9 +8622,10 @@ class _ extends HTMLElement {
     "word",
     "preset",
     "theme-mode",
-    "script-policy"
+    "script-policy",
+    "layout-mode"
   ];
-  instanceId = Ee();
+  instanceId = qe();
   frame;
   statusElement;
   brandElement;
@@ -8467,6 +8634,8 @@ class _ extends HTMLElement {
   clientValue;
   requestController;
   requestSequence = 0;
+  renderSequence = 0;
+  activeBridgeInstanceId;
   responseValue;
   themeValue = {};
   stateValue = "idle";
@@ -8475,7 +8644,7 @@ class _ extends HTMLElement {
   constructor() {
     super();
     const e = this.attachShadow({ mode: "open" });
-    e.innerHTML = `<style>${De}</style>
+    e.innerHTML = `<style>${Ee}</style>
       <section class="shell" part="container">
         <div class="brand" part="brand" hidden>
           <img alt="" hidden><span></span>
@@ -8483,7 +8652,7 @@ class _ extends HTMLElement {
         <div class="status" part="status" role="status" aria-live="polite"></div>
         <iframe part="article" title="Dictionary article" sandbox="allow-scripts"
           referrerpolicy="no-referrer" hidden></iframe>
-      </section>`, this.frame = e.querySelector("iframe"), this.statusElement = e.querySelector(".status"), this.brandElement = e.querySelector(".brand"), this.brandImage = this.brandElement.querySelector("img"), this.brandText = this.brandElement.querySelector("span"), this.clientValue = new v({ baseUrl: this.apiBase }), this.frame.addEventListener("load", () => this.handleFrameLoaded()), this.updateBrand(), this.setState("idle");
+      </section>`, this.frame = e.querySelector("iframe"), this.statusElement = e.querySelector(".status"), this.brandElement = e.querySelector(".brand"), this.brandImage = this.brandElement.querySelector("img"), this.brandText = this.brandElement.querySelector("span"), this.clientValue = new v({ baseUrl: this.apiBase }), this.updateBrand(), this.setState("idle");
   }
   connectedCallback() {
     globalThis.addEventListener("message", this.handleBridgeMessage);
@@ -8500,7 +8669,7 @@ class _ extends HTMLElement {
     } : e === "theme-mode" ? this.theme = {
       ...this.themeValue,
       mode: t || "light"
-    } : e === "script-policy" && this.responseValue && this.renderResponse(this.responseValue));
+    } : (e === "script-policy" || e === "layout-mode") && this.responseValue && this.renderResponse(this.responseValue));
   }
   get apiBase() {
     return this.getAttribute("api-base")?.trim() || "/api/v1";
@@ -8526,6 +8695,12 @@ class _ extends HTMLElement {
   set scriptPolicy(e) {
     this.setAttribute("script-policy", e);
   }
+  get layoutMode() {
+    return this.getAttribute("layout-mode") === "fidelity" ? "fidelity" : "responsive";
+  }
+  set layoutMode(e) {
+    this.setAttribute("layout-mode", e);
+  }
   get dictionaryIds() {
     return this.dictionaryIdsValue;
   }
@@ -8559,10 +8734,10 @@ class _ extends HTMLElement {
         return;
       this.setLookupResponse(r);
     } catch (r) {
-      if (n !== this.requestSequence || qe(r))
+      if (n !== this.requestSequence || Le(r))
         return;
-      const d = r instanceof Error ? r : new Error(String(r));
-      this.responseValue = void 0, this.frame.hidden = !0, this.setState("error", { word: t, error: d });
+      const l = r instanceof Error ? r : new Error(String(r));
+      this.responseValue = void 0, this.resetFrame(), this.setState("error", { word: t, error: l });
     } finally {
       n === this.requestSequence && (this.requestController = void 0);
     }
@@ -8571,21 +8746,38 @@ class _ extends HTMLElement {
     this.responseValue = e, this.renderResponse(e);
   }
   abort() {
-    this.requestController?.abort(), this.requestController = void 0;
+    this.requestController?.abort(), this.requestController = void 0, this.renderSequence += 1, this.resetFrame();
   }
   clear() {
-    this.abort(), this.requestSequence += 1, this.responseValue = void 0, this.frame.removeAttribute("srcdoc"), this.frame.hidden = !0, this.setState("idle");
+    this.abort(), this.requestSequence += 1, this.responseValue = void 0, this.setState("idle");
   }
   scrollToArticle(e) {
     this.postCommand({ type: "scroll-article", dictionaryId: e });
   }
   renderResponse(e) {
-    this.frame.style.height = "8rem", this.frame.srcdoc = Ie(e, {
+    const o = ++this.renderSequence, t = `${this.instanceId}-${o}`;
+    this.activeBridgeInstanceId = t;
+    const n = this.replaceFrame(!1);
+    n.title = e.word ? `Dictionary results for ${e.word}` : "Dictionary article";
+    const a = De(e, {
       apiBaseUrl: this.clientValue.baseUrl,
-      instanceId: this.instanceId,
+      instanceId: t,
       scriptPolicy: this.scriptPolicy,
+      layoutMode: this.layoutMode,
       theme: this.themeValue
-    }), this.frame.title = e.word ? `Dictionary results for ${e.word}` : "Dictionary article", this.frame.hidden = !1, this.statusElement.hidden = !0;
+    });
+    requestAnimationFrame(() => {
+      o !== this.renderSequence || n !== this.frame || (n.srcdoc = a, this.statusElement.hidden = !0);
+    });
+  }
+  resetFrame() {
+    this.activeBridgeInstanceId = void 0, this.replaceFrame(!0);
+  }
+  replaceFrame(e) {
+    const o = this.frame, t = this.ownerDocument.createElement("iframe");
+    return t.setAttribute("part", "article"), t.title = "Dictionary article", t.setAttribute("sandbox", "allow-scripts"), t.referrerPolicy = "no-referrer", t.style.height = "8rem", t.hidden = e, t.addEventListener("load", () => {
+      this.frame === t && t.hasAttribute("srcdoc") && this.handleFrameLoaded();
+    }), o.replaceWith(t), this.frame = t, t.offsetWidth, t;
   }
   handleFrameLoaded() {
     this.responseValue && (this.setState(
@@ -8597,7 +8789,7 @@ class _ extends HTMLElement {
     if (e.source !== this.frame.contentWindow)
       return;
     const o = e.data;
-    if (o.namespace !== "goldendict-web" || o.instanceId !== this.instanceId || !o.type)
+    if (o.namespace !== "goldendict-web" || o.instanceId !== this.activeBridgeInstanceId || !o.type)
       return;
     const t = o.detail ?? {};
     switch (o.type) {
@@ -8606,7 +8798,7 @@ class _ extends HTMLElement {
         break;
       case "height": {
         const n = Number(t.height);
-        Number.isFinite(n) && n > 0 && (this.frame.style.height = `${Math.min(Math.max(n, 128), 1e5)}px`);
+        Number.isFinite(n) && n > 0 && (this.frame.style.height = `${Math.min(Math.max(n, 128), 1e5)}px`, this.handleFrameLoaded());
         break;
       }
       case "lookup":
@@ -8682,10 +8874,10 @@ class _ extends HTMLElement {
     });
   }
   postCommand(e) {
-    this.frame.contentWindow?.postMessage(
+    this.activeBridgeInstanceId && this.frame.contentWindow?.postMessage(
       {
         namespace: "goldendict-web",
-        instanceId: this.instanceId,
+        instanceId: this.activeBridgeInstanceId,
         ...e
       },
       "*"
@@ -8701,26 +8893,26 @@ class _ extends HTMLElement {
     return this.dispatchEvent(n), n;
   }
 }
-function Le(i = "goldendict-view") {
+function Be(i = "goldendict-view") {
   if (!globalThis.customElements)
     return _;
   const e = globalThis.customElements.get(i);
   return e || (globalThis.customElements.define(i, _), _);
 }
-Le();
+Be();
 export {
-  ue as DARK_THEME_TOKENS,
-  E as DictionaryApiError,
+  ye as DARK_THEME_TOKENS,
+  q as DictionaryApiError,
   v as DictionaryClient,
   b as GOLDENDICT_EVENTS,
-  de as GOLDENDICT_SCHEME_SUPPORT,
+  se as GOLDENDICT_SCHEME_SUPPORT,
   _ as GoldenDictView,
-  ke as LIGHT_THEME_TOKENS,
+  xe as LIGHT_THEME_TOKENS,
   D as classifyArticleLink,
-  Le as defineGoldendictView,
-  x as escapeStyleText,
-  m as resolveResourceUrl,
-  xe as resolveThemeMode,
-  ye as themeToCss
+  Be as defineGoldendictView,
+  k as escapeStyleText,
+  p as resolveResourceUrl,
+  E as resolveThemeMode,
+  ve as themeToCss
 };
 //# sourceMappingURL=index.js.map