@takagaki/cortex-decisions-viewer 0.12.178 → 0.12.181

package/dist/build.js

@@ -36,8 +36,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.REFERENCES_SECTIONS = exports.RELATED_MATERIALS_SECTIONS = exports.RELATED_URL_MAX = exports.RELATED_MATERIALS_FIELD = exports.DECISION_FIRMNESS = exports.GRAPH_RELS = exports.GRAPH_RECORD_TYPES = exports.PROJECT_ICON_EXTS = exports.MIRROR_RELS = void 0;
+exports.REFERENCES_SECTIONS = exports.RELATED_MATERIALS_SECTIONS = exports.RELATED_URL_MAX = exports.RELATED_MATERIALS_FIELD = exports.DECISION_FIRMNESS = exports.GRAPH_RELS = exports.GRAPH_RECORD_TYPES = exports.GUIDE_VIDEO_SOURCES = exports.PROJECT_ICON_EXTS = exports.MIRROR_RELS = void 0;
 exports.sanitizeBody = sanitizeBody;
+exports.copyHashedAsset = copyHashedAsset;
+exports.buildGuideAssets = buildGuideAssets;
 exports.findProjectIcon = findProjectIcon;
 exports.readFleetSources = readFleetSources;
 exports.orderRecordsByLedgers = orderRecordsByLedgers;
@@ -299,6 +301,59 @@ function resolveKnowledgeRoot(decisionsDirAbs) {
  * `.jpeg` は入れない（前の intake は `jpg` へ正規化して書いていた・拾うと「どちらが正か」が2つになる）。
  */
 exports.PROJECT_ICON_EXTS = ["png", "jpg", "webp"];
+/**
+ * 手順動画の置き場（#1353）。**今はまだ1件も無い**——npm パッケージに
+ * `viewer/assets/guides/<連携の種別>.mp4` を同梱したら、ここに1行足すだけで配信が始まる
+ * （npm の next → カナリア確認 → latest 昇格 → 各案件の次回ビルド、という既存の画像と
+ * 同じ広がり方。段階的に全案件へ届く）。キーは SECRET_FORMS 等で使う連携の種別（kind）。
+ *
+ * **絶対パスは `__dirname`（`dist/build.js`）から2つ上＝パッケージルートの `assets/guides/`
+ * を指す。** `package.json` の `files` にも `assets` を加えてある（dist と同じ階層で配布される）。
+ */
+exports.GUIDE_VIDEO_SOURCES = {
+    // ポスターは動画の宣言には持たない（render.ts の SECRET_FORMS の guide.video.poster が data URI で持つ）
+    backlog: { video: path.join(__dirname, "..", "assets", "guides", "backlog.mp4") },
+};
+/**
+ * ファイルを内容ハッシュ名で `outAbs/assets/` へコピーする。CSS/JS と同じ規約
+ * （sha256 先頭8桁・`--cache-control public, max-age=31536000, immutable` で配信される
+ * `assets/` 配下）に動画も乗せる。**固定名にしないのは、動画の内容を変えても配信先に
+ * 古いバイト列が残ったまま長期キャッシュされる事故を防ぐため**（#1353 設計1.3節）。
+ *
+ * 読めない（まだ無い等）ときは undefined。**ビルドは止めない**——その連携の guide 宣言は
+ * 「動画なし」の表示に倒れる（動画ファイルが無い今の全案件がそうなる）。
+ */
+async function copyHashedAsset(outAbs, srcAbsPath, namePrefix) {
+    let bytes;
+    try {
+        bytes = await node_fs_1.promises.readFile(srcAbsPath);
+    }
+    catch {
+        return undefined;
+    }
+    const hash = (0, node_crypto_1.createHash)("sha256").update(bytes).digest("hex").slice(0, 8);
+    const fileExt = path.extname(srcAbsPath).replace(/^\./, "") || "bin";
+    const fileName = `${namePrefix}.${hash}.${fileExt}`;
+    await node_fs_1.promises.mkdir(path.join(outAbs, "assets"), { recursive: true });
+    await node_fs_1.promises.writeFile(path.join(outAbs, "assets", fileName), bytes);
+    return `assets/${fileName}`;
+}
+/**
+ * 連携の種別ごとの手順動画を `outAbs/assets/` へ写し、サイト内相対パスの表を返す。
+ * 1件も無ければ undefined（SiteData の「空の器は通さない」規約・`projectIcon` 等と同じ扱い）。
+ */
+async function buildGuideAssets(outAbs, sources) {
+    const out = {};
+    for (const kind of Object.keys(sources)) {
+        const videoAbsPath = sources[kind].video;
+        if (!videoAbsPath)
+            continue;
+        const url = await copyHashedAsset(outAbs, videoAbsPath, `guide-${kind}`);
+        if (url)
+            out[kind] = { video: url };
+    }
+    return Object.keys(out).length ? out : undefined;
+}
 /**
  * `Cortex/icon.<ext>` を探す。無ければ undefined（キーごと出さないため）。
  *
@@ -2638,6 +2693,9 @@ async function buildSite(opts, views) {
     }
     if (projectIcon)
         await node_fs_1.promises.copyFile(projectIcon.srcAbs, path.join(outAbs, projectIcon.file));
+    // 手順動画（#1353）。GUIDE_VIDEO_SOURCES が空の今は、1件も書き出されず site.guideAssets も
+    // undefined のまま（キーごと省略・空の器は通さない）——今のどの案件の表示も変わらない
+    site.guideAssets = await buildGuideAssets(outAbs, exports.GUIDE_VIDEO_SOURCES);
     let thumbIndex = 0;
     for (const node of graph.nodes) {
         if (!node.thumb)

package/dist/render.js

@@ -89,6 +89,7 @@ const node_crypto_1 = require("node:crypto");
 const google_chat_guide_images_1 = require("./google-chat-guide-images");
 const meet_guide_images_1 = require("./meet-guide-images");
 const figma_guide_images_1 = require("./figma-guide-images");
+const backlog_guide_images_1 = require("./backlog-guide-images");
 const story_1 = require("./story");
 // 「人が確認したか／機械が触ってよいか」の口（#699 F2b）。正本は engine の confirmed.mjs・判定は流し込むだけ
 const confirmed_1 = require("./confirmed");
@@ -5851,6 +5852,25 @@ a.ds-tile:hover { text-decoration: none; }
    Google Chat の 2 枚がモーダルの内側幅（約 996px）まで**引き伸ばされてぼける**
    ——「原寸の幅に戻す」と言いながら原寸より大きく出すことになる */
 .mt-shot-full { max-width: 100%; width: auto; cursor: zoom-out; }
+/* 手順動画＋画像のカルーセル（#1353）。buildGuideCarousel が作る唯一の口。
+   🔴 **ここでも幅はこの1か所だけ**（.mt-shot と同じ640pxに揃える）。表示切替は
+   hidden属性のトグルだけで行う（CSSOMのstyleプロパティへの代入はしない）。
+   スライドの高さは揃えない——固定枠にして object-fit で収めると、動画(16:9)と
+   縦長のスクリーンショットが混在したときの比率計算にstyle操作が要ることになり、
+   CSPの検査が拾いにくい書き方を増やす（実装レビュー指摘）。各スライドは
+   .mt-shot / .mt-carousel-video と同じ「width:100%; height:auto」に任せ、
+   枚数を切り替えるたびに高さが変わる（ガタつきはあるが、CSP安全性を優先する） */
+.mt-carousel { margin: 6px 0 0; max-width: 640px; }
+.mt-carousel-slide[hidden] { display: none; }
+.mt-carousel-slide .mt-shot { margin: 0; }
+.mt-carousel-video { display: block; width: 100%; height: auto; margin: 0; border: 1px solid var(--border); border-radius: 6px; background: #000; }
+.mt-carousel-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
+.mt-carousel-arrow { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 16px; line-height: 1; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; }
+.mt-carousel-arrow:hover { background: var(--border); }
+.mt-carousel-dots { display: flex; gap: 6px; }
+.mt-carousel-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--border); cursor: pointer; }
+.mt-carousel-dot.is-active { background: var(--accent); }
+.mt-carousel-caption { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
 /* 0件を黙って見せない（追加フォームだけだと「未登録」か「読めていない」か区別できない） */
 .ds-empty { color: var(--muted); font-size: 12.5px; margin: 4px 0 10px; }
 .sec-input { width: 100%; box-sizing: border-box; font-size: 13px; padding: 7px 10px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); }
@@ -6645,6 +6665,13 @@ ${story_1.splitByNameLinks.toString()}
   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}";
+  // Backlog の手順動画のポスターと手順画像5枚（#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}";
+  var BACKLOG_SHOT_STEP2 = "${backlog_guide_images_1.BACKLOG_GUIDE_STEP2}";
+  var BACKLOG_SHOT_STEP3 = "${backlog_guide_images_1.BACKLOG_GUIDE_STEP3}";
+  var BACKLOG_SHOT_STEP4 = "${backlog_guide_images_1.BACKLOG_GUIDE_STEP4}";
+  var BACKLOG_SHOT_STEP5 = "${backlog_guide_images_1.BACKLOG_GUIDE_STEP5}";
 
   /**
    * コピーボタンの動き（copyRow と copyInline の共通部分）。clipboard が使えない環境では
@@ -6762,6 +6789,139 @@ ${story_1.splitByNameLinks.toString()}
     });
     return img;
   }
+  // 手順動画＋画像のカルーセル（#1353）を作る**唯一の口**。guide が無ければ null
+  // （呼び出し側は null を見て何も差し込まない。空の枠を出さない）。
+  //
+  // guide = { video?: { alt, poster? }, shots: [{ src, width, height, alt, heading? }, ...] }
+  //   - video の実 URL は guide には置かない。**SITE.guideAssets[kind].video**（build.ts が
+  //     動画ファイルを site/assets/ へ写したときだけ注入する）から取る。guide.video があっても
+  //     SITE.guideAssets[kind].video が無ければ動画スライドを出さない——動画ファイルが
+  //     まだ無い今のすべての案件で、現状の表示から何も変わらないことの土台（#1353 実装設計1節）
+  //   - guide.video.poster … 動画の再生前に出す静止画。画像（shots）と同じ data URI で埋め込む
+  //     （配るのは動画1本だけ。ポスターは宣言側が持つ）。あれば <video poster> に付ける
+  //   - shots は今の meta.shots と同じ形。画像は data URI 埋め込みのまま（変更なし）
+  //
+  // 🔴 **ここでも幅の数字を呼び出し側に書かせない**（CSS の .mt-carousel 1 か所だけ）。
+  // ⚠ **表示切替は hidden 属性（DOM プロパティ代入）だけ**。インラインの style を書き込む
+  // 手段（CSP の検査・csp-compatible.test.mjs が禁じる書き方）は使わない。
+  // ⚠ ハンドラは全部 addEventListener（インラインの on* 属性は配信先の CSP が実行しない）。
+  // ⚠ guideShot 側の注意（直前のコメント）と同じ理由で、受け皿の変数名に s / p / src / ext を
+  // 使わない（fleet-passthrough の走査の誤検知を避ける）。属性を組み立てる el() への
+  // プロパティキー（"src": ...）は対象外——シグネチャ上避けられないHTML属性名そのもの。
+  function buildGuideCarousel(kind, guide) {
+    if (!guide) return null;
+    var asset = (SITE.guideAssets && SITE.guideAssets[kind]) || null;
+    var slides = [];
+    if (guide.video && asset && asset.video) {
+      var videoAttrs = {
+        class: "mt-carousel-video",
+        src: asset.video,
+        preload: "none",
+        controls: "",
+        playsinline: "",
+        "aria-label": guide.video.alt || "",
+      };
+      if (guide.video.poster) videoAttrs.poster = guide.video.poster;
+      slides.push({
+        node: el("video", videoAttrs),
+        caption: guide.video.alt || "",
+      });
+    }
+    (guide.shots || []).forEach(function (shot) {
+      slides.push({
+        node: guideShot({ src: shot.src, width: shot.width, height: shot.height, alt: shot.alt }),
+        caption: shot.heading || shot.alt || "",
+      });
+    });
+    if (!slides.length) return null;
+
+    var viewport = el("div", { class: "mt-carousel-viewport" });
+    var slideEls = slides.map(function (slide) {
+      // data-caption … 並び順の見出し/altをDOMから直接読めるようにする（画面には出さない）。
+      // 画面表示は .mt-carousel-caption の textContent（現在のスライドだけ）に任せる
+      var wrap = el("div", { class: "mt-carousel-slide", "data-caption": slide.caption }, [slide.node]);
+      viewport.appendChild(wrap);
+      return wrap;
+    });
+    var caption = el("div", { class: "mt-carousel-caption", "aria-live": "polite" });
+    var root = el("div", {
+      class: "mt-carousel",
+      role: "group",
+      "aria-roledescription": "carousel",
+      tabindex: "0",
+    }, [viewport]);
+
+    var current = 0;
+    var dotEls = [];
+    function show(i) {
+      current = ((i % slideEls.length) + slideEls.length) % slideEls.length;
+      slideEls.forEach(function (slideEl, idx) {
+        var hide = idx !== current;
+        // 隠した動画は display:none でも音が鳴り続けるので止める
+        if (hide && !slideEl.hidden) {
+          var playing = slideEl.querySelector("video");
+          if (playing && typeof playing.pause === "function") playing.pause();
+        }
+        slideEl.hidden = hide;
+      });
+      // フォーカスが隠れたスライドの中にあったら外枠へ戻す（キーボード操作が途切れない）
+      if (document.activeElement && document.activeElement !== root && viewport.contains(document.activeElement)
+          && slideEls[current] && !slideEls[current].contains(document.activeElement)) root.focus();
+      caption.textContent = slides[current].caption;
+      dotEls.forEach(function (dotEl, idx) {
+        dotEl.classList.toggle("is-active", idx === current);
+        if (idx === current) dotEl.setAttribute("aria-current", "true"); else dotEl.removeAttribute("aria-current");
+      });
+    }
+
+    // 1枚だけなら矢印・ドットなしの素の枠にする（枚数が増えない限り視覚的ノイズを足さない）
+    if (slides.length > 1) {
+      var prev = el("button", { type: "button", class: "mt-carousel-arrow", "aria-label": "前の手順", text: "‹" });
+      var next = el("button", { type: "button", class: "mt-carousel-arrow", "aria-label": "次の手順", text: "›" });
+      var dots = el("div", { class: "mt-carousel-dots" });
+      slides.forEach(function (_slide, idx) {
+        var dot = el("button", { type: "button", class: "mt-carousel-dot", "aria-label": (idx + 1) + "枚目を表示" });
+        dot.addEventListener("click", function () { show(idx); });
+        dotEls.push(dot);
+        dots.appendChild(dot);
+      });
+      prev.addEventListener("click", function () { show(current - 1); });
+      next.addEventListener("click", function () { show(current + 1); });
+      root.appendChild(el("div", { class: "mt-carousel-nav" }, [prev, dots, next]));
+      // キーボード送り（カルーセルにフォーカスがあるとき）
+      root.addEventListener("keydown", function (e) {
+        // 動画のコントロール上の ←→（ネイティブのシーク）と、ブラウザの戻る系ショートカットは奪わない
+        if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+        if (e.target && e.target.tagName === "VIDEO") return;
+        if (e.key === "ArrowLeft") { e.preventDefault(); show(current - 1); }
+        else if (e.key === "ArrowRight") { e.preventDefault(); show(current + 1); }
+      });
+      // スワイプ（タッチ）。横移動が小さいときは無視する（縦スクロールの誤爆を防ぐ）
+      var touchStartX = null;
+      var touchStartY = null;
+      viewport.addEventListener("touchstart", function (e) {
+        // 動画のシークバーの横ドラッグはスワイプにしない。複数指も対象外
+        var single = e.touches && e.touches.length === 1 && !(e.target && e.target.tagName === "VIDEO");
+        touchStartX = single ? e.touches[0].clientX : null;
+        touchStartY = single ? e.touches[0].clientY : null;
+      }, { passive: true });
+      viewport.addEventListener("touchcancel", function () { touchStartX = null; touchStartY = null; }, { passive: true });
+      viewport.addEventListener("touchend", function (e) {
+        if (touchStartX === null) return;
+        var endX = e.changedTouches && e.changedTouches.length ? e.changedTouches[0].clientX : touchStartX;
+        var endY = e.changedTouches && e.changedTouches.length ? e.changedTouches[0].clientY : touchStartY;
+        var dx = endX - touchStartX;
+        var dy = endY - touchStartY;
+        touchStartX = null;
+        touchStartY = null;
+        if (Math.abs(dx) < 30 || Math.abs(dy) >= Math.abs(dx)) return;
+        if (dx < 0) show(current + 1); else show(current - 1);
+      }, { passive: true });
+    }
+    root.appendChild(caption);
+    show(0);
+    return root;
+  }
   // 未確認（status: draft = AI生成・人間未確認）の印。Gold層の4型（決定事項・用語集・メンバー・ルール）共通で、active・status無しには何も出さない
   function draftBadge(rec) {
     return rec && unconfirmed(rec) ? el("span", { class: "badge draft", text: "AI生成・未確認" }) : null;
@@ -15498,6 +15658,22 @@ ${story_1.splitByNameLinks.toString()}
         build: function (url) {
           return { op: "backlog-target-add", url: url, baseGeneration: targetsGenerationOf(targets) };
         },
+        // **ほかのプロジェクトでも使われているプロジェクトキーの確認（#1354）。** 画面から接続先を足すのはこのフォームだけ
+        //（set-backlog-target を送るフォームは無い）。振り分け表はスペースを持たないので「同じプロジェクトキー」と言う。
+        // 相手のプロジェクト名は出さない（この画面の操作は認証を通れる人なら誰でもできる）
+        duplicateConfirmLines: function (value) {
+          return [
+            "同じプロジェクトキーが、ほかのプロジェクトでも使われています。",
+            "",
+            "このまま追加すると、同じ課題・ドキュメント・Wiki が、このプロジェクトのリポジトリにも取り込まれます。",
+            "",
+            "別のBacklogプロジェクトと取り違えていないか、貼ったURLを確かめてください:",
+            String(value || ""),
+            "",
+            "追加しますか？",
+          ];
+        },
+        duplicateKind: "backlog",
         // 応答の一覧で本物の行が増えるので、フォーム側の控え（「追加済み・反映中」）は出さない
         hooks: targetsHooks,
       }));
@@ -15995,6 +16171,20 @@ ${story_1.splitByNameLinks.toString()}
         // 手順を置いていたが、トークンの発行手順の正本は鍵の欄（SECRET_FORMS.figma の how・note・画像）、
         // 読めないファイルの一手は行の中（DS_GATE_CAP.design）、「何が同期されるか」は上部の説明文が持つ。
         build: function (url, name) { return { op: "add-figma-file", url: url, name: name }; },
+        // 別のプロジェクトでも追加されているファイルの確認（#1354）
+        duplicateConfirmLines: function (value) {
+          return [
+            "このFigmaファイルは、別のプロジェクトでも追加されています。",
+            "",
+            "このまま追加すると、同じファイルのデザインが、このプロジェクトのリポジトリにも取り込まれます。",
+            "",
+            "別のファイルと取り違えていないか、貼ったURLを確かめてください:",
+            String(value || ""),
+            "",
+            "追加しますか？",
+          ];
+        },
+        duplicateKind: "figma",
       }));
       used = true;
     }
@@ -16068,6 +16258,7 @@ ${story_1.splitByNameLinks.toString()}
           "追加しますか？",
         ];
       },
+      duplicateKind: "slack",
       adder: "slack",
     }));
 
@@ -16079,7 +16270,7 @@ ${story_1.splitByNameLinks.toString()}
     // **接続（OAuth）のボタンは無い。** 顧客の Workspace 管理者による Admin install が
     // 承認そのもので、画面に押す先が無い（Slack の接続ボタンを写経しないこと——
     // 押しても何も起きないボタンが顧客の画面に出る）。
-    // **追加時の確認モーダルも出さない**（#167 で「追加のたびの確認」は廃止済み。
+    // **追加のたびの確認モーダルは出さない**（#167 で廃止済み。別のプロジェクトと重なったときの確認だけ出る・#1354。
     // 「追加＝Gold 昇格の対象」という重さは、モーダル上部の説明文が 1 回だけ言う）。
     // Google Chat アプリの表示名は GCHAT_APP_NAME（Marketplace 公開名・#387）。
     box.appendChild(addForm({
@@ -16109,6 +16300,20 @@ ${story_1.splitByNameLinks.toString()}
         // 読めなければ足した行の中が理由に合った一手を出す（githubRowHelpParts）。
         // 「毎晩の記録に入る・決定と用語の材料にはしない」の説明は、モーダル上部の説明文が 1 回だけ持つ。
         build: function (repo, name) { return { op: "add-github-source", repo: repo, name: name }; },
+        // 別のプロジェクトでも追加されているリポジトリの確認（#1354）
+        duplicateConfirmLines: function (value) {
+          return [
+            "このリポジトリは、別のプロジェクトでも追加されています。",
+            "",
+            "このまま追加すると、同じリポジトリの内容が、このプロジェクトの毎晩の記録にも入ります。",
+            "",
+            "別のリポジトリと取り違えていないか、入れた値を確かめてください:",
+            String(value || ""),
+            "",
+            "追加しますか？",
+          ];
+        },
+        duplicateKind: "github",
         adder: "github",
       }));
     }
@@ -16239,6 +16444,12 @@ ${story_1.splitByNameLinks.toString()}
    * 失敗（エラー応答・通信失敗・何も変わらなかった）では仮置きを**巻き戻して**理由を出す。
    * 仮置きを作れない操作（切り出せない入力・仮置きの対象でない op）は、従来どおり待ち表示を出して応答を待つ。
    */
+  /*
+   * 重なりを確認すれば覆せる種別（2026-08-20 Slack・#1354 で 4 種別。Drive・Google Chat は中央のアカウントで読むので含めない）。綴りと並びは intake の
+   * CONFIRMABLE_DUPLICATE_KINDS（infra/lambda/intake/logic.mjs）と完全一致させる（infra/test/duplicate-verdict.test.mjs が写しの一致を見る）。
+   * サーバの印がこの許可リストに無い種別なら、確認は出さない（truthy で見ない）
+   */
+  var CONFIRMABLE_KINDS = ["slack", "figma", "backlog", "github"];
   async function sendConfig(payload, msg, btn, onDone, hooks) {
     var intake = SITE.intake;
     if (!intake) return;
@@ -16294,11 +16505,16 @@ ${story_1.splitByNameLinks.toString()}
         // **サーバを切り戻したとき**と**デプロイ中の版ズレ**。どちらも確認済みの再送だけが
         // 断られる状態で、そこで出し続けると「はい」を押し続けることになる。
         // 配る順番はサーバ→画面（これは順序の話とは別に必要）。
+        //
+        // **種別は許可リストの完全一致（#1354）**、さらに**そのフォームの種別と一致**するときだけ出す
+        // （Drive の追加フォームに Slack の印が返っても、Drive の確認文で覆さない）。
         var canConfirm =
           res.status === 409 &&
           j.confirmable === "duplicate" &&
-          j.confirmableKind === "slack" &&
+          typeof j.confirmableKind === "string" &&
+          CONFIRMABLE_KINDS.indexOf(j.confirmableKind) >= 0 &&
           hooks &&
+          j.confirmableKind === hooks.duplicateKind &&
           typeof hooks.onDuplicate === "function" &&
           payload.confirmDuplicate !== true;
         if (canConfirm) {
@@ -16747,9 +16963,9 @@ ${story_1.splitByNameLinks.toString()}
         );
       }, (function () {
         // **既存の hooks（接続先の一覧が持つ onTargets）と、重複の確認を1つにまとめる。**
-        // Slack の追加フォームは onTargets を持たないが、重複の確認は要る。
-        // 逆に接続先の一覧（Backlog）は onTargets を持つが確認は要らない——
-        // 共通に足すと、あちらの「他の人が先に変えていた」の判定と混ざる。
+        // Slack などの追加フォームは onTargets を持たないが、重複の確認は要る。
+        // 接続先の一覧（Backlog）は onTargets も重複の確認も持つ（#1354）。確認は印（confirmable: "duplicate"）の
+        // 完全一致でしか出ないので、あちらの「他の人が先に変えていた」（世代のずれ）の判定とは混ざらない。
         var h = opts.hooks ? opts.hooks() : null;
         // **送信した瞬間に入力欄を空にし（楽観更新・#968 E）、断られたら元の値へ戻す**（打ち直させない）
         var sentMain = "";
@@ -16783,6 +16999,8 @@ ${story_1.splitByNameLinks.toString()}
             returnTo: btn,
           });
         };
+        // このフォームの種別。サーバの印の種別と一致したときだけ確認を出す（sendConfig の canConfirm）
+        h.duplicateKind = opts.duplicateKind;
         return h;
       })());
     });
@@ -18022,27 +18240,30 @@ ${story_1.splitByNameLinks.toString()}
       // 現場で切り分けに時間がかかる（実際に踏んだ）。入力欄の隣に書いておく。
       note: "発行したアカウントを、対象の Figma ファイルに閲覧者として招待しておいてください（招待が無いとトークンが正しくても読めません）。"
         + "発行するのは、対象ファイルのあるチームで Dev または Full の席を持つ方にしてください。閲覧席（View/Collab）のトークンは取得回数が月 20 回までで、夜間同期が数日で止まります。",
-      // **手順の画像3枚（#547）。** Google Meet・Google Chat と同じ guideShot を通す
-      // （幅の上限・クリックで原寸に戻る振る舞いを1か所に揃える）。見出しは画像の並び順
-      // （1〜3枚目）、画像の中の丸数字（①〜⑧）は1枚の中の細かい手順——役割が別なので、
-      // 見出し側に丸数字を混ぜない
-      shots: [
-        {
-          src: FIGMA_SHOT_STEP1, width: "1000", height: "1114",
-          heading: "1. 左上の名前 → Settings",
-          alt: "Figma左上の自分の名前を押すとメニューが開き、その中のSettingsが赤枠で示されている。",
-        },
-        {
-          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_STEP3, width: "1100", height: "1428",
-          heading: "3. 名前・期限・スコープを決めて発行する",
-          alt: "Generate new tokenダイアログ。Token name欄・Expiration（90日）・file_comments:readとfile_content:readのチェックボックス・Generate tokenボタンが、それぞれ赤枠で示されている。",
-        },
-      ],
+      // **手順の画像3枚（#547）。** buildGuideCarousel（#1353）を通す1枚ずつ送りの枠に乗せる。
+      // 見出しは画像の並び順（1〜3枚目）、画像の中の丸数字（①〜⑧）は1枚の中の細かい手順
+      // ——役割が別なので、見出し側に丸数字を混ぜない。
+      // 動画は無し（guide.video を省略）。将来動画を足すときは、この guide にそのまま
+      // video: { alt } を足すだけで済む（SITE.guideAssets.figma.video が注入された日から配信開始）
+      guide: {
+        shots: [
+          {
+            src: FIGMA_SHOT_STEP1, width: "1000", height: "1114",
+            heading: "1. 左上の名前 → Settings",
+            alt: "Figma左上の自分の名前を押すとメニューが開き、その中のSettingsが赤枠で示されている。",
+          },
+          {
+            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_STEP3, width: "1100", height: "1428",
+            heading: "3. 名前・期限・スコープを決めて発行する",
+            alt: "Generate new tokenダイアログ。Token name欄・Expiration（90日）・file_comments:readとfile_content:readのチェックボックス・Generate tokenボタンが、それぞれ赤枠で示されている。",
+          },
+        ],
+      },
     },
     "backlog": {
       icon: "📋",
@@ -18065,6 +18286,42 @@ ${story_1.splitByNameLinks.toString()}
           "担当が変わったら、新しい担当者が同じ手順で入れ直してください" +
           "（前の担当者のアカウントが無効になると同期が止まります）。",
       },
+      // **手順の動画＋画像（#1353）。** 動画の実 URL は guide に置かない（SITE.guideAssets.backlog.video・
+      // build.ts の GUIDE_VIDEO_SOURCES が注入する）。動画が無い配信先では画像5枚だけで成立する。
+      // 画像の並びは動画の流れ（URL をコピー → キーを発行 → 貼る → つながる）に揃える。
+      guide: {
+        video: {
+          alt: "Backlog を Cortex につなぐ手順の動画（約1分30秒）。Backlog の URL のコピー、API キーの発行、操作タブへの貼り付け、接続OK の確認までを画面で見せます。",
+          poster: BACKLOG_SHOT_POSTER,
+        },
+        shots: [
+          {
+            src: BACKLOG_SHOT_STEP1, width: "1481", height: "993",
+            heading: "1. Backlog のアドレスバーから URL をコピー（操作タブの「接続先を追加」に貼る）",
+            alt: "Backlogのプロジェクトホーム。ブラウザのアドレスバーに cm1.backlog.jp/projects/PJ_CORTEX の形のURLが出ている。",
+          },
+          {
+            src: BACKLOG_SHOT_STEP2, width: "1536", height: "766",
+            heading: "2. 個人設定 → API のメモに Cortex と入れて登録",
+            alt: "Backlogの個人設定のAPI画面。新しいAPIキーを発行する欄のメモに Cortex と入力されていて、登録ボタンを押す前の状態。",
+          },
+          {
+            src: BACKLOG_SHOT_STEP3, width: "1536", height: "766",
+            heading: "3. 発行された API キーをコピー",
+            alt: "登録されたAPIキーの一覧に、メモが Cortex の行が増えている。キーは先頭と末尾の文字だけ見え、行のコピーボタンでコピーできる。",
+          },
+          {
+            src: BACKLOG_SHOT_STEP4, width: "1456", height: "819",
+            heading: "4. 操作タブの Backlog の入力欄に貼って保存",
+            alt: "Cortexの操作タブのBacklogのモーダル。API キーを入れる欄（表示は「トークンを貼り付け」）にカーソルがあり、その下に保存ボタンがある。",
+          },
+          {
+            src: BACKLOG_SHOT_STEP5, width: "1568", height: "773",
+            heading: "5. 「接続OK」と出れば完了",
+            alt: "Backlogのモーダルの接続先の行に、緑の「接続OK」の表示が出ている。登録済みと保存しましたの表示も出ている。",
+          },
+        ],
+      },
     },
   };
 
@@ -18283,9 +18540,15 @@ ${story_1.splitByNameLinks.toString()}
     // 発行のしかたを探している人がここを開く手掛かりを持てない（rt カードと同じ流儀）
     var guidanceBox = el("details", { class: "sec-fold" }, [el("summary", { text: "発行のしかた" })]);
     for (var gi = 0; gi < guidance.length; gi++) guidanceBox.appendChild(guidance[gi]);
-    // **手順の画像（#547）。** 文章（guidance）の下に、見出し→画像の対を並びの順に足す。
-    // shots を持たない種別（Backlog）ではこの節は素通りする
-    if (meta.shots) {
+    // **手順の動画＋画像（#547・#1353）。** 文章（guidance）の下に足す。
+    // meta.guide を持つ種別（Figma）はカルーセル1つに乗せる。meta.guide も meta.shots も
+    // 持たない種別（Backlog）ではこの節は素通りする
+    if (meta.guide) {
+      var carousel = buildGuideCarousel(kind, meta.guide);
+      if (carousel) guidanceBox.appendChild(carousel);
+    } else if (meta.shots) {
+      // 後方互換（旧形）。今のところ参照するエントリは無い——将来 Google Chat/Meet を
+      // この口に載せ替えるまでの踏み板として残す
       for (var si = 0; si < meta.shots.length; si++) {
         var shot = meta.shots[si];
         guidanceBox.appendChild(el("p", { class: "sec-how", text: shot.heading }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takagaki/cortex-decisions-viewer",
-  "version": "0.12.178",
+  "version": "0.12.181",
   "description": "Cortexの意思決定記録（Decisions/*.md）を静的サイトにビルドして閲覧する。各レコードに「Edit on GitHub」リンクを付与する。",
   "license": "UNLICENSED",
   "private": false,
@@ -12,7 +12,10 @@
     "cortex-decisions-viewer": "dist/cli.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "assets",
+    "!assets/guides/backlog-poster.jpg",
+    "!assets/guides/backlog-shots"
   ],
   "engines": {
     "node": ">=18"