@riebeckite/plugin-ux 0.0.30 → 0.0.32

package/README.md

@@ -4,7 +4,7 @@
 
 Client-side progressive enhancements for reading. The plugin leaves the built
 article HTML untouched and adds a reading progress bar, a back-to-top button,
-table-of-contents scroll-spy, and code copy buttons at runtime.
+and table-of-contents scroll-spy at runtime.
 
 [日本語](./README_ja.md)
 
@@ -17,8 +17,6 @@ table-of-contents scroll-spy, and code copy buttons at runtime.
 - **TOC scroll-spy** — observes `a[href^="#"]` links inside the article table of
   contents with `IntersectionObserver` and marks the active link with
   `.rb-ux__toc-active`.
-- **Code copy buttons** — wraps each `pre > code` in `.rb-ux__code` and adds a
-  copy button (`.rb-ux__copy`) with a transient "copied" state.
 
 Every feature is a no-op when the relevant DOM is absent, and `initUx()` is
 idempotent.
@@ -36,10 +34,7 @@ export default defineConfig({
       progress: true,
       backToTop: true,
       tocScrollSpy: true,
-      codeCopy: true,
       backToTopLabel: "Back to top",
-      copyLabel: "Copy",
-      copiedLabel: "Copied",
     }),
   ],
 });
@@ -54,10 +49,7 @@ The factory is also exported as `ux`.
 | `progress` | `boolean` | `true` | Show the reading progress bar |
 | `backToTop` | `boolean` | `true` | Show the back-to-top button |
 | `tocScrollSpy` | `boolean` | `true` | Highlight the active table-of-contents link |
-| `codeCopy` | `boolean` | `true` | Add a copy button to each code block |
 | `backToTopLabel` | `string` | `"Back to top"` | `aria-label` for the back-to-top button |
-| `copyLabel` | `string` | `"Copy"` | Label of the copy button |
-| `copiedLabel` | `string` | `"Copied"` | Transient label shown after copying |
 
 ## How configuration reaches the client
 
@@ -80,9 +72,6 @@ being inserted twice per page.
 | `rb-ux__back-to-top` | Back-to-top button |
 | `rb-ux__back-to-top--visible` | Added while the button is visible |
 | `rb-ux__toc-active` | Active table-of-contents link |
-| `rb-ux__code` | Code block wrapper |
-| `rb-ux__copy` | Copy button |
-| `rb-ux__copy--copied` | Transient copied state |
 
 Styles ship as `@riebeckite/plugin-ux/style.css` and use the theme's
 `--rb-color-*` tokens so they do not fight the existing theme.
@@ -95,16 +84,15 @@ Styles ship as `@riebeckite/plugin-ux/style.css` and use the theme's
 - The active table-of-contents link receives `aria-current="true"`.
 - Under `prefers-reduced-motion: reduce`, progress and back-to-top transitions
   are disabled and the back-to-top jump becomes an immediate scroll.
-- Progress bar, buttons, and copy buttons are hidden when printing.
+- The progress bar and buttons are hidden when printing.
 
 ## Limitations
 
 - Client-only: without JavaScript nothing is added.
-- No SPA support; a full page load re-initializes the enhancements.
+- With SPA navigation enabled, the enhancements are re-initialized after the
+  page root is replaced.
 - The TOC scroll-spy looks for `.rr-table-of-contents` or `[data-rb-toc]` as
   the table-of-contents container.
-- Copy buttons are skipped inside `.rr-code` blocks (managed by the
-  code-enhance plugin) to avoid duplicate copy UI.
 
 ## Exports
 

package/README_ja.md

@@ -2,7 +2,7 @@
 
 <!-- Generated from docs/docs/plugins/ux.ja.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
 
-記事の読みやすさを高めるクライアント側のプログレッシブ・エンハンスメントをまとめたプラグインです。ビルド後の記事 HTML はそのままに、読み進捗バー・トップへ戻るボタン・目次のスクロール連動ハイライト・コードのコピーボタンを追加します。
+記事の読みやすさを高めるクライアント側のプログレッシブ・エンハンスメントをまとめたプラグインです。ビルド後の記事 HTML はそのままに、読み進捗バー・トップへ戻るボタン・目次のスクロール連動ハイライトを追加します。
 
 [English](./README.md)
 
@@ -11,7 +11,6 @@
 - **読み進捗バー**: 画面上部に固定した細いバー（`.rb-ux__progress`）が記事のスクロール量に追従します。
 - **トップへ戻るボタン**: 一定量スクロールすると表示される button 要素（`.rb-ux__back-to-top`）。`aria-label` を持ち、スムーズスクロールで先頭へ戻ります。
 - **目次のスクロール連動**: 記事の目次コンテナ内の `a[href^="#"]` を `IntersectionObserver` で監視し、現在位置の見出しリンクに `.rb-ux__toc-active` を付けます。
-- **コードのコピーボタン**: 各 `pre > code`（`.rb-ux__code` でラップ）にコピーボタン（`.rb-ux__copy`）を追加します。コピー直後は一時的に「コピーしました」表示へ切り替わります。
 
 いずれも対応する DOM が無いページでは何もしません。`initUx()` は何度呼んでも二重に初期化しません。
 
@@ -28,10 +27,7 @@ export default defineConfig({
       progress: true,
       backToTop: true,
       tocScrollSpy: true,
-      codeCopy: true,
       backToTopLabel: "トップへ戻る",
-      copyLabel: "コピー",
-      copiedLabel: "コピーしました",
     }),
   ],
 });
@@ -46,10 +42,7 @@ export default defineConfig({
 | `progress` | `boolean` | `true` | 読み進捗バーを表示する |
 | `backToTop` | `boolean` | `true` | トップへ戻るボタンを表示する |
 | `tocScrollSpy` | `boolean` | `true` | 目次のスクロール連動ハイライトを有効にする |
-| `codeCopy` | `boolean` | `true` | コードのコピーボタンを追加する |
 | `backToTopLabel` | `string` | `"Back to top"` | トップへ戻るボタンの `aria-label` |
-| `copyLabel` | `string` | `"Copy"` | コピーボタンのラベル |
-| `copiedLabel` | `string` | `"Copied"` | コピー成功時に一時表示するラベル |
 
 ## 設定がクライアントへ渡る仕組み
 
@@ -66,9 +59,6 @@ export default defineConfig({
 | `rb-ux__back-to-top` | トップへ戻る button |
 | `rb-ux__back-to-top--visible` | 表示状態のとき付与 |
 | `rb-ux__toc-active` | 現在位置の目次リンク |
-| `rb-ux__code` | コードブロックのラッパー |
-| `rb-ux__copy` | コピーボタン |
-| `rb-ux__copy--copied` | コピー直後の一時状態 |
 
 スタイルは `@riebeckite/plugin-ux/style.css` として配布し、テーマの `--rb-color-*` トークンを参照するため既存テーマと競合しません。
 
@@ -78,14 +68,13 @@ export default defineConfig({
 - 進捗バーは `role="progressbar"` と `aria-valuemin` / `aria-valuemax` / `aria-valuenow` を持ちます。
 - 目次の現在位置には `aria-current="true"` を付けます。
 - `prefers-reduced-motion: reduce` では進捗バーとトップへ戻るボタンのアニメーションを無効化し、トップへ戻る動作も即時スクロールへ切り替えます。
-- 印刷時は進捗バー・ボタン・コピーボタンを非表示にします。
+- 印刷時は進捗バーとボタンを非表示にします。
 
 ## 制限事項
 
 - クライアント専用です。JavaScript が無効な環境では何も追加されません。
-- SPA ナビゲーションには対応しません。ページ遷移後は再読み込み時に初期化されます。
+- SPA ナビゲーションを有効にした場合は、ページルートの置換後に機能を再初期化します。
 - 目次のスクロール連動は `.rr-table-of-contents` または `[data-rb-toc]` を目次コンテナとして探します。
-- コードのコピーボタンは `.rr-code`（code-enhance プラグインが管理するブロック）には追加しません。二重のコピー UI を避けるためです。
 
 ## 主なエクスポート
 

package/dist/client.js

@@ -4,10 +4,7 @@ var DEFAULT_UX_CONFIG = {
   progress: true,
   backToTop: true,
   tocScrollSpy: true,
-  codeCopy: true,
-  backToTopLabel: "Back to top",
-  copyLabel: "Copy",
-  copiedLabel: "Copied"
+  backToTopLabel: "Back to top"
 };
 
 // src/init.ts
@@ -16,28 +13,27 @@ var PROGRESS_BAR_CLASS = "rb-ux__progress-bar";
 var BACK_TO_TOP_CLASS = "rb-ux__back-to-top";
 var BACK_TO_TOP_VISIBLE_CLASS = "rb-ux__back-to-top--visible";
 var TOC_ACTIVE_CLASS = "rb-ux__toc-active";
-var CODE_CLASS = "rb-ux__code";
-var COPY_CLASS = "rb-ux__copy";
-var COPY_COPIED_CLASS = "rb-ux__copy--copied";
 var BACK_TO_TOP_THRESHOLD = 320;
-var COPIED_STATE_DURATION = 1500;
-var started = false;
-var copiedTimers = /* @__PURE__ */ new WeakMap();
 function initUx() {
-  if (started) return;
-  started = true;
-  const config = readUxConfig();
+  let cleanup = () => {
+  };
   const run = () => {
-    if (config.progress) setupProgress();
-    if (config.backToTop) setupBackToTop(config);
-    if (config.tocScrollSpy) setupTocScrollSpy();
-    if (config.codeCopy) setupCodeCopy(config);
+    const config = readUxConfig();
+    const cleanups = [
+      config.progress ? setupProgress() : void 0,
+      config.backToTop ? setupBackToTop(config) : void 0,
+      config.tocScrollSpy ? setupTocScrollSpy() : void 0
+    ].filter((value) => value !== void 0);
+    cleanup = () => {
+      for (const dispose of cleanups) dispose();
+    };
   };
   if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", run, { once: true });
-  } else {
-    run();
+    return () => document.removeEventListener("DOMContentLoaded", run);
   }
+  run();
+  return () => cleanup();
 }
 function readUxConfig() {
   const element = document.getElementById(UX_CONFIG_ELEMENT_ID);
@@ -50,13 +46,10 @@ function readUxConfig() {
       parsed.tocScrollSpy,
       DEFAULT_UX_CONFIG.tocScrollSpy
     ),
-    codeCopy: readBoolean(parsed.codeCopy, DEFAULT_UX_CONFIG.codeCopy),
     backToTopLabel: readString(
       parsed.backToTopLabel,
       DEFAULT_UX_CONFIG.backToTopLabel
-    ),
-    copyLabel: readString(parsed.copyLabel, DEFAULT_UX_CONFIG.copyLabel),
-    copiedLabel: readString(parsed.copiedLabel, DEFAULT_UX_CONFIG.copiedLabel)
+    )
   };
 }
 function parseConfig(raw) {
@@ -79,7 +72,7 @@ function readString(value, fallback) {
 }
 function setupProgress() {
   const article = findArticle();
-  if (!article || hasElement(PROGRESS_CLASS)) return;
+  if (!article || hasElement(PROGRESS_CLASS)) return void 0;
   const track = document.createElement("div");
   track.className = PROGRESS_CLASS;
   track.setAttribute("role", "progressbar");
@@ -95,7 +88,11 @@ function setupProgress() {
     fill.style.transform = `scaleX(${ratio})`;
     track.setAttribute("aria-valuenow", String(Math.round(ratio * 100)));
   };
-  scheduleOnScroll(update);
+  const stop = scheduleOnScroll(update);
+  return () => {
+    stop();
+    track.remove();
+  };
 }
 function readingProgress(article) {
   const top = article.getBoundingClientRect().top + window.scrollY;
@@ -104,7 +101,7 @@ function readingProgress(article) {
   return clamp((window.scrollY - top) / (end - top), 0, 1);
 }
 function setupBackToTop(config) {
-  if (hasElement(BACK_TO_TOP_CLASS)) return;
+  if (hasElement(BACK_TO_TOP_CLASS)) return void 0;
   const button = document.createElement("button");
   button.type = "button";
   button.className = BACK_TO_TOP_CLASS;
@@ -124,17 +121,21 @@ function setupBackToTop(config) {
       window.scrollY >= threshold()
     );
   };
-  scheduleOnScroll(update);
+  const stop = scheduleOnScroll(update);
+  return () => {
+    stop();
+    button.remove();
+  };
 }
 function setupTocScrollSpy() {
   const container = document.querySelector(
     ".rr-table-of-contents, [data-rb-toc]"
   );
-  if (!container || container.dataset.rbUxToc === "true") return;
+  if (!container || container.dataset.rbUxToc === "true") return void 0;
   const links = Array.from(
     container.querySelectorAll('a[href^="#"]')
   );
-  if (links.length === 0) return;
+  if (links.length === 0) return void 0;
   const linksById = /* @__PURE__ */ new Map();
   for (const link of links) {
     const id = hashToId(link.getAttribute("href"));
@@ -144,7 +145,7 @@ function setupTocScrollSpy() {
     linksById.set(id, existing);
   }
   const headings = Array.from(linksById.keys()).map((id) => document.getElementById(id)).filter((heading) => heading !== null);
-  if (headings.length === 0) return;
+  if (headings.length === 0) return void 0;
   container.dataset.rbUxToc = "true";
   const activate = (id) => {
     for (const link of links) {
@@ -179,8 +180,9 @@ function setupTocScrollSpy() {
       activate(nextId);
     }
   };
+  let observer;
   if (typeof IntersectionObserver === "function") {
-    const observer = new IntersectionObserver(
+    observer = new IntersectionObserver(
       (entries) => {
         for (const entry of entries) {
           const id = entry.target.id;
@@ -197,57 +199,15 @@ function setupTocScrollSpy() {
     );
     for (const heading of headings) observer.observe(heading);
   }
-  scheduleOnScroll(updateActive);
-}
-function setupCodeCopy(config) {
-  const blocks = Array.from(
-    document.querySelectorAll("pre > code")
-  );
-  for (const code of blocks) {
-    const pre = code.parentElement;
-    if (!pre || pre.dataset.rbUxCopy === "true") continue;
-    if (pre.closest(".rr-code")) continue;
-    pre.dataset.rbUxCopy = "true";
-    const wrapper = document.createElement("div");
-    wrapper.className = CODE_CLASS;
-    pre.replaceWith(wrapper);
-    wrapper.append(pre);
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = COPY_CLASS;
-    button.setAttribute("aria-label", config.copyLabel);
-    button.textContent = config.copyLabel;
-    button.addEventListener("click", () => {
-      void copyCode(button, code, config);
-    });
-    wrapper.append(button);
-  }
-}
-async function copyCode(button, code, config) {
-  const text = code.textContent ?? "";
-  const clipboard = navigator.clipboard;
-  if (text.length === 0 || !clipboard) return;
-  try {
-    await clipboard.writeText(text);
-  } catch {
-    return;
-  }
-  showCopiedState(button, config);
-}
-function showCopiedState(button, config) {
-  const previous = copiedTimers.get(button);
-  if (previous !== void 0) window.clearTimeout(previous);
-  button.textContent = config.copiedLabel;
-  button.classList.add(COPY_COPIED_CLASS);
-  const timer = window.setTimeout(() => {
-    button.textContent = config.copyLabel;
-    button.classList.remove(COPY_COPIED_CLASS);
-    copiedTimers.delete(button);
-  }, COPIED_STATE_DURATION);
-  copiedTimers.set(button, timer);
+  const stop = scheduleOnScroll(updateActive);
+  return () => {
+    stop();
+    observer?.disconnect();
+    delete container.dataset.rbUxToc;
+  };
 }
 function findArticle() {
-  return document.querySelector('[data-slot="article-body"]');
+  return document.querySelector(".rb-article-body");
 }
 function hasElement(className) {
   return document.querySelector(`.${className}`) !== null;
@@ -280,6 +240,11 @@ function scheduleOnScroll(update) {
   window.addEventListener("scroll", schedule, { passive: true });
   window.addEventListener("resize", schedule);
   update();
+  return () => {
+    window.removeEventListener("scroll", schedule);
+    window.removeEventListener("resize", schedule);
+    if (frame) window.cancelAnimationFrame(frame);
+  };
 }
 export {
   initUx

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { type UxOptions } from "./src/options.js";
 export type { UxOptions, UxResolvedConfig } from "./src/options.js";
 /**
  * Client-only progressive enhancements: a reading progress bar, a
- * back-to-top button, table-of-contents scroll-spy, and code copy buttons.
+ * back-to-top button, and table-of-contents scroll-spy.
  *
  * None of the features change the rendered article markup, so the plugin
  * only injects a JSON config element and registers a browser initializer.

package/dist/index.js

@@ -15,25 +15,16 @@ var DEFAULT_UX_CONFIG = {
   progress: true,
   backToTop: true,
   tocScrollSpy: true,
-  codeCopy: true,
-  backToTopLabel: "Back to top",
-  copyLabel: "Copy",
-  copiedLabel: "Copied"
+  backToTopLabel: "Back to top"
 };
 function resolveUxConfig(options = {}) {
   return {
     progress: options.progress ?? DEFAULT_UX_CONFIG.progress,
     backToTop: options.backToTop ?? DEFAULT_UX_CONFIG.backToTop,
     tocScrollSpy: options.tocScrollSpy ?? DEFAULT_UX_CONFIG.tocScrollSpy,
-    codeCopy: options.codeCopy ?? DEFAULT_UX_CONFIG.codeCopy,
     backToTopLabel: normalizeLabel(
       options.backToTopLabel,
       DEFAULT_UX_CONFIG.backToTopLabel
-    ),
-    copyLabel: normalizeLabel(options.copyLabel, DEFAULT_UX_CONFIG.copyLabel),
-    copiedLabel: normalizeLabel(
-      options.copiedLabel,
-      DEFAULT_UX_CONFIG.copiedLabel
     )
   };
 }
@@ -82,21 +73,16 @@ var ux = uxPlugin;
 function validateUxOptions(options) {
   if (!options) return [];
   const issues = [];
-  for (const key of [
-    "progress",
-    "backToTop",
-    "tocScrollSpy",
-    "codeCopy"
-  ]) {
+  for (const key of ["progress", "backToTop", "tocScrollSpy"]) {
     if (options[key] !== void 0 && typeof options[key] !== "boolean") {
       issues.push({ path: key, message: "Expected a boolean." });
     }
   }
-  for (const key of ["backToTopLabel", "copyLabel", "copiedLabel"]) {
-    const value = options[key];
-    if (value !== void 0 && (typeof value !== "string" || value.trim() === "")) {
-      issues.push({ path: key, message: "Expected a non-empty string." });
-    }
+  if (options.backToTopLabel !== void 0 && (typeof options.backToTopLabel !== "string" || options.backToTopLabel.trim() === "")) {
+    issues.push({
+      path: "backToTopLabel",
+      message: "Expected a non-empty string."
+    });
   }
   return issues;
 }

package/dist/src/init.d.ts

@@ -2,4 +2,4 @@
  * Initializes every enabled UX enhancement. Safe to call more than once and a
  * no-op when the relevant DOM elements are absent.
  */
-export declare function initUx(): void;
+export declare function initUx(): () => void;

package/dist/src/options.d.ts

@@ -11,24 +11,15 @@ export type UxOptions = {
     backToTop?: boolean;
     /** Highlight the active entry in the article table of contents. Defaults to `true`. */
     tocScrollSpy?: boolean;
-    /** Add a copy button to every code block. Defaults to `true`. */
-    codeCopy?: boolean;
     /** Accessible label for the back-to-top button. */
     backToTopLabel?: string;
-    /** Label for the code copy button. */
-    copyLabel?: string;
-    /** Transient label shown after a successful copy. */
-    copiedLabel?: string;
 };
 /** Options after defaults have been applied. Serialized into the page. */
 export type UxResolvedConfig = {
     progress: boolean;
     backToTop: boolean;
     tocScrollSpy: boolean;
-    codeCopy: boolean;
     backToTopLabel: string;
-    copyLabel: string;
-    copiedLabel: string;
 };
 /** Id of the JSON configuration element injected into each article. */
 export declare const UX_CONFIG_ELEMENT_ID = "rb-ux-config";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-ux",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,7 +21,7 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.30"
+    "@riebeckite/core": "0.0.32"
   },
   "publishConfig": {
     "access": "public"

package/style.css

@@ -65,59 +65,16 @@
   font-weight: 600;
 }
 
-.rb-ux__code {
-  position: relative;
-}
-
-.rb-ux__copy {
-  position: absolute;
-  inset-block-start: 0.5rem;
-  inset-inline-end: 0.5rem;
-  z-index: 1;
-  padding: 0.2rem 0.5rem;
-  border: 1px solid
-    var(--rb-color-border, color-mix(in srgb, currentColor 20%, transparent));
-  border-radius: 4px;
-  background: var(--rb-color-surface, var(--rb-color-paper, #ffffff));
-  color: var(--rb-color-muted, #69645c);
-  font-size: 0.75rem;
-  line-height: 1.4;
-  cursor: pointer;
-  opacity: 0.9;
-  transition:
-    opacity 120ms ease,
-    color 120ms ease,
-    border-color 120ms ease;
-}
-
-.rb-ux__copy:hover,
-.rb-ux__copy:focus-visible {
-  opacity: 1;
-  color: var(--rb-color-ink, #1c1a17);
-}
-
-.rb-ux__copy:focus-visible {
-  outline: 2px solid var(--rb-color-accent, #686868);
-  outline-offset: 2px;
-}
-
-.rb-ux__copy--copied {
-  color: var(--rb-color-accent, #686868);
-  border-color: var(--rb-color-accent, #686868);
-}
-
 @media (prefers-reduced-motion: reduce) {
   .rb-ux__progress-bar,
-  .rb-ux__back-to-top,
-  .rb-ux__copy {
+  .rb-ux__back-to-top {
     transition: none;
   }
 }
 
 @media print {
   .rb-ux__progress,
-  .rb-ux__back-to-top,
-  .rb-ux__copy {
+  .rb-ux__back-to-top {
     display: none;
   }
 }