@21stware/rpui 0.4.4 → 0.5.5

package/dist/canvas/page.d.ts

@@ -1,3 +1,6 @@
 export declare class RpPage extends HTMLElement {
+    private _handlers?;
     connectedCallback(): void;
+    private wireRouting;
+    disconnectedCallback(): void;
 }

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

@@ -0,0 +1,11 @@
+export interface LiveRenderOpts {
+    scroller?: Element | null;
+    preserve?: boolean;
+    onError?: (msg: string | null) => void;
+}
+export interface DocRenderer {
+    render(source: string): void;
+    destroy(): void;
+}
+export declare function createDocRenderer(host: HTMLElement, opts?: Pick<LiveRenderOpts, 'scroller' | 'onError'>): DocRenderer;
+export declare function liveRender(host: HTMLElement, source: string, opts?: LiveRenderOpts): void;

package/dist/gallery.d.ts

@@ -2,4 +2,8 @@ export interface RpmlDoc {
     path: string;
     source: string;
 }
-export declare function mountGallery(docs: RpmlDoc[], host?: HTMLElement): void;
+export interface GalleryController {
+    update(newDocs: RpmlDoc[]): void;
+    destroy(): 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; }
@@ -1031,8 +1031,13 @@ function activateSection(path, pane) {
   setTimeout(() => target.classList.remove("rp-section-focus"), 3e3);
 }
 class RpPage extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "_handlers");
+  }
   connectedCallback() {
     injectStyle();
+    this.wireRouting();
     if (this.dataset.rpReady) return;
     this.dataset.rpReady = "true";
     const pageTitle = attr(this, "title", "Untitled");
@@ -1069,13 +1074,29 @@ class RpPage extends HTMLElement {
       const mv = body.querySelector("main-view, main-view");
       if (mv) header.style.maxWidth = `${mv.offsetWidth}px`;
     });
+    this.wireRouting();
+    requestAnimationFrame(this._handlers[0]);
+  }
+  /** Section routing: handle URL and rp-section events. Re-queries the pane
+   *  lazily so listeners don't capture build-scope DOM (survives reconnect). */
+  wireRouting() {
+    if (this._handlers) return;
+    const pane = () => this.querySelector(".annotation-el-pane");
     const go = () => {
       const sec = new URLSearchParams(location.search).get("section");
-      if (sec) activateSection(sec, pane);
+      if (sec) activateSection(sec, pane());
     };
+    const onSection = (e) => activateSection(e.detail, pane());
+    this._handlers = [go, onSection];
     window.addEventListener("popstate", go);
-    window.addEventListener("rp-section", (e) => activateSection(e.detail, pane));
-    requestAnimationFrame(go);
+    window.addEventListener("rp-section", onSection);
+  }
+  disconnectedCallback() {
+    if (this._handlers) {
+      window.removeEventListener("popstate", this._handlers[0]);
+      window.removeEventListener("rp-section", this._handlers[1]);
+      this._handlers = void 0;
+    }
   }
 }
 class GenericElement extends HTMLElement {
@@ -99584,7 +99605,30 @@ function registerAll() {
     define(toComponentTag(suffix), ctor);
   }
 }
-registerAll();
+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;
+      }
+    }));
+  }
+}
 const THEME_STYLE_ID = "rpml-theme-style";
 const ATTR = "data-rpml-theme";
 const THEME_CSS = `
@@ -99721,14 +99765,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><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>`;
+  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);
@@ -99781,25 +99824,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 }))));
     }
@@ -99808,14 +99860,17 @@ function mountGallery(docs, host = document.body) {
     const path = decodeURIComponent(location.hash.slice(1)) || pickDefault();
     show(path);
   }
-  window.addEventListener("rp-anchor", (e) => {
+  const onAnchor = (e) => {
     const { to, section } = e.detail;
     const target = resolveAnchorTarget(to, currentPath, new Set(byPath.keys()));
     if (!target) return;
     e.preventDefault();
     history.pushState(null, "", `#${target}`);
     show(target, section);
-  });
+  };
+  const onPopstate = () => route();
+  window.addEventListener("rp-anchor", onAnchor);
+  window.addEventListener("popstate", onPopstate);
   nav.addEventListener("click", (e) => {
     var _a2;
     const el = e.target;
@@ -99841,13 +99896,57 @@ function mountGallery(docs, host = document.body) {
     history.pushState(null, "", a.hash);
     show(path);
   });
-  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);
+      }
+    },
+    destroy() {
+      window.removeEventListener("rp-anchor", onAnchor);
+      window.removeEventListener("popstate", onPopstate);
+      host.innerHTML = "";
+      const g = globalThis;
+      if (g.__RPML_GALLERY__ === controller) delete g.__RPML_GALLERY__;
+    }
+  };
+  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 = () => {
+    const gallery = mountGallery(inlined);
+    if (globalThis.__RPML_LIVE__) {
+      const es = new EventSource("/~live");
+      es.onmessage = (ev) => {
+        try {
+          gallery.update(JSON.parse(ev.data));
+        } catch {
+        }
+      };
+      const origDestroy = gallery.destroy.bind(gallery);
+      gallery.destroy = () => {
+        es.close();
+        origDestroy();
+      };
+    }
+  };
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", mount);
+  else mount();
 }
 export {
   mountGallery