@decido/shell 1.0.0 → 4.0.2

package/src/components/shell/TemplateLibrary.tsx

@@ -1,195 +0,0 @@
-/**
- * TemplateLibrary — Starter template gallery for Web Preview.
- *
- * Sprint AK: Shows when preview is empty. Click a template → loads in preview.
- */
-import React from 'react';
-import { motion } from 'motion/react';
-
-interface Template {
-    id: string;
-    title: string;
-    category: string;
-    emoji: string;
-    gradient: string;
-    description: string;
-    html: string;
-    css: string;
-    js: string;
-}
-
-const TEMPLATES: Template[] = [
-    {
-        id: 'landing-saas',
-        title: 'Landing SaaS',
-        category: 'Marketing',
-        emoji: '🚀',
-        gradient: 'from-violet-600 to-indigo-600',
-        description: 'Hero con CTA, features, testimonios',
-        html: `<section class="min-h-screen bg-linear-to-br from-violet-950 via-indigo-950 to-black text-text-primary">
-  <nav class="flex items-center justify-between px-8 py-6">
-    <span class="text-xl font-bold bg-linear-to-r from-violet-400 to-indigo-400 bg-clip-text text-transparent">NexusAI</span>
-    <div class="flex gap-6 text-sm text-text-secondary"><a href="#" class="hover:text-text-primary">Features</a><a href="#" class="hover:text-text-primary">Pricing</a><a href="#" class="hover:text-text-primary">Docs</a></div>
-    <button class="px-5 py-2 bg-violet-600 hover:bg-violet-500 rounded-full text-sm font-medium transition">Get Started</button>
-  </nav>
-  <div class="flex flex-col items-center text-center pt-24 px-6">
-    <span class="px-4 py-1.5 bg-violet-500/10 border border-violet-500/20 rounded-full text-xs text-violet-300 mb-6">✨ Now in Beta</span>
-    <h1 class="text-5xl md:text-7xl font-bold leading-tight max-w-4xl">Build faster with <span class="bg-linear-to-r from-violet-400 to-cyan-400 bg-clip-text text-transparent">AI-powered</span> tools</h1>
-    <p class="text-lg text-text-secondary mt-6 max-w-2xl">Ship products 10x faster. Our AI understands your codebase and generates production-ready code in seconds.</p>
-    <div class="flex gap-4 mt-10"><button class="px-8 py-3 bg-violet-600 hover:bg-violet-500 rounded-full font-medium transition">Start Free Trial</button><button class="px-8 py-3 bg-surface-glass hover:bg-surface-glass border border-border-default rounded-full font-medium transition">Watch Demo →</button></div>
-  </div>
-</section>`,
-        css: '',
-        js: '',
-    },
-    {
-        id: 'dashboard',
-        title: 'Dashboard',
-        category: 'App',
-        emoji: '📊',
-        gradient: 'from-cyan-600 to-blue-600',
-        description: 'Métricas, gráficos, sidebar',
-        html: `<div class="flex h-screen bg-surface-primary text-text-primary">
-  <aside class="w-56 bg-surface-secondary border-r border-border-subtle p-4 flex flex-col gap-2">
-    <span class="text-lg font-bold text-cyan-400 mb-4">📊 Dashboard</span>
-    <a class="px-3 py-2 rounded-lg bg-cyan-500/10 text-cyan-300 text-sm">Overview</a>
-    <a class="px-3 py-2 rounded-lg text-text-muted hover:text-text-primary text-sm">Analytics</a>
-    <a class="px-3 py-2 rounded-lg text-text-muted hover:text-text-primary text-sm">Reports</a>
-    <a class="px-3 py-2 rounded-lg text-text-muted hover:text-text-primary text-sm">Settings</a>
-  </aside>
-  <main class="flex-1 p-8 overflow-auto">
-    <h2 class="text-2xl font-bold mb-6">Good morning 👋</h2>
-    <div class="grid grid-cols-3 gap-4 mb-8">
-      <div class="bg-surface-secondary border border-border-subtle rounded-2xl p-5"><p class="text-xs text-text-muted mb-1">Revenue</p><p class="text-3xl font-bold text-emerald-400">$48,352</p><p class="text-xs text-emerald-500 mt-1">↑ 12.5%</p></div>
-      <div class="bg-surface-secondary border border-border-subtle rounded-2xl p-5"><p class="text-xs text-text-muted mb-1">Users</p><p class="text-3xl font-bold text-cyan-400">2,847</p><p class="text-xs text-cyan-500 mt-1">↑ 8.3%</p></div>
-      <div class="bg-surface-secondary border border-border-subtle rounded-2xl p-5"><p class="text-xs text-text-muted mb-1">Conversion</p><p class="text-3xl font-bold text-violet-400">3.24%</p><p class="text-xs text-violet-500 mt-1">↑ 2.1%</p></div>
-    </div>
-    <div class="bg-surface-secondary border border-border-subtle rounded-2xl p-6"><h3 class="text-sm font-medium text-text-secondary mb-4">Recent Activity</h3><div class="space-y-3"><div class="flex items-center gap-3 text-sm"><span class="w-8 h-8 rounded-full bg-emerald-500/10 flex items-center justify-center text-emerald-400">$</span><span class="text-text-primary">New subscription — Pro Plan</span><span class="ml-auto text-text-muted">2m ago</span></div><div class="flex items-center gap-3 text-sm"><span class="w-8 h-8 rounded-full bg-cyan-500/10 flex items-center justify-center text-cyan-400">👤</span><span class="text-text-primary">New user registered</span><span class="ml-auto text-text-muted">15m ago</span></div></div></div>
-  </main>
-</div>`,
-        css: '',
-        js: '',
-    },
-    {
-        id: 'portfolio',
-        title: 'Portfolio',
-        category: 'Personal',
-        emoji: '🎨',
-        gradient: 'from-pink-600 to-rose-600',
-        description: 'Bio, proyectos, contacto',
-        html: `<div class="min-h-screen bg-surface-primary text-text-primary px-6 py-16 flex flex-col items-center">
-  <div class="max-w-2xl w-full">
-    <div class="flex items-center gap-4 mb-8"><div class="w-16 h-16 rounded-full bg-linear-to-br from-pink-500 to-rose-500 flex items-center justify-center text-2xl">JR</div><div><h1 class="text-2xl font-bold">Maria Garcia</h1><p class="text-text-muted">Full-Stack Designer & Developer</p></div></div>
-    <p class="text-text-secondary leading-relaxed mb-12">I craft beautiful digital experiences that bridge the gap between design and engineering. 5+ years building products for startups and enterprises.</p>
-    <h2 class="text-sm font-bold text-text-muted uppercase tracking-wider mb-4">Selected Work</h2>
-    <div class="grid grid-cols-2 gap-4 mb-12">
-      <div class="group bg-surface-tertiary rounded-2xl overflow-hidden border border-border-subtle hover:border-pink-500/30 transition"><div class="h-32 bg-linear-to-br from-pink-500/20 to-purple-500/20"></div><div class="p-4"><h3 class="font-medium">E-Commerce Platform</h3><p class="text-xs text-text-muted mt-1">React, Node.js, Stripe</p></div></div>
-      <div class="group bg-surface-tertiary rounded-2xl overflow-hidden border border-border-subtle hover:border-cyan-500/30 transition"><div class="h-32 bg-linear-to-br from-cyan-500/20 to-blue-500/20"></div><div class="p-4"><h3 class="font-medium">AI Dashboard</h3><p class="text-xs text-text-muted mt-1">Vue, Python, TensorFlow</p></div></div>
-    </div>
-    <div class="flex gap-4 text-sm text-text-muted"><a href="#" class="hover:text-text-primary">GitHub</a><a href="#" class="hover:text-text-primary">LinkedIn</a><a href="#" class="hover:text-text-primary">Twitter</a><a href="#" class="hover:text-text-primary">Email</a></div>
-  </div>
-</div>`,
-        css: '',
-        js: '',
-    },
-    {
-        id: 'pricing',
-        title: 'Pricing',
-        category: 'Marketing',
-        emoji: '💳',
-        gradient: 'from-emerald-600 to-teal-600',
-        description: '3 planes con toggle mensual/anual',
-        html: `<section class="min-h-screen bg-surface-primary text-text-primary py-20 px-6">
-  <div class="max-w-5xl mx-auto text-center">
-    <h2 class="text-4xl font-bold mb-4">Simple, transparent pricing</h2>
-    <p class="text-text-muted mb-12">No hidden fees. Cancel anytime.</p>
-    <div class="grid md:grid-cols-3 gap-6">
-      <div class="bg-surface-tertiary border border-border-subtle rounded-2xl p-8 text-left"><p class="text-sm text-text-muted mb-2">Starter</p><p class="text-4xl font-bold mb-1">$9<span class="text-lg text-text-muted">/mo</span></p><p class="text-xs text-text-muted mb-6">Perfect for getting started</p><ul class="space-y-2 text-sm text-text-secondary mb-8"><li>✓ 5 projects</li><li>✓ Basic analytics</li><li>✓ Email support</li></ul><button class="w-full py-2.5 bg-surface-glass hover:bg-surface-glass border border-border-default rounded-xl text-sm transition">Get Started</button></div>
-      <div class="bg-surface-tertiary border-2 border-emerald-500/50 rounded-2xl p-8 text-left relative"><span class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-0.5 bg-emerald-500 rounded-full text-xs font-medium">Popular</span><p class="text-sm text-text-muted mb-2">Pro</p><p class="text-4xl font-bold mb-1">$29<span class="text-lg text-text-muted">/mo</span></p><p class="text-xs text-text-muted mb-6">For growing teams</p><ul class="space-y-2 text-sm text-text-secondary mb-8"><li>✓ Unlimited projects</li><li>✓ Advanced analytics</li><li>✓ Priority support</li><li>✓ Custom domains</li></ul><button class="w-full py-2.5 bg-emerald-600 hover:bg-emerald-500 rounded-xl text-sm font-medium transition">Get Started</button></div>
-      <div class="bg-surface-tertiary border border-border-subtle rounded-2xl p-8 text-left"><p class="text-sm text-text-muted mb-2">Enterprise</p><p class="text-4xl font-bold mb-1">$99<span class="text-lg text-text-muted">/mo</span></p><p class="text-xs text-text-muted mb-6">For large organizations</p><ul class="space-y-2 text-sm text-text-secondary mb-8"><li>✓ Everything in Pro</li><li>✓ SSO & SAML</li><li>✓ Dedicated support</li><li>✓ SLA guarantee</li></ul><button class="w-full py-2.5 bg-surface-glass hover:bg-surface-glass border border-border-default rounded-xl text-sm transition">Contact Sales</button></div>
-    </div>
-  </div>
-</section>`,
-        css: '',
-        js: '',
-    },
-    {
-        id: 'login',
-        title: 'Login',
-        category: 'Auth',
-        emoji: '🔐',
-        gradient: 'from-amber-600 to-orange-600',
-        description: 'Form con social login y glassmorphism',
-        html: `<div class="min-h-screen bg-surface-primary flex items-center justify-center p-6">
-  <div class="w-full max-w-sm bg-surface-glass backdrop-blur-xl border border-border-default rounded-3xl p-8 text-text-primary">
-    <div class="text-center mb-8"><span class="text-4xl">🔐</span><h2 class="text-2xl font-bold mt-3">Welcome back</h2><p class="text-sm text-text-muted mt-1">Sign in to your account</p></div>
-    <div class="space-y-4">
-      <div><label class="text-xs text-text-muted mb-1 block">Email</label><input type="email" placeholder="you@email.com" class="w-full px-4 py-3 bg-surface-glass border border-border-default rounded-xl text-sm outline-hidden focus:border-amber-500/50 transition"/></div>
-      <div><label class="text-xs text-text-muted mb-1 block">Password</label><input type="password" placeholder="••••••••" class="w-full px-4 py-3 bg-surface-glass border border-border-default rounded-xl text-sm outline-hidden focus:border-amber-500/50 transition"/></div>
-      <button class="w-full py-3 bg-linear-to-r from-amber-500 to-orange-500 hover:from-amber-400 hover:to-orange-400 rounded-xl text-sm font-medium transition">Sign In</button>
-      <div class="flex items-center gap-3 my-2"><div class="flex-1 h-px bg-surface-glass"></div><span class="text-xs text-text-muted">or</span><div class="flex-1 h-px bg-surface-glass"></div></div>
-      <button class="w-full py-3 bg-surface-glass hover:bg-surface-glass border border-border-default rounded-xl text-sm transition flex items-center justify-center gap-2">🌐 Continue with Google</button>
-    </div>
-    <p class="text-xs text-text-muted text-center mt-6">Don't have an account? <a href="#" class="text-amber-400 hover:underline">Sign up</a></p>
-  </div>
-</div>`,
-        css: '',
-        js: '',
-    },
-    {
-        id: 'blog',
-        title: 'Blog',
-        category: 'Content',
-        emoji: '📝',
-        gradient: 'from-sky-600 to-blue-600',
-        description: 'Lista de artículos con cards',
-        html: `<div class="min-h-screen bg-surface-primary text-text-primary py-16 px-6">
-  <div class="max-w-3xl mx-auto">
-    <h1 class="text-4xl font-bold mb-2">Blog</h1>
-    <p class="text-text-muted mb-12">Thoughts on design, technology, and building products.</p>
-    <div class="space-y-6">
-      <article class="group bg-surface-tertiary border border-border-subtle rounded-2xl p-6 hover:border-sky-500/30 transition cursor-pointer"><div class="flex items-center gap-2 text-xs text-text-muted mb-3"><span class="px-2 py-0.5 bg-sky-500/10 text-sky-400 rounded">Design</span><span>Mar 15, 2026</span><span>· 5 min read</span></div><h2 class="text-xl font-bold group-hover:text-sky-400 transition">The Future of AI-Powered Design Tools</h2><p class="text-sm text-text-muted mt-2 leading-relaxed">How generative AI is transforming the way we build user interfaces and what it means for designers.</p></article>
-      <article class="group bg-surface-tertiary border border-border-subtle rounded-2xl p-6 hover:border-violet-500/30 transition cursor-pointer"><div class="flex items-center gap-2 text-xs text-text-muted mb-3"><span class="px-2 py-0.5 bg-violet-500/10 text-violet-400 rounded">Engineering</span><span>Mar 10, 2026</span><span>· 8 min read</span></div><h2 class="text-xl font-bold group-hover:text-violet-400 transition">Building a Real-Time Collaboration Engine</h2><p class="text-sm text-text-muted mt-2 leading-relaxed">A deep dive into the architecture behind our multi-user editing system using CRDTs and WebSockets.</p></article>
-      <article class="group bg-surface-tertiary border border-border-subtle rounded-2xl p-6 hover:border-emerald-500/30 transition cursor-pointer"><div class="flex items-center gap-2 text-xs text-text-muted mb-3"><span class="px-2 py-0.5 bg-emerald-500/10 text-emerald-400 rounded">Product</span><span>Mar 5, 2026</span><span>· 3 min read</span></div><h2 class="text-xl font-bold group-hover:text-emerald-400 transition">Shipping Faster with Component Libraries</h2><p class="text-sm text-text-muted mt-2 leading-relaxed">How we reduced our time-to-market by 60% by investing in a robust design system.</p></article>
-    </div>
-  </div>
-</div>`,
-        css: '',
-        js: '',
-    },
-];
-
-interface TemplateLibraryProps {
-    onSelect: (template: { html: string; css: string; js: string }) => void;
-}
-
-export const TemplateLibrary = React.memo(function TemplateLibrary({ onSelect }: TemplateLibraryProps) {
-    return (
-        <div className="flex flex-col items-center justify-center h-full p-6 overflow-auto">
-            <div className="text-center mb-8">
-                <span className="text-4xl">🎨</span>
-                <h2 className="text-xl font-bold text-text-primary mt-3">Elige un template</h2>
-                <p className="text-sm text-text-muted mt-1">Click para cargar — luego refina con IA</p>
-            </div>
-            <div className="grid grid-cols-2 lg:grid-cols-3 gap-3 max-w-3xl w-full">
-                {TEMPLATES.map((t, i) => (
-                    <motion.button
-                        key={t.id}
-                        initial={{ opacity: 0, y: 12 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ delay: i * 0.05 }}
-                        onClick={() => onSelect({ html: t.html, css: t.css, js: t.js })}
-                        className="group bg-surface-tertiary border border-border-subtle hover:border-border-strong rounded-2xl p-4 text-left transition-all hover:scale-[1.02] hover:shadow-xl overflow-hidden"
-                    >
-                        <div className={`h-20 rounded-xl bg-linear-to-br ${t.gradient} opacity-30 group-hover:opacity-50 transition mb-3 flex items-center justify-center`}>
-                            <span className="text-3xl opacity-70">{t.emoji}</span>
-                        </div>
-                        <h3 className="text-sm font-bold text-text-primary">{t.title}</h3>
-                        <p className="text-[10px] text-text-muted mt-0.5">{t.category}</p>
-                        <p className="text-[10px] text-text-muted mt-1">{t.description}</p>
-                    </motion.button>
-                ))}
-            </div>
-        </div>
-    );
-});

package/src/components/shell/layoutConstants.ts

@@ -1,35 +0,0 @@
-/**
- * Layout configurator constants — region labels, grid positions, slot options.
- * Extracted from LayoutConfigurator.tsx for reuse and cleaner main component.
- */
-import type { RegionId, SlotComponentId } from '../../store/layoutPresets';
-
-export const REGION_LABELS: Record<RegionId, string> = {
-    R1: 'Left Top',
-    R2: 'Left Bottom',
-    R3: 'Right Top',
-    R4: 'Right Bottom',
-    R5: 'Top Edge',
-    R6: 'Status Bar',
-};
-
-export const REGION_POSITIONS: Record<RegionId, string> = {
-    R1: 'col-start-1 row-start-1',
-    R2: 'col-start-1 row-start-2',
-    R3: 'col-start-3 row-start-1',
-    R4: 'col-start-3 row-start-2',
-    R5: 'col-start-1 col-span-3 row-start-0',
-    R6: 'col-start-2 col-span-1 row-start-3',
-};
-
-/** Available components for slot assignment */
-export const SLOT_OPTIONS: { id: SlotComponentId; label: string }[] = [
-    { id: null, label: '— Vacío —' },
-    { id: 'chat', label: 'Chat' },
-    { id: 'debug', label: 'Debug Panel' },
-    { id: 'terminal', label: 'Terminal' },
-    { id: 'canvas', label: 'Canvas / MorphShell' },
-    { id: 'graph-editor', label: 'Graph Editor' },
-    { id: 'timeline-editor', label: 'Timeline Editor' },
-    { id: 'app-sidebar', label: 'App Sidebar' },
-];

package/src/components/shell/morphStageMeta.ts

@@ -1,15 +0,0 @@
-/**
- * MorphShell stage metadata — icon + color per MorphStageType.
- * Extracted from MorphShell.tsx for reuse.
- */
-import { Box, CodeXml, Droplets, Puzzle, FileBox, LayoutDashboard } from 'lucide-react';
-import type { MorphStageType } from '../../store/layoutPresets';
-
-export const STAGE_META: Record<string, { icon: React.ComponentType<any>; color: string }> = {
-    '3d':        { icon: Box,              color: 'text-cyan-400' },
-    '2d':        { icon: LayoutDashboard,  color: 'text-emerald-400' },
-    'workbench': { icon: CodeXml,          color: 'text-purple-400' },
-    'liquid':    { icon: Droplets,         color: 'text-blue-400' },
-    'custom':    { icon: Puzzle,           color: 'text-orange-400' },
-    'artifact':  { icon: FileBox,          color: 'text-yellow-400' },
-};