@decido/shell-vscode-core 1.0.0

package/src/types/app.ts

@@ -0,0 +1,36 @@
+// src/types/app.ts
+import { IPlatformAPI } from "../core/api";
+
+export type RouteAccess = 'public' | 'guestOnly' | 'protected';
+
+export interface RouteDefinition {
+    path: string;
+    componentTag: string;
+    auth: RouteAccess;
+    roles?: string[];
+    title?: string;
+    isFullscreen?: boolean;
+}
+
+export interface RegisteredComponent {
+    name: string;
+    icon: string;
+    slot: 'sidebar-nav';
+    order?: number;
+    render: (container: HTMLElement, appContext: AppContext) => void;
+}
+
+export type AppContext = IPlatformAPI;
+export type ViewId = 'dashboard' | 'kanban' | 'goal-architect' | 'projects' | 'calendar' | 'journal' | 'resilience' | 'settings' | 'progress' | 'blueprint' | 'marketplace' | 'upload-module' | 'user-profile' | 'help' | 'about' | 'notifications';
+
+declare const HTML_RESULT = 1;
+declare const SVG_RESULT = 2;
+declare const MATHML_RESULT = 3;
+type ResultType = typeof HTML_RESULT | typeof SVG_RESULT | typeof MATHML_RESULT;
+
+export type UncompiledTemplateResult<T extends ResultType = ResultType> = {
+    ['_$litType$']: T;
+    strings: TemplateStringsArray;
+    values: unknown[];
+};
+export type TemplateResult<T extends ResultType = ResultType> = UncompiledTemplateResult<T>;

package/src/types/debug.ts

@@ -0,0 +1,69 @@
+// Types
+export type LogLevel = 'log' | 'info' | 'warn' | 'error';
+export type DockPosition = 'left' | 'bottom' | 'right' | 'floating';
+export type TabId = 'state' | 'history' | 'events' | 'console' | 'network' | 'performance';
+export type PanelLayout = 'single' | 'split-horizontal' | 'split-vertical' | 'grid';
+
+export interface ConsoleLog {
+    id: string;
+    type: LogLevel;
+    timestamp: Date;
+    message: any[];
+    stack?: string;
+}
+
+export interface NetworkLog {
+    id: string;
+    url: string;
+    method: string;
+    status: number;
+    timestamp: Date;
+    duration: number;
+    size?: number;
+    error?: string;
+}
+
+export interface PerformanceLog {
+    id: string;
+    name: string;
+    duration: number;
+    timestamp: Date;
+    type: 'navigation' | 'resource' | 'measure' | 'mark';
+}
+
+export interface EventLog {
+    id: string;
+    name: string;
+    data: any;
+    timestamp: Date;
+    direction: 'emitted' | 'received';
+}
+
+export interface PanelInstance {
+    id: string;
+    activeTab: TabId;
+    position: { x: number; y: number };
+    size: { width: number; height: number };
+    isMinimized: boolean;
+    zIndex: number;
+}
+
+export interface DebugSettings {
+    maxLogs: number;
+    autoScroll: boolean;
+    showTimestamps: boolean;
+    position: DockPosition;
+    isMinimized: boolean;
+    layout: PanelLayout;
+    panels: PanelInstance[];
+    enableStateEditing: boolean;
+    autoSaveState: boolean;
+    theme: 'dark' | 'light';
+}
+
+export interface StateEditContext {
+    path: string[];
+    originalValue: any;
+    isEditing: boolean;
+    element?: HTMLElement;
+}

package/src/types/index.ts

@@ -0,0 +1,3 @@
+// src/types/index.ts
+export * from './app';
+export * from './platform';

package/src/types/platform.ts

@@ -0,0 +1,112 @@
+// --- Tipos de la UI del Workbench ---
+
+import { IPlatformAPI } from "../core/api";
+import { TemplateResult } from "./app";
+import React from 'react';
+
+export interface Pane {
+    id: string;
+    tabs: Tab[];
+    activeTabId: string | null;
+}
+
+export interface Tab {
+    id: string;
+    title: string;
+    componentTag: string;
+    icon?: string;
+}
+
+// --- Tipos de Puntos de Contribución de la UI ---
+
+export interface ActivityBarItem {
+    id: string;
+    icon: string;
+    title: string;
+    viewId: string; // ID de la vista que se mostrará en el sidebar
+    order?: number;
+    command?: string; // Comando opcional a ejecutar en lugar del default
+    commandArg?: any;
+}
+
+export interface SidebarView {
+    id: string;
+    title: string;
+    render?: (container: HTMLElement, api: IPlatformAPI) => void;
+    component?: React.ComponentType<any>;
+}
+
+export interface SidebarRightView {
+    id: string;
+    title: string;
+    render?: (container: HTMLElement, api: IPlatformAPI) => void;
+    component?: React.ComponentType<any>;
+}
+
+export interface MainView { // Opcional, si quieres registrar vistas principales
+    id: string;
+    render?: (container: HTMLElement, api: IPlatformAPI) => void;
+    componentTag: string;
+    component?: React.ComponentType<any>;
+}
+
+export interface PanelView {
+    id: string;
+    title: string;
+    render?: (container: HTMLElement, api: IPlatformAPI) => void;
+    component?: React.ComponentType<any>;
+}
+
+export interface StatusBarItem {
+    id: string;
+    render: (container: HTMLElement, api: IPlatformAPI) => void;
+    alignment: 'left' | 'right';
+    order?: number;
+}
+
+export interface TopBarItem {
+    id: string;
+    order?: number;
+    // Para botones simples
+    icon?: string;
+    title?: string;
+    commandId?: string;
+    commandArg?: any;
+    // Para componentes complejos
+    render?: (api: IPlatformAPI) => TemplateResult;
+}
+
+export interface CalendarEvent {
+    id: number;
+    title: string;
+    start: string; // Formato ISO: "2025-07-25T10:00:00"
+    end: string;   // Formato ISO: "2025-07-25T11:30:00"
+    allDay: boolean;
+    color: string; // Color del evento, puede heredar de un proyecto
+    source?: {
+        type: 'project' | 'task' | 'manual';
+        id?: number;
+    };
+}
+
+export interface GamificationAchievement {
+    id: string;
+    title: string;
+    description: string;
+    icon: string;
+    conditionType: 'tasks_completed' | 'goals_created' | 'journal_streak' | 'level';
+    conditionValue: number;
+    reward_xp: number;
+    isCustom?: boolean;
+    isSuggested?: boolean;
+    unlocked?: boolean;
+}
+
+export interface GamificationState {
+    xp: number;
+    level: number;
+    streak: number;
+    lastJournalDate: string | null;
+    unlockedAchievements: string[];
+    achievements: GamificationAchievement[];
+}

package/src/ui/Palette.ts

@@ -0,0 +1,161 @@
+// /src/ui/Palette.ts (VERSIÓN COMPLETA Y FUNCIONAL)
+
+import { IPlatformAPI } from '../core/api.js';
+import { Command } from '../core/CommandService.js';
+import { html } from '../utils.js';
+
+export class Palette {
+    private api: IPlatformAPI;
+    private dom: { [key: string]: HTMLElement | null } = {};
+    private allCommands: Command[] = [];
+    private filteredCommands: Command[] = [];
+    private selectedIndex = 0;
+
+    constructor(api: IPlatformAPI) {
+        this.api = api;
+        this.init();
+    }
+
+    /**
+     * Alterna la visibilidad de la paleta.
+     */
+    public toggle() {
+        const isHidden = this.dom.modal?.classList.contains('hidden');
+        if (isHidden) this.show();
+        else this.hide();
+    }
+
+    /**
+     * Muestra la paleta, carga los comandos y enfoca el input.
+     */
+    private show() {
+        this.allCommands = this.api.commands.getAll();
+        this.filteredCommands = this.allCommands;
+        this.selectedIndex = 0;
+        this.renderResults();
+        this.dom.modal?.classList.remove('hidden');
+        (this.dom.input as HTMLInputElement)?.focus();
+    }
+
+    /**
+     * Oculta la paleta y resetea el input.
+     */
+    private hide() {
+        const input = this.dom.input as HTMLInputElement;
+        if (input) input.value = '';
+        this.dom.modal?.classList.add('hidden');
+    }
+
+    /**
+     * Crea el HTML de la paleta y lo añade al DOM.
+     */
+    private init() {
+        const paletteEl = document.createElement('div');
+        paletteEl.id = 'command-palette-modal';
+        paletteEl.className = 'fixed inset-0 bg-darker/80 backdrop-blur-sm flex items-start justify-center hidden pt-24';
+        paletteEl.style.zIndex = '10000';
+        paletteEl.style.position = 'fixed';
+        paletteEl.innerHTML = html`
+            <div class="glass-premium p-4 rounded-2xl w-full max-w-2xl animate-scale-in flex flex-col max-h-[70vh]">
+                <input id="palette-search-input" type="text" class="form-input-premium text-lg mb-2" placeholder="Escribe un comando...">
+                <div id="palette-results-list" class="overflow-y-auto"></div>
+            </div>
+        `;
+        document.body.appendChild(paletteEl);
+
+        this.dom.modal = paletteEl;
+        this.dom.input = paletteEl.querySelector('#palette-search-input');
+        this.dom.results = paletteEl.querySelector('#palette-results-list');
+
+        this.attachEventListeners();
+    }
+
+    /**
+     * Adjunta todos los listeners necesarios para la interactividad de la paleta.
+     */
+    private attachEventListeners() {
+        // Cerrar al hacer clic fuera del modal
+        this.dom.modal?.addEventListener('click', (e) => {
+            if (e.target === this.dom.modal) this.hide();
+        });
+
+        // Filtrar resultados mientras el usuario escribe
+        this.dom.input?.addEventListener('input', () => {
+            const searchTerm = (this.dom.input as HTMLInputElement).value.toLowerCase();
+            this.filteredCommands = this.allCommands.filter(cmd =>
+                cmd.title.toLowerCase().includes(searchTerm) ||
+                cmd.category?.toLowerCase().includes(searchTerm)
+            );
+            this.selectedIndex = 0;
+            this.renderResults();
+        });
+
+        // Navegación por teclado y ejecución
+        this.dom.input?.addEventListener('keydown', (e: KeyboardEvent) => {
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    this.selectedIndex = Math.min(this.selectedIndex + 1, this.filteredCommands.length - 1);
+                    this.renderResults();
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+                    this.renderResults();
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    this.executeSelected();
+                    break;
+                case 'Escape':
+                    this.hide();
+                    break;
+            }
+        });
+
+        // Ejecución por clic
+        this.dom.results?.addEventListener('click', (e: MouseEvent) => {
+            const item = (e.target as HTMLElement).closest('.command-palette-item') as HTMLElement;
+            if (item?.dataset.commandId) {
+                this.api.commands.execute(item.dataset.commandId);
+                this.hide();
+            }
+        });
+    }
+
+    /**
+     * Dibuja la lista de comandos filtrados en el DOM.
+     */
+    private renderResults() {
+        if (!this.dom.results) return;
+
+        if (this.filteredCommands.length === 0) {
+            this.dom.results.innerHTML = `<div class="p-4 text-center text-muted-foreground">No se encontraron comandos.</div>`;
+            return;
+        }
+
+        this.dom.results.innerHTML = this.filteredCommands.map((cmd, index) => html`
+            <div class="command-palette-item ${index === this.selectedIndex ? 'selected' : ''}" data-command-id="${cmd.id}">
+                <div class="flex items-center gap-3">
+                    <i class="${cmd.icon || 'fas fa-cogs'}"></i>
+                    <span>${cmd.title}</span>
+                </div>
+                ${cmd.category ? `<span class="category">${cmd.category}</span>` : ''}
+            </div>
+        `).join('');
+
+        // Asegurarse de que el elemento seleccionado esté visible
+        this.dom.results.querySelector('.selected')?.scrollIntoView({ block: 'nearest' });
+    }
+
+    /**
+     * Ejecuta el comando actualmente seleccionado en la lista.
+     */
+    private executeSelected() {
+        const command = this.filteredCommands[this.selectedIndex];
+        if (command) {
+            this.api.commands.execute(command.id);
+            this.hide();
+        }
+    }
+}

package/src/utils.ts

@@ -0,0 +1,63 @@
+// js/utils.js
+
+/**
+ * Formatea una cadena de fecha (ej: "2025-06-20") a un formato legible.
+ * @param {string} dateString - La fecha en formato YYYY-MM-DD.
+ * @returns {string} La fecha formateada (ej: "20 jun. 2025").
+ */
+export function formatDate(dateString?: string): string {
+    if (!dateString) return 'Sin fecha';
+    const date = new Date(dateString);
+    const userTimezoneOffset = date.getTimezoneOffset() * 60000;
+    return new Date(date.getTime() + userTimezoneOffset).toLocaleDateString('es-ES', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+    });
+}
+
+/**
+ * Función ficticia (dummy) para activar el resaltado de sintaxis de HTML
+ * en las plantillas de texto de VS Code. Simplemente reconstruye y devuelve
+ * la cadena de texto original.
+ * @param {TemplateStringsArray} strings
+ * @param  {...any} values
+ * @returns {string}
+ */
+export function html(strings: any, ...values: any[]) {
+  // String.raw es una forma segura y nativa de reconstruir la plantilla
+  return String.raw({ raw: strings }, ...values);
+}
+
+/**
+ * Hace que un elemento del DOM sea arrastrable usando un manejador.
+ * @param {HTMLElement} _element - El elemento a mover.
+ * @param {HTMLElement} _handle - El elemento que activa el arrastre.
+ */
+export function makeDraggable(_element: any, _handle: any) {
+    // let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+    // handle.onmousedown = dragMouseDown;
+
+    // function dragMouseDown(e) {
+    //     e.preventDefault();
+    //     pos3 = e.clientX;
+    //     pos4 = e.clientY;
+    //     document.onmouseup = closeDragElement;
+    //     document.onmousemove = elementDrag;
+    // }
+
+    // function elementDrag(e) {
+    //     e.preventDefault();
+    //     pos1 = pos3 - e.clientX;
+    //     pos2 = pos4 - e.clientY;
+    //     pos3 = e.clientX;
+    //     pos4 = e.clientY;
+    //     element.style.top = (element.offsetTop - pos2) + "px";
+    //     element.style.left = (element.offsetLeft - pos1) + "px";
+    // }
+
+    // function closeDragElement() {
+    //     document.onmouseup = null;
+    //     document.onmousemove = null;
+    // }
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "moduleResolution": "node",
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}