@21stware/rpui 0.5.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

@@ -3,4 +3,9 @@ export interface LiveRenderOpts {
     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

@@ -4,5 +4,6 @@ export interface RpmlDoc {
 }
 export interface GalleryController {
     update(newDocs: RpmlDoc[]): void;
+    destroy(): void;
 }
 export declare function mountGallery(docs: RpmlDoc[], host?: HTMLElement): GalleryController;

package/dist/gallery.js

@@ -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 {
@@ -99608,7 +99629,6 @@ function liveRender(host, source, opts = {}) {
     }));
   }
 }
-registerAll();
 const THEME_STYLE_ID = "rpml-theme-style";
 const ATTR = "data-rpml-theme";
 const THEME_CSS = `
@@ -99840,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;
@@ -99873,7 +99896,6 @@ function mountGallery(docs, host = document.body) {
     history.pushState(null, "", a.hash);
     show(path);
   });
-  window.addEventListener("popstate", route);
   route();
   const controller = {
     update(newDocs) {
@@ -99892,6 +99914,13 @@ function mountGallery(docs, host = document.body) {
         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;
@@ -99900,17 +99929,20 @@ function mountGallery(docs, host = document.body) {
 const inlined = globalThis.__RPML_DOCS__;
 if (inlined && Array.isArray(inlined) && inlined.length) {
   const mount = () => {
-    mountGallery(inlined);
+    const gallery = 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);
+          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);