@mrigx/react 0.1.0

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@mrigx/react",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/react.umd.js",
+  "module": "./dist/react.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/react.es.js",
+      "require": "./dist/react.umd.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@mrigx/core": "*"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "typescript": "~5.7.2",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.0",
+    "@vitejs/plugin-react": "^4.3.4"
+  }
+}

package/src/EngineContext.tsx

@@ -0,0 +1,95 @@
+import { createContext, useContext, useState, useEffect, useRef } from 'react';
+import type { ReactNode } from 'react';
+import { MrigEngine } from "@mrigx/core";
+import { MrigCanvas } from './MrigCanvas';
+import { DomRasterSystem } from "@mrigx/core";
+
+const EngineContext = createContext<MrigEngine | null>(null);
+
+export const useEngine = () => {
+  return useContext(EngineContext);
+};
+
+export function useIsRasterizing() {
+  const engine = useEngine();
+  const [isRasterizing, setIsRasterizing] = useState(false);
+  
+  useEffect(() => {
+    if (engine) {
+      return engine.onRasterStateChange((state) => setIsRasterizing(state));
+    }
+  }, [engine]);
+  
+  return isRasterizing;
+}
+
+export function MrigProvider({ children, className = '' }: { children: ReactNode, className?: string }) {
+  const [engine] = useState(() => new MrigEngine());
+  const domRef = useRef<HTMLDivElement>(null);
+  
+  useEffect(() => {
+    return () => {
+      engine.destroy();
+    };
+  }, [engine]);
+
+  useEffect(() => {
+    if (engine && domRef.current) {
+      const rasterSystem = new DomRasterSystem(engine);
+      rasterSystem.setTarget(domRef.current);
+      
+      document.fonts.ready.then(() => {
+        rasterSystem.rasterize();
+        setTimeout(() => rasterSystem.rasterize(), 100);
+        setTimeout(() => rasterSystem.rasterize(), 500);
+      });
+      
+      let timeoutId: number;
+      const handleResize = () => {
+        clearTimeout(timeoutId);
+        timeoutId = window.setTimeout(() => rasterSystem.rasterize(), 64);
+      };
+      
+      window.addEventListener('resize', handleResize);
+      
+              const observer = new MutationObserver((mutations) => {
+           // Skip full-screen rasterize if ALL mutations happened inside a dynamic component (handled by Atlas)
+           const isOnlyDynamic = mutations.every(m => {
+             let target = m.target as HTMLElement;
+             if (target.nodeType === Node.TEXT_NODE) target = target.parentElement as HTMLElement;
+             if (target && target.id === 'mrig-transition-overlay') return true;
+             const isDynamic = target && target.closest && target.closest('[data-mrig-dynamic="true"]');
+             return isDynamic;
+           });
+           
+           if (isOnlyDynamic) return; // Atlas handles this, don't freeze the screen!
+
+           clearTimeout(timeoutId);
+           timeoutId = window.setTimeout(() => rasterSystem.rasterize(), 32);
+        });
+      observer.observe(domRef.current, { childList: true, subtree: true, characterData: true, attributes: true });
+      
+      return () => {
+        window.removeEventListener('resize', handleResize);
+        observer.disconnect();
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [engine]);
+
+  return (
+    <EngineContext.Provider value={engine}>
+      <MrigCanvas />
+      <div id="mrig-app-root" ref={domRef} style={{ pointerEvents: 'auto', opacity: 0.001 }} className={className}>
+        {children}
+      </div>
+    </EngineContext.Provider>
+  );
+}
+
+
+
+
+
+
+

package/src/MrigCanvas.tsx

@@ -0,0 +1,56 @@
+/**
+ * @file MrigCanvas.tsx
+ * @description The fixed full-screen WebGPU canvas that renders the optical field.
+ */
+
+import { useEffect, useRef } from 'react';
+import { useEngine } from './EngineContext';
+
+/**
+ * A full-screen fixed canvas component that initializes the WebGPU engine.
+ * Place this at the root of your application, behind the DOM.
+ */
+export function MrigCanvas() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const engine = useEngine();
+
+  useEffect(() => {
+    if (canvasRef.current && engine) {
+      const dpr = window.devicePixelRatio || 1;
+      canvasRef.current.width = window.innerWidth * dpr;
+      canvasRef.current.height = window.innerHeight * dpr;
+      
+      engine.init(canvasRef.current).catch(err => {
+        console.error("MrigCanvas Failed to initialize WebGPU:", err);
+      });
+
+      const handleResize = () => {
+        if (!canvasRef.current || !engine) return;
+        canvasRef.current.width = window.innerWidth * dpr;
+        canvasRef.current.height = window.innerHeight * dpr;
+        // The engine could implement a resize method to recreate textures,
+        // for simplicity we reload or re-init in a production robust version.
+      };
+      
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize);
+    }
+  }, [engine]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        pointerEvents: 'none',
+        zIndex: 0,
+      }}
+    />
+  );
+}
+
+

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './EngineContext';
+export * from './MrigCanvas';
+export * from './useMrigSurface';
+export * from './useMrigInteraction';
+export * from './styles';

package/src/styles.ts

@@ -0,0 +1,77 @@
+const STYLES = `
+.mrig-optical-button {
+  background-color: transparent;
+  transition: background-color 0.2s, opacity 0.2s;
+  outline: none;
+}
+.mrig-optical-button:hover:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+.mrig-optical-button:active:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.mrig-optical-button:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.4);
+  outline-offset: 2px;
+}
+.mrig-optical-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.mrig-optical-icon-button {
+  background-color: rgba(255, 255, 255, 0.02);
+  transition: background-color 0.2s, opacity 0.2s;
+  outline: none;
+}
+.mrig-optical-icon-button:hover:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.mrig-optical-icon-button:active:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+.mrig-optical-icon-button:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.4);
+  outline-offset: 2px;
+}
+.mrig-optical-icon-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.mrig-optical-input {
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background-color: rgba(255, 255, 255, 0.02);
+  transition: border-color 0.2s, background-color 0.2s;
+  outline: none;
+}
+.mrig-optical-input:focus {
+  border-color: rgba(255, 255, 255, 0.4);
+}
+.mrig-optical-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-mrig-dynamic="true"] {
+  /* Expand the invisible hit area by 10px in all directions to absorb GPU buoyancy wobble */
+  position: relative;
+}
+[data-mrig-dynamic="true"]::after {
+  content: '';
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  right: -10px;
+  bottom: -10px;
+  z-index: 1;
+}
+`;
+
+let injected = false;
+export function injectMrigStyles() {
+  if (typeof window === 'undefined' || injected) return;
+  const style = document.createElement('style');
+  style.id = 'mrig-component-styles';
+  style.innerHTML = STYLES;
+  document.head.appendChild(style);
+  injected = true;
+}

package/src/useMrigInteraction.ts

@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+import type { MouseEvent, TouchEvent } from 'react';
+import { useEngine } from './EngineContext';
+
+export function useMrigInteraction() {
+  const engine = useEngine();
+
+  const pulseCenter = useCallback((element: HTMLElement | null, strength: number = 0.5) => {
+    if (!engine || !element) return;
+    const rect = element.getBoundingClientRect();
+    const x = (rect.left + rect.width / 2) / window.innerWidth;
+    const y = (rect.top + rect.height / 2) / window.innerHeight;
+    engine.triggerDisturbance(x, y, strength);
+  }, [engine]);
+
+  const pulsePointer = useCallback((event: MouseEvent | TouchEvent, strength: number = 0.5) => {
+    if (!engine) return;
+    let clientX, clientY;
+    if ('touches' in event) {
+       if (event.touches.length === 0) return;
+       clientX = event.touches[0].clientX;
+       clientY = event.touches[0].clientY;
+    } else {
+       clientX = (event as MouseEvent).clientX;
+       clientY = (event as MouseEvent).clientY;
+    }
+    const x = clientX / window.innerWidth;
+    const y = clientY / window.innerHeight;
+    engine.triggerDisturbance(x, y, strength);
+  }, [engine]);
+
+    const triggerRipple = useCallback((clientX: number, clientY: number, strength: number = 0.5, radius: number = 0.04) => {
+    if (!engine) return;
+    const x = clientX / window.innerWidth;
+    const y = clientY / window.innerHeight;
+    engine.triggerDisturbance(x, y, strength, radius);
+  }, [engine]);
+
+  return { pulseCenter, pulsePointer, triggerRipple };
+}
+

package/src/useMrigSurface.ts

@@ -0,0 +1,80 @@
+/**
+ * @file useMrigSurface.ts
+ * @description React hook to register a DOM element as an optical surface within the engine.
+ */
+
+import { useLayoutEffect, useRef, useId, useCallback } from 'react';
+import type { Ref } from 'react';
+import { useEngine } from './EngineContext';
+import type { SurfaceConfig } from "@mrigx/core";
+
+export function useMrigSurface<T extends HTMLElement>(
+  config: SurfaceConfig,
+  forwardedRef?: Ref<T>
+) {
+  const internalRef = useRef<T>(null);
+  const engine = useEngine();
+  const id = useId();
+
+  const { material, materialStrength, borderRadius, isDynamic } = config;
+
+  useLayoutEffect(() => {
+    if (!engine || !internalRef.current) return;
+
+    const el = internalRef.current;
+    if (isDynamic) el.setAttribute('data-mrig-dynamic', 'true');
+    
+    let timeoutId: any;
+    const updateBounds = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        if (!internalRef.current) return;
+        const rect = el.getBoundingClientRect();
+        const canvasWidth = window.innerWidth;
+        const canvasHeight = window.innerHeight;
+
+        engine.registerSurface(id, {
+          x: rect.left / canvasWidth,
+          y: rect.top / canvasHeight,
+          width: rect.width / canvasWidth,
+          height: rect.height / canvasHeight,
+          config: { material, materialStrength, borderRadius, isDynamic }
+        }, el);
+      }, 120); // Debounce rasterization of dynamic components to prevent main-thread choking
+    };
+
+    updateBounds();
+
+    window.addEventListener('resize', updateBounds);
+    window.addEventListener('scroll', updateBounds, { passive: true });
+    
+    const observer = new ResizeObserver(updateBounds);
+    observer.observe(el);
+
+    let mutObserver: MutationObserver | null = null;
+    if (isDynamic) {
+       mutObserver = new MutationObserver(() => {
+          updateBounds();
+       });
+       mutObserver.observe(el, { childList: true, subtree: true, attributes: true, characterData: true });
+    }
+
+    return () => {
+      window.removeEventListener('resize', updateBounds);
+      window.removeEventListener('scroll', updateBounds);
+      observer.disconnect();
+      if (mutObserver) mutObserver.disconnect();
+      engine.unregisterSurface(id);
+    };
+  }, [engine, id, material, materialStrength, borderRadius, isDynamic]);
+
+  return useCallback((node: T | null) => {
+    internalRef.current = node;
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      (forwardedRef as React.MutableRefObject<T | null>).current = node;
+    }
+  }, [forwardedRef]);
+}
+

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": "."
+  },
+  "include": [
+    "src"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+import url from 'url';
+
+const dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+export default defineConfig({
+  publicDir: false,
+  plugins: [
+    react(),
+    dts({ 
+      include: ['src/**/*'], 
+      outDir: 'dist', 
+      insertTypesEntry: true, 
+      tsconfigPath: './tsconfig.json' 
+    })
+  ],
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    lib: {
+      entry: resolve(dirname, 'src/index.ts'),
+      name: 'MrigReact',
+      fileName: (format) => 'react.' + format + '.js'
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', '@mrigx/core'],
+      output: {
+        globals: {
+          'react': 'React',
+          'react-dom': 'ReactDOM',
+          '@mrigx/core': 'MrigCore'
+        }
+      }
+    }
+  }
+});