@ibgib/space-gib 0.0.32 → 0.0.34

package/src/client/ui/component/cosmos-navigator/cosmos-navigator.mts

@@ -0,0 +1,1084 @@
+import thisCss from "./cosmos-navigator.css";
+import thisHtml from "./cosmos-navigator.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,
+    IbGibDynamicComponentInstanceInitOpts,
+} from "@ibgib/web-gib/dist/ui/component/component-types.mjs";
+import { getComponentCtorArg } from "@ibgib/web-gib/dist/app-bootstrap/init-orchestration.mjs";
+import { seedInMemoryCosmosWorkspace } from "../../../cosmos/seed-cosmos-workspace.mjs";
+
+export const COSMOS_NAVIGATOR_COMPONENT_NAME = 'space-gib-cosmos-navigator';
+
+export interface AttachedSpace {
+    id: string;
+    type: 'code' | 'text';
+    name: string;
+    shortLabel: string;
+    icon: string;
+}
+
+export interface CosmosInfo {
+    id: string;
+    name: string;
+    spaces: AttachedSpace[];
+    createdAt: number;
+    isTemporary?: boolean;
+}
+
+/**
+ * Metadata factory for space-gib-cosmos-navigator Web Component.
+ */
+export class CosmosNavigatorComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[${CosmosNavigatorComponentMeta.name}]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${COSMOS_NAVIGATOR_COMPONENT_NAME}$`);
+    componentName = COSMOS_NAVIGATOR_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, CosmosNavigatorComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance<IbGib_V1>> {
+        const component = new CosmosNavigatorComponentInstance();
+        await component.initialize({
+            ibGibAddr,
+            meta: this,
+            html: thisHtml,
+            css: [thisCss],
+        });
+        return component;
+    }
+}
+
+/**
+ * References to DOM elements within the component's Shadow Root.
+ */
+export interface CosmosNavigatorElements extends ElementsBase {
+    rootEl: HTMLDivElement;
+    canvasEl: HTMLCanvasElement;
+    polycosmosStageEl: HTMLDivElement;
+    singularityContainerEl: HTMLDivElement;
+    btnSingularityEl: HTMLButtonElement;
+    singularityLabelEl: HTMLSpanElement;
+    orbitTrackEl: HTMLDivElement;
+    orbitingCosmosesContainerEl: HTMLDivElement;
+    activeCosmosStageEl: HTMLDivElement;
+    nodePitchWrapperEl: HTMLDivElement;
+    btnNodePitchEl: HTMLButtonElement;
+    nodeIdentityWrapperEl: HTMLDivElement;
+    btnNodeIdentityEl: HTMLButtonElement;
+    nodeSuperspaceWrapperEl: HTMLDivElement;
+    btnNodeSuperspaceEl: HTMLButtonElement;
+    activeCosmosTitleCaptionEl: HTMLSpanElement;
+    activeCosmosTempBadgeEl?: HTMLSpanElement;
+    superspaceSatellitesEl: HTMLDivElement;
+    btnSatCodeEl: HTMLButtonElement;
+    btnSatTextEl: HTMLButtonElement;
+    nodeAgentWrapperEl: HTMLDivElement;
+    btnNodeAgentEl: HTMLButtonElement;
+}
+
+/**
+ * Concrete implementation of the unified Cosmos & Polycosmos Navigator component.
+ */
+export class CosmosNavigatorComponentInstance
+    extends IbGibDynamicComponentInstanceBase<IbGib_V1, CosmosNavigatorElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, CosmosNavigatorElements> {
+
+    protected lc: string = `[${CosmosNavigatorComponentInstance.name}]`;
+
+    private get el(): CosmosNavigatorElements {
+        if (!this.elements) {
+            throw new Error(`[${CosmosNavigatorComponentInstance.name}] elements not initialized.`);
+        }
+        return this.elements;
+    }
+
+    // State
+    private cosmoses: CosmosInfo[] = [];
+    private activeCosmosId: string | null = null;
+    private zoomState: 'polycosmos' | 'cosmos' = 'polycosmos';
+    private initialOnboardingDone: boolean = false;
+    private isSpaceLaunching: boolean = false;
+
+    // Canvas & Starfield State
+    private ctx: CanvasRenderingContext2D | null = null;
+    private animFrameId: number | null = null;
+    private resizeObserver: ResizeObserver | null = null;
+    private stars: Array<{ x: number; y: number; r: number; alpha: number; speed: number; phase: number }> = [];
+    private particles: Array<{
+        x: number;
+        y: number;
+        vx: number;
+        vy: number;
+        r: number;
+        color: string;
+        alpha: number;
+        decay: number;
+    }> = [];
+    private shockwaveRadius = 0;
+    private shockwaveAlpha = 0;
+
+    constructor() {
+        super();
+    }
+
+    override async initialize(opts: IbGibDynamicComponentInstanceInitOpts): Promise<void> {
+        await super.initialize(opts);
+    }
+
+    override async disconnected(): Promise<void> {
+        const lc = `${this.lc}[${this.disconnected.name}]`;
+        try {
+            this.clearAutoDockTimer();
+            if (this.animFrameId) {
+                cancelAnimationFrame(this.animFrameId);
+                this.animFrameId = null;
+            }
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect();
+                this.resizeObserver = null;
+            }
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    protected override async connectedCallback_reconnectComponent(): Promise<void> {
+        await super.connectedCallback_reconnectComponent();
+        this.ensureStars();
+        this.renderCurrentState();
+    }
+
+    override async created(): Promise<void> {
+        const lc = `${this.lc}[${this.created.name}]`;
+        try {
+            const shadow = this.shadowRoot!;
+            this.elements = {
+                rootEl: shadow.getElementById('cosmos-navigator-root') as HTMLDivElement,
+                canvasEl: shadow.getElementById('starfield-canvas') as HTMLCanvasElement,
+                polycosmosStageEl: shadow.getElementById('polycosmos-stage') as HTMLDivElement,
+                singularityContainerEl: shadow.getElementById('singularity-container') as HTMLDivElement,
+                btnSingularityEl: shadow.getElementById('btn-singularity') as HTMLButtonElement,
+                singularityLabelEl: shadow.getElementById('singularity-label') as HTMLSpanElement,
+                orbitTrackEl: shadow.getElementById('orbit-track') as HTMLDivElement,
+                orbitingCosmosesContainerEl: shadow.getElementById('orbiting-cosmoses-container') as HTMLDivElement,
+                activeCosmosStageEl: shadow.getElementById('active-cosmos-stage') as HTMLDivElement,
+                nodePitchWrapperEl: shadow.getElementById('node-pitch-wrapper') as HTMLDivElement,
+                btnNodePitchEl: shadow.getElementById('btn-node-pitch') as HTMLButtonElement,
+                nodeIdentityWrapperEl: shadow.getElementById('node-identity-wrapper') as HTMLDivElement,
+                btnNodeIdentityEl: shadow.getElementById('btn-node-identity') as HTMLButtonElement,
+                nodeSuperspaceWrapperEl: shadow.getElementById('node-superspace-wrapper') as HTMLDivElement,
+                btnNodeSuperspaceEl: shadow.getElementById('btn-node-superspace') as HTMLButtonElement,
+                activeCosmosTitleCaptionEl: shadow.getElementById('active-cosmos-title-caption') as HTMLSpanElement,
+                activeCosmosTempBadgeEl: shadow.getElementById('active-cosmos-temp-badge') as HTMLSpanElement,
+                superspaceSatellitesEl: shadow.getElementById('superspace-satellites') as HTMLDivElement,
+                btnSatCodeEl: shadow.getElementById('btn-sat-code') as HTMLButtonElement,
+                btnSatTextEl: shadow.getElementById('btn-sat-text') as HTMLButtonElement,
+                nodeAgentWrapperEl: shadow.getElementById('node-agent-wrapper') as HTMLDivElement,
+                btnNodeAgentEl: shadow.getElementById('btn-node-agent') as HTMLButtonElement,
+                contentEl: shadow.getElementById('cosmos-navigator-root') as HTMLDivElement,
+            };
+
+            this.loadState();
+            this.initCanvas();
+            this.bindHandlers();
+            this.renderCurrentState();
+
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private loadState(): void {
+        // In-memory only for Phase 1 testing; backing ibgibs will handle persistence in Phase 2
+        this.cosmoses = [];
+        this.activeCosmosId = null;
+        this.zoomState = 'polycosmos';
+
+        // Clear any stale keys from earlier runs so reload presents a clean slate
+        try {
+            localStorage.removeItem('space-gib-cosmoses');
+            localStorage.removeItem('space-gib-active-cosmos-id');
+            localStorage.removeItem('space-gib-mode');
+        } catch {
+            // ignore
+        }
+    }
+
+    private saveState(): void {
+        // In-memory only for Phase 1 testing; backing ibgibs will handle persistence in Phase 2
+    }
+
+    private initCanvas(): void {
+        if (!this.el.canvasEl) return;
+        this.ctx = this.el.canvasEl.getContext('2d');
+        if (!this.ctx) return;
+
+        this.resizeCanvas();
+
+        if (typeof window !== 'undefined' && 'ResizeObserver' in window && this.el.rootEl) {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.resizeCanvas();
+            });
+            this.resizeObserver.observe(this.el.rootEl);
+        }
+
+        window.addEventListener('resize', () => this.resizeCanvas());
+
+        this.initStars();
+        this.startCanvasLoop();
+    }
+
+    public ensureStars(): void {
+        if (!this.animFrameId) {
+            this.startCanvasLoop();
+        }
+        this.resizeCanvas();
+        if (this.stars.length === 0) {
+            this.initStars();
+        }
+        setTimeout(() => {
+            this.resizeCanvas();
+            if (this.stars.length === 0) {
+                this.initStars();
+            }
+        }, 50);
+        setTimeout(() => {
+            this.resizeCanvas();
+        }, 200);
+    }
+
+    private resizeCanvas(): void {
+        if (!this.el.canvasEl) return;
+        const parent = this.el.rootEl || this.el.canvasEl.parentElement;
+        const parentW = parent && parent.clientWidth > 0 ? parent.clientWidth : window.innerWidth;
+        const parentH = parent && parent.clientHeight > 0 ? parent.clientHeight : 500;
+        const targetW = Math.max(300, Math.floor(parentW));
+        const targetH = Math.max(300, Math.floor(parentH));
+
+        if (this.el.canvasEl.width !== targetW || this.el.canvasEl.height !== targetH) {
+            this.el.canvasEl.width = targetW;
+            this.el.canvasEl.height = targetH;
+            if (this.stars.length === 0) {
+                this.initStars();
+            }
+        }
+    }
+
+    private initStars(): void {
+        if (!this.el.canvasEl) return;
+        const w = Math.max(300, this.el.canvasEl.width);
+        const h = Math.max(300, this.el.canvasEl.height);
+        this.stars = [];
+        const count = Math.max(100, Math.min(260, Math.floor((w * h) / 3600)));
+        for (let i = 0; i < count; i++) {
+            this.stars.push({
+                x: Math.random() * w,
+                y: Math.random() * h,
+                r: Math.random() * 1.6 + 0.4,
+                alpha: Math.random() * 0.75 + 0.25,
+                speed: Math.random() * 0.008 + 0.003,
+                phase: Math.random() * Math.PI * 2,
+            });
+        }
+    }
+
+    private startCanvasLoop(): void {
+        if (this.animFrameId) return;
+
+        const loop = () => {
+            this.renderCanvasFrame();
+            this.animFrameId = requestAnimationFrame(loop);
+        };
+        this.animFrameId = requestAnimationFrame(loop);
+    }
+
+    private renderCanvasFrame(): void {
+        if (!this.ctx || !this.el.canvasEl) return;
+        const ctx = this.ctx;
+        const w = this.el.canvasEl.width;
+        const h = this.el.canvasEl.height;
+
+        ctx.clearRect(0, 0, w, h);
+
+        // 1. Draw starfield
+        for (let i = 0; i < this.stars.length; i++) {
+            const s = this.stars[i];
+            s.phase += s.speed;
+            const currentAlpha = Math.max(0.1, Math.min(1.0, s.alpha + Math.sin(s.phase) * 0.35));
+
+            ctx.fillStyle = `rgba(255, 255, 255, ${currentAlpha})`;
+            ctx.beginPath();
+            ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
+            ctx.fill();
+
+            // Subtle drift
+            s.y -= 0.08;
+            if (s.y < 0) {
+                s.y = h;
+                s.x = Math.random() * w;
+            }
+        }
+
+        // 2. Shockwave ring (Big Bang explosion)
+        if (this.shockwaveAlpha > 0.01) {
+            ctx.strokeStyle = `rgba(167, 139, 250, ${this.shockwaveAlpha})`;
+            ctx.lineWidth = 4 * this.shockwaveAlpha;
+            ctx.beginPath();
+            ctx.arc(w / 2, h / 2, this.shockwaveRadius, 0, Math.PI * 2);
+            ctx.stroke();
+
+            // Secondary golden/amber inner shockwave ring
+            ctx.strokeStyle = `rgba(251, 191, 36, ${this.shockwaveAlpha * 0.75})`;
+            ctx.lineWidth = 2.5 * this.shockwaveAlpha;
+            ctx.beginPath();
+            ctx.arc(w / 2, h / 2, Math.max(0, this.shockwaveRadius - 16), 0, Math.PI * 2);
+            ctx.stroke();
+
+            this.shockwaveRadius += 10;
+            // Slower decay: lasts ~1 second longer than before
+            this.shockwaveAlpha *= 0.975;
+        }
+
+        // 3. Explosion Particles
+        for (let i = this.particles.length - 1; i >= 0; i--) {
+            const p = this.particles[i];
+            p.x += p.vx;
+            p.y += p.vy;
+            p.vx *= 0.978;
+            p.vy *= 0.978;
+            p.alpha -= p.decay;
+
+            if (p.alpha <= 0.01) {
+                this.particles.splice(i, 1);
+                continue;
+            }
+
+            ctx.fillStyle = p.color.replace('rgb', 'rgba').replace(')', `, ${p.alpha})`);
+            ctx.beginPath();
+            ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+            ctx.fill();
+        }
+    }
+
+    public triggerBigBangExplosion(): void {
+        if (!this.el.canvasEl) return;
+        const w = this.el.canvasEl.width;
+        const h = this.el.canvasEl.height;
+        const cx = w / 2;
+        const cy = h / 2;
+
+        this.shockwaveRadius = 10;
+        this.shockwaveAlpha = 1.0;
+
+        this.particles = [];
+        const colors = [
+            'rgb(255, 255, 255)',
+            'rgb(167, 139, 250)',
+            'rgb(124, 92, 252)',
+            'rgb(56, 189, 248)',
+            'rgb(236, 72, 153)',
+            'rgb(251, 191, 36)',
+        ];
+
+        const particleCount = 140;
+        for (let i = 0; i < particleCount; i++) {
+            const angle = Math.random() * Math.PI * 2;
+            const speed = Math.random() * 11 + 2.5;
+            this.particles.push({
+                x: cx,
+                y: cy,
+                vx: Math.cos(angle) * speed,
+                vy: Math.sin(angle) * speed,
+                r: Math.random() * 3.5 + 1.2,
+                color: colors[Math.floor(Math.random() * colors.length)],
+                alpha: 1.0,
+                // Slower decay: lasts ~1 second longer
+                decay: Math.random() * 0.007 + 0.005,
+            });
+        }
+    }
+
+    /**
+     * Staged sequence for the Big Bang initiation:
+     * 1. Singularity compresses with high velocity spinning firecracker rotation (1000ms).
+     * 2. Explosion triggers: shockwave & particles burst outward across the canvas.
+     * 3. Dispatches 'space-gib-big-bang-exploded' so the Shell can fade in header & footer.
+     * 4. Cosmos & escaping buttons blossom out with the explosion shockwave (120ms).
+     */
+    public triggerBigBangSequence(onComplete?: () => void): void {
+        const btn = this.el.btnSingularityEl;
+        if (!btn) {
+            this.triggerBigBangExplosion();
+            onComplete?.();
+            return;
+        }
+
+        // Stage 1: Gravitational compression with high-velocity firecracker rotation (1000ms)
+        btn.classList.add('compressing');
+
+        setTimeout(() => {
+            // Stage 2: Explosion burst (BOOM!)
+            btn.classList.remove('compressing');
+            btn.classList.add('exploded');
+
+            this.triggerBigBangExplosion();
+
+            // Dispatch event to Shell: the Big Bang explosion has hit!
+            this.dispatchEvent(new CustomEvent('space-gib-big-bang-exploded', {
+                bubbles: true,
+                composed: true,
+            }));
+
+            // Stage 3: Cosmos and buttons emerge directly with the explosion shockwave
+            setTimeout(() => {
+                onComplete?.();
+            }, 120);
+
+            setTimeout(() => {
+                btn.classList.remove('exploded');
+            }, 600);
+        }, 1000);
+    }
+
+    private bindHandlers(): void {
+        // Singularity Button click (Empty state Big Bang OR Polycosmos New Cosmos)
+        this.el.btnSingularityEl.addEventListener('click', () => {
+            this.triggerBigBangSequence(async () => {
+                if (this.cosmoses.length === 0) {
+                    try {
+                        const seeded = await seedInMemoryCosmosWorkspace();
+                        if (!this.cosmoses.some(c => c.id === seeded.id)) {
+                            this.cosmoses.push(seeded);
+                        }
+                        this.selectCosmos(seeded.id);
+                    } catch (seedErr) {
+                        console.error(`${this.lc} Failed to seed in-memory cosmos: ${extractErrorMsg(seedErr)}`);
+                        const fallback = this.createCosmos('welcome-cosmos');
+                        this.selectCosmos(fallback.id);
+                    }
+                } else {
+                    const nextIndex = this.cosmoses.length + 1;
+                    const newCosmos = this.createCosmos(`cosmos-${nextIndex}`);
+                    this.selectCosmos(newCosmos.id);
+                }
+
+            });
+        });
+
+        // Satellites Click (Code Space & Text Space)
+        this.el.btnSatCodeEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.handleSpaceClick('code');
+        });
+
+        this.el.btnSatTextEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.handleSpaceClick('text');
+        });
+
+        // Hover over satellites pauses the orbit & cosmos galaxy spin (drifting buttons keep moving)
+        [this.el.btnSatCodeEl, this.el.btnSatTextEl].forEach(btn => {
+            btn?.addEventListener('mouseenter', () => {
+                this.el.activeCosmosStageEl?.classList.add('satellites-hovered');
+            });
+            btn?.addEventListener('mouseleave', () => {
+                this.el.activeCosmosStageEl?.classList.remove('satellites-hovered');
+            });
+        });
+
+        // Pitch Node Click (💰)
+        this.el.btnNodePitchEl?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.handlePitchClick();
+        });
+
+        // Identity Node Click
+        this.el.btnNodeIdentityEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.handleIdentityClick();
+        });
+
+        // Agent Chat Click
+        this.el.btnNodeAgentEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.handleAgentClick();
+        });
+    }
+
+    private launchProjectile({
+        sourceWrapperEl,
+        sourceBtnEl,
+        targetEl,
+        fallbackTarget,
+        emoji,
+        isPitch = false,
+        projectileType,
+        duration = 1600,
+        onApproach,
+        onDocked,
+    }: {
+        sourceWrapperEl: HTMLElement;
+        sourceBtnEl: HTMLElement;
+        targetEl?: HTMLElement | null;
+        fallbackTarget?: { x: number; y: number; width?: number; height?: number };
+        emoji: string;
+        isPitch?: boolean;
+        projectileType?: 'pitch' | 'identity' | 'agent' | 'code' | 'text';
+        duration?: number;
+        onApproach?: () => void;
+        onDocked: () => void;
+    }): void {
+        const fromRect = sourceBtnEl.getBoundingClientRect();
+        let toRect: { left: number; top: number; width: number; height: number };
+
+        if (targetEl) {
+            const r = targetEl.getBoundingClientRect();
+            if (r.width > 0 && r.height > 0) {
+                toRect = { left: r.left, top: r.top, width: r.width, height: r.height };
+            } else if (fallbackTarget) {
+                toRect = { left: fallbackTarget.x, top: fallbackTarget.y, width: fallbackTarget.width || 44, height: fallbackTarget.height || 44 };
+            } else {
+                toRect = { left: r.left, top: r.top, width: 44, height: 44 };
+            }
+        } else if (fallbackTarget) {
+            toRect = { left: fallbackTarget.x, top: fallbackTarget.y, width: fallbackTarget.width || 44, height: fallbackTarget.height || 44 };
+        } else {
+            onDocked();
+            return;
+        }
+
+        // Hide source wrapper in the canvas stage so only the flying projectile is seen
+        sourceWrapperEl.classList.add('node-is-escaping');
+
+        // Create the flying projectile on document.body (above all panels, headers, overflow:hidden)
+        const projectile = document.createElement('div');
+        const isPitchProj = isPitch || projectileType === 'pitch';
+        projectile.className = `cosmos-flying-projectile ${isPitchProj ? 'pitch-projectile' : ''}`;
+        projectile.style.position = 'fixed';
+        projectile.style.left = `${fromRect.left}px`;
+        projectile.style.top = `${fromRect.top}px`;
+        projectile.style.width = `${fromRect.width}px`;
+        projectile.style.height = `${fromRect.height}px`;
+        projectile.style.zIndex = '999999';
+        projectile.style.pointerEvents = 'none';
+        projectile.style.margin = '0';
+        projectile.style.borderRadius = '50%';
+        projectile.style.display = 'flex';
+        projectile.style.alignItems = 'center';
+        projectile.style.justifyContent = 'center';
+        projectile.style.willChange = 'transform, opacity';
+
+        if (projectileType === 'code') {
+            projectile.style.background = 'radial-gradient(circle, rgba(14, 165, 233, 0.45) 0%, rgba(15, 23, 42, 0.98) 100%)';
+            projectile.style.border = '2px solid rgba(56, 189, 248, 0.95)';
+            projectile.style.boxShadow = '0 0 28px rgba(56, 189, 248, 0.85), inset 0 0 14px rgba(56, 189, 248, 0.45)';
+            projectile.style.color = '#38bdf8';
+            projectile.style.fontSize = '1.25rem';
+            projectile.style.fontWeight = '700';
+            projectile.style.fontFamily = 'monospace';
+        } else if (projectileType === 'text') {
+            projectile.style.background = 'radial-gradient(circle, rgba(167, 139, 250, 0.45) 0%, rgba(15, 23, 42, 0.98) 100%)';
+            projectile.style.border = '2px solid rgba(167, 139, 250, 0.95)';
+            projectile.style.boxShadow = '0 0 28px rgba(167, 139, 250, 0.85), inset 0 0 14px rgba(167, 139, 250, 0.45)';
+            projectile.style.fontSize = '1.45rem';
+        } else if (isPitchProj) {
+            projectile.style.background = 'radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, rgba(217, 119, 6, 0.95) 100%)';
+            projectile.style.border = '2px solid rgba(251, 191, 36, 0.9)';
+            projectile.style.boxShadow = '0 0 28px rgba(251, 191, 36, 0.75), inset 0 0 14px rgba(251, 191, 36, 0.4)';
+            projectile.style.fontSize = '1.35rem';
+        } else {
+            projectile.style.background = 'radial-gradient(circle, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%)';
+            projectile.style.border = '2px solid rgba(124, 92, 252, 0.85)';
+            projectile.style.boxShadow = '0 0 28px rgba(124, 92, 252, 0.7), inset 0 0 15px rgba(124, 92, 252, 0.3)';
+            projectile.style.fontSize = '1.5rem';
+        }
+
+        const emojiSpan = document.createElement('span');
+        emojiSpan.textContent = emoji;
+        projectile.appendChild(emojiSpan);
+
+        document.body.appendChild(projectile);
+
+        if (onApproach && duration > 350) {
+            window.setTimeout(() => {
+                onApproach?.();
+            }, duration - 350);
+        }
+
+        const deltaX = (toRect.left + toRect.width / 2) - (fromRect.left + fromRect.width / 2);
+        const deltaY = (toRect.top + toRect.height / 2) - (fromRect.top + fromRect.height / 2);
+        const targetScale = Math.min(toRect.width / fromRect.width, toRect.height / fromRect.height) || 0.85;
+
+        // Smooth trajectory: fully visible throughout the flight
+        const anim = projectile.animate([
+            {
+                transform: 'translate(0px, 0px) scale(1)',
+                opacity: 1,
+            },
+            {
+                transform: `translate(${deltaX * 0.45}px, ${deltaY * 0.35}px) scale(${1 + (targetScale - 1) * 0.2})`,
+                opacity: 1,
+                offset: 0.45,
+            },
+            {
+                transform: `translate(${deltaX}px, ${deltaY}px) scale(${targetScale})`,
+                opacity: 1,
+                offset: 0.9,
+            },
+            {
+                transform: `translate(${deltaX}px, ${deltaY}px) scale(${targetScale})`,
+                opacity: 0,
+                offset: 1.0,
+            }
+        ], {
+            duration,
+            easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+            fill: 'forwards',
+        });
+
+        anim.onfinish = () => {
+            projectile.remove();
+            if (projectileType === 'code' || projectileType === 'text') {
+                sourceWrapperEl.classList.remove('node-is-escaping');
+            }
+            onDocked();
+        };
+    }
+
+    public handlePitchClick(isAuto: boolean = false): void {
+        this.initialOnboardingDone = true;
+        if (!this.el.nodePitchWrapperEl || !this.el.btnNodePitchEl) return;
+        if (this.el.nodePitchWrapperEl.classList.contains('node-is-escaping')) return;
+
+        const targetEl = document.getElementById('btn-header-pitch');
+        const fallbackTarget = {
+            x: window.innerWidth / 2 - 26,
+            y: 8,
+            width: 52,
+            height: 52,
+        };
+
+        this.launchProjectile({
+            sourceWrapperEl: this.el.nodePitchWrapperEl,
+            sourceBtnEl: this.el.btnNodePitchEl,
+            targetEl,
+            fallbackTarget,
+            emoji: '💰',
+            isPitch: true,
+            duration: 1600,
+            onDocked: () => {
+                this.dispatchEvent(new CustomEvent('space-gib-pitch-docked', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { isAuto },
+                }));
+            }
+        });
+    }
+
+    public handleIdentityClick(isAuto: boolean = false): void {
+        this.initialOnboardingDone = true;
+        if (!this.el.nodeIdentityWrapperEl || !this.el.btnNodeIdentityEl) return;
+        if (this.el.nodeIdentityWrapperEl.classList.contains('node-is-escaping')) return;
+
+        const targetEl = document.getElementById('identity-header-container');
+        const fallbackTarget = {
+            x: window.innerWidth - 180,
+            y: 8,
+            width: 140,
+            height: 40,
+        };
+
+        this.launchProjectile({
+            sourceWrapperEl: this.el.nodeIdentityWrapperEl,
+            sourceBtnEl: this.el.btnNodeIdentityEl,
+            targetEl,
+            fallbackTarget,
+            emoji: '👤',
+            isPitch: false,
+            duration: 1600,
+            onDocked: () => {
+                this.dispatchEvent(new CustomEvent('space-gib-identity-docked', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { isAuto },
+                }));
+            }
+        });
+    }
+
+    public handleAgentClick(isAuto: boolean = false): void {
+        this.initialOnboardingDone = true;
+        if (!this.el.nodeAgentWrapperEl || !this.el.btnNodeAgentEl) return;
+        if (this.el.nodeAgentWrapperEl.classList.contains('node-is-escaping')) return;
+
+        const targetEl = document.getElementById('btn-footer-agent');
+        const fallbackTarget = {
+            x: window.innerWidth - 60,
+            y: window.innerHeight - 44,
+            width: 44,
+            height: 44,
+        };
+
+        this.launchProjectile({
+            sourceWrapperEl: this.el.nodeAgentWrapperEl,
+            sourceBtnEl: this.el.btnNodeAgentEl,
+            targetEl,
+            fallbackTarget,
+            emoji: '🤖',
+            isPitch: false,
+            projectileType: 'agent',
+            duration: 1600,
+            onDocked: () => {
+                this.dispatchEvent(new CustomEvent('space-gib-agent-docked', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { isAuto },
+                }));
+            }
+        });
+    }
+
+    public resetDriftAnimations(): void {
+        if (this.el.nodePitchWrapperEl) {
+            this.el.nodePitchWrapperEl.classList.remove('node-is-escaping');
+            this.el.nodePitchWrapperEl.style.opacity = '';
+            this.el.nodePitchWrapperEl.style.pointerEvents = '';
+            this.el.nodePitchWrapperEl.style.animation = 'none';
+            void this.el.nodePitchWrapperEl.offsetHeight; // trigger reflow
+            this.el.nodePitchWrapperEl.style.animation = '';
+        }
+        if (this.el.nodeIdentityWrapperEl) {
+            this.el.nodeIdentityWrapperEl.classList.remove('node-is-escaping');
+            this.el.nodeIdentityWrapperEl.style.opacity = '';
+            this.el.nodeIdentityWrapperEl.style.pointerEvents = '';
+            this.el.nodeIdentityWrapperEl.style.animation = 'none';
+            void this.el.nodeIdentityWrapperEl.offsetHeight; // trigger reflow
+            this.el.nodeIdentityWrapperEl.style.animation = '';
+        }
+        if (this.el.nodeAgentWrapperEl) {
+            this.el.nodeAgentWrapperEl.classList.remove('node-is-escaping');
+            this.el.nodeAgentWrapperEl.style.opacity = '';
+            this.el.nodeAgentWrapperEl.style.pointerEvents = '';
+            this.el.nodeAgentWrapperEl.style.animation = 'none';
+            void this.el.nodeAgentWrapperEl.offsetHeight; // trigger reflow
+            this.el.nodeAgentWrapperEl.style.animation = '';
+        }
+        if (this.el.nodeSuperspaceWrapperEl) {
+            this.el.nodeSuperspaceWrapperEl.style.animation = 'none';
+            void this.el.nodeSuperspaceWrapperEl.offsetHeight; // trigger reflow
+            this.el.nodeSuperspaceWrapperEl.style.animation = '';
+        }
+        if (this.el.superspaceSatellitesEl) {
+            const wrappers = this.el.superspaceSatellitesEl.querySelectorAll<HTMLElement>('.satellite-wrapper');
+            this.el.superspaceSatellitesEl.style.animation = 'none';
+            wrappers.forEach(w => w.style.animation = 'none');
+            void this.el.superspaceSatellitesEl.offsetHeight; // trigger reflow
+            this.el.superspaceSatellitesEl.style.animation = '';
+            wrappers.forEach(w => w.style.animation = '');
+        }
+    }
+
+    private autoDockTimer?: number;
+
+    public startAutoDockTimer(): void {
+        this.clearAutoDockTimer();
+        this.autoDockTimer = window.setTimeout(() => {
+            console.log(`${this.lc} 8-second auto-dock timer triggered.`);
+            this.initialOnboardingDone = true;
+            this.handlePitchClick(true);
+            setTimeout(() => this.handleIdentityClick(true), 250);
+            setTimeout(() => this.handleAgentClick(true), 500);
+        }, 8000);
+    }
+
+    public clearAutoDockTimer(): void {
+        if (this.autoDockTimer) {
+            clearTimeout(this.autoDockTimer);
+            this.autoDockTimer = undefined;
+        }
+    }
+
+    public handleSpaceClick(type: 'code' | 'text'): AttachedSpace | null {
+        if (!this.activeCosmosId) return null;
+        const activeCosmos = this.getActiveCosmos();
+        if (!activeCosmos) { return null; }
+        if (this.isSpaceLaunching) return null;
+
+        this.clearAutoDockTimer();
+        this.initialOnboardingDone = true;
+        this.isSpaceLaunching = true;
+
+        const count = activeCosmos.spaces.filter(s => s.type === type).length;
+        const existingSpacesCount = activeCosmos.spaces.length;
+        const newSpace: AttachedSpace = {
+            id: `${type}-space-${count + 1}-${Date.now()}`,
+            type,
+            name: type === 'code' ? `Code Space ${count + 1}` : `Text Space ${count + 1}`,
+            shortLabel: type === 'code' ? `Code ${count + 1}` : `Text ${count + 1}`,
+            icon: type === 'code' ? '</>' : '📝',
+        };
+
+        activeCosmos.spaces.push(newSpace);
+        this.saveState();
+
+        const sourceBtnEl = type === 'code' ? this.el.btnSatCodeEl : this.el.btnSatTextEl;
+        const sourceWrapperEl = (sourceBtnEl?.closest('.satellite-wrapper') as HTMLElement) || sourceBtnEl;
+
+        const headerH = document.getElementById('main-header')?.getBoundingClientRect().height || 60;
+        const targetTop = headerH + 128 + (existingSpacesCount * 50);
+        const fallbackTarget = {
+            x: 5,
+            y: targetTop,
+            width: 42,
+            height: 42,
+        };
+
+        if (!sourceBtnEl || !sourceWrapperEl) {
+            this.isSpaceLaunching = false;
+            this.dispatchEvent(new CustomEvent('space-gib-space-added', {
+                detail: {
+                    cosmosId: activeCosmos.id,
+                    space: newSpace,
+                    cosmos: activeCosmos,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+            return newSpace;
+        }
+
+        // Make activity bar visible BEFORE the zoom flight starts
+        window.dispatchEvent(new CustomEvent('space-gib-activity-bar-expand-requested', {
+            bubbles: true,
+            composed: true,
+        }));
+
+        setTimeout(() => {
+            this.launchProjectile({
+                sourceWrapperEl,
+                sourceBtnEl,
+                fallbackTarget,
+                emoji: type === 'code' ? '</>' : '📝',
+                projectileType: type,
+                duration: 1400,
+                onDocked: () => {
+                    this.isSpaceLaunching = false;
+                    sourceWrapperEl.classList.remove('node-is-escaping');
+                    this.dispatchEvent(new CustomEvent('space-gib-space-added', {
+                        detail: {
+                            cosmosId: activeCosmos.id,
+                            space: newSpace,
+                            cosmos: activeCosmos,
+                        },
+                        bubbles: true,
+                        composed: true,
+                    }));
+                }
+            });
+        }, 180);
+
+        return newSpace;
+    }
+
+    public createCosmos(name?: string, isTemporary?: boolean): CosmosInfo {
+        const id = `cosmos-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+        const cosmosName = name || `cosmos-${this.cosmoses.length + 1}`;
+        const hasIdentity = Boolean((globalThis as any).ibgib?.identity?.domainIdentity);
+        const temp = isTemporary !== undefined ? isTemporary : !hasIdentity;
+        const newCosmos: CosmosInfo = {
+            id,
+            name: cosmosName,
+            isTemporary: temp,
+            spaces: [],
+            createdAt: Date.now(),
+        };
+
+        this.cosmoses.push(newCosmos);
+        this.activeCosmosId = id;
+        this.saveState();
+        return newCosmos;
+    }
+
+    public selectCosmos(cosmosId: string): void {
+        const cosmos = this.cosmoses.find(c => c.id === cosmosId || c.name === cosmosId);
+        if (!cosmos) { return; }
+
+        this.activeCosmosId = cosmos.id;
+        this.saveState();
+        this.setZoomState('cosmos', cosmos.id);
+    }
+
+    public async ensureCosmos(cosmosId: string): Promise<CosmosInfo> {
+        let existing = this.cosmoses.find(c => c.id === cosmosId || c.name === cosmosId);
+        if (existing) { return existing; }
+
+        if (cosmosId === 'welcome-cosmos' || cosmosId === 'my-cosmos') {
+            const seeded = await seedInMemoryCosmosWorkspace();
+            if (!this.cosmoses.some(c => c.id === seeded.id)) {
+                this.cosmoses.push(seeded);
+            }
+            return seeded;
+        }
+
+        return this.createCosmos(cosmosId);
+    }
+
+    public setZoomState(state: 'polycosmos' | 'cosmos', cosmosId?: string): void {
+        if (cosmosId) {
+            this.activeCosmosId = cosmosId;
+            this.saveState();
+        }
+
+        this.zoomState = state;
+        this.renderCurrentState();
+
+        if (state === 'polycosmos') {
+            this.dispatchEvent(new CustomEvent('space-gib-polycosmos-activated', {
+                detail: { cosmoses: this.cosmoses, activeCosmosId: this.activeCosmosId },
+                bubbles: true,
+                composed: true,
+            }));
+        } else {
+            const activeCosmos = this.getActiveCosmos();
+            if (activeCosmos) {
+                this.dispatchEvent(new CustomEvent('space-gib-cosmos-selected', {
+                    detail: { cosmos: activeCosmos },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+    }
+
+    private renderCurrentState(): void {
+        if (this.zoomState === 'polycosmos') {
+            this.clearAutoDockTimer();
+            this.el.rootEl.classList.remove('zoom-cosmos');
+            this.el.rootEl.classList.add('zoom-polycosmos');
+
+            this.el.polycosmosStageEl.classList.remove('hidden');
+            this.el.activeCosmosStageEl.classList.add('hidden');
+
+            if (this.cosmoses.length === 0) {
+                // Primordial 0-state
+                this.el.orbitTrackEl.classList.add('hidden');
+                this.el.singularityLabelEl.textContent = '';
+            } else {
+                // Multi-cosmos Polycosmos
+                this.el.orbitTrackEl.classList.remove('hidden');
+                this.el.singularityLabelEl.textContent = '+ New Cosmos';
+                this.renderOrbitNodes();
+            }
+        } else {
+            // Zoomed-in Cosmos
+            this.el.rootEl.classList.remove('zoom-polycosmos');
+            this.el.rootEl.classList.add('zoom-cosmos');
+
+            this.el.polycosmosStageEl.classList.add('hidden');
+            this.el.activeCosmosStageEl.classList.remove('hidden');
+
+            const showInitialNodes = !this.initialOnboardingDone && this.cosmoses.length <= 1;
+
+            if (this.el.nodePitchWrapperEl) {
+                this.el.nodePitchWrapperEl.style.display = showInitialNodes ? '' : 'none';
+            }
+            if (this.el.nodeIdentityWrapperEl) {
+                this.el.nodeIdentityWrapperEl.style.display = showInitialNodes ? '' : 'none';
+            }
+            if (this.el.nodeAgentWrapperEl) {
+                this.el.nodeAgentWrapperEl.style.display = showInitialNodes ? '' : 'none';
+            }
+
+            if (showInitialNodes) {
+                this.resetDriftAnimations();
+                this.startAutoDockTimer();
+            } else {
+                this.clearAutoDockTimer();
+            }
+
+            const activeCosmos = this.getActiveCosmos();
+            if (activeCosmos) {
+                this.el.activeCosmosTitleCaptionEl.textContent = activeCosmos.name;
+                if (activeCosmos.isTemporary) {
+                    this.el.activeCosmosTempBadgeEl?.classList.remove('hidden');
+                } else {
+                    this.el.activeCosmosTempBadgeEl?.classList.add('hidden');
+                }
+            }
+        }
+    }
+
+    private renderOrbitNodes(): void {
+        const container = this.el.orbitingCosmosesContainerEl;
+        if (!container) { return; }
+
+        container.innerHTML = '';
+        const N = this.cosmoses.length;
+        if (N === 0) { return; }
+
+        const radius = 210; // orbit radius
+        const cx = 240;
+        const cy = 240;
+
+        for (let i = 0; i < N; i++) {
+            const c = this.cosmoses[i];
+            const angle = (i / N) * 2 * Math.PI - Math.PI / 2;
+            const x = Math.round(cx + Math.cos(angle) * radius);
+            const y = Math.round(cy + Math.sin(angle) * radius);
+
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = `orbit-cosmos-node ${c.id === this.activeCosmosId ? 'is-active' : ''}`;
+            btn.style.left = `${x}px`;
+            btn.style.top = `${y}px`;
+            btn.title = `Enter ${c.name} (${c.spaces.length} spaces)`;
+
+            btn.innerHTML = `
+                <span class="orbit-cosmos-icon">🌌</span>
+                <span class="orbit-cosmos-name">${c.name}</span>
+                <span class="orbit-cosmos-badge">${c.spaces.length} space${c.spaces.length === 1 ? '' : 's'}</span>
+            `;
+
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.selectCosmos(c.id);
+            });
+
+            container.appendChild(btn);
+        }
+    }
+
+    public getCosmoses(): CosmosInfo[] {
+        return [...this.cosmoses];
+    }
+
+    public getActiveCosmos(): CosmosInfo | null {
+        if (!this.activeCosmosId) return this.cosmoses[0] || null;
+        return this.cosmoses.find(c => c.id === this.activeCosmosId) || this.cosmoses[0] || null;
+    }
+
+    public getZoomState(): 'polycosmos' | 'cosmos' {
+        return this.zoomState;
+    }
+}
+