{"_id":"@closerclick/closer-click-nav","_rev":"2-746b99b0e7c5974a9c42e2234aa1ae52","name":"@closerclick/closer-click-nav","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@closerclick/closer-click-nav","version":"0.1.0","keywords":["closer-click","web-component","custom-element","back","navigation","history","popstate","android-back","pwa","cross-app"],"author":{"name":"seyacat"},"license":"MIT","_id":"@closerclick/closer-click-nav@0.1.0","maintainers":[{"name":"mycloserclick","email":"admin@closer.click"}],"homepage":"https://github.com/closerclick/closer-click-nav#readme","bugs":{"url":"https://github.com/closerclick/closer-click-nav/issues"},"dist":{"shasum":"0e6964d52a5bc682f640e577b75137740824c80c","tarball":"https://registry.npmjs.org/@closerclick/closer-click-nav/-/closer-click-nav-0.1.0.tgz","fileCount":6,"integrity":"sha512-R8VVD5ghzBr01FKL46SltlWs8PRW3CriYqbQunGt5OZTL/HxslGLyD6GZ5UHGXKDxZvxI5UHenxqxCYzj7PAQQ==","signatures":[{"sig":"MEQCIEQvv+Z9693aaOHdoLxTbFmxOK1lg3M79X46yxxICpnZAiBHe89iMQciY54t9C3eaUexTVroFLvZaef9vdR3uGFtKg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20324},"main":"src/index.js","type":"module","types":"src/index.d.ts","module":"src/index.js","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.js"},"./vue":{"import":"./src/vue.js"}},"scripts":{"test":"node test/smoke.mjs"},"_npmUser":{"name":"mycloserclick","email":"admin@closer.click"},"repository":{"url":"git+https://github.com/closerclick/closer-click-nav.git","type":"git"},"_npmVersion":"11.12.1","description":"Navegación \"volver\" unificada del ecosistema Closer Click: controlador de pila (modal → pestaña → página anterior → closer.click) que intercepta el botón físico de Android / gesto de iOS / atrás del navegador, más el Web Component <closer-click-back> (che","directories":{},"_nodeVersion":"25.9.0","_hasShrinkwrap":false,"peerDependencies":{"vue":">=3.3.0"},"peerDependenciesMeta":{"vue":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/closer-click-nav_0.1.0_1780577559490_0.5382247272472525","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@closerclick/closer-click-nav","version":"0.2.0","description":"Navegación \"volver\" unificada del ecosistema Closer Click: controlador de pila (modal → pestaña → página anterior → closer.click) que intercepta el botón físico de Android / gesto de iOS / atrás del navegador, más el Web Component <closer-click-back> (che","type":"module","main":"src/index.js","module":"src/index.js","types":"src/index.d.ts","exports":{".":{"types":"./src/index.d.ts","import":"./src/index.js"},"./vue":{"import":"./src/vue.js"}},"scripts":{"test":"node test/smoke.mjs"},"peerDependencies":{"vue":">=3.3.0"},"peerDependenciesMeta":{"vue":{"optional":true}},"keywords":["closer-click","web-component","custom-element","back","navigation","history","popstate","android-back","pwa","cross-app"],"author":{"name":"seyacat"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/closerclick/closer-click-nav.git"},"_id":"@closerclick/closer-click-nav@0.2.0","bugs":{"url":"https://github.com/closerclick/closer-click-nav/issues"},"homepage":"https://github.com/closerclick/closer-click-nav#readme","_nodeVersion":"25.9.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-BeZX9Kw6XL6XMEpyG4nKNKYGr3mOIfH/P/Y1z3jD9x43a4n4+hWTo1jCLwLNZtBBnbcLltKGAzKjMCO9DAIjcA==","shasum":"1305da2a123745b27e96a89e3ace27901d5786bd","tarball":"https://registry.npmjs.org/@closerclick/closer-click-nav/-/closer-click-nav-0.2.0.tgz","fileCount":6,"unpackedSize":22844,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDkU4hisX453F0P9RfoWoLjxG4fmE6lfUbojCbd3PE7sAIgesFVDdCu4ZB7IpF9h9CCH0gfEWoKCoOwlAHmGFOBabc="}]},"_npmUser":{"name":"mycloserclick","email":"admin@closer.click"},"directories":{},"maintainers":[{"name":"mycloserclick","email":"admin@closer.click"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/closer-click-nav_0.2.0_1780582317244_0.7548467409234427"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-04T12:52:39.324Z","modified":"2026-06-04T14:11:57.510Z","0.1.0":"2026-06-04T12:52:39.658Z","0.2.0":"2026-06-04T14:11:57.378Z"},"bugs":{"url":"https://github.com/closerclick/closer-click-nav/issues"},"author":{"name":"seyacat"},"license":"MIT","homepage":"https://github.com/closerclick/closer-click-nav#readme","keywords":["closer-click","web-component","custom-element","back","navigation","history","popstate","android-back","pwa","cross-app"],"repository":{"type":"git","url":"git+https://github.com/closerclick/closer-click-nav.git"},"description":"Navegación \"volver\" unificada del ecosistema Closer Click: controlador de pila (modal → pestaña → página anterior → closer.click) que intercepta el botón físico de Android / gesto de iOS / atrás del navegador, más el Web Component <closer-click-back> (che","maintainers":[{"name":"mycloserclick","email":"admin@closer.click"}],"readme":"# @closerclick/closer-click-nav\n\nNavegación **\"volver\"** unificada para todo el ecosistema [Closer Click](https://closer.click).\n\nResuelve un problema real: en iOS / PWA standalone no había forma de volver a\n`closer.click`, y cada app inventaba (o no) su propio botón atrás. Este paquete\nunifica el **botón físico de volver de Android**, el **gesto de volver de iOS** y\nel **botón atrás del navegador** con un **chevron de UI**, y aplica la misma\ncascada en todas las apps:\n\n```\nmodal abierto            →  ciérralo\nhistorial de pestañas    →  vuelve a la vista anterior\nsin historial interno    →  página anterior del navegador\nsin página anterior      →  closer.click\n```\n\nSin JS de terceros, sin cookies, autohosteado (Shadow DOM). Funciona en apps\nVue y vanilla.\n\n## Por qué un paquete y no copiar el código\n\nEl chevron es trivial; lo que **no** lo es —y por eso se centraliza— es la\nlógica de `popstate`: el botón físico de Android/iOS en una PWA no dispara un\nevento propio, sino `popstate`. Para interceptarlo hay que mantener un\n**centinela de history** (`pushState` base + uno por capa) y contar entradas\npara no salirse de la app antes de tiempo ni quedar atrapado. Reimplementado por\napp, son 15 variantes con bugs sutiles distintos. Aquí está en un solo lugar y\ntesteado (`npm test`, Playwright).\n\n## Dos piezas\n\n### 1. Controlador `createBackNav()`\n\n```js\nimport { createBackNav } from '@closerclick/closer-click-nav'\n\nconst nav = createBackNav({ home: 'https://closer.click' }) // crea e instala el singleton\n\n// Modal: empuja una capa; onClose define cómo cerrarlo.\nconst layer = nav.open(() => { mostrarModal.value = false })\n// …y al cerrarlo desde su propio botón X / backdrop:\nlayer.close()\n\n// Pestaña/vista: deja \"miga\" para volver a la anterior.\nnav.open(() => setTab(tabAnterior))\n\n// Routing real (opcional): refleja una URL/path enlazable mientras la capa\n// esté abierta. Al cerrar (volver físico o layer.close()) el navegador\n// restaura la URL anterior automáticamente.\nconst vista = nav.open(() => cerrarVista(), { url: '/que-es' })\n```\n\nAPI: `open(onClose, opts?) → { close(), active }` —con `opts.url` opcional para\n**routing real** (URL enlazable/indexable por capa; sin `url` = modal clásico que\nno toca la barra de direcciones)—, `back()` (volver programático, idéntico al\nfísico), `size()`, `home`, `destroy()`. `getBackNav()` devuelve el controlador\nactivo.\n\n> Routing real en GitHub Pages: para que un deep-link a `/que-es` cargue, genera\n> una página estática real (p. ej. copia `index.html` → `que-es.html`, que Pages\n> sirve con 200) y, al arrancar, deriva la vista inicial de `location.pathname`.\n\n### 2. Web Component `<closer-click-back>` (el chevron)\n\n```html\n<!-- vanilla -->\n<script type=\"module\" src=\".../@closerclick/closer-click-nav/src/index.js\"></script>\n<closer-click-back></closer-click-back>\n```\n\n```js\n// Vue: importa el paquete una vez y usa el tag en el header.\nimport '@closerclick/closer-click-nav'\n```\n```html\n<header class=\"topbar\">\n  <closer-click-back lang=\"es\" />\n  <div class=\"brand\">…</div>\n</header>\n```\n\nAl hacer click hace lo mismo que el botón físico de volver. Atributos: `lang`\n(`es`|`en`|auto), `label` (override), `floating` (posición fija arriba-izquierda\npara apps sin header donde anclar), `home` (fallback si no hay controlador).\nEmite el evento cancelable `cc-back`. Variables CSS: `--cc-back-size`,\n`--cc-back-color`, `--cc-back-bg`, `--cc-back-radius`, `--cc-back-icon`, …\n\n### Helper Vue (opcional)\n\nSincroniza un `ref` de modal con la pila sin cablear `open`/`close` a mano:\n\n```js\nimport { useBackLayer } from '@closerclick/closer-click-nav/vue'\n\nconst showNotifs = ref(false)\nuseBackLayer(showNotifs) // el volver cierra el modal en vez de salir de la app\n\n// Con routing real: la vista pasa a tener URL propia enlazable/indexable.\nconst aboutOpen = ref(false)\nuseBackLayer(aboutOpen, { url: '/que-es' }) // string o función que lo devuelva\n```\n\n## Test\n\n```\nnpm test   # smoke con Playwright: cascada popstate, LIFO, cierre programático, fallback a home\n```\n","readmeFilename":"README.md"}