@ibgib/space-gib 0.0.33 → 0.0.35

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

@@ -0,0 +1,643 @@
+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";
+import { getDeterministicColorInfo } from "@ibgib/web-gib/dist/helpers.mjs";
+import { GibColorInfo } from "@ibgib/web-gib/dist/types.mjs";
+import { getIbGibFromSpace, getTjpAddr } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
+import { getBranchAndRootItemInfosAndIbGibsAndSpaceFromGalaxyIbGib } from "@ibgib/core-gib/dist/cosmology/branching/item/item-helpers.mjs";
+import { B2tFSGalaxyIbGib_V1 } from "@ibgib/core-gib/dist/cosmology/branching/repo/b2tfs-repo-types.mjs";
+import { getPlaygroundMetaspaceAndSpace } from "../../../cosmos/seed-cosmos-workspace.mjs";
+import { getSpaceGibRouterSvc } from "../../router/index.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;
+    placeholderEl?: HTMLDivElement;
+    mainContainerEl?: HTMLDivElement;
+    headerEl: HTMLElement;
+    btnSaveSpinnerEl?: HTMLSpanElement;
+    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;
+}
+
+/**
+ * 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 = '';
+    private repo: string = '';
+    private branch: string = 'main';
+    private tipAddr: string = '';
+    private language: string = '';
+    private originalContent?: string;
+    private isUntracked: boolean = false;
+    private debounceTimer?: any;
+    private saveStartTime: number = 0;
+    private isSaving: boolean = false;
+    private branchColorCache = new Map<string, GibColorInfo>();
+
+    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,
+                placeholderEl: root.getElementById('editor-empty-placeholder') as HTMLDivElement,
+                mainContainerEl: root.getElementById('editor-main-container') 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,
+                btnSaveSpinnerEl: root.getElementById('btn-save-spinner') as HTMLSpanElement,
+                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,
+            };
+
+            // Sync readonly attribute if set on host
+            if (this.hasAttribute('readonly')) {
+                this._readOnly = true;
+            }
+
+            if (!this.filepath) {
+                this.clearFile({ repo: this.repo, branch: this.branch });
+            } else {
+                this.updateReadOnlyState();
+                this.updateGutter();
+                this.updateStats();
+                this.updateBranchColorStyling();
+            }
+
+            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, reset 500ms debounce
+        this.el.editorTextareaEl?.addEventListener('input', () => {
+            this.updateGutter();
+            this.updateStats();
+
+            if (this.debounceTimer) {
+                clearTimeout(this.debounceTimer);
+            }
+            this.debounceTimer = setTimeout(() => {
+                this.saveStartTime = Date.now();
+                this.showSavingIndicator();
+                this.handleDebouncedSave();
+            }, 500);
+        });
+
+        // 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 indentation
+        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.isSaving) {
+                this.el.btnToggleReadonlyEl.classList.remove('saving');
+            }
+        }
+
+        if (!this.isSaving) {
+            if (this.el.btnSaveSpinnerEl) {
+                this.el.btnSaveSpinnerEl.style.display = 'none';
+            }
+            if (this.el.modeIconEl) {
+                this.el.modeIconEl.style.display = 'inline';
+                this.el.modeIconEl.textContent = this._readOnly ? '🔒' : '✏️';
+            }
+            if (this.el.modeTextEl) {
+                this.el.modeTextEl.textContent = this._readOnly ? 'Read-Only' : 'Editable';
+            }
+        }
+    }
+
+    private showSavingIndicator(): void {
+        this.isSaving = true;
+        if (this.elements) {
+            if (this.el.btnSaveSpinnerEl) {
+                this.el.btnSaveSpinnerEl.style.display = 'inline-block';
+            }
+            if (this.el.modeIconEl) {
+                this.el.modeIconEl.style.display = 'none';
+            }
+            if (this.el.modeTextEl) {
+                this.el.modeTextEl.textContent = 'Saving...';
+            }
+            if (this.el.btnToggleReadonlyEl) {
+                this.el.btnToggleReadonlyEl.classList.add('saving');
+            }
+        }
+    }
+
+    private hideSavingIndicator(): void {
+        this.isSaving = false;
+        if (this.elements) {
+            if (this.el.btnSaveSpinnerEl) {
+                this.el.btnSaveSpinnerEl.style.display = 'none';
+            }
+            if (this.el.modeIconEl) {
+                this.el.modeIconEl.style.display = 'inline';
+            }
+            if (this.el.btnToggleReadonlyEl) {
+                this.el.btnToggleReadonlyEl.classList.remove('saving');
+            }
+            this.updateReadOnlyState();
+        }
+    }
+
+    private async handleDebouncedSave(): Promise<void> {
+        if (!this.filepath) return;
+        const currentContent = this.getContent();
+
+        // Diff against originalContent
+        const isReverted = !this.isUntracked && this.originalContent !== undefined && currentContent === this.originalContent;
+
+        this.dispatchEvent(new CustomEvent('space-gib-code-changed', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                filepath: this.filepath,
+                content: currentContent,
+                lineCount: this.getLineCount(),
+                isReverted,
+                isUntracked: this.isUntracked,
+                repo: this.repo,
+                branch: this.branch,
+            }
+        }));
+
+        // Minimum 0.5s (500ms) animation duration for saving indicator
+        const elapsed = Date.now() - this.saveStartTime;
+        const remaining = Math.max(0, 500 - elapsed);
+        setTimeout(() => {
+            this.hideSavingIndicator();
+            this.saveStartTime = 0;
+        }, remaining);
+    }
+
+    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;
+        originalContent?: string;
+        isUntracked?: boolean;
+        branch?: string;
+        tipAddr?: string;
+        language?: string;
+        repo?: string;
+        readOnly?: boolean;
+    }): void {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = undefined;
+        }
+        this.saveStartTime = 0;
+        this.hideSavingIndicator();
+
+        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;
+
+        if (opts.originalContent !== undefined) {
+            this.originalContent = opts.originalContent;
+        } else if (opts.content !== undefined && !opts.isUntracked) {
+            this.originalContent = opts.content;
+        } else {
+            this.originalContent = undefined;
+        }
+        this.isUntracked = Boolean(opts.isUntracked);
+
+        // 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.placeholderEl) this.el.placeholderEl.style.display = 'none';
+            if (this.el.mainContainerEl) this.el.mainContainerEl.style.display = 'flex';
+
+            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.updateReadOnlyState();
+            this.updateGutter();
+            this.updateStats();
+        }
+        this.updateBranchColorStyling();
+    }
+
+    public setTipAddr(tipAddr: string): void {
+        this.tipAddr = tipAddr;
+        if (this.elements && this.el.crumbTipEl) {
+            this.el.crumbTipEl.textContent = tipAddr;
+        }
+    }
+
+    public markAsCommitted(tipAddr?: string): void {
+        this.originalContent = this.getContent();
+        this.isUntracked = false;
+        if (tipAddr) {
+            this.setTipAddr(tipAddr);
+        }
+    }
+
+    /**
+     * Clears the active file and displays the empty state placeholder.
+     */
+    public clearFile(opts?: { repo?: string; branch?: string }): void {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = undefined;
+        }
+        this.saveStartTime = 0;
+        this.hideSavingIndicator();
+        this.originalContent = undefined;
+        this.isUntracked = false;
+
+        this.filepath = '';
+        if (opts?.repo) this.repo = opts.repo;
+        if (opts?.branch) this.branch = opts.branch;
+        this.tipAddr = '';
+        this.language = '';
+
+        if (this.elements) {
+            if (this.el.placeholderEl) this.el.placeholderEl.style.display = 'flex';
+            if (this.el.mainContainerEl) this.el.mainContainerEl.style.display = 'none';
+
+            if (this.el.crumbRepoEl) this.el.crumbRepoEl.textContent = this.repo;
+            if (this.el.crumbPathEl) this.el.crumbPathEl.textContent = '';
+            if (this.el.crumbBranchEl) this.el.crumbBranchEl.textContent = this.branch;
+            if (this.el.crumbTipEl) this.el.crumbTipEl.textContent = '';
+
+            if (this.el.editorTextareaEl) {
+                this.el.editorTextareaEl.value = '';
+            }
+
+            this.updateReadOnlyState();
+            this.updateGutter();
+            this.updateStats();
+        }
+        this.updateBranchColorStyling();
+    }
+
+    public getFilepath(): string {
+        return this.filepath;
+    }
+
+    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;
+    }
+
+    public setGalaxyAndBranch(repo: string, branch: string = 'main'): void {
+        this.repo = repo;
+        this.branch = branch;
+        if (this.elements) {
+            if (this.el.crumbRepoEl) this.el.crumbRepoEl.textContent = this.repo;
+            if (this.el.crumbBranchEl) this.el.crumbBranchEl.textContent = this.branch;
+        }
+        this.updateBranchColorStyling();
+    }
+
+    public clearBranchColorCache(): void {
+        this.branchColorCache.clear();
+    }
+
+    private async resolveGalaxyIbGib(galaxyName: string, space: any): Promise<B2tFSGalaxyIbGib_V1 | undefined> {
+        const router = getSpaceGibRouterSvc();
+        for (const manifest of router.cosmosManifestCache?.values() || []) {
+            const entry = manifest.data?.galaxies?.[galaxyName];
+            if (entry?.galaxyAddr) {
+                const gib = await getIbGibFromSpace<B2tFSGalaxyIbGib_V1>({ addr: entry.galaxyAddr, space });
+                if (gib) return gib;
+            }
+        }
+        return undefined;
+    }
+
+    public async updateBranchColorStyling(): Promise<void> {
+        try {
+            if (!this.repo) return;
+            const cacheKey = `${this.repo || 'unknown'}~${this.branch}`;
+            let colorInfo = this.branchColorCache.get(cacheKey);
+            if (!colorInfo) {
+                const { metaspace, space } = await getPlaygroundMetaspaceAndSpace();
+                const galaxyIbGib = await this.resolveGalaxyIbGib(this.repo, space);
+                let branchAddrOrTjp: string | undefined;
+                if (galaxyIbGib) {
+                    const branchAndRoot = await getBranchAndRootItemInfosAndIbGibsAndSpaceFromGalaxyIbGib({
+                        galaxyIbGib,
+                        branchName: this.branch,
+                        metaspace,
+                    }).catch(() => undefined);
+                    if (branchAndRoot?.branchIbGib) {
+                        branchAddrOrTjp = getTjpAddr({ ibGib: branchAndRoot.branchIbGib }) || branchAndRoot.branchInfo?.branchAddr;
+                    }
+                }
+                colorInfo = getDeterministicColorInfo({
+                    ibGibAddr: branchAddrOrTjp,
+                    gib: branchAddrOrTjp ? undefined : this.branch,
+                    translucentAlpha: 18,
+                });
+                if (this.repo && branchAddrOrTjp) {
+                    this.branchColorCache.set(cacheKey, colorInfo);
+                }
+            }
+
+            if (colorInfo) {
+                this.style.setProperty('--branch-accent-color', colorInfo.punctiliarColor);
+                this.style.setProperty('--branch-accent-translucent', colorInfo.punctiliarColorTranslucent);
+                this.style.setProperty('--branch-accent-contrast', colorInfo.punctiliarColorContrast);
+            }
+        } catch (err) {
+            console.warn(`${this.lc} Error updating branch color styling: ${extractErrorMsg(err)}`);
+        }
+    }
+
+    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.