@decido/shell 1.0.0 → 4.0.1

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

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

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

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