@vib3code/sdk 2.0.3-canary.91a95f3 → 2.0.3-canary.98b84da

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/export/index.js

@@ -8,7 +8,17 @@ export { exportSVG, downloadSVG } from './SVGExporter.js';
 export { exportCSS, downloadCSS, toStyleObject } from './CSSExporter.js';
 export { exportLottie, downloadLottie } from './LottieExporter.js';
 
-// Re-export existing managers
+// Core managers
 export { ExportManager } from './ExportManager.js';
 export { CardGeneratorBase } from './CardGeneratorBase.js';
 export { TradingCardManager } from './TradingCardManager.js';
+
+// Shader & package exporters
+export { ShaderExporter } from './ShaderExporter.js';
+export { VIB3PackageExporter, VIB3_PACKAGE_VERSION, createVIB3Package } from './VIB3PackageExporter.js';
+export { TradingCardGenerator } from './TradingCardGenerator.js';
+
+// Per-system card generators
+export { TradingCardSystemFaceted } from './systems/TradingCardSystemFaceted.js';
+export { TradingCardSystemHolographic } from './systems/TradingCardSystemHolographic.js';
+export { TradingCardSystemQuantum } from './systems/TradingCardSystemQuantum.js';

package/src/faceted/FacetedSystem.js

@@ -160,10 +160,16 @@ const FRAGMENT_SHADER_GLSL = `
         int geomType = int(clamp(floor(baseGeomFloat + 0.5), 0.0, totalBase - 1.0));
 
         if (geomType == 0) {
-            // Tetrahedron lattice
-            vec4 pos = fract(p * u_gridDensity * 0.08);
-            vec4 dist = min(pos, 1.0 - pos);
-            return min(min(dist.x, dist.y), min(dist.z, dist.w)) * u_morphFactor;
+            // Tetrahedron lattice — tetrahedral symmetry planes
+            float d = u_gridDensity * 0.08;
+            vec3 c1 = normalize(vec3(1.0, 1.0, 1.0));
+            vec3 c2 = normalize(vec3(-1.0, -1.0, 1.0));
+            vec3 c3 = normalize(vec3(-1.0, 1.0, -1.0));
+            vec3 c4 = normalize(vec3(1.0, -1.0, -1.0));
+            vec3 q = fract(p.xyz * d + 0.5) - 0.5;
+            float minPlane = min(min(abs(dot(q, c1)), abs(dot(q, c2))),
+                                 min(abs(dot(q, c3)), abs(dot(q, c4))));
+            return (1.0 - smoothstep(0.0, 0.05, minPlane)) * u_morphFactor;
         }
         else if (geomType == 1) {
             // Hypercube lattice
@@ -429,8 +435,15 @@ fn geometryFunction_w(p: vec4<f32>) -> f32 {
     let gt = i32(clamp(floor(baseFloat + 0.5), 0.0, 7.0));
     let d = u.gridDensity * 0.08;
     if (gt == 0) {
-        let pos = fract(p * d); let dist = min(pos, 1.0 - pos);
-        return min(min(dist.x, dist.y), min(dist.z, dist.w)) * u.morphFactor;
+        // Tetrahedron — tetrahedral symmetry planes
+        let c1 = normalize(vec3<f32>(1.0, 1.0, 1.0));
+        let c2 = normalize(vec3<f32>(-1.0, -1.0, 1.0));
+        let c3 = normalize(vec3<f32>(-1.0, 1.0, -1.0));
+        let c4 = normalize(vec3<f32>(1.0, -1.0, -1.0));
+        let q = fract(p.xyz * d + 0.5) - 0.5;
+        let minPlane = min(min(abs(dot(q, c1)), abs(dot(q, c2))),
+                           min(abs(dot(q, c3)), abs(dot(q, c4))));
+        return (1.0 - smoothstep(0.0, 0.05, minPlane)) * u.morphFactor;
     } else if (gt == 1) {
         let pos = fract(p * d); let dist = min(pos, 1.0 - pos);
         return min(min(dist.x, dist.y), min(dist.z, dist.w)) * u.morphFactor;
@@ -634,15 +647,19 @@ export class FacetedSystem {
         return false;
     }
 
-    async initialize() {
+    async initialize(options = {}) {
         if (this.initialized) return true;
-        const canvas = document.getElementById('faceted-content-canvas') ||
+        const canvas = options.canvas ||
+                      document.getElementById('faceted-content-canvas') ||
                       document.getElementById('content-canvas');
         if (!canvas) {
             console.warn("FacetedSystem: No canvas found for initialize()");
             return false;
         }
-        return this.initWithBridge(canvas, { preferWebGPU: false });
+        return this.initWithBridge(canvas, {
+            preferWebGPU: options.preferWebGPU !== undefined ? options.preferWebGPU : true,
+            debug: options.debug || false
+        });
     }
 
     // ─── Parameters ───
@@ -775,7 +792,7 @@ export class FacetedSystem {
         if (layer) layer.style.display = active ? 'block' : 'none';
     }
 
-    init(context) { return this.initialize(); }
+    init(context = {}) { return this.initialize(context); }
 
     resize(width, height, pixelRatio = 1) {
         const w = Math.floor(width * pixelRatio);