termcut 0.6.0 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "termcut",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Script terminal sessions in TypeScript, render them to reproducible MP4/GIF/WebM/SVG/HTML with Bun.",
   "license": "MIT",
   "author": "Aman Varshney",

package/src/browser.ts

@@ -10,6 +10,12 @@ export interface BrowserCapture extends BrowserSession {
   stop(): Promise<void>;
 }
 
+/** "better-t-stack.dev" → "https://better-t-stack.dev"; localhost defaults to http. */
+export function normalizeUrl(url: string): string {
+  if (/^[a-z][a-z0-9+.-]*:\/\//i.test(url) || /^(about|data|file|blob):/i.test(url)) return url;
+  return /^(localhost|127\.|0\.0\.0\.0|\[::1\])/.test(url) ? `http://${url}` : `https://${url}`;
+}
+
 const toRegExp = (pattern: RegExp | string): RegExp =>
   typeof pattern === "string" ? new RegExp(pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")) : pattern;
 
@@ -59,21 +65,28 @@ export function startBrowserCapture(config: ResolvedConfig, stamp: () => number,
    * or take a long first load (Vite pre-bundling, then a reload), so success is judged by the document's
    * readyState at the target URL rather than by the navigate() promise alone.
    */
-  const goto = async (url: string): Promise<void> => {
+  const goto = async (rawUrl: string): Promise<void> => {
+    const url = normalizeUrl(rawUrl);
     const deadline = performance.now() + config.waitTimeout;
     const target = url.replace(/\/$/, "");
     let navigation: Promise<"ok" | "pending" | "failed"> | null = null;
     for (;;) {
-      navigation ??= view.navigate(url).then(
+      if (!running) return; // stop() closed the view mid-retry; abort quietly
+      try {
+        navigation ??= view.navigate(url).then(
         () => "ok" as const,
-        (err: unknown) => (/pending/i.test(String(err)) ? ("pending" as const) : ("failed" as const)),
-      );
+          (err: unknown) => (/pending/i.test(String(err)) ? ("pending" as const) : ("failed" as const)),
+        );
+      } catch {
+        return; // navigate threw synchronously: the view is closed
+      }
       const outcome = await Promise.race([navigation, Bun.sleep(750).then(() => "tick" as const)]);
       if (outcome === "ok") {
         currentUrl = url;
         return;
       }
       if (outcome === "failed") navigation = null;
+      if (!running) return;
       const state = await within(view.evaluate("document.readyState"), 3000, "goto").catch(() => "");
       if (state === "complete" && (view.url ?? "").replace(/\/$/, "").startsWith(target)) {
         currentUrl = url;

package/src/config.ts

@@ -68,6 +68,11 @@ export function resolveConfig(input: VideoConfig): ResolvedConfig {
         position: (config.keys === true ? undefined : config.keys.position) ?? "bottom",
         ttl: toMs(config.keys === true ? undefined : config.keys.ttl, 1200),
         merge: toMs(config.keys === true ? undefined : config.keys.merge, 350),
+        limit: (config.keys === true ? undefined : config.keys.limit) ?? 1,
+        font: (config.keys === true ? undefined : config.keys.font) ?? Math.max(15, Math.round(font.size * 0.9)),
+        color: (config.keys === true ? undefined : config.keys.color) ?? "#fff",
+        background: (config.keys === true ? undefined : config.keys.background) ?? "rgba(15, 15, 20, 0.85)",
+        radius: (config.keys === true ? undefined : config.keys.radius) ?? 8,
       },
     }),
     fps: config.fps ?? 60,

package/src/keylabels.ts

@@ -59,23 +59,37 @@ export interface KeyChip {
  * Turn timed input events into chips. Printable keystrokes within `mergeWithin` seconds of each other are merged
  * into one chip (so typing reads as words, not a flood of letters); named keys always get their own chip.
  */
-export function keyChips(inputs: Array<{ vt: number; data: string }>, mergeWithin = 0.35): KeyChip[] {
+export interface ChipBuilder {
+  chips: KeyChip[];
+  push(vt: number, data: string): void;
+}
+
+/** Incremental version of keyChips: feed events as the clock passes them and a word chip grows while it is typed. */
+export function chipBuilder(mergeWithin = 0.35): ChipBuilder {
   const chips: KeyChip[] = [];
   let lastPrintable: KeyChip | null = null;
   let lastTime = -Infinity;
-  for (const { vt, data } of inputs) {
-    for (const label of keyLabels(data)) {
-      const printable = !/^[⏎⇥⌫␣↑↓→←⌃⌥⇧]|^(esc|home|end|del|pgup|pgdn|wheel|mouse)/.test(label);
-      if (printable && lastPrintable && vt - lastTime <= mergeWithin) {
-        lastPrintable.label += label;
-        lastPrintable.at = vt;
-      } else {
-        const chip = { at: vt, label };
-        chips.push(chip);
-        lastPrintable = printable ? chip : null;
+  return {
+    chips,
+    push(vt, data) {
+      for (const label of keyLabels(data)) {
+        const printable = !/^[⏎⇥⌫␣↑↓→←⌃⌥⇧]|^(esc|home|end|del|pgup|pgdn|wheel|mouse)/.test(label);
+        if (printable && lastPrintable && vt - lastTime <= mergeWithin) {
+          lastPrintable.label += label;
+          lastPrintable.at = vt;
+        } else {
+          const chip = { at: vt, label };
+          chips.push(chip);
+          lastPrintable = printable ? chip : null;
+        }
+        lastTime = vt;
       }
-      lastTime = vt;
-    }
-  }
-  return chips;
+    },
+  };
+}
+
+export function keyChips(inputs: Array<{ vt: number; data: string }>, mergeWithin = 0.35): KeyChip[] {
+  const builder = chipBuilder(mergeWithin);
+  for (const { vt, data } of inputs) builder.push(vt, data);
+  return builder.chips;
 }

package/src/renderer/page.ts

@@ -146,12 +146,17 @@ export function renderHtml(config: ResolvedConfig): string {
     display: ${config.keys ? "flex" : "none"}; justify-content: center; gap: 6px; pointer-events: none; z-index: 5;
   }
   #keys span {
-    font: 600 ${Math.max(12, Math.round(config.font.size * 0.75))}px ${font.family};
-    color: #fff; background: rgba(0,0,0,0.72); border: 1px solid rgba(255,255,255,0.25);
-    border-radius: 6px; padding: 3px 8px; letter-spacing: 0.02em; white-space: pre;
+    font: 600 ${config.keys?.font ?? 15}px ${font.family};
+    color: ${config.keys?.color ?? "#fff"}; background: ${config.keys?.background ?? "rgba(15, 15, 20, 0.85)"};
+    border: 1px solid rgba(255,255,255,0.12); border-radius: ${config.keys?.radius ?? 8}px;
+    padding: 0.4em 0.9em; letter-spacing: 0.02em; white-space: pre;
+    box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
   }
-  /* Zoom: the terminal grid is scaled inside its frame; the renderer sets the transform per frame. */
+  /* Zoom: the terminal grid is scaled inside its frame; the renderer sets the transform per frame.
+     The frame clips it so magnified content never spills over the bar or the rounded corners. */
   #zoom { transform-origin: 0 0; will-change: transform; }
+  #frame { overflow: hidden; }
+  #frame > *:not(#zoom) { position: relative; z-index: 2; }
 </style>
 <style id="blink"></style>
 </head>

package/src/renderer/webview.ts

@@ -6,7 +6,7 @@ import { fitFrame, loopOffsetFrames, rotateFrames } from "../loop";
 import { buildTimeline, withReinjection, type TimedEvent } from "../timeline";
 import { pageAssets } from "./bundle";
 import { createSinks, type Chapter } from "./encoder";
-import { keyChips } from "../keylabels";
+import { chipBuilder } from "../keylabels";
 import { BROWSER_GAP, barHeight, renderHtml, themeOsc } from "./page";
 
 export interface RenderResult {
@@ -97,7 +97,9 @@ export async function render(
   const lite = config.core === "lite";
   const events = lite ? timeline.events : withReinjection(timeline.events, osc);
   // Key overlay chips come from input events; zoom/chapter markers are read as the clock passes them.
-  const chips = config.keys ? keyChips(events.filter((e) => e.type === "i"), config.keys.merge / 1000) : [];
+  const keyEvents = config.keys ? events.filter((e) => e.type === "i") : [];
+  const chipper = chipBuilder((config.keys?.merge ?? 350) / 1000);
+  let keyIdx = 0;
   const chapters: Chapter[] = events
     .filter((e) => e.type === "m" && e.data.startsWith(MARKER.chapter))
     .map((e) => ({ title: e.data.slice(MARKER.chapter.length), start: e.vt }));
@@ -232,7 +234,11 @@ export async function render(
       let chipsChanged = false;
       if (config.keys) {
         const ttl = config.keys.ttl / 1000;
-        const visible = chips.filter((c) => c.at <= time + 1e-9 && time - c.at < ttl).slice(-6).map((c) => c.label);
+        while (keyIdx < keyEvents.length && keyEvents[keyIdx]!.vt <= time + 1e-9) {
+          chipper.push(keyEvents[keyIdx]!.vt, keyEvents[keyIdx]!.data);
+          keyIdx += 1;
+        }
+        const visible = chipper.chips.filter((c) => time - c.at < ttl).slice(-config.keys.limit).map((c) => c.label);
         const key = visible.join("\u0000");
         if (key !== lastChips) {
           await view.evaluate(`window.__vt.keys(${JSON.stringify(visible)})`);

package/src/types.ts

@@ -54,6 +54,16 @@ export interface KeysConfig {
   ttl?: Duration;
   /** Printable keys pressed within this window merge into one chip. Default "350ms". */
   merge?: Duration;
+  /** How many chips are visible at once. Default 1 (the latest press replaces the previous). */
+  limit?: number;
+  /** Chip font size in px. Default ~0.9× the terminal font. */
+  font?: number;
+  /** Chip text color. Default "#fff". */
+  color?: string;
+  /** Chip background (any CSS color). Default "rgba(15, 15, 20, 0.85)". */
+  background?: string;
+  /** Chip corner radius in px. Default 8. */
+  radius?: number;
 }
 
 /** A region of the terminal grid to magnify. */