@flowtomic/ui 0.1.0 → 0.1.2

package/dist/components/organisms/reasoning/reasoning.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Reasoning Component - Flowtomic UI
+ *
+ * Componente para exibir raciocínio/thinking do modelo
+ */
+import type { ComponentProps } from "react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../atoms";
+export type ReasoningProps = ComponentProps<typeof Collapsible> & {
+    isStreaming?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    duration?: number;
+};
+export declare const Reasoning: import("react").MemoExoticComponent<({ className, isStreaming, open, defaultOpen, onOpenChange, duration: durationProp, children, ...props }: ReasoningProps) => import("react/jsx-runtime").JSX.Element>;
+export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
+export declare const ReasoningTrigger: import("react").MemoExoticComponent<({ className, children, ...props }: ReasoningTriggerProps) => import("react/jsx-runtime").JSX.Element>;
+export type ReasoningContentProps = ComponentProps<typeof CollapsibleContent> & {
+    children: string;
+};
+export declare const ReasoningContent: import("react").MemoExoticComponent<({ className, children, ...props }: ReasoningContentProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=reasoning.d.ts.map

package/dist/components/organisms/reasoning/reasoning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reasoning.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/reasoning/reasoning.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAW,MAAM,aAAa,CAAC;AAmB3F,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,GAAG;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAKF,eAAO,MAAM,SAAS,gJAUjB,cAAc,6CAqDlB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAY9E,eAAO,MAAM,gBAAgB,0EAA4C,qBAAqB,6CAsB5F,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAC9E,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,gBAAgB,0EAA4C,qBAAqB,6CAW5F,CAAC"}

package/dist/components/organisms/reasoning/reasoning.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Reasoning Component - Flowtomic UI
+ *
+ * Componente para exibir raciocínio/thinking do modelo
+ */
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import { createContext, memo, useContext, useEffect, useState } from "react";
+import { Streamdown } from "streamdown";
+import { cn } from "@/lib/utils";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, Shimmer } from "../../atoms";
+const ReasoningContext = createContext(null);
+const useReasoning = () => {
+    const context = useContext(ReasoningContext);
+    if (!context) {
+        throw new Error("Reasoning components must be used within Reasoning");
+    }
+    return context;
+};
+const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
+export const Reasoning = memo(({ className, isStreaming = false, open, defaultOpen = true, onOpenChange, duration: durationProp, children, ...props }) => {
+    const [isOpen, setIsOpen] = useControllableState({
+        prop: open,
+        defaultProp: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const [duration, setDuration] = useControllableState({
+        prop: durationProp,
+        defaultProp: undefined,
+    });
+    const [hasAutoClosed, setHasAutoClosed] = useState(false);
+    const [startTime, setStartTime] = useState(null);
+    useEffect(() => {
+        if (isStreaming) {
+            if (startTime === null) {
+                setStartTime(Date.now());
+            }
+        }
+        else if (startTime !== null) {
+            setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
+            setStartTime(null);
+        }
+    }, [isStreaming, startTime, setDuration]);
+    useEffect(() => {
+        if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
+            const timer = setTimeout(() => {
+                setIsOpen(false);
+                setHasAutoClosed(true);
+            }, AUTO_CLOSE_DELAY);
+            return () => clearTimeout(timer);
+        }
+    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]);
+    const handleOpenChange = (newOpen) => {
+        setIsOpen(newOpen);
+    };
+    return (_jsx(ReasoningContext.Provider, { value: { isStreaming, isOpen, setIsOpen, duration }, children: _jsx(Collapsible, { className: cn("not-prose mb-4", className), onOpenChange: handleOpenChange, open: isOpen, ...props, children: children }) }));
+});
+const getThinkingMessage = (isStreaming, duration) => {
+    if (isStreaming || duration === 0) {
+        return _jsx(Shimmer, { duration: 1, children: "Thinking..." });
+    }
+    if (duration === undefined) {
+        return _jsx("p", { children: "Thought for a few seconds" });
+    }
+    return _jsxs("p", { children: ["Thought for ", duration, " seconds"] });
+};
+export const ReasoningTrigger = memo(({ className, children, ...props }) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+    return (_jsx(CollapsibleTrigger, { className: cn("flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(BrainIcon, { className: "size-4" }), getThinkingMessage(isStreaming, duration), _jsx(ChevronDownIcon, { className: cn("size-4 transition-transform", isOpen ? "rotate-180" : "rotate-0") })] })) }));
+});
+export const ReasoningContent = memo(({ className, children, ...props }) => (_jsx(CollapsibleContent, { className: cn("mt-4 text-sm", "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in", className), ...props, children: _jsx(Streamdown, { ...props, children: children }) })));
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";

package/dist/components/organisms/resizable-layout/index.d.ts

@@ -0,0 +1,3 @@
+export type { ResizableLayoutProps, ResizableSplitProps } from "./resizable-layout";
+export { ResizableLayout, ResizableSplit } from "./resizable-layout";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/resizable-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/resizable-layout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACpF,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/organisms/resizable-layout/index.js

@@ -0,0 +1 @@
+export { ResizableLayout, ResizableSplit } from "./resizable-layout";

package/dist/components/organisms/resizable-layout/resizable-layout.d.ts

@@ -0,0 +1,29 @@
+import type React from "react";
+export interface ResizableLayoutProps {
+    sidebar: React.ReactNode;
+    sidebarOpen: boolean;
+    setSidebarOpen: (open: boolean) => void;
+    children: React.ReactNode;
+    side?: "left" | "right";
+    persistKey?: string;
+    defaultSidebarPct?: number;
+    minPx?: number;
+    maxPct?: number;
+    maxPxCap?: number;
+    resizerThicknessPx?: number;
+    mobileDrawer?: boolean;
+    drawerWidthVw?: number;
+    className?: string;
+    tinySizePx?: number;
+    snapThreshold?: number;
+}
+/**
+ * ResizableLayout - Componente Visual
+ *
+ * Componente de apresentação que usa o hook headless useResizable.
+ * Responsável apenas por renderizar o markup e aplicar estilos.
+ */
+export declare const ResizableLayout: React.FC<ResizableLayoutProps>;
+export declare const ResizableSplit: React.FC<ResizableLayoutProps>;
+export type ResizableSplitProps = ResizableLayoutProps;
+//# sourceMappingURL=resizable-layout.d.ts.map

package/dist/components/organisms/resizable-layout/resizable-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/resizable-layout/resizable-layout.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAmL1D,CAAC;AAGF,eAAO,MAAM,cAAc,gCAAkB,CAAC;AAC9C,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC"}

package/dist/components/organisms/resizable-layout/resizable-layout.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useResizable } from "@flowtomic/logic";
+import { GripVertical } from "lucide-react";
+import { useEffect, useState } from "react";
+import * as ResizablePrimitive from "react-resizable-panels";
+import { cn } from "@/lib/utils";
+/**
+ * ResizableLayout - Componente Visual
+ *
+ * Componente de apresentação que usa o hook headless useResizable.
+ * Responsável apenas por renderizar o markup e aplicar estilos.
+ */
+export const ResizableLayout = ({ sidebar, sidebarOpen, setSidebarOpen, children, side = "left", persistKey = "default", defaultSidebarPct = 0.28, minPx = 250, maxPct = 0.6, maxPxCap = 500, resizerThicknessPx = 8, mobileDrawer = true, drawerWidthVw = 90, className, tinySizePx, snapThreshold, }) => {
+    // Hook headless com toda a lógica
+    const resizable = useResizable({
+        sidebarOpen,
+        setSidebarOpen,
+        side,
+        persistKey,
+        defaultSidebarPct,
+        minPx,
+        maxPct,
+        maxPxCap,
+        mobileDrawer,
+        tinySizePx,
+        snapThreshold,
+    });
+    // Estado para detectar quando está redimensionando
+    const [isResizing, setIsResizing] = useState(false);
+    // Handler para detectar quando o resize termina e aplicar snap
+    useEffect(() => {
+        if (!isResizing)
+            return;
+        const handleMouseUp = () => {
+            setIsResizing(false);
+            // Pequeno delay para garantir que o layout foi atualizado
+            setTimeout(() => {
+                resizable.handleResizeEnd();
+            }, 50);
+        };
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [isResizing, resizable]);
+    // Componente ResizableHandle customizado
+    const ResizableHandle = (_jsxs(ResizablePrimitive.PanelResizeHandle, { className: cn("relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 select-none cursor-col-resize z-40 group hover:bg-gray-200/40 dark:hover:bg-gray-700/40"), style: { width: resizerThicknessPx }, onMouseDown: () => setIsResizing(true), children: [_jsx("div", { className: "absolute inset-y-0 -left-3 -right-3 cursor-col-resize", onDoubleClick: resizable.handleDoubleClick }), _jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: _jsx(GripVertical, { className: "h-2.5 w-2.5" }) })] }));
+    // Renderização mobile (drawer)
+    if (resizable.shouldUseMobileDrawer) {
+        return (_jsxs("div", { ref: resizable.containerRef, className: cn("relative flex-1 flex overflow-hidden", className), children: [sidebarOpen && (_jsx("div", { className: "fixed inset-0 top-16 bg-black/40 z-40", onClick: () => setSidebarOpen(false), "aria-hidden": "true" })), _jsx("div", { className: cn("fixed top-16 bottom-0 z-50 bg-surface dark:bg-gray-800 transform transition-transform duration-200 border-r border-border", side === "right" ? "right-0" : "left-0"), style: {
+                        width: `${drawerWidthVw}vw`,
+                        transform: sidebarOpen
+                            ? "translateX(0)"
+                            : side === "right"
+                                ? "translateX(100%)"
+                                : "translateX(-100%)",
+                    }, children: sidebar }), _jsx("div", { className: "flex-1 flex flex-col overflow-hidden", children: children })] }));
+    }
+    // Renderização desktop (sidebar fixa com react-resizable-panels)
+    return (_jsx("div", { ref: resizable.containerRef, className: cn("relative flex-1 flex overflow-hidden", className), children: _jsxs(ResizablePrimitive.PanelGroup, { direction: "horizontal", className: "flex h-full w-full", autoSaveId: resizable.autoSaveId, onLayout: resizable.handleLayout, children: [side === "left" && (_jsxs(_Fragment, { children: [_jsx(ResizablePrimitive.Panel, { id: `sidebar-panel-${side}-${persistKey}`, ref: resizable.sidebarPanelRef, defaultSize: resizable.sidebarSize, minSize: resizable.minSize, maxSize: resizable.maxSize, collapsible: true, collapsedSize: 0, className: cn("min-h-full bg-surface dark:bg-gray-800 border-r border-border flex flex-col overflow-y-auto transition-all duration-200"), children: sidebarOpen && sidebar }), ResizableHandle] })), _jsx(ResizablePrimitive.Panel, { id: `content-panel-${side}-${persistKey}`, defaultSize: 100 - resizable.sidebarSize, minSize: 10, className: "flex-1 flex flex-col overflow-hidden min-w-0", children: children }), side === "right" && (_jsxs(_Fragment, { children: [ResizableHandle, _jsx(ResizablePrimitive.Panel, { id: `sidebar-panel-${side}-${persistKey}`, ref: resizable.sidebarPanelRef, defaultSize: resizable.sidebarSize, minSize: resizable.minSize, maxSize: resizable.maxSize, collapsible: true, collapsedSize: 0, className: cn("min-h-full bg-surface dark:bg-gray-800 border-l border-border flex flex-col overflow-y-auto transition-all duration-200"), children: sidebarOpen && sidebar })] }))] }) }));
+};
+// Alias para compatibilidade com código existente
+export const ResizableSplit = ResizableLayout;

package/dist/components/organisms/script-editor/index.d.ts

@@ -0,0 +1,3 @@
+export type { ScriptEditorProps } from "./script-editor";
+export { ScriptEditor } from "./script-editor";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/script-editor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/script-editor/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/organisms/script-editor/index.js

@@ -0,0 +1 @@
+export { ScriptEditor } from "./script-editor";

package/dist/components/organisms/script-editor/script-editor.d.ts

@@ -0,0 +1,52 @@
+/**
+ * ScriptEditor Component - Flowtomic UI
+ *
+ * Componente para editar e executar scripts com terminal interativo
+ *
+ * Funcionalidades:
+ * - Editor de código para scripts
+ * - Terminal interativo em tempo real
+ * - Preview da resposta do servidor
+ * - Abas para alternar entre terminal e preview
+ * - Execução de scripts no backend
+ */
+import { type ExecuteScriptResponse, type TerminalLine } from "@flowtomic/logic";
+import type { HTMLAttributes } from "react";
+export interface ScriptEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onError"> {
+    /**
+     * Script inicial
+     * @default ""
+     */
+    defaultScript?: string;
+    /**
+     * URL do WebSocket para conexão em tempo real
+     */
+    wsUrl?: string;
+    /**
+     * Função para executar script via HTTP (fallback quando WebSocket não está disponível)
+     */
+    executeScript?: (script: string) => Promise<ExecuteScriptResponse>;
+    /**
+     * Callback quando uma linha é adicionada ao terminal
+     */
+    onOutput?: (line: TerminalLine) => void;
+    /**
+     * Callback quando ocorre um erro
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Se deve conectar automaticamente ao WebSocket
+     * @default true
+     */
+    autoConnect?: boolean;
+    /**
+     * Número máximo de tentativas de reconexão
+     * @default 3
+     */
+    maxReconnectAttempts?: number;
+}
+/**
+ * ScriptEditor - Componente para editar e executar scripts com terminal interativo
+ */
+export declare const ScriptEditor: import("react").ForwardRefExoticComponent<ScriptEditorProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=script-editor.d.ts.map

package/dist/components/organisms/script-editor/script-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"script-editor.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/script-editor/script-editor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,YAAY,EAAmB,MAAM,kBAAkB,CAAC;AAElG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ5C,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACxF;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAEnE;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAEjC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,8GA0KxB,CAAC"}

package/dist/components/organisms/script-editor/script-editor.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ScriptEditor Component - Flowtomic UI
+ *
+ * Componente para editar e executar scripts com terminal interativo
+ *
+ * Funcionalidades:
+ * - Editor de código para scripts
+ * - Terminal interativo em tempo real
+ * - Preview da resposta do servidor
+ * - Abas para alternar entre terminal e preview
+ * - Execução de scripts no backend
+ */
+import { useScriptEditor } from "@flowtomic/logic";
+import { Check, Copy, Play, Square, Trash2 } from "lucide-react";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { Badge, Button } from "../../atoms/actions";
+import { Card, CardContent, CardHeader, CardTitle } from "../../atoms/display";
+import { Textarea } from "../../atoms/forms";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../atoms/navigation/tabs";
+/**
+ * ScriptEditor - Componente para editar e executar scripts com terminal interativo
+ */
+export const ScriptEditor = forwardRef(({ className, defaultScript = `// Exemplo de script Groovy
+// Serviços do Spring Boot estão disponíveis automaticamente
+// Exemplos: userService, animalService, herdService, ctx (ApplicationContext)
+
+// Exemplo 1: Acessar repositório via ApplicationContext
+def userRepo = ctx.getBean("userRepository")
+def usuarios = userRepo.findAll()
+def resultado = [
+  message: "Usuários encontrados",
+  total: usuarios.size(),
+  usuarios: usuarios.collect { [id: it.id, name: it.name, email: it.email] }
+]
+
+// Exemplo 2: Usar serviço diretamente (se disponível)
+// def userService = ctx.getBean("userService")
+
+// Última expressão é retornada como resultado
+resultado`, wsUrl, executeScript, onOutput, onError, autoConnect = true, maxReconnectAttempts = 3, ...props }, ref) => {
+    const { script, setScript, terminalLines, preview, activeTab, setActiveTab, isRunning, isConnected, executeScript: executeScriptHandler, stopExecution, clearTerminal, } = useScriptEditor({
+        defaultScript,
+        wsUrl,
+        executeScript,
+        onOutput,
+        onError,
+        autoConnect,
+        maxReconnectAttempts,
+    });
+    const [copied, setCopied] = useState(false);
+    const terminalRef = useRef(null);
+    // Scroll automático do terminal
+    useEffect(() => {
+        if (terminalRef.current) {
+            terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
+        }
+    }, []);
+    const copyToClipboard = async (text) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error("Erro ao copiar:", err);
+        }
+    };
+    return (_jsxs(Card, { ref: ref, className: cn("w-full", className), ...props, children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Editor de Scripts" }), _jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Edite e execute scripts com terminal interativo em tempo real" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: isConnected ? "default" : "secondary", children: isConnected ? "🟢 Conectado" : "🔴 Desconectado" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(script), disabled: !script, children: copied ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(Copy, { className: "h-4 w-4" }) })] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("label", { htmlFor: "script-editor-textarea", className: "text-sm font-medium", children: "Script" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "default", size: "sm", onClick: executeScriptHandler, disabled: isRunning, children: [_jsx(Play, { className: "h-4 w-4 mr-2" }), "Executar"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: stopExecution, disabled: !isRunning, children: [_jsx(Square, { className: "h-4 w-4 mr-2" }), "Parar"] })] })] }), _jsxs("div", { className: "relative bg-muted/50 border border-border rounded-lg overflow-hidden", children: [_jsxs("div", { className: "flex flex-row gap-x-2 p-3 border-b border-border bg-muted", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-500" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-500" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })] }), _jsx(Textarea, { id: "script-editor-textarea", value: script, onChange: (e) => setScript(e.target.value), className: "w-full h-64 p-4 font-mono text-sm bg-background resize-none focus:outline-none focus:ring-2 focus:ring-ring", placeholder: "Digite seu script Groovy aqui... (ou JavaScript como fallback)", spellCheck: false })] })] }), _jsx("div", { className: "border border-border rounded-lg overflow-hidden", children: _jsxs(Tabs, { value: activeTab, onValueChange: (value) => setActiveTab(value), children: [_jsxs("div", { className: "flex border-b border-border bg-muted", children: [_jsxs(TabsList, { className: "bg-transparent border-0 p-0 h-auto", children: [_jsx(TabsTrigger, { value: "terminal", children: "Terminal" }), _jsx(TabsTrigger, { value: "preview", children: "Preview" })] }), _jsx("div", { className: "flex-1" }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: clearTerminal, className: "mr-2", children: [_jsx(Trash2, { className: "h-4 w-4 mr-2" }), "Limpar"] })] }), _jsx(TabsContent, { value: "terminal", className: "mt-0", children: _jsx(TerminalContent, { ref: terminalRef, lines: terminalLines, isRunning: isRunning }) }), _jsx(TabsContent, { value: "preview", className: "mt-0", children: _jsx(PreviewContent, { content: preview }) })] }) })] })] }));
+});
+ScriptEditor.displayName = "ScriptEditor";
+const TerminalContent = forwardRef(({ lines, isRunning }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("p-4 font-mono text-sm h-64 overflow-auto", 
+        // Modo dark: estilo terminal escuro
+        "dark:bg-[#0d1117] dark:text-[#c9d1d9]", 
+        // Modo light: usar input que é mais escuro que muted, mantendo a paleta
+        "bg-input text-foreground"), children: lines.length === 0 ? (_jsxs("div", { className: "text-muted-foreground dark:text-[#8b949e]", children: [_jsx("span", { className: "text-primary dark:text-[#58a6ff]", children: "$" }), " Terminal pronto. Execute um script para ver a sa\u00EDda..."] })) : (_jsxs("div", { className: "space-y-1", children: [lines.map((line) => (_jsxs("div", { className: cn("flex items-start gap-2 animate-in fade-in slide-in-from-top-1 duration-200", line.type === "error" && "text-destructive dark:text-[#f85149]", line.type === "output" && "text-foreground dark:text-[#c9d1d9]", line.type === "system" && "text-muted-foreground dark:text-[#8b949e]", line.type === "input" && "text-primary dark:text-[#58a6ff]"), children: [line.type === "input" && (_jsx("span", { className: "text-primary dark:text-[#58a6ff]", children: "$" })), line.type === "error" && (_jsx("span", { className: "text-destructive dark:text-[#f85149]", children: "\u2717" })), line.type === "system" && (_jsx("span", { className: "text-muted-foreground dark:text-[#8b949e]", children: "\u25CF" })), _jsx("span", { className: "flex-1 whitespace-pre-wrap break-words", children: line.content })] }, line.id))), isRunning && (_jsxs("div", { className: "text-muted-foreground dark:text-[#8b949e] animate-pulse", children: [_jsx("span", { className: "text-primary dark:text-[#58a6ff]", children: "$" }), " ", _jsx("span", { className: "animate-pulse", children: "\u258B" }), " Executando..."] }))] })) }));
+});
+TerminalContent.displayName = "TerminalContent";
+const PreviewContent = ({ content }) => {
+    if (!content) {
+        return (_jsx("div", { className: "p-4 text-muted-foreground text-center h-64 flex items-center justify-center", children: "Nenhum resultado ainda. Execute um script para ver o preview..." }));
+    }
+    return (_jsx("div", { className: "p-4 h-64 overflow-auto", children: _jsx("pre", { className: "text-sm font-mono bg-muted p-4 rounded-lg overflow-auto", children: _jsx("code", { children: content }) }) }));
+};

package/dist/components/organisms/stats-grid/index.d.ts

@@ -0,0 +1,3 @@
+export type { StatItem, StatsGridProps } from "./stats-grid";
+export { StatsGrid } from "./stats-grid";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/stats-grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/stats-grid/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/organisms/stats-grid/index.js

@@ -0,0 +1 @@
+export { StatsGrid } from "./stats-grid";

package/dist/components/organisms/stats-grid/stats-grid.d.ts

@@ -0,0 +1,71 @@
+/**
+ * StatsGrid - Organism Component
+ *
+ * Grid de cards de estatísticas reutilizável.
+ * Componente genérico que pode ser usado em qualquer aplicação.
+ *
+ * @example
+ * ```tsx
+ * // Delta calculado automaticamente quando lastMonth é fornecido
+ * <StatsGrid
+ *   stats={[
+ *     {
+ *       id: "1",
+ *       title: "Receita Total",
+ *       value: 122380,
+ *       lastMonth: 105922, // delta será calculado automaticamente: +15.5%
+ *       prefix: "R$ ",
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+import React from "react";
+export interface StatItem {
+    id: string;
+    title: string;
+    value: string | number;
+    subtitle?: string;
+    trend?: "up" | "down" | "neutral";
+    trendPercentage?: string;
+    color?: "blue" | "green" | "orange" | "red" | "purple";
+    /**
+     * Percentual de variação (positivo ou negativo)
+     * Se não fornecido, será calculado automaticamente quando `lastMonth` estiver disponível.
+     * Fórmula: ((value - lastMonth) / lastMonth) * 100
+     */
+    delta?: number;
+    /**
+     * Valor do mês anterior para comparação
+     * Se fornecido e `delta` não estiver definido, o delta será calculado automaticamente.
+     */
+    lastMonth?: number;
+    prefix?: string;
+    suffix?: string;
+    format?: (value: number) => string;
+    lastFormat?: (value: number) => string;
+    positive?: boolean;
+}
+export interface StatsGridProps {
+    stats: StatItem[];
+    layout?: "grid" | "list";
+    /**
+     * Quando `true`, exibe skeletons de loading no lugar dos cards.
+     * O número de skeletons será baseado no tamanho do array `stats` (se disponível) ou 3 por padrão.
+     */
+    loading?: boolean;
+    /**
+     * Número de skeletons a exibir quando `loading` é `true`.
+     * Se não especificado, usa o tamanho do array `stats` ou 3 por padrão.
+     */
+    skeletonCount?: number;
+    className?: string;
+    columns?: {
+        sm?: number;
+        md?: number;
+        lg?: number;
+    };
+}
+declare const StatsGrid: React.ForwardRefExoticComponent<StatsGridProps & React.RefAttributes<HTMLDivElement>>;
+export { StatsGrid };
+//# sourceMappingURL=stats-grid.d.ts.map

package/dist/components/organisms/stats-grid/stats-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stats-grid.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/stats-grid/stats-grid.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;IACvD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE;QACR,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;KACb,CAAC;CACH;AAED,QAAA,MAAM,SAAS,uFA0Gd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/organisms/stats-grid/stats-grid.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * StatsGrid - Organism Component
+ *
+ * Grid de cards de estatísticas reutilizável.
+ * Componente genérico que pode ser usado em qualquer aplicação.
+ *
+ * @example
+ * ```tsx
+ * // Delta calculado automaticamente quando lastMonth é fornecido
+ * <StatsGrid
+ *   stats={[
+ *     {
+ *       id: "1",
+ *       title: "Receita Total",
+ *       value: 122380,
+ *       lastMonth: 105922, // delta será calculado automaticamente: +15.5%
+ *       prefix: "R$ ",
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+import React from "react";
+import { StatCard } from "@/components/molecules/data-display/stat-card/stat-card";
+import { cn } from "@/lib/utils";
+import { Card, CardContent, CardHeader, Skeleton } from "../../atoms";
+const StatsGrid = React.forwardRef(({ stats, layout = "grid", loading = false, skeletonCount, className, columns, ...props }, ref) => {
+    // Colunas customizáveis ou padrão
+    const getGridCols = () => {
+        if (columns) {
+            const smMap = {
+                1: "sm:grid-cols-1",
+                2: "sm:grid-cols-2",
+                3: "sm:grid-cols-3",
+                4: "sm:grid-cols-4",
+            };
+            const mdMap = {
+                1: "md:grid-cols-1",
+                2: "md:grid-cols-2",
+                3: "md:grid-cols-3",
+                4: "md:grid-cols-4",
+            };
+            const lgMap = {
+                1: "lg:grid-cols-1",
+                2: "lg:grid-cols-2",
+                3: "lg:grid-cols-3",
+                4: "lg:grid-cols-4",
+            };
+            const smCols = columns.sm ? smMap[columns.sm] || "" : "";
+            const mdCols = columns.md ? mdMap[columns.md] || "" : "";
+            const lgCols = columns.lg ? lgMap[columns.lg] || "" : "";
+            return `grid-cols-1 ${smCols} ${mdCols} ${lgCols}`.trim();
+        }
+        return layout === "grid" ? "md:grid-cols-2 lg:grid-cols-3" : "lg:grid-cols-1";
+    };
+    const gridCols = getGridCols();
+    if (loading) {
+        // Determina o número de skeletons: usa skeletonCount, ou stats.length (se > 0), ou 3 por padrão
+        const count = skeletonCount ?? (stats.length > 0 ? stats.length : 3);
+        // Gera IDs únicos para os skeletons
+        const skeletonIds = Array.from({ length: count }, (_, i) => `stats-skeleton-${i}`);
+        return (_jsx("div", { ref: ref, className: cn("grid grid-cols-1 gap-6", gridCols, className), ...props, children: skeletonIds.map((id) => (_jsxs(Card, { className: "transition-all duration-300 hover:shadow-lg border", children: [_jsxs(CardHeader, { className: "flex flex-row items-start justify-between space-y-0 pb-4 sm:pb-6 border-0", children: [_jsx("div", { className: "space-y-1 flex-1 min-w-0 pr-2", children: _jsx(Skeleton, { className: "h-3 w-24" }) }), _jsx("div", { className: "flex items-center gap-2 flex-shrink-0", children: _jsx(Skeleton, { className: "h-6 w-6 sm:h-8 sm:w-8 rounded-lg" }) })] }), _jsxs(CardContent, { className: "space-y-2.5", children: [_jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2.5", children: [_jsx(Skeleton, { className: "h-7 sm:h-8 w-32" }), _jsx(Skeleton, { className: "h-5 w-16 rounded-full" })] }), _jsx(Skeleton, { className: "h-3 sm:h-4 w-3/4" })] })] }, id))) }));
+    }
+    return (_jsx("div", { ref: ref, className: cn("grid grid-cols-1 gap-6", gridCols, className), ...props, children: stats.map((stat) => {
+            const colorMap = {
+                blue: "info",
+                green: "success",
+                orange: "warning",
+                red: "error",
+                purple: "primary",
+            };
+            return (_jsx(StatCard, { title: stat.title, value: stat.value, subtitle: stat.subtitle, color: stat.color ? colorMap[stat.color] : undefined, delta: stat.delta, lastMonth: stat.lastMonth, prefix: stat.prefix, suffix: stat.suffix, format: stat.format, lastFormat: stat.lastFormat, positive: stat.positive }, stat.id));
+        }) }));
+});
+StatsGrid.displayName = "StatsGrid";
+export { StatsGrid };

package/dist/components/organisms/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export { Toolbar, type ToolbarProps } from "./toolbar";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/organisms/toolbar/index.js

@@ -0,0 +1 @@
+export { Toolbar } from "./toolbar";

package/dist/components/organisms/toolbar/toolbar.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Toolbar Component - Flowtomic UI
+ *
+ * Wrapper do NodeToolbar do @xyflow/react
+ */
+import { NodeToolbar } from "@xyflow/react";
+import type { ComponentProps } from "react";
+export type ToolbarProps = ComponentProps<typeof NodeToolbar>;
+export declare const Toolbar: ({ className, ...props }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=toolbar.d.ts.map

package/dist/components/organisms/toolbar/toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/toolbar/toolbar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAY,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC;AAE9D,eAAO,MAAM,OAAO,GAAI,yBAAyB,YAAY,4CAM5D,CAAC"}

package/dist/components/organisms/toolbar/toolbar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Toolbar Component - Flowtomic UI
+ *
+ * Wrapper do NodeToolbar do @xyflow/react
+ */
+import { NodeToolbar, Position } from "@xyflow/react";
+import { cn } from "@/lib/utils";
+export const Toolbar = ({ className, ...props }) => (_jsx(NodeToolbar, { className: cn("flex items-center gap-1 rounded-sm border bg-background p-1.5", className), position: Position.Bottom, ...props }));

package/dist/components/organisms/web-preview/index.d.ts

@@ -0,0 +1,2 @@
+export { WebPreview, WebPreviewBody, type WebPreviewBodyProps, WebPreviewConsole, type WebPreviewConsoleProps, type WebPreviewContextValue, WebPreviewNavigation, WebPreviewNavigationButton, type WebPreviewNavigationButtonProps, type WebPreviewNavigationProps, type WebPreviewProps, WebPreviewUrl, type WebPreviewUrlProps, } from "./web-preview";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/web-preview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/web-preview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,cAAc,EACd,KAAK,mBAAmB,EACxB,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,EAC3B,oBAAoB,EACpB,0BAA0B,EAC1B,KAAK,+BAA+B,EACpC,KAAK,yBAAyB,EAC9B,KAAK,eAAe,EACpB,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,eAAe,CAAC"}

package/dist/components/organisms/web-preview/index.js

@@ -0,0 +1 @@
+export { WebPreview, WebPreviewBody, WebPreviewConsole, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl, } from "./web-preview";