@mrigx/core 0.1.0

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@mrigx/core",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/core.umd.js",
+  "module": "./dist/core.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/core.es.js",
+      "require": "./dist/core.umd.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "dependencies": {
+    "html-to-image": "^1.11.13"
+  },
+  "devDependencies": {
+    "typescript": "~5.7.2",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.0"
+  }
+}

package/src/AtlasManager.ts

@@ -0,0 +1,125 @@
+import { MrigEngine } from './MrigEngine';
+
+export interface AtlasRegion {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  uv: [number, number, number, number]; // [uMin, vMin, uMax, vMax]
+}
+
+/**
+ * Manages a large WebGPU texture atlas for dynamically caching UI components.
+ * This allows the GPU to instantly translate components without re-rasterizing the DOM.
+ */
+export class AtlasManager {
+  private engine: MrigEngine;
+  public texture: GPUTexture | null = null;
+  public textureSize = 4096; // 4K atlas holds a LOT of UI components
+  
+  private regions = new Map<string, AtlasRegion>();
+  
+  // Simple Shelf Packing State
+  private currentX = 0;
+  private currentY = 0;
+  private shelfHeight = 0;
+
+  constructor(engine: MrigEngine) {
+    this.engine = engine;
+  }
+
+  public init() {
+    const device = this.engine.gpuManager.device;
+    if (!device) return;
+    
+    this.texture = device.createTexture({
+      size: [this.textureSize, this.textureSize, 1],
+      format: 'rgba8unorm',
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+  }
+
+  /**
+   * Patches a rasterized component directly into a sub-region of the atlas texture.
+   * If the component is new or changed size, it dynamically allocates a new shelf slot.
+   */
+  public uploadSprite(id: string, sourceCanvas: HTMLCanvasElement | ImageBitmap): AtlasRegion | null {
+    if (!this.texture || !this.engine.gpuManager.device) return null;
+
+    const width = sourceCanvas.width;
+    const height = sourceCanvas.height;
+
+    let region: AtlasRegion | null = this.regions.get(id) || null;
+
+    // If it's a new sprite or the dimensions changed, we must allocate a new slot
+    if (!region || region.width !== width || region.height !== height) {
+      region = this.allocate(id, width, height);
+      if (!region) {
+        console.warn('Mrig Atlas is full! Cannot allocate sprite.');
+        return null;
+      }
+    }
+
+    // Zero-overhead GPU memory patch. Replaces ONLY the pixels of this specific component.
+    this.engine.gpuManager.device.queue.copyExternalImageToTexture(
+      { source: sourceCanvas },
+      { texture: this.texture, origin: [region.x, region.y, 0] },
+      [width, height, 1]
+    );
+
+    return region;
+  }
+
+  /**
+   * Standard 2D shelf-packing algorithm to tightly pack UI sprites into the atlas.
+   */
+  private allocate(id: string, width: number, height: number): AtlasRegion | null {
+    // If it doesn't fit on the current shelf, move to the next shelf down
+    if (this.currentX + width > this.textureSize) {
+      this.currentX = 0;
+      this.currentY += this.shelfHeight;
+      this.shelfHeight = 0;
+    }
+
+    // If it still doesn't fit vertically, the atlas is full
+    if (this.currentY + height > this.textureSize) {
+      return null; 
+    }
+
+    const region: AtlasRegion = {
+      id,
+      x: this.currentX,
+      y: this.currentY,
+      width,
+      height,
+      uv: [
+        this.currentX / this.textureSize,
+        this.currentY / this.textureSize,
+        (this.currentX + width) / this.textureSize,
+        (this.currentY + height) / this.textureSize
+      ]
+    };
+
+    // Expand the shelf height if this sprite is taller
+    this.shelfHeight = Math.max(this.shelfHeight, height);
+    // Move the cursor right
+    this.currentX += width;
+    
+    this.regions.set(id, region);
+    return region;
+  }
+  
+  public getRegion(id: string): AtlasRegion | undefined {
+      return this.regions.get(id);
+  }
+  
+  public destroy() {
+      if (this.texture) {
+          this.texture.destroy();
+          this.texture = null;
+      }
+      this.regions.clear();
+  }
+}
+

package/src/DomRasterSystem.ts

@@ -0,0 +1,113 @@
+/**
+ * @file DomRasterSystem.ts
+ * @description Rasterizes the DOM into a WebGPU texture to allow the optical engine to distort the native HTML contents.
+ * Instrumented with profiling to diagnose main-thread bottlenecks.
+ */
+
+import { toCanvas } from 'html-to-image';
+import { MrigEngine } from './MrigEngine';
+
+export class DomRasterSystem {
+  private engine: MrigEngine;
+  private targetEl: HTMLElement | null = null;
+  private isRasterizing = false;
+  private pendingRasterize = false;
+  private listeners: (() => void)[] = [];
+  
+  public onRasterizeComplete(cb: () => void) {
+      this.listeners.push(cb);
+      return () => { this.listeners = this.listeners.filter(l => l !== cb); };
+  }
+
+  constructor(engine: MrigEngine) {
+    this.engine = engine;
+  }
+
+  public setTarget(el: HTMLElement) {
+    this.targetEl = el;
+    this.rasterize();
+  }
+
+  public async rasterize() {
+    if (!this.targetEl || !this.engine.gpuManager.device) return;
+    
+    if (this.isRasterizing) {
+      this.pendingRasterize = true;
+      return;
+    }
+    
+    this.isRasterizing = true;
+    this.pendingRasterize = false;
+    
+    try {
+      const dpr = window.devicePixelRatio || 1;
+      const targetWidth = document.documentElement.scrollWidth || window.innerWidth;
+      const targetHeight = document.documentElement.scrollHeight || window.innerHeight;
+
+      const startCanvas = performance.now();
+      const canvas = await toCanvas(this.targetEl, {
+        backgroundColor: 'transparent',
+        width: targetWidth,
+        height: targetHeight,
+        pixelRatio: dpr,
+        style: {
+          opacity: '1',
+          pointerEvents: 'none',
+          '--theme-color': getComputedStyle(document.documentElement).getPropertyValue('--theme-color').trim() || '#ffffff',
+          '--color-white': getComputedStyle(document.documentElement).getPropertyValue('--theme-color').trim() || '#ffffff',
+        },
+        skipFonts: true,
+        filter: (node) => {
+          if (node instanceof HTMLElement && node.id === 'mrig-transition-overlay') return false;
+          return true;
+        },
+      });
+      const durationCanvas = performance.now() - startCanvas;
+
+      const cWidth = canvas.width;
+      const cHeight = canvas.height;
+      const pixelCount = cWidth * cHeight;
+
+      const startTexture = performance.now();
+      const newTexture = this.engine.gpuManager.device.createTexture({
+        size: [cWidth, cHeight, 1],
+        format: 'rgba8unorm',
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+      });
+      const durationTexture = performance.now() - startTexture;
+
+      const startUpload = performance.now();
+      this.engine.gpuManager.device.queue.copyExternalImageToTexture(
+        { source: canvas },
+        { texture: newTexture },
+        [cWidth, cHeight, 1]
+      );
+      const durationUpload = performance.now() - startUpload;
+
+      console.log(
+        '[Mrig Profiler] Full Page Snapshot\n' +
+        '- Dimensions: ' + cWidth + 'x' + cHeight + ' (' + (pixelCount / 1000000).toFixed(2) + 'M pixels)\n' +
+        '- toCanvas: ' + durationCanvas.toFixed(2) + 'ms\n' +
+        '- createTexture: ' + durationTexture.toFixed(2) + 'ms\n' +
+        '- uploadTexture: ' + durationUpload.toFixed(2) + 'ms\n' +
+        '- Total time: ' + (durationCanvas + durationTexture + durationUpload).toFixed(2) + 'ms'
+      );
+
+      this.engine.updateDomTexture(newTexture);
+
+    } catch (e) {
+      console.error('Mrig DOM Rasterization failed:', e);
+    }
+    
+    this.isRasterizing = false;
+    this.listeners.forEach(cb => cb());
+    if (typeof window !== 'undefined') {
+       window.dispatchEvent(new CustomEvent('mrig-raster-complete'));
+    }
+
+    if (this.pendingRasterize) {
+      setTimeout(() => this.rasterize(), 33);
+    }
+  }
+}
+