@youtyan/code-viewer 0.9.1 → 0.10.0

package/web/index.html

@@ -30,6 +30,11 @@
       <a class="app-menu-item" data-route="history" href="/history">History</a>
       <a class="app-menu-item" data-route="journal" href="/journal">Work Log</a>
       <a class="app-menu-item" data-route="database" href="/database">Datastores</a>
+      <!-- Tools は画面遷移ではなくドロワーの開閉なので、リンクではなくボタン。
+           data-route はラベルのローカライズにだけ使う (SPA ナビの走査は
+           a.app-menu-item に限定してあるのでここは拾われない)。 -->
+      <button type="button" id="tools-btn" class="app-menu-item app-menu-action" data-route="tools" aria-pressed="false">Tools</button>
+      <a class="app-menu-item" data-route="help" href="/help">Help</a>
     </nav>
     <div class="global-actions">
       <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>
@@ -45,7 +50,6 @@
       <span id="status" class="status" role="status" aria-live="polite"><span class="status-label"></span></span>
       <a id="repo-web-link" class="global-icon-link" href="#" target="_blank" rel="noopener" hidden><span class="goi-icon" aria-hidden="true"></span></a>
       <button id="quick-help-btn" class="global-icon-action" title="quick help (shortcuts)" aria-label="quick help (shortcuts)"><span class="goi-icon" aria-hidden="true"></span></button>
-      <a class="global-icon-link" data-route="help" href="/help"><span class="goi-icon" aria-hidden="true"></span></a>
     </div>
   </header>
   <header id="topbar">
@@ -191,7 +195,7 @@
       </label>
       <p id="datastore-s3-tooltip-help" class="scope-settings-help"></p>
     </div>
-    <div class="scope-settings-section">
+    <div id="watch-settings-section" class="scope-settings-section">
       <strong id="watch-section-title" class="scope-settings-section-title">File change watcher</strong>
       <label for="scope-watch-limit">Maximum directories to watch</label>
       <div class="scope-watch-limit-row">
@@ -273,6 +277,8 @@
 
   <div id="doctor-sheet-overlay" class="doctor-sheet-overlay" hidden aria-hidden="true"></div>
   <aside id="doctor-sheet" class="doctor-sheet" hidden aria-hidden="true" inert aria-label="environment doctor"></aside>
+  <div id="tools-sheet-overlay" class="tools-sheet-overlay" hidden aria-hidden="true"></div>
+  <aside id="tools-sheet" class="tools-sheet" hidden aria-hidden="true" inert aria-label="tools"></aside>
   <main id="content">
     <section id="history-commit-info" hidden></section>
     <div id="empty" class="empty hidden">

package/web/style.css

@@ -478,6 +478,14 @@ body[data-code-font-size="xlarge"] {
   color: var(--accent);
   font-weight: 600;
 }
+/* メニューの中で唯一「画面遷移ではなく開閉」をする項目 (Tools)。見た目は
+   リンクの項目と揃えたいので、button 由来の既定値だけ打ち消す。 */
+.app-menu-action {
+  font-family: inherit;
+  border: 0;
+  cursor: pointer;
+  background: transparent;
+}
 
 .global-actions {
   position: relative;
@@ -13521,6 +13529,326 @@ body.db-resizing {
   background: var(--attn, #9a6700);
 }
 
+/* ===== Tools sheet (right-side drawer) =====
+   開閉の作りは doctor sheet と同じ (hidden でも display を残したまま
+   transform でスライドさせ、閉じている間は inert で無効化する)。違いは
+   中身が入力 / 出力の 2 ペインなので、ドロワーを大きく取る点。 */
+.tools-sheet {
+  position: fixed;
+  /* グローバルヘッダは隠さない。ドロワーを開いたままメニューを切り替えたり、
+     Tools をもう一度押して閉じたりできるようにする。 */
+  top: var(--global-header-h);
+  right: 0;
+  bottom: 0;
+  /* 既定幅。左端のハンドルでドラッグすると --tools-sheet-width が入る。
+     画面に収める上限はここで掛けるので、記憶した幅は狭いウィンドウで開いても
+     縮まない (広い画面に戻せばそのまま復元される)。 */
+  width: min(var(--tools-sheet-width, 1180px), 96vw);
+  max-width: 100vw;
+  background: var(--bg, #fff);
+  border-left: 1px solid var(--border, #d0d7de);
+  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  box-sizing: border-box;
+  transform: translateX(100%);
+  transition: transform 200ms ease;
+}
+.tools-sheet:not([hidden]) {
+  transform: translateX(0);
+}
+.tools-sheet[hidden] {
+  display: flex;
+  pointer-events: none;
+}
+.tools-sheet-overlay {
+  position: fixed;
+  inset: var(--global-header-h) 0 0 0;
+  background: rgba(0, 0, 0, 0.28);
+  z-index: 55;
+  opacity: 0;
+  transition: opacity 200ms ease;
+  pointer-events: none;
+}
+.tools-sheet-overlay:not([hidden]) {
+  opacity: 1;
+  pointer-events: auto;
+}
+.tools-sheet-overlay[hidden] {
+  display: block;
+  opacity: 0;
+  pointer-events: none;
+}
+/* ドロワー左端の掴みしろ。annotation パネルのリサイザーと同じ作り (境界を
+   またぐ 8px の透明な帯) だが、ドロワーが画面の大半を覆って端が分かりにくい
+   ので、掴める位置を示すグリップを常時出す。 */
+.tools-sheet-resizer {
+  position: absolute;
+  left: -4px;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  touch-action: none;
+  z-index: 1;
+}
+.tools-sheet-resizer::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 50%;
+  width: 4px;
+  height: 48px;
+  transform: translateY(-50%);
+  border-radius: 2px;
+  background: var(--fg-muted, #57606a);
+  opacity: 0.45;
+}
+.tools-sheet-resizer:hover,
+.tools-sheet-resizing .tools-sheet-resizer {
+  background: var(--accent-muted, rgba(9, 105, 218, 0.2));
+}
+.tools-sheet-resizer:hover::before,
+.tools-sheet-resizing .tools-sheet-resizer::before {
+  background: var(--accent, #0969da);
+  opacity: 1;
+}
+.tools-sheet-resizer:focus-visible {
+  outline: 2px solid var(--accent, #0969da);
+  outline-offset: -2px;
+}
+/* ドラッグ中はスライドのトランジションを切る (追従が遅れて見えるため)。 */
+.tools-sheet-resizing {
+  transition: none;
+}
+.tools-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 0 0 auto;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border, #d0d7de);
+}
+.tools-header h1 {
+  font-size: 16px;
+  margin: 0;
+}
+.tools-tabs {
+  margin-left: 4px;
+}
+.tools-close {
+  font: inherit;
+  font-size: 18px;
+  line-height: 1;
+  width: 28px;
+  height: 28px;
+  margin-left: auto;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--fg-muted, #57606a);
+  cursor: pointer;
+}
+.tools-close:hover {
+  background: var(--bg-mute, #eaeef2);
+  color: var(--fg, #1f2328);
+}
+.tools-body {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.tools-pane {
+  display: grid;
+  grid-template-columns: var(--tools-input-width, 1fr) 6px minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+}
+.tools-pane[hidden] {
+  display: none;
+}
+.tools-pane-side {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+.tools-pane-output {
+  border-left: 1px solid var(--border, #d0d7de);
+}
+.tools-pane-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border, #d0d7de);
+  background: var(--bg-soft, #f6f8fa);
+}
+.tools-pane-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--fg-muted, #57606a);
+}
+.tools-pane-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+.tools-pane-action {
+  font: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  height: 24px;
+  min-width: 32px;
+  padding: 0 8px;
+  border-radius: 6px;
+  border: 1px solid var(--border, #d0d7de);
+  background: var(--bg, #fff);
+  color: var(--fg);
+  cursor: pointer;
+}
+/* 入力側ヘッダは clear ボタンが直下に 1 つだけなので、それを右端に寄せる。
+   出力側はボタン群を .tools-pane-actions がまとめて右に送る。 */
+.tools-pane-head > .tools-pane-action {
+  margin-left: auto;
+}
+.tools-pane-action:hover:not([disabled]) {
+  background: var(--bg-mute, #eaeef2);
+}
+.tools-pane-action.active {
+  background: var(--bg-mute, #eaeef2);
+  border-color: var(--accent, #0969da);
+}
+.tools-pane-action[disabled] {
+  opacity: 0.5;
+  cursor: default;
+}
+/* 幅を固定しておかないと、文言が出た瞬間に隣のボタンがずれる。 */
+.tools-pane-status {
+  flex: 0 0 auto;
+  width: 168px;
+  text-align: right;
+  font-size: 11px;
+  color: var(--fg-muted, #57606a);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tools-pane-status-error {
+  color: var(--danger, #cf222e);
+}
+.tools-textarea {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  box-sizing: border-box;
+  resize: none;
+  border: 0;
+  outline: none;
+  padding: 12px;
+  background: var(--bg, #fff);
+  color: var(--fg);
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+    monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  tab-size: 2;
+}
+.tools-pane-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 12px 16px;
+}
+.tools-pane-empty,
+.tools-pane-error {
+  margin: 0;
+  padding: 24px 8px;
+  font-size: 13px;
+  color: var(--fg-muted, #57606a);
+}
+.tools-pane-error {
+  color: var(--danger, #cf222e);
+  white-space: pre-wrap;
+}
+/* 解釈はできたが注意点がある場合 (YAML の警告)。出力の上に添える。 */
+.tools-pane-warning {
+  margin: 0 0 12px 0;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: var(--bg-mute, #eaeef2);
+  color: var(--attn, #9a6700);
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+.tools-pane-resizer {
+  cursor: col-resize;
+  background: var(--border, #d0d7de);
+  opacity: 0.35;
+}
+.tools-pane-resizer:hover,
+.tools-pane-resizing .tools-pane-resizer {
+  opacity: 1;
+  background: var(--accent, #0969da);
+}
+.tools-pane-resizer:focus-visible {
+  outline: 2px solid var(--accent, #0969da);
+  outline-offset: -2px;
+}
+.tools-code {
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+    monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre;
+  tab-size: 2;
+}
+/* 出力ペインはファイル閲覧時より狭いので、markdown の 280px 固定 TOC を
+   横に置くと本文が潰れる。ここでは目次を本文の上に積む。 */
+.tools-pane-markdown .gdp-markdown-layout {
+  display: block;
+}
+.tools-pane-markdown .gdp-markdown-toc {
+  position: static;
+  max-height: 220px;
+  padding: 0 0 10px 0;
+  margin-bottom: 12px;
+  border-right: 0;
+  border-bottom: 1px solid var(--border);
+}
+/* shiki が `<span style="--shiki-light:#xxx;--shiki-dark:#yyy">` の inline
+   CSS 変数で token ごとの色を出すので、light/dark 用にそれぞれ参照する。
+   db-session-log-sql と同じスキーム。 */
+.tools-code span[style] {
+  color: var(--shiki-light);
+}
+@media (prefers-color-scheme: dark) {
+  .tools-code span[style] {
+    color: var(--shiki-dark);
+  }
+}
+html[data-theme="dark"] .tools-code span[style] {
+  color: var(--shiki-dark);
+}
+.tools-mermaid-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.tools-mermaid-canvas {
+  display: inline-block;
+  min-width: min-content;
+}
+.tools-pane-mermaid .tools-pane-body {
+  padding: 8px;
+}
+
 /* ==========================================================================
    Datastore page — premium glass theme
    データストアページ (.db-root) 全体にスコープした装飾レイヤ。

package/web/vendor/THIRD_PARTY_NOTICES.txt

@@ -216,6 +216,7 @@ Package Summary
 | vscode-languageserver-types | 3.17.5 | MIT | https://github.com/Microsoft/vscode-languageserver-node.git |
 | vscode-uri | 3.1.0 | MIT | https://github.com/microsoft/vscode-uri#readme |
 | xtend | 4.0.2 | MIT | https://github.com/Raynos/xtend |
+| yaml | 2.9.0 | ISC | https://eemeli.org/yaml/ |
 | zwitch | 2.0.4 | MIT | wooorm/zwitch |
 
 License Texts
@@ -8788,6 +8789,29 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
+yaml@2.9.0
+----------
+
+License metadata: ISC
+Source: https://eemeli.org/yaml/
+Package metadata: node_modules/yaml/package.json
+
+File: node_modules/yaml/LICENSE
+
+Copyright Eemeli Aro <eemeli@gmail.com>
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
+
 zwitch@2.0.4
 ------------