@closerclick/closer-click-profile 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/index.js +77 -71
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@closerclick/closer-click-profile",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "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.",
5
5
  "type": "module",
6
6
  "main": "src/index.js",
package/src/index.js CHANGED
@@ -123,27 +123,33 @@ const AVATAR_PALETTE = [
123
123
 
124
124
  const STYLE = `
125
125
  :host {
126
- /* ----- Tema (override desde la app) ----- */
127
- --ccp-bg: var(--bg-1, #faf3e7);
128
- --ccp-bg-2: var(--bg-2, #f5ede0);
129
- --ccp-bg-3: var(--bg-3, #ede2cf);
130
- --ccp-bg-4: var(--bg-4, #e0d3ba);
131
- --ccp-border: var(--border, #d4c4a8);
132
- --ccp-text: var(--text, #2b211a);
133
- --ccp-muted: var(--muted, #8a7a66);
134
- --ccp-accent: var(--accent, #c0392b);
135
- --ccp-accent-2: var(--accent-2, #a93226);
136
- --ccp-gold: var(--gold, #d4a72c);
137
- --ccp-derived: var(--derived, #a37a45);
138
- --ccp-online: var(--online, #5a8a3a);
139
- --ccp-affinity: var(--affinity, #2dd4bf);
140
- --ccp-radius: var(--ccp-radius, 16px);
141
- --ccp-font: var(--font-body, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
142
- --ccp-font-headline: var(--font-headline, var(--ccp-font));
143
- --ccp-font-mono: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
144
-
145
- font-family: var(--ccp-font);
146
- color: var(--ccp-text);
126
+ /* ----- Tema -----
127
+ * API pública = --ccp-* (la app las setea por :root, selector o inline).
128
+ * Tokens internos = --_* (los usa el componente). Cada uno resuelve:
129
+ * override --ccp-* → var de tema del messenger → literal.
130
+ * NO declaramos --ccp-* acá (eso ganaría por especificidad al override de la
131
+ * app); así un simple selector de la app (o en :root) funciona. */
132
+ --_bg: var(--ccp-bg, var(--bg-1, #faf3e7));
133
+ --_bg-2: var(--ccp-bg-2, var(--bg-2, #f5ede0));
134
+ --_bg-3: var(--ccp-bg-3, var(--bg-3, #ede2cf));
135
+ --_bg-4: var(--ccp-bg-4, var(--bg-4, #e0d3ba));
136
+ --_border: var(--ccp-border, var(--border, #d4c4a8));
137
+ --_text: var(--ccp-text, var(--text, #2b211a));
138
+ --_muted: var(--ccp-muted, var(--muted, #8a7a66));
139
+ --_accent: var(--ccp-accent, var(--accent, #c0392b));
140
+ --_accent-2: var(--ccp-accent-2, var(--accent-2, #a93226));
141
+ --_gold: var(--ccp-gold, var(--gold, #d4a72c));
142
+ --_derived: var(--ccp-derived, var(--derived, #a37a45));
143
+ --_online: var(--ccp-online, var(--online, #5a8a3a));
144
+ --_affinity: var(--ccp-affinity, var(--affinity, #2dd4bf));
145
+ --_input-bg: var(--ccp-input-bg, var(--input-bg, #fff));
146
+ --_radius: var(--ccp-radius, 16px);
147
+ --_font: var(--ccp-font, var(--font-body, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif));
148
+ --_font-headline: var(--ccp-font-headline, var(--font-headline, var(--_font)));
149
+ --_font-mono: var(--ccp-font-mono, var(--font-mono, ui-monospace, Menlo, Consolas, monospace));
150
+
151
+ font-family: var(--_font);
152
+ color: var(--_text);
147
153
  }
148
154
  * { box-sizing: border-box; }
149
155
 
@@ -156,9 +162,9 @@ const STYLE = `
156
162
  z-index: 2147483000;
157
163
  }
158
164
  .modal {
159
- background: var(--ccp-bg);
160
- border: 1px solid var(--ccp-border);
161
- border-radius: var(--ccp-radius);
165
+ background: var(--_bg);
166
+ border: 1px solid var(--_border);
167
+ border-radius: var(--_radius);
162
168
  width: 100%; max-width: 460px;
163
169
  max-height: 92vh;
164
170
  display: flex; flex-direction: column;
@@ -168,18 +174,18 @@ const STYLE = `
168
174
  .head {
169
175
  display: flex; align-items: center; justify-content: space-between;
170
176
  padding: 18px 24px;
171
- border-bottom: 1px solid var(--ccp-border);
177
+ border-bottom: 1px solid var(--_border);
172
178
  }
173
179
  .head h2 {
174
- margin: 0; font-family: var(--ccp-font-headline);
175
- font-size: 18px; font-weight: 600; color: var(--ccp-text);
180
+ margin: 0; font-family: var(--_font-headline);
181
+ font-size: 18px; font-weight: 600; color: var(--_text);
176
182
  }
177
183
  .x {
178
184
  background: transparent; border: 0;
179
- font-size: 24px; cursor: pointer; color: var(--ccp-muted);
185
+ font-size: 24px; cursor: pointer; color: var(--_muted);
180
186
  width: 32px; height: 32px; border-radius: 8px; line-height: 1;
181
187
  }
182
- .x:hover { background: var(--ccp-bg-3); color: var(--ccp-text); }
188
+ .x:hover { background: var(--_bg-3); color: var(--_text); }
183
189
 
184
190
  .body { padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
185
191
  :host([modal]) .body { max-height: 70vh; }
@@ -187,102 +193,102 @@ const STYLE = `
187
193
  /* ----- Identity ----- */
188
194
  .identity {
189
195
  display: flex; gap: 14px; align-items: center;
190
- background: var(--ccp-bg-2);
191
- border: 1px solid var(--ccp-border);
196
+ background: var(--_bg-2);
197
+ border: 1px solid var(--_border);
192
198
  border-radius: 12px; padding: 14px;
193
199
  }
194
200
  .avatar-wrap { position: relative; flex-shrink: 0; }
195
201
  .avatar {
196
202
  width: 56px; height: 56px; border-radius: 50%;
197
203
  display: flex; align-items: center; justify-content: center;
198
- color: #fff; font-family: var(--ccp-font-headline);
204
+ color: #fff; font-family: var(--_font-headline);
199
205
  font-weight: 600; font-size: 18px;
200
206
  }
201
207
  .online-dot {
202
208
  position: absolute; right: 0; bottom: 0;
203
209
  width: 14px; height: 14px; border-radius: 50%;
204
- background: var(--ccp-online); border: 2px solid var(--ccp-bg-2);
210
+ background: var(--_online); border: 2px solid var(--_bg-2);
205
211
  }
206
212
  .identity-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
207
- .name { font-family: var(--ccp-font-headline); font-weight: 600; font-size: 17px; color: var(--ccp-text); }
213
+ .name { font-family: var(--_font-headline); font-weight: 600; font-size: 17px; color: var(--_text); }
208
214
  .pubkey {
209
- background: var(--ccp-bg-3); padding: 2px 8px; border-radius: 6px;
210
- font-family: var(--ccp-font-mono); font-size: 11.5px; color: var(--ccp-muted);
215
+ background: var(--_bg-3); padding: 2px 8px; border-radius: 6px;
216
+ font-family: var(--_font-mono); font-size: 11.5px; color: var(--_muted);
211
217
  width: fit-content;
212
218
  }
213
- .since { font-size: 12px; color: var(--ccp-muted); }
219
+ .since { font-size: 12px; color: var(--_muted); }
214
220
 
215
221
  /* ----- Sections ----- */
216
222
  .section { display: flex; flex-direction: column; gap: 6px; position: relative; }
217
- .section-label { font-size: 13px; font-weight: 500; color: var(--ccp-muted); }
223
+ .section-label { font-size: 13px; font-weight: 500; color: var(--_muted); }
218
224
  .section-label small { font-weight: 400; }
219
225
  .stars-row { display: flex; gap: 6px; align-items: center; }
220
226
  .star-btn {
221
227
  background: transparent; border: 0; font-size: 36px;
222
- color: var(--ccp-bg-4); cursor: pointer; padding: 0; line-height: 1;
228
+ color: var(--_bg-4); cursor: pointer; padding: 0; line-height: 1;
223
229
  transition: color 100ms ease-out, transform 100ms ease-out;
224
230
  }
225
231
  .star-btn[disabled] { cursor: default; }
226
232
  .star-btn:not([disabled]):hover { transform: scale(1.1); }
227
- .star-btn.filled { color: var(--ccp-gold); text-shadow: 0 1px 2px rgba(212, 167, 44, 0.35); }
228
- .star-btn.afin.filled { color: var(--ccp-affinity); text-shadow: none; }
233
+ .star-btn.filled { color: var(--_gold); text-shadow: 0 1px 2px rgba(212, 167, 44, 0.35); }
234
+ .star-btn.afin.filled { color: var(--_affinity); text-shadow: none; }
229
235
 
230
- .rating-meta { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ccp-text); margin-top: 4px; }
236
+ .rating-meta { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--_text); margin-top: 4px; }
231
237
  .rating-num { font-weight: 600; }
232
- .rating-label { color: var(--ccp-muted); }
238
+ .rating-label { color: var(--_muted); }
233
239
  .clear {
234
- background: transparent; border: 0; color: var(--ccp-muted); cursor: pointer;
240
+ background: transparent; border: 0; color: var(--_muted); cursor: pointer;
235
241
  font-size: 12px; margin-left: auto; text-decoration: underline;
236
242
  }
237
- .clear:hover { color: var(--ccp-accent); }
243
+ .clear:hover { color: var(--_accent); }
238
244
 
239
245
  textarea {
240
- width: 100%; resize: vertical; font: inherit; color: var(--ccp-text);
241
- background: #fff; border: 1px solid var(--ccp-border); border-radius: 8px;
246
+ width: 100%; resize: vertical; font: inherit; color: var(--_text);
247
+ background: var(--ccp-input-bg, #fff); border: 1px solid var(--_border); border-radius: 8px;
242
248
  padding: 8px 10px;
243
249
  }
244
- textarea:focus { outline: none; border-color: var(--ccp-accent); }
245
- .counter { position: absolute; right: 8px; bottom: 8px; font-size: 11px; color: var(--ccp-muted); background: #fff; padding: 0 4px; }
250
+ textarea:focus { outline: none; border-color: var(--_accent); }
251
+ .counter { position: absolute; right: 8px; bottom: 8px; font-size: 11px; color: var(--_muted); background: var(--ccp-input-bg, #fff); padding: 0 4px; }
246
252
 
247
253
  /* ----- Web of Trust + Cloud ----- */
248
- .panel { background: var(--ccp-bg-3); border-radius: 12px; padding: 14px; }
254
+ .panel { background: var(--_bg-3); border-radius: 12px; padding: 14px; }
249
255
  .panel + .panel { margin-top: 12px; }
250
256
  .panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
251
- .panel-title { font-size: 12px; font-weight: 600; color: var(--ccp-text); text-transform: uppercase; letter-spacing: 0.05em; }
252
- .refresh { background: transparent; border: 0; color: var(--ccp-muted); cursor: pointer; font-size: 16px; width: 24px; height: 24px; border-radius: 6px; }
253
- .refresh:hover { background: var(--ccp-bg-4); color: var(--ccp-text); }
254
- .empty { font-size: 13px; color: var(--ccp-muted); font-style: italic; }
255
- .weak { font-size: 13px; color: var(--ccp-muted); }
257
+ .panel-title { font-size: 12px; font-weight: 600; color: var(--_text); text-transform: uppercase; letter-spacing: 0.05em; }
258
+ .refresh { background: transparent; border: 0; color: var(--_muted); cursor: pointer; font-size: 16px; width: 24px; height: 24px; border-radius: 6px; }
259
+ .refresh:hover { background: var(--_bg-4); color: var(--_text); }
260
+ .empty { font-size: 13px; color: var(--_muted); font-style: italic; }
261
+ .weak { font-size: 13px; color: var(--_muted); }
256
262
  .summary { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
257
263
  .summary:last-child { margin-bottom: 0; }
258
264
  .stars { font-size: 16px; letter-spacing: 1px; }
259
- .stars.derived { color: var(--ccp-derived); }
260
- .stars.afin { color: var(--ccp-affinity); }
261
- .num { font-family: var(--ccp-font-headline); font-weight: 600; font-size: 14px; color: var(--ccp-text); }
262
- .count { font-size: 12px; color: var(--ccp-muted); }
263
- .ind { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ccp-muted); min-width: 64px; }
265
+ .stars.derived { color: var(--_derived); }
266
+ .stars.afin { color: var(--_affinity); }
267
+ .num { font-family: var(--_font-headline); font-weight: 600; font-size: 14px; color: var(--_text); }
268
+ .count { font-size: 12px; color: var(--_muted); }
269
+ .ind { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--_muted); min-width: 64px; }
264
270
 
265
271
  .endorsements { list-style: none; padding: 0; margin: 0; max-height: 130px; overflow-y: auto; }
266
272
  .endorsements li {
267
273
  display: flex; gap: 8px; align-items: center; font-size: 12.5px;
268
- padding: 6px 0; border-bottom: 1px solid var(--ccp-border);
274
+ padding: 6px 0; border-bottom: 1px solid var(--_border);
269
275
  }
270
276
  .endorsements li:last-child { border-bottom: 0; }
271
- .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); }
272
- .endorsements .r { color: var(--ccp-derived); }
273
- .endorsements .when { color: var(--ccp-muted); margin-left: auto; font-size: 11px; }
277
+ .endorsements .key { background: var(--_bg-2); padding: 1px 6px; border-radius: 4px; font-family: var(--_font-mono); font-size: 11px; color: var(--_muted); }
278
+ .endorsements .r { color: var(--_derived); }
279
+ .endorsements .when { color: var(--_muted); margin-left: auto; font-size: 11px; }
274
280
 
275
- .privacy { margin: 0; font-size: 12px; color: var(--ccp-muted); text-align: center; line-height: 1.5; }
276
- .error { margin: 0; font-size: 13px; color: var(--ccp-accent); font-weight: 500; }
281
+ .privacy { margin: 0; font-size: 12px; color: var(--_muted); text-align: center; line-height: 1.5; }
282
+ .error { margin: 0; font-size: 13px; color: var(--_accent); font-weight: 500; }
277
283
 
278
284
  /* ----- Footer ----- */
279
- .foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 24px; background: var(--ccp-bg-2); border-top: 1px solid var(--ccp-border); }
285
+ .foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 24px; background: var(--_bg-2); border-top: 1px solid var(--_border); }
280
286
  .btn { font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
281
- .btn.primary { background: var(--ccp-accent); color: #fff; }
282
- .btn.primary:hover:not(:disabled) { background: var(--ccp-accent-2); }
287
+ .btn.primary { background: var(--_accent); color: #fff; }
288
+ .btn.primary:hover:not(:disabled) { background: var(--_accent-2); }
283
289
  .btn.primary:disabled { opacity: 0.6; cursor: default; }
284
- .btn.secondary { background: transparent; color: var(--ccp-text); border-color: var(--ccp-border); }
285
- .btn.secondary:hover { background: var(--ccp-bg-3); }
290
+ .btn.secondary { background: transparent; color: var(--_text); border-color: var(--_border); }
291
+ .btn.secondary:hover { background: var(--_bg-3); }
286
292
  `
287
293
 
288
294
  class CloserClickProfile extends HTMLElement {