@decido/shell 1.0.0

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

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

@@ -0,0 +1,42 @@
+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>
+    );
+};