@abelfubu/dv 0.1.0

package/dist/clipboard.d.ts

@@ -0,0 +1,16 @@
+import type { CliRenderer } from "@opentuah/core";
+/**
+ * Copy text to the system clipboard using native commands.
+ * Falls back to the renderer's OSC52 escape sequence for terminal clipboard.
+ */
+export declare function copyToClipboard(text: string, copyOsc52: (value: string) => boolean): Promise<void>;
+/** Convenience wrapper that pulls the OSC52 helper from a CliRenderer. */
+export declare function copyToClipboardWithRenderer(text: string, renderer: CliRenderer): Promise<void>;
+/**
+ * Synchronously copy text to the system clipboard using native commands.
+ * Falls back to the renderer's OSC52 escape sequence.
+ */
+export declare function copyToClipboardSync(text: string, copyOsc52: (value: string) => boolean): void;
+/** Convenience wrapper that pulls the OSC52 helper from a CliRenderer. */
+export declare function copyToClipboardWithRendererSync(text: string, renderer: CliRenderer): void;
+//# sourceMappingURL=clipboard.d.ts.map

package/dist/clipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.d.ts","sourceRoot":"","sources":["../src/clipboard.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAiBjD;;;GAGG;AACH,wBAAsB,eAAe,CACnC,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GACpC,OAAO,CAAC,IAAI,CAAC,CA6Cf;AAED,0EAA0E;AAC1E,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAE9F;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GACpC,IAAI,CA6CN;AAWD,0EAA0E;AAC1E,wBAAgB,+BAA+B,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,IAAI,CAEzF"}

package/dist/clipboard.js

@@ -0,0 +1,128 @@
+// Clipboard helpers used by mouse and keyboard copy actions.
+import childProcess from "child_process";
+async function spawnClipboard(cmd, args, text) {
+    return new Promise((resolve, reject) => {
+        const proc = childProcess.spawn(cmd, args, { stdio: ["pipe", "ignore", "ignore"] });
+        proc.on("error", reject);
+        proc.on("close", (code) => {
+            if (code === 0)
+                resolve();
+            else
+                reject(new Error(`${cmd} exited with code ${code}`));
+        });
+        proc.stdin?.write(text);
+        proc.stdin?.end();
+    });
+}
+/**
+ * Copy text to the system clipboard using native commands.
+ * Falls back to the renderer's OSC52 escape sequence for terminal clipboard.
+ */
+export async function copyToClipboard(text, copyOsc52) {
+    const platform = process.platform;
+    try {
+        if (platform === "darwin") {
+            await spawnClipboard("pbcopy", [], text);
+            return;
+        }
+        if (platform === "linux") {
+            const isWayland = !!process.env.WAYLAND_DISPLAY;
+            if (isWayland) {
+                try {
+                    await spawnClipboard("wl-copy", [], text);
+                    return;
+                }
+                catch {
+                    // Fall through to X11 tools
+                }
+            }
+            try {
+                await spawnClipboard("xclip", ["-selection", "clipboard"], text);
+                return;
+            }
+            catch {
+                // Try xsel
+            }
+            try {
+                await spawnClipboard("xsel", ["--clipboard", "--input"], text);
+                return;
+            }
+            catch {
+                // Fall through to OSC52
+            }
+        }
+        if (platform === "win32") {
+            await spawnClipboard("clip.exe", [], text);
+            return;
+        }
+    }
+    catch {
+        // Native clipboard failed, fall through to OSC52
+    }
+    copyOsc52(text);
+}
+/** Convenience wrapper that pulls the OSC52 helper from a CliRenderer. */
+export function copyToClipboardWithRenderer(text, renderer) {
+    return copyToClipboard(text, (value) => renderer.copyToClipboardOSC52(value));
+}
+/**
+ * Synchronously copy text to the system clipboard using native commands.
+ * Falls back to the renderer's OSC52 escape sequence.
+ */
+export function copyToClipboardSync(text, copyOsc52) {
+    const platform = process.platform;
+    try {
+        if (platform === "darwin") {
+            spawnClipboardSync("pbcopy", [], text);
+            return;
+        }
+        if (platform === "linux") {
+            const isWayland = !!process.env.WAYLAND_DISPLAY;
+            if (isWayland) {
+                try {
+                    spawnClipboardSync("wl-copy", [], text);
+                    return;
+                }
+                catch {
+                    // Fall through to X11 tools
+                }
+            }
+            try {
+                spawnClipboardSync("xclip", ["-selection", "clipboard"], text);
+                return;
+            }
+            catch {
+                // Try xsel
+            }
+            try {
+                spawnClipboardSync("xsel", ["--clipboard", "--input"], text);
+                return;
+            }
+            catch {
+                // Fall through to OSC52
+            }
+        }
+        if (platform === "win32") {
+            spawnClipboardSync("clip.exe", [], text);
+            return;
+        }
+    }
+    catch {
+        // Native clipboard failed, fall through to OSC52
+    }
+    copyOsc52(text);
+}
+function spawnClipboardSync(cmd, args, text) {
+    const result = childProcess.spawnSync(cmd, args, {
+        input: text,
+        encoding: "utf-8",
+    });
+    if (result.error)
+        throw result.error;
+    if (result.status !== 0)
+        throw new Error(`${cmd} exited with code ${result.status}`);
+}
+/** Convenience wrapper that pulls the OSC52 helper from a CliRenderer. */
+export function copyToClipboardWithRendererSync(text, renderer) {
+    copyToClipboardSync(text, (value) => renderer.copyToClipboardOSC52(value));
+}

package/dist/components/diff-view.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { DiffRenderable } from "@opentuah/core";
+export interface DiffViewRef {
+    getDiffRenderable(): DiffRenderable | null;
+}
+export interface DiffViewProps {
+    diff: string;
+    view: "split" | "unified";
+    filetype?: string;
+    themeName: string;
+    /** Wrap mode for long lines (default: "word") */
+    wrapMode?: "word" | "char" | "none";
+    /** Enable italics in syntax highlighting (default: true) */
+    italicsEnabled?: boolean;
+    /** Use the terminal's default background instead of theme panel backgrounds */
+    transparentBackground?: boolean;
+    /** Whether the diff pane is focused and should show the cursor line */
+    focused?: boolean;
+    /** 0-based logical line index of the cursor */
+    cursorLine?: number;
+    /** Inclusive start/end of the current selection, or null */
+    selection?: {
+        start: number;
+        end: number;
+    } | null;
+    /** Background color for the cursor line (defaults to the sidebar active-file color) */
+    cursorColor?: string;
+    /** Background color for selected lines (defaults to selectionBg) */
+    selectionColor?: string;
+}
+export declare const DiffView: React.ForwardRefExoticComponent<DiffViewProps & React.RefAttributes<DiffViewRef>>;
+//# sourceMappingURL=diff-view.d.ts.map

package/dist/components/diff-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff-view.d.ts","sourceRoot":"","sources":["../../src/components/diff-view.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAqB,MAAM,gBAAgB,CAAA;AAIlE,MAAM,WAAW,WAAW;IAC1B,iBAAiB,IAAI,cAAc,GAAG,IAAI,CAAA;CAC3C;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,OAAO,GAAG,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;IACnC,4DAA4D;IAC5D,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,+EAA+E;IAC/E,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,4DAA4D;IAC5D,SAAS,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IACjD,uFAAuF;IACvF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAwDD,eAAO,MAAM,QAAQ,mFA4InB,CAAA"}

package/dist/components/diff-view.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "@opentuah/react/jsx-runtime";
+// Shared DiffView component for rendering git diffs with syntax highlighting.
+// Wraps opentui's <diff> element with theme-aware colors and syntax styles.
+// Supports split and unified view modes with line numbers.
+import * as React from "react";
+import { DiffRenderable, RGBA, SyntaxStyle } from "@opentuah/core";
+import { getSyntaxTheme, getResolvedTheme, rgbaToHex } from "../themes.js";
+import { balanceDelimiters } from "../balance-delimiters.js";
+function getLuminance(color) {
+    return color.r * 0.2126 + color.g * 0.7152 + color.b * 0.0722;
+}
+function getColorDistance(a, b) {
+    const dr = a.r - b.r;
+    const dg = a.g - b.g;
+    const db = a.b - b.b;
+    return Math.sqrt(dr * dr + dg * dg + db * db);
+}
+/**
+ * Compute a visible word-highlight color from a line background.
+ * Uses stronger contrast than opentui's default brighten(1.1), which is too subtle
+ * on very dark themes (especially in HTML screenshots/web output).
+ */
+function getWordHighlightBg(base) {
+    const baseLuminance = getLuminance(base);
+    // Light backgrounds: darken slightly while preserving hue.
+    // This avoids chalky white patches that can look noisy.
+    if (baseLuminance >= 0.52) {
+        return rgbaToHex(base.brighten(0.9));
+    }
+    // Dark backgrounds: use stronger hue-preserving brightening than opentui default (1.1),
+    // which is often imperceptible on near-black diff backgrounds.
+    let candidate = base.brighten(2.4);
+    let luminanceDelta = Math.abs(getLuminance(candidate) - baseLuminance);
+    // Keep a minimum luminance delta close to github-light perceptibility.
+    if (luminanceDelta < 0.09) {
+        candidate = base.brighten(3.0);
+        luminanceDelta = Math.abs(getLuminance(candidate) - baseLuminance);
+    }
+    if (luminanceDelta < 0.09) {
+        candidate = base.brighten(3.6);
+    }
+    // Pure-black (or near-black) bases stay unchanged with multiplicative brighten.
+    // Add a tiny additive lift so inline highlights remain visible on those themes.
+    if (getColorDistance(candidate, base) < 0.03) {
+        candidate = RGBA.fromValues(base.r + (1 - base.r) * 0.12, base.g + (1 - base.g) * 0.12, base.b + (1 - base.b) * 0.12, base.a);
+    }
+    return rgbaToHex(candidate);
+}
+export const DiffView = React.forwardRef(function DiffView({ diff, view, filetype, themeName, wrapMode = "word", italicsEnabled = true, transparentBackground = false, focused = false, cursorLine = 0, selection = null, cursorColor, selectionColor, }, ref) {
+    const diffRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => ({
+        getDiffRenderable: () => diffRef.current,
+    }));
+    // Balance paired delimiters (backticks, triple quotes, etc.) before
+    // passing to <diff> so tree-sitter doesn't misparse hunks that start
+    // inside a multi-line string
+    const balancedDiff = React.useMemo(() => balanceDelimiters(diff, filetype), [diff, filetype]);
+    // Memoize theme lookups to ensure stable references
+    const resolvedTheme = React.useMemo(() => getResolvedTheme(themeName), [themeName]);
+    const syntaxStyle = React.useMemo(() => SyntaxStyle.fromStyles(getSyntaxTheme(themeName, "dark", italicsEnabled)), [themeName, italicsEnabled]);
+    // Convert RGBA to hex for diff component props
+    const transparentBg = React.useMemo(() => RGBA.fromInts(0, 0, 0, 0), []);
+    const colors = React.useMemo(() => ({
+        text: rgbaToHex(resolvedTheme.text),
+        bgPanel: transparentBackground ? transparentBg : rgbaToHex(resolvedTheme.backgroundPanel),
+        diffAddedBg: rgbaToHex(resolvedTheme.diffAddedBg),
+        diffRemovedBg: rgbaToHex(resolvedTheme.diffRemovedBg),
+        diffLineNumber: rgbaToHex(resolvedTheme.diffLineNumber),
+        diffAddedLineNumberBg: rgbaToHex(resolvedTheme.diffAddedLineNumberBg),
+        diffRemovedLineNumberBg: rgbaToHex(resolvedTheme.diffRemovedLineNumberBg),
+    }), [resolvedTheme, transparentBackground, transparentBg]);
+    const wordHighlights = React.useMemo(() => ({
+        addedWordBg: getWordHighlightBg(resolvedTheme.diffAddedBg),
+        removedWordBg: getWordHighlightBg(resolvedTheme.diffRemovedBg),
+    }), [resolvedTheme]);
+    const activeCursorColor = React.useMemo(() => {
+        if (cursorColor)
+            return cursorColor;
+        // Match the sidebar's active-file background so the focused cursor line
+        // feels visually consistent with the file navigator.
+        return rgbaToHex(resolvedTheme.primary.brighten(0.3));
+    }, [cursorColor, resolvedTheme.primary]);
+    const activeSelectionColor = React.useMemo(() => {
+        return selectionColor ?? "#264F78";
+    }, [selectionColor]);
+    // Track previously-applied highlights so we can clear only our own overrides.
+    const prevCursorRef = React.useRef(null);
+    const prevSelectionRef = React.useRef(null);
+    // Apply cursor line and selection highlights to the underlying DiffRenderable.
+    React.useEffect(() => {
+        const diffRenderable = diffRef.current;
+        if (!diffRenderable)
+            return;
+        // Clear previous cursor override.
+        if (prevCursorRef.current) {
+            diffRenderable.clearLineColor(prevCursorRef.current.line);
+        }
+        // Clear previous selection overrides.
+        if (prevSelectionRef.current) {
+            diffRenderable.clearHighlightLines(prevSelectionRef.current.start, prevSelectionRef.current.end);
+        }
+        prevCursorRef.current = null;
+        prevSelectionRef.current = null;
+        if (!focused)
+            return;
+        if (selection) {
+            const start = Math.min(selection.start, selection.end);
+            const end = Math.max(selection.start, selection.end);
+            if (end >= start) {
+                diffRenderable.highlightLines(start, end, activeSelectionColor);
+                prevSelectionRef.current = { start, end, color: activeSelectionColor };
+            }
+        }
+        diffRenderable.setLineColor(cursorLine, activeCursorColor);
+        prevCursorRef.current = { line: cursorLine, color: activeCursorColor };
+    }, [focused, cursorLine, selection, activeCursorColor, activeSelectionColor]);
+    return (_jsx("box", { style: { backgroundColor: colors.bgPanel }, children: _jsx("diff", { ref: diffRef, diff: balancedDiff, view: view, fg: colors.text, treeSitterClient: undefined, filetype: filetype, syntaxStyle: syntaxStyle, showLineNumbers: true, wrapMode: wrapMode, 
+            // `addedBg`/`removedBg` are used by opentui as the base colors for word-level highlights.
+            // We set them to match the content backgrounds so light themes don't inherit dark defaults.
+            addedBg: colors.diffAddedBg, removedBg: colors.diffRemovedBg, contextBg: colors.bgPanel, 
+            // Use explicit word highlight colors to avoid near-invisible defaults on dark themes.
+            addedWordBg: wordHighlights.addedWordBg, removedWordBg: wordHighlights.removedWordBg, addedContentBg: colors.diffAddedBg, removedContentBg: colors.diffRemovedBg, contextContentBg: colors.bgPanel, lineNumberFg: colors.diffLineNumber, lineNumberBg: colors.bgPanel, addedLineNumberBg: colors.diffAddedLineNumberBg, removedLineNumberBg: colors.diffRemovedLineNumberBg, selectionBg: "#264F78", selectionFg: "#FFFFFF" }) }, themeName));
+});

package/dist/components/diff-view.test.d.ts

@@ -0,0 +1,5 @@
+declare global {
+    var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
+}
+export {};
+//# sourceMappingURL=diff-view.test.d.ts.map

package/dist/components/diff-view.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff-view.test.d.ts","sourceRoot":"","sources":["../../src/components/diff-view.test.tsx"],"names":[],"mappings":"AASA,OAAO,CAAC,MAAM,CAAC;IACb,IAAI,wBAAwB,EAAE,OAAO,GAAG,SAAS,CAAA;CAClD"}

package/dist/components/diff-view.test.js

@@ -0,0 +1,312 @@
+import { jsx as _jsx } from "@opentuah/react/jsx-runtime";
+// Tests for DiffView theme reactivity when switching themes at runtime.
+import * as React from "react";
+import { afterEach, describe, expect, it } from "bun:test";
+import { testRender } from "@opentuah/react/test-utils";
+import { getDataPaths } from "@opentuah/core";
+import { DiffView } from "./diff-view.js";
+import { useAppStore } from "../store.js";
+// Suppress EventTarget memory leak warning from opentui DataPathsManager —
+// each DiffView registers a paths:changed listener during tree-sitter init
+getDataPaths().setMaxListeners(50);
+const sampleDiff = `diff --git a/a.txt b/a.txt
+index 1111111..2222222 100644
+--- a/a.txt
++++ b/a.txt
+@@ -1,2 +1,2 @@
+-old
++new
+ keep
+`;
+const wordHighlightDiff = `diff --git a/a.ts b/a.ts
+index 1111111..2222222 100644
+--- a/a.ts
++++ b/a.ts
+@@ -1 +1 @@
+-const value = oldName + 1
++const value = newName + 1
+`;
+const databaseRegressionDiff = `--- cli/src/database.ts
++++ cli/src/database.ts
+@@ -9,17 +9,18 @@
+ import dedent from "string-dedent";
+ import { browserLogin } from "./tinybird-browser-login.ts";
+ import { loadTinybirdResources } from "./tinybird-resources.ts";
+ import { deployTinybirdResources, getDeploymentManagedReadToken, TinybirdClient } from "./tinybird.ts";
+ import { requireAuth } from "./config.ts";
+ import { getApiClient } from "./api-client.ts";
+-import { ensureDefaultOrg } from "./projects.ts";
++import { resolveCurrentOrg } from "./orgs.ts";
+ 
+ export interface DatabaseCreateOptions {
+   token?: string;
+   baseUrl?: string;
++  force?: boolean;
+ }
+ 
+ function getTinybirdEnvAuth() {
+   const token = process.env.TINYBIRD_TOKEN || process.env.TB_TOKEN
+   const baseUrl = process.env.TINYBIRD_BASE_URL || process.env.TINYBIRD_HOST || process.env.TB_HOST
+   if (!token) return null
+@@ -47,12 +48,13 @@
+ 
+       For non-interactive Tinybird auth, pass --token and --base-url directly.
+      \`,
+   )
+   .option("-t, --token [token]", "Tinybird workspace admin token (skips browser login)")
+   .option("-u, --base-url [url]", "Tinybird API base URL (e.g. https://api.us-east.aws.tinybird.co)")
++  .option("-f, --force", "Overwrite existing database config without confirmation")
+   .example("# Interactive setup (opens browser)")
+   .example("strada database create")
+   .example("# Non-interactive with existing token")
+   .example("strada database create --token p.eyXXX --base-url https://api.tinybird.co")
+   .action((options, context) => databaseCreateAction(options, context));
+ 
+@@ -84,19 +86,46 @@
+     clack.log.error((e as Error).message);
+     return proc.exit(1);
+   }
+ 
+   // Create a default personal org on first use so \`strada login\` -> \`strada database create\`
+   // works end to end without a manual org bootstrap step.
+-  const org = await ensureDefaultOrg().catch((error) => error as Error);
++  const org = await resolveCurrentOrg().catch((error) => error as Error);
+   if (org instanceof Error) {
+     clack.log.error(org.message);
+     return proc.exit(1);
+   }
+   clack.log.info(\`Using organization: \${cyan(org.name)}\`);
+ 
++  // Check if this org already has a configured database. If so, require
++  // explicit confirmation (interactive) or --force (non-interactive) to
++  // prevent accidental overwrites of Tinybird tokens.
++  if (!options.force) {
++    const { safeFetch: checkFetch } = getApiClient();
++    const existingDb = await checkFetch("/api/v0/orgs/:orgId/database", {
++      params: { orgId: org.id },
++    });
++    if (!(existingDb instanceof Error) && (existingDb.hasAdminToken || existingDb.hasReadToken)) {
++      const endpoint = existingDb.tinybirdEndpoint || existingDb.clickhouseUrl || "unknown";
++      if (!process.stdin.isTTY) {
++        clack.log.error(
++          \`This org already has a configured \${existingDb.backend} database (\${endpoint}).\\n\` +
++          \`  Pass --force to overwrite it.\`,
++        );
++        return proc.exit(1);
++      }
++      const overwrite = await clack.confirm({
++        message: \`This org already has a configured \${existingDb.backend} database (\${endpoint}). Overwrite it?\`,
++      });
++      if (clack.isCancel(overwrite) || !overwrite) {
++        clack.outro("Cancelled. Existing database config is unchanged.");
++        return proc.exit(0);
++      }
++    }
++  }
++
+   // Authenticate with Tinybird
+   const auth = await (async () => {
+     if (options.token && options.baseUrl) {
+       clack.log.info(\`Using provided token for \${options.baseUrl}\`);
+       return { token: options.token, baseUrl: options.baseUrl };
+     }
+@@ -235,13 +264,13 @@
+     requireAuth();
+   } catch (e) {
+     clack.log.error((e as Error).message);
+     return proc.exit(1);
+   }
+ 
+-  const org = await ensureDefaultOrg().catch((error) => error as Error);
++  const org = await resolveCurrentOrg().catch((error) => error as Error);
+   if (org instanceof Error) {
+     clack.log.error(org.message);
+     return proc.exit(1);
+   }
+   clack.log.info(\`Using organization: \${cyan(org.name)}\`);
+ `;
+function ThemeToggleHarness() {
+    const themeName = useAppStore((s) => s.themeName);
+    return (_jsx(DiffView, { diff: sampleDiff, view: "unified", filetype: "txt", themeName: themeName }));
+}
+function extractDiffBackgroundSample(frame) {
+    return {
+        removedLineNumberBg: Array.from(frame.lines[0].spans[0].bg.buffer),
+        removedContentBg: Array.from(frame.lines[0].spans[4].bg.buffer),
+        contextBg: Array.from(frame.lines[2].spans[0].bg.buffer),
+    };
+}
+function getLineWithToken(frame, token) {
+    return frame.lines.find((line) => line.spans.map((span) => span.text).join("").includes(token));
+}
+function getWordHighlightDistance(frame) {
+    const removedLine = getLineWithToken(frame, "old");
+    const addedLine = getLineWithToken(frame, "new");
+    if (!removedLine || !addedLine) {
+        throw new Error("Expected both added and removed lines in rendered frame");
+    }
+    const removedWord = removedLine.spans.find((span) => span.text === "old");
+    const removedBase = removedLine.spans.find((span) => span.text.includes("Name"));
+    const addedWord = addedLine.spans.find((span) => span.text === "new");
+    const addedBase = addedLine.spans.find((span) => span.text.includes("Name"));
+    if (!removedWord || !removedBase || !addedWord || !addedBase) {
+        throw new Error("Expected split word/background spans for inline highlights");
+    }
+    const distance = (a, b) => {
+        const dr = a[0] - b[0];
+        const dg = a[1] - b[1];
+        const db = a[2] - b[2];
+        return Math.sqrt(dr * dr + dg * dg + db * db);
+    };
+    return {
+        removed: distance(removedWord.bg.buffer, removedBase.bg.buffer),
+        added: distance(addedWord.bg.buffer, addedBase.bg.buffer),
+    };
+}
+// Suppress React act() warnings for opentui component tests.
+// opentui's internal rendering triggers state updates outside act() boundaries,
+// which is expected behavior for TUI component testing.
+// testRender sets IS_REACT_ACT_ENVIRONMENT=true, so we must disable it after.
+async function setupTest(jsx, opts) {
+    const setup = await testRender(jsx, opts);
+    globalThis.IS_REACT_ACT_ENVIRONMENT = false;
+    return setup;
+}
+async function renderSeveralTimes(testSetup, times) {
+    for (let index = 0; index < times; index++) {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        await testSetup.renderOnce();
+    }
+}
+describe("DiffView", () => {
+    let testSetup;
+    afterEach(() => {
+        if (testSetup) {
+            testSetup.renderer.destroy();
+        }
+        useAppStore.setState({ themeName: "github" });
+    });
+    it("updates diff background colors after theme switch", async () => {
+        useAppStore.setState({ themeName: "github" });
+        testSetup = await setupTest(_jsx(ThemeToggleHarness, {}), {
+            width: 80,
+            height: 8,
+        });
+        await testSetup.renderOnce();
+        const before = extractDiffBackgroundSample(testSetup.captureSpans());
+        expect(before).toMatchInlineSnapshot(`
+      {
+        "contextBg": [
+          0,
+          0,
+          0,
+          1,
+        ],
+        "removedContentBg": [
+          0.21176470816135406,
+          0.11764705926179886,
+          0.11764705926179886,
+          1,
+        ],
+        "removedLineNumberBg": [
+          0.10980392247438431,
+          0.05098039284348488,
+          0.054901961237192154,
+          1,
+        ],
+      }
+    `);
+        useAppStore.setState({ themeName: "tokyonight" });
+        await new Promise((r) => setTimeout(r, 10));
+        await testSetup.renderOnce();
+        const after = extractDiffBackgroundSample(testSetup.captureSpans());
+        expect(after).toMatchInlineSnapshot(`
+      {
+        "contextBg": [
+          0.11764705926179886,
+          0.125490203499794,
+          0.1882352977991104,
+          1,
+        ],
+        "removedContentBg": [
+          0.5176470875740051,
+          0.32156863808631897,
+          0.4156862795352936,
+          1,
+        ],
+        "removedLineNumberBg": [
+          0.1764705926179886,
+          0.12156862765550613,
+          0.14901961386203766,
+          1,
+        ],
+      }
+    `);
+        expect(after).not.toEqual(before);
+    });
+    it("keeps word highlights visible on github dark theme", async () => {
+        testSetup = await setupTest(_jsx(DiffView, { diff: wordHighlightDiff, view: "unified", filetype: "ts", themeName: "github" }), {
+            width: 80,
+            height: 8,
+        });
+        await testSetup.renderOnce();
+        const highlights = getWordHighlightDistance(testSetup.captureSpans());
+        expect(highlights.removed).toBeGreaterThan(0.03);
+        expect(highlights.added).toBeGreaterThan(0.03);
+    });
+    it("keeps word highlights visible on near-black themes", async () => {
+        testSetup = await setupTest(_jsx(DiffView, { diff: wordHighlightDiff, view: "unified", filetype: "ts", themeName: "lucent-orng" }), {
+            width: 80,
+            height: 8,
+        });
+        await testSetup.renderOnce();
+        const highlights = getWordHighlightDistance(testSetup.captureSpans());
+        expect(highlights.removed).toBeGreaterThan(0.01);
+        expect(highlights.added).toBeGreaterThan(0.01);
+    });
+    it("preserves syntax highlighting for hunks that start inside a template literal", async () => {
+        testSetup = await setupTest(_jsx(DiffView, { diff: databaseRegressionDiff, view: "unified", filetype: "typescript", themeName: "github" }), {
+            width: 220,
+            height: 120,
+        });
+        await renderSeveralTimes(testSetup, 5);
+        const frame = testSetup.captureSpans();
+        const importLine = getLineWithToken(frame, 'import dedent from "string-dedent"');
+        const endpointLine = getLineWithToken(frame, 'const endpoint = existingDb.tinybirdEndpoint');
+        expect(importLine?.spans.map((span) => span.text).filter((text) => text.trim() !== "")).toEqual(expect.arrayContaining(["import", "dedent", "from", '"string-dedent"']));
+        expect(endpointLine?.spans.map((span) => span.text).filter((text) => text.trim() !== "")).toEqual(expect.arrayContaining(["const", "endpoint", "=", '"unknown"']));
+    });
+    it("highlights the cursor line when focused", async () => {
+        testSetup = await setupTest(_jsx(DiffView, { diff: sampleDiff, view: "unified", filetype: "txt", themeName: "github", focused: true, cursorLine: 2, cursorColor: "#123456" }), {
+            width: 80,
+            height: 8,
+        });
+        await testSetup.renderOnce();
+        const frame = testSetup.captureSpans();
+        // Logical line order for sampleDiff: 0 hunk-header, 1 removed "old", 2 added "new", 3 context "keep"
+        const addedLine = frame.lines[2];
+        expect(addedLine).toBeDefined();
+        const cursorBg = Array.from(addedLine.spans[0].bg.buffer);
+        expect(cursorBg.slice(0, 3)).toEqual([
+            expect.closeTo(18 / 255, 4),
+            expect.closeTo(52 / 255, 4),
+            expect.closeTo(86 / 255, 4),
+        ]);
+    });
+    it("does not highlight a cursor line when not focused", async () => {
+        testSetup = await setupTest(_jsx(DiffView, { diff: sampleDiff, view: "unified", filetype: "txt", themeName: "github", focused: false, cursorLine: 2, cursorColor: "#123456" }), {
+            width: 80,
+            height: 8,
+        });
+        await testSetup.renderOnce();
+        const frame = testSetup.captureSpans();
+        const addedLine = frame.lines[2];
+        expect(addedLine).toBeDefined();
+        const cursorBg = Array.from(addedLine.spans[0].bg.buffer);
+        expect(cursorBg.slice(0, 3)).not.toEqual([
+            expect.closeTo(18 / 255, 4),
+            expect.closeTo(52 / 255, 4),
+            expect.closeTo(86 / 255, 4),
+        ]);
+    });
+});

package/dist/components/directory-tree-view.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { type TreeFileInfo } from "../directory-tree.js";
+export declare const DEFAULT_SIDEBAR_WIDTH = 60;
+export interface DirectoryTreeViewRef {
+    focusNext(): void;
+    focusPrev(): void;
+    toggleCollapse(): void;
+    getActiveRowIndex(): number;
+}
+export interface DirectoryTreeViewProps {
+    /** Files to display in the tree */
+    files: TreeFileInfo[];
+    /** Callback when a file is clicked (receives fileIndex) */
+    onFileSelect?: (fileIndex: number) => void;
+    /** Callback when a folder is focused (receives folder displayPath) */
+    onFolderSelect?: (folderPath: string) => void;
+    /** Theme name for colors */
+    themeName: string;
+    /** Fixed render width for sidebar layout */
+    width?: number;
+    /** Index of the currently active file (for highlight) */
+    activeFileIndex?: number;
+    /** Path of the currently active folder (for highlight) */
+    activeFolderPath?: string;
+    /** Callback whenever the focused row index changes */
+    onFocusRowChange?: (rowIndex: number) => void;
+    /** Paths of folders that should start collapsed */
+    initialCollapsedPaths?: string[];
+    /** Use the terminal's default background instead of theme panel backgrounds */
+    transparentBackground?: boolean;
+}
+export declare const DirectoryTreeView: React.ForwardRefExoticComponent<DirectoryTreeViewProps & React.RefAttributes<DirectoryTreeViewRef>>;
+//# sourceMappingURL=directory-tree-view.d.ts.map

package/dist/components/directory-tree-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"directory-tree-view.d.ts","sourceRoot":"","sources":["../../src/components/directory-tree-view.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAoD,KAAK,YAAY,EAAiB,MAAM,sBAAsB,CAAA;AAMzH,eAAO,MAAM,qBAAqB,KAAK,CAAA;AAEvC,MAAM,WAAW,oBAAoB;IACnC,SAAS,IAAI,IAAI,CAAA;IACjB,SAAS,IAAI,IAAI,CAAA;IACjB,cAAc,IAAI,IAAI,CAAA;IACtB,iBAAiB,IAAI,MAAM,CAAA;CAC5B;AAED,MAAM,WAAW,sBAAsB;IACrC,mCAAmC;IACnC,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,sEAAsE;IACtE,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,4BAA4B;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,mDAAmD;IACnD,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAA;IAChC,+EAA+E;IAC/E,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAyLD,eAAO,MAAM,iBAAiB,qGA6L7B,CAAA"}