@youtyan/code-viewer 0.1.11 → 0.1.13

package/web/index.html

@@ -26,6 +26,7 @@
     <nav class="app-menu" aria-label="Views">
       <a class="app-menu-item active" data-route="repo" href="/">Repository</a>
       <a class="app-menu-item active" data-route="diff" href="/todif?from=HEAD&to=worktree">Diff Viewer</a>
+      <a class="app-menu-item" data-route="help" href="/help">Help</a>
     </nav>
     <div class="global-actions">
       <button id="theme" title="toggle theme">🌗</button>

package/web/style.css

@@ -22,6 +22,7 @@
   --accent-emph:   #0550ae;
   --accent-subtle: #ddf4ff;
   --accent-muted:  #54aeff66;
+  --scope-accent:  #bf8700;
   /* success / danger / attention / done */
   --success:        #1a7f37;
   --success-emph:   #1f883d;
@@ -29,6 +30,8 @@
   --danger:         #cf222e;
   --danger-emph:    #cf222e;
   --attn:           #9a6700;
+  --line-hit-bg:    #fff8c5;
+  --line-hit-border:var(--accent);
   --done:           #8250df;
   /* diff colors (GitHub exact) */
   --diff-add-bg:        #dafbe1;
@@ -68,12 +71,15 @@
   --accent-emph:   #1f6feb;
   --accent-subtle: rgba(56,139,253,0.10);
   --accent-muted:  rgba(56,139,253,0.40);
+  --scope-accent:  #d29922;
   --success:        #3fb950;
   --success-emph:   #238636;
   --success-subtle: rgba(46,160,67,0.15);
   --danger:         #f85149;
   --danger-emph:    #da3633;
   --attn:           #d29922;
+  --line-hit-bg:    rgba(187,128,9,0.18);
+  --line-hit-border:var(--accent);
   --done:           #a371f7;
   --diff-add-bg:        rgba(46,160,67,0.15);
   --diff-add-num-bg:    rgba(46,160,67,0.30);
@@ -106,6 +112,140 @@ html, body {
 /* Window scrolls; global header + topbar + sidebar are fixed */
 #app { display: block; }
 
+.gdp-palette-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+  background: rgba(31, 35, 40, 0.18);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: min(12vh, 96px);
+}
+
+[data-theme="dark"] .gdp-palette-backdrop {
+  background: rgba(1, 4, 9, 0.45);
+}
+
+.gdp-palette {
+  width: min(760px, calc(100vw - 32px));
+  max-height: min(620px, calc(100vh - 48px));
+  display: grid;
+  grid-template-rows: auto auto auto auto 1fr;
+  overflow: hidden;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 16px 48px rgba(31, 35, 40, 0.28);
+}
+
+.gdp-palette-label {
+  padding: 12px 16px 0;
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.gdp-palette-input {
+  width: 100%;
+  border: 0;
+  border-bottom: 1px solid var(--border);
+  padding: 10px 16px 14px;
+  background: transparent;
+  color: var(--fg);
+  font-size: 24px;
+  line-height: 1.25;
+  outline: none;
+}
+
+.gdp-palette-status {
+  min-height: 28px;
+  padding: 6px 16px;
+  color: var(--fg-muted);
+  font-size: 12px;
+  border-bottom: 1px solid var(--border-muted);
+}
+
+.gdp-palette-controls {
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 16px 0;
+}
+
+.gdp-palette-mode-button {
+  height: 24px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg-muted);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.gdp-palette-mode-button[aria-pressed="true"] {
+  border-color: var(--accent);
+  background: var(--accent-subtle);
+  color: var(--accent);
+}
+
+.gdp-palette-mode-hint {
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+
+.gdp-palette-list {
+  overflow: auto;
+  padding: 6px;
+}
+
+.gdp-palette-row {
+  width: 100%;
+  min-height: 52px;
+  display: grid;
+  grid-template-rows: auto auto;
+  gap: 2px;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--fg);
+  text-align: left;
+  cursor: pointer;
+}
+
+.gdp-palette-row[aria-selected="true"] {
+  background: var(--accent-subtle);
+}
+
+.gdp-palette-row-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.gdp-palette-row-detail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+}
+
+.gdp-palette-row-detail mark {
+  background: var(--attn);
+  color: var(--fg-onemphasis);
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
 /* ===== Global header ===== */
 #global-header {
   position: fixed;
@@ -666,6 +806,18 @@ html, body {
   padding: 0 0 32px;
   z-index: 30;
 }
+body[data-focus-scope="sidebar"] #sidebar {
+  background: color-mix(in oklab, var(--bg-soft) 97%, var(--scope-accent) 3%);
+  outline: 1px solid color-mix(in oklab, var(--scope-accent) 58%, transparent);
+  outline-offset: -1px;
+  box-shadow: inset -3px 0 0 var(--scope-accent);
+}
+body[data-focus-scope="main"] #content {
+  background: color-mix(in oklab, var(--bg) 98%, var(--scope-accent) 2%);
+  outline: 1px solid color-mix(in oklab, var(--scope-accent) 58%, transparent);
+  outline-offset: -1px;
+  box-shadow: inset 3px 0 0 var(--scope-accent);
+}
 .sb-head {
   display: flex; justify-content: space-between; align-items: center;
   padding: 14px 16px 10px;
@@ -788,6 +940,140 @@ body.gdp-resizing #sidebar-resizer {
 body.gdp-resizing { cursor: col-resize !important; user-select: none; }
 body.gdp-resizing * { user-select: none !important; }
 
+body.gdp-help-page #topbar,
+body.gdp-help-page #sidebar,
+body.gdp-help-page #sidebar-resizer {
+  display: none;
+}
+body.gdp-help-page #content {
+  margin-left: 0;
+  padding-top: calc(var(--global-header-h) + 28px);
+}
+.gdp-help-shell {
+  width: 100%;
+  max-width: none;
+  margin: 0;
+}
+.gdp-help-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 22px;
+}
+.gdp-help-header h1 {
+  margin: 0;
+  font-size: 28px;
+}
+.gdp-help-language {
+  appearance: none;
+  min-width: 92px;
+  height: 34px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background:
+    linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%) right 15px center / 5px 5px no-repeat,
+    linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%) right 10px center / 5px 5px no-repeat,
+    var(--bg);
+  color: var(--fg);
+  padding: 0 34px 0 12px;
+  font: inherit;
+  font-size: 13px;
+  line-height: 32px;
+  cursor: pointer;
+}
+.gdp-help-language:hover {
+  border-color: var(--border-strong);
+}
+.gdp-help-language:focus {
+  border-color: var(--accent);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--accent-muted);
+}
+.gdp-help-layout {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: 28px;
+  align-items: start;
+}
+.gdp-help-nav {
+  position: sticky;
+  top: calc(var(--global-header-h) + 20px);
+  display: grid;
+  gap: 4px;
+  padding-right: 16px;
+  border-right: 1px solid var(--border-muted);
+}
+.gdp-help-nav button {
+  appearance: none;
+  border: 0;
+  border-left: 3px solid transparent;
+  border-radius: 0 6px 6px 0;
+  background: transparent;
+  color: var(--fg-muted);
+  padding: 8px 10px;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+}
+.gdp-help-nav button:hover {
+  background: var(--bg-mute);
+  color: var(--fg);
+}
+.gdp-help-nav button.active {
+  border-left-color: var(--accent);
+  background: var(--accent-subtle);
+  color: var(--accent-emph);
+  font-weight: 700;
+}
+.gdp-help-content h2 {
+  margin: 0 0 8px;
+  font-size: 24px;
+}
+.gdp-help-content > p {
+  margin: 0 0 24px;
+  color: var(--fg-muted);
+}
+.gdp-help-group {
+  margin: 0 0 28px;
+}
+.gdp-help-group h3 {
+  margin: 0 0 10px;
+  font-size: 16px;
+}
+.gdp-help-group table {
+  width: 100%;
+  border-collapse: collapse;
+  border-top: 1px solid var(--border-muted);
+}
+.gdp-help-group th,
+.gdp-help-group td {
+  padding: 11px 8px;
+  border-bottom: 1px solid var(--border-muted);
+  vertical-align: top;
+}
+.gdp-help-group th {
+  width: 230px;
+  color: var(--fg);
+  font-weight: 600;
+  text-align: left;
+}
+.gdp-help-group td {
+  color: var(--fg-muted);
+}
+.gdp-help-group kbd {
+  display: inline-block;
+  min-width: 24px;
+  padding: 2px 6px;
+  border: 1px solid var(--border);
+  border-bottom-color: var(--border-strong);
+  border-radius: 5px;
+  background: var(--bg-soft);
+  color: var(--fg);
+  font: 12px "Monaspace Neon", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  text-align: center;
+}
+
 /* ===== Tree view ===== */
 #filelist.tree {
   padding: 4px 0 0;
@@ -1286,6 +1572,17 @@ table.d2h-diff-table .d2h-code-line-prefix {
   width: 1.5em;
   padding-left: 4px;
 }
+
+table.d2h-diff-table tr.gdp-diff-line-target > td,
+table.d2h-diff-table tr.gdp-diff-line-target .d2h-code-line,
+table.d2h-diff-table tr.gdp-diff-line-target .d2h-code-side-line,
+table.d2h-diff-table tr.gdp-diff-line-target .d2h-code-line-ctn {
+  background: var(--line-hit-bg) !important;
+  background-color: var(--line-hit-bg) !important;
+}
+table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
+  box-shadow: inset 3px 0 0 var(--line-hit-border), inset -1px 0 0 var(--border-muted);
+}
 /* Stack height = number of buttons * 20px. With 1 button = 20px row,
  * with 2 (↑+↓) = 40px row, matching GitHub. */
 .gdp-expand-stack {
@@ -1370,6 +1667,8 @@ table.d2h-diff-table .d2h-code-line-prefix {
 }
 .gdp-copy-path.copied { color: var(--success); }
 .gdp-copy-path.failed { color: var(--danger); }
+.gdp-copy-source.copied { color: var(--success); }
+.gdp-copy-source.failed { color: var(--danger); }
 .gdp-open-path.opened { color: var(--success); }
 .gdp-open-path.failed { color: var(--danger); }
 .gdp-file-unfold[aria-pressed="true"] {
@@ -1589,6 +1888,23 @@ table.d2h-diff-table .d2h-code-line-prefix {
   color: var(--fg);
   border-bottom-color: var(--blob-tab-active);
 }
+.gdp-source-tabs .gdp-copy-source {
+  margin-left: auto;
+  align-self: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
+}
+.gdp-source-virtual-copy {
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
+}
 .gdp-source-viewer > [hidden],
 .gdp-markdown-layout[hidden],
 .gdp-source-table[hidden] {
@@ -1602,6 +1918,52 @@ table.d2h-diff-table .d2h-code-line-prefix {
   font-size: 12px;
   line-height: 20px;
 }
+.gdp-source-table tr.gdp-source-line-target {
+  background: var(--line-hit-bg);
+}
+.gdp-source-table tr.gdp-source-cursor .gdp-source-line-number,
+.gdp-source-virtual-row.gdp-source-cursor .gdp-source-virtual-line-number {
+  color: var(--fg);
+  box-shadow: inset 3px 0 0 var(--scope-accent), inset -1px 0 0 var(--border-muted);
+}
+.gdp-source-table tr.gdp-source-cursor .gdp-source-line-code,
+.gdp-source-virtual-row.gdp-source-cursor .gdp-source-virtual-line-code {
+  background: color-mix(in oklab, var(--bg) 90%, var(--scope-accent) 10%) !important;
+}
+.gdp-source-table tr.gdp-source-cursor .gdp-source-line-code::before,
+.gdp-source-virtual-row.gdp-source-cursor .gdp-source-virtual-line-code::before {
+  content: "";
+  display: inline-block;
+  width: 2px;
+  height: 1.05em;
+  margin: 0 8px 0 -8px;
+  vertical-align: -0.16em;
+  background: var(--scope-accent);
+}
+.gdp-source-table tr.gdp-source-line-target .gdp-source-line-number,
+.gdp-source-table tr.gdp-source-line-target .gdp-source-line-code,
+.gdp-source-virtual-row.gdp-source-line-target {
+  background: var(--line-hit-bg) !important;
+  background-color: var(--line-hit-bg) !important;
+}
+.gdp-source-table tr.gdp-source-line-target > td.gdp-source-line-number,
+.gdp-source-virtual-row.gdp-source-line-target > .gdp-source-virtual-line-number {
+  background: var(--line-hit-bg) !important;
+  background-color: var(--line-hit-bg) !important;
+}
+.gdp-source-table tr.gdp-source-line-target .gdp-source-line-number,
+.gdp-source-virtual-row.gdp-source-line-target .gdp-source-virtual-line-number {
+  box-shadow: inset 3px 0 0 var(--line-hit-border), inset -1px 0 0 var(--border-muted);
+}
+.gdp-source-line-target .gdp-source-line-code,
+.gdp-source-line-target .gdp-source-virtual-line-code {
+  background: var(--line-hit-bg) !important;
+  background-color: var(--line-hit-bg) !important;
+}
+.gdp-source-line-target .gdp-source-line-code.shiki span,
+.gdp-source-line-target .gdp-source-virtual-line-code.hljs span {
+  background: transparent !important;
+}
 .gdp-standalone-source .gdp-source-table {
   display: block;
   overflow: auto;
@@ -1660,6 +2022,11 @@ table.d2h-diff-table .d2h-code-line-prefix {
 .gdp-source-line-code.hljs {
   background: var(--bg);
 }
+.gdp-source-line-target .gdp-source-line-code.hljs,
+.gdp-source-line-target .gdp-source-line-code.shiki,
+.gdp-source-line-target .gdp-source-virtual-line-code.hljs {
+  background: var(--line-hit-bg);
+}
 .gdp-source-line-code.shiki,
 .gdp-source-line-code.shiki span {
   color: var(--shiki-light) !important;
@@ -1726,6 +2093,9 @@ table.d2h-diff-table .d2h-code-line-prefix {
   border-color: var(--accent);
   color: var(--accent);
 }
+.gdp-source-virtual-copy:hover {
+  border-color: var(--border);
+}
 .gdp-source-virtual-scroller {
   position: relative;
   overflow: auto;
@@ -1733,6 +2103,8 @@ table.d2h-diff-table .d2h-code-line-prefix {
   font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   font-size: 12px;
   line-height: 20px;
+  cursor: pointer;
+  user-select: none;
 }
 .gdp-source-virtual-spacer {
   position: relative;
@@ -1760,6 +2132,7 @@ table.d2h-diff-table .d2h-code-line-prefix {
   background: var(--bg);
   box-shadow: inset -1px 0 0 var(--border-muted);
   font-variant-numeric: tabular-nums;
+  cursor: pointer;
   user-select: none;
 }
 .gdp-source-virtual-line-code {

package/web-src/routes.ts

@@ -3,6 +3,13 @@ export type DiffRange = {
   to: string;
 };
 
+export type SourceLineRange = {
+  start: number;
+  end: number;
+};
+
+export type SourceLineTarget = number | SourceLineRange;
+
 export type SourceFileTarget = {
   path: string;
   ref: string;
@@ -10,11 +17,12 @@ export type SourceFileTarget = {
 
 export type AppRoute =
   | { screen: 'repo'; ref: string; path: string; range: DiffRange }
-  | { screen: 'diff'; range: DiffRange }
-  | { screen: 'file'; path: string; ref: string; range: DiffRange; view?: 'blob' | 'detail' }
+  | { screen: 'diff'; range: DiffRange; path?: string; line?: SourceLineTarget }
+  | { screen: 'file'; path: string; ref: string; range: DiffRange; view?: 'blob' | 'detail'; line?: SourceLineTarget }
+  | { screen: 'help'; range: DiffRange; lang: string; section: string }
   | { screen: 'unknown'; reason: 'unknown-pathname' | 'missing-path'; rawPathname: string; rawSearch: string; range: DiffRange };
 
-export const SPA_PATHS = ['/todif', '/todiff', '/file'] as const;
+export const SPA_PATHS = ['/todif', '/todiff', '/file', '/help'] as const;
 export const APP_ENTRY_PATHS = ['/', '/index.html'] as const;
 
 export function assertNever(value: never): never {
@@ -31,6 +39,25 @@ function parseLegacyRange(value: string | null | undefined, fallback: DiffRange)
   };
 }
 
+function parseLineTarget(value: string | null | undefined): SourceLineTarget | undefined {
+  const raw = value || '';
+  const range = /^(\d+)-(\d+)$/.exec(raw);
+  if (range) {
+    const a = Number(range[1]);
+    const b = Number(range[2]);
+    const start = Math.min(a, b);
+    const end = Math.max(a, b);
+    if (start > 0) return { start, end };
+    return undefined;
+  }
+  const line = Number(raw);
+  return Number.isInteger(line) && line > 0 ? line : undefined;
+}
+
+function formatLineTarget(line: SourceLineTarget): string {
+  return typeof line === 'number' ? String(line) : line.start + '-' + line.end;
+}
+
 export function parseRoute(pathname: string, search: string, fallbackRange: DiffRange): AppRoute {
   const params = new URLSearchParams(search);
   const legacyRange = parseLegacyRange(params.get('range'), fallbackRange);
@@ -49,14 +76,27 @@ export function parseRoute(pathname: string, search: string, fallbackRange: Diff
       };
     case '/todif':
     case '/todiff':
-      return { screen: 'diff', range };
+      return {
+        screen: 'diff',
+        range,
+        ...(params.get('path') ? { path: params.get('path') || '' } : {}),
+        ...(parseLineTarget(params.get('line')) ? { line: parseLineTarget(params.get('line')) } : {}),
+      };
     case '/file': {
       const path = params.get('path') || '';
       const target = params.get('target') || '';
       const ref = target || params.get('ref') || 'worktree';
+      const line = parseLineTarget(params.get('line'));
       if (!path) return { screen: 'unknown', reason: 'missing-path', rawPathname: pathname, rawSearch: search, range };
-      return { screen: 'file', path, ref, range, view: target ? 'blob' : 'detail' };
+      return { screen: 'file', path, ref, range, view: target ? 'blob' : 'detail', ...(line ? { line } : {}) };
     }
+    case '/help':
+      return {
+        screen: 'help',
+        range,
+        lang: params.get('lang') || 'en',
+        section: params.get('section') || 'keybindings',
+      };
     default:
       return { screen: 'unknown', reason: 'unknown-pathname', rawPathname: pathname, rawSearch: search, range };
   }
@@ -74,15 +114,26 @@ export function buildRoute(route: AppRoute): string {
     case 'file':
       if (route.view === 'blob') {
         return '/file?path=' + encodeURIComponent(route.path) +
-          '&target=' + encodeURIComponent(route.ref || 'worktree');
+          '&target=' + encodeURIComponent(route.ref || 'worktree') +
+          (route.line ? '&line=' + encodeURIComponent(formatLineTarget(route.line)) : '');
       }
       return '/file?path=' + encodeURIComponent(route.path) +
         '&ref=' + encodeURIComponent(route.ref || 'worktree') +
         '&from=' + encodeURIComponent(route.range.from || '') +
-        '&to=' + encodeURIComponent(route.range.to || 'worktree');
+        '&to=' + encodeURIComponent(route.range.to || 'worktree') +
+        (route.line ? '&line=' + encodeURIComponent(formatLineTarget(route.line)) : '');
     case 'diff':
       return '/todif?from=' + encodeURIComponent(route.range.from || '') +
-        '&to=' + encodeURIComponent(route.range.to || 'worktree');
+        '&to=' + encodeURIComponent(route.range.to || 'worktree') +
+        (route.path ? '&path=' + encodeURIComponent(route.path) : '') +
+        (route.line ? '&line=' + encodeURIComponent(formatLineTarget(route.line)) : '');
+    case 'help': {
+      const params = new URLSearchParams();
+      if (route.lang && route.lang !== 'en') params.set('lang', route.lang);
+      if (route.section && route.section !== 'keybindings') params.set('section', route.section);
+      const qs = params.toString();
+      return '/help' + (qs ? '?' + qs : '');
+    }
     case 'unknown':
       return '/todif?from=' + encodeURIComponent(route.range.from || '') +
         '&to=' + encodeURIComponent(route.range.to || 'worktree');