@tangle-network/sandbox-ui 0.6.1 → 0.9.0

package/dist/template-card-BAtvcAkU.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface TemplateCardData {
+    id: string;
+    name: string;
+    description: string;
+    icon?: React.ReactNode;
+    tags?: string[];
+}
+interface TemplateCardProps {
+    template: TemplateCardData;
+    onUseTemplate: (templateId: string) => void;
+    className?: string;
+}
+declare function TemplateCard({ template, onUseTemplate, className }: TemplateCardProps): react_jsx_runtime.JSX.Element;
+
+export { type TemplateCardData as T, TemplateCard as a, type TemplateCardProps as b };

package/dist/terminal.d.ts

@@ -37,8 +37,10 @@ interface TerminalViewProps {
     subtitle?: string;
     /** @deprecated No longer used — the PTY provides its own prompt. */
     prompt?: string;
+    /** Whether the terminal tab is currently active and visible. */
+    isActive?: boolean;
 }
 declare const DEFAULT_TERMINAL_THEME: TerminalTheme;
-declare function TerminalView({ apiUrl, token, theme, title, subtitle, }: TerminalViewProps): react_jsx_runtime.JSX.Element;
+declare function TerminalView({ apiUrl, token, theme, title, subtitle, isActive, }: TerminalViewProps): react_jsx_runtime.JSX.Element;
 
 export { DEFAULT_TERMINAL_THEME, type TerminalTheme, TerminalView, type TerminalViewProps };

package/dist/terminal.js

@@ -1,10 +1,10 @@
 import {
   usePtySession
-} from "./chunk-DLCFZDGX.js";
+} from "./chunk-5UM2XMEJ.js";
 
 // src/terminal/terminal-view.tsx
 import "@xterm/xterm/css/xterm.css";
-import { useEffect, useRef, useCallback } from "react";
+import { useEffect, useRef, useCallback, useMemo } from "react";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { WebLinksAddon } from "@xterm/addon-web-links";
@@ -38,16 +38,20 @@ function TerminalView({
   token,
   theme,
   title = "Terminal",
-  subtitle = "Connected to PTY session"
+  subtitle = "Connected to PTY session",
+  isActive = true
 }) {
-  const resolvedTheme = { ...DEFAULT_TERMINAL_THEME, ...theme };
+  const resolvedTheme = useMemo(
+    () => ({ ...DEFAULT_TERMINAL_THEME, ...theme }),
+    [theme]
+  );
   const containerRef = useRef(null);
   const termRef = useRef(null);
   const fitAddonRef = useRef(null);
   const onData = useCallback((data) => {
     termRef.current?.write(data);
   }, []);
-  const { isConnected, error, sendCommand, reconnect } = usePtySession({
+  const { isConnected, error, sendCommand, resizeTerminal, reconnect } = usePtySession({
     apiUrl,
     token,
     onData
@@ -75,13 +79,12 @@ function TerminalView({
     });
     termRef.current = term;
     fitAddonRef.current = fitAddon;
-    const padTitle = title.padEnd(37);
-    const padSubtitle = subtitle.padEnd(37);
-    term.writeln(`\x1B[38;5;48m\u256D${"\u2500".repeat(41)}\u256E\x1B[0m`);
-    term.writeln(`\x1B[38;5;48m\u2502\x1B[0m  \x1B[1m${padTitle}\x1B[0m\x1B[38;5;48m\u2502\x1B[0m`);
-    term.writeln(`\x1B[38;5;48m\u2502\x1B[0m  ${padSubtitle}\x1B[38;5;48m\u2502\x1B[0m`);
-    term.writeln(`\x1B[38;5;48m\u2570${"\u2500".repeat(41)}\u256F\x1B[0m`);
     term.onData((data) => {
+      if (data === "\f") {
+        termRef.current?.clear();
+        sendCommand("\r").catch(console.error);
+        return;
+      }
       sendCommand(data).catch((err) => {
         termRef.current?.writeln(
           `\r
@@ -89,6 +92,9 @@ function TerminalView({
         );
       });
     });
+    term.onResize(({ cols, rows }) => {
+      resizeTerminal(cols, rows).catch(console.error);
+    });
     const ro = new ResizeObserver(() => {
       requestAnimationFrame(() => {
         fitAddon.fit();
@@ -101,28 +107,56 @@ function TerminalView({
       termRef.current = null;
       fitAddonRef.current = null;
     };
-  }, [sendCommand, resolvedTheme, title, subtitle]);
-  return /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: containerRef,
-        className: "h-full w-full rounded-lg overflow-hidden",
-        style: { backgroundColor: resolvedTheme.background }
+  }, [sendCommand, resizeTerminal, title, subtitle]);
+  useEffect(() => {
+    if (termRef.current) {
+      termRef.current.options.theme = resolvedTheme;
+    }
+  }, [resolvedTheme]);
+  useEffect(() => {
+    if (isConnected && termRef.current) {
+      resizeTerminal(termRef.current.cols, termRef.current.rows).catch(console.error);
+      if (isActive) {
+        termRef.current.focus();
       }
-    ),
-    (!isConnected || error) && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-[var(--depth-1)] rounded-lg", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: error ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--surface-danger-text)] mb-3", children: error }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: reconnect,
-          className: "text-sm text-[var(--surface-success-text)] hover:opacity-80 underline cursor-pointer",
-          children: "Retry connection"
-        }
-      )
-    ] }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-muted)]", children: "Connecting to terminal..." }) }) })
-  ] });
+    }
+  }, [isConnected, resizeTerminal, isActive]);
+  useEffect(() => {
+    if (isActive && termRef.current && fitAddonRef.current) {
+      setTimeout(() => {
+        fitAddonRef.current?.fit();
+        termRef.current?.focus();
+      }, 50);
+    }
+  }, [isActive]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative h-full w-full group cursor-text",
+      onClick: () => termRef.current?.focus(),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: containerRef,
+            className: "h-full w-full overflow-hidden relative z-0",
+            style: { backgroundColor: resolvedTheme.background }
+          }
+        ),
+        (!isConnected || error) && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: error ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--surface-danger-text)] mb-3", children: error }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: reconnect,
+              className: "text-sm text-[var(--surface-success-text)] hover:opacity-80 underline cursor-pointer",
+              children: "Retry connection"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx("p", { className: "text-[13px] text-muted-foreground", children: "Connecting to terminal..." }) }) })
+      ]
+    }
+  );
 }
 export {
   DEFAULT_TERMINAL_THEME,