@decido/plugin-chameleon 1.0.0

package/src/components/DatawaySchemaMapper.tsx

@@ -0,0 +1,291 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+    ReactFlow,
+    Background,
+    Controls,
+    MiniMap,
+    useNodesState,
+    useEdgesState,
+    Handle,
+    Position,
+    MarkerType,
+    Edge
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+interface SchemaColumn {
+    name: string;
+    type: string;
+    formula?: string;
+}
+
+interface SchemaData {
+    columns: SchemaColumn[];
+    inferences: string[];
+}
+
+interface TableNodeProps {
+    data: {
+        title: string;
+        columns: SchemaColumn[];
+        side: 'source' | 'target';
+    };
+}
+
+// Custom Node for displaying a Database Table / Sheet Schema
+const TableNode = ({ data }: TableNodeProps) => {
+    return (
+        <div className="bg-slate-900 border border-slate-700 rounded-lg shadow-xl w-72 text-sm overflow-hidden font-mono">
+            {/* Header */}
+            <div className={`px-4 py-2 font-bold text-white uppercase tracking-wider flex items-center justify-between ${data.side === 'source' ? 'bg-indigo-600' : 'bg-emerald-600'}`}>
+                <span>{data.title}</span>
+                <span className="text-xs opacity-75">{data.columns.length} cols</span>
+            </div>
+            
+            {/* Columns list */}
+            <div className="flex flex-col">
+                {data.columns.map((col, idx) => (
+                    <div key={col.name} className="relative px-4 py-2 border-b border-slate-800 flex items-center justify-between hover:bg-slate-800 transition-colors group">
+                        {/* Source Handles go on the Right, Target Handles on the Left */}
+                        {data.side === 'source' && (
+                            <Handle
+                                type="source"
+                                position={Position.Right}
+                                id={`src-${col.name}`}
+                                className="w-3 h-3 bg-indigo-400 !border-2 !border-slate-900 right-[-6px]"
+                            />
+                        )}
+                        {data.side === 'target' && (
+                            <Handle
+                                type="target"
+                                position={Position.Left}
+                                id={`tgt-${col.name}`}
+                                className="w-3 h-3 bg-emerald-400 !border-2 !border-slate-900 left-[-6px]"
+                            />
+                        )}
+
+                        <div className="flex items-center gap-2 overflow-hidden">
+                            <span className={`w-2 h-2 rounded-full flex-shrink-0 ${data.side === 'source' ? 'bg-indigo-500' : 'bg-emerald-500'}`} />
+                            <span className="text-slate-200 truncate font-semibold" title={col.name}>{col.name}</span>
+                        </div>
+                        <div className="flex flex-col items-end">
+                            <span className="text-xs text-slate-500">{col.type}</span>
+                            {col.formula && (
+                                <span className="text-[10px] text-cyan-400 opacity-0 group-hover:opacity-100 transition-opacity absolute right-6 bg-slate-900 px-1 rounded z-10" title={col.formula}>
+                                    {col.formula}
+                                </span>
+                            )}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+const nodeTypes = {
+    tableNode: TableNode,
+};
+
+interface DatawaySchemaMapperProps {
+    sourceConnector: string;
+    sourceResource: string;
+    targetConnector: string;
+    targetResource: string;
+    onClose: () => void;
+}
+
+export const DatawaySchemaMapper: React.FC<DatawaySchemaMapperProps> = ({
+    sourceConnector,
+    sourceResource,
+    targetConnector,
+    targetResource,
+    onClose
+}) => {
+    const [nodes, setNodes, onNodesChange] = useNodesState([]);
+    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [stats, setStats] = useState({ mapped: 0, missingSource: 0, missingTarget: 0 });
+
+    const baseUrl = (import.meta as any).env?.VITE_API_BASE_URL || 'http://localhost:3001';
+
+    useEffect(() => {
+        const fetchSchemaMap = async () => {
+            try {
+                const res = await fetch(`${baseUrl}/api/dataway/schema/mapper?sourceConnector=${sourceConnector}&sourceResource=${sourceResource}&targetConnector=${targetConnector}&targetResource=${targetResource}`);
+                if (!res.ok) throw new Error("Failed to fetch schema mapping");
+                const data: { sourceSchema: SchemaData, targetSchema: SchemaData } = await res.json();
+
+                // 1. Build Nodes
+                const initialNodes: any[] = [
+                    {
+                        id: 'source-table',
+                        type: 'tableNode',
+                        position: { x: 100, y: 100 },
+                        data: {
+                            title: sourceResource,
+                            columns: data.sourceSchema.columns,
+                            side: 'source'
+                        }
+                    },
+                    {
+                        id: 'target-table',
+                        type: 'tableNode',
+                        position: { x: 700, y: 100 },
+                        data: {
+                            title: targetResource,
+                            columns: data.targetSchema.columns,
+                            side: 'target'
+                        }
+                    }
+                ];
+
+                // Sub-nodes for Google Sheet references
+                if (data.sourceSchema.inferences && data.sourceSchema.inferences.length > 0) {
+                    data.sourceSchema.inferences.forEach((inf, i) => {
+                        initialNodes.push({
+                            id: `inf-${inf}`,
+                            type: 'default',
+                            position: { x: 100 + (i * 150), y: -100 },
+                            data: { label: `📎 Ref: ${inf}` },
+                            style: { background: '#1e293b', color: '#94a3b8', border: '1px solid #334155', borderRadius: '8px', padding: '10px' }
+                        });
+                    });
+                }
+
+                setNodes(initialNodes);
+
+                // 2. Build Edges (Auto-Map by column name similarity)
+                const initialEdges: Edge[] = [];
+                let mappedCount = 0;
+
+                const targetColNames = data.targetSchema.columns.map(c => c.name.toLowerCase());
+                
+                data.sourceSchema.columns.forEach(srcCol => {
+                    const srcName = srcCol.name.toLowerCase();
+                    // Basic exact match or underscore/space fuzzy
+                    const matchIdx = targetColNames.findIndex(tgtName => {
+                        const s = srcName.replace(/[^a-z0-9]/g, '');
+                        const t = tgtName.replace(/[^a-z0-9]/g, '');
+                        return s === t;
+                    });
+
+                    if (matchIdx !== -1) {
+                        const targetCol = data.targetSchema.columns[matchIdx];
+                        initialEdges.push({
+                            id: `e-${srcCol.name}-${targetCol.name}`,
+                            source: 'source-table',
+                            target: 'target-table',
+                            sourceHandle: `src-${srcCol.name}`,
+                            targetHandle: `tgt-${targetCol.name}`,
+                            animated: true,
+                            style: { stroke: '#10b981', strokeWidth: 2 },
+                            markerEnd: { type: MarkerType.ArrowClosed, color: '#10b981' }
+                        });
+                        mappedCount++;
+                    }
+
+                    // Also trace formula inferences natively to the sub-nodes visually
+                    if (srcCol.formula) {
+                        data.sourceSchema.inferences.forEach(inf => {
+                            if (srcCol.formula?.includes(inf)) {
+                                initialEdges.push({
+                                    id: `infe-${srcCol.name}-${inf}`,
+                                    source: `inf-${inf}`,
+                                    target: 'source-table',
+                                    targetHandle: `src-${srcCol.name}`, // visually linking back
+                                    animated: true,
+                                    style: { stroke: '#cbd5e1', strokeWidth: 1, strokeDasharray: '5,5' }
+                                });
+                            }
+                        });
+                    }
+                });
+
+                setEdges(initialEdges);
+                
+                setStats({
+                    mapped: mappedCount,
+                    missingSource: data.sourceSchema.columns.length - mappedCount,
+                    missingTarget: data.targetSchema.columns.length - mappedCount
+                });
+
+            } catch (e) {
+                console.error("Schema Map error:", e);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchSchemaMap();
+    }, [sourceConnector, sourceResource, targetConnector, targetResource]);
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4 text-white">
+            <div className="bg-[#0b0e14] w-[95vw] h-[90vh] rounded-2xl border border-slate-700 shadow-2xl flex flex-col overflow-hidden relative">
+                
+                {/* Header Toolbar */}
+                <div className="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-slate-900/50 backdrop-blur-md">
+                    <div>
+                        <h2 className="text-xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent flex items-center gap-2">
+                            <span className="material-symbols-outlined text-indigo-400">schema</span>
+                            Dataway ERD Mapper
+                        </h2>
+                        <p className="text-slate-400 text-sm mt-1">
+                            Analyzed Source <b>({sourceResource})</b> against Target <b>({targetResource})</b>
+                        </p>
+                    </div>
+
+                    <div className="flex gap-6 items-center">
+                        <div className="flex gap-4 text-sm font-mono bg-black/40 px-4 py-2 rounded-lg border border-slate-800">
+                            <div className="flex flex-col items-center px-2">
+                                <span className="text-emerald-400 text-lg font-bold">{stats.mapped}</span>
+                                <span className="text-slate-500 text-[10px] uppercase">Mapped</span>
+                            </div>
+                            <div className="w-px bg-slate-800"></div>
+                            <div className="flex flex-col items-center px-2">
+                                <span className="text-rose-400 text-lg font-bold">{stats.missingTarget}</span>
+                                <span className="text-slate-500 text-[10px] uppercase">Orphans</span>
+                            </div>
+                        </div>
+                        <button 
+                            onClick={onClose}
+                            className="w-10 h-10 rounded-xl bg-slate-800 hover:bg-rose-500/20 hover:text-rose-400 flex items-center justify-center transition-all"
+                        >
+                            <span className="material-symbols-outlined">close</span>
+                        </button>
+                    </div>
+                </div>
+
+                {/* React Flow Canvas */}
+                <div className="flex-1 w-full h-full bg-[#0a0a0a]">
+                    {isLoading ? (
+                        <div className="w-full h-full flex items-center justify-center">
+                            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-500"></div>
+                        </div>
+                    ) : (
+                        <ReactFlow
+                            nodes={nodes}
+                            edges={edges}
+                            onNodesChange={onNodesChange}
+                            onEdgesChange={onEdgesChange}
+                            nodeTypes={nodeTypes}
+                            fitView
+                            attributionPosition="bottom-left"
+                            className="bg-[#050505]"
+                        >
+                            <Background color="#334155" gap={20} size={1} />
+                            <Controls className="!bg-slate-900 !border-slate-700 !fill-slate-400" />
+                            <MiniMap 
+                                className="!bg-slate-900 !border-slate-700 rounded-lg"
+                                maskColor="rgba(0,0,0,0.5)"
+                                nodeColor={(n) => n.id.includes('source') ? '#4f46e5' : '#10b981'}
+                            />
+                        </ReactFlow>
+                    )}
+                </div>
+
+            </div>
+        </div>
+    );
+};

package/src/components/FormulaBar.tsx

@@ -0,0 +1,242 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Play, FunctionSquare, XCircle, History, Sparkles, Loader2 } from 'lucide-react';
+import CodeMirror from '@uiw/react-codemirror';
+import { keymap } from '@codemirror/view';
+import { autocompletion, CompletionContext } from '@codemirror/autocomplete';
+import { useDatawayStore } from '../store/datawayStore';
+import { toast } from 'sonner';
+
+interface FormulaBarProps {
+    onExecute: (script: string) => void;
+    onClear: () => void;
+    activeResource: string | null;
+    activeConnector: string;
+    isLoading: boolean;
+    schemaColumns?: string[];
+}
+
+export const FormulaBar: React.FC<FormulaBarProps> = ({ onExecute, onClear, activeResource, activeConnector, isLoading, schemaColumns = [] }) => {
+    const [script, setScript] = useState('');
+    const [isCopilotActive, setIsCopilotActive] = useState(false);
+    const [copilotPrompt, setCopilotPrompt] = useState('');
+    const [isGenerating, setIsGenerating] = useState(false);
+
+    const { commandHistory, addCommand } = useDatawayStore();
+    const [historyIndex, setHistoryIndex] = useState(-1);
+
+    const handleExecute = () => {
+        if (!script.trim()) {
+            onClear();
+        } else {
+            addCommand(script);
+            setHistoryIndex(-1);
+            onExecute(script);
+        }
+    };
+
+    const handleClear = () => {
+        setScript('');
+        setHistoryIndex(-1);
+        onClear();
+    };
+
+    const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+        if (e.key === 'ArrowUp' && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            if (commandHistory.length > 0) {
+                const newIndex = historyIndex === -1 ? commandHistory.length - 1 : Math.max(0, historyIndex - 1);
+                setHistoryIndex(newIndex);
+                setScript(commandHistory[newIndex]);
+            }
+        } else if (e.key === 'ArrowDown' && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            if (historyIndex !== -1) {
+                const newIndex = historyIndex + 1;
+                if (newIndex >= commandHistory.length) {
+                    setHistoryIndex(-1);
+                    setScript('');
+                } else {
+                    setHistoryIndex(newIndex);
+                    setScript(commandHistory[newIndex]);
+                }
+            }
+        }
+    }, [commandHistory, historyIndex]);
+
+    const handleGenerateCopilot = async () => {
+        if (!copilotPrompt.trim() || !activeResource) return;
+        setIsGenerating(true);
+        try {
+            const baseUrl = (import.meta as any).env?.VITE_API_BASE_URL || 'http://localhost:3001';
+            const res = await fetch(`${baseUrl}/api/dataway/copilot`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    prompt: copilotPrompt,
+                    connectorId: activeConnector,
+                    resource: activeResource
+                })
+            });
+            if (!res.ok) throw new Error('Falló la generación IA');
+            const data = await res.json();
+            
+            setScript(data.script);
+            setIsCopilotActive(false);
+            setCopilotPrompt('');
+            toast.success('M-Script Generado por Inteligencia Artificial');
+        } catch (error: any) {
+            toast.error('Error del Copilot', { description: error.message });
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    const customExtensions = [
+        keymap.of([
+            {
+                key: 'Enter',
+                run: () => {
+                    handleExecute();
+                    return true;
+                },
+                shift: () => false // support shift-enter mapped natively to new lines
+            }
+        ]),
+        autocompletion({
+            override: [
+                (context: CompletionContext) => {
+                    const word = context.matchBefore(/["\w.]+/);
+                    if (!word || (word.from === word.to && !context.explicit)) return null;
+
+                    const mScriptFunctions = [
+                        { label: 'Table.SelectRows', type: 'function', info: 'Table.SelectRows(table, column, value)' },
+                        { label: 'Table.AddColumn', type: 'function', info: 'Table.AddColumn(table, newColumn, value)' },
+                        { label: 'Table.RenameColumns', type: 'function', info: 'Table.RenameColumns(table, {{"old", "new"}})' },
+                        { label: 'Table.SelectColumns', type: 'function', info: 'Table.SelectColumns(table, {"col1", "col2"})' },
+                        { label: 'Table.RemoveColumns', type: 'function', info: 'Table.RemoveColumns(table, {"col1", "col2"})' },
+                        { label: 'Table.FirstN', type: 'function', info: 'Table.FirstN(table, count)' },
+                        { label: 'Table.LastN', type: 'function', info: 'Table.LastN(table, count)' },
+                        { label: 'Table.Distinct', type: 'function', info: 'Table.Distinct(table)' },
+                        { label: 'Table.Sort', type: 'function', info: 'Table.Sort(table, {{"col", Order.Descending}})' },
+                        { label: 'Order.Ascending', type: 'variable' },
+                        { label: 'Order.Descending', type: 'variable' },
+                        { label: 'Source', type: 'variable', info: 'The active resource dataset' },
+                    ];
+
+                    const cols = schemaColumns.map(col => ({
+                        label: `"${col}"`,
+                        type: 'property',
+                        info: `Column in ${activeResource}`
+                    }));
+
+                    return {
+                        from: word.from,
+                        options: [...mScriptFunctions, ...cols]
+                    };
+                }
+            ]
+        })
+    ];
+
+    return (
+        <div className="w-full bg-[var(--bg-primary)] border-b border-[var(--border-color)] px-6 py-3 flex items-center gap-3 shadow-sm z-30" onKeyDown={handleKeyDown}>
+            <div className="bg-[var(--brand-primary)]/10 p-1.5 rounded-lg text-[var(--brand-primary)]">
+                <FunctionSquare className="w-5 h-5" />
+            </div>
+            
+            {isCopilotActive ? (
+                <div className="flex-1 relative group border border-purple-400 ring-2 ring-purple-400/20 rounded-xl overflow-hidden shadow-inner bg-purple-50/50 flex items-center transition-all">
+                    <input
+                        type="text"
+                        autoFocus
+                        value={copilotPrompt}
+                        onChange={(e) => setCopilotPrompt(e.target.value)}
+                        placeholder="Dile a Gemini qué necesitas... (Ej: filtra los urgentes y ordena por fecha)"
+                        className="w-full bg-transparent border-none outline-none py-2.5 px-4 text-sm font-medium text-purple-900 placeholder:text-purple-400/70"
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') handleGenerateCopilot();
+                            if (e.key === 'Escape') setIsCopilotActive(false);
+                        }}
+                        disabled={isGenerating}
+                    />
+                    <button onClick={() => setIsCopilotActive(false)} className="pr-3 text-purple-400 hover:text-purple-600 transition-colors">
+                        <XCircle className="w-4 h-4" />
+                    </button>
+                </div>
+            ) : (
+                <div className="flex-1 relative group border border-[var(--border-color)] rounded-xl overflow-hidden shadow-inner focus-within:ring-2 focus-within:ring-[var(--brand-primary)]/30 focus-within:border-[var(--brand-primary)] transition-all bg-[var(--bg-surface)] flex items-center">
+                    <div className="flex-1">
+                        <CodeMirror
+                            value={script}
+                            height="auto"
+                            placeholder={activeResource 
+                                ? `Ej: Table.SelectRows(Source, "${activeResource}_id", "==", "10")  (Ctrl+↑ Histórico)` 
+                                : "Selecciona un recurso para escribir una fórmula M-Script..."}
+                            extensions={customExtensions}
+                            onChange={(val) => setScript(val)}
+                            editable={!!activeResource && !isLoading}
+                            basicSetup={{
+                                lineNumbers: false,
+                                foldGutter: false,
+                                dropCursor: false,
+                                allowMultipleSelections: false,
+                                indentOnInput: false,
+                                bracketMatching: true,
+                                closeBrackets: true,
+                                autocompletion: true,
+                                highlightActiveLine: false,
+                                highlightActiveLineGutter: false
+                            }}
+                            className="text-sm font-mono text-[var(--text-primary)] w-full [&_.cm-editor]:bg-transparent [&_.cm-scroller]:p-2.5"
+                            theme="none"
+                        />
+                    </div>
+                    
+                    {script && (
+                        <button 
+                            onClick={handleClear}
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--text-secondary)] hover:text-red-500 transition-colors bg-[var(--bg-surface)] pl-2 h-full flex items-center"
+                            title="Limpiar Fórmula"
+                            style={{ zIndex: 10 }}
+                        >
+                            <XCircle className="w-4 h-4" />
+                        </button>
+                    )}
+                </div>
+            )}
+
+            <button
+                onClick={() => isCopilotActive ? handleGenerateCopilot() : setIsCopilotActive(true)}
+                disabled={!activeResource || isLoading || isGenerating}
+                className={`flex items-center justify-center w-10 h-10 rounded-xl transition-all ${
+                    isCopilotActive 
+                    ? 'bg-gradient-to-r from-purple-500 to-indigo-600 text-white shadow-md shadow-purple-500/20' 
+                    : 'bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:text-purple-600 hover:bg-purple-50'
+                }`}
+                title="AI Copilot (M-Script Maker)"
+            >
+                {isGenerating ? <Loader2 className="w-5 h-5 animate-spin" /> : <Sparkles className="w-5 h-5" />}
+            </button>
+
+            {commandHistory.length > 0 && (
+                <div className="text-[10px] text-[var(--text-secondary)] font-medium flex items-center gap-1 cursor-help relative" title="Consultas en el historial (Ctrl+↑ / Ctrl+↓)">
+                    <History className="w-3 h-3 opacity-60" />
+                    <span className="opacity-60">{commandHistory.length}</span>
+                </div>
+            )}
+
+            <button
+                onClick={handleExecute}
+                disabled={!activeResource || isLoading || !script.trim()}
+                className="flex items-center gap-2 bg-[var(--brand-primary)] hover:bg-[var(--brand-primary-hover)] text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-md shadow-[var(--brand-primary)]/20 transition-all active:scale-95 disabled:opacity-50 disabled:grayscale ml-2"
+            >
+                {isLoading ? (
+                    <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                ) : (
+                    <Play className="w-4 h-4 fill-current" />
+                )}
+                <span>Ejecutar</span>
+            </button>
+        </div>
+    );
+};

package/src/hooks/useSocketSync.ts

@@ -0,0 +1,104 @@
+import { useEffect } from 'react';
+import { io } from 'socket.io-client';
+import { useOrderStore } from '../stores/orderStore';
+import { toast } from 'sonner';
+import { playUISound } from '../utils/sounds';
+
+const SOCKET_URL = (import.meta as any).env?.VITE_API_BASE_URL || 'http://localhost:3001'; // Madefront backend
+
+let socketInstance: any = null;
+
+export const useSocketSync = () => {
+    const { updateStatus, fetchOrders } = useOrderStore();
+
+    useEffect(() => {
+        if (!socketInstance) {
+            socketInstance = io(SOCKET_URL, {
+                reconnectionAttempts: 5,
+                reconnectionDelay: 2000,
+            });
+        }
+        
+        const socket = socketInstance;
+
+        const onConnect = () => {
+            console.log('[Chameleon Socket] Conectado al backend:', socket.id);
+            fetchOrders();
+        };
+
+        const onOrderUpdate = (data: any) => {
+            console.log('[Chameleon Socket] order_update recibido:', data);
+
+            if (data?.id && data?.stage) {
+                const mapStageToStatus = (stage: string): string => {
+                    switch (stage?.toUpperCase()) {
+                        case 'NEW':
+                        case 'DESIGN':
+                            return 'DISEÑO';
+                        case 'OPTIMIZATION':
+                        case 'IN_CUTTING':
+                        case 'IN_EDGEBANDING':
+                        case 'IN_ASSEMBLY':
+                            return 'OPTIMIZACION';
+                        case 'AUTHORIZED_FOR_PRODUCTION':
+                            return 'CAJA';
+                        case 'PRODUCTION':
+                            return 'PRODUCCION';
+                        case 'DISPATCH':
+                        case 'IN_DISPATCH':
+                        case 'READY_FOR_DISPATCH':
+                            return 'DESPACHO';
+                        case 'COMPLETED':
+                        case 'DELIVERED':
+                            return 'ENTREGADO';
+                        default:
+                            return 'DISEÑO';
+                    }
+                };
+
+                const mappedStatus = mapStageToStatus(data.stage);
+                updateStatus(data.id, mappedStatus as any);
+
+                const targetStatus = data.stage;
+                if (targetStatus === 'IN_CUTTING' || targetStatus === 'PRODUCTION') {
+                    toast('WhatsApp Automático', {
+                        description: `📱 Cliente: "Hola! Tu pedido ha entrado a la zona de corte."`,
+                        icon: '🟢'
+                    });
+                } else if (targetStatus === 'DISPATCH' || targetStatus === 'READY_FOR_DISPATCH') {
+                    toast('WhatsApp Automático', {
+                        description: `📱 Cliente: "Buenas noticias! Tu material está listo."`,
+                        icon: '🟢'
+                    });
+                } else if (targetStatus === 'AUTHORIZED_FOR_PRODUCTION') {
+                    toast('WhatsApp Interno', {
+                        description: `💰 Alerta: Nuevo pedido esperando autorización.`,
+                        icon: '🟡'
+                    });
+                } else {
+                    toast.success(`Orden ${data.id} sincronizada`, {
+                        description: `Nuevo estado Kanban: ${mappedStatus}`,
+                        icon: '🔄'
+                    });
+                }
+
+                playUISound('swoosh');
+            }
+        };
+
+        const onDisconnect = () => {
+            console.warn('[Chameleon Socket] Desconectado del backend');
+        };
+
+        socket.on('connect', onConnect);
+        socket.on('server:order_update', onOrderUpdate);
+        socket.on('disconnect', onDisconnect);
+
+        return () => {
+            socket.off('connect', onConnect);
+            socket.off('server:order_update', onOrderUpdate);
+            socket.off('disconnect', onDisconnect);
+        };
+    }, [updateStatus, fetchOrders]);
+};
+

package/src/index.css

@@ -0,0 +1,18 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+}
+
+@layer utilities {
+  .perspective-1000 {
+    perspective: 1000px;
+  }
+  .rotate-x-2 {
+    transform: rotateX(2deg);
+  }
+  .rotate-y-2 {
+    transform: rotateY(2deg);
+  }
+}