@youtyan/code-viewer 0.11.0 → 0.11.1

package/README.md

@@ -183,6 +183,11 @@ visible, and file pages show a preview when the browser can safely render the
 file. Unsupported binary files show a clear unavailable state with file
 metadata instead of dumping bytes as text.
 
+CSV and TSV files open as a table with all-column search, per-column filters, and
+three-state column sorting (ascending, descending, then source order). The
+visible-row count and reset action stay above the table while original file row
+numbers remain attached to their data after filtering or sorting.
+
 Markdown files use a dedicated preview tab. Relative links and images are
 resolved inside the repository, code blocks are highlighted with Shiki, and
 Mermaid diagrams are rendered lazily in the browser (click any diagram to

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youtyan/code-viewer",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Local browser-based code and git diff viewer",
   "type": "module",
   "bin": {
@@ -67,10 +67,12 @@
     "@biomejs/biome": "2.4.14",
     "@happy-dom/global-registrator": "^20.10.6",
     "@types/better-sqlite3": "^7.6.13",
+    "@types/d3-dsv": "3.0.7",
     "@types/markdown-it": "14.1.2",
     "@types/pg": "8.20.0",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
+    "d3-dsv": "3.0.1",
     "esbuild": "^0.28.1",
     "highlight.js": "11.9.0",
     "markdown-it": "14.1.1",

package/web/app.js

@@ -1818,7 +1818,7 @@ ${lines.join("\n")}
     return SOURCE_SHIKI_LANG_ALIASES[lang] || lang;
   }
   function isPreviewableSource(path) {
-    return /\.(md|markdown|mdown|mkdn|mdx|html|htm)$/i.test(path);
+    return /\.(md|markdown|mdown|mkdn|mdx|html|htm|csv|tsv)$/i.test(path);
   }
   function sourceInternalPathKind(path) {
     for (const part of path.split(/[\\/]+/)) {
@@ -1831,6 +1831,8 @@ ${lines.join("\n")}
   function sourcePreviewKind(path) {
     if (/\.(md|markdown|mdown|mkdn|mdx)$/i.test(path)) return "markdown";
     if (/\.(html|htm)$/i.test(path)) return "html";
+    if (/\.csv$/i.test(path)) return "csv";
+    if (/\.tsv$/i.test(path)) return "tsv";
     return null;
   }
   var EXT_TO_LANG = {
@@ -15642,8 +15644,8 @@ Details: ${JSON.stringify(output)}` : "";
   function formatTime(iso) {
     try {
       const d2 = new Date(iso);
-      const pad = (n2) => String(n2).padStart(2, "0");
-      return `${d2.getFullYear()}-${pad(d2.getMonth() + 1)}-${pad(d2.getDate())} ${pad(d2.getHours())}:${pad(d2.getMinutes())}:${pad(d2.getSeconds())}`;
+      const pad2 = (n2) => String(n2).padStart(2, "0");
+      return `${d2.getFullYear()}-${pad2(d2.getMonth() + 1)}-${pad2(d2.getDate())} ${pad2(d2.getHours())}:${pad2(d2.getMinutes())}:${pad2(d2.getSeconds())}`;
     } catch {
       return iso;
     }
@@ -16376,7 +16378,419 @@ Details: ${JSON.stringify(output)}` : "";
     return idx >= 0 ? trimmed.slice(idx + 1) : trimmed;
   }
 
+  // node_modules/.pnpm/d3-dsv@3.0.1/node_modules/d3-dsv/src/dsv.js
+  var EOL = {};
+  var EOF = {};
+  var QUOTE = 34;
+  var NEWLINE = 10;
+  var RETURN = 13;
+  function objectConverter(columns) {
+    return new Function("d", "return {" + columns.map(function(name, i2) {
+      return JSON.stringify(name) + ": d[" + i2 + '] || ""';
+    }).join(",") + "}");
+  }
+  function customConverter(columns, f2) {
+    var object = objectConverter(columns);
+    return function(row, i2) {
+      return f2(object(row), i2, columns);
+    };
+  }
+  function inferColumns(rows) {
+    var columnSet = /* @__PURE__ */ Object.create(null), columns = [];
+    rows.forEach(function(row) {
+      for (var column in row) {
+        if (!(column in columnSet)) {
+          columns.push(columnSet[column] = column);
+        }
+      }
+    });
+    return columns;
+  }
+  function pad(value, width) {
+    var s2 = value + "", length = s2.length;
+    return length < width ? new Array(width - length + 1).join(0) + s2 : s2;
+  }
+  function formatYear(year) {
+    return year < 0 ? "-" + pad(-year, 6) : year > 9999 ? "+" + pad(year, 6) : pad(year, 4);
+  }
+  function formatDate(date) {
+    var hours = date.getUTCHours(), minutes = date.getUTCMinutes(), seconds = date.getUTCSeconds(), milliseconds = date.getUTCMilliseconds();
+    return isNaN(date) ? "Invalid Date" : formatYear(date.getUTCFullYear(), 4) + "-" + pad(date.getUTCMonth() + 1, 2) + "-" + pad(date.getUTCDate(), 2) + (milliseconds ? "T" + pad(hours, 2) + ":" + pad(minutes, 2) + ":" + pad(seconds, 2) + "." + pad(milliseconds, 3) + "Z" : seconds ? "T" + pad(hours, 2) + ":" + pad(minutes, 2) + ":" + pad(seconds, 2) + "Z" : minutes || hours ? "T" + pad(hours, 2) + ":" + pad(minutes, 2) + "Z" : "");
+  }
+  function dsv_default(delimiter2) {
+    var reFormat = new RegExp('["' + delimiter2 + "\n\r]"), DELIMITER = delimiter2.charCodeAt(0);
+    function parse(text3, f2) {
+      var convert, columns, rows = parseRows(text3, function(row, i2) {
+        if (convert) return convert(row, i2 - 1);
+        columns = row, convert = f2 ? customConverter(row, f2) : objectConverter(row);
+      });
+      rows.columns = columns || [];
+      return rows;
+    }
+    function parseRows(text3, f2) {
+      var rows = [], N = text3.length, I = 0, n2 = 0, t2, eof = N <= 0, eol = false;
+      if (text3.charCodeAt(N - 1) === NEWLINE) --N;
+      if (text3.charCodeAt(N - 1) === RETURN) --N;
+      function token() {
+        if (eof) return EOF;
+        if (eol) return eol = false, EOL;
+        var i2, j = I, c2;
+        if (text3.charCodeAt(j) === QUOTE) {
+          while (I++ < N && text3.charCodeAt(I) !== QUOTE || text3.charCodeAt(++I) === QUOTE) ;
+          if ((i2 = I) >= N) eof = true;
+          else if ((c2 = text3.charCodeAt(I++)) === NEWLINE) eol = true;
+          else if (c2 === RETURN) {
+            eol = true;
+            if (text3.charCodeAt(I) === NEWLINE) ++I;
+          }
+          return text3.slice(j + 1, i2 - 1).replace(/""/g, '"');
+        }
+        while (I < N) {
+          if ((c2 = text3.charCodeAt(i2 = I++)) === NEWLINE) eol = true;
+          else if (c2 === RETURN) {
+            eol = true;
+            if (text3.charCodeAt(I) === NEWLINE) ++I;
+          } else if (c2 !== DELIMITER) continue;
+          return text3.slice(j, i2);
+        }
+        return eof = true, text3.slice(j, N);
+      }
+      while ((t2 = token()) !== EOF) {
+        var row = [];
+        while (t2 !== EOL && t2 !== EOF) row.push(t2), t2 = token();
+        if (f2 && (row = f2(row, n2++)) == null) continue;
+        rows.push(row);
+      }
+      return rows;
+    }
+    function preformatBody(rows, columns) {
+      return rows.map(function(row) {
+        return columns.map(function(column) {
+          return formatValue2(row[column]);
+        }).join(delimiter2);
+      });
+    }
+    function format2(rows, columns) {
+      if (columns == null) columns = inferColumns(rows);
+      return [columns.map(formatValue2).join(delimiter2)].concat(preformatBody(rows, columns)).join("\n");
+    }
+    function formatBody(rows, columns) {
+      if (columns == null) columns = inferColumns(rows);
+      return preformatBody(rows, columns).join("\n");
+    }
+    function formatRows(rows) {
+      return rows.map(formatRow).join("\n");
+    }
+    function formatRow(row) {
+      return row.map(formatValue2).join(delimiter2);
+    }
+    function formatValue2(value) {
+      return value == null ? "" : value instanceof Date ? formatDate(value) : reFormat.test(value += "") ? '"' + value.replace(/"/g, '""') + '"' : value;
+    }
+    return {
+      parse,
+      parseRows,
+      format: format2,
+      formatBody,
+      formatRows,
+      formatRow,
+      formatValue: formatValue2
+    };
+  }
+
+  // node_modules/.pnpm/d3-dsv@3.0.1/node_modules/d3-dsv/src/csv.js
+  var csv = dsv_default(",");
+  var csvParse = csv.parse;
+  var csvParseRows = csv.parseRows;
+  var csvFormat = csv.format;
+  var csvFormatBody = csv.formatBody;
+  var csvFormatRows = csv.formatRows;
+  var csvFormatRow = csv.formatRow;
+  var csvFormatValue = csv.formatValue;
+
+  // node_modules/.pnpm/d3-dsv@3.0.1/node_modules/d3-dsv/src/tsv.js
+  var tsv = dsv_default("	");
+  var tsvParse = tsv.parse;
+  var tsvParseRows = tsv.parseRows;
+  var tsvFormat = tsv.format;
+  var tsvFormatBody = tsv.formatBody;
+  var tsvFormatRows = tsv.formatRows;
+  var tsvFormatRow = tsv.formatRow;
+  var tsvFormatValue = tsv.formatValue;
+
+  // web-src/views/source-preview-i18n.ts
+  var DELIMITED_PREVIEW_TEXT = {
+    en: (format2) => ({
+      searchLabel: `Search all ${format2.toUpperCase()} columns`,
+      searchPlaceholder: "Search all columns…",
+      resetLabel: "Reset",
+      resetAction: "Clear search, column filters, and sorting",
+      resultCount: (visible, total) => `${visible} / ${total} rows`,
+      resultCountLabel: `Visible ${format2.toUpperCase()} rows`,
+      columnLabel: (index) => `Column ${index}`,
+      columnFilterLabel: (column) => `Filter ${column}`,
+      columnFilterPlaceholder: "Filter…",
+      sortAscending: (column) => `Sort ${column} ascending`,
+      sortDescending: (column) => `Sort ${column} descending`,
+      clearSort: (column) => `Clear sorting for ${column}`,
+      noMatches: "No rows match the current filters."
+    }),
+    ja: (format2) => ({
+      searchLabel: `${format2.toUpperCase()}の全列を検索`,
+      searchPlaceholder: "全列を検索…",
+      resetLabel: "リセット",
+      resetAction: "検索、列フィルタ、並べ替えを解除",
+      resultCount: (visible, total) => `${visible} / ${total} 行`,
+      resultCountLabel: `表示中の${format2.toUpperCase()}行数`,
+      columnLabel: (index) => `列 ${index}`,
+      columnFilterLabel: (column) => `${column}を絞り込み`,
+      columnFilterPlaceholder: "絞り込み…",
+      sortAscending: (column) => `${column}を昇順に並べ替え`,
+      sortDescending: (column) => `${column}を降順に並べ替え`,
+      clearSort: (column) => `${column}の並べ替えを解除`,
+      noMatches: "現在の条件に一致する行はありません。"
+    })
+  };
+  function delimitedPreviewText(language, format2) {
+    return DELIMITED_PREVIEW_TEXT[language](format2);
+  }
+
   // web-src/views/source-preview-elements.ts
+  function renderDelimitedPreview(text3, format2, getText = () => delimitedPreviewText("en", format2)) {
+    const preview = Object.assign(
+      document.createElement("div"),
+      { localize: () => void 0 }
+    );
+    preview.className = "gdp-csv-preview";
+    const parseRows = format2 === "tsv" ? tsvParseRows : csvParseRows;
+    const rows = parseRows(text3.charCodeAt(0) === 65279 ? text3.slice(1) : text3);
+    if (rows.length === 0) return preview;
+    const columnCount = rows.reduce(
+      (largest, row) => Math.max(largest, row.length),
+      0
+    );
+    const dataRows = rows.slice(1).map((row, index) => ({
+      sourceIndex: index + 1,
+      cells: Array.from(
+        { length: columnCount },
+        (_, column) => row[column] ?? ""
+      )
+    }));
+    const collator = new Intl.Collator(void 0, {
+      numeric: true,
+      sensitivity: "base"
+    });
+    const columnFilters = Array.from({ length: columnCount }, () => "");
+    let sortColumn = null;
+    let sortDirection = null;
+    let visibleCount = dataRows.length;
+    let emptyCell = null;
+    const shell = document.createElement("section");
+    shell.className = "gdp-csv-shell";
+    const toolbar = document.createElement("div");
+    toolbar.className = "gdp-csv-toolbar";
+    const searchIcon = document.createElement("span");
+    searchIcon.className = "gdp-csv-search-icon";
+    searchIcon.setAttribute("aria-hidden", "true");
+    searchIcon.innerHTML = iconSvg("octicon-search", SEARCH_16_PATH);
+    const search = document.createElement("input");
+    search.type = "search";
+    search.className = "gdp-csv-search";
+    search.autocomplete = "off";
+    search.spellcheck = false;
+    const status = document.createElement("span");
+    status.className = "gdp-csv-result-count";
+    status.setAttribute("role", "status");
+    status.setAttribute("aria-live", "polite");
+    const reset = document.createElement("button");
+    reset.type = "button";
+    reset.className = "gdp-csv-reset";
+    toolbar.append(searchIcon, search, status, reset);
+    const table2 = document.createElement("table");
+    table2.className = "gdp-csv-table";
+    const thead = document.createElement("thead");
+    const headRow = document.createElement("tr");
+    const corner = document.createElement("th");
+    corner.className = "gdp-csv-row-number";
+    corner.setAttribute("aria-hidden", "true");
+    headRow.appendChild(corner);
+    const sortHeaders = [];
+    for (let column = 0; column < columnCount; column++) {
+      const th = document.createElement("th");
+      th.scope = "col";
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "gdp-csv-sort-button";
+      button.dataset.csvSortColumn = String(column);
+      const label = document.createElement("span");
+      label.textContent = rows[0][column] ?? "";
+      button.appendChild(label);
+      button.addEventListener("click", () => {
+        if (sortColumn !== column) {
+          sortColumn = column;
+          sortDirection = "asc";
+        } else if (sortDirection === "asc") {
+          sortDirection = "desc";
+        } else if (sortDirection === "desc") {
+          sortColumn = null;
+          sortDirection = null;
+        } else {
+          sortDirection = "asc";
+        }
+        renderBody();
+        button.focus();
+      });
+      th.appendChild(button);
+      headRow.appendChild(th);
+      sortHeaders.push({ cell: th, button, label });
+    }
+    thead.appendChild(headRow);
+    const filterRow = document.createElement("tr");
+    filterRow.className = "gdp-csv-filter-row";
+    const filterCorner = document.createElement("th");
+    filterCorner.className = "gdp-csv-row-number";
+    filterCorner.setAttribute("aria-hidden", "true");
+    filterRow.appendChild(filterCorner);
+    const filterInputs = [];
+    for (let column = 0; column < columnCount; column++) {
+      const th = document.createElement("th");
+      const input2 = document.createElement("input");
+      input2.type = "search";
+      input2.className = "gdp-csv-column-filter";
+      input2.dataset.csvColumnFilter = String(column);
+      input2.autocomplete = "off";
+      input2.spellcheck = false;
+      input2.addEventListener("input", () => {
+        columnFilters[column] = input2.value;
+        renderBody();
+      });
+      input2.addEventListener("keydown", (event) => {
+        if (isImeComposing(event) || event.key !== "Escape" || !input2.value)
+          return;
+        input2.value = "";
+        columnFilters[column] = "";
+        renderBody();
+      });
+      th.appendChild(input2);
+      filterRow.appendChild(th);
+      filterInputs.push(input2);
+    }
+    thead.appendChild(filterRow);
+    table2.appendChild(thead);
+    const tbody = document.createElement("tbody");
+    table2.appendChild(tbody);
+    shell.append(toolbar, table2);
+    preview.appendChild(shell);
+    function normalized(value) {
+      return value.trim().toLocaleLowerCase();
+    }
+    function activeStateCount() {
+      return (normalized(search.value) ? 1 : 0) + columnFilters.filter((value) => normalized(value)).length + (sortColumn === null ? 0 : 1);
+    }
+    function localizedColumnLabel(column, textValue) {
+      return rows[0][column] || textValue.columnLabel(column + 1);
+    }
+    function syncLocalizedText() {
+      const textValue = getText();
+      toolbar.setAttribute("aria-label", textValue.searchLabel);
+      search.placeholder = textValue.searchPlaceholder;
+      search.setAttribute("aria-label", textValue.searchLabel);
+      reset.textContent = textValue.resetLabel;
+      reset.title = textValue.resetAction;
+      reset.setAttribute("aria-label", textValue.resetAction);
+      status.textContent = textValue.resultCount(visibleCount, dataRows.length);
+      status.setAttribute("aria-label", textValue.resultCountLabel);
+      if (emptyCell) emptyCell.textContent = textValue.noMatches;
+      sortHeaders.forEach(({ cell, button }, column) => {
+        const columnLabel = localizedColumnLabel(column, textValue);
+        const active = sortColumn === column ? sortDirection : null;
+        cell.setAttribute(
+          "aria-sort",
+          active === "asc" ? "ascending" : active === "desc" ? "descending" : "none"
+        );
+        button.dataset.sortDirection = active ?? "none";
+        const action = active === "asc" ? textValue.sortDescending(columnLabel) : active === "desc" ? textValue.clearSort(columnLabel) : textValue.sortAscending(columnLabel);
+        button.title = action;
+        button.setAttribute("aria-label", action);
+      });
+      filterInputs.forEach((input2, column) => {
+        const columnLabel = localizedColumnLabel(column, textValue);
+        input2.placeholder = textValue.columnFilterPlaceholder;
+        input2.setAttribute(
+          "aria-label",
+          textValue.columnFilterLabel(columnLabel)
+        );
+      });
+    }
+    function renderBody() {
+      const globalQuery = normalized(search.value);
+      const filters = columnFilters.map(normalized);
+      const filtered = dataRows.filter(
+        (row) => (!globalQuery || row.cells.some(
+          (cell) => cell.toLocaleLowerCase().includes(globalQuery)
+        )) && filters.every(
+          (filter, column) => !filter || row.cells[column].toLocaleLowerCase().includes(filter)
+        )
+      );
+      const visibleRows = sortColumn === null || sortDirection === null ? filtered : [...filtered].sort((a2, b2) => {
+        const aValue = a2.cells[sortColumn];
+        const bValue = b2.cells[sortColumn];
+        if (!aValue && bValue) return 1;
+        if (aValue && !bValue) return -1;
+        const compared = collator.compare(aValue, bValue);
+        if (compared === 0) return a2.sourceIndex - b2.sourceIndex;
+        return sortDirection === "asc" ? compared : -compared;
+      });
+      tbody.replaceChildren();
+      emptyCell = null;
+      for (const row of visibleRows) {
+        const tr = document.createElement("tr");
+        const rowNumber = document.createElement("th");
+        rowNumber.className = "gdp-csv-row-number";
+        rowNumber.scope = "row";
+        rowNumber.textContent = String(row.sourceIndex);
+        tr.appendChild(rowNumber);
+        for (const value of row.cells) {
+          const td = document.createElement("td");
+          td.textContent = value;
+          tr.appendChild(td);
+        }
+        tbody.appendChild(tr);
+      }
+      if (visibleRows.length === 0) {
+        const tr = document.createElement("tr");
+        tr.className = "gdp-csv-empty-row";
+        emptyCell = document.createElement("td");
+        emptyCell.colSpan = columnCount + 1;
+        tr.appendChild(emptyCell);
+        tbody.appendChild(tr);
+      }
+      visibleCount = visibleRows.length;
+      reset.disabled = activeStateCount() === 0;
+      syncLocalizedText();
+    }
+    search.addEventListener("input", renderBody);
+    search.addEventListener("keydown", (event) => {
+      if (isImeComposing(event) || event.key !== "Escape" || !search.value)
+        return;
+      search.value = "";
+      renderBody();
+    });
+    reset.addEventListener("click", () => {
+      search.value = "";
+      columnFilters.fill("");
+      filterInputs.forEach((input2) => {
+        input2.value = "";
+      });
+      sortColumn = null;
+      sortDirection = null;
+      renderBody();
+      search.focus();
+    });
+    preview.localize = syncLocalizedText;
+    renderBody();
+    return preview;
+  }
   function renderHtmlPreviewFrame(title, html, extraClass = "") {
     const preview = document.createElement("div");
     preview.className = ["gdp-html-preview", extraClass].filter(Boolean).join(" ");
@@ -17106,6 +17520,8 @@ Details: ${JSON.stringify(output)}` : "";
           data.text,
           "s3-html-preview"
         );
+      } else if (previewKind === "csv" || previewKind === "tsv") {
+        body = renderDelimitedPreview(data.text, previewKind);
       } else if (previewKind === "markdown") {
         body = await renderMarkdownPreview(
           data.text,
@@ -18166,8 +18582,8 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
   }
   function formatTime2(timestamp) {
     const d2 = new Date(timestamp);
-    const pad = (n2) => String(n2).padStart(2, "0");
-    return `${pad(d2.getHours())}:${pad(d2.getMinutes())}:${pad(d2.getSeconds())}`;
+    const pad2 = (n2) => String(n2).padStart(2, "0");
+    return `${pad2(d2.getHours())}:${pad2(d2.getMinutes())}:${pad2(d2.getSeconds())}`;
   }
 
   // web-src/views/database/snapshot-view.ts
@@ -26510,8 +26926,8 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
       const t2 = Date.parse(iso);
       if (!Number.isFinite(t2)) return iso;
       const d2 = new Date(t2);
-      const pad = (n2) => String(n2).padStart(2, "0");
-      return `${d2.getFullYear()}-${pad(d2.getMonth() + 1)}-${pad(d2.getDate())} ${pad(d2.getHours())}:${pad(d2.getMinutes())}`;
+      const pad2 = (n2) => String(n2).padStart(2, "0");
+      return `${d2.getFullYear()}-${pad2(d2.getMonth() + 1)}-${pad2(d2.getDate())} ${pad2(d2.getHours())}:${pad2(d2.getMinutes())}`;
     }
     function displayWhen(iso) {
       const relative = relativeWhen(iso);
@@ -28054,6 +28470,10 @@ ${entry.message}` : entry.detail ?? entry.message ?? "";
                   kind: "paragraph",
                   text: "A file detail page exposes up to four tabs — Preview, Code, Blame, History. For text files Code is the default and ?preview=1 opts in to the Markdown / HTML preview; media files (images, video, audio, PDF) show a Preview tab only, with no Code tab. Blame and History have their own canonical URLs (view=blame, view=history) so deep links and the browser back/forward stay in sync, and they keep the Repository sidebar visible. Opening another file from the repository tree keeps the active tab (a file that cannot be previewed falls back to Code)."
                 },
+                {
+                  kind: "paragraph",
+                  text: "CSV and TSV previews provide all-column search, per-column filters, three-state column sorting (ascending, descending, then source order), a visible-row count, and a reset action. Filtering and sorting keep each row's original file row number."
+                },
                 {
                   kind: "paragraph",
                   text: "Relative links inside a Markdown preview lead to the same destinations as they do on GitHub: another Markdown file opens its file page, an #anchor opens the preview and scrolls to that heading, a non-Markdown file opens in the Code view, and a link to a directory opens that folder in the repository tree."
@@ -28784,6 +29204,10 @@ code-viewer annotate add-db --db app.db --tab query \\
                   kind: "paragraph",
                   text: "ファイル詳細ページには最大 4 つのタブ (Preview / Code / Blame / History) があります。テキストファイルは Code がデフォルトで、?preview=1 を付けると Markdown / HTML プレビューに切り替わります。画像・動画・音声・PDF などのメディアファイルは Preview タブのみ表示され、Code タブは表示されません。Blame と History はそれぞれ専用 URL (view=blame, view=history) を持つため、ディープリンクとブラウザの戻る / 進むが同期し、いずれも Repository サイドバーは表示されたままです。ツリーから別のファイルを開いても選択中のタブは維持されます (プレビューできないファイルでは Code に戻ります)。"
                 },
+                {
+                  kind: "paragraph",
+                  text: "CSV・TSVプレビューでは、全列検索、列ごとの絞り込み、昇順・降順・元の順番の3段階ソート、表示件数、リセットを利用できます。絞り込みや並べ替えの後も、各行には元ファイル上の行番号が表示されます。"
+                },
                 {
                   kind: "paragraph",
                   text: "Markdown プレビュー内の相対リンクは GitHub と同じ行き先に解決されます。別の Markdown ファイルはそのファイルページを開き、#見出し 付きのリンクはプレビューを開いて該当見出しまでスクロールし、Markdown 以外のファイルは Code ビュー、ディレクトリへのリンクはリポジトリツリーのそのフォルダを開きます。"
@@ -32497,8 +32921,8 @@ code-viewer annotate add-db --db app.db --tab query \\
       const t2 = Date.parse(iso);
       if (!Number.isFinite(t2)) return iso;
       const d2 = new Date(t2);
-      const pad = (n2) => String(n2).padStart(2, "0");
-      return `${d2.getFullYear()}-${pad(d2.getMonth() + 1)}-${pad(d2.getDate())} ${pad(d2.getHours())}:${pad(d2.getMinutes())}`;
+      const pad2 = (n2) => String(n2).padStart(2, "0");
+      return `${d2.getFullYear()}-${pad2(d2.getMonth() + 1)}-${pad2(d2.getDate())} ${pad2(d2.getHours())}:${pad2(d2.getMinutes())}`;
     }
     function displayWhen(iso) {
       const relative = relativeWhen(iso);
@@ -36872,7 +37296,8 @@ code-viewer annotate add-db --db app.db --tab query \\
       setViewFileButtonState,
       scrollMainPanel,
       focusMainSurface,
-      isPaletteOpen
+      isPaletteOpen,
+      getLanguage
     } = deps;
     function markdownLinkNavigationDeps() {
       return {
@@ -37189,15 +37614,10 @@ code-viewer annotate add-db --db app.db --tab query \\
     function setPreferredSourceTab(tab) {
       PREFERRED_SOURCE_TAB = tab;
     }
-    function consumePreferredSourceTab(previewable) {
-      if (!previewable) {
-        PREFERRED_SOURCE_TAB = null;
-        return "code";
-      }
+    function preferredSourceTabFor(previewable) {
+      if (!previewable) return "code";
       const routeTab = STATE.route.screen === "file" && STATE.route.view === "blob" && STATE.route.preview ? "preview" : "code";
-      const tab = PREFERRED_SOURCE_TAB || routeTab;
-      PREFERRED_SOURCE_TAB = null;
-      return tab;
+      return PREFERRED_SOURCE_TAB || routeTab;
     }
     let SOURCE_REQ_SEQ = 0;
     let ACTIVE_SOURCE_LOAD = null;
@@ -37449,7 +37869,7 @@ code-viewer annotate add-db --db app.db --tab query \\
       if (signal?.aborted) return false;
       const previewable = isPreviewableSource(target.path);
       const previewKind = sourcePreviewKind(target.path);
-      const initialSourceTab = consumePreferredSourceTab(previewable);
+      const initialSourceTab = preferredSourceTabFor(previewable);
       const tabsHost = card.querySelector(".gdp-file-detail-tabs");
       if (usesVirtualSource) {
         const virtualCode = renderVirtualSource(
@@ -37471,7 +37891,11 @@ code-viewer annotate add-db --db app.db --tab query \\
             tabsHost.hidden = false;
             tabsHost.replaceChildren(tabs3);
           }
-          let preview = previewKind === "html" ? renderHtmlPreview(target, textValue) : await (deps.renderMarkdownPreview ?? renderMarkdownPreview)(
+          let preview = previewKind === "html" ? renderHtmlPreview(target, textValue) : previewKind === "csv" || previewKind === "tsv" ? renderDelimitedPreview(
+            textValue,
+            previewKind,
+            () => delimitedPreviewText(getLanguage(), previewKind)
+          ) : await (deps.renderMarkdownPreview ?? renderMarkdownPreview)(
             textValue,
             target,
             {
@@ -37484,7 +37908,7 @@ code-viewer annotate add-db --db app.db --tab query \\
           preview.dataset.sourcePane = "preview";
           let previewHighlightScheduled = false;
           const ensurePreviewHighlight = () => {
-            if (previewKind === "html" || !STATE.syntaxHighlight || previewHighlightScheduled)
+            if (previewKind !== "markdown" || !STATE.syntaxHighlight || previewHighlightScheduled)
               return;
             previewHighlightScheduled = true;
             scheduleMarkdownPreviewHighlight(
@@ -37591,7 +38015,11 @@ code-viewer annotate add-db --db app.db --tab query \\
         tabsHost.replaceChildren(tabs);
       }
       if (previewable) {
-        let preview = previewKind === "html" ? renderHtmlPreview(target, textValue) : await (deps.renderMarkdownPreview ?? renderMarkdownPreview)(
+        let preview = previewKind === "html" ? renderHtmlPreview(target, textValue) : previewKind === "csv" || previewKind === "tsv" ? renderDelimitedPreview(
+          textValue,
+          previewKind,
+          () => delimitedPreviewText(getLanguage(), previewKind)
+        ) : await (deps.renderMarkdownPreview ?? renderMarkdownPreview)(
           textValue,
           target,
           {
@@ -37604,7 +38032,7 @@ code-viewer annotate add-db --db app.db --tab query \\
         preview.dataset.sourcePane = "preview";
         let previewHighlightScheduled = false;
         const ensurePreviewHighlight = () => {
-          if (previewKind === "html" || !STATE.syntaxHighlight || previewHighlightScheduled)
+          if (previewKind !== "markdown" || !STATE.syntaxHighlight || previewHighlightScheduled)
             return;
           previewHighlightScheduled = true;
           scheduleMarkdownPreviewHighlight(
@@ -38770,6 +39198,11 @@ code-viewer annotate add-db --db app.db --tab query \\
     function handleVirtualSourcePagingKeydown(e2) {
       handleVirtualSourcePagingKey(e2, e2.target);
     }
+    function localize() {
+      document.querySelectorAll(".gdp-csv-preview").forEach((preview) => {
+        preview.localize();
+      });
+    }
     return {
       renderStandaloneSource,
       applySourceRouteToShell,
@@ -38804,7 +39237,8 @@ code-viewer annotate add-db --db app.db --tab query \\
       loadSourceShikiHighlighter,
       sourceShikiLines,
       shouldVirtualizeSource,
-      inferLang
+      inferLang,
+      localize
     };
   }
 
@@ -42833,7 +43267,8 @@ ${formatErrorDetail(error2)}`);
       setViewFileButtonState: (button, sourceMode) => DIFF_VIEW.setViewFileButtonState(button, sourceMode),
       scrollMainPanel,
       focusMainSurface,
-      isPaletteOpen: () => SEARCH_PALETTE.isPaletteOpen()
+      isPaletteOpen: () => SEARCH_PALETTE.isPaletteOpen(),
+      getLanguage: () => STATE.language
     });
     const {
       renderStandaloneSource,
@@ -43793,6 +44228,7 @@ ${formatErrorDetail(error2)}`);
       relocalizeHistory?.();
       relocalizeJournal?.();
       relocalizeViewerSettings?.();
+      SOURCE_VIEW.localize();
       setElementText(".annotation-panel-head strong", text3.annotations.title);
       const followLabel = document.querySelector(
         ".annotation-follow-label"

package/web/style.css

@@ -4488,6 +4488,243 @@ table.d2h-diff-table td.d2h-code-side-linenumber {
   font-size: var(--markdown-font-size);
   line-height: 1.75;
 }
+.gdp-csv-preview {
+  width: 100%;
+  padding: 20px 24px 40px;
+  overflow: auto;
+  background: var(--bg);
+}
+.gdp-csv-shell {
+  width: max-content;
+  min-width: min(100%, 880px);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  box-shadow: var(--shadow-sm);
+}
+.gdp-csv-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: var(--ui-control-md);
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border-strong);
+  border-radius: 7px 7px 0 0;
+  background: var(--bg-soft);
+}
+.gdp-csv-search-icon {
+  display: inline-flex;
+  flex: 0 0 16px;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--fg-muted);
+}
+.gdp-csv-search-icon svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+.gdp-csv-search {
+  width: min(360px, 34vw);
+  min-width: 180px;
+  height: var(--ui-control-md);
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg);
+  font: inherit;
+  font-size: var(--ui-font-md);
+}
+.gdp-csv-search:focus,
+.gdp-csv-column-filter:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: -1px;
+  border-color: var(--accent);
+}
+.gdp-csv-result-count {
+  flex: 0 0 14ch;
+  margin-left: auto;
+  color: var(--fg-muted);
+  font-size: var(--ui-font-sm);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  white-space: nowrap;
+}
+.gdp-csv-reset {
+  flex: 0 0 88px;
+  width: 88px;
+  height: var(--ui-control-md);
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg-muted);
+  font: inherit;
+  font-size: var(--ui-font-sm);
+  font-weight: 600;
+  cursor: pointer;
+}
+.gdp-csv-reset:hover:not(:disabled) {
+  border-color: var(--accent);
+  background: var(--accent-subtle);
+  color: var(--fg);
+}
+.gdp-csv-reset:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+.gdp-csv-reset:disabled {
+  color: var(--fg-subtle);
+  cursor: default;
+  opacity: 0.58;
+}
+.gdp-csv-table {
+  width: 100%;
+  min-width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  color: var(--fg);
+  background: var(--bg);
+  font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: var(--code-font-size);
+  line-height: var(--code-line-height);
+}
+.gdp-csv-table th,
+.gdp-csv-table td {
+  min-width: 11ch;
+  max-width: 52ch;
+  padding: 8px 14px;
+  border-right: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  overflow-wrap: anywhere;
+  text-align: left;
+  transition: background-color 0.12s ease;
+  vertical-align: top;
+  white-space: pre-wrap;
+}
+.gdp-csv-table tr > :last-child {
+  border-right: 0;
+}
+.gdp-csv-table tbody tr:last-child > * {
+  border-bottom: 0;
+}
+.gdp-csv-table thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.gdp-csv-table thead th {
+  background: var(--bg-mute);
+  font-weight: 700;
+}
+.gdp-csv-table thead tr:first-child > th:not(.gdp-csv-row-number) {
+  padding: 0;
+}
+.gdp-csv-sort-button {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 16px;
+  align-items: center;
+  width: 100%;
+  min-height: var(--ui-control-md);
+  padding: 6px 14px;
+  border: 0;
+  background: transparent;
+  color: var(--fg);
+  font: inherit;
+  font-weight: 700;
+  text-align: left;
+  cursor: pointer;
+}
+.gdp-csv-sort-button:hover {
+  background: var(--accent-subtle);
+}
+.gdp-csv-sort-button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+.gdp-csv-sort-button::after {
+  display: block;
+  width: 16px;
+  color: var(--accent);
+  content: "";
+  font-size: var(--ui-font-sm);
+  text-align: center;
+}
+.gdp-csv-sort-button[data-sort-direction="asc"]::after {
+  content: "↑";
+}
+.gdp-csv-sort-button[data-sort-direction="desc"]::after {
+  content: "↓";
+}
+.gdp-csv-filter-row th {
+  padding: 5px 8px;
+  border-bottom-color: var(--border-strong);
+  background: var(--bg-soft);
+}
+.gdp-csv-column-filter {
+  width: 100%;
+  min-width: 8ch;
+  height: var(--ui-control-sm);
+  padding: 0 7px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--fg);
+  font: inherit;
+  font-size: var(--ui-font-sm);
+  font-weight: 400;
+}
+.gdp-csv-column-filter::placeholder,
+.gdp-csv-search::placeholder {
+  color: var(--fg-subtle);
+}
+.gdp-csv-table tbody tr:nth-child(2n) td {
+  background: color-mix(in srgb, var(--bg-soft) 76%, var(--bg));
+}
+.gdp-csv-table tbody tr:hover td {
+  background: var(--accent-subtle);
+}
+.gdp-csv-table .gdp-csv-row-number {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  width: 44px;
+  min-width: 44px;
+  max-width: 44px;
+  background: var(--bg-soft);
+  color: var(--fg-subtle);
+  border-right-color: var(--border-strong);
+  font-weight: 400;
+  text-align: right;
+  user-select: none;
+}
+.gdp-csv-table tbody tr:hover .gdp-csv-row-number {
+  background: color-mix(in srgb, var(--accent-subtle) 72%, var(--bg-soft));
+  color: var(--fg);
+}
+.gdp-csv-table thead .gdp-csv-row-number {
+  z-index: 3;
+  background: var(--bg-mute);
+}
+.gdp-csv-table .gdp-csv-filter-row .gdp-csv-row-number {
+  background: var(--bg-soft);
+}
+.gdp-csv-empty-row td {
+  padding: 32px 20px;
+  background: var(--bg);
+  color: var(--fg-muted);
+  font-family: inherit;
+  text-align: center;
+}
+.gdp-csv-table tbody tr:last-child > :first-child {
+  border-bottom-left-radius: 7px;
+}
+.gdp-csv-table tbody tr:last-child > :last-child {
+  border-bottom-right-radius: 7px;
+}
 .gdp-html-preview {
   width: 100%;
   min-height: calc(var(--content-h) - var(--file-detail-head-h));