@decido/shell 1.0.0 → 4.0.1

package/src/components/shell/shells/BuiltInShells.tsx

@@ -1,443 +0,0 @@
-/**
- * Built-in Shell Components — Registered at boot time.
- * 
- * Only shells that DON'T depend on external workspace packages:
- * - markdown: Renders markdown content
- * - iframe: Renders HTML in a sandboxed iframe (with TW Editor support)
- * 
- * shell-vscode and shell-canvas must be registered by the HOST app
- * that has @decido/react-shell and @decido/node-engine as dependencies.
- */
-import React, { useMemo, useRef, useEffect, useState, useCallback } from 'react';
-import type { ShellProps } from '../../../store/useShellRegistry';
-import {
-    Paintbrush, X, Plus, Copy, RotateCcw, Search, MousePointer,
-    ChevronDown, ChevronRight,
-    Layout, Type, Palette, Box, Maximize, Layers, Sparkles,
-} from 'lucide-react';
-
-// ═══════════════════════════════════════════
-// MARKDOWN SHELL
-// ═══════════════════════════════════════════
-export const MarkdownShell: React.FC<ShellProps> = ({ data }) => {
-    const content = data?.content || data?.markdown || '';
-    return (
-        <div className="w-full h-full overflow-auto bg-surface-primary p-8 custom-scrollbar">
-            <div className="max-w-3xl mx-auto prose prose-invert prose-sm prose-zinc">
-                <div className="whitespace-pre-wrap text-text-primary font-sans leading-relaxed text-sm">
-                    {content}
-                </div>
-            </div>
-        </div>
-    );
-};
-
-// ═══════════════════════════════════════════
-// TW INSPECTOR BRIDGE SCRIPT (injected into iframe blob HTML)
-// ═══════════════════════════════════════════
-const TW_BRIDGE_SCRIPT = `
-<script>
-(function() {
-  var inspectorActive = false;
-  var selectedEl = null;
-  var hoveredEl = null;
-
-  function generateSelector(el) {
-    var parts = [];
-    var cur = el;
-    while (cur && cur !== document.body && cur !== document.documentElement) {
-      var part = cur.tagName.toLowerCase();
-      if (cur.id) { parts.unshift('#' + cur.id); break; }
-      var parent = cur.parentElement;
-      if (parent) {
-        var sibs = Array.from(parent.children).filter(function(c) { return c.tagName === cur.tagName; });
-        if (sibs.length > 1) {
-          part += ':nth-of-type(' + (sibs.indexOf(cur) + 1) + ')';
-        }
-      }
-      parts.unshift(part);
-      cur = cur.parentElement;
-    }
-    return parts.join(' > ');
-  }
-
-  window.addEventListener('message', function(e) {
-    if (e.data && e.data.type === 'tw-bridge:toggle') {
-      inspectorActive = !!e.data.enabled;
-      document.body.style.cursor = inspectorActive ? 'crosshair' : '';
-      if (!inspectorActive) {
-        if (hoveredEl) { hoveredEl.style.outline = ''; hoveredEl.style.outlineOffset = ''; hoveredEl = null; }
-        if (selectedEl) { selectedEl.style.outline = ''; selectedEl.style.outlineOffset = ''; selectedEl = null; }
-      }
-    }
-    if (e.data && e.data.type === 'tw-bridge:apply') {
-      var el = document.querySelector(e.data.selector);
-      if (el) el.className = e.data.classes.join(' ');
-    }
-  });
-
-  document.addEventListener('mouseover', function(e) {
-    if (!inspectorActive) return;
-    var t = e.target;
-    if (hoveredEl && hoveredEl !== selectedEl) {
-      hoveredEl.style.outline = '';
-      hoveredEl.style.outlineOffset = '';
-    }
-    t.style.outline = '2px dashed rgba(139, 92, 246, 0.6)';
-    t.style.outlineOffset = '2px';
-    hoveredEl = t;
-  });
-
-  document.addEventListener('mouseout', function(e) {
-    if (!inspectorActive) return;
-    if (e.target !== selectedEl) {
-      e.target.style.outline = '';
-      e.target.style.outlineOffset = '';
-    }
-  });
-
-  document.addEventListener('click', function(e) {
-    if (!inspectorActive) return;
-    e.preventDefault();
-    e.stopPropagation();
-    var t = e.target;
-    if (selectedEl) { selectedEl.style.outline = ''; selectedEl.style.outlineOffset = ''; }
-    t.style.outline = '2px solid rgba(139, 92, 246, 0.9)';
-    t.style.outlineOffset = '2px';
-    selectedEl = t;
-    var classes = t.className ? t.className.split(/\\s+/).filter(Boolean) : [];
-    var rect = t.getBoundingClientRect();
-    window.parent.postMessage({
-      type: 'tw-bridge:select',
-      selector: generateSelector(t),
-      tagName: t.tagName,
-      classes: classes,
-      originalClasses: classes,
-      rect: { width: rect.width, height: rect.height }
-    }, '*');
-  }, true);
-})();
-</script>`;
-
-// ═══════════════════════════════════════════
-// INLINE TW EDITOR — Compact panel for IframeShell
-// ═══════════════════════════════════════════
-
-const TW_CATS = [
-    { id: 'layout', label: 'Layout', classes: ['flex','inline-flex','grid','block','hidden','flex-row','flex-col','items-center','items-start','items-end','justify-center','justify-between','justify-start','justify-end','relative','absolute','fixed','overflow-hidden','overflow-auto'] },
-    { id: 'spacing', label: 'Spacing', classes: ['p-0','p-1','p-2','p-3','p-4','p-6','p-8','px-2','px-4','px-6','py-1','py-2','py-3','py-4','m-0','m-1','m-2','m-4','mx-auto','my-2','my-4','gap-1','gap-2','gap-3','gap-4','gap-6'] },
-    { id: 'sizing', label: 'Sizing', classes: ['w-full','w-auto','w-1/2','w-1/3','h-full','h-auto','h-screen','min-w-0','max-w-sm','max-w-md','max-w-lg'] },
-    { id: 'typography', label: 'Type', classes: ['text-xs','text-sm','text-base','text-lg','text-xl','text-2xl','font-light','font-normal','font-medium','font-semibold','font-bold','text-left','text-center','text-right','truncate'] },
-    { id: 'colors', label: 'Colors', classes: ['text-white','text-black','text-gray-500','bg-white','bg-black','bg-transparent','bg-gray-100','bg-gray-800','bg-gray-900','bg-blue-500','bg-green-500','bg-red-500','bg-purple-500','bg-cyan-500'] },
-    { id: 'borders', label: 'Borders', classes: ['border','border-0','border-2','rounded-none','rounded-sm','rounded','rounded-md','rounded-lg','rounded-xl','rounded-2xl','rounded-full'] },
-    { id: 'effects', label: 'Effects', classes: ['shadow-sm','shadow','shadow-md','shadow-lg','shadow-xl','opacity-0','opacity-50','opacity-100','transition-all','transition-colors','cursor-pointer'] },
-];
-
-interface TwSelection {
-    selector: string;
-    tagName: string;
-    classes: string[];
-    originalClasses: string[];
-    rect: { width: number; height: number };
-}
-
-function InlineTwEditor({ iframeRef, isOpen, onClose }: {
-    iframeRef: React.RefObject<HTMLIFrameElement>;
-    isOpen: boolean;
-    onClose: () => void;
-}) {
-    const [selected, setSelected] = useState<TwSelection | null>(null);
-    const [inspectorOn, setInspectorOn] = useState(true);
-    const [addInput, setAddInput] = useState('');
-    const [expandedCat, setExpandedCat] = useState<string | null>('layout');
-    const [filter, setFilter] = useState('');
-
-    useEffect(() => {
-        if (!isOpen) return;
-        const handler = (e: MessageEvent) => {
-            if (e.data?.type === 'tw-bridge:select') {
-                setSelected({
-                    selector: e.data.selector,
-                    tagName: e.data.tagName,
-                    classes: e.data.classes || [],
-                    originalClasses: e.data.originalClasses || e.data.classes || [],
-                    rect: e.data.rect || { width: 0, height: 0 },
-                });
-            }
-        };
-        window.addEventListener('message', handler);
-        return () => window.removeEventListener('message', handler);
-    }, [isOpen]);
-
-    useEffect(() => {
-        if (!isOpen) return;
-        iframeRef.current?.contentWindow?.postMessage({ type: 'tw-bridge:toggle', enabled: inspectorOn }, '*');
-    }, [inspectorOn, isOpen, iframeRef]);
-
-    useEffect(() => {
-        if (isOpen) {
-            setInspectorOn(true);
-            iframeRef.current?.contentWindow?.postMessage({ type: 'tw-bridge:toggle', enabled: true }, '*');
-        } else {
-            iframeRef.current?.contentWindow?.postMessage({ type: 'tw-bridge:toggle', enabled: false }, '*');
-        }
-    }, [isOpen, iframeRef]);
-
-    const applyClasses = useCallback((newClasses: string[]) => {
-        if (!selected) return;
-        setSelected(prev => prev ? { ...prev, classes: newClasses } : null);
-        iframeRef.current?.contentWindow?.postMessage({
-            type: 'tw-bridge:apply',
-            selector: selected.selector,
-            classes: newClasses,
-        }, '*');
-    }, [selected, iframeRef]);
-
-    const removeClass = useCallback((cls: string) => {
-        if (!selected) return;
-        applyClasses(selected.classes.filter(c => c !== cls));
-    }, [selected, applyClasses]);
-
-    const addClass = useCallback((cls: string) => {
-        if (!selected) return;
-        const t = cls.trim();
-        if (!t || selected.classes.includes(t)) return;
-        applyClasses([...selected.classes, t]);
-        setAddInput('');
-    }, [selected, applyClasses]);
-
-    const resetClasses = useCallback(() => {
-        if (!selected) return;
-        applyClasses([...selected.originalClasses]);
-    }, [selected, applyClasses]);
-
-    const copyClasses = useCallback(() => {
-        if (!selected) return;
-        navigator.clipboard.writeText(selected.classes.join(' '));
-    }, [selected]);
-
-    const hasChanges = selected && JSON.stringify(selected.classes) !== JSON.stringify(selected.originalClasses);
-
-    if (!isOpen) return null;
-
-    return (
-        <div className="w-[280px] shrink-0 flex flex-col bg-surface-primary border-l border-border-subtle h-full text-text-primary">
-            {/* Header */}
-            <div className="px-3 py-2 border-b border-border-subtle shrink-0">
-                <div className="flex items-center justify-between mb-1.5">
-                    <div className="flex items-center gap-1.5">
-                        <Paintbrush size={12} className="text-accent-purple" />
-                        <span className="text-[11px] font-bold">TW Editor</span>
-                        <span className="text-[7px] px-1 py-0.5 rounded-full bg-accent-purple/15 text-accent-purple font-mono font-bold">LIVE</span>
-                    </div>
-                    <button onClick={onClose} className="text-text-muted hover:text-text-primary transition-colors">
-                        <X size={12} />
-                    </button>
-                </div>
-                <button
-                    onClick={() => setInspectorOn(!inspectorOn)}
-                    className={`w-full flex items-center gap-1.5 px-2 py-1 rounded text-[10px] font-medium transition-all cursor-pointer ${
-                        inspectorOn ? 'bg-accent-purple/15 text-accent-purple border border-accent-purple/30' : 'bg-surface-glass text-text-muted border border-border-subtle'
-                    }`}
-                >
-                    <MousePointer size={10} />
-                    {inspectorOn ? 'Click un elemento' : 'Inspector off'}
-                    <span className={`ml-auto w-1.5 h-1.5 rounded-full ${inspectorOn ? 'bg-accent-green animate-pulse' : 'bg-text-muted/30'}`} />
-                </button>
-            </div>
-
-            {selected ? (
-                <div className="flex-1 flex flex-col overflow-hidden">
-                    {/* Element info */}
-                    <div className="px-3 py-1.5 border-b border-border-subtle/50 shrink-0">
-                        <div className="flex items-center gap-1.5">
-                            <span className="text-[9px] font-mono px-1 py-0.5 rounded bg-surface-glass text-text-muted">&lt;{selected.tagName.toLowerCase()}&gt;</span>
-                            <span className="text-[8px] font-mono text-text-muted/40 ml-auto">{Math.round(selected.rect.width)}×{Math.round(selected.rect.height)}</span>
-                        </div>
-                    </div>
-
-                    {/* Current classes */}
-                    <div className="px-3 py-1.5 border-b border-border-subtle/50 shrink-0">
-                        <div className="flex items-center justify-between mb-1">
-                            <span className="text-[8px] font-mono text-text-muted/60 uppercase tracking-wider">Clases ({selected.classes.length})</span>
-                            <div className="flex gap-1">
-                                {hasChanges && (
-                                    <button onClick={resetClasses} className="text-[7px] text-accent-amber flex items-center gap-0.5 cursor-pointer"><RotateCcw size={7} /> Undo</button>
-                                )}
-                                <button onClick={copyClasses} className="text-[7px] text-text-muted/40 hover:text-accent-cyan flex items-center gap-0.5 cursor-pointer"><Copy size={7} /> Copy</button>
-                            </div>
-                        </div>
-                        <div className="flex flex-wrap gap-0.5 max-h-[100px] overflow-y-auto custom-scrollbar">
-                            {selected.classes.map(cls => {
-                                const isNew = !selected.originalClasses.includes(cls);
-                                return (
-                                    <span key={cls} className={`group inline-flex items-center gap-0.5 px-1 py-0.5 rounded text-[8px] font-mono transition-all ${
-                                        isNew ? 'bg-accent-green/15 text-accent-green border border-accent-green/30' : 'bg-surface-glass text-text-secondary border border-border-subtle'
-                                    }`}>
-                                        {cls}
-                                        <button onClick={() => removeClass(cls)} className="opacity-0 group-hover:opacity-100 text-red-400 cursor-pointer"><X size={7} /></button>
-                                    </span>
-                                );
-                            })}
-                        </div>
-                        {hasChanges && (
-                            <div className="mt-1 flex flex-wrap gap-0.5">
-                                {selected.originalClasses.filter(c => !selected.classes.includes(c)).map(cls => (
-                                    <button key={`rm-${cls}`} onClick={() => addClass(cls)} className="px-1 py-0.5 rounded text-[8px] font-mono bg-red-500/10 text-red-400/60 border border-red-500/20 line-through hover:no-underline cursor-pointer">{cls}</button>
-                                ))}
-                            </div>
-                        )}
-                    </div>
-
-                    {/* Add input */}
-                    <div className="px-3 py-1.5 border-b border-border-subtle/50 shrink-0 flex gap-1">
-                        <div className="flex-1 relative">
-                            <Plus size={9} className="absolute left-1.5 top-1/2 -translate-y-1/2 text-text-muted/40" />
-                            <input
-                                type="text" value={addInput}
-                                onChange={e => setAddInput(e.target.value)}
-                                onKeyDown={e => { if (e.key === 'Enter' && addInput.trim()) addClass(addInput); }}
-                                placeholder="Agregar clase..."
-                                className="w-full pl-5 pr-1 py-1 text-[10px] font-mono bg-surface-glass border border-border-subtle rounded text-text-primary placeholder:text-text-muted/30 focus:outline-none focus:border-accent-purple/40"
-                            />
-                        </div>
-                        <button onClick={() => addClass(addInput)} disabled={!addInput.trim()} className="px-2 py-1 rounded bg-accent-purple/15 text-accent-purple text-[9px] font-bold disabled:opacity-30 cursor-pointer">+</button>
-                    </div>
-
-                    {/* Quick-add */}
-                    <div className="flex-1 overflow-y-auto custom-scrollbar">
-                        <div className="px-3 py-1 border-b border-border-subtle/30 sticky top-0 bg-surface-primary z-10">
-                            <div className="relative">
-                                <Search size={9} className="absolute left-1.5 top-1/2 -translate-y-1/2 text-text-muted/30" />
-                                <input type="text" value={filter} onChange={e => setFilter(e.target.value)} placeholder="Filtrar..."
-                                    className="w-full pl-5 pr-1 py-0.5 text-[9px] font-mono bg-surface-glass border border-border-subtle/50 rounded text-text-primary placeholder:text-text-muted/20 focus:outline-none" />
-                            </div>
-                        </div>
-                        {TW_CATS.map(cat => {
-                            const filtered = filter ? cat.classes.filter(c => c.includes(filter.toLowerCase())) : cat.classes;
-                            if (filtered.length === 0) return null;
-                            const isOpen = expandedCat === cat.id;
-                            return (
-                                <div key={cat.id} className="border-b border-border-subtle/20">
-                                    <button onClick={() => setExpandedCat(isOpen ? null : cat.id)} className="w-full flex items-center gap-1.5 px-3 py-1 hover:bg-surface-glass text-left cursor-pointer">
-                                        {isOpen ? <ChevronDown size={8} /> : <ChevronRight size={8} />}
-                                        <span className="text-[9px] font-semibold text-text-primary flex-1">{cat.label}</span>
-                                        <span className="text-[7px] font-mono text-text-muted/40">{filtered.length}</span>
-                                    </button>
-                                    {isOpen && (
-                                        <div className="px-3 pb-1.5 flex flex-wrap gap-0.5">
-                                            {filtered.map(cls => {
-                                                const active = selected.classes.includes(cls);
-                                                return (
-                                                    <button key={cls} onClick={() => active ? removeClass(cls) : addClass(cls)}
-                                                        className={`px-1 py-0.5 rounded text-[8px] font-mono cursor-pointer transition-all ${
-                                                            active ? 'bg-accent-green/15 text-accent-green border border-accent-green/30' : 'bg-surface-glass text-text-muted border border-border-subtle/50 hover:border-accent-purple/30'
-                                                        }`}>
-                                                        {active ? '✓ ' : ''}{cls}
-                                                    </button>
-                                                );
-                                            })}
-                                        </div>
-                                    )}
-                                </div>
-                            );
-                        })}
-                    </div>
-
-                    {/* Footer */}
-                    {hasChanges && (
-                        <div className="px-3 py-1.5 border-t border-border-subtle bg-surface-secondary/50 shrink-0">
-                            <div className="flex items-center justify-between mb-0.5">
-                                <span className="text-[7px] font-mono text-accent-green/60 uppercase">className</span>
-                                <button onClick={copyClasses} className="text-[7px] text-text-muted/40 hover:text-accent-cyan flex items-center gap-0.5 cursor-pointer"><Copy size={7} /> Copy</button>
-                            </div>
-                            <div className="text-[8px] font-mono text-text-secondary bg-surface-primary p-1.5 rounded border border-border-subtle max-h-[48px] overflow-y-auto break-all">
-                                {selected.classes.join(' ')}
-                            </div>
-                        </div>
-                    )}
-                </div>
-            ) : (
-                <div className="flex-1 flex flex-col items-center justify-center p-4 text-center">
-                    <MousePointer size={20} className="text-accent-purple/30 mb-2" />
-                    <p className="text-[10px] text-text-muted">Click un elemento del preview</p>
-                    <p className="text-[8px] text-text-muted/40 mt-0.5">para editar sus clases Tailwind</p>
-                </div>
-            )}
-        </div>
-    );
-}
-
-// ═══════════════════════════════════════════
-// IFRAME SHELL (with TW Editor support)
-// ═══════════════════════════════════════════
-export const IframeShell: React.FC<ShellProps> = ({ data, instanceId }) => {
-    const iframeRef = useRef<HTMLIFrameElement>(null!);
-    const content = data?.content || data?.html || '';
-    const url = data?.url || '';
-    const [twEditorOpen, setTwEditorOpen] = useState(false);
-
-    // Inject TW bridge script + Tailwind CDN into HTML content
-    const blobUrl = useMemo(() => {
-        if (url) return url;
-        if (!content) return 'about:blank';
-
-        // Inject Tailwind CDN + bridge script at the end of the HTML
-        const twCdn = '<script src="https://cdn.tailwindcss.com"><\/script>';
-        let enrichedContent = content;
-
-        // Insert before </body> or </html> or at the end
-        if (enrichedContent.includes('</body>')) {
-            enrichedContent = enrichedContent.replace('</body>', `${twCdn}${TW_BRIDGE_SCRIPT}</body>`);
-        } else if (enrichedContent.includes('</html>')) {
-            enrichedContent = enrichedContent.replace('</html>', `${twCdn}${TW_BRIDGE_SCRIPT}</html>`);
-        } else {
-            enrichedContent += `${twCdn}${TW_BRIDGE_SCRIPT}`;
-        }
-
-        const blob = new Blob([enrichedContent], { type: 'text/html' });
-        return URL.createObjectURL(blob);
-    }, [content, url]);
-
-    useEffect(() => {
-        return () => {
-            if (!url && blobUrl !== 'about:blank') {
-                URL.revokeObjectURL(blobUrl);
-            }
-        };
-    }, [blobUrl, url]);
-
-    return (
-        <div className="w-full h-full bg-surface-secondary rounded-lg overflow-hidden flex">
-            {/* Iframe preview */}
-            <div className="flex-1 relative">
-                <iframe
-                    ref={iframeRef}
-                    src={blobUrl}
-                    title={`sandbox-${instanceId}`}
-                    sandbox="allow-scripts allow-same-origin allow-forms"
-                    className="w-full h-full border-none"
-                />
-                {/* TW Editor toggle button */}
-                <button
-                    onClick={() => setTwEditorOpen(!twEditorOpen)}
-                    className={`absolute top-2 right-2 z-10 flex items-center gap-1 px-2 py-1 rounded-lg text-[10px] font-semibold transition-all shadow-lg cursor-pointer ${
-                        twEditorOpen
-                            ? 'bg-accent-purple text-white'
-                            : 'bg-black/60 text-white/80 hover:bg-accent-purple/80 hover:text-white backdrop-blur-sm'
-                    }`}
-                    title="Tailwind Editor"
-                >
-                    <Paintbrush size={11} /> TW
-                </button>
-            </div>
-
-            {/* Inline TW Editor Panel */}
-            <InlineTwEditor
-                iframeRef={iframeRef}
-                isOpen={twEditorOpen}
-                onClose={() => setTwEditorOpen(false)}
-            />
-        </div>
-    );
-};

package/src/components/shell/shells/DatawayChatShell.tsx

@@ -1,42 +0,0 @@
-import React, { useEffect } from 'react';
-import { Database } from 'lucide-react';
-
-export const DatawayChatShell: React.FC<any> = ({ artifacts, activeArtifactIndex }) => {
-    const artifact = artifacts?.[activeArtifactIndex];
-
-    useEffect(() => {
-        if (!artifact) return;
-        
-        let script = '';
-        if (typeof artifact.content === 'string') {
-            script = artifact.content;
-        } else if (artifact.data && typeof artifact.data.content === 'string') {
-            script = artifact.data.content;
-        }
-
-        if (script) {
-            // Limpiar tags de markdown si el LLM los incluye
-            script = script.replace(/```[a-zA-Z-]*\n/gi, '').replace(/```/g, '').trim();
-            window.dispatchEvent(new CustomEvent('intent:dataway-generate-script', { detail: { script } }));
-        }
-    }, [artifact]);
-
-    if (!artifact) return null;
-
-    let displayScript = typeof artifact.content === 'string' ? artifact.content : (artifact.data?.content || '');
-    displayScript = displayScript.replace(/```[a-zA-Z-]*\n/gi, '').replace(/```/g, '').trim();
-
-    return (
-        <div className="w-full flex tracking-tight flex-col border border-teal-500/20 bg-teal-500/5 rounded-xl overflow-hidden mt-2">
-            <div className="bg-teal-500/10 px-3 py-2 flex items-center gap-2 border-b border-teal-500/10">
-                <Database className="w-4 h-4 text-teal-600 dark:text-teal-400" />
-                <span className="text-[11px] font-bold text-teal-800 dark:text-teal-300 uppercase tracking-widest">M-Script Aplicado</span>
-            </div>
-            <div className="p-3">
-                <pre className="text-[13px] font-mono text-teal-900/80 dark:text-teal-100/80 whitespace-pre-wrap break-all">
-                    {displayScript}
-                </pre>
-            </div>
-        </div>
-    );
-};