@decido/shell 1.0.0 → 4.0.2

package/src/components/playground/demos/KiaShowroomNode.tsx

@@ -1,194 +0,0 @@
-import React, { useState } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Car, Palette, Calendar, Scale, ChevronRight,
-    Star, Fuel, Gauge, Zap, Check, ArrowLeftRight
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA SHOWROOM DIGITAL NODE — Configurador · Grecco Motors
-   Catálogo, configurador modelo+color+paquete, comparador, agenda
-   ═══════════════════════════════════════════════════════════════ */
-
-interface Model {
-    name: string;
-    price: number;
-    type: 'ICE' | 'HEV' | 'EV';
-    hp: number;
-    kmpl: number;
-    colors: { name: string; hex: string }[];
-    packages: { name: string; price: number }[];
-}
-
-const MODELS: Model[] = [
-    { name: 'Sportage HEV', price: 159900000, type: 'HEV', hp: 230, kmpl: 18.2, colors: [{ name: 'Snow White', hex: '#f1f0eb' }, { name: 'Steel Grey', hex: '#71717a' }, { name: 'Black Cherry', hex: '#4a0e1b' }], packages: [{ name: 'Comfort', price: 0 }, { name: 'Premium', price: 8500000 }, { name: 'GT-Line', price: 14200000 }] },
-    { name: 'Seltos', price: 109900000, type: 'ICE', hp: 160, kmpl: 14.5, colors: [{ name: 'Gravity Grey', hex: '#52525b' }, { name: 'Orange Fusion', hex: '#ea580c' }, { name: 'White Pearl', hex: '#f5f5f4' }], packages: [{ name: 'Zenith', price: 0 }, { name: 'Premium', price: 6200000 }] },
-    { name: 'EV6 GT', price: 289900000, type: 'EV', hp: 585, kmpl: 0, colors: [{ name: 'Moonscape', hex: '#a8a29e' }, { name: 'Yacht Blue', hex: '#1e40af' }, { name: 'Snow White', hex: '#f1f0eb' }], packages: [{ name: 'Wind', price: 0 }, { name: 'GT-Line', price: 12000000 }, { name: 'GT', price: 28000000 }] },
-    { name: 'Picanto', price: 59900000, type: 'ICE', hp: 84, kmpl: 19.8, colors: [{ name: 'Signal Red', hex: '#dc2626' }, { name: 'Lime Green', hex: '#65a30d' }, { name: 'Alice Blue', hex: '#60a5fa' }], packages: [{ name: 'Emotion', price: 0 }, { name: 'Emotion+', price: 3500000 }] },
-    { name: 'EV9', price: 359900000, type: 'EV', hp: 384, kmpl: 0, colors: [{ name: 'Ocean Blue', hex: '#1d4ed8' }, { name: 'Pebble Grey', hex: '#a1a1aa' }, { name: 'Aurora Black', hex: '#18181b' }], packages: [{ name: 'Earth', price: 0 }, { name: 'GT-Line', price: 18000000 }] },
-];
-
-const fmtPrice = (n: number) => `$${(n / 1000000).toFixed(0)}M`;
-
-const SLOTS = ['9:00 AM', '10:30 AM', '12:00 PM', '2:00 PM', '3:30 PM', '5:00 PM'];
-
-export const KiaShowroomNode = (props: any) => {
-    const [tab, setTab] = useState<'config' | 'compare' | 'agenda'>('config');
-    const [selected, setSelected] = useState(0);
-    const [colorIdx, setColorIdx] = useState(0);
-    const [pkgIdx, setPkgIdx] = useState(0);
-    const [compareIdx, setCompareIdx] = useState(2);
-
-    const model = MODELS[selected];
-    const totalPrice = model.price + model.packages[pkgIdx].price;
-
-    return (
-        <BaseNode {...props} title="Kia Showroom Digital" width={500} height={620}>
-            <div className="flex flex-col h-full bg-slate-950 text-white overflow-hidden">
-
-                {/* Header */}
-                <div className="flex items-center gap-3 p-3 bg-slate-900 border-b border-slate-800">
-                    <div className="w-9 h-9 rounded-full bg-indigo-600/20 flex items-center justify-center border border-indigo-500/30">
-                        <Car size={16} className="text-indigo-400" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide">SHOWROOM DIGITAL</div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · {MODELS.length} modelos · Configurador 360°</div>
-                    </div>
-                </div>
-
-                {/* Tabs */}
-                <div className="flex gap-1 p-2 bg-slate-900/50 border-b border-slate-800">
-                    {([
-                        { key: 'config' as const, label: '🎨 Configurador' },
-                        { key: 'compare' as const, label: '⚖️ Comparar' },
-                        { key: 'agenda' as const, label: '📅 Test Drive' },
-                    ]).map(t => (
-                        <button key={t.key} onClick={() => setTab(t.key)}
-                            className={`flex-1 py-1.5 rounded text-[9px] font-bold transition-all ${tab === t.key ? 'bg-indigo-600/20 text-indigo-400 border border-indigo-500/30' : 'text-slate-500'
-                                }`}>
-                            {t.label}
-                        </button>
-                    ))}
-                </div>
-
-                {/* Content */}
-                <div className="flex-1 overflow-y-auto p-3 space-y-2">
-
-                    {tab === 'config' && (
-                        <>
-                            {/* Model selector */}
-                            <div className="flex gap-1 flex-wrap">
-                                {MODELS.map((m, i) => (
-                                    <button key={m.name} onClick={() => { setSelected(i); setColorIdx(0); setPkgIdx(0); }}
-                                        className={`px-2 py-1 rounded text-[9px] font-bold transition-all ${i === selected ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-500'
-                                            }`}>{m.name}</button>
-                                ))}
-                            </div>
-
-                            {/* Color preview */}
-                            <div className="bg-slate-900/50 rounded-lg p-3 border border-slate-800">
-                                <div className="h-24 rounded-lg flex items-center justify-center mb-2"
-                                    style={{ background: `linear-gradient(135deg, ${model.colors[colorIdx].hex}44 0%, ${model.colors[colorIdx].hex}22 100%)`, border: `1px solid ${model.colors[colorIdx].hex}44` }}>
-                                    <Car size={48} style={{ color: model.colors[colorIdx].hex }} />
-                                </div>
-                                <div className="flex gap-2 justify-center">
-                                    {model.colors.map((c, i) => (
-                                        <button key={c.name} onClick={() => setColorIdx(i)}
-                                            className={`w-6 h-6 rounded-full border-2 transition-all ${i === colorIdx ? 'border-white scale-110' : 'border-slate-700'}`}
-                                            style={{ background: c.hex }} title={c.name} />
-                                    ))}
-                                </div>
-                                <div className="text-[9px] text-center text-slate-400 mt-1">{model.colors[colorIdx].name}</div>
-                            </div>
-
-                            {/* Specs */}
-                            <div className="flex gap-2">
-                                <div className="flex-1 bg-slate-900/50 rounded p-2 border border-slate-800 text-center">
-                                    <div className="text-sm font-bold text-blue-400">{model.hp} HP</div>
-                                    <div className="text-[8px] text-slate-500">Potencia</div>
-                                </div>
-                                <div className="flex-1 bg-slate-900/50 rounded p-2 border border-slate-800 text-center">
-                                    <div className="text-sm font-bold text-green-400">{model.type === 'EV' ? '500+ km' : `${model.kmpl} km/l`}</div>
-                                    <div className="text-[8px] text-slate-500">{model.type === 'EV' ? 'Autonomía' : 'Rendimiento'}</div>
-                                </div>
-                                <div className="flex-1 bg-slate-900/50 rounded p-2 border border-slate-800 text-center">
-                                    <div className={`text-sm font-bold ${model.type === 'EV' ? 'text-green-400' : model.type === 'HEV' ? 'text-cyan-400' : 'text-slate-400'}`}>{model.type}</div>
-                                    <div className="text-[8px] text-slate-500">Motor</div>
-                                </div>
-                            </div>
-
-                            {/* Package */}
-                            <div className="bg-slate-900/50 rounded-lg p-2 border border-slate-800">
-                                <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">Paquete</div>
-                                <div className="flex gap-1">
-                                    {model.packages.map((p, i) => (
-                                        <button key={p.name} onClick={() => setPkgIdx(i)}
-                                            className={`flex-1 py-1.5 rounded text-[9px] font-bold ${i === pkgIdx ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-500'
-                                                }`}>{p.name} {p.price > 0 ? `+${fmtPrice(p.price)}` : ''}</button>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* Total */}
-                            <div className="bg-indigo-500/10 rounded-lg p-3 border border-indigo-500/20 text-center">
-                                <div className="text-[9px] text-slate-400">PRECIO TOTAL</div>
-                                <div className="text-xl font-black text-indigo-400">{fmtPrice(totalPrice)}</div>
-                                <div className="text-[9px] text-slate-500">{model.name} · {model.colors[colorIdx].name} · {model.packages[pkgIdx].name}</div>
-                            </div>
-                        </>
-                    )}
-
-                    {tab === 'compare' && (
-                        <>
-                            <div className="flex gap-1 mb-2">
-                                {MODELS.map((m, i) => i !== selected && (
-                                    <button key={m.name} onClick={() => setCompareIdx(i)}
-                                        className={`px-2 py-1 rounded text-[9px] font-bold ${i === compareIdx ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-500'}`}>{m.name}</button>
-                                ))}
-                            </div>
-                            <div className="bg-slate-900/50 rounded-lg border border-slate-800 overflow-hidden">
-                                <div className="grid grid-cols-3 text-[9px] font-bold border-b border-slate-800 bg-slate-800/50">
-                                    <div className="p-2 text-slate-400">Spec</div>
-                                    <div className="p-2 text-indigo-400 text-center">{model.name}</div>
-                                    <div className="p-2 text-purple-400 text-center">{MODELS[compareIdx].name}</div>
-                                </div>
-                                {[
-                                    { label: 'Precio', a: fmtPrice(model.price), b: fmtPrice(MODELS[compareIdx].price) },
-                                    { label: 'Motor', a: model.type, b: MODELS[compareIdx].type },
-                                    { label: 'Potencia', a: `${model.hp} HP`, b: `${MODELS[compareIdx].hp} HP` },
-                                    { label: 'Rendimiento', a: model.type === 'EV' ? '500+ km' : `${model.kmpl} km/l`, b: MODELS[compareIdx].type === 'EV' ? '500+ km' : `${MODELS[compareIdx].kmpl} km/l` },
-                                    { label: 'Colores', a: model.colors.length.toString(), b: MODELS[compareIdx].colors.length.toString() },
-                                    { label: 'Paquetes', a: model.packages.length.toString(), b: MODELS[compareIdx].packages.length.toString() },
-                                ].map(r => (
-                                    <div key={r.label} className="grid grid-cols-3 text-[9px] border-b border-slate-800/50">
-                                        <div className="p-1.5 text-slate-500">{r.label}</div>
-                                        <div className="p-1.5 text-center font-semibold">{r.a}</div>
-                                        <div className="p-1.5 text-center font-semibold">{r.b}</div>
-                                    </div>
-                                ))}
-                            </div>
-                        </>
-                    )}
-
-                    {tab === 'agenda' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">📅 Agendar Test Drive — {model.name}</div>
-                            <div className="grid grid-cols-3 gap-1.5">
-                                {SLOTS.map(s => (
-                                    <button key={s} className="bg-slate-900/50 border border-slate-800 rounded-lg p-2 text-center hover:bg-indigo-600/20 hover:border-indigo-500/30 transition-all">
-                                        <div className="text-[10px] font-bold">{s}</div>
-                                        <div className="text-[8px] text-green-400">Disponible</div>
-                                    </button>
-                                ))}
-                            </div>
-                            <div className="bg-green-500/10 rounded-lg p-2.5 border border-green-500/20 text-[9px] text-green-400">
-                                ✅ Selecciona un slot y se enviará confirmación por WhatsApp al cliente.
-                            </div>
-                        </>
-                    )}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

package/src/components/playground/demos/KiaStoreNode.tsx

@@ -1,215 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    ShoppingCart, Search, Star, Heart, Package, Truck,
-    Plus, Minus, X, Sparkles, Tag, TrendingUp, BarChart3, Eye
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA STORE NODE — Accessories Store · Grecco Motors
-   E-Commerce con recomendaciones IA y analytics de revenue
-   ═══════════════════════════════════════════════════════════════ */
-
-const PRODUCTS = [
-    { id: 1, name: 'Tapetes Originales Sportage', price: 280000, rating: 4.8, reviews: 142, category: 'Interior', image: '🏎️', badge: 'Más vendido', stock: 23 },
-    { id: 2, name: 'Cámara de Reversa HD 4K', price: 450000, rating: 4.6, reviews: 89, category: 'Tecnología', image: '📷', badge: null, stock: 8 },
-    { id: 3, name: 'Barras de Techo Seltos', price: 670000, rating: 4.9, reviews: 56, category: 'Exterior', image: '🔩', badge: 'Premium', stock: 12 },
-    { id: 4, name: 'Kit Stickers Deportivos GT', price: 150000, rating: 4.3, reviews: 210, category: 'Exterior', image: '🎨', badge: null, stock: 45 },
-    { id: 5, name: 'Cargador Inalámbrico QI 15W', price: 320000, rating: 4.7, reviews: 74, category: 'Tecnología', image: '🔋', badge: 'Nuevo', stock: 18 },
-    { id: 6, name: 'Protector de Baúl EV6', price: 190000, rating: 4.5, reviews: 38, category: 'Interior', image: '🧳', badge: null, stock: 31 },
-    { id: 7, name: 'Polarizado Nano-Cerámico 3M', price: 850000, rating: 4.9, reviews: 167, category: 'Servicio', image: '🪟', badge: 'Top Rated', stock: 99 },
-    { id: 8, name: 'Dash Cam Inteligente IA', price: 520000, rating: 4.4, reviews: 43, category: 'Tecnología', image: '📹', badge: 'Nuevo', stock: 15 },
-];
-
-const AI_RECOMMENDATIONS = [
-    { text: 'Combo Sportage: Tapetes + Protector Baúl con 15% OFF', related: [1, 6], savings: '$70.500' },
-    { text: 'Kit Tech: Cámara 4K + Cargador QI + Dash Cam = 12% OFF', related: [2, 5, 8], savings: '$154.800' },
-    { text: 'Ideal para tu EV6: Barras de Techo + Kit GT', related: [3, 4], savings: '$82.000' },
-];
-
-const jitter = (n: number, r: number) => n + Math.round((Math.random() - 0.5) * r);
-
-export const KiaStoreNode = (props: any) => {
-    const [cart, setCart] = useState<Record<number, number>>({});
-    const [search, setSearch] = useState('');
-    const [favorites, setFavorites] = useState<Set<number>>(new Set([1, 3, 7]));
-    const [showCart, setShowCart] = useState(false);
-    const [showAI, setShowAI] = useState(false);
-    const [monthRevenue] = useState(47800000);
-    const [todayOrders] = useState(12);
-
-    const cartCount = Object.values(cart).reduce((a, b) => a + b, 0);
-    const cartTotal = Object.entries(cart).reduce((acc, [id, qty]) => {
-        const product = PRODUCTS.find(p => p.id === Number(id));
-        return acc + (product ? product.price * qty : 0);
-    }, 0);
-
-    const addToCart = (id: number) => setCart(prev => ({ ...prev, [id]: (prev[id] || 0) + 1 }));
-    const removeFromCart = (id: number) => setCart(prev => {
-        const next = { ...prev };
-        if (next[id] > 1) next[id]--;
-        else delete next[id];
-        return next;
-    });
-    const toggleFav = (id: number) => setFavorites(prev => {
-        const next = new Set(prev);
-        next.has(id) ? next.delete(id) : next.add(id);
-        return next;
-    });
-
-    const filtered = PRODUCTS.filter(p =>
-        p.name.toLowerCase().includes(search.toLowerCase()) ||
-        p.category.toLowerCase().includes(search.toLowerCase())
-    );
-
-    const formatCOP = (n: number) => `$${n.toLocaleString('es-CO')}`;
-
-    return (
-        <BaseNode {...props} title="Kia Accessories Store" width={480} height={660}>
-            <div className="flex flex-col h-full bg-slate-950 text-white overflow-hidden">
-
-                {/* Header */}
-                <div className="flex items-center gap-3 p-3 bg-slate-900 border-b border-slate-800">
-                    <div className="w-9 h-9 rounded-full bg-red-600/20 flex items-center justify-center border border-red-500/30">
-                        <span className="text-red-500 font-bold text-[7px] tracking-widest">KIA</span>
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide">ACCESSORIES STORE</div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · {PRODUCTS.length} productos</div>
-                    </div>
-                    <button
-                        onClick={() => { setShowAI(!showAI); setShowCart(false); }}
-                        className={`p-1.5 rounded-lg border transition-all ${showAI ? 'bg-violet-500/20 border-violet-500/40 text-violet-400' : 'bg-slate-800 border-slate-700 text-slate-400'}`}
-                    >
-                        <Sparkles size={14} />
-                    </button>
-                    <button
-                        onClick={() => { setShowCart(!showCart); setShowAI(false); }}
-                        className="relative p-1.5 rounded-lg bg-slate-800 border border-slate-700 text-slate-400 hover:text-white transition-all"
-                    >
-                        <ShoppingCart size={14} />
-                        {cartCount > 0 && (
-                            <span className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-[8px] font-bold flex items-center justify-center">{cartCount}</span>
-                        )}
-                    </button>
-                </div>
-
-                {/* Revenue Mini Stats */}
-                <div className="flex items-center justify-between px-3 py-1.5 bg-slate-900/50 border-b border-slate-800 text-[10px]">
-                    <span className="text-slate-500">Revenue Mes: <span className="text-green-400 font-bold">{formatCOP(monthRevenue)}</span></span>
-                    <span className="text-slate-500">Pedidos Hoy: <span className="text-blue-400 font-bold">{todayOrders}</span></span>
-                    <span className="text-slate-500">Ticket Prom: <span className="text-purple-400 font-bold">{formatCOP(Math.round(monthRevenue / 128))}</span></span>
-                </div>
-
-                {/* Search */}
-                <div className="p-2 border-b border-slate-800">
-                    <div className="relative">
-                        <Search size={12} className="absolute left-2.5 top-2.5 text-slate-500" />
-                        <input
-                            type="text" placeholder="Buscar accesorios..."
-                            value={search} onChange={e => setSearch(e.target.value)}
-                            className="w-full bg-slate-900 border border-slate-800 rounded-lg py-2 pl-8 pr-3 text-xs text-white focus:outline-none focus:border-red-500/50 transition-colors"
-                        />
-                    </div>
-                </div>
-
-                {/* AI Recommendations */}
-                {showAI && (
-                    <div className="p-2 border-b border-slate-800 bg-violet-500/5">
-                        <div className="text-[9px] text-violet-400 font-bold uppercase mb-1.5 flex items-center gap-1"><Sparkles size={10} /> Combos IA — Ahorra más</div>
-                        <div className="space-y-1.5">
-                            {AI_RECOMMENDATIONS.map((r, i) => (
-                                <div key={i} className="bg-slate-900 border border-violet-500/20 rounded-lg p-2">
-                                    <div className="text-[10px] text-slate-300 mb-1">{r.text}</div>
-                                    <div className="flex items-center justify-between">
-                                        <div className="flex gap-1">
-                                            {r.related.map(id => (
-                                                <button key={id} onClick={() => addToCart(id)} className="bg-violet-500/20 hover:bg-violet-500/30 text-violet-300 px-1.5 py-0.5 rounded text-[8px] transition-colors">
-                                                    + {PRODUCTS.find(p => p.id === id)?.name.split(' ').slice(0, 2).join(' ')}
-                                                </button>
-                                            ))}
-                                        </div>
-                                        <span className="text-[9px] text-green-400 font-bold">Ahorra {r.savings}</span>
-                                    </div>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                )}
-
-                {/* Cart Drawer */}
-                {showCart && (
-                    <div className="p-2 border-b border-slate-800 bg-red-500/5">
-                        <div className="text-[9px] text-red-400 font-bold uppercase mb-1.5 flex items-center gap-1"><ShoppingCart size={10} /> Carrito ({cartCount})</div>
-                        {Object.keys(cart).length === 0 ? (
-                            <div className="text-[10px] text-slate-500 text-center py-3">Tu carrito está vacío</div>
-                        ) : (
-                            <>
-                                {Object.entries(cart).map(([id, qty]) => {
-                                    const product = PRODUCTS.find(p => p.id === Number(id))!;
-                                    return (
-                                        <div key={id} className="flex items-center gap-2 py-1 text-[10px]">
-                                            <span className="text-sm">{product.image}</span>
-                                            <div className="flex-1 min-w-0 truncate text-slate-300">{product.name}</div>
-                                            <div className="flex items-center gap-1">
-                                                <button onClick={() => removeFromCart(Number(id))} className="p-0.5 bg-slate-800 rounded"><Minus size={8} /></button>
-                                                <span className="w-4 text-center font-bold">{qty}</span>
-                                                <button onClick={() => addToCart(Number(id))} className="p-0.5 bg-slate-800 rounded"><Plus size={8} /></button>
-                                            </div>
-                                            <span className="font-bold text-white">{formatCOP(product.price * qty)}</span>
-                                        </div>
-                                    );
-                                })}
-                                <div className="flex justify-between items-center pt-2 mt-1 border-t border-slate-800">
-                                    <span className="text-xs font-bold">Total</span>
-                                    <span className="text-sm font-bold text-red-400">{formatCOP(cartTotal)}</span>
-                                </div>
-                                <button className="w-full mt-2 bg-red-600 hover:bg-red-500 text-white text-xs font-bold py-2 rounded-lg flex items-center justify-center gap-2 transition-all">
-                                    <Truck size={12} /> Agendar Instalación
-                                </button>
-                            </>
-                        )}
-                    </div>
-                )}
-
-                {/* Product Grid */}
-                <div className="flex-1 overflow-y-auto p-2">
-                    <div className="grid grid-cols-2 gap-2">
-                        {filtered.map(p => (
-                            <div key={p.id} className="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden hover:border-slate-700 transition-all group">
-                                <div className="relative h-16 bg-slate-800/50 flex items-center justify-center">
-                                    <span className="text-3xl group-hover:scale-110 transition-transform">{p.image}</span>
-                                    <button onClick={() => toggleFav(p.id)} className="absolute top-1.5 right-1.5">
-                                        <Heart size={12} className={favorites.has(p.id) ? 'fill-red-500 text-red-500' : 'text-slate-500'} />
-                                    </button>
-                                    {p.badge && (
-                                        <span className={`absolute top-1.5 left-1.5 text-[7px] font-bold px-1.5 py-0.5 rounded ${p.badge === 'Más vendido' ? 'bg-green-500' : p.badge === 'Premium' ? 'bg-blue-500' : p.badge === 'Top Rated' ? 'bg-yellow-500 text-black' : 'bg-red-500'}`}>
-                                            {p.badge}
-                                        </span>
-                                    )}
-                                </div>
-                                <div className="p-2">
-                                    <div className="text-[10px] font-semibold leading-tight mb-0.5">{p.name}</div>
-                                    <div className="flex items-center gap-1 text-[9px] mb-1">
-                                        <Star size={8} className="text-yellow-400 fill-yellow-400" />
-                                        <span className="text-slate-400">{p.rating} ({p.reviews})</span>
-                                        <span className="text-slate-600">·</span>
-                                        <span className={`${p.stock < 10 ? 'text-red-400' : 'text-slate-500'}`}>
-                                            {p.stock < 10 ? `¡${p.stock} left!` : `${p.stock} disp`}
-                                        </span>
-                                    </div>
-                                    <div className="flex items-center justify-between">
-                                        <span className="text-xs font-bold text-white">{formatCOP(p.price)}</span>
-                                        <button onClick={() => addToCart(p.id)} className="p-1 bg-red-600 hover:bg-red-500 rounded text-white transition-colors">
-                                            <Plus size={10} />
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

package/src/components/playground/demos/KiaSustainabilityNode.tsx

@@ -1,173 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Leaf, Zap, Droplets, Sun, TrendingUp,
-    BarChart3, Award, Battery, Car, Factory
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA SUSTAINABILITY NODE — ESG & Green Dealer · Grecco Motors
-   Huella CO₂, mix EV/ICE, ESG indicators, Green Dealer Score
-   ═══════════════════════════════════════════════════════════════ */
-
-const CARBON = [
-    { source: 'Showroom (electricidad)', co2: 12.4, unit: 'ton/mes', trend: -8, color: '#f59e0b' },
-    { source: 'Taller (operación)', co2: 8.2, unit: 'ton/mes', trend: -5, color: '#ef4444' },
-    { source: 'Flota Demo (combustible)', co2: 3.1, unit: 'ton/mes', trend: -22, color: '#3b82f6' },
-    { source: 'V2G Grid Return', co2: -4.6, unit: 'ton/mes', trend: 15, color: '#22c55e' },
-    { source: 'Paneles Solares', co2: -2.8, unit: 'ton/mes', trend: 12, color: '#10b981' },
-];
-
-const EV_MIX = [
-    { month: 'Sep', ev: 8, hev: 15, ice: 77 },
-    { month: 'Oct', ev: 10, hev: 16, ice: 74 },
-    { month: 'Nov', ev: 12, hev: 18, ice: 70 },
-    { month: 'Dic', ev: 14, hev: 19, ice: 67 },
-    { month: 'Ene', ev: 16, hev: 20, ice: 64 },
-    { month: 'Feb', ev: 18, hev: 22, ice: 60 },
-];
-
-const ESG_INDICATORS = [
-    { category: '🌱 Ambiental', score: 82, items: ['Huella de carbono ↓18%', 'EV ratio 18%', 'Reciclaje 92%'] },
-    { category: '👥 Social', score: 88, items: ['NPS 95.3', 'Capacitación 100%', 'Equity hiring ✓'] },
-    { category: '🏛️ Gobernanza', score: 91, items: ['Compliance 98%', 'Auditoría Q4 ✓', 'Anti-corruption ✓'] },
-];
-
-export const KiaSustainabilityNode = (props: any) => {
-    const [tab, setTab] = useState<'carbon' | 'ev' | 'esg'>('carbon');
-    const [carbon, setCarbon] = useState(CARBON.map(c => ({ ...c })));
-
-    const netCarbon = carbon.reduce((s, c) => s + c.co2, 0).toFixed(1);
-    const currentEV = EV_MIX[EV_MIX.length - 1];
-    const greenScore = Math.round(ESG_INDICATORS.reduce((s, e) => s + e.score, 0) / ESG_INDICATORS.length);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setCarbon(prev => prev.map(c => ({
-                ...c,
-                co2: parseFloat((c.co2 + (Math.random() - 0.52) * 0.2).toFixed(1)),
-            })));
-        }, 6000);
-        return () => clearInterval(interval);
-    }, []);
-
-    return (
-        <BaseNode {...props} title="Kia Sustainability" width={480} height={620}>
-            <div className="flex flex-col h-full bg-[#040a06] text-white overflow-hidden">
-
-                {/* Header */}
-                <div className="flex items-center gap-3 p-3 bg-[#0a1a0e] border-b border-green-900/30">
-                    <div className="w-9 h-9 rounded-full bg-green-600/20 flex items-center justify-center border border-green-500/30">
-                        <Leaf size={16} className="text-green-400" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
-                            SUSTAINABILITY & ESG
-                            <span className="text-[8px] px-1.5 py-0.5 bg-green-500/20 text-green-400 rounded">{greenScore} GREEN SCORE</span>
-                        </div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · Net CO₂: {netCarbon} ton/mes · EV Mix {currentEV.ev}%</div>
-                    </div>
-                </div>
-
-                {/* Tabs */}
-                <div className="flex gap-1 p-2 bg-[#060e08] border-b border-green-900/20">
-                    {([
-                        { key: 'carbon' as const, label: '🌍 Carbono' },
-                        { key: 'ev' as const, label: '⚡ EV Mix' },
-                        { key: 'esg' as const, label: '📊 ESG' },
-                    ]).map(t => (
-                        <button key={t.key} onClick={() => setTab(t.key)}
-                            className={`flex-1 py-1.5 rounded text-[9px] font-bold transition-all ${tab === t.key ? 'bg-green-600/20 text-green-400 border border-green-500/30' : 'text-slate-500'
-                                }`}>
-                            {t.label}
-                        </button>
-                    ))}
-                </div>
-
-                <div className="flex-1 overflow-y-auto p-3 space-y-2">
-
-                    {tab === 'carbon' && (
-                        <>
-                            <div className="bg-green-500/5 rounded-lg p-3 border border-green-500/20 text-center">
-                                <div className="text-[9px] text-slate-400 uppercase">Huella Neta Mensual</div>
-                                <div className={`text-2xl font-black ${parseFloat(netCarbon) > 0 ? 'text-yellow-400' : 'text-green-400'}`}>{netCarbon} ton CO₂</div>
-                                <div className="text-[9px] text-green-400">↓ 18% vs año anterior</div>
-                            </div>
-                            {carbon.map(c => (
-                                <div key={c.source} className="bg-slate-900/50 rounded-lg p-2.5 border border-slate-800"
-                                    style={{ borderLeftWidth: '2px', borderLeftColor: c.color }}>
-                                    <div className="flex items-center justify-between">
-                                        <span className="text-[10px] font-semibold">{c.source}</span>
-                                        <div className="flex items-center gap-2">
-                                            <span className={`text-[8px] font-bold ${c.trend < 0 ? 'text-green-400' : 'text-red-400'}`}>
-                                                {c.trend > 0 ? '↑' : '↓'}{Math.abs(c.trend)}%
-                                            </span>
-                                            <span className={`text-sm font-bold ${c.co2 < 0 ? 'text-green-400' : 'text-yellow-400'}`}>{c.co2}</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            ))}
-                        </>
-                    )}
-
-                    {tab === 'ev' && (
-                        <>
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1">Mix Ventas EV / HEV / ICE — 6 meses</div>
-                            {EV_MIX.map(m => (
-                                <div key={m.month} className="bg-slate-900/50 rounded-lg p-2 border border-slate-800">
-                                    <div className="text-[9px] text-slate-400 font-bold mb-1">{m.month}</div>
-                                    <div className="flex h-3 rounded-full overflow-hidden">
-                                        <div className="bg-green-500 transition-all" style={{ width: `${m.ev}%` }} title={`EV ${m.ev}%`} />
-                                        <div className="bg-cyan-500 transition-all" style={{ width: `${m.hev}%` }} title={`HEV ${m.hev}%`} />
-                                        <div className="bg-slate-700 transition-all" style={{ width: `${m.ice}%` }} title={`ICE ${m.ice}%`} />
-                                    </div>
-                                    <div className="flex justify-between text-[8px] text-slate-500 mt-0.5">
-                                        <span className="text-green-400">EV {m.ev}%</span>
-                                        <span className="text-cyan-400">HEV {m.hev}%</span>
-                                        <span className="text-slate-500">ICE {m.ice}%</span>
-                                    </div>
-                                </div>
-                            ))}
-                            <div className="bg-green-500/5 rounded-lg p-2.5 border border-green-500/20 text-[9px] text-green-400">
-                                🎯 Meta KIA 2027: EV 35% · Actual: {currentEV.ev}% · Progreso: {((currentEV.ev / 35) * 100).toFixed(0)}%
-                            </div>
-                        </>
-                    )}
-
-                    {tab === 'esg' && (
-                        <>
-                            <div className="bg-green-500/5 rounded-lg p-3 border border-green-500/20 flex items-center justify-between">
-                                <div>
-                                    <div className="text-[9px] text-slate-400">GREEN DEALER SCORE</div>
-                                    <div className="text-2xl font-black text-green-400">{greenScore}</div>
-                                </div>
-                                <Award size={32} className="text-green-500/30" />
-                            </div>
-                            {ESG_INDICATORS.map(e => (
-                                <div key={e.category} className="bg-slate-900/50 rounded-lg p-3 border border-slate-800">
-                                    <div className="flex items-center justify-between mb-1.5">
-                                        <span className="text-[11px] font-bold">{e.category}</span>
-                                        <span className="text-sm font-bold text-green-400">{e.score}/100</span>
-                                    </div>
-                                    <div className="flex items-center gap-2 mb-2">
-                                        <div className="flex-1 h-2 bg-slate-800 rounded-full">
-                                            <div className="h-full rounded-full bg-linear-to-r from-green-600 to-emerald-400"
-                                                style={{ width: `${e.score}%` }} />
-                                        </div>
-                                    </div>
-                                    <div className="space-y-0.5">
-                                        {e.items.map(item => (
-                                            <div key={item} className="text-[8px] text-slate-400 flex items-center gap-1">
-                                                <span className="text-green-400">✓</span> {item}
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                            ))}
-                        </>
-                    )}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};