@youtyan/code-viewer 0.13.1 → 0.15.0

package/web/index.html

@@ -38,6 +38,7 @@
       <a class="app-menu-item" data-route="help" href="/help">Settings &amp; Help</a>
     </nav>
     <div class="global-actions">
+      <button id="search-btn" class="global-icon-action" title="search files (Ctrl+K) · Shift+click: grep (Ctrl+G)" aria-label="search files (Ctrl+K) · Shift+click: grep (Ctrl+G)"><span class="goi-icon" aria-hidden="true"></span></button>
       <button id="annotations-toggle" class="global-icon-action" title="code annotations" aria-label="code annotations"><span class="goi-icon" aria-hidden="true"></span><span id="annotations-count" hidden></span></button>
       <button id="doctor-btn" class="global-icon-action" title="environment doctor" aria-label="environment doctor"><span class="goi-icon" aria-hidden="true"></span><span id="doctor-badge" class="doctor-badge" hidden></span></button>
       <span class="global-actions-sep" aria-hidden="true"></span>
@@ -215,6 +216,7 @@
     <div class="app-panel-tabs" role="tablist" aria-label="panel">
       <button type="button" id="panel-tab-terminal" class="app-panel-tab" role="tab" data-panel="terminal" data-route="terminal" aria-selected="false">Terminal</button>
       <button type="button" id="panel-tab-tools" class="app-panel-tab" role="tab" data-panel="tools" data-route="tools" aria-selected="false">Tools</button>
+      <button type="button" id="panel-tab-search" class="app-panel-tab" role="tab" data-panel="search" data-route="search" aria-selected="false">Search</button>
       <span class="app-panel-spacer"></span>
       <div class="seg app-panel-layout-switch" role="group" aria-label="panel layout">
         <button type="button" data-panel-layout="overlay" class="active" aria-pressed="true">Overlay</button>
@@ -224,6 +226,7 @@
     </div>
     <div class="app-panel-bodies">
       <aside id="tools-sheet" class="tools-sheet" hidden aria-hidden="true" inert aria-label="tools"></aside>
+      <aside id="search-sheet" class="search-sheet" hidden aria-hidden="true" inert aria-label="search results"></aside>
       <aside id="terminal-sheet" class="terminal-sheet" hidden aria-hidden="true" inert aria-label="terminal"></aside>
     </div>
   </section>

package/web/style.css

@@ -303,6 +303,9 @@ body[data-code-font-size="xlarge"] {
 }
 
 .gdp-palette-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   padding: 12px 16px 0;
   color: var(--fg-muted);
   font-size: 12px;
@@ -1064,6 +1067,21 @@ body.gdp-diff-page #repo-target-wrap {
   padding: 10px 10px 0;
   background: var(--bg);
 }
+/* Recently picked refs, same pill idiom as the quick chips. */
+.rp-recent {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 10px 0;
+  background: var(--bg);
+}
+.rp-recent[hidden] { display: none; }
+.rp-chip-recent {
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .rp-chip {
   /* Compact quick-fill pills; .current uses the same tinted-active idiom
      as the topbar toggles and header nav. */
@@ -1850,12 +1868,100 @@ body.gdp-history-page #topbar .ref-pickers {
 }
 .history-item .meta2 {
   display: flex;
-  gap: 8px;
+  flex-wrap: wrap;
+  gap: 4px 8px;
   color: var(--fg-muted);
   font-size: var(--ui-font-sm);
   margin-top: 2px;
 }
 .history-item .sha { font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
+/* Branch / tag decorations and the merge marker on a commit row. Chips
+   share the .rp-chip pill idiom; colour only, so the row height is stable. */
+/* Chips take their own line under sha / author / date so the meta row keeps
+   its width and the chips flow horizontally in the narrow panel. */
+.history-item .history-refs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  flex-basis: 100%;
+  min-width: 0;
+}
+.history-ref {
+  display: inline-block;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 6px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--bg);
+  color: var(--fg-muted);
+  font-size: var(--ui-font-sm);
+  font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  line-height: 16px;
+}
+.history-ref-head {
+  border-color: var(--accent);
+  background: var(--accent-subtle);
+  color: var(--accent);
+}
+.history-ref-tag {
+  border-color: color-mix(in srgb, var(--warning, #9a6700) 55%, var(--border));
+  color: var(--warning, #9a6700);
+}
+.history-ref-merge {
+  font-style: italic;
+}
+/* Rows inside a Shift+click range: tint only, the selected row keeps its
+   accent bar. */
+.history-item-in-range {
+  background: color-mix(in srgb, var(--accent-subtle) 35%, transparent);
+}
+/* Older / newer revision stepper in the file header. Same icon-button idiom
+   as the path copy button; a disabled side only fades (no size change). */
+.gdp-file-revision-nav {
+  display: inline-flex;
+  gap: 2px;
+  margin-left: 6px;
+}
+.gdp-file-revision-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.gdp-file-revision-btn:disabled:hover {
+  background: transparent;
+  color: var(--fg-muted);
+}
+#history-commit-info .hci-actions,
+.history-commit-info .hci-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+#history-commit-info .hci-copy,
+.history-commit-info .hci-copy {
+  width: 26px;
+  padding: 0;
+  justify-content: center;
+}
+#history-commit-info .hci-copy.copied,
+.history-commit-info .hci-copy.copied { color: var(--success, var(--accent)); }
+#history-commit-info .hci-copy.failed,
+.history-commit-info .hci-copy.failed { color: var(--danger); }
+#history-commit-info .hci-parent[aria-pressed="true"],
+.history-commit-info .hci-parent[aria-pressed="true"] {
+  border-color: var(--accent);
+  background: var(--accent-subtle);
+  color: var(--accent);
+}
+#history-commit-info .hci-compare-label,
+.history-commit-info .hci-compare-label {
+  color: var(--fg-muted);
+  font-size: 12px;
+}
 .history-status {
   padding: 10px 14px;
   color: var(--fg-muted);
@@ -3725,6 +3831,7 @@ table.d2h-diff-table td.d2h-code-side-linenumber {
 #line-ref-pill-github-actions[hidden] {
   display: none;
 }
+#line-ref-pill-history,
 #line-ref-pill-github-open,
 #line-ref-pill-github-copy {
   display: inline-flex;
@@ -10464,6 +10571,14 @@ body.journal-task-editor-resizing * {
 .db-grid-header-wrap {
   flex-shrink: 0;
   overflow: hidden;
+  /* 本文 (.db-grid-viewport) の縦スクロールバーが食う幅を、右端に透明な
+     border として空ける。空けないと「見える幅」が本文だけ狭くなり、本文が
+     右へ余分にスクロールできてしまう。ヘッダは scrollLeft を同期しても
+     そこまで追随できず、右端で列がスクロールバー幅ぶんずれる。
+     scrollbar-gutter は overflow:hidden だと見た目の幅しか縮まず、
+     スクロール範囲は縮まないので使えない (実測済み)。
+     幅は table-grid.ts が実測して --db-grid-scrollbar-w に入れる。 */
+  border-right: var(--db-grid-scrollbar-w, 0px) solid transparent;
   border-bottom: 2px solid var(--border);
   background: var(--bg-soft);
 }
@@ -10508,6 +10623,20 @@ body.journal-task-editor-resizing * {
   flex: 1;
   overflow: auto;
   position: relative;
+  /* 行が少なくて縦スクロールバーが出ないときも幅を変えない。ここを可変に
+     すると、ヘッダ / フィルタ行に渡す --db-grid-scrollbar-w が行数やフィルタで
+     変わり、列の位置が動く。 */
+  scrollbar-gutter: stable;
+}
+/* 矢印キーでセルを移動するため viewport 自体がフォーカスを受け取る
+   (tabIndex=0)。セルをクリックするたびに枠が出ると常時ノイズになるので、
+   キーボードで到達したときだけリングを出す。親の .db-grid が
+   overflow:hidden なので外側に描くと切れる → inset で内側に描く。 */
+.db-grid-viewport:focus {
+  outline: none;
+}
+.db-grid-viewport:focus-visible {
+  box-shadow: inset var(--db-focus-ring);
 }
 
 .db-grid-spacer {
@@ -11097,6 +11226,8 @@ html[data-theme="dark"] .db-schema-table tr.pk-row {
 .db-grid-filter-row-wrap {
   flex-shrink: 0;
   overflow: hidden;
+  /* ヘッダと同じ理由でスクロールバー幅を空ける (.db-grid-header-wrap 参照)。 */
+  border-right: var(--db-grid-scrollbar-w, 0px) solid transparent;
   border-bottom: 1px solid var(--border);
   background: var(--bg-soft);
 }
@@ -11276,6 +11407,23 @@ html[data-theme="dark"] .db-schema-table tr.pk-row {
   white-space: pre-wrap;
   word-break: break-word;
 }
+/* shiki は `<span style="--shiki-light:#xxx;--shiki-dark:#yyy">` の inline
+   CSS 変数で token 色を出すので、light / dark でそれぞれ参照する。
+   明示テーマ (html[data-theme]) を OS 設定より後に置いて優先させる。 */
+.db-grid-detail-json span[style] {
+  color: var(--shiki-light);
+}
+@media (prefers-color-scheme: dark) {
+  .db-grid-detail-json span[style] {
+    color: var(--shiki-dark);
+  }
+}
+html[data-theme="light"] .db-grid-detail-json span[style] {
+  color: var(--shiki-light);
+}
+html[data-theme="dark"] .db-grid-detail-json span[style] {
+  color: var(--shiki-dark);
+}
 
 /* ---------- Foreign-key related data ---------- */
 .db-grid-header-fk-icon {
@@ -11373,13 +11521,32 @@ html[data-theme="dark"] .db-schema-table tr.pk-row {
 }
 
 .db-related-list {
-  width: 200px;
+  /* 既定 / 下限 / 上限は table-grid.ts が持つ。ここは JS 実行前の初回描画用の
+     fallback だけ (ui-layout: CSS と TS に同じ数値を書かない)。 */
+  width: var(--db-related-list-w, 200px);
   flex-shrink: 0;
   overflow: auto;
-  border-right: 1px solid var(--border);
   padding: 4px;
 }
 
+/* リストとグリッドの間の掴みしろ。境界線の役目も兼ねるので、リスト側の
+   border-right はこちらへ移してある (二重線にしない)。 */
+.db-related-list-resize {
+  flex: 0 0 auto;
+  width: 5px;
+  cursor: col-resize;
+  background: var(--border);
+  background-clip: content-box;
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
+}
+.db-related-list-resize:hover,
+.db-related-list-resize:focus-visible,
+.db-related-panel.db-related-list-resizing .db-related-list-resize {
+  background: var(--accent);
+  outline: none;
+}
+
 .db-related-list-item {
   display: flex;
   flex-direction: column;
@@ -11410,6 +11577,17 @@ html[data-theme="dark"] .db-schema-table tr.pk-row {
   display: inline-flex;
   align-items: baseline;
   gap: 6px;
+  /* 項目の幅を超えたら省略記号にする。min-width:0 が無いと flex 子は
+     内容幅より縮まず、はみ出したまま折り返す。 */
+  max-width: 100%;
+  min-width: 0;
+}
+
+.db-related-list-table {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 /* 方向アイコンを name の前に出す: outgoing は → (自分→他テーブル)、
    incoming は ← (他テーブル→自分の PK)。テキスト 1 文字なのでフォントに
@@ -11430,7 +11608,12 @@ html[data-theme="dark"] .db-schema-table tr.pk-row {
 .db-related-list-via {
   font-size: 11px;
   color: var(--fg-muted);
-  word-break: break-all;
+  /* break-all だと "sample_association_table.sa / mple_column_id = 12" の
+     ように語の途中で折り返って読めなくなる。1 行で省略し、全文は title で出す。 */
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .db-related-grid-host {
@@ -14938,6 +15121,7 @@ body.app-panel-docked .app-panel.app-panel-open {
    `web-src/test/docked-page-height.test.ts`。 */
 
 .tools-sheet,
+.search-sheet,
 .terminal-sheet {
   flex: 1 1 auto;
   min-width: 0;
@@ -14950,9 +15134,42 @@ body.app-panel-docked .app-panel.app-panel-open {
 /* パネルの中ではタブで 1 つだけ出す。閉じている側は本当に消す
    (右ドロワーの頃はスライドのために display を残していた)。 */
 .tools-sheet[hidden],
+.search-sheet[hidden],
 .terminal-sheet[hidden] {
   display: none;
 }
+/* Search results sheet: query row, palette-style controls, scrolling list. */
+.search-results-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  padding: 6px 10px 0;
+}
+.search-results-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: var(--ui-control-md);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--fg);
+  font: inherit;
+  font-size: var(--ui-font-md);
+  padding: 0 10px;
+  outline: none;
+}
+.search-results-input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-muted);
+}
+.search-results-controls { padding: 6px 10px 0; }
+.search-results-status { padding: 6px 10px; }
+.search-results-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
 
 /* ドロワー左端の掴みしろ。annotation パネルのリサイザーと同じ作り (境界を
    またぐ 8px の透明な帯) だが、ドロワーが画面の大半を覆って端が分かりにくい