@decido/shell 1.0.0 → 4.0.1

package/src/components/studio/nodes/shell/InteractionNodes.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import { NodeProps } from '@xyflow/react';
-import { Bell, SquareStack, Play, Keyboard, Radio } from 'lucide-react';
-import { ShellNodeBase, ShellField } from './ShellNodeBase';
-import { useTimelineStore } from '@decido/engine';
-import { usePlaygroundStore } from '../../../../store/usePlaygroundStore';
-
-// ─── Show Notification ───
-export const ShowNotificationNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Notification" icon={<Bell size={14} />} accentColor="emerald" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Tipo" value={(data.shellNotifType as string) || 'info'} onChange={v => u('shellNotifType', v)} type="select"
-                options={[
-                    { value: 'info', label: 'ℹ️ Info' }, { value: 'success', label: '✅ Success' },
-                    { value: 'warning', label: '⚠️ Warning' }, { value: 'error', label: '❌ Error' }
-                ]} />
-            <ShellField label="Título" value={(data.shellNotifTitle as string) || ''} onChange={v => u('shellNotifTitle', v)} placeholder="Operación exitosa" />
-            <ShellField label="Mensaje" value={(data.shellNotifMessage as string) || ''} onChange={v => u('shellNotifMessage', v)} placeholder="Los cambios se guardaron" />
-        </ShellNodeBase>
-    );
-};
-
-// ─── Show Modal ───
-export const ShowModalNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Show Modal" icon={<SquareStack size={14} />} accentColor="violet" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Título" value={(data.shellModalTitle as string) || ''} onChange={v => u('shellModalTitle', v)} placeholder="Confirmación" />
-            <ShellField label="Contenido HTML" value={(data.shellModalContent as string) || ''} onChange={v => u('shellModalContent', v)} placeholder="<p>¿Estás seguro?</p>" />
-        </ShellNodeBase>
-    );
-};
-
-// ─── Execute Command ───
-export const ExecuteCommandNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Exec Command" icon={<Play size={14} />} accentColor="teal" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Command ID" value={(data.shellCommandId as string) || ''} onChange={v => u('shellCommandId', v)} placeholder="palette.toggle" />
-            <ShellField label="Argumento (JSON)" value={(data.shellCommandArg as string) || ''} onChange={v => u('shellCommandArg', v)} placeholder='{"key": "value"}' />
-        </ShellNodeBase>
-    );
-};
-
-// ─── Register Shortcut ───
-export const RegisterShortcutNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Shortcut" icon={<Keyboard size={14} />} accentColor="amber" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Keys" value={(data.shellKeys as string) || ''} onChange={v => u('shellKeys', v)} placeholder="Control+Shift+P" />
-            <ShellField label="Command ID" value={(data.shellCommandId as string) || ''} onChange={v => u('shellCommandId', v)} placeholder="palette.toggle" />
-            <ShellField label="Descripción" value={(data.shellShortcutDesc as string) || ''} onChange={v => u('shellShortcutDesc', v)} placeholder="Abrir paleta" />
-        </ShellNodeBase>
-    );
-};
-
-// ─── Emit Event ───
-export const EmitEventNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Emit Event" icon={<Radio size={14} />} accentColor="rose" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Evento" value={(data.shellEventName as string) || ''} onChange={v => u('shellEventName', v)} placeholder="app:customEvent" />
-            <ShellField label="Data (JSON)" value={(data.shellEventData as string) || ''} onChange={v => u('shellEventData', v)} placeholder='{"msg": "hello"}' />
-        </ShellNodeBase>
-    );
-};

package/src/components/studio/nodes/shell/LayoutControlNodes.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { NodeProps } from '@xyflow/react';
-import { PanelLeftClose, PanelBottomClose, Columns2, Focus, X } from 'lucide-react';
-import { ShellNodeBase, ShellField } from './ShellNodeBase';
-import { useTimelineStore } from '@decido/engine';
-import { usePlaygroundStore } from '../../../../store/usePlaygroundStore';
-
-// ─── Toggle Sidebar ───
-export const ToggleSidebarNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Toggle Sidebar" icon={<PanelLeftClose size={14} />} accentColor="sky" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Estado" value={(data.shellVisible as string) || 'toggle'} onChange={v => u('shellVisible', v)} type="select"
-                options={[{ value: 'toggle', label: '↔ Toggle' }, { value: 'true', label: '👁 Mostrar' }, { value: 'false', label: '🚫 Ocultar' }]} />
-        </ShellNodeBase>
-    );
-};
-
-// ─── Toggle Panel ───
-export const TogglePanelNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Toggle Panel" icon={<PanelBottomClose size={14} />} accentColor="indigo" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Estado" value={(data.shellVisible as string) || 'toggle'} onChange={v => u('shellVisible', v)} type="select"
-                options={[{ value: 'toggle', label: '↔ Toggle' }, { value: 'true', label: '👁 Mostrar' }, { value: 'false', label: '🚫 Ocultar' }]} />
-        </ShellNodeBase>
-    );
-};
-
-// ─── Split Pane ───
-export const SplitPaneNode: React.FC<NodeProps> = ({ id, data }) => (
-    <ShellNodeBase id={id} label="Split Pane" icon={<Columns2 size={14} />} accentColor="violet" isExecuting={data.isExecuting as boolean}>
-        <div className="text-[10px] text-text-muted italic">Divide el editor en un nuevo panel</div>
-    </ShellNodeBase>
-);
-
-// ─── Focus Tab ───
-export const FocusTabNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Focus Tab" icon={<Focus size={14} />} accentColor="cyan" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Pane ID" value={(data.shellPaneId as string) || ''} onChange={v => u('shellPaneId', v)} placeholder="pane-main" />
-            <ShellField label="Tab ID" value={(data.shellTabId as string) || ''} onChange={v => u('shellTabId', v)} placeholder="settings-tab" />
-        </ShellNodeBase>
-    );
-};
-
-// ─── Close Tab ───
-export const CloseTabNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Close Tab" icon={<X size={14} />} accentColor="rose" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Pane ID" value={(data.shellPaneId as string) || ''} onChange={v => u('shellPaneId', v)} placeholder="pane-main" />
-            <ShellField label="Tab ID" value={(data.shellTabId as string) || ''} onChange={v => u('shellTabId', v)} placeholder="settings-tab" />
-        </ShellNodeBase>
-    );
-};

package/src/components/studio/nodes/shell/RegisterActionNode.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { NodeProps } from '@xyflow/react';
-import { Terminal } from 'lucide-react';
-import { ShellNodeBase, ShellField } from './ShellNodeBase';
-import { useTimelineStore } from '@decido/engine';
-import { usePlaygroundStore } from '../../../../store/usePlaygroundStore';
-
-export const RegisterActionNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Register Cmd" icon={<Terminal size={14} />} accentColor="amber" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Command ID" value={(data.shellCommandId as string) || ''} onChange={v => u('shellCommandId', v)} placeholder="myModule.doSomething" />
-            <ShellField label="Título" value={(data.shellTitle as string) || ''} onChange={v => u('shellTitle', v)} placeholder="Hacer algo" />
-            <ShellField label="Categoría" value={(data.shellCategory as string) || ''} onChange={v => u('shellCategory', v)} placeholder="General" />
-        </ShellNodeBase>
-    );
-};

package/src/components/studio/nodes/shell/RegisterButtonNode.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { NodeProps } from '@xyflow/react';
-import { PanelLeft } from 'lucide-react';
-import { ShellNodeBase, ShellField } from './ShellNodeBase';
-import { useTimelineStore } from '@decido/engine';
-import { usePlaygroundStore } from '../../../../store/usePlaygroundStore';
-
-export const RegisterButtonNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Activity Bar" icon={<PanelLeft size={14} />} accentColor="teal" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="ID" value={(data.shellItemId as string) || ''} onChange={v => u('shellItemId', v)} placeholder="btn-explorer" />
-            <ShellField label="Título" value={(data.shellTitle as string) || ''} onChange={v => u('shellTitle', v)} placeholder="Explorador" />
-            <ShellField label="Ícono" value={(data.shellIcon as string) || ''} onChange={v => u('shellIcon', v)} placeholder="fas fa-folder" />
-            <ShellField label="View ID" value={(data.shellViewId as string) || ''} onChange={v => u('shellViewId', v)} placeholder="explorer-view" />
-            <ShellField label="Orden" value={String((data.shellOrder as number) || 0)} onChange={v => u('shellOrder', parseInt(v) || 0)} type="number" />
-        </ShellNodeBase>
-    );
-};

package/src/components/studio/nodes/shell/RegisterPanelNode.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { NodeProps } from '@xyflow/react';
-import { PanelBottom } from 'lucide-react';
-import { ShellNodeBase, ShellField } from './ShellNodeBase';
-import { useTimelineStore } from '@decido/engine';
-import { usePlaygroundStore } from '../../../../store/usePlaygroundStore';
-
-export const RegisterPanelNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Panel View" icon={<PanelBottom size={14} />} accentColor="indigo" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Panel ID" value={(data.shellPanelId as string) || ''} onChange={v => u('shellPanelId', v)} placeholder="output-panel" />
-            <ShellField label="Título" value={(data.shellPanelTitle as string) || ''} onChange={v => u('shellPanelTitle', v)} placeholder="Output" />
-        </ShellNodeBase>
-    );
-};

package/src/components/studio/nodes/shell/RegisterSidebarNode.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { NodeProps } from '@xyflow/react';
-import { Sidebar } from 'lucide-react';
-import { ShellNodeBase, ShellField } from './ShellNodeBase';
-import { useTimelineStore } from '@decido/engine';
-import { usePlaygroundStore } from '../../../../store/usePlaygroundStore';
-
-export const RegisterSidebarNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Sidebar View" icon={<Sidebar size={14} />} accentColor="sky" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="View ID" value={(data.shellSidebarId as string) || ''} onChange={v => u('shellSidebarId', v)} placeholder="file-explorer" />
-            <ShellField label="Título" value={(data.shellSidebarTitle as string) || ''} onChange={v => u('shellSidebarTitle', v)} placeholder="Archivos" />
-        </ShellNodeBase>
-    );
-};

package/src/components/studio/nodes/shell/RegisterStatusBarNode.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { NodeProps } from '@xyflow/react';
-import { Minus } from 'lucide-react';
-import { ShellNodeBase, ShellField } from './ShellNodeBase';
-import { useTimelineStore } from '@decido/engine';
-import { usePlaygroundStore } from '../../../../store/usePlaygroundStore';
-
-export const RegisterStatusBarNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Status Bar" icon={<Minus size={14} />} accentColor="emerald" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Item ID" value={(data.shellStatusId as string) || ''} onChange={v => u('shellStatusId', v)} placeholder="git-branch" />
-            <ShellField label="Texto" value={(data.shellStatusText as string) || ''} onChange={v => u('shellStatusText', v)} placeholder="main ✓" />
-            <ShellField label="Alineación" value={(data.shellStatusAlign as string) || 'left'} onChange={v => u('shellStatusAlign', v)} type="select"
-                options={[{ value: 'left', label: '← Izquierda' }, { value: 'right', label: '→ Derecha' }]} />
-            <ShellField label="Orden" value={String((data.shellOrder as number) || 0)} onChange={v => u('shellOrder', parseInt(v) || 0)} type="number" />
-        </ShellNodeBase>
-    );
-};

package/src/components/studio/nodes/shell/RegisterTabNode.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { NodeProps } from '@xyflow/react';
-import { FileText } from 'lucide-react';
-import { ShellNodeBase, ShellField } from './ShellNodeBase';
-import { useTimelineStore } from '@decido/engine';
-import { usePlaygroundStore } from '../../../../store/usePlaygroundStore';
-
-export const RegisterTabNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Open Tab" icon={<FileText size={14} />} accentColor="cyan" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Tab ID" value={(data.shellTabId as string) || ''} onChange={v => u('shellTabId', v)} placeholder="settings-tab" />
-            <ShellField label="Título" value={(data.shellTabTitle as string) || ''} onChange={v => u('shellTabTitle', v)} placeholder="Configuración" />
-            <ShellField label="Componente" value={(data.shellTabComponent as string) || ''} onChange={v => u('shellTabComponent', v)} placeholder="settings-view" />
-            <ShellField label="Ícono" value={(data.shellIcon as string) || ''} onChange={v => u('shellIcon', v)} placeholder="fas fa-cog" />
-        </ShellNodeBase>
-    );
-};

package/src/components/studio/nodes/shell/RegisterTopBarNode.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { NodeProps } from '@xyflow/react';
-import { ArrowUpFromDot } from 'lucide-react';
-import { ShellNodeBase, ShellField } from './ShellNodeBase';
-import { useTimelineStore } from '@decido/engine';
-import { usePlaygroundStore } from '../../../../store/usePlaygroundStore';
-
-export const RegisterTopBarNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Top Bar" icon={<ArrowUpFromDot size={14} />} accentColor="violet" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Item ID" value={(data.shellTopBarId as string) || ''} onChange={v => u('shellTopBarId', v)} placeholder="toggle-sidebar" />
-            <ShellField label="Título" value={(data.shellTitle as string) || ''} onChange={v => u('shellTitle', v)} placeholder="Panel Izquierdo" />
-            <ShellField label="Ícono" value={(data.shellIcon as string) || ''} onChange={v => u('shellIcon', v)} placeholder="fas fa-bars" />
-            <ShellField label="Command ID" value={(data.shellCommandId as string) || ''} onChange={v => u('shellCommandId', v)} placeholder="layout.toggleSidebar" />
-            <ShellField label="Orden" value={String((data.shellOrder as number) || 0)} onChange={v => u('shellOrder', parseInt(v) || 0)} type="number" />
-        </ShellNodeBase>
-    );
-};

package/src/components/studio/nodes/shell/ShellConfigNode.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import { NodeProps } from '@xyflow/react';
-import { Settings2 } from 'lucide-react';
-import { ShellNodeBase, ShellField } from './ShellNodeBase';
-import { useTimelineStore } from '@decido/engine';
-import { usePlaygroundStore } from '../../../../store/usePlaygroundStore';
-
-/**
- * ShellConfig — Composite node that applies a complete shell configuration
- * in a single operation: theme, palette, layout visibility, and registrations.
- */
-export const ShellConfigNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Shell Config" icon={<Settings2 size={14} />} accentColor="teal" isExecuting={data.isExecuting as boolean}>
-            {/* Theme */}
-            <ShellField label="Tema" value={(data.shellTheme as string) || ''} onChange={v => u('shellTheme', v)} type="select"
-                options={[{ value: '', label: '— Sin cambio —' }, { value: 'dark', label: '🌙 Dark' }, { value: 'light', label: '☀️ Light' }]} />
-            
-            {/* Palette */}
-            <ShellField label="Primary" value={(data.shellPrimary as string) || ''} onChange={v => u('shellPrimary', v)} placeholder="#6366f1" />
-            <ShellField label="Accent" value={(data.shellAccent as string) || ''} onChange={v => u('shellAccent', v)} placeholder="#f59e0b" />
-            
-            {/* Layout */}
-            <ShellField label="Sidebar" value={(data.shellSidebarState as string) || ''} onChange={v => u('shellSidebarState', v)} type="select"
-                options={[{ value: '', label: '— Sin cambio —' }, { value: 'true', label: '👁 Visible' }, { value: 'false', label: '🚫 Oculto' }]} />
-            <ShellField label="Panel" value={(data.shellPanelState as string) || ''} onChange={v => u('shellPanelState', v)} type="select"
-                options={[{ value: '', label: '— Sin cambio —' }, { value: 'true', label: '👁 Visible' }, { value: 'false', label: '🚫 Oculto' }]} />
-
-            {/* Config JSON (advanced overrides) */}
-            <div className="flex flex-col gap-1">
-                <label className="text-[10px] uppercase tracking-wider text-text-muted">Config Extra (JSON)</label>
-                <textarea
-                    value={(data.shellConfigJson as string) || ''}
-                    onChange={(e) => u('shellConfigJson', e.target.value)}
-                    className="bg-surface-tertiary/50 border border-border-subtle rounded-lg px-2 py-1.5 text-xs text-text-primary w-full focus:outline-hidden focus:border-teal-500/50 transition-colors font-mono resize-y min-h-[40px]"
-                    placeholder='{"shortcuts": [{"id": "s1", "keys": "Ctrl+K", "commandId": "palette.toggle"}]}'
-                    rows={2}
-                />
-            </div>
-
-            <div className="flex items-center gap-2 pt-1 border-t border-border-subtle">
-                <Settings2 size={12} className="text-teal-400" />
-                <span className="text-[10px] font-mono text-teal-400">Full Shell Configuration</span>
-            </div>
-        </ShellNodeBase>
-    );
-};

package/src/components/studio/nodes/shell/ShellNodeBase.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import { Handle, Position, NodeProps } from '@xyflow/react';
-import { GripVertical } from 'lucide-react';
-
-/**
- * Base wrapper for all shell-control nodes.
- * Provides consistent styling, header, drag handle, and connection handles.
- */
-export interface ShellNodeBaseProps {
-    id: string;
-    label: string;
-    icon: React.ReactNode;
-    accentColor: string;  // e.g. 'teal'
-    isExecuting?: boolean;
-    children: React.ReactNode;
-    /** Extra source handles beyond the default 'success' */
-    extraHandles?: { id: string; position: Position; className: string }[];
-}
-
-const COLOR_MAP: Record<string, { border: string; bg: string; text: string; ring: string; glow: string }> = {
-    teal:   { border: 'border-teal-500/30', bg: 'from-teal-500/15 to-cyan-500/10', text: 'text-teal-400', ring: 'ring-teal-400', glow: 'rgba(20,184,166,0.6)' },
-    cyan:   { border: 'border-cyan-500/30', bg: 'from-cyan-500/15 to-sky-500/10', text: 'text-cyan-400', ring: 'ring-cyan-400', glow: 'rgba(6,182,212,0.6)' },
-    sky:    { border: 'border-sky-500/30', bg: 'from-sky-500/15 to-blue-500/10', text: 'text-sky-400', ring: 'ring-sky-400', glow: 'rgba(14,165,233,0.6)' },
-    indigo: { border: 'border-indigo-500/30', bg: 'from-indigo-500/15 to-violet-500/10', text: 'text-indigo-400', ring: 'ring-indigo-400', glow: 'rgba(99,102,241,0.6)' },
-    rose:   { border: 'border-rose-500/30', bg: 'from-rose-500/15 to-pink-500/10', text: 'text-rose-400', ring: 'ring-rose-400', glow: 'rgba(244,63,94,0.6)' },
-    amber:  { border: 'border-amber-500/30', bg: 'from-amber-500/15 to-orange-500/10', text: 'text-amber-400', ring: 'ring-amber-400', glow: 'rgba(245,158,11,0.6)' },
-    emerald:{ border: 'border-emerald-500/30', bg: 'from-emerald-500/15 to-green-500/10', text: 'text-emerald-400', ring: 'ring-emerald-400', glow: 'rgba(16,185,129,0.6)' },
-    violet: { border: 'border-violet-500/30', bg: 'from-violet-500/15 to-purple-500/10', text: 'text-violet-400', ring: 'ring-violet-400', glow: 'rgba(139,92,246,0.6)' },
-    pink:   { border: 'border-pink-500/30', bg: 'from-pink-500/15 to-rose-500/10', text: 'text-pink-400', ring: 'ring-pink-400', glow: 'rgba(236,72,153,0.6)' },
-    orange: { border: 'border-orange-500/30', bg: 'from-orange-500/15 to-amber-500/10', text: 'text-orange-400', ring: 'ring-orange-400', glow: 'rgba(249,115,22,0.6)' },
-};
-
-export const ShellNodeBase: React.FC<ShellNodeBaseProps> = ({ label, icon, accentColor, isExecuting, children, extraHandles }) => {
-    const c = COLOR_MAP[accentColor] || COLOR_MAP.teal;
-    const executionStyle = isExecuting
-        ? `ring-2 ${c.ring} shadow-[0_0_20px_${c.glow}] scale-105 z-50`
-        : '';
-
-    return (
-        <div className={`bg-surface-tertiary ${c.border} border rounded-xl shadow-2xl w-[240px] overflow-hidden group hover:${c.border.replace('/30', '/60')} transition-all duration-300 ${executionStyle}`}>
-            {/* Header */}
-            <div className={`bg-linear-to-r ${c.bg} px-3 py-2 border-b ${c.border.replace('/30', '/20')} flex items-center justify-between`}>
-                <div className="flex items-center gap-2">
-                    <span className={c.text}>{icon}</span>
-                    <span className={`text-xs font-bold ${c.text} uppercase tracking-widest`}>{label}</span>
-                </div>
-                <div className={`${c.text} opacity-30 cursor-grab active:cursor-grabbing hover:opacity-80 transition-colors custom-drag-handle`}>
-                    <GripVertical size={14} />
-                </div>
-            </div>
-
-            {/* Body */}
-            <div className="p-3 flex flex-col gap-3">
-                {children}
-            </div>
-
-            {/* Handles */}
-            <Handle type="target" position={Position.Top} className={`w-3! h-3! bg-teal-500! border-teal-400/50! -top-1.5!`} />
-            <Handle type="source" id="success" position={Position.Bottom} className={`w-3! h-3! bg-emerald-500! border-emerald-400/50! -bottom-1.5!`} />
-            {extraHandles?.map(h => (
-                <Handle key={h.id} type="source" id={h.id} position={h.position} className={h.className} />
-            ))}
-        </div>
-    );
-};
-
-/**
- * Reusable field input for shell node properties.
- */
-export const ShellField: React.FC<{
-    label: string;
-    value: string;
-    onChange: (val: string) => void;
-    placeholder?: string;
-    type?: 'text' | 'select' | 'number';
-    options?: { value: string; label: string }[];
-}> = ({ label, value, onChange, placeholder, type = 'text', options }) => (
-    <div className="flex flex-col gap-1">
-        <label className="text-[10px] uppercase tracking-wider text-text-muted">{label}</label>
-        {type === 'select' && options ? (
-            <select
-                value={value}
-                onChange={(e) => onChange(e.target.value)}
-                className="bg-surface-tertiary/50 border border-border-subtle rounded-lg px-2 py-1.5 text-xs text-text-primary w-full focus:outline-hidden focus:border-teal-500/50 transition-colors appearance-none cursor-pointer"
-            >
-                {options.map(o => (
-                    <option key={o.value} value={o.value}>{o.label}</option>
-                ))}
-            </select>
-        ) : (
-            <input
-                type={type}
-                value={value}
-                onChange={(e) => onChange(e.target.value)}
-                className="bg-surface-tertiary/50 border border-border-subtle rounded-lg px-2 py-1.5 text-xs text-text-primary w-full focus:outline-hidden focus:border-teal-500/50 transition-colors font-mono"
-                placeholder={placeholder}
-            />
-        )}
-    </div>
-);

package/src/components/studio/nodes/shell/ThemeNodes.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import { NodeProps } from '@xyflow/react';
-import { Palette, Paintbrush, Pipette } from 'lucide-react';
-import { ShellNodeBase, ShellField } from './ShellNodeBase';
-import { useTimelineStore } from '@decido/engine';
-import { usePlaygroundStore } from '../../../../store/usePlaygroundStore';
-
-// ─── Set Theme ───
-export const SetThemeNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Set Theme" icon={<Palette size={14} />} accentColor="amber" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Tema" value={(data.shellTheme as string) || 'dark'} onChange={v => u('shellTheme', v)} type="select"
-                options={[{ value: 'dark', label: '🌙 Dark' }, { value: 'light', label: '☀️ Light' }]} />
-        </ShellNodeBase>
-    );
-};
-
-// ─── Apply Palette ───
-export const ApplyPaletteNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="Apply Palette" icon={<Paintbrush size={14} />} accentColor="pink" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Primary" value={(data.shellPrimary as string) || ''} onChange={v => u('shellPrimary', v)} placeholder="#6366f1" />
-            <ShellField label="Secondary" value={(data.shellSecondary as string) || ''} onChange={v => u('shellSecondary', v)} placeholder="#8b5cf6" />
-            <ShellField label="Accent" value={(data.shellAccent as string) || ''} onChange={v => u('shellAccent', v)} placeholder="#f59e0b" />
-            <ShellField label="BG Main" value={(data.shellBgMain as string) || ''} onChange={v => u('shellBgMain', v)} placeholder="#070720" />
-            <ShellField label="BG Content" value={(data.shellBgContent as string) || ''} onChange={v => u('shellBgContent', v)} placeholder="#0F0F23" />
-        </ShellNodeBase>
-    );
-};
-
-// ─── Update Token ───
-export const UpdateTokenNode: React.FC<NodeProps> = ({ id, data }) => {
-    const activeTimelineId = usePlaygroundStore(s => s.prototypeBrand);
-    const updateKeyframe = useTimelineStore(s => s.updateKeyframe);
-    const u = (field: string, val: any) => updateKeyframe(activeTimelineId, id, { [field]: val } as any);
-
-    return (
-        <ShellNodeBase id={id} label="CSS Token" icon={<Pipette size={14} />} accentColor="orange" isExecuting={data.isExecuting as boolean}>
-            <ShellField label="Token" value={(data.shellToken as string) || ''} onChange={v => u('shellToken', v)} placeholder="--color-primary" />
-            <ShellField label="Valor" value={(data.shellTokenValue as string) || ''} onChange={v => u('shellTokenValue', v)} placeholder="#6366f1" />
-        </ShellNodeBase>
-    );
-};

package/src/components/studio/nodes/shell/index.ts

@@ -1,12 +0,0 @@
-// Shell Control Nodes — Barrel Export
-export { RegisterButtonNode } from './RegisterButtonNode';
-export { RegisterTabNode } from './RegisterTabNode';
-export { RegisterPanelNode } from './RegisterPanelNode';
-export { RegisterSidebarNode } from './RegisterSidebarNode';
-export { RegisterStatusBarNode } from './RegisterStatusBarNode';
-export { RegisterTopBarNode } from './RegisterTopBarNode';
-export { RegisterActionNode } from './RegisterActionNode';
-export { ToggleSidebarNode, TogglePanelNode, SplitPaneNode, FocusTabNode, CloseTabNode } from './LayoutControlNodes';
-export { SetThemeNode, ApplyPaletteNode, UpdateTokenNode } from './ThemeNodes';
-export { ShowNotificationNode, ShowModalNode, ExecuteCommandNode, RegisterShortcutNode, EmitEventNode } from './InteractionNodes';
-export { ShellConfigNode } from './ShellConfigNode';

package/src/components/widgets/BroadcastWidget.tsx

@@ -1,93 +0,0 @@
-import { useState } from 'react';
-import { Send, Megaphone } from 'lucide-react';
-
-
-export const BroadcastWidget = () => {
-    const [message, setMessage] = useState('');
-    const [type, setType] = useState('INFO');
-    const [action, setAction] = useState('NONE');
-    const [loading, setLoading] = useState(false);
-
-    const handleSend = async () => {
-        if (!message) return;
-        setLoading(true);
-        try {
-            const baseUrl = (import.meta as any).env?.VITE_API_URL || 'http://localhost:3001/api';
-            await fetch(`${baseUrl}/admin/broadcast`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    message,
-                    type,
-                    action: action === 'NONE' ? undefined : action
-                })
-            });
-            alert('Broadcast Sent!');
-            setMessage('');
-        } catch (e) {
-            console.error(e);
-            alert('Error sending broadcast');
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    return (
-        <div className="bg-surface-tertiary rounded-xl border border-border-default p-6 shadow-lg">
-            <h3 className="text-lg font-bold text-text-primary mb-4 flex items-center gap-2">
-                <Megaphone size={20} className="text-purple-400" /> Broadcast Center
-            </h3>
-
-            <div className="space-y-4">
-                <div>
-                    <label className="block text-xs font-bold text-text-secondary mb-1">Message</label>
-                    <input
-                        type="text"
-                        value={message}
-                        onChange={(e) => setMessage(e.target.value)}
-                        placeholder="e.g. System maintenance in 5 minutes"
-                        className="w-full bg-surface-secondary border border-border-default rounded-lg p-3 text-text-primary focus:border-purple-500 outline-hidden"
-                    />
-                </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                    <div>
-                        <label className="block text-xs font-bold text-text-secondary mb-1">Alert Type</label>
-                        <select
-                            value={type}
-                            onChange={(e) => setType(e.target.value)}
-                            className="w-full bg-surface-secondary border border-border-default rounded-lg p-3 text-text-primary outline-hidden"
-                        >
-                            <option value="INFO">Info (Blue)</option>
-                            <option value="WARNING">Warning (Orange)</option>
-                            <option value="CRITICAL">Critical (Red)</option>
-                            <option value="SUCCESS">Success (Green)</option>
-                        </select>
-                    </div>
-                    <div>
-                        <label className="block text-xs font-bold text-text-secondary mb-1">Forced Action</label>
-                        <select
-                            value={action}
-                            onChange={(e) => setAction(e.target.value)}
-                            className="w-full bg-surface-secondary border border-border-default rounded-lg p-3 text-text-primary outline-hidden"
-                        >
-                            <option value="NONE">None</option>
-                            <option value="RELOAD">Force Reload</option>
-                            <option value="LINK">Open Link</option>
-                        </select>
-                    </div>
-                </div>
-
-                <div className="pt-2">
-                    <button
-                        onClick={handleSend}
-                        disabled={loading || !message}
-                        className="w-full py-3 bg-purple-600 hover:bg-purple-500 disabled:opacity-50 disabled:bg-surface-elevated text-text-primary font-bold rounded-lg transition-colors flex items-center justify-center gap-2"
-                    >
-                        {loading ? 'Sending...' : <><Send size={18} /> Broadcast Now</>}
-                    </button>
-                </div>
-            </div>
-        </div>
-    );
-};