@decido/plugin-chameleon 1.0.0

package/src/index.ts

@@ -0,0 +1,121 @@
+import { definePlugin } from '@decido/sdk';
+import type { DecidoApp } from '@decido/sdk';
+import { VentasView } from './views/roles/VentasView';
+import { CajaView } from './views/roles/CajaView';
+import { PlantaView } from './views/roles/PlantaView';
+import { DespachoView } from './views/roles/DespachoView';
+import { DiscoveryAdminView } from './views/DiscoveryAdminView';
+import { MadefrontKanbanView } from './views/MadefrontKanbanView';
+import { MadefrontExcelView } from './views/MadefrontExcelView';
+import { DatabaseAdminView } from './views/DatabaseAdminView';
+import { DatawayStudioView } from './views/DatawayStudioView';
+
+let eventUnsubscribers: (() => void)[] = [];
+
+export const ChameleonPlugin = definePlugin({
+    manifest: {
+        id: 'macia-chameleon-agent',
+        version: '2.1.0',
+        name: 'Madefront',
+        description: 'Proactive Intelligence & Liquid UI Engine',
+        author: 'Decido AI',
+        permissions: ['cortex:view', 'os:capture_screen'],
+        intents: [
+            'chameleon-change-view'
+        ],
+        widgets: [
+            {
+                id: 'chameleon-kanban-view',
+                name: 'Madefront Kanban',
+                defaultZone: 'ide-editor',
+                component: MadefrontKanbanView,
+            },
+            {
+                id: 'chameleon-ventas-view',
+                name: 'Ventas & Diseño',
+                defaultZone: 'ide-editor',
+                component: VentasView,
+            },
+            {
+                id: 'chameleon-caja-view',
+                name: 'Caja & Pagos',
+                defaultZone: 'ide-editor',
+                component: CajaView,
+            },
+            {
+                id: 'chameleon-planta-view',
+                name: 'Producción',
+                defaultZone: 'ide-editor',
+                component: PlantaView,
+            },
+            {
+                id: 'chameleon-despacho-view',
+                name: 'Logística',
+                defaultZone: 'ide-editor',
+                component: DespachoView,
+            },
+            {
+                id: 'chameleon-discovery-view',
+                name: 'Studio Admin',
+                defaultZone: 'ide-editor',
+                component: DiscoveryAdminView,
+            },
+            {
+                id: 'chameleon-sheet-view',
+                name: 'Vista Excel (Datos)',
+                defaultZone: 'ide-editor',
+                component: MadefrontExcelView,
+            },
+            {
+                id: 'chameleon-database-admin',
+                name: 'Database Admin (CRUD)',
+                defaultZone: 'ide-editor',
+                component: DatabaseAdminView,
+            },
+            {
+                id: 'chameleon-dataway-studio',
+                name: 'Dataway M-Script Studio',
+                defaultZone: 'ide-editor',
+                component: DatawayStudioView,
+            }
+        ],
+        blueprints: [],
+    },
+
+    onMount: (app: DecidoApp) => {
+        app.logger.log('Chameleon AI mounting...');
+
+        // Listen for view-change intents via SDK event bridge
+        const unsub = app.subscribeToEvent('intent:chameleon-change-view', (payload: any) => {
+            const matches = payload?.matches;
+            if (!matches || !matches[0]) return;
+
+            const text = matches[0].toLowerCase();
+
+            // Activate plugin via kernel RPC instead of direct shell store access
+            const activate = (pluginId: string) => {
+                app.callKernel('activate_plugin', { pluginId }).catch((err) => {
+                    app.logger.warn(`Failed to activate ${pluginId}:`, err);
+                });
+            };
+
+            if (text.includes('venta')) activate('cortex-omnichannel');
+            if (text.includes('caja')) activate('cortex-commander');
+            if (text.includes('planta')) activate('cortex-forge');
+            if (text.includes('admin')) activate('cortex-admin');
+        });
+
+        eventUnsubscribers = [unsub];
+    },
+
+    onUnmount: () => {
+        eventUnsubscribers.forEach(unsub => unsub());
+        eventUnsubscribers = [];
+        console.log('[Chameleon] Cleaned up — all subscriptions removed.');
+    },
+
+    onError: (error, phase) => {
+        console.error(`[Chameleon] Error during ${phase}:`, error);
+    },
+});
+

package/src/logic/rules.ts

@@ -0,0 +1,39 @@
+import { MachineType } from '../types';
+
+/**
+ * Agente: SLA Sentinel
+ * Regla: < 5 láminas = 24h, >= 5 láminas = 72h
+ */
+export const calculateSLA = (sheets: number): number => {
+    return sheets < 5 ? 24 : 72;
+};
+
+/**
+ * Agente: Router AI
+ * Regla: Asignación de máquinas según material y complejidad
+ */
+export const assignMachine = (material: string, sheets: number): MachineType => {
+    const mat = material.toLowerCase();
+
+    if (mat.includes('perforacion') || mat.includes('diseño') || mat.includes('cnc')) {
+        return 'HOMAG'; // CNC para cosas complejas
+    }
+
+    if (sheets > 10 || mat.includes('grueso') || mat.includes('18mm')) {
+        return 'GABBIANI'; // Trabajo pesado
+    }
+
+    return 'SIGMA'; // Corte rápido estándar
+};
+
+/**
+ * Agente: Phone Doctor
+ * Regla: Asegurar formato +57 para WhatsApp
+ */
+export const sanitizePhone = (phone: string): string => {
+    const digits = phone.replace(/\D/g, '');
+    if (!digits.startsWith('57')) {
+        return `+57 ${digits}`;
+    }
+    return `+${digits}`;
+};

package/src/logic/workflowGuard.ts

@@ -0,0 +1,45 @@
+import { MadefrontOrder, OrderStatus } from '../types';
+
+interface TransitionResult {
+    allowed: boolean;
+    reason?: string;
+}
+
+// Mapa de transiciones permitidas (Máquina de Estados)
+const ALLOWED_TRANSITIONS: Record<OrderStatus, OrderStatus[]> = {
+    'DISEÑO': ['OPTIMIZACION', 'CAJA'], // Puede saltar a caja si no requiere despiece
+    'OPTIMIZACION': ['CAJA', 'PRODUCCION'],
+    'CAJA': ['PRODUCCION'],
+    'PRODUCCION': ['DESPACHO'],
+    'DESPACHO': ['ENTREGADO'],
+    'ENTREGADO': []
+};
+
+export const canTransition = (order: MadefrontOrder, targetStatus: OrderStatus): TransitionResult => {
+    const currentStatus = order.status;
+
+    // 1. Validar que la ruta exista en el grafo
+    const validNextStates = ALLOWED_TRANSITIONS[currentStatus] || [];
+    if (!validNextStates.includes(targetStatus)) {
+        return {
+            allowed: false,
+            reason: `Flujo inválido: No se puede pasar de ${currentStatus} a ${targetStatus}.`
+        };
+    }
+
+    // 2. Reglas Hardcore de Negocio (Las que nos dio Ana)
+    if (targetStatus === 'PRODUCCION') {
+        if (!order.isPaid) {
+            return { allowed: false, reason: 'Bloqueo de Caja: El pedido debe estar pagado para entrar a Planta.' };
+        }
+    }
+
+    if (targetStatus === 'DESPACHO') {
+        // En el futuro: validar que la máquina (Sigma/Homag) haya emitido el evento de fin
+        if (order.status !== 'PRODUCCION') {
+            return { allowed: false, reason: 'El pedido debe salir de producción antes de despacharse.' };
+        }
+    }
+
+    return { allowed: true };
+};

package/src/main.tsx

@@ -0,0 +1,10 @@
+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/src/services/gemini.ts

@@ -0,0 +1,110 @@
+export interface GeminiMessage {
+    role: 'user' | 'model' | 'system';
+    content: string;
+}
+
+export interface GeminiOptions {
+    apiKey?: string;
+    temperature?: number;
+}
+
+const SYSTEM_PROMPT = `
+Eres el "Chameleon UI Engine", un arquitecto experto en React, TypeScript y TailwindCSS.
+Tu misión es generar o modificar componentes de UI para una plataforma inteligente.
+
+REGLAS ESTRICTAS:
+1. Debes generar código válido en React (Functional Components) usando TypeScript.
+2. Usa Tailwind CSS para los estilos. El diseño debe ser industrial, limpio, con paletas de colores legibles (ej. gris pizarra, azul corporativo, o colores de alto contraste si es para la Planta de producción).
+3. Lucide-React está disponible para iconos.
+4. El sistema usa Zustand para manejar el estado (\`useOrderStore\`, \`useAuthStore\`).
+5. Devuelve SOLO EL CÓDIGO del componente. No agregues explicaciones, markdown de código (\`\`\`tsx) a menos que se solicite, ni texto adicional. Solo el raw text del componente.
+6. Si vas a crear una nueva vista (Cortex), asegúrate de que siga el patrón de las vistas existentes: ocupa el \`h-full w-full\`, usa \`bg-slate-50\` o \`bg-white\`, padding apropiado, y estructura clara de encabezado y contenido.
+`;
+
+export class GeminiService {
+    private apiKey: string;
+    private endpoint = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-flash-lite-latest:generateContent';
+
+    constructor(options: GeminiOptions = {}) {
+        // Para entornos reales, usar import.meta.env.VITE_GEMINI_API_KEY
+        this.apiKey = options.apiKey || (import.meta as any).env?.VITE_GEMINI_API_KEY || '';
+    }
+
+    async generateUIComponent(prompt: string, history: GeminiMessage[] = []): Promise<string> {
+        if (!this.apiKey) {
+            console.warn("No Gemini API Key provided. Returning mock component.");
+            return this.getMockResponse(prompt);
+        }
+
+        try {
+            const contents = history.map(msg => ({
+                role: msg.role === 'system' ? 'user' : msg.role,
+                parts: [{ text: msg.content }]
+            }));
+
+            // Inyectar System Prompt si no está (API v1beta usa instructions o primer mensaje format)
+            // Simplificado: lo agregamos al inicio de los contenidos
+            const fullContents = [
+                { role: 'user', parts: [{ text: SYSTEM_PROMPT }] },
+                { role: 'model', parts: [{ text: 'Entendido. Actuaré como el Chameleon UI Engine.' }] },
+                ...contents,
+                { role: 'user', parts: [{ text: prompt }] }
+            ];
+
+            const response = await fetch(`${this.endpoint}?key=${this.apiKey}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    contents: fullContents,
+                    generationConfig: {
+                        temperature: 0.2, // Baja temperatura para código más determinista
+                    }
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`API Error: ${response.status}`);
+            }
+
+            const data = await response.json();
+            let text = data.candidates?.[0]?.content?.parts?.[0]?.text || '';
+
+            // Limpiar markdown residual si existe
+            text = text.replace(/^\`\`\`tsx?/g, '').replace(/\`\`\`$/g, '').trim();
+
+            return text;
+        } catch (error) {
+            console.error("Gemini API Error:", error);
+            throw error;
+        }
+    }
+
+    private getMockResponse(prompt: string): string {
+        return `
+import { Activity } from 'lucide-react';
+
+export default function GeneratedView() {
+  return (
+    <div className="h-full w-full bg-slate-50 p-8 flex flex-col items-center justify-center">
+      <div className="bg-white p-6 rounded-2xl shadow-xl flex flex-col items-center max-w-md text-center border border-indigo-100">
+        <div className="w-16 h-16 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center mb-4">
+          <Activity size={32} />
+        </div>
+        <h2 className="text-2xl font-bold text-slate-800 mb-2">Vista Generada Dinámicamente</h2>
+        <p className="text-slate-500 mb-6">
+          Esta vista mock fue generada en respuesta al prompt: "\${prompt.substring(0, 50)}..."
+        </p>
+        <button className="px-6 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition">
+          Interactuar
+        </button>
+      </div>
+    </div>
+  );
+}
+    `.trim();
+    }
+}
+
+export const geminiService = new GeminiService();

package/src/store/datawayStore.ts

@@ -0,0 +1,26 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface DatawayState {
+    commandHistory: string[];
+    addCommand: (cmd: string) => void;
+    clearHistory: () => void;
+}
+
+export const useDatawayStore = create<DatawayState>()(
+    persist(
+        (set) => ({
+            commandHistory: [],
+            addCommand: (cmd) => set((state) => {
+                const trimmed = cmd.trim();
+                if (!trimmed || state.commandHistory[state.commandHistory.length - 1] === trimmed) {
+                    return state;
+                }
+                const newHistory = [...state.commandHistory, trimmed].slice(-50); // Keep last 50 queries
+                return { commandHistory: newHistory };
+            }),
+            clearHistory: () => set({ commandHistory: [] })
+        }),
+        { name: 'decido-dataway-history-v1' }
+    )
+);

package/src/stores/authStore.ts

@@ -0,0 +1,26 @@
+import { create } from 'zustand';
+import { Role } from '../types';
+
+interface InternalLicenseTarget {
+    type: 'personal' | 'enterprise';
+    id: string;
+    name: string;
+    systemPrompt?: string;
+}
+
+interface AuthState {
+    currentRole: Role;
+    currentUser: string;
+    activeContext?: InternalLicenseTarget;
+    setRole: (role: Role, user: string, context?: InternalLicenseTarget) => void;
+    logout: () => void;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+    currentRole: 'NONE',
+    currentUser: '',
+    activeContext: undefined,
+
+    setRole: (role, user, context) => set({ currentRole: role, currentUser: user, activeContext: context }),
+    logout: () => set({ currentRole: 'NONE', currentUser: '', activeContext: undefined })
+}));

package/src/stores/orderStore.ts

@@ -0,0 +1,263 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { MadefrontOrder, OrderStatus } from '../types';
+import { calculateSLA, assignMachine, sanitizePhone } from '../logic/rules';
+import { canTransition } from '../logic/workflowGuard';
+import { toast } from 'sonner';
+import { kernel } from '@decido/kernel-bridge';
+import * as Y from 'yjs';
+import { WebsocketProvider } from 'y-websocket';
+
+interface OrderState {
+    orders: MadefrontOrder[];
+
+    // Acciones (Lo que hacen los usuarios)
+    createOrder: (data: any) => void;
+    updateStatus: (id: string, status: OrderStatus) => void;
+    updateOrder: (order: MadefrontOrder) => void;
+    approvePayment: (id: string) => void; // Acción de Caja
+    fetchOrders: () => Promise<void>;
+    setOrders: (orders: MadefrontOrder[]) => void;
+
+    // Selectores (Consultas)
+    getOrdersByStage: (status: OrderStatus) => MadefrontOrder[];
+    getPendingPayments: () => MadefrontOrder[];
+}
+
+// -----------------------------------------------------
+// 🛡️ ANILLO 2: La Verdad de los Datos (CRDTs con Yjs)
+// -----------------------------------------------------
+const ydoc = new Y.Doc();
+const yOrders = ydoc.getMap<MadefrontOrder>('orders');
+
+const getWsUrl = () => {
+    const baseUrl = (import.meta as any).env?.VITE_API_BASE_URL || 'http://localhost:3001';
+    return baseUrl.replace(/^https?/, match => match === 'https' ? 'wss' : 'ws') + '/api/collaboration';
+};
+
+const provider = new WebsocketProvider(
+    getWsUrl(),
+    'madefront-kanban-room',
+    ydoc,
+    { connect: true }
+);
+
+kernel.onEvent((event: any) => {
+    if (event && (event.type === 'MadefrontOrderUpdated' || event.event_type === 'MadefrontOrderUpdated' || event.message?.includes('MadefrontOrderUpdated'))) {
+        // Reload offline cache fully from MCP or rely on CRDT push sync
+        useOrderStore.getState().fetchOrders();
+    }
+});
+
+// En chameleon lo envolvemos en persist para preservar sesión offline
+export const useOrderStore = create<OrderState>()(
+    persist(
+        (set, get) => {
+            // Observer CRDT -> Zustand
+            yOrders.observe(() => {
+                set({ orders: Array.from(yOrders.values()) });
+            });
+
+            return {
+                orders: Array.from(yOrders.values()),
+
+                setOrders: (orders) => set({ orders }),
+
+                fetchOrders: async () => {
+                    try {
+                        const baseUrl = (import.meta as any).env?.VITE_API_BASE_URL || 'http://localhost:3001';
+
+                        const response = await fetch(`${baseUrl}/api/orders`, {
+                            headers: { 'x-api-key': 'dev_ak_chameleon_studio_99x' }
+                        });
+
+                        if (!response.ok) {
+                            throw new Error(`Error HTTP: ${response.status}`);
+                        }
+
+                        let backendOrders: any = await response.json();
+
+                        if (backendOrders.error) {
+                            throw new Error(backendOrders.error);
+                        }
+
+                        const mapStageToStatus = (stage: string): OrderStatus => {
+                            switch (stage?.toUpperCase()) {
+                                case 'NEW':
+                                case 'DESIGN': return 'DISEÑO';
+                                case 'OPTIMIZATION':
+                                case 'IN_CUTTING':
+                                case 'IN_EDGEBANDING':
+                                case 'IN_ASSEMBLY': return 'OPTIMIZACION';
+                                case 'AUTHORIZED_FOR_PRODUCTION': return 'CAJA';
+                                case 'PRODUCTION': return 'PRODUCCION';
+                                case 'DISPATCH':
+                                case 'IN_DISPATCH':
+                                case 'READY_FOR_DISPATCH': return 'DESPACHO';
+                                case 'COMPLETED':
+                                case 'DELIVERED': return 'ENTREGADO';
+                                default: return 'DISEÑO';
+                            }
+                        };
+
+                        ydoc.transact(() => {
+                            // Find all incoming IDs
+                            const incomingIds = new Set(backendOrders.map((o: any) => o.legacyId || o.id));
+
+                            // Purge deleted/stale keys from Yjs that no longer exist in Postgres
+                            Array.from(yOrders.keys()).forEach(key => {
+                                if (!incomingIds.has(key)) {
+                                    yOrders.delete(key);
+                                }
+                            });
+
+                            backendOrders.forEach((o: any) => {
+                                const id = o.legacyId || o.id;
+                                const status = mapStageToStatus(o.stage);
+                                yOrders.set(id, {
+                                    id,
+                                    client: o.clientName || o.clientId || 'Desconocido',
+                                    whatsapp: o.clientPhone ? String(o.clientPhone) : (o.whatsapp ? String(o.whatsapp) : '+57 000 000 0000'),
+                                    material: o.salesObservation || o.material || o.items?.[0]?.woodType || 'Desconocido',
+                                    measurements: o.items?.[0]?.dimensions || 'Ver O.T.',
+                                    sheets: o.items?.[0]?.quantity || 1,
+                                    status,
+                                    rawStage: o.stage,
+                                    machine: o.machine || 'Sin Asignar',
+                                    slaHours: o.is24Hours ? 24 : 72,
+                                    isUrgent: o.isUrgent || false,
+                                    isPaid: o.isPaid || false,
+                                    createdAt: new Date(o.createdAt).toLocaleDateString(),
+                                    logs: yOrders.get(id)?.logs || []
+                                });
+                            });
+                        });
+                    } catch (error: any) {
+                        console.error('[Chameleon Store] Error fetching orders:', error);
+                        toast.error(`SysError: ${error.message}`);
+                    }
+                },
+
+                createOrder: (data) => {
+                    const sla = calculateSLA(data.sheets);
+                    const machine = assignMachine(data.material, data.sheets);
+                    const phone = sanitizePhone(data.whatsapp);
+                    const id = `MF-${Math.floor(1000 + Math.random() * 9000)}`;
+
+                    const newOrder: MadefrontOrder = {
+                        id,
+                        client: data.client,
+                        whatsapp: phone,
+                        material: data.material,
+                        measurements: data.measurements,
+                        sheets: parseInt(data.sheets),
+                        status: 'DISEÑO', // Siempre arranca aquí
+                        machine,
+                        slaHours: sla,
+                        isPaid: false,
+                        createdAt: new Date().toISOString(),
+                        logs: [`Pedido creado. SLA calculado: ${sla}h. Máquina sugerida: ${machine}`]
+                    };
+
+                    yOrders.set(id, newOrder);
+
+                    kernel.execute('broadcast_message', {
+                        message: JSON.stringify({ type: 'ORDER_CREATED', payload: newOrder })
+                    }).catch(e => console.error("Sync Error", e));
+                },
+
+                updateStatus: async (id, targetStatus) => {
+                    const order = yOrders.get(id);
+                    if (!order) return;
+
+                    const transition = canTransition(order, targetStatus);
+                    if (!transition.allowed) {
+                        console.warn(`[Workflow Engine] Bloqueo: ${transition.reason}`);
+                        setTimeout(() => toast.error('Transición Bloqueada', { description: transition.reason }), 0);
+                        return;
+                    }
+
+                    let newBackendStage = 'DESIGN';
+                    switch (targetStatus) {
+                        case 'CAJA': newBackendStage = 'AUTHORIZED_FOR_PRODUCTION'; break;
+                        case 'PRODUCCION': newBackendStage = 'PRODUCTION'; break;
+                        case 'DESPACHO': newBackendStage = 'DISPATCH'; break;
+                        case 'ENTREGADO': newBackendStage = 'DELIVERED'; break;
+                        case 'OPTIMIZACION': newBackendStage = 'IN_CUTTING'; break;
+                    }
+
+                    try {
+                        const baseUrl = (import.meta as any).env?.VITE_API_BASE_URL || 'http://localhost:3001';
+
+                        const response = await fetch(`${baseUrl}/api/orders/${order.id}/dynamic-move`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'x-api-key': 'dev_ak_chameleon_studio_99x'
+                            },
+                            body: JSON.stringify({ newStage: newBackendStage })
+                        });
+
+                        if (!response.ok) {
+                            const errData = await response.json().catch(() => ({}));
+                            throw new Error(errData.error || `Error HTTP: ${response.status}`);
+                        }
+
+                        const logEntry = `[${new Date().toLocaleTimeString()}] Movido a ${targetStatus}`;
+                        const updatedOrder = { ...order, status: targetStatus, logs: [...order.logs, logEntry] };
+
+                        yOrders.set(id, updatedOrder);
+
+                        await kernel.execute('broadcast_message', {
+                            message: JSON.stringify({ type: 'MadefrontOrderUpdated', data: updatedOrder })
+                        });
+                    } catch (err: any) {
+                        toast.error(`Error persistiendo estado: ${err.message}`);
+                    }
+                },
+
+                updateOrder: (updatedOrder: MadefrontOrder) => {
+                    if (yOrders.has(updatedOrder.id)) {
+                        yOrders.set(updatedOrder.id, updatedOrder);
+                    }
+                },
+
+                approvePayment: async (id: string) => {
+                    const order = yOrders.get(id);
+                    if (!order) return;
+
+                    const updatedOrder = {
+                        ...order,
+                        isPaid: true,
+                        status: 'PRODUCCION' as OrderStatus,
+                        logs: [...order.logs, '💰 Pago Aprobado por Caja -> Enviado a Planta']
+                    };
+
+                    yOrders.set(id, updatedOrder);
+
+                    try {
+                        const baseUrl = (import.meta as any).env?.VITE_API_BASE_URL || 'http://localhost:3001';
+
+                        await fetch(`${baseUrl}/api/orders/${order.id}/dynamic-move`, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'x-api-key': 'dev_ak_chameleon_studio_99x'
+                            },
+                            body: JSON.stringify({ newStage: 'PRODUCTION' })
+                        });
+                        await kernel.execute('broadcast_message', {
+                            message: JSON.stringify({ type: 'MadefrontOrderUpdated', data: updatedOrder })
+                        });
+                    } catch (e) { }
+                },
+
+                getOrdersByStage: (status: OrderStatus) => get().orders.filter((o) => o.status === status),
+                getPendingPayments: () => get().orders.filter((o) => o.status === 'CAJA' && !o.isPaid),
+            };
+        },
+        {
+            name: 'madefront-db-v2', // Nombre en localStorage
+        }
+    )
+);

package/src/stores/uiStore.ts

@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+import { ViewType } from '../types';
+
+interface UIState {
+    currentView: ViewType;
+    searchTerm: string;
+
+    // Actions
+    setCurrentView: (view: ViewType) => void;
+    setSearchTerm: (term: string) => void;
+}
+
+export const useUIStore = create<UIState>((set) => ({
+    currentView: 'login',
+    searchTerm: '',
+
+    setCurrentView: (view) => set({ currentView: view }),
+    setSearchTerm: (term) => set({ searchTerm: term })
+}));