npm - tui-cap - Versions diffs - 0.1.0 - Mend

tui-cap 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/LICENSE +21 -0
package/README.md +213 -0
package/dist/anim.js +104 -0
package/dist/animation.js +96 -0
package/dist/asciinema.js +125 -0
package/dist/cli.js +648 -0
package/dist/edits.js +527 -0
package/dist/fonts.js +87 -0
package/dist/input.js +136 -0
package/dist/meta.js +58 -0
package/dist/palette.js +111 -0
package/dist/parse.js +659 -0
package/dist/paths.js +100 -0
package/dist/record-pty.js +148 -0
package/dist/record.js +100 -0
package/dist/server.js +978 -0
package/dist/svg.js +767 -0
package/dist/timing.js +112 -0
package/dist/types.js +2 -0
package/dist/version.js +232 -0
package/dist/web/app.js +3312 -0
package/dist/web/fonts/MonaSansMonoVF-wght.woff2 +0 -0
package/dist/web/fonts/MonaSansVF-wdth-wght-opsz.woff2 +0 -0
package/dist/web/fonts/README.md +13 -0
package/dist/web/index.html +382 -0
package/dist/web/logo.svg +11 -0
package/dist/web/styles.css +925 -0
package/dist/web/timing-model.js +115 -0
package/dist/web/vendor/mp4-muxer.LICENSE +21 -0
package/dist/web/vendor/mp4-muxer.js +1885 -0
package/package.json +61 -0

package/dist/web/fonts/MonaSansMonoVF-wght.woff2 ADDED Viewed

Binary file

package/dist/web/fonts/MonaSansVF-wdth-wght-opsz.woff2 ADDED Viewed

Binary file

package/dist/web/fonts/README.md ADDED Viewed

@@ -0,0 +1,13 @@
+# Mona Sans
+These web fonts ship with the GUI so it can render GitHub's Primer Brand
+typography offline, without pulling in an npm package at build time.
+- **Mona Sans** (`MonaSansVF-wdth-wght-opsz.woff2`) — variable font
+- **Mona Sans Mono** (`MonaSansMonoVF-wght.woff2`) — variable monospace font
+© GitHub, Inc. Mona Sans is distributed under the SIL Open Font License, v1.1.
+Source: https://github.com/github/mona-sans
+The full license text is available at https://openfontlicense.org and in the
+upstream Mona Sans repository.

package/dist/web/index.html ADDED Viewed

@@ -0,0 +1,382 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>GHCP Capture — recordings</title>
+    <link rel="icon" type="image/svg+xml" href="logo.svg" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <div class="brand">
+        <img class="logo" src="logo.svg" alt="" aria-hidden="true" />
+        <h1>GitHub Copilot CLI Capture</h1>
+      </div>
+      <div class="view-scale" role="group" aria-label="Canvas scale">
+        <button id="zoomFitBtn" class="btn small" type="button"
+          title="Fit the canvas to the view" aria-pressed="true" disabled>Zoom to Fit</button>
+        <input id="zoomRange" class="zoom-range" type="range" min="10" max="400" value="100" step="1"
+          title="Zoom the canvas to an arbitrary size" aria-label="Canvas zoom" disabled />
+        <output id="zoomPct" class="zoom-pct muted small" for="zoomRange">100%</output>
+        <button id="zoom100Btn" class="btn small" type="button"
+          title="Show the canvas at actual size (100%)" aria-pressed="false" disabled>100%</button>
+      </div>
+      <button id="newRecBtn" class="btn btn-primary">+ New recording</button>
+    </header>
+    <!-- Update notice — shown only when a newer npm release is available -->
+    <div id="updateBanner" class="update-banner hidden" role="status" aria-live="polite">
+      <span class="ub-icon" aria-hidden="true">⬆</span>
+      <span id="updateMsg" class="ub-msg"></span>
+      <span class="ub-actions">
+        <button id="updateBtn" class="btn small btn-primary" type="button">Update now</button>
+        <button id="updateDismiss" class="btn small" type="button">Later</button>
+      </span>
+    </div>
+    <main class="layout">
+      <!-- Library -->
+      <aside class="panel library">
+        <div class="panel-head">
+          <h2>Library</h2>
+          <div class="panel-head-actions">
+            <span id="libStatus" class="muted small"></span>
+            <button id="openFolderBtn" class="rec-act lib-folder" type="button"
+              title="Open captures folder" aria-label="Open captures folder"></button>
+          </div>
+        </div>
+        <ul id="library" class="rec-list"></ul>
+        <div id="libLoading" class="lib-loading muted hidden">
+          <span class="spinner" aria-hidden="true"></span>
+          <span>Loading captures…</span>
+        </div>
+        <p id="libEmpty" class="empty muted hidden">
+          No recordings yet. Use <strong>+ New recording</strong> to capture one.
+        </p>
+      </aside>
+      <!-- Preview + timeline -->
+      <section class="stage">
+        <div class="edit-toolbar">
+          <button id="editToggle" class="btn small" type="button" aria-pressed="false">
+            ✎ Edit content
+          </button>
+          <span id="editHint" class="muted small edit-hint hidden">
+            Drag across a line to recolor or rewrite it — edits follow that text across every frame.
+          </span>
+          <span id="editTools" class="edit-tools hidden">
+            <button id="undoBtn" class="btn icon small" type="button" title="Undo (⌘/Ctrl+Z)" disabled>↶</button>
+            <button id="redoBtn" class="btn icon small" type="button" title="Redo (⌘/Ctrl+Shift+Z)" disabled>↷</button>
+            <span id="editCount" class="muted small"></span>
+            <button id="resetEdits" class="btn small danger-text hidden" type="button">Reset all</button>
+          </span>
+        </div>
+        <div id="previewWrap" class="preview-wrap">
+          <img id="preview" class="preview" alt="Rendered frame" />
+          <div id="selOverlay" class="sel-overlay hidden">
+            <div id="selHover" class="sel-cell sel-hover hidden"></div>
+            <div id="selRect" class="sel-cell sel-rect hidden"></div>
+            <div id="selEditor" class="sel-editor hidden">
+              <div id="selEditGhost" class="sel-edit-ghost"></div>
+              <div id="selEditText" class="sel-edit-text"></div>
+              <span id="selCaret" class="sel-caret"></span>
+              <input id="selInput" class="sel-input" type="text" spellcheck="false"
+                autocomplete="off" autocapitalize="off" autocorrect="off"
+                aria-label="Edit text in place" />
+            </div>
+          </div>
+          <p id="previewEmpty" class="empty muted">Select a recording to preview its frames.</p>
+          <div id="hud" class="hud hidden" aria-hidden="true">
+            <div class="hud-row hud-title">
+              <span id="hudState" class="hud-state">⏸ paused</span>
+              <span class="hud-tag">timing</span>
+              <button id="hudClose" class="hud-close" type="button" title="Close timing debug" aria-label="Close timing debug">✕</button>
+            </div>
+            <div class="hud-row"><span class="hud-k">frame</span><span id="hudFrame" class="hud-v">—</span></div>
+            <div class="hud-row"><span class="hud-k">this</span><span id="hudThis" class="hud-v">—</span></div>
+            <div class="hud-row"><span class="hud-k">last shown</span><span id="hudActual" class="hud-v">—</span></div>
+            <div class="hud-row"><span class="hud-k">rate</span><span id="hudFps" class="hud-v">—</span></div>
+            <div class="hud-row"><span class="hud-k">elapsed</span><span id="hudElapsed" class="hud-v">—</span></div>
+            <div class="hud-row"><span class="hud-k">drift</span><span id="hudDrift" class="hud-v">—</span></div>
+            <div class="hud-row hud-foot"><span id="hudSettings" class="hud-v">—</span></div>
+            <div class="hud-actions">
+              <button id="selfTestBtn" type="button" class="btn small" disabled>Run timing test</button>
+            </div>
+            <p id="selfTestResult" class="muted small timing-result hidden"></p>
+          </div>
+        </div>
+        <div class="timeline">
+          <div class="timeline-toolbar">
+            <div class="tl-group transport">
+              <button id="goStartBtn" class="btn icon" title="Go to start (Home)" aria-label="Go to start" disabled></button>
+              <button id="prevBtn" class="btn icon" title="Previous frame (←)" aria-label="Previous frame" disabled></button>
+              <button id="playBtn" class="btn icon" title="Play animation (space)" aria-label="Play animation" disabled></button>
+              <button id="nextBtn" class="btn icon" title="Next frame (→)" aria-label="Next frame" disabled></button>
+              <button id="goEndBtn" class="btn icon" title="Go to end (End)" aria-label="Go to end" disabled></button>
+            </div>
+            <div id="selGroup" class="tl-group selection hidden">
+              <label class="tl-len">
+                <span id="selLenLabel" class="muted small">Length</span>
+                <input id="selLen" type="number" min="0" step="50" />
+                <span class="unit muted small">ms</span>
+              </label>
+              <button id="selReset" class="btn small" title="Reset to captured timing">↺</button>
+              <button id="selDelete" class="btn small danger" title="Delete / skip frames (Delete)">Delete</button>
+            </div>
+            <span id="frameLabel" class="frame-label muted">—</span>
+            <div class="tl-spacer"></div>
+            <div class="tl-group view">
+              <button id="hideSkippedBtn" class="btn small" title="Show deleted frames in the timeline" aria-pressed="false" disabled>Show deleted</button>
+            </div>
+            <div class="tl-group zoom">
+              <span class="zoom-ico muted small" aria-hidden="true">Zoom</span>
+              <input id="zoom" type="range" min="0" max="1000" value="0" step="1" aria-label="Timeline zoom" disabled />
+              <button id="fitBtn" class="btn small" title="Fit entire timeline" disabled>Fit</button>
+            </div>
+          </div>
+          <div id="timelineScroll" class="timeline-scroll">
+            <div id="timelineRuler" class="timeline-ruler" title="Click or drag to scrub"></div>
+            <div id="timelineTrack" class="timeline-track"></div>
+            <p id="timelineEmpty" class="empty muted timeline-empty">Select a recording to see its timeline.</p>
+          </div>
+        </div>
+      </section>
+      <!-- Render settings -->
+      <aside class="panel settings">
+        <div class="panel-head"><h2>Render settings</h2></div>
+        <label class="field">
+          <span>Window title</span>
+          <input id="title" type="text" value="" />
+        </label>
+        <label class="field checkbox">
+          <input id="chrome" type="checkbox" checked />
+          <span>Window chrome</span>
+        </label>
+        <label class="field">
+          <span>Window style</span>
+          <select id="chromeStyle">
+            <option value="mac">macOS</option>
+            <option value="mac-inactive" selected>macOS — inactive</option>
+            <option value="windows">Windows</option>
+            <option value="windows-inactive">Windows — inactive</option>
+          </select>
+        </label>
+        <label class="field">
+          <span>Font size <em id="fontSizeVal" class="muted">14px</em></span>
+          <input id="fontSize" type="range" min="8" max="32" value="14" step="1" />
+        </label>
+        <label class="field">
+          <span>Line spacing <em id="lineHeightVal" class="muted">1.25</em></span>
+          <input id="lineHeight" type="range" min="1" max="1.8" value="1.25" step="0.05" />
+        </label>
+        <div class="reset-row">
+          <button id="resetType" type="button" class="btn small">Reset to defaults</button>
+        </div>
+        <div class="field">
+          <span>Recorded size (char)</span>
+          <output id="recordedSize" class="recorded-size">—</output>
+        </div>
+        <div class="export">
+          <button id="downloadBtn" class="btn btn-primary block" disabled>Save SVG…</button>
+          <div class="export-png">
+            <button id="downloadPngBtn" class="btn" disabled>Save PNG…</button>
+            <select id="pngScale" class="png-scale" aria-label="PNG scale" disabled>
+              <option value="1">1×</option>
+              <option value="2" selected>2×</option>
+              <option value="3">3×</option>
+              <option value="4">4×</option>
+            </select>
+          </div>
+        </div>
+        <div class="panel-head anim-head">
+          <h2>Animation</h2>
+          <span id="animStatus" class="muted small"></span>
+        </div>
+        <p id="animNote" class="muted small anim-note hidden"></p>
+        <div class="field-row">
+          <label class="field">
+            <span>Frame rate</span>
+            <select id="animFps">
+              <option value="12">12 fps</option>
+              <option value="15">15 fps</option>
+              <option value="24">24 fps</option>
+              <option value="30" selected>30 fps</option>
+              <option value="60">60 fps</option>
+            </select>
+          </label>
+          <label class="field">
+            <span>Export size</span>
+            <select id="animScale">
+              <option value="1">1×</option>
+              <option value="2" selected>2×</option>
+              <option value="3">3×</option>
+              <option value="4">4×</option>
+            </select>
+          </label>
+        </div>
+        <label class="field">
+          <span>Idle cap <em id="idleCapVal" class="muted">1.5s</em></span>
+          <input id="idleCap" type="range" min="1" max="301" value="90" step="1"
+            title="Clamp idle gaps; slide fully right for ∞ (use the real recorded hold)" />
+        </label>
+        <label class="field">
+          <span>Speed <em id="speedVal" class="muted">1.0×</em></span>
+          <input id="speed" type="range" min="0.25" max="4" value="1" step="0.25" />
+        </label>
+        <label class="field checkbox" title="Show a block cursor in the prompt box — present whenever a prompt is open, and tracking the caret while typing. Appears in preview, SVG export, and MP4.">
+          <input id="cursor" type="checkbox" checked />
+          <span>Cursor</span>
+        </label>
+        <label class="field checkbox">
+          <input id="smoothTyping" type="checkbox" />
+          <span>Smooth user typing</span>
+        </label>
+        <label class="field">
+          <span>Typing rate <em id="typingCpsVal" class="muted">30 cps</em></span>
+          <input id="typingCps" type="range" min="10" max="60" value="30" step="1"
+            title="Constant rate for smoothed typing (characters per second)" />
+        </label>
+        <div class="anim-meta">
+          <span id="animLen" class="muted small">—</span>
+          <button id="clearOverrides" type="button" class="btn small hidden">Reset frame edits</button>
+        </div>
+        <div class="export">
+          <button id="exportMp4Btn" class="btn btn-primary block" disabled>Export MP4…</button>
+          <div id="exportProgress" class="progress hidden">
+            <div class="progress-track"><div id="exportBar" class="progress-bar"></div></div>
+            <span id="exportPct" class="progress-pct small muted">0%</span>
+          </div>
+        </div>
+        <div id="editsSection" class="edits-section hidden">
+          <div class="panel-head edits-head">
+            <h2>Content edits</h2>
+            <span id="editsCount" class="muted small"></span>
+          </div>
+          <p class="muted small edits-empty" id="editsEmpty">
+            No edits yet. Turn on <strong>Edit content</strong> over the preview, then drag
+            across a line of text.
+          </p>
+          <ul id="editsList" class="edits-list"></ul>
+        </div>
+        <button id="timingDebugLink" type="button" class="timing-debug-link">timing debug</button>
+      </aside>
+    </main>
+    <!-- New recording helper -->
+    <dialog id="recDialog" class="dialog">
+      <form method="dialog">
+        <h2>New recording</h2>
+        <p class="muted small">
+          Recording attaches to a real terminal, so run this in your own shell.
+          The capture lands in your library automatically when the program exits.
+        </p>
+        <label class="field">
+          <span>CLI to record</span>
+          <input id="recCmd" type="text" value="copilot" placeholder="copilot" />
+        </label>
+        <label class="field">
+          <span>Save as <em class="muted">(optional)</em></span>
+          <input id="recName" type="text" placeholder="copilot-capture_01.ans" />
+        </label>
+        <p class="muted small">
+          Leave blank to auto-name it <code>copilot-capture_NN.ans</code> (the next
+          free number) in your library.
+        </p>
+        <div class="cmd-box">
+          <code id="recOut">tui-cap record -- &lt;command&gt;</code>
+          <button id="recCopy" type="button" class="btn small">Copy</button>
+        </div>
+        <div class="dialog-actions">
+          <button id="recClose" value="close" class="btn">Close</button>
+        </div>
+      </form>
+    </dialog>
+    <!-- Content-edit popover -->
+    <div id="editPopover" class="edit-popover hidden" role="dialog" aria-label="Edit text">
+      <div class="ep-row ep-preview-row">
+        <span class="muted small">Editing</span>
+        <code id="epSelected" class="ep-selected">—</code>
+      </div>
+      <p class="ep-hint muted small">
+        Type in the highlighted box on the canvas to edit text live.
+        <em id="epBudget" class="muted"></em>
+      </p>
+      <div class="ep-field">
+        <span class="muted small">Text color</span>
+        <div class="ep-swatch-row">
+          <div id="epFg" class="swatches"></div>
+          <button id="epFgPick" class="btn-eyedrop" type="button" aria-pressed="false"
+            title="Eyedropper: pick a colour from a character on the canvas">
+            <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
+              <path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"
+                d="M9.5 3.6l2.9 2.9M10.95 2.15a1.6 1.6 0 0 1 2.26 2.26l-1.1 1.1-2.26-2.26 1.1-1.1zM9.85 5.25l-5 5a1.4 1.4 0 0 0-.36.63l-.55 1.95 1.95-.55a1.4 1.4 0 0 0 .63-.36l5-5"/>
+            </svg>
+            <span class="visually-hidden">Eyedropper</span>
+          </button>
+        </div>
+      </div>
+      <div class="ep-field">
+        <span class="muted small">Background</span>
+        <div id="epBg" class="swatches"></div>
+      </div>
+      <label class="ep-check">
+        <input id="epAll" type="checkbox" />
+        <span class="small">Apply to every matching line in a frame</span>
+      </label>
+      <div class="ep-field ep-spacing">
+        <span class="muted small">Spacing below this line</span>
+        <div class="ep-spacing-row">
+          <button id="epSpaceRemove" class="btn small" type="button" title="Remove a blank line below">− line</button>
+          <span id="epSpaceVal" class="muted small">0</span>
+          <button id="epSpaceAdd" class="btn small" type="button" title="Add a blank line below">+ line</button>
+        </div>
+      </div>
+      <div class="ep-actions">
+        <button id="epRemove" class="btn small danger-text hidden" type="button">Remove</button>
+        <span class="ep-spacer"></span>
+        <button id="epCancel" class="btn small" type="button">Cancel</button>
+        <button id="epApply" class="btn small btn-primary" type="button">Accept</button>
+      </div>
+    </div>
+    <div id="toast" class="toast hidden"></div>
+    <script type="module" src="app.js"></script>
+  </body>
+</html>

package/dist/web/logo.svg ADDED Viewed

@@ -0,0 +1,11 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.4905 8.19702H0V13.5211H2.4905V8.19702Z" fill="#8534F3"/>
+<path d="M6.22938 8.19702H4.98413V10.8591H6.22938V8.19702Z" fill="#5FED83"/>
+<path d="M9.96815 8.19702H8.7229V10.8591H9.96815V8.19702Z" fill="#5FED83"/>
+<path d="M14.9549 8.19702H12.4644V13.5211H14.9549V8.19702Z" fill="#8534F3"/>
+<path d="M12.4643 13.5211V14.1866H2.49048V13.5211H12.4643Z" fill="#8534F3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.43105 0.101131C6.06591 0.128732 6.55526 0.636076 6.55526 1.28485V4.56274C6.55526 5.21151 6.06591 5.71856 5.43105 5.74617V5.74761H2.24848V5.74617C1.61362 5.71856 1.12427 5.21151 1.12427 4.56274V1.28485C1.12427 0.636076 1.61362 0.128732 2.24848 0.101131V0.0999756H5.43105V0.101131ZM2.30307 0.42349C1.81376 0.42349 1.43565 0.795531 1.43565 1.28485V4.56274C1.43565 5.05206 1.81376 5.4241 2.30307 5.4241H5.37646C5.86577 5.4241 6.24388 5.05206 6.24388 4.56274V1.28485C6.24388 0.795531 5.86577 0.42349 5.37646 0.42349H2.30307Z" fill="#3094FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1105 0.101131C13.7453 0.128732 14.2347 0.636076 14.2347 1.28485V4.56274C14.2347 5.21151 13.7453 5.71856 13.1105 5.74617V5.74761H9.9279V5.74617C9.29304 5.71856 8.80369 5.21151 8.80369 4.56274V1.28485C8.80369 0.636076 9.29304 0.128732 9.9279 0.101131V0.0999756H13.1105V0.101131ZM9.98249 0.42349C9.49318 0.42349 9.11507 0.795531 9.11507 1.28485V4.56274C9.11507 5.05206 9.49318 5.4241 9.98249 5.4241H13.0559C13.5452 5.4241 13.9233 5.05206 13.9233 4.56274V1.28485C13.9233 0.795531 13.5452 0.42349 13.0559 0.42349H9.98249Z" fill="#3094FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.43105 0.101131C6.06591 0.128732 6.55526 0.636076 6.55526 1.28485V4.56274C6.55526 5.21151 6.06591 5.71856 5.43105 5.74617V5.74761H2.24848V5.74617C1.61362 5.71856 1.12427 5.21151 1.12427 4.56274V1.28485C1.12427 0.636076 1.61362 0.128732 2.24848 0.101131V0.0999756H5.43105V0.101131ZM2.30307 0.42349C1.81376 0.42349 1.43565 0.795531 1.43565 1.28485V4.56274C1.43565 5.05206 1.81376 5.4241 2.30307 5.4241H5.37646C5.86577 5.4241 6.24388 5.05206 6.24388 4.56274V1.28485C6.24388 0.795531 5.86577 0.42349 5.37646 0.42349H2.30307Z" stroke="#3094FF" stroke-width="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1105 0.101131C13.7453 0.128732 14.2347 0.636076 14.2347 1.28485V4.56274C14.2347 5.21151 13.7453 5.71856 13.1105 5.74617V5.74761H9.9279V5.74617C9.29304 5.71856 8.80369 5.21151 8.80369 4.56274V1.28485C8.80369 0.636076 9.29304 0.128732 9.9279 0.101131V0.0999756H13.1105V0.101131ZM9.98249 0.42349C9.49318 0.42349 9.11507 0.795531 9.11507 1.28485V4.56274C9.11507 5.05206 9.49318 5.4241 9.98249 5.4241H13.0559C13.5452 5.4241 13.9233 5.05206 13.9233 4.56274V1.28485C13.9233 0.795531 13.5452 0.42349 13.0559 0.42349H9.98249Z" stroke="#3094FF" stroke-width="0.2"/>
+</svg>