@srsergio/taptapp-ar 1.0.0

package/dist/compiler/utils/images.js

@@ -0,0 +1,99 @@
+// simpler version of upsampling. better performance
+const _upsampleBilinear = ({ image, padOneWidth, padOneHeight }) => {
+    const { width, height, data } = image;
+    const dstWidth = image.width * 2 + (padOneWidth ? 1 : 0);
+    const dstHeight = image.height * 2 + (padOneHeight ? 1 : 0);
+    const temp = new Float32Array(dstWidth * dstHeight);
+    for (let i = 0; i < width; i++) {
+        for (let j = 0; j < height; j++) {
+            const v = 0.25 * data[j * width + i];
+            const ii = Math.floor(i / 2);
+            const jj = Math.floor(j / 2);
+            const pos = Math.floor(j / 2) * dstWidth + Math.floor(i / 2);
+            temp[pos] += v;
+            temp[pos + 1] += v;
+            temp[pos + dstWidth] += v;
+            temp[pos + dstWidth + 1] += v;
+        }
+    }
+    return { data: temp, width: dstWidth, height: dstHeight };
+};
+// artoolkit version. slower. is it necessary?
+const upsampleBilinear = ({ image, padOneWidth, padOneHeight }) => {
+    const { width, height, data } = image;
+    const dstWidth = image.width * 2 + (padOneWidth ? 1 : 0);
+    const dstHeight = image.height * 2 + (padOneHeight ? 1 : 0);
+    const temp = new Float32Array(dstWidth * dstHeight);
+    for (let i = 0; i < dstWidth; i++) {
+        const si = 0.5 * i - 0.25;
+        let si0 = Math.floor(si);
+        let si1 = Math.ceil(si);
+        if (si0 < 0)
+            si0 = 0; // border
+        if (si1 >= width)
+            si1 = width - 1; // border
+        for (let j = 0; j < dstHeight; j++) {
+            const sj = 0.5 * j - 0.25;
+            let sj0 = Math.floor(sj);
+            let sj1 = Math.ceil(sj);
+            if (sj0 < 0)
+                sj0 = 0; // border
+            if (sj1 >= height)
+                sj1 = height - 1; //border
+            const value = (si1 - si) * (sj1 - sj) * data[sj0 * width + si0] +
+                (si1 - si) * (sj - sj0) * data[sj1 * width + si0] +
+                (si - si0) * (sj1 - sj) * data[sj0 * width + si1] +
+                (si - si0) * (sj - sj0) * data[sj1 * width + si1];
+            temp[j * dstWidth + i] = value;
+        }
+    }
+    return { data: temp, width: dstWidth, height: dstHeight };
+};
+const downsampleBilinear = ({ image }) => {
+    const { data, width, height } = image;
+    const dstWidth = Math.floor(width / 2);
+    const dstHeight = Math.floor(height / 2);
+    const temp = new Float32Array(dstWidth * dstHeight);
+    const offsets = [0, 1, width, width + 1];
+    for (let j = 0; j < dstHeight; j++) {
+        for (let i = 0; i < dstWidth; i++) {
+            let srcPos = j * 2 * width + i * 2;
+            let value = 0.0;
+            for (let d = 0; d < offsets.length; d++) {
+                value += data[srcPos + offsets[d]];
+            }
+            value *= 0.25;
+            temp[j * dstWidth + i] = value;
+        }
+    }
+    return { data: temp, width: dstWidth, height: dstHeight };
+};
+const resize = ({ image, ratio }) => {
+    const width = Math.round(image.width * ratio);
+    const height = Math.round(image.height * ratio);
+    //const imageData = new Float32Array(width * height);
+    const imageData = new Uint8Array(width * height);
+    for (let i = 0; i < width; i++) {
+        let si1 = Math.round((1.0 * i) / ratio);
+        let si2 = Math.round((1.0 * (i + 1)) / ratio) - 1;
+        if (si2 >= image.width)
+            si2 = image.width - 1;
+        for (let j = 0; j < height; j++) {
+            let sj1 = Math.round((1.0 * j) / ratio);
+            let sj2 = Math.round((1.0 * (j + 1)) / ratio) - 1;
+            if (sj2 >= image.height)
+                sj2 = image.height - 1;
+            let sum = 0;
+            let count = 0;
+            for (let ii = si1; ii <= si2; ii++) {
+                for (let jj = sj1; jj <= sj2; jj++) {
+                    sum += 1.0 * image.data[jj * image.width + ii];
+                    count += 1;
+                }
+            }
+            imageData[j * width + i] = Math.floor(sum / count);
+        }
+    }
+    return { data: imageData, width: width, height: height };
+};
+export { downsampleBilinear, upsampleBilinear, resize };

package/dist/compiler/utils/randomizer.d.ts

@@ -0,0 +1,5 @@
+export function createRandomizer(): {
+    seed: number;
+    arrayShuffle(options: any): void;
+    nextInt(maxValue: any): number;
+};

package/dist/compiler/utils/randomizer.js

@@ -0,0 +1,25 @@
+const mRandSeed = 1234;
+const createRandomizer = () => {
+    const randomizer = {
+        seed: mRandSeed,
+        arrayShuffle(options) {
+            const { arr, sampleSize } = options;
+            for (let i = 0; i < sampleSize; i++) {
+                this.seed = (214013 * this.seed + 2531011) % (1 << 31);
+                let k = (this.seed >> 16) & 0x7fff;
+                k = k % arr.length;
+                let tmp = arr[i];
+                arr[i] = arr[k];
+                arr[k] = tmp;
+            }
+        },
+        nextInt(maxValue) {
+            this.seed = (214013 * this.seed + 2531011) % (1 << 31);
+            let k = (this.seed >> 16) & 0x7fff;
+            k = k % maxValue;
+            return k;
+        },
+    };
+    return randomizer;
+};
+export { createRandomizer };

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./react/AREditor";
+export * from "./react/ProgressDialog";
+export * from "./react/types";
+export * from "./compiler/offline-compiler";
+export { Controller } from "./compiler/controller";
+export { Compiler } from "./compiler/compiler";

package/dist/index.js

@@ -0,0 +1,7 @@
+export * from "./react/AREditor";
+export * from "./react/ProgressDialog";
+export * from "./react/types";
+export * from "./compiler/offline-compiler";
+// Re-export specific compiler components if needed
+export { Controller } from "./compiler/controller";
+export { Compiler } from "./compiler/compiler";

package/dist/react/AREditor.d.ts

@@ -0,0 +1,5 @@
+interface AREditorProps {
+    adminId: string;
+}
+export declare const AREditor: React.FC<AREditorProps>;
+export {};

package/dist/react/AREditor.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
+import { customAlphabet } from "nanoid";
+import { Image, Video, Upload, Camera, LoaderCircle } from "lucide-react";
+const ALLOWED_MIME_TYPES = ["image/jpeg", "image/png", "image/webp"];
+const ALLOWED_VIDEO_TYPES = ["video/mp4", "video/webm"];
+const useFileUpload = (allowedTypes) => {
+    const [fileState, setFileState] = useState({ file: null, preview: "" });
+    const [dimensions, setDimensions] = useState({});
+    const fileInputRef = useRef(null);
+    const handleFileChange = useCallback((file) => {
+        if (fileState.preview) {
+            URL.revokeObjectURL(fileState.preview);
+        }
+        if (!file) {
+            setFileState({ file: null, preview: "" });
+            return;
+        }
+        // Para archivos .mind, validar la extensión en lugar del tipo MIME
+        if (allowedTypes.includes(".mind")) {
+            if (!file.name.toLowerCase().endsWith(".mind")) {
+                throw new Error("El archivo debe tener extensión .mind");
+            }
+        }
+        else if (!allowedTypes.includes(file.type)) {
+            throw new Error("Tipo de archivo no permitido");
+        }
+        if (file.type.includes("video")) {
+            const video = document.createElement("video");
+            video.src = URL.createObjectURL(file);
+        }
+        console.log("Archivo cargado:", {
+            nombre: file.name,
+            tamaño: (file.size / 1024).toFixed(2) + " KB",
+            tipo: file.type || "application/octet-stream",
+        });
+        const preview = URL.createObjectURL(file);
+        if (file.type.includes("video")) {
+            const video = document.createElement("video");
+            video.src = URL.createObjectURL(file);
+            video.addEventListener("loadedmetadata", () => {
+                const width = video.videoWidth;
+                const height = video.videoHeight;
+                setDimensions({ width, height });
+                console.log("Ancho y alto del video:", width, height);
+            });
+        }
+        setFileState({ file, preview });
+    }, [allowedTypes, fileState.preview]);
+    const reset = useCallback(() => {
+        if (fileState.preview) {
+            URL.revokeObjectURL(fileState.preview);
+        }
+        setFileState({ file: null, preview: "" });
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+    }, [fileState.preview]);
+    return { fileState, handleFileChange, reset, fileInputRef, dimensions };
+};
+const useUploadFile = () => {
+    const uploadFile = async (file, type) => {
+        const customNanoid = customAlphabet("1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ", 21);
+        const id = customNanoid();
+        const formData = new FormData();
+        formData.append("file", file);
+        const endpoint = type === "video"
+            ? `https://r2-worker.sergiolazaromondargo.workers.dev/video/${id}`
+            : type === "mind"
+                ? `https://r2-worker.sergiolazaromondargo.workers.dev/mind/${id}`
+                : `https://r2-worker.sergiolazaromondargo.workers.dev/${id}`;
+        const response = await fetch(endpoint, {
+            method: "PUT",
+            body: formData,
+        });
+        if (!response.ok) {
+            throw new Error(`Error al subir ${type}: ${response.status} ${response.statusText}`);
+        }
+        return await response.json();
+    };
+    return { uploadFile };
+};
+export const AREditor = ({ adminId }) => {
+    const { fileState: imageState, handleFileChange: handleImageChange, reset: resetImage, fileInputRef: imageInputRef, } = useFileUpload(ALLOWED_MIME_TYPES);
+    const { fileState: mindState, handleFileChange: handleMindChange, reset: resetMind, fileInputRef: mindInputRef, } = useFileUpload([".mind"]);
+    const { fileState: videoState, handleFileChange: handleVideoChange, reset: resetVideo, fileInputRef: videoInputRef, dimensions: videoDimensions, } = useFileUpload(ALLOWED_VIDEO_TYPES);
+    const [videoScale, setVideoScale] = useState(1);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState("");
+    const { uploadFile } = useUploadFile();
+    const handleSave = async () => {
+        try {
+            setLoading(true);
+            setError("");
+            if (!imageState.file || !mindState.file || !videoState.file) {
+                throw new Error("Se requieren una imagen, un archivo .mind y un video");
+            }
+            const [imageResult, mindResult, videoResult] = await Promise.all([
+                uploadFile(imageState.file, "image"),
+                uploadFile(mindState.file, "mind"),
+                uploadFile(videoState.file, "video"),
+            ]);
+            const data = {
+                adminId,
+                data: [
+                    {
+                        id: `photos-${Date.now()}`,
+                        type: "photos",
+                        images: [{ image: imageResult.url, fileId: imageResult.fileId }],
+                    },
+                    {
+                        id: `videoNative-${Date.now()}`,
+                        type: "videoNative",
+                        url: videoResult.url,
+                        fileId: videoResult.fileId,
+                        scale: videoScale,
+                        width: videoDimensions.width,
+                        height: videoDimensions.height,
+                    },
+                    {
+                        id: `ar-${Date.now()}`,
+                        type: "ar",
+                        url: mindResult.url,
+                        fileId: mindResult.fileId,
+                    },
+                ],
+                type: "ar",
+            };
+            const response = await fetch("/api/updateadmin.json", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(data),
+            });
+            if (!response.ok) {
+                throw new Error(`Error actualizando datos AR: ${response.status}`);
+            }
+            alert("¡Guardado exitosamente!");
+            resetImage();
+            resetMind();
+            resetVideo();
+        }
+        catch (error) {
+            setError(error.message);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const FileUploadSection = ({ type, icon: Icon, fileState, inputRef, onFileChange, allowedTypes, label, }) => (_jsxs("div", { className: "group relative overflow-hidden rounded-xl shadow-lg bg-white/80 backdrop-blur-sm transition-all duration-300 hover:shadow-xl hover:scale-[1.02] border border-gray-100", children: [_jsx("input", { ref: inputRef, type: "file", accept: allowedTypes.join(","), onChange: (e) => {
+                    try {
+                        const file = e.target.files?.[0] || null;
+                        onFileChange(file);
+                    }
+                    catch (error) {
+                        setError(error.message);
+                    }
+                }, className: "hidden" }), !fileState.file ? (_jsxs("label", { htmlFor: inputRef.current?.id, onClick: () => inputRef.current?.click(), className: "flex cursor-pointer flex-col items-center justify-center p-10 bg-gradient-to-br from-gray-50 to-white transition-colors group-hover:from-blue-50 group-hover:to-purple-50", children: [_jsx("div", { className: "transform transition-transform duration-300 group-hover:scale-110", children: _jsx(Icon, { className: "h-16 w-16 text-gray-400 group-hover:text-blue-500" }) }), _jsx("span", { className: "mt-4 text-lg font-medium bg-gradient-to-r from-gray-600 to-gray-800 bg-clip-text text-transparent group-hover:from-blue-600 group-hover:to-purple-600", children: label }), _jsx("span", { className: "mt-2 text-sm text-gray-400 group-hover:text-gray-500", children: allowedTypes.join(", ") })] })) : (_jsxs("div", { className: "p-6 space-y-4", children: [_jsx("div", { className: "relative aspect-video w-full overflow-hidden rounded-lg ring-1 ring-gray-100", children: type === "video" ? (_jsx("video", { src: fileState.preview, controls: true, className: "h-full w-full object-cover", children: "Tu navegador no soporta la reproducci\u00F3n de videos." })) : type === "image" ? (_jsx("img", { src: fileState.preview, alt: "Preview", className: "h-full w-full object-cover" })) : (_jsxs("div", { className: "flex h-full flex-col items-center justify-center space-y-3 bg-gradient-to-br from-blue-50 to-purple-50 p-4", children: [_jsx("div", { className: "flex items-center justify-center rounded-full bg-gradient-to-r from-blue-400 to-purple-400 p-3", children: _jsx(Upload, { className: "h-6 w-6 text-white" }) }), _jsxs("div", { className: "text-center space-y-2", children: [_jsx("span", { className: "block text-lg font-medium text-gray-600", children: fileState.file.name }), _jsxs("span", { className: "block text-sm text-gray-500", children: ["Tama\u00F1o: ", (fileState.file.size / 1024).toFixed(2), " KB"] }), _jsx("span", { className: "mt-1 block text-sm font-medium text-green-600", children: "\u2713 Archivo AR cargado correctamente" })] })] })) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center space-x-3", children: [_jsx(Icon, { className: "h-5 w-5 text-blue-500" }), _jsx("span", { className: "text-sm font-medium text-gray-600", children: fileState.file.name })] }), _jsx("button", { onClick: () => onFileChange(null), className: "rounded-full bg-gradient-to-r from-blue-500 to-purple-500 px-4 py-2 text-sm font-medium text-white shadow-md transition-all hover:from-blue-600 hover:to-purple-600 hover:shadow-lg active:scale-95", children: "Cambiar" })] })] }))] }));
+    return (_jsx("div", { className: "min-h-screen w-full bg-gradient-to-br from-blue-50 via-white to-purple-50 p-4 md:p-8", children: _jsxs("div", { className: "mx-auto max-w-3xl rounded-3xl bg-white/90 backdrop-blur-md p-6 md:p-10 shadow-2xl ring-1 ring-black/10", children: [_jsxs("div", { className: "flex flex-col items-center justify-center space-y-8", children: [_jsx("div", { className: "rounded-2xl bg-gradient-to-br from-blue-500 to-purple-500 p-6 shadow-xl shadow-blue-300/30 hover:scale-105 transition-transform", children: _jsx(Camera, { className: "h-12 w-12 text-white" }) }), _jsx("h1", { className: "bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-5xl font-bold text-transparent text-center", children: "Editor de Experiencia AR" }), _jsx("p", { className: "text-2xl text-gray-600 text-center font-light", children: "Crea una experiencia de realidad aumentada \u00FAnica" })] }), _jsxs("div", { className: "mt-12 space-y-8", children: [_jsx(FileUploadSection, { type: "image", icon: Image, fileState: imageState, inputRef: imageInputRef, onFileChange: handleImageChange, allowedTypes: ALLOWED_MIME_TYPES, label: "Haz clic para seleccionar una imagen" }), _jsx(FileUploadSection, { type: "mind", icon: Upload, fileState: mindState, inputRef: mindInputRef, onFileChange: handleMindChange, allowedTypes: [".mind"], label: "Haz clic para seleccionar archivo .mind" }), _jsx(FileUploadSection, { type: "video", icon: Video, fileState: videoState, inputRef: videoInputRef, onFileChange: handleVideoChange, allowedTypes: ALLOWED_VIDEO_TYPES, label: "Haz clic para seleccionar un video" }), _jsxs("div", { className: "space-y-4 rounded-2xl border border-gray-200/50 bg-white/90 backdrop-blur-md p-8 shadow-lg ring-1 ring-black/10", children: [_jsxs("label", { className: "flex items-center justify-between text-2xl font-semibold text-gray-800", children: [_jsx("span", { children: "Escala del Video" }), _jsxs("span", { className: "bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent font-bold", children: [videoScale, "x"] })] }), _jsxs("div", { className: "relative py-8", children: [_jsx("div", { className: "absolute h-3 w-full rounded-full bg-gradient-to-r from-blue-400 to-purple-400 opacity-20" }), _jsx("div", { className: "absolute h-3 rounded-full bg-gradient-to-r from-blue-400 to-purple-400 shadow-lg", style: { width: `${(videoScale / 2) * 100}%` } }), _jsx("input", { type: "range", min: "0.1", max: "2", step: "0.1", value: videoScale, onChange: (e) => setVideoScale(Number(e.target.value)), className: "relative h-3 w-full cursor-pointer appearance-none rounded-lg bg-transparent focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-4", style: { WebkitAppearance: "none" } })] })] })] }), error && (_jsx("div", { className: "mt-6 rounded-xl bg-red-50 p-4 text-red-700 shadow-sm ring-1 ring-red-100", children: error })), _jsx("button", { onClick: handleSave, disabled: loading, className: "mt-10 w-full rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 py-5 text-xl font-semibold text-white shadow-xl transition-all hover:from-blue-700 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-400 disabled:shadow-none focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-4", children: loading ? (_jsxs("div", { className: "flex items-center justify-center space-x-3", children: [_jsx(LoaderCircle, { className: "h-7 w-7 animate-spin" }), _jsx("span", { children: "Guardando..." })] })) : ("Guardar") })] }) }));
+};

package/dist/react/ProgressDialog.d.ts

@@ -0,0 +1,13 @@
+interface ProgressDialogProps {
+    open: boolean;
+    imageStatus: "pending" | "processing" | "completed" | "error";
+    videoStatus: "pending" | "processing" | "completed" | "error";
+    arProcessingStatus: "pending" | "processing" | "completed" | "error";
+    arUploadStatus: "pending" | "processing" | "completed" | "error";
+    imageProgress?: number;
+    videoProgress?: number;
+    arProcessingProgress?: number;
+    arUploadProgress?: number;
+}
+export declare function ProgressDialog({ open, imageStatus, videoStatus, arProcessingStatus, arUploadStatus, imageProgress, videoProgress, arProcessingProgress, arUploadProgress, }: ProgressDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/react/ProgressDialog.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { CheckCircle2, Loader2, Upload, Image as ImageIcon, Video as VideoIcon, } from "lucide-react";
+export function ProgressDialog({ open, imageStatus, videoStatus, arProcessingStatus, arUploadStatus, imageProgress = 0, videoProgress = 0, arProcessingProgress = 0, arUploadProgress = 0, }) {
+    // Configurar las etapas del progreso
+    const stages = [
+        {
+            label: "Subiendo imagen",
+            status: imageStatus,
+            progress: imageProgress,
+            icon: _jsx(ImageIcon, { className: "h-5 w-5" }),
+        },
+        {
+            label: "Subiendo video",
+            status: videoStatus,
+            progress: videoProgress,
+            icon: _jsx(VideoIcon, { className: "h-5 w-5" }),
+        },
+        {
+            label: "Procesando imagen para AR",
+            status: arProcessingStatus,
+            progress: arProcessingProgress,
+            icon: _jsx(Loader2, { className: "h-5 w-5" }),
+        },
+        {
+            label: "Subiendo experiencia AR",
+            status: arUploadStatus,
+            progress: arUploadProgress,
+            icon: _jsx(Upload, { className: "h-5 w-5" }),
+        },
+    ];
+    // Calcular el progreso total (promedio de todos los procesos)
+    const completedSteps = stages.filter((stage) => stage.status === "completed").length;
+    const totalProgress = (imageProgress + videoProgress + arProcessingProgress + arUploadProgress) / 4;
+    const overallProgress = Math.min(Math.max(totalProgress, completedSteps * 25), 100);
+    // Bloquear el scroll cuando el modal está abierto
+    useEffect(() => {
+        if (open) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "auto";
+        }
+        return () => {
+            document.body.style.overflow = "auto";
+        };
+    }, [open]);
+    if (!open)
+        return null;
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-black bg-opacity-50 p-4", children: _jsxs("div", { className: "relative max-h-full w-full max-w-md overflow-hidden rounded-lg bg-white p-6 shadow-xl", children: [_jsx("div", { className: "mb-4 flex items-center justify-between", children: _jsx("h2", { className: "text-center font-semibold text-xl", children: "Guardando experiencia AR" }) }), _jsx("div", { className: "mt-2", children: _jsx("div", { className: "relative pt-1", children: _jsxs("div", { className: "mb-6", children: [_jsx("div", { className: "h-2 w-full rounded-full bg-gray-200", children: _jsx("div", { className: "h-2 rounded-full bg-blue-600 transition-all duration-500", style: { width: `${overallProgress}%` } }) }), _jsxs("div", { className: "mt-2 text-center text-gray-600 text-sm", children: ["Progreso total: ", Math.round(overallProgress), "%"] })] }) }) }), _jsx("div", { className: "mt-2 space-y-5", children: stages.map((stage, index) => (_jsx("div", { className: "relative", children: _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: `mr-3 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full ${stage.status === "completed"
+                                        ? "bg-green-100"
+                                        : stage.status === "processing"
+                                            ? "bg-blue-100"
+                                            : stage.status === "error"
+                                                ? "bg-red-100"
+                                                : "bg-gray-100"}`, children: stage.status === "completed" ? (_jsx(CheckCircle2, { className: "h-6 w-6 text-green-600" })) : stage.status === "processing" ? (_jsx("div", { className: "text-blue-600", children: stage.icon })) : stage.status === "error" ? (_jsx("div", { className: "text-red-600", children: stage.icon })) : (_jsx("div", { className: "text-gray-400", children: stage.icon })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium text-sm", children: stage.label }), stage.status === "processing" && (_jsxs("div", { className: "mt-1", children: [_jsx("div", { className: "h-1.5 w-full rounded-full bg-gray-200", children: _jsx("div", { className: "h-1.5 rounded-full bg-blue-600 transition-all duration-300", style: { width: `${stage.progress || 0}%` } }) }), _jsxs("div", { className: "mt-1 text-gray-500 text-xs", children: [Math.round(stage.progress || 0), "%"] })] })), stage.status === "completed" && (_jsx("div", { className: "mt-1 text-green-600 text-xs", children: "Completado" })), stage.status === "error" && (_jsx("div", { className: "mt-1 text-red-600 text-xs", children: "Error" })), stage.status === "pending" && (_jsx("div", { className: "mt-1 text-gray-500 text-xs", children: "Pendiente" }))] })] }) }, index))) }), completedSteps === stages.length && (_jsxs("div", { className: "mt-4 rounded-lg bg-green-50 p-4 text-center", children: [_jsx(CheckCircle2, { className: "mx-auto mb-2 h-8 w-8 text-green-500" }), _jsx("p", { className: "font-medium text-green-800", children: "\u00A1Experiencia AR guardada con \u00E9xito!" }), _jsx("p", { className: "text-green-700 text-sm", children: "Tu contenido est\u00E1 listo para ser visualizado." })] }))] }) }));
+}

package/dist/react/types.d.ts

@@ -0,0 +1,22 @@
+export interface PropsConfig {
+    cardId: string;
+    targetImageSrc: string;
+    targetMindSrc: string;
+    videoSrc: string;
+    videoWidth: number;
+    videoHeight: number;
+    scale: number;
+}
+export interface DataItem {
+    id: string;
+    type: "photos" | "videoNative" | "ar";
+    images?: {
+        image: string;
+        fileId: string;
+    }[];
+    url?: string;
+    scale?: number;
+    width?: number;
+    height?: number;
+}
+export declare function mapDataToPropsConfig(data: any[]): PropsConfig;

package/dist/react/types.js

@@ -0,0 +1,14 @@
+export function mapDataToPropsConfig(data) {
+    const photos = data.find((item) => item.type === "photos");
+    const video = data.find((item) => item.type === "videoNative");
+    const ar = data.find((item) => item.type === "ar");
+    return {
+        cardId: photos?.id || "",
+        targetImageSrc: photos?.images?.[0]?.image || "",
+        targetMindSrc: ar?.url || "",
+        videoSrc: video?.url || "",
+        videoWidth: video?.width || 0,
+        videoHeight: video?.height || 0,
+        scale: video?.scale || 1,
+    };
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+    "name": "@srsergio/taptapp-ar",
+    "version": "1.0.0",
+    "description": "AR Visualizer and Compiler for Astro and React",
+    "type": "module",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "./astro/*": "./src/astro/*.astro",
+        "./compiler/*": "./src/compiler/*.js"
+    },
+    "files": [
+        "dist",
+        "src",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "tsc",
+        "prepublishOnly": "npm run build"
+    },
+    "peerDependencies": {
+        "astro": ">=4.0.0",
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0",
+        "three": ">=0.160.0",
+        "aframe": ">=1.5.0"
+    },
+    "dependencies": {
+        "@tensorflow/tfjs": "^4.22.0",
+        "@tensorflow/tfjs-backend-cpu": "^4.22.0",
+        "@tensorflow/tfjs-backend-webgl": "^4.22.0",
+        "ml-matrix": "^6.10.4",
+        "svd-js": "^1.1.1",
+        "tinyqueue": "^2.0.3",
+        "lucide-react": "^0.477.0",
+        "nanoid": "^5.0.7"
+    },
+    "devDependencies": {
+        "typescript": "^5.4.5",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@types/three": "^0.170.0",
+        "astro": "5.16.4"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/src/astro/ARScene.astro

@@ -0,0 +1,59 @@
+---
+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

@@ -0,0 +1,73 @@
+---
+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>