@decido/shell 1.0.0 → 4.0.1

package/src/components/studio/editor/TrackPropertyEditors.tsx

@@ -1,133 +0,0 @@
-import React from 'react';
-import { Mic2, Monitor, Zap, Image, PenSquare } from 'lucide-react';
-
-interface TrackEditorProps {
-    keyframe: any;
-    onUpdate: (patch: Record<string, any>) => void;
-}
-
-const TRACK_CONFIG: Record<string, { icon: React.ComponentType<any>; label: string; color: string; bg: string; border: string }> = {
-    dialogue: { icon: Mic2, label: 'Diálogo', color: 'text-purple-400', bg: 'bg-purple-500/10', border: 'border-purple-500/20' },
-    ui: { icon: Monitor, label: 'Estado UI', color: 'text-cyan-400', bg: 'bg-cyan-500/10', border: 'border-cyan-500/20' },
-    logic: { icon: Zap, label: 'Lógica MCP', color: 'text-orange-400', bg: 'bg-orange-500/10', border: 'border-orange-500/20' },
-    render: { icon: Image, label: 'UI Render', color: 'text-pink-400', bg: 'bg-pink-500/10', border: 'border-pink-500/20' },
-    trigger: { icon: Zap, label: 'Trigger', color: 'text-yellow-400', bg: 'bg-yellow-500/10', border: 'border-yellow-500/20' },
-    set: { icon: PenSquare, label: 'Set Variable', color: 'text-violet-400', bg: 'bg-violet-500/10', border: 'border-violet-500/20' },
-};
-
-export function getTrackConfig(track: string) {
-    return TRACK_CONFIG[track] || { icon: Zap, label: track, color: 'text-orange-400', bg: 'bg-orange-500/10', border: 'border-orange-500/20' };
-}
-
-/** Dialogue track — actor select + TTS speech textarea. */
-export const DialogueEditor: React.FC<TrackEditorProps> = ({ keyframe, onUpdate }) => (
-    <div className="flex flex-col gap-4">
-        <h4 className="text-[10px] font-bold text-purple-400/40 uppercase tracking-widest border-b border-purple-500/20 pb-1">Configuración Diálogo</h4>
-        <div className="flex flex-col gap-1">
-            <label className="text-[10px] text-text-muted">Actor ID</label>
-            <select value={keyframe.actorId || 'system'} onChange={e => onUpdate({ actorId: e.target.value })}
-                className="bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-purple-300 focus:outline-hidden focus:border-purple-500/50">
-                <option value="system">🚀 System</option><option value="user">👤 User</option><option value="client">💼 Client</option><option value="inventory_agent">📦 Inventory Agent</option>
-            </select>
-        </div>
-        <div className="flex flex-col gap-1 flex-1">
-            <label className="text-[10px] text-text-muted flex justify-between"><span>Texto (TTS)</span><span className="text-purple-400/50">{keyframe.speech?.length || 0} chars</span></label>
-            <textarea value={keyframe.speech || ''} onChange={e => onUpdate({ speech: e.target.value })}
-                className="bg-surface-overlay border border-border-default rounded px-2 py-2 text-xs text-text-primary focus:outline-hidden focus:border-purple-500/50 min-h-[120px] resize-y" placeholder="Escribe el diálogo aquí..." />
-        </div>
-    </div>
-);
-
-/** UI State track — state trigger + 3D canvas toggle. */
-export const UIStateEditor: React.FC<TrackEditorProps> = ({ keyframe, onUpdate }) => (
-    <div className="flex flex-col gap-4">
-        <h4 className="text-[10px] font-bold text-cyan-400/40 uppercase tracking-widest border-b border-cyan-500/20 pb-1">Eventos Interfaz</h4>
-        <div className="flex flex-col gap-1">
-            <label className="text-[10px] text-text-muted">App State Trigger</label>
-            <input type="text" value={keyframe.state || ''} onChange={e => onUpdate({ state: e.target.value })}
-                className="bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-cyan-300 font-mono focus:outline-hidden focus:border-cyan-500/50" placeholder="e.g., loading_screen" />
-        </div>
-        <div className="mt-1 bg-surface-glass rounded-lg border border-border-default p-3">
-            <label className="flex items-start gap-3 cursor-pointer">
-                <input type="checkbox" checked={keyframe.canvas || false} onChange={e => onUpdate({ canvas: e.target.checked })} className="mt-0.5 rounded border-border-strong bg-surface-glass text-cyan-500 w-4 h-4 cursor-pointer" />
-                <div className="flex flex-col"><span className="text-xs font-bold text-cyan-300">Embeber Lienzo 3D</span><span className="text-[10px] text-text-muted mt-1">Al pasar por este nodo, mostrará el motor SpatialCanvas3D.</span></div>
-            </label>
-        </div>
-    </div>
-);
-
-/** Render track — component name + autoComplete + uiSchema JSON. */
-export const RenderEditor: React.FC<TrackEditorProps> = ({ keyframe, onUpdate }) => (
-    <div className="flex flex-col gap-4">
-        <h4 className="text-[10px] font-bold text-pink-400/40 uppercase tracking-widest border-b border-pink-500/20 pb-1">UI Component</h4>
-        <div className="flex flex-col gap-1">
-            <label className="text-[10px] text-text-muted">Nombre</label>
-            <input type="text" value={keyframe.label || keyframe.state || ''} onChange={e => onUpdate({ label: e.target.value, state: e.target.value })}
-                className="bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-pink-300 font-mono focus:outline-hidden focus:border-pink-500/50" placeholder="e.g., Formulario Contacto" />
-        </div>
-        <div className="bg-surface-glass rounded-lg border border-border-default p-3">
-            <label className="flex items-start gap-3 cursor-pointer">
-                <input type="checkbox" checked={keyframe.autoComplete ?? true} onChange={e => onUpdate({ autoComplete: e.target.checked })} className="mt-0.5 rounded border-border-strong bg-surface-glass text-pink-500 w-4 h-4 cursor-pointer" />
-                <div className="flex flex-col"><span className="text-xs font-bold text-pink-300">Auto-Complete</span><span className="text-[10px] text-text-muted mt-1">Si activo, el nodo se completa al mostrarse. Si no, espera interacción.</span></div>
-            </label>
-        </div>
-        <div className="flex flex-col gap-1">
-            <label className="text-[10px] text-text-muted">UI Schema (JSON)</label>
-            <textarea value={typeof keyframe.uiSchema === 'object' ? JSON.stringify(keyframe.uiSchema, null, 2) : (keyframe.uiSchema || '')}
-                onChange={e => { try { onUpdate({ uiSchema: JSON.parse(e.target.value) }); } catch {} }}
-                className="bg-surface-overlay border border-border-default rounded px-2 py-2 text-[10px] text-pink-200 font-mono focus:outline-hidden focus:border-pink-500/50 min-h-[80px] resize-y"
-                placeholder='{"type":"div","children":...}' />
-        </div>
-    </div>
-);
-
-/** Logic track — intent field. */
-export const LogicEditor: React.FC<TrackEditorProps> = ({ keyframe, onUpdate }) => (
-    <div className="flex flex-col gap-4">
-        <h4 className="text-[10px] font-bold text-orange-400/40 uppercase tracking-widest border-b border-orange-500/20 pb-1">Motor de Lógica</h4>
-        <div className="flex flex-col gap-1">
-            <label className="text-[10px] text-text-muted">Tópico / Intención</label>
-            <input type="text" value={keyframe.intent || ''} onChange={e => onUpdate({ intent: e.target.value })}
-                className="bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-orange-300 font-mono focus:outline-hidden focus:border-orange-500/50" placeholder="e.g., process_payment" />
-        </div>
-        <div className="p-3 bg-orange-500/10 border border-orange-500/20 rounded"><p className="text-[10px] text-orange-300/80 leading-relaxed">Este nodo disparará eventos hacia el Event Mesh para orquestar servicios remotos.</p></div>
-    </div>
-);
-
-/** Trigger track — guard expression + priority. */
-export const TriggerEditor: React.FC<TrackEditorProps> = ({ keyframe, onUpdate }) => (
-    <div className="flex flex-col gap-4">
-        <h4 className="text-[10px] font-bold text-yellow-400/40 uppercase tracking-widest border-b border-yellow-500/20 pb-1">Activación Automática</h4>
-        <div className="flex flex-col gap-1">
-            <label className="text-[10px] text-text-muted">Guard Expression</label>
-            <input type="text" value={keyframe.guardExpression || ''} onChange={e => onUpdate({ guardExpression: e.target.value })}
-                className="bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-yellow-300 font-mono focus:outline-hidden focus:border-yellow-500/50" placeholder="!user.onboardingComplete" />
-            <span className="text-[9px] text-text-muted">Si true, el flujo se auto-activa al cargar la app.</span>
-        </div>
-        <div className="flex flex-col gap-1">
-            <label className="text-[10px] text-text-muted">Prioridad</label>
-            <input type="number" value={keyframe.priority || 0} onChange={e => onUpdate({ priority: parseInt(e.target.value) || 0 })}
-                className="bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-yellow-300 font-mono focus:outline-hidden focus:border-yellow-500/50 w-20" placeholder="0" />
-            <span className="text-[9px] text-text-muted">Mayor = se evalúa primero.</span>
-        </div>
-    </div>
-);
-
-/** Set Variable track — target + value fields. */
-export const SetVariableEditor: React.FC<TrackEditorProps> = ({ keyframe, onUpdate }) => (
-    <div className="flex flex-col gap-4">
-        <h4 className="text-[10px] font-bold text-violet-400/40 uppercase tracking-widest border-b border-violet-500/20 pb-1">Escritura de Variable</h4>
-        <div className="flex flex-col gap-1">
-            <label className="text-[10px] text-text-muted">Variable Target</label>
-            <input type="text" value={keyframe.variableTarget || ''} onChange={e => onUpdate({ variableTarget: e.target.value })}
-                className="bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-violet-300 font-mono focus:outline-hidden focus:border-violet-500/50" placeholder="e.g., user.onboardingComplete" />
-            <span className="text-[9px] text-text-muted">Prefijo "user." = persistente. Sin prefijo = sesión.</span>
-        </div>
-        <div className="flex flex-col gap-1">
-            <label className="text-[10px] text-text-muted">Valor</label>
-            <input type="text" value={keyframe.variableValue ?? ''} onChange={e => onUpdate({ variableValue: e.target.value })}
-                className="bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-emerald-300 font-mono focus:outline-hidden focus:border-violet-500/50" placeholder="e.g., true, 50, user.xp + 10" />
-            <span className="text-[9px] text-text-muted">Puede ser literal o expresión JS.</span>
-        </div>
-    </div>
-);

package/src/components/studio/editor/TreeNodeItem.tsx

@@ -1,91 +0,0 @@
-/**
- * TreeNodeItem — recursive node renderer for the DependencyTreePanel.
- * Extracted to reduce DependencyTreePanel line count.
- */
-import React, { useState } from 'react';
-import {
-    ChevronRight, ChevronDown, FileText, Network,
-    Zap, AlertTriangle
-} from 'lucide-react';
-
-export interface TreeNode {
-    id: string;
-    name: string;
-    type: 'blueprint' | 'subflow' | 'trigger' | 'orphan';
-    children: TreeNode[];
-    isCyclic?: boolean;
-    depth: number;
-}
-
-export const TreeNodeItem: React.FC<{
-    node: TreeNode;
-    activeId: string;
-    onNavigate: (id: string) => void;
-}> = ({ node, activeId, onNavigate }) => {
-    const [isExpanded, setIsExpanded] = useState(node.depth < 2);
-    const hasChildren = node.children.length > 0;
-    const isActive = node.id === activeId;
-
-    const icon = node.type === 'trigger'
-        ? <Zap size={13} className="text-amber-400" />
-        : node.type === 'subflow'
-            ? <Network size={13} className={node.isCyclic ? 'text-red-400' : 'text-violet-400'} />
-            : node.type === 'orphan'
-                ? <AlertTriangle size={13} className="text-text-muted" />
-                : <FileText size={13} className="text-cyan-400" />;
-
-    return (
-        <div>
-            <div
-                className={`flex items-center gap-1.5 px-2 py-1.5 rounded-lg cursor-pointer transition-all mb-0.5 ${
-                    isActive
-                        ? 'bg-cyan-500/15 border border-cyan-500/30'
-                        : node.isCyclic
-                            ? 'bg-red-500/5 border border-red-500/20 hover:bg-red-500/10'
-                            : 'hover:bg-surface-glass border border-transparent'
-                }`}
-                style={{ paddingLeft: `${8 + node.depth * 16}px` }}
-                onClick={() => onNavigate(node.id)}
-            >
-                {hasChildren ? (
-                    <button
-                        onClick={(e) => { e.stopPropagation(); setIsExpanded(!isExpanded); }}
-                        className="p-0.5 rounded hover:bg-surface-glass text-text-muted shrink-0"
-                    >
-                        {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-                    </button>
-                ) : (
-                    <span className="w-5 shrink-0" />
-                )}
-
-                {icon}
-
-                <span className={`text-xs truncate flex-1 ${
-                    isActive ? 'text-text-primary font-medium' : node.isCyclic ? 'text-red-300' : 'text-text-secondary'
-                }`}>
-                    {node.name}
-                </span>
-
-                {node.isCyclic && (
-                    <span className="text-[8px] bg-red-500/20 text-red-400 px-1 py-0.5 rounded font-mono">CICLO</span>
-                )}
-                {node.type === 'trigger' && (
-                    <span className="text-[8px] bg-amber-500/10 text-amber-400 px-1 py-0.5 rounded font-mono">⚡</span>
-                )}
-            </div>
-
-            {hasChildren && isExpanded && (
-                <div>
-                    {node.children.map(child => (
-                        <TreeNodeItem
-                            key={child.id}
-                            node={child}
-                            activeId={activeId}
-                            onNavigate={onNavigate}
-                        />
-                    ))}
-                </div>
-            )}
-        </div>
-    );
-};

package/src/components/studio/editor/edgeStyles.ts

@@ -1,43 +0,0 @@
-import { Edge, MarkerType } from '@xyflow/react';
-
-// ─── Known source handle IDs for edge coloring ───
-const VALID_HANDLES = new Set(['success', 'error', 'true', 'false', 'fallback', 'cancel']);
-
-const HANDLE_COLORS: Record<string, string> = {
-    success: '#22c55e', error: '#ef4444', true: '#22c55e',
-    false: '#ef4444', fallback: '#f97316', cancel: '#a855f7',
-};
-
-/**
- * Build ReactFlow edges from timeline edges with active-node highlighting.
- */
-export function buildStyledEdges(
-    timelineEdges: any[],
-    activeNodeIds: string[],
-    activeEdgeIds: string[]
-): Edge[] {
-    return timelineEdges.map(e => {
-        const rawHandle = e.sourceHandle || 'success';
-        const sourceHandle = VALID_HANDLES.has(rawHandle) ? rawHandle : 'success';
-        const color = HANDLE_COLORS[sourceHandle] || '#a855f7';
-
-        const isSourceActive = activeNodeIds.includes(e.source);
-        const isTraversed = activeEdgeIds.includes(e.id);
-
-        const activeColor = isTraversed ? '#22d3ee' : color;
-        const glowFilter = isTraversed
-            ? `drop-shadow(0 0 10px ${activeColor})`
-            : isSourceActive ? 'drop-shadow(0 0 5px rgba(255,255,255,0.8))' : 'none';
-
-        return {
-            id: e.id,
-            source: e.source,
-            target: e.target,
-            sourceHandle,
-            targetHandle: e.targetHandle,
-            animated: isSourceActive || isTraversed,
-            style: { stroke: activeColor, strokeWidth: isTraversed ? 5 : isSourceActive ? 4 : 3, filter: glowFilter },
-            markerEnd: { type: MarkerType.ArrowClosed, color: activeColor },
-        };
-    });
-}

package/src/components/studio/editor/editorKeyHandler.ts

@@ -1,95 +0,0 @@
-import { Edge, Node } from '@xyflow/react';
-
-interface ClipboardState {
-    nodes: Node[];
-    edges: Edge[];
-}
-
-/**
- * Creates a keydown handler for the ReactFlow editor canvas.
- * Handles: Select All (Cmd+A), Copy (Cmd+C), Paste (Cmd+V), Delete/Backspace.
- */
-export function createEditorKeyHandler(opts: {
-    getNodes: () => Node[];
-    getEdges: () => Edge[];
-    setNodes: (fn: (nodes: Node[]) => Node[]) => void;
-    setEdges: (fn: (edges: Edge[]) => Edge[]) => void;
-    clipboard: React.MutableRefObject<ClipboardState>;
-    activeTimelineId: string;
-    currentBlueprintId: string | null;
-    addKeyframe: (tid: string, kf: any) => void;
-    addTimelineEdge: (tid: string, edge: any) => void;
-    removeKeyframe: (tid: string, id: string) => void;
-    removeTimelineEdge: (tid: string, id: string) => void;
-    setSelectedNodeId: (id: string | null) => void;
-    NODE_TYPE_TO_TRACK: Record<string, string>;
-}) {
-    return (e: KeyboardEvent) => {
-        const meta = e.metaKey || e.ctrlKey;
-        const t = e.target as HTMLElement;
-        if (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.tagName === 'SELECT') return;
-
-        const nodes = opts.getNodes();
-        const edges = opts.getEdges();
-        const tid = opts.currentBlueprintId || opts.activeTimelineId;
-
-        // Select All
-        if (meta && e.key === 'a') {
-            e.preventDefault();
-            opts.setNodes(n => n.map(x => ({ ...x, selected: true })));
-            opts.setEdges(ed => ed.map(x => ({ ...x, selected: true })));
-        }
-
-        // Copy
-        if (meta && e.key === 'c') {
-            const sel = nodes.filter(n => n.selected);
-            if (!sel.length) return;
-            const ids = new Set(sel.map(n => n.id));
-            opts.clipboard.current = { nodes: sel, edges: edges.filter(e => ids.has(e.source) && ids.has(e.target)) };
-        }
-
-        // Paste
-        if (meta && e.key === 'v') {
-            const { nodes: cn, edges: ce } = opts.clipboard.current;
-            if (!cn.length) return;
-            e.preventDefault();
-            const idMap: Record<string, string> = {};
-            opts.setNodes(n => n.map(x => ({ ...x, selected: false })));
-            cn.forEach(node => {
-                const newId = `${node.id}_copy_${Date.now()}_${Math.random().toString(36).substring(7)}`;
-                idMap[node.id] = newId;
-                opts.addKeyframe(tid, {
-                    id: newId, t: Date.now(),
-                    track: opts.NODE_TYPE_TO_TRACK[node.type || ''] || node.type || 'dialogue',
-                    label: `${node.data.label || node.data.state || 'Copy'} (copia)`,
-                    state: `${node.data.state || node.data.label || 'Copy'} (copia)`,
-                    position: { x: node.position.x + 50, y: node.position.y + 50 },
-                    speech: node.data.speech, actorId: node.data.actorId, intent: node.data.intent,
-                    uiSchema: node.data.uiSchema || node.data.schema, autoComplete: node.data.autoComplete,
-                    triggerType: node.data.triggerType, guardExpression: node.data.guardExpression,
-                    priority: node.data.priority, conditionExpression: node.data.conditionExpression,
-                    variableTarget: node.data.variableTarget, variableValue: node.data.variableValue,
-                    targetBlueprintId: node.data.targetBlueprintId, handle: node.data.handle,
-                });
-            });
-            ce.forEach(edge => {
-                const ns = idMap[edge.source], nt = idMap[edge.target];
-                if (ns && nt) opts.addTimelineEdge(tid, {
-                    id: `edge-${ns}-${nt}-${Date.now()}`, source: ns, target: nt,
-                    sourceHandle: edge.sourceHandle || null, targetHandle: edge.targetHandle || null,
-                });
-            });
-        }
-
-        // Delete
-        if (e.key === 'Delete' || e.key === 'Backspace') {
-            const sn = nodes.filter(n => n.selected);
-            const se = edges.filter(e => e.selected);
-            if (!sn.length && !se.length) return;
-            e.preventDefault();
-            sn.forEach(n => opts.removeKeyframe(tid, n.id));
-            se.forEach(e => opts.removeTimelineEdge(tid, e.id));
-            opts.setSelectedNodeId(null);
-        }
-    };
-}

package/src/components/studio/editor/nodeTypeRegistry.ts

@@ -1,137 +0,0 @@
-import { Node } from '@xyflow/react';
-import { 
-    DialogueNode, LogicNode, StateNode, SubflowNode, 
-    EntryNode, ReturnNode, RenderNode, TriggerNode, 
-    ConditionalNode, SetVariableNode, MorphNode 
-} from '@decido/canvas-core';
-import {
-    RegisterButtonNode, RegisterTabNode, RegisterPanelNode, RegisterSidebarNode,
-    RegisterStatusBarNode, RegisterTopBarNode, RegisterActionNode,
-    ToggleSidebarNode, TogglePanelNode, SplitPaneNode, FocusTabNode, CloseTabNode,
-    SetThemeNode, ApplyPaletteNode, UpdateTokenNode,
-    ShowNotificationNode, ShowModalNode, ExecuteCommandNode, RegisterShortcutNode, EmitEventNode,
-    ShellConfigNode
-} from '../nodes/shell';
-
-// ─── Node Type Registry ───
-export const nodeTypes: Record<string, any> = {
-    dialogue: DialogueNode,
-    'ai:dialogue': DialogueNode,
-    logic: LogicNode,
-    'mcp:execute': LogicNode,
-    ui: StateNode,
-    'ui:state': StateNode,
-    'core:subflow': SubflowNode,
-    'core:entry': EntryNode,
-    'core:return': ReturnNode,
-    'ui:render': RenderNode,
-    'render': RenderNode,
-    'trigger': TriggerNode,
-    'event:trigger': TriggerNode,
-    'condition': ConditionalNode,
-    'logic:condition': ConditionalNode,
-    'set': SetVariableNode,
-    'state:set': SetVariableNode,
-    'morph': MorphNode,
-    'ui:morph': MorphNode,
-    // Shell Control Nodes
-    'shell:registerButton': RegisterButtonNode,
-    'shell:registerTab': RegisterTabNode,
-    'shell:registerPanel': RegisterPanelNode,
-    'shell:registerSidebar': RegisterSidebarNode,
-    'shell:registerStatusBar': RegisterStatusBarNode,
-    'shell:registerTopBar': RegisterTopBarNode,
-    'shell:registerAction': RegisterActionNode,
-    'shell:toggleSidebar': ToggleSidebarNode,
-    'shell:togglePanel': TogglePanelNode,
-    'shell:splitPane': SplitPaneNode,
-    'shell:focusTab': FocusTabNode,
-    'shell:closeTab': CloseTabNode,
-    'shell:setTheme': SetThemeNode,
-    'shell:applyPalette': ApplyPaletteNode,
-    'shell:updateToken': UpdateTokenNode,
-    'shell:notification': ShowNotificationNode,
-    'shell:modal': ShowModalNode,
-    'shell:execCommand': ExecuteCommandNode,
-    'shell:shortcut': RegisterShortcutNode,
-    'shell:emitEvent': EmitEventNode,
-    'shell:config': ShellConfigNode,
-};
-
-// ─── Track X Position Map (default horizontal placement) ───
-export const TRACK_X_MAP: Record<string, number> = {
-    'ai:dialogue': 100, 'ui:state': 450, 'mcp:execute': 800,
-    'core:subflow': 1100, 'core:entry': 300, 'core:return': 300,
-    'ui:render': 1400, 'render': 1400, 'event:trigger': -200,
-    'logic:condition': 600, 'state:set': 1000, 'set': 1000,
-    'morph': 1400, 'ui:morph': 1400,
-    'shell:registerButton': 1700, 'shell:registerTab': 1700, 'shell:registerPanel': 1700,
-    'shell:registerSidebar': 1700, 'shell:registerStatusBar': 1700, 'shell:registerTopBar': 1700,
-    'shell:registerAction': 1700, 'shell:toggleSidebar': 2000, 'shell:togglePanel': 2000,
-    'shell:splitPane': 2000, 'shell:focusTab': 2000, 'shell:closeTab': 2000,
-    'shell:setTheme': 2300, 'shell:applyPalette': 2300, 'shell:updateToken': 2300,
-    'shell:notification': 2600, 'shell:modal': 2600, 'shell:execCommand': 2600,
-    'shell:shortcut': 2600, 'shell:emitEvent': 2600, 'shell:config': 2900,
-};
-
-// ─── Node Type ↔ Track mapping (for pasting/copy) ───
-export const NODE_TYPE_TO_TRACK: Record<string, string> = {
-    'dialogue': 'dialogue', 'ai:dialogue': 'dialogue',
-    'logic': 'logic', 'mcp:execute': 'logic',
-    'ui': 'ui', 'ui:state': 'ui',
-    'core:subflow': 'subflow', 'core:entry': 'entry', 'core:return': 'return',
-    'ui:render': 'render', 'render': 'render',
-    'trigger': 'trigger', 'event:trigger': 'trigger',
-    'condition': 'condition', 'logic:condition': 'condition',
-    'set': 'set', 'state:set': 'set',
-};
-
-// ─── Map DecidoNode payload → compatible React Flow data ───
-export function mapNodePayload(decidoNode: any): Record<string, any> {
-    const data = { ...decidoNode.payload };
-    const t = decidoNode.type;
-    if (t === 'core:subflow') data.label = decidoNode.payload.label;
-    if (t === 'ui:render' || t === 'render') {
-        data.label = decidoNode.payload.label || decidoNode.payload.state || 'UI Component';
-        data.state = decidoNode.payload.state || decidoNode.payload.label || 'UI Component';
-        data.uiSchema = decidoNode.payload.uiSchema || decidoNode.payload.schema;
-    }
-    if (t === 'event:trigger') {
-        Object.assign(data, {
-            triggerType: decidoNode.payload.triggerType || 'SYSTEM_START',
-            cronExpression: decidoNode.payload.cronExpression,
-            webhookPath: decidoNode.payload.webhookPath,
-            eventChannel: decidoNode.payload.eventChannel,
-            guardExpression: decidoNode.payload.guardExpression,
-            priority: decidoNode.payload.priority,
-        });
-    }
-    if (t === 'logic:condition') data.conditionExpression = decidoNode.payload.conditionExpression || '';
-    if (t === 'morph' || t === 'ui:morph') {
-        Object.assign(data, {
-            morphType: decidoNode.payload.morphType || 'workbench',
-            morphData: decidoNode.payload.morphData || null,
-            componentId: decidoNode.payload.componentId || '',
-            suspendOnMorph: decidoNode.payload.suspendOnMorph || false,
-        });
-    }
-    if (t.startsWith('shell:')) {
-        Object.keys(decidoNode.payload).forEach(key => {
-            if (key.startsWith('shell')) data[key] = decidoNode.payload[key];
-        });
-    }
-    return data;
-}
-
-// ─── Build default keyframe from track type (for context menu / drag-drop insertion) ───
-export function buildKeyframeDefaults(track: string, label: string, position: { x: number; y: number }, extra?: any): any {
-    const kf: any = { t: Date.now(), track, position, label, state: label };
-    if (track === 'dialogue') { kf.speech = 'Nuevo diálogo...'; kf.actorId = 'assistant'; }
-    else if (track === 'render' && extra?.uiSchema) { kf.uiSchema = extra.uiSchema; kf.autoComplete = false; }
-    else if (track === 'subflow') kf.targetBlueprintId = '';
-    else if (track === 'morph') kf.morphType = 'workbench';
-    else if (track === 'set') { kf.target = ''; kf.value = ''; }
-    else if (track === 'condition') kf.conditionExpression = 'true';
-    if (track.startsWith('shell:')) { kf.track = 'shell'; kf.shellAction = extra?.shellAction || track.replace('shell:', ''); }
-    return kf;
-}

package/src/components/studio/editor/paletteCatalog.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import {
-    MessageCircle, Cpu, Monitor, Image, Network, LogIn, LogOut,
-    Zap, Layout, GitBranch, PenSquare, Terminal, PanelBottom,
-    Sidebar, Minus, ArrowUpFromDot, FileText, Columns2, Focus, X,
-    Palette, Paintbrush, Pipette, Bell, SquareStack, Play, Keyboard, Radio, Settings2, PanelLeft
-} from 'lucide-react';
-
-// ─── Palette types ───
-export interface PaletteItem {
-    type: string;
-    label: string;
-    icon: React.ReactNode;
-    color: string;
-    description?: string;
-    meta?: Record<string, any>;
-}
-
-export interface PaletteCategory {
-    id: string;
-    label: string;
-    icon: React.ReactNode;
-    items: PaletteItem[];
-}
-
-export const DRAG_DATA_KEY = 'application/decido-node';
-
-// ─── Static palette categories ───
-export const STATIC_CATEGORIES: PaletteCategory[] = [
-    { id: 'dialogue', label: 'Diálogo', icon: <MessageCircle size={14} />, items: [
-        { type: 'dialogue', label: 'Dialogue', icon: <MessageCircle size={16} />, color: 'border-blue-500/40', description: 'Nodo de diálogo AI' },
-    ]},
-    { id: 'logic', label: 'Lógica / MCP', icon: <Cpu size={14} />, items: [
-        { type: 'logic', label: 'Logic Gate', icon: <Cpu size={16} />, color: 'border-amber-500/40', description: 'Evaluación condicional' },
-    ]},
-    { id: 'ui', label: 'Estado UI', icon: <Monitor size={14} />, items: [
-        { type: 'ui', label: 'State Change', icon: <Monitor size={16} />, color: 'border-purple-500/40', description: 'Cambio de estado visual' },
-    ]},
-    { id: 'hsm', label: 'HSM / Subflujos', icon: <Network size={14} />, items: [
-        { type: 'core:subflow', label: 'Subflow', icon: <Network size={16} />, color: 'border-violet-500/40', description: 'Subflujo jerárquico' },
-        { type: 'core:entry', label: 'Entry', icon: <LogIn size={16} />, color: 'border-emerald-500/40', description: 'Punto de entrada' },
-        { type: 'core:return', label: 'Return', icon: <LogOut size={16} />, color: 'border-rose-500/40', description: 'Punto de retorno' },
-    ]},
-    { id: 'triggers', label: 'Triggers / Branching', icon: <Zap size={14} />, items: [
-        { type: 'trigger', label: 'Event Trigger', icon: <Zap size={16} />, color: 'border-yellow-500/40', description: 'Disparador de evento' },
-        { type: 'condition', label: 'Condición', icon: <GitBranch size={16} />, color: 'border-amber-500/40', description: 'Bifurcación condicional' },
-        { type: 'set', label: 'Set Variable', icon: <PenSquare size={16} />, color: 'border-violet-500/40', description: 'Escribir variable (UserState o sesión)' },
-    ]},
-    { id: 'morphology', label: 'Morfología', icon: <Layout size={14} />, items: [
-        { type: 'morph', label: 'Morph Stage', icon: <Monitor size={16} />, color: 'border-purple-500/40', description: 'Controlar área de renderizado' },
-    ]},
-    // Shell Control
-    { id: 'shell-register', label: '🖥️ Shell: Registro', icon: <Terminal size={14} />, items: [
-        { type: 'shell:registerButton', label: 'Activity Bar', icon: <PanelLeft size={16} />, color: 'border-teal-500/40', description: 'Registrar botón en Activity Bar', meta: { shellAction: 'registerActivityBarItem' } },
-        { type: 'shell:registerTab', label: 'Open Tab', icon: <FileText size={16} />, color: 'border-cyan-500/40', description: 'Abrir tab en el editor', meta: { shellAction: 'openTab' } },
-        { type: 'shell:registerPanel', label: 'Panel View', icon: <PanelBottom size={16} />, color: 'border-indigo-500/40', description: 'Registrar vista en panel inferior', meta: { shellAction: 'registerPanelView' } },
-        { type: 'shell:registerSidebar', label: 'Sidebar View', icon: <Sidebar size={16} />, color: 'border-sky-500/40', description: 'Registrar vista en sidebar', meta: { shellAction: 'registerSidebarView' } },
-        { type: 'shell:registerStatusBar', label: 'Status Bar', icon: <Minus size={16} />, color: 'border-emerald-500/40', description: 'Añadir item al status bar', meta: { shellAction: 'registerStatusBarItem' } },
-        { type: 'shell:registerTopBar', label: 'Top Bar', icon: <ArrowUpFromDot size={16} />, color: 'border-violet-500/40', description: 'Añadir botón al top bar', meta: { shellAction: 'registerTopBarItem' } },
-        { type: 'shell:registerAction', label: 'Register Cmd', icon: <Terminal size={16} />, color: 'border-amber-500/40', description: 'Registrar un comando', meta: { shellAction: 'registerCommand' } },
-    ]},
-    { id: 'shell-layout', label: '🖥️ Shell: Layout', icon: <Columns2 size={14} />, items: [
-        { type: 'shell:toggleSidebar', label: 'Toggle Sidebar', icon: <PanelLeft size={16} />, color: 'border-sky-500/40', description: 'Mostrar/ocultar sidebar', meta: { shellAction: 'toggleSidebar' } },
-        { type: 'shell:togglePanel', label: 'Toggle Panel', icon: <PanelBottom size={16} />, color: 'border-indigo-500/40', description: 'Mostrar/ocultar panel', meta: { shellAction: 'togglePanel' } },
-        { type: 'shell:splitPane', label: 'Split Pane', icon: <Columns2 size={16} />, color: 'border-violet-500/40', description: 'Dividir editor', meta: { shellAction: 'splitPane' } },
-        { type: 'shell:focusTab', label: 'Focus Tab', icon: <Focus size={16} />, color: 'border-cyan-500/40', description: 'Enfocar un tab', meta: { shellAction: 'focusTab' } },
-        { type: 'shell:closeTab', label: 'Close Tab', icon: <X size={16} />, color: 'border-rose-500/40', description: 'Cerrar un tab', meta: { shellAction: 'closeTab' } },
-    ]},
-    { id: 'shell-theme', label: '🖥️ Shell: Tema', icon: <Palette size={14} />, items: [
-        { type: 'shell:setTheme', label: 'Set Theme', icon: <Palette size={16} />, color: 'border-amber-500/40', description: 'Cambiar dark/light', meta: { shellAction: 'setTheme' } },
-        { type: 'shell:applyPalette', label: 'Apply Palette', icon: <Paintbrush size={16} />, color: 'border-pink-500/40', description: 'Aplicar paleta de colores', meta: { shellAction: 'applyPalette' } },
-        { type: 'shell:updateToken', label: 'CSS Token', icon: <Pipette size={16} />, color: 'border-orange-500/40', description: 'Modificar token CSS', meta: { shellAction: 'updateToken' } },
-    ]},
-    { id: 'shell-interaction', label: '🖥️ Shell: Interacción', icon: <Bell size={14} />, items: [
-        { type: 'shell:notification', label: 'Notification', icon: <Bell size={16} />, color: 'border-emerald-500/40', description: 'Mostrar toast', meta: { shellAction: 'showNotification' } },
-        { type: 'shell:modal', label: 'Show Modal', icon: <SquareStack size={16} />, color: 'border-violet-500/40', description: 'Abrir modal', meta: { shellAction: 'showModal' } },
-        { type: 'shell:execCommand', label: 'Exec Command', icon: <Play size={16} />, color: 'border-teal-500/40', description: 'Ejecutar comando', meta: { shellAction: 'executeCommand' } },
-        { type: 'shell:shortcut', label: 'Shortcut', icon: <Keyboard size={16} />, color: 'border-amber-500/40', description: 'Registrar atajo', meta: { shellAction: 'registerShortcut' } },
-        { type: 'shell:emitEvent', label: 'Emit Event', icon: <Radio size={16} />, color: 'border-rose-500/40', description: 'Emitir evento', meta: { shellAction: 'emitEvent' } },
-    ]},
-    { id: 'shell-config', label: '🖥️ Shell: Config', icon: <Settings2 size={14} />, items: [
-        { type: 'shell:config', label: 'Shell Config', icon: <Settings2 size={16} />, color: 'border-teal-500/40', description: 'Configuración completa del shell', meta: { shellAction: 'shellConfig' } },
-    ]},
-];