@ibgib/space-gib 0.0.32 → 0.0.34

package/src/client/ui/component/code-editor/code-editor.mts

@@ -0,0 +1,427 @@
+import thisCss from "./code-editor.css";
+import thisHtml from "./code-editor.html";
+
+import { ROOT_ADDR } from "@ibgib/ts-gib/dist/V1/constants.mjs";
+import { IbGibAddr } from "@ibgib/ts-gib/dist/types.mjs";
+import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
+import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import {
+    IbGibDynamicComponentMetaBase, IbGibDynamicComponentInstanceBase,
+} from "@ibgib/web-gib/dist/ui/component/ibgib-dynamic-component-bases.mjs";
+import {
+    ElementsBase, IbGibDynamicComponentInstance,
+} from "@ibgib/web-gib/dist/ui/component/component-types.mjs";
+import { getComponentCtorArg } from "@ibgib/web-gib/dist/app-bootstrap/init-orchestration.mjs";
+
+export const CODE_EDITOR_COMPONENT_NAME = 'space-gib-code-editor';
+
+/**
+ * Metadata factory for space-gib-code-editor Web Component.
+ */
+export class CodeEditorComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[${CodeEditorComponentMeta.name}]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${CODE_EDITOR_COMPONENT_NAME}$`);
+    componentName = CODE_EDITOR_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, CodeEditorComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const component = document.createElement(this.componentName) as CodeEditorComponentInstance;
+        await component.initialize({
+            ibGibAddr: ibGibAddr || ROOT_ADDR,
+            meta: this,
+            html: thisHtml,
+            css: [thisCss],
+        });
+        return component;
+    }
+}
+
+/**
+ * References to DOM elements within the code editor Shadow Root.
+ */
+export interface CodeEditorElements extends ElementsBase {
+    rootEl: HTMLDivElement;
+    headerEl: HTMLElement;
+    crumbRepoEl: HTMLSpanElement;
+    crumbPathEl: HTMLSpanElement;
+    crumbBranchEl: HTMLSpanElement;
+    crumbTipEl: HTMLSpanElement;
+    crumbTipContainerEl: HTMLDivElement;
+    statLangEl: HTMLSpanElement;
+    statLinesEl: HTMLSpanElement;
+    statSizeEl: HTMLSpanElement;
+    btnToggleReadonlyEl: HTMLButtonElement;
+    modeIconEl: HTMLSpanElement;
+    modeTextEl: HTMLSpanElement;
+    btnCopyCodeEl: HTMLButtonElement;
+    editorGutterEl: HTMLDivElement;
+    editorTextareaEl: HTMLTextAreaElement;
+    contentEl: HTMLDivElement;
+}
+
+const DEFAULT_CODE = `/**
+ * @module my-app/index
+ * Application entry point running on ibgib VCS.
+ */
+
+import { getGlobalMetaspace } from '@ibgib/web-gib';
+import { add } from './helper.mjs';
+
+export const APP_NAME = 'space-gib in-memory vcs';
+
+export async function boot(): Promise<void> {
+    console.log(\`Initializing \${APP_NAME}...\`);
+    const space = await getGlobalMetaspace();
+    const sum = add(40, 2);
+    console.log(\`Calculated sum: \${sum}\`);
+}
+
+boot();`;
+
+/**
+ * Concrete implementation of the space-gib-code-editor component.
+ */
+export class CodeEditorComponentInstance
+    extends IbGibDynamicComponentInstanceBase<IbGib_V1, CodeEditorElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, CodeEditorElements> {
+
+    protected lc: string = `[${CodeEditorComponentInstance.name}]`;
+
+    private _readOnly: boolean = false;
+    private filepath: string = 'src/index.ts';
+    private repo: string = 'my-app';
+    private branch: string = 'main';
+    private tipAddr: string = '7f8a1b2';
+    private language: string = 'TypeScript';
+
+    get el(): CodeEditorElements {
+        if (!this.elements) {
+            throw new Error(`elements is not defined in ${this.lc}`);
+        }
+        return this.elements;
+    }
+
+    /**
+     * Read-only mode flag. When true, the editor acts as a protected code viewer.
+     */
+    get readOnly(): boolean {
+        return this._readOnly;
+    }
+
+    set readOnly(val: boolean) {
+        this._readOnly = Boolean(val);
+        this.updateReadOnlyState();
+    }
+
+    /** Alias for readOnly */
+    get readonly(): boolean {
+        return this.readOnly;
+    }
+
+    set readonly(val: boolean) {
+        this.readOnly = val;
+    }
+
+    static get observedAttributes(): string[] {
+        return ['readonly'];
+    }
+
+    override async attributeChangedCallback(name: string, oldValue: any, newValue: any): Promise<void> {
+        await super.attributeChangedCallback(name, oldValue, newValue);
+        if (name === 'readonly') {
+            this.readOnly = newValue !== null && newValue !== 'false';
+        }
+    }
+
+    override async created(): Promise<void> {
+        const lc = `${this.lc}[${this.created.name}]`;
+        try {
+            const root = this.shadowRoot!;
+            this.elements = {
+                rootEl: root.getElementById('editor-root') as HTMLDivElement,
+                headerEl: root.getElementById('editor-header') as HTMLElement,
+                crumbRepoEl: root.getElementById('crumb-repo') as HTMLSpanElement,
+                crumbPathEl: root.getElementById('crumb-path') as HTMLSpanElement,
+                crumbBranchEl: root.getElementById('crumb-branch') as HTMLSpanElement,
+                crumbTipEl: root.getElementById('crumb-tip') as HTMLSpanElement,
+                crumbTipContainerEl: root.getElementById('crumb-tip-container') as HTMLDivElement,
+                statLangEl: root.getElementById('stat-lang') as HTMLSpanElement,
+                statLinesEl: root.getElementById('stat-lines') as HTMLSpanElement,
+                statSizeEl: root.getElementById('stat-size') as HTMLSpanElement,
+                btnToggleReadonlyEl: root.getElementById('btn-toggle-readonly') as HTMLButtonElement,
+                modeIconEl: root.getElementById('mode-icon') as HTMLSpanElement,
+                modeTextEl: root.getElementById('mode-text') as HTMLSpanElement,
+                btnCopyCodeEl: root.getElementById('btn-copy-code') as HTMLButtonElement,
+                editorGutterEl: root.getElementById('editor-gutter') as HTMLDivElement,
+                editorTextareaEl: root.getElementById('editor-textarea') as HTMLTextAreaElement,
+                contentEl: root.getElementById('editor-root') as HTMLDivElement,
+            };
+
+            // Set initial content if empty
+            if (this.el.editorTextareaEl && !this.el.editorTextareaEl.value) {
+                this.el.editorTextareaEl.value = DEFAULT_CODE;
+            }
+
+            // Sync readonly attribute if set on host
+            if (this.hasAttribute('readonly')) {
+                this._readOnly = true;
+            }
+
+            this.updateReadOnlyState();
+            this.updateGutter();
+            this.updateStats();
+            this.bindEvents();
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private bindEvents(): void {
+        const lc = `${this.lc}[${this.bindEvents.name}]`;
+        if (!this.el) return;
+
+        // Textarea input: update line numbers & stats
+        this.el.editorTextareaEl?.addEventListener('input', () => {
+            this.updateGutter();
+            this.updateStats();
+
+            this.dispatchEvent(new CustomEvent('space-gib-code-changed', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    filepath: this.filepath,
+                    content: this.el.editorTextareaEl.value,
+                    lineCount: this.getLineCount(),
+                }
+            }));
+        });
+
+        // Synchronize scroll between textarea and line number gutter
+        this.el.editorTextareaEl?.addEventListener('scroll', () => {
+            if (this.el.editorGutterEl && this.el.editorTextareaEl) {
+                this.el.editorGutterEl.scrollTop = this.el.editorTextareaEl.scrollTop;
+            }
+        });
+
+        // Handle Tab key in textarea for code editing
+        this.el.editorTextareaEl?.addEventListener('keydown', (e: KeyboardEvent) => {
+            if (this._readOnly) return;
+
+            if (e.key === 'Tab') {
+                e.preventDefault();
+                const textarea = this.el.editorTextareaEl;
+                const start = textarea.selectionStart;
+                const end = textarea.selectionEnd;
+
+                // Insert 4 spaces
+                textarea.value = textarea.value.substring(0, start) + '    ' + textarea.value.substring(end);
+                textarea.selectionStart = textarea.selectionEnd = start + 4;
+
+                this.updateGutter();
+                this.updateStats();
+            }
+        });
+
+        // Toggle Read-Only / Editable Mode
+        this.el.btnToggleReadonlyEl?.addEventListener('click', () => {
+            this.readOnly = !this.readOnly;
+        });
+
+        // Copy Code Button
+        this.el.btnCopyCodeEl?.addEventListener('click', async () => {
+            const code = this.getContent();
+            try {
+                if (navigator.clipboard) {
+                    await navigator.clipboard.writeText(code);
+                } else {
+                    // Fallback
+                    const ta = document.createElement('textarea');
+                    ta.value = code;
+                    document.body.appendChild(ta);
+                    ta.select();
+                    document.execCommand('copy');
+                    document.body.removeChild(ta);
+                }
+
+                if (this.el.btnCopyCodeEl) {
+                    const originalHtml = this.el.btnCopyCodeEl.innerHTML;
+                    this.el.btnCopyCodeEl.innerHTML = '<span class="btn-icon">✓</span>';
+                    setTimeout(() => {
+                        if (this.el?.btnCopyCodeEl) {
+                            this.el.btnCopyCodeEl.innerHTML = originalHtml;
+                        }
+                    }, 1500);
+                }
+
+                this.dispatchEvent(new CustomEvent('space-gib-code-copied', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { filepath: this.filepath }
+                }));
+            } catch (err) {
+                console.warn(`${lc} Failed to copy code: ${extractErrorMsg(err)}`);
+            }
+        });
+    }
+
+    private updateReadOnlyState(): void {
+        if (!this.elements) return;
+
+        if (this.el.editorTextareaEl) {
+            this.el.editorTextareaEl.readOnly = this._readOnly;
+        }
+
+        if (this.el.rootEl) {
+            this.el.rootEl.classList.toggle('readonly-mode', this._readOnly);
+            this.el.rootEl.classList.toggle('editable-mode', !this._readOnly);
+        }
+
+        if (this.el.btnToggleReadonlyEl) {
+            this.el.btnToggleReadonlyEl.classList.toggle('readonly', this._readOnly);
+            this.el.btnToggleReadonlyEl.classList.toggle('editable', !this._readOnly);
+        }
+
+        if (this.el.modeIconEl) {
+            this.el.modeIconEl.textContent = this._readOnly ? '🔒' : '✏️';
+        }
+
+        if (this.el.modeTextEl) {
+            this.el.modeTextEl.textContent = this._readOnly ? 'Read-Only' : 'Editable';
+        }
+    }
+
+    private getLineCount(): number {
+        const text = this.el?.editorTextareaEl?.value || '';
+        return text.split('\n').length;
+    }
+
+    private updateGutter(): void {
+        if (!this.el?.editorGutterEl) return;
+        const lineCount = this.getLineCount();
+        const linesHtml = Array.from({ length: lineCount }, (_, i) => `<span class="line-num">${i + 1}</span>`).join('');
+        this.el.editorGutterEl.innerHTML = linesHtml;
+    }
+
+    private updateStats(): void {
+        if (!this.elements) return;
+        const text = this.el.editorTextareaEl?.value || '';
+        const lines = text.split('\n').length;
+        const bytes = new Blob([text]).size;
+
+        if (this.el.statLinesEl) {
+            this.el.statLinesEl.textContent = `${lines} line${lines === 1 ? '' : 's'}`;
+        }
+        if (this.el.statSizeEl) {
+            this.el.statSizeEl.textContent = bytes > 1024 ? `${(bytes / 1024).toFixed(1)} KB` : `${bytes} B`;
+        }
+        if (this.el.statLangEl) {
+            this.el.statLangEl.textContent = this.language;
+        }
+    }
+
+    /**
+     * Loads a file into the editor, updating breadcrumbs, content, branch tip, and stats.
+     */
+    public loadFile(opts: {
+        filepath: string;
+        content?: string;
+        branch?: string;
+        tipAddr?: string;
+        language?: string;
+        repo?: string;
+        readOnly?: boolean;
+    }): void {
+        this.filepath = opts.filepath || this.filepath;
+        if (opts.repo) this.repo = opts.repo;
+        if (opts.branch) this.branch = opts.branch;
+        if (opts.tipAddr) this.tipAddr = opts.tipAddr;
+
+        // Auto-detect language from extension if not provided
+        if (opts.language) {
+            this.language = opts.language;
+        } else {
+            const ext = this.filepath.split('.').pop()?.toLowerCase();
+            switch (ext) {
+                case 'ts':
+                case 'mts':
+                    this.language = 'TypeScript';
+                    break;
+                case 'js':
+                case 'mjs':
+                    this.language = 'JavaScript';
+                    break;
+                case 'html':
+                    this.language = 'HTML';
+                    break;
+                case 'css':
+                    this.language = 'CSS';
+                    break;
+                case 'json':
+                    this.language = 'JSON';
+                    break;
+                case 'md':
+                    this.language = 'Markdown';
+                    break;
+                default:
+                    this.language = 'Plain Text';
+            }
+        }
+
+        if (opts.readOnly !== undefined) {
+            this.readOnly = opts.readOnly;
+        }
+
+        if (this.elements) {
+            if (this.el.crumbRepoEl) this.el.crumbRepoEl.textContent = this.repo;
+            if (this.el.crumbPathEl) this.el.crumbPathEl.textContent = this.filepath;
+            if (this.el.crumbBranchEl) this.el.crumbBranchEl.textContent = this.branch;
+            if (this.el.crumbTipEl) this.el.crumbTipEl.textContent = this.tipAddr;
+
+            if (opts.content !== undefined && this.el.editorTextareaEl) {
+                this.el.editorTextareaEl.value = opts.content;
+            }
+
+            this.updateGutter();
+            this.updateStats();
+        }
+    }
+
+    public getContent(): string {
+        return this.el?.editorTextareaEl?.value || '';
+    }
+
+    public setContent(content: string): void {
+        if (this.el?.editorTextareaEl) {
+            this.el.editorTextareaEl.value = content;
+            this.updateGutter();
+            this.updateStats();
+        }
+    }
+
+    public setReadOnly(readOnly: boolean): void {
+        this.readOnly = readOnly;
+    }
+
+    override async disconnected(): Promise<void> {
+        const lc = `${this.lc}[${this.disconnected.name}]`;
+        try {
+            // cleanup if needed
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+}

package/src/client/ui/component/code-editor/index.mts

@@ -0,0 +1,9 @@
+import { getComponentSvc } from "@ibgib/web-gib/dist/ui/component/ibgib-component-service.mjs";
+import { CodeEditorComponentMeta } from "./code-editor.mjs";
+
+export * from "./code-editor.mjs";
+
+export async function registerCodeEditorComponent(): Promise<void> {
+    const componentSvc = await getComponentSvc();
+    componentSvc.registerComponentMeta(new CodeEditorComponentMeta());
+}

package/src/client/ui/component/cosmos-navigator/IMPLEMENTATION.md

@@ -0,0 +1,31 @@
+# space-gib-cosmos-navigator Implementation Specification
+
+## Overview
+`space-gib-cosmos-navigator` is a custom Web Component built on top of the `@ibgib/web-gib` dynamic component microframework. It acts as the core cosmological navigation interface for `space-gib`, presenting both the overarching **Polycosmos** (multi-project) zoom state and the active **Cosmos** (project) zoom state within a single unified component.
+
+## Architecture & Lifecycles
+- **Tag Name**: `space-gib-cosmos-navigator`
+- **Component Meta**: `CosmosNavigatorComponentMeta` (extends `IbGibDynamicComponentMetaBase`)
+- **Component Instance**: `CosmosNavigatorComponentInstance` (extends `IbGibDynamicComponentInstanceBase`)
+- **Backing ibGib**: Initialized with `ROOT_ADDR` (virtual root genesis).
+- **Shadow DOM**: Uses open Shadow DOM. Encapsulates the starfield particle canvas, the central Big Bang singularity, orbiting cosmos nodes, and active cosmos cluster satellites.
+- **Dynamic Injection**: Injected by `SpaceGibShellService` into host `<div id="cosmos-navigator-container"></div>` via `IbGibComponentService`.
+
+## State & Zoom Continuum
+1. **Empty Primordial State (0 Cosmoses)**:
+   - Central Big Bang singularity is visible.
+   - Clicking it triggers the Big Bang explosion and creates Cosmos 1.
+2. **Polycosmos State (Zoomed Out)**:
+   - Central Big Bang singularity acts as the "+ New Cosmos" trigger.
+   - Existing cosmoses orbit around it as glowing galaxy nodes with space count badges.
+   - Clicking an orbiting cosmos calls `selectCosmos(id)` to zoom in.
+   - Clicking the central Big Bang creates a new Cosmos (orbiting nodes disperse, explosion fires, new Cosmos N is born).
+3. **Cosmos State (Zoomed In)**:
+   - Focuses on the selected active cosmos.
+   - Central Superspaces galaxy node unfolds its satellites (Code Space `</>`, Text Space `📝`).
+   - Clicking a space triggers the app launch animation sequence and adds it to the Activity Bar rail.
+
+## Custom Events Emitted (Composed & Bubbling)
+- `space-gib-cosmos-selected`: Emitted when a cosmos is selected (detail: `{ cosmosId, name, spaces }`).
+- `space-gib-space-added`: Emitted when a space (code/text) is added to the active cosmos (detail: `{ cosmosId, space }`).
+- `space-gib-polycosmos-activated`: Emitted when navigating out to the Polycosmos level.