@vib3code/sdk 2.0.3-canary.45332e3 → 2.0.3-canary.4874bcf

package/src/experimental/VIB3Link.js

@@ -0,0 +1,122 @@
+/**
+ * VIB3Link - Multi-User Synchronization
+ *
+ * Provides a networking layer (mocked for now) to sync VIB3Universe state
+ * between multiple clients. Handles entity updates, parameter deltas, and events.
+ *
+ * @experimental
+ */
+export class VIB3Link {
+    constructor() {
+        this.connected = false;
+        this.roomId = null;
+        this.isHost = false;
+        this.peers = new Set();
+        this.eventBus = new EventTarget();
+
+        // Bind methods
+        this.handleMessage = this.handleMessage.bind(this);
+    }
+
+    /**
+     * Connect to a shared room.
+     * @param {string} roomId
+     */
+    async connect(roomId) {
+        this.roomId = roomId;
+        this.connected = true;
+
+        // Mock connection logic
+        console.log(`VIB3Link: Connected to room ${roomId}`);
+
+        // In a real implementation, we would establish WebRTC/WebSocket here
+        // and negotiate host status. For now, assume single-player or host.
+        this.isHost = true;
+
+        this.emit('connected', { roomId, isHost: this.isHost });
+    }
+
+    /**
+     * Disconnect from the room.
+     */
+    disconnect() {
+        this.connected = false;
+        this.peers.clear();
+        console.log(`VIB3Link: Disconnected.`);
+        this.emit('disconnected', {});
+    }
+
+    /**
+     * Broadcast an event to all peers.
+     * @param {string} type - Message type (upd, prm, evt)
+     * @param {object} payload
+     */
+    broadcast(type, payload) {
+        if (!this.connected) return;
+
+        const message = {
+            t: type,
+            s: Date.now(), // simple sequence
+            p: payload
+        };
+
+        // In real impl: webrtcChannel.send(JSON.stringify(message));
+
+        // Mock loopback for local testing (optional)
+        // this.handleMessage(message);
+    }
+
+    /**
+     * Handle an incoming message from the network.
+     * @param {object} message
+     */
+    handleMessage(message) {
+        const { t, p } = message;
+
+        switch (t) {
+            case 'upd':
+                this.emit('entityUpdate', p);
+                break;
+            case 'prm':
+                this.emit('parameterDelta', p);
+                break;
+            case 'evt':
+                this.emit('universeEvent', p);
+                break;
+            default:
+                console.warn(`VIB3Link: Unknown message type ${t}`);
+        }
+    }
+
+    /**
+     * Sync the state of all entities. Called by Orchestrator tick.
+     * @param {Map<string, object>} entities
+     */
+    sync(entities) {
+        if (!this.connected || !this.isHost) return;
+
+        // Collect dirty state
+        // In a real optimized system, we'd diff state or only send moved entities
+        // For now, let's just log that we would sync
+        // console.log(`VIB3Link: Syncing ${entities.size} entities`);
+    }
+
+    /**
+     * Emit a local event for system consumption.
+     * @param {string} name
+     * @param {object} detail
+     */
+    emit(name, detail) {
+        const event = new CustomEvent(name, { detail });
+        this.eventBus.dispatchEvent(event);
+    }
+
+    /**
+     * Listen for network events.
+     * @param {string} name
+     * @param {function} callback
+     */
+    on(name, callback) {
+        this.eventBus.addEventListener(name, (e) => callback(e.detail));
+    }
+}

package/src/experimental/VIB3Orchestrator.js

@@ -0,0 +1,146 @@
+/**
+ * VIB3Orchestrator - The Core of the VIB3 Universe
+ *
+ * Manages the lifecycle and coordination of multiple VIB3+ entities (visualizers).
+ * Implements the "Universe" concept where multiple instances share a clock,
+ * physics, and event bus.
+ *
+ * @experimental
+ */
+export class VIB3Orchestrator {
+    constructor() {
+        this.entities = new Map(); // id -> Entity
+        this.nextEntityId = 1;
+
+        // Master Clock
+        this.time = 0;
+        this.lastFrameTime = 0;
+        this.paused = false;
+
+        // Systems
+        this.eventBus = new EventTarget();
+
+        // Bind loop
+        this.tick = this.tick.bind(this);
+    }
+
+    /**
+     * Start the universe simulation loop.
+     */
+    start() {
+        if (this.running) return;
+        this.running = true;
+        this.lastFrameTime = performance.now();
+        requestAnimationFrame(this.tick);
+        console.log('VIB3Orchestrator: Universe started.');
+    }
+
+    /**
+     * Stop the universe simulation loop.
+     */
+    stop() {
+        this.running = false;
+        console.log('VIB3Orchestrator: Universe stopped.');
+    }
+
+    /**
+     * Spawn a new VIB3 entity.
+     * @param {string} type - 'actor', 'prop', 'environment'
+     * @param {object} config - Configuration for the entity
+     * @returns {string} Entity ID
+     */
+    spawn(type, config = {}) {
+        const id = `vib3_entity_${this.nextEntityId++}`;
+
+        // In a real implementation, this would instantiate VIB3Actor or VIB3Prop
+        // For now, we store a mock object representing the entity state
+        const entity = {
+            id,
+            type,
+            config,
+            position: config.position || { x: 0, y: 0, z: 0 },
+            rotation: config.rotation || { x: 0, y: 0, z: 0, w: 0 }, // 4D rotation
+            active: true,
+
+            // Mock VIB3Engine interface
+            engine: {
+                setParameter: (k, v) => console.log(`[${id}] set ${k}=${v}`),
+                getParameter: (k) => 0
+            },
+
+            update: (dt) => {
+                // Default update logic
+                // e.g., apply basic physics or script behavior
+            }
+        };
+
+        this.entities.set(id, entity);
+        this.emit('entitySpawned', { id, type });
+        console.log(`VIB3Orchestrator: Spawned ${type} (${id})`);
+
+        return id;
+    }
+
+    /**
+     * Remove an entity from the universe.
+     * @param {string} id
+     */
+    kill(id) {
+        if (this.entities.has(id)) {
+            const entity = this.entities.get(id);
+            // Cleanup logic (e.g., destroy VIB3Engine instance)
+            if (entity.destroy) entity.destroy();
+
+            this.entities.delete(id);
+            this.emit('entityDespawned', { id });
+            console.log(`VIB3Orchestrator: Killed entity ${id}`);
+        }
+    }
+
+    /**
+     * The main simulation loop.
+     * Prioritizes Physics -> Narrative -> Visuals.
+     * @param {number} timestamp
+     */
+    tick(timestamp) {
+        if (!this.running) return;
+
+        const dt = (timestamp - this.lastFrameTime) / 1000;
+        this.lastFrameTime = timestamp;
+        this.time += dt;
+
+        // 1. Physics / Logic Update
+        this.entities.forEach(entity => {
+            if (entity.active && entity.update) {
+                entity.update(this.time, dt);
+            }
+        });
+
+        // 2. Event Processing (Mock)
+        // Check for collisions, triggers, etc.
+
+        // 3. Visual Sync (Mock)
+        // Ensure all entities are rendering the current frame
+
+        requestAnimationFrame(this.tick);
+    }
+
+    /**
+     * Emit a global universe event.
+     * @param {string} name
+     * @param {object} detail
+     */
+    emit(name, detail) {
+        const event = new CustomEvent(name, { detail });
+        this.eventBus.dispatchEvent(event);
+    }
+
+    /**
+     * Listen for global universe events.
+     * @param {string} name
+     * @param {function} callback
+     */
+    on(name, callback) {
+        this.eventBus.addEventListener(name, (e) => callback(e.detail));
+    }
+}

package/src/experimental/VIB3Universe.js

@@ -0,0 +1,109 @@
+/**
+ * VIB3Universe - High-Level Entry Point for VIB3+ Ultra
+ *
+ * Combines Orchestrator (Logic) and Compositor (Visuals) into a single API.
+ * Manages the "World" where multiple VIB3+ instances coexist.
+ *
+ * @experimental
+ */
+import { VIB3Orchestrator } from './VIB3Orchestrator.js';
+import { VIB3Compositor } from './VIB3Compositor.js';
+import { VIB3Actor } from './VIB3Actor.js';
+import { VIB3Engine } from '../core/VIB3Engine.js';
+
+export class VIB3Universe {
+    /**
+     * @param {string} containerId - DOM ID for the universe container
+     */
+    constructor(containerId = 'vib3-universe') {
+        this.orchestrator = new VIB3Orchestrator();
+        this.compositor = new VIB3Compositor(containerId);
+        this.actors = new Map(); // id -> VIB3Actor
+    }
+
+    /**
+     * Start the universe simulation.
+     */
+    start() {
+        this.orchestrator.start();
+    }
+
+    /**
+     * Stop the universe simulation.
+     */
+    stop() {
+        this.orchestrator.stop();
+    }
+
+    /**
+     * Spawn a new actor into the universe.
+     * @param {object} config
+     * @param {string} config.personality - Actor personality profile
+     * @param {string} config.system - Visualization system ('quantum', 'faceted', 'holographic')
+     * @param {number} config.geometry - Initial geometry index
+     * @param {object} config.layer - Layer options { zIndex, blendMode, opacity, position }
+     * @returns {Promise<VIB3Actor>} The spawned actor
+     */
+    async spawnActor(config = {}) {
+        const actorId = `actor_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
+
+        // 1. Create a container for this actor's engine
+        const container = document.createElement('div');
+        container.id = `container_${actorId}`;
+        container.style.width = '100%';
+        container.style.height = '100%';
+        container.style.pointerEvents = 'none'; // Default to pass-through events
+
+        // 2. Add to compositor (visual layer)
+        this.compositor.addInstance(actorId, container, config.layer || {});
+
+        // 3. Initialize VIB3 Engine
+        const engine = new VIB3Engine({
+            system: config.system || 'holographic',
+            preferWebGPU: true // Ultra tier defaults to high perf
+        });
+
+        // Initialize engine within the container
+        // Note: VIB3Engine.initialize expects a container ID
+        await engine.initialize(container.id);
+
+        // Set initial state
+        if (config.geometry !== undefined) {
+            engine.setParameter('geometry', config.geometry);
+        }
+
+        // 4. Wrap in Actor (logic layer)
+        const actor = new VIB3Actor(engine, config.personality || 'neutral');
+        actor.id = actorId;
+
+        // 5. Register with Orchestrator (simulation loop)
+        this.orchestrator.entities.set(actorId, actor);
+        this.actors.set(actorId, actor);
+
+        console.log(`VIB3Universe: Spawned actor ${actorId}`);
+        return actor;
+    }
+
+    /**
+     * Remove an actor from the universe.
+     * @param {string} actorId
+     */
+    despawnActor(actorId) {
+        const actor = this.actors.get(actorId);
+        if (actor) {
+            // Remove from logic
+            this.orchestrator.kill(actorId);
+
+            // Cleanup engine
+            if (actor.engine && actor.engine.destroy) {
+                actor.engine.destroy();
+            }
+
+            // Remove from visuals
+            this.compositor.removeInstance(actorId);
+            this.actors.delete(actorId);
+
+            console.log(`VIB3Universe: Despawned actor ${actorId}`);
+        }
+    }
+}

package/src/experimental/demos/CrystalLabyrinth.js

@@ -0,0 +1,202 @@
+/**
+ * CrystalLabyrinth.js - Vertical Slice Demo
+ *
+ * Implements the full "Ultra" stack:
+ * - VIB3Universe (Multi-instance)
+ * - VIB3Orchestrator (Game Loop)
+ * - VIB3Compositor (Visuals)
+ * - LatticePhysics (4D Collision)
+ * - PlayerController4D (Input)
+ * - LiveDirector (AI Pacing)
+ *
+ * @experimental
+ */
+import { VIB3Universe } from '../VIB3Universe.js';
+import { GameLoop } from '../GameLoop.js';
+import { LatticePhysics } from '../LatticePhysics.js';
+import { PlayerController4D } from '../PlayerController4D.js';
+import { LiveDirector } from '../LiveDirector.js';
+
+class CrystalLabyrinthGame {
+    constructor() {
+        this.universe = new VIB3Universe('vib3-universe');
+        this.physics = new LatticePhysics();
+        this.director = new LiveDirector(this.universe);
+
+        // Game State
+        this.score = 0;
+        this.health = 100;
+        this.isPlaying = false;
+
+        // Entities
+        this.player = null; // The "Camera"
+        this.crystals = [];
+        this.shadows = [];
+
+        // UI
+        this.ui = {
+            score: document.getElementById('score'),
+            health: document.getElementById('health'),
+            overlay: document.getElementById('overlay'),
+            startBtn: document.getElementById('start-btn')
+        };
+
+        // Bind input
+        this.controller = new PlayerController4D(document.body, {
+            setParameter: (k, v) => this.updatePlayerView(k, v)
+        });
+
+        // Setup Loop
+        this.loop = new GameLoop(
+            (dt) => this.update(dt),
+            (alpha) => this.render(alpha)
+        );
+
+        this.init();
+    }
+
+    async init() {
+        // Create the "World" (Background Layer)
+        // A deep, slow-moving Holographic system representing the void
+        const world = await this.universe.spawnActor({
+            personality: 'neutral',
+            system: 'holographic',
+            geometry: 11, // Hypersphere
+            layer: { zIndex: 0, opacity: 0.4 }
+        });
+
+        // Setup UI listeners
+        this.ui.startBtn.addEventListener('click', () => this.start());
+    }
+
+    start() {
+        this.isPlaying = true;
+        this.ui.overlay.classList.add('hidden');
+
+        // Start Systems
+        this.universe.start();
+        this.loop.start();
+        this.director.start();
+
+        // Spawn Level
+        this.spawnLevel();
+    }
+
+    async spawnLevel() {
+        // Spawn 5 Crystals (Pickups)
+        for (let i = 0; i < 5; i++) {
+            const crystal = await this.universe.spawnActor({
+                personality: 'heroic', // Bright, positive
+                system: 'faceted',
+                geometry: 7, // Crystal
+                layer: { zIndex: 10, blendMode: 'screen', opacity: 0.9 }
+            });
+
+            // Random position in 4D space (mock)
+            crystal.physics = {
+                pos: {
+                    x: (Math.random() - 0.5) * 20,
+                    y: (Math.random() - 0.5) * 5,
+                    z: (Math.random() - 0.5) * 20
+                },
+                vel: { x: 0, y: 0, z: 0 },
+                acc: { x: 0, y: 0, z: 0 }
+            };
+
+            this.crystals.push(crystal);
+        }
+
+        // Spawn 3 Shadows (Enemies)
+        for (let i = 0; i < 3; i++) {
+            const shadow = await this.universe.spawnActor({
+                personality: 'glitch', // Chaotic, negative
+                system: 'quantum',
+                geometry: 16, // Spiky
+                layer: { zIndex: 5, blendMode: 'multiply', opacity: 0.7 }
+            });
+
+            shadow.physics = {
+                pos: { x: 0, y: 0, z: -30 }, // Start far away
+                vel: { x: 0, y: 0, z: 0 },
+                acc: { x: 0, y: 0, z: 0 }
+            };
+
+            this.shadows.push(shadow);
+        }
+    }
+
+    /**
+     * Physics Update (Fixed Timestep)
+     */
+    update(dt) {
+        if (!this.isPlaying) return;
+
+        // 1. Update Player Controls
+        this.controller.update(dt);
+
+        // 2. Update Physics World
+        // Sync player controller state to physics engine?
+        // For now, controller handles movement directly.
+
+        // 3. AI Logic (Shadows hunt player)
+        this.shadows.forEach(shadow => {
+            // Move towards player (0,0,0 relative to camera)
+            // In a real engine, we'd have absolute coordinates.
+            // Here, we simulate relative motion by updating parameters
+
+            // Mock: Oscillate shadow intensity based on "proximity"
+            shadow.emote('panic', 0.5);
+        });
+
+        // 4. Check Collisions (Mock)
+        // If player is close to a crystal -> Collect
+        if (Math.random() < 0.005 && this.crystals.length > 0) {
+            this.collectCrystal(this.crystals.pop());
+        }
+    }
+
+    /**
+     * Render Update (Variable Timestep)
+     */
+    render(alpha) {
+        // Visual interpolation could happen here
+    }
+
+    updatePlayerView(key, value) {
+        // Broadcast player view changes to the World actor
+        // This makes the world rotate around the player
+        const world = this.universe.actors.get(this.universe.orchestrator.entities.keys().next().value);
+        if (world && world.engine) {
+            world.engine.setParameter(key, value);
+        }
+    }
+
+    collectCrystal(actor) {
+        this.score++;
+        this.ui.score.innerText = this.score;
+
+        // FX
+        actor.emote('joy', 1.0, 500);
+        setTimeout(() => {
+            this.universe.despawnActor(actor.id);
+        }, 500);
+
+        if (this.score >= 5) {
+            this.win();
+        }
+    }
+
+    win() {
+        this.isPlaying = false;
+        this.ui.overlay.innerHTML = `
+            <h1 style="color: #0f0; text-shadow: 0 0 20px #0f0;">SECTOR STABILIZED</h1>
+            <p>The lattice is secure.</p>
+            <button onclick="location.reload()">Re-enter</button>
+        `;
+        this.ui.overlay.classList.remove('hidden');
+        this.loop.stop();
+    }
+}
+
+// Start Game
+new CrystalLabyrinthGame();

package/src/export/SVGExporter.js

@@ -355,17 +355,21 @@ function projectPoints(points, rotor, dimension, width, height) {
     const centerY = height / 2;
     const scale = Math.min(width, height) * 0.4;
 
+    // Reuse vectors to minimize allocation
+    const rotatedBuffer = new Vec4();
+    const projectedBuffer = new Vec4();
+
     for (const point of points) {
         // Apply 4D rotation
-        const rotated = rotor.rotate(point);
+        rotor.rotate(point, rotatedBuffer);
 
         // Project to 3D (perspective from W)
-        const proj3d = rotated.projectPerspective(dimension);
+        rotatedBuffer.projectPerspective(dimension, projectedBuffer);
 
         // Project to 2D (simple orthographic for clean SVG)
-        const x = centerX + proj3d.x * scale;
-        const y = centerY - proj3d.y * scale; // Flip Y for SVG coordinates
-        const depth = proj3d.z; // Keep depth for styling
+        const x = centerX + projectedBuffer.x * scale;
+        const y = centerY - projectedBuffer.y * scale; // Flip Y for SVG coordinates
+        const depth = projectedBuffer.z; // Keep depth for styling
 
         projected.push({ x, y, depth, original: point });
     }

package/src/features/CollectionManager.js

@@ -415,19 +415,37 @@ export class CollectionManager {
      */
     getStatistics() {
         const collections = Array.from(this.collections.values());
-        const stats = {
-            totalCollections: collections.length,
-            totalVariations: collections.reduce((sum, c) => sum + c.variations.length, 0),
-            customCollections: collections.filter(c => c.name.includes('User') || c.name.includes('Custom')).length,
-            baseCollections: collections.filter(c => c.name.includes('Base')).length,
-            collections: collections.map(c => ({
+        let totalVariations = 0;
+        let customCollections = 0;
+        let baseCollections = 0;
+        const collectionList = new Array(collections.length);
+
+        for (let i = 0; i < collections.length; i++) {
+            const c = collections[i];
+            totalVariations += c.variations.length;
+
+            const name = c.name || '';
+            if (name.includes('User') || name.includes('Custom')) {
+                customCollections++;
+            }
+            if (name.includes('Base')) {
+                baseCollections++;
+            }
+
+            collectionList[i] = {
                 name: c.name,
                 filename: c.filename,
                 variationCount: c.variations.length,
                 created: c.created
-            }))
+            };
+        }
+
+        return {
+            totalCollections: collections.length,
+            totalVariations,
+            customCollections,
+            baseCollections,
+            collections: collectionList
         };
-        
-        return stats;
     }
 }

package/src/gallery/CollectionManager.js

@@ -222,19 +222,37 @@ export class CollectionManager {
      */
     getStatistics() {
         const collections = Array.from(this.collections.values());
-        const stats = {
-            totalCollections: collections.length,
-            totalVariations: collections.reduce((sum, c) => sum + c.variations.length, 0),
-            customCollections: collections.filter(c => c.name.includes('Custom')).length,
-            baseCollections: collections.filter(c => c.name.includes('Base')).length,
-            collections: collections.map(c => ({
+        let totalVariations = 0;
+        let customCollections = 0;
+        let baseCollections = 0;
+        const collectionList = new Array(collections.length);
+
+        for (let i = 0; i < collections.length; i++) {
+            const c = collections[i];
+            totalVariations += c.variations.length;
+
+            const name = c.name || '';
+            if (name.includes('Custom')) {
+                customCollections++;
+            }
+            if (name.includes('Base')) {
+                baseCollections++;
+            }
+
+            collectionList[i] = {
                 name: c.name,
                 filename: c.filename,
                 variationCount: c.variations.length,
                 created: c.created
-            }))
+            };
+        }
+
+        return {
+            totalCollections: collections.length,
+            totalVariations,
+            customCollections,
+            baseCollections,
+            collections: collectionList
         };
-        
-        return stats;
     }
 }