@closerclick/closer-click-profile 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,119 @@
+# @closerclick/closer-click-profile
+
+Web Component (`<closer-click-profile>`) compartido del ecosistema **Closer
+Click**: la tarjeta de **perfil + reputación** de un peer, idéntica en todas las
+apps (messenger, eco, trueque, …). Autohosteado, Shadow DOM, **sin JS de
+terceros ni cookies**. Bilingüe es/en. Temable solo por CSS custom properties.
+
+Muestra:
+
+- **Identidad** — avatar (iniciales + color determinista por pubkey), nombre,
+  pubkey corta, "conocido desde".
+- **Mi calificación** (modo `edit`) — confianza + afinidad (estrellas) + notas
+  privadas.
+- **Web of Trust** — endosos firmados de mi red (lista + promedio).
+- **Reputación de la red** — `reputationOf` ponderada por mi web-of-trust
+  (anti-sybil), confianza/afinidad en %.
+
+## Filosofía / decisiones
+
+- **UI compartida = Web Component** (el ecosistema es mixto Vue/vanilla), no un
+  componente Vue. Mismo patrón que `@closerclick/closer-click-support`.
+- **Sin acoplar datos**: el componente no depende de identity ni reputation. La
+  app inyecta un `provider` (adapter). Para los paquetes estándar hay un helper
+  de 1 línea: `createVaultProfileProvider({ identity, reputation })`.
+- **Tema por CSS vars `--ccp-*`** (defaults = paleta del messenger). Cada app
+  cambia solo los colores; el layout/comportamiento es idéntico.
+
+## Uso (Vue)
+
+```js
+import '@closerclick/closer-click-profile'
+import { createVaultProfileProvider } from '@closerclick/closer-click-profile'
+```
+
+```html
+<closer-click-profile
+  modal
+  :pubkey="pk"
+  :name="nick"
+  :since="firstSeen"
+  :online="isOnline"
+  @cc-profile-rate="onRated"
+  @cc-profile-close="close"
+  @cc-profile-refresh="askPeers" />
+```
+
+```js
+// tras montar, setear la propiedad JS `provider` (objeto, no atributo):
+el.provider = createVaultProfileProvider({ identity, reputation })
+```
+
+> En Vue 3, configurá `isCustomElement: (tag) => tag.startsWith('closer-click-')`
+> en `compilerOptions` del plugin de Vue.
+
+## Uso (vanilla)
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@closerclick/closer-click-profile@0.1/src/index.js"></script>
+<closer-click-profile pubkey="..." name="Ada"></closer-click-profile>
+<script type="module">
+  const el = document.querySelector('closer-click-profile')
+  el.provider = createVaultProfileProvider({ identity, reputation })
+</script>
+```
+
+## API
+
+### Atributos
+
+| Atributo  | Descripción |
+|-----------|-------------|
+| `pubkey`  | JWK string del sujeto (requerido) |
+| `name`    | nombre/nick a mostrar |
+| `since`   | timestamp ms del primer contacto ("conocido desde") |
+| `online`  | booleano: muestra el punto de en-línea |
+| `mode`    | `edit` (default) \| `view` (solo lectura, sin editor ni footer) |
+| `modal`   | booleano: envuelve en backdrop + header/footer |
+| `heading` | título del header (override) |
+| `lang`    | `es` \| `en` \| `auto` (default `auto`) |
+
+### Propiedad JS
+
+- `.provider: ProfileProvider` — adapter de datos. Métodos (todos opcionales):
+  `getMyRating`, `getEndorsements`, `getCloudReputation`, `rate`.
+
+### Métodos
+
+- `el.reload()` — recarga los datos del provider.
+
+### Eventos (bubbles, composed)
+
+- `cc-profile-rate` — `detail { pubkey, indicators, notes }` (tras guardar OK).
+- `cc-profile-close`.
+- `cc-profile-refresh` — `detail { pubkey }` (botón ↻ del Web of Trust; la app
+  puede difundir un `RATING_QUERY` a sus contactos).
+
+## Tema (CSS custom properties)
+
+Todas con fallback a las vars del messenger (`--bg-1`, `--accent`, …) y luego a
+un default. Override seteándolas en el elemento o un ancestro:
+
+```css
+closer-click-profile {
+  --ccp-bg: #fff;
+  --ccp-accent: #6c5ce7;
+  --ccp-gold: #f1c40f;
+  --ccp-affinity: #00b894;
+  --ccp-radius: 12px;
+}
+```
+
+`--ccp-bg`, `--ccp-bg-2..4`, `--ccp-border`, `--ccp-text`, `--ccp-muted`,
+`--ccp-accent`, `--ccp-accent-2`, `--ccp-gold`, `--ccp-derived`, `--ccp-online`,
+`--ccp-affinity`, `--ccp-radius`, `--ccp-font`, `--ccp-font-headline`,
+`--ccp-font-mono`.
+
+## Licencia
+
+MIT

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@closerclick/closer-click-profile",
+  "version": "0.1.0",
+  "description": "Web Component (custom element) <closer-click-profile> reutilizable por cualquier app del ecosistema Closer Click: tarjeta de perfil + reputación (confianza/afinidad, web-of-trust, reputación de la red). Autohosteado, Shadow DOM, temable por CSS vars.",
+  "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"
+  ],
+  "keywords": [
+    "closer-click",
+    "web-component",
+    "custom-element",
+    "profile",
+    "reputation",
+    "web-of-trust",
+    "cross-app"
+  ],
+  "author": "seyacat",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/closerclick/closer-click-profile.git"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,54 @@
+export interface Endorsement {
+  ratedBy?: string
+  rating?: number
+  issuedAt?: number
+}
+
+export interface CloudIndicator {
+  score: number | null
+  confidence: number
+  trustedCount: number
+}
+
+export interface CloudReputation {
+  score: number | null
+  confidence: number
+  trustedCount: number
+  rawCount: number
+  txBoundCount: number
+  indicators?: Record<string, CloudIndicator>
+  samples?: unknown[]
+}
+
+export interface MyRating {
+  confianza: number
+  afinidad: number
+  notes: string
+}
+
+/** Adapter de datos que la app inyecta en `<closer-click-profile>.provider`. */
+export interface ProfileProvider {
+  getMyRating?(pubkey: string): Promise<MyRating>
+  getEndorsements?(pubkey: string): Promise<{ endorsements: Endorsement[]; derived: number | null }>
+  getCloudReputation?(pubkey: string): Promise<CloudReputation | null>
+  rate?(pubkey: string, indicators: Record<string, number>, notes: string): Promise<unknown>
+}
+
+export class CloserClickProfile extends HTMLElement {
+  provider: ProfileProvider | null
+  reload(): Promise<void>
+}
+
+/** Cablea un provider a los paquetes estándar del ecosistema (1 línea). */
+export function createVaultProfileProvider(cfg: {
+  identity: any
+  reputation: any
+}): ProfileProvider
+
+export default CloserClickProfile
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'closer-click-profile': CloserClickProfile
+  }
+}

package/src/index.js

@@ -0,0 +1,734 @@
+/**
+ * @closerclick/closer-click-profile
+ *
+ * Web Component (custom element) `<closer-click-profile>` reutilizable por
+ * CUALQUIER app del ecosistema Closer Click (Vue o vanilla). Muestra la tarjeta
+ * de PERFIL + REPUTACIÓN de un peer, unificada para todas las apps:
+ *   - Identidad: avatar (iniciales + color determinista por pubkey), nombre,
+ *     pubkey corta, "conocido desde".
+ *   - Mi calificación (modo edit): confianza + afinidad (estrellas) + notas.
+ *   - Web of Trust: endosos firmados de mi red (lista + promedio).
+ *   - Reputación de la red: `reputationOf` ponderada por mi web-of-trust
+ *     (anti-sybil), con confianza/afinidad en %.
+ *
+ * Filosofía Closer Click: NO carga JS de terceros ni cookies. 100% autohosteado
+ * (Shadow DOM). Los DATOS no se acoplan: la app inyecta un `provider` (adapter)
+ * — usá `createVaultProfileProvider({ identity, reputation })` para cablearlo en
+ * una línea a los paquetes estándar del ecosistema.
+ *
+ * TEMA: todo el color sale de CSS custom properties `--ccp-*` seteables en el
+ * elemento (o heredadas). Defaults = paleta del messenger. Así cada app cambia
+ * SOLO los colores; el layout/comportamiento es idéntico.
+ *
+ * Uso (Vue):
+ *   import '@closerclick/closer-click-profile'
+ *   import { createVaultProfileProvider } from '@closerclick/closer-click-profile'
+ *   <closer-click-profile modal :pubkey="pk" :name="nick"
+ *     @cc-profile-rate="onRated" @cc-profile-close="close" />
+ *   // en mounted: el.provider = createVaultProfileProvider({ identity, reputation })
+ *
+ * API:
+ *   Atributos:
+ *     pubkey    JWK string del sujeto (requerido)
+ *     name      nombre/nick a mostrar
+ *     since     timestamp ms del primer contacto ("conocido desde")
+ *     online    booleano: muestra el punto de en-línea
+ *     mode      'edit' (default) | 'view' (solo lectura, sin editor ni footer)
+ *     modal     booleano: envuelve la tarjeta en backdrop + header/footer
+ *     heading   título del header (override)
+ *     lang      'es' | 'en' | 'auto' (default 'auto')
+ *   Propiedad JS:
+ *     .provider  adapter de datos (ver createVaultProfileProvider)
+ *   Métodos:    el.reload()
+ *   Eventos (bubbles, composed):
+ *     'cc-profile-rate'    detail { pubkey, indicators, notes }  (tras guardar)
+ *     'cc-profile-close'
+ *     'cc-profile-refresh' detail { pubkey }  (botón ↻ del web-of-trust)
+ */
+
+const I18N = {
+  es: {
+    headingEdit: 'Calificar contacto',
+    headingView: 'Perfil',
+    contact: 'Contacto',
+    knownSince: 'Conocido desde',
+    confianza: 'Confianza',
+    confianzaHint: '(¿qué tan confiable/íntegro es?)',
+    afinidad: 'Afinidad',
+    afinidadHint: '(me interesa / sigo / conozco)',
+    of5: '/ 5',
+    remove: 'Quitar',
+    notes: 'Notas privadas (solo para ti)',
+    notesPh: 'ej. Lo conocí jugando ajedrez. Cumple con su palabra.',
+    wot: 'Lo que dicen otros (Web of Trust)',
+    wotEmpty: 'Sin endosos firmados todavía.',
+    endorsements: 'endosos',
+    cloud: 'Reputación de la red',
+    cloudAsking: 'Consultando…',
+    cloudUnavailable: 'Registro no disponible.',
+    cloudEmpty: 'Sin reputación en el registro todavía.',
+    ofYourNet: 'de tu red',
+    withReceipt: 'con recibo',
+    weak1: 'reseña(s),',
+    weak2: 'ninguna de tu red',
+    weak3: '— señal débil.',
+    privacy: '⌬ Tu rating se firma con tu clave privada, se comparte con peers de confianza y se publica en el registro de reputación.',
+    cancel: 'Cancelar',
+    save: 'Guardar calificación',
+    saving: 'Guardando…',
+    close: 'Cerrar',
+    saveError: 'Error al guardar',
+    labels: ['Sin calificar', 'Sospechoso', 'Dudoso', 'Confiable', 'Muy confiable', 'De total confianza'],
+  },
+  en: {
+    headingEdit: 'Rate contact',
+    headingView: 'Profile',
+    contact: 'Contact',
+    knownSince: 'Known since',
+    confianza: 'Trust',
+    confianzaHint: '(how trustworthy/honest are they?)',
+    afinidad: 'Affinity',
+    afinidadHint: '(I follow / know / care)',
+    of5: '/ 5',
+    remove: 'Remove',
+    notes: 'Private notes (for you only)',
+    notesPh: 'e.g. Met them playing chess. Keeps their word.',
+    wot: 'What others say (Web of Trust)',
+    wotEmpty: 'No signed endorsements yet.',
+    endorsements: 'endorsements',
+    cloud: 'Network reputation',
+    cloudAsking: 'Querying…',
+    cloudUnavailable: 'Registry unavailable.',
+    cloudEmpty: 'No reputation in the registry yet.',
+    ofYourNet: 'from your network',
+    withReceipt: 'with receipt',
+    weak1: 'review(s),',
+    weak2: 'none from your network',
+    weak3: '— weak signal.',
+    privacy: '⌬ Your rating is signed with your private key, shared with trusted peers and published to the reputation registry.',
+    cancel: 'Cancel',
+    save: 'Save rating',
+    saving: 'Saving…',
+    close: 'Close',
+    saveError: 'Save error',
+    labels: ['Unrated', 'Suspicious', 'Doubtful', 'Trustworthy', 'Very trustworthy', 'Fully trusted'],
+  },
+}
+
+// Paleta determinista para el avatar (independiente del tema).
+const AVATAR_PALETTE = [
+  '#9c7a8c', '#c89738', '#5a8a3a', '#a37a45',
+  '#6b8a9c', '#c0392b', '#7a6b5d', '#b8773d',
+]
+
+const STYLE = `
+  :host {
+    /* ----- Tema (override desde la app) ----- */
+    --ccp-bg:        var(--bg-1, #faf3e7);
+    --ccp-bg-2:      var(--bg-2, #f5ede0);
+    --ccp-bg-3:      var(--bg-3, #ede2cf);
+    --ccp-bg-4:      var(--bg-4, #e0d3ba);
+    --ccp-border:    var(--border, #d4c4a8);
+    --ccp-text:      var(--text, #2b211a);
+    --ccp-muted:     var(--muted, #8a7a66);
+    --ccp-accent:    var(--accent, #c0392b);
+    --ccp-accent-2:  var(--accent-2, #a93226);
+    --ccp-gold:      var(--gold, #d4a72c);
+    --ccp-derived:   var(--derived, #a37a45);
+    --ccp-online:    var(--online, #5a8a3a);
+    --ccp-affinity:  var(--affinity, #2dd4bf);
+    --ccp-radius:    var(--ccp-radius, 16px);
+    --ccp-font:      var(--font-body, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
+    --ccp-font-headline: var(--font-headline, var(--ccp-font));
+    --ccp-font-mono: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
+
+    font-family: var(--ccp-font);
+    color: var(--ccp-text);
+  }
+  * { box-sizing: border-box; }
+
+  /* ----- Modal chrome (atributo "modal") ----- */
+  .backdrop {
+    position: fixed; inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    display: flex; align-items: center; justify-content: center;
+    padding: 16px;
+    z-index: 2147483000;
+  }
+  .modal {
+    background: var(--ccp-bg);
+    border: 1px solid var(--ccp-border);
+    border-radius: var(--ccp-radius);
+    width: 100%; max-width: 460px;
+    max-height: 92vh;
+    display: flex; flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
+  }
+  .head {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 18px 24px;
+    border-bottom: 1px solid var(--ccp-border);
+  }
+  .head h2 {
+    margin: 0; font-family: var(--ccp-font-headline);
+    font-size: 18px; font-weight: 600; color: var(--ccp-text);
+  }
+  .x {
+    background: transparent; border: 0;
+    font-size: 24px; cursor: pointer; color: var(--ccp-muted);
+    width: 32px; height: 32px; border-radius: 8px; line-height: 1;
+  }
+  .x:hover { background: var(--ccp-bg-3); color: var(--ccp-text); }
+
+  .body { padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
+  :host([modal]) .body { max-height: 70vh; }
+
+  /* ----- Identity ----- */
+  .identity {
+    display: flex; gap: 14px; align-items: center;
+    background: var(--ccp-bg-2);
+    border: 1px solid var(--ccp-border);
+    border-radius: 12px; padding: 14px;
+  }
+  .avatar-wrap { position: relative; flex-shrink: 0; }
+  .avatar {
+    width: 56px; height: 56px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    color: #fff; font-family: var(--ccp-font-headline);
+    font-weight: 600; font-size: 18px;
+  }
+  .online-dot {
+    position: absolute; right: 0; bottom: 0;
+    width: 14px; height: 14px; border-radius: 50%;
+    background: var(--ccp-online); border: 2px solid var(--ccp-bg-2);
+  }
+  .identity-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+  .name { font-family: var(--ccp-font-headline); font-weight: 600; font-size: 17px; color: var(--ccp-text); }
+  .pubkey {
+    background: var(--ccp-bg-3); padding: 2px 8px; border-radius: 6px;
+    font-family: var(--ccp-font-mono); font-size: 11.5px; color: var(--ccp-muted);
+    width: fit-content;
+  }
+  .since { font-size: 12px; color: var(--ccp-muted); }
+
+  /* ----- Sections ----- */
+  .section { display: flex; flex-direction: column; gap: 6px; position: relative; }
+  .section-label { font-size: 13px; font-weight: 500; color: var(--ccp-muted); }
+  .section-label small { font-weight: 400; }
+  .stars-row { display: flex; gap: 6px; align-items: center; }
+  .star-btn {
+    background: transparent; border: 0; font-size: 36px;
+    color: var(--ccp-bg-4); cursor: pointer; padding: 0; line-height: 1;
+    transition: color 100ms ease-out, transform 100ms ease-out;
+  }
+  .star-btn[disabled] { cursor: default; }
+  .star-btn:not([disabled]):hover { transform: scale(1.1); }
+  .star-btn.filled { color: var(--ccp-gold); text-shadow: 0 1px 2px rgba(212, 167, 44, 0.35); }
+  .star-btn.afin.filled { color: var(--ccp-affinity); text-shadow: none; }
+
+  .rating-meta { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ccp-text); margin-top: 4px; }
+  .rating-num { font-weight: 600; }
+  .rating-label { color: var(--ccp-muted); }
+  .clear {
+    background: transparent; border: 0; color: var(--ccp-muted); cursor: pointer;
+    font-size: 12px; margin-left: auto; text-decoration: underline;
+  }
+  .clear:hover { color: var(--ccp-accent); }
+
+  textarea {
+    width: 100%; resize: vertical; font: inherit; color: var(--ccp-text);
+    background: #fff; border: 1px solid var(--ccp-border); border-radius: 8px;
+    padding: 8px 10px;
+  }
+  textarea:focus { outline: none; border-color: var(--ccp-accent); }
+  .counter { position: absolute; right: 8px; bottom: 8px; font-size: 11px; color: var(--ccp-muted); background: #fff; padding: 0 4px; }
+
+  /* ----- Web of Trust + Cloud ----- */
+  .panel { background: var(--ccp-bg-3); border-radius: 12px; padding: 14px; }
+  .panel + .panel { margin-top: 12px; }
+  .panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
+  .panel-title { font-size: 12px; font-weight: 600; color: var(--ccp-text); text-transform: uppercase; letter-spacing: 0.05em; }
+  .refresh { background: transparent; border: 0; color: var(--ccp-muted); cursor: pointer; font-size: 16px; width: 24px; height: 24px; border-radius: 6px; }
+  .refresh:hover { background: var(--ccp-bg-4); color: var(--ccp-text); }
+  .empty { font-size: 13px; color: var(--ccp-muted); font-style: italic; }
+  .weak { font-size: 13px; color: var(--ccp-muted); }
+  .summary { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+  .summary:last-child { margin-bottom: 0; }
+  .stars { font-size: 16px; letter-spacing: 1px; }
+  .stars.derived { color: var(--ccp-derived); }
+  .stars.afin { color: var(--ccp-affinity); }
+  .num { font-family: var(--ccp-font-headline); font-weight: 600; font-size: 14px; color: var(--ccp-text); }
+  .count { font-size: 12px; color: var(--ccp-muted); }
+  .ind { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ccp-muted); min-width: 64px; }
+
+  .endorsements { list-style: none; padding: 0; margin: 0; max-height: 130px; overflow-y: auto; }
+  .endorsements li {
+    display: flex; gap: 8px; align-items: center; font-size: 12.5px;
+    padding: 6px 0; border-bottom: 1px solid var(--ccp-border);
+  }
+  .endorsements li:last-child { border-bottom: 0; }
+  .endorsements .key { background: var(--ccp-bg-2); padding: 1px 6px; border-radius: 4px; font-family: var(--ccp-font-mono); font-size: 11px; color: var(--ccp-muted); }
+  .endorsements .r { color: var(--ccp-derived); }
+  .endorsements .when { color: var(--ccp-muted); margin-left: auto; font-size: 11px; }
+
+  .privacy { margin: 0; font-size: 12px; color: var(--ccp-muted); text-align: center; line-height: 1.5; }
+  .error { margin: 0; font-size: 13px; color: var(--ccp-accent); font-weight: 500; }
+
+  /* ----- Footer ----- */
+  .foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 24px; background: var(--ccp-bg-2); border-top: 1px solid var(--ccp-border); }
+  .btn { font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
+  .btn.primary { background: var(--ccp-accent); color: #fff; }
+  .btn.primary:hover:not(:disabled) { background: var(--ccp-accent-2); }
+  .btn.primary:disabled { opacity: 0.6; cursor: default; }
+  .btn.secondary { background: transparent; color: var(--ccp-text); border-color: var(--ccp-border); }
+  .btn.secondary:hover { background: var(--ccp-bg-3); }
+`
+
+class CloserClickProfile extends HTMLElement {
+  static get observedAttributes() {
+    return ['pubkey', 'name', 'since', 'online', 'mode', 'modal', 'heading', 'lang']
+  }
+
+  constructor() {
+    super()
+    this.attachShadow({ mode: 'open' })
+    this._provider = null
+    this._my = { confianza: 0, afinidad: 0, notes: '' }
+    this._endorsements = []
+    this._derived = null
+    this._cloud = null
+    this._cloudLoading = true
+    this._hover = 0
+    this._hoverAfin = 0
+    this._saving = false
+    this._error = ''
+    this._loadToken = 0
+    this._onKeydown = this._onKeydown.bind(this)
+  }
+
+  set provider(p) { this._provider = p; if (this.isConnected) this.reload() }
+  get provider() { return this._provider }
+
+  connectedCallback() {
+    document.addEventListener('keydown', this._onKeydown)
+    this._render()
+    this.reload()
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('keydown', this._onKeydown)
+  }
+
+  attributeChangedCallback(name, oldV, newV) {
+    if (oldV === newV) return
+    if (name === 'pubkey') { this._resetState(); this.reload(); return }
+    if (this.shadowRoot.childElementCount) this._render()
+  }
+
+  _onKeydown(e) {
+    if (e.key === 'Escape' && this.hasAttribute('modal')) this._close()
+  }
+
+  /* ---- idioma ---- */
+  get _lang() {
+    const attr = (this.getAttribute('lang') || 'auto').toLowerCase()
+    if (attr === 'es' || attr === 'en') return attr
+    const doc = (document.documentElement.lang || '').toLowerCase()
+    const nav = (navigator.language || '').toLowerCase()
+    return (doc || nav).startsWith('en') ? 'en' : 'es'
+  }
+  get _t() { return I18N[this._lang] }
+  get _pubkey() { return this.getAttribute('pubkey') || '' }
+  get _editable() { return (this.getAttribute('mode') || 'edit') !== 'view' }
+
+  _resetState() {
+    this._my = { confianza: 0, afinidad: 0, notes: '' }
+    this._endorsements = []
+    this._derived = null
+    this._cloud = null
+    this._cloudLoading = true
+    this._hover = 0
+    this._hoverAfin = 0
+    this._error = ''
+  }
+
+  /* ---- carga de datos vía provider ---- */
+  async reload() {
+    const pk = this._pubkey
+    const p = this._provider
+    if (!pk || !p) { this._render(); return }
+    const token = ++this._loadToken
+    this._cloudLoading = true
+    this._render()
+
+    // Mi calificación + endosos locales (rápido) en paralelo con la nube (lento).
+    try {
+      if (typeof p.getMyRating === 'function') {
+        const my = await p.getMyRating(pk)
+        if (token !== this._loadToken) return
+        if (my) this._my = { confianza: my.confianza || 0, afinidad: my.afinidad || 0, notes: my.notes || '' }
+      }
+    } catch (_) { /* best-effort */ }
+    try {
+      if (typeof p.getEndorsements === 'function') {
+        const e = await p.getEndorsements(pk)
+        if (token !== this._loadToken) return
+        this._endorsements = (e && e.endorsements) || []
+        this._derived = e ? e.derived : null
+      }
+    } catch (_) { /* best-effort */ }
+    if (token === this._loadToken) this._render()
+
+    try {
+      const cloud = typeof p.getCloudReputation === 'function' ? await p.getCloudReputation(pk) : null
+      if (token !== this._loadToken) return
+      this._cloud = cloud
+    } catch (_) { this._cloud = null } finally {
+      if (token === this._loadToken) { this._cloudLoading = false; this._render() }
+    }
+  }
+
+  async _save() {
+    if (!this._editable || this._saving) return
+    const p = this._provider
+    const pk = this._pubkey
+    if (!p || typeof p.rate !== 'function' || !pk) return
+    this._error = ''
+    this._saving = true
+    this._render()
+    const indicators = { confianza: this._my.confianza }
+    if (this._my.afinidad > 0) indicators.afinidad = this._my.afinidad
+    try {
+      await p.rate(pk, indicators, this._my.notes)
+      this._saving = false
+      this._emit('cc-profile-rate', { pubkey: pk, indicators, notes: this._my.notes })
+      if (this.hasAttribute('modal')) this._close()
+      else this._render()
+    } catch (e) {
+      this._saving = false
+      this._error = (e && e.message) || this._t.saveError
+      this._render()
+    }
+  }
+
+  _close() { this._emit('cc-profile-close', { pubkey: this._pubkey }) }
+  _refresh() { this._emit('cc-profile-refresh', { pubkey: this._pubkey }); this.reload() }
+  _emit(type, detail) { this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true })) }
+
+  /* ---- helpers de presentación ---- */
+  _initials(s) {
+    return (s || '?').trim().split(/\s+/).slice(0, 2).map(w => w[0] || '').join('').toUpperCase() || '?'
+  }
+  _avatarBg(key) {
+    const s = key || ''
+    let h = 0
+    for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0
+    return AVATAR_PALETTE[h % AVATAR_PALETTE.length]
+  }
+  _stars(n) {
+    const v = Math.max(0, Math.min(5, Math.round(n || 0)))
+    return '★'.repeat(v) + '☆'.repeat(5 - v)
+  }
+  _fmtDate(ts) {
+    if (!ts) return ''
+    try { return new Date(Number(ts)).toLocaleDateString([], { day: '2-digit', month: 'short', year: 'numeric' }) }
+    catch { return '' }
+  }
+  _shortKey(k) {
+    k = k || ''
+    return k.length > 20 ? k.slice(0, 12) + '…' + k.slice(-4) : k
+  }
+  _esc(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, c => (
+      { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
+    ))
+  }
+
+  _starsRow(kind, filled, hover) {
+    const active = hover || filled
+    const cls = kind === 'afin' ? 'star-btn afin' : 'star-btn'
+    const dis = this._editable ? '' : 'disabled'
+    let out = `<div class="stars-row" data-row="${kind}">`
+    for (let n = 1; n <= 5; n++) {
+      out += `<button type="button" class="${cls}${n <= active ? ' filled' : ''}" data-star="${kind}" data-n="${n}" ${dis}>★</button>`
+    }
+    return out + '</div>'
+  }
+
+  _render() {
+    const t = this._t
+    const sr = this.shadowRoot
+    const isModal = this.hasAttribute('modal')
+    const editable = this._editable
+    const pk = this._pubkey
+    const name = this.getAttribute('name') || t.contact
+    const since = this.getAttribute('since')
+    const online = this.hasAttribute('online') && this.getAttribute('online') !== 'false'
+    const heading = this.getAttribute('heading') || (editable ? t.headingEdit : t.headingView)
+
+    const confLabel = t.labels[this._hover || this._my.confianza] || t.labels[0]
+
+    // ----- Identidad -----
+    let body = `
+      <div class="identity">
+        <div class="avatar-wrap">
+          <div class="avatar" style="background:${this._avatarBg(pk)}">${this._esc(this._initials(name))}</div>
+          ${online ? '<span class="online-dot"></span>' : ''}
+        </div>
+        <div class="identity-text">
+          <div class="name">${this._esc(name)}</div>
+          <code class="pubkey">${this._esc(this._shortKey(pk))}</code>
+          ${since ? `<div class="since">${this._esc(t.knownSince)} ${this._esc(this._fmtDate(since))}</div>` : ''}
+        </div>
+      </div>`
+
+    // ----- Editor (confianza / afinidad / notas) -----
+    if (editable) {
+      body += `
+      <div class="section">
+        <span class="section-label">${this._esc(t.confianza)} <small>${this._esc(t.confianzaHint)}</small></span>
+        ${this._starsRow('conf', this._my.confianza, this._hover)}
+        <div class="rating-meta">
+          <span class="rating-num">${this._hover || this._my.confianza || 0} ${t.of5}</span>
+          <span class="rating-label">— ${this._esc(confLabel)}</span>
+          ${this._my.confianza > 0 ? `<button class="clear" data-clear="conf">${this._esc(t.remove)}</button>` : ''}
+        </div>
+      </div>
+      <div class="section">
+        <span class="section-label">${this._esc(t.afinidad)} <small>${this._esc(t.afinidadHint)}</small></span>
+        ${this._starsRow('afin', this._my.afinidad, this._hoverAfin)}
+        <div class="rating-meta">
+          <span class="rating-num">${this._hoverAfin || this._my.afinidad || 0} ${t.of5}</span>
+          ${this._my.afinidad > 0 ? `<button class="clear" data-clear="afin">${this._esc(t.remove)}</button>` : ''}
+        </div>
+      </div>
+      <label class="section">
+        <span class="section-label">${this._esc(t.notes)}</span>
+        <textarea rows="3" maxlength="500" placeholder="${this._esc(t.notesPh)}">${this._esc(this._my.notes)}</textarea>
+        <span class="counter">${(this._my.notes || '').length} / 500</span>
+      </label>`
+    }
+
+    // ----- Web of Trust (endosos locales) -----
+    let wot = ''
+    if (this._endorsements.length === 0) {
+      wot = `<div class="empty">${this._esc(t.wotEmpty)}</div>`
+    } else {
+      const rows = this._endorsements.slice(0, 5).map(e => `
+        <li>
+          <code class="key">${this._esc((e.ratedBy || '').slice(0, 12))}…</code>
+          <span class="r">${this._stars(e.rating)}</span>
+          <span class="when">${this._esc(this._fmtDate(e.issuedAt))}</span>
+        </li>`).join('')
+      wot = `
+        <div class="summary">
+          <span class="stars derived">${this._stars(this._derived)}</span>
+          <span class="num">${this._derived != null ? this._derived.toFixed(1) : '—'}</span>
+          <span class="count">(${this._endorsements.length} ${this._esc(t.endorsements)})</span>
+        </div>
+        <ul class="endorsements">${rows}</ul>`
+    }
+    body += `
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">${this._esc(t.wot)}</span>
+          <button class="refresh" data-refresh title="↻">↻</button>
+        </div>
+        ${wot}
+      </div>`
+
+    // ----- Reputación de la red -----
+    let cloud
+    if (this._cloudLoading) {
+      cloud = `<div class="empty">${this._esc(t.cloudAsking)}</div>`
+    } else if (this._cloud) {
+      const c = this._cloud
+      const afin = c.indicators && c.indicators.afinidad
+      let parts = ''
+      if (c.score != null) {
+        const pct = Math.round(c.score * 100)
+        const receipt = c.txBoundCount ? ` · ${c.txBoundCount} ${this._esc(t.withReceipt)}` : ''
+        parts += `
+          <div class="summary">
+            <span class="ind">${this._esc(t.confianza)}</span>
+            <span class="stars derived">${this._stars(c.score * 5)}</span>
+            <span class="num">${pct}%</span>
+            <span class="count">${c.trustedCount} ${this._esc(t.ofYourNet)}${receipt}</span>
+          </div>`
+      }
+      if (afin && afin.score != null) {
+        parts += `
+          <div class="summary">
+            <span class="ind">${this._esc(t.afinidad)}</span>
+            <span class="stars afin">${this._stars(afin.score * 5)}</span>
+            <span class="num">${Math.round(afin.score * 100)}%</span>
+            <span class="count">${afin.trustedCount} ${this._esc(t.ofYourNet)}</span>
+          </div>`
+      }
+      if (c.score == null && c.rawCount > 0) {
+        parts = `<div class="weak">${c.rawCount} ${this._esc(t.weak1)} <strong>${this._esc(t.weak2)}</strong> ${this._esc(t.weak3)}</div>`
+      } else if (c.score == null && (!c.rawCount)) {
+        parts = `<div class="empty">${this._esc(t.cloudEmpty)}</div>`
+      }
+      cloud = parts
+    } else {
+      cloud = `<div class="empty">${this._esc(t.cloudUnavailable)}</div>`
+    }
+    body += `
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">${this._esc(t.cloud)}</span>
+          <button class="refresh" data-reload title="↻">↻</button>
+        </div>
+        ${cloud}
+      </div>`
+
+    if (editable) body += `<p class="privacy">${this._esc(t.privacy)}</p>`
+    if (this._error) body += `<p class="error">${this._esc(this._error)}</p>`
+
+    // ----- Ensamblado (modal o inline) -----
+    const footer = editable ? `
+      <footer class="foot">
+        ${isModal ? `<button class="btn secondary" data-cancel>${this._esc(t.cancel)}</button>` : ''}
+        <button class="btn primary" data-save ${this._saving ? 'disabled' : ''}>${this._esc(this._saving ? t.saving : t.save)}</button>
+      </footer>` : ''
+
+    let html = `<style>${STYLE}</style>`
+    if (isModal) {
+      html += `
+        <div class="backdrop" data-backdrop>
+          <div class="modal" role="dialog" aria-modal="true">
+            <header class="head">
+              <h2>${this._esc(heading)}</h2>
+              <button class="x" data-cancel aria-label="${this._esc(t.close)}">×</button>
+            </header>
+            <div class="body">${body}</div>
+            ${footer}
+          </div>
+        </div>`
+    } else {
+      html += `<div class="body">${body}</div>${footer}`
+    }
+    sr.innerHTML = html
+    this._wire()
+  }
+
+  _wire() {
+    const sr = this.shadowRoot
+    const q = (s) => sr.querySelector(s)
+    const qa = (s) => sr.querySelectorAll(s)
+
+    const backdrop = q('[data-backdrop]')
+    if (backdrop) backdrop.addEventListener('click', (e) => { if (e.target === backdrop) this._close() })
+    qa('[data-cancel]').forEach(b => b.addEventListener('click', () => this._close()))
+    const save = q('[data-save]'); if (save) save.addEventListener('click', () => this._save())
+    const refresh = q('[data-refresh]'); if (refresh) refresh.addEventListener('click', () => this._refresh())
+    const reload = q('[data-reload]'); if (reload) reload.addEventListener('click', () => this.reload())
+
+    if (this._editable) {
+      qa('[data-star]').forEach(btn => {
+        const kind = btn.getAttribute('data-star')
+        const n = Number(btn.getAttribute('data-n'))
+        btn.addEventListener('click', () => {
+          if (kind === 'conf') this._my.confianza = n; else this._my.afinidad = n
+          this._render()
+        })
+        btn.addEventListener('mouseenter', () => {
+          if (kind === 'conf') this._hover = n; else this._hoverAfin = n
+          this._render()
+        })
+      })
+      qa('[data-row]').forEach(row => {
+        const kind = row.getAttribute('data-row')
+        row.addEventListener('mouseleave', () => {
+          if (kind === 'conf') this._hover = 0; else this._hoverAfin = 0
+          this._render()
+        })
+      })
+      qa('[data-clear]').forEach(btn => {
+        const kind = btn.getAttribute('data-clear')
+        btn.addEventListener('click', () => {
+          if (kind === 'conf') this._my.confianza = 0; else this._my.afinidad = 0
+          this._render()
+        })
+      })
+      const ta = q('textarea')
+      if (ta) {
+        // Mantener foco/cursor entre re-renders: actualizamos estado sin re-render.
+        ta.addEventListener('input', (e) => {
+          this._my.notes = e.target.value
+          const counter = q('.counter')
+          if (counter) counter.textContent = `${this._my.notes.length} / 500`
+        })
+      }
+    }
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('closer-click-profile')) {
+  customElements.define('closer-click-profile', CloserClickProfile)
+}
+
+/**
+ * Cablea un `provider` para `<closer-click-profile>` a los paquetes estándar del
+ * ecosistema (duck-typing, sin dependencia dura). Integración de 1 línea.
+ *
+ * @param {object} cfg
+ * @param {object} cfg.identity    instancia conectada de closer-click-identity
+ *                                 (usa `me.publickey`, `getRatingsForSubject(pk)`).
+ * @param {object} cfg.reputation  instancia de createVaultReputation(identity)
+ *                                 (usa `getRatings`, `reputationOf`, `rate`).
+ * @returns {object} provider
+ */
+export function createVaultProfileProvider({ identity, reputation } = {}) {
+  if (!reputation) throw new Error('closer-click-profile: se requiere `reputation` (createVaultReputation)')
+  const myPubkey = () => (identity && identity.me && identity.me.publickey) || null
+
+  return {
+    async getMyRating(pubkey) {
+      let confianza = 0; let afinidad = 0; let notes = ''
+      try {
+        if (identity && typeof identity.getRatingsForSubject === 'function') {
+          const r = await identity.getRatingsForSubject(pubkey)
+          if (r && r.mine) {
+            if (typeof r.mine.rating === 'number') confianza = r.mine.rating
+            if (r.mine.notes) notes = r.mine.notes
+          }
+        }
+      } catch (_) { /* best-effort */ }
+      try {
+        if (typeof reputation.getRatings === 'function') {
+          const { attestations } = await reputation.getRatings(pubkey)
+          const me = myPubkey()
+          const mine = (attestations || []).find(a => a && a.issuer === me)
+          if (mine && mine.indicators && typeof mine.indicators.afinidad === 'number') afinidad = mine.indicators.afinidad
+        }
+      } catch (_) { /* best-effort */ }
+      return { confianza, afinidad, notes }
+    },
+
+    async getEndorsements(pubkey) {
+      try {
+        if (identity && typeof identity.getRatingsForSubject === 'function') {
+          const r = await identity.getRatingsForSubject(pubkey)
+          const endorsements = (r && r.endorsements) || []
+          const vals = endorsements.map(e => e && e.rating).filter(n => typeof n === 'number')
+          const derived = vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null
+          return { endorsements, derived }
+        }
+      } catch (_) { /* best-effort */ }
+      return { endorsements: [], derived: null }
+    },
+
+    async getCloudReputation(pubkey) {
+      try { return await reputation.reputationOf(pubkey) } catch (_) { return null }
+    },
+
+    async rate(pubkey, indicators, notes) {
+      return reputation.rate(pubkey, indicators, { notes })
+    },
+  }
+}
+
+export default CloserClickProfile