@21stware/rpui 0.4.3 → 0.4.4

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.js

@@ -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>";
@@ -99581,29 +99585,93 @@ function registerAll() {
   }
 }
 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";
@@ -99660,7 +99728,7 @@ function mountGallery(docs, host = document.body) {
   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>${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>`;
   const nav = document.createElement("nav");
   nav.className = "rpml-gx-nav";
   side.appendChild(nav);
@@ -99677,18 +99745,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");
@@ -99735,7 +99817,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));