@panda-lingo/goldendict 0.1.1 → 0.1.3

package/README.md

@@ -28,6 +28,24 @@ scrollable, unwraps common floated wiki panels on narrow screens, and keeps
 article headers usable with coarse pointers. The pinned GoldenDict-ng CSS stays
 unchanged so upstream updates remain straightforward.
 
+For GoldenDict-compatible article geometry, select the fidelity layout. This
+omits the browser override layer so the upstream body margin, content-box model,
+dictionary header flow, and dictionary-authored CSS cascade remain intact.
+Script permission is independent: a dictionary may require both fidelity layout
+and sandboxed sidecar JavaScript.
+
+```ts
+view.layoutMode = "fidelity";
+view.scriptPolicy = "sandboxed";
+```
+
+The default `layoutMode` is `"responsive"`; the bundled demo deliberately uses
+`"fidelity"` so it can be compared directly with GoldenDict-ng. Consumers can
+also set `layout-mode="fidelity"` on the custom element.
+
+Compare at the same CSS viewport, device scale, and GoldenDict zoom: those host
+browser settings still affect physical pixel size and line wrapping.
+
 ```css
 .dictionary-column {
   min-width: 0;
@@ -59,10 +77,11 @@ explicit `"sandboxed"` policy retains them inside the iframe, which never gets
 `allow-same-origin`. Lookup, media, and external-link events are cancelable so a
 host application can replace the default navigation behavior.
 
-The bundled demo deliberately selects `"sandboxed"` for locally mounted
-dictionaries so script-dependent formats such as OALDPE render with their full
-GoldenDict typography and interactions. This demo choice does not change the
-component's safer `"none"` default for consumers.
+The bundled demo deliberately selects `"sandboxed"` scripts and `"fidelity"`
+layout for locally mounted dictionaries so script-dependent formats such as
+OALDPE render with their GoldenDict typography, geometry, and interactions.
+These demo choices do not change the component defaults (`"none"` scripts and
+`"responsive"` layout) for consumers.
 
 In sandboxed mode, external sidecars such as `bres://.../Dictionary-UI.js` are
 routed through the article's `resourceBaseUrl` without changing filename case.

package/dist/element/goldendict-view.d.ts

@@ -1,5 +1,5 @@
 import { DictionaryClient } from "../client/dictionary-client";
-import type { DictionaryClientOptions, GoldenDictTheme, LookupResponse, ScriptPolicy, ViewState } from "../types";
+import type { ArticleLayoutMode, DictionaryClientOptions, GoldenDictTheme, LookupResponse, ScriptPolicy, ViewState } from "../types";
 export declare class GoldenDictView extends HTMLElement {
     static readonly observedAttributes: string[];
     readonly instanceId: string;
@@ -30,6 +30,8 @@ export declare class GoldenDictView extends HTMLElement {
     set theme(value: GoldenDictTheme);
     get scriptPolicy(): ScriptPolicy;
     set scriptPolicy(value: ScriptPolicy);
+    get layoutMode(): ArticleLayoutMode;
+    set layoutMode(value: ArticleLayoutMode);
     get dictionaryIds(): readonly string[];
     set dictionaryIds(value: readonly string[]);
     get state(): ViewState;

package/dist/element/goldendict-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"goldendict-view.d.ts","sourceRoot":"","sources":["../../src/element/goldendict-view.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"goldendict-view.d.ts","sourceRoot":"","sources":["../../src/element/goldendict-view.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -311,7 +311,7 @@ const M = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
      x="1.1215118e-09"
      y="4.9718442"
      ry="0.64957041" /></svg>
-`, 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"?>
+`, R = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAATrAAAE6wHYKlsNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAcRJREFUOI2lkztvE0EQgL8Z7/rB2T5fCixhQQc00FAjJCRkiTYV/JH0adIgfgJVGn4CKRBUSIjCHYiOBimK7KA4ORw/dofC3Ck2dhpGGu1r5pvZmV0xM/5HXDEZDAbf2u12BkiM0UIImBlmRoyxHBeLBaPRaNzv9++tAJIkyVS1673HzBCRUtfFzEo/d/VAVRERzvf2uDw6AqB6eMhlt1va9Hq9FWgJiDEiIqgqcTwmnp4CUPeearu9EmRjDYp7qiqVNEV3dgCYx8hlniMimBlZlm0GFN0QERoHB7j9/bIGVUDiHCrVfzLQqwDvPSLCZDIhz3MuLi6YTye4eY58fkOnUbkeUERMkoRWq0WaptRqDaYfXvPr3StmP75cX4PZbIb3HoDx6TmttImveZoPn9N+0KfWvbsdYGY45xARvn76zvu3H8m6GS/2dpnefLRsb4Bb2wAhBJxbLoc/hwCcDc9QqVCvuzLy+uPa2IUnu4+p36hz5/5tGkmdxWKBc45Op0MIYXsNClAzTXj28imquqKFzUbA8fHxbzMbi0glhKBmpsuEREQkqmpU1Sgi8eTkJC/8ZNN3FhEHNIHG360pkJvZdN32D0SOwDehr1HXAAAAAElFTkSuQmCC", G = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
@@ -357,7 +357,7 @@ const M = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
        sodipodi:nodetypes="cccc" />
   </g>
 </svg>
-`, G = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+`, N = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
@@ -731,9 +731,9 @@ const u = {
   "collapse_article_hovered.svg": s($),
   "collapse_opt.svg": s(P),
   "document.png": R,
-  "downarrow.svg": s(N),
+  "downarrow.svg": s(G),
   "expand_article.svg": s(O),
-  "expand_article_hovered.svg": s(G),
+  "expand_article_hovered.svg": s(N),
   "expand_opt.svg": s(V),
   "old-arrow.svg": s(H),
   "old-downarrow.svg": s(W),
@@ -8076,8 +8076,8 @@ function p(i, e) {
   try {
     t = new URL(i);
   } catch {
-    const l = S(e);
-    return l ? pe(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))
@@ -8088,7 +8088,7 @@ function p(i, e) {
       ...e,
       iconUrl: void 0
     }) : A("qrc:///icons/document.png") ?? "";
-  const r = me(t), d = `${e.apiBaseUrl.replace(/\/+$/, "")}/dictionaries/${encodeURIComponent(a)}/resources`, m = I(S(e) ?? d, r);
+  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 ge(i) {
@@ -8103,8 +8103,8 @@ function ge(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, m] = r.split("#", 2), [l, w] = (d ?? "").split("?", 2);
-    t = l ?? "", n = new URLSearchParams(w ?? "").get("gdanchor") ?? (m || 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",
@@ -8154,10 +8154,10 @@ function fe(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: p(d || e, o)
+        url: p(l || e, o)
       };
     }
   const n = i.getAttribute("data-gd-action")?.trim().toLowerCase();
@@ -8170,8 +8170,8 @@ function fe(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" };
@@ -8243,25 +8243,25 @@ function ue(i, e, o) {
   }), o === "none" && a.querySelectorAll("script").forEach((r) => r.remove());
   for (const r of a.querySelectorAll("*")) {
     if (ke(r), o === "none")
-      for (const l of [...r.attributes])
-        (/^on/i.test(l.name) || l.name.toLowerCase() === "srcdoc") && r.removeAttribute(l.name);
+      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 && we(
+      const d = r.getAttribute("href");
+      d !== null && we(
         r,
-        fe(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") ?? "";
-      x(l) || r.setAttribute("href", p(l, t));
+      const d = r.getAttribute("href") ?? "";
+      x(d) || r.setAttribute("href", p(d, t));
     }
-    for (const l of he) {
-      const w = r.getAttribute(l);
-      w === null || x(w) || (/^(?:javascript|vbscript|file):/i.test(w) ? r.removeAttribute(l) : r.setAttribute(l, p(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", be(d, t));
+    const l = r.getAttribute("srcset");
+    l && r.setAttribute("srcset", be(l, t));
     const m = r.getAttribute("style");
     m && r.setAttribute(
       "style",
@@ -8362,7 +8362,7 @@ function Ae(i, e) {
   }) : u["document.png"];
 }
 function Se(i, e, o) {
-  const t = g(i.dictionaryId), n = _e(i.dictionaryId), a = ue(i, e, o), r = ze(i.sourceLanguage), d = g(i.targetLanguage ?? ""), m = g(Ae(i, e));
+  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}"
@@ -8375,9 +8375,9 @@ function Se(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 Ce(i) {
@@ -8564,25 +8564,29 @@ function Ie(i, e) {
     "base-uri 'none'"
   ].join("; ");
 }
-function De(i, e) {
-  const o = e.theme ?? {}, t = E(o.mode), n = e.instanceId.replace(/[^a-zA-Z0-9_-]/g, ""), a = i.articles.map(
-    (m) => Se(m, e.apiBaseUrl, e.scriptPolicy)
-  ).join(""), r = a ? `${a}<div class="empty-space" aria-hidden="true"></div>` : `<div class="gdnotfound"><p>No translation for <b>${g(i.word)}</b> was found.</p></div>`, d = o.brandName ? `${i.word} — ${o.brandName}` : i.word;
+function De() {
+  return 'globalThis.__DICT__={name:"GoldenDict",version:"web"};';
+}
+function Ee(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 data-gd-theme="${t}" data-darkreader-scheme="${t}"><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(Ie(e.scriptPolicy, n))}">
-  <title>${g(d)}</title>
+  <meta http-equiv="Content-Security-Policy" content="${g(Ie(e.scriptPolicy, a))}">
+  <title>${g(m)}</title>
+  <script nonce="${a}" data-gd-runtime="compatibility">${De()}<\/script>
   <style>${k(re)}</style>
   <style>${k(de(o.preset))}</style>
-  <style data-gd-style="responsive">${k(le)}</style>
+  ${n === "responsive" ? `<style data-gd-style="responsive">${k(le)}</style>` : ""}
   <style>${ve(o)}</style>
   <style media="print">${k(ae)}</style>
 </head><body>
-  ${r}
+  ${l}
   ${Ce(i.suggestions)}
-  <script nonce="${n}">${Te(e.instanceId, t).replace(/<\/script/gi, "<\\/script")}<\/script>
+  <script nonce="${a}">${Te(e.instanceId, t).replace(/<\/script/gi, "<\\/script")}<\/script>
 </body></html>`;
 }
 const b = {
@@ -8592,7 +8596,7 @@ const b = {
   mediaRequest: "goldendict-media-request",
   externalLink: "goldendict-external-link",
   stateChange: "goldendict-state-change"
-}, Ee = `
+}, qe = `
   :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}
@@ -8610,10 +8614,10 @@ const b = {
   @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 qe() {
+function Le() {
   return globalThis.crypto?.randomUUID?.() ?? `gd-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
 }
-function Le(i) {
+function Be(i) {
   return (i instanceof DOMException || i instanceof Error) && i.name === "AbortError";
 }
 class _ extends HTMLElement {
@@ -8622,9 +8626,10 @@ class _ extends HTMLElement {
     "word",
     "preset",
     "theme-mode",
-    "script-policy"
+    "script-policy",
+    "layout-mode"
   ];
-  instanceId = qe();
+  instanceId = Le();
   frame;
   statusElement;
   brandElement;
@@ -8643,7 +8648,7 @@ class _ extends HTMLElement {
   constructor() {
     super();
     const e = this.attachShadow({ mode: "open" });
-    e.innerHTML = `<style>${Ee}</style>
+    e.innerHTML = `<style>${qe}</style>
       <section class="shell" part="container">
         <div class="brand" part="brand" hidden>
           <img alt="" hidden><span></span>
@@ -8668,7 +8673,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";
@@ -8694,6 +8699,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;
   }
@@ -8727,10 +8738,10 @@ class _ extends HTMLElement {
         return;
       this.setLookupResponse(r);
     } catch (r) {
-      if (n !== this.requestSequence || Le(r))
+      if (n !== this.requestSequence || Be(r))
         return;
-      const d = r instanceof Error ? r : new Error(String(r));
-      this.responseValue = void 0, this.resetFrame(), 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);
     }
@@ -8752,10 +8763,11 @@ class _ extends HTMLElement {
     this.activeBridgeInstanceId = t;
     const n = this.replaceFrame(!1);
     n.title = e.word ? `Dictionary results for ${e.word}` : "Dictionary article";
-    const a = De(e, {
+    const a = Ee(e, {
       apiBaseUrl: this.clientValue.baseUrl,
       instanceId: t,
       scriptPolicy: this.scriptPolicy,
+      layoutMode: this.layoutMode,
       theme: this.themeValue
     });
     requestAnimationFrame(() => {
@@ -8885,13 +8897,13 @@ class _ extends HTMLElement {
     return this.dispatchEvent(n), n;
   }
 }
-function Be(i = "goldendict-view") {
+function Me(i = "goldendict-view") {
   if (!globalThis.customElements)
     return _;
   const e = globalThis.customElements.get(i);
   return e || (globalThis.customElements.define(i, _), _);
 }
-Be();
+Me();
 export {
   ye as DARK_THEME_TOKENS,
   q as DictionaryApiError,
@@ -8901,7 +8913,7 @@ export {
   _ as GoldenDictView,
   xe as LIGHT_THEME_TOKENS,
   D as classifyArticleLink,
-  Be as defineGoldendictView,
+  Me as defineGoldendictView,
   k as escapeStyleText,
   p as resolveResourceUrl,
   E as resolveThemeMode,