@davmash/bygone 0.7.0 → 0.8.0

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@davmash/bygone",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "See how change happened. Visual diff and file history.",
   "author": "David Mashburn",
   "license": "MIT",
   "homepage": "https://github.com/davidmashburn/bygone",
   "repository": {
     "type": "git",
-    "url": "https://github.com/davidmashburn/bygone.git"
+    "url": "git+https://github.com/davidmashburn/bygone.git"
   },
   "bugs": {
     "url": "https://github.com/davidmashburn/bygone/issues"
   },
   "bin": {
-    "bygone": "./bin/bygone.js"
+    "bygone": "bin/bygone.js"
   },
   "main": "./out/standalone-main.js",
   "files": [

package/web/index.html

@@ -18,6 +18,18 @@
                 <div id="tour-stats" class="tour-stats"></div>
             </div>
         </header>
+        <section class="tour-search" aria-label="Search tour">
+            <div class="tour-search-controls">
+                <input id="tour-search-input" type="search" placeholder="Search tour" aria-label="Search tour narrative and code">
+                <select id="tour-search-scope" aria-label="Tour search scope" title="Tour search scope">
+                    <option value="all">Narrative + code</option>
+                    <option value="narrative">Narrative</option>
+                    <option value="code">Code</option>
+                </select>
+            </div>
+            <div id="tour-search-status" class="tour-search-status" role="status" aria-live="polite"></div>
+            <div id="tour-search-results" class="tour-search-results" role="listbox"></div>
+        </section>
         <div class="tour-rail-sections">
             <section class="tour-rail-section">
                 <header class="tour-rail-heading">
@@ -66,6 +78,7 @@
             </div>
         </div>
     </section>
+    <div id="tour-narrative-resizer" class="tour-narrative-resizer" role="separator" aria-label="Resize tour header" aria-orientation="horizontal" aria-valuemin="180" tabindex="0"></div>
     <div class="web-toolbar">
         <div class="web-toolbar-group">
             <button id="web-compare-test" type="button" title="Compare sample files">Compare Test Files</button>

package/web/presenter.css

@@ -23,6 +23,7 @@
     border-right: 1px solid var(--tour-border);
     background: var(--tour-surface);
     box-shadow: 18px 0 45px rgba(0, 0, 0, 0.22);
+    font: 12px var(--tour-body-font);
 }
 
 .tour-shell[hidden] {
@@ -130,7 +131,6 @@ body.tour-mode.tour-discussion #container {
     display: inline-block;
     margin-bottom: 10px;
     color: #bcb5ff;
-    font-size: 12px;
     text-decoration: none;
 }
 
@@ -144,7 +144,6 @@ body.tour-mode.tour-discussion #container {
     gap: 0.5ch;
     align-items: baseline;
     color: var(--tour-muted);
-    font-size: 11px;
     line-height: 1.55;
 }
 
@@ -159,6 +158,78 @@ body.tour-mode.tour-discussion #container {
     white-space: nowrap;
 }
 
+.tour-search {
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--tour-border);
+    background: rgba(0, 0, 0, 0.12);
+}
+
+.tour-search-controls {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 6px;
+}
+
+.tour-search input,
+.tour-search select {
+    min-width: 0;
+    box-sizing: border-box;
+    padding: 6px 8px;
+    color: #f5f6fb;
+    border: 1px solid var(--tour-border);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.055);
+    font: inherit;
+}
+
+.tour-search input:focus,
+.tour-search select:focus {
+    border-color: rgba(169, 159, 255, 0.7);
+    outline: none;
+}
+
+.tour-search-status {
+    min-height: 16px;
+    padding: 5px 2px 0;
+    color: var(--tour-faint);
+}
+
+.tour-search-results {
+    display: grid;
+    max-height: min(230px, 28vh);
+    gap: 2px;
+    overflow: auto;
+}
+
+.tour-search-result {
+    display: grid;
+    min-width: 0;
+    padding: 6px 8px;
+    color: #e5e7f0;
+    border: 1px solid transparent;
+    border-radius: 5px;
+    background: transparent;
+    text-align: left;
+    cursor: pointer;
+}
+
+.tour-search-result:hover,
+.tour-search-result:focus-visible {
+    border-color: rgba(169, 159, 255, 0.28);
+    background: rgba(255, 255, 255, 0.055);
+    outline: none;
+}
+
+.tour-search-location,
+.tour-search-preview {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tour-search-location { color: #fff; font-weight: 650; }
+.tour-search-preview { margin-top: 2px; color: var(--tour-muted); font-family: var(--vscode-editor-font-family, monospace); }
+
 .tour-narrative {
     position: fixed;
     top: 0;
@@ -175,13 +246,36 @@ body.tour-mode.tour-discussion #container {
     border-bottom: 1px solid var(--tour-border);
     background: #151821;
     scrollbar-gutter: stable;
-    font-family: var(--tour-body-font);
+    font: 12px var(--tour-body-font);
 }
 
 .tour-narrative[hidden] {
     display: none;
 }
 
+.tour-narrative-resizer {
+    position: fixed;
+    z-index: 120;
+    top: calc(var(--tour-narrative-height) - 4px);
+    right: 0;
+    left: var(--tour-rail-width);
+    height: 8px;
+    cursor: row-resize;
+    touch-action: none;
+}
+
+.tour-narrative-resizer:hover,
+.tour-narrative-resizer:focus-visible,
+body.is-resizing-tour-narrative .tour-narrative-resizer {
+    background: rgba(169, 159, 255, 0.75);
+    outline: none;
+}
+
+body:not(.tour-mode) .tour-narrative-resizer,
+body.tour-discussion .tour-narrative-resizer {
+    display: none;
+}
+
 .tour-narrative-nav {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
@@ -229,7 +323,6 @@ body.tour-mode.tour-discussion #container {
     min-width: 0;
     color: var(--tour-muted);
     font-family: var(--vscode-editor-font-family, monospace);
-    font-size: 10px;
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
@@ -260,13 +353,12 @@ body.tour-mode.tour-discussion #container {
     min-height: 30px;
     padding: 8px 12px 6px 18px;
     color: var(--tour-muted);
-    font-size: 10px;
     font-weight: 750;
     letter-spacing: 0.09em;
     text-transform: uppercase;
 }
 
-.tour-rail-count { color: var(--tour-faint); font: 500 10px var(--vscode-editor-font-family, monospace); letter-spacing: 0; }
+.tour-rail-count { color: var(--tour-faint); font-weight: 500; font-family: var(--vscode-editor-font-family, monospace); letter-spacing: 0; }
 
 .tour-return-focus {
     margin-left: auto;
@@ -276,7 +368,7 @@ body.tour-mode.tour-discussion #container {
     border-radius: 4px;
     background: transparent;
     cursor: pointer;
-    font: 9px var(--tour-body-font);
+    font: inherit;
     letter-spacing: 0;
     text-transform: none;
 }
@@ -320,7 +412,6 @@ body.tour-mode.tour-discussion #container {
 .tour-file-marker {
     padding-top: 1px;
     color: var(--tour-faint);
-    font-size: 10px;
     text-align: center;
 }
 
@@ -343,13 +434,11 @@ body.tour-mode.tour-discussion #container {
 .tour-file-path {
     color: #f5f6fb;
     font-family: var(--vscode-editor-font-family, monospace);
-    font-size: 10px;
 }
 
 .tour-file-meta {
     margin-top: 2px;
     color: var(--tour-muted);
-    font-size: 9px;
 }
 
 .tour-file.is-omitted .tour-file-meta { color: #d7aa7b; }
@@ -357,7 +446,6 @@ body.tour-mode.tour-discussion #container {
 .tour-chapter-title {
     margin: 15px 10px 7px;
     color: var(--tour-muted);
-    font-size: 10px;
     font-weight: 750;
     letter-spacing: 0.09em;
     text-transform: uppercase;
@@ -390,7 +478,6 @@ body.tour-mode.tour-discussion #container {
 .tour-scene-number {
     padding-top: 1px;
     color: var(--tour-muted);
-    font-size: 10px;
 }
 
 .tour-scene-copy {
@@ -409,7 +496,6 @@ body.tour-mode.tour-discussion #container {
 .tour-scene-title {
     margin-bottom: 3px;
     color: #fff;
-    font-size: 12px;
     font-weight: 650;
 }
 
@@ -417,12 +503,10 @@ body.tour-mode.tour-discussion #container {
     margin-bottom: 3px;
     color: var(--tour-muted);
     font-family: var(--vscode-editor-font-family, monospace);
-    font-size: 10px;
 }
 
 .tour-scene-note {
     color: var(--tour-muted);
-    font-size: 10px;
 }
 
 .tour-commits-section {
@@ -439,7 +523,6 @@ body.tour-mode.tour-discussion #container {
     gap: 8px;
     margin: 0;
     color: var(--tour-muted);
-    font-size: 10px;
     font-weight: 750;
     letter-spacing: 0.09em;
     text-transform: uppercase;
@@ -478,7 +561,6 @@ body.tour-mode.tour-discussion #container {
 
 .tour-commits li {
     color: var(--tour-faint);
-    font-size: 10px;
     line-height: 1.35;
 }
 
@@ -509,7 +591,6 @@ body.tour-mode.tour-discussion #container {
 .tour-narrative-chapter {
     margin-bottom: 5px;
     color: var(--tour-accent-bright);
-    font-size: 10px;
     font-weight: 800;
     letter-spacing: 0.12em;
     text-transform: uppercase;
@@ -534,7 +615,6 @@ body.tour-mode.tour-discussion #container {
     margin: 0 0 9px;
     padding-left: 18px;
     color: var(--tour-body);
-    font-size: 11px;
     line-height: 1.5;
 }
 
@@ -543,7 +623,6 @@ body.tour-mode.tour-discussion #container {
     flex-wrap: wrap;
     gap: 0;
     color: var(--tour-muted);
-    font-size: 9px;
     line-height: 1.45;
 }
 
@@ -551,7 +630,6 @@ body.tour-mode.tour-discussion #container {
     margin: 0 8px;
     color: var(--tour-faint);
     content: "·";
-    font-size: 9px;
 }
 
 .tour-narrative-takeaway {
@@ -560,7 +638,6 @@ body.tour-mode.tour-discussion #container {
     color: var(--tour-body);
     border-left: 2px solid rgba(128, 117, 255, 0.28);
     background: rgba(255, 255, 255, 0.015);
-    font-size: 11px;
 }
 
 .tour-step {
@@ -576,7 +653,7 @@ body.tour-mode.tour-discussion #container {
 }
 
 .tour-step-title { color: #fff; font-size: 13px; font-weight: 750; }
-.tour-step-body { margin: 3px 0 0; color: var(--tour-body); font-size: 11px; line-height: 1.45; }
+.tour-step-body { margin: 3px 0 0; color: var(--tour-body); line-height: 1.45; }
 
 .tour-connection {
     margin-top: 7px;
@@ -584,7 +661,6 @@ body.tour-mode.tour-discussion #container {
     color: var(--tour-faint);
     border-top: 1px solid rgba(166, 140, 255, 0.2);
     font-family: var(--vscode-editor-font-family, monospace);
-    font-size: 9px;
 }
 
 body.tour-discussion .tour-narrative {
@@ -659,7 +735,7 @@ body.tour-discussion .tour-narrative-takeaway {
         width: 100%;
         height: var(--tour-rail-height);
         grid-template-columns: minmax(190px, 0.85fr) minmax(0, 1.15fr);
-        grid-template-rows: minmax(0, 1fr) auto;
+        grid-template-rows: auto minmax(0, 1fr) auto;
         border-right: 0;
         border-bottom: 1px solid var(--tour-border);
         box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
@@ -674,7 +750,7 @@ body.tour-discussion .tour-narrative-takeaway {
     }
 
     .tour-overview {
-        grid-row: 1 / span 2;
+        grid-row: 1 / span 3;
         overflow: auto;
         padding: 16px;
         border-right: 1px solid var(--tour-border);
@@ -685,14 +761,22 @@ body.tour-discussion .tour-narrative-takeaway {
         font-size: 17px;
     }
 
-    .tour-rail-sections {
+    .tour-search {
         grid-column: 2;
         grid-row: 1;
+        padding: 7px 8px 4px;
     }
 
-    .tour-commits-section {
+    .tour-search-results { max-height: 72px; }
+
+    .tour-rail-sections {
         grid-column: 2;
         grid-row: 2;
+    }
+
+    .tour-commits-section {
+        grid-column: 2;
+        grid-row: 3;
         max-height: 72px;
     }
 
@@ -702,6 +786,11 @@ body.tour-discussion .tour-narrative-takeaway {
         padding: 16px 18px;
     }
 
+    .tour-narrative-resizer {
+        top: calc(var(--tour-rail-height) + var(--tour-narrative-height) - 4px);
+        left: 0;
+    }
+
     body.tour-mode #container {
         width: 100vw;
         height: calc(100vh - var(--tour-rail-height) - var(--tour-narrative-height));