@beyondwork/docx-react-component 1.0.53 → 1.0.55

package/src/ui-tailwind/chart/render/smooth-curve.ts

@@ -0,0 +1,101 @@
+/**
+ * Smooth-curve helper — Catmull-Rom → cubic Bézier (Stage 4 Slice 4B, B4).
+ *
+ * Emits an SVG path string for a smoothed polyline through the given
+ * points. Word's `c:smooth` switch produces a Bezier/Catmull-Rom family
+ * curve (per blog.splitwise.com / walice/beziersplines reverse-
+ * engineering); LibreOffice uses a cubic natural spline. We use
+ * Catmull-Rom with tension=0.5 (the canonical choice that matches
+ * Word's output within ~1-2 pixels at 100% zoom for typical 4-20 knot
+ * datasets).
+ *
+ * The conversion Catmull-Rom → cubic Bézier emits a sequence of `C`
+ * commands between every pair of adjacent knots, computing control
+ * points from the 4-point sliding window (p[i-1], p[i], p[i+1], p[i+2])
+ * with endpoint reflection for the first/last segments.
+ *
+ * Falls back to a simple polyline (`M … L …`) for n < 3.
+ */
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export type Point = readonly [number, number];
+
+export interface SmoothCurveOptions {
+  /**
+   * Catmull-Rom tension. 0.5 = centripetal-ish; 0 = uniform; 1 = chordal.
+   * Word's observed behavior matches tension ≈ 0.5.
+   */
+  tension?: number;
+}
+
+/**
+ * Return an SVG path `d` string for a smoothed curve through `points`.
+ *
+ *   n=0 → "" (no path)
+ *   n=1 → "M x y" (single-point marker)
+ *   n=2 → "M x1 y1 L x2 y2" (straight line)
+ *   n≥3 → "M x0 y0 C cp1x cp1y cp2x cp2y x1 y1 C …"
+ *
+ * The first and last segments reflect their neighbors (no virtual
+ * overshoot), matching Word's endpoint behavior.
+ */
+export function smoothPath(points: ReadonlyArray<Point>, options: SmoothCurveOptions = {}): string {
+  if (points.length === 0) return "";
+  if (points.length === 1) return `M ${fmt(points[0]![0])} ${fmt(points[0]![1])}`;
+  if (points.length === 2) {
+    return `M ${fmt(points[0]![0])} ${fmt(points[0]![1])} L ${fmt(points[1]![0])} ${fmt(points[1]![1])}`;
+  }
+  const tension = options.tension ?? 0.5;
+  const parts: string[] = [`M ${fmt(points[0]![0])} ${fmt(points[0]![1])}`];
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = i === 0 ? reflect(points[1]!, points[0]!) : points[i - 1]!;
+    const p1 = points[i]!;
+    const p2 = points[i + 1]!;
+    const p3 = i === points.length - 2 ? reflect(points[i]!, points[i + 1]!) : points[i + 2]!;
+    const cp1 = controlPoint(p0, p1, p2, tension);
+    const cp2 = controlPoint(p3, p2, p1, tension);
+    parts.push(
+      `C ${fmt(cp1[0])} ${fmt(cp1[1])} ${fmt(cp2[0])} ${fmt(cp2[1])} ${fmt(p2[0])} ${fmt(p2[1])}`,
+    );
+  }
+  return parts.join(" ");
+}
+
+// ---------------------------------------------------------------------------
+// Implementation
+// ---------------------------------------------------------------------------
+
+/**
+ * Compute a Catmull-Rom control point for the segment from p1 to p2.
+ * The control point lives at `p1 + (p2 - p0) * tension / 3`, which is
+ * the classic conversion of a Catmull-Rom tangent into a cubic-Bézier
+ * handle.
+ */
+function controlPoint(p0: Point, p1: Point, p2: Point, tension: number): Point {
+  return [
+    p1[0] + ((p2[0] - p0[0]) * tension) / 3,
+    p1[1] + ((p2[1] - p0[1]) * tension) / 3,
+  ];
+}
+
+/**
+ * Reflect `ref` across `anchor` to produce the "virtual" point used at
+ * polyline endpoints (so the curve's tangent at the endpoint matches
+ * the chord, preventing overshoot).
+ */
+function reflect(ref: Point, anchor: Point): Point {
+  return [2 * anchor[0] - ref[0], 2 * anchor[1] - ref[1]];
+}
+
+/**
+ * Format a number to at most 3 decimal places without trailing zeros.
+ * Keeps SVG path strings compact and deterministic.
+ */
+function fmt(n: number): string {
+  if (!Number.isFinite(n)) return "0";
+  const rounded = Math.round(n * 1000) / 1000;
+  return rounded === 0 ? "0" : String(rounded);
+}

package/src/ui-tailwind/chart/render/svg-primitives.ts

@@ -0,0 +1,378 @@
+/**
+ * SVG element helpers for chart rendering (Stage 3B).
+ *
+ * Each helper returns a plain object (`React.createElement` props) rather
+ * than JSX so this file stays free of the `.tsx` extension and its build
+ * dependency. Chart renderer components assemble the returned props into
+ * JSX:
+ *
+ *   const r = svgRect({ x, y, w, h, fill, defs });
+ *   // → <rect {...r} />
+ *
+ * Gradient fills auto-register into the `DefsRegistry` passed via `defs`
+ * and emit `fill="url(#<id>)"`. Callers must render `defsRegistry.toElement()`
+ * inside a `<defs>` block at the root of the SVG.
+ *
+ * Color resolution uses `resolveColor(ref, theme)` from Stage 2 so renderers
+ * never need to import resolve-color directly.
+ *
+ * Stroke widths are stored in EMU (English Metric Units) on the model but
+ * converted to pt for SVG: 1 pt = 12700 EMU.
+ */
+
+import { resolveColor } from "../../../io/ooxml/chart/resolve-color.ts";
+import type {
+  FillSpec,
+  StrokeSpec,
+  ColorRef,
+} from "../../../io/ooxml/chart/types.ts";
+import type { ResolvedTheme } from "../../../model/canonical-document.ts";
+
+// ---------------------------------------------------------------------------
+// DefsRegistry — collects gradient / pattern defs for the SVG <defs> block
+// ---------------------------------------------------------------------------
+
+const EMU_PER_PT = 12700;
+
+/**
+ * Deterministic ID generator using FNV-1a (32-bit). Ensures gradient IDs
+ * are stable across renders for Stage 7 pixel-diff (no Math.random / counter
+ * state that drifts between runs).
+ */
+function fnv1a32(str: string): string {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < str.length; i++) {
+    hash ^= str.charCodeAt(i);
+    hash = (Math.imul(hash, 0x01000193) >>> 0);
+  }
+  return hash.toString(16).padStart(8, "0");
+}
+
+export interface GradientStop {
+  offset: number; // 0–1
+  color: string;  // resolved "#RRGGBB"
+}
+
+interface DefsEntry {
+  kind: "linearGradient";
+  id: string;
+  angle: number;
+  stops: GradientStop[];
+}
+
+export class DefsRegistry {
+  private readonly entries = new Map<string, DefsEntry>();
+
+  /**
+   * Register a linear gradient and return its `id`. If an identical
+   * gradient was already registered, the existing `id` is returned
+   * without creating a duplicate.
+   */
+  registerGradient(stops: GradientStop[], angleDeg: number): string {
+    const key = stops.map((s) => `${s.offset}:${s.color}`).join("|") + `@${angleDeg}`;
+    const id = `grad-${fnv1a32(key)}`;
+    if (!this.entries.has(id)) {
+      this.entries.set(id, { kind: "linearGradient", id, angle: angleDeg, stops });
+    }
+    return id;
+  }
+
+  /** Serialise all registered defs to an SVG attribute-object map array. */
+  toDefsEntries(): ReadonlyArray<DefsEntry> {
+    return Array.from(this.entries.values());
+  }
+
+  /** True when no defs have been registered. */
+  isEmpty(): boolean {
+    return this.entries.size === 0;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Fill / stroke resolution helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolve a `FillSpec` → SVG fill attribute string + optional gradient
+ * registration.
+ */
+export function resolveFill(
+  fill: FillSpec | undefined,
+  theme: ResolvedTheme | undefined,
+  defs: DefsRegistry,
+): string {
+  if (!fill || fill.kind === "auto") return "#808080";
+  if (fill.kind === "none") return "none";
+  if (fill.kind === "solid") {
+    return resolveColorSafe(fill.color, theme);
+  }
+  if (fill.kind === "gradient") {
+    const stops: GradientStop[] = fill.stops.map((s) => ({
+      offset: Math.max(0, Math.min(1, s.pos / 100)),
+      color: resolveColorSafe(s.color, theme),
+    }));
+    const angle = fill.angle ?? 0;
+    return `url(#${defs.registerGradient(stops, angle)})`;
+  }
+  return "#808080";
+}
+
+/** Resolve a `StrokeSpec` → SVG stroke attribute string. */
+export function resolveStroke(
+  stroke: StrokeSpec | undefined,
+  theme: ResolvedTheme | undefined,
+): string {
+  if (!stroke || stroke.noFill) return "none";
+  if (!stroke.color) return "none";
+  return resolveColorSafe(stroke.color, theme);
+}
+
+/** Resolve stroke width EMU → pt string for SVG `stroke-width`. */
+export function resolveStrokeWidthPt(
+  stroke: StrokeSpec | undefined,
+): number {
+  if (!stroke || stroke.noFill) return 0;
+  if (!stroke.widthEmu) return 0.75; // Word default thin stroke
+  return stroke.widthEmu / EMU_PER_PT;
+}
+
+function resolveColorSafe(ref: ColorRef, theme: ResolvedTheme | undefined): string {
+  return resolveColor(ref, theme ?? { colors: {} });
+}
+
+// ---------------------------------------------------------------------------
+// SVG element attribute helpers
+// ---------------------------------------------------------------------------
+
+export interface PrimitiveProps {
+  theme: ResolvedTheme | undefined;
+  defs: DefsRegistry;
+}
+
+export interface RectAttrs {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  fill: string;
+  stroke: string;
+  strokeWidth: number;
+  "data-role"?: string;
+}
+
+export function svgRect(opts: {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  fill?: FillSpec;
+  stroke?: StrokeSpec;
+  role?: string;
+} & PrimitiveProps): RectAttrs {
+  const fillStr = resolveFill(opts.fill, opts.theme, opts.defs);
+  const strokeStr = resolveStroke(opts.stroke, opts.theme);
+  const sw = resolveStrokeWidthPt(opts.stroke);
+  const attrs: RectAttrs = {
+    x: opts.x,
+    y: opts.y,
+    width: opts.w,
+    height: opts.h,
+    fill: fillStr,
+    stroke: strokeStr,
+    strokeWidth: sw,
+  };
+  if (opts.role) attrs["data-role"] = opts.role;
+  return attrs;
+}
+
+export interface LineAttrs {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  stroke: string;
+  strokeWidth: number;
+  strokeDasharray?: string;
+  "data-role"?: string;
+}
+
+export function svgLine(opts: {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  stroke?: StrokeSpec;
+  role?: string;
+} & PrimitiveProps): LineAttrs {
+  const strokeStr = resolveStroke(opts.stroke, opts.theme);
+  const sw = resolveStrokeWidthPt(opts.stroke);
+  const dash = opts.stroke?.dash ? dashArray(opts.stroke.dash, sw) : undefined;
+  const attrs: LineAttrs = {
+    x1: opts.x1,
+    y1: opts.y1,
+    x2: opts.x2,
+    y2: opts.y2,
+    stroke: strokeStr,
+    strokeWidth: sw,
+  };
+  if (dash) attrs.strokeDasharray = dash;
+  if (opts.role) attrs["data-role"] = opts.role;
+  return attrs;
+}
+
+export interface CircleAttrs {
+  cx: number;
+  cy: number;
+  r: number;
+  fill: string;
+  stroke: string;
+  strokeWidth: number;
+  "data-role"?: string;
+}
+
+export function svgCircle(opts: {
+  cx: number;
+  cy: number;
+  r: number;
+  fill?: FillSpec;
+  stroke?: StrokeSpec;
+  role?: string;
+} & PrimitiveProps): CircleAttrs {
+  const attrs: CircleAttrs = {
+    cx: opts.cx,
+    cy: opts.cy,
+    r: opts.r,
+    fill: resolveFill(opts.fill, opts.theme, opts.defs),
+    stroke: resolveStroke(opts.stroke, opts.theme),
+    strokeWidth: resolveStrokeWidthPt(opts.stroke),
+  };
+  if (opts.role) attrs["data-role"] = opts.role;
+  return attrs;
+}
+
+export interface PathAttrs {
+  d: string;
+  fill: string;
+  stroke: string;
+  strokeWidth: number;
+  strokeDasharray?: string;
+  fillRule?: "nonzero" | "evenodd";
+  "data-role"?: string;
+}
+
+export function svgPath(opts: {
+  d: string;
+  fill?: FillSpec;
+  stroke?: StrokeSpec;
+  fillRule?: "nonzero" | "evenodd";
+  role?: string;
+} & PrimitiveProps): PathAttrs {
+  const sw = resolveStrokeWidthPt(opts.stroke);
+  const dash = opts.stroke?.dash ? dashArray(opts.stroke.dash, sw) : undefined;
+  const attrs: PathAttrs = {
+    d: opts.d,
+    fill: resolveFill(opts.fill, opts.theme, opts.defs),
+    stroke: resolveStroke(opts.stroke, opts.theme),
+    strokeWidth: sw,
+  };
+  if (dash) attrs.strokeDasharray = dash;
+  if (opts.fillRule) attrs.fillRule = opts.fillRule;
+  if (opts.role) attrs["data-role"] = opts.role;
+  return attrs;
+}
+
+export interface TextAttrs {
+  x: number;
+  y: number;
+  fill: string;
+  fontFamily: string;
+  fontSize: number;
+  fontWeight: string;
+  fontStyle: string;
+  textAnchor: "start" | "middle" | "end";
+  dominantBaseline: "auto" | "middle" | "hanging";
+  transform?: string;
+  "data-role"?: string;
+}
+
+export function svgText(opts: {
+  x: number;
+  y: number;
+  fontFamily?: string;
+  fontSizePt?: number;
+  bold?: boolean;
+  italic?: boolean;
+  color?: ColorRef;
+  anchor?: "start" | "middle" | "end";
+  baseline?: "auto" | "middle" | "hanging";
+  rotate?: number;
+  role?: string;
+} & PrimitiveProps): TextAttrs {
+  const PT_TO_PX = 96 / 72;
+  const attrs: TextAttrs = {
+    x: opts.x,
+    y: opts.y,
+    fill: opts.color ? resolveColorSafe(opts.color, opts.theme) : "currentColor",
+    fontFamily: opts.fontFamily ?? "Calibri, Carlito, 'Segoe UI', Arial, sans-serif",
+    fontSize: (opts.fontSizePt ?? 10) * PT_TO_PX,
+    fontWeight: opts.bold ? "bold" : "normal",
+    fontStyle: opts.italic ? "italic" : "normal",
+    textAnchor: opts.anchor ?? "start",
+    dominantBaseline: opts.baseline ?? "auto",
+  };
+  if (opts.rotate !== undefined && opts.rotate !== 0) {
+    attrs.transform = `rotate(${opts.rotate},${opts.x},${opts.y})`;
+  }
+  if (opts.role) attrs["data-role"] = opts.role;
+  return attrs;
+}
+
+export interface PolygonAttrs {
+  points: string;
+  fill: string;
+  stroke: string;
+  strokeWidth: number;
+  "data-role"?: string;
+}
+
+export function svgPolygon(opts: {
+  points: Array<[number, number]>;
+  fill?: FillSpec;
+  stroke?: StrokeSpec;
+  role?: string;
+} & PrimitiveProps): PolygonAttrs {
+  const pointsStr = opts.points.map(([x, y]) => `${x},${y}`).join(" ");
+  const attrs: PolygonAttrs = {
+    points: pointsStr,
+    fill: resolveFill(opts.fill, opts.theme, opts.defs),
+    stroke: resolveStroke(opts.stroke, opts.theme),
+    strokeWidth: resolveStrokeWidthPt(opts.stroke),
+  };
+  if (opts.role) attrs["data-role"] = opts.role;
+  return attrs;
+}
+
+// ---------------------------------------------------------------------------
+// Dash-array helper
+// ---------------------------------------------------------------------------
+
+type DashPattern = NonNullable<StrokeSpec["dash"]>;
+
+/**
+ * Convert an OOXML dash name to an SVG `stroke-dasharray` value scaled
+ * to the given stroke width. Patterns are approximate matches to Word's
+ * rendering.
+ */
+function dashArray(dash: DashPattern, strokeWidth: number): string {
+  const sw = Math.max(0.5, strokeWidth);
+  const patterns: Record<DashPattern, string> = {
+    solid: "",
+    dash: `${4 * sw} ${2 * sw}`,
+    dashDot: `${4 * sw} ${1.5 * sw} ${sw} ${1.5 * sw}`,
+    lgDash: `${8 * sw} ${3 * sw}`,
+    lgDashDot: `${8 * sw} ${3 * sw} ${sw} ${3 * sw}`,
+    sysDash: `${3 * sw} ${sw}`,
+    sysDashDot: `${3 * sw} ${sw} ${sw} ${sw}`,
+  };
+  return patterns[dash] ?? "";
+}

package/src/ui-tailwind/chart/render/unsupported.tsx

@@ -0,0 +1,126 @@
+/**
+ * Unsupported-chart fallback renderer (Stage 4 Slice 4H).
+ *
+ * Two paths:
+ *   1. `previewMediaId` present — render the fallback bitmap Word cached
+ *      in `mc:Fallback`. The host passes a `mediaUrl` resolver via the
+ *      surrounding runtime; when none is provided, we fall through to
+ *      the typed badge.
+ *   2. No preview available — render a grey rounded-rect typed badge
+ *      sized to the reserved chart rectangle. The badge shows the chart
+ *      type (`"Unsupported chart"` plus the parser's `reason` detail).
+ *
+ * This is the Stage 4 floor: every `ChartModel` with `kind:
+ * "unsupported"` gets a predictable, sized placeholder so chart slots
+ * in the document never collapse to zero-height.
+ */
+
+import React from "react";
+import type { UnsupportedChartModel } from "../../../io/ooxml/chart/types.ts";
+import type { ResolvedTheme } from "../../../model/canonical-document.ts";
+import type { PlotAreaLayout } from "../layout/plot-area.ts";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export interface UnsupportedChartProps {
+  model: UnsupportedChartModel;
+  layout: PlotAreaLayout;
+  theme: ResolvedTheme | undefined;
+  /**
+   * Optional resolver — caller provides URL for `previewMediaId`.
+   * When absent, the typed-badge fallback renders.
+   */
+  resolveMediaUrl?: (mediaId: string) => string | undefined;
+  /** Optional preview-media ID threaded by the surface layer. */
+  previewMediaId?: string;
+}
+
+function UnsupportedChartImpl({
+  model,
+  layout,
+  resolveMediaUrl,
+  previewMediaId,
+  theme,
+}: UnsupportedChartProps): React.ReactElement {
+  void theme;
+  const rect = layout.plotRect;
+  const url = previewMediaId && resolveMediaUrl ? resolveMediaUrl(previewMediaId) : undefined;
+  if (url) {
+    return (
+      <image
+        x={rect.x}
+        y={rect.y}
+        width={rect.w}
+        height={rect.h}
+        href={url}
+        preserveAspectRatio="xMidYMid meet"
+        data-role="chart-fallback-image"
+      />
+    );
+  }
+  return (
+    <g data-role="chart-unsupported" data-reason={model.reason}>
+      <rect
+        x={rect.x}
+        y={rect.y}
+        width={rect.w}
+        height={rect.h}
+        rx={4}
+        ry={4}
+        fill="#F2F2F2"
+        stroke="#BFBFBF"
+        strokeWidth={1}
+        strokeDasharray="4 2"
+      />
+      <text
+        x={rect.x + rect.w / 2}
+        y={rect.y + rect.h / 2 - 4}
+        textAnchor="middle"
+        fontSize={13}
+        fill="#595959"
+        data-role="chart-unsupported-title"
+      >
+        Unsupported chart
+      </text>
+      <text
+        x={rect.x + rect.w / 2}
+        y={rect.y + rect.h / 2 + 14}
+        textAnchor="middle"
+        fontSize={10}
+        fill="#808080"
+        data-role="chart-unsupported-detail"
+      >
+        {describeReason(model)}
+      </text>
+    </g>
+  );
+}
+
+export const UnsupportedChart = React.memo(
+  UnsupportedChartImpl,
+  (prev, next) =>
+    prev.model.rawXml === next.model.rawXml &&
+    prev.layout.plotRect.w === next.layout.plotRect.w &&
+    prev.layout.plotRect.h === next.layout.plotRect.h &&
+    prev.previewMediaId === next.previewMediaId,
+);
+
+function describeReason(model: UnsupportedChartModel): string {
+  const map: Record<UnsupportedChartModel["reason"], string> = {
+    "not-yet-implemented": "Not yet implemented",
+    pivot: "Pivot chart",
+    stock: "Stock chart",
+    surface: "Surface chart",
+    treemap: "Treemap",
+    sunburst: "Sunburst",
+    histogram: "Histogram",
+    waterfall: "Waterfall",
+    funnel: "Funnel",
+    map: "Map",
+    "no-plot-area": "No plot area",
+    "parse-error": "Chart could not be parsed",
+  };
+  return map[model.reason] ?? "Unsupported chart type";
+}

package/src/ui-tailwind/chrome/collab-audience-chip.tsx

@@ -41,6 +41,17 @@ export function CollabAudienceChip({
     "tw-collab-audience-chip",
     audience ? `tw-collab-audience-chip--${audience}` : "tw-collab-audience-chip--empty",
     disabled ? "tw-collab-audience-chip--disabled" : null,
+    // Lane 6b §6b.S6 — calm chip; disabled = dim tertiary text.  BEM
+    // classes above remain as hooks for host CSS to tint by audience.
+    "inline-flex items-center px-2 py-0.5",
+    "rounded-[var(--radius-pill)]",
+    "bg-[var(--color-bg-muted)] text-[var(--color-text-secondary)]",
+    "text-[11px] font-medium capitalize",
+    "transition-colors duration-[var(--motion-fast)]",
+    "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]",
+    disabled
+      ? "opacity-60 text-[var(--color-text-tertiary)] cursor-not-allowed"
+      : "hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-primary)] cursor-pointer",
     className ?? null,
   ]
     .filter((v): v is string => v !== null)

package/src/ui-tailwind/chrome/collab-negotiation-action-bar.tsx

@@ -58,6 +58,11 @@ export function CollabNegotiationActionBar({
     "tw-collab-negotiation-action-bar",
     `tw-collab-negotiation-action-bar--${state}`,
     blocked ? "tw-collab-negotiation-action-bar--blocked" : null,
+    // Lane 6b §6b.S6 — calm toolbar row; blocked state dims.
+    "inline-flex items-center gap-1 px-2 py-1",
+    "text-[11px] text-[var(--color-text-secondary)]",
+    "transition-colors duration-[var(--motion-fast)]",
+    blocked ? "opacity-60" : null,
     className ?? null,
   ]
     .filter((v): v is string => v !== null)
@@ -85,24 +90,45 @@ export function CollabNegotiationActionBar({
           No active comment
         </span>
       ) : (
-        buttons.map((btn) => (
-          <button
-            key={btn.id}
-            type="button"
-            className={`tw-collab-negotiation-action-bar__button tw-collab-negotiation-action-bar__button--${btn.id}`}
-            data-testid={`collab-negotiation-action-${btn.id}`}
-            data-action-id={btn.id}
-            disabled={blocked || btn.disabled}
-            aria-disabled={blocked || btn.disabled ? "true" : undefined}
-            title={btn.title}
-            onClick={() => {
-              if (blocked || btn.disabled) return;
-              onDispatch(btn.build());
-            }}
-          >
-            {btn.label}
-          </button>
-        ))
+        buttons.map((btn) => {
+          // Lane 6b §6b.S6 — semantic tone per action class:
+          //   accept / vote-approve → accent primary (the "go" action)
+          //   reject / vote-reject  → semantic error soft tint
+          //   lock / reopen / propose / counter → calm secondary
+          const toneClass =
+            btn.id === "accept" || btn.id === "vote-approve"
+              ? "bg-[var(--color-accent-primary)] text-[var(--color-text-on-accent)] hover:bg-[var(--color-accent-primary-hover)]"
+              : btn.id === "reject" || btn.id === "vote-reject"
+                ? "bg-[var(--color-semantic-error-soft)] text-[var(--color-semantic-error)] hover:bg-[var(--color-semantic-error-soft)]/80"
+                : "bg-[var(--color-bg-muted)] text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-primary)]";
+          return (
+            <button
+              key={btn.id}
+              type="button"
+              className={[
+                "tw-collab-negotiation-action-bar__button",
+                `tw-collab-negotiation-action-bar__button--${btn.id}`,
+                "inline-flex items-center rounded-[var(--radius-sm)]",
+                "px-2 py-1 text-[11px] font-medium",
+                "transition-colors duration-[var(--motion-fast)]",
+                "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]",
+                "disabled:opacity-40 disabled:cursor-not-allowed",
+                toneClass,
+              ].join(" ")}
+              data-testid={`collab-negotiation-action-${btn.id}`}
+              data-action-id={btn.id}
+              disabled={blocked || btn.disabled}
+              aria-disabled={blocked || btn.disabled ? "true" : undefined}
+              title={btn.title}
+              onClick={() => {
+                if (blocked || btn.disabled) return;
+                onDispatch(btn.build());
+              }}
+            >
+              {btn.label}
+            </button>
+          );
+        })
       )}
     </div>
   );