@chainingintention/pi-web-cn 2.202610.5 → 2.202611.2

package/dist/pi-packages/relays/relaysPanelElement.js

@@ -1,5 +1,5 @@
 // Generated from pi-packages/relays/relaysPanelElement.ts. Do not edit directly.
-import { t } from "./i18n.js";
+import { relayText, relayValue } from "./relaysLocalization.js";
 import { isMarkdownDocumentPath, renderRelayDocumentHtml } from "./markdownDocument.js";
 import { isRelayPacketPath } from "./relayIdentity.js";
 import { ancestorDirectoryPaths, collectDirectoryPaths, defaultRelayDocument, flattenRelayTree, listRelayDocumentTree, listWorkspaceRelays, readRelayDocument, RELAYS_ROOT, } from "./relayDiscovery.js";
@@ -23,6 +23,53 @@ export function defineRelaysPanelElement() {
  * horizontal scroll position and keyboard focus survive document switches.
  */
 class PiWebRelaysPanel extends HTMLElement {
+    contentValue;
+    releaseLocalization;
+    set content(value) {
+        if (value === this.contentValue)
+            return;
+        this.releaseLocalization?.();
+        this.releaseLocalization = undefined;
+        this.contentValue = value;
+        this.subscribeLocalization();
+        this.updateLocalization();
+    }
+    subscribeLocalization() {
+        if (this.isConnected && this.releaseLocalization === undefined) {
+            this.releaseLocalization = this.contentValue?.localization.subscribe(() => { this.updateLocalization(); });
+        }
+    }
+    /** Update chrome in place: never reload files, replace tabs, or disturb focus/scroll. */
+    updateLocalization() {
+        const direction = this.contentValue?.localization.direction ?? "ltr";
+        for (const region of [this.toolbar, this.tabStrip, this.viewer])
+            region.dir = direction;
+        const title = this.toolbar.querySelector(".ui-toolbar-title");
+        if (title !== null)
+            title.textContent = relayText(this.contentValue, "relays");
+        const refresh = this.toolbar.querySelector("[data-refresh]");
+        refresh?.setAttribute("aria-label", relayText(this.contentValue, "refresh"));
+        refresh?.setAttribute("title", relayText(this.contentValue, "refresh"));
+        this.toolbar.querySelector("[data-relay-picker]")?.setAttribute("aria-label", relayText(this.contentValue, "relay"));
+        this.tabStrip.setAttribute("aria-label", relayText(this.contentValue, "documents"));
+        for (const chip of this.tabStrip.querySelectorAll(".contains-active"))
+            chip.setAttribute("title", relayText(this.contentValue, "containsOpen"));
+        if (this.documentContent?.kind === "loaded" && !this.documentContent.binary) {
+            for (const table of this.viewer.querySelectorAll(".table-scroll"))
+                table.setAttribute("aria-label", relayText(this.contentValue, "table"));
+            for (const notice of this.viewer.querySelectorAll("[data-message]")) {
+                if (notice.dataset["message"] === "partial")
+                    notice.textContent = relayText(this.contentValue, "partial");
+                if (notice.dataset["message"] === "truncated")
+                    notice.textContent = relayText(this.contentValue, "truncated");
+            }
+        }
+        else {
+            const scrollTop = this.viewer.scrollTop;
+            this.renderViewer();
+            this.viewer.scrollTop = scrollTop;
+        }
+    }
     integration;
     releaseStyles;
     set stylesheetIntegration(value) {
@@ -35,14 +82,19 @@ class PiWebRelaysPanel extends HTMLElement {
             this.releaseStyles = value?.registerRoot(this.root, { sharedUi: true });
     }
     connectedCallback() {
+        this.subscribeLocalization();
+        this.updateLocalization();
         this.releaseStyles ??= this.integration?.registerRoot(this.root, { sharedUi: true });
     }
     disconnectedCallback() {
+        this.releaseLocalization?.();
+        this.releaseLocalization = undefined;
         this.releaseStyles?.();
         this.releaseStyles = undefined;
     }
     contextValue;
     listing;
+    invalidRelayLink = false;
     selectedRelayPath;
     documents;
     selectedDocumentPath;
@@ -58,9 +110,9 @@ class PiWebRelaysPanel extends HTMLElement {
         this.root = this.attachShadow({ mode: "open" });
         this.root.innerHTML = `
       ${relaysStyles()}
-      <section class="toolbar ui-toolbar" hidden></section>
-      <nav class="document-tabs ui-tabs" aria-label="${escapeAttr(t("bundled.relays.relay.documents.91711b", "Relay documents"))}" hidden></nav>
-      <section class="viewer"><div class="empty">${escapeHtml(t("bundled.relays.select.a.workspace.234859", "Select a workspace."))}</div></section>
+      <section class="toolbar ui-toolbar" hidden></section>
+      <nav class="document-tabs ui-tabs" aria-label="${escapeAttr(relayText(this.contentValue, "documents"))}" hidden></nav>
+      <section class="viewer"><div class="empty">${escapeHtml(relayText(this.contentValue, "selectWorkspace"))}</div></section>
     `;
         this.toolbar = requiredRegion(this.root, ".toolbar");
         this.tabStrip = requiredRegion(this.root, "nav.document-tabs");
@@ -125,7 +177,8 @@ class PiWebRelaysPanel extends HTMLElement {
         this.renderAll();
         const requestedPath = selection.relayPath ?? linkedRelayPath(context);
         if (requestedPath !== undefined && !isRelayPacketPath(requestedPath)) {
-            this.listing = { kind: "unavailable", detail: t("bundled.relays.invalid.packet.link", "Relay links must select a normalized workspace-relative packet directory.") };
+            this.invalidRelayLink = true;
+            this.listing = { kind: "unavailable", detail: "" };
             this.renderAll();
             return;
         }
@@ -267,6 +320,7 @@ class PiWebRelaysPanel extends HTMLElement {
     }
     resetScanState() {
         this.listing = undefined;
+        this.invalidRelayLink = false;
         this.selectedRelayPath = undefined;
         this.documents = undefined;
         this.selectedDocumentPath = undefined;
@@ -288,10 +342,10 @@ class PiWebRelaysPanel extends HTMLElement {
         }
         this.toolbar.hidden = false;
         this.toolbar.innerHTML = `
-      <strong class="ui-toolbar-title">${escapeHtml(t("bundled.relays.relays.715ce8", "Relays"))}</strong>
-      <span class="toolbar-actions ui-toolbar-group">
+      <strong class="ui-toolbar-title">${escapeHtml(relayText(this.contentValue, "relays"))}</strong>
+      <span class="toolbar-actions ui-toolbar-group">
         ${this.renderRelayPicker()}
-        <button type="button" class="ui-button ui-button--compact ui-button--icon" data-refresh aria-label="${escapeAttr(t("bundled.relays.refresh.aee887", "Refresh"))}" title="${escapeAttr(t("bundled.relays.refresh.aee887", "Refresh"))}">${refreshIconSvg()}</button>
+        <button type="button" class="ui-button ui-button--compact ui-button--icon" data-refresh aria-label="${escapeAttr(relayText(this.contentValue, "refresh"))}" title="${escapeAttr(relayText(this.contentValue, "refresh"))}">${refreshIconSvg()}</button>
       </span>
     `;
     }
@@ -302,13 +356,13 @@ class PiWebRelaysPanel extends HTMLElement {
         // A single relay opens immediately; a one-option picker would be noise.
         if (listing.relays.length === 1) {
             const relay = listing.relays[0];
-            return relay === undefined ? "" : `<span class="relay-name" title="${escapeAttr(relay.path)}">${escapeHtml(relay.name)}</span>`;
+            return relay === undefined ? "" : `<span dir="auto" class="relay-name" title="${escapeAttr(relay.path)}">${escapeHtml(relay.name)}</span>`;
         }
         const options = listing.relays.map((relay) => {
             const selected = relay.path === this.selectedRelayPath ? " selected" : "";
             return `<option value="${escapeAttr(relay.path)}"${selected}>${escapeHtml(relay.name)}</option>`;
         }).join("");
-        return `<select class="ui-select" data-relay-picker aria-label="${escapeAttr(t("bundled.relays.relays.715ce8", "Relays"))}">${options}</select>`;
+        return `<select dir="auto" class="ui-select" data-relay-picker aria-label="${escapeAttr(relayText(this.contentValue, "relay"))}">${options}</select>`;
     }
     renderTabs() {
         const documents = this.documents;
@@ -339,13 +393,13 @@ class PiWebRelaysPanel extends HTMLElement {
     }
     renderFileTab(file) {
         const active = file.path === this.selectedDocumentPath;
-        return `<button type="button" class="ui-button ui-tab document-tab${active ? " selected" : ""}" data-document-path="${escapeAttr(file.path)}" title="${escapeAttr(file.relativePath)}"${active ? ' aria-current="page"' : ""}>${escapeHtml(file.name)}</button>`;
+        return `<button type="button" class="ui-button ui-tab document-tab${active ? " selected" : ""}" data-document-path="${escapeAttr(file.path)}" title="${escapeAttr(file.relativePath)}"${active ? ' aria-current="page"' : ""}><bdi>${escapeHtml(file.name)}</bdi></button>`;
     }
     renderDirectoryChip(directory, containsActivePath) {
         const expanded = this.expandedDirs.has(directory.path);
         const containsActive = directory.path === containsActivePath;
-        const title = containsActive ? t("ui.main.6a634d20bc86", "Contains the open document") : directory.relativePath;
-        return `<button type="button" class="ui-button ui-tab document-tab directory-tab${containsActive ? " contains-active" : ""}" data-directory-path="${escapeAttr(directory.path)}" title="${escapeAttr(title)}" aria-expanded="${expanded ? "true" : "false"}">${chevronSvg()}${escapeHtml(directory.name)}</button>`;
+        const title = containsActive ? relayText(this.contentValue, "containsOpen") : directory.relativePath;
+        return `<button type="button" class="ui-button ui-tab document-tab directory-tab${containsActive ? " contains-active" : ""}" data-directory-path="${escapeAttr(directory.path)}" title="${escapeAttr(title)}" aria-expanded="${expanded ? "true" : "false"}">${chevronSvg()}<bdi>${escapeHtml(directory.name)}</bdi></button>`;
     }
     /** Move the active marker between the mounted tab buttons without rebuilding them. */
     updateActiveTab() {
@@ -362,7 +416,7 @@ class PiWebRelaysPanel extends HTMLElement {
     }
     renderViewer() {
         if (this.contextValue === undefined) {
-            this.viewer.innerHTML = `<div class="empty">${escapeHtml(t("bundled.relays.select.a.workspace.234859", "Select a workspace."))}</div>`;
+            this.viewer.innerHTML = `<div class="empty">${escapeHtml(relayText(this.contentValue, "selectWorkspace"))}</div>`;
             return;
         }
         this.viewer.innerHTML = this.renderViewerContent();
@@ -370,31 +424,31 @@ class PiWebRelaysPanel extends HTMLElement {
     renderViewerContent() {
         const listing = this.listing;
         if (listing === undefined)
-            return `<p class="muted">${escapeHtml(t("bundled.relays.scanning.d7c334", "Scanning {value1}...", { value1: RELAYS_ROOT }))}</p>`;
+            return `<p class="muted">${escapeHtml(relayText(this.contentValue, "scanning", { path: relayValue(this.contentValue, RELAYS_ROOT) }))}</p>`;
         if (listing.kind === "unavailable")
-            return renderErrorState(t("bundled.relays.could.not.scan.workspace.relays.d8b2bc", "Could not scan workspace relays."), listing.detail);
+            return renderErrorState(relayText(this.contentValue, "scanFailed"), this.invalidRelayLink ? relayText(this.contentValue, "invalidLink") : listing.detail);
         if (listing.kind === "missing" || listing.relays.length === 0)
-            return renderEmptyState();
+            return renderEmptyState(this.contentValue);
         return this.renderSelectedRelay();
     }
     renderSelectedRelay() {
         const documents = this.documents;
         if (documents === undefined)
-            return `<p class="muted">${escapeHtml(t("bundled.relays.loading.relay.documents.94db7f", "Loading relay documents..."))}</p>`;
+            return `<p class="muted">${escapeHtml(relayText(this.contentValue, "loadingDocuments"))}</p>`;
         if (documents.kind === "unavailable")
-            return renderErrorState(t("bundled.relays.could.not.list.documents.for.this.relay.cad056", "Could not list documents for this relay."), documents.detail);
+            return renderErrorState(relayText(this.contentValue, "listFailed"), documents.detail);
         if (documents.kind === "missing") {
-            return `<div class="empty-state"><strong>${escapeHtml(t("bundled.relays.this.relay.no.longer.exists.f8d39d", "This relay no longer exists."))}</strong><p>${escapeHtml(t("bundled.relays.click.refresh.to.rescan.7a2ef0", "Click Refresh to rescan {value1}.", { value1: RELAYS_ROOT }))}</p></div>`;
+            return `<div class="empty-state"><strong>${escapeHtml(relayText(this.contentValue, "relayMissing"))}</strong><p>${escapeHtml(relayText(this.contentValue, "rescanRoot", { path: relayValue(this.contentValue, RELAYS_ROOT) }))}</p></div>`;
         }
         const partialNotice = documents.partial
-            ? `<div class="status info">${escapeHtml(t("bundled.relays.partial", "Some nested content is omitted because this relay exceeds the panel depth or count limit."))}</div>`
+            ? `<div class="status info" data-message="partial">${escapeHtml(relayText(this.contentValue, "partial"))}</div>`
             : "";
         if (documents.documentCount === 0) {
             return `${partialNotice}
         <div class="empty-state">
-          <strong>${escapeHtml(t("bundled.relays.this.relay.has.no.documents.yet.d5948c", "This relay has no documents yet."))}</strong>
-          <p>${escapeHtml(t("bundled.relays.packet.documents", "Relay packets contain charter.md (goal), status.md (current baton), and log.md (history). An optional decisions.md keeps consequential decisions and their reasons."))}</p>
-        </div>
+          <strong>${escapeHtml(relayText(this.contentValue, "noDocuments"))}</strong>
+          <p>${escapeHtml(relayText(this.contentValue, "packetHelp", { charter: relayValue(this.contentValue, "charter.md"), status: relayValue(this.contentValue, "status.md"), log: relayValue(this.contentValue, "log.md"), decisions: relayValue(this.contentValue, "decisions.md") }))}</p>
+        </div>
       `;
         }
         return `${partialNotice}${this.renderSelectedDocument()}`;
@@ -403,24 +457,24 @@ class PiWebRelaysPanel extends HTMLElement {
         const documentPath = this.selectedDocumentPath;
         const content = this.documentContent;
         if (documentPath === undefined)
-            return `<p class="muted">${escapeHtml(t("bundled.relays.select.a.document.1c46a5", "Select a document."))}</p>`;
+            return `<p class="muted">${escapeHtml(relayText(this.contentValue, "selectDocument"))}</p>`;
         if (content === undefined)
-            return `<p class="muted">${escapeHtml(t("bundled.relays.loading.9f624f", "Loading {value1}...", { value1: documentName(documentPath) }))}</p>`;
+            return `<p class="muted">${escapeHtml(relayText(this.contentValue, "loadingDocument", { name: relayValue(this.contentValue, documentName(documentPath)) }))}</p>`;
         if (content.kind === "unavailable")
-            return renderErrorState(t("bundled.relays.could.not.read.this.document.7cd2d0", "Could not read this document."), content.detail);
+            return renderErrorState(relayText(this.contentValue, "readFailed"), content.detail);
         if (content.kind === "missing") {
-            return `<div class="empty-state"><strong>${escapeHtml(t("bundled.relays.this.document.no.longer.exists.6d4a00", "This document no longer exists."))}</strong><p>${escapeHtml(t("bundled.relays.click.refresh.to.rescan.relays.2fe15f", "Click Refresh to rescan relays."))}</p></div>`;
+            return `<div class="empty-state"><strong>${escapeHtml(relayText(this.contentValue, "documentMissing"))}</strong><p>${escapeHtml(relayText(this.contentValue, "rescanRelay"))}</p></div>`;
         }
         if (content.binary) {
-            return `<div class="empty-state"><strong>${escapeHtml(t("bundled.relays.binary.file.f080cb", "Binary file: {value1}", { value1: documentName(documentPath) }))}</strong><p>${escapeHtml(t("bundled.relays.binary.documents.cannot.be.previewed.as.text.535534", "Binary documents cannot be previewed as text."))}</p></div>`;
+            return `<div class="empty-state"><strong>${escapeHtml(relayText(this.contentValue, "binary", { name: relayValue(this.contentValue, documentName(documentPath)) }))}</strong><p>${escapeHtml(relayText(this.contentValue, "binaryHelp"))}</p></div>`;
         }
         const truncation = content.truncated
-            ? `<div class="status info">${escapeHtml(t("bundled.relays.this.document.is.truncated.only.the.beginning.is.shown.bf465f", "This document was truncated; only its beginning is shown."))}</div>`
+            ? `<div class="status info" data-message="truncated">${escapeHtml(relayText(this.contentValue, "truncated"))}</div>`
             : "";
         if (isMarkdownDocumentPath(documentPath)) {
-            return `${truncation}<div class="document markdown">${renderRelayDocumentHtml(content.content)}</div>`;
+            return `${truncation}<div dir="auto" class="document markdown">${renderRelayDocumentHtml(content.content, relayText(this.contentValue, "table"))}</div>`;
         }
-        return `${truncation}<pre class="document">${escapeHtml(content.content)}</pre>`;
+        return `${truncation}<pre dir="ltr" class="document">${escapeHtml(content.content)}</pre>`;
     }
 }
 /** Shell regions come from a literal template; absence means the template broke. */
@@ -474,76 +528,77 @@ function linkedRelayPath(context) {
 function documentName(path) {
     return path.slice(path.lastIndexOf("/") + 1);
 }
-function renderEmptyState() {
-    return `
-    <div class="empty-state">
-      <strong>${escapeHtml(t("bundled.relays.no.relays.in.this.workspace.6ba356", "No relays in this workspace."))}</strong>
-      <p>${escapeHtml(t("bundled.relays.empty.location", "Relay packages are stored in {path}. This workspace has none yet.", { path: `${RELAYS_ROOT}/<name>/` }))}</p>
-    </div>
+function renderEmptyState(content) {
+    return `
+    <div class="empty-state">
+      <strong>${escapeHtml(relayText(content, "noRelays"))}</strong>
+      <p>${escapeHtml(relayText(content, "emptyHelp", { path: relayValue(content, `${RELAYS_ROOT}/<name>/`) }))}</p>
+    </div>
   `;
 }
 function renderErrorState(message, detail) {
-    return `<div class="status error"><strong>${escapeHtml(message)}</strong><pre>${escapeHtml(detail)}</pre></div>`;
+    return `<div class="status error"><strong>${escapeHtml(message)}</strong><pre dir="auto">${escapeHtml(detail)}</pre></div>`;
 }
 function relaysStyles() {
-    return `
-    <style>
-      :host { display: contents; }
-      /* Toolbar and tab strip are panel chrome: they must never flex-shrink
-         (the app container is a fixed-height flex column; with shrink enabled
-         the viewer's huge content basis starves them down to a sliver once a
-         tall document renders). The viewer absorbs all shrinking instead. */
-      .toolbar { flex: 0 0 auto; justify-content: space-between; padding-inline-start: 10px; }
+    return `
+    <style>
+      :host { display: contents; }
+      /* Toolbar and tab strip are panel chrome: they must never flex-shrink
+         (the app container is a fixed-height flex column; with shrink enabled
+         the viewer's huge content basis starves them down to a sliver once a
+         tall document renders). The viewer absorbs all shrinking instead. */
+      .toolbar { flex: 0 0 auto; justify-content: space-between; padding-inline-start: 10px; }
       .toolbar[hidden], .document-tabs[hidden] { display: none; }
-      .toolbar-actions { justify-content: flex-end; }
-      .relay-name { min-width: 0; color: var(--pi-text-secondary); overflow-wrap: anywhere; }
-      .document-tabs { flex: 0 0 auto; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
-      .viewer { flex: 1 1 auto; box-sizing: border-box; display: grid; align-content: start; gap: 12px; min-height: 0; overflow: auto; padding: 12px; }
-      /* Grid children default to min-width: auto; without these caps a wide code
-         block or table would silently stretch the whole viewer track. */
-      .viewer > * { box-sizing: border-box; min-width: 0; max-width: 100%; }
-      [data-refresh] svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
-      select { min-width: 0; max-width: 240px; }
-      /* Folder controls interleave with file tabs; shared groups keep nested controls contiguous. */
-      .directory-tab .chevron { flex: 0 0 auto; width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.12s ease; }
-      .directory-tab[aria-expanded="true"] .chevron { transform: rotate(90deg); }
-      /* The selection survives a folder collapse: the nearest collapsed ancestor
-         highlights instead, without taking the fill reserved for the open document. */
-      .directory-tab.contains-active { color: var(--pi-accent); }
-      .directory-tab.contains-active::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pi-accent); }
-      code, pre { border: 1px solid var(--pi-border-muted); border-radius: 6px; background: var(--pi-bg); color: var(--pi-text-secondary); font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
-      code { padding: 2px 5px; }
-      pre { margin: 0; overflow: auto; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
-      .document.markdown { line-height: 1.5; overflow-wrap: anywhere; }
-      .document.markdown p, .document.markdown ul, .document.markdown ol, .document.markdown pre, .document.markdown blockquote, .document.markdown .table-scroll { margin: 0 0 10px; }
-      .document.markdown > :last-child { margin-bottom: 0; }
-      .document.markdown h1, .document.markdown h2, .document.markdown h3, .document.markdown h4 { line-height: 1.25; margin: 14px 0 8px; }
-      .document.markdown h1:first-child, .document.markdown h2:first-child, .document.markdown h3:first-child, .document.markdown h4:first-child { margin-top: 0; }
-      .document.markdown h1 { font-size: 18px; }
-      .document.markdown h2 { font-size: 16px; }
-      .document.markdown h3 { font-size: 14px; }
-      .document.markdown h4 { font-size: 13px; }
-      .document.markdown ul, .document.markdown ol { padding-left: 22px; }
-      .document.markdown li + li { margin-top: 3px; }
-      .document.markdown pre { white-space: pre; overflow-wrap: normal; }
-      .document.markdown pre code { border: 0; background: transparent; padding: 0; }
-      .document.markdown img { box-sizing: border-box; max-width: 100%; }
-      .document.markdown blockquote { border-left: 3px solid var(--pi-border-muted); color: var(--pi-muted); padding-left: 10px; }
-      .document.markdown a { color: var(--pi-accent); }
-      .document.markdown .table-scroll { max-width: 100%; overflow-x: auto; }
-      /* Cells wrap at word boundaries only: a wide table keeps its natural width
-         and scrolls inside .table-scroll instead of being squeezed unreadably. */
-      .document.markdown table { border-collapse: collapse; overflow-wrap: normal; }
-      .document.markdown th, .document.markdown td { border: 1px solid var(--pi-border-muted); padding: 4px 8px; }
-      .status pre { margin-top: 8px; }
-      .muted { color: var(--pi-muted); }
-      .empty-state { border: 1px dashed var(--pi-border-muted); border-radius: 8px; color: var(--pi-muted); padding: 12px; }
-      .empty-state p { margin: 6px 0 0; }
-      .status { border: 1px solid var(--pi-border); border-radius: 8px; padding: 10px; }
-      .status.info { border-color: var(--pi-accent-border); background: var(--pi-bg-overlay-soft); }
-      .status.error { border-color: var(--pi-danger); color: var(--pi-danger); }
-      .empty { padding: 16px; color: var(--pi-muted); }
-    </style>
+      .toolbar-actions { justify-content: flex-end; }
+      .relay-name { min-width: 0; color: var(--pi-text-secondary); overflow-wrap: anywhere; }
+      .document-tabs { flex: 0 0 auto; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
+      .viewer { flex: 1 1 auto; box-sizing: border-box; display: grid; align-content: start; gap: 12px; min-height: 0; overflow: auto; padding: 12px; }
+      /* Grid children default to min-width: auto; without these caps a wide code
+         block or table would silently stretch the whole viewer track. */
+      .viewer > * { box-sizing: border-box; min-width: 0; max-width: 100%; }
+      [data-refresh] svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
+      select { min-width: 0; max-width: 240px; }
+      /* Folder controls interleave with file tabs; shared groups keep nested controls contiguous. */
+      .directory-tab .chevron { flex: 0 0 auto; width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.12s ease; }
+      .document-tabs[dir="rtl"] .directory-tab .chevron { transform: scaleX(-1); }
+      .directory-tab[aria-expanded="true"] .chevron, .document-tabs[dir="rtl"] .directory-tab[aria-expanded="true"] .chevron { transform: rotate(90deg); }
+      /* The selection survives a folder collapse: the nearest collapsed ancestor
+         highlights instead, without taking the fill reserved for the open document. */
+      .directory-tab.contains-active { color: var(--pi-accent); }
+      .directory-tab.contains-active::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pi-accent); }
+      code, pre { direction: ltr; unicode-bidi: isolate; border: 1px solid var(--pi-border-muted); border-radius: 6px; background: var(--pi-bg); color: var(--pi-text-secondary); font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+      code { padding: 2px 5px; }
+      pre { margin: 0; overflow: auto; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
+      .document.markdown { line-height: 1.5; overflow-wrap: anywhere; }
+      .document.markdown p, .document.markdown ul, .document.markdown ol, .document.markdown pre, .document.markdown blockquote, .document.markdown .table-scroll { margin: 0 0 10px; }
+      .document.markdown > :last-child { margin-bottom: 0; }
+      .document.markdown h1, .document.markdown h2, .document.markdown h3, .document.markdown h4 { line-height: 1.25; margin: 14px 0 8px; }
+      .document.markdown h1:first-child, .document.markdown h2:first-child, .document.markdown h3:first-child, .document.markdown h4:first-child { margin-top: 0; }
+      .document.markdown h1 { font-size: 18px; }
+      .document.markdown h2 { font-size: 16px; }
+      .document.markdown h3 { font-size: 14px; }
+      .document.markdown h4 { font-size: 13px; }
+      .document.markdown ul, .document.markdown ol { padding-inline-start: 22px; }
+      .document.markdown li + li { margin-top: 3px; }
+      .document.markdown pre { white-space: pre; overflow-wrap: normal; }
+      .document.markdown pre code { border: 0; background: transparent; padding: 0; }
+      .document.markdown img { box-sizing: border-box; max-width: 100%; }
+      .document.markdown blockquote { border-inline-start: 3px solid var(--pi-border-muted); color: var(--pi-muted); padding-inline-start: 10px; }
+      .document.markdown a { color: var(--pi-accent); }
+      .document.markdown .table-scroll { max-width: 100%; overflow-x: auto; }
+      /* Cells wrap at word boundaries only: a wide table keeps its natural width
+         and scrolls inside .table-scroll instead of being squeezed unreadably. */
+      .document.markdown table { border-collapse: collapse; overflow-wrap: normal; }
+      .document.markdown th, .document.markdown td { border: 1px solid var(--pi-border-muted); padding: 4px 8px; }
+      .status pre { margin-top: 8px; }
+      .muted { color: var(--pi-muted); }
+      .empty-state { border: 1px dashed var(--pi-border-muted); border-radius: 8px; color: var(--pi-muted); padding: 12px; }
+      .empty-state p { margin: 6px 0 0; }
+      .status { border: 1px solid var(--pi-border); border-radius: 8px; padding: 10px; }
+      .status.info { border-color: var(--pi-accent-border); background: var(--pi-bg-overlay-soft); }
+      .status.error { border-color: var(--pi-danger); color: var(--pi-danger); }
+      .empty { padding: 16px; color: var(--pi-muted); }
+    </style>
   `;
 }
 function escapeHtml(value) {