@luxfi/ui 8.0.0 → 8.2.0

package/dist/terminal.cjs

@@ -0,0 +1,372 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var ui = require('@hanzo/ui');
+var lucideReact = require('lucide-react');
+var sonner = require('sonner');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var themes = {
+  dark: {
+    background: "bg-[var(--color-bg-primary)]",
+    text: "text-[var(--color-text-disabled)]",
+    prompt: "text-[var(--lux-state-success)]",
+    input: "text-white",
+    output: "text-[var(--color-text-disabled)]",
+    error: "text-[var(--lux-state-error)]",
+    success: "text-[var(--lux-state-success)]",
+    info: "text-[var(--color-link-primary)]",
+    border: "border-[var(--color-border-divider)]",
+    selection: "selection:bg-[var(--color-bg-primary)]"
+  },
+  light: {
+    background: "bg-white",
+    text: "text-[var(--color-text-primary)]",
+    prompt: "text-[var(--color-link-primary)]",
+    input: "text-[var(--color-text-primary)]",
+    output: "text-[var(--color-text-primary)]",
+    error: "text-[var(--lux-state-error)]",
+    success: "text-[var(--lux-state-success)]",
+    info: "text-[var(--color-link-primary)]",
+    border: "border-[var(--color-border-divider)]",
+    selection: "selection:bg-[var(--color-link-primary)]"
+  },
+  matrix: {
+    background: "bg-black",
+    text: "text-[var(--lux-state-success)]",
+    prompt: "text-[var(--lux-state-success)]",
+    input: "text-[var(--lux-state-success)]",
+    output: "text-[var(--lux-state-success)]",
+    error: "text-[var(--lux-state-error)]",
+    success: "text-[var(--lux-state-success)]",
+    info: "text-[var(--color-link-primary)]",
+    border: "border-[var(--lux-state-success)]",
+    selection: "selection:bg-[var(--lux-state-success)]"
+  },
+  dracula: {
+    background: "bg-[#282a36]",
+    text: "text-[#f8f8f2]",
+    prompt: "text-[#50fa7b]",
+    input: "text-[#f8f8f2]",
+    output: "text-[#6272a4]",
+    error: "text-[#ff5555]",
+    success: "text-[#50fa7b]",
+    info: "text-[#8be9fd]",
+    border: "border-[#44475a]",
+    selection: "selection:bg-[#44475a]"
+  }
+};
+var highlightSyntax = (text) => {
+  const patterns = [
+    { regex: /(".*?"|'.*?')/g, className: "text-[var(--lux-state-notice)]" },
+    // strings
+    { regex: /\b(true|false|null|undefined)\b/g, className: "text-[var(--lux-state-notice)]" },
+    // keywords
+    { regex: /\b(\d+)\b/g, className: "text-[var(--color-link-primary)]" },
+    // numbers
+    {
+      regex: /\b(function|const|let|var|if|else|for|while|return)\b/g,
+      className: "text-[var(--color-link-primary)]"
+    },
+    // js keywords
+    { regex: /(--?\w+)/g, className: "text-[var(--color-link-primary)]" }
+    // flags
+  ];
+  let highlighted = text;
+  patterns.forEach(({ regex, className }) => {
+    highlighted = highlighted.replace(
+      regex,
+      `<span class="${className}">$1</span>`
+    );
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: highlighted } });
+};
+function Terminal({
+  prompt = "$",
+  initialCommands = [],
+  onCommand,
+  theme = "dark",
+  enableHistory = true,
+  enableAutoComplete = true,
+  autoCompleteCommands = [
+    "help",
+    "clear",
+    "exit",
+    "ls",
+    "cd",
+    "pwd",
+    "echo",
+    "date",
+    "whoami"
+  ],
+  maxHistorySize = 50,
+  className,
+  ...props
+}) {
+  const [commands, setCommands] = React__namespace.useState(initialCommands);
+  const [currentInput, setCurrentInput] = React__namespace.useState("");
+  const [historyIndex, setHistoryIndex] = React__namespace.useState(-1);
+  const [commandHistory, setCommandHistory] = React__namespace.useState([]);
+  const [suggestions, setSuggestions] = React__namespace.useState([]);
+  const [suggestionIndex, setSuggestionIndex] = React__namespace.useState(0);
+  const [copied, setCopied] = React__namespace.useState(null);
+  const terminalRef = React__namespace.useRef(null);
+  const inputRef = React__namespace.useRef(null);
+  const currentTheme = themes[theme];
+  React__namespace.useEffect(() => {
+    if (terminalRef.current) {
+      terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
+    }
+  }, [commands]);
+  React__namespace.useEffect(() => {
+    if (enableAutoComplete && currentInput) {
+      const matches = autoCompleteCommands.filter(
+        (cmd) => cmd.toLowerCase().startsWith(currentInput.toLowerCase())
+      );
+      setSuggestions(matches);
+      setSuggestionIndex(0);
+    } else {
+      setSuggestions([]);
+    }
+  }, [currentInput, enableAutoComplete, autoCompleteCommands]);
+  const handleCommand = async (input) => {
+    if (!input.trim()) return;
+    const newCommand = {
+      id: Date.now().toString(),
+      input,
+      output: "",
+      timestamp: /* @__PURE__ */ new Date(),
+      type: "command"
+    };
+    if (input.toLowerCase() === "clear") {
+      setCommands([]);
+      setCurrentInput("");
+      return;
+    }
+    if (input.toLowerCase() === "help") {
+      newCommand.output = /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Available commands:" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "ml-4 space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: "\u2022 clear - Clear the terminal" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: "\u2022 help - Show this help message" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: "\u2022 date - Show current date and time" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: "\u2022 echo [text] - Print text to terminal" }),
+          autoCompleteCommands.map((cmd) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            "\u2022 ",
+            cmd
+          ] }, cmd))
+        ] })
+      ] });
+      newCommand.type = "info";
+    } else if (input.toLowerCase() === "date") {
+      newCommand.output = (/* @__PURE__ */ new Date()).toString();
+      newCommand.type = "success";
+    } else if (input.toLowerCase().startsWith("echo ")) {
+      newCommand.output = input.substring(5);
+      newCommand.type = "success";
+    } else if (onCommand) {
+      try {
+        const result = await onCommand(input);
+        newCommand.output = result;
+        newCommand.type = "success";
+      } catch (error) {
+        newCommand.output = `Error: ${error instanceof Error ? error.message : String(error)}`;
+        newCommand.type = "error";
+      }
+    } else {
+      newCommand.output = `Command not found: ${input}`;
+      newCommand.type = "error";
+    }
+    setCommands((prev) => [...prev, newCommand]);
+    if (enableHistory) {
+      setCommandHistory((prev) => {
+        const updated = [input, ...prev.filter((cmd) => cmd !== input)];
+        return updated.slice(0, maxHistorySize);
+      });
+    }
+    setCurrentInput("");
+    setHistoryIndex(-1);
+    setSuggestions([]);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleCommand(currentInput);
+    } else if (e.key === "ArrowUp" && enableHistory) {
+      e.preventDefault();
+      if (historyIndex < commandHistory.length - 1) {
+        const newIndex = historyIndex + 1;
+        setHistoryIndex(newIndex);
+        setCurrentInput(commandHistory[newIndex]);
+      }
+    } else if (e.key === "ArrowDown" && enableHistory) {
+      e.preventDefault();
+      if (historyIndex > 0) {
+        const newIndex = historyIndex - 1;
+        setHistoryIndex(newIndex);
+        setCurrentInput(commandHistory[newIndex]);
+      } else if (historyIndex === 0) {
+        setHistoryIndex(-1);
+        setCurrentInput("");
+      }
+    } else if (e.key === "Tab" && suggestions.length > 0) {
+      e.preventDefault();
+      const suggestion = suggestions[suggestionIndex];
+      if (suggestion) {
+        setCurrentInput(suggestion);
+        setSuggestions([]);
+      }
+    } else if (e.key === "Escape") {
+      setSuggestions([]);
+      setSuggestionIndex(0);
+    }
+  };
+  const handleCopy = async (text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(text);
+      setTimeout(() => setCopied(null), 2e3);
+      sonner.toast.success("Command copied to clipboard");
+    } catch (err) {
+      console.error("Failed to copy:", err);
+      sonner.toast.error("Failed to copy command");
+    }
+  };
+  const handlePaste = async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      setCurrentInput((prev) => prev + text);
+      inputRef.current?.focus();
+    } catch (err) {
+      console.error("Failed to paste:", err);
+      sonner.toast.error("Failed to paste from clipboard");
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Box,
+    {
+      ref: terminalRef,
+      className: ui.cn(
+        "relative rounded-lg border p-4 font-mono text-sm overflow-auto",
+        currentTheme.background,
+        currentTheme.text,
+        currentTheme.border,
+        currentTheme.selection,
+        className
+      ),
+      onClick: () => inputRef.current?.focus(),
+      onPaste: handlePaste,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "mb-4 flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "h-3 w-3 rounded-full bg-[var(--lux-state-error)]" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "h-3 w-3 rounded-full bg-[var(--lux-state-notice)]" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "h-3 w-3 rounded-full bg-[var(--lux-state-success)]" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: "ml-2 text-xs opacity-50", children: "terminal" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "space-y-2", children: commands.map((cmd) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "group relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "flex items-start space-x-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: currentTheme.prompt, children: prompt }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: currentTheme.input, children: highlightSyntax(cmd.input) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Box,
+              {
+                tag: "button",
+                onClick: () => handleCopy(cmd.input),
+                className: "invisible group-hover:visible ml-auto opacity-50 hover:opacity-100",
+                "aria-label": "Copy command",
+                children: copied === cmd.input ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { style: ui.css("h-3 w-3") }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { style: ui.css("h-3 w-3") })
+              }
+            )
+          ] }),
+          cmd.output && /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Box,
+            {
+              className: ui.cn(
+                "mt-1 pl-4",
+                cmd.type === "error" && currentTheme.error,
+                cmd.type === "success" && currentTheme.success,
+                cmd.type === "info" && currentTheme.info,
+                (!cmd.type || cmd.type === "command") && currentTheme.output
+              ),
+              children: typeof cmd.output === "string" ? highlightSyntax(cmd.output) : cmd.output
+            }
+          )
+        ] }, cmd.id)) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "relative mt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: currentTheme.prompt, children: prompt }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Box,
+              {
+                tag: "input",
+                ref: inputRef,
+                type: "text",
+                value: currentInput,
+                onChange: (e) => setCurrentInput(e.target.value),
+                onKeyDown: handleKeyDown,
+                className: ui.cn(
+                  "flex-1 bg-transparent outline-none",
+                  currentTheme.input
+                ),
+                spellCheck: false,
+                autoComplete: "off",
+                "aria-label": "Terminal input"
+              }
+            )
+          ] }),
+          suggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Box,
+            {
+              className: ui.cn(
+                "absolute left-0 top-full mt-1 rounded-md border p-1 shadow-lg z-10",
+                currentTheme.background,
+                currentTheme.border
+              ),
+              children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Box,
+                {
+                  className: ui.cn(
+                    "rounded px-2 py-1 cursor-pointer",
+                    index === suggestionIndex ? "bg-[var(--color-bg-primary)]" : "hover:bg-[var(--color-bg-primary)]",
+                    currentTheme.text
+                  ),
+                  onClick: () => {
+                    setCurrentInput(suggestion);
+                    setSuggestions([]);
+                    inputRef.current?.focus();
+                  },
+                  children: suggestion
+                },
+                suggestion
+              ))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+exports.Terminal = Terminal;

package/dist/terminal.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+interface Command {
+    id: string;
+    input: string;
+    output: string | React.ReactNode;
+    timestamp: Date;
+    type?: "command" | "error" | "success" | "info";
+}
+interface TerminalProps extends React.HTMLAttributes<HTMLDivElement> {
+    prompt?: string;
+    initialCommands?: Command[];
+    onCommand?: (command: string) => Promise<string | React.ReactNode> | string | React.ReactNode;
+    theme?: "dark" | "light" | "matrix" | "dracula";
+    enableHistory?: boolean;
+    enableAutoComplete?: boolean;
+    autoCompleteCommands?: string[];
+    maxHistorySize?: number;
+}
+export declare function Terminal({ prompt, initialCommands, onCommand, theme, enableHistory, enableAutoComplete, autoCompleteCommands, maxHistorySize, className, ...props }: TerminalProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=terminal.d.ts.map

package/dist/terminal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"terminal.d.ts","sourceRoot":"","sources":["../src/terminal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,UAAU,OAAO;IACf,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAChC,SAAS,EAAE,IAAI,CAAA;IACf,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;CAChD;AAED,UAAU,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,OAAO,EAAE,CAAA;IAC3B,SAAS,CAAC,EAAE,CACV,OAAO,EAAE,MAAM,KACZ,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IACjE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AA6ED,wBAAgB,QAAQ,CAAC,EACvB,MAAY,EACZ,eAAoB,EACpB,SAAS,EACT,KAAc,EACd,aAAoB,EACpB,kBAAyB,EACzB,oBAUC,EACD,cAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,qBAgRf"}