@decido/ui 0.0.0

package/.eslintrc.cjs

@@ -0,0 +1,10 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  ignorePatterns: [".eslintrc.cjs", "**/*.d.ts"],
+  extends: ["@decido/eslint-config/index.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,13 @@
+
+Debugger listening on ws://127.0.0.1:58999/f7610a75-abe1-4d65-a3aa-cf0571ab02c0
+For help, see: https://nodejs.org/en/docs/inspector
+Debugger attached.
+
+> @decido/ui@0.0.0 build /Users/julioramirez/dev/active/OnBoardingDecido/packages/shell-vscode/ui
+> tsc
+
+Debugger listening on ws://127.0.0.1:59001/eba3193e-0563-41ab-bc42-0987bcf98f41
+For help, see: https://nodejs.org/en/docs/inspector
+Debugger attached.
+Waiting for the debugger to disconnect...
+Waiting for the debugger to disconnect...

package/.turbo/turbo-lint.log

@@ -0,0 +1,54 @@
+
+Debugger listening on ws://127.0.0.1:51604/85064dbf-5de0-40bd-b33a-5bc9f2e928d4
+For help, see: https://nodejs.org/en/docs/inspector
+Debugger attached.
+
+> @decido/ui@0.0.0 lint /Users/julioramirez/dev/apps/yo-decido/packages/ui
+> eslint "src/**/*.ts"
+
+Debugger listening on ws://127.0.0.1:51615/5ffc4c45-6f4d-4a40-a73b-ad032e0dcc96
+For help, see: https://nodejs.org/en/docs/inspector
+Debugger attached.
+Warning: React version was set to "detect" in eslint-plugin-react settings, but the "react" package is not installed. Assuming latest React version for linting.
+
+/Users/julioramirez/dev/apps/yo-decido/packages/ui/src/components/DecidoButton.ts
+  31:6  error  Parsing error: '>' expected
+
+/Users/julioramirez/dev/apps/yo-decido/packages/ui/src/components/landing/landing-button.ts
+  17:7  error  Parsing error: '>' expected
+
+/Users/julioramirez/dev/apps/yo-decido/packages/ui/src/components/landing/landing-card.ts
+  9:9  error  Parsing error: '>' expected
+
+/Users/julioramirez/dev/apps/yo-decido/packages/ui/src/components/landing/landing-cta.ts
+  19:13  error  Parsing error: '>' expected
+
+/Users/julioramirez/dev/apps/yo-decido/packages/ui/src/components/landing/landing-feature-card.ts
+  60:13  error  Parsing error: '>' expected
+
+/Users/julioramirez/dev/apps/yo-decido/packages/ui/src/components/landing/landing-footer.ts
+  25:12  error  Parsing error: '>' expected
+
+/Users/julioramirez/dev/apps/yo-decido/packages/ui/src/components/landing/landing-header.ts
+  27:9  error  Parsing error: '>' expected
+
+/Users/julioramirez/dev/apps/yo-decido/packages/ui/src/components/landing/landing-hero.ts
+  33:13  error  Parsing error: '>' expected
+
+/Users/julioramirez/dev/apps/yo-decido/packages/ui/src/components/landing/landing-page.ts
+  51:5  error  Parsing error: Type expected
+
+/Users/julioramirez/dev/apps/yo-decido/packages/ui/src/components/landing/landing-section.ts
+  17:12  error  Parsing error: Type expected
+
+/Users/julioramirez/dev/apps/yo-decido/packages/ui/src/components/landing/landing-testimonial-card.ts
+  20:11  error  Parsing error: '>' expected
+
+/Users/julioramirez/dev/apps/yo-decido/packages/ui/src/components/landing/landing-waitlist.ts
+  47:9  error  Parsing error: '>' expected
+
+✖ 12 problems (12 errors, 0 warnings)
+
+Waiting for the debugger to disconnect...
+ ELIFECYCLE  Command failed with exit code 1.
+Waiting for the debugger to disconnect...

package/dist/components/DebugPanel.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const DebugPanel: React.FC;
+export default DebugPanel;

package/dist/components/DebugPanel.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from 'react';
+/**
+ * Un serializador JSON seguro que maneja referencias circulares, funciones y elementos del DOM.
+ * @param value El objeto a serializar.
+ * @returns Una cadena de texto JSON segura.
+ */
+function safeJsonStringify(value) {
+    const cache = new Set();
+    const replacer = (_key, value) => {
+        if (typeof value === 'object' && value !== null) {
+            if (cache.has(value)) {
+                // Referencia circular detectada
+                return '[Circular Reference]';
+            }
+            cache.add(value);
+        }
+        if (typeof value === 'function') {
+            return `[Function: ${value.name || 'anonymous'}]`;
+        }
+        if (value instanceof HTMLElement) {
+            return `[HTMLElement: ${value.tagName}${value.id ? '#' + value.id : ''}]`;
+        }
+        return value;
+    };
+    // Usamos el 'replacer' y una indentación de 2 espacios para que sea legible.
+    return JSON.stringify(value, replacer, 2);
+}
+const DebugPanel = () => {
+    const debugService = window.decidoAPI?.debug; // Asumo que el debugService está en window.decidoAPI.debug
+    const [nodes, setNodes] = useState([]);
+    const [links, setLinks] = useState([]);
+    const [hoveredNode, setHoveredNode] = useState(null);
+    const [activeTab, setActiveTab] = useState('graph');
+    const panelRef = useRef(null);
+    const [panelPosition, setPanelPosition] = useState({ bottom: 20, right: 20, left: 'auto', top: 'auto' });
+    const width = 800;
+    const height = 500;
+    // --- Lógica de Arrastre del Panel ---
+    const isPanelDragging = useRef(false);
+    const panelOffset = useRef({ x: 0, y: 0 });
+    const onPanelDragStart = useCallback((e) => {
+        if (e.button !== 0)
+            return; // Solo arrastrar con el botón izquierdo del ratón
+        isPanelDragging.current = true;
+        const panelRect = panelRef.current.getBoundingClientRect();
+        panelOffset.current = {
+            x: e.clientX - panelRect.left,
+            y: e.clientY - panelRect.top,
+        };
+        document.addEventListener('mousemove', onPanelDrag);
+        document.addEventListener('mouseup', onPanelDragEnd);
+        document.body.style.userSelect = 'none'; // Evitar selección de texto durante el arrastre
+    }, []);
+    const onPanelDrag = useCallback((e) => {
+        if (!isPanelDragging.current)
+            return;
+        const x = e.clientX - panelOffset.current.x;
+        const y = e.clientY - panelOffset.current.y;
+        setPanelPosition({ bottom: 'auto', right: 'auto', left: x, top: y });
+    }, []);
+    const onPanelDragEnd = useCallback(() => {
+        isPanelDragging.current = false;
+        document.removeEventListener('mousemove', onPanelDrag);
+        document.removeEventListener('mouseup', onPanelDragEnd);
+        document.body.style.userSelect = ''; // Restaurar la selección de texto
+    }, []);
+    useEffect(() => {
+        if (!debugService)
+            return;
+        // Mock subscription for effect - Assuming debugService triggers reloads
+        const graph = debugService.graphState[0]();
+        setNodes(prevNodes => {
+            if (graph.nodes.length > 0 && prevNodes.length === 0) {
+                return initializeNodePositions(graph.nodes);
+            }
+            return graph.nodes;
+        });
+        setLinks(graph.links);
+        return () => {
+            // Unsubscribe mock
+        };
+    }, [debugService]);
+    const initializeNodePositions = useCallback((newNodes) => {
+        const savedPositions = loadNodePositions();
+        return newNodes.map(node => {
+            if (savedPositions[node.id]) {
+                return { ...node, x: savedPositions[node.id].x, y: savedPositions[node.id].y };
+            }
+            return {
+                ...node,
+                x: node.x === undefined ? Math.random() * (width - 100) + 50 : node.x,
+                y: node.y === undefined ? Math.random() * (height - 100) + 50 : node.y,
+            };
+        });
+    }, [width, height]);
+    const saveNodePositions = useCallback((currentNodes) => {
+        const positions = currentNodes.reduce((acc, node) => {
+            acc[node.id] = { x: node.x, y: node.y };
+            return acc;
+        }, {});
+        localStorage.setItem('decido_debug_panel_node_positions', JSON.stringify(positions));
+    }, []);
+    const loadNodePositions = () => {
+        try {
+            const saved = localStorage.getItem('decido_debug_panel_node_positions');
+            return saved ? JSON.parse(saved) : {};
+        }
+        catch (e) {
+            console.error("Error cargando posiciones de nodos:", e);
+            return {};
+        }
+    };
+    // --- Lógica de Arrastre de Nodos ---
+    const draggedNode = useRef(null);
+    const nodeOffset = useRef({ x: 0, y: 0 });
+    const onNodeDragStart = useCallback((e, node) => {
+        e.stopPropagation();
+        draggedNode.current = node;
+        nodeOffset.current = {
+            x: e.clientX - node.x,
+            y: e.clientY - node.y,
+        };
+        setNodes(prevNodes => prevNodes.map(n => n.id === node.id ? { ...n, fx: node.x, fy: node.y } : n));
+        document.addEventListener('mousemove', onNodeDrag);
+        document.addEventListener('mouseup', onNodeDragEnd);
+        document.body.style.userSelect = 'none';
+    }, [nodes]);
+    const onNodeDrag = useCallback((e) => {
+        if (!draggedNode.current)
+            return;
+        const newFx = e.clientX - nodeOffset.current.x;
+        const newFy = e.clientY - nodeOffset.current.y;
+        setNodes(prevNodes => prevNodes.map(n => n.id === draggedNode.current?.id ? { ...n, fx: newFx, fy: newFy } : n));
+    }, []);
+    const onNodeDragEnd = useCallback(() => {
+        if (draggedNode.current) {
+            setNodes(prevNodes => {
+                const updatedNodes = prevNodes.map(n => {
+                    if (n.id === draggedNode.current?.id) {
+                        return { ...n, x: n.fx, y: n.fy, fx: null, fy: null };
+                    }
+                    return n;
+                });
+                saveNodePositions(updatedNodes);
+                return updatedNodes;
+            });
+        }
+        draggedNode.current = null;
+        document.removeEventListener('mousemove', onNodeDrag);
+        document.removeEventListener('mouseup', onNodeDragEnd);
+        document.body.style.userSelect = '';
+    }, [saveNodePositions]);
+    const onMouseOverNode = useCallback((node) => { setHoveredNode(node); }, []);
+    const onMouseOutNode = useCallback(() => { setHoveredNode(null); }, []);
+    // --- Renderizado de Logs de Consola ---
+    const renderConsoleLog = (log) => {
+        const formattedMessage = log.message.map(m => {
+            if (typeof m === 'object' && m !== null) {
+                return safeJsonStringify(m);
+            }
+            return String(m);
+        }).join(' ');
+        return (_jsxs("div", { className: `log-entry log-level-${log.type}`, children: [_jsx("span", { className: "log-timestamp", children: new Date(log.timestamp).toLocaleTimeString() }), _jsx("pre", { className: "log-message", children: formattedMessage })] }, log.id));
+    };
+    const handleMapChange = (e) => {
+        const path = e.target.value;
+        debugService?.loadArchitectureGraph(path);
+    };
+    const log = debugService?.probeLog[0]();
+    const playback = debugService?.playbackState[0]();
+    const consoleLogs = debugService?.consoleLogs[0]();
+    const renderGraphContent = (currentNodes, currentLinks) => {
+        const populatedLinks = currentLinks
+            .map(link => ({
+            ...link,
+            source: currentNodes.find(n => n.id === link.source),
+            target: currentNodes.find(n => n.id === link.target)
+        }))
+            .filter(l => l.source && l.target);
+        return (_jsxs("svg", { id: "architecture-svg", width: width, height: height - 40, children: [_jsx("g", { className: "links", children: populatedLinks.map((link, index) => (_jsx("line", { x1: link.source.x, y1: link.source.y, x2: link.target.x, y2: link.target.y, stroke: "#475569", strokeWidth: "1.5" }, index))) }), _jsx("g", { className: "nodes", children: currentNodes.map(node => (_jsxs("g", { className: "node-group", transform: `translate(${node.fx ?? node.x}, ${node.fy ?? node.y})`, onMouseDown: (e) => onNodeDragStart(e, node), onMouseOver: () => onMouseOverNode(node), onMouseOut: onMouseOutNode, children: [_jsx("circle", { r: "12", className: `node-circle type-${node.type} status-${node.status}` }), _jsx("text", { x: "16", y: "4", className: "node-label", children: node.label })] }, node.id))) }), hoveredNode && renderTooltip(hoveredNode)] }));
+    };
+    const renderTooltip = (node) => {
+        return (_jsx("foreignObject", { x: (node.x || 0) + 20, y: (node.y || 0) + 20, width: "250", height: "150", children: _jsxs("div", { className: "tooltip-container", children: [_jsx("div", { className: `tooltip-header type-${node.type}`, children: node.label }), _jsxs("div", { className: "tooltip-body", children: [_jsxs("p", { children: [_jsx("strong", { children: "ID:" }), " ", node.id] }), _jsxs("p", { children: [_jsx("strong", { children: "Tipo:" }), " ", node.type] }), _jsxs("p", { children: [_jsx("strong", { children: "Estado:" }), " ", _jsx("span", { className: `status-${node.status}`, children: node.status })] }), _jsx("p", { className: "tooltip-desc", children: node.description || 'Sin descripción.' })] })] }) }));
+    };
+    return (_jsxs("div", { ref: panelRef, className: "debug-panel", style: {
+            bottom: panelPosition.bottom,
+            right: panelPosition.right,
+            left: panelPosition.left,
+            top: panelPosition.top,
+            width: width,
+            height: height,
+        }, children: [_jsxs("div", { className: "debug-header", onMouseDown: onPanelDragStart, children: [_jsxs("span", { children: [_jsx("i", { className: "fas fa-microchip mr-2" }), "Esc\u00E1ner de Arquitectura"] }), _jsxs("select", { onChange: handleMapChange, style: { background: '#334155', border: 'none', color: 'white', borderRadius: '4px', fontSize: '11px' }, children: [_jsx("option", { value: "/architecture-map.json", children: "Vista General" }), _jsx("option", { value: "/maps/auth-flow.json", children: "Flujo de Autenticaci\u00F3n" }), _jsx("option", { value: "/maps/kanban-flow.json", children: "Flujo de Kanban" })] })] }), _jsxs("div", { className: "debug-tabs", children: [_jsxs("button", { className: `debug-tab ${activeTab === 'graph' ? 'active' : ''}`, onClick: () => setActiveTab('graph'), children: [_jsx("i", { className: "fas fa-sitemap mr-2" }), "Arquitectura"] }), _jsxs("button", { className: `debug-tab ${activeTab === 'console' ? 'active' : ''}`, onClick: () => setActiveTab('console'), children: [_jsx("i", { className: "fas fa-terminal mr-2" }), "Consola"] })] }), _jsxs("div", { className: "debug-content", children: [activeTab === 'graph' && (_jsx("div", { className: "tab-content active", children: renderGraphContent(nodes, links) })), activeTab === 'console' && (_jsx("div", { className: "tab-content active", children: _jsx("div", { className: "console-log-list", children: consoleLogs?.map((log) => renderConsoleLog(log)) }) }))] }), _jsxs("div", { className: "debug-footer", children: [_jsxs("div", { className: "playback-controls flex gap-2", children: [_jsx("button", { onClick: () => debugService?.goToLogIndex(0), title: "Ir al Inicio", children: _jsx("i", { className: "fas fa-fast-backward" }) }), _jsx("button", { onClick: () => debugService?.goToLogIndex(playback?.currentIndex - 1), title: "Paso Anterior", children: _jsx("i", { className: "fas fa-step-backward" }) }), _jsx("button", { onClick: () => { }, title: "Reproducir", children: _jsx("i", { className: "fas fa-play" }) }), _jsx("button", { onClick: () => debugService?.goToLogIndex(playback?.currentIndex + 1), title: "Paso Siguiente", children: _jsx("i", { className: "fas fa-step-forward" }) })] }), _jsx("input", { type: "range", className: "timeline-slider", min: "0", max: log?.length > 0 ? log.length - 1 : 0, value: playback?.currentIndex || 0, onChange: (e) => debugService?.goToLogIndex(parseInt(e.target.value)) }), _jsxs("span", { className: "text-xs text-muted-foreground w-20 text-center", children: [playback?.currentIndex + 1, " / ", log?.length] })] })] }));
+};
+export default DebugPanel;

package/dist/components/DebugPanelManager.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const DebugPanelManager: React.FC;
+export default DebugPanelManager;

package/dist/components/DebugPanelManager.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import DebugPanel from './DebugPanel'; // Import the React component
+const DebugPanelManager = () => {
+    const [panels, setPanels] = useState([]);
+    const panelService = window.decidoAPI?.debug?.panels; // Access the service from window.decidoAPI
+    useEffect(() => {
+        if (!panelService)
+            return;
+        // Assuming panelService.panels is a signal, we'd subscribe to it
+        const unsubscribe = () => { }; // MOCK: createEffect was from missing import
+        const currentPanels = Object.values(panelService.panels[0]());
+        setPanels(currentPanels);
+        return () => {
+            unsubscribe();
+        };
+    }, [panelService]);
+    return (_jsx(_Fragment, { children: panels.filter(p => p.isVisible).map(p => (_jsx(DebugPanel, {}, p.id))) }));
+};
+export default DebugPanelManager;

package/dist/components/DecidoButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface DecidoButtonProps {
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: 'primary' | 'secondary';
+    disabled?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+declare const DecidoButton: React.FC<DecidoButtonProps>;
+export default DecidoButton;

package/dist/components/DecidoButton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const DecidoButton = ({ onClick, type = 'button', variant = 'primary', disabled = false, className = '', children, }) => {
+    const baseClasses = `btn btn-${variant} ${className}`.trim();
+    const handleClick = (event) => {
+        if (type === 'submit') {
+            const form = event.currentTarget.closest('form');
+            if (form) {
+                form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
+            }
+        }
+        onClick?.(event);
+    };
+    return (_jsx("button", { type: type, className: baseClasses, disabled: disabled, onClick: handleClick, children: children }));
+};
+export default DecidoButton;

package/dist/components/LoginView.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import '../css/login-view.css';
+interface LoginViewProps {
+}
+declare const LoginView: React.FC<LoginViewProps>;
+export default LoginView;

package/dist/components/LoginView.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import '../css/login-view.css';
+const LoginView = () => {
+    const [email, setEmail] = useState('ing_julioramirez@hotmail.com');
+    const [password, setPassword] = useState('y0s0ft..');
+    const [isLoading, setIsLoading] = useState(false);
+    const api = window.decidoAPI;
+    const handleLogin = async (e) => {
+        e.preventDefault();
+        setIsLoading(true);
+        api.debug?.probe('ui:LoginView', 'active');
+        try {
+            await api.auth.login(email, password);
+            // On success, the router and auth service should handle the redirect.
+            // No need to manually navigate here.
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Error desconocido";
+            api.notifications.show('error', 'Error de Login', errorMessage);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const handleRegisterClick = () => {
+        if (api && api.commands) {
+            api.commands.executeCommand("auth.showRegisterModal");
+        }
+        else {
+            console.warn('Decido API o Command Service no disponible.');
+        }
+    };
+    return (_jsx("div", { className: "login-container animate-fade-in", children: _jsxs("div", { className: "login-box", children: [_jsx("h1", { className: "login-title", children: "Iniciar Sesi\u00F3n" }), _jsxs("form", { className: "login-form", onSubmit: handleLogin, children: [_jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "email", className: "journal-label", children: "Email" }), _jsx("input", { type: "email", id: "email", name: "email", className: "form-input-premium", required: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: isLoading })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "password", className: "journal-label", children: "Contrase\u00F1a" }), _jsx("input", { type: "password", id: "password", name: "password", className: "form-input-premium", required: true, value: password, onChange: (e) => setPassword(e.target.value), disabled: isLoading })] }), _jsx("div", { className: "form-actions", children: _jsxs("button", { type: "submit", className: "btn-premium w-full", disabled: isLoading, children: [isLoading ? _jsx("i", { className: "fas fa-spinner fa-spin" }) : '', " Entrar"] }) })] }), _jsx("div", { className: "register-link", children: _jsx("a", { href: "#", onClick: handleRegisterClick, children: "\u00BFNo tienes cuenta? Reg\u00EDstrate" }) })] }) }));
+};
+export default LoginView;

package/dist/components/WelcomeView.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import '../css/welcome-view.css';
+interface WelcomeViewProps {
+}
+declare const WelcomeView: React.FC<WelcomeViewProps>;
+export default WelcomeView;

package/dist/components/WelcomeView.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '../css/welcome-view.css';
+const WelcomeView = () => {
+    // Access the API from the window object
+    const api = window.decidoAPI;
+    const handleQuickLinkClick = (commandId, commandArgs) => {
+        if (api && api.commands) {
+            api.commands.executeCommand(commandId, commandArgs);
+        }
+        else {
+            console.warn('Decido API o Command Service no disponible.');
+        }
+    };
+    return (_jsxs("div", { className: "welcome-container animate-fade-in", children: [_jsx("div", { className: "logo", children: _jsx("i", { className: "fas fa-brain" }) }), _jsx("h1", { className: "welcome-title", children: "Bienvenido a Decido" }), _jsx("p", { className: "welcome-subtitle", children: "Tu sistema operativo para la vida. \u00BFQu\u00E9 quieres lograr hoy?" }), _jsxs("div", { className: "quick-links-grid", children: [_jsxs("a", { href: "#", className: "quick-link", onClick: () => handleQuickLinkClick("workbench.openTab", { id: "dashboard", title: "Dashboard", componentTag: "dashboard-view", icon: "fas fa-home" }), children: [_jsx("i", { className: "fas fa-home" }), _jsx("span", { children: "Ver mi Dashboard" })] }), _jsxs("a", { href: "#", className: "quick-link", onClick: () => handleQuickLinkClick("workbench.openTab", { id: "goal-architect", title: "Arquitecto de Metas", componentTag: "goal-architect-view", icon: "fas fa-compass" }), children: [_jsx("i", { className: "fas fa-compass" }), _jsx("span", { children: "Definir una Meta" })] }), _jsxs("a", { href: "#", className: "quick-link", onClick: () => handleQuickLinkClick("palette.toggle"), children: [_jsx("i", { className: "fas fa-terminal" }), _jsx("span", { children: "Abrir Paleta de Comandos" })] })] })] }));
+};
+export default WelcomeView;

package/dist/components/base/BaseComponent.d.ts

@@ -0,0 +1,12 @@
+import { IPlatformAPI } from '@decido/core';
+import { TemplateResult } from 'lit-html';
+export declare abstract class BaseComponent extends HTMLElement {
+    protected readonly api: IPlatformAPI;
+    protected readonly shadow: ShadowRoot;
+    constructor();
+    connectedCallback(): void;
+    onMount(): void;
+    abstract renderContent(): TemplateResult;
+    render(): void;
+    protected emitEvent<T>(name: string, detail?: T): void;
+}

package/dist/components/base/BaseComponent.js

@@ -0,0 +1,43 @@
+// src/core/BaseComponent.ts
+import { createEffect } from '@decido/core';
+import { render as litRender } from 'lit-html';
+import { faSheet, globalSheet } from './shared-styles.js';
+export class BaseComponent extends HTMLElement {
+    api;
+    shadow;
+    constructor() {
+        super();
+        // @ts-expect-error "Falta la definicion"
+        this.api = window.decidoAPI;
+        this.shadow = this.attachShadow({ mode: 'open' });
+        // ¡Aquí está la magia!
+        // Le decimos al Shadow DOM que adopte y use nuestra hoja de estilos.
+        console.log(globalSheet, faSheet);
+        this.shadow.adoptedStyleSheets = [globalSheet, faSheet];
+    }
+    connectedCallback() {
+        // // Enlazamos los estilos globales.
+        // const globalStyles = document.createElement('link');
+        // globalStyles.setAttribute('rel', 'stylesheet');
+        // globalStyles.setAttribute('href', '/css/style.css');
+        // this.shadow.appendChild(globalStyles);
+        // --- LA CORRECCIÓN CLAVE ---
+        // El efecto ahora llama al método render() de ESTA clase base,
+        // que es el que sabe cómo usar lit-html.
+        createEffect(() => this.render());
+        // onMount se llama una vez después del primer render para listeners, etc.
+        this.onMount();
+    }
+    onMount() { }
+    // Este es el método de renderizado final y privado de la clase base.
+    // No debe ser sobreescrito por los hijos.
+    render() {
+        // Llama a renderContent() del hijo para obtener la plantilla...
+        const template = this.renderContent();
+        // ...y usa litRender para aplicarla eficientemente al Shadow DOM.
+        litRender(template, this.shadow);
+    }
+    emitEvent(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+}

package/dist/components/base/BaseComponentBacjup.d.ts

@@ -0,0 +1,12 @@
+import { IPlatformAPI } from '@decido/core';
+import { TemplateResult } from 'lit-html';
+export declare abstract class BaseComponent extends HTMLElement {
+    protected readonly api: IPlatformAPI;
+    protected readonly shadow: ShadowRoot;
+    constructor();
+    connectedCallback(): void;
+    onMount(): void;
+    abstract renderContent(): TemplateResult;
+    render(): void;
+    protected emitEvent<T>(name: string, detail?: T): void;
+}

package/dist/components/base/BaseComponentBacjup.js

@@ -0,0 +1,43 @@
+// src/core/BaseComponent.ts
+import { createEffect } from '@decido/core';
+import { render as litRender } from 'lit-html';
+import { faSheet, globalSheet } from './shared-styles.js';
+export class BaseComponent extends HTMLElement {
+    api;
+    shadow;
+    constructor() {
+        super();
+        // @ts-expect-error "Falta la definicion"
+        this.api = window.decidoAPI;
+        this.shadow = this.attachShadow({ mode: 'open' });
+        // ¡Aquí está la magia!
+        // Le decimos al Shadow DOM que adopte y use nuestra hoja de estilos.
+        console.log(globalSheet, faSheet);
+        this.shadow.adoptedStyleSheets = [globalSheet, faSheet];
+    }
+    connectedCallback() {
+        // // Enlazamos los estilos globales.
+        // const globalStyles = document.createElement('link');
+        // globalStyles.setAttribute('rel', 'stylesheet');
+        // globalStyles.setAttribute('href', '/css/style.css');
+        // this.shadow.appendChild(globalStyles);
+        // --- LA CORRECCIÓN CLAVE ---
+        // El efecto ahora llama al método render() de ESTA clase base,
+        // que es el que sabe cómo usar lit-html.
+        createEffect(() => this.render());
+        // onMount se llama una vez después del primer render para listeners, etc.
+        this.onMount();
+    }
+    onMount() { }
+    // Este es el método de renderizado final y privado de la clase base.
+    // No debe ser sobreescrito por los hijos.
+    render() {
+        // Llama a renderContent() del hijo para obtener la plantilla...
+        const template = this.renderContent();
+        // ...y usa litRender para aplicarla eficientemente al Shadow DOM.
+        litRender(template, this.shadow);
+    }
+    emitEvent(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+}

package/dist/components/base/BaseComponentLit.d.ts

@@ -0,0 +1,9 @@
+import { LitElement, TemplateResult } from 'lit';
+export declare abstract class BaseComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    protected onMount(): void;
+    protected render(): TemplateResult;
+    protected abstract renderContent(): TemplateResult;
+    protected emitEvent<T>(name: string, detail?: T): void;
+}

package/dist/components/base/BaseComponentLit.js

@@ -0,0 +1,30 @@
+import { LitElement, css } from 'lit';
+// Si tienes estilos globales en un archivo .ts, puedes importarlos así:
+// import { globalStyles } from './global-styles.js';
+export class BaseComponent extends LitElement {
+    // Con LitElement, los estilos se encapsulan automáticamente.
+    // No necesitas 'adoptedStyleSheets' a menos que estés haciendo algo muy avanzado.
+    // Los estilos base se pueden definir aquí.
+    static styles = css `
+        :host {
+            display: block;
+        }
+    `;
+    // El ciclo de vida de LitElement reemplaza a onMount y connectedCallback manuales.
+    // `connectedCallback` todavía existe, pero `firstUpdated` es a menudo más útil.
+    connectedCallback() {
+        super.connectedCallback();
+        this.onMount();
+    }
+    // `onMount` puede ser usado por los hijos para lógica de inicialización.
+    onMount() { }
+    // `render` es el método principal en LitElement.
+    // Los hijos deben implementar `renderContent`.
+    render() {
+        return this.renderContent();
+    }
+    // El helper para emitir eventos sigue siendo útil.
+    emitEvent(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+}

package/dist/components/base/shared-styles.d.ts

@@ -0,0 +1,4 @@
+declare const faSheet: CSSStyleSheet;
+declare const landingSheet: CSSStyleSheet;
+declare const globalSheet: CSSStyleSheet;
+export { faSheet, globalSheet, landingSheet };

package/dist/components/base/shared-styles.js

@@ -0,0 +1,18 @@
+// /src/styles/shared-styles.js
+// Importamos el CSS de Font Awesome como un string de texto.
+import fontAwesomeCss from '@fortawesome/fontawesome-free/css/all.min.css';
+// import globalCss from '../../css/style.css'; 
+import globalCss from '../../css/style.css';
+import landingCss from './landing.css';
+// Creamos una hoja de estilos "adoptable"
+const faSheet = new CSSStyleSheet();
+faSheet.replaceSync(fontAwesomeCss); // Cargamos el CSS en el objeto
+// Creamos una hoja de estilos "adoptable"
+const landingSheet = new CSSStyleSheet();
+landingSheet.replaceSync(landingCss); // Cargamos el CSS en el objeto
+// Creamos la hoja de estilos para los estilos globales
+const globalSheet = new CSSStyleSheet();
+globalSheet.replaceSync(globalCss);
+console.log(faSheet, globalSheet);
+// Exportamos AMBAS hojas para que puedan ser usadas
+export { faSheet, globalSheet, landingSheet };

package/dist/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './theming/ColorPicker';
+export * from './theming/ThemePanel';
+export * from './DecidoButton';
+export * from './LoginView';
+export * from './WelcomeView';
+export * from './landing/index';

package/dist/components/index.js

@@ -0,0 +1,7 @@
+// export * from './base/BaseComponent';
+export * from './theming/ColorPicker';
+export * from './theming/ThemePanel';
+export * from './DecidoButton';
+export * from './LoginView';
+export * from './WelcomeView';
+export * from './landing/index';

package/dist/components/landing/index.d.ts

@@ -0,0 +1,11 @@
+export * from './landing-page.js';
+export * from './landing-button.js';
+export * from './landing-card.js';
+export * from './landing-feature-card.js';
+export * from './landing-testimonial-card.js';
+export * from './landing-section.js';
+export * from './landing-header.js';
+export * from './landing-footer.js';
+export * from './landing-hero.js';
+export * from './landing-waitlist.js';
+export * from './landing-cta.js';

package/dist/components/landing/index.js

@@ -0,0 +1,11 @@
+export * from './landing-page.js';
+export * from './landing-button.js';
+export * from './landing-card.js';
+export * from './landing-feature-card.js';
+export * from './landing-testimonial-card.js';
+export * from './landing-section.js';
+export * from './landing-header.js';
+export * from './landing-footer.js';
+export * from './landing-hero.js';
+export * from './landing-waitlist.js';
+export * from './landing-cta.js';