refactor(hub-client): move attribution identity to render-time CSS

Mirror the CLI refactor (30d4692) on the hub-client side. `AttributionWrap`
drops the inline `style={{ color }}` and adds `data-attr-actor={record.actor}`;
`useAttributionHover` extends its `<style>` block with one
`[data-attr-actor="…"] { --attr-color; --attr-name; }` rule per
distinct actor in the lookup. The `viewer.css` cascade then paints
each wrap via `var(--attr-color)`. Badge stays React-driven from the
lookup context — only paint moves to CSS. The wire (`astContext.attribution`
+ `astContext.attributionActors`) is unchanged.

hub-client/src/components/render/framework/attribution.test.tsx

@@ -0,0 +1,60 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect } from 'vitest';
+import { buildActorStyles, cssEscape } from './attribution';
+import type { NodeAttributionIdentity } from './AttributionLookupContext';
+
+const sample = (
+    sid: number,
+    actor: string,
+    name: string,
+    color: string,
+): [number, NodeAttributionIdentity] => [
+    sid,
+    { actor, name, color, time: 0 },
+];
+
+describe('buildActorStyles', () => {
+    it('returns empty string when lookup is null', () => {
+        expect(buildActorStyles(null)).toBe('');
+    });
+
+    it('returns empty string when lookup has no entries', () => {
+        expect(buildActorStyles(new Map())).toBe('');
+    });
+
+    it('emits one rule per distinct actor, sorted ascending', () => {
+        // Three sid entries, two distinct actors. bob appears at the
+        // higher sid but must emit first (alphabetical).
+        const lookup = new Map<number, NodeAttributionIdentity>([
+            sample(1, 'bob', 'Bob', '#88CCEE'),
+            sample(2, 'alice', 'Alice', '#CC6677'),
+            sample(3, 'alice', 'Alice', '#CC6677'),
+        ]);
+        const css = buildActorStyles(lookup);
+        const aliceAt = css.indexOf('[data-attr-actor="alice"]');
+        const bobAt = css.indexOf('[data-attr-actor="bob"]');
+        expect(aliceAt).toBeGreaterThanOrEqual(0);
+        expect(bobAt).toBeGreaterThanOrEqual(0);
+        expect(aliceAt).toBeLessThan(bobAt);
+        // Exactly one rule per actor — two `data-attr-actor=` selectors.
+        expect((css.match(/\[data-attr-actor=/g) ?? []).length).toBe(2);
+        expect(css).toContain('--attr-color: #CC6677');
+        expect(css).toContain('--attr-name: "Alice"');
+        expect(css).toContain('--attr-color: #88CCEE');
+        expect(css).toContain('--attr-name: "Bob"');
+    });
+});
+
+describe('cssEscape', () => {
+    it('passes safe characters through unchanged', () => {
+        expect(cssEscape('alice@example.com')).toBe('alice@example.com');
+        expect(cssEscape("Alice O'Hara")).toBe("Alice O'Hara");
+        expect(cssEscape('日本語')).toBe('日本語');
+    });
+
+    it('escapes quote, backslash, newline, and carriage return', () => {
+        expect(cssEscape('a"b\\c\nd\re')).toBe('a\\"b\\\\c\\A d\\D e');
+    });
+});

hub-client/src/components/render/framework/attribution.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useRef, useState } from 'react';
+import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import {
     AttributionLookupContext,
     useNodeAttribution,
@@ -64,21 +64,73 @@ export function AttributionBadge({
  */
 export const attributionStyles = viewerCss;
 
+/**
+ * Escape a string for inclusion inside a double-quoted CSS string
+ * literal. Mirrors `escape_css_string` in
+ * `crates/quarto-core/src/transforms/attribution_viewer.rs` so the
+ * CLI HTML and the hub-client iframe stylesheet share a single
+ * escaping contract. Per CSS Syntax Level 3, only `"`, `\`, and raw
+ * line terminators need escaping inside `"…"`.
+ */
+export function cssEscape(input: string): string {
+    let out = '';
+    for (const ch of input) {
+        if (ch === '\\') out += '\\\\';
+        else if (ch === '"') out += '\\"';
+        else if (ch === '\n') out += '\\A ';
+        else if (ch === '\r') out += '\\D ';
+        else out += ch;
+    }
+    return out;
+}
+
+/**
+ * Build the per-actor CSS rule block that publishes
+ * `--attr-color` / `--attr-name` for each distinct identity in
+ * `lookup`. Returns an empty string when there are no identities to
+ * publish, so concatenation with the static `viewer.css` is safe.
+ *
+ * Mirrors `render_per_actor_rules` in
+ * `crates/quarto-core/src/transforms/attribution_viewer.rs` — same
+ * shape, same alphabetical ordering, same escaping contract — so a
+ * theme author who learns one surface knows the other.
+ */
+export function buildActorStyles(
+    lookup: Map<number, NodeAttributionIdentity> | null,
+): string {
+    if (!lookup) return '';
+    const seen = new Map<string, { name: string; color: string }>();
+    for (const record of lookup.values()) {
+        if (!seen.has(record.actor)) {
+            seen.set(record.actor, { name: record.name, color: record.color });
+        }
+    }
+    if (seen.size === 0) return '';
+    const entries = Array.from(seen.entries()).sort(([a], [b]) =>
+        a < b ? -1 : a > b ? 1 : 0,
+    );
+    let out = '\n';
+    for (const [actor, identity] of entries) {
+        out += `[data-attr-actor="${cssEscape(actor)}"] { --attr-color: ${identity.color}; --attr-name: "${cssEscape(identity.name)}"; }\n`;
+    }
+    return out;
+}
+
 /**
  * Wrap `children` in a `.q2-attr-wrap` element when the AST node has
  * resolved attribution; pass through unchanged otherwise.
  *
  * `as` selects a `<div>` (block-level wrapper) or `<span>` (inline-level
  * wrapper) — the only structural divergence between Block/Inline
- * dispatchers in q2-debug and q2-preview. `data-sid` is the lookup key
- * the event-delegated badge in `useAttributionHover` uses to find the
- * record for the hovered wrap.
+ * dispatchers in q2-debug and q2-preview.
  *
- * The wrapper paints body text in the author's colour (descendants
- * inherit via the cascade). The CLI's auto-injected viewer JS
- * (`resources/attribution/viewer.js`) does the same thing for static
- * HTML output via a `querySelectorAll` + `style.color` pass, so both
- * surfaces look the same on attributed regions.
+ * The wrap publishes two stable DOM hooks:
+ *   - `data-attr-actor` — matches the per-actor CSS rule emitted by
+ *     `useAttributionHover().stylesheet`, so the author colour
+ *     applies via the cascade (`viewer.css` paints `[data-attr-actor]`
+ *     via `var(--attr-color)`).
+ *   - `data-sid` — the source-info pool id, used by the hover handler
+ *     in `useAttributionHover` to look up the record for the badge.
  *
  * `node` is typed `unknown` to absorb the structural mismatch between
  * the framework's loose `{ s?: number }` lookup key and the
@@ -99,16 +151,23 @@ export function AttributionWrap({
     const attribution = useNodeAttribution(node as { s?: number });
     if (!attribution) return <>{children}</>;
     const sid = (node as { s?: number }).s;
-    const style = { color: attribution.color };
     if (as === 'div') {
         return (
-            <div className="q2-attr-wrap" data-sid={sid} style={style}>
+            <div
+                className="q2-attr-wrap"
+                data-sid={sid}
+                data-attr-actor={attribution.actor}
+            >
                 {children}
             </div>
         );
     }
     return (
-        <span className="q2-attr-wrap" data-sid={sid} style={style}>
+        <span
+            className="q2-attr-wrap"
+            data-sid={sid}
+            data-attr-actor={attribution.actor}
+        >
             {children}
         </span>
     );
@@ -172,7 +231,15 @@ export function useAttributionHover(): {
     const hostProps = enabled
         ? { onMouseOver: handleMouseOver, onMouseOut: handleMouseOut }
         : {};
-    const stylesheet = enabled ? <style>{attributionStyles}</style> : null;
+    // Per-actor rules derive from the same `attributionActors` table
+    // the lookup context was built from, so identity flows from one
+    // source — the wire — through React to CSS. No drift surface.
+    // Memoised so toggling Authorship off then on doesn't churn the
+    // stylesheet across unrelated re-renders.
+    const actorStyles = useMemo(() => buildActorStyles(lookup), [lookup]);
+    const stylesheet = enabled ? (
+        <style>{attributionStyles + actorStyles}</style>
+    ) : null;
     const overlay = hovered ? (
         <AttributionBadge
             record={hovered.record}

hub-client/src/components/render/q2-debug/attribution.integration.test.tsx

@@ -16,9 +16,11 @@ const noopSetAst = () => {};
  * Phase 5c — when `astContext.attribution` / `astContext.attributionActors`
  * are absent, the q2-debug renderer wraps no nodes and paints no colour.
  * When they're present, each annotated node gets a `q2-attr-wrap`
- * wrapper carrying `color: <identity.color>` and `data-sid=<s>`.
- * Hovering surfaces a single floating badge with the author's name
- * and a relative-time string.
+ * wrapper carrying `data-sid=<s>` (used for badge lookup) and
+ * `data-attr-actor=<actor>` (matched by the per-actor CSS rule the
+ * framework injects); the colour reaches the wrap via the cascade,
+ * not via an inline `style`. Hovering surfaces a single floating
+ * badge with the author's name and a relative-time string.
  *
  * Mounted via the framework `Ast` with the `q2DebugRegistry` so we
  * exercise the same wiring the iframe uses at runtime.
@@ -45,7 +47,7 @@ describe('q2-debug attribution wiring', () => {
     expect(container.textContent).toMatch(/hello/);
   });
 
-  it('on path: each annotated node gets a colour-only wrapper', () => {
+  it('on path: each annotated node gets a wrap with actor + sid', () => {
     const ast = {
       'pandoc-api-version': [1, 23, 1],
       meta: {},
@@ -75,11 +77,23 @@ describe('q2-debug attribution wiring', () => {
 
     for (const wrap of Array.from(wraps)) {
       const el = wrap as HTMLElement;
-      // Colour is applied as an inline style — JSDOM normalises rgb().
-      expect(el.style.color).toBe('rgb(255, 0, 0)');
+      // Identity is render-time CSS now: the wrap carries the
+      // per-actor selector key, not an inline colour. The cascade
+      // resolves `color: var(--attr-color)` from the injected rule.
+      expect(el.getAttribute('data-attr-actor')).toBe('alice');
       expect(el.getAttribute('data-sid')).toMatch(/^[12]$/);
+      expect(el.style.color).toBe('');
     }
 
+    // The framework injects a single per-render <style> carrying the
+    // static viewer.css plus the per-actor rule for "alice".
+    const styles = Array.from(container.querySelectorAll('style')).map(
+      (s) => s.textContent ?? '',
+    );
+    expect(
+      styles.some((s) => s.includes('[data-attr-actor="alice"]') && s.includes('--attr-color: #ff0000') && s.includes('--attr-name: "Alice"')),
+    ).toBe(true);
+
     // No badge yet — hover hasn't fired.
     expect(container.querySelector('.q2-attr-badge')).toBeNull();
   });

hub-client/src/components/render/q2-preview/attribution.integration.test.tsx

@@ -46,7 +46,7 @@ describe('q2-preview attribution wiring', () => {
     expect(container.textContent).toMatch(/hello/);
   });
 
-  it('on path: each annotated node gets a colour-only wrapper', () => {
+  it('on path: each annotated node gets a wrap with actor + sid', () => {
     const ast = {
       'pandoc-api-version': [1, 23, 1],
       meta: {},
@@ -76,11 +76,28 @@ describe('q2-preview attribution wiring', () => {
 
     for (const wrap of Array.from(wraps)) {
       const el = wrap as HTMLElement;
-      // Colour is applied as an inline style — JSDOM normalises rgb().
-      expect(el.style.color).toBe('rgb(255, 0, 0)');
+      // Identity is render-time CSS now: the wrap carries the
+      // per-actor selector key, not an inline colour. The cascade
+      // resolves `color: var(--attr-color)` from the injected rule.
+      expect(el.getAttribute('data-attr-actor')).toBe('alice');
       expect(el.getAttribute('data-sid')).toMatch(/^[12]$/);
+      expect(el.style.color).toBe('');
     }
 
+    // The framework injects a single per-render <style> carrying the
+    // static viewer.css plus the per-actor rule for "alice".
+    const styles = Array.from(container.querySelectorAll('style')).map(
+      (s) => s.textContent ?? '',
+    );
+    expect(
+      styles.some(
+        (s) =>
+          s.includes('[data-attr-actor="alice"]') &&
+          s.includes('--attr-color: #ff0000') &&
+          s.includes('--attr-name: "Alice"'),
+      ),
+    ).toBe(true);
+
     // No badge yet — hover hasn't fired.
     expect(container.querySelector('.q2-attr-badge')).toBeNull();
   });