@marver-design/marver 0.12.0 → 0.13.0

package/src/client/shell/styles.css

@@ -7,6 +7,7 @@
   --accent: #0088ff; --accent-ring: rgba(0, 136, 255, .2); --beam: rgba(0, 136, 255, .42); --beam-blur: 6px; --beam-bottom: -13px; --beam-h: 12px; --beam-inset: 12%; --edge-accent: rgba(0, 136, 255, .8); --inner-tint: rgba(0, 136, 255, .13); --tip-bg: #18181b; --tip-ink: #fafafa; --accent-wash: rgba(0, 136, 255, .07);
 
   --glass: rgba(255, 255, 255, .64);
+  --solid: #ffffff;
   --glass-brd: rgba(24, 24, 27, .1);
   --glass-ink: #18181b;
   --glass-ink-2: rgba(24, 24, 27, .66);
@@ -46,6 +47,7 @@
   --accent: #0088ff; --accent-ring: rgba(0, 136, 255, .32); --beam: rgba(0, 136, 255, .5); --beam-blur: 3px; --beam-bottom: -13px; --beam-h: 16px; --beam-inset: 20%; --edge-accent: rgba(92, 179, 255, .85); --inner-tint: rgba(92, 179, 255, .16); --tip-bg: #f4f4f5; --tip-ink: #18181b; --accent-wash: rgba(0, 136, 255, .14);
 
   --glass: rgba(12, 12, 17, .72);
+  --solid: #17171b;
   --glass-brd: rgba(255, 255, 255, .16);
   --glass-ink: #f5f5f7;
   --glass-ink-2: rgba(245, 245, 247, .64);
@@ -1121,6 +1123,21 @@ body.sh-hide-ui .sh-play-hint { display: none !important }
 .cm-hl .cm-at { font-weight: inherit; -webkit-text-stroke: .4px currentColor }
 .cm-at-tip { display: block; max-width: 220px; line-height: 1.4 }
 
+/* v1.1: @Person mentions - the comment accent, medium weight (the mirror rule above
+   already keeps composer metrics honest: color + stroke only, never font-weight). */
+.cm-at.person { color: var(--cm-line, var(--comment)); font-weight: 600 }
+.cm-hl .cm-at.person { font-weight: inherit }
+/* The typeahead: a small glass list ABOVE the composer; rows follow the pick. */
+/* SOLID, never glass: the picker floats over thread text, and translucency
+   made the names unreadable */
+.cm-mentionlist { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; min-width: 180px; max-width: 260px;
+  display: flex; flex-direction: column; padding: 4px; border-radius: 10px;
+  background: var(--solid); border: 1px solid var(--glass-brd); box-shadow: 0 10px 28px rgba(0,0,0,.22) }
+.cm-mentionlist button { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 7px;
+  background: none; color: var(--glass-ink); font: 500 12.5px/1.2 inherit; text-align: left; cursor: pointer; white-space: nowrap }
+.cm-mentionlist button span { overflow: hidden; text-overflow: ellipsis }
+.cm-mentionlist button.on { background: var(--glass-hover) }
+
 /* Marver identity: the agent's avatar mark + provenance tooltip (§7). Always accent, never a hue. */
 .cm-avatar.cm-marver { background: var(--mv-blue); color: rgba(255,255,255,.9); cursor: default }   /* white/90 mark, embedded in the accent */
 .cm-marver-wrap { display: inline-flex; border-radius: 50% }
@@ -1208,3 +1225,27 @@ body.sh-hide-ui .sh-play-hint { display: none !important }
    its children (pins, cards, stacks) fully interactive */
 .cm-layer { position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 25 }
 .cm-layer > * { pointer-events: auto }
+
+/* v1.1: an unseen mention of YOU pulses the pin - accent lights until the
+   thread is opened (opening marks it seen). Motion-reduced readers keep a
+   steady accent ring instead of the pulse. */
+.cm-pin.mention, .cm-stack.mention { outline: 2px solid var(--accent); outline-offset: 1px;
+  animation: cm-mention-pulse 1.7s ease-out infinite }
+@keyframes cm-mention-pulse {
+  0% { box-shadow: 0 0 0 0 var(--accent-ring), 0 0 0 0 rgba(0, 136, 255, .45) }
+  70% { box-shadow: 0 0 0 6px rgba(0, 136, 255, 0), 0 0 0 12px rgba(0, 136, 255, 0) }
+  100% { box-shadow: 0 0 0 0 rgba(0, 136, 255, 0), 0 0 0 0 rgba(0, 136, 255, 0) }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cm-pin.mention, .cm-stack.mention { animation: none }
+}
+/* a mention of YOU inside a thread: the loudest chip - accent, heavier */
+.cm-at.person.me { color: var(--accent); font-weight: 700 }
+
+/* human notification pill: the author's face, then "name mentioned you".
+   The face outsizes the agent mark (34px) on purpose - a person is the news. */
+.sh-jam-ava { width: 36px; height: 36px; border-radius: 999px; object-fit: cover; flex: none }
+.sh-jam-ava.init { display: inline-flex; align-items: center; justify-content: center;
+  color: rgba(255,255,255,.92); font: 700 13px/1 -apple-system, system-ui, sans-serif; letter-spacing: .02em }
+/* the title row is flex, which swallows the JSX whitespace - the verb carries its own gap */
+.sh-jam-frame .v { color: var(--glass-ink-2); font-weight: 500; margin-left: 4px; flex: none }

package/src/shared/events.ts

@@ -10,6 +10,13 @@ export type EventType = 'create' | 'reply' | 'edit' | 'resolve' | 'reopen' | 're
 // Live Jam: provenance stamped by the daemon on agent-authored events (who orchestrated the change).
 export interface AgentMeta { devUser?: string; harness?: string; model?: string; effort?: string }
 
+/** A person named in a comment (sharing v1.1). Splits exactly like `author`:
+ *  canonical logs carry `email`, browser transports carry `id` (the same
+ *  opaque per-canvas HMAC) - exactly one of the two is present. `label` is the
+ *  display name the composer inserted (bodies stay plain text; rendering
+ *  highlights `@label` runs by matching it). */
+export interface Mention { email?: string; id?: string; label: string }
+
 export interface CommentEvent {
   id: string                      // client-generated UUID - the idempotency key
   ts: number                      // ms epoch at creation
@@ -25,6 +32,7 @@ export interface CommentEvent {
    *  travels to another viewer's browser. Exactly one of the two is present. */
   author?: { email?: string; id?: string; name?: string; avatar?: string }
   body?: string                   // plain text in v1
+  mentions?: Mention[]            // create/reply only - people named in the body (v1.1)
   emoji?: string                  // react events
   addressedIn?: string            // resolve events: the variant frame that answered
   // --- Live Jam additions ---
@@ -44,7 +52,8 @@ export interface Thread {
   addressedIn?: string
   agent?: boolean                 // root authored by the agent
   agentMeta?: AgentMeta
-  replies: { id: string; author?: CommentEvent['author']; body?: string; ts: number; agent?: boolean; agentMeta?: AgentMeta }[]
+  mentions?: Mention[]
+  replies: { id: string; author?: CommentEvent['author']; body?: string; ts: number; agent?: boolean; agentMeta?: AgentMeta; mentions?: Mention[] }[]
   reactions: Record<string, string[]>   // emoji -> author emails (toggle semantics)
 }
 
@@ -67,7 +76,7 @@ export function replay(events: CommentEvent[]): Thread[] {
     threads.set(ev.commentId, {
       id: ev.commentId, board: ev.board, nodeKey: ev.nodeKey, frame: ev.frame,
       anchor: ev.anchor, author: ev.author, body: ev.body, ts: ev.ts,
-      resolved: false, agent: ev.agent, agentMeta: ev.agentMeta, replies: [], reactions: {},
+      resolved: false, agent: ev.agent, agentMeta: ev.agentMeta, mentions: ev.mentions, replies: [], reactions: {},
     })
   }
   for (const ev of ordered) {
@@ -75,7 +84,7 @@ export function replay(events: CommentEvent[]): Thread[] {
       case 'reply': {
         const t = ev.parentId ? threads.get(ev.parentId) : undefined
         if (!t || !ev.commentId || t.replies.some((r) => r.id === ev.commentId)) break
-        t.replies.push({ id: ev.commentId, author: ev.author, body: ev.body, ts: ev.ts, agent: ev.agent, agentMeta: ev.agentMeta })
+        t.replies.push({ id: ev.commentId, author: ev.author, body: ev.body, ts: ev.ts, agent: ev.agent, agentMeta: ev.agentMeta, mentions: ev.mentions })
         break
       }
       case 'edit': {