{"_id":"@blashstar/vue-360","_rev":"5-2574cad75c60acde23df688baf9a9f92","name":"@blashstar/vue-360","dist-tags":{"latest":"1.0.7"},"versions":{"1.0.0":{"name":"@blashstar/vue-360","version":"1.0.0","_id":"@blashstar/vue-360@1.0.0","maintainers":[{"name":"blashstar","email":"blashstar@gmail.com"}],"dist":{"shasum":"4a071089bba078924507c21b0b79a5a103286d4d","tarball":"https://registry.npmjs.org/@blashstar/vue-360/-/vue-360-1.0.0.tgz","fileCount":32,"integrity":"sha512-nJmNxxlkvXWoPG25juSkewZt1tcqkCgBQpHZOrmFeam1pRaazZf8k5UOd0xfdXb++F+Iu/eJZRu++w/VnAvJLA==","signatures":[{"sig":"MEMCIFa1fQ6yedspV3fsxeIuxJBAaXqO6Obc3kCBAtvjQwxnAh9KCwD5HdPp2pB1oEvITKv4Roo1zGclT59kp7nxEg3Y","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18582250},"main":"./dist/vue-360.js","type":"module","types":"./dist/index.d.ts","module":"./dist/vue-360.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/vue-360.js"}},"gitHead":"19274ee4220108d7dfb4f85e6f61d03a8db00241","scripts":{"dev":"vite --host","lint":"eslint . --ext .vue,.ts,.js","build":"vite build","prepare":"npm run build","preview":"vite preview","test:unit":"vitest run","test:types":"tsd"},"_npmUser":{"name":"blashstar","email":"blashstar@gmail.com"},"_npmVersion":"11.13.0","description":"Componente Vue.js para visor esférico 360° con soporte para imágenes y vídeos","directories":{},"_nodeVersion":"25.8.2","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"pug":"^3.0.2","tsd":"^0.29.0","vite":"^5.0.0","jsdom":"^23.0.0","stylus":"^0.59.0","vitest":"^1.0.0","typescript":"^5.3.0","@types/three":"^0.160.0","@types/hammerjs":"^2.0.41","@vue/test-utils":"^2.4.0","vite-plugin-dts":"^5.0.0","@vitejs/plugin-vue":"^5.0.0","@vue/language-core":"^3.1.8"},"peerDependencies":{"vue":"^3.4.0","gsap":"^3.15.0","three":"^0.160.0","hammerjs":"^2.0.8"},"_npmOperationalInternal":{"tmp":"tmp/vue-360_1.0.0_1778001418597_0.7024895756385074","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@blashstar/vue-360","version":"1.0.1","_id":"@blashstar/vue-360@1.0.1","maintainers":[{"name":"blashstar","email":"blashstar@gmail.com"}],"dist":{"shasum":"da3d59b30c6e3cd8b2fcdd3e5074b0fe5a1c975f","tarball":"https://registry.npmjs.org/@blashstar/vue-360/-/vue-360-1.0.1.tgz","fileCount":32,"integrity":"sha512-qaEboz/pXnLmYnBS1NFW4zWwCtqJ2yV9e3ZKbno3FFKygyXT4zfbNd1cDZEmdypjb/1tX5u1OpwR4jaPNefKdA==","signatures":[{"sig":"MEQCIEAE3ntQ+5bsLAyFjCnGMTQahn9PKxSQW/xOU5y9k8ghAiAE6UFPGURTThRpxZkrUCOycaF+tR4nwWuVfV6nAbbjQw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18582289},"main":"./dist/vue-360.js","type":"module","types":"./dist/index.d.ts","module":"./dist/vue-360.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/vue-360.js"},"./style.css":"./dist/style.css"},"gitHead":"19274ee4220108d7dfb4f85e6f61d03a8db00241","scripts":{"dev":"vite --host","lint":"eslint . --ext .vue,.ts,.js","build":"vite build","prepare":"npm run build","preview":"vite preview","test:unit":"vitest run","test:types":"tsd"},"_npmUser":{"name":"blashstar","email":"blashstar@gmail.com"},"_npmVersion":"11.13.0","description":"Componente Vue.js para visor esférico 360° con soporte para imágenes y vídeos","directories":{},"_nodeVersion":"25.8.2","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"pug":"^3.0.2","tsd":"^0.29.0","vite":"^5.0.0","jsdom":"^23.0.0","stylus":"^0.59.0","vitest":"^1.0.0","typescript":"^5.3.0","@types/three":"^0.160.0","@types/hammerjs":"^2.0.41","@vue/test-utils":"^2.4.0","vite-plugin-dts":"^5.0.0","@vitejs/plugin-vue":"^5.0.0","@vue/language-core":"^3.1.8"},"peerDependencies":{"vue":"^3.4.0","gsap":"^3.15.0","three":"^0.160.0","hammerjs":"^2.0.8"},"_npmOperationalInternal":{"tmp":"tmp/vue-360_1.0.1_1778006242677_0.05330591795034345","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@blashstar/vue-360","version":"1.0.3","_id":"@blashstar/vue-360@1.0.3","maintainers":[{"name":"blashstar","email":"blashstar@gmail.com"}],"dist":{"shasum":"751104b9ad00fce47497726e1e30d1df3807a40a","tarball":"https://registry.npmjs.org/@blashstar/vue-360/-/vue-360-1.0.3.tgz","fileCount":32,"integrity":"sha512-xzYdhvBI/7PNDs5BrPpEW0aVHNBafugr9Pdx8x41ixb67SePLfHPEIvmsUcyD6JFUQHdwgXZpAzlfyD+p0nTpg==","signatures":[{"sig":"MEUCIG0lRYblmaTeZeXa4YWo3ikqIHm3fYU/eLRkPcuRA64WAiEAmbSpDjxE5BemvS1ltTXqC2bQosZyMxkmB9s4V7Z+8/U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18593057},"main":"./dist/vue-360.js","type":"module","types":"./dist/index.d.ts","module":"./dist/vue-360.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/vue-360.js"},"./style.css":"./dist/style.css"},"gitHead":"a117f6d35248aac60d1c0739a2c824e3eab7d011","scripts":{"dev":"vite --host","lint":"eslint . --ext .vue,.ts,.js","build":"vite build","prepare":"npm run build","preview":"vite preview","test:unit":"vitest run","test:types":"tsd"},"_npmUser":{"name":"blashstar","email":"blashstar@gmail.com"},"_npmVersion":"11.13.0","description":"Componente Vue.js para visor esférico 360° con soporte para imágenes y vídeos","directories":{},"_nodeVersion":"25.8.2","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"pug":"^3.0.2","tsd":"^0.29.0","vite":"^5.0.0","jsdom":"^23.0.0","stylus":"^0.59.0","vitest":"^1.0.0","typescript":"^5.3.0","@types/three":"^0.160.0","@types/hammerjs":"^2.0.41","@vue/test-utils":"^2.4.0","vite-plugin-dts":"^5.0.0","@vitejs/plugin-vue":"^5.0.0","@vue/language-core":"^3.1.8"},"peerDependencies":{"vue":"^3.4.0","gsap":"^3.15.0","three":"^0.160.0","hammerjs":"^2.0.8"},"_npmOperationalInternal":{"tmp":"tmp/vue-360_1.0.3_1778009750199_0.052545654542955234","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@blashstar/vue-360","version":"1.0.4","_id":"@blashstar/vue-360@1.0.4","maintainers":[{"name":"blashstar","email":"blashstar@gmail.com"}],"dist":{"shasum":"580761abca9f06e132e90ad7b76cde9266b8dd66","tarball":"https://registry.npmjs.org/@blashstar/vue-360/-/vue-360-1.0.4.tgz","fileCount":32,"integrity":"sha512-GY9iNTFWo7vl7EdSxDNMEd4bDt1/m0YV533RZn+A5soqqMCEIeH1W6JvvKG1H0jeQoF8QY0zip+OgT1gvphdeQ==","signatures":[{"sig":"MEYCIQCk3bzTtTMyUFgrx6qAjCNhk7dd5iQHSFptxFcy+8+c0gIhAObuH02nIxDEEykTdyH9CZ3tVPZPZjQmjkKgaEHIFZJr","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18594255},"main":"./dist/vue-360.js","type":"module","types":"./dist/index.d.ts","module":"./dist/vue-360.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/vue-360.js"},"./style.css":"./dist/style.css"},"gitHead":"80fb31c221bd9a92d41937a5db94f0c799630b9d","scripts":{"dev":"vite --host","lint":"eslint . --ext .vue,.ts,.js","build":"vite build","prepare":"npm run build","preview":"vite preview","test:unit":"vitest run","test:types":"tsd"},"_npmUser":{"name":"blashstar","email":"blashstar@gmail.com"},"_npmVersion":"11.13.0","description":"Componente Vue.js para visor esférico 360° con soporte para imágenes y vídeos","directories":{},"_nodeVersion":"25.8.2","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"pug":"^3.0.2","tsd":"^0.29.0","vite":"^5.0.0","jsdom":"^23.0.0","stylus":"^0.59.0","vitest":"^1.0.0","typescript":"^5.3.0","@types/three":"^0.160.0","@types/hammerjs":"^2.0.41","@vue/test-utils":"^2.4.0","vite-plugin-dts":"^5.0.0","@vitejs/plugin-vue":"^5.0.0","@vue/language-core":"^3.1.8"},"peerDependencies":{"vue":"^3.4.0","gsap":"^3.15.0","three":"^0.160.0","hammerjs":"^2.0.8"},"_npmOperationalInternal":{"tmp":"tmp/vue-360_1.0.4_1778010418496_0.046138352500902924","host":"s3://npm-registry-packages-npm-production"}},"1.0.7":{"name":"@blashstar/vue-360","version":"1.0.7","description":"Componente Vue.js para visor esférico 360° con soporte para imágenes y vídeos","type":"module","scripts":{"dev":"vite --host","build":"vite build","preview":"vite preview","test:unit":"vitest run","test:types":"tsd","lint":"eslint . --ext .vue,.ts,.js","prepare":"npm run build"},"main":"./dist/vue-360.js","module":"./dist/vue-360.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/vue-360.js","types":"./dist/index.d.ts"},"./style.css":"./dist/style.css"},"dependencies":{},"devDependencies":{"@types/hammerjs":"^2.0.41","@types/three":"^0.160.0","@vitejs/plugin-vue":"^5.0.0","@vue/language-core":"^3.1.8","@vue/test-utils":"^2.4.0","jsdom":"^23.0.0","pug":"^3.0.2","stylus":"^0.59.0","tsd":"^0.29.0","typescript":"^5.3.0","vite":"^5.0.0","vite-plugin-dts":"^5.0.0","vitest":"^1.0.0"},"peerDependencies":{"vue":"^3.4.0","three":"^0.160.0","hammerjs":"^2.0.8","gsap":"^3.15.0"},"gitHead":"2882ff98c6ed8aee39b5a62fb8f97a771a076296","_id":"@blashstar/vue-360@1.0.7","_nodeVersion":"25.8.2","_npmVersion":"11.13.0","dist":{"integrity":"sha512-2M8QfyU0LeV35Ddr6CXXc2WHZ8x9OPzu7jPW030Ic6gk/mlH9FnQIv8cDkz6kVezeAHry7O46n0AszoLrJJYXA==","shasum":"d938d421d11598642140d6cab982e98323f1f260","tarball":"https://registry.npmjs.org/@blashstar/vue-360/-/vue-360-1.0.7.tgz","fileCount":32,"unpackedSize":18586397,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEKKiTFx+rxYCnoaqwZiCX6SQCfyKdxjKQ79yvU+y/zGAiEA4PURFRDa1BPBHMAwKZ5MLB4Vwj1Exz19iqZVgVgyoiM="}]},"_npmUser":{"name":"blashstar","email":"blashstar@gmail.com"},"directories":{},"maintainers":[{"name":"blashstar","email":"blashstar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-360_1.0.7_1778039084502_0.8045443502251559"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-05T17:16:58.458Z","modified":"2026-05-06T03:44:45.306Z","1.0.0":"2026-05-05T17:16:59.367Z","1.0.1":"2026-05-05T18:37:23.540Z","1.0.3":"2026-05-05T19:35:50.864Z","1.0.4":"2026-05-05T19:46:59.404Z","1.0.7":"2026-05-06T03:44:45.194Z"},"description":"Componente Vue.js para visor esférico 360° con soporte para imágenes y vídeos","maintainers":[{"name":"blashstar","email":"blashstar@gmail.com"}],"readme":"# Visor Esférico 360°\n\n[![npm version](https://img.shields.io/npm/v/@blashstar/vue-360.svg)](https://www.npmjs.com/package/@blashstar/vue-360)\n\nComponente Vue 3 para visualización panorámica esférica 360°. Soporta imágenes equirectangulares y vídeos 360° con controles de mouse, táctiles y teclado, marcadores interactivos, navegación por escenas y animaciones suaves mediante GSAP.\n\n## Características\n\n- 🖼️ **Imágenes y vídeos 360°** — Renderizado esférico con Three.js\n- 🎬 **Controles de vídeo integrados** — Play/pause, seek, volumen, mute\n- 📍 **Marcadores interactivos** — DOM y 3D, con tooltips y acciones (panel, navegación, cambio de escena)\n- 🎞️ **Sistema de escenas** — Navega entre panoramas con transiciones suaves\n- 📱 **Táctil y móvil** — Pinch-to-zoom, pan con inercia, compatible con iOS Safari\n- ⌨️ **Teclado** — Flechas para rotar, `+`/`-` para zoom\n- 🎨 **Personalizable** — Pug + Stylus, props de sensibilidad y estilo\n- 🔷 **TypeScript** — Tipado estricto, declaraciones `.d.ts` incluidas\n\n## Instalación\n\n```bash\nnpm install @blashstar/vue-360\n```\n\n### Dependencias peer\n\nEl paquete requiere que el consumidor instale:\n\n```bash\nnpm install vue@^3.4.0 three@^0.160.0 hammerjs@^2.0.8 gsap@^3.15.0\n```\n\n## Uso básico\n\n```vue\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { VisorEsferico } from '@blashstar/vue-360';\nimport type { ApiVisorEsferico, Escena } from '@blashstar/vue-360';\n\nconst visorRef = ref<ApiVisorEsferico | null>(null);\n\nconst escenas: Escena[] = [\n  {\n    id: 'sala',\n    titulo: 'Sala de estar',\n    medio: '/panoramas/sala.jpg',\n    tipoMedio: 'imagen',\n    posicionInicial: { yaw: 0, pitch: 0 },\n    zoomInicial: 50,\n    marcadores: [\n      {\n        id: 'cocina',\n        posicion: { u: 0.5, v: 0.5 },\n        titulo: 'Ir a la cocina',\n        accion: 'cambiar_escena',\n        escenaDestino: 'cocina',\n        tipo: 'dom',\n        tooltip: { contenido: 'Cocina', trigger: 'hover' },\n      },\n    ],\n  },\n  {\n    id: 'cocina',\n    titulo: 'Cocina',\n    medio: '/panoramas/cocina.jpg',\n    tipoMedio: 'imagen',\n    posicionInicial: { yaw: 1.2, pitch: 0 },\n    zoomInicial: 60,\n  },\n];\n</script>\n\n<template>\n  <VisorEsferico\n    ref=\"visorRef\"\n    :escenas=\"escenas\"\n    escena-inicial=\"sala\"\n    :auto-reproducir=\"true\"\n    :controles-tactiles=\"true\"\n    :teclado-habilitado=\"true\"\n    @marcador-seleccionado=\"console.log\"\n    @escena-cambiada=\"console.log\"\n  />\n</template>\n\n<style>\nhtml, body, #app {\n  margin: 0;\n  height: 100%;\n}\n</style>\n```\n\n## Props\n\n| Prop | Tipo | Default | Descripción |\n|---|---|---|---|\n| `escenas` | `Escena[]` | `[]` | Array de escenas para modo escenas |\n| `escenaInicial` | `string` | `''` | ID de la escena inicial |\n| `medioInicial` | `string` | `''` | URL del medio (modo legacy sin escenas) |\n| `tipoMedioInicial` | `'imagen' \\| 'video'` | `'imagen'` | Tipo del medio inicial |\n| `marcadoresIniciales` | `Marcador[]` | `[]` | Marcadores iniciales (modo legacy) |\n| `colorFondo` | `string` | `'#000000'` | Color de fondo del canvas |\n| `autoReproducir` | `boolean` | `true` | Auto-play para vídeos |\n| `controlesMouse` | `boolean` | `true` | Habilitar drag con mouse |\n| `controlesTactiles` | `boolean` | `true` | Habilitar gestos táctiles |\n| `tecladoHabilitado` | `boolean` | `true` | Habilitar controles de teclado |\n| `sensibilidadRotacion` | `number` | `1` | Multiplicador de sensibilidad de rotación |\n| `sensibilidadZoom` | `number` | `1` | Multiplicador de sensibilidad de zoom |\n| `posicionInicial` | `CoordenadaEsferica \\| CoordenadaTextura` | `{yaw:0, pitch:0}` | Orientación inicial de la cámara (esférica o UV) |\n| `zoomInicial` | `number` | `50` | Nivel de zoom inicial (0–100) |\n| `duracionTransicion` | `number` | `300` | Duración del fade entre escenas (ms) |\n\n## Precarga y Transiciones\n\nEl visor implementa precarga automática de imágenes y transiciones fluidas entre escenas:\n\n### Precarga de imágenes\n\nCuando se asigna un array de escenas, el visor precarga automáticamente las imágenes de todas las escenas (excepto vídeos) para que estén disponibles en cache cuando el usuario navegue a ellas. Esto reduce los tiempos de carga al cambiar de escena.\n\n### Transiciones con fade\n\nAl cambiar de escena, se produce un crossfade suave entre la escena actual y la siguiente. La duración de la transición es configurable mediante la prop `duracionTransicion` (en milisegundos, default: 300ms).\n\n```vue\n<template>\n  <VisorEsferico\n    :escenas=\"escenas\"\n    :duracion-transicion=\"500\"\n  />\n</template>\n```\n\nDurante la transición:\n1. La nueva imagen se muestra con opacidad 0 (overlay invisible)\n2. La opacidad aumenta gradualmente hasta 1 (fade in)\n3. Se actualizan los marcadores y posición de cámara\n4. La transición se completa sin parpadeos\n\n> **Nota:** La precarga se hace en paralelo. Si una imagen falla, el visor continuará funcionando sin ella.\n\n## Sistema de escenas\n\nUna `Escena` agrupa un medio, marcadores, posición de cámara y configuración de vídeo:\n\n```ts\ninterface Escena {\n  id: string;                    // Identificador único\n  titulo?: string;               // Título descriptivo\n  descripcion?: string;          // Descripción\n  previo?: string;               // URL de thumbnail\n  medio: string;                 // URL de imagen o vídeo\n  tipoMedio?: 'imagen' | 'video';\n  marcadores?: Marcador[];\n  posicionInicial?: CoordenadaEsferica | CoordenadaTextura;  // { yaw, pitch } o { u, v }\n  zoomInicial?: number;          // 0–100\n  configuracionVideo?: ConfiguracionVideo;\n}\n```\n\n### Navegación programática\n\n```ts\nvisorRef.value?.cargarEscena('cocina');\nvisorRef.value?.escenaSiguiente();\nvisorRef.value?.escenaAnterior();\nvisorRef.value?.obtenerEscenaActual();  // Escena | null\n```\n\n## Marcadores\n\nLos marcadores pueden posicionarse con **coordenadas de textura** (`u`, `v`, rango 0–1) o **coordenadas esféricas** (`yaw`, `pitch`, en radianes).\n\n```ts\ninterface Marcador {\n  id: string;\n  posicion: { u: number; v: number } | { yaw: number; pitch: number };\n  titulo: string;\n  accion: 'mostrar_panel' | 'cambiar_contenido' | 'navegar' | 'cambiar_escena';\n  contenido?: string;            // Para 'mostrar_panel'\n  url?: string;                  // Para 'navegar' o 'cambiar_contenido'\n  tipoMedio?: 'imagen' | 'video'; // Para 'cambiar_contenido'\n  escenaDestino?: string;        // Para 'cambiar_escena'\n  tipo?: 'dom' | 'esfera';       // 'dom' (default) o mesh 3D\n  visible?: boolean;\n  zoomObjetivo?: number;         // Zoom al que enfocar al ir al marcador\n  tooltip?: { contenido: string; posicion?: string; trigger?: 'hover' | 'click' };\n  estilo?: { color?: string; tamano?: number; icono?: string };\n}\n```\n\n### CRUD de marcadores\n\n```ts\nvisorRef.value?.agregarMarcador(nuevoMarcador);\nvisorRef.value?.eliminarMarcador('id');\nvisorRef.value?.actualizarMarcador({ id: 'id', visible: false });\nvisorRef.value?.limpiarMarcadores();\nvisorRef.value?.mostrarMarcador('id');\nvisorRef.value?.ocultarMarcador('id');\n```\n\n## API de cámara\n\n```ts\nvisorRef.value?.rotarA({ yaw: 1.5, pitch: 0.2 }, true);   // Animado\nvisorRef.value?.zoomA(75, true);                          // Zoom animado\nvisorRef.value?.irAMarcador('marcador-1', true);          // Ir a marcador\nvisorRef.value?.resetearVista(true);                      // Volver al inicio\nvisorRef.value?.obtenerEstado();                          // { yaw, pitch, zoom }\n```\n\n## Configuración de vídeo\n\nPor escena:\n\n```ts\nconst escenaVideo: Escena = {\n  id: 'recorrido',\n  medio: '/videos/360.mp4',\n  tipoMedio: 'video',\n  configuracionVideo: {\n    controlesVisibles: true,   // Mostrar barra de controles\n    volumenInicial: 0.8,       // 0–1\n    muteadoInicial: false,\n    tiempoInicial: 10,         // Empezar en el segundo 10\n    bucle: true,\n  },\n};\n```\n\n## Eventos\n\n| Evento | Payload | Descripción |\n|---|---|---|\n| `marcador-seleccionado` | `{ marcador: Marcador, dobleClick?: boolean }` | Clic o tap en marcador |\n| `medio-cambiado` | `{ url: string, tipoMedio: TipoMedio }` | Cambio de imagen/vídeo |\n| `escena-cambiada` | `{ escenaAnterior?, escenaActual, indice }` | Transición entre escenas |\n| `estado-cambiado` | `{ yaw, pitch, zoom }` | Movimiento de cámara |\n| `video-pausado` | — | El vídeo fue pausado |\n| `video-reanudado` | — | El vídeo fue reanudado |\n| `marcador-agregado` | `{ marcador }` | Marcador añadido por API |\n| `marcador-eliminado` | `{ id }` | Marcador eliminado por API |\n| `marcador-actualizado` | `{ marcador }` | Marcador modificado por API |\n\n## Controles\n\n| Dispositivo | Acción | Comportamiento |\n|---|---|---|\n| **Mouse** | Drag izquierdo | Rotar la vista (arrastra la esfera) |\n| **Mouse** | Rueda | Zoom in/out |\n| **Mouse** | Doble clic | Resetear vista |\n| **Mouse** | Clic en marcador | Ejecutar acción del marcador |\n| **Táctil** | Pan (1 dedo) | Rotar con inercia |\n| **Táctil** | Pinch (2 dedos) | Zoom in/out |\n| **Táctil** | Doble tap | Resetear vista |\n| **Teclado** | ← → ↑ ↓ | Rotar en incrementos |\n| **Teclado** | `+` / `-` | Zoom in/out |\n\n## Desarrollo local\n\n```bash\ngit clone https://github.com/blashstar/vue-360.git\ncd vue-360\nnpm install\nnpm run dev        # Servidor de desarrollo con demo\nnpm run build      # Build de librería ESM + tipos\nnpm run test:unit  # Pruebas unitarias\n```\n\n> **Nota para Windows:** si `vitest run` se cuelga, usar `npx vitest run --pool=threads`.\n\n## Arquitectura del build\n\n- **Formato:** ESM (`es`)\n- **Entry point JS:** `dist/vue-360.js`\n- **Entry point tipos:** `dist/index.d.ts`\n- **Estilos:** `dist/style.css` (incluir en tu proyecto)\n- **Externos:** `vue`, `three`, `hammerjs`, `gsap` (no se incluyen en el bundle)\n- **Bundle:** Un único archivo optimizado para tree-shaking\n\n## Uso como dependencia\n\n### Instalación en tu proyecto Vue\n\n```bash\n# 1. Instalar el paquete\nnpm install @blashstar/vue-360\n\n# 2. Instalar las peer dependencies requeridas\nnpm install vue@^3.4.0 three@^0.160.0 hammerjs@^2.0.8 gsap@^3.15.0\n```\n\n### Importar en tu proyecto\n\n```ts\n// Importar el componente principal\nimport { VisorEsferico } from '@blashstar/vue-360';\n\n// Importar tipos (opcional)\nimport type { Escena, Marcador, ApiVisorEsferico } from '@blashstar/vue-360';\n\n// Importar estilos (importante para que funcione correctamente)\nimport '@blashstar/vue-360/style.css';\n```\n\n### Ejemplo completo\n\n```vue\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { VisorEsferico, type Escena, type ApiVisorEsferico } from '@blashstar/vue-360';\nimport '@blashstar/vue-360/style.css';\n\nconst visorRef = ref<ApiVisorEsferico | null>(null);\n\nconst escenas: Escena[] = [\n  {\n    id: 'sala',\n    titulo: 'Sala de estar',\n    medio: '/panoramas/sala.jpg',\n    tipoMedio: 'imagen',\n    posicionInicial: { yaw: 0, pitch: 0 },\n    marcadores: [\n      {\n        id: 'puerta',\n        posicion: { u: 0.8, v: 0.5 },\n        titulo: 'Entrada',\n        accion: 'cambiar_escena',\n        escenaDestino: 'entrada',\n      },\n    ],\n  },\n  {\n    id: 'entrada',\n    titulo: 'Entrada',\n    medio: '/panoramas/entrada.jpg',\n    tipoMedio: 'imagen',\n  },\n];\n</script>\n\n<template>\n  <VisorEsferico\n    ref=\"visorRef\"\n    :escenas=\"escenas\"\n    escena-inicial=\"sala\"\n    :controles-tactiles=\"true\"\n    :teclado-habilitado=\"true\"\n  />\n</template>\n```\n\n### Notas importantes\n\n- **Incluir siempre los estilos:** `import '@blashstar/vue-360/style.css'` es obligatorio para el funcionamiento correcto.\n- **Peer dependencies:** Asegúrate de tener instalada la versión de Vue 3 compatible con tu proyecto.\n- **TypeScript:** Los tipos se incluyen automáticamente, no necesitas instalar `@types/three` ni `@types/hammerjs` si ya los tienes como devDependencies en tu proyecto.\n\n## Licencia\n\nMIT\n","readmeFilename":"README.md"}