@closerclick/closer-click-notifications 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 seyacat
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,134 @@
+# @closerclick/closer-click-notifications
+
+Notificaciones compartidas del ecosistema **Closer Click**. Unifica lo que cada
+app reimplementaba por separado (messenger, eco, chess, pronóstico, gymbro):
+
+1. **`createNotifications(config)`** — controlador *data-agnostic* y sin framework:
+   permiso del navegador + **preferencias por categoría con scope por app** +
+   disparo (`notify`) respetando permiso y prefs. Web Push opcional.
+2. **`<closer-click-notifications>`** — Web Component (panel de ajustes): activar
+   permiso, togglear cada categoría, sonido y push. Shadow DOM, bilingüe es/en,
+   temable por CSS vars (`--ccn-*`). **Sin JS de terceros ni cookies.**
+3. **`createVaultPushProvider(...)`** — Web Push (app cerrada) ligado al transporte
+   del ecosistema (`closer-click-proxy-client`) y firmado por el vault de identidad.
+
+El ecosistema es mixto Vue/vanilla → la UI va como **custom element** (mismo patrón
+que `closer-click-support` / `closer-click-profile` / `closer-click-nav`).
+
+## Instalar
+
+```bash
+npm i @closerclick/closer-click-notifications
+```
+
+## Uso (controlador + disparo)
+
+```js
+import { createNotifications } from '@closerclick/closer-click-notifications'
+
+const notifications = createNotifications({
+  storageKey: 'eco',                      // scope: namespacea las prefs por app
+  categories: [
+    { key: 'replies', label: { es: 'Respuestas', en: 'Replies' }, hint: { es: 'Cuando responden a tu eco.', en: 'When someone replies.' } },
+    { key: 'reposts', label: { es: 'Reposts', en: 'Reposts' }, default: true },
+  ],
+  sound: true,                            // incluye toggle de sonido (default true)
+})
+
+// Disparar (no hace nada si falta permiso o la categoría está apagada):
+await notifications.notify('replies', {
+  title: 'Nueva respuesta',
+  body: '@ada respondió tu eco',
+  icon: '/icon-192.png',
+  tag: 'eco-reply',
+  onClick: () => location.assign('/#replies'),
+})
+```
+
+`notify` usa el Service Worker (`registration.showNotification`) cuando hay uno
+activo (mejor en móvil/PWA) y si no `new Notification`. El **sonido** lo controla
+la preferencia `sound` (vía el flag `silent` del SO).
+
+## Panel de ajustes (Web Component)
+
+```js
+import '@closerclick/closer-click-notifications'   // registra el custom element
+```
+
+```html
+<closer-click-notifications modal lang="es"></closer-click-notifications>
+```
+
+```js
+// tras montar, asigná el controlador (propiedad JS, no atributo):
+document.querySelector('closer-click-notifications').controller = notifications
+```
+
+En Vue 3, configurá `isCustomElement: (tag) => tag.startsWith('closer-click-')` en
+`compilerOptions` del plugin de Vue, y enlazá el controlador con un `ref`:
+
+```html
+<closer-click-notifications :ref="el => el && (el.controller = notifications)" modal />
+```
+
+### Atributos
+
+| Atributo  | Descripción |
+|-----------|-------------|
+| `modal`   | envuelve en backdrop (click fuera = cerrar, emite `cc-notif-close`) |
+| `heading` | título del panel (override) |
+| `lang`    | `es` \| `en` \| `auto` (default `auto`) |
+
+### Propiedad JS
+
+- `.controller` — el objeto devuelto por `createNotifications(...)`.
+
+### Eventos (bubbles, composed)
+
+- `cc-notif-change` — `detail { key, value }` (toggle de categoría/sonido).
+- `cc-notif-permission` — `detail { permission }` (tras pedir permiso).
+- `cc-notif-push` — `detail { enabled }` (toggle de push).
+- `cc-notif-close` — cerrar (X o backdrop en modo `modal`).
+
+## Web Push (app cerrada)
+
+```js
+import { createNotifications, createVaultPushProvider } from '@closerclick/closer-click-notifications'
+import { getWebSocketProxyClient } from '@closerclick/closer-click-proxy-client'
+import { Identity } from '@closerclick/closer-click-identity'
+
+const notifications = createNotifications({
+  storageKey: 'messenger',
+  categories: [ /* … */ ],
+  push: createVaultPushProvider({
+    proxyClient: () => getWebSocketProxyClient(),
+    identity: () => Identity.connect(),     // instancia o getter (async ok)
+    storageKey: 'messenger',
+  }),
+})
+
+// Re-registra la subscription tras cada identify (los endpoints rotan):
+await notifications.push.ensureSubscribed()
+```
+
+El "timbre" **no transporta contenido**: el Service Worker despierta y la app
+reconecta e `identify()` drena la cola cifrada del proxy. La subscription se liga
+a la **misma pubkey del vault** usada en `identify`, con un sobre firmado por el vault.
+
+## Tema (CSS custom properties)
+
+```css
+closer-click-notifications {
+  --ccn-bg: #12161d;
+  --ccn-accent: #2dd4bf;
+  --ccn-radius: 14px;
+}
+```
+
+`--ccn-bg`, `--ccn-bg-2..4`, `--ccn-border`, `--ccn-text`, `--ccn-muted`,
+`--ccn-accent`, `--ccn-accent-text`, `--ccn-danger`, `--ccn-gold`, `--ccn-radius`,
+`--ccn-font`.
+
+## Licencia
+
+MIT

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@closerclick/closer-click-notifications",
+  "version": "0.1.0",
+  "description": "Notificaciones compartidas del ecosistema Closer Click: controlador data-agnostic (permiso del navegador + preferencias por categoría con scope por app + disparo) y el Web Component <closer-click-notifications> (panel de ajustes). Incluye helper de Web Push ligado al vault + proxy. Autohosteado, Shadow DOM, sin JS de terceros ni cookies.",
+  "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"
+    }
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "node test/smoke.mjs"
+  },
+  "keywords": [
+    "closer-click",
+    "web-component",
+    "custom-element",
+    "notifications",
+    "web-push",
+    "pwa",
+    "cross-app"
+  ],
+  "author": "seyacat",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/closerclick/closer-click-notifications.git"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,92 @@
+/** Texto bilingüe o plano. */
+export type LocalizedText = string | { es?: string; en?: string }
+
+export interface NotificationCategory {
+  /** Clave estable de la categoría (se persiste en prefs). */
+  key: string
+  /** Etiqueta visible (bilingüe o plana). */
+  label: LocalizedText
+  /** Ayuda opcional bajo la etiqueta. */
+  hint?: LocalizedText
+  /** Valor por defecto (default: true = notifica). */
+  default?: boolean
+}
+
+export interface NotifyOptions extends NotificationOptions {
+  title?: string
+  /** Handler de click (solo vía `new Notification`, no SW). */
+  onClick?: (e: Event) => void
+}
+
+/** Provider de Web Push que la app inyecta (ver createVaultPushProvider). */
+export interface PushProvider {
+  supported?: () => boolean
+  isEnabled?: () => boolean
+  busy?: (() => boolean) | boolean
+  error?: (() => string) | string
+  enable?: () => Promise<boolean>
+  disable?: () => Promise<boolean>
+  ensureSubscribed?: () => Promise<void>
+}
+
+export interface NotificationsConfig {
+  /** Namespace por app (scope de las preferencias). */
+  storageKey: string
+  categories: NotificationCategory[]
+  /** Incluir preferencia/toggle de sonido (default: true). */
+  sound?: boolean
+  /** Web Push opcional. */
+  push?: PushProvider
+}
+
+export interface NotificationsController {
+  readonly storageKey: string
+  readonly categories: NotificationCategory[]
+  readonly hasSound: boolean
+  readonly prefs: Record<string, boolean>
+  readonly supported: boolean
+  readonly soundEnabled: boolean
+  permission(): NotificationPermission | 'unsupported'
+  requestPermission(): Promise<NotificationPermission | 'unsupported'>
+  shouldNotify(key?: string): boolean
+  notify(key: string, opts?: NotifyOptions): Promise<Notification | null>
+  get(key: string): boolean
+  set(key: string, val: boolean): void
+  subscribe(fn: () => void): () => void
+  push: null | {
+    readonly supported: boolean
+    readonly enabled: boolean
+    readonly busy: boolean
+    readonly error: string
+    enable(): Promise<boolean>
+    disable(): Promise<boolean>
+    ensureSubscribed(): Promise<void>
+  }
+}
+
+/** Crea el controlador de notificaciones (data-agnostic, sin framework). */
+export function createNotifications(config: NotificationsConfig): NotificationsController
+
+export interface VaultPushProviderConfig {
+  /** Cliente proxy del ecosistema (o getter) con enablePush/disablePush. */
+  proxyClient: any | (() => any)
+  /** Instancia Identity del vault (o getter, puede ser async). */
+  identity: any | (() => any | Promise<any>)
+  /** Namespace del flag local (por app). */
+  storageKey?: string
+}
+
+/** Provider de Web Push ligado al vault + proxy del ecosistema. */
+export function createVaultPushProvider(cfg: VaultPushProviderConfig): Required<Pick<PushProvider, 'supported' | 'isEnabled' | 'busy' | 'error' | 'enable' | 'disable' | 'ensureSubscribed'>>
+
+export class CloserClickNotifications extends HTMLElement {
+  controller: NotificationsController | null
+}
+
+export default CloserClickNotifications
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'closer-click-notifications': CloserClickNotifications
+  }
+}

package/src/index.js

@@ -0,0 +1,531 @@
+/**
+ * @closerclick/closer-click-notifications
+ *
+ * Notificaciones compartidas del ecosistema Closer Click. Unifica lo que cada app
+ * reimplementaba por separado (messenger, eco, chess, pronóstico, gymbro):
+ *
+ *   1) createNotifications(config)  — controlador data-agnostic, framework-free:
+ *        permiso del navegador + preferencias por categoría (con SCOPE POR APP vía
+ *        storageKey) + disparo (notify) respetando permiso/prefs. Opcionalmente
+ *        cablea Web Push (app cerrada) a través de un provider.
+ *
+ *   2) <closer-click-notifications> — Web Component (panel de ajustes): activa el
+ *        permiso, togglea cada categoría, el sonido y el push. Shadow DOM,
+ *        bilingüe es/en, temable por CSS vars (--ccn-*). Sin JS de terceros ni cookies.
+ *
+ *   3) createVaultPushProvider({ proxyClient, identity, storageKey }) — helper que
+ *        liga el Web Push al transporte del ecosistema (proxy-client) firmado por
+ *        el vault de identidad. Misma lógica que tenían messenger y pronóstico.
+ *
+ * El ecosistema es mixto Vue/vanilla → la UI reutilizable va como custom element
+ * (mismo patrón que closer-click-support / closer-click-profile / closer-click-nav).
+ */
+
+/* ============================================================================
+ * 1) Controlador  ──  createNotifications(config)
+ * ==========================================================================*/
+
+const LS_PREFIX = 'cc-notif:'
+
+const isBrowser = typeof window !== 'undefined'
+function _supported () {
+  return isBrowser && typeof Notification !== 'undefined' &&
+    typeof navigator !== 'undefined' && 'serviceWorker' in navigator
+}
+
+/**
+ * @param {object} config
+ * @param {string} config.storageKey   namespace por app (scope). Ej: 'eco', 'messenger'.
+ * @param {Array}  config.categories   [{ key, label, hint?, default? }] (label/hint:
+ *                                      string o { es, en }).
+ * @param {boolean} [config.sound=true] incluir preferencia/toggle de sonido.
+ * @param {object} [config.push]       provider de Web Push (ver createVaultPushProvider).
+ */
+export function createNotifications (config = {}) {
+  const storageKey = config.storageKey || 'default'
+  const categories = Array.isArray(config.categories) ? config.categories : []
+  const hasSound = config.sound !== false
+  const push = config.push || null
+
+  const LS_KEY = LS_PREFIX + storageKey
+
+  // ----- preferencias (localStorage, por dispositivo) -----
+  const defaults = {}
+  for (const c of categories) defaults[c.key] = c.default !== false
+  if (hasSound) defaults.sound = true
+
+  function _load () {
+    try { return { ...defaults, ...JSON.parse(localStorage.getItem(LS_KEY) || '{}') } }
+    catch { return { ...defaults } }
+  }
+  const prefs = _load()
+  function _save () { try { localStorage.setItem(LS_KEY, JSON.stringify(prefs)) } catch (_) {} }
+
+  // ----- suscriptores (re-render del Web Component, etc.) -----
+  const subs = new Set()
+  function _emit () { for (const fn of subs) { try { fn() } catch (_) {} } }
+
+  // ----- permiso -----
+  function permission () {
+    if (typeof Notification === 'undefined') return 'unsupported'
+    return Notification.permission
+  }
+  async function requestPermission () {
+    if (typeof Notification === 'undefined') return 'unsupported'
+    let p = Notification.permission
+    if (p === 'default') { try { p = await Notification.requestPermission() } catch (_) {} }
+    _emit()
+    return p
+  }
+
+  // ----- disparo -----
+  function shouldNotify (key) {
+    if (key == null) return true
+    return prefs[key] !== false
+  }
+
+  /**
+   * Lanza una notificación si: hay soporte, permiso 'granted' y la categoría está
+   * activa. Usa el Service Worker (registration.showNotification) cuando está
+   * disponible (mejor en móvil/PWA), si no `new Notification`. El sonido lo
+   * controla la preferencia `sound` (silent del SO).
+   * @returns {Promise<Notification|null>}
+   */
+  async function notify (key, opts = {}) {
+    if (!_supported() || permission() !== 'granted') return null
+    if (!shouldNotify(key)) return null
+    const { title = '', onClick, silent, ...rest } = opts
+    const beSilent = silent != null ? !!silent : !(hasSound && prefs.sound !== false)
+    const noteOpts = { silent: beSilent, ...rest }
+    try {
+      if (navigator.serviceWorker && navigator.serviceWorker.controller) {
+        const reg = await navigator.serviceWorker.ready
+        await reg.showNotification(title, noteOpts)
+        return null
+      }
+    } catch (_) { /* cae a new Notification */ }
+    try {
+      const n = new Notification(title, noteOpts)
+      if (typeof onClick === 'function') {
+        n.onclick = (e) => { try { window.focus() } catch (_) {} ; onClick(e) }
+      }
+      return n
+    } catch (_) { return null }
+  }
+
+  // ----- API de prefs -----
+  function get (key) { return prefs[key] }
+  function set (key, val) {
+    if (!(key in defaults)) return
+    prefs[key] = !!val
+    _save()
+    _emit()
+  }
+
+  const ctrl = {
+    storageKey,
+    categories,
+    hasSound,
+    prefs,
+    get supported () { return _supported() },
+    permission,
+    requestPermission,
+    shouldNotify,
+    notify,
+    get,
+    set,
+    get soundEnabled () { return hasSound && prefs.sound !== false },
+    subscribe (fn) { subs.add(fn); return () => subs.delete(fn) },
+    _emit,
+    push: null,
+  }
+
+  // ----- Web Push opcional -----
+  if (push) {
+    ctrl.push = {
+      get supported () { return typeof push.supported === 'function' ? !!push.supported() : _supported() },
+      get enabled () { return typeof push.isEnabled === 'function' ? !!push.isEnabled() : false },
+      get busy () { return typeof push.busy === 'function' ? !!push.busy() : !!push.busy },
+      get error () { return typeof push.error === 'function' ? (push.error() || '') : (push.error || '') },
+      async enable () { const r = push.enable ? await push.enable() : false; _emit(); return r },
+      async disable () { const r = push.disable ? await push.disable() : false; _emit(); return r },
+      async ensureSubscribed () { if (push.ensureSubscribed) await push.ensureSubscribed(); _emit() },
+    }
+  }
+
+  return ctrl
+}
+
+/* ============================================================================
+ * 2) Helper de Web Push ligado al vault + proxy (transporte del ecosistema)
+ * ==========================================================================*/
+
+/**
+ * Provider de Web Push para createNotifications({ push }). Replica la lógica que
+ * tenían messenger/pronóstico: opt-in del usuario a recibir un "timbre" con la
+ * app cerrada; la subscription se liga a la MISMA pubkey del vault usada en
+ * identify, con un sobre firmado por el vault. El SW de la PWA muestra el aviso.
+ *
+ * @param {object} cfg
+ * @param {object|function} cfg.proxyClient  cliente proxy (o getter) con enablePush/disablePush.
+ * @param {object|function} cfg.identity     instancia Identity (o getter async) del vault.
+ * @param {string} cfg.storageKey            namespace del flag local (por app).
+ */
+export function createVaultPushProvider ({ proxyClient, identity, storageKey = 'default' } = {}) {
+  const LS_KEY = 'cc-push:' + storageKey
+  const getProxy = typeof proxyClient === 'function' ? proxyClient : () => proxyClient
+  const getId = typeof identity === 'function' ? identity : () => identity
+
+  let _enabled = isBrowser && localStorage.getItem(LS_KEY) === '1'
+  let _busy = false
+  let _error = ''
+
+  function supported () {
+    return isBrowser && typeof Notification !== 'undefined' &&
+      'serviceWorker' in navigator && 'PushManager' in window
+  }
+
+  async function _vault () {
+    const id = await getId()
+    const publicKey = id && id.me && id.me.publickey
+    if (!id || !publicKey) throw new Error('Vault de identidad no disponible')
+    return { publicKey, sign: (d) => id.signData(d) }
+  }
+
+  async function enable () {
+    _error = ''
+    if (!supported()) { _error = 'Tu navegador no soporta notificaciones push'; return false }
+    _busy = true
+    try {
+      const perm = await Notification.requestPermission()
+      if (perm !== 'granted') { _error = 'Permiso de notificaciones denegado'; return false }
+      const { publicKey, sign } = await _vault()
+      await getProxy().enablePush({ publicKey, sign })
+      _enabled = true
+      try { localStorage.setItem(LS_KEY, '1') } catch (_) {}
+      return true
+    } catch (e) { _error = (e && e.message) || String(e); return false }
+    finally { _busy = false }
+  }
+
+  async function disable () {
+    _error = ''
+    _busy = true
+    try {
+      let publicKey, sign
+      try { ({ publicKey, sign } = await _vault()) } catch (_) { /* igual cancelamos local */ }
+      await getProxy().disablePush({ publicKey, sign })
+      _enabled = false
+      try { localStorage.removeItem(LS_KEY) } catch (_) {}
+      return true
+    } catch (e) { _error = (e && e.message) || String(e); return false }
+    finally { _busy = false }
+  }
+
+  // Re-registra la subscription tras cada identify (los endpoints rotan).
+  // Silencioso: si el usuario no optó o el permiso no está, no hace nada.
+  async function ensureSubscribed () {
+    if (!_enabled || !supported() || Notification.permission !== 'granted') return
+    try {
+      const { publicKey, sign } = await _vault()
+      await getProxy().enablePush({ publicKey, sign })
+    } catch (e) { console.warn('[cc-notif] ensureSubscribed falló:', (e && e.message) || e) }
+  }
+
+  return {
+    supported,
+    isEnabled: () => _enabled,
+    busy: () => _busy,
+    error: () => _error,
+    enable,
+    disable,
+    ensureSubscribed,
+  }
+}
+
+/* ============================================================================
+ * 3) Web Component  ──  <closer-click-notifications>  (panel de ajustes)
+ * ==========================================================================*/
+
+const I18N = {
+  es: {
+    heading: 'Notificaciones',
+    intro: 'Elige qué quieres que te avise esta app.',
+    enable: 'Activar notificaciones',
+    enableHint: 'Permite que el navegador te muestre avisos.',
+    denied: 'Permiso bloqueado en el navegador. Actívalo en los ajustes del sitio.',
+    unsupported: 'Tu navegador no soporta notificaciones.',
+    sound: 'Sonido',
+    soundHint: 'Suena al notificar.',
+    push: 'Aviso con la app cerrada',
+    pushHint: 'Recibe un timbre aunque no tengas la pestaña abierta.',
+    pushDenied: '(Permiso bloqueado en el navegador.)',
+  },
+  en: {
+    heading: 'Notifications',
+    intro: 'Choose what this app may alert you about.',
+    enable: 'Enable notifications',
+    enableHint: 'Let the browser show you alerts.',
+    denied: 'Permission blocked in the browser. Enable it in the site settings.',
+    unsupported: 'Your browser does not support notifications.',
+    sound: 'Sound',
+    soundHint: 'Play a sound when notifying.',
+    push: 'Alerts when the app is closed',
+    pushHint: 'Get pinged even without the tab open.',
+    pushDenied: '(Permission blocked in the browser.)',
+  },
+}
+
+const STYLE = `
+  :host {
+    --_bg: var(--ccn-bg, #12161d);
+    --_bg-2: var(--ccn-bg-2, #171c24);
+    --_bg-3: var(--ccn-bg-3, #1f2630);
+    --_bg-4: var(--ccn-bg-4, #2a3550);
+    --_border: var(--ccn-border, rgba(255,255,255,0.16));
+    --_text: var(--ccn-text, #e9eef3);
+    --_muted: var(--ccn-muted, #94a1b0);
+    --_accent: var(--ccn-accent, #2dd4bf);
+    --_accent-text: var(--ccn-accent-text, #042038);
+    --_danger: var(--ccn-danger, #ef6b6b);
+    --_radius: var(--ccn-radius, 14px);
+    --_font: var(--ccn-font, system-ui, sans-serif);
+    display: block; color: var(--_text); font-family: var(--_font);
+  }
+  :host([modal]) .wrap {
+    position: fixed; inset: 0; z-index: 2147483000;
+    background: rgba(0,0,0,0.55);
+    display: flex; align-items: center; justify-content: center; padding: 16px;
+  }
+  .card {
+    background: var(--_bg); border: 1px solid var(--_border);
+    border-radius: var(--_radius); width: 100%; max-width: 460px;
+    display: flex; flex-direction: column; overflow: hidden;
+  }
+  :host(:not([modal])) .card { border: 0; border-radius: 0; background: transparent; }
+  .head {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 16px 20px; border-bottom: 1px solid var(--_border);
+  }
+  :host(:not([modal])) .head { padding: 0 0 12px; }
+  .title { font-weight: 700; font-size: 17px; margin: 0; }
+  .x { background: transparent; border: 0; font-size: 22px; cursor: pointer; color: var(--_muted); width: 32px; height: 32px; border-radius: 8px; line-height: 1; }
+  .x:hover { background: var(--_bg-3); color: var(--_text); }
+  .body { padding: 16px 20px; display: flex; flex-direction: column; }
+  :host(:not([modal])) .body { padding: 0; }
+  .intro { margin: 0 0 12px; font-size: 13px; color: var(--_muted); }
+
+  .cta {
+    display: flex; flex-direction: column; gap: 4px;
+    background: var(--_bg-2); border: 1px solid var(--_border);
+    border-radius: 10px; padding: 14px; margin-bottom: 12px;
+  }
+  .cta .btn {
+    align-self: flex-start; margin-top: 8px; font: inherit; font-weight: 700;
+    background: var(--_accent); color: var(--_accent-text); border: 0;
+    border-radius: 10px; padding: 9px 16px; cursor: pointer;
+  }
+  .cta .btn:hover { filter: brightness(1.05); }
+  .cta-label { font-weight: 600; font-size: 14px; }
+  .cta-hint { font-size: 12px; color: var(--_muted); }
+  .note { font-size: 12.5px; color: var(--_muted); }
+  .note.warn { color: var(--ccn-gold, #ffd166); }
+
+  .opt {
+    display: flex; align-items: center; gap: 14px;
+    padding: 12px 0; border-top: 1px solid var(--_border);
+  }
+  .opt:first-of-type { border-top: 0; }
+  .opt.push { margin-top: 4px; border-top: 1px solid var(--_border); }
+  .opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+  .opt-label { font-size: 14px; font-weight: 600; }
+  .opt-hint { font-size: 12px; color: var(--_muted); line-height: 1.4; }
+  .error { margin: 10px 0 0; font-size: 13px; color: var(--_danger); }
+
+  .switch {
+    flex-shrink: 0; width: 46px; height: 26px; border-radius: 999px; border: 0;
+    background: var(--_bg-4); position: relative; cursor: pointer;
+    transition: background 160ms ease-out; padding: 0;
+  }
+  .switch.on { background: var(--_accent); }
+  .switch[disabled] { opacity: .5; cursor: not-allowed; }
+  .knob {
+    position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
+    border-radius: 50%; background: #fff; transition: transform 160ms ease-out;
+  }
+  .switch.on .knob { transform: translateX(20px); }
+`
+
+function _txt (v, lang) {
+  if (v == null) return ''
+  if (typeof v === 'string') return v
+  return v[lang] || v.es || v.en || ''
+}
+
+// Fallback fuera del navegador (SSR / tests Node): permite importar el módulo
+// sin DOM. El custom element solo se registra en navegador (ver más abajo).
+const _HTMLElement = (typeof HTMLElement !== 'undefined') ? HTMLElement : class {}
+
+class CloserClickNotifications extends _HTMLElement {
+  static get observedAttributes () { return ['modal', 'heading', 'lang'] }
+
+  constructor () {
+    super()
+    this.attachShadow({ mode: 'open' })
+    this._ctrl = null
+    this._unsub = null
+    this._onClick = this._onClick.bind(this)
+  }
+
+  set controller (c) {
+    if (this._unsub) { this._unsub(); this._unsub = null }
+    this._ctrl = c || null
+    if (this._ctrl && typeof this._ctrl.subscribe === 'function') {
+      this._unsub = this._ctrl.subscribe(() => this._render())
+    }
+    this._render()
+  }
+  get controller () { return this._ctrl }
+
+  connectedCallback () { this._render() }
+  disconnectedCallback () { if (this._unsub) { this._unsub(); this._unsub = null } }
+  attributeChangedCallback () { this._render() }
+
+  _lang () {
+    const a = (this.getAttribute('lang') || 'auto').toLowerCase()
+    if (a === 'es' || a === 'en') return a
+    const nav = (isBrowser && navigator.language || 'es').slice(0, 2)
+    return nav === 'en' ? 'en' : 'es'
+  }
+
+  _esc (s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, c => (
+      { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
+    ))
+  }
+
+  _emit (type, detail) {
+    this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }))
+  }
+
+  async _onClick (e) {
+    const c = this._ctrl
+    if (!c) return
+    const t = e.target.closest('button[data-act]')
+    if (!t) {
+      // Click en el backdrop (solo modal): cerrar si fue directo sobre .wrap.
+      if (this.hasAttribute('modal') && e.target === e.currentTarget) this._emit('cc-notif-close', {})
+      return
+    }
+    const act = t.getAttribute('data-act')
+    if (act === 'close') { this._emit('cc-notif-close', {}) }
+    else if (act === 'enable') {
+      const p = await c.requestPermission()
+      this._emit('cc-notif-permission', { permission: p })
+    }
+    else if (act === 'toggle') {
+      const key = t.getAttribute('data-key')
+      const val = !c.get(key)
+      c.set(key, val)
+      this._emit('cc-notif-change', { key, value: val })
+    }
+    else if (act === 'push') {
+      if (!c.push) return
+      const turnOn = !c.push.enabled
+      if (turnOn) await c.push.enable(); else await c.push.disable()
+      this._emit('cc-notif-push', { enabled: c.push.enabled })
+    }
+  }
+
+  _switch (on, { key, act, disabled } = {}) {
+    const attrs = `data-act="${act}"${key ? ` data-key="${this._esc(key)}"` : ''}${disabled ? ' disabled' : ''}`
+    return `<button type="button" class="switch${on ? ' on' : ''}" role="switch" aria-checked="${on ? 'true' : 'false'}" ${attrs}><span class="knob"></span></button>`
+  }
+
+  _render () {
+    const sr = this.shadowRoot
+    const c = this._ctrl
+    const lang = this._lang()
+    const t = I18N[lang]
+    const isModal = this.hasAttribute('modal')
+    const heading = this.getAttribute('heading') || t.heading
+
+    if (!c) { sr.innerHTML = `<style>${STYLE}</style><div class="wrap"><div class="card"></div></div>`; return }
+
+    const perm = c.permission()
+    const supported = c.supported
+
+    let inner = ''
+    if (!supported || perm === 'unsupported') {
+      inner += `<p class="note warn">${this._esc(t.unsupported)}</p>`
+    } else if (perm === 'denied') {
+      inner += `<p class="note warn">${this._esc(t.denied)}</p>`
+    } else if (perm === 'default') {
+      inner += `<div class="cta">
+        <span class="cta-label">${this._esc(t.enable)}</span>
+        <span class="cta-hint">${this._esc(t.enableHint)}</span>
+        <button type="button" class="btn" data-act="enable">${this._esc(t.enable)}</button>
+      </div>`
+    }
+
+    // Categorías (se guardan aunque el permiso no esté concedido).
+    for (const cat of c.categories) {
+      inner += `<div class="opt">
+        <div class="opt-text">
+          <span class="opt-label">${this._esc(_txt(cat.label, lang))}</span>
+          ${cat.hint ? `<span class="opt-hint">${this._esc(_txt(cat.hint, lang))}</span>` : ''}
+        </div>
+        ${this._switch(c.get(cat.key) !== false, { key: cat.key, act: 'toggle' })}
+      </div>`
+    }
+
+    // Sonido
+    if (c.hasSound) {
+      inner += `<div class="opt">
+        <div class="opt-text">
+          <span class="opt-label">${this._esc(t.sound)}</span>
+          <span class="opt-hint">${this._esc(t.soundHint)}</span>
+        </div>
+        ${this._switch(c.soundEnabled, { key: 'sound', act: 'toggle' })}
+      </div>`
+    }
+
+    // Push (app cerrada)
+    if (c.push && c.push.supported) {
+      const pDenied = perm === 'denied'
+      inner += `<div class="opt push">
+        <div class="opt-text">
+          <span class="opt-label">${this._esc(t.push)}</span>
+          <span class="opt-hint">${this._esc(t.pushHint)}${pDenied ? ' ' + this._esc(t.pushDenied) : ''}</span>
+        </div>
+        ${this._switch(c.push.enabled, { act: 'push', disabled: c.push.busy || pDenied })}
+      </div>`
+      if (c.push.error) inner += `<p class="error">${this._esc(c.push.error)}</p>`
+    }
+
+    sr.innerHTML = `<style>${STYLE}</style>
+      <div class="wrap">
+        <div class="card" data-card>
+          <div class="head">
+            <h2 class="title">${this._esc(heading)}</h2>
+            ${isModal ? '<button type="button" class="x" data-act="close" aria-label="×">×</button>' : ''}
+          </div>
+          <div class="body">
+            <p class="intro">${this._esc(t.intro)}</p>
+            ${inner}
+          </div>
+        </div>
+      </div>`
+
+    // Un solo listener en .wrap: los botones se resuelven por data-act; el click
+    // directo en el backdrop (e.target === .wrap) cierra (solo en modal).
+    sr.querySelector('.wrap').addEventListener('click', this._onClick)
+  }
+}
+
+if (isBrowser && !customElements.get('closer-click-notifications')) {
+  customElements.define('closer-click-notifications', CloserClickNotifications)
+}
+
+export { CloserClickNotifications }
+export default CloserClickNotifications