relay-companion 0.1.67 → 0.1.69

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/overlay/inbox.html +55 -63
  2. package/package.json +1 -1
package/overlay/inbox.html CHANGED
@@ -147,10 +147,15 @@
147
147
  .tab:hover { background:rgba(31,26,23,.05); color:var(--ink-2); }
148
148
  .tab.active { background:var(--accent-soft); color:var(--accent); }
149
149
  .tab-badge {
150
- font-family:var(--mono); font-size:10px; font-weight:500;
151
- color:var(--muted-3); font-variant-numeric:tabular-nums;
152
- }
153
- .tab.active .tab-badge { color:var(--accent); }
150
+ font-family:var(--sans); font-size:9px; font-weight:650;
151
+ font-variant-numeric:tabular-nums; line-height:1;
152
+ color:#fff; background:var(--accent);
153
+ border-radius:999px; padding:2.5px 5.5px; min-width:15px; text-align:center;
154
+ display:inline-block; margin-left:3px; transform:translateY(-1px);
155
+ box-shadow:0 2px 5px -2px color-mix(in srgb, var(--accent) 50%, transparent);
156
+ transition:opacity .15s var(--settle);
157
+ }
158
+ .tab:not(.active) .tab-badge { opacity:.45; }
154
159
  .tab-badge.gone { display:none; }
155
160
  .mark-all-read {
156
161
  appearance:none; margin-left:auto; border:0; background:transparent; cursor:pointer;
@@ -379,48 +384,34 @@
379
384
  .row-open-card { margin:11px 0 0; padding:11px 12px; }
380
385
  .row-open-card .td-card-actions { margin-top:0; }
381
386
 
382
- /* ---- Open actions: a quiet, light-built panel. Depth from light and
383
- shadow, not borders; type does the hierarchy; motion settles, never
384
- bounces. ---- */
387
+ /* ---- Open actions: a small native-feeling action menu, not buttons.
388
+ One quiet inset surface, hairline-separated text rows; hierarchy from
389
+ weight and the single accent, never from fills, gradients, icons, or
390
+ explanatory subtitles. States are flat washes. Motion settles in 160ms. ---- */
385
391
  .open-actions {
386
- margin:12px 0 2px; padding:6px; border-radius:16px;
387
- background:color-mix(in srgb, #ffffff 62%, transparent);
388
- -webkit-backdrop-filter:blur(18px) saturate(1.35);
389
- backdrop-filter:blur(18px) saturate(1.35);
390
- box-shadow:0 0.5px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(31,26,23,.05), 0 14px 34px -20px rgba(31,26,23,.3);
391
- display:flex; flex-direction:column; gap:5px;
392
- animation:oaReveal .34s var(--settle) both;
392
+ margin:10px 0 2px; padding:3px; border-radius:9px;
393
+ background:rgba(31,26,23,.028);
394
+ display:flex; flex-direction:column;
395
+ animation:oaReveal .16s var(--settle) both;
393
396
  }
394
397
  @keyframes oaReveal {
395
- from { opacity:0; transform:translateY(-5px) scale(.985); }
398
+ from { opacity:0; transform:translateY(-2px); }
396
399
  to { opacity:1; transform:none; }
397
400
  }
398
- .oa-btn {
399
- display:flex; align-items:center; gap:11px; width:100%;
400
- padding:10px 12px; border-radius:11px; border:0; cursor:pointer;
401
- text-align:left; font-family:var(--sans); appearance:none;
402
- background:transparent;
403
- transition:transform .16s var(--settle), box-shadow .2s var(--settle), background-color .16s var(--settle);
404
- }
405
- .oa-btn:active { transform:scale(.977); }
406
- .oa-primary {
407
- background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 100%);
408
- color:#fff;
409
- box-shadow:inset 0 0.5px 0 rgba(255,255,255,.28), 0 7px 16px -9px color-mix(in srgb, var(--accent) 60%, transparent);
410
- }
411
- .oa-primary:hover { box-shadow:inset 0 0.5px 0 rgba(255,255,255,.28), 0 9px 20px -9px color-mix(in srgb, var(--accent) 72%, transparent); }
412
- .oa-ghost { color:var(--ink); }
413
- .oa-ghost:hover { background:rgba(31,26,23,.045); }
414
- .oa-icon {
415
- flex:0 0 auto; width:27px; height:27px; border-radius:8.5px;
416
- display:flex; align-items:center; justify-content:center;
417
- }
418
- .oa-primary .oa-icon { background:rgba(255,255,255,.16); box-shadow:inset 0 0.5px 0 rgba(255,255,255,.22); }
419
- .oa-ghost .oa-icon { background:var(--accent-soft); color:var(--accent); }
420
- .oa-text { min-width:0; display:flex; flex-direction:column; }
421
- .oa-label { font-size:12.5px; font-weight:600; letter-spacing:.01em; line-height:1.25; }
422
- .oa-sub { font-size:10.5px; line-height:1.3; margin-top:1.5px; opacity:.72; font-weight:400; }
423
- .oa-ghost .oa-sub { color:var(--muted); opacity:1; }
401
+ .oa-item {
402
+ appearance:none; border:0; background:transparent; cursor:pointer;
403
+ width:100%; text-align:left; border-radius:6px;
404
+ padding:8px 10px; font-family:var(--sans);
405
+ font-size:13px; font-weight:400; letter-spacing:-0.01em;
406
+ color:var(--ink); line-height:1.2;
407
+ transition:background-color .12s var(--settle);
408
+ }
409
+ .oa-item:hover { background:rgba(31,26,23,.055); }
410
+ .oa-item:active { background:rgba(31,26,23,.09); }
411
+ .oa-primary { font-weight:600; color:var(--accent); }
412
+ .oa-primary:hover { background:color-mix(in srgb, var(--accent) 8%, transparent); }
413
+ .oa-primary:active { background:color-mix(in srgb, var(--accent) 13%, transparent); }
414
+ .oa-sep { height:1px; margin:2px 8px; background:var(--hair-2); }
424
415
 
425
416
  /* zone label — one calm sans overline, sentence case */
426
417
  .td-label { padding:24px 16px 2px; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--muted-2); }
@@ -595,9 +586,23 @@
595
586
  .th-item:hover { background:rgba(31,26,23,.035); }
596
587
  .th-top { display:flex; align-items:baseline; gap:7px; min-width:0; }
597
588
  .th-party { font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
589
+ /* Message-count badge: a quiet filled pill, not an outlined circle — depth
590
+ from tint and light, numerals precisely centered and tabular. */
598
591
  .th-count {
599
- flex:0 0 auto; font-family:var(--mono); font-size:10.5px; color:var(--muted-2);
600
- border:1px solid rgba(31,26,23,.16); border-radius:999px; padding:2px 6px; line-height:1;
592
+ flex:0 0 auto; align-self:center;
593
+ font-family:var(--sans); font-size:9.5px; font-weight:650;
594
+ font-variant-numeric:tabular-nums; letter-spacing:.02em; line-height:1;
595
+ color:var(--accent);
596
+ background:color-mix(in srgb, var(--accent) 9%, transparent);
597
+ box-shadow:inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 14%, transparent);
598
+ border-radius:999px; padding:3px 6.5px; min-width:17px; text-align:center;
599
+ }
600
+ .th-item.unread .th-count {
601
+ color:#fff; background:var(--accent);
602
+ box-shadow:0 2px 5px -2px color-mix(in srgb, var(--accent) 55%, transparent);
603
+ }
604
+ .th-item.th-sent-only .th-count {
605
+ color:var(--muted); background:rgba(31,26,23,.055); box-shadow:none;
601
606
  }
602
607
  .th-unread {
603
608
  flex:0 0 auto; align-self:center; min-width:7px; height:7px; border-radius:999px;
@@ -1530,30 +1535,17 @@
1530
1535
  }
1531
1536
  }
1532
1537
 
1533
- // The two open actions, as one quiet panel: primary hands the relay to the
1534
- // live session, secondary starts a fresh one. Same markup for single relays
1535
- // and whole threads (labels shift); data attributes stay stable for wiring.
1536
- const OA_ICON_CURRENT = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h13M12 7l5 5-5 5"/><path d="M21 5v14"/></svg>';
1537
- const OA_ICON_FRESH = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>';
1538
+ // The two open actions, as one small text-first menu: primary hands the
1539
+ // relay to the live session, secondary starts a fresh one. Labels carry all
1540
+ // the meaning; data attributes stay stable for wiring and tests.
1538
1541
  function openActionsHtml(id, { thread } = {}) {
1539
1542
  const cur = thread ? `data-thread-open-current="${esc(id)}"` : `data-open-current="${esc(id)}"`;
1540
1543
  const fresh = thread ? `data-thread-open-fresh="${esc(id)}"` : `data-open-fresh="${esc(id)}"`;
1541
1544
  return `
1542
- <div class="open-actions row-open-card" data-stop="1">
1543
- <button class="oa-btn oa-primary" type="button" ${cur}>
1544
- <span class="oa-icon">${OA_ICON_CURRENT}</span>
1545
- <span class="oa-text">
1546
- <span class="oa-label">Open in current chat</span>
1547
- <span class="oa-sub">${thread ? "The whole conversation, handed to the session you’re in" : "Hands it to the session you’re already in"}</span>
1548
- </span>
1549
- </button>
1550
- <button class="oa-btn oa-ghost" type="button" ${fresh}>
1551
- <span class="oa-icon">${OA_ICON_FRESH}</span>
1552
- <span class="oa-text">
1553
- <span class="oa-label">Open in new chat</span>
1554
- <span class="oa-sub">${thread ? "A fresh session, seeded with every message" : "A fresh session, fully briefed"}</span>
1555
- </span>
1556
- </button>
1545
+ <div class="open-actions row-open-card" data-stop="1" role="menu">
1546
+ <button class="oa-item oa-primary" type="button" role="menuitem" ${cur}>${thread ? "Open Thread in Current Chat" : "Open in Current Chat"}</button>
1547
+ <div class="oa-sep" role="separator"></div>
1548
+ <button class="oa-item" type="button" role="menuitem" ${fresh}>${thread ? "Open Thread in New Chat" : "Open in New Chat"}</button>
1557
1549
  </div>`;
1558
1550
  }
1559
1551
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "relay-companion",
3
- "version": "0.1.67",
3
+ "version": "0.1.69",
4
4
  "description": "Relay companion for ordinary messages, with dormant coordination features available only by explicit opt-in.",
5
5
  "type": "module",
6
6
  "bin": {