@orangeworks/orangetree 0.4.0

package/dist/public/ui.js

@@ -0,0 +1,372 @@
+import { t } from "./i18n.js";
+import { toast } from "./api.js";
+const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+function overlay() {
+  const o = document.createElement("div");
+  o.className = "ui-overlay";
+  document.body.append(o);
+  return o;
+}
+function formModal({ title, fields = [], submitLabel = t("common.confirm"), cancelLabel = t("common.cancel"), width = 460 }) {
+  return new Promise((resolve) => {
+    const o = overlay();
+    const box = document.createElement("div");
+    box.className = "ui-modal";
+    box.style.width = `min(${width}px, 94vw)`;
+    box.innerHTML = `<div class="ui-head"><b>${esc(title)}</b><button class="ui-x" type="button" aria-label="${esc(t("common.close"))}">\u2715</button></div>
+      <form class="ui-body"></form>
+      <div class="ui-foot"><button type="button" class="ui-cancel">${esc(cancelLabel)}</button>
+        <button type="button" class="ui-ok">${esc(submitLabel)}</button></div>`;
+    const form = box.querySelector(".ui-body");
+    for (const f of fields) {
+      const row = document.createElement("div");
+      row.className = "ui-field";
+      const id = `f_${f.name}`;
+      let control = "";
+      if (f.type === "textarea") {
+        control = `<textarea id="${id}" rows="${f.rows ?? 4}" placeholder="${esc(f.placeholder)}">${esc(f.value)}</textarea>`;
+      } else if (f.type === "select") {
+        control = `<select id="${id}">${(f.options ?? []).map((op) => `<option value="${esc(op.value)}"${op.value === f.value ? " selected" : ""}>${esc(op.label)}</option>`).join("")}</select>`;
+      } else if (f.type === "checkbox") {
+        control = `<label class="ui-check"><input type="checkbox" id="${id}"${f.value ? " checked" : ""}> ${esc(f.checkLabel ?? "")}</label>`;
+      } else if (f.type === "radio") {
+        const def = f.value ?? f.options[0]?.value;
+        control = `<div class="ui-radios">${f.options.map(
+          (op) => `<label class="ui-radio"><input type="radio" name="${id}" value="${esc(op.value)}"${op.value === def ? " checked" : ""}> <span><b>${esc(op.label)}</b>${op.hint ? `<em>${esc(op.hint)}</em>` : ""}</span></label>`
+        ).join("")}</div>`;
+      } else {
+        control = `<input type="text" id="${id}" value="${esc(f.value)}" placeholder="${esc(f.placeholder)}">`;
+      }
+      row.innerHTML = (f.label ? `<label class="ui-lbl" for="${id}">${esc(f.label)}</label>` : "") + control + (f.hint ? `<div class="ui-hint">${esc(f.hint)}</div>` : "");
+      form.append(row);
+    }
+    const close = (val) => {
+      o.remove();
+      document.removeEventListener("keydown", onKey);
+      resolve(val);
+    };
+    const collect = () => {
+      const out = {};
+      for (const f of fields) {
+        if (f.type === "checkbox") {
+          out[f.name] = box.querySelector(`#f_${f.name}`).checked;
+        } else if (f.type === "radio") {
+          out[f.name] = box.querySelector(`input[name="f_${f.name}"]:checked`)?.value ?? null;
+        } else {
+          out[f.name] = box.querySelector(`#f_${f.name}`).value;
+        }
+      }
+      return out;
+    };
+    const submit = () => close(collect());
+    const onKey = (e) => {
+      if (e.key === "Escape") close(null);
+      if (e.key === "Enter" && e.target.tagName !== "TEXTAREA") {
+        e.preventDefault();
+        submit();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    box.querySelector(".ui-x").onclick = () => close(null);
+    box.querySelector(".ui-cancel").onclick = () => close(null);
+    box.querySelector(".ui-ok").onclick = submit;
+    o.onclick = (e) => {
+      if (e.target === o) close(null);
+    };
+    o.append(box);
+    box.querySelector("input,textarea,select")?.focus();
+  });
+}
+function confirmModal({ title = t("common.confirm"), message = "", okLabel = t("common.confirm"), cancelLabel = t("common.cancel"), danger = false }) {
+  return new Promise((resolve) => {
+    const o = overlay();
+    const box = document.createElement("div");
+    box.className = "ui-modal";
+    box.style.width = "min(420px, 92vw)";
+    box.innerHTML = `<div class="ui-head"><b>${esc(title)}</b><button class="ui-x" type="button">\u2715</button></div>
+      <div class="ui-body"><p class="ui-msg">${esc(message).replace(/\n/g, "<br>")}</p></div>
+      <div class="ui-foot"><button type="button" class="ui-cancel">${esc(cancelLabel)}</button>
+        <button type="button" class="ui-ok${danger ? " danger" : ""}">${esc(okLabel)}</button></div>`;
+    const close = (v) => {
+      o.remove();
+      document.removeEventListener("keydown", onKey);
+      resolve(v);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") close(false);
+      if (e.key === "Enter") close(true);
+    };
+    document.addEventListener("keydown", onKey);
+    box.querySelector(".ui-x").onclick = () => close(false);
+    box.querySelector(".ui-cancel").onclick = () => close(false);
+    box.querySelector(".ui-ok").onclick = () => close(true);
+    o.onclick = (e) => {
+      if (e.target === o) close(false);
+    };
+    o.append(box);
+    box.querySelector(".ui-ok").focus();
+  });
+}
+const REPORT_IMG = {
+  maxCount: 6,
+  maxBytesEach: 3 * 1024 * 1024,
+  maxBytesTotal: 8 * 1024 * 1024,
+  mimes: ["image/png", "image/jpeg", "image/gif", "image/webp"],
+  accept: "image/png,image/jpeg,image/gif,image/webp"
+};
+function reportModal({ body = "", title = "" } = {}) {
+  return new Promise((resolve) => {
+    const o = overlay();
+    const box = document.createElement("div");
+    box.className = "ui-modal";
+    box.style.width = "min(560px, 94vw)";
+    box.innerHTML = `<div class="ui-head"><b>${esc(t("report.title"))}</b><button class="ui-x" type="button" aria-label="${esc(t("common.close"))}">\u2715</button></div>
+      <form class="ui-body">
+        <div class="ui-field">
+          <label class="ui-lbl" for="report-title">${esc(t("report.field.title"))}</label>
+          <input type="text" id="report-title" value="${esc(title)}" placeholder="${esc(t("report.field.titlePh"))}">
+        </div>
+        <div class="ui-field">
+          <label class="ui-lbl" for="report-body">${esc(t("report.field.body"))}
+            <button type="button" class="report-copy" title="${esc(t("report.copy"))}">\u{1F4CB} ${esc(t("report.copy"))}</button>
+          </label>
+          <textarea id="report-body" rows="10" placeholder="${esc(t("report.field.bodyPh"))}"></textarea>
+        </div>
+        <div class="ui-field">
+          <label class="ui-lbl">${esc(t("report.field.images"))}
+            <button type="button" class="report-attach" title="${esc(t("report.attach.title"))}">\u{1F5BC} ${esc(t("report.attach"))}</button>
+          </label>
+          <div class="report-imgs" hidden></div>
+          <div class="ui-hint">${esc(t("report.images.hint"))}</div>
+          <input type="file" class="report-file" accept="${REPORT_IMG.accept}" multiple hidden>
+        </div>
+      </form>
+      <div class="ui-foot"><button type="button" class="ui-cancel">${esc(t("common.cancel"))}</button>
+        <button type="button" class="ui-ok">${esc(t("report.submit"))}</button></div>`;
+    const titleEl = box.querySelector("#report-title");
+    const bodyEl = box.querySelector("#report-body");
+    bodyEl.value = body;
+    const fileEl = box.querySelector(".report-file");
+    const imgsEl = box.querySelector(".report-imgs");
+    const images = [];
+    const totalBytes = () => images.reduce((sum, im) => sum + base64Bytes(im.dataBase64), 0);
+    const renderImgs = () => {
+      imgsEl.replaceChildren();
+      imgsEl.hidden = !images.length;
+      images.forEach((im, i) => {
+        const chip = document.createElement("div");
+        chip.className = "att-chip";
+        const thumb = document.createElement("img");
+        thumb.src = im.url;
+        chip.append(thumb);
+        const name = document.createElement("span");
+        name.className = "att-name";
+        name.textContent = im.name;
+        chip.append(name);
+        const x = document.createElement("button");
+        x.type = "button";
+        x.className = "att-x";
+        x.textContent = "\u2715";
+        x.title = t("report.image.remove");
+        x.onclick = () => {
+          URL.revokeObjectURL(im.url);
+          images.splice(i, 1);
+          renderImgs();
+        };
+        chip.append(x);
+        imgsEl.append(chip);
+      });
+    };
+    const addFile = async (file) => {
+      if (!REPORT_IMG.mimes.includes(file.type)) {
+        toast(t("report.toast.badType"), "error");
+        return;
+      }
+      if (images.length >= REPORT_IMG.maxCount) {
+        toast(t("report.toast.tooMany", { n: REPORT_IMG.maxCount }), "error");
+        return;
+      }
+      if (file.size > REPORT_IMG.maxBytesEach) {
+        toast(t("report.toast.tooLarge", { mb: 3 }), "error");
+        return;
+      }
+      let dataUrl;
+      try {
+        dataUrl = await readAsDataURL(file);
+      } catch {
+        toast(t("report.toast.readFail"), "error");
+        return;
+      }
+      const comma = dataUrl.indexOf(",");
+      const dataBase64 = comma >= 0 ? dataUrl.slice(comma + 1) : "";
+      if (!dataBase64) {
+        toast(t("report.toast.readFail"), "error");
+        return;
+      }
+      if (totalBytes() + base64Bytes(dataBase64) > REPORT_IMG.maxBytesTotal) {
+        toast(t("report.toast.tooLargeTotal", { mb: 8 }), "error");
+        return;
+      }
+      images.push({ name: file.name || "image.png", mime: file.type, dataBase64, url: URL.createObjectURL(file) });
+      renderImgs();
+    };
+    const addFiles = (files) => {
+      for (const f of files) void addFile(f);
+    };
+    const close = (val) => {
+      for (const im of images) URL.revokeObjectURL(im.url);
+      o.remove();
+      document.removeEventListener("keydown", onKey);
+      resolve(val);
+    };
+    const submit = () => {
+      const ti = titleEl.value.trim();
+      const bo = bodyEl.value.trim();
+      if (!ti || !bo) {
+        toast(t("report.toast.required"), "error");
+        return;
+      }
+      close({ title: ti, body: bo, images: images.map(({ name, mime, dataBase64 }) => ({ name, mime, dataBase64 })) });
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") close(null);
+      if (e.key === "Enter" && e.target.tagName !== "TEXTAREA") {
+        e.preventDefault();
+        submit();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    box.querySelector(".report-copy").onclick = () => {
+      void copyText(bodyEl.value);
+    };
+    box.querySelector(".report-attach").onclick = () => fileEl.click();
+    fileEl.onchange = () => {
+      addFiles(Array.from(fileEl.files ?? []));
+      fileEl.value = "";
+    };
+    box.addEventListener("paste", (e) => {
+      const files = [...e.clipboardData?.items ?? []].filter((it) => it.kind === "file").map((it) => it.getAsFile()).filter((f) => !!f && /^image\//.test(f.type));
+      if (!files.length) return;
+      e.preventDefault();
+      addFiles(files);
+    });
+    box.querySelector(".ui-x").onclick = () => close(null);
+    box.querySelector(".ui-cancel").onclick = () => close(null);
+    box.querySelector(".ui-ok").onclick = submit;
+    o.onclick = (e) => {
+      if (e.target === o) close(null);
+    };
+    o.append(box);
+    (title ? bodyEl : titleEl).focus();
+  });
+}
+function readAsDataURL(file) {
+  return new Promise((resolve, reject) => {
+    const fr = new FileReader();
+    fr.onload = () => resolve(String(fr.result ?? ""));
+    fr.onerror = () => reject(fr.error ?? new Error("read failed"));
+    fr.readAsDataURL(file);
+  });
+}
+function base64Bytes(b64) {
+  const len = b64.length;
+  if (!len) return 0;
+  let pad = 0;
+  if (b64[len - 1] === "=") pad++;
+  if (b64[len - 2] === "=") pad++;
+  return Math.floor(len * 3 / 4) - pad;
+}
+async function copyText(text) {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+    } else {
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.append(ta);
+      ta.select();
+      document.execCommand("copy");
+      ta.remove();
+    }
+    toast(t("report.toast.copied"), "success");
+    return true;
+  } catch {
+    toast(t("report.toast.copyFail"), "error");
+    return false;
+  }
+}
+let closeOpenMenu = null;
+function popover(entries, anchor) {
+  closeOpenMenu?.();
+  const menu = document.createElement("div");
+  menu.className = "ui-menu";
+  const close = () => {
+    if (closeOpenMenu !== close) return;
+    closeOpenMenu = null;
+    menu.remove();
+    document.removeEventListener("keydown", onKey, true);
+    document.removeEventListener("pointerdown", onOutside, true);
+    window.removeEventListener("blur", close);
+    window.removeEventListener("resize", close);
+    window.removeEventListener("scroll", close, true);
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      close();
+    }
+  };
+  const onOutside = (e) => {
+    if (!menu.contains(e.target)) close();
+  };
+  for (const it of entries) {
+    if (it === "separator") {
+      const s = document.createElement("div");
+      s.className = "ui-menu-sep";
+      menu.append(s);
+      continue;
+    }
+    if (it.hidden) continue;
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "ui-menu-item" + (it.danger ? " danger" : "");
+    b.textContent = it.label;
+    if (it.title) b.title = it.title;
+    b.disabled = !!it.disabled;
+    b.addEventListener("click", () => {
+      close();
+      it.onClick();
+    });
+    menu.append(b);
+  }
+  document.body.append(menu);
+  const isRect = "bottom" in anchor && "left" in anchor;
+  const ax = isRect ? anchor.left : anchor.x;
+  const ay = isRect ? anchor.bottom : anchor.y;
+  const r = menu.getBoundingClientRect();
+  const margin = 8;
+  let left = ax;
+  let top = ay;
+  if (left + r.width > window.innerWidth - margin) left = Math.max(margin, window.innerWidth - r.width - margin);
+  if (top + r.height > window.innerHeight - margin) top = Math.max(margin, ay - r.height);
+  menu.style.left = `${left}px`;
+  menu.style.top = `${top}px`;
+  closeOpenMenu = close;
+  setTimeout(() => {
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onOutside, true);
+    window.addEventListener("blur", close);
+    window.addEventListener("resize", close);
+    window.addEventListener("scroll", close, true);
+  }, 0);
+  return close;
+}
+export {
+  confirmModal,
+  copyText,
+  formModal,
+  popover,
+  reportModal
+};

package/dist/public/viewer.html

@@ -0,0 +1,156 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Orange Tree</title>
+  <script>
+    /* Set UI locale before render (shared localStorage with the main window) — no flash. */
+    (function () { try { var lo = localStorage.getItem('otree-locale'); if (lo === 'ko' || lo === 'en' || lo === 'ja') document.documentElement.lang = lo; } catch (e) {} })();
+  </script>
+  <style>
+    * { box-sizing: border-box; margin: 0; }
+    html, body { height: 100%; font-family: system-ui, sans-serif; background: #1a1816; color: #d4d0c8; }
+    body { display: flex; flex-direction: column; }
+    #tabs { display: flex; gap: 2px; background: #232020; padding: 6px 8px 0; overflow-x: auto; flex-shrink: 0; }
+    .tab { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #2c2825; border-radius: 8px 8px 0 0;
+           font-size: 12px; cursor: pointer; white-space: nowrap; color: #9a9088; max-width: 220px; }
+    .tab.active { background: #14110f; color: #f0ece4; }
+    .tab span { overflow: hidden; text-overflow: ellipsis; }
+    .tab .x { font-size: 11px; color: #8a8078; }
+    .tab .x:hover { color: #f87171; }
+    #body { flex: 1; overflow: auto; background: #14110f; }
+    .pane { display: none; padding: 0; }
+    .pane.active { display: block; }
+    .doc { max-width: 860px; margin: 0 auto; padding: 28px 32px; font-size: 14.5px; line-height: 1.7; color: #d4d0c8; }
+    .doc h1 { font-size: 22px; margin: 16px 0 10px; color: #f0934a; }
+    .doc h2 { font-size: 18px; margin: 14px 0 8px; color: #ece8e0; }
+    .doc h3 { font-size: 15px; margin: 12px 0 6px; color: #ece8e0; }
+    .doc p { margin: 8px 0; white-space: pre-wrap; }
+    .doc ul, .doc ol { margin: 8px 0; padding-left: 26px; }
+    .doc li { margin: 3px 0; }
+    .doc blockquote { border-left: 3px solid #7a5c2e; padding-left: 10px; color: #9a9088; margin: 8px 0; }
+    .doc pre { background: #0d0b0a; color: #d8d4cc; padding: 12px; border-radius: 8px; overflow-x: auto; font-size: 12.5px; }
+    .doc code { background: #2c2825; color: #e8b88a; padding: 1px 4px; border-radius: 4px; font-size: 12.5px; }
+    .doc hr { border: none; border-top: 1px solid #3a352f; margin: 14px 0; }
+    .doc table { border-collapse: collapse; margin: 10px 0; font-size: 13px; }
+    .doc th, .doc td { border: 1px solid #3a352f; padding: 5px 10px; text-align: left; }
+    .doc th { background: #232020; font-weight: 600; }
+    .doc a { color: #6ab0ef; }
+    .media { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 20px; background: #0a0908; }
+    .media img, .media video { max-width: 100%; max-height: calc(100vh - 80px); border-radius: 6px; }
+    .plain { padding: 20px 26px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; white-space: pre-wrap; word-break: break-all; color: #d4d0c8; }
+    .code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.55; padding: 14px 0; color: #d4d0c8; }
+    .code .ln { display: flex; }
+    .code .no { width: 52px; flex-shrink: 0; text-align: right; padding-right: 14px; color: #5a554d; user-select: none; }
+    .code .ct { white-space: pre-wrap; word-break: break-all; flex: 1; padding-right: 16px; }
+    .code .ln:hover { background: #1f1b18; }
+    .tok-str { color: #7ec699; } .tok-com { color: #6f675c; font-style: italic; }
+    .tok-kw { color: #f08a7a; } .tok-num { color: #79b8ff; }
+    #empty { padding: 40px; text-align: center; color: #6f675c; font-size: 14px; }
+  </style>
+</head>
+<body>
+  <div id="tabs"></div>
+  <div id="body"><div id="empty"></div></div>
+  <script type="module">
+    import { mdDoc, esc } from '/md.js';
+    import { t } from '/i18n.js';
+
+    document.title = t('viewer.title');
+    const emptyHtml = () => `<div id="empty">${esc(t('viewer.empty'))}</div>`;
+
+    const tabs = []; // { path, $tab, $pane }
+    let active = null;
+    const $tabs = document.getElementById('tabs');
+    const $body = document.getElementById('body');
+
+    const IMG = /\.(png|jpe?g|gif|webp|svg|ico|bmp)$/i;
+    const VID = /\.(mp4|webm|mov|ogg)$/i;
+    const AUD = /\.(mp3|wav|m4a)$/i;
+    const CODE = /\.(mjs|js|ts|jsx|tsx|css|html|json|py|sh|sql|yml|yaml)$/i;
+
+    const KW = /\b(const|let|var|function|class|return|if|else|for|while|of|in|import|export|from|await|async|new|try|catch|finally|throw|switch|case|break|continue|default|typeof|instanceof|this|null|undefined|true|false|def|elif|lambda|print|select|insert|update|delete|where)\b/;
+    function highlight(src) {
+      const re = /(\/\/[^\n]*|\/\*[\s\S]*?\*\/|#[^\n]*|"(?:[^"\\\n]|\\.)*"|'(?:[^'\\\n]|\\.)*'|`(?:[^`\\]|\\.)*`|\b\d[\d_.]*\b|[A-Za-z_$][\w$]*)/g;
+      let out = '', last = 0, m;
+      while ((m = re.exec(src))) {
+        out += esc(src.slice(last, m.index));
+        const t = m[0];
+        if (/^(\/\/|\/\*|#)/.test(t)) out += `<span class="tok-com">${esc(t)}</span>`;
+        else if (/^["'\`]/.test(t)) out += `<span class="tok-str">${esc(t)}</span>`;
+        else if (/^\d/.test(t)) out += `<span class="tok-num">${esc(t)}</span>`;
+        else if (KW.test(t)) out += `<span class="tok-kw">${esc(t)}</span>`;
+        else out += esc(t);
+        last = m.index + t.length;
+      }
+      return out + esc(src.slice(last));
+    }
+
+    function codeView(text) {
+      const lines = highlight(text).split('\n');
+      return `<div class="code">${lines.map((l, i) =>
+        `<div class="ln"><span class="no">${i + 1}</span><span class="ct">${l || ' '}</span></div>`).join('')}</div>`;
+    }
+
+    async function renderPane(path, $pane) {
+      try {
+        if (IMG.test(path)) { $pane.innerHTML = `<div class="media"><img src="/api/raw?path=${encodeURIComponent(path)}"></div>`; return; }
+        if (VID.test(path)) { $pane.innerHTML = `<div class="media"><video controls src="/api/raw?path=${encodeURIComponent(path)}"></video></div>`; return; }
+        if (AUD.test(path)) { $pane.innerHTML = `<div class="media"><audio controls src="/api/raw?path=${encodeURIComponent(path)}"></audio></div>`; return; }
+        const res = await fetch(`/api/file?path=${encodeURIComponent(path)}`);
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error);
+        if (/\.md$/i.test(path)) $pane.innerHTML = `<div class="doc">${mdDoc(data.content)}</div>`;
+        else if (CODE.test(path)) $pane.innerHTML = codeView(data.content);
+        else $pane.innerHTML = `<div class="plain">${esc(data.content)}</div>`;
+      } catch (err) {
+        $pane.innerHTML = `<div id="empty">${esc(t('viewer.openFail', { msg: String(err.message ?? err) }))}</div>`;
+      }
+    }
+
+    function activate(path) {
+      active = path;
+      for (const t of tabs) {
+        t.$tab.classList.toggle('active', t.path === path);
+        t.$pane.classList.toggle('active', t.path === path);
+      }
+      document.title = `${path.split('/').pop()} — ${t('viewer.title')}`;
+    }
+
+    function closeTab(path) {
+      const i = tabs.findIndex((t) => t.path === path);
+      if (i < 0) return;
+      tabs[i].$tab.remove(); tabs[i].$pane.remove();
+      tabs.splice(i, 1);
+      if (active === path) tabs.length ? activate(tabs[Math.max(0, i - 1)].path) : (active = null);
+      if (!tabs.length) $body.innerHTML = emptyHtml();
+    }
+
+    function openTab(path) {
+      const found = tabs.find((t) => t.path === path);
+      if (found) { renderPane(path, found.$pane); activate(path); return; }
+      document.getElementById('empty')?.remove();
+      const $tab = document.createElement('div');
+      $tab.className = 'tab';
+      $tab.innerHTML = `<span>${esc(path.split('/').pop())}</span><b class="x">✕</b>`;
+      $tab.title = path;
+      $tab.onclick = () => activate(path);
+      $tab.querySelector('.x').onclick = (e) => { e.stopPropagation(); closeTab(path); };
+      const $pane = document.createElement('div');
+      $pane.className = 'pane';
+      $tabs.append($tab); $body.append($pane);
+      tabs.push({ path, $tab, $pane });
+      renderPane(path, $pane);
+      activate(path);
+    }
+
+    new BroadcastChannel('otree-viewer').onmessage = (e) => {
+      if (e.data?.path) { openTab(e.data.path); window.focus(); }
+    };
+
+    const first = new URLSearchParams(location.search).get('path');
+    if (first) openTab(first);
+    else $body.innerHTML = emptyHtml(); // localize the empty-state placeholder
+  </script>
+</body>
+</html>