@takagaki/cortex-decisions-viewer 0.12.197 → 0.12.199

package/dist/render.js

@@ -6248,6 +6248,14 @@ const CLIENT_JS = `
   // 注: ここは埋め込みJSのテンプレートリテラル内。コメントでもバッククォートを使わない
   var GC_PAGE = ${JSON.stringify(google_confirm_page_1.GOOGLE_CONFIRM_PAGE_FILE)};
   var GC_MSG = ${JSON.stringify(google_confirm_page_1.GOOGLE_CONFIRM_POST_TYPES)};
+  var GC_CHANNEL = ${JSON.stringify(google_confirm_page_1.GOOGLE_CONFIRM_CHANNEL_PREFIX)};
+  var GC_FEATURES = ${JSON.stringify(google_confirm_page_1.GOOGLE_CONFIRM_WINDOW_FEATURES)};
+  var GC_CLOSED_GRACE_MS = 6000;
+  var GC_LEFT_GRACE_MS = 15000;
+  var GC_TIMEOUT_MS = 600000;
+  var GC_START_MAX = 5;
+  // 進行中の確認は 1 つだけ（全ボタン共通）
+  var gcPending = null;
   var GC_UNFINISHED = "Google での確認が終わっていません。もう一度押してください";
   var GC_UNAVAILABLE = "今は確認できません。しばらくしてからもう一度";
   // サーバの op=state が返す googleConfirm（栓が切なら無い＝null＝今の追加欄のまま）。取れていない間も null
@@ -6273,45 +6281,122 @@ const CLIENT_JS = `
     return !!c && Array.isArray(c[kind]) && c[kind].indexOf(id) >= 0;
   }
   /**
-   * 確認ページをポップアップで開き、結果を待つ。**ここで受け取るのは結果だけ**（トークンは来ない）。
-   * 🔴 メッセージは同じオリジンの、いま開いたウィンドウからのものだけを受ける。閉じられたら、最後の失敗の理由（無ければ「終わっていません」）
+   * 確認ページを小さな窓で開き、結果を待つ。**ここで受け取るのは結果だけ**（トークンは来ない）。
+   * 窓は Google へ移って戻ってくる間に opener が切れることがあるので、戻りは BroadcastChannel（flow 入りの名前）で受ける。
+   * 🔴 flow は本体と確認ページしか知らない乱数。flow の合わないメッセージ・型の違うメッセージは捨てる。読むのは type・flow・ok・message・changed だけ。
+   * 窓が閉じても、Google へ移ったあと（leaving を受けたあと）は失敗にしない。終わりは result・10 分の期限・次のクリックでの置き換え。
    */
+  function gcRandomFlow() {
+    var a = new Uint8Array(16);
+    crypto.getRandomValues(a);
+    var out = "";
+    for (var i = 0; i < a.length; i++) out += (a[i] < 16 ? "0" : "") + a[i].toString(16);
+    return out;
+  }
+  function gcWindowFeatures() {
+    var w = 520, h = 680;
+    var left = Math.max(0, Math.round((window.screenX || 0) + ((window.outerWidth || w) - w) / 2));
+    var top = Math.max(0, Math.round((window.screenY || 0) + ((window.outerHeight || h) - h) / 3));
+    return GC_FEATURES + ",left=" + left + ",top=" + top;
+  }
   function openGoogleConfirm(opts) {
     return new Promise(function (resolve) {
+      // 前の確認が残っていれば、窓が生きている間は前面に出すだけ。閉じていれば捨てて新しく始める
+      if (gcPending) {
+        try { if (gcPending.win && !gcPending.win.closed) { gcPending.win.focus(); resolve({ ok: false, message: "開いている Google の窓で続けてください" }); return; } } catch (e) { /* 捨てて続ける */ }
+        gcPending.discard();
+      }
       var intake = SITE.intake;
-      var win = window.open(new URL(GC_PAGE, location.href).href, "cortex-google-confirm", "popup,width=520,height=640");
+      var flow = gcRandomFlow();
+      var win = window.open(new URL(GC_PAGE, location.href).href, "cortex-google-confirm", gcWindowFeatures());
       if (!win) { resolve({ ok: false, message: "ポップアップが開けませんでした。ブラウザのポップアップを許可して、もう一度押してください" }); return; }
-      var done = false;
+      var done = false; // 後始末まで済んだ
+      var resolved = false; // 呼び手へ結果を返した（Google にいる間に失敗として返しても、flow は期限まで生かす）
+      var left = false;
+      var resumes = 0;
+      var readySent = false;
       var last = null;
+      var closedAt = 0;
+      var channel = null;
       var timer = null;
-      function end(r) {
+      var startedAt = Date.now();
+      function settle(r) {
+        if (resolved) return;
+        resolved = true;
+        resolve(r);
+      }
+      function finish() {
         if (done) return;
         done = true;
-        window.removeEventListener("message", onMsg);
+        window.removeEventListener("message", onOpenerMsg);
+        try { if (channel) channel.close(); } catch (e) { /* 閉じ済み */ }
         clearInterval(timer);
-        resolve(r);
+        if (gcPending && gcPending.flow === flow) gcPending = null;
       }
-      function onMsg(ev) {
-        if (ev.origin !== location.origin || ev.source !== win || !ev.data) return;
-        if (ev.data.type === GC_MSG.ready) {
-          win.postMessage({
-            type: GC_MSG.start,
-            intake: { url: intake.url, token: intake.token },
-            ticket: actorTicket(),
-            kind: opts.kind,
-            mode: opts.mode,
-            url: opts.url || "",
-            id: opts.id || "",
-          }, location.origin);
-        } else if (ev.data.type === GC_MSG.result) {
-          if (ev.data.ok) end({ ok: true, message: ev.data.message, changed: ev.data.changed });
-          else last = ev.data;
+      function end(r) {
+        settle(r);
+        finish();
+      }
+      function sendStart(target) {
+        // 名乗り券は、Google で時間がかかっても切れないよう、払い出すたびに作り直す
+        target({
+          type: GC_MSG.start,
+          flow: flow,
+          intake: { url: intake.url, token: intake.token },
+          ticket: actorTicket(),
+          kind: opts.kind,
+          mode: opts.mode,
+          url: opts.url || "",
+          id: opts.id || "",
+        });
+      }
+      function handle(data, replyTo) {
+        if (done || !data || typeof data !== "object" || data.flow !== flow) return;
+        closedAt = 0;
+        if (data.type === GC_MSG.resume) {
+          // 戻ってきた窓が指示をもらい直す（Google から戻るたび。上限つき）
+          if (resumes < GC_START_MAX) { resumes += 1; sendStart(replyTo); }
+        } else if (data.type === GC_MSG.leaving) left = true;
+        else if (data.type === GC_MSG.result) {
+          if (data.ok) {
+            // 失敗として返したあとに成功が届いたら、一覧だけ取り直す
+            if (resolved) afterGoogleConfirm();
+            end({ ok: true, message: data.message, changed: data.changed });
+          } else if (!resolved) last = { message: typeof data.message === "string" ? data.message : null };
         }
       }
-      window.addEventListener("message", onMsg);
+      function viaChannel(msg) { try { if (channel) channel.postMessage(msg); } catch (e) { /* 閉じている */ } }
+      function viaWindow(msg) { try { win.postMessage(msg, location.origin); } catch (e) { /* 閉じている */ } }
+      function onOpenerMsg(ev) {
+        if (ev.origin !== location.origin || ev.source !== win || !ev.data) return;
+        // 最初の ready だけは flow を持たない（開いたばかり）。1 回だけ指示を返す
+        if (ev.data.type === GC_MSG.ready) { closedAt = 0; if (!readySent) { readySent = true; sendStart(viaWindow); } return; }
+        // resume はチャンネルで受けるので、opener 経由の複製は捨てる（払い出しの二重消費を避ける）
+        if (ev.data.type === GC_MSG.resume) return;
+        handle(ev.data, viaWindow);
+      }
+      try {
+        channel = new BroadcastChannel(GC_CHANNEL + flow);
+        channel.onmessage = function (ev) { handle(ev.data, viaChannel); };
+      } catch (e) { channel = null; }
+      window.addEventListener("message", onOpenerMsg);
       timer = setInterval(function () {
-        if (win.closed) end({ ok: false, message: last && last.message ? last.message : GC_UNFINISHED });
+        var now = Date.now();
+        var failure = last && last.message ? last.message : GC_UNFINISHED;
+        if (now - startedAt >= GC_TIMEOUT_MS) { end({ ok: false, message: failure }); return; }
+        var closed = false;
+        try { closed = win.closed; } catch (e) { closed = true; }
+        if (!closed) { closedAt = 0; return; }
+        if (!closedAt) closedAt = now;
+        if (left) {
+          // Google へ移ったあと: 窓の所属が切り替わって closed に見えることがある。呼び手には押し直せる形で返すが、
+          // flow は期限まで生かす（窓が実は生きていて、戻って resume してくる場合に備える）
+          if (now - closedAt >= GC_LEFT_GRACE_MS) settle({ ok: false, message: failure });
+        } else if (now - closedAt >= GC_CLOSED_GRACE_MS) {
+          end({ ok: false, message: failure });
+        }
       }, 500);
+      gcPending = { flow: flow, win: win, discard: function () { end({ ok: false, message: GC_UNFINISHED }); } };
     });
   }
   /** 確認が済んだあとの後始末: 登録の一覧と確認済みの一覧（どちらも op=state）を取り直し、開いている一覧を描き直す */
@@ -6840,10 +6925,19 @@ ${story_1.splitByNameLinks.toString()}
   var MEET_SHOT_STEP11 = "${meet_guide_images_1.MEET_GUIDE_STEP11}";
   var MEET_SHOT_STEP12 = "${meet_guide_images_1.MEET_GUIDE_STEP12}";
   var MEET_SHOT_STEP13 = "${meet_guide_images_1.MEET_GUIDE_STEP13}";
-  // Figma の「発行のしかた」に載せる手順の画像（#547）。理由は src/figma-guide-images.ts
+  // Figma の手順動画のポスターと手順画像11枚（#1353）。理由は src/figma-guide-images.ts
+  var FIGMA_SHOT_POSTER = "${figma_guide_images_1.FIGMA_GUIDE_POSTER}";
   var FIGMA_SHOT_STEP1 = "${figma_guide_images_1.FIGMA_GUIDE_STEP1}";
   var FIGMA_SHOT_STEP2 = "${figma_guide_images_1.FIGMA_GUIDE_STEP2}";
   var FIGMA_SHOT_STEP3 = "${figma_guide_images_1.FIGMA_GUIDE_STEP3}";
+  var FIGMA_SHOT_STEP4 = "${figma_guide_images_1.FIGMA_GUIDE_STEP4}";
+  var FIGMA_SHOT_STEP5 = "${figma_guide_images_1.FIGMA_GUIDE_STEP5}";
+  var FIGMA_SHOT_STEP6 = "${figma_guide_images_1.FIGMA_GUIDE_STEP6}";
+  var FIGMA_SHOT_STEP7 = "${figma_guide_images_1.FIGMA_GUIDE_STEP7}";
+  var FIGMA_SHOT_STEP8 = "${figma_guide_images_1.FIGMA_GUIDE_STEP8}";
+  var FIGMA_SHOT_STEP9 = "${figma_guide_images_1.FIGMA_GUIDE_STEP9}";
+  var FIGMA_SHOT_STEP10 = "${figma_guide_images_1.FIGMA_GUIDE_STEP10}";
+  var FIGMA_SHOT_STEP11 = "${figma_guide_images_1.FIGMA_GUIDE_STEP11}";
   // Backlog の手順動画のポスターと手順画像10枚（#1353）。理由は src/backlog-guide-images.ts
   var BACKLOG_SHOT_POSTER = "${backlog_guide_images_1.BACKLOG_GUIDE_POSTER}";
   var BACKLOG_SHOT_STEP1 = "${backlog_guide_images_1.BACKLOG_GUIDE_STEP1}";
@@ -12593,7 +12687,19 @@ ${story_1.splitByNameLinks.toString()}
       // 🔴 **Figma の説明文（c-07・新設）。** 追加の欄の手順 4（何が同期されるか）と手順 1 の前提
       // （トークンの登録）を、ここに 1 回だけ置く。鍵の欄は 0 件のあいだ畳まれているので、入れる欄が
       // 出ること（ファイルを足すと出る）も 1 句で言う。発行の手順そのものは鍵の欄（正本）が持つ
-      m.modal.appendChild(el("p", { class: "modal-desc", text: "ここに並んでいる Figma ファイルの画面名とコメントを、Figma へのリンクつきで毎晩同期します（画像は取り込まれません）。あらかじめ Figma のトークンの登録が要ります（ファイルを足すと入れる欄が出ます）。やめるには「このファイルを外す」を押してください。" }));
+      var figmaDesc = el("p", { class: "modal-desc", text: "ここに並んでいる Figma ファイルの画面名とコメントを、Figma へのリンクつきで毎晩同期します（画像は取り込まれません）。あらかじめ Figma のトークンの登録が要ります（ファイルを足すと入れる欄が出ます）。やめるには「このファイルを外す」を押してください。" });
+      m.modal.appendChild(figmaDesc);
+      // 🔴 **Figma のつなぎ方の動画＋画像（#1353）は Backlog と同じ配置**（見出しのすぐ下・説明文より前・折りたたまない・中央・幅 480px 上限）。
+      // 投入の口が無い（つなげない）配信先には出さない
+      var figmaForm = SECRET_FORMS["figma"];
+      if (SITE.intake && figmaForm && figmaForm.guideInModal) {
+        var figmaCarousel = buildGuideCarousel("figma", figmaForm.guide);
+        if (figmaCarousel) {
+          figmaCarousel.classList.add("mt-carousel-center");
+          figmaCarousel.setAttribute("data-guide-kind", "figma");
+          m.modal.insertBefore(figmaCarousel, figmaDesc);
+        }
+      }
     } else if (cap === "共有資料" && (!adapter || adapter === "google-drive")) {
       // 🔴 **Google Drive 専用の説明文（c-07・新設）。** SharePoint 等の別のアダプタの窓には出さない
       // （Markdown 化の約束は Drive の取り込みの話）。追加の欄の手順 3 が持っていた文
@@ -18655,36 +18761,81 @@ ${story_1.splitByNameLinks.toString()}
       // 特に file_comments:read の欠落は「同期は緑なのに指摘だけ増えない」という
       // 気づきにくい壊れ方をする（コメント同期は後から足した機能で、この案内が追随していなかった）。
       // 書き込み権限は1つも要らない。files:read（非推奨・広範）は選ばせないこと。
-      // **画像内の番号（①〜⑧・下の shots）と、この文の言い回しの向きを揃える。**
-      // 文の側には数字を振らない——振ると画像の丸数字と二重に採番することになり、
-      // 「文の1番」と「画像の①」がずれたときに矛盾して見える（#547）
-      how: "Figma の左上の名前 → Settings → Security タブ → Personal access tokens の Generate new token で発行します。名前は任意（例: cortex token）、期限は90日などにし、スコープは file_content:read と file_comments:read の2つだけにチェックを入れてください（どちらも読み取りのみ・書き込み権限は要りません）。",
+      // **動画の読み上げ・画像の札（下の shots）と、この文の言い回しの向きを揃える。**
+      // 文の側には数字を振らない——振ると画像の手順番号と二重に採番することになり、
+      // 「文の1番」と「画像の1」がずれたときに矛盾して見える
+      how: "Figma でファイルを開き、左上のメニュー → Help and account → Account settings → Security タブ → Personal access tokens の Generate new token で発行します。名前は任意（例: cortex token）、期限は90日などにし、スコープは file_content:read と file_comments:read の2つだけにチェックを入れてください（どちらも読み取りのみ・書き込み権限は要りません）。",
       // **スコープが正しくても、招待が無いと読めない。** トークンは「そのアカウントが
       // 見られるファイル」しか読めないので、招待漏れは 404 になる。権限の問題に見えないため
       // 現場で切り分けに時間がかかる（実際に踏んだ）。入力欄の隣に書いておく。
       note: "発行したアカウントを、対象の Figma ファイルに閲覧者として招待しておいてください（招待が無いとトークンが正しくても読めません）。"
         + "発行するのは、対象ファイルのあるチームで Dev または Full の席を持つ方にしてください。閲覧席（View/Collab）のトークンは取得回数が月 20 回までで、夜間同期が数日で止まります。",
-      // **手順の画像3枚（#547）。** buildGuideCarousel（#1353）を通す1枚ずつ送りの枠に乗せる。
-      // 見出しは画像の並び順（1〜3枚目）、画像の中の丸数字（①〜⑧）は1枚の中の細かい手順
-      // ——役割が別なので、見出し側に丸数字を混ぜない。
-      // 動画は無し（guide.video を省略）。将来動画を足すときは、この guide にそのまま
-      // video: { alt } を足すだけで済む（SITE.guideAssets.figma.video が注入された日から配信開始）
+      // **手順の動画＋画像（#1353）。** Backlog と同じ形（動画の実 URL は SITE.guideAssets.figma.video・build.ts の
+      // GUIDE_VIDEO_SOURCES が注入する）。画像の並びは手順の順（01→11: Figma の行 → リンクをコピー → トークンを発行 → 貼る → つながる）。
+      // 動画＋画像は鍵の欄ではなく、モーダルの上（見出しの下・説明文の前）に出す（openCapabilityModal の Figma の項）
+      guideInModal: true,
       guide: {
+        // 画像の説明文（カルーセルの下）は「手順 N / 11」だけを出す（画像の中に文言が入っているため）
+        counter: true,
+        video: {
+          alt: "Figma を Cortex につなぐ手順の動画（約1分30秒）。Figma のファイルのリンクのコピー、読み取り用のトークンの発行、操作タブへの貼り付け、接続OK の確認までを画面で見せます。",
+          poster: FIGMA_SHOT_POSTER,
+        },
         shots: [
           {
-            src: FIGMA_SHOT_STEP1, width: "1000", height: "1114",
-            heading: "1. 左上の名前 → Settings",
-            alt: "Figma左上の自分の名前を押すとメニューが開き、その中のSettingsが赤枠で示されている。",
+            src: FIGMA_SHOT_STEP1, width: "960", height: "540",
+            heading: "1. 操作タブで Figma の行を押す",
+            alt: "手順 1。Cortex の操作タブのデザインの Figma の行が赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP2, width: "960", height: "540",
+            heading: "2. Figma でファイルを開き Share →［Copy link］",
+            alt: "手順 2。Figma の Share の窓で［Copy link］が赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP3, width: "960", height: "540",
+            heading: "3. リンクを貼って［追加］",
+            alt: "手順 3。Cortex の Figma のモーダルの「Figma ファイルを追加」の欄と［追加］が赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP4, width: "960", height: "540",
+            heading: "4. ファイルが並んだら、次はトークン",
+            alt: "手順 4。ファイルの行と［登録する］が赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP5, width: "960", height: "540",
+            heading: "5. 左上のメニュー → Help and account → Account settings",
+            alt: "手順 5。Figma の左上のメニューで Help and account と Account settings が赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP6, width: "960", height: "540",
+            heading: "6. Security タブ →［Generate new token］",
+            alt: "手順 6。Account settings の Security タブと Generate new token が赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP7, width: "960", height: "540",
+            heading: "7. 名前は自由・期限は 90 days",
+            alt: "手順 7。トークンの名前の欄と期限（90 days）が赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP8, width: "960", height: "540",
+            heading: "8. file_content:read と file_comments:read の 2 つだけにチェック →［Generate token］",
+            alt: "手順 8。権限の一覧で file_content:read と file_comments:read の 2 つのチェックが赤枠で示されている。",
+          },
+          {
+            src: FIGMA_SHOT_STEP9, width: "960", height: "540",
+            heading: "9. トークンをコピー（見られるのはこの画面だけ）",
+            alt: "手順 9。発行されたトークンの欄が赤枠で示されている（値は伏せ字）。",
           },
           {
-            src: FIGMA_SHOT_STEP2, width: "1200", height: "1145",
-            heading: "2. Security タブ → Generate new token を押す",
-            alt: "Settings画面のSecurityタブが赤枠で示され、下のPersonal access tokensにあるGenerate new tokenのリンクも赤枠で示されている。",
+            src: FIGMA_SHOT_STEP10, width: "960", height: "540",
+            heading: "10.［登録する］→ トークンを貼って［保存］",
+            alt: "手順 10。Cortex のトークンの欄と［保存］が赤枠で示されている。",
           },
           {
-            src: FIGMA_SHOT_STEP3, width: "1100", height: "1428",
-            heading: "3. 名前・期限・スコープを決めて発行する",
-            alt: "Generate new tokenダイアログ。Token name欄・Expiration（90日）・file_comments:readとfile_content:readのチェックボックス・Generate tokenボタンが、それぞれ赤枠で示されている。",
+            src: FIGMA_SHOT_STEP11, width: "960", height: "540",
+            heading: "11. 「接続OK」と「登録済み」が出れば完了",
+            alt: "手順 11。ファイルの行の「接続OK」とトークンの「登録済み」が赤枠で示されている。",
           },
         ],
       },
@@ -18998,7 +19149,7 @@ ${story_1.splitByNameLinks.toString()}
     // meta.guide を持つ種別（Figma）はカルーセル1つに乗せる。meta.guide も meta.shots も
     // 持たない種別（Backlog）ではこの節は素通りする
     if (meta.guide && meta.guideInModal) {
-      // モーダルの上に出している種別（Backlog）は、ここには重ねない
+      // モーダルの上に出している種別（Backlog・Figma）は、ここには重ねない
     } else if (meta.guide) {
       var carousel = buildGuideCarousel(kind, meta.guide);
       if (carousel) guidanceBox.appendChild(carousel);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takagaki/cortex-decisions-viewer",
-  "version": "0.12.197",
+  "version": "0.12.199",
   "description": "Cortexの意思決定記録（Decisions/*.md）を静的サイトにビルドして閲覧する。各レコードに「Edit on GitHub」リンクを付与する。",
   "license": "UNLICENSED",
   "private": false,
@@ -21,7 +21,9 @@
     "!assets/guides/github-poster.jpg",
     "!assets/guides/github-annotated",
     "!assets/guides/meet-poster.jpg",
-    "!assets/guides/meet-annotated"
+    "!assets/guides/meet-annotated",
+    "!assets/guides/figma-poster.jpg",
+    "!assets/guides/figma-annotated"
   ],
   "engines": {
     "node": ">=18"