@youtyan/code-viewer 0.5.4 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youtyan/code-viewer",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "Local browser-based code and git diff viewer",
   "type": "module",
   "bin": {

package/web/app.js

@@ -9637,14 +9637,10 @@ ${frontmatter.yaml}
       calculatingDiff: "Computing diff…",
       diffError: "Failed to compute diff",
       noChanges: "No changes detected.",
-      before: "Before",
       loading: "Loading…",
       loadError: "Failed to load",
       saveNote: "Save",
       noteInputPlaceholder: "Enter a note",
-      inserted: "Added",
-      updated: "Updated",
-      deleted: "Deleted",
       tableCount: (n2) => `${n2} tables`,
       rowCount: (n2) => ` (${n2})`,
       listTitle: (n2) => `Snapshots (${n2})`,
@@ -9926,14 +9922,10 @@ ${frontmatter.yaml}
       calculatingDiff: "差分を計算中...",
       diffError: "差分の計算に失敗しました",
       noChanges: "変更は検出されませんでした。",
-      before: "更新前",
       loading: "読み込み中...",
       loadError: "読み込みに失敗しました",
       saveNote: "保存",
       noteInputPlaceholder: "メモを入力",
-      inserted: "追加",
-      updated: "更新",
-      deleted: "削除",
       tableCount: (n2) => `${n2}テーブル`,
       rowCount: (n2) => ` (${n2}件)`,
       listTitle: (n2) => `スナップショット (${n2}件)`,
@@ -14551,10 +14543,8 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
     const getJson = (path) => trackLoad(fetch(path));
     const changeTypeLabel = (type) => {
       if (type === "inserted")
-        return text2().snapshot.inserted;
-      if (type === "updated")
-        return text2().snapshot.updated;
-      return text2().snapshot.deleted;
+        return "+";
+      return "−";
     };
     const snapshotLabel = (s2) => {
       const date = new Date(s2.createdAt).toLocaleString();
@@ -15360,11 +15350,19 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
             allCols.add(k);
       }
       const columns = [...allCols];
-      const table2 = document.createElement("table");
-      table2.className = "db-snap-diff-grid";
+      const colHeaderWrap = document.createElement("div");
+      colHeaderWrap.className = "db-snapshot-diff-col-header-wrap";
+      const colHeaderTable = document.createElement("table");
+      colHeaderTable.className = "db-snap-diff-grid";
+      const colHeaderColgroup = document.createElement("colgroup");
+      for (let i2 = 0;i2 < columns.length + 1; i2++) {
+        colHeaderColgroup.appendChild(document.createElement("col"));
+      }
+      colHeaderTable.appendChild(colHeaderColgroup);
       const thead = document.createElement("thead");
       const headRow = document.createElement("tr");
       const thType = document.createElement("th");
+      thType.className = "snap-diff-type-cell";
       thType.textContent = "";
       headRow.appendChild(thType);
       for (const col of columns) {
@@ -15373,16 +15371,25 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
         headRow.appendChild(th);
       }
       thead.appendChild(headRow);
-      table2.appendChild(thead);
+      colHeaderTable.appendChild(thead);
+      colHeaderWrap.appendChild(colHeaderTable);
+      const rowsViewport = document.createElement("div");
+      rowsViewport.className = "db-snapshot-diff-rows-viewport";
+      const bodyTable = document.createElement("table");
+      bodyTable.className = "db-snap-diff-grid";
+      const bodyColgroup = document.createElement("colgroup");
+      for (let i2 = 0;i2 < columns.length + 1; i2++) {
+        bodyColgroup.appendChild(document.createElement("col"));
+      }
+      bodyTable.appendChild(bodyColgroup);
       const tbody = document.createElement("tbody");
       for (const row of rows) {
         if (row.changeType === "updated" && row.beforeValues && row.afterValues) {
           const trBefore = document.createElement("tr");
-          trBefore.className = "snap-diff-del";
+          trBefore.className = "snap-diff-del snap-diff-record-start";
           const tdTypeBefore = document.createElement("td");
           tdTypeBefore.className = "snap-diff-type-cell";
-          tdTypeBefore.textContent = text2().snapshot.before;
-          tdTypeBefore.rowSpan = 2;
+          tdTypeBefore.textContent = "−";
           trBefore.appendChild(tdTypeBefore);
           for (const col of columns) {
             const td = document.createElement("td");
@@ -15395,7 +15402,11 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           }
           tbody.appendChild(trBefore);
           const trAfter = document.createElement("tr");
-          trAfter.className = "snap-diff-add";
+          trAfter.className = "snap-diff-add snap-diff-record-end";
+          const tdTypeAfter = document.createElement("td");
+          tdTypeAfter.className = "snap-diff-type-cell";
+          tdTypeAfter.textContent = "+";
+          trAfter.appendChild(tdTypeAfter);
           for (const col of columns) {
             const td = document.createElement("td");
             const bs = row.beforeValues[col] == null ? "NULL" : String(row.beforeValues[col]);
@@ -15408,7 +15419,8 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           tbody.appendChild(trAfter);
         } else {
           const tr = document.createElement("tr");
-          tr.className = row.changeType === "inserted" ? "snap-diff-add" : "snap-diff-del";
+          const sideClass = row.changeType === "inserted" ? "snap-diff-add" : "snap-diff-del";
+          tr.className = `${sideClass} snap-diff-record-start snap-diff-record-end`;
           const tdType = document.createElement("td");
           tdType.className = "snap-diff-type-cell";
           tdType.textContent = changeTypeLabel(row.changeType);
@@ -15416,6 +15428,7 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           const values = row.changeType === "inserted" ? row.afterValues : row.beforeValues;
           for (const col of columns) {
             const td = document.createElement("td");
+            td.classList.add("snap-diff-changed-cell");
             const v = values?.[col];
             td.textContent = v == null ? "NULL" : String(v);
             tr.appendChild(td);
@@ -15423,8 +15436,32 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
           tbody.appendChild(tr);
         }
       }
-      table2.appendChild(tbody);
-      container.appendChild(table2);
+      bodyTable.appendChild(tbody);
+      rowsViewport.appendChild(bodyTable);
+      container.append(colHeaderWrap, rowsViewport);
+      rowsViewport.addEventListener("scroll", () => {
+        colHeaderWrap.scrollLeft = rowsViewport.scrollLeft;
+      });
+      const syncColumnWidths = () => {
+        if (disposed)
+          return;
+        const firstRow = tbody.querySelector("tr");
+        if (!firstRow)
+          return;
+        const cells = firstRow.children;
+        const bodyCols = bodyColgroup.children;
+        const headerCols = colHeaderColgroup.children;
+        for (let i2 = 0;i2 < cells.length; i2++) {
+          const w = cells[i2].offsetWidth;
+          if (bodyCols[i2])
+            bodyCols[i2].style.width = `${w}px`;
+          if (headerCols[i2])
+            headerCols[i2].style.width = `${w}px`;
+        }
+      };
+      requestAnimationFrame(syncColumnWidths);
+      const ro = new ResizeObserver(syncColumnWidths);
+      ro.observe(bodyTable);
       if (total > rows.length) {
         const more = document.createElement("div");
         more.className = "db-snapshot-diff-more";

package/web/style.css

@@ -7885,6 +7885,11 @@ body.db-resizing {
   flex: 1;
   min-width: 0;
   overflow-y: auto;
+  /* 横スクロールはペインで受けない。各テーブルの .db-snapshot-diff-rows-viewport
+   * (overflow-x:auto) が body 行だけを横スクロールする。ペインで両軸 scroll に
+   * すると目次バー / テーブル名バー / 列ヘッダの sticky が横スクロールで全部
+   * 流れて積層がぐちゃぐちゃになるので明示的に hidden にする。 */
+  overflow-x: hidden;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--bg);
@@ -7892,12 +7897,20 @@ body.db-resizing {
    * left/right padding を取らず、内部の .db-snapshot-diff-inline 側で
    * inset を持たせる。toc だけ pane の端まで広がる。 */
   padding: 0;
-  /* sticky な目次バーの高さぶん、scrollIntoView の停止位置を下げる。
-   * これがないと chip クリック時に section が toc 裏に隠れて「中途半端な
-   * 位置で止まる」状態になる。 */
-  scroll-padding-top: 68px;
+  /* sticky 帯 (目次バー + テーブル名 + 列ヘッダ) ぶん、scrollIntoView の
+   * 停止位置を下げる。chip クリック時に section が sticky 裏に隠れて
+   * 「中途半端な位置で止まる」のを防ぐ。 */
+  scroll-padding-top: calc(
+    var(--snap-diff-toc-h) + var(--snap-diff-table-header-h) +
+      var(--snap-diff-col-header-h)
+  );
 }
 .db-snapshot-diff-inline {
+  /* sticky 3 段 (目次 / テーブル名 / 列ヘッダ) の高さを CSS 変数で持ち、
+   * top 計算と scroll-padding-top を一箇所で管理する。 */
+  --snap-diff-toc-h: 40px;
+  --snap-diff-table-header-h: 34px;
+  --snap-diff-col-header-h: 30px;
   padding: 0 12px 12px;
 }
 .db-snapshot-right-pane:empty::before {
@@ -7962,7 +7975,7 @@ body.db-resizing {
 .db-snapshot-diff-toc {
   position: sticky;
   top: 0;
-  z-index: 2;
+  z-index: 30;
   display: flex;
   gap: 6px;
   padding: 8px 12px;
@@ -7974,6 +7987,8 @@ body.db-resizing {
   overflow-y: hidden;
   white-space: nowrap;
   scroll-padding: 0 12px;
+  height: var(--snap-diff-toc-h);
+  box-sizing: border-box;
 }
 .db-snapshot-diff-toc-chip {
   flex: 0 0 auto;
@@ -8474,10 +8489,12 @@ body.db-resizing {
   font-size: var(--db-font-base);
 }
 .db-snapshot-diff-table {
+  /* 各テーブルは「テーブル名 (sticky)」「列ヘッダ (sticky, scrollLeft 同期)」
+   * 「rows-viewport (overflow-x:auto)」の 3 層構造。
+   * overflow:hidden は付けない (内部 sticky を殺す)。 */
   border: 1px solid var(--border);
   border-radius: 6px;
   margin-bottom: 8px;
-  overflow: hidden;
 }
 .db-snapshot-diff-table-header {
   display: flex;
@@ -8487,24 +8504,50 @@ body.db-resizing {
   background: var(--bg-soft);
   font-size: var(--db-font-base);
   cursor: pointer;
+  /* 目次バーのすぐ下に隙間ゼロで張り付く。 */
+  position: sticky;
+  top: var(--snap-diff-toc-h);
+  z-index: 20;
+  height: var(--snap-diff-table-header-h);
+  box-sizing: border-box;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
 }
 .db-snapshot-diff-table-header:hover {
   background: var(--bg-mute);
 }
+.db-snapshot-diff-col-header-wrap {
+  /* 列ヘッダ専用 wrap。rows-viewport (overflow-x:auto) の scrollLeft を JS で
+   * 同期して、横スクロール時もデータ列と列名の位置が揃うようにする。
+   * 自身は overflow:hidden で内部 table が右にはみ出ても scrollbar を出さない。
+   * 上端は table-header (背景同色 var(--bg-soft)) と地続きに見せたいので
+   * border-top は持たない。下端 1px だけが列ヘッダと body の境界を描く。 */
+  position: sticky;
+  top: calc(
+    var(--snap-diff-toc-h) + var(--snap-diff-table-header-h) - 1px
+  );
+  z-index: 15;
+  height: var(--snap-diff-col-header-h);
+  box-sizing: border-box;
+  overflow: hidden;
+  background: var(--bg-soft);
+  border-bottom: 1px solid var(--border);
+}
+.db-snapshot-diff-rows-viewport {
+  /* body 行だけが横スクロール対象。縦は親 (.db-snapshot-right-pane) が受ける。 */
+  overflow-x: auto;
+  overflow-y: visible;
+}
 .db-snapshot-diff-table-name {
   font-weight: 600;
 }
 .db-snapshot-diff-table-stats {
   color: var(--fg-muted);
 }
-.db-snapshot-diff-rows-container {
-  /* 親 (.db-snapshot-right-pane) が縦スクロール責務を一手に持つので、
-   * ここでは縦方向は visible のまま。max-height + overflow-y を持っていた
-   * 旧実装は、マウスホイールが grid に乗ると親に伝播せず「親スクロール
-   * できない」操作不能の元だった (nested scroll trap)。
-   * 横に広い diff grid のためにヨコだけ auto を残す。 */
-  overflow-x: auto;
-}
+/* (旧) .db-snapshot-diff-rows-container は廃止。新構造では
+ * .db-snapshot-diff-rows-viewport (overflow-x:auto) が body 行の横スクロールを
+ * 担い、列ヘッダは .db-snapshot-diff-col-header-wrap に分離されて
+ * scrollLeft 同期で追従する。 */
 /* (deleted) 旧 row-based diff レイアウトの dead CSS を削除した。
  *   - .db-snapshot-diff-row / .db-snapshot-diff-type / .db-snapshot-diff-key
  *   - .db-snapshot-diff-changes / .db-snapshot-diff-values
@@ -8526,37 +8569,59 @@ body.db-resizing {
   font-size: var(--db-font-base);
 }
 
-/* Diff grid table */
+/* Diff grid table
+ * 構造: 各テーブルにつき 2 つの <table class="db-snap-diff-grid"> を作る。
+ * - 列ヘッダ用 (thead のみ、.db-snapshot-diff-col-header-wrap 内)
+ * - body 用 (tbody のみ、.db-snapshot-diff-rows-viewport 内)
+ * 両 table に同じ <colgroup> を入れ、JS (ResizeObserver) で body 側の各 col
+ * 実幅を測って header 側に同じ width を反映する。これで横スクロール時も
+ * 列ヘッダとデータ列が完全に揃う。
+ * border-collapse:separate にする理由: collapse だと隣接 border をセル側が
+ * 描く仕様で、sticky 化やテーブル分割と相性が悪く subpixel 透けの原因になる。 */
 .db-snap-diff-grid {
-  width: 100%;
-  border-collapse: collapse;
+  min-width: 100%;
+  width: max-content;
+  border-collapse: separate;
+  border-spacing: 0;
   font-size: var(--db-font-base);
   table-layout: auto;
 }
 .db-snap-diff-grid th {
-  position: sticky;
-  top: 0;
+  /* 列ヘッダの下端は col-header-wrap.border-bottom が描くので th 側では持たない。
+   * 縦罫線は持たない (gutter と data 列の境界は type-cell.border-right が担う)。 */
   background: var(--bg-soft);
-  border: 1px solid var(--border);
   padding: 4px 8px;
   font-weight: 600;
   text-align: left;
   white-space: nowrap;
-  z-index: 1;
 }
 .db-snap-diff-grid td {
-  border: 1px solid var(--border);
+  /* 縦罫線は持たない。横罫線のみで行を区切る (GitHub PR diff 同様)。
+   * gutter と data 列の境界は type-cell.border-right が担う。 */
+  border-bottom: 1px solid var(--border);
   padding: 3px 8px;
   max-width: 300px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.db-snap-diff-grid tr.snap-diff-add {
-  background: var(--diff-add-bg);
+.db-snap-diff-grid tbody tr:last-child td {
+  border-bottom: 0;
 }
-.db-snap-diff-grid tr.snap-diff-del {
-  background: var(--diff-del-bg);
+/* 1 レコード境界の視覚化:
+ * - updated は trBefore(snap-diff-record-start) + trAfter(snap-diff-record-end) の 2 行
+ * - inserted/deleted は 1 行に snap-diff-record-start snap-diff-record-end 両方
+ * 行間の通常 border (1px var(--border)) よりはっきり濃く太くしないと、ペア内
+ * の - と + の境目とレコード境界が区別できない。
+ *   - 横境界: 2px var(--fg-muted) (灰色の濃い線)
+ *   - gutter 縦印: inset 3px var(--fg-muted) で record の左に bracket 風
+ *     (実 border ではないので border-collapse / 列幅同期に影響しない) */
+.db-snap-diff-grid tr.snap-diff-record-end td {
+  border-bottom: 2px solid var(--fg-muted);
+}
+.db-snap-diff-grid tr.snap-diff-record-start td:first-child,
+.db-snap-diff-grid tr.snap-diff-record-end td:first-child {
+  box-shadow: inset 3px 0 0 var(--fg-muted);
 }
 .db-snap-diff-grid .snap-diff-type-cell {
   font-weight: 600;
@@ -8565,10 +8630,25 @@ body.db-resizing {
   background: var(--bg-soft);
   text-align: center;
   min-width: 50px;
+  /* gutter と data 列の境界は唯一ここの border-right が描く。
+   * 他のセルは縦罫線を持たない。 */
+  border-right: 1px solid var(--border);
+}
+.db-snap-diff-grid tr.snap-diff-del .snap-diff-type-cell {
+  color: var(--danger);
+}
+.db-snap-diff-grid tr.snap-diff-add .snap-diff-type-cell {
+  color: var(--success);
 }
 .db-snap-diff-grid .snap-diff-changed-cell {
   font-weight: 600;
 }
+.db-snap-diff-grid tr.snap-diff-del .snap-diff-changed-cell {
+  background: var(--diff-del-bg);
+}
+.db-snap-diff-grid tr.snap-diff-add .snap-diff-changed-cell {
+  background: var(--diff-add-bg);
+}
 
 /* Inline dialog (replaces confirm/prompt) */
 .db-snapshot-inline-dialog {