tmux-ide 1.2.1 → 2.0.0

package/src/ui/web/hooks.ts

@@ -0,0 +1,106 @@
+import { createSignal, onMount, onCleanup } from "solid-js";
+
+/** Synthetic key event passed to handlers (mirrors OpenTUI naming). */
+export interface UiKeyEvent {
+  name: string;
+  ctrl: boolean;
+  shift: boolean;
+  alt: boolean;
+  meta: boolean;
+  preventDefault: () => void;
+  stopPropagation: () => void;
+}
+
+export function useKeyboard(handler: (evt: UiKeyEvent) => void): void {
+  onMount(() => {
+    const listener = (e: KeyboardEvent) => {
+      const evt = {
+        name: mapKeyName(e),
+        ctrl: e.ctrlKey,
+        shift: e.shiftKey,
+        alt: e.altKey,
+        meta: e.metaKey,
+        preventDefault: () => e.preventDefault(),
+        stopPropagation: () => e.stopPropagation(),
+      };
+      handler(evt);
+    };
+    document.addEventListener("keydown", listener);
+    onCleanup(() => document.removeEventListener("keydown", listener));
+  });
+}
+
+function mapKeyName(e: KeyboardEvent): string {
+  switch (e.key) {
+    case "ArrowUp":
+      return "up";
+    case "ArrowDown":
+      return "down";
+    case "ArrowLeft":
+      return "left";
+    case "ArrowRight":
+      return "right";
+    case "Enter":
+      return "return";
+    case "Escape":
+      return "escape";
+    case "Backspace":
+      return "backspace";
+    case "Tab":
+      return "tab";
+    case "Delete":
+      return "delete";
+    case " ":
+      return "space";
+    case "Home":
+      return "home";
+    case "End":
+      return "end";
+    case "PageUp":
+      return "pageup";
+    case "PageDown":
+      return "pagedown";
+    case "Insert":
+      return "insert";
+    default:
+      // @opentui convention: single-char keys are always lowercase, with shift as a modifier.
+      // Browser gives uppercase e.key for Shift+letter (e.g. "G"), so normalize to lowercase.
+      if (e.key.length === 1) return e.key.toLowerCase();
+      return e.key;
+  }
+}
+
+export function useTerminalDimensions() {
+  const [dims, setDims] = createSignal({ width: 80, height: 24 });
+
+  onMount(() => {
+    const update = () => {
+      // Measure a ch unit by using a temporary element
+      const measure = document.createElement("span");
+      measure.style.position = "absolute";
+      measure.style.visibility = "hidden";
+      measure.style.fontFamily = "var(--font-family, 'IBM Plex Mono', ui-monospace, monospace)";
+      measure.style.fontSize = "var(--font-size, 13px)";
+      measure.textContent = "0";
+      document.body.appendChild(measure);
+      const chWidth = measure.getBoundingClientRect().width;
+      document.body.removeChild(measure);
+
+      const lh = parseFloat(getComputedStyle(document.documentElement).lineHeight);
+
+      const effectiveCh = chWidth > 0 ? chWidth : 7.8; // fallback
+      const effectiveLh = lh > 0 ? lh : 18.2; // fallback
+
+      setDims({
+        width: Math.floor(window.innerWidth / effectiveCh),
+        height: Math.floor(window.innerHeight / effectiveLh),
+      });
+    };
+
+    update();
+    window.addEventListener("resize", update);
+    onCleanup(() => window.removeEventListener("resize", update));
+  });
+
+  return dims;
+}

package/src/ui/web/index.ts

@@ -0,0 +1,27 @@
+// Web mirror components — lowercase exports match @opentui JSX element names
+export { Box as box } from "./components/Box.tsx";
+export { Text as text } from "./components/Text.tsx";
+export { ScrollBox as scrollbox } from "./components/ScrollBox.tsx";
+export { Input as input } from "./components/Input.tsx";
+
+// Render and hooks
+export { render } from "./render.ts";
+export { useKeyboard, useTerminalDimensions } from "./hooks.ts";
+
+// Re-export Solid.js primitives
+export {
+  Show,
+  For,
+  Switch,
+  Match,
+  createSignal,
+  createMemo,
+  createEffect,
+  onMount,
+  onCleanup,
+  batch,
+} from "solid-js";
+
+// Re-export shared types
+export { RGBA, TextAttributes } from "../types.ts";
+export type { BoxProps, TextProps, ScrollBoxProps, InputProps } from "../types.ts";

package/src/ui/web/render.ts

@@ -0,0 +1,77 @@
+import type { JSX } from "solid-js";
+import { render as solidRender } from "solid-js/web";
+
+const BASE_CSS = `
+:root {
+  --line-height: 1.4em;
+  --font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  --font-size: 13px;
+}
+
+body, #root {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  background: rgb(19, 16, 16);
+  color: rgb(232, 228, 228);
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+span {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+input {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgb(25, 25, 35);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgb(60, 60, 80);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgb(80, 80, 100);
+}
+`;
+
+let stylesInjected = false;
+
+function injectBaseStyles(): void {
+  if (stylesInjected) return;
+  const style = document.createElement("style");
+  style.textContent = BASE_CSS;
+  document.head.appendChild(style);
+  stylesInjected = true;
+}
+
+export function render(component: () => JSX.Element, _options?: unknown): void {
+  injectBaseStyles();
+  const root = document.getElementById("root") ?? document.body;
+  solidRender(component, root);
+}

package/src/ui/web/utils/color.test.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect } from "bun:test";
+import { rgbaToCSS, attributesToStyle } from "./color.ts";
+import { rgbaFromInts, TextAttributes } from "../../types.ts";
+
+describe("rgbaToCSS", () => {
+  it("converts opaque color to rgb()", () => {
+    expect(rgbaToCSS({ r: 255, g: 128, b: 0, a: 255 })).toBe("rgb(255,128,0)");
+  });
+
+  it("converts transparent (a=0) to 'transparent'", () => {
+    expect(rgbaToCSS({ r: 100, g: 100, b: 100, a: 0 })).toBe("transparent");
+  });
+
+  it("converts semi-transparent color to rgba()", () => {
+    expect(rgbaToCSS({ r: 10, g: 20, b: 30, a: 128 })).toBe("rgba(10,20,30,0.50)");
+  });
+
+  it("handles rgbaFromInts()", () => {
+    const color = rgbaFromInts(75, 0, 130);
+    expect(rgbaToCSS(color)).toBe("rgb(75,0,130)");
+  });
+
+  it("rgbaFromInts defaults a to 255", () => {
+    const color = rgbaFromInts(1, 2, 3);
+    expect(color.a).toBe(255);
+  });
+
+  it("rgbaFromInts accepts explicit alpha", () => {
+    const color = rgbaFromInts(1, 2, 3, 100);
+    expect(color.a).toBe(100);
+    expect(rgbaToCSS(color)).toBe("rgba(1,2,3,0.39)");
+  });
+});
+
+describe("attributesToStyle", () => {
+  it("returns empty object for NONE", () => {
+    expect(attributesToStyle(TextAttributes.NONE)).toEqual({});
+  });
+
+  it("maps BOLD to font-weight", () => {
+    const style = attributesToStyle(TextAttributes.BOLD);
+    expect(style["font-weight"]).toBe("bold");
+  });
+
+  it("maps DIM to opacity", () => {
+    const style = attributesToStyle(TextAttributes.DIM);
+    expect(style.opacity).toBe("0.6");
+  });
+
+  it("maps ITALIC to font-style", () => {
+    const style = attributesToStyle(TextAttributes.ITALIC);
+    expect(style["font-style"]).toBe("italic");
+  });
+
+  it("maps UNDERLINE to text-decoration", () => {
+    const style = attributesToStyle(TextAttributes.UNDERLINE);
+    expect(style["text-decoration"]).toBe("underline");
+  });
+
+  it("maps STRIKETHROUGH to text-decoration", () => {
+    const style = attributesToStyle(TextAttributes.STRIKETHROUGH);
+    expect(style["text-decoration"]).toBe("line-through");
+  });
+
+  it("composes UNDERLINE + STRIKETHROUGH", () => {
+    const style = attributesToStyle(TextAttributes.UNDERLINE | TextAttributes.STRIKETHROUGH);
+    expect(style["text-decoration"]).toBe("underline line-through");
+  });
+
+  it("maps BLINK to animation", () => {
+    const style = attributesToStyle(TextAttributes.BLINK);
+    expect(style.animation?.includes("blink")).toBeTruthy();
+  });
+
+  it("maps INVERSE to filter invert", () => {
+    const style = attributesToStyle(TextAttributes.INVERSE);
+    expect(style.filter).toBe("invert(1)");
+  });
+
+  it("maps HIDDEN to visibility hidden", () => {
+    const style = attributesToStyle(TextAttributes.HIDDEN);
+    expect(style.visibility).toBe("hidden");
+  });
+
+  it("composes multiple attributes", () => {
+    const style = attributesToStyle(
+      TextAttributes.BOLD | TextAttributes.ITALIC | TextAttributes.UNDERLINE,
+    );
+    expect(style["font-weight"]).toBe("bold");
+    expect(style["font-style"]).toBe("italic");
+    expect(style["text-decoration"]).toBe("underline");
+  });
+});

package/src/ui/web/utils/color.ts

@@ -0,0 +1,27 @@
+import type { RGBA } from "../../types.ts";
+
+export function rgbaToCSS(color: RGBA): string {
+  if (color.a === 0) return "transparent";
+  if (color.a === 255 || color.a === undefined) {
+    return `rgb(${color.r},${color.g},${color.b})`;
+  }
+  return `rgba(${color.r},${color.g},${color.b},${(color.a / 255).toFixed(2)})`;
+}
+
+export function attributesToStyle(attrs: number): Record<string, string> {
+  const style: Record<string, string> = {};
+  if (attrs & 1) style["font-weight"] = "bold"; // BOLD
+  if (attrs & 2) style.opacity = "0.6"; // DIM
+  if (attrs & 4) style["font-style"] = "italic"; // ITALIC
+
+  // Compose text-decoration: underline and line-through can coexist
+  const decorations: string[] = [];
+  if (attrs & 8) decorations.push("underline"); // UNDERLINE
+  if (attrs & 128) decorations.push("line-through"); // STRIKETHROUGH
+  if (decorations.length > 0) style["text-decoration"] = decorations.join(" ");
+
+  if (attrs & 16) style.animation = "blink 1s step-end infinite"; // BLINK
+  if (attrs & 32) style.filter = "invert(1)"; // INVERSE
+  if (attrs & 64) style.visibility = "hidden"; // HIDDEN
+  return style;
+}