@beyondwork/docx-react-component 1.0.50 → 1.0.52

package/src/runtime/selection/index.ts

@@ -0,0 +1,91 @@
+/**
+ * R.1 SelectionLayer — named module for cursor movement, validation, and
+ * anchor projection. See `docs/plans/lane-1-editing-foundation.md` §R.1.
+ *
+ * This file is the layer's single entry point. Callers consume
+ * `SelectionLayer.move(doc, sel, op)` / `SelectionLayer.validate(doc, sel)`
+ * rather than reaching into individual helpers. Phase 6a ships the six
+ * layout-independent primitives (char/word/paragraph × left/right). Phase 6b
+ * adds `moveUp` / `moveDown` / `moveLineStart` / `moveLineEnd` once Lane 3a
+ * P9's layout facet exposes per-run column info.
+ */
+
+import type { DocumentRootNode } from "../../model/canonical-document.ts";
+import type { CanonicalDocumentEnvelope, SelectionSnapshot } from "../../core/state/editor-state.ts";
+import {
+  moveCharLeft,
+  moveCharRight,
+  moveParagraphEnd,
+  moveParagraphStart,
+  moveWordLeft,
+  moveWordRight,
+  type CursorMoveOptions,
+  type CursorSelection,
+} from "./cursor-ops.ts";
+import { validateSelectionAgainstDocument } from "./post-edit-validator.ts";
+
+export type {
+  CursorMoveOptions,
+  CursorSelection,
+} from "./cursor-ops.ts";
+
+/**
+ * Cursor-move operations supported by the layer. Phase 6b will extend this
+ * with `"up" | "down" | "line-start" | "line-end"`.
+ */
+export type CursorMoveOp =
+  | "char-left"
+  | "char-right"
+  | "word-left"
+  | "word-right"
+  | "paragraph-start"
+  | "paragraph-end";
+
+export interface SelectionLayer {
+  /**
+   * Apply a cursor-move operation and return the resulting selection. Pure;
+   * does not mutate any argument.
+   */
+  move(
+    doc: DocumentRootNode,
+    selection: CursorSelection,
+    op: CursorMoveOp,
+    options?: CursorMoveOptions,
+  ): CursorSelection;
+
+  /**
+   * Run the I5 post-edit selection validator. Snaps orphaned offsets into the
+   * nearest valid position. Pure; returns the (possibly adjusted) selection.
+   */
+  validate(
+    doc: CanonicalDocumentEnvelope,
+    selection: SelectionSnapshot,
+    maxOffset: number,
+  ): SelectionSnapshot;
+}
+
+/**
+ * Default SelectionLayer instance. Stateless — the same instance is safe to
+ * share across runtimes.
+ */
+export const selectionLayer: SelectionLayer = {
+  move(doc, selection, op, options) {
+    switch (op) {
+      case "char-left":
+        return moveCharLeft(doc, selection, options);
+      case "char-right":
+        return moveCharRight(doc, selection, options);
+      case "word-left":
+        return moveWordLeft(doc, selection, options);
+      case "word-right":
+        return moveWordRight(doc, selection, options);
+      case "paragraph-start":
+        return moveParagraphStart(doc, selection, options);
+      case "paragraph-end":
+        return moveParagraphEnd(doc, selection, options);
+    }
+  },
+  validate(doc, selection, maxOffset) {
+    return validateSelectionAgainstDocument(doc, selection, maxOffset);
+  },
+};

package/src/runtime/surface-projection.ts

@@ -52,6 +52,7 @@ import {
   resolveNumberingMarkerRunFormatting,
 } from "./paragraph-style-resolver.ts";
 import { resolveHyperlinkRunFormatting } from "./hyperlink-color-resolver.ts";
+import { concretizeThemeColors } from "./theme-color-resolver.ts";
 import type { CanonicalParagraphFormatting, CanonicalRunFormatting } from "../model/canonical-document.ts";
 
 interface ParagraphAccumulator {
@@ -874,6 +875,11 @@ function appendInlineSegments(
         characterStyleId: undefined,
         direct: directRunFormatting,
       };
+      // L2.c — non-hyperlink body text also gets theme-color concretization
+      // so paragraph styles declaring `<w:color w:themeColor="accent1"/>`
+      // render with their theme slot's hex instead of falling back to
+      // default black. Hyperlink branch already resolves theme via the
+      // Hyperlink-style cascade; only the non-hyperlink path was missing.
       const resolvedRunFormatting = cullBuild
         ? {}
         : hyperlinkHref
@@ -882,7 +888,10 @@ function appendInlineSegments(
               document.styles,
               document.subParts?.resolvedTheme,
             )
-          : resolveEffectiveRunFormatting(runResolveInput, document.styles);
+          : concretizeThemeColors(
+              resolveEffectiveRunFormatting(runResolveInput, document.styles),
+              document.subParts?.resolvedTheme,
+            );
       paragraph.segments.push({
         segmentId: `${paragraph.blockId}-segment-${paragraph.segments.length}`,
         kind: "text",

package/src/runtime/theme-color-resolver.ts

@@ -57,6 +57,52 @@ export function resolveThemeColorHex(
   return applyThemeTintShade(baseHex, rPr.colorThemeTint, rPr.colorThemeShade);
 }
 
+/**
+ * Post-process a cascade of run formatting to concretize any
+ * theme-color-only reference into a paintable `colorHex`.
+ *
+ * L2.c body-text call site: `surface-projection.ts` runs the standard
+ * `resolveEffectiveRunFormatting` cascade, then pipes the result through
+ * this function with the document's resolved theme. Runs that declared
+ * `<w:color w:themeColor="accent1"/>` without a concrete `w:val` end up
+ * with `colorHex` set to the theme-resolved hex so downstream
+ * `pm-state-from-snapshot` can paint them.
+ *
+ * The theme-slot fields (`colorThemeSlot` / `Tint` / `Shade`) stay on
+ * the cascade so that the export path can re-emit the original theme
+ * reference — this function never overwrites them, it only adds
+ * `colorHex` when it was absent or `"auto"`.
+ *
+ * No-ops when:
+ *   - no theme-slot is declared (nothing to resolve),
+ *   - `colorHex` is already a concrete non-`"auto"` hex (direct wins),
+ *   - theme is missing or the slot is unknown (graceful fallback),
+ *   - resolver returns `undefined` (e.g. malformed tint/shade).
+ */
+export function concretizeThemeColors(
+  cascade: CanonicalRunFormatting,
+  theme: ResolvedTheme | undefined,
+): CanonicalRunFormatting {
+  if (!cascade.colorThemeSlot) return cascade;
+  if (cascade.colorHex && cascade.colorHex !== "auto") return cascade;
+  // When colorHex is "auto" we intentionally bypass it during theme
+  // resolution: Word's cascade treats `<w:color w:val="auto"
+  // w:themeColor="accent1"/>` as "paint with the theme slot; auto is
+  // the fallback if theme is missing." Pass a stripped input to the
+  // resolver so `colorHex === "auto"` doesn't short-circuit.
+  const resolved = resolveThemeColorHex(
+    {
+      colorThemeSlot: cascade.colorThemeSlot,
+      colorThemeTint: cascade.colorThemeTint,
+      colorThemeShade: cascade.colorThemeShade,
+    },
+    theme,
+  );
+  if (!resolved || resolved === "auto") return cascade;
+  if (resolved === cascade.colorHex) return cascade;
+  return { ...cascade, colorHex: resolved };
+}
+
 /**
  * Apply `w:themeTint` (shift toward white) and/or `w:themeShade` (shift
  * toward black) to a base hex colour. Pure function.

package/src/ui/WordReviewEditor.tsx

@@ -782,6 +782,7 @@ export function __createWordReviewEditorRefBridge(
     clearWorkflowOverlay: () => {
       runtime.clearWorkflowOverlay();
     },
+    getWorkflowOverlay: () => clonePublicValue(runtime.getWorkflowOverlay()),
     setSharedWorkflowState: (state) => {
       runtime.setSharedWorkflowState(state === null ? null : clonePublicValue(state));
     },
@@ -1833,6 +1834,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         clearWorkflowOverlay: () => {
           activeRuntime.clearWorkflowOverlay();
         },
+        getWorkflowOverlay: () =>
+          clonePublicValue(activeRuntime.getWorkflowOverlay()),
         setSharedWorkflowState: (state) => {
           activeRuntime.setSharedWorkflowState(state === null ? null : clonePublicValue(state));
         },

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

@@ -0,0 +1,344 @@
+/**
+ * Axis tick generation for chart rendering (Stage 3A, pure math).
+ *
+ * Three axis kinds:
+ *   - **value** — numeric axis with a "nice" auto-step (when the model
+ *     doesn't pin `majorUnit`) derived from a d3-style heuristic:
+ *     pick from {1, 2, 2.5, 5} × 10^n targeting 5-8 major ticks.
+ *     Log-scale value axes use `logBase` (default 10) to generate
+ *     ticks at base^k covering the domain.
+ *   - **category** — axis labels come from the model's pre-resolved
+ *     category array; `tickLabelSkip` lets Word-authored charts skip
+ *     every N-th label.
+ *   - **date** — Excel serial dates (days since 1899-12-30). We respect
+ *     `baseTimeUnit` ∈ {days, months, years} by stepping through the
+ *     domain in units of that period; `majorTimeUnit` overrides the
+ *     step when present.
+ *
+ * All functions are pure (no DOM, no React, no runtime imports) so
+ * Stage 3 layout math is unit-testable without a browser.
+ */
+
+// ---------------------------------------------------------------------------
+// Value axis — linear + log
+// ---------------------------------------------------------------------------
+
+export interface ValueTickInput {
+  min: number;
+  max: number;
+  /** Override for major step. When present, ticks are strictly multiples. */
+  majorUnit?: number;
+  /** Override for minor step. Defaults to majorUnit / 5 when omitted. */
+  minorUnit?: number;
+  /** Log-scale base. Omitted for linear axes. */
+  logBase?: number;
+  /** Target major-tick count range for the auto-step heuristic. */
+  targetTickCount?: number;
+}
+
+export interface TickResult {
+  /** Major tick positions, sorted ascending. */
+  major: number[];
+  /** Minor tick positions (between majors), sorted ascending. */
+  minor: number[];
+}
+
+const DEFAULT_TARGET_TICK_COUNT = 6;
+// d3-scale convention. Omitting 2.5 keeps ticks on "round" values
+// (multiples of 1/2/5/10/20/50/…) that match Word's tick choices more
+// closely than the extended-Wilkinson mantissa list.
+const NICE_STEP_MANTISSAS = [1, 2, 5, 10];
+
+/**
+ * Generate tick positions for a value axis.
+ *
+ * When `majorUnit` is supplied, ticks are strict multiples of it
+ * covering `[min, max]`. Otherwise the auto-step heuristic picks a
+ * "nice" step from `NICE_STEP_MANTISSAS × 10^n` that produces roughly
+ * `targetTickCount` (default 6) major ticks.
+ *
+ * Log-scale axes generate ticks at `logBase^k` for integer k covering
+ * the domain, plus minor ticks at {2,3,…,base-1} × logBase^k between
+ * majors (standard log-axis convention, matching Word's output).
+ *
+ * Degenerate domains (min > max, min === max, non-finite values) fall
+ * back to a single `[min, min]` tick so callers always get at least
+ * one position to render an axis line.
+ */
+export function generateValueTicks(input: ValueTickInput): TickResult {
+  if (!Number.isFinite(input.min) || !Number.isFinite(input.max)) {
+    return { major: [input.min], minor: [] };
+  }
+  if (input.min === input.max) {
+    return { major: [input.min], minor: [] };
+  }
+  const [min, max] = input.min < input.max
+    ? [input.min, input.max]
+    : [input.max, input.min];
+
+  if (input.logBase && input.logBase > 1) {
+    return generateLogTicks(min, max, input.logBase);
+  }
+
+  const step = input.majorUnit ?? niceStep(
+    max - min,
+    input.targetTickCount ?? DEFAULT_TARGET_TICK_COUNT,
+  );
+  const minorStep = input.minorUnit ?? step / 5;
+
+  const firstMajor = Math.ceil(min / step - 1e-9) * step;
+  const major: number[] = [];
+  for (let t = firstMajor; t <= max + 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) {
+      // Skip positions that coincide with major ticks (mod epsilon).
+      const snapped = roundToStep(t, minorStep);
+      if (!isMajorPosition(snapped, step)) minor.push(snapped);
+    }
+  }
+
+  return { major, minor };
+}
+
+/**
+ * Pick a "nice" step size for a given range + target tick count using
+ * the d3-scale-style heuristic: find the power-of-ten bucket, then
+ * pick from {1, 2, 2.5, 5, 10} the mantissa that yields the closest
+ * number of ticks to `target`.
+ */
+export function niceStep(range: number, target: number): number {
+  if (range <= 0 || !Number.isFinite(range)) return 1;
+  const rough = range / Math.max(1, target);
+  const magnitude = Math.pow(10, Math.floor(Math.log10(rough)));
+  const normalized = rough / magnitude;
+  // Pick the mantissa producing tick count closest to target.
+  let best = NICE_STEP_MANTISSAS[0]!;
+  let bestDelta = Infinity;
+  for (const m of NICE_STEP_MANTISSAS) {
+    if (m < normalized) continue;
+    const step = m * magnitude;
+    const count = Math.floor(range / step) + 1;
+    const delta = Math.abs(count - target);
+    if (delta < bestDelta) {
+      bestDelta = delta;
+      best = m;
+    }
+  }
+  return best * magnitude;
+}
+
+function generateLogTicks(min: number, max: number, base: number): TickResult {
+  // For log scale, clamp min > 0 to avoid -Infinity.
+  const safeMin = Math.max(min, Number.MIN_VALUE);
+  const lo = Math.floor(logBase(safeMin, base));
+  const hi = Math.ceil(logBase(max, base));
+  const major: number[] = [];
+  const minor: number[] = [];
+  for (let k = lo; k <= hi; k++) {
+    const power = Math.pow(base, k);
+    if (power >= min - 1e-12 && power <= max + 1e-12) {
+      major.push(power);
+    }
+    // Minor ticks at 2×, 3×, …, (base-1)× within each decade.
+    for (let m = 2; m < base; m++) {
+      const minorPos = m * power;
+      if (minorPos >= min && minorPos <= max) {
+        minor.push(minorPos);
+      }
+    }
+  }
+  return { major, minor };
+}
+
+function logBase(x: number, base: number): number {
+  return Math.log(x) / Math.log(base);
+}
+
+function roundToStep(value: number, step: number): number {
+  // Round to the decimal precision implied by the step so e.g.
+  // `step=0.2` produces values like 0.2, 0.4, 0.6 without 0.30000004.
+  // Also normalise -0 to 0 since `Math.ceil(-1e-9) * step === -0` and
+  // `deepStrictEqual` distinguishes -0 from 0.
+  if (step === 0) return value;
+  const precision = Math.max(0, -Math.floor(Math.log10(Math.abs(step))) + 2);
+  const factor = Math.pow(10, precision);
+  const rounded = Math.round(value * factor) / factor;
+  return rounded === 0 ? 0 : rounded;
+}
+
+function isMajorPosition(value: number, step: number): boolean {
+  const mod = Math.abs(value / step - Math.round(value / step));
+  return mod < 1e-6;
+}
+
+// ---------------------------------------------------------------------------
+// Category axis — label pass-through with optional skip
+// ---------------------------------------------------------------------------
+
+export interface CategoryTickInput {
+  labels: ReadonlyArray<string>;
+  /** c:tickLabelSkip — show every N-th label. 1 (default) shows all. */
+  tickLabelSkip?: number;
+  /** c:tickMarkSkip — show tick mark every N-th category. */
+  tickMarkSkip?: number;
+}
+
+export interface CategoryTickResult {
+  /**
+   * Emitted tick positions as category index → label pairs. Index is
+   * the position in the original `labels` array; label is the rendered
+   * string ("" when skipped by `tickLabelSkip`). Renderers map index
+   * to plot-area coordinate via the category slot width.
+   */
+  ticks: Array<{ index: number; label: string; major: boolean }>;
+}
+
+export function generateCategoryTicks(input: CategoryTickInput): CategoryTickResult {
+  const labelSkip = Math.max(1, Math.floor(input.tickLabelSkip ?? 1));
+  const markSkip = Math.max(1, Math.floor(input.tickMarkSkip ?? 1));
+  const ticks: CategoryTickResult["ticks"] = [];
+  for (let i = 0; i < input.labels.length; i++) {
+    const isLabeled = i % labelSkip === 0;
+    const isMajor = i % markSkip === 0;
+    ticks.push({
+      index: i,
+      label: isLabeled ? input.labels[i]! : "",
+      major: isMajor,
+    });
+  }
+  return { ticks };
+}
+
+// ---------------------------------------------------------------------------
+// Date axis — Excel serial dates
+// ---------------------------------------------------------------------------
+
+export type TimeUnit = "days" | "months" | "years";
+
+export interface DateTickInput {
+  /** Excel serial date (days since 1899-12-30). */
+  min: number;
+  max: number;
+  /** c:baseTimeUnit — sets the default step for auto-generation. */
+  baseTimeUnit?: TimeUnit;
+  /** c:majorUnit + c:majorTimeUnit — pinned major step. */
+  majorUnit?: number;
+  majorTimeUnit?: TimeUnit;
+  /** c:minorUnit + c:minorTimeUnit — pinned minor step. */
+  minorUnit?: number;
+  minorTimeUnit?: TimeUnit;
+}
+
+/**
+ * Generate tick positions for a date axis. Returns Excel serial-date
+ * numbers so the renderer can format them via the chart's number-format
+ * code (`"mmm-yy"`, `"yyyy-mm-dd"`, etc.) using `formatNumber` from
+ * `number-format.ts`.
+ *
+ * When the domain spans ≤ 2 months and no explicit unit, ticks fall at
+ * day boundaries; ≤ 2 years → month boundaries; larger → year boundaries.
+ * This mirrors Excel's default tick auto-selection.
+ */
+export function generateDateTicks(input: DateTickInput): TickResult {
+  if (!Number.isFinite(input.min) || !Number.isFinite(input.max)) {
+    return { major: [input.min], minor: [] };
+  }
+  if (input.min === input.max) {
+    return { major: [input.min], minor: [] };
+  }
+  const [min, max] = input.min < input.max
+    ? [input.min, input.max]
+    : [input.max, input.min];
+
+  const unit = input.majorTimeUnit
+    ?? input.baseTimeUnit
+    ?? autoPickTimeUnit(max - min);
+  const step = Math.max(1, Math.floor(input.majorUnit ?? 1));
+
+  const major = stepByTimeUnit(min, max, unit, step);
+
+  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),
+      )
+    : [];
+
+  return { major, minor };
+}
+
+function autoPickTimeUnit(rangeDays: number): TimeUnit {
+  if (rangeDays <= 62) return "days";
+  if (rangeDays <= 730) return "months";
+  return "years";
+}
+
+function stepByTimeUnit(
+  min: number,
+  max: number,
+  unit: TimeUnit,
+  stepN: number,
+): number[] {
+  const ticks: number[] = [];
+  if (unit === "days") {
+    const start = Math.ceil(min / stepN) * stepN;
+    for (let t = start; t <= max; t += stepN) {
+      ticks.push(t);
+    }
+    return ticks;
+  }
+  // Month / year: walk via Date to respect variable month lengths.
+  let { y, m, d } = serialToYMD(Math.ceil(min));
+  // Snap d to 1st for month/year stepping.
+  d = 1;
+  // Snap m to 1st for year stepping.
+  if (unit === "years") m = 1;
+  let serial = ymdToSerial(y, m, d);
+  if (serial < min) {
+    if (unit === "months") {
+      m += 1;
+      if (m > 12) { m = 1; y += 1; }
+    } else {
+      y += 1;
+    }
+    serial = ymdToSerial(y, m, d);
+  }
+  while (serial <= max) {
+    ticks.push(serial);
+    if (unit === "months") {
+      m += stepN;
+      while (m > 12) { m -= 12; y += 1; }
+    } else {
+      y += stepN;
+    }
+    serial = ymdToSerial(y, m, d);
+  }
+  return ticks;
+}
+
+/**
+ * Convert an Excel serial date to a {y, m, d} triple. Excel's epoch is
+ * 1899-12-30 (treating the bogus 1900-02-29 leap-day as day 60).
+ */
+function serialToYMD(serial: number): { y: number; m: number; d: number } {
+  // 1899-12-30 baseline → offset of 25569 aligns with Unix epoch.
+  const ms = (serial - 25569) * 86_400_000;
+  const d = new Date(ms);
+  return {
+    y: d.getUTCFullYear(),
+    m: d.getUTCMonth() + 1,
+    d: d.getUTCDate(),
+  };
+}
+
+function ymdToSerial(y: number, m: number, d: number): number {
+  const ms = Date.UTC(y, m - 1, d);
+  return ms / 86_400_000 + 25569;
+}