maomao-terminal 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Juan Manuel Camacho Sanchez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,146 @@
+# 🐱 MaoMao Terminal
+
+> A dynamic, context-aware, and draggable terminal component for React applications.
+
+[![npm version](https://img.shields.io/npm/v/maomao-terminal.svg)](https://www.npmjs.com/package/maomao-terminal)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+**MaoMao Terminal** is not just a UI toy; it's a powerful debugging and interaction tool. It allows you to inject commands dynamically from any component in your application tree, making it context-aware.
+
+## ✨ Features
+
+- **Context-Aware**: Register commands from any component using the `useTerminalContext` hook.
+- **Draggable & Resizable**: Fully interactive window management (minimize, maximize, drag, resize).
+- **Built-in Utilities**: Comes with `inspect`, `location`, `storage`, `time`, and more.
+- **Command History**: Navigate through previous commands with Up/Down arrows.
+- **Animations**: Smooth transitions powered by `framer-motion`.
+- **TypeScript**: Fully typed for excellent developer experience.
+
+## ✅ Compatibility
+
+| Technology | Support | Note |
+|------------|---------|------|
+| **React**  | v16.8+  | Requires Hooks support (`useState`, `useEffect`) |
+| **Next.js**| v13+    | Fully aligned with App Router (`'use client'`) & Pages Router |
+| **Vite**   | All versions | Works out of the box |
+
+## 📦 Installation
+
+This library depends on `react`, `react-dom`, and `framer-motion`.
+
+```bash
+# npm
+npm install maomao-terminal framer-motion
+
+# yarn
+yarn add maomao-terminal framer-motion
+```
+
+## 🚀 Quick Start
+
+### 1. Wrap your application with `TerminalProvider`
+
+This provider manages the state of global and dynamic commands.
+
+```tsx
+import React, { useState } from 'react';
+import { TerminalProvider, Terminal } from 'maomao-terminal';
+// Import default styles (required)
+import 'maomao-terminal/dist/components/Terminal.css'; 
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <TerminalProvider>
+      <div className="app-container">
+        <button onClick={() => setIsOpen(true)}>Open Terminal</button>
+        
+        <Terminal 
+          isOpen={isOpen} 
+          onClose={() => setIsOpen(false)} 
+        />
+        
+        {/* Your app content */}
+      </div>
+    </TerminalProvider>
+  );
+}
+
+export default App;
+```
+
+## 💡 Advanced Usage: Dynamic Commands
+
+The real power of MaoMao Terminal lies in its ability to "learn" commands from the components currently rendered on the screen.
+
+Use `useTerminalContext` to register commands that are only available when a specific component is mounted.
+
+```tsx
+import { useEffect } from 'react';
+import { useTerminalContext } from 'maomao-terminal';
+
+const UserProfile = ({ userId }) => {
+  const { registerCommand, unregisterCommand } = useTerminalContext();
+
+  useEffect(() => {
+    // Register a command specific to this component
+    registerCommand({
+      command: 'getUser',
+      response: async (args) => {
+        // You can clear data, fetch API, or log info
+        return `Current User ID: ${userId}`;
+      }
+    });
+
+    // Cleanup when component unmounts
+    return () => unregisterCommand('getUser');
+  }, [userId, registerCommand, unregisterCommand]);
+
+  return <div>User Profile Component</div>;
+};
+```
+
+Now, when `UserProfile` is on screen, you can type `getUser` in the terminal!
+
+## 🛠 Built-in Commands
+
+| Command | Description | Args |
+|---------|-------------|------|
+| `help` | Lists available commands | |
+| `clear` | Clears the terminal output | |
+| `echo` | Repeats your input | `[text]` |
+| `inspect` | Inspects global window properties | |
+| `location` | Shows current URL | |
+| `storage` | Inspects or clears localStorage | `[clear]` |
+| `viewport` | Shows window dimensions | |
+| `time` | Shows current local time | |
+| `about` | Library information | |
+
+## 🎨 Customization
+
+The terminal comes with a default dark theme. You can override styles by targeting the CSS classes defined in `Terminal.css`.
+
+Top-level classes:
+- `.terminal-container`: The main window.
+- `.terminal-header`: The drag handle and title bar.
+- `.terminal-body`: The content area.
+- `.terminal-input`: The command input field.
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+---
+
+Created with ❤️ by **Juan Manuel Camacho Sanchez**

package/dist/commands/baseCommands.d.ts

@@ -0,0 +1,2 @@
+import { TerminalCommand } from '../hooks/useTerminal';
+export declare const baseCommands: TerminalCommand[];

package/dist/commands/baseCommands.js

@@ -0,0 +1,84 @@
+export const baseCommands = [
+    {
+        command: 'echo',
+        response: args => args.join(' '),
+    },
+    {
+        command: 'help',
+        response: () => `\nAvailable commands:\n` +
+            `  clear      → Clear the console\n` +
+            `  echo       → Echo input\n` +
+            `  help       → Show this help message\n` +
+            `  inspect    → Show current page info\n` +
+            `  location   → Show current URL\n` +
+            `  reload     → Refresh the page\n` +
+            `  storage    → Show localStorage keys (or 'storage clear')\n` +
+            `  userAgent  → Show browser user agent\n` +
+            `  viewport   → Show window dimensions\n` +
+            `  time       → Show current local time\n`,
+    },
+    {
+        command: 'inspect',
+        response: () => {
+            const keys = Object.keys(window);
+            return `Window properties (${keys.length}):\n${keys.slice(0, 20).join(', ')}${keys.length > 20 ? ', ...' : ''}`;
+        },
+    },
+    {
+        command: 'location',
+        response: () => `Current URL: ${window.location.href}`,
+    },
+    {
+        command: 'userAgent',
+        response: () => `Browser user agent:\n${navigator.userAgent}`,
+    },
+    {
+        command: 'time',
+        response: () => `Current time: ${new Date().toLocaleTimeString()}`,
+    },
+    {
+        command: 'viewport',
+        response: () => `Viewport: ${window.innerWidth} x ${window.innerHeight} px`,
+    },
+    {
+        command: 'reload',
+        response: () => {
+            window.location.reload();
+            return 'Reloading...';
+        },
+    },
+    {
+        command: 'storage',
+        response: (args) => {
+            if (args[0] === 'clear') {
+                localStorage.clear();
+                return 'LocalStorage cleared.';
+            }
+            const keys = Object.keys(localStorage);
+            if (keys.length === 0)
+                return 'LocalStorage is empty.';
+            return `LocalStorage keys (${keys.length}):\n- ${keys.join('\n- ')}`;
+        },
+    },
+    {
+        command: 'about',
+        response: () => `
+        ══════════════════════════════════════════════════════
+         🐱 MaoMao Terminal
+         Empowering Front-End Developers
+        ══════════════════════════════════════════════════════
+
+         v1.0.0
+
+         A dynamic, context-aware terminal overlay for React.
+         Seamlessly inject commands from your components and
+         supercharge your debugging workflow.
+
+         Created by Juan Manuel Camacho Sanchez
+
+                       猫
+
+        ══════════════════════════════════════════════════════
+    `,
+    },
+];

package/dist/components/Terminal.css

@@ -0,0 +1,186 @@
+/* ================================
+   CONTENEDOR PRINCIPAL
+================================ */
+.terminal-container {
+  position: fixed;
+  background: rgba(10, 10, 10, 0.5);
+  color: #22c55e;
+  border-radius: 8px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  display: flex;
+  flex-direction: column;
+  white-space: pre-wrap;
+  z-index: 50;
+  font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
+  overflow: hidden;
+  transition: box-shadow 0.2s;
+}
+
+.terminal-container:focus-within {
+  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(34, 197, 94, 0.3);
+}
+
+.terminal-container.maximized {
+  border-radius: 0;
+  border: none;
+}
+
+/* ================================
+   HEADER
+================================ */
+.terminal-header {
+  background: #18181b;
+  padding: 0 12px;
+  cursor: grab;
+  user-select: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #333;
+  height: 42px;
+  flex-shrink: 0;
+}
+
+.terminal-header:active {
+  cursor: grabbing;
+}
+
+.terminal-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: #a1a1aa;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.terminal-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.terminal-btn {
+  background: transparent;
+  border: none;
+  color: #71717a;
+  /* Zinc 500 */
+  cursor: pointer;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.terminal-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #e4e4e7;
+  /* Zinc 200 */
+}
+
+.terminal-btn.close:hover {
+  background: #ef4444;
+  color: white;
+}
+
+/* ================================
+   BODY
+================================ */
+.terminal-body {
+  flex: 1;
+  padding: 12px;
+  overflow-y: auto;
+  background: rgba(0, 0, 0, 0.4);
+  position: relative;
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+.terminal-line {
+  margin-bottom: 4px;
+  word-break: break-all;
+}
+
+/* ================================
+   INPUT
+================================ */
+.terminal-input-wrapper {
+  display: flex;
+  align-items: center;
+  border-top: 1px solid #333;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 8px 12px;
+  min-height: 44px;
+  flex-shrink: 0;
+}
+
+.terminal-prompt {
+  color: #eab308;
+  /* Yellow 500 */
+  font-weight: bold;
+  margin-right: 8px;
+}
+
+.terminal-input {
+  flex: 1;
+  background: transparent;
+  color: #22c55e;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* ================================
+   RESIZE HANDLE
+================================ */
+.terminal-resize-handle {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+  z-index: 60;
+}
+
+.terminal-resize-handle::after {
+  content: '';
+  position: absolute;
+  bottom: 3px;
+  right: 3px;
+  width: 6px;
+  height: 6px;
+  border-bottom: 2px solid #555;
+  border-right: 2px solid #555;
+  border-radius: 0 0 2px 0;
+}
+
+.terminal-resize-handle:hover::after {
+  border-color: #22c55e;
+}
+
+/* ================================
+   CUSTOM SCROLLBAR
+================================ */
+.terminal-scrollbar::-webkit-scrollbar {
+  width: 10px;
+}
+
+.terminal-scrollbar::-webkit-scrollbar-track {
+  background: #18181b;
+}
+
+.terminal-scrollbar::-webkit-scrollbar-thumb {
+  background-color: #3f3f46;
+  border: 2px solid #18181b;
+  border-radius: 6px;
+}
+
+.terminal-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: #52525b;
+}

package/dist/components/Terminal.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './Terminal.css';
+export type TerminalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+declare const Terminal: React.FC<TerminalProps>;
+export default Terminal;

package/dist/components/Terminal.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useTerminal } from '../hooks/useTerminal';
+import { useStatus } from '../hooks/useStatus';
+import { CloseButton } from './icons/Close';
+import { MaximizeButton } from './icons/Maximize';
+import { MinimizeButton } from './icons/Minimize';
+import './Terminal.css';
+const Terminal = ({ isOpen, onClose }) => {
+    const terminalRef = useRef(null);
+    const scrollRef = useRef(null);
+    const [input, setInput] = useState('');
+    const [historyPointer, setHistoryPointer] = useState(null);
+    const { history, commandHistory, executeCommand } = useTerminal();
+    const { size, position, drag, resize, isMaximized, isMinimized, minimize, maximize, restore } = useStatus();
+    useEffect(() => {
+        if (scrollRef.current)
+            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }, [history]);
+    const handleKeyDown = (e) => {
+        switch (e.key) {
+            case 'Enter':
+                enter(e);
+                break;
+            case 'ArrowUp':
+                arrowUp(e);
+                break;
+            case 'ArrowDown':
+                arrowDown(e);
+                break;
+        }
+    };
+    const enter = (e) => {
+        e.preventDefault();
+        if (!input.trim())
+            return;
+        executeCommand(input);
+        setInput('');
+        setHistoryPointer(null);
+    };
+    const arrowUp = (e) => {
+        e.preventDefault();
+        if (commandHistory.length === 0)
+            return;
+        const newPointer = historyPointer === null
+            ? commandHistory.length - 1
+            : Math.max(0, historyPointer - 1);
+        setHistoryPointer(newPointer);
+        setInput(commandHistory[newPointer]);
+    };
+    const arrowDown = (e) => {
+        e.preventDefault();
+        if (historyPointer === null)
+            return;
+        const newPointer = historyPointer + 1;
+        if (newPointer >= commandHistory.length) {
+            setHistoryPointer(null);
+            setInput('');
+        }
+        else {
+            setHistoryPointer(newPointer);
+            setInput(commandHistory[newPointer]);
+        }
+    };
+    return (_jsx(AnimatePresence, { children: isOpen && (_jsxs(motion.div, { ref: terminalRef, className: "terminal-container", initial: { opacity: 0, scale: 0.9 }, animate: {
+                opacity: 1,
+                scale: 1,
+                width: isMaximized ? window.innerWidth : size.width,
+                height: isMinimized ? 42 : isMaximized ? window.innerHeight : size.height,
+                left: isMaximized ? 0 : position.x,
+                top: isMaximized ? 0 : position.y,
+                borderRadius: isMaximized ? 0 : 8
+            }, exit: { opacity: 0, scale: 0.9 }, transition: { type: 'spring', stiffness: 400, damping: 35 }, children: [_jsxs("div", { className: "terminal-header", onMouseDown: drag, children: [_jsxs("span", { className: "terminal-title", children: [_jsx("span", { className: "w-3 h-3 rounded-full bg-red-500 block" }), _jsx("span", { className: "w-3 h-3 rounded-full bg-yellow-500 block" }), _jsx("span", { className: "w-3 h-3 rounded-full bg-green-500 block" }), _jsx("span", { style: { marginLeft: 8 }, children: "MaoMaoTerminal:~" })] }), _jsxs("div", { className: "terminal-controls", children: [_jsx(MinimizeButton, { onClick: minimize, isMinimized: isMinimized }), _jsx(MaximizeButton, { onClick: isMaximized ? restore : maximize, isMaximized: isMaximized }), _jsx(CloseButton, { onClose: onClose })] })] }), _jsx("div", { ref: scrollRef, className: "terminal-body terminal-scrollbar", children: history.map((line, i) => (_jsxs("div", { className: "terminal-line", children: [_jsx("span", { className: "terminal-prompt", children: "\u279C" }), line] }, i))) }), _jsxs("div", { className: "terminal-input-wrapper", children: [_jsx("span", { className: "terminal-prompt", children: "$" }), _jsx("input", { className: "terminal-input", autoFocus: true, placeholder: "Type a command...", value: input, onChange: e => setInput(e.target.value), onKeyDown: handleKeyDown })] }), !isMaximized && !isMinimized && (_jsx("div", { className: "terminal-resize-handle", onMouseDown: resize }))] })) }));
+};
+export default Terminal;

package/dist/components/icons/Close.d.ts

@@ -0,0 +1,6 @@
+import '../Terminal.css';
+type Props = {
+    onClose: () => void;
+};
+export declare function CloseButton({ onClose }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icons/Close.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '../Terminal.css';
+const CloseIcon = () => (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+export function CloseButton({ onClose }) {
+    return (_jsx("button", { className: "terminal-btn close", onClick: onClose, title: "Close", children: _jsx(CloseIcon, {}) }));
+}

package/dist/components/icons/Maximize.d.ts

@@ -0,0 +1,7 @@
+import '../Terminal.css';
+type Props = {
+    onClick: () => void;
+    isMaximized: boolean;
+};
+export declare function MaximizeButton({ onClick, isMaximized }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icons/Maximize.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '../Terminal.css';
+const MaximizeIcon = () => (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }) }));
+const RestoreIcon = () => (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "5", y: "9", width: "14", height: "14", rx: "2", ry: "2" }), _jsx("path", { d: "M9 5h10a2 2 0 0 1 2 2v10" })] }));
+export function MaximizeButton({ onClick, isMaximized }) {
+    return (_jsx("button", { className: "terminal-btn", onClick: () => { onClick(); }, title: isMaximized ? "Restore" : "Maximize", children: isMaximized ? _jsx(RestoreIcon, {}) : _jsx(MaximizeIcon, {}) }));
+}

package/dist/components/icons/Minimize.d.ts

@@ -0,0 +1,8 @@
+import '../Terminal.css';
+type Props = {
+    onClick: () => void;
+    isMinimized: boolean;
+};
+export declare const MinimizeIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare function MinimizeButton({ onClick, isMinimized }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icons/Minimize.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '../Terminal.css';
+export const MinimizeIcon = () => (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) }));
+export function MinimizeButton({ onClick, isMinimized }) {
+    return (_jsx("button", { className: "terminal-btn", onClick: () => { onClick(); }, disabled: isMinimized, title: isMinimized ? "Restore" : "Minimize", children: _jsx(MinimizeIcon, {}) }));
+}

package/dist/context/TerminalProvider.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { TerminalCommand } from '../hooks/useTerminal';
+type TerminalContextType = {
+    globalCommands: TerminalCommand[];
+    dynamicCommands: TerminalCommand[];
+    registerDynamicCommands: (commands: TerminalCommand[]) => void;
+    unregisterDynamicCommands: (commands: TerminalCommand[]) => void;
+};
+export declare const TerminalProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useTerminalContext: () => TerminalContextType;
+export {};

package/dist/context/TerminalProvider.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback, useMemo } from 'react';
+import { baseCommands } from '../commands/baseCommands';
+const TerminalContext = createContext(undefined);
+export const TerminalProvider = ({ children }) => {
+    const [dynamicCommands, setDynamicCommands] = useState([]);
+    const globalCommands = useMemo(() => baseCommands, []);
+    const registerDynamicCommands = useCallback((commands) => {
+        setDynamicCommands(prev => {
+            const existingCommands = new Set(prev.map(c => c.command));
+            const newCommands = commands.filter(c => !existingCommands.has(c.command));
+            return [...prev, ...newCommands];
+        });
+    }, []);
+    const unregisterDynamicCommands = useCallback((commands) => {
+        const toRemove = new Set(commands.map(c => c.command));
+        setDynamicCommands(prev => prev.filter(c => !toRemove.has(c.command)));
+    }, []);
+    return (_jsx(TerminalContext.Provider, { value: { globalCommands, dynamicCommands, registerDynamicCommands, unregisterDynamicCommands }, children: children }));
+};
+export const useTerminalContext = () => {
+    const context = useContext(TerminalContext);
+    if (!context)
+        throw new Error('useTerminalContext must be used within TerminalProvider');
+    return context;
+};

package/dist/hooks/useStatus.d.ts

@@ -0,0 +1,17 @@
+export declare function useStatus(): {
+    size: {
+        width: number;
+        height: number;
+    };
+    position: {
+        x: number;
+        y: number;
+    };
+    isMinimized: boolean;
+    isMaximized: boolean;
+    drag: (e: React.MouseEvent) => void;
+    resize: (e: React.MouseEvent) => void;
+    minimize: () => void;
+    maximize: () => void;
+    restore: () => void;
+};

package/dist/hooks/useStatus.js

@@ -0,0 +1,88 @@
+import { useRef, useState, useEffect, useCallback } from "react";
+export function useStatus() {
+    const MIN_HEIGHT = 42;
+    const MIN_WIDTH = 300;
+    const [size, setSize] = useState({ width: 500, height: 300 });
+    const [position, setPosition] = useState({ x: 100, y: 100 });
+    const [isMinimized, setIsMinimized] = useState(false);
+    const [isMaximized, setIsMaximized] = useState(false);
+    const isDraggingRef = useRef(false);
+    const isResizingRef = useRef(false);
+    const dragStart = useRef({ x: 0, y: 0 });
+    const resizeStart = useRef({ x: 0, y: 0, width: 0, height: 0 });
+    const lastFloatingSize = useRef({ width: 500, height: 300 });
+    const lastFloatingPosition = useRef({ x: 100, y: 100 });
+    useEffect(() => {
+        if (!isMaximized && !isMinimized) {
+            lastFloatingSize.current = size;
+            lastFloatingPosition.current = position;
+        }
+    }, [size, position, isMaximized, isMinimized]);
+    const dragTo = useCallback((e) => {
+        if (!isDraggingRef.current)
+            return;
+        setPosition({
+            x: Math.min(Math.max(0, e.clientX - dragStart.current.x), window.innerWidth - size.width),
+            y: Math.min(Math.max(0, e.clientY - dragStart.current.y), window.innerHeight - size.height)
+        });
+    }, [size]);
+    const resizeTo = useCallback((e) => {
+        if (!isResizingRef.current)
+            return;
+        setSize({
+            width: Math.max(MIN_WIDTH, resizeStart.current.width + (e.clientX - resizeStart.current.x)),
+            height: Math.max(MIN_HEIGHT, resizeStart.current.height + (e.clientY - resizeStart.current.y))
+        });
+    }, []);
+    const end = useCallback(() => {
+        isDraggingRef.current = false;
+        isResizingRef.current = false;
+    }, []);
+    useEffect(() => {
+        const handleMove = (e) => {
+            if (isDraggingRef.current)
+                dragTo(e);
+            if (isResizingRef.current)
+                resizeTo(e);
+        };
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('mouseup', end);
+        return () => {
+            window.removeEventListener('mousemove', handleMove);
+            window.removeEventListener('mouseup', end);
+        };
+    }, [dragTo, resizeTo, end]);
+    const minimize = () => {
+        setIsMinimized(true);
+        setIsMaximized(false);
+        setSize(prev => (Object.assign(Object.assign({}, prev), { height: MIN_HEIGHT })));
+    };
+    const maximize = () => {
+        setIsMaximized(true);
+        setIsMinimized(false);
+        setPosition({ x: 0, y: 0 });
+        setSize({ width: window.innerWidth, height: window.innerHeight });
+    };
+    const restore = () => {
+        setSize(lastFloatingSize.current);
+        setPosition(lastFloatingPosition.current);
+        setIsMinimized(false);
+        setIsMaximized(false);
+    };
+    const drag = (e) => {
+        if (isMaximized)
+            return;
+        isDraggingRef.current = true;
+        dragStart.current = { x: e.clientX - position.x, y: e.clientY - position.y };
+    };
+    const resize = (e) => {
+        if (isMaximized || isMinimized)
+            return;
+        isResizingRef.current = true;
+        resizeStart.current = { x: e.clientX, y: e.clientY, width: size.width, height: size.height };
+    };
+    return {
+        size, position, isMinimized, isMaximized,
+        drag, resize, minimize, maximize, restore
+    };
+}

package/dist/hooks/useTerminal.d.ts

@@ -0,0 +1,10 @@
+export interface TerminalCommand {
+    command: string;
+    response: (args: string[]) => string | Promise<string>;
+}
+export declare function useTerminal(): {
+    history: string[];
+    commandHistory: string[];
+    executeCommand: (input: string) => Promise<string | undefined>;
+    clearHistory: () => void;
+};

package/dist/hooks/useTerminal.js

@@ -0,0 +1,40 @@
+'use client';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useState } from 'react';
+import { useTerminalContext } from '../context/TerminalProvider';
+export function useTerminal() {
+    const { globalCommands, dynamicCommands } = useTerminalContext();
+    const [history, setHistory] = useState([]);
+    const [commandHistory, setCommandHistory] = useState([]);
+    const executeCommand = (input) => __awaiter(this, void 0, void 0, function* () {
+        if (!input.trim())
+            return;
+        const parts = input.trim().split(/\s+/);
+        const cmdName = parts[0];
+        const args = parts.slice(1);
+        // Add to command history for navigation
+        setCommandHistory(prev => [...prev, input]);
+        if (cmdName === 'clear') {
+            setHistory([]);
+            return;
+        }
+        const cmd = [...dynamicCommands, ...globalCommands].find(c => c.command === cmdName);
+        let result;
+        if (cmd)
+            result = yield cmd.response(args);
+        else
+            result = `Command not found: ${cmdName}`;
+        setHistory(prev => [...prev, `$ ${input}`, result]);
+        return result;
+    });
+    const clearHistory = () => setHistory([]);
+    return { history, commandHistory, executeCommand, clearHistory };
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Terminal } from './components/Terminal';
+export { TerminalProvider, useTerminalContext } from './context/TerminalProvider';
+export { useTerminal, type TerminalCommand } from './hooks/useTerminal';
+export { baseCommands } from './commands/baseCommands';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { default as Terminal } from './components/Terminal';
+export { TerminalProvider, useTerminalContext } from './context/TerminalProvider';
+export { useTerminal } from './hooks/useTerminal';
+export { baseCommands } from './commands/baseCommands';

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "maomao-terminal",
+  "version": "1.0.0",
+  "description": "A React-style terminal component library",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "author": "Juan Manuel Camacho Sanchez",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jmcamacho7/maomao-terminal.git"
+  },
+  "keywords": [
+    "react",
+    "terminal",
+    "component",
+    "ui"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc && shx mkdir -p dist/components && shx cp src/components/*.css dist/components/",
+    "watch": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "framer-motion": "^10.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "framer-motion": "^12.23.24",
+    "shx": "^0.4.0",
+    "typescript": "^5.0.0"
+  }
+}