@ai-matrx/terminal 0.0.0-stage → 0.1.2

package/dist/react.js

@@ -0,0 +1,817 @@
+"use client";
+
+// src/react/Terminal.tsx
+import "@xterm/xterm/css/xterm.css";
+import "@ai-matrx/terminal/styles.css";
+import { useEffect, useRef, useState } from "react";
+
+// src/core/keys.ts
+var ACCESSORY_KEYS = [
+  { id: "esc", label: "Esc", aria: "Escape", kind: "send", group: 0 },
+  { id: "tab", label: "Tab", aria: "Tab", kind: "send", group: 0 },
+  { id: "ctrl", label: "Ctrl", aria: "Control", kind: "modifier", group: 0 },
+  { id: "alt", label: "Alt", aria: "Alt", kind: "modifier", group: 0 },
+  { id: "left", label: "\u2190", aria: "Left arrow", kind: "send", group: 1 },
+  { id: "down", label: "\u2193", aria: "Down arrow", kind: "send", group: 1 },
+  { id: "up", label: "\u2191", aria: "Up arrow", kind: "send", group: 1 },
+  { id: "right", label: "\u2192", aria: "Right arrow", kind: "send", group: 1 },
+  { id: "pipe", label: "|", aria: "Pipe", kind: "send", group: 2 },
+  { id: "slash", label: "/", aria: "Slash", kind: "send", group: 2 },
+  { id: "tilde", label: "~", aria: "Tilde", kind: "send", group: 2 },
+  { id: "dash", label: "-", aria: "Dash", kind: "send", group: 2 },
+  { id: "home", label: "Home", aria: "Home", kind: "send", group: 3 },
+  { id: "end", label: "End", aria: "End", kind: "send", group: 3 },
+  { id: "pgup", label: "PgUp", aria: "Page up", kind: "send", group: 3 },
+  { id: "pgdn", label: "PgDn", aria: "Page down", kind: "send", group: 3 },
+  { id: "paste", label: "Paste", aria: "Paste", kind: "action", group: 4 },
+  { id: "hide", label: "Hide", aria: "Hide keyboard", kind: "action", group: 4 }
+];
+var ESC = "\x1B";
+var CURSOR = { up: "A", down: "B", right: "C", left: "D", home: "H", end: "F" };
+var TILDE = { pgup: "5", pgdn: "6" };
+var LITERAL = { pipe: "|", slash: "/", tilde: "~", dash: "-", tab: "	", esc: ESC };
+function modParam(mods) {
+  return 1 + (mods.alt ? 2 : 0) + (mods.ctrl ? 4 : 0);
+}
+function keySequence(id, mods, modes) {
+  const cursor = CURSOR[id];
+  if (cursor !== void 0) {
+    const m = modParam(mods);
+    if (m > 1) return `${ESC}[1;${m}${cursor}`;
+    return modes.applicationCursor ? `${ESC}O${cursor}` : `${ESC}[${cursor}`;
+  }
+  const tilde = TILDE[id];
+  if (tilde !== void 0) {
+    const m = modParam(mods);
+    return m > 1 ? `${ESC}[${tilde};${m}~` : `${ESC}[${tilde}~`;
+  }
+  const literal = LITERAL[id];
+  if (literal !== void 0) {
+    if (id === "tab" && mods.ctrl === false && mods.alt === false) return literal;
+    if (id === "esc") return mods.alt ? ESC + ESC : ESC;
+    return applyModifiers(literal, mods).data;
+  }
+  return null;
+}
+function controlCode(char) {
+  if (char.length !== 1) return null;
+  const code = char.charCodeAt(0);
+  if (code >= 97 && code <= 122) return String.fromCharCode(code - 96);
+  if (code >= 64 && code <= 95) return String.fromCharCode(code - 64);
+  switch (char) {
+    case " ":
+    case "2":
+      return "\0";
+    case "3":
+      return "\x1B";
+    case "4":
+      return "";
+    case "5":
+      return "";
+    case "6":
+      return "";
+    case "7":
+    case "/":
+    case "-":
+      return "";
+    case "8":
+    case "?":
+      return "\x7F";
+    default:
+      return null;
+  }
+}
+function applyModifiers(data, mods) {
+  if (!mods.ctrl && !mods.alt) return { data, consumed: false };
+  const chars = Array.from(data);
+  if (chars.length !== 1) {
+    const m = /^\x1b(?:\[|O)([ABCDHF])$/.exec(data);
+    if (m) return { data: `${ESC}[1;${modParam(mods)}${m[1]}`, consumed: true };
+    return { data, consumed: false };
+  }
+  let out = data;
+  if (mods.ctrl) {
+    const ctl = controlCode(data);
+    if (ctl !== null) out = ctl;
+  }
+  if (mods.alt) out = ESC + out;
+  return { data: out, consumed: true };
+}
+
+// src/core/modifiers.ts
+var DOUBLE_TAP_MS = 350;
+var MODIFIER_OFF = { state: "off", tappedAt: null };
+function tapModifier(latch, now) {
+  switch (latch.state) {
+    case "off":
+      return { state: "once", tappedAt: now };
+    case "once":
+      return latch.tappedAt !== null && now - latch.tappedAt <= DOUBLE_TAP_MS ? { state: "locked", tappedAt: now } : { state: "off", tappedAt: now };
+    case "locked":
+      return { state: "off", tappedAt: now };
+  }
+}
+function afterKey(latch) {
+  return latch.state === "once" ? { state: "off", tappedAt: latch.tappedAt } : latch;
+}
+function isActive(latch) {
+  return latch.state !== "off";
+}
+
+// src/core/gesture.ts
+var LONG_PRESS_MS = 450;
+var FLING_FRICTION = 0.95;
+var FLING_STOP = 2e-3;
+var FLING_MIN = 0.01;
+function createGestureRecognizer(options) {
+  const slop = options.slopPx ?? 8;
+  const lineHeight = Math.max(1, options.lineHeight);
+  let phase = "idle";
+  let start = { x: 0, y: 0, t: 0 };
+  let last = start;
+  let carryPx = 0;
+  let trail = [];
+  function scrollBy(fromY, toY) {
+    carryPx += fromY - toY;
+    const lines = carryPx > 0 ? Math.floor(carryPx / lineHeight) : Math.ceil(carryPx / lineHeight);
+    if (lines === 0) return [];
+    carryPx -= lines * lineHeight;
+    return [{ kind: "scroll", lines }];
+  }
+  return {
+    get phase() {
+      return phase;
+    },
+    down(s) {
+      phase = "pressed";
+      start = s;
+      last = s;
+      carryPx = 0;
+      trail = [s];
+      return [];
+    },
+    move(s) {
+      if (phase === "idle") return [];
+      const out = [];
+      if (phase === "pressed") {
+        if (Math.hypot(s.x - start.x, s.y - start.y) <= slop) return [];
+        phase = "scrolling";
+      }
+      if (phase === "scrolling") {
+        out.push(...scrollBy(last.y, s.y));
+        trail.push(s);
+        while (trail.length > 2 && s.t - trail[0].t > 100) trail.shift();
+      } else if (phase === "selecting") {
+        out.push({ kind: "select-extend", x: s.x, y: s.y });
+      }
+      last = s;
+      return out;
+    },
+    up(s) {
+      const was = phase;
+      phase = "idle";
+      if (was === "pressed") return [{ kind: "tap", x: start.x, y: start.y }];
+      if (was === "selecting") return [{ kind: "select-end" }];
+      if (was === "scrolling") {
+        const out = scrollBy(last.y, s.y);
+        trail.push(s);
+        const first = trail[0];
+        const dt = s.t - first.t;
+        const velocity = dt > 0 ? (first.y - s.y) / dt / lineHeight : 0;
+        if (Math.abs(velocity) >= FLING_MIN) out.push({ kind: "fling", velocity });
+        return out;
+      }
+      return [];
+    },
+    cancel() {
+      const was = phase;
+      phase = "idle";
+      return was === "selecting" ? [{ kind: "select-end" }] : [];
+    },
+    longPress() {
+      if (phase !== "pressed") return [];
+      phase = "selecting";
+      return [{ kind: "select-start", x: start.x, y: start.y }];
+    }
+  };
+}
+function flingStep(velocity, dtMs) {
+  const lines = velocity * dtMs;
+  const next = velocity * Math.pow(FLING_FRICTION, dtMs / 16);
+  return { lines, velocity: Math.abs(next) < FLING_STOP ? 0 : next };
+}
+
+// src/core/selection.ts
+var WORD = /[A-Za-z0-9_\-./~:@%+=,?&#]/;
+function wordBounds(line, col) {
+  const chars = Array.from(line);
+  if (col < 0 || col >= chars.length || !WORD.test(chars[col] ?? " ")) return { start: col, end: col + 1 };
+  let start = col;
+  let end = col + 1;
+  while (start > 0 && WORD.test(chars[start - 1])) start--;
+  while (end < chars.length && WORD.test(chars[end])) end++;
+  return { start, end };
+}
+function spanBetween(anchor, focus, cols) {
+  const a = anchor.row * cols + anchor.col;
+  const b = focus.row * cols + focus.col;
+  const from = Math.min(a, b);
+  const to = Math.max(a, b);
+  return { col: from % cols, row: Math.floor(from / cols), length: to - from + 1 };
+}
+function cellAt(point, box, grid) {
+  const cw = box.width / Math.max(1, grid.cols);
+  const ch = box.height / Math.max(1, grid.rows);
+  const col = Math.min(grid.cols - 1, Math.max(0, Math.floor((point.x - box.left) / cw)));
+  const screenRow = Math.min(grid.rows - 1, Math.max(0, Math.floor((point.y - box.top) / ch)));
+  return { col, row: grid.viewportY + screenRow };
+}
+
+// src/core/theme.ts
+var TERMINAL_FONT_FAMILY = 'ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace';
+var TERMINAL_DEFAULTS = {
+  fontSize: 13,
+  lineHeight: 1.2,
+  scrollback: 5e3,
+  /** Side padding inside the terminal box, px. */
+  padding: 8
+};
+var FONT_SIZE_MIN = 9;
+var FONT_SIZE_MAX = 24;
+function stepFontSize(current, delta) {
+  return Math.min(FONT_SIZE_MAX, Math.max(FONT_SIZE_MIN, Math.round(current) + delta));
+}
+function pinchFontSize(startSize, startDistance, distance) {
+  if (startDistance <= 0) return startSize;
+  return Math.min(FONT_SIZE_MAX, Math.max(FONT_SIZE_MIN, Math.round(startSize * distance / startDistance)));
+}
+function terminalTheme(dark) {
+  return dark ? {
+    background: "#1e1e1e",
+    foreground: "#e4e4e7",
+    cursor: "#e4e4e7",
+    cursorAccent: "#1e1e1e",
+    black: "#1e1e1e",
+    red: "#f87171",
+    green: "#4ade80",
+    yellow: "#facc15",
+    blue: "#60a5fa",
+    magenta: "#c084fc",
+    cyan: "#22d3ee",
+    white: "#e5e7eb",
+    brightBlack: "#71717a",
+    brightRed: "#fca5a5",
+    brightGreen: "#86efac",
+    brightYellow: "#fde047",
+    brightBlue: "#93c5fd",
+    brightMagenta: "#d8b4fe",
+    brightCyan: "#67e8f9",
+    brightWhite: "#f4f4f5",
+    selectionBackground: "#3b82f680"
+  } : {
+    background: "#ffffff",
+    foreground: "#18181b",
+    cursor: "#18181b",
+    cursorAccent: "#ffffff",
+    black: "#18181b",
+    red: "#b91c1c",
+    green: "#15803d",
+    yellow: "#b45309",
+    blue: "#1d4ed8",
+    magenta: "#7c3aed",
+    cyan: "#0e7490",
+    white: "#d4d4d8",
+    brightBlack: "#71717a",
+    brightRed: "#dc2626",
+    brightGreen: "#16a34a",
+    brightYellow: "#d97706",
+    brightBlue: "#2563eb",
+    brightMagenta: "#9333ea",
+    brightCyan: "#0891b2",
+    brightWhite: "#a1a1aa",
+    selectionBackground: "#93c5fd99"
+  };
+}
+
+// src/core/viewport.ts
+function visibleHeightBelow(top, vv, layoutHeight) {
+  const bottom = vv ? vv.offsetTop + vv.height : layoutHeight;
+  return Math.max(0, Math.floor(bottom - top));
+}
+
+// src/react/AccessoryBar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PasteIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("rect", { x: "8", y: "2", width: "8", height: "4", rx: "1" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" })
+  ] });
+}
+function HideKeyboardIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "3", width: "20", height: "12", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M6 7h.01M10 7h.01M14 7h.01M18 7h.01M7 11h10" }),
+    /* @__PURE__ */ jsx("path", { d: "m8 19 4 3 4-3" })
+  ] });
+}
+var ICONS = { paste: PasteIcon, hide: HideKeyboardIcon };
+function AccessoryBar({ ctrl, alt, onKey }) {
+  const groups = [];
+  for (const key of ACCESSORY_KEYS) (groups[key.group] ??= []).push(key);
+  return /* @__PURE__ */ jsx("div", { className: "mxt-bar", role: "toolbar", "aria-label": "Terminal keys", children: groups.map((group, gi) => /* @__PURE__ */ jsxs("div", { className: "mxt-bar-group", children: [
+    gi > 0 ? /* @__PURE__ */ jsx("span", { className: "mxt-bar-divider", "aria-hidden": "true" }) : null,
+    group.map((key) => {
+      const state = key.id === "ctrl" ? ctrl : key.id === "alt" ? alt : null;
+      const Icon = ICONS[key.id];
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "mxt-key",
+          "data-state": state ?? void 0,
+          "aria-label": key.aria,
+          "aria-pressed": state === null ? void 0 : state !== "off",
+          onPointerDown: (e) => e.preventDefault(),
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => onKey(key.id),
+          children: Icon ? /* @__PURE__ */ jsx(Icon, {}) : key.label
+        },
+        key.id
+      );
+    })
+  ] }, gi)) });
+}
+
+// src/react/Terminal.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function prefersDark() {
+  return typeof document !== "undefined" && document.documentElement.classList.contains("dark");
+}
+function coarsePointer() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(pointer: coarse)").matches;
+}
+function Terminal(props) {
+  const {
+    theme = "auto",
+    fontSize = TERMINAL_DEFAULTS.fontSize,
+    lineHeight = TERMINAL_DEFAULTS.lineHeight,
+    scrollback = TERMINAL_DEFAULTS.scrollback,
+    padding = TERMINAL_DEFAULTS.padding,
+    convertEol = false,
+    cursorBlink = true,
+    disableStdin = false,
+    links = true,
+    touch = "auto",
+    accessory = "auto",
+    fit = "container",
+    autoFocus = false
+  } = props;
+  const rootRef = useRef(null);
+  const hostRef = useRef(null);
+  const termRef = useRef(null);
+  const fitRef = useRef(null);
+  const handleRef = useRef(null);
+  const latchRef = useRef({ ctrl: MODIFIER_OFF, alt: MODIFIER_OFF });
+  const callbacksRef = useRef({
+    onData: props.onData,
+    onResize: props.onResize,
+    onReady: props.onReady,
+    onInterrupt: props.onInterrupt,
+    onFontSizeChange: props.onFontSizeChange
+  });
+  const fontSizeRef = useRef(fontSize);
+  const [latches, setLatches] = useState({ ctrl: MODIFIER_OFF, alt: MODIFIER_OFF });
+  const [coarse, setCoarse] = useState(false);
+  const [dark, setDark] = useState(theme === "dark");
+  const [copyVisible, setCopyVisible] = useState(false);
+  const [viewportHeight, setViewportHeight] = useState(null);
+  const [booted, setBooted] = useState(false);
+  useEffect(() => {
+    callbacksRef.current = {
+      onData: props.onData,
+      onResize: props.onResize,
+      onReady: props.onReady,
+      onInterrupt: props.onInterrupt,
+      onFontSizeChange: props.onFontSizeChange
+    };
+    fontSizeRef.current = fontSize;
+  });
+  useEffect(() => {
+    setCoarse(coarsePointer());
+    const mq = typeof window.matchMedia === "function" ? window.matchMedia("(pointer: coarse)") : null;
+    const onChange = () => setCoarse(coarsePointer());
+    mq?.addEventListener("change", onChange);
+    return () => mq?.removeEventListener("change", onChange);
+  }, []);
+  useEffect(() => {
+    if (theme !== "auto") {
+      setDark(theme === "dark");
+      return void 0;
+    }
+    setDark(prefersDark());
+    if (typeof MutationObserver === "undefined") return void 0;
+    const observer = new MutationObserver(() => setDark(prefersDark()));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, [theme]);
+  const touchOn = touch === "on" || touch === "auto" && coarse;
+  const barOn = accessory === "on" || accessory === "auto" && coarse;
+  function setLatchState(next) {
+    latchRef.current = next;
+    setLatches(next);
+  }
+  function emit(data) {
+    const current = latchRef.current;
+    const mods = { ctrl: isActive(current.ctrl), alt: isActive(current.alt) };
+    const { data: out, consumed } = applyModifiers(data, mods);
+    if (consumed) setLatchState({ ctrl: afterKey(current.ctrl), alt: afterKey(current.alt) });
+    callbacksRef.current.onData?.(out);
+  }
+  useEffect(() => {
+    let cancelled = false;
+    let disposeAll = null;
+    void (async () => {
+      const [{ Terminal: XTermCtor }, { FitAddon: FitCtor }, linksModule] = await Promise.all([
+        import("@xterm/xterm"),
+        import("@xterm/addon-fit"),
+        import("@xterm/addon-web-links")
+      ]);
+      const host = hostRef.current;
+      if (cancelled || !host) return;
+      const options = {
+        fontFamily: TERMINAL_FONT_FAMILY,
+        fontSize,
+        lineHeight,
+        scrollback,
+        convertEol,
+        cursorBlink,
+        cursorStyle: "bar",
+        disableStdin,
+        allowProposedApi: false,
+        theme: terminalTheme(theme === "auto" ? prefersDark() : theme === "dark")
+      };
+      const term = new XTermCtor(options);
+      const fitAddon = new FitCtor();
+      term.loadAddon(fitAddon);
+      if (links) term.loadAddon(new linksModule.WebLinksAddon());
+      term.open(host);
+      const textarea = term.textarea;
+      if (textarea) {
+        textarea.setAttribute("autocorrect", "off");
+        textarea.setAttribute("autocapitalize", "off");
+        textarea.setAttribute("autocomplete", "off");
+        textarea.setAttribute("spellcheck", "false");
+        textarea.setAttribute("aria-label", props["aria-label"] ?? "Terminal input");
+      }
+      termRef.current = term;
+      fitRef.current = fitAddon;
+      const dataSub = term.onData((data) => emit(data));
+      const resizeSub = term.onResize(({ cols, rows }) => callbacksRef.current.onResize?.({ cols, rows }));
+      term.attachCustomKeyEventHandler((event) => {
+        const zoom = callbacksRef.current.onFontSizeChange;
+        if (zoom && event.type === "keydown" && event.metaKey && !event.altKey && !event.ctrlKey) {
+          const delta = event.key === "=" || event.key === "+" ? 1 : event.key === "-" ? -1 : event.key === "0" ? 0 : null;
+          if (delta !== null) {
+            event.preventDefault();
+            zoom(delta === 0 ? TERMINAL_DEFAULTS.fontSize : stepFontSize(fontSizeRef.current, delta));
+            return false;
+          }
+        }
+        if (event.type === "keydown" && event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey && event.key.toLowerCase() === "c" && !term.hasSelection()) {
+          const consumed = callbacksRef.current.onInterrupt?.() ?? false;
+          if (consumed) return false;
+        }
+        return true;
+      });
+      const selectionSub = term.onSelectionChange(() => setCopyVisible(term.hasSelection()));
+      const handle = {
+        write: (data) => new Promise((resolve) => term.write(data, resolve)),
+        reset: () => term.reset(),
+        clear: () => term.clear(),
+        focus: () => term.focus(),
+        blur: () => term.blur(),
+        getText: () => {
+          const buffer = term.buffer.active;
+          const lines = [];
+          for (let y = 0; y < buffer.length; y++) lines.push(buffer.getLine(y)?.translateToString(true) ?? "");
+          while (lines.length > 0 && lines[lines.length - 1] === "") lines.pop();
+          return lines.join("\n");
+        },
+        get cols() {
+          return term.cols;
+        },
+        get rows() {
+          return term.rows;
+        },
+        xterm: term
+      };
+      handleRef.current = handle;
+      try {
+        fitAddon.fit();
+      } catch {
+      }
+      setBooted(true);
+      callbacksRef.current.onResize?.({ cols: term.cols, rows: term.rows });
+      callbacksRef.current.onReady?.(handle);
+      if (autoFocus) term.focus();
+      disposeAll = () => {
+        dataSub.dispose();
+        resizeSub.dispose();
+        selectionSub.dispose();
+        term.dispose();
+      };
+    })();
+    return () => {
+      cancelled = true;
+      disposeAll?.();
+      termRef.current = null;
+      fitRef.current = null;
+      handleRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    const term = termRef.current;
+    if (!term) return;
+    term.options.theme = terminalTheme(dark);
+  }, [dark, booted]);
+  useEffect(() => {
+    const term = termRef.current;
+    if (!term) return;
+    term.options.disableStdin = disableStdin;
+    term.options.fontSize = fontSize;
+    term.options.lineHeight = lineHeight;
+    try {
+      fitRef.current?.fit();
+    } catch {
+    }
+  }, [disableStdin, fontSize, lineHeight, booted]);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return void 0;
+    const refit = () => {
+      const term = termRef.current;
+      if (!term || host.clientWidth <= 0 || host.clientHeight <= 0) return;
+      try {
+        fitRef.current?.fit();
+        term.refresh(0, term.rows - 1);
+      } catch {
+      }
+    };
+    refit();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const ro = new ResizeObserver(refit);
+    ro.observe(host);
+    return () => ro.disconnect();
+  }, [booted]);
+  useEffect(() => {
+    if (fit !== "viewport") {
+      setViewportHeight(null);
+      return void 0;
+    }
+    const root = rootRef.current;
+    if (!root) return void 0;
+    const vv = window.visualViewport;
+    const measure = () => {
+      if (window.scrollY !== 0) window.scrollTo(0, 0);
+      const top = root.getBoundingClientRect().top + window.scrollY;
+      setViewportHeight(visibleHeightBelow(top, vv ? { height: vv.height, offsetTop: vv.offsetTop } : null, window.innerHeight));
+    };
+    measure();
+    vv?.addEventListener("resize", measure);
+    vv?.addEventListener("scroll", measure);
+    window.addEventListener("resize", measure);
+    window.addEventListener("orientationchange", measure);
+    return () => {
+      vv?.removeEventListener("resize", measure);
+      vv?.removeEventListener("scroll", measure);
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("orientationchange", measure);
+    };
+  }, [fit]);
+  useEffect(() => {
+    const host = hostRef.current;
+    const term = termRef.current;
+    if (!touchOn || !host || !term) return void 0;
+    let recognizer = createGestureRecognizer({ lineHeight: fontSizeRef.current * lineHeight });
+    let holdTimer = null;
+    let flingFrame = null;
+    let flingCarry = 0;
+    let anchor = null;
+    const screen = () => term.element?.querySelector(".xterm-screen") ?? host;
+    const cellFor = (x, y) => {
+      const r = screen().getBoundingClientRect();
+      return cellAt({ x, y }, { left: r.left, top: r.top, width: r.width, height: r.height }, { cols: term.cols, rows: term.rows, viewportY: term.buffer.active.viewportY });
+    };
+    const scrollLines = (lines) => {
+      if (lines === 0) return;
+      if (term.buffer.active.type === "alternate") {
+        const key = lines > 0 ? "down" : "up";
+        const seq = keySequence(key, { ctrl: false, alt: false }, { applicationCursor: term.modes.applicationCursorKeysMode });
+        if (seq) callbacksRef.current.onData?.(seq.repeat(Math.min(Math.abs(lines), 50)));
+        return;
+      }
+      term.scrollLines(lines);
+    };
+    const stopFling = () => {
+      if (flingFrame !== null) cancelAnimationFrame(flingFrame);
+      flingFrame = null;
+      flingCarry = 0;
+    };
+    const startFling = (velocity) => {
+      stopFling();
+      let v = velocity;
+      let last = performance.now();
+      const step = (now) => {
+        const res = flingStep(v, now - last);
+        last = now;
+        v = res.velocity;
+        flingCarry += res.lines;
+        const whole = flingCarry > 0 ? Math.floor(flingCarry) : Math.ceil(flingCarry);
+        if (whole !== 0) {
+          flingCarry -= whole;
+          scrollLines(whole);
+        }
+        flingFrame = v === 0 ? null : requestAnimationFrame(step);
+      };
+      flingFrame = requestAnimationFrame(step);
+    };
+    const act = (actions) => {
+      for (const a of actions) {
+        switch (a.kind) {
+          case "tap":
+            term.clearSelection();
+            term.focus();
+            break;
+          case "scroll":
+            scrollLines(a.lines);
+            break;
+          case "fling":
+            startFling(a.velocity);
+            break;
+          case "select-start": {
+            const cell = cellFor(a.x, a.y);
+            const line = term.buffer.active.getLine(cell.row)?.translateToString(false) ?? "";
+            const word = wordBounds(line, cell.col);
+            anchor = { col: word.start, row: cell.row };
+            term.select(word.start, cell.row, Math.max(1, word.end - word.start));
+            navigator.vibrate?.(10);
+            break;
+          }
+          case "select-extend": {
+            if (!anchor) break;
+            const span = spanBetween(anchor, cellFor(a.x, a.y), term.cols);
+            term.select(span.col, span.row, span.length);
+            break;
+          }
+          case "select-end":
+            anchor = null;
+            setCopyVisible(term.hasSelection());
+            break;
+        }
+      }
+    };
+    const clearHold = () => {
+      if (holdTimer !== null) clearTimeout(holdTimer);
+      holdTimer = null;
+    };
+    let pinch = null;
+    const fingerDistance = (e) => {
+      const a = e.touches[0];
+      const b = e.touches[1];
+      return Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+    };
+    const onStart = (e) => {
+      if (e.touches.length === 2 && callbacksRef.current.onFontSizeChange) {
+        e.preventDefault();
+        clearHold();
+        stopFling();
+        act(recognizer.cancel());
+        pinch = { startDistance: fingerDistance(e), startSize: fontSizeRef.current };
+        return;
+      }
+      if (e.touches.length !== 1) {
+        clearHold();
+        act(recognizer.cancel());
+        return;
+      }
+      const t = e.touches[0];
+      e.preventDefault();
+      stopFling();
+      recognizer = createGestureRecognizer({ lineHeight: fontSizeRef.current * lineHeight });
+      act(recognizer.down({ x: t.clientX, y: t.clientY, t: e.timeStamp }));
+      clearHold();
+      holdTimer = setTimeout(() => act(recognizer.longPress()), LONG_PRESS_MS);
+    };
+    const onMove = (e) => {
+      if (pinch && e.touches.length === 2) {
+        e.preventDefault();
+        const size = pinchFontSize(pinch.startSize, pinch.startDistance, fingerDistance(e));
+        if (size !== fontSizeRef.current) {
+          fontSizeRef.current = size;
+          callbacksRef.current.onFontSizeChange?.(size);
+        }
+        return;
+      }
+      if (e.touches.length !== 1 || recognizer.phase === "idle") return;
+      const t = e.touches[0];
+      e.preventDefault();
+      act(recognizer.move({ x: t.clientX, y: t.clientY, t: e.timeStamp }));
+      if (recognizer.phase !== "pressed") clearHold();
+    };
+    const onEnd = (e) => {
+      if (pinch) {
+        if (e.touches.length < 2) pinch = null;
+        e.preventDefault();
+        return;
+      }
+      clearHold();
+      if (recognizer.phase === "idle") return;
+      const t = e.changedTouches[0];
+      e.preventDefault();
+      act(recognizer.up({ x: t?.clientX ?? 0, y: t?.clientY ?? 0, t: e.timeStamp }));
+    };
+    const onCancel = () => {
+      clearHold();
+      act(recognizer.cancel());
+    };
+    host.addEventListener("touchstart", onStart, { passive: false });
+    host.addEventListener("touchmove", onMove, { passive: false });
+    host.addEventListener("touchend", onEnd, { passive: false });
+    host.addEventListener("touchcancel", onCancel);
+    return () => {
+      clearHold();
+      stopFling();
+      host.removeEventListener("touchstart", onStart);
+      host.removeEventListener("touchmove", onMove);
+      host.removeEventListener("touchend", onEnd);
+      host.removeEventListener("touchcancel", onCancel);
+    };
+  }, [touchOn, booted, lineHeight]);
+  function onAccessoryKey(id) {
+    const term = termRef.current;
+    if (!term) return;
+    const def = ACCESSORY_KEYS.find((k) => k.id === id);
+    if (!def) return;
+    if (def.kind === "modifier") {
+      const now = performance.now();
+      const current2 = latchRef.current;
+      setLatchState(id === "ctrl" ? { ...current2, ctrl: tapModifier(current2.ctrl, now) } : { ...current2, alt: tapModifier(current2.alt, now) });
+      return;
+    }
+    if (id === "hide") {
+      term.blur();
+      term.textarea?.blur();
+      return;
+    }
+    if (id === "paste") {
+      if (!navigator.clipboard?.readText) return;
+      navigator.clipboard.readText().then(
+        (text) => {
+          if (text) term.paste(text);
+        },
+        () => void 0
+        // permission refused: the system paste menu still works on the input
+      );
+      return;
+    }
+    const current = latchRef.current;
+    const mods = { ctrl: isActive(current.ctrl), alt: isActive(current.alt) };
+    const seq = keySequence(id, mods, { applicationCursor: term.modes.applicationCursorKeysMode });
+    if (seq === null) return;
+    if (mods.ctrl || mods.alt) setLatchState({ ctrl: afterKey(current.ctrl), alt: afterKey(current.alt) });
+    callbacksRef.current.onData?.(seq);
+  }
+  function copySelection() {
+    const term = termRef.current;
+    if (!term) return;
+    const text = term.getSelection();
+    if (text && navigator.clipboard?.writeText) void navigator.clipboard.writeText(text);
+    term.clearSelection();
+    setCopyVisible(false);
+  }
+  const rootStyle = { ...props.style };
+  if (viewportHeight !== null) rootStyle.height = viewportHeight;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: rootRef,
+      className: ["mxt-root", props.className].filter(Boolean).join(" "),
+      style: rootStyle,
+      "data-touch": touchOn ? "on" : "off",
+      "data-theme": dark ? "dark" : "light",
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "mxt-frame", style: { background: terminalTheme(dark).background }, children: [
+          /* @__PURE__ */ jsx2("div", { ref: hostRef, className: "mxt-host", style: { paddingLeft: padding, paddingRight: padding } }),
+          copyVisible ? /* @__PURE__ */ jsx2("button", { type: "button", className: "mxt-copy", onPointerDown: (e) => e.preventDefault(), onClick: copySelection, children: "Copy" }) : null,
+          props.children
+        ] }),
+        barOn ? /* @__PURE__ */ jsx2(AccessoryBar, { ctrl: latches.ctrl.state, alt: latches.alt.state, onKey: onAccessoryKey }) : null
+      ]
+    }
+  );
+}
+export {
+  AccessoryBar,
+  Terminal
+};
+//# sourceMappingURL=react.js.map