@dotrino/qr 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,102 @@
+# @dotrino/qr
+
+> **Parte del ecosistema [Dotrino](https://dotrino.com).** Dotrino es un ecosistema de aplicaciones centradas en la privacidad de los datos: tu información es tuya, y las decisiones sobre ella también — qué compartes, con quién, cuándo y por qué. Sin anuncios, sin cookies, sin rastreo de datos, sin vender tu identidad a nadie.
+
+El **QR del ecosistema**, en un solo sitio: dos Web Components (Shadow DOM,
+bilingües es/en) que cualquier app puede usar tal cual.
+
+- **`<dotrino-qr>`** — muestra un QR.
+- **`<dotrino-qr-scan>`** — lo lee, con la cámara o desde una foto.
+
+Todo ocurre **en el dispositivo**: el QR se dibuja en el cliente y los fotogramas
+de la cámara se decodifican en la propia página. Nada sale a ninguna red — lo que
+va en un QR del ecosistema suele ser del usuario (un enlace con `#fragment`, un
+código de emparejamiento), así que mandarlo a una API de imágenes ajena sería
+justo lo contrario de lo que promete el ecosistema.
+
+## Instalación
+
+```bash
+npm i @dotrino/qr
+```
+
+## Uso
+
+```js
+import '@dotrino/qr'
+```
+
+### Mostrar
+
+```html
+<dotrino-qr
+  value="https://messenger.dotrino.com/#add=K7M2Q9"
+  size="200"
+  caption="K7M2Q9"></dotrino-qr>
+```
+
+| Atributo / propiedad | Qué hace |
+|---|---|
+| `value` | lo que se codifica. Sin valor no se dibuja nada. |
+| `size` | lado en píxeles (por defecto 200). |
+| `ecc` | corrección de errores `L`\|`M`\|`Q`\|`H` (por defecto `M`). |
+| `caption` | texto monoespaciado bajo el QR (el código legible, normalmente). |
+
+Los módulos van **siempre negro sobre blanco** con zona de silencio: un QR
+tematizado con los colores de la app se vuelve ilegible para media cámara. Lo que
+sí se tematiza es la tarjeta (`--dqr-pad`, `--dqr-radius`, `--dqr-border`,
+`--dqr-caption-size`, `--dqr-caption-color`).
+
+### Leer
+
+```html
+<dotrino-qr-scan lang="es"></dotrino-qr-scan>
+```
+
+```js
+const scan = document.querySelector('dotrino-qr-scan')
+scan.addEventListener('dotrino-qr-scanned', (e) => { console.log(e.detail.text); scan.open = false })
+scan.addEventListener('dotrino-qr-cancelled', () => { scan.open = false })
+scan.open = true            // pide la cámara y abre el modal
+```
+
+| Evento | Cuándo | `detail` |
+|---|---|---|
+| `dotrino-qr-scanned` | leyó un QR (cámara o foto) | `{ text }` |
+| `dotrino-qr-cancelled` | el usuario cerró | — |
+| `dotrino-qr-error` | no hubo cámara, o la foto no tenía QR | `{ code: 'camera' \| 'no-qr' }` |
+
+Atributos: `open` (booleano) y `lang` (`es`\|`en`). Variables de tema: `--dqr-bg`,
+`--dqr-text`, `--dqr-muted`, `--dqr-border`, `--dqr-accent`, `--dqr-overlay`,
+`--dqr-radius`, `--dqr-shadow`, `--dqr-z`.
+
+**La cámara se apaga sola** al acertar, al cerrar y al sacar el elemento del DOM.
+Si el navegador no da cámara (permiso denegado, contexto no seguro, un ordenador
+sin ella), el modal lo dice y deja el camino de la foto abierto en vez de quedarse
+en negro.
+
+### Sin componentes
+
+```js
+import { qrSvg } from '@dotrino/qr/svg'          // string SVG, sin tocar el DOM
+import { scanImageFile } from '@dotrino/qr'      // File|Blob → texto | null
+```
+
+## Por qué existe
+
+Estaba escrito dos veces —la consola de `dotrino-vault` y la app
+`dotrino-qrreader`— y el messenger iba a ser la tercera. Un QR mal generado o una
+cámara que se queda encendida es el mismo bug repetido en tres sitios, así que
+vive aquí (regla del ecosistema: si falta algo, se extiende el paquete
+compartido; no se copia dentro de la app).
+
+**Deuda declarada:** `dotrino-vault/web` y `dotrino-qrreader` siguen con su copia
+propia; migran a este paquete.
+
+## Dependencias
+
+`qrcode-generator` (dibujar) y `jsqr` (leer). Ambas puras, sin red.
+
+## Licencia
+
+MIT

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@dotrino/qr",
+  "version": "0.1.0",
+  "description": "UI compartida de Dotrino para códigos QR: <dotrino-qr> (mostrar) y <dotrino-qr-scan> (leer con la cámara o desde una foto). Todo en el cliente, sin servicios de terceros: lo que se codifica puede ser del usuario. Shadow DOM, sin cookies, bilingüe es/en.",
+  "type": "module",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js"
+    },
+    "./svg": {
+      "import": "./src/svg.js"
+    }
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "./src/index.js",
+    "./src/show.js",
+    "./src/scan.js"
+  ],
+  "dependencies": {
+    "jsqr": "1.4.0",
+    "qrcode-generator": "1.4.4"
+  },
+  "keywords": [
+    "dotrino",
+    "qr",
+    "scanner",
+    "web-component",
+    "camera"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/imdotrino/dotrino-qr.git"
+  },
+  "devDependencies": {
+    "typescript": "5.9.3"
+  },
+  "scripts": {
+    "type-check": "tsc --noEmit"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,14 @@
+export declare function qrSvg (text: string, opts?: { ecc?: 'L' | 'M' | 'Q' | 'H', margin?: number }): string
+
+export declare class DotrinoQr extends HTMLElement {
+  value: string
+  size: number
+  caption: string
+}
+
+export declare class DotrinoQrScan extends HTMLElement {
+  open: boolean
+  lang: 'es' | 'en'
+}
+
+export declare function scanImageFile (file: Blob): Promise<string | null>

package/src/index.js

@@ -0,0 +1,14 @@
+/**
+ * @dotrino/qr — el QR del ecosistema Dotrino, en un solo sitio.
+ *
+ *   import '@dotrino/qr'
+ *   <dotrino-qr value="..."></dotrino-qr>
+ *   <dotrino-qr-scan open></dotrino-qr-scan>
+ *
+ * Se genera y se lee EN EL DISPOSITIVO: lo que va en un QR suele ser del usuario
+ * (un enlace con #fragment, un código de emparejamiento), así que no toca ninguna
+ * API de imágenes ajena ni sube un fotograma a ninguna parte.
+ */
+export { qrSvg } from './svg.js'
+export { DotrinoQr } from './show.js'
+export { DotrinoQrScan, scanImageFile } from './scan.js'

package/src/scan.js

@@ -0,0 +1,222 @@
+/**
+ * <dotrino-qr-scan> — lee un QR con la cámara, o desde una foto si no hay cámara
+ * (o el navegador no la da). La mitad "leer" del par; la otra es <dotrino-qr>.
+ *
+ *   const el = document.querySelector('dotrino-qr-scan')
+ *   el.lang = 'es'
+ *   el.open = true
+ *   el.addEventListener('dotrino-qr-scanned', (e) => console.log(e.detail.text))
+ *   el.addEventListener('dotrino-qr-cancelled', () => { el.open = false })
+ *
+ * Todo pasa en el dispositivo: los fotogramas se decodifican aquí y no sale nada
+ * a ninguna red. La cámara se apaga al cerrar, al acertar y al salir del DOM —
+ * una cámara encendida que nadie mira es un fallo, no un detalle.
+ *
+ * Eventos: 'dotrino-qr-scanned' { text }, 'dotrino-qr-cancelled',
+ *          'dotrino-qr-error' { code: 'camera' | 'no-qr' }.
+ */
+import jsQR from 'jsqr'
+
+const I18N = {
+  es: {
+    heading: 'Escanear un QR',
+    hint: 'Apunta la cámara al código.',
+    photo: '🖼 Usar una foto',
+    cancel: 'Cancelar',
+    camErr: 'No se pudo abrir la cámara. Puedes usar una foto del código.',
+    noQr: 'En esa imagen no hay ningún QR.'
+  },
+  en: {
+    heading: 'Scan a QR',
+    hint: 'Point the camera at the code.',
+    photo: '🖼 Use a photo',
+    cancel: 'Cancel',
+    camErr: 'The camera could not be opened. You can use a photo of the code instead.',
+    noQr: 'There is no QR in that image.'
+  }
+}
+
+const CSS = `
+  :host { font-family: var(--dqr-font-ui, system-ui, -apple-system, Segoe UI, Roboto, sans-serif); }
+  .overlay {
+    position: fixed; inset: 0; z-index: var(--dqr-z, 1000);
+    background: var(--dqr-overlay, rgba(0,0,0,.7));
+    display: flex; align-items: center; justify-content: center; padding: 1rem;
+  }
+  .modal {
+    background: var(--dqr-bg, #fff); color: var(--dqr-text, #1b1b1b);
+    border-radius: var(--dqr-radius, 14px);
+    box-shadow: var(--dqr-shadow, 0 18px 48px rgba(0,0,0,.35));
+    width: min(420px, 100%); overflow: hidden;
+  }
+  h2 { margin: 0; padding: 14px 16px; font-size: 16px; border-bottom: 1px solid var(--dqr-border, rgba(0,0,0,.12)); }
+  .stage { position: relative; background: #000; aspect-ratio: 1 / 1; }
+  video { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .frame {
+    position: absolute; inset: 12%;
+    border: 3px solid var(--dqr-accent, #c0392b); border-radius: 12px;
+    box-shadow: 0 0 0 100vmax rgba(0,0,0,.25);
+    pointer-events: none;
+  }
+  .body { padding: 12px 16px 16px; }
+  .hint { margin: 0 0 10px; font-size: 13px; color: var(--dqr-muted, #6b6b6b); }
+  .err { margin: 0 0 10px; font-size: 13px; color: var(--dqr-accent, #c0392b); }
+  .row { display: flex; gap: 8px; justify-content: space-between; }
+  button, .file {
+    font: inherit; font-size: 14px; cursor: pointer;
+    padding: 9px 14px; border-radius: 9px;
+    border: 1px solid var(--dqr-border, rgba(0,0,0,.12));
+    background: var(--dqr-btn-bg, transparent); color: inherit;
+  }
+  button:hover, .file:hover { border-color: var(--dqr-accent, #c0392b); }
+  input[type=file] { display: none; }
+`
+
+/** Decodifica un QR de un archivo de imagen. Devuelve el texto o null. */
+export function scanImageFile (file) {
+  return new Promise((resolve) => {
+    const img = new Image()
+    const url = URL.createObjectURL(file)
+    img.onload = () => {
+      try {
+        const c = document.createElement('canvas')
+        c.width = img.naturalWidth; c.height = img.naturalHeight
+        const ctx = c.getContext('2d')
+        ctx.drawImage(img, 0, 0)
+        const d = ctx.getImageData(0, 0, c.width, c.height)
+        resolve(jsQR(d.data, d.width, d.height)?.data || null)
+      } catch (_) { resolve(null) }
+      URL.revokeObjectURL(url)
+    }
+    img.onerror = () => { URL.revokeObjectURL(url); resolve(null) }
+    img.src = url
+  })
+}
+
+export class DotrinoQrScan extends HTMLElement {
+  static get observedAttributes () { return ['open', 'lang'] }
+
+  #stream = null
+  #raf = null
+
+  constructor () {
+    super()
+    this.attachShadow({ mode: 'open' })
+  }
+
+  get open () { return this.hasAttribute('open') }
+  set open (v) { if (v) this.setAttribute('open', ''); else this.removeAttribute('open') }
+
+  get lang () { return this.getAttribute('lang') === 'en' ? 'en' : 'es' }
+  set lang (v) { this.setAttribute('lang', v === 'en' ? 'en' : 'es') }
+
+  attributeChangedCallback (name) {
+    this.#render()
+    if (name === 'open') { if (this.open) this.#start(); else this.#stop() }
+  }
+
+  connectedCallback () { this.#render(); if (this.open) this.#start() }
+  disconnectedCallback () { this.#stop() }
+
+  #render () {
+    const t = I18N[this.lang]
+    const root = this.shadowRoot
+    if (!this.open) { root.innerHTML = ''; return }
+    // Se reconstruye solo al abrir: mientras está cerrado no hay <video> vivo.
+    if (root.querySelector('.overlay')) {
+      root.querySelector('h2').textContent = t.heading
+      root.querySelector('.hint').textContent = t.hint
+      root.querySelector('.file').textContent = t.photo
+      root.querySelector('.cancel').textContent = t.cancel
+      return
+    }
+    root.innerHTML = `
+      <style>${CSS}</style>
+      <div class="overlay" part="overlay">
+        <div class="modal" part="modal">
+          <h2>${t.heading}</h2>
+          <div class="stage"><video playsinline muted autoplay></video><div class="frame"></div></div>
+          <div class="body">
+            <p class="hint">${t.hint}</p>
+            <p class="err" hidden></p>
+            <div class="row">
+              <label class="file">${t.photo}<input type="file" accept="image/*"></label>
+              <button class="cancel" type="button">${t.cancel}</button>
+            </div>
+          </div>
+        </div>
+      </div>`
+    root.querySelector('.cancel').addEventListener('click', () => {
+      this.#stop()
+      this.dispatchEvent(new CustomEvent('dotrino-qr-cancelled', { bubbles: true, composed: true }))
+    })
+    root.querySelector('input[type=file]').addEventListener('change', async (ev) => {
+      const f = ev.target.files?.[0]
+      ev.target.value = ''
+      if (!f) return
+      const text = await scanImageFile(f)
+      if (text) this.#hit(text)
+      else this.#fail('no-qr', I18N[this.lang].noQr)
+    })
+  }
+
+  #error (msg) {
+    const el = this.shadowRoot?.querySelector('.err')
+    if (!el) return
+    el.textContent = msg || ''
+    el.hidden = !msg
+  }
+
+  #fail (code, msg) {
+    this.#error(msg)
+    this.dispatchEvent(new CustomEvent('dotrino-qr-error', { detail: { code }, bubbles: true, composed: true }))
+  }
+
+  #hit (text) {
+    this.#stop()
+    this.dispatchEvent(new CustomEvent('dotrino-qr-scanned', { detail: { text }, bubbles: true, composed: true }))
+  }
+
+  async #start () {
+    const video = this.shadowRoot?.querySelector('video')
+    if (!video || this.#stream) return
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d', { willReadFrequently: true })
+    const tick = () => {
+      if (!this.#stream) return
+      if (video.readyState >= 2 && video.videoWidth) {
+        canvas.width = video.videoWidth; canvas.height = video.videoHeight
+        try {
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+          const d = ctx.getImageData(0, 0, canvas.width, canvas.height)
+          const r = jsQR(d.data, d.width, d.height)
+          if (r?.data) return this.#hit(r.data)
+        } catch (_) {}
+      }
+      this.#raf = requestAnimationFrame(tick)
+    }
+    try {
+      this.#stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
+      // Cerrar mientras se pedía permiso deja un stream huérfano: se apaga aquí.
+      if (!this.open) { this.#stop(); return }
+      video.srcObject = this.#stream
+      await video.play().catch(() => {})
+      this.#raf = requestAnimationFrame(tick)
+    } catch (e) {
+      this.#stream = null
+      console.warn('[dotrino-qr-scan] camera unavailable:', e?.name || e)
+      this.#fail('camera', I18N[this.lang].camErr)
+    }
+  }
+
+  #stop () {
+    if (this.#raf) { cancelAnimationFrame(this.#raf); this.#raf = null }
+    if (this.#stream) { this.#stream.getTracks().forEach((tr) => tr.stop()); this.#stream = null }
+    const video = this.shadowRoot?.querySelector('video')
+    if (video) video.srcObject = null
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('dotrino-qr-scan')) {
+  customElements.define('dotrino-qr-scan', DotrinoQrScan)
+}

package/src/show.js

@@ -0,0 +1,84 @@
+/**
+ * <dotrino-qr> — enseña un QR. La mitad "mostrar" del par; la otra es
+ * <dotrino-qr-scan>.
+ *
+ *   <dotrino-qr value="https://messenger.dotrino.com/#add=K7M2Q9" size="200"></dotrino-qr>
+ *
+ * Atributos/propiedades: value, size (px), ecc ('L'|'M'|'Q'|'H'), caption.
+ * El QR se pinta SIEMPRE negro sobre blanco (ver svg.js): la tarjeta se tematiza
+ * con las variables --dqr-*, los módulos no.
+ */
+import { qrSvg } from './svg.js'
+
+const CSS = `
+  :host { display: inline-block; }
+  .card {
+    background: #fff;
+    padding: var(--dqr-pad, 10px);
+    border-radius: var(--dqr-radius, 10px);
+    border: 1px solid var(--dqr-border, rgba(0,0,0,.12));
+    line-height: 0;
+  }
+  .card svg { display: block; width: 100%; height: 100%; }
+  .caption {
+    margin-top: 8px;
+    font-family: var(--dqr-font, ui-monospace, SFMono-Regular, Menlo, monospace);
+    font-size: var(--dqr-caption-size, 20px);
+    letter-spacing: 3px;
+    text-align: center;
+    color: var(--dqr-caption-color, inherit);
+    line-height: 1.2;
+  }
+`
+
+export class DotrinoQr extends HTMLElement {
+  static get observedAttributes () { return ['value', 'size', 'ecc', 'caption'] }
+
+  constructor () {
+    super()
+    this.attachShadow({ mode: 'open' })
+    this.shadowRoot.innerHTML = `<style>${CSS}</style><div class="card"></div><div class="caption" hidden></div>`
+  }
+
+  connectedCallback () { this.#render() }
+  attributeChangedCallback () { this.#render() }
+
+  get value () { return this.getAttribute('value') || '' }
+  set value (v) { if (v == null) this.removeAttribute('value'); else this.setAttribute('value', v) }
+
+  get size () { return Number(this.getAttribute('size')) || 200 }
+  set size (v) { this.setAttribute('size', String(v)) }
+
+  get caption () { return this.getAttribute('caption') || '' }
+  set caption (v) { if (v == null) this.removeAttribute('caption'); else this.setAttribute('caption', v) }
+
+  #render () {
+    const root = this.shadowRoot
+    if (!root) return
+    const card = root.querySelector('.card')
+    const cap = root.querySelector('.caption')
+    const value = this.value
+    // Sin valor no se dibuja un QR vacío: un QR que no lleva a ninguna parte se
+    // escanea igual y deja al usuario mirando un error que no es suyo.
+    if (!value) { card.innerHTML = ''; card.hidden = true; cap.hidden = true; return }
+    card.hidden = false
+    const px = this.size
+    card.style.width = px + 'px'
+    card.style.height = px + 'px'
+    const ecc = (this.getAttribute('ecc') || 'M').toUpperCase()
+    try {
+      card.innerHTML = qrSvg(value, { ecc: ['L', 'M', 'Q', 'H'].includes(ecc) ? ecc : 'M' })
+    } catch (e) {
+      // Pasa cuando el texto no cabe ni en la versión 40. Es un fallo del llamador
+      // y se dice, no se pinta medio QR.
+      card.innerHTML = ''
+      console.error('[dotrino-qr] no se pudo generar el QR:', e?.message || e)
+    }
+    cap.textContent = this.caption
+    cap.hidden = !this.caption
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('dotrino-qr')) {
+  customElements.define('dotrino-qr', DotrinoQr)
+}

package/src/svg.js

@@ -0,0 +1,41 @@
+/**
+ * qrSvg — dibuja un QR como SVG en el cliente.
+ *
+ * Sin servicios de terceros a propósito: lo que se codifica suele ser del usuario
+ * (un enlace con #fragment, un código de emparejamiento) y mandarlo a una API de
+ * imágenes lo pondría en un servidor ajeno, que es justo lo que el ecosistema evita.
+ *
+ * Negro sobre blanco con zona de silencio, pase lo que pase con el tema de la app:
+ * un QR con poco contraste no lo lee ninguna cámara.
+ */
+import qrcode from 'qrcode-generator'
+
+// La librería trae dos codificadores de texto; el de UTF-8 es el que respeta los
+// acentos y la eñe. Sin esto, un enlace con tilde se lee como basura.
+try { qrcode.stringToBytes = qrcode.stringToBytesFuncs['UTF-8'] } catch (_) {}
+
+/**
+ * @param {string} text        lo que se codifica
+ * @param {object} [opts]
+ * @param {'L'|'M'|'Q'|'H'} [opts.ecc='M']  corrección de errores
+ * @param {number} [opts.margin=4]          zona de silencio, en módulos
+ * @returns {string} SVG listo para inyectar
+ */
+export function qrSvg (text, { ecc = 'M', margin = 4 } = {}) {
+  const qr = qrcode(0, ecc)
+  qr.addData(String(text ?? ''))
+  qr.make()
+  const n = qr.getModuleCount()
+  const dim = n + margin * 2
+  let rects = ''
+  for (let r = 0; r < n; r++) {
+    for (let c = 0; c < n; c++) {
+      if (qr.isDark(r, c)) rects += `<rect x="${c + margin}" y="${r + margin}" width="1" height="1"/>`
+    }
+  }
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${dim} ${dim}" ` +
+    'shape-rendering="crispEdges" role="img" aria-label="QR">' +
+    `<rect width="${dim}" height="${dim}" fill="#fff"/><g fill="#000">${rects}</g></svg>`
+}
+
+export default qrSvg