npm - @takagaki/cortex-decisions-viewer - Versions diffs - 0.12.24 → 0.12.25 - Mend

@takagaki/cortex-decisions-viewer 0.12.24 → 0.12.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/render.js +215 -96
package/package.json +1 -1

package/dist/render.js CHANGED Viewed

@@ -86,6 +86,7 @@ ${styleTag}
 <body>
 <header class="site-header">
   <div class="header-inner">
+    <span class="site-icon-slot" id="site-icon-slot"></span>
     <a class="site-title" href="?" id="home-link">${safeTitle}</a>
     ${askBtn}
     ${githubBtn}
@@ -2261,6 +2262,71 @@ a:hover { text-decoration: underline; }
 }
 .site-title { font-size: 18px; font-weight: 700; color: var(--text); }
 .site-title:hover { text-decoration: none; color: var(--accent); }
+/* ---- 案件アイコン（#348）----
+   **ヘッダーの案件名の左に丸を置く。** ヘッダーは全タブ共通なので、
+   どのタブを開いていても同じ場所に居る。0.12.24 で Home 本文に置いた
+   「大きな枠＋その下のボタン」はオーナー実機で却下された（本文の先頭が重くなった）。
+   見た目はポータルの一覧カード（portal の ProjectIcon.tsx）に寄せる:
+   丸・cover・未設定は薄い青地に案件名の頭文字1字。同じ画像が2つの画面で
+   別の切れ方をすると「設定したのと違う絵が出ている」と読まれる */
+.site-icon-slot { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
+.site-icon {
+  position: relative;
+  width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
+  display: flex; align-items: center; justify-content: center;
+  padding: 0; border: 0; background: var(--accent-weak); color: var(--accent);
+  font-size: 13px; font-weight: 600; line-height: 1;
+}
+.site-icon-initial {
+  display: flex; align-items: center; justify-content: center;
+  width: 100%; height: 100%;
+}
+/* **押せる丸の頭文字だけ薄くして、上に「＋」を重ねる。**
+   頭文字だけだと「設定済みの何か」に見え、置ける場所だと分からない
+   ——薄い字の上の「＋」で「ここに画像を置ける」を一目にする。
+   受け口が無い案件（span.site-icon）は置けないので、薄くも「＋」も付けない */
+button.site-icon .site-icon-initial { opacity: .45; }
+.site-icon-plus {
+  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); font-size: 16px; font-weight: 700; line-height: 1;
+}
+/* 設定済みの丸は画像だけ。**押せることはホバーで出す**——常時ラベルを重ねると
+   選んだロゴが読めなくなる（アイコンを設定した意味が薄れる） */
+.site-icon-hover {
+  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(0, 0, 0, 0.55); color: #fff;
+  font-size: 11px; font-weight: 600; line-height: 1;
+  opacity: 0; transition: opacity 0.12s ease;
+}
+button.site-icon:hover .site-icon-hover,
+button.site-icon[aria-expanded="true"] .site-icon-hover { opacity: 1; }
+/* **押せることはホバーで示す。** 受け口が無い案件の丸は span なので、この効果は付かない
+   ——押せない丸に指差しカーソルやリングを出すのが、画面の嘘のうちで一番たちが悪い */
+button.site-icon { cursor: pointer; }
+button.site-icon:hover, button.site-icon[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--accent); }
+.site-icon-img { width: 100%; height: 100%; object-fit: cover; display: block; }
+/* 丸を押したときだけ出るメニュー。スロットを基準に浮かせる（ヘッダーは sticky なので
+   ページを送っても位置がずれない） */
+.site-icon-menu {
+  position: absolute; top: 36px; left: 0; z-index: 30; min-width: 220px;
+  background: #fff; border: 1px solid var(--border); border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px;
+  display: flex; flex-direction: column; gap: 6px;
+}
+.site-icon-menu[hidden] { display: none; }
+.site-icon-menu button {
+  text-align: left; padding: 8px 10px; border-radius: 8px;
+  border: 1px solid var(--border); background: #fff; font-size: 13px; cursor: pointer;
+}
+.site-icon-menu button:hover { background: #f3f6fb; }
+.site-icon-menu button:disabled { opacity: .6; cursor: default; }
+/* 結果の行はメニューの中に置く（丸の横に出すとヘッダーの高さに押し込まれて読めない） */
+.site-icon-status { font-size: 12.5px; padding: 2px 4px; }
+.site-icon-status:empty { display: none; }
+.site-icon-status-error { color: #b91c1c; }
 .record-count { color: var(--muted); font-size: 13px; }
 .ask-ai-btn {
   margin-left: auto; flex: 0 0 auto;
@@ -2495,30 +2561,6 @@ a:hover { text-decoration: underline; }
   padding-bottom: 6px; border-bottom: 1px solid var(--border);
 }
 .home-grounding > .home-grounding-title:first-child { margin-top: 0; }
-/* ---- 案件アイコン（#348）----
-   Home のタイトルの左に丸い枠を置く。ポータルの一覧カード（ProjectIcon.tsx）と
-   同じ「丸・cover」にする——同じ画像が2つの画面で別の切れ方をすると、
-   「設定したのと違う絵が出ている」と読まれる */
-.home-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
-.home-title-wrap { flex: 1 1 320px; min-width: 0; }
-.project-icon { flex: 0 0 auto; }
-/* 未設定は破線（置き場が空いていることを見せる）・設定済みは実線 */
-.project-icon-frame {
-  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
-  border: 2px dashed var(--border); background: #f6f7f9;
-  display: flex; align-items: center; justify-content: center;
-  padding: 0; cursor: pointer;
-}
-.project-icon-frame.project-icon-filled { border-style: solid; }
-/* 受け口が無い案件では押せないので、押せる見た目にしない */
-.project-icon-frame:not(button) { cursor: default; }
-.project-icon-img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.project-icon-empty { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.3; }
-.project-icon-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
-/* 結果の行はタイトルの下へ回す（枠の横に入れると72pxの高さに押し込まれる） */
-.project-icon-status { flex-basis: 100%; font-size: 13px; }
-.project-icon-status:empty { display: none; }
-.project-icon-status-error { color: #b91c1c; }
 /* ---- レコード詳細の「AIによる最近の変更」（リポジトリの git 履歴 由来）----
    カードは詳細ページの提案（.proposals）と同系色にする——どちらも
    「AIがやったこと・言っていることを読む」もので種類が同じ。
@@ -4329,10 +4371,14 @@ ${deriveCapTile.toString()}
   // ---------- 案件アイコン（#348） ----------
   //
   // ポータルの案件一覧はカードにアイコンを出す。置き場はこの案件のリポジトリの
-  // Cortex/icon.<ext> で、**設定する口はここ（Home）にしかない**——ポータル側に
+  // Cortex/icon.<ext> で、**設定する口はこのビューアにしかない**——ポータル側に
   // 置くと「誰の案件か」の判定を先に作らねばならず、案件を知っている人が
   // その場で直せる形にならない。
   //
+  // **出す場所はヘッダーの案件名の左**（0.12.24 の Home 本文から移した・#348）。
+  // ヘッダーは全タブ共通なので、どのタブを開いていても同じ場所に居る。
+  // 押せる口はメニューの中に畳む——常時見えるボタンは、たまにしか使わない操作には重い。
+  //
   // 保存はビルドを待たずに画面へ反映する（mirror）。恒久化は次のビルドで
   // site-data ごと焼き直されるので、mirror はこのタブが開いているあいだだけ。
   // 上限はサーバ側（logic.mjs の PROJECT_ICON_MAX_BYTES）と同じ値。画面の門は
@@ -4373,83 +4419,158 @@ ${deriveCapTile.toString()}
     return req.then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); });
   }
+  // ヘッダーの丸のメニューが開いているか。**DOM ではなくこの変数が正本。**
+  // 保存・解除のあとに丸を描き直すので、開閉を DOM だけに持たせると描き直しで畳まれ、
+  // 「✓ 保存しました」と保存先のリンクが一度も見えないまま消える
+  var siteIconMenuOpen = false;
+  // document に付ける開閉のリスナーは1組だけ。描き直しのたびに足すと Escape 1回で
+  // 同じ処理が何度も走る（見た目は同じなので気づけない）
+  var siteIconGlobalBound = false;
+  /**
+   * 案件名の頭文字1字。**ポータルの ProjectIcon.tsx（initialOf）と同じ取り方**にする
+   * ——同じ案件がポータルとビューアで違う字になると「別の案件を見ている」と読まれる。
+   *
+   * ⚠ title[0] にしない。サロゲートペア（絵文字・一部の漢字）が半分に割れて化ける
+   */
+  function siteInitial() {
+    return Array.from(String(SITE.title || "").trim())[0] || "?";
+  }
+  /** 丸の中の頭文字（薄くするかどうかは CSS が丸の種類で決める） */
+  function siteIconInitialEl() {
+    return el("span", { class: "site-icon-initial", text: siteInitial() });
+  }
+  /** メニューの開閉。描き直さずに hidden と aria-expanded だけ動かす */
+  function setSiteIconMenu(open) {
+    siteIconMenuOpen = !!open;
+    var slot = document.getElementById("site-icon-slot");
+    if (!slot) return;
+    var menu = slot.querySelector(".site-icon-menu");
+    if (menu) {
+      if (siteIconMenuOpen) menu.removeAttribute("hidden");
+      else menu.setAttribute("hidden", "");
+    }
+    var circle = slot.querySelector("button.site-icon");
+    if (circle) circle.setAttribute("aria-expanded", siteIconMenuOpen ? "true" : "false");
+  }
   /**
-   * アイコンの枠（出さないときは null）。
+   * ヘッダーの案件名の左の丸を描く（#site-icon-slot の中身を作り直す）。
    *
-   * **押せない枠は出さない。** 受け口（intake）が無く画像も無い案件では、枠ごと出さない
-   *（「＋ 画像を選ぶ」を出して押せないのが一番悪い）。画像だけある案件では画像を出し、
-   * 押せる導線は付けない。
+   * **丸は常に出す**（未設定なら頭文字）——ポータルの一覧と同じ顔をここでも見せる。
+   * **押せる形にするのは受け口（intake）がある案件だけ。** 無ければ span にして
+   * メニューもファイル選択も付けない——押して何も起きない口は「壊れている」と読まれる。
    *
-   * @param status 結果を書く行（枠を描き直しても残る・呼び出し側が持つ）
+   * @param status 前の描画から引き継ぐ結果の行（省略時は新しく作る）
    */
-  function renderProjectIcon(status) {
+  function renderSiteIcon(status) {
+    var slot = document.getElementById("site-icon-slot");
+    if (!slot) return;
     var intake = SITE.intake;
     var cur = projectIconCurrent();
-    if (!intake && !cur) return null;
+    slot.textContent = "";
-    var box = el("div", { class: "project-icon", id: "project-icon" });
-    function setStatus(msg, isError) {
-      status.className = "project-icon-status" + (isError ? " project-icon-status-error" : "");
-      status.textContent = msg || "";
-    }
-    // 枠だけを差し替える。status は外にあるので、書いた結果は描き直しでも消えない
-    function redraw() {
-      var next = renderProjectIcon(status);
-      if (next && box.parentNode) box.parentNode.replaceChild(next, box);
-      return next;
-    }
-    var ui = { status: status, setStatus: setStatus, redraw: redraw, input: null, buttons: [] };
-    ui.disable = function (flag) {
-      ui.buttons.forEach(function (b) { b.disabled = !!flag; });
-    };
-    // **受け口が無ければ button にしない。** 押せる形（フォーカスが当たる・指差しの
-    // カーソルが出る）で何も起きないのが、画面の嘘のうちで一番たちが悪い
-    var frame = el(intake ? "button" : "div", {
-      class: "project-icon-frame" + (cur ? " project-icon-filled" : ""),
-      "aria-label": "案件アイコン",
-    });
-    if (intake) frame.setAttribute("type", "button");
+    var circle = el(intake ? "button" : "span", { class: "site-icon" });
+    if (intake) {
+      circle.setAttribute("type", "button");
+      circle.setAttribute("aria-haspopup", "menu");
+      circle.setAttribute("aria-expanded", siteIconMenuOpen ? "true" : "false");
+      // 未設定は「＋」が見えているので、説明は「変更」ではなく置ける話にしない——
+      // 読み上げと tooltip は、いまの状態でできることをそのまま言う
+      var label = cur ? "案件アイコンを変更／外す" : "案件アイコンを設定";
+      circle.setAttribute("title", label);
+      circle.setAttribute("aria-label", label);
+    } else {
+      // すぐ隣に案件名が文字で出ているので、読み上げで名前を2回言わせない
+      circle.setAttribute("aria-hidden", "true");
+    }
     if (cur) {
-      var img = el("img", { class: "project-icon-img", src: cur.src, alt: "案件アイコン" });
+      // **設定済みは画像だけ。** 頭文字も「＋」も重ねない（選んだロゴが読めなくなる）
+      var img = el("img", { class: "site-icon-img", src: cur.src, alt: "" });
       // **onerror 属性で書かない（CSP でインラインハンドラは動かない）。**
-      // blob: が配信先の img-src で拒まれることがあるので、そのときは文字に倒す
+      // blob: が配信先の img-src で拒まれることがあるので、そのときは頭文字に倒す
       img.addEventListener("error", function () {
-        if (!img.parentNode) return;
-        img.parentNode.replaceChild(el("span", { class: "project-icon-empty", text: "保存済み" }), img);
+        if (img.parentNode) img.parentNode.replaceChild(siteIconInitialEl(), img);
       });
-      frame.appendChild(img);
+      circle.appendChild(img);
+      // 押せる案件だけ、ホバーで「変更」と出す（見た目は CSS の opacity で切り替える）
+      if (intake) circle.appendChild(el("span", { class: "site-icon-hover", "aria-hidden": "true", text: "変更" }));
     } else {
-      frame.appendChild(el("span", { class: "project-icon-empty", text: intake ? "＋ 画像を選ぶ" : "未設定" }));
+      circle.appendChild(siteIconInitialEl());
+      // **未設定の押せる丸には「＋」を重ねる。** 薄い頭文字だけだと
+      // 「設定済みの何か」に見えて、置ける場所だと分からない
+      if (intake) circle.appendChild(el("span", { class: "site-icon-plus", "aria-hidden": "true", text: "＋" }));
     }
-    box.appendChild(frame);
+    slot.appendChild(circle);
+    if (!intake) return;
-    if (intake) {
-      var input = el("input", { type: "file", accept: "image/png,image/jpeg,image/webp", hidden: "" });
-      ui.input = input;
-      input.addEventListener("change", function () {
-        var f = input.files && input.files[0];
-        // **読んだらすぐ value を戻す**（成功時だけ戻す形だと、形式で断られた直後に
-        // 同じファイルを選び直しても change が飛ばず、直す経路がここで死ぬ）
-        try { input.value = ""; } catch (e) {}
-        if (f) setProjectIcon(f, ui);
+    circle.addEventListener("click", function () { setSiteIconMenu(!siteIconMenuOpen); });
+    // **status の要素は描き直しをまたいで持ち回る。** 描き直したあとに
+    // 「✓ 保存しました」と保存先のリンクを足すので、入れ替わると書いた先が画面から外れる
+    var st = status || el("div", { class: "site-icon-status", "aria-live": "polite" });
+    var menu = el("div", { class: "site-icon-menu", role: "menu" });
+    if (!siteIconMenuOpen) menu.setAttribute("hidden", "");
+    function setStatus(msg, isError) {
+      st.className = "site-icon-status" + (isError ? " site-icon-status-error" : "");
+      st.textContent = msg || "";
+    }
+    var ui = {
+      status: st,
+      setStatus: setStatus,
+      // 描き直すと押していたボタンが DOM から消えてフォーカスが body に落ちるので、
+      // 丸へ戻す（キーボードの人が位置を失わない。Escape は document 側なので効く）
+      redraw: function () {
+        renderSiteIcon(st);
+        var s = document.getElementById("site-icon-slot");
+        var c = s && s.querySelector("button.site-icon");
+        if (c && typeof c.focus === "function") c.focus();
+      },
+      input: null,
+      buttons: [],
+    };
+    ui.disable = function (flag) { ui.buttons.forEach(function (b) { b.disabled = !!flag; }); };
+    var input = el("input", { type: "file", accept: "image/png,image/jpeg,image/webp", hidden: "" });
+    ui.input = input;
+    input.addEventListener("change", function () {
+      var f = input.files && input.files[0];
+      // **読んだらすぐ value を戻す**（成功時だけ戻す形だと、形式で断られた直後に
+      // 同じファイルを選び直しても change が飛ばず、直す経路がここで死ぬ）
+      try { input.value = ""; } catch (e) {}
+      if (f) setProjectIcon(f, ui);
+    });
+    var choose = el("button", { class: "site-icon-choose", type: "button", role: "menuitem", text: cur ? "画像を変える" : "画像を選ぶ" });
+    choose.addEventListener("click", function () { input.click(); });
+    ui.buttons.push(choose);
+    menu.appendChild(choose);
+    if (cur) {
+      var remove = el("button", { class: "site-icon-remove", type: "button", role: "menuitem", text: "画像を外す" });
+      remove.addEventListener("click", function () { removeProjectIcon(ui); });
+      ui.buttons.push(remove);
+      menu.appendChild(remove);
+    }
+    menu.appendChild(input);
+    menu.appendChild(st);
+    slot.appendChild(menu);
+    if (!siteIconGlobalBound) {
+      siteIconGlobalBound = true;
+      // 外を押したら閉じる。**スロットの中では閉じない**——「画像を選ぶ」を押した
+      // 瞬間に畳まれると、選び終えたときに結果を書く場所が無い
+      document.addEventListener("click", function (ev) {
+        if (!siteIconMenuOpen) return;
+        var s = document.getElementById("site-icon-slot");
+        if (s && s.contains(ev.target)) return;
+        setSiteIconMenu(false);
+      });
+      document.addEventListener("keydown", function (ev) {
+        if (siteIconMenuOpen && (ev.key === "Escape" || ev.key === "Esc")) setSiteIconMenu(false);
       });
-      var choose = el("button", { class: "project-icon-choose", type: "button", text: cur ? "画像を変える" : "画像を選ぶ" });
-      choose.addEventListener("click", function () { input.click(); });
-      // 枠を押すのも「選ぶ」と同じ（丸を押したくなるので、押せる場所を分けない）
-      frame.addEventListener("click", function () { input.click(); });
-      ui.buttons.push(choose, frame);
-      var actions = el("div", { class: "project-icon-actions" }, [choose]);
-      if (cur) {
-        var remove = el("button", { class: "project-icon-remove", type: "button", text: "画像を外す" });
-        remove.addEventListener("click", function () { removeProjectIcon(ui); });
-        ui.buttons.push(remove);
-        actions.appendChild(remove);
-      }
-      actions.appendChild(input);
-      box.appendChild(actions);
     }
-    return box;
   }
   /** 保存先（GitHub）の1行。submitIntake の modal-paths と同じ組み立て */
@@ -4552,18 +4673,12 @@ ${deriveCapTile.toString()}
         text: "最終更新: " + SITE.homeUpdatedAt,
       }));
     }
-    var titleWrap = el("div", { class: "home-title-wrap" }, [ titleEl ]);
+    var titleWrap = el("div", {}, [ titleEl ]);
     var ai = h.fm ? adoptionInfo(h.fm.adoption) : null;
     if (ai) titleWrap.appendChild(el("span", { class: "chip adoption-" + String(h.fm.adoption), text: ai.label }));
-    // 案件アイコン（#348）はタイトルの左。**枠と結果の行は同じ flex 行に置く**
-    // ——結果を枠の横に入れると 72px の高さに押し込まれて読めない
-    var homeHead = el("div", { class: "home-head" });
-    var iconStatus = el("div", { class: "project-icon-status", "aria-live": "polite" });
-    var iconBox = renderProjectIcon(iconStatus);
-    if (iconBox) homeHead.appendChild(iconBox);
-    homeHead.appendChild(titleWrap);
-    if (iconBox) homeHead.appendChild(iconStatus);
-    head.appendChild(homeHead);
+    // 案件アイコン（#348）はここには置かない。**ヘッダーの案件名の左**にある
+    // （renderSiteIcon）——全タブから同じ場所で触れる形にした
+    head.appendChild(titleWrap);
     var homeEditRow = el("div", { class: "detail-actions-row" }, [
       el("a", { class: "ai-edit-btn", href: codeUrl(HOME_EDIT_PROMPT), target: "_blank", rel: "noopener", text: "AIで編集" }),
     ]);
@@ -14367,6 +14482,10 @@ ${deriveCapTile.toString()}
   }
   window.addEventListener("popstate", route);
+  // ヘッダーの案件アイコン（#348）は #app の外なので、**起動時に1回だけ描く**。
+  // route() はタブを替えるたびに走るが、ヘッダーは描き替えない——描き直すと
+  // 保存直後の mirror とメニューの開閉が、タブを移るたびに畳まれる
+  renderSiteIcon();
   route();
   /**
    * 接続状況の先読み（#264）。**開いたタブに関係なく、起動時に1回だけ取りに行く。**

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@takagaki/cortex-decisions-viewer",
-  "version": "0.12.24",
+  "version": "0.12.25",
   "description": "Cortexの意思決定記録（Decisions/*.md）を静的サイトにビルドして閲覧する。各レコードに「Edit on GitHub」リンクを付与する。",
   "license": "UNLICENSED",
   "private": false,