@decido/shell 1.0.0

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

@@ -0,0 +1,133 @@
+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

@@ -0,0 +1,91 @@
+/**
+ * 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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,95 @@
+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

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,84 @@
+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' } },
+    ]},
+];