@heycys/gallery 0.0.0-stage → 0.1.1

package/kit/ui.js

@@ -0,0 +1,658 @@
+"use strict";
+(() => {
+  // src/shared/components/installed.mjs
+  var ATTRIBUTE = "data-doc-component";
+  var INSTANCE = `div[${ATTRIBUTE}], section[${ATTRIBUTE}]`;
+  var SLOT = "data-doc-slot";
+  var SLOT_PART = `div[${SLOT}], section[${SLOT}]`;
+  var REGION = `${INSTANCE}, ${SLOT_PART}`;
+  var PACKAGE_MARK = "data-doc-package";
+  var DATA_MOST = 1024 * 1024;
+
+  // src/shared/components/mention.mjs
+  var MENTION = "doc-link-mention";
+  var MENTION_ICON = "doc-link-mention-icon";
+  var MENTION_PAGE = "data-doc-page";
+  var mention_default = {
+    id: "mention",
+    attrs: {
+      [MENTION_PAGE]: "a page block left empty, which has no address to say it is one"
+    },
+    classes: [MENTION, MENTION_ICON],
+    runtime: {
+      attrs: { "a.doc-link-mention": ["data-doc-gone"] }
+      // a page block whose document is not there (render/page-chips.mjs)
+    }
+  };
+
+  // src/shared/css-references.mjs
+  var CSS_URLS = /url\(\s*(?:"([^"]*)"|'([^']*)'|([^)\s]*))\s*\)/dgi;
+  var CSS_IMPORTS = /@import\s*(?:"([^"]*)"|'([^']*)')/dgi;
+  var IMAGE_SETS = /image-set\(((?:[^()]|\([^()]*\))*)\)/dgi;
+  var SET_STRINGS = /url\([^)]*\)|"([^"]*)"|'([^']*)'/dgi;
+  var UNQUOTED_URL = /url\(\s*[^"'\s)][^)]*\)?/iy;
+  function blankedCss(css, { strings = false } = {}) {
+    const pieces = [];
+    let kept = 0;
+    const blank = (start, end) => {
+      pieces.push(css.slice(kept, start), css.slice(start, end).replace(/[^\r\n]/g, " "));
+      kept = end;
+    };
+    for (let at = 0; at < css.length; ) {
+      const char = css[at];
+      UNQUOTED_URL.lastIndex = at;
+      if (char === "\\") at += 2;
+      else if (char === "/" && css[at + 1] === "*") {
+        const close = css.indexOf("*/", at + 2);
+        const end = close < 0 ? css.length : close + 2;
+        blank(at, end);
+        at = end;
+      } else if (char === '"' || char === "'") {
+        let end = at + 1;
+        while (end < css.length && css[end] !== char && css[end] !== "\n" && css[end] !== "\r") end += css[end] === "\\" ? 2 : 1;
+        if (!strings) blank(at + 1, Math.min(end, css.length));
+        at = end + 1;
+      } else if ((char === "u" || char === "U") && UNQUOTED_URL.test(css)) at = UNQUOTED_URL.lastIndex;
+      else at++;
+    }
+    pieces.push(css.slice(kept));
+    return pieces.join("");
+  }
+  var unescapedCss = (value) => value.replace(/\\(?:([0-9a-f]{1,6})[ \t\n\f]?|\r\n|([\s\S]))/gi, (escape, hex, char) => {
+    if (hex === void 0) return char === void 0 || /[\r\n\f]/.test(char) ? "" : char;
+    const code = parseInt(hex, 16);
+    return code === 0 || code > 1114111 || code >= 55296 && code <= 57343 ? String.fromCharCode(65533) : String.fromCodePoint(code);
+  });
+  function afterImport(text, at) {
+    let end = at;
+    while (end > 0 && /\s/.test(text[end - 1])) end--;
+    return text.slice(Math.max(0, end - 7), end).toLowerCase() === "@import";
+  }
+  function cssReferences(css) {
+    const text = blankedCss(css);
+    const found = [];
+    const add = (match, kind, written, { index = match.index, offset = 0 } = {}) => {
+      const group = [1, 2, 3].find((at) => match[at] !== void 0);
+      const start = offset + match.indices[group][0];
+      const end = offset + match.indices[group][1];
+      const value = unescapedCss(css.slice(start, end)).trim();
+      found.push({ value, kind, index, start, end, written: written(value) });
+    };
+    for (const match of text.matchAll(CSS_URLS)) {
+      if (afterImport(text, match.index)) add(match, "import", (value) => `@import url(${value})`);
+      else add(match, "url", (value) => `url(${value})`);
+    }
+    for (const match of text.matchAll(CSS_IMPORTS)) add(match, "import", (value) => `@import "${value}"`);
+    for (const set of text.matchAll(IMAGE_SETS)) {
+      const offset = set.indices[1][0];
+      for (const match of set[1].matchAll(SET_STRINGS)) {
+        if (match[1] !== void 0 || match[2] !== void 0) add(match, "set", (value) => `image-set("${value}" \u2026)`, { index: offset + match.index, offset });
+      }
+    }
+    return found.sort((a, b) => a.index - b.index);
+  }
+  function cssWithAddresses(css, references, addressOf) {
+    let written = css;
+    for (const reference of [...references].sort((a, b) => b.start - a.start)) {
+      const address = addressOf(reference);
+      if (!address) continue;
+      const bare = css[reference.start - 1] !== '"' && css[reference.start - 1] !== "'";
+      written = `${written.slice(0, reference.start)}${bare ? `"${address}"` : address}${written.slice(reference.end)}`;
+    }
+    return written;
+  }
+
+  // src/shared/export-wrap.mjs
+  var EXPORT_CSP = [
+    "default-src 'none'",
+    "script-src 'unsafe-inline'",
+    "style-src 'unsafe-inline'",
+    "img-src data: blob:",
+    "font-src data:",
+    "media-src data: blob:",
+    "frame-src https: data: blob:",
+    // an embed block's page (online), or its file
+    "connect-src 'none'",
+    "object-src 'none'",
+    "base-uri 'none'",
+    "form-action 'none'"
+  ].join("; ");
+  var isolateUmd = (source) => `(function (exports, module, define) {
+${source}
+}).call(globalThis, undefined, undefined, undefined);`;
+  var styleText = (css) => css.replace(/<\/style/gi, "<\\/style");
+  var scriptText = (code) => `(function () {
+  var script = document.createElement("script");
+  script.textContent = ${JSON.stringify(code).replace(/</g, "\\u003c")};
+  document.currentScript.after(script);
+  script.remove();
+})();`;
+  var SOURCE_META = "doc-export-source";
+  var PACKAGES_META = "doc-export-packages";
+  var GENERATOR = "Gallery";
+  var GENERATORS = [GENERATOR, "HTML Report Studio"];
+  var OWN_METAS = new RegExp(`<head\\b[^>]*>\\s*<meta name="generator" content="(?:${GENERATORS.join("|")})">\\s*<meta http-equiv="Content-Security-Policy" content="[^"]*">\\s*<meta name="${SOURCE_META}" content="sha256:([0-9a-f]{64})">(?:\\s*<meta name="${PACKAGES_META}" content="([^"]*)">)?`, "i");
+
+  // src/shared/page-links.mjs
+  function pageId(slug) {
+    let one = 3735928559;
+    let two = 1103547991;
+    for (let at = 0; at < slug.length; at++) {
+      one = Math.imul(one ^ slug.charCodeAt(at), 2654435761);
+      two = Math.imul(two ^ slug.charCodeAt(at), 1597334677);
+    }
+    one = Math.imul(one ^ one >>> 16, 2246822507) ^ Math.imul(two ^ two >>> 13, 3266489909);
+    two = Math.imul(two ^ two >>> 16, 2246822507) ^ Math.imul(one ^ one >>> 13, 3266489909);
+    const hash = (two >>> 0) % 2 ** 21 * 2 ** 32 + (one >>> 0);
+    return String.fromCharCode(97 + hash % 26) + Math.floor(hash / 26).toString(36).padStart(7, "0").slice(-7);
+  }
+  function pageOfLink(links, value) {
+    if (links.has(value)) return value;
+    const id = value.slice(value.lastIndexOf("-") + 1);
+    for (const slug of links.keys()) if (pageId(slug) === id) return slug;
+    return null;
+  }
+
+  // src/shared/page-address.mjs
+  var SLUG = "[a-z0-9]+(?:-[a-z0-9]+)*";
+  var FILE = "(?:doc|report)\\.html";
+  var IN_FILE = new RegExp(`^\\.\\./(${SLUG})/${FILE}(?:#(.*))?$`);
+  var PAGE = new RegExp(`^/generated/(${SLUG})\\.html$`);
+  var OWN_FILE = new RegExp(`^/(${SLUG})/${FILE}$`);
+  var LOOPBACK = /* @__PURE__ */ new Set(["127.0.0.1", "localhost"]);
+  var HOSTED = /^(?:https?:)?\/\//i;
+  var decoded = (text) => {
+    try {
+      return decodeURIComponent(text);
+    } catch {
+      return text;
+    }
+  };
+  function ownAddress(text) {
+    try {
+      const url = new URL(text, "http://127.0.0.1");
+      return /^https?:$/.test(url.protocol) && LOOPBACK.has(url.hostname) && /^(?:https?:|\/)/i.test(text) ? url : null;
+    } catch {
+      return null;
+    }
+  }
+  function hashAddress(hash, links = null) {
+    const at = hash.indexOf("/");
+    const name = at < 0 ? hash : hash.slice(0, at);
+    const block = at < 0 ? null : hash.slice(at + 1) || null;
+    const slug = links && pageOfLink(links, name);
+    return slug ? { slug, block } : null;
+  }
+  function pageAddress(text, links = null) {
+    const address = String(text ?? "").trim();
+    const known = (slug, block) => !links || links.has(slug) ? { slug, block: block || null } : null;
+    const inFile = IN_FILE.exec(address);
+    if (inFile) return known(inFile[1], decoded(inFile[2] ?? ""));
+    const url = ownAddress(address);
+    if (!url) return null;
+    const path = PAGE.exec(url.pathname) ?? OWN_FILE.exec(url.pathname);
+    if (path) return known(path[1], decoded(url.hash.slice(1)));
+    return url.pathname === "/" && url.hash.length > 1 ? hashAddress(decoded(url.hash.slice(1)), links) : null;
+  }
+  function workbenchHash(text) {
+    const url = ownAddress(String(text ?? "").trim());
+    return url?.pathname === "/" && url.hash.length > 1 ? decoded(url.hash.slice(1)) : null;
+  }
+  var hosted = (text) => HOSTED.test(String(text ?? "").trim());
+  function fromFile(href, own, origin = "http://127.0.0.1") {
+    try {
+      return new URL(String(href ?? "").trim(), `${origin}/${own}/doc.html`).href;
+    } catch {
+      return null;
+    }
+  }
+
+  // src/shared/components/page.mjs
+  var LOOK_ATTRIBUTES = Object.freeze({ font: "data-doc-font", size: "data-doc-size", spacing: "data-doc-spacing", width: "data-doc-measure" });
+  var page_default = {
+    id: "page",
+    match: "main.doc-page",
+    flow: ".doc-page",
+    groups: false,
+    header: "header.doc-header",
+    // the title and the lines under it
+    title: ".doc-title",
+    // the document's title, the h1 of the header: its text, mirrored in <title> and report.json
+    attrs: {
+      "data-doc-id": "the document's slug: its reading state is kept under it",
+      "data-doc-kit": "a kit asset's tag (the render puts in those a report needs; an older source writes them)",
+      "data-doc-vendor": "a vendor library's tag",
+      "data-doc-placeholder": "the starter's content, which the checks want replaced",
+      "data-doc-transient-view": "its hidden or open shows transient reading state, reset in an export of the view"
+    },
+    classes: ["doc-page", "doc-header", "doc-kicker", "doc-title", "doc-button"],
+    runtime: {
+      generated: [".doc-display", "script[data-doc-state]"],
+      root: { attrs: ["data-doc-ready", "data-doc-drawn", "data-doc-controls"] },
+      // The reader's theme and width (ui.js), and the document's look (字体与布局: its doc.json's, put on by
+      // the render, src/shared/document-look.mjs), which a copy of the view keeps; never written in doc.html.
+      state: { html: ["data-doc-theme", "data-doc-width", ...Object.values(LOOK_ATTRIBUTES)] },
+      internal: ["doc-display*", "data-doc-export-copy", "data-theme", "doc-export-id", "doc-reveal", "doc-kit-error"]
+    }
+  };
+
+  // src/shared/document-look.mjs
+  var LOOK = Object.freeze({
+    font: Object.freeze(["sans", "serif", "mixed"]),
+    // 等线体, 衬线体, 混合体 (the title and headings serif)
+    size: Object.freeze(["default", "small", "large"]),
+    // 字体大小: 小号, 默认, 大号
+    spacing: Object.freeze(["default", "compact", "loose"]),
+    // 正文间距: 紧凑, 默认, 宽松
+    width: Object.freeze(["default", "narrow", "wide"])
+    // 正文宽度: 偏窄, 默认, 偏宽
+  });
+  var SIZE_FACTOR = Object.freeze({ default: 1, small: 15 / 16, large: 18 / 16 });
+  var SPACING = Object.freeze({
+    default: Object.freeze({ leading: 1, gaps: 1 }),
+    compact: Object.freeze({ leading: 0.8, gaps: 0.75 }),
+    loose: Object.freeze({ leading: 1.2, gaps: 1.25 })
+  });
+  var WIDTH = Object.freeze({ default: 712, narrow: 648, wide: 776 });
+  var isPlain = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
+  function lookOf(value) {
+    const look = {};
+    if (!isPlain(value)) return look;
+    for (const [key, choices] of Object.entries(LOOK)) {
+      const chosen = value[key];
+      if (typeof chosen === "string" && choices.includes(chosen) && chosen !== choices[0]) look[key] = chosen;
+    }
+    return look;
+  }
+  var ATTRIBUTE_VALUE = String.raw`(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'>]+))?`;
+  function setLookOn(element, look) {
+    const next = lookOf(look);
+    let changed = false;
+    for (const [key, name] of Object.entries(LOOK_ATTRIBUTES)) {
+      const value = next[key] ?? null;
+      if (element.getAttribute(name) === value) continue;
+      if (value === null) element.removeAttribute(name);
+      else element.setAttribute(name, value);
+      changed = true;
+    }
+    return changed;
+  }
+
+  // src/render/kit/words.js
+  var DISPLAY = {
+    "display": { zh: "\u663E\u793A\u8BBE\u7F6E", en: "Display settings" },
+    "display-menu": { zh: "\u6587\u6863\u663E\u793A\u8BBE\u7F6E", en: "Document display settings" },
+    "appearance": { zh: "\u5916\u89C2", en: "Appearance" },
+    "theme-system": { zh: "\u8DDF\u968F\u7CFB\u7EDF", en: "Use system setting" },
+    "theme-light": { zh: "\u6D45\u8272", en: "Light" },
+    "theme-dark": { zh: "\u6DF1\u8272", en: "Dark" },
+    "full-width": { zh: "\u5168\u5BBD\u663E\u793A", en: "Full width" },
+    "export-view": { zh: "\u5BFC\u51FA\u5F53\u524D\u89C6\u56FE\u526F\u672C", en: "Export a copy of this view" },
+    "html-file": { zh: "HTML \u6587\u4EF6", en: "HTML file" }
+  };
+  var UI_LANGUAGE = "data-ge-language";
+  function kitLanguage(root = globalThis.document?.documentElement) {
+    const ui = root?.getAttribute(UI_LANGUAGE) ?? null;
+    const english = ui !== null ? ui === "en" : /^en(?:-|$)/i.test(root?.getAttribute("lang") ?? "");
+    return english ? "en" : "zh";
+  }
+  function wordIn(table, language, key, ...values) {
+    const entry = table[key];
+    if (!entry) throw new Error(`The kit has no word "${key}" here (src/render/kit/words.js).`);
+    const text = entry[language] ?? entry.zh;
+    return values.length === 0 ? text : text.replace(/\{(\d+)\}/g, (whole, index) => index < values.length ? String(values[index]) : whole);
+  }
+  var sayer = (table) => (key, ...values) => wordIn(table, kitLanguage(), key, ...values);
+  var sayDisplay = /* @__PURE__ */ sayer(DISPLAY);
+  var ENGLISH_ROOT = `:root[${UI_LANGUAGE}="en"], :root:not([${UI_LANGUAGE}])[lang|="en" i]`;
+
+  // src/render/kit/ui.js
+  (function initReportUI() {
+    "use strict";
+    const root = document.documentElement;
+    const page = document.querySelector(".doc-page");
+    if (!page || document.querySelector(".doc-display")) return;
+    const systemTheme = matchMedia("(prefers-color-scheme: dark)");
+    if (!globalThis.DocState) throw new Error("Report UI requires /kit/state.js to be loaded first.");
+    if (!globalThis.DocKit) throw new Error("Report UI requires /kit/runtime.js to be loaded first.");
+    const reportId = page.dataset.docId || location.pathname || "report";
+    const displayState = DocState.create({
+      id: "display",
+      // this report's (DocState scopes it by data-doc-id)
+      version: 1,
+      defaults: { theme: null, width: "reading", exportVersion: 0 }
+    });
+    const icons = {
+      // Two sliders, their knobs open circles the lines stop at.
+      settings: '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3.5 6.5h7.25M15.25 6.5h1.25M3.5 13.5h1.25M9.25 13.5h7.25"/><circle cx="13" cy="6.5" r="2.25"/><circle cx="7" cy="13.5" r="2.25"/></svg>',
+      system: '<svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.75" y="3.75" width="14.5" height="10" rx="2"/><path d="M7.5 16.75h5M10 13.75v3"/></svg>',
+      sun: '<svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="3.25"/><path d="M10 2.75v1.5M10 15.75v1.5M4.87 4.87l1.06 1.06M14.07 14.07l1.06 1.06M2.75 10h1.5M15.75 10h1.5M4.87 15.13l1.06-1.06M14.07 5.93l1.06-1.06"/></svg>',
+      moon: '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M16.5 12.4A6.9 6.9 0 0 1 7.6 3.5a6.9 6.9 0 1 0 8.9 8.9Z"/></svg>',
+      width: '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 10h14M6 7l-3 3 3 3M14 7l3 3-3 3"/></svg>',
+      download: '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3.5v9M6.5 9l3.5 3.5L13.5 9M4.5 16.5h11"/></svg>',
+      check: '<svg class="doc-display-check" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 10.5l3.25 3.25L15 7"/></svg>'
+    };
+    const display = document.createElement("div");
+    display.className = "doc-display";
+    const menuButton = document.createElement("button");
+    menuButton.type = "button";
+    menuButton.className = "doc-display-button";
+    menuButton.innerHTML = icons.settings;
+    menuButton.setAttribute("aria-label", sayDisplay("display"));
+    menuButton.setAttribute("aria-haspopup", "menu");
+    menuButton.setAttribute("aria-expanded", "false");
+    const menu = document.createElement("div");
+    menu.className = "doc-display-menu";
+    menu.id = "doc-display-menu";
+    menu.hidden = true;
+    menu.setAttribute("role", "menu");
+    menu.setAttribute("aria-label", sayDisplay("display-menu"));
+    menuButton.setAttribute("aria-controls", menu.id);
+    function menuItem(role, icon, label, right = "") {
+      const item = document.createElement("button");
+      item.type = "button";
+      item.className = "doc-display-item";
+      item.tabIndex = -1;
+      item.setAttribute("role", role);
+      item.innerHTML = `<span class="doc-display-icon">${icon}</span><span class="doc-display-label"></span>${right}`;
+      item.querySelector(".doc-display-label").textContent = label;
+      return item;
+    }
+    function menuSection(header, ...items2) {
+      const section = document.createElement("div");
+      section.className = "doc-display-section";
+      if (header) {
+        const title = document.createElement("div");
+        title.className = "doc-display-header";
+        title.textContent = header;
+        section.append(title);
+      }
+      section.append(...items2);
+      return section;
+    }
+    const themeItems = [["system", icons.system], ["light", icons.sun], ["dark", icons.moon]].map(([theme, icon]) => {
+      const item = menuItem("menuitemradio", icon, sayDisplay(`theme-${theme}`), icons.check);
+      item.dataset.theme = theme;
+      return item;
+    });
+    const widthItem = menuItem("menuitemcheckbox", icons.width, sayDisplay("full-width"), '<span class="doc-display-switch" aria-hidden="true"><span></span></span>');
+    const exportButton = menuItem("menuitem", icons.download, sayDisplay("export-view"));
+    exportButton.dataset.docExportCopy = "";
+    menu.append(menuSection(sayDisplay("appearance"), ...themeItems), menuSection(null, widthItem), menuSection(null, exportButton));
+    display.append(menuButton, menu);
+    document.body.prepend(display);
+    root.dataset.docControls = "ready";
+    const markReady = () => requestAnimationFrame(() => root.setAttribute("data-doc-ready", ""));
+    if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", markReady, { once: true });
+    else markReady();
+    const storedTheme = displayState.get("theme");
+    if (storedTheme === "light" || storedTheme === "dark") root.dataset.docTheme = storedTheme;
+    const storedWidth = displayState.get("width");
+    if (storedWidth === "full") root.dataset.docWidth = "full";
+    function effectiveTheme() {
+      return root.dataset.docTheme || (systemTheme.matches ? "dark" : "light");
+    }
+    function updateThemeItems() {
+      const chosen = displayState.get("theme");
+      const current = chosen === "light" || chosen === "dark" ? chosen : "system";
+      themeItems.forEach((item) => item.setAttribute("aria-checked", String(item.dataset.theme === current)));
+    }
+    function updateWidthItem() {
+      widthItem.setAttribute("aria-checked", String(root.dataset.docWidth === "full"));
+    }
+    function reportFileName() {
+      const name = (location.pathname.split("/").pop() || `${reportId}.html`).replace(/\.html$/i, "");
+      return name.replace(/\.v\d+$/i, "");
+    }
+    function copyLiveFormValues(source, clone) {
+      const sourceControls = source.querySelectorAll("input, textarea, select");
+      const cloneControls = clone.querySelectorAll("input, textarea, select");
+      sourceControls.forEach((control, index) => {
+        const target = cloneControls[index];
+        if (!target) return;
+        if (control instanceof HTMLTextAreaElement) target.textContent = control.value;
+        else if (control instanceof HTMLSelectElement) {
+          Array.from(target.options).forEach((option, optionIndex) => option.toggleAttribute("selected", control.options[optionIndex]?.selected));
+        } else if (control instanceof HTMLInputElement) {
+          target.setAttribute("value", control.value);
+          target.toggleAttribute("checked", control.checked);
+        }
+      });
+    }
+    async function inlineLinkedAssets(clone) {
+      clone.querySelectorAll('script[src="/@vite/client"]').forEach((node) => node.remove());
+      const cache = /* @__PURE__ */ new Map();
+      async function resource(url, base = location.href) {
+        const resolved = new URL(url, base);
+        if (resolved.origin !== location.origin || !["http:", "https:"].includes(resolved.protocol)) throw new Error("Export requires same-origin preview assets or an already standalone HTML.");
+        if (!cache.has(resolved.href)) cache.set(resolved.href, fetch(resolved.href).then(async (response) => {
+          if (!response.ok) throw new Error(`Unable to embed ${resolved.pathname}: ${response.status}`);
+          return { bytes: new Uint8Array(await response.arrayBuffer()), type: response.headers.get("content-type") || "application/octet-stream", url: resolved.href };
+        }));
+        return cache.get(resolved.href);
+      }
+      function dataUrl(asset) {
+        let binary = "";
+        for (const byte of asset.bytes) binary += String.fromCharCode(byte);
+        return `data:${asset.type};base64,${btoa(binary)}`;
+      }
+      for (const link of clone.querySelectorAll('link[rel="stylesheet"][href]')) {
+        const asset = await resource(link.getAttribute("href"));
+        const css = new TextDecoder().decode(asset.bytes);
+        const references = cssReferences(css).filter(({ value, kind }) => kind !== "import" && !/^(data:|#|$)/i.test(value));
+        const embedded = /* @__PURE__ */ new Map();
+        for (const reference of references) {
+          try {
+            embedded.set(reference, dataUrl(await resource(reference.value, asset.url)));
+          } catch {
+          }
+        }
+        const style = document.createElement("style");
+        for (const mark of ["data-doc-kit", "data-doc-vendor"]) {
+          if (link.hasAttribute(mark)) style.setAttribute(mark, `${link.getAttribute(mark)}-inline`);
+        }
+        if (link.hasAttribute(PACKAGE_MARK)) style.setAttribute(PACKAGE_MARK, link.getAttribute(PACKAGE_MARK));
+        style.textContent = styleText(cssWithAddresses(css, references, (reference) => embedded.get(reference)));
+        link.replaceWith(style);
+      }
+      for (const script of clone.querySelectorAll("script[src]")) {
+        const asset = await resource(script.getAttribute("src"));
+        let code = new TextDecoder().decode(asset.bytes);
+        if (script.hasAttribute("data-doc-vendor")) code = isolateUmd(code);
+        script.removeAttribute("src");
+        script.textContent = script.hasAttribute(PACKAGE_MARK) ? scriptText(code) : code.replace(/<\/script/gi, "<\\/script");
+      }
+      for (const image of clone.querySelectorAll("img[src]")) {
+        if (!/^(data:|blob:)/.test(image.getAttribute("src"))) image.setAttribute("src", dataUrl(await resource(image.getAttribute("src"))));
+      }
+      for (const node of clone.querySelectorAll('[style*="url("]')) {
+        let style = node.getAttribute("style");
+        for (const match of [...style.matchAll(/url\(\s*["']?([^"')\s]+)["']?\s*\)/g)]) {
+          if (/^(data:|blob:|#)/.test(match[1])) continue;
+          const embedded = dataUrl(await resource(match[1]));
+          style = style.replace(match[0], () => `url("${embedded}")`);
+        }
+        node.setAttribute("style", style);
+      }
+      for (const icon of clone.querySelectorAll('link[rel~="icon"][href]')) {
+        if (!/^(data:|blob:)/.test(icon.getAttribute("href"))) icon.setAttribute("href", dataUrl(await resource(icon.getAttribute("href"))));
+      }
+      clone.querySelectorAll('meta[http-equiv="Content-Security-Policy"]').forEach((node) => node.remove());
+      const policy = document.createElement("meta");
+      policy.httpEquiv = "Content-Security-Policy";
+      policy.content = EXPORT_CSP;
+      clone.querySelector("head")?.prepend(policy);
+    }
+    async function serializableHtml() {
+      globalThis.DocCode?.colorAll?.();
+      const clone = document.documentElement.cloneNode(true);
+      copyLiveFormValues(document, clone);
+      clone.querySelectorAll("[data-doc-dev]").forEach((node) => node.remove());
+      [clone, ...clone.querySelectorAll("*")].forEach((node) => {
+        const marks = [...node.attributes].filter(({ name }) => /^data-(?:ge|rs)-/.test(name));
+        if (marks.length === 0) return;
+        marks.forEach(({ name }) => node.removeAttribute(name));
+        node.removeAttribute("contenteditable");
+      });
+      DocKit.dehydrate(clone);
+      clone.querySelectorAll("[data-doc-transient-view]").forEach((node) => {
+        if (node instanceof HTMLDetailsElement) node.removeAttribute("open");
+        else node.removeAttribute("hidden");
+      });
+      clone.querySelectorAll("a[href]").forEach((link) => {
+        const href = link.getAttribute("href");
+        const address = hosted(href) ? null : fromFile(href, reportId);
+        const place = pageAddress(address);
+        if (place ? place.slug === reportId : workbenchHash(address) === null) return;
+        link.querySelector(`:scope > .${MENTION_ICON}`)?.remove();
+        link.replaceWith(...link.childNodes);
+      });
+      clone.querySelectorAll('meta[name="doc-export-id"]').forEach((node) => node.remove());
+      const version = (displayState.get("exportVersion", 0) || 0) + 1;
+      displayState.set("exportVersion", version);
+      const exportMeta = document.createElement("meta");
+      exportMeta.name = "doc-export-id";
+      exportMeta.content = `${reportId}.v${version}-${crypto.randomUUID()}`;
+      clone.querySelector("head")?.append(exportMeta);
+      const stateScript = document.createElement("script");
+      stateScript.type = "application/json";
+      stateScript.dataset.docState = "";
+      stateScript.textContent = DocState.serializeAll().replaceAll("<", "\\u003c");
+      clone.querySelector("head")?.append(stateScript);
+      await inlineLinkedAssets(clone);
+      return `<!doctype html>
+${clone.outerHTML}`;
+    }
+    async function exportCurrentReport() {
+      const filename = `${reportFileName()}.v${(displayState.get("exportVersion", 0) || 0) + 1}.html`;
+      let handle;
+      if (typeof globalThis.showSaveFilePicker === "function") {
+        try {
+          handle = await globalThis.showSaveFilePicker({
+            id: "html-report-export",
+            suggestedName: filename,
+            types: [{ description: sayDisplay("html-file"), accept: { "text/html": [".html"] } }]
+          });
+        } catch (error) {
+          if (error?.name === "AbortError") return false;
+        }
+      }
+      const html = await serializableHtml();
+      if (handle) {
+        const writable = await handle.createWritable();
+        await writable.write(html);
+        await writable.close();
+        return true;
+      }
+      const blob = new Blob([html], { type: "text/html;charset=utf-8" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = filename;
+      link.click();
+      setTimeout(() => URL.revokeObjectURL(url), 1e3);
+      return true;
+    }
+    const items = () => [...menu.querySelectorAll(".doc-display-item")];
+    function openMenu(fromKeyboard) {
+      menu.hidden = false;
+      menuButton.setAttribute("aria-expanded", "true");
+      if (fromKeyboard) (items().find((item) => item.getAttribute("aria-checked") === "true") ?? items()[0])?.focus();
+    }
+    function closeMenu({ focusButton = false } = {}) {
+      if (menu.hidden) return;
+      menu.hidden = true;
+      menuButton.setAttribute("aria-expanded", "false");
+      if (focusButton) menuButton.focus();
+    }
+    menuButton.addEventListener("click", (event) => menu.hidden ? openMenu(event.detail === 0) : closeMenu());
+    document.addEventListener("pointerdown", (event) => {
+      if (!display.contains(event.target)) closeMenu();
+    }, true);
+    addEventListener("blur", () => closeMenu());
+    display.addEventListener("keydown", (event) => {
+      if (menu.hidden) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closeMenu({ focusButton: true });
+        return;
+      }
+      if (event.key === "Tab") return closeMenu();
+      const list = items();
+      const at = list.indexOf(document.activeElement);
+      const next = event.key === "ArrowDown" ? (at + 1) % list.length : event.key === "ArrowUp" ? (at - 1 + list.length) % list.length : event.key === "Home" ? 0 : event.key === "End" ? list.length - 1 : null;
+      if (next === null) return;
+      event.preventDefault();
+      list[next].focus();
+    });
+    const themeChanged = () => {
+      for (const name of ["doc-theme-change", "report-theme-change"]) dispatchEvent(new CustomEvent(name, { detail: { theme: effectiveTheme() } }));
+    };
+    themeItems.forEach((item) => item.addEventListener("click", () => {
+      const theme = item.dataset.theme;
+      if (theme === "system") delete root.dataset.docTheme;
+      else root.dataset.docTheme = theme;
+      displayState.set("theme", theme === "system" ? null : theme);
+      updateThemeItems();
+      themeChanged();
+    }));
+    addEventListener("doc-theme-request", (event) => {
+      const theme = event.detail?.theme ?? displayState.get("theme");
+      if (theme === "light" || theme === "dark") root.dataset.docTheme = theme;
+      else delete root.dataset.docTheme;
+      updateThemeItems();
+      themeChanged();
+    });
+    const LOOK_HELD = 2e3;
+    let held = null;
+    const showLook = (look) => {
+      if (!setLookOn(root, look)) return;
+      dispatchEvent(new Event("doc-layout-change"));
+      dispatchEvent(new Event("resize"));
+      dispatchEvent(new CustomEvent("doc-look-change", { detail: { look: lookOf(look) } }));
+    };
+    addEventListener("doc-look-request", (event) => {
+      const look = event.detail?.look;
+      if (event.detail?.from === "file") {
+        if (held) held.said = look;
+        else showLook(look);
+        return;
+      }
+      clearTimeout(held?.timer);
+      held = { said: null, timer: setTimeout(() => {
+        const said = held?.said;
+        held = null;
+        if (said) showLook(said);
+      }, LOOK_HELD) };
+      showLook(look);
+    });
+    widthItem.addEventListener("click", () => {
+      const next = root.dataset.docWidth === "full" ? "reading" : "full";
+      if (next === "full") root.dataset.docWidth = "full";
+      else delete root.dataset.docWidth;
+      displayState.set("width", next);
+      updateWidthItem();
+    });
+    exportButton.addEventListener("click", async () => {
+      if (exportButton.disabled) return;
+      closeMenu();
+      exportButton.disabled = true;
+      let outcome;
+      try {
+        outcome = await exportCurrentReport() ? { ok: true } : { ok: false, reason: "cancelled" };
+      } catch (error) {
+        console.error("Unable to export report HTML", error);
+        outcome = { ok: false, reason: "error", message: error.message };
+      } finally {
+        exportButton.disabled = false;
+      }
+      dispatchEvent(new CustomEvent("doc-export-copy-done", { detail: outcome }));
+    });
+    systemTheme.addEventListener?.("change", () => {
+      if (root.dataset.docTheme) return;
+      themeChanged();
+    });
+    updateThemeItems();
+    updateWidthItem();
+  })();
+})();