@kagayoi/support-extension 1.0.6

package/README.md

@@ -0,0 +1,164 @@
+# ブラウザ拡張向けサポートフッター
+
+拡張の設定画面へ「お問い合わせ」と「評価をお願いします！★★★★★」を置くための共通部品です。全拡張で同じ組み込み方にするため、次の5ファイルを**正本**とし、公開npmパッケージ `@kagayoi/support-extension` から拡張側へ逐語コピーして同梱します。拡張ごとに書き換えると正本の修正を配れなくなるので、変更が要るときはこのリポジトリ側を直します。
+
+| 正本 | 拡張側の配置 | 役割 |
+| --- | --- | --- |
+| `public/assets/contact-form.js` | `src/shared/kagayoi-support-popup.js` | `<kagayoi-contact-popup>` と `<kagayoi-contact-form>` |
+| `public/assets/kagayoi-support-form.css` | `src/shared/kagayoi-support-form.css` | 問い合わせフォームのShadow DOM用CSS |
+| `public/assets/kagayoi-support-popup.css` | `src/shared/kagayoi-support-popup.css` | 問い合わせダイアログのShadow DOM用CSS |
+| `clients/chrome-extension/support-footer.js` | `src/shared/kagayoi-support-footer.js` | `<kagayoi-support-footer>`（2 ボタンをまとめて描画） |
+| `clients/chrome-extension/kagayoi-support-footer.css` | `src/shared/kagayoi-support-footer.css` | 共通フッターのShadow DOM用CSS |
+
+Manifest V3 ではリモート JavaScript を実行できないため、`https://support.kagayoi.com/assets/contact-form.js` を `<script src>` で読み込む方法は Web サイト専用です。
+
+拡張側はパッケージ版をexact固定し、build前に同期します。`postinstall`では他リポジトリを書き換えず、明示的なscriptからだけ更新します。
+
+```powershell
+pnpm add --save-dev --save-exact @kagayoi/support-extension
+pnpm exec kagayoi-support-sync
+```
+
+```json
+{
+  "scripts": {
+    "sync:support": "kagayoi-support-sync",
+    "prebuild": "pnpm sync:support"
+  }
+}
+```
+
+パッケージ更新時は `pnpm update --save-exact @kagayoi/support-extension` の後に通常のbuildを行います。CIでコピーのずれだけを確認する場合は `pnpm exec kagayoi-support-sync --check` を使います。
+
+この正本リポジトリの保守時は `pnpm sync:extensions` で既存の兄弟リポジトリとの差分とHTML組み込み契約を確認できます。比較時は CRLF / LF の差を無視し、完全なフッタータグと、そのタグより後に1回ずつ置いた2本の module スクリプト（popup → footer の順）も検証します。
+
+JavaScript 2ファイルは `innerHTML` への代入を持ちません。AMO の静的解析 `UNSAFE_VAR_ASSIGNMENT` と、拡張側リポジトリの「`innerHTML` 不使用」契約の両方を満たすためで、拡張ごとに書き換えずそのまま通せます。3つのCSSは `style-src 'self'` に適合する同梱ファイルとして各Shadow DOMから自動で読み込みます。製品ごとの配置・余白・配色はフッターを置く既存レイアウトと `--kgs-*` 変数で調整し、同梱コピーへ製品固有コードを加えません。
+
+## 組み込み
+
+1. `@kagayoi/support-extension` をexact固定し、`kagayoi-support-sync` でJavaScript 2ファイルとCSS 3ファイルを拡張の `src/shared/` へ同期する。
+2. `manifest.json` に API のホスト権限を追加する。
+3. 設定画面（`popup.html` / `options.html`）の末尾へタグとスクリプトを置く。
+4. `product-id` を D1 の `products` に登録する（`migrations/` にシードを追加）。未登録だと API が `unknown product` を返します。
+5. Firefox 版も出す拡張は、下の「Firefox 版」の manifest 追記を行う。
+
+拡張の Origin は Worker がスキームで許可するので、`CLIENT_ORIGINS` へ拡張 ID を足す作業はありません。
+
+```json
+{
+  "host_permissions": [
+    "https://support.kagayoi.com/"
+  ]
+}
+```
+
+```html
+<kagayoi-support-footer product-id="my-extension"></kagayoi-support-footer>
+
+<script type="module" src="../shared/kagayoi-support-popup.js"></script>
+<script type="module" src="../shared/kagayoi-support-footer.js"></script>
+```
+
+製品名・拡張バージョン・評価リンクは実行時に manifest から決まるので、拡張側で書くのは `product-id` だけです。
+
+`type="module"` にするのは、モジュールスクリプトが既定で defer 相当になり、記述順どおりに「部品の定義 → フッターの定義」で走るためです。Vite などのバンドラを使う拡張でも、この形なら同梱ファイルとして扱われます（`defer` 付きのクラシックスクリプトだと取りこぼされます）。中身は IIFE なので、モジュールにしても動作は変わりません。
+
+拡張ページの `content_security_policy` で `default-src` または `connect-src` を明示している場合は、`connect-src 'self' https://support.kagayoi.com` も許可します。
+
+`app-version` は `runtime.getManifest().version` から自動で入ります。評価リンクの URL も実行時に決まるため、拡張ごとにストア ID を書く必要はありません。
+
+| 実行環境 | 評価リンクの向き先 |
+| --- | --- |
+| Chrome | `https://chromewebstore.google.com/detail/<runtime.id>` |
+| Edge（`update_url` に microsoft を含む） | `https://microsoftedge.microsoft.com/addons/detail/<runtime.id>` |
+| Firefox | `https://addons.mozilla.org/firefox/addon/<amo-slug または gecko.id>/` |
+
+拡張ページ以外（`popup.html` を素のブラウザで開くプレビュー等）では、フッターは自分を非表示にします。
+
+## 設定
+
+`<kagayoi-support-footer>` の属性です。
+
+| 属性 | 必須 | 内容 |
+| --- | --- | --- |
+| `product-id` | はい | D1 の `products.id` と一致する製品 ID |
+| `product-name` | いいえ | 省略時は manifest の `name`（`__MSG_*__` は `_locales` から解決） |
+| `store-url` | いいえ | 評価リンクの URL を固定する場合だけ指定（自動判定より優先） |
+| `amo-slug` | いいえ | Firefox 版の AMO スラッグ。省略時は `gecko.id` |
+| `contact-label` / `rate-label` | いいえ | ボタンのラベル。省略時は `_locales` の `kagayoiSupportContact` / `kagayoiSupportRate`、それも無ければ組み込みの日本語 / 英語 |
+| `dialog-title` | いいえ | ダイアログ見出し |
+| `app-version` | いいえ | 省略時は `runtime.getManifest().version` |
+| `os-version` / `locale` / `diagnostics` | いいえ | 問い合わせへ添付する情報 |
+| `hide-contact` / `hide-rate` | いいえ | どちらかのボタンだけ出す場合に付ける |
+| `firefox-data-consent` | いいえ | Firefox manifest で問い合わせ情報を任意申告する拡張だけ、送信前に許可を要求する |
+| `api-base` | いいえ | ローカル検証などで API URL を差し替える場合だけ指定 |
+
+配色は `--kgs-surface` / `--kgs-surface-hover` / `--kgs-border` / `--kgs-star` / `--kgs-radius` / `--kgs-gap` / `--kgs-accent` で上書きできます。既定はホストの文字色に対する中立の灰色オーバーレイなので、ライト / ダークどちらのテーマでも指定なしで馴染みます。
+
+## 問い合わせフォームだけを使う
+
+既存のボタンからダイアログを開く場合は `<kagayoi-contact-popup>` を直接使います。
+
+```html
+<button id="support-button" type="button">お問い合わせ</button>
+<kagayoi-contact-popup
+  id="support-popup"
+  hide-trigger
+  product-id="my-extension"
+  product-name="拡張機能名"
+></kagayoi-contact-popup>
+```
+
+```js
+document.querySelector("#support-button").addEventListener("click", () => {
+  document.querySelector("#support-popup").open()
+})
+```
+
+ポップアップは `channel="extension"` と永続する `localStorage` セッションを自動で使います。OTP のアクセストークンは拡張ごとのオリジンに保存され、API が返した有効期限を過ぎると削除されます。
+
+| 属性 | 必須 | 内容 |
+| --- | --- | --- |
+| `product-id` | はい | D1 の `products.id` と一致する製品 ID |
+| `product-name` | いいえ | フォームに表示する製品名 |
+| `app-version` | いいえ | 問い合わせへ添付する拡張バージョン |
+| `os-version` | いいえ | 問い合わせへ添付する OS 情報 |
+| `locale` | いいえ | 省略時は `navigator.language` |
+| `diagnostics` | いいえ | 問い合わせへ添付する診断情報 |
+| `button-label` | いいえ | 内蔵ボタンのラベル |
+| `dialog-title` | いいえ | ダイアログ見出し |
+| `api-base` | いいえ | ローカル検証などで API URL を差し替える場合だけ指定 |
+
+送信完了時は、受付番号を `detail.reference` に含む `kagayoi-support-submitted` イベントが発火します。
+
+```js
+document.querySelector("kagayoi-contact-popup").addEventListener("kagayoi-support-submitted", (event) => {
+  console.info(event.detail.reference)
+})
+```
+
+## Firefox 版
+
+Chrome と同じく問い合わせも評価も動きます。Firefox の拡張 Origin `moz-extension://<UUID>` はインストールごとに変わって列挙できないため、Worker 側は `CLIENT_ORIGINS` の列挙ではなく**拡張スキームで許可**しています（`src/index.ts` の `isAllowedOrigin`）。拡張を公開しても `CLIENT_ORIGINS` へ ID を足す必要はありません。
+
+Firefox 版で追加が要るのは manifest の 2 点です。
+
+```json
+{
+  "host_permissions": ["https://support.kagayoi.com/*"],
+  "browser_specific_settings": {
+    "gecko": {
+      "data_collection_permissions": {
+        "required": ["personallyIdentifyingInfo", "authenticationInfo"],
+        "optional": ["personalCommunications"]
+      }
+    }
+  }
+}
+```
+
+`data_collection_permissions` は AMO の申告で、問い合わせフォームが**メールアドレス**（`personallyIdentifyingInfo`）、**確認コード**（`authenticationInfo`）、**問い合わせ本文**（`personalCommunications`）を送るためです。利用者が自分で入力した値も申告対象になります。上の例では、フォームを開く前から必要な2分類を `required`、実際に本文を送るときだけ必要な `personalCommunications` を `optional` に分けています。`"none"` は他の値と併記できないので、`["none"]` を宣言している拡張は置き換えます。
+
+`personalCommunications` を `optional` で申告する拡張は、フッターへ `firefox-data-consent` を付けます。Firefoxだけ送信直前に `permissions.request()` でこの1分類を要求し、Chromeでは何もしません。3分類をすべて `required` で申告する拡張や、独自ボタンで許可を取得してからフォームを開く拡張には付けません。
+
+申告を変えると AMO の再審査が要ります。プライバシーポリシーと掲載文にも問い合わせ窓口の記載を合わせてください。

package/bin/kagayoi-support-sync.mjs

@@ -0,0 +1,95 @@
+#!/usr/bin/env node
+import { copyFileSync, existsSync, mkdirSync, readFileSync } from "node:fs"
+import { dirname, join, resolve } from "node:path"
+import { fileURLToPath, pathToFileURL } from "node:url"
+
+const PACKAGE_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..")
+const DEFAULT_ASSET_DIRECTORY = join(PACKAGE_ROOT, "dist")
+const TARGET_DIRECTORY = join("src", "shared")
+const ASSETS = Object.freeze([
+  "kagayoi-support-popup.js",
+  "kagayoi-support-form.css",
+  "kagayoi-support-popup.css",
+  "kagayoi-support-footer.js",
+  "kagayoi-support-footer.css",
+])
+
+const normalizedText = (path) => readFileSync(path, "utf8").replace(/\r\n?/g, "\n")
+
+export function syncExtensionAssets({
+  targetRoot = process.cwd(),
+  check = false,
+  assetDirectory = DEFAULT_ASSET_DIRECTORY,
+} = {}) {
+  const root = resolve(targetRoot)
+  const destinationDirectory = join(root, TARGET_DIRECTORY)
+  const changed = []
+
+  if (!check) mkdirSync(destinationDirectory, { recursive: true })
+  for (const name of ASSETS) {
+    const source = join(assetDirectory, name)
+    const destination = join(destinationDirectory, name)
+    if (!existsSync(source)) {
+      throw new Error(`npm パッケージに ${name} がありません。再インストールしてください。`)
+    }
+
+    const matches = existsSync(destination) && normalizedText(destination) === normalizedText(source)
+    if (matches) continue
+    changed.push(name)
+    if (!check) copyFileSync(source, destination)
+  }
+
+  return { changed, destinationDirectory }
+}
+
+function parseArguments(args) {
+  let targetRoot = process.cwd()
+  let check = false
+  for (let index = 0; index < args.length; index += 1) {
+    const argument = args[index]
+    if (argument === "--check") {
+      check = true
+      continue
+    }
+    if (argument === "--target") {
+      const value = args[index + 1]
+      if (!value) throw new Error("--target には拡張リポジトリのパスが必要です。")
+      targetRoot = value
+      index += 1
+      continue
+    }
+    if (argument === "--help" || argument === "-h") {
+      return { help: true, targetRoot, check }
+    }
+    throw new Error(`不明な引数です: ${argument}`)
+  }
+  return { help: false, targetRoot, check }
+}
+
+function printHelp() {
+  console.log("kagayoi-support-sync [--target <extension-root>] [--check]")
+  console.log("  指定先の src/shared へ共通 JavaScript 2本と CSS 3本を同期します。")
+}
+
+const entrypoint = process.argv[1] ? pathToFileURL(resolve(process.argv[1])).href : ""
+if (entrypoint === import.meta.url) {
+  try {
+    const options = parseArguments(process.argv.slice(2))
+    if (options.help) {
+      printHelp()
+    } else {
+      const result = syncExtensionAssets(options)
+      if (!result.changed.length) {
+        console.log(`一致: ${result.destinationDirectory}`)
+      } else if (options.check) {
+        console.error(`差分: ${result.changed.join(", ")}`)
+        process.exitCode = 1
+      } else {
+        console.log(`同期: ${result.changed.length} ファイル → ${result.destinationDirectory}`)
+      }
+    }
+  } catch (error) {
+    console.error(error instanceof Error ? error.message : String(error))
+    process.exitCode = 1
+  }
+}

package/dist/kagayoi-support-footer.css

@@ -0,0 +1,45 @@
+:host {
+  --kgs-gap: 8px;
+  --kgs-radius: 10px;
+  --kgs-star: #f5b301;
+  --kgs-surface: rgba(128, 128, 128, 0.10);
+  --kgs-surface-hover: rgba(128, 128, 128, 0.18);
+  --kgs-border: rgba(128, 128, 128, 0.32);
+  display: block;
+  color: inherit;
+  font: inherit;
+}
+:host([hidden]) { display: none !important; }
+*, *::before, *::after { box-sizing: border-box; }
+[hidden] { display: none !important; }
+.stack { display: grid; gap: var(--kgs-gap); }
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 40px;
+  padding: 10px 14px;
+  border: 1px solid var(--kgs-border);
+  border-radius: var(--kgs-radius);
+  background: var(--kgs-surface);
+  color: inherit;
+  font: inherit;
+  font-weight: 700;
+  line-height: 1.4;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+}
+.item:hover { background: var(--kgs-surface-hover); }
+.item:active { transform: translateY(1px); }
+.item:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+.rate { justify-content: space-between; text-align: left; }
+.stars { flex: none; color: var(--kgs-star); font-size: 1.15em; letter-spacing: 0.04em; }
+/* hide-trigger 付きでも inline-block は行ボックスを作るので、フローから外して余白を出さない。
+   アクセント色は拡張側の --accent / --primary を優先し、無ければ問い合わせフォームの既定に戻す。 */
+kagayoi-contact-popup {
+  position: absolute;
+  --ks-accent: var(--kgs-accent, var(--accent, var(--primary, #006fee)));
+}

package/dist/kagayoi-support-footer.js

@@ -0,0 +1,217 @@
+/*
+ * <kagayoi-support-footer> — Chrome 拡張の設定画面に置く共通フッター。
+ *
+ * 「お問い合わせ」と「評価をお願いします！★★★★★」の 2 ボタンをまとめて描画する。
+ * 全拡張で同じ組み込み方にするための部品で、拡張側では次の 3 行だけを書く。
+ *
+ *   <kagayoi-support-footer product-id="my-extension" product-name="拡張機能名"></kagayoi-support-footer>
+ *   <script type="module" src="../shared/kagayoi-support-popup.js"></script>
+ *   <script type="module" src="../shared/kagayoi-support-footer.js"></script>
+ *
+ * このファイルは Kagayoi.Support が正本。拡張側へは逐語コピーで同梱し、拡張ごとに改変しない
+ * （改変すると「作り方が全拡張で同じ」が崩れ、正本の修正が配れなくなる）。
+ *
+ * 方針:
+ *   - innerHTML を使わない。AMO の静的解析 UNSAFE_VAR_ASSIGNMENT 回避と、拡張側リポジトリの
+ *     「innerHTML 不使用」契約に合わせるため、DOM は createElement + textContent で組む。
+ *   - 配色は host のテキスト色に対する灰色オーバーレイで作る。拡張ごとに CSS 変数名が違うので、
+ *     どのテーマ（ライト / ダーク）でも破綻しない中立色を既定にし、必要なら --kgs-* で上書きする。
+ *   - ストア URL は runtime.id から実行時に組み立てる。拡張ごとに ID を書かないので設定漏れが出ない。
+ */
+(() => {
+  "use strict"
+
+  const SUPPORT_SITE = "https://support.kagayoi.com/"
+  const DEFINITION_WAIT_MS = 1000
+
+  const LABELS = {
+    ja: { contact: "お問い合わせ", rate: "評価をお願いします！" },
+    en: { contact: "Contact support", rate: "Please rate us!" },
+  }
+  const STYLESHEET_URL = bundledStylesheetUrl("kagayoi-support-footer.css")
+
+  function bundledStylesheetUrl(fileName) {
+    const api = extensionApi()
+    if (api) return api.runtime.getURL(`src/shared/${fileName}`)
+
+    const script = Array.from(document.scripts).find(({ src }) =>
+      /(?:^|\/)kagayoi-support-footer\.js(?:[?#]|$)/.test(src),
+    )
+    return new URL(fileName, script?.src || document.baseURI).href
+  }
+
+  function replaceShadowContent(shadowRoot, ...nodes) {
+    const stylesheet = document.createElement("link")
+    stylesheet.rel = "stylesheet"
+    stylesheet.href = STYLESHEET_URL
+    shadowRoot.replaceChildren(stylesheet, ...nodes)
+  }
+
+  /** Chrome は chrome.*、Firefox は browser.*。拡張ページ以外（プレビュー等）では null。 */
+  function extensionApi() {
+    const api = typeof browser !== "undefined" ? browser : typeof chrome !== "undefined" ? chrome : null
+    return api?.runtime?.getURL ? api : null
+  }
+
+  // Firefox 判定は評価リンクの向き先（AMO）を決めるためだけに使う。問い合わせは
+  // Worker が拡張スキームを許可しているので、Chrome / Firefox のどちらでも送れる。
+  function isFirefox(api) {
+    return api.runtime.getURL("").startsWith("moz-extension://")
+  }
+
+  function uiLanguage(api) {
+    const tag = api?.i18n?.getUILanguage?.() || navigator.language || "en"
+    return tag.toLowerCase().startsWith("ja") ? "ja" : "en"
+  }
+
+  /**
+   * ラベルの優先順位: 属性 → 拡張の _locales（キーがあれば） → 組み込みの ja/en。
+   * 組み込みを持つので、拡張ごとに messages.json を増やさなくても日本語表示になる。
+   */
+  function label(host, api, attribute, messageKey, fallbackKey) {
+    const fromAttribute = host.getAttribute(attribute)?.trim()
+    if (fromAttribute) return fromAttribute
+    const fromLocale = api?.i18n?.getMessage?.(messageKey)?.trim()
+    if (fromLocale) return fromLocale
+    return LABELS[uiLanguage(api)][fallbackKey]
+  }
+
+  /**
+   * 製品名。既定は manifest の name で、`__MSG_appName__` 形式なら _locales から引き直す
+   * （getManifest() はプレースホルダを解決しないため）。拡張ごとに名前を書かなくて済む。
+   */
+  function productName(host, api) {
+    const explicit = host.getAttribute("product-name")?.trim()
+    if (explicit) return explicit
+    const raw = api.runtime.getManifest?.().name?.trim() ?? ""
+    const messageKey = raw.match(/^__MSG_(.+)__$/)?.[1]
+    if (!messageKey) return raw
+    return api.i18n?.getMessage?.(messageKey)?.trim() || ""
+  }
+
+  /**
+   * 評価ページの URL。Firefox は AMO、update_url に microsoft を含むものは Edge アドオン、
+   * それ以外は Chrome ウェブストア。拡張 ID は公開時にストアの ID と一致する。
+   */
+  function storeUrl(host, api) {
+    const explicit = host.getAttribute("store-url")?.trim()
+    if (explicit?.startsWith("https://")) return explicit
+    if (!api) return ""
+    const manifest = api.runtime.getManifest?.() ?? {}
+    if (isFirefox(api)) {
+      const slug = host.getAttribute("amo-slug")?.trim() || manifest.browser_specific_settings?.gecko?.id || ""
+      return slug ? `https://addons.mozilla.org/firefox/addon/${encodeURIComponent(slug)}/` : ""
+    }
+    const id = api.runtime.id
+    if (!id) return ""
+    return String(manifest.update_url ?? "").toLowerCase().includes("microsoft")
+      ? `https://microsoftedge.microsoft.com/addons/detail/${id}`
+      : `https://chromewebstore.google.com/detail/${id}`
+  }
+
+  class KagayoiSupportFooter extends HTMLElement {
+    constructor() {
+      super()
+      this.attachShadow({ mode: "open" })
+    }
+
+    connectedCallback() {
+      if (this.shadowRoot.childElementCount) return
+      const api = extensionApi()
+      // 拡張ページ以外（popup.html を素のブラウザで開いたプレビュー等）では出さない。
+      // 問い合わせ API は拡張 Origin 前提で、ストア URL も組み立てられないため。
+      if (!api) {
+        this.hidden = true
+        return
+      }
+
+      const stack = document.createElement("div")
+      stack.className = "stack"
+
+      if (!this.hasAttribute("hide-contact")) stack.append(this.buildContact(api))
+      if (!this.hasAttribute("hide-rate")) {
+        const rate = this.buildRate(api)
+        if (rate) stack.append(rate)
+      }
+
+      replaceShadowContent(this.shadowRoot, stack)
+      if (!stack.childElementCount) this.hidden = true
+    }
+
+    buildContact(api) {
+      const button = document.createElement("button")
+      button.type = "button"
+      button.className = "item contact"
+      button.setAttribute("aria-haspopup", "dialog")
+      button.textContent = label(this, api, "contact-label", "kagayoiSupportContact", "contact")
+
+      this.popup = document.createElement("kagayoi-contact-popup")
+      this.popup.setAttribute("hide-trigger", "")
+      this.popup.setAttribute("product-id", this.getAttribute("product-id")?.trim() ?? "")
+      const dialogTitle = this.getAttribute("dialog-title")?.trim() || button.textContent
+      this.popup.setAttribute("dialog-title", dialogTitle)
+      const name = productName(this, api)
+      if (name) this.popup.setAttribute("product-name", name)
+      for (const attribute of ["api-base", "os-version", "locale", "diagnostics"]) {
+        const value = this.getAttribute(attribute)?.trim()
+        if (value) this.popup.setAttribute(attribute, value)
+      }
+      if (this.hasAttribute("firefox-data-consent")) this.popup.setAttribute("firefox-data-consent", "")
+      const version = this.getAttribute("app-version")?.trim() || api.runtime.getManifest?.().version
+      if (version) this.popup.setAttribute("app-version", version)
+
+      button.addEventListener("click", async () => {
+        // バンドラが読み込み順を変えて定義が後から来ることがあるので、少しだけ待つ。
+        if (!customElements.get("kagayoi-contact-popup")) {
+          await Promise.race([
+            customElements.whenDefined("kagayoi-contact-popup"),
+            new Promise((resolve) => setTimeout(resolve, DEFINITION_WAIT_MS)),
+          ])
+        }
+        // それでも来なければ（kagayoi-support-popup.js の同梱漏れ）操作不能にはせず、Web の窓口を開く。
+        if (typeof this.popup.open === "function") {
+          this.popup.open(button)
+        } else if (api.tabs?.create) {
+          api.tabs.create({ url: SUPPORT_SITE })
+        } else {
+          window.open(SUPPORT_SITE, "_blank", "noopener")
+        }
+      })
+
+      const wrapper = document.createDocumentFragment()
+      wrapper.append(button, this.popup)
+      return wrapper
+    }
+
+    buildRate(api) {
+      const href = storeUrl(this, api)
+      if (!href) return null
+      const link = document.createElement("a")
+      link.className = "item rate"
+      link.href = href
+      link.target = "_blank"
+      link.rel = "noreferrer noopener"
+
+      const text = document.createElement("span")
+      text.className = "rate-label"
+      text.textContent = label(this, api, "rate-label", "kagayoiSupportRate", "rate")
+
+      const stars = document.createElement("span")
+      stars.className = "stars"
+      stars.setAttribute("aria-hidden", "true")
+      stars.textContent = "★★★★★"
+
+      link.append(text, stars)
+      return link
+    }
+
+    /** 既存ボタンから問い合わせダイアログだけ開きたい場合の入口。 */
+    open() {
+      this.popup?.open?.()
+    }
+  }
+
+  if (!customElements.get("kagayoi-support-footer")) {
+    customElements.define("kagayoi-support-footer", KagayoiSupportFooter)
+  }
+})()

package/dist/kagayoi-support-form.css

@@ -0,0 +1,103 @@
+:host {
+  --ks-accent: var(--accent, var(--primary, #006fee));
+  --ks-surface: var(--panel, var(--surface, #ffffff));
+  --ks-surface-soft: var(--panel-2, var(--content2, rgba(127, 127, 127, 0.08)));
+  --ks-border: var(--line, var(--border, rgba(127, 127, 127, 0.28)));
+  --ks-text: var(--ink, var(--fg, inherit));
+  --ks-muted: var(--muted, #62626b);
+  display: block;
+  color-scheme: var(--kgs-color-scheme, inherit);
+  color: var(--ks-text);
+  font: inherit;
+  line-height: 1.7;
+}
+*, *::before, *::after { box-sizing: border-box; }
+[hidden] { display: none !important; }
+.panel {
+  padding: clamp(1rem, 3vw, 1.5rem);
+  border: 1px solid var(--ks-border);
+  border-radius: 16px;
+  background-color: var(--ks-surface);
+}
+.intro { margin: 0 0 1.25rem; color: var(--ks-muted); font-size: 0.9rem; }
+.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
+.field { display: grid; gap: 0.4rem; min-width: 0; }
+.field--full { grid-column: 1 / -1; }
+label, legend { text-align: left; font-weight: 600; font-size: 0.88rem; }
+.optional { color: var(--ks-muted); font-size: 0.76rem; font-weight: 400; }
+input, select, textarea, button { font: inherit; }
+input, select, textarea {
+  width: 100%;
+  min-height: 44px;
+  padding: 0.68rem 0.78rem;
+  border: 1px solid var(--ks-border);
+  border-radius: 10px;
+  background-color: var(--ks-surface);
+  color: var(--ks-text);
+}
+option {
+  background-color: var(--ks-option-surface, var(--ks-surface));
+  color: var(--ks-text);
+}
+textarea { min-height: 10rem; resize: vertical; }
+input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--ks-accent) 35%, transparent);
+  outline-offset: 2px;
+}
+.verification {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: minmax(0, 14rem) 1fr;
+  align-items: end;
+  gap: 0.8rem;
+  padding: 1rem;
+  border: 1px solid var(--ks-border);
+  border-radius: 12px;
+  background-color: var(--ks-surface-soft);
+}
+.verification p { align-self: center; margin: 0; color: var(--ks-muted); font-size: 0.82rem; }
+.resend {
+  justify-self: start;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--ks-accent);
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-top: 1.15rem; }
+.submit, .again {
+  min-height: 46px;
+  padding: 0.72rem 1.15rem;
+  border: 1px solid var(--ks-accent);
+  border-radius: 999px;
+  background-color: var(--ks-accent);
+  color: #ffffff;
+  font-weight: 700;
+  cursor: pointer;
+}
+.submit:disabled, .again:disabled, .resend:disabled { cursor: wait; opacity: 0.62; }
+.auth-note { margin: 0; color: var(--ks-muted); font-size: 0.8rem; }
+.status { min-height: 1.7em; margin: 0.8rem 0 0; font-size: 0.86rem; }
+.status[data-kind="error"] { color: #c62828; }
+.status[data-kind="success"] { color: #19743b; }
+.success {
+  padding: clamp(1.2rem, 4vw, 2rem);
+  border: 1px solid var(--ks-border);
+  border-radius: 16px;
+  background-color: var(--ks-surface);
+  text-align: center;
+}
+.success h2 { margin: 0 0 0.55rem; font-size: 1.35rem; }
+.success p { margin: 0.45rem 0; color: var(--ks-muted); }
+.reference { color: var(--ks-text) !important; font-weight: 700; letter-spacing: 0.05em; }
+.success a { color: var(--ks-accent); }
+.again { margin-top: 0.8rem; }
+.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
+@media (max-width: 620px) {
+  .grid, .verification { grid-template-columns: 1fr; }
+  .field--full { grid-column: auto; }
+  .submit { width: 100%; }
+}
+@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }