@decido/shell 1.0.0 → 4.0.1

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

@@ -1,184 +0,0 @@
-import React, { useState } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Filter, TrendingUp, Users, Target, CalendarCheck,
-    Car, Eye, FileText, BarChart3, ChevronDown
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA PBI FUNNEL NODE — Mirror de PowerBI "KIA Funnel" 
-   Datos REALES Grecco Motors · Febrero 2026 · Cúcuta
-   ═══════════════════════════════════════════════════════════════ */
-
-const FUNNEL_STAGES = [
-    { stage: 'Oportunidades', total: 437, digital: 321, walkin: 116, target: null, compliance: null, color: '#3b82f6' },
-    { stage: 'Citas', total: 26, digital: 32, walkin: null, target: 40, compliance: 65, color: '#8b5cf6' },
-    { stage: 'Show Up', total: 46, digital: 16, walkin: null, target: 50, compliance: 93, color: '#a855f7' },
-    { stage: 'Tráfico', total: 35, digital: null, walkin: null, target: 60, compliance: 59, color: '#f59e0b' },
-    { stage: 'Cotizaciones', total: 71, digital: 6, walkin: null, target: 80, compliance: 89, color: '#22c55e' },
-    { stage: 'Test Drive', total: 52, digital: 9, walkin: null, target: 40, compliance: 129, color: '#06b6d4' },
-    { stage: 'Conversión', total: 25, digital: null, walkin: null, target: 15, compliance: 168, color: '#10b981' },
-];
-
-const RESULTS = [
-    { label: 'Pedidos', value: 53, icon: '📋' },
-    { label: 'Facturación', value: 15, icon: '💰' },
-    { label: 'RUNT', value: 39, icon: '🚗' },
-    { label: 'Entregas', value: 30, icon: '🤝' },
-];
-
-const PRODUCTS = [
-    { model: 'Picanto', opps: 212, pct: 48.5, color: '#ef4444' },
-    { model: 'K3 Sedan', opps: 69, pct: 15.8, color: '#f59e0b' },
-    { model: 'K3 Cross', opps: 41, pct: 9.4, color: '#22c55e' },
-    { model: 'Soluto', opps: 35, pct: 8.0, color: '#3b82f6' },
-    { model: 'Stonic', opps: 17, pct: 3.9, color: '#8b5cf6' },
-    { model: 'Sportage', opps: 12, pct: 2.7, color: '#06b6d4' },
-];
-
-const LEAD_SOURCES = [
-    { source: 'Showroom', unique: 226, sales: 82, conv: 36.3 },
-    { source: 'BTL', unique: 19, sales: 2, conv: 10.5 },
-    { source: 'Redes Sociales', unique: 489, sales: 3, conv: 0.6 },
-];
-
-const CONVERSION_BY = [
-    { label: 'Walk-in', value: 31.0, sales: 84, color: '#22c55e' },
-    { label: 'Digital', value: 7.7, sales: 8, color: '#3b82f6' },
-];
-
-export const KiaPBIFunnelNode = (props: any) => {
-    const [tab, setTab] = useState<'funnel' | 'products' | 'sources'>('funnel');
-
-    return (
-        <BaseNode {...props} title="KIA Funnel — PBI" width={520} height={640}>
-            <div className="flex flex-col h-full bg-[#1a1a2e] text-white overflow-hidden">
-
-                {/* Header — PowerBI style */}
-                <div className="flex items-center gap-3 p-3 bg-[#16213e] border-b border-blue-900/40">
-                    <div className="w-9 h-9 rounded bg-blue-600/20 flex items-center justify-center">
-                        <Filter size={16} className="text-blue-400" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
-                            KPI FUNNEL CRM
-                            <span className="text-[8px] px-1.5 py-0.5 bg-yellow-500/20 text-yellow-400 rounded">FEB 2026</span>
-                            <span className="text-[8px] px-1.5 py-0.5 bg-blue-500/20 text-blue-400 rounded">POWER BI</span>
-                        </div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · Cúcuta / Bucaramanga · Cumplimiento: 100%</div>
-                    </div>
-                </div>
-
-                {/* Tabs */}
-                <div className="flex gap-1 p-2 bg-[#16213e]/50 border-b border-blue-900/30">
-                    {([
-                        { key: 'funnel' as const, label: '📊 Funnel' },
-                        { key: 'products' as const, label: '🚗 Producto' },
-                        { key: 'sources' as const, label: '📈 Origen' },
-                    ]).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-blue-600/30 text-blue-300 border border-blue-500/30' : 'text-slate-500'
-                                }`}>
-                            {t.label}
-                        </button>
-                    ))}
-                </div>
-
-                {/* Results row */}
-                <div className="flex gap-1 px-3 py-2 border-b border-blue-900/20">
-                    {RESULTS.map(r => (
-                        <div key={r.label} className="flex-1 text-center bg-[#16213e]/50 rounded p-1.5">
-                            <div className="text-[10px]">{r.icon}</div>
-                            <div className="text-sm font-bold text-white">{r.value}</div>
-                            <div className="text-[7px] text-slate-500">{r.label}</div>
-                        </div>
-                    ))}
-                </div>
-
-                <div className="flex-1 overflow-y-auto p-3 space-y-1.5">
-
-                    {tab === 'funnel' && FUNNEL_STAGES.map(s => (
-                        <div key={s.stage} className="bg-[#16213e]/40 rounded-lg p-2.5 border border-blue-900/20">
-                            <div className="flex items-center justify-between mb-1">
-                                <span className="text-[10px] font-bold">{s.stage}</span>
-                                <div className="flex items-center gap-2">
-                                    <span className="text-sm font-black" style={{ color: s.color }}>{s.total}%</span>
-                                    {s.compliance !== null && (
-                                        <span className={`text-[8px] px-1.5 py-0.5 rounded font-bold ${s.compliance >= 100 ? 'bg-green-500/20 text-green-400' :
-                                                s.compliance >= 80 ? 'bg-yellow-500/20 text-yellow-400' : 'bg-red-500/20 text-red-400'
-                                            }`}>{s.compliance}%</span>
-                                    )}
-                                </div>
-                            </div>
-                            <div className="flex items-center gap-2">
-                                <div className="flex-1 h-2 bg-[#0a0f1a] rounded-full">
-                                    <div className="h-full rounded-full transition-all" style={{ width: `${Math.min(100, s.total)}%`, background: s.color }} />
-                                </div>
-                                {s.target && <span className="text-[8px] text-slate-500">Meta: {s.target}%</span>}
-                            </div>
-                            {s.stage === 'Oportunidades' && (
-                                <div className="flex gap-2 mt-1 text-[8px]">
-                                    <span className="text-blue-400">Digital: {s.digital}</span>
-                                    <span className="text-green-400">Walk-in: {s.walkin}</span>
-                                </div>
-                            )}
-                        </div>
-                    ))}
-
-                    {tab === 'products' && (
-                        <>
-                            <div className="flex gap-1 mb-2">
-                                {CONVERSION_BY.map(c => (
-                                    <div key={c.label} className="flex-1 bg-[#16213e]/50 rounded p-2 text-center border border-blue-900/20">
-                                        <div className="text-lg font-black" style={{ color: c.color }}>{c.value}%</div>
-                                        <div className="text-[9px] text-slate-400">{c.label} · {c.sales} ventas</div>
-                                    </div>
-                                ))}
-                            </div>
-                            {PRODUCTS.map(p => (
-                                <div key={p.model} className="bg-[#16213e]/40 rounded-lg p-2 border border-blue-900/20"
-                                    style={{ borderLeftWidth: '3px', borderLeftColor: p.color }}>
-                                    <div className="flex items-center justify-between">
-                                        <span className="text-[10px] font-bold">{p.model}</span>
-                                        <span className="text-[10px] font-bold" style={{ color: p.color }}>{p.opps} opps</span>
-                                    </div>
-                                    <div className="flex items-center gap-2 mt-0.5">
-                                        <div className="flex-1 h-1.5 bg-[#0a0f1a] rounded-full">
-                                            <div className="h-full rounded-full" style={{ width: `${p.pct * 2}%`, background: p.color }} />
-                                        </div>
-                                        <span className="text-[8px] text-slate-500">{p.pct}%</span>
-                                    </div>
-                                </div>
-                            ))}
-                        </>
-                    )}
-
-                    {tab === 'sources' && (
-                        <>
-                            {LEAD_SOURCES.map(s => (
-                                <div key={s.source} className="bg-[#16213e]/40 rounded-lg p-3 border border-blue-900/20">
-                                    <div className="flex items-center justify-between mb-1">
-                                        <span className="text-[11px] font-bold">{s.source}</span>
-                                        <span className={`text-sm font-black ${s.conv > 10 ? 'text-green-400' : s.conv > 5 ? 'text-yellow-400' : 'text-red-400'}`}>{s.conv}%</span>
-                                    </div>
-                                    <div className="flex gap-3 text-[9px]">
-                                        <span className="text-slate-400">Únicos: <span className="font-bold text-white">{s.unique}</span></span>
-                                        <span className="text-slate-400">Ventas: <span className="font-bold text-green-400">{s.sales}</span></span>
-                                    </div>
-                                    <div className="flex items-center gap-2 mt-1">
-                                        <div className="flex-1 h-1.5 bg-[#0a0f1a] rounded-full">
-                                            <div className="h-full rounded-full bg-blue-500" style={{ width: `${s.conv}%` }} />
-                                        </div>
-                                    </div>
-                                </div>
-                            ))}
-                            <div className="bg-red-500/10 rounded-lg p-2.5 border border-red-500/20 text-[9px] text-red-400">
-                                ⚠️ Redes Sociales: 489 leads pero solo 0.6% conversión. Requiere estrategia de calificación profunda.
-                            </div>
-                        </>
-                    )}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

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

@@ -1,113 +0,0 @@
-import React, { useState } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    LayoutDashboard, Users, DollarSign, Wrench, TrendingUp,
-    AlertTriangle, Shield, BarChart3, ChevronRight
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA PBI OWNERSHIP NODE — Mirror de PowerBI "KPI Financiero"
-   Ownership Management · 16 Dashboards · Grecco Motors
-   ═══════════════════════════════════════════════════════════════ */
-
-const VISION360 = [
-    { kpi: 'ONE PAGE REPORT', status: 'active', color: '#22c55e' },
-    { kpi: 'RESUMEN INDICADORES', status: 'active', color: '#22c55e' },
-];
-
-const CLIENTE = [
-    { kpi: 'CLIENTE RESUMEN', desc: 'Overview satisfacción & retención', status: 'active', value: '95.3 NPS', color: '#3b82f6' },
-    { kpi: 'CAUSA RAÍZ', desc: 'Análisis root-cause insatisfacción', status: 'active', value: '3 issues', color: '#3b82f6' },
-    { kpi: 'IVUO', desc: 'Índice Venta Unidades Ocasión', status: 'active', value: '12%', color: '#3b82f6' },
-];
-
-const FINANCIERO = [
-    { kpi: 'FINANCIERO RESUMEN', desc: 'P&L, márgenes, ingresos', status: 'active', value: '$2.4B', color: '#f59e0b' },
-    { kpi: 'RETENCIÓN', desc: 'Clientes que regresan a servicio', status: 'active', value: '78%', color: '#f59e0b' },
-    { kpi: 'PRODUCTIVIDAD', desc: 'Horas facturadas / disponibles', status: 'active', value: '92%', color: '#f59e0b' },
-];
-
-const OPERATIVO = [
-    { kpi: 'CAPACIDAD INSTALADA', desc: 'Bahías activas vs total', status: 'active', value: '85%', color: '#ef4444' },
-    { kpi: 'VARADOS', desc: 'Vehículos inmovilizados', status: 'warning', value: '4 uds', color: '#ef4444' },
-    { kpi: 'GARANTÍAS', desc: 'Reclamaciones en proceso', status: 'active', value: '12 activas', color: '#ef4444' },
-    { kpi: 'CAMPAÑAS', desc: 'Recalls & campañas activas', status: 'active', value: '2 activas', color: '#ef4444' },
-    { kpi: 'RECUPERACIÓN GARANTÍAS', desc: 'Monto recuperado vs reclamado', status: 'active', value: '94%', color: '#ef4444' },
-    { kpi: 'PRESUPUESTO GARANTÍAS', desc: 'Budget vs ejecutado', status: 'active', value: '88%', color: '#ef4444' },
-];
-
-const SECTIONS = [
-    { title: '🔭 Visión 360', items: VISION360, colorLabel: 'text-green-400' },
-    { title: '👤 Cliente', items: CLIENTE, colorLabel: 'text-blue-400' },
-    { title: '💰 Financiero', items: FINANCIERO, colorLabel: 'text-yellow-400' },
-    { title: '⚙️ Operativo', items: OPERATIVO, colorLabel: 'text-red-400' },
-];
-
-export const KiaPBIOwnershipNode = (props: any) => {
-    const [expanded, setExpanded] = useState<string | null>('⚙️ Operativo');
-
-    return (
-        <BaseNode {...props} title="Ownership Mgmt — PBI" width={500} height={640}>
-            <div className="flex flex-col h-full bg-[#1a1a2e] text-white overflow-hidden">
-
-                {/* Header */}
-                <div className="flex items-center gap-3 p-3 bg-[#16213e] border-b border-slate-700">
-                    <div className="w-9 h-9 rounded bg-slate-600/20 flex items-center justify-center">
-                        <LayoutDashboard size={16} className="text-slate-300" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
-                            OWNERSHIP MANAGEMENT
-                            <span className="text-[8px] px-1.5 py-0.5 bg-yellow-500/20 text-yellow-400 rounded">16 DASHBOARDS</span>
-                            <span className="text-[8px] px-1.5 py-0.5 bg-slate-500/20 text-slate-300 rounded">POWER BI</span>
-                        </div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · KIA EV3 GT-line · "Movement that inspires"</div>
-                    </div>
-                </div>
-
-                {/* Summary */}
-                <div className="flex gap-1 px-3 py-2 border-b border-slate-800">
-                    {[
-                        { label: 'Visión 360', val: '2', color: 'text-green-400', icon: '🔭' },
-                        { label: 'Cliente', val: '3', color: 'text-blue-400', icon: '👤' },
-                        { label: 'Financiero', val: '3', color: 'text-yellow-400', icon: '💰' },
-                        { label: 'Operativo', val: '6', color: 'text-red-400', icon: '⚙️' },
-                    ].map(s => (
-                        <div key={s.label} className="flex-1 text-center bg-[#16213e]/50 rounded p-1.5 border border-slate-800/50">
-                            <div className="text-[10px]">{s.icon}</div>
-                            <div className={`text-sm font-bold ${s.color}`}>{s.val}</div>
-                            <div className="text-[7px] text-slate-500">{s.label}</div>
-                        </div>
-                    ))}
-                </div>
-
-                <div className="flex-1 overflow-y-auto p-3 space-y-2">
-                    {SECTIONS.map(section => (
-                        <div key={section.title}>
-                            <button onClick={() => setExpanded(expanded === section.title ? null : section.title)}
-                                className="w-full flex items-center justify-between bg-[#16213e]/60 rounded p-2 border border-slate-800/30 mb-1">
-                                <span className={`text-[10px] font-bold ${section.colorLabel}`}>{section.title}</span>
-                                <div className="flex items-center gap-1">
-                                    <span className="text-[8px] text-slate-500">{section.items.length} tabs</span>
-                                    <ChevronRight size={10} className={`text-slate-500 transition-transform ${expanded === section.title ? 'rotate-90' : ''}`} />
-                                </div>
-                            </button>
-                            {expanded === section.title && section.items.map((item: any) => (
-                                <div key={item.kpi} className="bg-[#16213e]/30 rounded p-2 ml-2 mb-1 border border-slate-800/20 flex items-center gap-2">
-                                    <div className={`w-1.5 h-8 rounded-full ${item.status === 'warning' ? 'bg-yellow-500 animate-pulse' : 'bg-green-500'}`} />
-                                    <div className="flex-1">
-                                        <div className="text-[9px] font-bold">{item.kpi}</div>
-                                        {item.desc && <div className="text-[8px] text-slate-500">{item.desc}</div>}
-                                    </div>
-                                    {item.value && (
-                                        <span className="text-[9px] font-bold" style={{ color: item.color }}>{item.value}</span>
-                                    )}
-                                </div>
-                            ))}
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

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

@@ -1,143 +0,0 @@
-import React, { useState } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Award, Star, TrendingUp, Users, Wrench,
-    Megaphone, ShoppingBag, Monitor, BarChart3
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA PBI PARTNER NODE — Mirror de PowerBI "Informe Partner Program"
-   Datos REALES Grecco Motors · Enero 2026 · Clasificación S
-   ═══════════════════════════════════════════════════════════════ */
-
-const AREAS = [
-    {
-        name: 'Customer Experience', score: 100.00, weight: 15, icon: '😊', color: '#22c55e',
-        items: ['NPS Ventas: 95.3%', 'NPS Posventa: 99.4%', 'Mystery Shopper: ✓', 'Índice Satisfacción: ✓']
-    },
-    {
-        name: 'Transf. Digital', score: 100.00, weight: 10, icon: '💻', color: '#3b82f6',
-        items: ['ERP Integración: 100%', 'Activación: 100%', 'Uso herramientas: ✓']
-    },
-    {
-        name: 'Servicio', score: 100.63, weight: 20, icon: '🔧', color: '#8b5cf6',
-        items: ['Gestión Financiera: ✓', 'Proyectos: ✓', 'Garantías: ✓', 'Soporte Técnico: 83.3%', 'Campañas: 87.5%']
-    },
-    {
-        name: 'Business Mgmt', score: 99.96, weight: 15, icon: '📊', color: '#06b6d4',
-        items: ['Reportes financieros: ✓', 'Gestión gastos: ✓', 'Márgenes brutos: ✓']
-    },
-    {
-        name: 'Marketing', score: 99.29, weight: 10, icon: '📢', color: '#f59e0b',
-        items: ['Brand Alignment: ✓', 'Lead Quality: ✓', 'Tiempo respuesta: 96.5%']
-    },
-    {
-        name: 'Comercial', score: 95.01, weight: 20, icon: '🤝', color: '#ef4444',
-        items: ['RUNT Target: ✓', 'Wholesale: ✓', 'Conversión: 75% ⚠️', 'Cotización: 50% ⚠️']
-    },
-    {
-        name: 'Repuestos', score: 91.76, weight: 10, icon: '📦', color: '#f97316',
-        items: ['Compras importador: ✓', 'Accesorios/Vehículo: 69.2% ⚠️']
-    },
-];
-
-const HISTORY = [
-    { month: 'Nov 2025', score: 98.2 },
-    { month: 'Dic 2025', score: 99.4 },
-    { month: 'Ene 2026', score: 97.43 },
-];
-
-export const KiaPBIPartnerNode = (props: any) => {
-    const [tab, setTab] = useState<'overview' | 'detail'>('overview');
-    const avgScore = 97.43;
-
-    return (
-        <BaseNode {...props} title="Partner Program — PBI" width={520} height={640}>
-            <div className="flex flex-col h-full bg-[#1a1a2e] text-white overflow-hidden">
-
-                {/* Header */}
-                <div className="flex items-center gap-3 p-3 bg-[#16213e] border-b border-yellow-900/40">
-                    <div className="w-9 h-9 rounded bg-yellow-600/20 flex items-center justify-center">
-                        <Award size={16} className="text-yellow-400" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
-                            PARTNER PROGRAM
-                            <span className="text-[8px] px-1.5 py-0.5 bg-yellow-500/20 text-yellow-400 rounded font-black">PLATINUM</span>
-                            <span className="text-[8px] px-1.5 py-0.5 bg-indigo-500/20 text-indigo-400 rounded">POWER BI</span>
-                        </div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · Ene 2026 · Promedio 3M: 98.56%</div>
-                    </div>
-                </div>
-
-                {/* Score Header */}
-                <div className="flex items-center gap-3 px-3 py-2 border-b border-yellow-900/20">
-                    <div className="flex-1 text-center bg-[#16213e]/50 rounded-lg p-2 border border-yellow-900/20">
-                        <div className="text-3xl font-black text-yellow-400">S</div>
-                        <div className="text-[8px] text-slate-500">Clasificación</div>
-                    </div>
-                    <div className="flex-1 text-center bg-[#16213e]/50 rounded-lg p-2 border border-yellow-900/20">
-                        <div className="text-xl font-black text-green-400">{avgScore}%</div>
-                        <div className="text-[8px] text-slate-500">Resultado Enero</div>
-                    </div>
-                    <div className="flex-1 text-center bg-[#16213e]/50 rounded-lg p-2 border border-yellow-900/20">
-                        <div className="text-xl font-black text-blue-400">98.56%</div>
-                        <div className="text-[8px] text-slate-500">Promedio 3M</div>
-                    </div>
-                </div>
-
-                {/* Tabs */}
-                <div className="flex gap-1 p-2 bg-[#16213e]/30 border-b border-yellow-900/20">
-                    {([
-                        { key: 'overview' as const, label: '📊 Áreas' },
-                        { key: 'detail' as const, label: '📋 Detalle' },
-                    ]).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-yellow-600/20 text-yellow-300 border border-yellow-500/30' : 'text-slate-500'
-                                }`}>
-                            {t.label}
-                        </button>
-                    ))}
-                </div>
-
-                <div className="flex-1 overflow-y-auto p-3 space-y-1.5">
-
-                    {tab === 'overview' && AREAS.map(a => (
-                        <div key={a.name} className="bg-[#16213e]/40 rounded-lg p-2 border border-yellow-900/10"
-                            style={{ borderLeftWidth: '3px', borderLeftColor: a.color }}>
-                            <div className="flex items-center justify-between mb-1">
-                                <span className="text-[10px] font-bold">{a.icon} {a.name}</span>
-                                <div className="flex items-center gap-2">
-                                    <span className="text-[8px] text-slate-500">Peso: {a.weight}%</span>
-                                    <span className={`text-[11px] font-black ${a.score >= 100 ? 'text-green-400' : a.score >= 95 ? 'text-yellow-400' : 'text-red-400'}`}>
-                                        {a.score.toFixed(2)}%
-                                    </span>
-                                </div>
-                            </div>
-                            <div className="h-1.5 bg-[#0a0f1a] rounded-full">
-                                <div className="h-full rounded-full" style={{ width: `${Math.min(100, a.score)}%`, background: a.color }} />
-                            </div>
-                        </div>
-                    ))}
-
-                    {tab === 'detail' && AREAS.map(a => (
-                        <div key={a.name} className="bg-[#16213e]/40 rounded-lg p-2.5 border border-yellow-900/10">
-                            <div className="flex items-center justify-between mb-1.5">
-                                <span className="text-[10px] font-bold">{a.icon} {a.name}</span>
-                                <span className="text-[10px] font-black" style={{ color: a.color }}>{a.score.toFixed(2)}%</span>
-                            </div>
-                            <div className="space-y-0.5">
-                                {a.items.map(item => (
-                                    <div key={item} className={`text-[8px] flex items-center gap-1 ${item.includes('⚠️') ? 'text-yellow-400' : 'text-slate-400'}`}>
-                                        <span>{item.includes('⚠️') ? '⚠️' : '✅'}</span>
-                                        <span>{item.replace(' ⚠️', '')}</span>
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};

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

@@ -1,120 +0,0 @@
-import React, { useState } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    DollarSign, Car, TrendingUp, Zap, BarChart3
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA PBI PRECIOS NODE — Mirror de PowerBI "PRECIOS - KIA Colombia"
-   Datos REALES · Febrero 2026 · Industria: 1,125 units RUNT
-   ═══════════════════════════════════════════════════════════════ */
-
-const LINEUP = [
-    { model: 'Picanto', segment: 'A-Bajo', type: 'ICE', priceMin: 58, priceMax: 70, runt: 400, ms: 83.5, color: '#ef4444' },
-    { model: 'Soluto', segment: 'A-Medio', type: 'ICE', priceMin: 69.9, priceMax: 74.8, runt: 45, ms: null, color: '#f97316' },
-    { model: 'K3 Sedan', segment: 'B-Sedan', type: 'ICE', priceMin: 84, priceMax: 92.7, runt: 60, ms: null, color: '#f59e0b' },
-    { model: 'K4', segment: 'C-Sedan', type: 'ICE', priceMin: 120, priceMax: 137, runt: 18, ms: null, color: '#eab308' },
-    { model: 'K3 Cross', segment: 'B-Cross', type: 'ICE', priceMin: 88, priceMax: 94, runt: 52, ms: null, color: '#22c55e' },
-    { model: 'Sonet', segment: 'B-SUV', type: 'ICE', priceMin: 92, priceMax: 101.2, runt: 35, ms: null, color: '#10b981' },
-    { model: 'Stonic', segment: 'B-SUV', type: 'ICE', priceMin: 100, priceMax: 110.2, runt: 42, ms: null, color: '#06b6d4' },
-    { model: 'Seltos', segment: 'C-SUV', type: 'ICE', priceMin: 115, priceMax: 128.3, runt: 38, ms: null, color: '#3b82f6' },
-    { model: 'Sportage', segment: 'C-SUV', type: 'ICE', priceMin: 130, priceMax: 180, runt: 55, ms: null, color: '#6366f1' },
-    { model: 'Niro Híbrido', segment: 'C-SUV', type: 'HEV', priceMin: 129, priceMax: 156, runt: 20, ms: null, color: '#8b5cf6' },
-    { model: 'EV3', segment: 'C-EV', type: 'EV', priceMin: 143, priceMax: 163, runt: 15, ms: null, color: '#a855f7' },
-    { model: 'EV5', segment: 'D-EV', type: 'EV', priceMin: 156, priceMax: 196, runt: 8, ms: null, color: '#d946ef' },
-    { model: 'Tasman', segment: 'Pickup', type: 'ICE', priceMin: 190, priceMax: 261, runt: 12, ms: null, color: '#ec4899' },
-    { model: 'EV9', segment: 'E-EV', type: 'EV', priceMin: 340, priceMax: 360, runt: 3, ms: null, color: '#f43f5e' },
-];
-
-const fmtP = (n: number) => `$${n}M`;
-
-export const KiaPBIPreciosNode = (props: any) => {
-    const [filter, setFilter] = useState<'all' | 'ice' | 'ev'>('all');
-
-    const filtered = filter === 'all' ? LINEUP : LINEUP.filter(l => filter === 'ev' ? (l.type === 'EV' || l.type === 'HEV') : l.type === 'ICE');
-    const totalRunt = LINEUP.reduce((s, l) => s + l.runt, 0);
-
-    return (
-        <BaseNode {...props} title="Precios KIA — PBI" width={520} height={640}>
-            <div className="flex flex-col h-full bg-[#1a1a2e] text-white overflow-hidden">
-
-                {/* Header */}
-                <div className="flex items-center gap-3 p-3 bg-[#16213e] border-b border-emerald-900/40">
-                    <div className="w-9 h-9 rounded bg-emerald-600/20 flex items-center justify-center">
-                        <DollarSign size={16} className="text-emerald-400" />
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide flex items-center gap-2">
-                            PRECIOS — KIA COLOMBIA
-                            <span className="text-[8px] px-1.5 py-0.5 bg-yellow-500/20 text-yellow-400 rounded">FEB 2026</span>
-                            <span className="text-[8px] px-1.5 py-0.5 bg-emerald-500/20 text-emerald-400 rounded">POWER BI</span>
-                        </div>
-                        <div className="text-[10px] text-slate-400">Industria: 1,125 RUNT (+207% vs Ene) · 617 Auto + 500 SUV</div>
-                    </div>
-                </div>
-
-                {/* Summary KPIs */}
-                <div className="flex gap-1 px-3 py-2 border-b border-emerald-900/20">
-                    {[
-                        { label: 'RUNT Total', val: '1,125', color: 'text-emerald-400' },
-                        { label: 'Modelos', val: '14+', color: 'text-blue-400' },
-                        { label: 'Rango', val: '$58M-$360M', color: 'text-yellow-400' },
-                        { label: 'vs Ene', val: '+207%', color: 'text-green-400' },
-                    ].map(k => (
-                        <div key={k.label} className="flex-1 text-center bg-[#16213e]/50 rounded p-1.5 border border-emerald-900/10">
-                            <div className={`text-[10px] font-bold ${k.color}`}>{k.val}</div>
-                            <div className="text-[7px] text-slate-500">{k.label}</div>
-                        </div>
-                    ))}
-                </div>
-
-                {/* Filter */}
-                <div className="flex gap-1 p-2 bg-[#16213e]/30 border-b border-emerald-900/20">
-                    {([
-                        { key: 'all' as const, label: '🚗 Todos' },
-                        { key: 'ice' as const, label: '⛽ ICE' },
-                        { key: 'ev' as const, label: '⚡ EV/HEV' },
-                    ]).map(t => (
-                        <button key={t.key} onClick={() => setFilter(t.key)}
-                            className={`flex-1 py-1.5 rounded text-[9px] font-bold transition-all ${filter === t.key ? 'bg-emerald-600/20 text-emerald-300 border border-emerald-500/30' : 'text-slate-500'
-                                }`}>
-                            {t.label}
-                        </button>
-                    ))}
-                </div>
-
-                <div className="flex-1 overflow-y-auto p-3 space-y-1">
-                    {filtered.map(l => (
-                        <div key={l.model} className="bg-[#16213e]/40 rounded-lg p-2 border border-emerald-900/10"
-                            style={{ borderLeftWidth: '3px', borderLeftColor: l.color }}>
-                            <div className="flex items-center justify-between mb-0.5">
-                                <div className="flex items-center gap-1.5">
-                                    <span className="text-[10px] font-bold">{l.model}</span>
-                                    <span className={`text-[7px] px-1 py-0.5 rounded ${l.type === 'EV' ? 'bg-green-500/20 text-green-400' :
-                                        l.type === 'HEV' ? 'bg-cyan-500/20 text-cyan-400' : 'bg-slate-700 text-slate-400'
-                                        }`}>{l.type}</span>
-                                    <span className="text-[7px] text-slate-600">{l.segment}</span>
-                                </div>
-                                <span className="text-[9px] text-slate-400">{l.runt} RUNT</span>
-                            </div>
-                            <div className="flex items-center gap-2">
-                                <div className="flex-1">
-                                    <div className="flex items-center justify-between text-[9px]">
-                                        <span className="text-emerald-400 font-bold">{fmtP(l.priceMin)}</span>
-                                        <span className="text-[7px] text-slate-600">—</span>
-                                        <span className="text-yellow-400 font-bold">{fmtP(l.priceMax)}</span>
-                                    </div>
-                                    <div className="h-1 bg-[#0a0f1a] rounded-full mt-0.5 relative">
-                                        <div className="absolute h-full rounded-full bg-linear-to-r from-emerald-500 to-yellow-500"
-                                            style={{ left: `${(l.priceMin / 360) * 100}%`, width: `${((l.priceMax - l.priceMin) / 360) * 100}%` }} />
-                                    </div>
-                                </div>
-                                {l.ms && <span className="text-[8px] font-bold text-red-400 ml-1">{l.ms}% MS</span>}
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};