@beyondwork/docx-react-component 1.0.52 → 1.0.54

package/src/ui/headless/revision-decoration-model.ts

@@ -1,5 +1,9 @@
 import type { TrackedChangesSnapshot, TrackedChangeEntrySnapshot } from "../../api/public-types";
-import { rangesOverlap, type MarkupDisplay } from "./comment-decoration-model";
+import {
+  normalizeMarkupDisplay,
+  rangesOverlap,
+  type MarkupDisplay,
+} from "./comment-decoration-model";
 
 export interface RevisionDecorationModel {
   revisions: RevisionDecorationEntry[];
@@ -13,6 +17,65 @@ export interface RevisionDecorationEntry {
   status: TrackedChangeEntrySnapshot["status"];
   actionability: TrackedChangeEntrySnapshot["actionability"];
   isActive: boolean;
+  /** L6d.N3 — source author, used to pick the decoration color. */
+  authorId?: string;
+  /** L6d.N3 — palette slot for `authorId` (0..7, stable via FNV-1a hash). */
+  authorPaletteIndex?: number;
+}
+
+/**
+ * L6d.N3 — author-color assignment.
+ *
+ * Map `authorId` → one of the 8 `--color-chart-categorical-*` vars
+ * using FNV-1a 32-bit hashing.  FNV-1a is deterministic, allocation-
+ * free, and has better avalanche on short ASCII keys than djb2, so
+ * typical author-id alphabets (emails, UUIDs, Slack IDs) distribute
+ * evenly across the 8 slots.
+ *
+ * The palette lives as CSS vars so theme swaps / reduced-contrast
+ * overrides in `tokens.css` cascade automatically — we emit `var(...)`
+ * strings, never hex literals.
+ */
+export const AUTHOR_PALETTE: readonly string[] = [
+  "var(--color-chart-categorical-1)",
+  "var(--color-chart-categorical-2)",
+  "var(--color-chart-categorical-3)",
+  "var(--color-chart-categorical-4)",
+  "var(--color-chart-categorical-5)",
+  "var(--color-chart-categorical-6)",
+  "var(--color-chart-categorical-7)",
+  "var(--color-chart-categorical-8)",
+];
+
+/**
+ * FNV-1a 32-bit hash.  Constants from the Fowler–Noll–Vo reference:
+ *   offset basis = 0x811c9dc5
+ *   prime        = 0x01000193
+ * The `>>> 0` keeps the value in unsigned 32-bit territory after each
+ * multiplication so two identical inputs always produce the same hash.
+ */
+export function hashAuthorId(authorId: string): number {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < authorId.length; i += 1) {
+    hash ^= authorId.charCodeAt(i);
+    hash = Math.imul(hash, 0x01000193) >>> 0;
+  }
+  return hash;
+}
+
+/** Reduce a hash to a palette slot in `[0, AUTHOR_PALETTE.length)`. */
+export function authorPaletteIndex(authorId: string): number {
+  return hashAuthorId(authorId) % AUTHOR_PALETTE.length;
+}
+
+/**
+ * Resolve a CSS color string for an author.  Returns `undefined` when
+ * `authorId` is missing so callers can fall back to the default
+ * per-kind class (e.g. `bg-insert-soft`).
+ */
+export function getAuthorColor(authorId: string | undefined): string | undefined {
+  if (!authorId) return undefined;
+  return AUTHOR_PALETTE[authorPaletteIndex(authorId)];
 }
 
 export interface RevisionRangeState {
@@ -47,6 +110,8 @@ export function createRevisionDecorationModel(
         status: rev.status,
         actionability: rev.actionability,
         isActive: rev.revisionId === activeRevisionId,
+        authorId: rev.authorId,
+        authorPaletteIndex: rev.authorId ? authorPaletteIndex(rev.authorId) : undefined,
       };
       }),
   };
@@ -94,12 +159,17 @@ export function getRevisionHighlightClass(
 
   const activeRing = state.hasActive ? " ring-1 ring-accent/30" : "";
 
-  switch (markupDisplay) {
-    case "clean":
-      // In clean mode, deletions are hidden entirely (caller should not render).
+  switch (normalizeMarkupDisplay(markupDisplay)) {
+    case "no-markup":
+      // In no-markup mode, deletions are hidden entirely (caller should not render).
       // Insertions render as normal text with no decoration.
       return "";
-    case "simple":
+    case "original":
+      // L6d.N2 — "original" shows what the doc looked like BEFORE the
+      // pending tracked changes: insertions are hidden (caller checks
+      // `shouldHideInOriginalMode`), deletions render as plain body text.
+      return "";
+    case "simple-markup":
       if (state.hasInsertions) {
         return `underline decoration-insert/60 decoration-1 underline-offset-2 text-primary${activeRing}`;
       }
@@ -107,7 +177,7 @@ export function getRevisionHighlightClass(
         return `text-secondary line-through decoration-danger/70 decoration-1${activeRing}`;
       }
       return activeRing;
-    case "all":
+    case "all-markup":
       if (state.hasInsertions) {
         return `text-primary bg-insert-soft/80 ring-1 ring-insert/20${activeRing}`;
       }
@@ -118,6 +188,10 @@ export function getRevisionHighlightClass(
   }
 }
 
+/**
+ * `no-markup` hides deletions (pretending the doc already accepted all
+ * pending changes).  The caller skips rendering affected spans entirely.
+ */
 export function shouldHideInCleanMode(
   model: RevisionDecorationModel | undefined,
   from: number,
@@ -126,3 +200,17 @@ export function shouldHideInCleanMode(
   const state = getRevisionRangeState(model, from, to);
   return state.hasDeletions;
 }
+
+/**
+ * L6d.N2 — `original` mode hides insertions (pretending the pending
+ * batch of tracked changes was rejected).  Caller skips rendering
+ * affected spans entirely.
+ */
+export function shouldHideInOriginalMode(
+  model: RevisionDecorationModel | undefined,
+  from: number,
+  to: number,
+): boolean {
+  const state = getRevisionRangeState(model, from, to);
+  return state.hasInsertions;
+}

package/src/ui/shared/revision-filters.ts

@@ -1,20 +1,24 @@
 import type { RuntimeRenderSnapshot } from "../../api/public-types";
+import {
+  normalizeMarkupDisplay,
+  type MarkupDisplay,
+} from "../headless/comment-decoration-model";
 
 type Revision = RuntimeRenderSnapshot["trackedChanges"]["revisions"][number];
-type MarkupDisplay = "clean" | "simple" | "all";
 
 export function selectVisibleRevisions(
   revisions: readonly Revision[],
   markupDisplay: MarkupDisplay,
 ): Revision[] {
-  switch (markupDisplay) {
-    case "clean":
-    case "simple":
+  switch (normalizeMarkupDisplay(markupDisplay)) {
+    case "no-markup":
+    case "simple-markup":
+    case "original":
       return revisions.filter(
         (revision) =>
           revision.status === "active" && revision.actionability === "actionable",
       );
-    case "all":
+    case "all-markup":
       return [...revisions];
   }
 }
@@ -23,7 +27,13 @@ export function describeEmptyRevisionState(
   markupDisplay: MarkupDisplay,
   totalCount: number,
 ): string {
-  if ((markupDisplay === "clean" || markupDisplay === "simple") && totalCount > 0) {
+  const canonical = normalizeMarkupDisplay(markupDisplay);
+  if (
+    (canonical === "no-markup" ||
+      canonical === "simple-markup" ||
+      canonical === "original") &&
+    totalCount > 0
+  ) {
     return "Simple markup keeps the rail focused on actionable live changes. Switch to All to inspect preserve-only or historical revision records.";
   }
 

package/src/ui-tailwind/chart/ChartSurface.tsx

@@ -0,0 +1,236 @@
+/**
+ * ChartSurface — top-level chart renderer dispatch (Stage 4 Slice 4H).
+ *
+ * Accepts a `ChartModel` discriminated union and dispatches to the
+ * appropriate per-family renderer. Emits a single `<svg>` root with:
+ *
+ *   - `role="img"` + `aria-label={describeChart(model)}` for
+ *     accessibility (Stage 4 exit criteria).
+ *   - `<defs>` block mounted from a shared `DefsRegistry` so gradient
+ *     fills registered by sub-renderers surface once in the root.
+ *   - Deterministic FNV-1a gradient IDs from Stage 3B (no `Math.random`,
+ *     no counter state — important for Stage 7 pixel-diff stability).
+ *
+ * ChartSurface is the component consumed by Stage 6's PM `NodeView`
+ * bridge (`chart-node-view.tsx`) — it renders independently of
+ * `refreshRenderSnapshot()` so it doesn't widen the wholesale-snapshot
+ * path (perf invariant #4).
+ *
+ * The component is wrapped in `React.memo` with a structural hash
+ * comparator so re-renders are skipped when `rawXml + width + height`
+ * haven't changed.
+ */
+
+import React from "react";
+import type { ChartModel } from "../../io/ooxml/chart/types.ts";
+import type { ResolvedTheme } from "../../model/canonical-document.ts";
+import { layoutPlotArea, type PlotAreaLayout } from "./layout/plot-area.ts";
+import { AreaChart } from "./render/area.tsx";
+import { BarColumnChart } from "./render/bar-column.tsx";
+import { BubbleChart } from "./render/bubble.tsx";
+import { ComboChart } from "./render/combo.tsx";
+import { DataLabels } from "./render/data-labels.tsx";
+import { DefsRegistry } from "./render/svg-primitives.ts";
+import { LineChart } from "./render/line.tsx";
+import { PieChart } from "./render/pie.tsx";
+import { ScatterChart } from "./render/scatter.tsx";
+import { UnsupportedChart } from "./render/unsupported.tsx";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export interface ChartSurfaceProps {
+  model: ChartModel;
+  /** Rendered size in pixels. */
+  width: number;
+  height: number;
+  theme?: ResolvedTheme;
+  /** Optional pre-computed layout; falls back to `layoutPlotArea(...)`. */
+  layout?: PlotAreaLayout;
+  /** Fallback-image resolver for unsupported chart types. */
+  resolveMediaUrl?: (mediaId: string) => string | undefined;
+  /** The chart-preview's media ID, if one was cached in `mc:Fallback`. */
+  previewMediaId?: string;
+}
+
+function ChartSurfaceImpl({
+  model,
+  width,
+  height,
+  theme,
+  layout,
+  resolveMediaUrl,
+  previewMediaId,
+}: ChartSurfaceProps): React.ReactElement {
+  const resolvedLayout = layout ?? layoutPlotArea({ w: width, h: height }, model, theme);
+  const defs = new DefsRegistry();
+
+  const body = dispatchBody({
+    model,
+    layout: resolvedLayout,
+    theme,
+    defs,
+    resolveMediaUrl,
+    previewMediaId,
+  });
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label={describeChart(model)}
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      data-role="chart-surface"
+      data-chart-kind={model.kind}
+    >
+      {!defs.isEmpty() && (
+        <defs data-role="chart-defs">
+          {renderDefs(defs)}
+        </defs>
+      )}
+      {body}
+      <g data-role="data-labels-root">
+        <DataLabels model={model} layout={resolvedLayout} theme={theme} />
+      </g>
+    </svg>
+  );
+}
+
+export const ChartSurface = React.memo(
+  ChartSurfaceImpl,
+  (prev, next) =>
+    prev.model.rawXml === next.model.rawXml &&
+    prev.width === next.width &&
+    prev.height === next.height &&
+    prev.theme === next.theme &&
+    prev.previewMediaId === next.previewMediaId,
+);
+
+// ---------------------------------------------------------------------------
+// Body dispatch
+// ---------------------------------------------------------------------------
+
+interface DispatchInput {
+  model: ChartModel;
+  layout: PlotAreaLayout;
+  theme: ResolvedTheme | undefined;
+  defs: DefsRegistry;
+  resolveMediaUrl: ChartSurfaceProps["resolveMediaUrl"];
+  previewMediaId: ChartSurfaceProps["previewMediaId"];
+}
+
+function dispatchBody({
+  model,
+  layout,
+  theme,
+  defs,
+  resolveMediaUrl,
+  previewMediaId,
+}: DispatchInput): React.ReactElement {
+  switch (model.kind) {
+    case "bar":
+      return <BarColumnChart model={model} layout={layout} theme={theme} defs={defs} />;
+    case "line":
+      return <LineChart model={model} layout={layout} theme={theme} />;
+    case "pie":
+      return <PieChart model={model} layout={layout} theme={theme} defs={defs} />;
+    case "area":
+      return <AreaChart model={model} layout={layout} theme={theme} />;
+    case "scatter":
+      return <ScatterChart model={model} layout={layout} theme={theme} />;
+    case "bubble":
+      return <BubbleChart model={model} layout={layout} theme={theme} />;
+    case "combo":
+      return <ComboChart model={model} layout={layout} theme={theme} />;
+    case "unsupported":
+      return (
+        <UnsupportedChart
+          model={model}
+          layout={layout}
+          theme={theme}
+          {...(resolveMediaUrl ? { resolveMediaUrl } : {})}
+          {...(previewMediaId ? { previewMediaId } : {})}
+        />
+      );
+  }
+}
+
+// ---------------------------------------------------------------------------
+// DefsRegistry → SVG <defs> children
+// ---------------------------------------------------------------------------
+
+function renderDefs(defs: DefsRegistry): React.ReactElement[] {
+  return defs.toDefsEntries().map((entry) => {
+    if (entry.kind === "linearGradient") {
+      const { x1, y1, x2, y2 } = angleToCoords(entry.angle);
+      return (
+        <linearGradient
+          key={entry.id}
+          id={entry.id}
+          x1={x1}
+          y1={y1}
+          x2={x2}
+          y2={y2}
+        >
+          {entry.stops.map((stop, i) => (
+            <stop key={i} offset={stop.offset} stopColor={stop.color} />
+          ))}
+        </linearGradient>
+      );
+    }
+    return <React.Fragment key="__empty__" />;
+  });
+}
+
+/**
+ * Convert a gradient angle (degrees, OOXML clockwise-from-horizontal)
+ * to SVG `x1/y1/x2/y2` percentage values. 0° = left-to-right,
+ * 90° = top-to-bottom.
+ */
+function angleToCoords(angleDeg: number): {
+  x1: string; y1: string; x2: string; y2: string;
+} {
+  const rad = (angleDeg * Math.PI) / 180;
+  const dx = Math.cos(rad);
+  const dy = Math.sin(rad);
+  const x1 = dx < 0 ? "100%" : "0%";
+  const x2 = dx < 0 ? "0%" : "100%";
+  const y1 = dy < 0 ? "100%" : "0%";
+  const y2 = dy < 0 ? "0%" : "100%";
+  return { x1, y1, x2, y2 };
+}
+
+// ---------------------------------------------------------------------------
+// Accessibility labels
+// ---------------------------------------------------------------------------
+
+function describeChart(model: ChartModel): string {
+  const title = model.kind !== "unsupported" ? model.title?.text : undefined;
+  const kindLabel = kindToLabel(model);
+  if (title) return `${kindLabel}: ${title}`;
+  return kindLabel;
+}
+
+function kindToLabel(model: ChartModel): string {
+  switch (model.kind) {
+    case "bar":
+      return model.direction === "bar" ? "Bar chart" : "Column chart";
+    case "line":
+      return "Line chart";
+    case "pie":
+      return model.doughnut ? "Doughnut chart" : "Pie chart";
+    case "area":
+      return "Area chart";
+    case "scatter":
+      return "Scatter chart";
+    case "bubble":
+      return "Bubble chart";
+    case "combo":
+      return "Combination chart";
+    case "unsupported":
+      return "Chart (unsupported type)";
+  }
+}

package/src/ui-tailwind/chart/layout/axis-layout.ts

@@ -86,17 +86,19 @@ export function generateValueTicks(input: ValueTickInput): TickResult {
   );
   const minorStep = input.minorUnit ?? step / 5;
 
-  const firstMajor = Math.ceil(min / step - 1e-9) * step;
+  // C6: Use step-relative epsilon so tiny ranges (e.g. max ≈ 1e-15) never
+  // produce millions of iterations from an absolute 1e-9 overshoot.
+  const firstMajor = Math.ceil(min / step - step * 1e-9) * step;
   const major: number[] = [];
-  for (let t = firstMajor; t <= max + 1e-9; t += step) {
+  for (let t = firstMajor; t <= max + step * 1e-9; t += step) {
     // Round to the step's decimal precision to avoid floating drift.
     major.push(roundToStep(t, step));
   }
 
   const minor: number[] = [];
   if (minorStep > 0 && minorStep < step) {
-    const firstMinor = Math.ceil(min / minorStep - 1e-9) * minorStep;
-    for (let t = firstMinor; t <= max + 1e-9; t += minorStep) {
+    const firstMinor = Math.ceil(min / minorStep - minorStep * 1e-9) * minorStep;
+    for (let t = firstMinor; t <= max + minorStep * 1e-9; t += minorStep) {
       // Skip positions that coincide with major ticks (mod epsilon).
       const snapped = roundToStep(t, minorStep);
       if (!isMajorPosition(snapped, step)) minor.push(snapped);
@@ -265,11 +267,17 @@ export function generateDateTicks(input: DateTickInput): TickResult {
 
   const minorUnit = input.minorTimeUnit ?? unit;
   const minorStepSize = Math.max(1, Math.floor(input.minorUnit ?? 1));
-  const minor = input.minorUnit !== undefined || input.minorTimeUnit !== undefined
-    ? stepByTimeUnit(min, max, minorUnit, minorStepSize).filter(
-        (pos) => !major.includes(pos),
-      )
-    : [];
+  // C7: Use a Set with rounded keys for the major-position filter so that
+  // serial-date round-trip drift (sub-ms) doesn't leak duplicate ticks.
+  // Rounding to the nearest integer is safe because date serial positions
+  // differ by at least 1 (minimum granularity is 1 day).
+  let minor: number[] = [];
+  if (input.minorUnit !== undefined || input.minorTimeUnit !== undefined) {
+    const majorSet = new Set(major.map((v) => Math.round(v)));
+    minor = stepByTimeUnit(min, max, minorUnit, minorStepSize).filter(
+      (pos) => !majorSet.has(Math.round(pos)),
+    );
+  }
 
   return { major, minor };
 }