@kispace-io/core 0.7.0

package/src/commands/global.ts

@@ -0,0 +1,225 @@
+import { registerAll } from "../core/commandregistry";
+import { CommandContribution } from "../core/contributionregistry";
+import { TOOLBAR_MAIN_RIGHT } from "../core/constants";
+import { EditorInput, editorRegistry } from "../core/editorregistry";
+import { html } from "lit";
+import { toastError, toastInfo } from "../core/toast";
+import { activeEditorSignal, activePartSignal } from "../core/appstate";
+import { appSettings } from "../core/settingsservice";
+import { extensionRegistry } from "../core/extensionregistry";
+import type { Extension } from "../core/extensionregistry";
+import { marketplaceRegistry } from "../core/marketplaceregistry";
+import "./files";
+import "./version-info";
+
+registerAll({
+    command: {
+        "id": "js",
+        "name": "Run JavaScript file",
+        "description": "Executes a JavaScript file given its path",
+        "parameters": [
+            {
+                "name": "script",
+                "description": "the path to a JavaScript file to run",
+                "required": false
+            }
+        ]
+    }
+})
+
+registerAll({
+    command: {
+        "id": "save",
+        "name": "Save editor",
+        "description": "Saves the active/focused editor",
+        "keyBinding": "CTRL+S",
+        "parameters": []
+    },
+    handler: {
+        execute: async _context => {
+            const part = activeEditorSignal.get() || activePartSignal.get()
+            if (part && part.isDirty()) {
+                part.save()
+            }
+        }
+    },
+    contribution: {
+        target: "toolbar:.system.editors",
+        icon: "floppy-disk",
+        label: "Save active editor",
+        slot: "start",
+        disabled: () => {
+            const part = activePartSignal.get()
+            return !part || !part.isDirty()
+        }
+    } as CommandContribution
+})
+
+registerAll({
+    command: {
+        "id": "run_python",
+        "name": "Run Python Cell",
+        "description": "Runs active Python code in a supporting context (e.g. notebook, terminal, etc.)",
+        "keyBinding": "CTRL+R",
+        "parameters": []
+    }
+})
+
+const THEME_SETTINGS_KEY = "theme"
+
+async function applyTheme(themeClass: 'wa-dark' | 'wa-light'): Promise<void> {
+    const root = document.documentElement
+    root.classList.remove('wa-dark', 'wa-light')
+    root.classList.add(themeClass)
+}
+
+async function loadTheme(): Promise<void> {
+    const theme = await appSettings.get(THEME_SETTINGS_KEY)
+    await applyTheme(theme || 'wa-dark')
+}
+
+async function saveTheme(themeClass: 'wa-dark' | 'wa-light'): Promise<void> {
+    await appSettings.set(THEME_SETTINGS_KEY, themeClass)
+}
+
+registerAll({
+    command: {
+        "id": "switch_theme",
+        "name": "Switch theme",
+        "description": "Switches between dark and light theme",
+        "parameters": []
+    },
+    handler: {
+        execute: async _context => {
+            const isDark = document.documentElement.classList.contains("wa-dark")
+            const newTheme = isDark ? 'wa-light' : 'wa-dark'
+            await applyTheme(newTheme)
+            await saveTheme(newTheme)
+        }
+    },
+    contribution: {
+        target: TOOLBAR_MAIN_RIGHT,
+        icon: "circle-half-stroke",
+        label: "Theme Switcher",
+    }
+})
+
+// Load theme on module initialization
+loadTheme().catch(err => {
+    console.error('Failed to load theme preference:', err)
+})
+
+registerAll({
+    command: {
+        "id": "fullscreen",
+        "name": "Toggle fullscreen",
+        "description": "Toggles fullscreen mode",
+        "parameters": []
+    },
+    handler: {
+        execute: async _context => {
+            if (document.fullscreenElement === document.body) {
+                await document.exitFullscreen()
+            } else {
+                await document.body.requestFullscreen()
+            }
+        }
+    },
+    contribution: {
+        target: TOOLBAR_MAIN_RIGHT,
+        icon: "expand",
+        label: "Fullscreen",
+    }
+})
+
+registerAll({
+    command: {
+        "id": "open_extensions",
+        "name": "Open Extensions",
+        "description": "Opens the extensions registry",
+        "parameters": []
+    },
+    handler: {
+        execute: _context => {
+            const editorInput = {
+                title: "Extensions",
+                data: {},
+                key: "system.extensions",
+                editorId: "extensions-editor",
+                icon: "puzzle-piece",
+                state: {},
+                noOverflow: true,
+            } as EditorInput
+            editorInput.widgetFactory = () => html`
+                <k-extensions></k-extensions>`
+            editorRegistry.loadEditor(editorInput).then()
+        }
+    },
+    contribution: {
+        target: TOOLBAR_MAIN_RIGHT,
+        icon: "puzzle-piece",
+        label: "Open Extensions",
+    }
+})
+
+registerAll({
+    command: {
+        "id": "list_extensions",
+        "name": "List extensions",
+        "description": "Lists all available extensions with their status (enabled/disabled)",
+        "parameters": [],
+        "output": [
+            {
+                "name": "extensions",
+                "description": "array of extension objects with id, name, description, experimental flag, and enabled status"
+            }
+        ]
+    },
+    handler: {
+        execute: async (_context: any) => {
+            const extensions = extensionRegistry.getExtensions().map((e: Extension) => {
+                return {
+                    id: e.id,
+                    name: e.name,
+                    description: e.description,
+                    experimental: e.experimental,
+                    enabled: extensionRegistry.isEnabled(e.id)
+                }
+            });
+            return extensions;
+        }
+    }
+})
+
+registerAll({
+    command: {
+        "id": "toast_message",
+        "name": "Toast message to user",
+        "description": "Shows a toast message",
+        "parameters": [
+            {
+                "name": "message",
+                "description": "the message to toast",
+                "required": true
+            },
+            {
+                "name": "type",
+                "description": "the toast type: info (default), or error",
+                "required": false
+            }
+        ]
+    },
+    handler: {
+        execute: ({ params: { message, type } }: any) => {
+            if (!message) {
+                return
+            }
+            if (type === "error") {
+                toastError(message)
+            } else {
+                toastInfo(message)
+            }
+        }
+    }
+})
+

package/src/commands/index.ts

@@ -0,0 +1,4 @@
+import "./files";
+import "./global";
+import "./version-info";
+

package/src/commands/version-info.ts

@@ -0,0 +1,214 @@
+import { registerAll } from "../core/commandregistry";
+import { html, render } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { marked } from "marked";
+import { toastError } from "../core/toast";
+import { appLoaderService, type ReleaseEntry } from "../core/apploader";
+import { packageInfoService } from "../core/packageinfoservice";
+
+registerAll({
+    command: {
+        "id": "show_version_info",
+        "name": "Show Version Info",
+        "description": "Shows application version information",
+        "parameters": []
+    },
+    handler: {
+        execute: async _context => {
+            const app = appLoaderService.getCurrentApp();
+            if (!app) {
+                toastError("No app loaded");
+                return;
+            }
+
+            const hasPackages = packageInfoService.hasPackages();
+            const packagesTree = packageInfoService.renderTree();
+
+            let dialogContainer: HTMLElement | null = null;
+            const getDialogContainer = (): HTMLElement => {
+                if (!dialogContainer) {
+                    dialogContainer = document.getElementById('global-dialog-container') || document.createElement('div');
+                    if (!dialogContainer.id) {
+                        dialogContainer.id = 'global-dialog-container';
+                        document.body.appendChild(dialogContainer);
+                    }
+                }
+                return dialogContainer;
+            };
+
+            const cleanup = () => {
+                if (dialogContainer) {
+                    render(html``, dialogContainer);
+                }
+            };
+
+            const renderReleaseContent = (releaseContent: string) => {
+                const htmlContent = marked.parse(releaseContent, { async: false }) as string;
+                return html`${unsafeHTML(htmlContent)}`;
+            };
+
+            let releases: ReleaseEntry[] = [];
+            if (app.releaseHistory) {
+                if (typeof app.releaseHistory === 'function') {
+                    try {
+                        releases = await app.releaseHistory();
+                    } catch (error) {
+                        console.error('Failed to load release history from app:', error);
+                        releases = [];
+                    }
+                } else {
+                    releases = app.releaseHistory;
+                }
+            }
+
+            const isDev = app.version === '0.0.0';
+            const currentIndex = releases.length > 0 ? releases.findIndex(r => r.tag_name === app.version) : -1;
+            const startIndex = currentIndex >= 0 ? currentIndex : 0;
+            let currentReleaseIndex = startIndex;
+
+            const buildReleaseContent = (index: number) => {
+                if (releases.length === 0) {
+                    return "";
+                }
+
+                const release = releases[index];
+                const isCurrentVersion = release.tag_name === app.version;
+
+                let message = `**Version:** ${release.tag_name}`;
+                if (isCurrentVersion) {
+                    message += ` (Current)`;
+                }
+                message += `\n\n`;
+
+                const publishDate = new Date(release.published_at).toLocaleDateString();
+                message += `**Released:** ${publishDate}\n\n`;
+
+                if (!isCurrentVersion) {
+                    const cleanCurrent = app.version.replace(/^v/, '');
+                    const cleanRelease = release.tag_name.replace(/^v/, '');
+                    const currentParts = cleanCurrent.split('.').map(Number);
+                    const releaseParts = cleanRelease.split('.').map(Number);
+                    let isNewer = false;
+                    for (let i = 0; i < Math.max(currentParts.length, releaseParts.length); i++) {
+                        const current = currentParts[i] || 0;
+                        const releasePart = releaseParts[i] || 0;
+                        if (releasePart > current) {
+                            isNewer = true;
+                            break;
+                        }
+                        if (releasePart < current) {
+                            break;
+                        }
+                    }
+                    if (isNewer) {
+                        message += `⚠️ **Update available - reload page to update**\n\n`;
+                    }
+                }
+
+                if (release.body) {
+                    message += `---\n\n${release.body}`;
+                }
+
+                return message;
+            };
+
+            const handleClose = () => {
+                cleanup();
+            };
+
+            const handleAfterHide = () => {
+                cleanup();
+            };
+
+            const updateDialog = (index: number) => {
+                const releaseContent = buildReleaseContent(index);
+                const hasNavigation = releases.length > 0;
+
+                const template = html`
+                    <wa-dialog 
+                        label="About ${app.name} - ${app.version}"
+                        open 
+                        light-dismiss
+                        style="--width: 600px;"
+                        @wa-request-close=${handleClose}
+                        @wa-after-hide=${handleAfterHide}
+                    >
+                        <style>
+                            .dialog-content {
+                                height: 600px;
+                            }
+                            
+                            wa-tree-item > span small {
+                                color: var(--wa-color-neutral-60);
+                                font-size: 0.875em;
+                                margin-left: 0.5rem;
+                            }
+                        </style>
+                        <small>${app.description}</small>
+                        <div class="dialog-content">
+                            <wa-tab-group>
+                                ${releases.length > 0 ? html`
+                                    <wa-tab slot="nav" panel="release">Release History</wa-tab>
+                                    <wa-tab-panel name="release">
+                                        ${renderReleaseContent(releaseContent)}
+                                    </wa-tab-panel>
+                                ` : ''}
+                                
+                                ${hasPackages ? html`
+                                    <wa-tab slot="nav" panel="packages">NPM Packages</wa-tab>
+                                    <wa-tab-panel name="packages">
+                                        ${packagesTree}
+                                    </wa-tab-panel>
+                                ` : ''}
+                            </wa-tab-group>
+                        </div>
+                        <div slot="footer">
+                            ${hasNavigation ? html`
+                                <wa-button 
+                                    variant="default"
+                                    ?disabled=${index === releases.length - 1}
+                                    @click=${() => {
+                            if (index < releases.length - 1) {
+                                currentReleaseIndex = index + 1;
+                                updateDialog(currentReleaseIndex);
+                            }
+                        }}
+                                >
+                                    ← Previous
+                                </wa-button>
+                                <wa-button 
+                                    variant="default"
+                                    ?disabled=${index === 0}
+                                    @click=${() => {
+                            if (index > 0) {
+                                currentReleaseIndex = index - 1;
+                                updateDialog(currentReleaseIndex);
+                            }
+                        }}
+                                >
+                                    Next →
+                                </wa-button>
+                            ` : ''}
+                            <wa-button variant="primary" data-dialog="close">Close</wa-button>
+                        </div>
+                    </wa-dialog>
+                `;
+                render(template, getDialogContainer());
+            };
+
+            updateDialog(startIndex);
+
+            return new Promise<void>((resolve) => {
+                const checkClosed = () => {
+                    if (!dialogContainer?.querySelector('wa-dialog[open]')) {
+                        resolve();
+                    } else {
+                        setTimeout(checkClosed, 100);
+                    }
+                };
+                checkClosed();
+            });
+        }
+    }
+})
+

package/src/components/index.ts

@@ -0,0 +1,10 @@
+import "./k-filebrowser"
+import "./k-tasks"
+import "./k-workspace-name"
+import "./k-part-name"
+import "./k-extensions"
+import "./k-log-terminal"
+import "./k-command"
+import "./k-fastviews"
+import "./k-language-selector"
+import "./k-app-switcher"

package/src/components/k-app-selector.ts

@@ -0,0 +1,233 @@
+import { html, css } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { KElement } from "../parts/k-element";
+import { appLoaderService, type AppDefinition } from "../core/apploader";
+
+@customElement('k-app-selector')
+export class KAppSelector extends KElement {
+    @state()
+    private apps: AppDefinition[] = [];
+    
+    @state()
+    private loading = true;
+    
+    @state()
+    private error: string | null = null;
+
+    protected async doBeforeUI() {
+        await this.loadApps();
+    }
+
+    private async loadApps() {
+        try {
+            this.loading = true;
+            this.apps = appLoaderService.getRegisteredApps();
+            this.loading = false;
+        } catch (err) {
+            this.error = err instanceof Error ? err.message : 'Failed to load apps';
+            this.loading = false;
+        }
+    }
+
+    private async selectApp(app: AppDefinition) {
+        try {
+            await appLoaderService.setPreferredAppId(app.id);
+            await appLoaderService.loadApp(app.id, document.body);
+        } catch (err) {
+            this.error = err instanceof Error ? err.message : 'Failed to load app';
+        }
+    }
+
+    protected render() {
+        if (this.loading) {
+            return html`
+                <div class="selector-container">
+                    <wa-spinner></wa-spinner>
+                    <p>Loading available apps...</p>
+                </div>
+            `;
+        }
+
+        if (this.error) {
+            return html`
+                <div class="selector-container">
+                    <wa-icon name="triangle-exclamation" class="error-icon"></wa-icon>
+                    <p class="error-message">${this.error}</p>
+                    <wa-button @click=${() => this.loadApps()}>Retry</wa-button>
+                </div>
+            `;
+        }
+
+        if (this.apps.length === 0) {
+            return html`
+                <div class="selector-container">
+                    <wa-icon name="folder-open" class="empty-icon"></wa-icon>
+                    <h2>No Apps Available</h2>
+                    <p>No applications are currently registered.</p>
+                </div>
+            `;
+        }
+
+        return html`
+            <div class="selector-container">
+                <div class="header">
+                    <h1>Select an Application</h1>
+                    <p>Choose an application to load</p>
+                </div>
+                
+                <div class="app-list">
+                    ${this.apps.map(app => html`
+                        <div 
+                            class="app-card" 
+                            @click=${() => this.selectApp(app)}
+                            @keydown=${(e: KeyboardEvent) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    this.selectApp(app);
+                                }
+                            }}
+                            tabindex="0"
+                            role="button">
+                            <div class="app-header">
+                                <h3 class="app-name">${app.name}</h3>
+                                ${app.version ? html`<span class="app-version">v${app.version}</span>` : ''}
+                            </div>
+                            ${app.description ? html`<p class="app-description">${app.description}</p>` : ''}
+                            <div class="app-id">ID: ${app.id}</div>
+                        </div>
+                    `)}
+                </div>
+            </div>
+        `;
+    }
+
+    static styles = css`
+        :host {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100vh;
+            align-items: center;
+            justify-content: center;
+            background: var(--wa-color-neutral-background-base);
+        }
+
+        .selector-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            max-width: 800px;
+            width: 100%;
+            padding: 2rem;
+            box-sizing: border-box;
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .header h1 {
+            margin: 0 0 0.5rem 0;
+            font-size: 2rem;
+            font-weight: 600;
+            color: var(--wa-color-neutral-foreground-loud);
+        }
+
+        .header p {
+            margin: 0;
+            color: var(--wa-color-neutral-foreground-quiet);
+        }
+
+        .app-list {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 1rem;
+            width: 100%;
+        }
+
+        .app-card {
+            display: flex;
+            flex-direction: column;
+            padding: 1.5rem;
+            border: 1px solid var(--wa-color-neutral-border-loud);
+            border-radius: var(--wa-border-radius-medium);
+            background: var(--wa-color-neutral-background-base);
+            cursor: pointer;
+            transition: all 0.2s ease;
+            box-sizing: border-box;
+        }
+
+        .app-card:hover {
+            border-color: var(--wa-color-brand-border-loud);
+            background: var(--wa-color-brand-fill-quiet);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .app-card:focus {
+            outline: 2px solid var(--wa-color-brand-border-loud);
+            outline-offset: 2px;
+        }
+
+        .app-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 0.75rem;
+        }
+
+        .app-name {
+            margin: 0;
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--wa-color-neutral-foreground-loud);
+            flex: 1;
+        }
+
+        .app-version {
+            font-size: 0.875rem;
+            color: var(--wa-color-neutral-foreground-quiet);
+            padding: 0.25rem 0.5rem;
+            background: var(--wa-color-neutral-fill-quiet);
+            border-radius: var(--wa-border-radius-small);
+        }
+
+        .app-description {
+            margin: 0 0 0.75rem 0;
+            color: var(--wa-color-neutral-foreground-base);
+            line-height: 1.5;
+        }
+
+        .app-id {
+            font-size: 0.75rem;
+            color: var(--wa-color-neutral-foreground-quiet);
+            font-family: monospace;
+            margin-top: auto;
+        }
+
+        .empty-icon,
+        .error-icon {
+            font-size: 4rem;
+            color: var(--wa-color-neutral-foreground-quiet);
+            margin-bottom: 1rem;
+        }
+
+        .error-message {
+            color: var(--wa-color-danger-foreground-loud);
+            margin-bottom: 1rem;
+        }
+
+        wa-spinner {
+            margin-bottom: 1rem;
+        }
+    `;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-app-selector': KAppSelector;
+    }
+}
+