tmux-ide 2.6.0 → 2.7.0

package/packages/daemon/src/ui/web/base.css

@@ -0,0 +1,80 @@
+/* Base styles for the web terminal backend.
+ * Import this in your HTML or bundler entry point to get terminal-like appearance.
+ * These styles are also injected automatically by render() at runtime.
+ */
+
+:root {
+  --ui-line-height: 1.4em;
+  --ui-font-family:
+    "IBM Plex Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono",
+    monospace;
+  --ui-font-size: 13px;
+  --ui-bg: rgb(19, 16, 16);
+  --ui-fg: rgb(232, 228, 228);
+  --ui-scrollbar-track: rgb(25, 25, 35);
+  --ui-scrollbar-thumb: rgb(60, 60, 80);
+  --ui-scrollbar-thumb-hover: rgb(80, 80, 100);
+}
+
+body,
+#root {
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
+  line-height: var(--ui-line-height);
+  background: var(--ui-bg);
+  color: var(--ui-fg);
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* Flex-column by default — matches terminal box model */
+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;
+  background: transparent;
+  color: inherit;
+  border: none;
+  outline: none;
+}
+
+input::placeholder {
+  color: rgba(232, 228, 228, 0.4);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--ui-scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--ui-scrollbar-thumb);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--ui-scrollbar-thumb-hover);
+}

package/packages/daemon/src/ui/web/components/Box.tsx

@@ -0,0 +1,59 @@
+import type { JSX, ParentProps } from "solid-js";
+import { rgbaToCSS } from "../utils/color.ts";
+import type { BoxProps } from "../../types.ts";
+
+export function Box(props: ParentProps<BoxProps>) {
+  const style = (): JSX.CSSProperties => ({
+    display: "flex",
+    "flex-direction": props.flexDirection ?? "column",
+    "flex-grow": props.flexGrow,
+    "flex-shrink": props.flexShrink,
+    gap: props.gap !== undefined ? `${props.gap}ch` : undefined,
+    "justify-content": props.justifyContent,
+    "align-items": props.alignItems,
+    position: props.position ?? "relative",
+    overflow: props.overflow,
+    width: typeof props.width === "number" ? `${props.width}ch` : props.width,
+    height:
+      typeof props.height === "number"
+        ? `calc(${props.height} * var(--line-height))`
+        : props.height,
+    "max-width": typeof props.maxWidth === "number" ? `${props.maxWidth}ch` : props.maxWidth,
+    "max-height":
+      typeof props.maxHeight === "number"
+        ? `calc(${props.maxHeight} * var(--line-height))`
+        : props.maxHeight,
+    padding:
+      props.padding !== undefined
+        ? `calc(${props.padding} * var(--line-height)) ${props.padding}ch`
+        : undefined,
+    "padding-left": props.paddingLeft !== undefined ? `${props.paddingLeft}ch` : undefined,
+    "padding-right": props.paddingRight !== undefined ? `${props.paddingRight}ch` : undefined,
+    "padding-top":
+      props.paddingTop !== undefined ? `calc(${props.paddingTop} * var(--line-height))` : undefined,
+    "padding-bottom":
+      props.paddingBottom !== undefined
+        ? `calc(${props.paddingBottom} * var(--line-height))`
+        : undefined,
+    background: props.backgroundColor ? rgbaToCSS(props.backgroundColor) : undefined,
+    "border-color": props.borderColor ? rgbaToCSS(props.borderColor) : undefined,
+    top: props.top !== undefined ? `calc(${props.top} * var(--line-height))` : undefined,
+    left: props.left !== undefined ? `${props.left}ch` : undefined,
+    right: props.right !== undefined ? `${props.right}ch` : undefined,
+    bottom: props.bottom !== undefined ? `calc(${props.bottom} * var(--line-height))` : undefined,
+  });
+
+  return (
+    <div
+      id={props.id}
+      style={style()}
+      onMouseDown={props.onMouseDown}
+      onMouseUp={props.onMouseUp}
+      onMouseMove={props.onMouseMove}
+      onMouseOver={props.onMouseOver}
+      ref={props.ref}
+    >
+      {props.children}
+    </div>
+  );
+}

package/packages/daemon/src/ui/web/components/Input.tsx

@@ -0,0 +1,32 @@
+import type { JSX } from "solid-js";
+import { rgbaToCSS } from "../utils/color.ts";
+import type { InputProps } from "../../types.ts";
+
+export function Input(props: InputProps) {
+  const style = (): JSX.CSSProperties => ({
+    "font-family": "inherit",
+    "font-size": "inherit",
+    "line-height": "inherit",
+    background: props.focusedBackgroundColor
+      ? rgbaToCSS(props.focusedBackgroundColor)
+      : "rgb(25,25,35)",
+    color: props.focusedTextColor ? rgbaToCSS(props.focusedTextColor) : "inherit",
+    border: "none",
+    outline: "none",
+    padding: "0 1ch",
+    width: "100%",
+    "caret-color": props.cursorColor ? rgbaToCSS(props.cursorColor) : "inherit",
+  });
+
+  return (
+    <input
+      type="text"
+      value={props.value ?? ""}
+      placeholder={props.placeholder}
+      style={style()}
+      onInput={(e) => props.onInput?.(e.currentTarget.value)}
+      onMouseDown={props.onMouseDown}
+      ref={props.ref}
+    />
+  );
+}

package/packages/daemon/src/ui/web/components/ScrollBox.tsx

@@ -0,0 +1,60 @@
+import type { ParentProps, JSX } from "solid-js";
+import { rgbaToCSS } from "../utils/color.ts";
+import type { ScrollBoxProps } from "../../types.ts";
+
+export function ScrollBox(props: ParentProps<ScrollBoxProps>) {
+  const style = (): JSX.CSSProperties => ({
+    display: "flex",
+    "flex-direction": props.flexDirection ?? "column",
+    "flex-grow": props.flexGrow,
+    "flex-shrink": props.flexShrink,
+    gap: props.gap !== undefined ? `${props.gap}ch` : undefined,
+    "justify-content": props.justifyContent,
+    "align-items": props.alignItems,
+    position: props.position ?? "relative",
+    overflow: "hidden",
+    "overflow-y": "auto",
+    width: typeof props.width === "number" ? `${props.width}ch` : props.width,
+    height:
+      typeof props.height === "number"
+        ? `calc(${props.height} * var(--line-height))`
+        : props.height,
+    "max-width": typeof props.maxWidth === "number" ? `${props.maxWidth}ch` : props.maxWidth,
+    "max-height":
+      typeof props.maxHeight === "number"
+        ? `calc(${props.maxHeight} * var(--line-height))`
+        : props.maxHeight,
+    padding:
+      props.padding !== undefined
+        ? `calc(${props.padding} * var(--line-height)) ${props.padding}ch`
+        : undefined,
+    "padding-left": props.paddingLeft !== undefined ? `${props.paddingLeft}ch` : undefined,
+    "padding-right": props.paddingRight !== undefined ? `${props.paddingRight}ch` : undefined,
+    "padding-top":
+      props.paddingTop !== undefined ? `calc(${props.paddingTop} * var(--line-height))` : undefined,
+    "padding-bottom":
+      props.paddingBottom !== undefined
+        ? `calc(${props.paddingBottom} * var(--line-height))`
+        : undefined,
+    background: props.backgroundColor ? rgbaToCSS(props.backgroundColor) : undefined,
+    "border-color": props.borderColor ? rgbaToCSS(props.borderColor) : undefined,
+    top: props.top !== undefined ? `calc(${props.top} * var(--line-height))` : undefined,
+    left: props.left !== undefined ? `${props.left}ch` : undefined,
+    right: props.right !== undefined ? `${props.right}ch` : undefined,
+    bottom: props.bottom !== undefined ? `calc(${props.bottom} * var(--line-height))` : undefined,
+  });
+
+  return (
+    <div
+      id={props.id}
+      style={style()}
+      onMouseDown={props.onMouseDown}
+      onMouseUp={props.onMouseUp}
+      onMouseMove={props.onMouseMove}
+      onMouseOver={props.onMouseOver}
+      ref={props.ref}
+    >
+      {props.children}
+    </div>
+  );
+}

package/packages/daemon/src/ui/web/components/Text.tsx

@@ -0,0 +1,28 @@
+import type { ParentProps, JSX } from "solid-js";
+import { rgbaToCSS, attributesToStyle } from "../utils/color.ts";
+import type { TextProps } from "../../types.ts";
+
+export function Text(props: ParentProps<TextProps>) {
+  const style = (): JSX.CSSProperties => ({
+    color: props.fg ? rgbaToCSS(props.fg) : undefined,
+    background: props.bg ? rgbaToCSS(props.bg) : undefined,
+    "white-space":
+      props.wrapMode === "none" ? "nowrap" : props.wrapMode === "word" ? "pre-wrap" : undefined,
+    overflow: props.wrapMode === "none" ? "hidden" : undefined,
+    "word-break": props.wrapMode === "word" ? "break-word" : undefined,
+    width: typeof props.width === "number" ? `${props.width}ch` : props.width,
+    height:
+      typeof props.height === "number"
+        ? `calc(${props.height} * var(--line-height))`
+        : props.height,
+    "flex-grow": props.flexGrow,
+    "flex-shrink": props.flexShrink,
+    ...attributesToStyle(props.attributes ?? 0),
+  });
+
+  return (
+    <span style={style()} onMouseUp={props.onMouseUp} onMouseDown={props.onMouseDown}>
+      {props.children}
+    </span>
+  );
+}

package/packages/daemon/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/packages/daemon/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/packages/daemon/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/packages/daemon/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;
+}