@21stware/rpui 0.4.3 → 0.5.4

package/dist/core/live-render.d.ts

@@ -0,0 +1,6 @@
+export interface LiveRenderOpts {
+    scroller?: Element | null;
+    preserve?: boolean;
+    onError?: (msg: string | null) => void;
+}
+export declare function liveRender(host: HTMLElement, source: string, opts?: LiveRenderOpts): void;

package/dist/core/theme.d.ts

@@ -0,0 +1,6 @@
+export declare const THEME_CSS = "\n:root {\n  --rpml-gx-border:#e5e7eb; --rpml-gx-side-bg:#fff; --rpml-gx-main-bg:#f4f6f8;\n  --rpml-gx-fg:#111827; --rpml-gx-muted:#6b7280; --rpml-gx-group:#9ca3af;\n  --rpml-gx-hover:#f3f4f6; --rpml-gx-item:#374151; --rpml-gx-active-bg:#eff6ff;\n  --rpml-gx-active-fg:#1d4ed8; --rpml-gx-copy-hover:#e5e7eb; --rpml-gx-ok:#059669;\n}\nhtml[data-rpml-theme=\"dark\"] {\n  --rpml-gx-border:#2a3344; --rpml-gx-side-bg:#0f172a; --rpml-gx-main-bg:#0b1120;\n  --rpml-gx-fg:#e2e8f0; --rpml-gx-muted:#94a3b8; --rpml-gx-group:#64748b;\n  --rpml-gx-hover:#1e293b; --rpml-gx-item:#cbd5e1; --rpml-gx-active-bg:#1e3a5f;\n  --rpml-gx-active-fg:#93c5fd; --rpml-gx-copy-hover:#334155; --rpml-gx-ok:#34d399;\n}\nhtml[data-rpml-theme=\"dark\"] body { background:#0b1120; }\n/* Invert the rendered prototype as a whole; hue-rotate keeps colors recognizable. */\nhtml[data-rpml-theme=\"dark\"] page-el { filter:invert(0.92) hue-rotate(180deg); }\n\n.rpml-theme-fab {\n  position:fixed; top:12px; right:12px; z-index:50; display:flex; align-items:center;\n  justify-content:center; width:34px; height:34px; padding:0; border:1px solid var(--rpml-gx-border);\n  border-radius:9px; background:var(--rpml-gx-side-bg); color:var(--rpml-gx-fg); font-size:16px;\n  line-height:1; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12);\n}\n.rpml-theme-fab:hover { background:var(--rpml-gx-hover); }\n";
+export declare function injectThemeStyle(): void;
+export declare function currentTheme(): 'light' | 'dark';
+export declare function setTheme(theme: 'light' | 'dark'): void;
+export declare function initTheme(): void;
+export declare function mountThemeFab(host?: HTMLElement): void;

package/dist/gallery.d.ts

@@ -2,4 +2,7 @@ export interface RpmlDoc {
     path: string;
     source: string;
 }
-export declare function mountGallery(docs: RpmlDoc[], host?: HTMLElement): void;
+export interface GalleryController {
+    update(newDocs: RpmlDoc[]): void;
+}
+export declare function mountGallery(docs: RpmlDoc[], host?: HTMLElement): GalleryController;

package/dist/gallery.js

@@ -1,6 +1,59 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+function attr(el, name, fallback = "") {
+  return el.getAttribute(name) ?? fallback;
+}
+function intAttr(el, name, fallback) {
+  const raw = el.getAttribute(name);
+  const value = raw === null || raw === "" ? NaN : Number(raw);
+  return Number.isFinite(value) ? value : fallback;
+}
+function escapeHtml(value) {
+  return value.replace(/[&<>'"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#39;", '"': "&quot;" })[c] || c);
+}
+function csv(el, name, fallback) {
+  return attr(el, name, fallback).split(",").map((s) => s.trim()).filter(Boolean);
+}
+const deviceWidths = { web: 1440, ipad: 834, mobile: 390 };
+function resolveWidth(el, fallback) {
+  const raw = el.getAttribute("width");
+  const width = raw === null || raw === "" ? NaN : Number(raw);
+  if (Number.isFinite(width)) return width;
+  return deviceWidths[attr(el, "device")] ?? fallback;
+}
+function hasExplicitNumericHeight(el) {
+  const raw = el.getAttribute("height");
+  return raw !== null && raw !== "" && Number.isFinite(Number(raw));
+}
+function usesAutoHeight(el) {
+  const raw = el.getAttribute("height");
+  return raw === "auto" || el.hasAttribute("auto-height") || !!el.getAttribute("device") && !hasExplicitNumericHeight(el);
+}
+function resolveHeight(el, fallback) {
+  const raw = el.getAttribute("height");
+  const height = raw === null || raw === "" ? NaN : Number(raw);
+  return Number.isFinite(height) ? height : fallback;
+}
+function isTopAnnotation(node) {
+  if (!(node instanceof HTMLElement)) return false;
+  const tag = node.tagName.toLowerCase();
+  return tag === "annotation-el" || tag === "annotation-el";
+}
+function isGlobalAnnotation(node) {
+  return node instanceof HTMLElement && node.tagName.toLowerCase() === "annotation-global-el";
+}
+function isViewportNode(node) {
+  if (!(node instanceof HTMLElement)) return false;
+  const tag = node.tagName.toLowerCase();
+  return tag === "viewport-el" || tag === "viewport-el";
+}
+function define(name, ctor) {
+  if (customElements.get(name)) return;
+  const Alias = class extends ctor {
+  };
+  customElements.define(name, Alias);
+}
 const PRIMITIVES = [
   // layout
   "viewport",
@@ -187,59 +240,6 @@ function parseToPage(source) {
   if (!root) throw new Error("RPML parse error: no <page> root element found");
   return root;
 }
-function attr(el, name, fallback = "") {
-  return el.getAttribute(name) ?? fallback;
-}
-function intAttr(el, name, fallback) {
-  const raw = el.getAttribute(name);
-  const value = raw === null || raw === "" ? NaN : Number(raw);
-  return Number.isFinite(value) ? value : fallback;
-}
-function escapeHtml(value) {
-  return value.replace(/[&<>'"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#39;", '"': "&quot;" })[c] || c);
-}
-function csv(el, name, fallback) {
-  return attr(el, name, fallback).split(",").map((s) => s.trim()).filter(Boolean);
-}
-const deviceWidths = { web: 1440, ipad: 834, mobile: 390 };
-function resolveWidth(el, fallback) {
-  const raw = el.getAttribute("width");
-  const width = raw === null || raw === "" ? NaN : Number(raw);
-  if (Number.isFinite(width)) return width;
-  return deviceWidths[attr(el, "device")] ?? fallback;
-}
-function hasExplicitNumericHeight(el) {
-  const raw = el.getAttribute("height");
-  return raw !== null && raw !== "" && Number.isFinite(Number(raw));
-}
-function usesAutoHeight(el) {
-  const raw = el.getAttribute("height");
-  return raw === "auto" || el.hasAttribute("auto-height") || !!el.getAttribute("device") && !hasExplicitNumericHeight(el);
-}
-function resolveHeight(el, fallback) {
-  const raw = el.getAttribute("height");
-  const height = raw === null || raw === "" ? NaN : Number(raw);
-  return Number.isFinite(height) ? height : fallback;
-}
-function isTopAnnotation(node) {
-  if (!(node instanceof HTMLElement)) return false;
-  const tag = node.tagName.toLowerCase();
-  return tag === "annotation-el" || tag === "annotation-el";
-}
-function isGlobalAnnotation(node) {
-  return node instanceof HTMLElement && node.tagName.toLowerCase() === "annotation-global-el";
-}
-function isViewportNode(node) {
-  if (!(node instanceof HTMLElement)) return false;
-  const tag = node.tagName.toLowerCase();
-  return tag === "viewport-el" || tag === "viewport-el";
-}
-function define(name, ctor) {
-  if (customElements.get(name)) return;
-  const Alias = class extends ctor {
-  };
-  customElements.define(name, Alias);
-}
 const RPUI_STYLE_ID = "rpui-runtime-style";
 const style = `
 :root { --rp-bg:#f0f2f5; --rp-surface:#fff; --rp-surface-soft:#f9fafb; --rp-text:#111827; --rp-muted:#6b7280; --rp-border:#e5e7eb; --rp-border-strong:#d1d5db; --rp-primary:#2563eb; --rp-success:#059669; --rp-warning:#d97706; --rp-danger:#dc2626; --rp-purple:#7c3aed; --rp-radius-sm:4px; --rp-radius-md:8px; --rp-radius-lg:12px; --rp-shadow:0 8px 28px rgba(15,23,42,.08); --rp-font:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
@@ -868,6 +868,10 @@ class RpAnnotationGlobal extends HTMLElement {
     this.dataset.rpReady = "true";
     const existing = Array.from(this.childNodes);
     const label = attr(this, "label", "全局说明");
+    const globalSiblings = this.parentElement ? Array.from(this.parentElement.children).filter(
+      (el) => el.tagName.toLowerCase() === "annotation-global-el"
+    ) : [];
+    this.dataset.rpSection = `global-${globalSiblings.indexOf(this) + 1}`;
     const marker = document.createElement("span");
     marker.className = "annotation-el-marker global";
     marker.innerHTML = "<span>★</span>";
@@ -99580,30 +99584,118 @@ function registerAll() {
     define(toComponentTag(suffix), ctor);
   }
 }
+function liveRender(host, source, opts = {}) {
+  const { scroller, preserve = true, onError } = opts;
+  const sc = scroller ?? document.scrollingElement ?? document.documentElement;
+  const pane = preserve ? host.querySelector(".annotation-el-pane") : null;
+  const pos = preserve ? { x: sc.scrollLeft, y: sc.scrollTop, px: (pane == null ? void 0 : pane.scrollLeft) ?? 0, py: (pane == null ? void 0 : pane.scrollTop) ?? 0 } : null;
+  try {
+    host.replaceChildren(parseToPage(source));
+    onError == null ? void 0 : onError(null);
+  } catch (e) {
+    onError == null ? void 0 : onError(e.message ?? String(e));
+    return;
+  }
+  if (pos) {
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      sc.scrollLeft = pos.x;
+      sc.scrollTop = pos.y;
+      const newPane = host.querySelector(".annotation-el-pane");
+      if (newPane) {
+        newPane.scrollLeft = pos.px;
+        newPane.scrollTop = pos.py;
+      }
+    }));
+  }
+}
 registerAll();
+const THEME_STYLE_ID = "rpml-theme-style";
+const ATTR = "data-rpml-theme";
+const THEME_CSS = `
+:root {
+  --rpml-gx-border:#e5e7eb; --rpml-gx-side-bg:#fff; --rpml-gx-main-bg:#f4f6f8;
+  --rpml-gx-fg:#111827; --rpml-gx-muted:#6b7280; --rpml-gx-group:#9ca3af;
+  --rpml-gx-hover:#f3f4f6; --rpml-gx-item:#374151; --rpml-gx-active-bg:#eff6ff;
+  --rpml-gx-active-fg:#1d4ed8; --rpml-gx-copy-hover:#e5e7eb; --rpml-gx-ok:#059669;
+}
+html[${ATTR}="dark"] {
+  --rpml-gx-border:#2a3344; --rpml-gx-side-bg:#0f172a; --rpml-gx-main-bg:#0b1120;
+  --rpml-gx-fg:#e2e8f0; --rpml-gx-muted:#94a3b8; --rpml-gx-group:#64748b;
+  --rpml-gx-hover:#1e293b; --rpml-gx-item:#cbd5e1; --rpml-gx-active-bg:#1e3a5f;
+  --rpml-gx-active-fg:#93c5fd; --rpml-gx-copy-hover:#334155; --rpml-gx-ok:#34d399;
+}
+html[${ATTR}="dark"] body { background:#0b1120; }
+/* Invert the rendered prototype as a whole; hue-rotate keeps colors recognizable. */
+html[${ATTR}="dark"] page-el { filter:invert(0.92) hue-rotate(180deg); }
+
+.rpml-theme-fab {
+  position:fixed; top:12px; right:12px; z-index:50; display:flex; align-items:center;
+  justify-content:center; width:34px; height:34px; padding:0; border:1px solid var(--rpml-gx-border);
+  border-radius:9px; background:var(--rpml-gx-side-bg); color:var(--rpml-gx-fg); font-size:16px;
+  line-height:1; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12);
+}
+.rpml-theme-fab:hover { background:var(--rpml-gx-hover); }
+`;
+function injectThemeStyle() {
+  if (document.getElementById(THEME_STYLE_ID)) return;
+  const s = document.createElement("style");
+  s.id = THEME_STYLE_ID;
+  s.textContent = THEME_CSS;
+  document.head.appendChild(s);
+}
+function themeFromUrl() {
+  const t = new URLSearchParams(location.search).get("theme");
+  return t === "dark" || t === "light" ? t : null;
+}
+function currentTheme() {
+  return document.documentElement.getAttribute(ATTR) === "dark" ? "dark" : "light";
+}
+function setTheme(theme) {
+  document.documentElement.setAttribute(ATTR, theme);
+  const url = new URL(location.href);
+  url.searchParams.set("theme", theme);
+  history.replaceState(history.state, "", url);
+}
+function initTheme() {
+  const fromUrl = themeFromUrl();
+  if (fromUrl) {
+    document.documentElement.setAttribute(ATTR, fromUrl);
+    return;
+  }
+  const prefersDark = typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches;
+  document.documentElement.setAttribute(ATTR, prefersDark ? "dark" : "light");
+}
 registerAll();
 const CHROME_CSS = `
 .rpml-gallery { display:grid; grid-template-columns:260px 1fr; height:100vh; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
 .rpml-gallery.collapsed { grid-template-columns:1fr; }
 .rpml-gallery.collapsed .rpml-gx-side { display:none; }
-.rpml-gx-side { display:flex; flex-direction:column; border-right:1px solid #e5e7eb; background:#fff; min-height:0; }
-.rpml-gx-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:16px; border-bottom:1px solid #e5e7eb; font-size:14px; font-weight:700; color:#111827; }
-.rpml-gx-head small { display:block; margin-top:3px; font-size:11px; font-weight:400; color:#6b7280; }
-.rpml-gx-toggle { flex:none; display:flex; align-items:center; justify-content:center; width:26px; height:26px; margin:-3px -3px 0 0; padding:0; border:1px solid #e5e7eb; border-radius:7px; background:#fff; color:#6b7280; font-size:15px; line-height:1; cursor:pointer; }
-.rpml-gx-toggle:hover { background:#f3f4f6; color:#111827; }
-.rpml-gx-fab { position:fixed; top:12px; left:12px; z-index:50; display:none; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid #e5e7eb; border-radius:9px; background:#fff; color:#374151; font-size:17px; line-height:1; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12); }
-.rpml-gx-fab:hover { background:#f3f4f6; color:#111827; }
+.rpml-gx-side { display:flex; flex-direction:column; border-right:1px solid var(--rpml-gx-border,#e5e7eb); background:var(--rpml-gx-side-bg,#fff); min-height:0; }
+.rpml-gx-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:16px; border-bottom:1px solid var(--rpml-gx-border,#e5e7eb); font-size:14px; font-weight:700; color:var(--rpml-gx-fg,#111827); }
+.rpml-gx-head small { display:block; margin-top:3px; font-size:11px; font-weight:400; color:var(--rpml-gx-muted,#6b7280); }
+.rpml-gx-head-actions { flex:none; display:flex; gap:6px; margin:-3px -3px 0 0; }
+.rpml-gx-btn { display:flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:1px solid var(--rpml-gx-border,#e5e7eb); border-radius:7px; background:var(--rpml-gx-side-bg,#fff); color:var(--rpml-gx-muted,#6b7280); font-size:15px; line-height:1; cursor:pointer; }
+.rpml-gx-btn:hover { background:var(--rpml-gx-hover,#f3f4f6); color:var(--rpml-gx-fg,#111827); }
+.rpml-gx-fab { position:fixed; top:12px; left:12px; z-index:50; display:none; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid var(--rpml-gx-border,#e5e7eb); border-radius:9px; background:var(--rpml-gx-side-bg,#fff); color:var(--rpml-gx-fg,#374151); font-size:17px; line-height:1; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12); }
+.rpml-gx-fab:hover { background:var(--rpml-gx-hover,#f3f4f6); }
 .rpml-gallery.collapsed .rpml-gx-fab { display:flex; }
 .rpml-gx-nav { flex:1; overflow-y:auto; padding:8px; }
-.rpml-gx-group { padding:10px 8px 3px; font-size:11px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em; }
-.rpml-gx-item { display:block; padding:6px 10px; border-radius:7px; font-size:13px; color:#374151; text-decoration:none; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
-.rpml-gx-item:hover { background:#f3f4f6; }
-.rpml-gx-item.active { background:#eff6ff; color:#1d4ed8; font-weight:650; }
-.rpml-gx-indent { padding-left:22px; }
-.rpml-gx-main { overflow:auto; min-height:0; background:#f4f6f8; }
+.rpml-gx-group { padding:10px 8px 3px; font-size:11px; font-weight:700; color:var(--rpml-gx-group,#9ca3af); text-transform:uppercase; letter-spacing:.04em; }
+.rpml-gx-row { display:flex; align-items:center; border-radius:7px; }
+.rpml-gx-row:hover { background:var(--rpml-gx-hover,#f3f4f6); }
+.rpml-gx-row.active { background:var(--rpml-gx-active-bg,#eff6ff); }
+.rpml-gx-item { flex:1; min-width:0; display:block; padding:6px 10px; font-size:13px; color:var(--rpml-gx-item,#374151); text-decoration:none; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.rpml-gx-row.active .rpml-gx-item { color:var(--rpml-gx-active-fg,#1d4ed8); font-weight:650; }
+.rpml-gx-indent .rpml-gx-item { padding-left:22px; }
+.rpml-gx-copy { flex:none; margin-right:6px; padding:3px 7px; border:1px solid var(--rpml-gx-border,#e5e7eb); border-radius:6px; background:transparent; color:var(--rpml-gx-muted,#9ca3af); font-size:11px; line-height:1.4; cursor:pointer; opacity:0; transition:opacity .12s; }
+.rpml-gx-row:hover .rpml-gx-copy { opacity:1; }
+.rpml-gx-copy:hover { background:var(--rpml-gx-copy-hover,#e5e7eb); color:var(--rpml-gx-fg,#111827); }
+.rpml-gx-copy.copied { opacity:1; color:var(--rpml-gx-ok,#059669); border-color:var(--rpml-gx-ok,#059669); }
+.rpml-gx-main { overflow:auto; min-height:0; background:var(--rpml-gx-main-bg,#f4f6f8); }
 .rpml-gx-err { padding:40px; color:#dc2626; font-family:ui-monospace,Menlo,monospace; }
 `;
 function injectChrome() {
+  injectThemeStyle();
   if (document.getElementById("rpml-gallery-style")) return;
   const s = document.createElement("style");
   s.id = "rpml-gallery-style";
@@ -99653,14 +99745,13 @@ function resolveAnchorTarget(to, fromPath, paths) {
 }
 function mountGallery(docs, host = document.body) {
   injectChrome();
-  const byPath = new Map(docs.map((d) => [d.path, d]));
-  const tree = buildTree(docs);
+  let byPath = new Map(docs.map((d) => [d.path, d]));
+  let tree = buildTree(docs);
   const root = document.createElement("div");
   root.className = "rpml-gallery";
   const side = document.createElement("aside");
   side.className = "rpml-gx-side";
-  const count = docs.length;
-  side.innerHTML = `<div class="rpml-gx-head"><span>RPML 文档<small>${count} 个文件</small></span><button class="rpml-gx-toggle" type="button" title="收起侧边栏" aria-label="收起侧边栏">«</button></div>`;
+  side.innerHTML = `<div class="rpml-gx-head"><span>RPML 文档<small>${docs.length} 个文件</small></span><div class="rpml-gx-head-actions"><button class="rpml-gx-btn rpml-gx-theme" type="button" title="切换亮色/暗色" aria-label="切换亮色/暗色">◑</button><button class="rpml-gx-btn rpml-gx-toggle" type="button" title="收起侧边栏" aria-label="收起侧边栏">«</button></div></div>`;
   const nav = document.createElement("nav");
   nav.className = "rpml-gx-nav";
   side.appendChild(nav);
@@ -99677,18 +99768,32 @@ function mountGallery(docs, host = document.body) {
   host.appendChild(root);
   side.querySelector(".rpml-gx-toggle").addEventListener("click", () => root.classList.add("collapsed"));
   fab.addEventListener("click", () => root.classList.remove("collapsed"));
+  initTheme();
+  side.querySelector(".rpml-gx-theme").addEventListener("click", () => {
+    setTheme(currentTheme() === "dark" ? "light" : "dark");
+  });
   const links = /* @__PURE__ */ new Map();
   function renderNav(node, depth) {
     const entries = [...node.children.values()];
     const leaves = entries.filter((e) => e.path).sort((a, b) => a.name.localeCompare(b.name));
     const folders = entries.filter((e) => !e.path).sort((a, b) => a.name.localeCompare(b.name));
     for (const leaf of leaves) {
+      const row = document.createElement("div");
+      row.className = depth > 0 ? "rpml-gx-row rpml-gx-indent" : "rpml-gx-row";
       const a = document.createElement("a");
-      a.className = depth > 0 ? "rpml-gx-item rpml-gx-indent" : "rpml-gx-item";
+      a.className = "rpml-gx-item";
       a.textContent = leaf.title || leaf.name;
       a.href = `#${leaf.path}`;
-      links.set(leaf.path, a);
-      nav.appendChild(a);
+      const copy = document.createElement("button");
+      copy.className = "rpml-gx-copy";
+      copy.type = "button";
+      copy.title = "复制此页全部内容";
+      copy.setAttribute("aria-label", "复制此页全部内容");
+      copy.dataset.copyPath = leaf.path;
+      copy.textContent = "copy";
+      row.append(a, copy);
+      links.set(leaf.path, row);
+      nav.appendChild(row);
     }
     for (const folder of folders) {
       const g = document.createElement("div");
@@ -99699,25 +99804,34 @@ function mountGallery(docs, host = document.body) {
     }
   }
   renderNav(tree, 0);
+  function rebuildNav(newDocs) {
+    nav.innerHTML = "";
+    links.clear();
+    tree = buildTree(newDocs);
+    renderNav(tree, 0);
+    side.querySelector(".rpml-gx-head small").textContent = `${newDocs.length} 个文件`;
+  }
   function pickDefault() {
-    const idx = docs.find((d) => basename(d.path).replace(/\.rpml$/i, "").toLowerCase() === "index");
-    return (idx ?? docs[0]).path;
+    const cur = [...byPath.values()];
+    const idx = cur.find((d) => basename(d.path).replace(/\.rpml$/i, "").toLowerCase() === "index");
+    return (idx ?? cur[0]).path;
   }
   let currentPath = "";
-  function show(path, section) {
+  function show(path, section, preserve = false) {
     const doc = byPath.get(path);
     if (!doc) {
       main.innerHTML = `<div class="rpml-gx-err">未找到文档：${path}</div>`;
       return;
     }
-    try {
-      main.innerHTML = "";
-      main.appendChild(parseToPage(doc.source));
-      currentPath = path;
-    } catch (e) {
-      main.innerHTML = `<div class="rpml-gx-err">RPML 解析错误：${e.message}</div>`;
-    }
-    links.forEach((a, p) => a.classList.toggle("active", p === path));
+    liveRender(main, doc.source, {
+      scroller: main,
+      preserve,
+      onError: (msg) => {
+        if (msg) main.innerHTML = `<div class="rpml-gx-err">RPML 解析错误：${msg}</div>`;
+      }
+    });
+    currentPath = path;
+    links.forEach((row, p) => row.classList.toggle("active", p === path));
     if (section) {
       requestAnimationFrame(() => requestAnimationFrame(() => window.dispatchEvent(new CustomEvent("rp-section", { detail: section }))));
     }
@@ -99735,7 +99849,24 @@ function mountGallery(docs, host = document.body) {
     show(target, section);
   });
   nav.addEventListener("click", (e) => {
-    const a = e.target.closest("a.rpml-gx-item");
+    var _a2;
+    const el = e.target;
+    const copyBtn = el.closest(".rpml-gx-copy");
+    if (copyBtn) {
+      e.preventDefault();
+      const doc = byPath.get(copyBtn.dataset.copyPath);
+      if (!doc) return;
+      void ((_a2 = navigator.clipboard) == null ? void 0 : _a2.writeText(doc.source).then(() => {
+        copyBtn.classList.add("copied");
+        copyBtn.textContent = "已复制";
+        setTimeout(() => {
+          copyBtn.classList.remove("copied");
+          copyBtn.textContent = "copy";
+        }, 1500);
+      }));
+      return;
+    }
+    const a = el.closest("a.rpml-gx-item");
     if (!a) return;
     e.preventDefault();
     const path = decodeURIComponent(a.hash.slice(1));
@@ -99744,11 +99875,46 @@ function mountGallery(docs, host = document.body) {
   });
   window.addEventListener("popstate", route);
   route();
+  const controller = {
+    update(newDocs) {
+      var _a2;
+      const prevSource = (_a2 = byPath.get(currentPath)) == null ? void 0 : _a2.source;
+      byPath = new Map(newDocs.map((d) => [d.path, d]));
+      const newPaths = newDocs.map((d) => d.path).sort().join("\0");
+      const oldPaths = [...links.keys()].sort().join("\0");
+      if (newPaths !== oldPaths) rebuildNav(newDocs);
+      const curr = byPath.get(currentPath);
+      if (curr) {
+        if (curr.source !== prevSource) show(currentPath, void 0, true);
+        else links.forEach((row, p) => row.classList.toggle("active", p === currentPath));
+      } else if (newDocs.length) {
+        const def = pickDefault();
+        history.replaceState(null, "", `#${def}`);
+        show(def);
+      }
+    }
+  };
+  globalThis.__RPML_GALLERY__ = controller;
+  return controller;
 }
 const inlined = globalThis.__RPML_DOCS__;
 if (inlined && Array.isArray(inlined) && inlined.length) {
-  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", () => mountGallery(inlined));
-  else mountGallery(inlined);
+  const mount = () => {
+    mountGallery(inlined);
+    if (globalThis.__RPML_LIVE__) {
+      const es = new EventSource("/~live");
+      es.onmessage = (ev) => {
+        var _a2;
+        try {
+          const docs = JSON.parse(ev.data);
+          (_a2 = globalThis.__RPML_GALLERY__) == null ? void 0 : _a2.update(docs);
+        } catch {
+        }
+      };
+    }
+  };
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", mount);
+  else mount();
 }
 export {
   mountGallery