@srsergio/taptapp-ar 1.0.7 → 1.0.9

package/README.md

@@ -1,18 +1,18 @@
 # @srsergio/taptapp-ar
 
-🚀 **TapTapp AR** is a high-performance Augmented Reality (AR) toolkit specifically designed for **Astro** and **Node.js** environments. It provides a seamless way to integrate image tracking, video overlays, and an offline compiler for image targets.
+🚀 **TapTapp AR** is a high-performance Augmented Reality (AR) compiler toolkit for **Node.js** and **Browser** environments. It provides an ultra-fast offline compiler for image targets.
 
-Built on top of **MindAR** and **A-Frame**, this package features a **pure JavaScript offline compiler** that requires **no TensorFlow** for backend compilation, while still supporting TensorFlow.js for real-time tracking in the browser.
+Built with performance in mind, this package features a **pure JavaScript offline compiler** that requires **no TensorFlow** for compilation, generating high-quality `.mind` files in record time.
 
 ---
 
 ## 🌟 Key Features
 
-- 🚀 **Astro Native**: Optimized components for Astro's Islands architecture.
 - 🖼️ **Ultra-Fast Offline Compiler**: Pure JavaScript compiler that generates `.mind` target files in **~1.3s per image**.
 - ⚡ **Zero TensorFlow for Compilation**: The offline compiler uses optimized pure JS algorithms - no TensorFlow installation required.
 - 🧵 **Multi-threaded Engine**: Truly parallel processing using Node.js `worker_threads` for bulk image compilation.
 - 🚀 **Serverless Ready**: Lightweight compiler with minimal dependencies, perfect for Vercel, AWS Lambda, and Netlify.
+- 📦 **Protocol V3 (Columnar Binary)**: Industry-leading performance with zero-copy loading and 80%+ smaller files.
 
 ---
 
@@ -26,34 +26,6 @@ npm install @srsergio/taptapp-ar
 
 > **Note:** TensorFlow is **NOT required** for the offline compiler. It only uses pure JavaScript.
 
-For real-time AR tracking in the browser, TensorFlow.js is loaded automatically via CDN.
-
----
-
-## 🚀 Astro Integration Guide
-
-The easiest way to display AR content is using the `ARVideoTrigger` component.
-
-### Usage
-
-```astro
----
-import ARVideoTrigger from '@srsergio/taptapp-ar/astro/ARVideoTrigger.astro';
-
-const config = {
-  cardId: 'unique-id',
-  targetImageSrc: 'https://cdn.example.com/target.jpg',
-  targetMindSrc: 'https://cdn.example.com/targets.mind',
-  videoSrc: 'https://cdn.example.com/overlay.mp4',
-  videoWidth: 1280,
-  videoHeight: 720,
-  scale: 1.2,
-};
----
-
-<ARVideoTrigger config={config} />
-```
-
 ---
 
 ## 🖼️ High-Performance Compiler (Protocol V3)
@@ -83,7 +55,7 @@ TaptApp AR features the industry's most advanced **pure JavaScript** offline com
 Optimized for server-side compilation with multi-core parallelism:
 
 ```javascript
-import { OfflineCompiler } from '@srsergio/taptapp-ar/compiler/offline-compiler.js';
+import { OfflineCompiler } from '@srsergio/taptapp-ar';
 
 const compiler = new OfflineCompiler();
 
@@ -100,22 +72,12 @@ const binaryBuffer = compiler.exportData(); // Yields a much smaller .mind file
 ### 🌐 Frontend (Zero-Latency Loading)
 
 ```javascript
-import { OfflineCompiler } from '@srsergio/taptapp-ar/compiler/offline-compiler.js';
+import { OfflineCompiler } from '@srsergio/taptapp-ar';
 
 const compiler = new OfflineCompiler();
 // Loading 127KB instead of 800KB saves bandwidth and CPU parsing time
 compiler.importData(binaryBuffer); 
 ```
----
-
-## ❓ Troubleshooting
-
-| Issue | Solution |
-| :--- | :--- |
-| **Camera not starting** | Ensure your site is served via `HTTPS`. Browsers block camera access on insecure origins. |
-| **Video not playing** | iOS Safari requires `muted` and `playsinline` attributes for autoplaying videos. Our components handle this by default. |
-| **CORS errors** | Ensure that `targetImageSrc`, `targetMindSrc`, and `videoSrc` have CORS headers enabled (`Access-Control-Allow-Origin: *`). |
-| **Memory Outage on Serverless** | Reduce the resolution of your target images. High-res images increase memory pressure during compilation. |
 
 ---
 

package/dist/compiler/offline-compiler.d.ts

@@ -3,7 +3,7 @@
  */
 export class OfflineCompiler {
     data: any;
-    workerPool: import("./utils/worker-pool.js").WorkerPool | null;
+    workerPool: WorkerPool | null;
     _initNodeWorkers(): Promise<void>;
     /**
      * Compila una lista de imágenes objetivo
@@ -15,27 +15,11 @@ export class OfflineCompiler {
     /**
      * Compila datos de matching usando DetectorLite (JS puro)
      */
-    _compileMatch(targetImages: any, progressCallback: any): Promise<{
-        maximaPoints: any[];
-        minimaPoints: any[];
-        maximaPointsCluster: {
-            rootNode: {
-                centerPointIndex: any;
-            };
-        };
-        minimaPointsCluster: {
-            rootNode: {
-                centerPointIndex: any;
-            };
-        };
-        width: any;
-        height: any;
-        scale: any;
-    }[][]>;
+    _compileMatch(targetImages: any, progressCallback: any): Promise<any[]>;
     /**
      * Compila datos de tracking usando extractTrackingFeatures (JS puro)
      */
-    _compileTrack(targetImages: any, progressCallback: any): Promise<Object[][]>;
+    _compileTrack(targetImages: any, progressCallback: any): Promise<any[]>;
     /**
      * Método público para compilar tracking (compatibilidad con API anterior)
      * @param {Object} options - Opciones de compilación
@@ -56,23 +40,7 @@ export class OfflineCompiler {
         progressCallback: any;
         targetImages: any;
         basePercent?: number | undefined;
-    }): Promise<{
-        maximaPoints: any[];
-        minimaPoints: any[];
-        maximaPointsCluster: {
-            rootNode: {
-                centerPointIndex: any;
-            };
-        };
-        minimaPointsCluster: {
-            rootNode: {
-                centerPointIndex: any;
-            };
-        };
-        width: any;
-        height: any;
-        scale: any;
-    }[][]>;
+    }): Promise<any[]>;
     /**
      * Exporta datos compilados en formato binario columnar optimizado
      */
@@ -173,3 +141,4 @@ export class OfflineCompiler {
      */
     destroy(): Promise<void>;
 }
+import { WorkerPool } from "./utils/worker-pool.js";

package/dist/compiler/offline-compiler.js

@@ -19,6 +19,7 @@ import { extractTrackingFeatures } from "./tracker/extract-utils.js";
 import { DetectorLite } from "./detector/detector-lite.js";
 import { build as hierarchicalClusteringBuild } from "./matching/hierarchical-clustering.js";
 import * as msgpack from "@msgpack/msgpack";
+import { WorkerPool } from "./utils/worker-pool.js";
 // Detect environment
 const isNode = typeof process !== "undefined" &&
     process.versions != null &&
@@ -41,21 +42,27 @@ export class OfflineCompiler {
     }
     async _initNodeWorkers() {
         try {
-            const [os, path, url, workerModule] = await Promise.all([
-                import("os"),
-                import("path"),
-                import("url"),
-                import("./utils/worker-pool.js")
+            // Use variables to prevent bundlers from trying to bundle these
+            const pathModule = "path";
+            const urlModule = "url";
+            const osModule = "os";
+            const workerThreadsModule = "node:worker_threads";
+            const [path, url, os, { Worker }] = await Promise.all([
+                import(pathModule),
+                import(urlModule),
+                import(osModule),
+                import(workerThreadsModule)
             ]);
             const __filename = url.fileURLToPath(import.meta.url);
             const __dirname = path.dirname(__filename);
             const workerPath = path.join(__dirname, "node-worker.js");
+            // Limit workers to avoid freezing system
             const numWorkers = Math.min(os.cpus().length, 4);
-            this.workerPool = new workerModule.WorkerPool(workerPath, numWorkers);
+            this.workerPool = new WorkerPool(workerPath, numWorkers, Worker);
             console.log(`🚀 OfflineCompiler: Node.js mode with ${numWorkers} workers`);
         }
         catch (e) {
-            console.log("⚡ OfflineCompiler: Running without workers");
+            console.log("⚡ OfflineCompiler: Running without workers (initialization failed)", e);
         }
     }
     /**
@@ -120,9 +127,48 @@ export class OfflineCompiler {
     async _compileMatch(targetImages, progressCallback) {
         const percentPerImage = 100 / targetImages.length;
         let currentPercent = 0;
+        // Use workers if available
+        if (this.workerPool) {
+            const promises = targetImages.map((targetImage, index) => {
+                return this.workerPool.runTask({
+                    type: 'match',
+                    targetImage,
+                    percentPerImage,
+                    basePercent: index * percentPerImage,
+                    onProgress: (percent) => {
+                        // Basic aggregation: this assumes naive progress updates.
+                        // Ideally we should track exact progress per image.
+                        // For now, simpler to just let the main thread loop handle overall progress callback?
+                        // No, workers are async. We need to aggregate.
+                        // Actually, the main loop below is serial.
+                        // If we use workers, we run them in parallel.
+                    }
+                });
+            });
+            // Progress handling for parallel workers is tricky without a shared state manager.
+            // Simplified approach: each worker reports its absolute progress contribution?
+            // No, worker reports 'percent' which is base + local.
+            // We can use a shared loadedPercent variable.
+            let totalPercent = 0;
+            const progressMap = new Float32Array(targetImages.length);
+            const wrappedPromises = targetImages.map((targetImage, index) => {
+                return this.workerPool.runTask({
+                    type: 'match',
+                    targetImage,
+                    percentPerImage, // Not really needed for logic but worker expects it
+                    basePercent: 0, // Worker will report 0-percentPerImage roughly
+                    onProgress: (p) => {
+                        // This 'p' from worker is "base + local". If we passed base=0, it's just local (0 to percentPerImage)
+                        progressMap[index] = p;
+                        const sum = progressMap.reduce((a, b) => a + b, 0);
+                        progressCallback(sum);
+                    }
+                });
+            });
+            return Promise.all(wrappedPromises);
+        }
+        // Serial Fallback
         const results = [];
-        // Procesar secuencialmente para evitar overhead de workers
-        // (los workers son útiles para muchas imágenes, pero añaden latencia)
         for (let i = 0; i < targetImages.length; i++) {
             const targetImage = targetImages[i];
             const imageList = buildImageList(targetImage);
@@ -157,6 +203,24 @@ export class OfflineCompiler {
     async _compileTrack(targetImages, progressCallback) {
         const percentPerImage = 100 / targetImages.length;
         let currentPercent = 0;
+        if (this.workerPool) {
+            const progressMap = new Float32Array(targetImages.length);
+            const wrappedPromises = targetImages.map((targetImage, index) => {
+                return this.workerPool.runTask({
+                    type: 'compile',
+                    targetImage,
+                    percentPerImage,
+                    basePercent: 0,
+                    onProgress: (p) => {
+                        progressMap[index] = p;
+                        const sum = progressMap.reduce((a, b) => a + b, 0);
+                        progressCallback(sum);
+                    }
+                });
+            });
+            return Promise.all(wrappedPromises);
+        }
+        // Serial Fallback
         const results = [];
         for (let i = 0; i < targetImages.length; i++) {
             const targetImage = targetImages[i];
@@ -231,7 +295,8 @@ export class OfflineCompiler {
         return msgpack.encode({
             v: CURRENT_VERSION,
             dataList,
-        });
+            // eslint-disable-next-line
+        }); // eslint-disable-line
     }
     _packKeyframe(kf) {
         return {

package/dist/compiler/utils/worker-pool.d.ts

@@ -1,7 +1,8 @@
 export class WorkerPool {
-    constructor(workerPath: any, poolSize?: any);
+    constructor(workerPath: any, poolSize: any, WorkerClass: any);
     workerPath: any;
     poolSize: any;
+    WorkerClass: any;
     workers: any[];
     queue: any[];
     activeWorkers: number;

package/dist/compiler/utils/worker-pool.js

@@ -1,9 +1,8 @@
-import { Worker } from 'node:worker_threads';
-import os from 'node:os';
 export class WorkerPool {
-    constructor(workerPath, poolSize = os.cpus().length) {
+    constructor(workerPath, poolSize, WorkerClass) {
         this.workerPath = workerPath;
         this.poolSize = poolSize;
+        this.WorkerClass = WorkerClass;
         this.workers = [];
         this.queue = [];
         this.activeWorkers = 0;
@@ -24,7 +23,7 @@ export class WorkerPool {
     }
     _createWorker() {
         this.activeWorkers++;
-        const worker = new Worker(this.workerPath);
+        const worker = new this.WorkerClass(this.workerPath);
         return worker;
     }
     _executeTask(worker, task) {
@@ -62,10 +61,7 @@ export class WorkerPool {
                 serializableData[key] = value;
             }
         }
-        worker.postMessage({
-            type: 'compile',
-            ...serializableData
-        });
+        worker.postMessage(serializableData);
     }
     _finishTask(worker, callback, result) {
         if (this.queue.length > 0) {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@srsergio/taptapp-ar",
-    "version": "1.0.7",
-    "description": "AR Visualizer and Compiler for Astro and React",
+    "version": "1.0.9",
+    "description": "AR Compiler for Node.js and Browser",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/srsergiolazaro/taptapp-ar.git"
@@ -19,7 +19,6 @@
             "types": "./dist/index.d.ts",
             "import": "./dist/index.js"
         },
-        "./astro/*": "./src/astro/*",
         "./compiler/*": "./src/compiler/*"
     },
     "files": [
@@ -34,7 +33,6 @@
     },
     "peerDependencies": {
         "aframe": ">=1.5.0",
-        "astro": ">=4.0.0",
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0",
         "three": ">=0.160.0"
@@ -48,7 +46,6 @@
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@types/three": "^0.170.0",
-        "astro": "5.16.4",
         "jimp": "^1.6.0",
         "typescript": "^5.4.5",
         "vitest": "^4.0.16"

package/src/compiler/offline-compiler.js

@@ -20,6 +20,7 @@ import { extractTrackingFeatures } from "./tracker/extract-utils.js";
 import { DetectorLite } from "./detector/detector-lite.js";
 import { build as hierarchicalClusteringBuild } from "./matching/hierarchical-clustering.js";
 import * as msgpack from "@msgpack/msgpack";
+import { WorkerPool } from "./utils/worker-pool.js";
 
 // Detect environment
 const isNode = typeof process !== "undefined" &&
@@ -46,22 +47,30 @@ export class OfflineCompiler {
 
   async _initNodeWorkers() {
     try {
-      const [os, path, url, workerModule] = await Promise.all([
-        import("os"),
-        import("path"),
-        import("url"),
-        import("./utils/worker-pool.js")
+      // Use variables to prevent bundlers from trying to bundle these
+      const pathModule = "path";
+      const urlModule = "url";
+      const osModule = "os";
+      const workerThreadsModule = "node:worker_threads";
+
+      const [path, url, os, { Worker }] = await Promise.all([
+        import(pathModule),
+        import(urlModule),
+        import(osModule),
+        import(workerThreadsModule)
       ]);
 
       const __filename = url.fileURLToPath(import.meta.url);
       const __dirname = path.dirname(__filename);
       const workerPath = path.join(__dirname, "node-worker.js");
 
+      // Limit workers to avoid freezing system
       const numWorkers = Math.min(os.cpus().length, 4);
-      this.workerPool = new workerModule.WorkerPool(workerPath, numWorkers);
+
+      this.workerPool = new WorkerPool(workerPath, numWorkers, Worker);
       console.log(`🚀 OfflineCompiler: Node.js mode with ${numWorkers} workers`);
     } catch (e) {
-      console.log("⚡ OfflineCompiler: Running without workers");
+      console.log("⚡ OfflineCompiler: Running without workers (initialization failed)", e);
     }
   }
 
@@ -142,10 +151,53 @@ export class OfflineCompiler {
     const percentPerImage = 100 / targetImages.length;
     let currentPercent = 0;
 
-    const results = [];
+    // Use workers if available
+    if (this.workerPool) {
+      const promises = targetImages.map((targetImage, index) => {
+        return this.workerPool.runTask({
+          type: 'match',
+          targetImage,
+          percentPerImage,
+          basePercent: index * percentPerImage,
+          onProgress: (percent) => {
+            // Basic aggregation: this assumes naive progress updates.
+            // Ideally we should track exact progress per image.
+            // For now, simpler to just let the main thread loop handle overall progress callback?
+            // No, workers are async. We need to aggregate.
+            // Actually, the main loop below is serial.
+            // If we use workers, we run them in parallel.
+          }
+        });
+      });
+
+      // Progress handling for parallel workers is tricky without a shared state manager.
+      // Simplified approach: each worker reports its absolute progress contribution?
+      // No, worker reports 'percent' which is base + local.
+      // We can use a shared loadedPercent variable.
+
+      let totalPercent = 0;
+      const progressMap = new Float32Array(targetImages.length);
+
+      const wrappedPromises = targetImages.map((targetImage, index) => {
+        return this.workerPool.runTask({
+          type: 'match',
+          targetImage,
+          percentPerImage, // Not really needed for logic but worker expects it
+          basePercent: 0, // Worker will report 0-percentPerImage roughly
+          onProgress: (p) => {
+            // This 'p' from worker is "base + local". If we passed base=0, it's just local (0 to percentPerImage)
+            progressMap[index] = p;
+            const sum = progressMap.reduce((a, b) => a + b, 0);
+            progressCallback(sum);
+          }
+        });
+      });
+
+      return Promise.all(wrappedPromises);
+    }
 
-    // Procesar secuencialmente para evitar overhead de workers
-    // (los workers son útiles para muchas imágenes, pero añaden latencia)
+    // Serial Fallback
+    const results = [];
     for (let i = 0; i < targetImages.length; i++) {
       const targetImage = targetImages[i];
       const imageList = buildImageList(targetImage);
@@ -189,8 +241,26 @@ export class OfflineCompiler {
     const percentPerImage = 100 / targetImages.length;
     let currentPercent = 0;
 
-    const results = [];
+    if (this.workerPool) {
+      const progressMap = new Float32Array(targetImages.length);
+      const wrappedPromises = targetImages.map((targetImage, index) => {
+        return this.workerPool.runTask({
+          type: 'compile',
+          targetImage,
+          percentPerImage,
+          basePercent: 0,
+          onProgress: (p) => {
+            progressMap[index] = p;
+            const sum = progressMap.reduce((a, b) => a + b, 0);
+            progressCallback(sum);
+          }
+        });
+      });
+      return Promise.all(wrappedPromises);
+    }
 
+    // Serial Fallback
+    const results = [];
     for (let i = 0; i < targetImages.length; i++) {
       const targetImage = targetImages[i];
       const imageList = buildTrackingImageList(targetImage);
@@ -274,7 +344,8 @@ export class OfflineCompiler {
     return msgpack.encode({
       v: CURRENT_VERSION,
       dataList,
-    });
+      // eslint-disable-next-line
+    }); // eslint-disable-line
   }
 
   _packKeyframe(kf) {

package/src/compiler/utils/worker-pool.js

@@ -1,10 +1,9 @@
-import { Worker } from 'node:worker_threads';
-import os from 'node:os';
 
 export class WorkerPool {
-    constructor(workerPath, poolSize = os.cpus().length) {
+    constructor(workerPath, poolSize, WorkerClass) {
         this.workerPath = workerPath;
         this.poolSize = poolSize;
+        this.WorkerClass = WorkerClass;
         this.workers = [];
         this.queue = [];
         this.activeWorkers = 0;
@@ -25,7 +24,7 @@ export class WorkerPool {
 
     _createWorker() {
         this.activeWorkers++;
-        const worker = new Worker(this.workerPath);
+        const worker = new this.WorkerClass(this.workerPath);
         return worker;
     }
 
@@ -66,10 +65,7 @@ export class WorkerPool {
             }
         }
 
-        worker.postMessage({
-            type: 'compile',
-            ...serializableData
-        });
+        worker.postMessage(serializableData);
     }
 
     _finishTask(worker, callback, result) {

package/src/astro/ARScene.astro

@@ -1,59 +0,0 @@
----
-import type { PropsConfig } from "../react/types";
-interface Props {
-  config: PropsConfig;
-}
-
-const { config } = Astro.props;
----
-
-<a-scene
-  mindar-image={`imageTargetSrc: ${config.targetMindSrc};uiLoading: #loading-overlay;uiScanning: #scanning-overlay;uiError: #error-overlay`}
-  color-space="sRGB"
-  renderer="colorManagement: true, physicallyCorrectLights"
-  vr-mode-ui="enabled: false"
-  device-orientation-permission-ui="enabled: false"
->
-  <a-assets>
-    <img id="target-image" crossorigin="anonymous" src={config.targetImageSrc} />
-    <video
-      id="ar-video"
-      src={config.videoSrc}
-      preload="auto"
-      loop
-      autoplay
-      playsinline
-      webkit-playsinline
-      muted
-      crossorigin="anonymous"
-      class="absolute opacity-0"
-      width="1"
-      height="1"></video></a-assets
-  >
-  <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
-
-  <a-entity mindar-image-target="targetIndex: 0">
-    <a-video
-      id="main-video"
-      src="#ar-video"
-      position="0 0 0"
-      opacity="1"
-      width={(config.videoWidth / config.videoHeight) * config.scale}
-      height={1 * config.scale}
-      rotation="0 0 0"
-      visible="true"
-      play-on-click
-      autoplay></a-video>
-  </a-entity>
-</a-scene>
-
-<style>
-  video {
-    width: 100% !important;
-    height: 100% !important;
-    object-fit: cover !important;
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-  }
-</style>

package/src/astro/ARVideoTrigger.astro

@@ -1,73 +0,0 @@
----
-import ARStyles from "./styles/ARStyles.astro";
-import LoadingOverlay from "./overlays/LoadingOverlay.astro";
-import ScanningOverlay from "./overlays/ScanningOverlay.astro";
-import ErrorOverlay from "./overlays/ErrorOverlay.astro";
-import ARScene from "./ARScene.astro";
-import ARScripts from "./scripts/ARScripts.astro";
-import type { PropsConfig } from "../react/types";
-interface Props {
-  config: PropsConfig;
-}
-
-const {config} = Astro.props ;
----
-
-<!doctype html>
-<html lang="es-PE">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <meta name="robots" content="index, follow" />
-    <link rel="canonical" href="https://go.taptapp.xyz" />
-
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any" />
-    <meta name="theme-color" content="#3367D6" />
-    <meta
-      name="description"
-      content="Crea impacto duradero y genera confianza en tus clientes con la tarjeta digital TapTapp. Presenta tu información de manera clara y atractiva para conectar con el futuro."
-    />
-    <meta name="keywords" content="tarjeta digital, identidad, futuro, confianza, clientes" />
-    <meta name="author" content="@srsergiolazaro" />
-
-    <meta property="og:title" content="TapTapp AR Experience" />
-    <meta
-      property="og:description"
-      content="Descubre nuestra experiencia de realidad aumentada y da vida a tu tarjeta digital TapTapp."
-    />
-    <meta property="og:image" content="https://go.taptapp.xyz/Imgsocial.jpg" />
-    <meta property="og:url" content="https://go.taptapp.xyz" />
-    <link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous" />
-
-    <title>TapTapp AR Experience</title>
-    <script is:inline src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
-    <script is:inline src="https://r2-worker.sergiolazaromondargo.workers.dev/taptapp-ar.prod.js"
-    ></script>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap"
-      rel="stylesheet"
-    />
-    <ARStyles />
-    <ARScripts />
-    <style>
-      body {
-        font-family: "Montserrat", sans-serif;
-        margin: 0;
-        overflow: hidden;
-      }
-      @view-transition {
-        navigation: auto;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- Custom UI Overlays -->
-    <LoadingOverlay />
-    <ScanningOverlay targetImage={config.targetImageSrc} />
-    <ErrorOverlay />
-
-    <ARScene config={config} />
-  </body>
-</html>

package/src/astro/overlays/ErrorOverlay.astro

@@ -1,40 +0,0 @@
-<div id="error-overlay" class="custom-overlay hidden bg-gradient-to-br from-red-700 to-purple-700">
-  <div class="mb-5 text-5xl">⚠️</div>
-  <div class="font-semibold tracking-wide text-white/95 text-xl">No se pudo iniciar</div>
-  <div class="mt-3 max-w-[80%] text-center font-light text-white/75 text-sm">
-    Verifique los permisos de cámara o intente con otro dispositivo
-  </div>
-  <button
-    onclick="location.reload()"
-    class="mt-6 rounded-lg bg-blue-500 px-6 py-2.5 font-semibold text-white transition-all hover:bg-blue-600 hover:shadow-lg"
-  >
-    Reintentar
-  </button>
-</div>
-
-<style>
-  #error-overlay {
-    background: linear-gradient(135deg, #c0392b, #8e44ad);
-  }
-
-  .error-icon {
-    font-size: 50px;
-    margin-bottom: 20px;
-  }
-
-  .retry-button {
-    margin-top: 20px;
-    padding: 10px 20px;
-    background-color: #3498db;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-  }
-
-  .retry-button:hover {
-    background-color: #2980b9;
-  }
-</style>

package/src/astro/overlays/LoadingOverlay.astro

@@ -1,28 +0,0 @@
-<div id="loading-overlay" class="custom-overlay bg-gradient-to-br from-gray-800 to-gray-900">
-  <div class="loader"></div>
-  <div class="mt-5 font-semibold tracking-wide text-white/95 text-xl">Preparando...</div>
-  <div class="mt-3 max-w-[80%] text-center font-light text-white/75 text-sm">
-    Un momento mientras optimizamos su experiencia
-  </div>
-</div>
-
-<style>
-  .loader {
-    width: 60px;
-    height: 60px;
-    border: 5px solid rgba(255, 255, 255, 0.2);
-    border-top: 5px solid #3498db;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin-bottom: 20px;
-  }
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-</style>

package/src/astro/overlays/ScanningOverlay.astro

@@ -1,119 +0,0 @@
----
-interface Props {
-  targetImage?: string;
-}
-
-const { targetImage } = Astro.props;
----
-
-<div
-  id="scanning-overlay"
-  class="custom-overlay relative flex flex-col items-center justify-center"
->
-  <div class="scan-region relative mb-8 h-[300px] w-[300px] overflow-hidden">
-    <!-- Esquinas del recuadro de escaneo -->
-    <div class="corner top-left"></div>
-    <div class="corner top-right"></div>
-    <div class="corner bottom-left"></div>
-    <div class="corner bottom-right"></div>
-
-    <div class="absolute inset-0 p-6">
-      <img id="target-preview" src={targetImage} class="h-full w-full object-contain opacity-90" />
-    </div>
-
-    <div class="scan-animation"></div>
-  </div>
-
-  <div class="font-semibold tracking-wide text-white/95 text-2xl">Escaneando...</div>
-  <div class="mt-3 max-w-[80%] text-center font-light text-white/75 text-sm">
-    Centre el sticker dentro del marco
-  </div>
-</div>
-
-<style>
-  .scan-region img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    opacity: 0.7;
-  }
-
-  .scan-animation {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background: linear-gradient(
-      90deg,
-      rgba(52, 152, 219, 0),
-      rgba(52, 152, 219, 0.8),
-      rgba(155, 89, 182, 0.8),
-      rgba(52, 152, 219, 0)
-    );
-    box-shadow:
-      0 0 10px rgba(52, 152, 219, 0.7),
-      0 0 20px rgba(155, 89, 182, 0.4);
-    animation: scan 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-  }
-
-  @keyframes scan {
-    0% {
-      transform: translateY(0);
-      opacity: 0.8;
-    }
-    15% {
-      opacity: 1;
-    }
-    50% {
-      transform: translateY(298px);
-      opacity: 1;
-    }
-    85% {
-      opacity: 0.8;
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 0.8;
-    }
-  }
-
-  /* Estilos para las esquinas */
-  .corner {
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    border-color: white;
-    border-style: solid;
-    opacity: 0.7;
-    z-index: 1;
-  }
-
-  .top-left {
-    top: 6px;
-    left: 6px;
-    border-width: 2px 0 0 2px;
-    border-top-left-radius: 6px;
-  }
-
-  .top-right {
-    top: 6px;
-    right: 6px;
-    border-width: 2px 2px 0 0;
-    border-top-right-radius: 6px;
-  }
-
-  .bottom-left {
-    bottom: 6px;
-    left: 6px;
-    border-width: 0 0 2px 2px;
-    border-bottom-left-radius: 6px;
-  }
-
-  .bottom-right {
-    bottom: 6px;
-    right: 6px;
-    border-width: 0 2px 2px 0;
-    border-bottom-right-radius: 6px;
-  }
-</style>

package/src/astro/scripts/ARScripts.astro

@@ -1,118 +0,0 @@
-<script is:inline>
-  // Lógica mejorada para reproducción de video
-  let started = false;
-  let playing = false;
-
-  window.addEventListener("click", async function () {
-    try {
-      let video = document.querySelector("#ar-video");
-      let avideo = document.querySelector("a-video");
-
-      if (!video || !avideo) {
-        console.error("Elementos de video no encontrados");
-        return;
-      }
-
-      if (!started) {
-        await video.play();
-        avideo.setAttribute("opacity", 1);
-        started = true;
-        playing = true;
-      } else {
-        if (playing) {
-          video.pause();
-          playing = false;
-        } else {
-          await video.play();
-          playing = true;
-        }
-      }
-    } catch (error) {
-      console.error("Error en la reproducción del video:", error);
-    }
-  });
-</script>
-
-<script is:inline>
-  document.addEventListener("DOMContentLoaded", function () {
-    const scene = document.querySelector("a-scene");
-    const errorOverlay = document.getElementById("error-overlay");
-    const scanningOverlay = document.getElementById("scanning-overlay");
-    const videoEl = document.querySelector("#ar-video");
-    const mainVideo = document.querySelector("#main-video");
-    const targetImage = document.querySelector("#target-image");
-
-    if (!scene || !errorOverlay || !scanningOverlay || !videoEl || !mainVideo || !targetImage) {
-      console.error("Elementos críticos no encontrados");
-      if (errorOverlay) errorOverlay.classList.remove("hidden");
-      return;
-    }
-
-    // Verificación de recursos
-    targetImage.addEventListener("error", () => {
-      console.error("Error al cargar la imagen objetivo");
-      errorOverlay.classList.remove("hidden");
-    });
-
-    videoEl.addEventListener("error", () => {
-      console.error("Error al cargar el video");
-      errorOverlay.classList.remove("hidden");
-    });
-
-    // Gestión mejorada de errores AR
-    scene.addEventListener("arError", (event) => {
-      console.error("Error AR:", event);
-      errorOverlay.classList.remove("hidden");
-    });
-
-    // Verificar si MindAR está disponible
-    if (!window.MINDAR || !window.MINDAR.IMAGE) {
-      console.error("MindAR no está disponible");
-      errorOverlay.classList.remove("hidden");
-      return;
-    }
-
-    // Manejo de eventos de target
-    const targetEntity = document.querySelector("a-entity[mindar-image-target]");
-
-    targetEntity.addEventListener("targetFound", () => {
-      console.log("¡Objetivo encontrado!");
-      scanningOverlay.classList.add("hidden");
-
-      // Hacer visible el video
-      mainVideo.setAttribute("opacity", "1");
-
-      // Intentar reproducir
-      videoEl.play().catch((err) => {
-        console.error("Error reproduciendo video:", err);
-      });
-    });
-
-    targetEntity.addEventListener("targetLost", () => {
-      console.log("Objetivo perdido");
-      scanningOverlay.classList.remove("hidden");
-      mainVideo.setAttribute("opacity", "0");
-    });
-
-    // Función para aplicar estilos adaptativos
-    function applyVideoStyles() {
-      // Estilos del elemento video HTML
-      if (videoEl) {
-        videoEl.style.width = "100%";
-        videoEl.style.height = "100%";
-        videoEl.style.objectFit = "contain";
-      }
-    }
-
-    // Aplicar estilos al inicio y cuando cambie la orientación
-    applyVideoStyles();
-    window.addEventListener("resize", applyVideoStyles);
-
-    // Manejar toques para dispositivos móviles
-    document.addEventListener("touchstart", () => {
-      if (videoEl.paused && mainVideo.getAttribute("opacity") === "1") {
-        videoEl.play().catch((e) => console.log("Error en touchstart:", e));
-      }
-    });
-  });
-</script>

package/src/astro/styles/ARStyles.astro

@@ -1,147 +0,0 @@
-<style is:global>
-  /* Estilos globales básicos de A-Frame */
-  .a-enter-vr,
-  .a-enter-vr-button {
-    display: none !important;
-  }
-
-  body,
-  a-scene {
-    background-color: transparent !important;
-    font-family: "Montserrat", sans-serif;
-  }
-
-  .a-canvas {
-    background-color: transparent !important;
-    width: 100% !important;
-    height: 100% !important;
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-  }
-
-  /* Clase base compartida para overlays */
-  .custom-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    z-index: 999;
-    color: white;
-    text-align: center;
-    transition: opacity 0.5s ease;
-  }
-
-  .custom-overlay.hidden {
-    display: none;
-  }
-
-  /* Texto compartido */
-  .status-text {
-    font-size: 18px;
-    font-weight: 600;
-    margin-top: 20px;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-  }
-
-  .instruction-text {
-    font-size: 14px;
-    max-width: 80%;
-    margin-top: 10px;
-    opacity: 0.8;
-  }
-
-  /* Estilos para las pantallas de UI personalizadas */
-  .custom-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    z-index: 999;
-    background-color: rgba(0, 0, 0, 0);
-    color: white;
-    text-align: center;
-    transition: opacity 0.5s ease;
-  }
-
-  .custom-overlay.hidden {
-    display: none;
-  }
-
-  /* Pantalla de carga */
-  #loading-overlay {
-    background: linear-gradient(135deg, #2c3e50, #1a1a2e);
-  }
-
-  .loader {
-    width: 60px;
-    height: 60px;
-    border: 5px solid rgba(255, 255, 255, 0.2);
-    border-top: 5px solid #3498db;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin-bottom: 20px;
-  }
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  /* Pantalla de error */
-  #error-overlay {
-    background: linear-gradient(135deg, #c0392b, #8e44ad);
-  }
-
-  .error-icon {
-    font-size: 50px;
-    margin-bottom: 20px;
-  }
-
-  /* Pantalla de escaneo */
-  #scanning-overlay {
-    background-color: rgba(0, 0, 0, 0);
-  }
-
-  /* Botón para reintentar */
-  .retry-button {
-    margin-top: 20px;
-    padding: 10px 20px;
-    background-color: #3498db;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-  }
-
-  .retry-button:hover {
-    background-color: #2980b9;
-  }
-
-  video {
-    width: 100% !important;
-    height: 100% !important;
-    object-fit: cover !important;
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-  }
-</style>