@decido/shell 1.0.0

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

@@ -0,0 +1,339 @@
+/**
+ * TokenPreview — Design System Showroom v2.
+ * Registered as 'shell-theme-editor'.
+ *
+ * Premium theme editor with live component preview,
+ * powered by @decido/ui-kit useTheme store.
+ */
+import React, { useState, useCallback } from 'react';
+import { useTheme, THEME_PRESETS, type ThemePreset, type ThemeTokens } from '../../../store/useThemeStore';
+
+// ── Token Groups for Editor ──
+
+interface TokenDef { key: keyof ThemeTokens; label: string; }
+interface TokenGroup { title: string; icon: string; tokens: TokenDef[]; }
+
+const TOKEN_GROUPS: TokenGroup[] = [
+    {
+        title: 'Surfaces', icon: '◻️', tokens: [
+            { key: 'surface-primary', label: 'Primary' },
+            { key: 'surface-secondary', label: 'Secondary' },
+            { key: 'surface-tertiary', label: 'Tertiary' },
+            { key: 'surface-elevated', label: 'Elevated' },
+        ]
+    },
+    {
+        title: 'Text', icon: '✏️', tokens: [
+            { key: 'text-primary', label: 'Primary' },
+            { key: 'text-secondary', label: 'Secondary' },
+            { key: 'text-muted', label: 'Muted' },
+        ]
+    },
+    {
+        title: 'Accents', icon: '💎', tokens: [
+            { key: 'accent-blue', label: 'Blue' },
+            { key: 'accent-purple', label: 'Purple' },
+            { key: 'accent-green', label: 'Green' },
+            { key: 'accent-red', label: 'Red' },
+            { key: 'accent-amber', label: 'Amber' },
+            { key: 'accent-cyan', label: 'Cyan' },
+        ]
+    },
+    {
+        title: 'Borders', icon: '▬', tokens: [
+            { key: 'border-subtle', label: 'Subtle' },
+            { key: 'border-default', label: 'Default' },
+            { key: 'border-strong', label: 'Strong' },
+            { key: 'border-glow', label: 'Glow' },
+        ]
+    },
+    {
+        title: 'Status', icon: '●', tokens: [
+            { key: 'status-ok', label: 'Success' },
+            { key: 'status-warn', label: 'Warning' },
+            { key: 'status-error', label: 'Error' },
+            { key: 'status-info', label: 'Info' },
+        ]
+    },
+];
+
+type TabId = 'themes' | 'tokens' | 'showroom';
+
+// ── Token Swatch ──
+
+function TokenSwatch({ tokenKey, label }: { tokenKey: keyof ThemeTokens; label: string }) {
+    const { getCurrentPreset, setToken } = useTheme();
+    const preset = getCurrentPreset();
+    const value = preset.tokens[tokenKey];
+
+    return (
+        <div className="flex items-center gap-2 py-1.5 px-2 rounded-lg bg-surface-glass hover:bg-surface-elevated/50 transition-colors group">
+            <div className="relative w-6 h-6 shrink-0">
+                <div className="w-6 h-6 rounded-md border border-border-default" style={{ background: value }} />
+                <input type="color"
+                    value={value.startsWith('#') ? value : '#888888'}
+                    onChange={e => setToken(tokenKey, e.target.value)}
+                    className="absolute inset-0 opacity-0 w-full h-full cursor-pointer" />
+            </div>
+            <div className="flex-1 min-w-0">
+                <div className="text-[11px] font-semibold text-text-primary truncate">{label}</div>
+                <div className="text-[9px] text-text-muted font-mono">--ds-{tokenKey}</div>
+            </div>
+            <span className="text-[10px] text-text-muted font-mono opacity-0 group-hover:opacity-100 transition-opacity">
+                {value.slice(0, 9)}
+            </span>
+        </div>
+    );
+}
+
+// ── Theme Preset Card ──
+
+function PresetCard({ preset, isActive, onSelect }: { preset: ThemePreset; isActive: boolean; onSelect: () => void }) {
+    return (
+        <button onClick={onSelect}
+            className={`flex flex-col items-center gap-2 p-3 rounded-xl border transition-all duration-200 cursor-pointer ${isActive
+                ? 'border-accent-purple bg-accent-purple/10 shadow-glow-sm'
+                : 'border-border-subtle bg-surface-glass hover:border-border-default hover:bg-surface-elevated/30'
+                }`}>
+            {/* Color dots preview */}
+            <div className="flex gap-1">
+                {[preset.preview.bg, preset.preview.accent, preset.preview.text].map((c, i) => (
+                    <div key={i} className="w-3 h-3 rounded-full border border-border-subtle" style={{ background: c }} />
+                ))}
+            </div>
+            <span className="text-[10px] font-medium text-text-secondary">{preset.name}</span>
+        </button>
+    );
+}
+
+// ── Component Showroom ──
+
+function ComponentShowroom() {
+    return (
+        <div className="flex flex-col gap-4 p-3">
+            {/* Buttons */}
+            <ShowSection title="Buttons">
+                <div className="flex flex-wrap gap-2">
+                    <button className="px-4 py-2 bg-accent-purple text-text-inverse rounded-lg text-xs font-semibold hover:opacity-90 transition-opacity">
+                        Primary
+                    </button>
+                    <button className="px-4 py-2 bg-surface-glass border border-border-default text-text-primary rounded-lg text-xs font-semibold hover:bg-surface-elevated transition-colors">
+                        Secondary
+                    </button>
+                    <button className="px-4 py-2 bg-accent-red/10 text-accent-red border border-accent-red/20 rounded-lg text-xs font-semibold hover:bg-accent-red/20 transition-colors">
+                        Destructive
+                    </button>
+                    <button className="px-3 py-1.5 text-text-secondary text-xs hover:text-text-primary transition-colors">
+                        Ghost
+                    </button>
+                </div>
+            </ShowSection>
+
+            {/* Cards */}
+            <ShowSection title="Cards">
+                <div className="surface-card p-4">
+                    <div className="text-sm font-semibold text-text-primary mb-1">Glass Card</div>
+                    <div className="text-xs text-text-secondary">Surface secondary con border subtle y hover.</div>
+                </div>
+                <div className="glass-panel rounded-xl p-4 mt-2">
+                    <div className="text-sm font-semibold text-text-primary mb-1">Glass Panel</div>
+                    <div className="text-xs text-text-secondary">Overlay + backdrop blur + border default.</div>
+                </div>
+            </ShowSection>
+
+            {/* Inputs */}
+            <ShowSection title="Inputs">
+                <input type="text" placeholder="Escribe algo..."
+                    className="w-full px-3 py-2 bg-surface-primary border border-border-default rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:border-accent-purple focus:ring-1 focus:ring-accent-purple/30 outline-hidden transition-all" />
+                <div className="flex gap-2 mt-2">
+                    <input type="text" value="Readonly" readOnly
+                        className="flex-1 px-3 py-2 bg-surface-glass border border-border-subtle rounded-lg text-sm text-text-secondary" />
+                    <select className="px-3 py-2 bg-surface-primary border border-border-default rounded-lg text-sm text-text-primary outline-hidden">
+                        <option>Opción A</option>
+                        <option>Opción B</option>
+                    </select>
+                </div>
+            </ShowSection>
+
+            {/* Badges */}
+            <ShowSection title="Badges & Status">
+                <div className="flex flex-wrap gap-2">
+                    <span className="px-2 py-0.5 bg-status-ok/10 text-status-ok border border-status-ok/20 rounded-full text-[10px] font-semibold">Active</span>
+                    <span className="px-2 py-0.5 bg-status-warn/10 text-status-warn border border-status-warn/20 rounded-full text-[10px] font-semibold">Pending</span>
+                    <span className="px-2 py-0.5 bg-status-error/10 text-status-error border border-status-error/20 rounded-full text-[10px] font-semibold">Error</span>
+                    <span className="px-2 py-0.5 bg-status-info/10 text-status-info border border-status-info/20 rounded-full text-[10px] font-semibold">Info</span>
+                    <span className="px-2 py-0.5 bg-accent-purple/10 text-accent-purple border border-accent-purple/20 rounded-full text-[10px] font-semibold">Plugin</span>
+                </div>
+            </ShowSection>
+
+            {/* Chat Bubbles */}
+            <ShowSection title="Chat Bubbles">
+                <div className="flex flex-col gap-2">
+                    <div className="self-end max-w-[80%] px-3 py-2 bg-accent-purple/10 border border-accent-purple/20 rounded-2xl rounded-br-sm">
+                        <div className="text-xs text-text-primary">Hola, ¿cómo puedo ayudarte hoy?</div>
+                    </div>
+                    <div className="self-start max-w-[80%] px-3 py-2 bg-surface-glass border border-border-subtle rounded-2xl rounded-bl-sm">
+                        <div className="text-xs text-text-primary">Muestra el dashboard de ventas</div>
+                    </div>
+                    <div className="self-end max-w-[80%] px-3 py-2 bg-accent-blue/10 border border-accent-blue/20 rounded-2xl rounded-br-sm">
+                        <span className="inline-flex items-center gap-1 text-xs text-accent-blue font-medium">
+                            ● Generando diseño web...
+                        </span>
+                    </div>
+                </div>
+            </ShowSection>
+
+            {/* Typography */}
+            <ShowSection title="Typography">
+                <h1 className="text-xl font-bold text-text-primary">Heading Primary</h1>
+                <h2 className="text-base font-semibold text-text-secondary">Heading Secondary</h2>
+                <p className="text-sm text-text-secondary mt-1">Body text con color secundario para contenido descriptivo.</p>
+                <p className="text-xs text-text-muted mt-1">Caption text en muted para metadata y timestamps.</p>
+                <p className="text-sm text-gradient font-bold mt-2">✦ Gradient text premium</p>
+            </ShowSection>
+
+            {/* Color Palette */}
+            <ShowSection title="Accent Palette">
+                <div className="grid grid-cols-6 gap-1">
+                    {['accent-blue', 'accent-purple', 'accent-green', 'accent-red', 'accent-amber', 'accent-cyan'].map(c => (
+                        <div key={c} className="flex flex-col items-center gap-1">
+                            <div className={`w-8 h-8 rounded-lg bg-${c}`} />
+                            <span className="text-[8px] text-text-muted">{c.split('-')[1]}</span>
+                        </div>
+                    ))}
+                </div>
+            </ShowSection>
+
+            {/* Node Preview */}
+            <ShowSection title="Graph Nodes">
+                <div className="flex gap-2">
+                    {[
+                        { name: 'Dialogue', border: 'border-accent-purple/30', header: 'bg-accent-purple/10' },
+                        { name: 'Logic', border: 'border-accent-amber/30', header: 'bg-accent-amber/10' },
+                        { name: 'State', border: 'border-accent-cyan/30', header: 'bg-accent-cyan/10' },
+                    ].map(n => (
+                        <div key={n.name} className={`flex-1 bg-surface-tertiary ${n.border} border rounded-lg overflow-hidden`}>
+                            <div className={`${n.header} px-2 py-1 text-[10px] font-semibold text-text-primary`}>{n.name}</div>
+                            <div className="px-2 py-2 text-[9px] text-text-muted">Node content</div>
+                        </div>
+                    ))}
+                </div>
+            </ShowSection>
+        </div>
+    );
+}
+
+function ShowSection({ title, children }: { title: string; children: React.ReactNode }) {
+    return (
+        <div>
+            <div className="text-[10px] font-bold uppercase tracking-wider text-text-muted mb-2">{title}</div>
+            {children}
+        </div>
+    );
+}
+
+// ── Main Component ──
+
+export function TokenPreview() {
+    const [tab, setTab] = useState<TabId>('themes');
+    const { currentThemeId, setTheme, exportCSS, getAllPresets, getCurrentPreset } = useTheme();
+
+    const handleExport = useCallback(() => {
+        const css = exportCSS();
+        navigator.clipboard.writeText(css);
+    }, [exportCSS]);
+
+    const tabs: { id: TabId; icon: string; label: string }[] = [
+        { id: 'themes', icon: '🎨', label: 'Temas' },
+        { id: 'tokens', icon: '🔧', label: 'Tokens' },
+        { id: 'showroom', icon: '🏛️', label: 'Showroom' },
+    ];
+
+    return (
+        <div className="flex flex-col h-full bg-surface-primary text-text-primary font-sans overflow-hidden">
+            {/* Header */}
+            <div className="flex items-center gap-2 px-3 py-2.5 border-b border-border-subtle bg-surface-glass">
+                <span className="text-sm">🎨</span>
+                <span className="text-xs font-bold flex-1">Design System</span>
+                <span className="text-[9px] px-1.5 py-0.5 bg-accent-purple/10 text-accent-purple rounded font-mono">
+                    {getCurrentPreset().name}
+                </span>
+                <button onClick={handleExport}
+                    className="px-2.5 py-1 border border-border-default rounded-md bg-accent-purple hover:bg-accent-purple/80 text-[10px] text-text-primary font-medium cursor-pointer transition-colors">
+                    Export CSS
+                </button>
+            </div>
+
+            {/* Tab Bar */}
+            <div className="flex border-b border-border-subtle">
+                {tabs.map(t => (
+                    <button key={t.id}
+                        onClick={() => setTab(t.id)}
+                        className={`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-semibold transition-all cursor-pointer ${tab === t.id
+                            ? 'text-accent-purple border-b-2 border-accent-purple bg-accent-purple/5'
+                            : 'text-text-muted hover:text-text-secondary hover:bg-surface-glass'
+                            }`}>
+                        <span>{t.icon}</span>
+                        <span>{t.label}</span>
+                    </button>
+                ))}
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 overflow-auto custom-scrollbar">
+                {tab === 'themes' && (
+                    <div className="p-3 flex flex-col gap-3">
+                        <div className="text-[10px] font-bold uppercase tracking-wider text-text-muted">Presets</div>
+                        <div className="grid grid-cols-2 gap-2">
+                            {getAllPresets().map(p => (
+                                <PresetCard key={p.id} preset={p}
+                                    isActive={currentThemeId === p.id}
+                                    onSelect={() => setTheme(p.id)} />
+                            ))}
+                        </div>
+
+                        {/* Quick Preview */}
+                        <div className="mt-2">
+                            <div className="text-[10px] font-bold uppercase tracking-wider text-text-muted mb-2">Vista Rápida</div>
+                            <div className="surface-card p-3 flex flex-col gap-2">
+                                <div className="flex items-center gap-2">
+                                    <div className="w-8 h-8 rounded-full bg-accent-purple flex items-center justify-center text-text-inverse text-[10px] font-bold">Z</div>
+                                    <div>
+                                        <div className="text-xs font-semibold text-text-primary">Zephyr AI</div>
+                                        <div className="text-[10px] text-text-muted">Agente activo • ahora</div>
+                                    </div>
+                                </div>
+                                <div className="px-3 py-2 bg-surface-glass rounded-xl text-xs text-text-secondary">
+                                    ¿En qué puedo ayudarte hoy?
+                                </div>
+                                <div className="flex gap-1.5">
+                                    <span className="px-2 py-0.5 bg-status-ok/10 text-status-ok rounded-full text-[9px] font-medium">Online</span>
+                                    <span className="px-2 py-0.5 bg-accent-blue/10 text-accent-blue rounded-full text-[9px] font-medium">GPT-4</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {tab === 'tokens' && (
+                    <div className="p-3 flex flex-col gap-3">
+                        {TOKEN_GROUPS.map(g => (
+                            <div key={g.title}>
+                                <div className="text-[10px] font-bold uppercase tracking-wider text-text-muted mb-1.5 flex items-center gap-1">
+                                    <span>{g.icon}</span> {g.title}
+                                </div>
+                                <div className="flex flex-col gap-1">
+                                    {g.tokens.map(t => (
+                                        <TokenSwatch key={t.key} tokenKey={t.key} label={t.label} />
+                                    ))}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+
+                {tab === 'showroom' && <ComponentShowroom />}
+            </div>
+        </div>
+    );
+}

package/src/components/shell/shells/bootShells.ts

@@ -0,0 +1,31 @@
+/**
+ * Shell Boot Registration — Called once at app startup.
+ * 
+ * Registers built-in shell types (markdown, iframe) into the ShellRegistry.
+ * 
+ * NOTE: shell-vscode and shell-canvas are NOT registered here because they
+ * depend on workspace packages (@decido/react-shell, @decido/node-engine).
+ * The HOST APP must register them:
+ * 
+ *   import { registerShell } from '@decido/studio';
+ *   registerShell('shell-vscode', MyVscodeWrapper);
+ *   registerShell('shell-canvas', MyCanvasWrapper);
+ */
+import { registerShell } from '../../../store/useShellRegistry';
+import { MarkdownShell, IframeShell } from './BuiltInShells';
+import { TokenPreview } from './TokenPreview';
+import { DatawayChatShell } from './DatawayChatShell';
+import { ShellNexusPreview } from '../ShellNexusPreview';
+
+let booted = false;
+
+export function bootShells() {
+    if (booted) return;
+    booted = true;
+
+    registerShell('markdown', MarkdownShell);
+    registerShell('iframe', IframeShell);
+    registerShell('shell-theme-editor', TokenPreview);
+    registerShell('nexusai-preview', ShellNexusPreview, { icon: '🌐', color: '#3b82f6', label: 'Web Preview' });
+    registerShell('dataway-studio', DatawayChatShell, { icon: 'ƒ', color: '#14b8a6', label: 'Dataway M-Script Studio' });
+}

package/src/components/shells/CreatorShell.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Omnibar } from '../Omnibar';
+import { TransientLayer } from '../TransientLayer';
+import { PanelSplitter } from '../PanelSplitter';
+import { ActivityBar } from '../ActivityBar';
+import { GodModePanel } from '../GodModePanel';
+import { OmniAgent } from '../OmniAgent';
+import { useShellStore } from '../../store/engine';
+
+export const CreatorShell: React.FC = () => {
+    const isGodModePanelOpen = useShellStore(state => state.isGodModePanelOpen);
+    const setGodModePanelOpen = useShellStore(state => state.setGodModePanelOpen);
+
+    return (
+        <div className="relative w-screen h-screen overflow-hidden bg-surface-primary text-text-primary flex flex-col font-sans selection:bg-purple-500/30">
+            {/* Dynamic Background Noise & Gradients - Creator specific (Purple theme) */}
+            <div className="absolute inset-x-0 top-0 h-[500px] w-full bg-linear-to-b from-purple-900/20 via-fuchsia-900/10 to-transparent pointer-events-none -translate-y-1/2 opacity-50 blur-[100px]" />
+            <div className="w-full shrink-0 flex-none bg-surface-overlay backdrop-blur-md border-b border-border-subtle" style={{ height: 'max(env(safe-area-inset-top, 0px), 1.5rem)' }} />
+
+            <Omnibar />
+
+            {/* Creator layout relies heavily on the Splitter for IDE-like config */}
+            <div className="flex-1 relative overflow-hidden z-10 w-full flex flex-row border-t border-purple-500/10">
+                <ActivityBar />
+                <div className="flex-1 relative p-4 pt-0">
+                    <PanelSplitter isRoot={true} />
+                </div>
+            </div>
+
+            <div className="w-full shrink-0 flex-none" style={{ height: 'max(env(safe-area-inset-bottom, 0px), 1rem)' }} />
+
+            <TransientLayer />
+            {isGodModePanelOpen && <GodModePanel onClose={() => setGodModePanelOpen(false)} />}
+            <OmniAgent />
+        </div>
+    );
+};