copy_tuner_client 2.0.0 → 2.1.1

data/skills/copy-tuner-to-t-migrate/SKILL.md

@@ -3,8 +3,9 @@ name: copy-tuner-to-t-migrate
 description: >-
   copy_tuner_client v2.0.0 への移行で、削除された独自ヘルパー tt の呼び出しを Rails 標準の t（translate）へ
   置換するスキル。tt は PR #122 で存在理由を失い gem から削除されたため、残った tt(...) は NoMethodError に
-  なる。大半は機械的に tt( → t( で済むが、訳文を文字列加工している箇所だけは t ではなく I18n.t へ移す必要があり
-  （開発環境のマーカートークン混入バグ対策）、そこは 1 件ずつ確認する。対象は app 配下の .rb / .haml / .erb。
+  なる。大半は機械的に tt( → t( で済むが、訳文を文字列加工している箇所（→ I18n.t へ）と label 系ヘルパーの
+  第一引数に渡している箇所（→ 引数構造を分離）だけは別扱いで、開発環境のマーカートークン残留バグを避けるため
+  1 件ずつ確認する。対象は app 配下の .rb / .haml / .erb。
 disable-model-invocation: true
 license: MIT
 ---
@@ -36,13 +37,46 @@ middleware 自体が無いので再現しない＝開発環境だけ壊れる）
 `t` にすると、`tt` がもともと潰していたバグをそのまま復活させてしまう。そこは middleware のラッパーを通らない
 **`I18n.t`（絶対キー）** へ移すのが正解で、機械的には決められないため 1 件ずつ確認する。
 
+## もう一つの罠: label の第一引数に渡す
+
+文字列加工していなくても危険な経路がもう一つある。`t(...)` の戻り値を **`label` 系ヘルパーの第一引数**
+（form builder の `f.label` / `label_tag` / 素の `label`）に渡しているケース:
+
+```haml
+= f.label t('activerecord.attributes.field.keywords'), class: 'form-label'
+```
+
+`f.label` の**第一引数は「ラベルテキスト」ではなく method 名**（`for` 属性・`id`・ラベル文字列の元）として
+扱われる。そのため development では次の連鎖でマーカーが消せない位置に残る:
+
+1. `t(...)` が `⟦CT:activerecord.attributes.field.keywords⟧分類` を返す。
+2. `f.label` がこれを method 名と解釈し、**ラベルテキスト**と **`for` 属性**の 2 か所に展開する。
+3. ラベルテキスト側は Rails の `humanize` で**小文字化**され `⟦ct:…⟧` になる。
+4. Rewriter のマーカー検出プレフィックスは **大文字 `⟦CT:` 固定**（`lib/copy_tuner_client/copyray/marker.rb`
+   の `PREFIX`）。小文字化された `⟦ct:` は一致せず、除去されないまま画面に残る。
+
+これも v1.x では `tt`（マーカー無し版）だったため表面化せず、**`tt → t` 一括置換で初めて顕在化する回帰**。
+
+**重要: このケースは `I18n.t` 化では直らない。** マーカーを消しても、`t`/`I18n.t` の戻り値（訳文文字列）を
+`label` の第一引数に渡す構造自体が `humanize` / `for` 属性の挙動として不適切だからだ。正しい修正は
+**method 名を第一引数・表示テキストを第二引数に分離**すること:
+
+```haml
+= f.label :keywords_cont, t('activerecord.attributes.field.keywords'), class: 'form-label'
+```
+
+`for` 属性が変わるので、ラベルクリックでフィールドにフォーカスが当たることを実機で確認する。
+スクリプトはこのパターンを suspicious のサブ種別 `label_arg` として抽出する（`label:` オプションに渡す
+simple_form の `f.input :x, label: tt('k')` も同様に拾う）。
+
 ## 変換の 3 分類
 
-| 分類 | 例 | 扱い |
-|---|---|---|
-| **safe** | `tt('views.foo')` / `= tt '.title'` / `tt(key, default: x)` | `tt(` → `t(` に決定論的一括変換 |
-| **suspicious** | `truncate(tt('k'))` / `tt('k').length` / `tt('k')[0..n]` / `tt('k') =~ /re/` / `tt('k').gsub(...)` 等 | `I18n.t('絶対キー')` へ。**1 件ずつ確認**。スクリプトは触らない |
-| **other** | `def tt` / `alias tt`（定義側）/ app 外（`lib/` 等）/ `tt` を含む別識別子の誤検出 | 最後にまとめて提示。自動変換しない |
+| 分類 | サブ種別 | 例 | 扱い |
+|---|---|---|---|
+| **safe** | — | `tt('views.foo')` / `= tt '.title'` / `tt(key, default: x)` / `f.label :method, tt('k')`（第二引数） | `tt(` → `t(` に決定論的一括変換 |
+| **suspicious** | `string_manipulation` | `truncate(tt('k'))` / `tt('k').length` / `tt('k')[0..n]` / `tt('k') =~ /re/` / `tt('k').gsub(...)` 等 | `I18n.t('絶対キー')` へ。**1 件ずつ確認**。スクリプトは触らない |
+| **suspicious** | `label_arg` | `= f.label tt('k')` / `label_tag tt('k')` / `f.input :x, label: tt('k')`（label 系の**第一引数 / label: オプション**） | **`f.label :method, t('k')` へ構造を直す**（method 名を第一引数・表示テキストを第二引数に）。**`I18n.t` 化では直らない**。1 件ずつ確認 |
+| **other** | — | `def tt` / `alias tt`（定義側）/ app 外（`lib/` 等）/ `tt` を含む別識別子の誤検出 | 最後にまとめて提示。自動変換しない |
 
 **重要（定義側の罠）:** アプリが v2.0.0 を待つ間の後方互換として `ApplicationHelper` に `def tt(key, **) = t(key, **)`
 のような **`tt` の定義**を生やしていることがある。これは「呼び出し」ではないので `t(` へ機械置換すると Rails の `t`
@@ -80,11 +114,21 @@ suspicious / other の行は**一切触らない**（行番号で限定してい
 
 ### 3. suspicious な箇所を 1 件ずつ確認
 
-ここが人間の判断が要る核心。手順 1 の suspicious 各件について、次を 1 件ずつ提示して確認を取る:
+ここが人間の判断が要る核心。手順 1 の suspicious 各件について、次を 1 件ずつ提示して確認を取る。
+**suspicious はサブ種別（`[label_arg]` / `[string_manipulation]`）で修正方法が異なる**ので、種別で分岐する:
 
+**`[string_manipulation]`（戻り値を文字列加工している）:**
 - 該当コード（`ファイル:行`）と、なぜ怪しいか（戻り値を文字列加工している＝マーカー混入の危険）
 - 提案する置換: `t(...)` ではなく **`I18n.t('絶対キー')`**（`I18n` モジュール直呼びはラッパーを通らずマーカーが付かない）
 
+**`[label_arg]`（label 系の第一引数 / label: オプションに渡している）:**
+- なぜ怪しいか（`humanize` で小文字化された `⟦ct:…⟧` が大文字 `⟦CT:` 固定の Rewriter をすり抜け残る。「もう一つの罠」参照）
+- 提案する置換: **`I18n.t` 化ではなく引数構造を直す。** `= f.label t('views.foo.bar'), class: …` →
+  `= f.label :method_name, t('views.foo.bar'), class: …`。第一引数の method 名（`for` 属性に使うシンボル）は
+  ユーザに確認するか、対応する入力フィールド（`f.text_field :keywords_cont` 等）から推定する。
+  `label:` オプション（`f.input :x, label: tt('k')`）の場合は引数構造はそのままで `t('k')` でよいことが多いが、
+  そのフィールドのラベルが `humanize` を経るかは入力次第なので 1 件ずつ確認する。
+
 注意点:
 - **たとえユーザが「全部まとめて I18n.t にして」と言っても、suspicious は必ず 1 件ずつ提示する。** 相対キーを含む件は絶対キーをユーザと確認しないと置換できないためで、省略すると誤ったキーを書き込む危険がある。
 - **相対キー（先頭ドット `tt('.foo')`）は `I18n.t` では解決できない。** 絶対キー（`I18n.t('views.foo.bar')`）へ
@@ -94,6 +138,8 @@ suspicious / other の行は**一切触らない**（行番号で限定してい
   調べて基点キーを特定するか、ユーザに直接絶対キーを確認する。絶対キーが不明なときは
   `grep -r "キー末尾部分" config/locales/` でロケールファイルを検索して候補を絞り込む。
 - 本当に文字列加工していない（誤検出）なら、その場合は `t(...)` でよい。ユーザの判断に従う。
+- **行をまたぐ変数経由（`txt = t('k')` → 別行で `f.label txt` や `truncate(txt)`）はスクリプトの行単位
+  スキャンでは拾えない**（構造的限界）。最終防波堤は手順 5 の「実画面に小文字マーカー `⟦ct:…⟧` が出ないか目視」。
 
 確認が取れた箇所だけ Edit で個別に置換する（スクリプトでは変換しない）。
 
@@ -118,6 +164,9 @@ git grep -nwI tt -- app   # -I でバイナリ（画像等）の誤マッチを
   （safe は 0 件、`I18n.t` 化した suspicious も `tt` としては消える）。
 - 対象アプリで `bundle exec rspec`（または該当アプリのテスト）を回し、`NoMethodError` が出ないこと。
 - development で実画面を開き、文字列加工していた箇所にマーカートークン（`⟦CT:...⟧`）が混入していないこと。
+- **label を含む画面で、小文字マーカー `⟦ct:...⟧`（小文字 ct）が残っていないこと。** Rewriter は大文字
+  `⟦CT:` しか除去しないため、`humanize` で小文字化された取りこぼしは**この目視が最終防波堤**になる
+  （label 第一引数の罠・行をまたぐ変数経由はここで初めて顕在化することがある）。
 
 ## スクリプトの責務（決定論的な範囲のみ）
 

data/skills/copy-tuner-to-t-migrate/scripts/migrate_tt.rb

@@ -81,6 +81,18 @@ STRING_METHOD_RE = /\btt\b\s*(?:\([^\n]*?\)|['":@][^\n,]*)\s*(?:\.\s*(?:#{STRING
 # 先頭ドットの相対キー tt('.foo') は I18n.t では解決できず絶対キー化が要る → 強調表示用。
 RELATIVE_KEY_RE = /\btt\b\s*(?:\(\s*)?['":]\s*\./
 
+# label 系ヘルパーの第一引数 / label: オプションに tt(t) を渡すパターン。
+# t 化すると戻り値(⟦CT:..⟧) が method 名扱いされ、humanize で小文字化された ⟦ct:..⟧ が
+# Rewriter(大文字 ⟦CT: 固定)の除去網をすり抜け画面に残る。I18n.t 化では直らない。
+# 正しい修正は method 名を第一引数・表示テキストを第二引数へ分離すること。
+LABEL_FIRST_ARG_RE = /
+  (?: (?<![\w.])\w+\.label\b | \blabel_tag\b | (?<![\w.])label(?![\w]) )
+  \s*\(?\s*
+  tt\b (?=\s*[("':@])
+/x
+# simple_form 等の label: オプションに渡すケース（f.input :x, label: tt('k')）
+LABEL_OPTION_RE = /\blabel:\s*tt\b/
+
 def relative(path)
   path.sub("#{ROOT}/", '')
 end
@@ -117,8 +129,19 @@ def classify_line(line, entry, in_app:)
     return [:other, entry]
   end
 
+  # label の第一引数 / label: オプションに渡すケースは文字列加工が無いので、safe 確定より前に拾う。
+  # 修正方法が文字列加工系（I18n.t 化）と異なるためサブ種別 :label_arg で区別する。
+  if line.match?(LABEL_FIRST_ARG_RE) || line.match?(LABEL_OPTION_RE)
+    entry[:kind] = :label_arg
+    entry[:hint] = 'label の引数に渡している。t 化すると humanize で小文字化された ⟦ct:..⟧ が ' \
+                   'Rewriter(大文字 ⟦CT: のみ除去)をすり抜け画面に残る。I18n.t 化では直らない。' \
+                   'method 名を第一引数・表示テキストを第二引数に分離: f.label :method, t(...)'
+    return [:suspicious, entry]
+  end
+
   return [:safe, entry] unless line.match?(STRING_HELPER_RE) || line.match?(STRING_METHOD_RE)
 
+  entry[:kind] = :string_manipulation
   entry[:relative_key] = line.match?(RELATIVE_KEY_RE)
   entry[:hint] = if entry[:relative_key]
                    'I18n.t へ。相対キー(.foo)は絶対キーへ書き換えが必要'
@@ -147,10 +170,14 @@ end
 def print_section(title, entries)
   puts "\n== #{title} (#{entries.size}) =="
   entries.each do |e|
+    # hint があれば必ず kind も付く（classify_line で対で設定）ので素直に出す。
+    # suspicious 内のサブ種別(label_arg / string_manipulation)を可視化する。
     suffix = if e[:hint]
-               "  # #{e[:hint]}"
+               "  # [#{e[:kind]}] #{e[:hint]}"
+             elsif e[:reason]
+               "  # #{e[:reason]}"
              else
-               (e[:reason] ? "  # #{e[:reason]}" : '')
+               ''
              end
     puts "#{e[:file]}:#{e[:lineno]}: #{e[:code].strip}#{suffix}"
   end

data/spec/copy_tuner_client/copyray_middleware_spec.rb

@@ -19,9 +19,8 @@ describe CopyTunerClient::CopyrayMiddleware do
       configuration.project_id = 1
       configuration.client = FakeClient.new
     end
-    # NOTE: CSS/JS 挿入は Rails の ActionController::Base.helpers に依存するため、
+    # NOTE: JS 挿入は Rails の ActionController::Base.helpers に依存するため、
     # Rewriter の効果だけを検証できるよう no-op にスタブする。
-    allow(middleware).to receive(:append_css) { |html, _| html }
     allow(middleware).to receive(:append_js) { |html, *| html }
   end
 

data/src/copyray-overlay.ts

@@ -0,0 +1,125 @@
+import { OVERLAY_STYLES } from './styles'
+import { computeBoundingBox } from './util'
+
+type OpenCallback = (key: string) => void
+
+type Blurb = {
+  keys: string[]
+  element: Element
+}
+
+const findBlurbs = (): Blurb[] =>
+  Array.from(document.querySelectorAll('[data-copyray-key]')).map((element) => ({
+    // 1 要素に複数キーがカンマ区切りで入りうる（同一テキストノードに複数訳文が連結された場合）
+    keys: (element.getAttribute('data-copyray-key') ?? '').split(',').filter(Boolean),
+    element,
+  }))
+
+// オーバーレイ背景・翻訳要素のハイライト枠（specimen）・トグルボタンをまとめて Shadow DOM 内に描画する。
+export class CopyrayOverlay extends HTMLElement {
+  #onOpen: OpenCallback = () => {}
+  #onToggle: () => void = () => {}
+  #backdrop: HTMLDivElement
+  #specimens: HTMLDivElement
+  #toggleButton: HTMLAnchorElement
+
+  constructor() {
+    super()
+    const shadow = this.attachShadow({ mode: 'open' })
+
+    const style = document.createElement('style')
+    style.textContent = OVERLAY_STYLES
+    shadow.append(style)
+
+    this.#backdrop = document.createElement('div')
+    this.#backdrop.classList.add('backdrop')
+    this.#backdrop.addEventListener('click', () => this.hide())
+
+    // specimen をページ座標基準で absolute 配置するコンテナ
+    this.#specimens = document.createElement('div')
+    this.#specimens.classList.add('specimens')
+
+    this.#toggleButton = document.createElement('a')
+    this.#toggleButton.classList.add('toggle-button')
+    this.#toggleButton.textContent = 'Open CopyTuner'
+    // 旧実装ではトグルボタンが overlay と bar の両方を表示していた。show() ではなく onToggle 経由で表示する。
+    this.#toggleButton.addEventListener('click', () => this.#onToggle())
+
+    shadow.append(this.#backdrop, this.#specimens, this.#toggleButton)
+
+    // 初期は非表示（背景と specimen を隠す）。トグルボタンは常時表示のため :host([hidden]) は使わず個別制御する。
+    this.hide()
+  }
+
+  set onOpen(callback: OpenCallback) {
+    this.#onOpen = callback
+  }
+
+  set onToggle(callback: () => void) {
+    this.#onToggle = callback
+  }
+
+  get isShowing(): boolean {
+    return !this.#backdrop.hidden
+  }
+
+  show() {
+    this.reset()
+    this.#backdrop.hidden = false
+
+    for (const { element, keys } of findBlurbs()) {
+      const box = this.makeBox(element, keys)
+      if (box) {
+        this.#specimens.append(box)
+      }
+    }
+  }
+
+  hide() {
+    this.reset()
+    this.#backdrop.hidden = true
+  }
+
+  reset() {
+    this.#specimens.replaceChildren()
+  }
+
+  private makeBox(element: Element, keys: string[]): HTMLDivElement | null {
+    const bounds = computeBoundingBox(element)
+    if (bounds === null) return null
+
+    const box = document.createElement('div')
+    box.classList.add('specimen')
+    box.style.left = `${bounds.left}px`
+    box.style.top = `${bounds.top}px`
+    box.style.width = `${bounds.width}px`
+    box.style.height = `${bounds.height}px`
+
+    const { position, top, left } = getComputedStyle(element)
+    if (position === 'fixed') {
+      box.style.position = 'fixed'
+      box.style.top = top
+      box.style.left = left
+    }
+
+    // box 全体のクリックは先頭キーを開く（広いクリック領域を維持）。複数キー時は各ラベルから個別に開ける
+    box.addEventListener('click', () => this.#onOpen(keys[0]))
+
+    for (const key of keys) {
+      box.append(this.makeLabel(key))
+    }
+    return box
+  }
+
+  private makeLabel(key: string): HTMLDivElement {
+    const label = document.createElement('div')
+    label.classList.add('specimen-handle')
+    label.textContent = key
+    // ラベルのクリックはそのキーを開く。box への伝播を止めて先頭キーとの二重発火を防ぐ
+    label.addEventListener('click', (event) => {
+      event.stopPropagation()
+      this.#onOpen(key)
+    })
+    return label
+  }
+}

data/src/copytuner-bar.ts

@@ -0,0 +1,153 @@
+import { BAR_STYLES } from './styles'
+import { debounce } from './util'
+
+type OpenCallback = (key: string) => void
+
+type InitOptions = {
+  url: string
+  data: Record<string, string>
+  keysSkipped: boolean
+  onOpen: OpenCallback
+}
+
+// 画面下部のツールバー。CopyTuner / Sync ボタン、ページ内翻訳の検索・ログメニューを Shadow DOM 内に描画する。
+export class CopytunerBar extends HTMLElement {
+  #onOpen: OpenCallback = () => {}
+  #searchBox!: HTMLInputElement
+  #logMenu!: HTMLDivElement
+
+  constructor() {
+    super()
+    this.attachShadow({ mode: 'open' })
+  }
+
+  // custom element の constructor 内では属性・プロパティを変更できない（createElement が弾く）ため、
+  // hidden の初期化は DOM 挿入後に呼ばれる connectedCallback で行う。
+  connectedCallback() {
+    this.hidden = true
+  }
+
+  // url/data/keysSkipped/onOpen はオブジェクトや関数を含むため属性ではなくメソッドで受け渡す。
+  init({ url, data, keysSkipped, onOpen }: InitOptions) {
+    this.#onOpen = onOpen
+    const shadow = this.shadowRoot as ShadowRoot
+
+    const style = document.createElement('style')
+    style.textContent = BAR_STYLES
+    shadow.append(style)
+
+    // 元々 Rails から出力されていたマークアップに合わせたボタン群。
+    // url は設定値だが innerHTML に直接埋めず setAttribute で渡す（XSS 面で安全側に倒す）。
+    const copyTunerButton = this.makeButton('CopyTuner', url, '_blank')
+    const syncButton = this.makeButton('Sync', '/copytuner', '_blank')
+    const openLogButton = this.makeButton('Translations in this page', 'javascript:void(0)')
+
+    this.#searchBox = document.createElement('input')
+    this.#searchBox.type = 'text'
+    this.#searchBox.classList.add('search')
+    this.#searchBox.placeholder = 'search'
+
+    shadow.append(copyTunerButton, syncButton, openLogButton, this.#searchBox)
+
+    this.#logMenu = this.makeLogMenu(data)
+    shadow.append(this.#logMenu)
+
+    // 巨大DOM/Nokogiri例外でキー付与がスキップされた場合は、オーバーレイが使えないので
+    // ツールバー（Translations in this page）から編集する旨を案内する。
+    if (keysSkipped) {
+      this.appendSkippedNotice()
+    }
+
+    openLogButton.addEventListener('click', (event) => {
+      event.preventDefault()
+      this.toggleLogMenu()
+    })
+    this.#searchBox.addEventListener('input', debounce(this.onSearch.bind(this), 250))
+  }
+
+  show() {
+    this.hidden = false
+    this.#searchBox.focus()
+  }
+
+  hide() {
+    this.hidden = true
+  }
+
+  private makeButton(label: string, href: string, target?: string): HTMLAnchorElement {
+    const button = document.createElement('a')
+    button.classList.add('button')
+    button.textContent = label
+    button.href = href
+    if (target) {
+      button.target = target
+    }
+    return button
+  }
+
+  private appendSkippedNotice() {
+    const notice = document.createElement('span')
+    notice.classList.add('notice')
+    notice.textContent = '⚠ This page is too large for the overlay. Use "Translations in this page" to edit.'
+    ;(this.shadowRoot as ShadowRoot).append(notice)
+  }
+
+  private showLogMenu() {
+    this.#logMenu.hidden = false
+  }
+
+  private toggleLogMenu() {
+    this.#logMenu.hidden = !this.#logMenu.hidden
+  }
+
+  private makeLogMenu(data: Record<string, string>): HTMLDivElement {
+    const div = document.createElement('div')
+    div.classList.add('log-menu')
+    div.hidden = true
+
+    const table = document.createElement('table')
+    const tbody = document.createElement('tbody')
+
+    for (const key of Object.keys(data).sort()) {
+      const value = data[key]
+      if (value === '') {
+        continue
+      }
+
+      const td1 = document.createElement('td')
+      td1.textContent = key
+      const td2 = document.createElement('td')
+      td2.textContent = value
+      const tr = document.createElement('tr')
+      tr.dataset.key = key
+
+      tr.addEventListener('click', ({ currentTarget }) => {
+        const row = currentTarget as HTMLTableRowElement
+        if (row.dataset.key) {
+          this.#onOpen(row.dataset.key)
+        }
+      })
+
+      tr.append(td1, td2)
+      tbody.append(tr)
+    }
+
+    table.append(tbody)
+    div.append(table)
+
+    return div
+  }
+
+  private onSearch() {
+    // debounce 経由で遅延実行されると Event.target は null 化されるため、検索ボックスを直接参照する
+    const keyword = this.#searchBox.value.trim()
+    this.showLogMenu()
+
+    const rows = [...this.#logMenu.querySelectorAll('tr')]
+    for (const row of rows) {
+      const isShow =
+        keyword === '' || [...row.querySelectorAll('td')].some((td) => (td.textContent ?? '').includes(keyword))
+      row.hidden = !isShow
+    }
+  }
+}

data/src/main.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
-import Copyray from './copyray'
+import { CopyrayOverlay } from './copyray-overlay'
+import { CopytunerBar } from './copytuner-bar'
 import { isMac } from './util'
 
 declare global {
@@ -7,8 +8,7 @@ declare global {
     CopyTuner: {
       url: string
       toggle?: () => void
-      // TODO: type
-      data: object
+      data: Record<string, string>
       // 巨大DOM/Nokogiri例外で data-copyray-key 付与をスキップしたか。
       // true のときオーバーレイは使えないのでツールバーから編集する旨を案内する。
       keysSkipped?: boolean
@@ -16,38 +16,42 @@ declare global {
   }
 }
 
-import './copyray.css'
-
-// NOTE: 元々railsから出力されいてたマークアップに合わせてひとまず、、
-const appendCopyTunerBar = (url: string) => {
-  const bar = document.createElement('div')
-  bar.id = 'copy-tuner-bar'
-  bar.classList.add('copy-tuner-hidden')
-  bar.innerHTML = `
-    <a class="copy-tuner-bar-button" target="_blank" href="${url}">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(bar)
-}
+customElements.define('copytuner-bar', CopytunerBar)
+customElements.define('copyray-overlay', CopyrayOverlay)
 
 const start = () => {
   const { url, data, keysSkipped } = window.CopyTuner
+  const onOpen = (key: string) => window.open(`${url}/blurbs/${key}/edit`)
+
+  const bar = document.createElement('copytuner-bar') as CopytunerBar
+  document.body.append(bar)
+  bar.init({ url, data, keysSkipped: Boolean(keysSkipped), onOpen })
+
+  const overlay = document.createElement('copyray-overlay') as CopyrayOverlay
+  overlay.onOpen = onOpen
+  document.body.append(overlay)
+
+  const show = () => {
+    overlay.show()
+    bar.show()
+  }
+  const hide = () => {
+    overlay.hide()
+    bar.hide()
+  }
+  const toggle = () => (overlay.isShowing ? hide() : show())
 
-  appendCopyTunerBar(url)
-  const copyray = new Copyray(url, data, Boolean(keysSkipped))
-  window.CopyTuner.toggle = () => copyray.toggle()
+  overlay.onToggle = toggle
+  window.CopyTuner.toggle = toggle
 
   document.addEventListener('keydown', (event) => {
-    // @ts-expect-error TS2339
-    if (copyray.isShowing && ['Escape', 'Esc'].includes(event.key)) {
-      copyray.hide()
+    if (overlay.isShowing && ['Escape', 'Esc'].includes(event.key)) {
+      hide()
       return
     }
 
     if (((isMac && event.metaKey) || (!isMac && event.ctrlKey)) && event.shiftKey && event.key.toLowerCase() === 'k') {
-      copyray.toggle()
+      toggle()
     }
   })