copy_tuner_client 2.0.0 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cabf3cddda7ee14a30e13b8a1bd1d03e4948118651db8be26f97f7f3068adafe
-  data.tar.gz: 3a33b80e2c676e8bd16e6e1f390b4f9676d5f14b3e55e36deb172571afd537c7
+  metadata.gz: a3c816e1f12e5715861194284864c00ab5d18428d3c56b6a3140cfe9db9cd360
+  data.tar.gz: d9a8cd76caf12860c0a981a840655254a5aab64665745d16f4524ded77821771
 SHA512:
-  metadata.gz: 921e075005f137ba95632548e254391bc74a915a415f29a0b09170d31b558d01a67037f0c60a58210f844e28a6c42483e281b792de37ef190c2237dd5a5086dc
-  data.tar.gz: 4ca2e0fe3fbced96692f05ca438dc50d7bb284617951525e6f8ec17aa2e6b0d610031d16a81217066ca8ff925800a2e00675e1ded84e3fc32c6ef6533f6209df
+  metadata.gz: 1538da853220ee8f4bfc4942023e1afcfd55dc4f719a89b3c965d8719acb57ec5bd418d8821e72eee8adbb5b59ca2f23b462d8894b9239734ff68a30b8a0a074
+  data.tar.gz: '091eee7aae91c30f88fb294716bd9a139d55d7ac90d982602e14305d2c43203360dc81b98092e17dd931dcce1885940af27a47f0031e374e9724eaf4898934d5'

data/CLAUDE.md

@@ -6,9 +6,12 @@ CopyTuner の Ruby クライアント gem。Rails アプリの I18n を CopyTune
 - テスト: `bundle exec rspec`（単一ファイル: `bundle exec rspec spec/copy_tuner_client/cache_spec.rb`）
 - 特定の Rails バージョンでテスト: `BUNDLE_GEMFILE=gemfiles/8.0.gemfile bundle exec rspec`
 - Lint: `bundle exec rubocop`（`sgcop` を継承）
-- フロントエンドビルド: `yarn build`（開発: `yarn dev`）
+- フロントエンドビルド: `pnpm build`（開発: `pnpm dev`）
+- フロントエンド Lint/Format: `pnpm check`（Biome）
 - gem リリース: `bundle exec rake build|install|release`
 
+Node.js / pnpm は mise（mise.toml）で管理。フロントエンドのツールチェーンは pnpm + Biome + Vite + TypeScript。
+
 ## アーキテクチャ
 `Configuration#apply`（lib/copy_tuner_client/configuration.rb）が全コンポーネントを組み立てる起点:
 - `Client` — CopyTuner サーバ / S3 との HTTP 通信

data/README.md

@@ -84,9 +84,13 @@ Development
 `src`以下を編集してください。
 `app/assets/*`を直接編集したらダメよ！
 
+Node.js と pnpm は [mise](https://mise.jdx.dev/) で管理しています（`mise install` でセットアップ）。
+
 ```
-$ yarn dev   # 開発時
-$ yarn build   # ビルド
+$ pnpm install   # 依存インストール
+$ pnpm dev       # 開発時
+$ pnpm build     # ビルド
+$ pnpm check     # Lint + Format（Biome）
 ```
 
 

data/app/assets/javascripts/copytuner.js

@@ -1,257 +1,164 @@
-var y = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, _ = "Expected a function", C = 0 / 0, $ = "[object Symbol]", N = /^\s+|\s+$/g, H = /^[-+]0x[0-9a-f]+$/i, q = /^0b[01]+$/i, D = /^0o[0-7]+$/i, R = parseInt, U = typeof y == "object" && y && y.Object === Object && y, W = typeof self == "object" && self && self.Object === Object && self, K = U || W || Function("return this")(), F = Object.prototype, P = F.toString, X = Math.max, z = Math.min, v = function() {
-  return K.Date.now();
+//#region src/styles.ts
+var e = navigator.platform.toUpperCase().includes("MAC"), t = (e) => !!(e.offsetWidth || e.offsetHeight || e.getClientRects().length > 0), n = (e) => {
+	let t = e.getBoundingClientRect();
+	return {
+		top: t.top + (window.pageYOffset - document.documentElement.clientTop),
+		left: t.left + (window.pageXOffset - document.documentElement.clientLeft)
+	};
+}, r = (e) => {
+	if (!t(e)) return null;
+	let r = n(e);
+	return r.right = r.left + e.offsetWidth, r.bottom = r.top + e.offsetHeight, {
+		left: r.left,
+		top: r.top,
+		width: r.right - r.left,
+		height: r.bottom - r.top
+	};
+}, i = (e, t) => {
+	let n;
+	return (...r) => {
+		clearTimeout(n), n = setTimeout(() => e(...r), t);
+	};
+}, a = () => Array.from(document.querySelectorAll("[data-copyray-key]")).map((e) => ({
+	keys: (e.getAttribute("data-copyray-key") ?? "").split(",").filter(Boolean),
+	element: e
+})), o = class extends HTMLElement {
+	#e = () => {};
+	#t = () => {};
+	#n;
+	#r;
+	#i;
+	constructor() {
+		super();
+		let e = this.attachShadow({ mode: "open" }), t = document.createElement("style");
+		t.textContent = "\n:host {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  background-image: radial-gradient(\n    ellipse farthest-corner at center,\n    rgba(0, 0, 0, 0.4) 10%,\n    rgba(0, 0, 0, 0.8) 100%\n  );\n  z-index: 9000;\n}\n\n.specimen {\n  position: absolute;\n  background: rgba(255, 50, 50, 0.1);\n  outline: 1px solid rgba(255, 50, 50, 0.8);\n  outline-offset: -1px;\n  color: #666;\n  font-family: 'Helvetica Neue', sans-serif;\n  font-size: 13px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);\n  z-index: 2000000000;\n}\n\n.specimen:hover {\n  cursor: pointer;\n  background: rgba(255, 50, 50, 0.4);\n}\n\n.specimen-handle {\n  float: left;\n  margin: 0 2px 2px 0;\n  background: rgba(255, 50, 50, 0.8);\n  padding: 0 3px;\n  color: #fff;\n  font-size: 10px;\n  cursor: pointer;\n}\n\n.toggle-button {\n  display: block;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  color: white;\n  background: black;\n  padding: 12px 16px;\n  border-radius: 0 10px 0 0;\n  opacity: 0;\n  transition: opacity 0.6s ease-in-out;\n  z-index: 10000;\n  font-size: 12px;\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.toggle-button:hover {\n  opacity: 1;\n}\n\n@media screen and (max-width: 480px) {\n  .toggle-button {\n    display: none;\n  }\n}\n", e.append(t), this.#n = document.createElement("div"), this.#n.classList.add("backdrop"), this.#n.addEventListener("click", () => this.hide()), this.#r = document.createElement("div"), this.#r.classList.add("specimens"), this.#i = document.createElement("a"), this.#i.classList.add("toggle-button"), this.#i.textContent = "Open CopyTuner", this.#i.addEventListener("click", () => this.#t()), e.append(this.#n, this.#r, this.#i), this.hide();
+	}
+	set onOpen(e) {
+		this.#e = e;
+	}
+	set onToggle(e) {
+		this.#t = e;
+	}
+	get isShowing() {
+		return !this.#n.hidden;
+	}
+	show() {
+		this.reset(), this.#n.hidden = !1;
+		for (let { element: e, keys: t } of a()) {
+			let n = this.makeBox(e, t);
+			n && this.#r.append(n);
+		}
+	}
+	hide() {
+		this.reset(), this.#n.hidden = !0;
+	}
+	reset() {
+		this.#r.replaceChildren();
+	}
+	makeBox(e, t) {
+		let n = r(e);
+		if (n === null) return null;
+		let i = document.createElement("div");
+		i.classList.add("specimen"), i.style.left = `${n.left}px`, i.style.top = `${n.top}px`, i.style.width = `${n.width}px`, i.style.height = `${n.height}px`;
+		let { position: a, top: o, left: s } = getComputedStyle(e);
+		a === "fixed" && (i.style.position = "fixed", i.style.top = o, i.style.left = s), i.addEventListener("click", () => this.#e(t[0]));
+		for (let e of t) i.append(this.makeLabel(e));
+		return i;
+	}
+	makeLabel(e) {
+		let t = document.createElement("div");
+		return t.classList.add("specimen-handle"), t.textContent = e, t.addEventListener("click", (t) => {
+			t.stopPropagation(), this.#e(e);
+		}), t;
+	}
+}, s = class extends HTMLElement {
+	#e = () => {};
+	#t;
+	#n;
+	constructor() {
+		super(), this.attachShadow({ mode: "open" });
+	}
+	connectedCallback() {
+		this.hidden = !0;
+	}
+	init({ url: e, data: t, keysSkipped: n, onOpen: r }) {
+		this.#e = r;
+		let a = this.shadowRoot, o = document.createElement("style");
+		o.textContent = "\n:host {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 40px;\n  padding: 0 8px;\n  background: #222;\n  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  font-weight: 200;\n  color: #fff;\n  z-index: 2147483647;\n  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 2px 6px rgba(0, 0, 0, 0.8);\n  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));\n  box-sizing: border-box;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.log-menu {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 40px;\n  max-height: calc(100vh - 40px);\n  background: #222;\n  color: #fff;\n  overflow-y: auto;\n}\n\n.log-menu[hidden] {\n  display: none;\n}\n\n.log-menu tbody td {\n  padding: 2px 8px;\n}\n\n.log-menu tbody tr {\n  cursor: pointer;\n}\n\n.log-menu tbody tr:hover {\n  background: #444;\n}\n\n.log-menu tbody tr[hidden] {\n  display: none;\n}\n\n.button {\n  position: relative;\n  display: inline-block;\n  color: #fff;\n  margin: 8px 1px;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 8px;\n  font-size: 14px;\n  cursor: pointer;\n  vertical-align: middle;\n  background-color: #444;\n  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));\n  border-radius: 2px;\n  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2),\n    inset 0 0 2px rgba(255, 255, 255, 0.2);\n  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);\n  text-decoration: none;\n}\n\n.button:hover,\n.button:focus {\n  color: #fff;\n  text-decoration: none;\n  background-color: #555;\n}\n\n.notice {\n  display: inline-block;\n  margin: 8px;\n  font-size: 13px;\n  line-height: 24px;\n  vertical-align: middle;\n  color: #ffd24d;\n}\n\n.search {\n  appearance: none;\n  border: none;\n  border-radius: 2px;\n  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 0 2px rgba(0, 0, 0, 0.2);\n  padding: 2px 8px;\n  margin: 0;\n  line-height: 20px;\n  vertical-align: middle;\n  color: black;\n  width: auto;\n  height: auto;\n  font-size: 14px;\n}\n", a.append(o);
+		let s = this.makeButton("CopyTuner", e, "_blank"), c = this.makeButton("Sync", "/copytuner", "_blank"), l = this.makeButton("Translations in this page", "javascript:void(0)");
+		this.#t = document.createElement("input"), this.#t.type = "text", this.#t.classList.add("search"), this.#t.placeholder = "search", a.append(s, c, l, this.#t), this.#n = this.makeLogMenu(t), a.append(this.#n), n && this.appendSkippedNotice(), l.addEventListener("click", (e) => {
+			e.preventDefault(), this.toggleLogMenu();
+		}), this.#t.addEventListener("input", i(this.onSearch.bind(this), 250));
+	}
+	show() {
+		this.hidden = !1, this.#t.focus();
+	}
+	hide() {
+		this.hidden = !0;
+	}
+	makeButton(e, t, n) {
+		let r = document.createElement("a");
+		return r.classList.add("button"), r.textContent = e, r.href = t, n && (r.target = n), r;
+	}
+	appendSkippedNotice() {
+		let e = document.createElement("span");
+		e.classList.add("notice"), e.textContent = "⚠ This page is too large for the overlay. Use \"Translations in this page\" to edit.", this.shadowRoot.append(e);
+	}
+	showLogMenu() {
+		this.#n.hidden = !1;
+	}
+	toggleLogMenu() {
+		this.#n.hidden = !this.#n.hidden;
+	}
+	makeLogMenu(e) {
+		let t = document.createElement("div");
+		t.classList.add("log-menu"), t.hidden = !0;
+		let n = document.createElement("table"), r = document.createElement("tbody");
+		for (let t of Object.keys(e).sort()) {
+			let n = e[t];
+			if (n === "") continue;
+			let i = document.createElement("td");
+			i.textContent = t;
+			let a = document.createElement("td");
+			a.textContent = n;
+			let o = document.createElement("tr");
+			o.dataset.key = t, o.addEventListener("click", ({ currentTarget: e }) => {
+				let t = e;
+				t.dataset.key && this.#e(t.dataset.key);
+			}), o.append(i, a), r.append(o);
+		}
+		return n.append(r), t.append(n), t;
+	}
+	onSearch() {
+		let e = this.#t.value.trim();
+		this.showLogMenu();
+		let t = [...this.#n.querySelectorAll("tr")];
+		for (let n of t) n.hidden = !(e === "" || [...n.querySelectorAll("td")].some((t) => (t.textContent ?? "").includes(e)));
+	}
 };
-function G(t, e, n) {
-  var o, s, l, r, a, c, u = 0, E = !1, h = !1, b = !0;
-  if (typeof t != "function")
-    throw new TypeError(_);
-  e = B(e) || 0, x(n) && (E = !!n.leading, h = "maxWait" in n, l = h ? X(B(n.maxWait) || 0, e) : l, b = "trailing" in n ? !!n.trailing : b);
-  function g(i) {
-    var d = o, f = s;
-    return o = s = void 0, u = i, r = t.apply(f, d), r;
-  }
-  function j(i) {
-    return u = i, a = setTimeout(m, e), E ? g(i) : r;
-  }
-  function M(i) {
-    var d = i - c, f = i - u, T = e - d;
-    return h ? z(T, l - f) : T;
-  }
-  function w(i) {
-    var d = i - c, f = i - u;
-    return c === void 0 || d >= e || d < 0 || h && f >= l;
-  }
-  function m() {
-    var i = v();
-    if (w(i))
-      return S(i);
-    a = setTimeout(m, M(i));
-  }
-  function S(i) {
-    return a = void 0, b && o ? g(i) : (o = s = void 0, r);
-  }
-  function I() {
-    a !== void 0 && clearTimeout(a), u = 0, o = c = s = a = void 0;
-  }
-  function A() {
-    return a === void 0 ? r : S(v());
-  }
-  function k() {
-    var i = v(), d = w(i);
-    if (o = arguments, s = this, c = i, d) {
-      if (a === void 0)
-        return j(c);
-      if (h)
-        return a = setTimeout(m, e), g(c);
-    }
-    return a === void 0 && (a = setTimeout(m, e)), r;
-  }
-  return k.cancel = I, k.flush = A, k;
-}
-function x(t) {
-  var e = typeof t;
-  return !!t && (e == "object" || e == "function");
-}
-function V(t) {
-  return !!t && typeof t == "object";
-}
-function Y(t) {
-  return typeof t == "symbol" || V(t) && P.call(t) == $;
-}
-function B(t) {
-  if (typeof t == "number")
-    return t;
-  if (Y(t))
-    return C;
-  if (x(t)) {
-    var e = typeof t.valueOf == "function" ? t.valueOf() : t;
-    t = x(e) ? e + "" : e;
-  }
-  if (typeof t != "string")
-    return t === 0 ? t : +t;
-  t = t.replace(N, "");
-  var n = q.test(t);
-  return n || D.test(t) ? R(t.slice(2), n ? 2 : 8) : H.test(t) ? C : +t;
-}
-var Z = G;
-const p = "copy-tuner-hidden";
-class J {
-  // @ts-expect-error TS7006
-  constructor(e, n, o, s = !1) {
-    this.element = e, this.data = n, this.callback = o, this.searchBoxElement = e.querySelector(".js-copy-tuner-bar-search"), this.logMenuElement = this.makeLogMenu(), this.element.append(this.logMenuElement), s && this.appendSkippedNotice(), this.addHandler();
-  }
-  appendSkippedNotice() {
-    const e = document.createElement("span");
-    e.classList.add("copy-tuner-bar__notice"), e.textContent = '⚠ This page is too large for the overlay. Use "Translations in this page" to edit.', this.element.append(e);
-  }
-  addHandler() {
-    this.element.querySelector(".js-copy-tuner-bar-open-log").addEventListener("click", (n) => {
-      n.preventDefault(), this.toggleLogMenu();
-    }), this.searchBoxElement.addEventListener("input", Z(this.onKeyup.bind(this), 250));
-  }
-  show() {
-    this.element.classList.remove(p), this.searchBoxElement.focus();
-  }
-  hide() {
-    this.element.classList.add(p);
-  }
-  showLogMenu() {
-    this.logMenuElement.classList.remove(p);
-  }
-  toggleLogMenu() {
-    this.logMenuElement.classList.toggle(p);
-  }
-  makeLogMenu() {
-    const e = document.createElement("div");
-    e.setAttribute("id", "copy-tuner-bar-log-menu"), e.classList.add(p);
-    const n = document.createElement("table"), o = document.createElement("tbody");
-    o.classList.remove("is-not-initialized");
-    for (const s of Object.keys(this.data).sort()) {
-      const l = this.data[s];
-      if (l === "")
-        continue;
-      const r = document.createElement("td");
-      r.textContent = s;
-      const a = document.createElement("td");
-      a.textContent = l;
-      const c = document.createElement("tr");
-      c.classList.add("copy-tuner-bar-log-menu__row"), c.dataset.key = s, c.addEventListener("click", ({ currentTarget: u }) => {
-        this.callback(u.dataset.key);
-      }), c.append(r), c.append(a), o.append(c);
-    }
-    return n.append(o), e.append(n), e;
-  }
-  // @ts-expect-error TS7031
-  onKeyup({ target: e }) {
-    const n = e.value.trim();
-    this.showLogMenu();
-    const o = [...this.logMenuElement.querySelectorAll("tr")];
-    for (const s of o) {
-      const l = n === "" || [...s.querySelectorAll("td")].some((r) => r.textContent.includes(n));
-      s.classList.toggle(p, !l);
-    }
-  }
-}
-const L = navigator.platform.toUpperCase().includes("MAC"), Q = (t) => !!(t.offsetWidth || t.offsetHeight || t.getClientRects().length > 0), ee = (t) => {
-  const e = t.getBoundingClientRect();
-  return {
-    top: e.top + (window.pageYOffset - document.documentElement.clientTop),
-    left: e.left + (window.pageXOffset - document.documentElement.clientLeft)
-  };
-}, te = (t) => {
-  if (!Q(t))
-    return null;
-  const e = ee(t);
-  return e.right = e.left + t.offsetWidth, e.bottom = e.top + t.offsetHeight, {
-    left: e.left,
-    top: e.top,
-    // @ts-expect-error TS2339
-    width: e.right - e.left,
-    // @ts-expect-error TS2339
-    height: e.bottom - e.top
-  };
-}, ne = 2e9;
-class oe {
-  // @ts-expect-error TS7006
-  constructor(e, n, o) {
-    this.element = e, this.keys = n, this.callback = o;
-  }
-  show() {
-    this.box = this.makeBox(), this.box !== null && (this.box.addEventListener("click", () => {
-      this.callback(this.keys[0]);
-    }), document.body.append(this.box));
-  }
-  remove() {
-    this.box && (this.box.remove(), this.box = null);
-  }
-  makeBox() {
-    const e = document.createElement("div");
-    e.classList.add("copyray-specimen"), e.classList.add("Specimen");
-    const n = te(this.element);
-    if (n === null)
-      return null;
-    for (const r of Object.keys(n)) {
-      const a = n[r];
-      e.style[r] = `${a}px`;
-    }
-    e.style.zIndex = ne;
-    const { position: o, top: s, left: l } = getComputedStyle(this.element);
-    o === "fixed" && (this.box.style.position = "fixed", this.box.style.top = `${s}px`, this.box.style.left = `${l}px`);
-    for (const r of this.keys)
-      e.append(this.makeLabel(r));
-    return e;
-  }
-  // @ts-expect-error TS7006
-  makeLabel(e) {
-    const n = document.createElement("div");
-    return n.classList.add("copyray-specimen-handle"), n.classList.add("Specimen"), n.textContent = e, n.addEventListener("click", (o) => {
-      o.stopPropagation(), this.callback(e);
-    }), n;
-  }
-}
-const se = () => Array.from(document.querySelectorAll("[data-copyray-key]")).map((t) => ({
-  // 1 要素に複数キーがカンマ区切りで入りうる（同一テキストノードに複数訳文が連結された場合）
-  keys: (t.getAttribute("data-copyray-key") ?? "").split(",").filter(Boolean),
-  element: t
-}));
-class ie {
-  // @ts-expect-error TS7006
-  constructor(e, n, o = !1) {
-    this.baseUrl = e, this.data = n, this.isShowing = !1, this.specimens = [], this.overlay = this.makeOverlay(), this.toggleButton = this.makeToggleButton(), this.boundOpen = this.open.bind(this), this.copyTunerBar = new J(document.querySelector("#copy-tuner-bar"), this.data, this.boundOpen, o);
-  }
-  show() {
-    this.reset(), document.body.append(this.overlay), this.makeSpecimens();
-    for (const e of this.specimens)
-      e.show();
-    this.copyTunerBar.show(), this.isShowing = !0;
-  }
-  hide() {
-    this.overlay.remove(), this.reset(), this.copyTunerBar.hide(), this.isShowing = !1;
-  }
-  toggle() {
-    this.isShowing ? this.hide() : this.show();
-  }
-  // @ts-expect-error TS7006
-  open(e) {
-    window.open(`${this.baseUrl}/blurbs/${e}/edit`);
-  }
-  makeSpecimens() {
-    for (const { element: e, keys: n } of se())
-      this.specimens.push(new oe(e, n, this.boundOpen));
-  }
-  makeToggleButton() {
-    const e = document.createElement("a");
-    return e.addEventListener("click", () => {
-      this.show();
-    }), e.classList.add("copyray-toggle-button"), e.classList.add("hidden-on-mobile"), e.textContent = "Open CopyTuner", document.body.append(e), e;
-  }
-  makeOverlay() {
-    const e = document.createElement("div");
-    return e.setAttribute("id", "copyray-overlay"), e.addEventListener("click", () => this.hide()), e;
-  }
-  reset() {
-    for (const e of this.specimens)
-      e.remove();
-  }
-}
-const re = (t) => {
-  const e = document.createElement("div");
-  e.id = "copy-tuner-bar", e.classList.add("copy-tuner-hidden"), e.innerHTML = `
-    <a class="copy-tuner-bar-button" target="_blank" href="${t}">CopyTuner</a>
-    <a href="/copytuner" target="_blank" class="copy-tuner-bar-button">Sync</a>
-    <a href="javascript:void(0)" class="copy-tuner-bar-open-log copy-tuner-bar-button js-copy-tuner-bar-open-log">Translations in this page</a>
-    <input type="text" class="copy-tuner-bar__search js-copy-tuner-bar-search" placeholder="search">
-  `, document.body.append(e);
-}, O = () => {
-  const { url: t, data: e, keysSkipped: n } = window.CopyTuner;
-  re(t);
-  const o = new ie(t, e, !!n);
-  window.CopyTuner.toggle = () => o.toggle(), document.addEventListener("keydown", (s) => {
-    if (o.isShowing && ["Escape", "Esc"].includes(s.key)) {
-      o.hide();
-      return;
-    }
-    (L && s.metaKey || !L && s.ctrlKey) && s.shiftKey && s.key.toLowerCase() === "k" && o.toggle();
-  }), console && console.log(`Ready to Copyray. Press ${L ? "cmd+shift+k" : "ctrl+shift+k"} to scan your UI.`);
+customElements.define("copytuner-bar", s), customElements.define("copyray-overlay", o);
+var c = () => {
+	let { url: t, data: n, keysSkipped: r } = window.CopyTuner, i = (e) => window.open(`${t}/blurbs/${e}/edit`), a = document.createElement("copytuner-bar");
+	document.body.append(a), a.init({
+		url: t,
+		data: n,
+		keysSkipped: !!r,
+		onOpen: i
+	});
+	let o = document.createElement("copyray-overlay");
+	o.onOpen = i, document.body.append(o);
+	let s = () => {
+		o.show(), a.show();
+	}, c = () => {
+		o.hide(), a.hide();
+	}, l = () => o.isShowing ? c() : s();
+	o.onToggle = l, window.CopyTuner.toggle = l, document.addEventListener("keydown", (t) => {
+		if (o.isShowing && ["Escape", "Esc"].includes(t.key)) {
+			c();
+			return;
+		}
+		(e && t.metaKey || !e && t.ctrlKey) && t.shiftKey && t.key.toLowerCase() === "k" && l();
+	}), console && console.log(`Ready to Copyray. Press ${e ? "cmd+shift+k" : "ctrl+shift+k"} to scan your UI.`);
 };
-document.readyState === "complete" || document.readyState !== "loading" ? O() : document.addEventListener("DOMContentLoaded", () => O());
+document.readyState === "complete" || document.readyState !== "loading" ? c() : document.addEventListener("DOMContentLoaded", () => c());
+//#endregion

data/biome.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.5.0/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": ["src/**", "*.ts", "*.json"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 120
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "preset": "recommended"
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "semicolons": "asNeeded",
+      "trailingCommas": "all"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

data/index.html

@@ -5,27 +5,25 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite App</title>
+  <title>CopyTuner Dev</title>
 </head>
 
 <body>
   <div id="app">
     <ul>
-      <li>
-        <!--COPYRAY projects.index.locales-->言語
-      </li>
-      <li>
-        <!--COPYRAY projects.index.blurbs-->翻訳キー
-      </li>
-      <li>
-        <!--COPYRAY projects.index.members-->メンバー数
-      </li>
+      <li data-copyray-key="projects.index.locales">言語</li>
+      <li data-copyray-key="projects.index.blurbs">翻訳キー</li>
+      <li data-copyray-key="projects.index.members">メンバー数</li>
     </ul>
   </div>
   <script>
     window.CopyTuner = {
       url: 'https://copy-tuner.herokuapp.com/projects/xxx',
-      data: {},
+      data: {
+        'projects.index.locales': '言語',
+        'projects.index.blurbs': '翻訳キー',
+        'projects.index.members': 'メンバー数',
+      },
     }
   </script>
   <script type="module" src="/src/main.ts"></script>

data/lib/copy_tuner_client/copyray_middleware.rb

@@ -18,7 +18,6 @@ module CopyTunerClient
         # NOTE: skipped は data-copyray-key を付与できなかったこと（巨大DOM/Nokogiri例外）を表す。
         # JS にこれを伝え、オーバーレイ非対応である旨をツールバーで案内させる。
         body, skipped = CopyTunerClient::Copyray::Rewriter.rewrite(body)
-        body = append_css(body, csp_nonce)
         body = append_js(body, csp_nonce, skipped: skipped)
         content_length = body.bytesize.to_s
         headers['Content-Length'] = content_length
@@ -39,11 +38,6 @@ module CopyTunerClient
       ActionController::Base.helpers
     end
 
-    def append_css(html, csp_nonce)
-      css_tag = helpers.stylesheet_link_tag 'copytuner', media: :all, nonce: csp_nonce
-      append_to_html_body(html, css_tag)
-    end
-
     def append_js(html, csp_nonce, skipped: false)
       json =
         if CopyTunerClient::TranslationLog.initialized?

data/lib/copy_tuner_client/engine.rb

@@ -25,7 +25,7 @@ module CopyTunerClient
     end
 
     initializer "copy_tuner.assets.precompile", group: :all do |app|
-      app.config.assets.precompile += ['copytuner.js', 'copytuner.css']
+      app.config.assets.precompile += ['copytuner.js']
     end
   end
 end

data/lib/copy_tuner_client/version.rb

@@ -1,6 +1,6 @@
 module CopyTunerClient
   # Client version
-  VERSION = '2.0.0'.freeze
+  VERSION = '2.1.0'.freeze
 
   # API version being used to communicate with the server
   API_VERSION = '2.0'.freeze

data/mise.toml

@@ -0,0 +1,3 @@
+[tools]
+node = "24"
+pnpm = "11.9.0"

data/package.json

@@ -4,26 +4,22 @@
   "repository": "https://github.com/SonicGarden/copy-tuner-ruby-client",
   "author": "SonicGarden",
   "license": "MIT",
+  "packageManager": "pnpm@11.9.0",
   "engines": {
-    "node": "16.x"
+    "node": ">=24"
   },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "biome lint .",
+    "format": "biome format --write .",
+    "check": "biome check --write ."
   },
   "dependencies": {},
   "devDependencies": {
-    "@sonicgarden/eslint-plugin": "^0.5.2",
-    "@sonicgarden/prettier-config": "^0.0.1",
-    "eslint": "^8.16.0",
-    "lodash.debounce": "^4.0.8",
-    "typescript": "^5.0.2",
-    "vite": "^4.2.1"
-  },
-  "prettier": "@sonicgarden/prettier-config",
-  "volta": {
-    "node": "16.15.0",
-    "yarn": "1.22.18"
+    "@biomejs/biome": "2.5.0",
+    "typescript": "^6.0.0",
+    "vite": "^8.0.0"
   }
 }