@decido/shell 1.0.0 → 4.0.2

package/src/bridge/BridgeAgent.ts

@@ -1,443 +0,0 @@
-/**
- * ═══════════════════════════════════════════════════════
- *  BridgeAgent — postMessage controller for external tools
- *  Exposes DOM actions, store inspection, and JS eval
- *  via cross-origin JSON-RPC 2.0 protocol
- * ═══════════════════════════════════════════════════════
- */
-
-// ─── Types ───
-interface BridgeRequest {
-  jsonrpc: '2.0';
-  method: string;
-  params?: any;
-  id?: string | number;
-}
-
-interface StoreEntry {
-  name: string;
-  store: any; // Zustand store with getState/setState
-}
-
-// ─── Global store registry ───
-const storeRegistry: StoreEntry[] = [];
-
-/**
- * Register a Zustand store so the bridge can read/write it
- */
-export function registerStore(name: string, store: any) {
-  // Avoid duplicates
-  if (!storeRegistry.find(s => s.name === name)) {
-    storeRegistry.push({ name, store });
-  }
-  // Also expose on window for compatibility
-  if (typeof window !== 'undefined') {
-    (window as any).__ZUSTAND_STORES__ = (window as any).__ZUSTAND_STORES__ || {};
-    (window as any).__ZUSTAND_STORES__[name] = store;
-  }
-}
-
-/**
- * Initialize the bridge agent. Call once at app boot.
- */
-export function initBridgeAgent() {
-  if (typeof window === 'undefined') return;
-  if ((window as any).__BRIDGE_AGENT__) return; // already initialized
-
-  console.log('[BridgeAgent] Initializing postMessage bridge v1.0...');
-
-  const reply = (source: MessageEventSource | null, id: string | number | undefined, result: any, error?: any) => {
-    if (!id || !source) return;
-    try {
-      (source as Window).postMessage({ jsonrpc: '2.0', id, result, error: error || null }, '*');
-    } catch { /* cross-origin reply failure, silently ignore */ }
-  };
-
-  const notify = (source: MessageEventSource | null, method: string, params: any) => {
-    try {
-      (source as Window).postMessage({ jsonrpc: '2.0', method, params }, '*');
-    } catch { /* ignore */ }
-  };
-
-  // ─── Serialize state safely ───
-  const serializeState = (state: any, depth = 0): any => {
-    if (depth > 4) return '[max depth]';
-    if (state === null || state === undefined) return state;
-    if (typeof state === 'function') return '[Function]';
-    if (typeof state !== 'object') return state;
-    if (Array.isArray(state)) return state.slice(0, 50).map(v => serializeState(v, depth + 1));
-    if (state instanceof Map) return Object.fromEntries(
-      Array.from(state.entries()).slice(0, 50).map(([k, v]) => [String(k), serializeState(v, depth + 1)])
-    );
-    if (state instanceof Set) return Array.from(state).slice(0, 50).map(v => serializeState(v, depth + 1));
-
-    const result: any = {};
-    for (const key of Object.keys(state).slice(0, 100)) {
-      result[key] = serializeState(state[key], depth + 1);
-    }
-    return result;
-  };
-
-  // ─── getCssSelector ───
-  const getCssSelector = (el: Element): string => {
-    if (el.id) return `#${el.id}`;
-    const parts: string[] = [];
-    let current: Element | null = el;
-    while (current && current !== document.body) {
-      let selector = current.tagName.toLowerCase();
-      if (current.id) { parts.unshift(`#${current.id}`); break; }
-      if (current.className && typeof current.className === 'string') {
-        const cls = current.className.trim().split(/\s+/).filter(c => !c.includes('/')).slice(0, 2).join('.');
-        if (cls) selector += `.${cls}`;
-      }
-      const parent = current.parentElement;
-      if (parent) {
-        const siblings = Array.from(parent.children).filter(c => c.tagName === current!.tagName);
-        if (siblings.length > 1) {
-          selector += `:nth-of-type(${siblings.indexOf(current) + 1})`;
-        }
-      }
-      parts.unshift(selector);
-      current = current.parentElement;
-    }
-    return parts.join(' > ');
-  };
-
-  // ─── Recorder state ───
-  let isRecording = false;
-  let recorderCleanup: (() => void) | null = null;
-  let recorderSource: MessageEventSource | null = null;
-
-  // ─── Message handler ───
-  const handleMessage = async (event: MessageEvent) => {
-    const data = event.data as BridgeRequest;
-    if (!data || data.jsonrpc !== '2.0' || !data.method) return;
-
-    const { method, params, id } = data;
-    const source = event.source;
-
-    try {
-      switch (method) {
-        // ─── Lifecycle ───
-        case 'PING':
-        case 'HANDSHAKE': {
-          reply(source, id, {
-            success: true,
-            version: '1.0.0',
-            stores: storeRegistry.map(s => s.name),
-            url: window.location.href,
-            title: document.title,
-          });
-          break;
-        }
-
-        // ─── DOM Actions ───
-        case 'CLICK': {
-          const el = document.querySelector(params.selector) as HTMLElement;
-          if (!el) throw new Error(`Element not found: ${params.selector}`);
-          el.click();
-          el.focus?.();
-          reply(source, id, { success: true });
-          break;
-        }
-        case 'DBLCLICK': {
-          const el = document.querySelector(params.selector);
-          if (!el) throw new Error(`Element not found: ${params.selector}`);
-          el.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
-          reply(source, id, { success: true });
-          break;
-        }
-        case 'TYPE': {
-          const el = document.querySelector(params.selector) as HTMLInputElement;
-          if (!el) throw new Error(`Element not found: ${params.selector}`);
-          el.focus();
-          const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set
-            || Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set;
-          if (setter) setter.call(el, params.value || '');
-          else el.value = params.value || '';
-          el.dispatchEvent(new Event('input', { bubbles: true }));
-          el.dispatchEvent(new Event('change', { bubbles: true }));
-          reply(source, id, { success: true });
-          break;
-        }
-        case 'CLEAR': {
-          const el = document.querySelector(params.selector) as HTMLInputElement;
-          if (!el) throw new Error(`Element not found: ${params.selector}`);
-          el.value = '';
-          el.dispatchEvent(new Event('input', { bubbles: true }));
-          reply(source, id, { success: true });
-          break;
-        }
-        case 'SELECT': {
-          const el = document.querySelector(params.selector) as HTMLSelectElement;
-          if (!el) throw new Error(`Element not found: ${params.selector}`);
-          el.value = params.value || '';
-          el.dispatchEvent(new Event('change', { bubbles: true }));
-          reply(source, id, { success: true });
-          break;
-        }
-        case 'HOVER': {
-          const el = document.querySelector(params.selector);
-          if (!el) throw new Error(`Element not found: ${params.selector}`);
-          el.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-          el.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-          reply(source, id, { success: true });
-          break;
-        }
-        case 'FOCUS': {
-          const el = document.querySelector(params.selector) as HTMLElement;
-          if (!el) throw new Error(`Element not found: ${params.selector}`);
-          el.focus();
-          reply(source, id, { success: true });
-          break;
-        }
-        case 'SCROLL': {
-          if (params.selector) {
-            const el = document.querySelector(params.selector);
-            el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-          } else {
-            window.scrollTo({ top: params.y || 0, left: params.x || 0, behavior: 'smooth' });
-          }
-          reply(source, id, { success: true });
-          break;
-        }
-        case 'KEYDOWN':
-        case 'KEYUP':
-        case 'KEYPRESS': {
-          const target = params.selector
-            ? document.querySelector(params.selector)
-            : document.activeElement || document.body;
-          target?.dispatchEvent(new KeyboardEvent(method.toLowerCase(), { key: params.key, bubbles: true }));
-          reply(source, id, { success: true });
-          break;
-        }
-
-        // ─── Navigation ───
-        case 'NAVIGATE': {
-          window.location.href = params.url || params.value || '/';
-          reply(source, id, { success: true });
-          break;
-        }
-        case 'RELOAD': {
-          window.location.reload();
-          reply(source, id, { success: true });
-          break;
-        }
-        case 'BACK': {
-          window.history.back();
-          reply(source, id, { success: true });
-          break;
-        }
-
-        // ─── Wait / Assert ───
-        case 'WAIT_FOR': {
-          const timeout = params.timeout || 5000;
-          const start = Date.now();
-          const poll = () => {
-            if (document.querySelector(params.selector)) {
-              reply(source, id, { success: true });
-            } else if (Date.now() - start > timeout) {
-              reply(source, id, null, { code: 408, message: `Timeout waiting for: ${params.selector}` });
-            } else {
-              setTimeout(poll, 100);
-            }
-          };
-          poll();
-          break;
-        }
-        case 'ASSERT_EXISTS': {
-          const el = document.querySelector(params.selector);
-          if (!el) throw new Error(`Assert failed: ${params.selector} not found`);
-          reply(source, id, { success: true });
-          break;
-        }
-        case 'ASSERT_TEXT': {
-          const el = document.querySelector(params.selector);
-          if (!el) throw new Error(`Assert failed: ${params.selector} not found`);
-          const text = el.textContent?.trim();
-          if (text !== params.expected && text !== params.value) {
-            throw new Error(`Assert failed: expected "${params.expected || params.value}", got "${text}"`);
-          }
-          reply(source, id, { success: true, text });
-          break;
-        }
-        case 'ASSERT_VISIBLE': {
-          const el = document.querySelector(params.selector) as HTMLElement;
-          if (!el) throw new Error(`Assert failed: ${params.selector} not found`);
-          const style = window.getComputedStyle(el);
-          if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
-            throw new Error(`Assert failed: ${params.selector} not visible`);
-          }
-          reply(source, id, { success: true });
-          break;
-        }
-
-        // ─── Store ───
-        case 'STORE_LIST': {
-          const stores = storeRegistry.map(s => {
-            const state = s.store.getState();
-            const methods = Object.keys(state).filter(k => typeof state[k] === 'function');
-            return { name: s.name, keys: Object.keys(state).length, methods: methods.length };
-          });
-          reply(source, id, { success: true, stores });
-          break;
-        }
-        case 'STORE_READ': {
-          const entry = storeRegistry.find(s => s.name === params.store || s.name === params.storeName);
-          if (!entry) throw new Error(`Store not found: ${params.store || params.storeName}`);
-          const state = entry.store.getState();
-          const methods = Object.keys(state).filter(k => typeof state[k] === 'function');
-          let value = state;
-          if (params.path) {
-            value = params.path.split('.').reduce((o: any, k: string) => o?.[k], state);
-          }
-          reply(source, id, {
-            success: true,
-            name: entry.name,
-            state: serializeState(state),
-            methods,
-            value: params.path ? serializeState(value) : undefined,
-          });
-          break;
-        }
-        case 'STORE_WRITE': {
-          const entry = storeRegistry.find(s => s.name === params.store || s.name === params.storeName);
-          if (!entry) throw new Error(`Store not found: ${params.store || params.storeName}`);
-          const path = (params.path || '').split('.').filter(Boolean);
-          if (path.length === 0) throw new Error('Store path required');
-          if (path.length === 1) {
-            entry.store.setState({ [path[0]]: JSON.parse(params.value) });
-          } else {
-            const current = { ...entry.store.getState() };
-            let obj: any = current;
-            for (let i = 0; i < path.length - 1; i++) obj = obj[path[i]];
-            obj[path[path.length - 1]] = JSON.parse(params.value);
-            entry.store.setState(current);
-          }
-          reply(source, id, { success: true });
-          break;
-        }
-
-        // ─── Capture ───
-        case 'GET_HTML': {
-          const el = document.querySelector(params.selector);
-          reply(source, id, { success: true, html: el?.outerHTML || '' });
-          break;
-        }
-        case 'GET_COMPUTED_STYLE': {
-          const el = document.querySelector(params.selector) as Element;
-          if (!el) throw new Error(`Element not found: ${params.selector}`);
-          const style = window.getComputedStyle(el);
-          const value = params.property || params.key ? style.getPropertyValue(params.property || params.key) : undefined;
-          reply(source, id, { success: true, value });
-          break;
-        }
-        case 'GET_INFO': {
-          reply(source, id, {
-            success: true,
-            title: document.title,
-            url: window.location.href,
-            buttons: document.querySelectorAll('button').length,
-            inputs: document.querySelectorAll('input').length,
-            links: document.querySelectorAll('a').length,
-          });
-          break;
-        }
-
-        // ─── JS Eval ───
-        case 'EVAL': {
-          const result = (window as any).eval(params.code);
-          reply(source, id, { success: true, result: serializeState(result) });
-          break;
-        }
-
-        // ─── Recorder ───
-        case 'RECORD_START': {
-          if (isRecording) {
-            reply(source, id, { success: false, error: 'Already recording' });
-            break;
-          }
-          isRecording = true;
-          recorderSource = source;
-
-          const clickHandler = (e: MouseEvent) => {
-            const el = e.target as HTMLElement;
-            if (!el) return;
-            notify(recorderSource, 'bridge.recorded', {
-              type: 'click',
-              selector: getCssSelector(el),
-              tagName: el.tagName,
-              id: el.id,
-              textContent: (el.textContent || '').slice(0, 50),
-              timestamp: Date.now(),
-            });
-          };
-
-          const inputHandler = (e: Event) => {
-            const el = e.target as HTMLInputElement;
-            if (!el || !['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName)) return;
-            notify(recorderSource, 'bridge.recorded', {
-              type: el.tagName === 'SELECT' ? 'select' : 'type',
-              selector: getCssSelector(el),
-              value: el.value,
-              tagName: el.tagName,
-              timestamp: Date.now(),
-            });
-          };
-
-          let scrollTimeout: ReturnType<typeof setTimeout>;
-          const scrollHandler = () => {
-            clearTimeout(scrollTimeout);
-            scrollTimeout = setTimeout(() => {
-              notify(recorderSource, 'bridge.recorded', {
-                type: 'scroll',
-                x: window.scrollX,
-                y: window.scrollY,
-                timestamp: Date.now(),
-              });
-            }, 300);
-          };
-
-          document.addEventListener('click', clickHandler, true);
-          document.addEventListener('input', inputHandler, true);
-          document.addEventListener('change', inputHandler, true);
-          window.addEventListener('scroll', scrollHandler, true);
-
-          recorderCleanup = () => {
-            document.removeEventListener('click', clickHandler, true);
-            document.removeEventListener('input', inputHandler, true);
-            document.removeEventListener('change', inputHandler, true);
-            window.removeEventListener('scroll', scrollHandler, true);
-          };
-
-          reply(source, id, { success: true });
-          break;
-        }
-        case 'RECORD_STOP': {
-          if (recorderCleanup) recorderCleanup();
-          isRecording = false;
-          recorderCleanup = null;
-          recorderSource = null;
-          reply(source, id, { success: true });
-          break;
-        }
-
-        default: {
-          reply(source, id, null, { code: -32601, message: `Unknown method: ${method}` });
-        }
-      }
-    } catch (err: any) {
-      reply(source, id, null, { code: 500, message: err.message || String(err) });
-    }
-  };
-
-  window.addEventListener('message', handleMessage);
-  (window as any).__BRIDGE_AGENT__ = {
-    version: '1.0.0',
-    storeRegistry,
-    registerStore,
-    destroy: () => window.removeEventListener('message', handleMessage),
-  };
-
-  console.log('[BridgeAgent] Ready — listening for postMessage commands');
-}

package/src/components/DecidoIcon.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-
-export const DecidoIcon = ({ className = '', size = 24 }: { className?: string; size?: number }) => (
-    <svg
-        width={size}
-        height={size}
-        viewBox="0 0 256 256"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className={className}
-    >
-        <g filter="url(#glow)">
-            {/* Base D Shape Stem */}
-            <path d="M64 48V208" stroke="#06B6D4" strokeWidth="16" strokeLinecap="round" strokeLinejoin="round" />
-
-            {/* Top Curve */}
-            <path d="M64 48H128C163.346 48 192 76.6543 192 112V116" stroke="url(#cyan_purple_grad)" strokeWidth="16" strokeLinecap="round" strokeLinejoin="round" />
-
-            {/* Bottom Curve */}
-            <path d="M64 208H128C163.346 208 192 179.346 192 144V140" stroke="url(#cyan_emerald_grad)" strokeWidth="16" strokeLinecap="round" strokeLinejoin="round" />
-
-            {/* Internal Network Connections */}
-            <line x1="100" y1="96" x2="116" y2="160" stroke="#06B6D4" strokeWidth="8" strokeLinecap="round" />
-            <line x1="116" y1="160" x2="176" y2="128" stroke="#10B981" strokeWidth="8" strokeLinecap="round" />
-            <line x1="100" y1="96" x2="176" y2="128" stroke="#A855F7" strokeWidth="8" strokeLinecap="round" />
-            <line x1="64" y1="72" x2="100" y2="96" stroke="#06B6D4" strokeWidth="8" strokeLinecap="round" />
-            <line x1="64" y1="184" x2="116" y2="160" stroke="#06B6D4" strokeWidth="8" strokeLinecap="round" />
-            <line x1="176" y1="128" x2="192" y2="128" stroke="#A855F7" strokeWidth="8" strokeLinecap="round" />
-
-            {/* Nodes (Dots) */}
-            <circle cx="100" cy="96" r="14" fill="#06B6D4" />
-            <circle cx="116" cy="160" r="14" fill="#10B981" />
-            <circle cx="176" cy="128" r="14" fill="#A855F7" />
-        </g>
-
-        <defs>
-            <linearGradient id="cyan_purple_grad" x1="64" y1="48" x2="192" y2="116" gradientUnits="userSpaceOnUse">
-                <stop offset="0%" stopColor="#06B6D4" />
-                <stop offset="100%" stopColor="#A855F7" />
-            </linearGradient>
-
-            <linearGradient id="cyan_emerald_grad" x1="64" y1="208" x2="192" y2="140" gradientUnits="userSpaceOnUse">
-                <stop offset="0%" stopColor="#06B6D4" />
-                <stop offset="100%" stopColor="#10B981" />
-            </linearGradient>
-
-            <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-                <feGaussianBlur stdDeviation="6" result="blur" />
-                <feMerge>
-                    <feMergeNode in="blur" />
-                    <feMergeNode in="SourceGraphic" />
-                </feMerge>
-            </filter>
-        </defs>
-    </svg>
-);

package/src/components/JsonTreeEditor.tsx

@@ -1,117 +0,0 @@
-import React, { useState } from 'react';
-
-interface JsonTreeEditorProps {
-    data: any;
-    label?: string;
-    level?: number;
-    path?: string;
-    onUpdate?: (path: string, value: any) => void;
-    isRoot?: boolean;
-}
-
-export const JsonTreeEditor: React.FC<JsonTreeEditorProps> = ({
-    data,
-    label = "Root",
-    level = 0,
-    path = "",
-    onUpdate,
-    isRoot = true
-}) => {
-    const [isCollapsed, setIsCollapsed] = useState(isRoot ? false : true);
-
-    const handleValueChange = (newValue: any) => {
-        if (onUpdate) onUpdate(path, newValue);
-    };
-
-    const indent = level * 16;
-    const isObject = typeof data === 'object' && data !== null;
-    const isArray = Array.isArray(data);
-
-    if (!isObject) {
-        // Primitive Render
-        let renderInput = null;
-        if (typeof data === 'boolean') {
-            renderInput = (
-                <button
-                    onClick={() => handleValueChange(!data)}
-                    className={`w-8 h-4 rounded-full relative transition-colors ${data ? 'bg-cyan-500' : 'bg-surface-elevated'}`}
-                >
-                    <div className={`absolute top-0.5 left-0.5 w-3 h-3 rounded-full bg-text-primary transition-transform ${data ? 'translate-x-4' : 'translate-x-0'}`} />
-                </button>
-            );
-        } else if (typeof data === 'number') {
-            renderInput = (
-                <input
-                    type="number"
-                    value={data}
-                    onChange={e => handleValueChange(Number(e.target.value))}
-                    className="bg-transparent border border-border-default rounded px-1 py-0.5 text-emerald-400 w-24 focus:border-cyan-500 outline-hidden"
-                    readOnly={!onUpdate}
-                />
-            );
-        } else if (typeof data === 'string') {
-            renderInput = (
-                <input
-                    type="text"
-                    value={data}
-                    onChange={e => handleValueChange(e.target.value)}
-                    className="bg-transparent border border-border-default rounded px-1 py-0.5 text-amber-300 w-48 focus:border-cyan-500 outline-hidden truncate"
-                    readOnly={!onUpdate}
-                />
-            );
-        } else {
-            renderInput = <span className="text-text-muted italic">{String(data)}</span>;
-        }
-
-        return (
-            <div className="flex items-center py-1 hover:bg-surface-glass rounded px-2 transition-colors" style={{ paddingLeft: `${indent}px` }}>
-                <span className="text-blue-300 mr-2">{label}:</span>
-                {renderInput}
-            </div>
-        );
-    }
-
-    // Object or Array Render
-    const keys = Object.keys(data);
-
-    return (
-        <div className="flex flex-col">
-            <div
-                className="flex items-center py-1 hover:bg-surface-glass rounded px-2 cursor-pointer transition-colors"
-                style={{ paddingLeft: `${indent}px` }}
-                onClick={() => setIsCollapsed(!isCollapsed)}
-            >
-                <button className="w-4 h-4 flex items-center justify-center mr-1 text-text-secondary hover:text-text-primary transition-colors">
-                    <svg
-                        className={`w-3 h-3 transform transition-transform ${isCollapsed ? '-rotate-90' : 'rotate-0'}`}
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                    >
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                    </svg>
-                </button>
-                <span className="text-purple-300 font-bold">{label}</span>
-                <span className="ml-2 text-text-muted text-xs">
-                    {isArray ? `[${keys.length}]` : `{${keys.length}}`}
-                </span>
-            </div>
-
-            {!isCollapsed && (
-                <div className="flex flex-col border-l border-border-subtle ml-3 mt-1">
-                    {keys.map(key => (
-                        <JsonTreeEditor
-                            key={key}
-                            label={key}
-                            data={data[key as keyof typeof data]}
-                            level={level + 1}
-                            path={path ? `${path}.${key}` : key}
-                            onUpdate={onUpdate}
-                            isRoot={false}
-                        />
-                    ))}
-                </div>
-            )}
-        </div>
-    );
-};

package/src/components/PanelSplitter.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { useShellStore, LayoutNode } from '../store/engine';
-import { ShellPluginProvider } from '../core/PluginContext';
-import { PluginErrorBoundary } from './PluginErrorBoundary';
-
-interface PanelSplitterProps {
-    node?: LayoutNode;
-    isRoot?: boolean;
-}
-
-export const PanelSplitter: React.FC<PanelSplitterProps> = ({ node, isRoot = false }) => {
-    const rootLayout = useShellStore((state) => state.rootLayout);
-    const widgets = useShellStore((state) => state.widgets);
-
-    const currentNode = node || (isRoot ? rootLayout : undefined);
-
-    if (!currentNode) {
-        return (
-            <div className="flex-1 flex items-center justify-center text-text-primary/30 text-sm italic h-full w-full">
-                No active layout topology
-            </div>
-        );
-    }
-
-    // Render Widget node directly
-    if (currentNode.type === 'widget' && currentNode.widgetId) {
-        const WidgetMeta = widgets.get(currentNode.widgetId);
-        if (!WidgetMeta) return <div className="text-red-500 p-4 bg-surface-glass">Widget '{currentNode.widgetId}' not found.</div>;
-
-        const WidgetComponent = WidgetMeta.component;
-        return (
-            <div className="w-full h-full relative overflow-hidden bg-surface-overlay backdrop-blur-md border border-border-subtle rounded-2xl shadow-xl flex flex-col">
-                {/* Standard Panel Header */}
-                <div className="flex-none px-4 py-2 border-b border-border-default bg-linear-to-r from-white/5 to-transparent">
-                    <span className="text-xs font-semibold text-text-primary/70 uppercase tracking-wider">{WidgetMeta.name}</span>
-                </div>
-                {/* Widget Payload */}
-                <div className="flex-1 overflow-auto relative">
-                    <ShellPluginProvider pluginId={WidgetMeta.pluginId}>
-                        {WidgetComponent ? (
-                            <PluginErrorBoundary pluginName={WidgetMeta.name} pluginId={WidgetMeta.pluginId}>
-                                <React.Suspense fallback={<div className="text-text-primary/50 p-4 text-center">Loading Remote Plugin...</div>}>
-                                    <WidgetComponent {...(WidgetMeta.defaultProps || {})} />
-                                </React.Suspense>
-                            </PluginErrorBoundary>
-                        ) : (
-                            <div className="text-text-primary/50 p-4 text-center">Component Not Renderable</div>
-                        )}
-                    </ShellPluginProvider>
-                </div>
-            </div>
-        );
-    }
-
-    // Base Flex setup for splits
-    const isVertical = currentNode.type === 'split-vertical';
-
-    return (
-        <div className={`flex w-full h-full gap-4 ${isVertical ? 'flex-col' : 'flex-row'}`}>
-            {currentNode.children?.map((child, idx) => (
-                <div
-                    key={child.id || idx}
-                    className="shrink grow"
-                    style={{ flexBasis: child.size ? `${child.size}%` : 'auto' }}
-                >
-                    <PanelSplitter node={child} />
-                </div>
-            ))}
-        </div>
-    );
-};