@beyondwork/docx-react-component 1.0.56 → 1.0.57

package/src/ui-tailwind/chart/layout/plot-area.ts

@@ -57,20 +57,80 @@ export interface CanvasRect {
   h: number;
 }
 
+/**
+ * Which chrome bands are actually painted by the caller. Unpainted chrome
+ * is excluded from band reservation so the plot area fills the canvas
+ * gracefully instead of rendering with empty margins around unrendered
+ * title / legend / axis-label chrome.
+ *
+ * In v1 the chart renderer paints only the plot-area body — no component
+ * currently paints title, legend, or axis tick-labels (documented gap in
+ * docs/wiki/images-and-media.md §"Known gaps"). The default constant below
+ * reflects that reality so charts render edge-to-edge. When Stage-C chrome
+ * wire-up lands and a renderer begins painting one of these bands, flip
+ * the matching flag in `CHROME_PAINTED_DEFAULT` and the band reservation
+ * re-engages automatically.
+ */
+export interface ChromePaintedSet {
+  title?: boolean;
+  legend?: boolean;
+  xAxis?: boolean;
+  yAxis?: boolean;
+  secondaryYAxis?: boolean;
+}
+
+/**
+ * Default: nothing paints. Callers that do want band math (tests exercising
+ * layout, or Stage-C callers after chrome wires up) opt in explicitly via
+ * `options.paintedChrome`.
+ */
+export const CHROME_PAINTED_DEFAULT: Required<ChromePaintedSet> = {
+  title: false,
+  legend: false,
+  xAxis: false,
+  yAxis: false,
+  secondaryYAxis: false,
+};
+
+/**
+ * Legacy math mode — reserves every band as if every chrome element
+ * will paint. Exported so existing layout tests that verify band-math
+ * correctness can opt in without every test restating the shape.
+ */
+export const CHROME_PAINTED_ALL: Required<ChromePaintedSet> = {
+  title: true,
+  legend: true,
+  xAxis: true,
+  yAxis: true,
+  secondaryYAxis: true,
+};
+
+export interface LayoutPlotAreaOptions {
+  paintedChrome?: ChromePaintedSet;
+}
+
 /**
  * Partition the canvas into labelled sub-rectangles. The returned
  * `plotRect` is the rectangle the chart-type renderer draws into.
  *
- * The current implementation uses the fixed-stub text measurement
- * (`GLYPH_WIDTH_PX` × font size, `LINE_HEIGHT_RATIO` × font size). Slice
- * 3B replaces those constants with a call-through to the real
- * font-metrics helper.
+ * Graceful degradation: only chrome flagged `true` in
+ * `options.paintedChrome` reserves a band. Unpainted chrome is skipped
+ * so the plot area fills the canvas instead of leaving empty margins.
+ * **Back-compat**: when `options` is omitted, every band is reserved
+ * (`CHROME_PAINTED_ALL` semantics) — this preserves every existing test's
+ * expectations. Runtime callers (`ChartSurface`) explicitly pass
+ * `CHROME_PAINTED_DEFAULT` to opt into the graceful-degradation path.
  */
 export function layoutPlotArea(
   canvas: CanvasRect,
   model: ChartModel,
   theme: ResolvedTheme | undefined,
+  options?: LayoutPlotAreaOptions,
 ): PlotAreaLayout {
+  const painted: Required<ChromePaintedSet> = {
+    ...CHROME_PAINTED_ALL,
+    ...(options?.paintedChrome ?? {}),
+  };
 
   let top = 0;
   let bottom = canvas.h;
@@ -81,15 +141,16 @@ export function layoutPlotArea(
     plotRect: { x: 0, y: 0, w: canvas.w, h: canvas.h },
   };
 
-  // 1. Title band (top).
-  if (model.kind !== "unsupported" && model.title && !model.title.overlay) {
+  // 1. Title band (top). Only reserve when the caller actually paints it.
+  if (painted.title && model.kind !== "unsupported" && model.title && !model.title.overlay) {
     const titleHeight = measureTitleHeight(model.title.text ?? "", theme);
     out.titleRect = { x: 0, y: 0, w: canvas.w, h: titleHeight };
     top += titleHeight + BAND_GAP_PX;
   }
 
-  // 2. Legend band — on the side indicated by `legend.position`.
-  if (model.kind !== "unsupported" && model.legend && !model.legend.overlay) {
+  // 2. Legend band — on the side indicated by `legend.position`. Only
+  // reserve when the caller actually paints it.
+  if (painted.legend && model.kind !== "unsupported" && model.legend && !model.legend.overlay) {
     const entryCount = countLegendEntries(model);
     const legendLabels = collectLegendLabels(model);
     const { w: legendW, h: legendH } = measureLegendBox(entryCount, legendLabels, theme);
@@ -127,50 +188,55 @@ export function layoutPlotArea(
 
   // 3. Axis bands. Only cartesian families (bar/line/area/scatter/bubble/
   // combo) reserve axis space; pie/doughnut/unsupported skip this entirely.
+  // Each band is additionally gated on (a) the caller having opted into
+  // painting that chrome, and (b) the axis itself not being flagged
+  // invisible via `c:delete val="1"`. An axis that won't be drawn must
+  // not reserve layout space.
   const axes = pickAxes(model);
   if (axes) {
-    // Y-axis on the left: width = max(tick label width) + axis-title
-    // rotated height. Numeric tick values are passed through
-    // `formatNumber(value, formatCode)` so layout reserves real label width.
-    const yTickLabels = axisTickLabels(axes.y, axes.yFormatCode);
-    const yWidth =
-      maxLabelWidth(yTickLabels, theme) + (axes.yTitle ? AXIS_TITLE_BAND_PX : 0);
-    out.yAxisRect = { x: left, y: top, w: yWidth, h: bottom - top };
-    left += yWidth + BAND_GAP_PX;
+    // Y-axis on the left.
+    if (painted.yAxis && axes.yVisible) {
+      const yTickLabels = axisTickLabels(axes.y, axes.yFormatCode);
+      const yWidth =
+        maxLabelWidth(yTickLabels, theme) + (axes.yTitle ? AXIS_TITLE_BAND_PX : 0);
+      out.yAxisRect = { x: left, y: top, w: yWidth, h: bottom - top };
+      left += yWidth + BAND_GAP_PX;
+    }
 
     // Secondary Y-axis on the right.
     if (axes.secondaryY) {
-      const y2TickLabels = axisTickLabels(axes.secondaryY, axes.secondaryYFormatCode);
-      const y2Width =
-        maxLabelWidth(y2TickLabels, theme) + (axes.secondaryYTitle ? AXIS_TITLE_BAND_PX : 0);
-      out.secondaryYAxisRect = {
-        x: right - y2Width,
-        y: top,
-        w: y2Width,
-        h: bottom - top,
-      };
-      right -= y2Width + BAND_GAP_PX;
+      if (painted.secondaryYAxis && axes.secondaryYVisible) {
+        const y2TickLabels = axisTickLabels(axes.secondaryY, axes.secondaryYFormatCode);
+        const y2Width =
+          maxLabelWidth(y2TickLabels, theme) + (axes.secondaryYTitle ? AXIS_TITLE_BAND_PX : 0);
+        out.secondaryYAxisRect = {
+          x: right - y2Width,
+          y: top,
+          w: y2Width,
+          h: bottom - top,
+        };
+        right -= y2Width + BAND_GAP_PX;
+      }
     }
 
-    // X-axis on the bottom: height = label height + axis-title band.
-    // For category axes, sample the widest category label so tall rotated
-    // labels reserve enough vertical space; for value/date axes use a
-    // numeric sample run through formatNumber.
-    const xTickLabels = axes.x
-      ? axisTickLabels(axes.x, axes.xFormatCode)
-      : axes.categoryLabels
-        ? Array.from(axes.categoryLabels)
-        : yTickLabels;
-    const xSampleLabel = xTickLabels.length > 0 ? xTickLabels[0]! : "0";
-    const xLabelHeight = measureText(xSampleLabel, AXIS_TXP, theme).lineHeight;
-    const xHeight = xLabelHeight + (axes.xTitle ? AXIS_TITLE_BAND_PX : 0);
-    out.xAxisRect = {
-      x: left,
-      y: bottom - xHeight,
-      w: right - left,
-      h: xHeight,
-    };
-    bottom -= xHeight + BAND_GAP_PX;
+    // X-axis on the bottom.
+    if (painted.xAxis && axes.xVisible) {
+      const xTickLabels = axes.x
+        ? axisTickLabels(axes.x, axes.xFormatCode)
+        : axes.categoryLabels
+          ? Array.from(axes.categoryLabels)
+          : axisTickLabels(axes.y, axes.yFormatCode);
+      const xSampleLabel = xTickLabels.length > 0 ? xTickLabels[0]! : "0";
+      const xLabelHeight = measureText(xSampleLabel, AXIS_TXP, theme).lineHeight;
+      const xHeight = xLabelHeight + (axes.xTitle ? AXIS_TITLE_BAND_PX : 0);
+      out.xAxisRect = {
+        x: left,
+        y: bottom - xHeight,
+        w: right - left,
+        h: xHeight,
+      };
+      bottom -= xHeight + BAND_GAP_PX;
+    }
   }
 
   out.plotRect = {
@@ -244,12 +310,15 @@ interface AxisBundle {
   y: TickResult;
   yFormatCode?: string;
   yTitle: boolean;
+  yVisible: boolean;
   x?: TickResult;
   xFormatCode?: string;
   xTitle: boolean;
+  xVisible: boolean;
   secondaryY?: TickResult;
   secondaryYFormatCode?: string;
   secondaryYTitle: boolean;
+  secondaryYVisible: boolean;
   /**
    * Category axis labels (for bar/line/area/combo) — pre-resolved
    * category-axis label strings. When present, the x-axis tick band
@@ -275,9 +344,12 @@ function pickAxes(model: ChartModel): AxisBundle | null {
       const bundle: AxisBundle = {
         y: yTicks,
         yTitle: !!model.valueAxis.title,
+        yVisible: model.valueAxis.visible !== false,
         x: axisTicks(model.categoryAxis),
         xTitle: !!model.categoryAxis.title,
+        xVisible: model.categoryAxis.visible !== false,
         secondaryYTitle: !!model.secondaryValueAxis?.title,
+        secondaryYVisible: model.secondaryValueAxis?.visible !== false,
       };
       if (model.valueAxis.numberFormat) bundle.yFormatCode = model.valueAxis.numberFormat;
       if (model.categoryAxis.numberFormat) bundle.xFormatCode = model.categoryAxis.numberFormat;
@@ -295,9 +367,12 @@ function pickAxes(model: ChartModel): AxisBundle | null {
       const bundle: AxisBundle = {
         y: axisTicks(model.yAxis),
         yTitle: !!model.yAxis.title,
+        yVisible: model.yAxis.visible !== false,
         x: axisTicks(model.xAxis),
         xTitle: !!model.xAxis.title,
+        xVisible: model.xAxis.visible !== false,
         secondaryYTitle: false,
+        secondaryYVisible: false,
       };
       if (model.yAxis.numberFormat) bundle.yFormatCode = model.yAxis.numberFormat;
       if (model.xAxis.numberFormat) bundle.xFormatCode = model.xAxis.numberFormat;

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

@@ -39,9 +39,20 @@ export interface AreaChartProps {
   model: AreaChartModel;
   layout: PlotAreaLayout;
   theme: ResolvedTheme | undefined;
+  /**
+   * Offset added to each series' palette index. Used by combo charts so
+   * series in group N don't collide with group (N-1)'s palette slots.
+   * Defaults to 0 for standalone render.
+   */
+  seriesIndexOffset?: number;
 }
 
-function AreaChartImpl({ model, layout, theme }: AreaChartProps): React.ReactElement {
+function AreaChartImpl({
+  model,
+  layout,
+  theme,
+  seriesIndexOffset = 0,
+}: AreaChartProps): React.ReactElement {
   const plot = layout.plotRect;
   const percent = model.grouping === "percentStacked";
   const stacked = model.grouping === "stacked" || percent;
@@ -58,15 +69,22 @@ function AreaChartImpl({ model, layout, theme }: AreaChartProps): React.ReactEle
   const valueSpan = Math.max(1e-9, valueMax - valueMin);
 
   const toX = (c: number): number => plot.x + (c + 0.5) * slotWidth;
-  const toY = (v: number): number => plot.y + plot.h - ((v - valueMin) / valueSpan) * plot.h;
+  const reverseY = model.valueAxis.reverse === true;
+  const toY = (v: number): number => {
+    const frac = (v - valueMin) / valueSpan;
+    return reverseY ? plot.y + frac * plot.h : plot.y + plot.h - frac * plot.h;
+  };
 
   // Pre-compute per-category cumulative bases (for stacked) + tops.
-  const lowerBounds = new Array<number>(categoryCount).fill(valueMin);
+  // Stack baseline is the chart's zero line, not the axis minimum — clamp
+  // so negative-min axes don't balloon the lowest series below zero.
+  const stackBaseline = Math.max(0, valueMin);
+  const lowerBounds = new Array<number>(categoryCount).fill(stackBaseline);
   const paths: React.ReactElement[] = [];
 
   for (let s = 0; s < model.series.length; s++) {
     const series = model.series[s]!;
-    const color = composeSeriesColor(model, theme ?? { colors: {} }, s);
+    const color = composeSeriesColor(model, theme ?? { colors: {} }, s + seriesIndexOffset);
 
     // Compute this series' upper-boundary values and lower-boundary values.
     const upper: Array<number | null> = [];

package/src/ui-tailwind/chart/render/bar-column.tsx

@@ -46,6 +46,12 @@ export interface BarColumnChartProps {
   layout: PlotAreaLayout;
   theme: ResolvedTheme | undefined;
   defs?: DefsRegistry;
+  /**
+   * Offset added to each series' palette index. Used by combo charts so
+   * series in group N don't collide with group (N-1)'s palette slots.
+   * Defaults to 0 for standalone render.
+   */
+  seriesIndexOffset?: number;
 }
 
 function BarColumnChartImpl({
@@ -53,6 +59,7 @@ function BarColumnChartImpl({
   layout,
   theme,
   defs,
+  seriesIndexOffset = 0,
 }: BarColumnChartProps): React.ReactElement {
   const defsRegistry = defs ?? new DefsRegistry();
   const horizontal = model.direction === "bar";
@@ -87,30 +94,48 @@ function BarColumnChartImpl({
 
   // --- value → plot-coordinate ---
   const valueSpan = Math.max(1e-9, valueMax - valueMin);
+  const reverseValueAxis = model.valueAxis.reverse === true;
   const valueToPlot = (v: number): number => {
     const frac = (v - valueMin) / valueSpan;
-    return horizontal ? plot.x + frac * plot.w : plot.y + plot.h - frac * plot.h;
+    if (horizontal) {
+      return reverseValueAxis ? plot.x + plot.w - frac * plot.w : plot.x + frac * plot.w;
+    }
+    return reverseValueAxis ? plot.y + frac * plot.h : plot.y + plot.h - frac * plot.h;
   };
 
   // --- emit bars ---
   const bars: React.ReactElement[] = [];
 
   if (percent) {
-    // Normalize each slot to 100%; pos stack and neg stack both scaled so
-    // |sum| sits at ±100. Recommended approach: per-category, compute
-    // pos/neg totals, scale each value's contribution accordingly.
+    // Normalize each slot to ±100%; contributions divide by totalsAbs and
+    // multiply by 100 so pos/neg stacks land on a ±100 percent scale. The
+    // closure maps those percent values through the fixed [-100..100] span
+    // (what `computeValueRange` returns for percent-stacked charts).
+    const percentSpan = 200; // -100..100
+    const percentValueToPlot = (pct: number): number => {
+      const frac = (pct - -100) / percentSpan;
+      if (horizontal) {
+        return reverseValueAxis ? plot.x + plot.w - frac * plot.w : plot.x + frac * plot.w;
+      }
+      return reverseValueAxis ? plot.y + frac * plot.h : plot.y + plot.h - frac * plot.h;
+    };
     for (let c = 0; c < visibleCategories; c++) {
       const totalsAbs = computeSlotAbsTotal(model.series, c);
       if (totalsAbs === 0) continue;
-      emitStackedSlot(bars, model, theme, defsRegistry, c, slotSize, groupSize, plot,
-        horizontal, (v) => (v / totalsAbs) * 100, (_v) => 0, 100, -100, (frac) => {
-          return horizontal ? plot.x + frac * plot.w : plot.y + plot.h - frac * plot.h;
-        });
+      emitStackedSlot(
+        bars, model, theme, defsRegistry, c, slotSize, groupSize, plot,
+        horizontal,
+        (v) => (v / totalsAbs) * 100,
+        (_v) => 0,
+        100, -100,
+        percentValueToPlot,
+        seriesIndexOffset,
+      );
     }
   } else if (stacked) {
     for (let c = 0; c < visibleCategories; c++) {
       emitStackedSlot(bars, model, theme, defsRegistry, c, slotSize, groupSize, plot,
-        horizontal, (v) => v, (v) => v, valueMax, valueMin, valueToPlot);
+        horizontal, (v) => v, (v) => v, valueMax, valueMin, valueToPlot, seriesIndexOffset);
     }
   } else {
     // Clustered: place each series' bar side-by-side within the slot.
@@ -121,7 +146,7 @@ function BarColumnChartImpl({
         const series = model.series[s]!;
         const v = series.values[c];
         if (v === null || v === undefined || !Number.isFinite(v)) continue;
-        const color = resolveBarColor(model, theme, s, c, series, defsRegistry);
+        const color = resolveBarColor(model, theme, s + seriesIndexOffset, c, series, defsRegistry);
         const barOffset = s * (barWidth * (1 - overlapFrac));
         const barStart = groupStart + barOffset;
         const origin = valueToPlot(0);
@@ -259,6 +284,7 @@ function emitStackedSlot(
   _axisMax: number,
   _axisMin: number,
   valueToPlot: (v: number) => number,
+  seriesIndexOffset: number = 0,
 ): void {
   const slotStart = (horizontal ? plot.y : plot.x) + c * slotSize;
   const groupStart = slotStart + (slotSize - groupSize) / 2;
@@ -271,7 +297,7 @@ function emitStackedSlot(
     const v = normalizePositive(raw);
     const base = v >= 0 ? posBase : negBase;
     const end = base + v;
-    const color = resolveBarColor(model, theme, s, c, series, defs);
+    const color = resolveBarColor(model, theme, s + seriesIndexOffset, c, series, defs);
     const originPlot = valueToPlot(base);
     const endPlot = valueToPlot(end);
     const rect = horizontal

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

@@ -38,6 +38,8 @@ function BubbleChartImpl({ model, layout, theme }: BubbleChartProps): React.Reac
   // don't dominate.  Scale radius linearly with sqrt(size).
   const maxRadius = Math.max(4, Math.min(plot.w, plot.h) * 0.06);
   const sizeScaleFactor = maxSize > 0 ? maxRadius / Math.sqrt(maxSize) : 0;
+  const reverseX = model.xAxis.reverse === true;
+  const reverseY = model.yAxis.reverse === true;
 
   const bubbles: React.ReactElement[] = [];
 
@@ -53,8 +55,10 @@ function BubbleChartImpl({ model, layout, theme }: BubbleChartProps): React.Reac
         x === null || y === null || size === null ||
         !Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(size)
       ) continue;
-      const cx = plot.x + ((x - xMin) / xSpan) * plot.w;
-      const cy = plot.y + plot.h - ((y - yMin) / ySpan) * plot.h;
+      const xFrac = (x - xMin) / xSpan;
+      const yFrac = (y - yMin) / ySpan;
+      const cx = reverseX ? plot.x + plot.w - xFrac * plot.w : plot.x + xFrac * plot.w;
+      const cy = reverseY ? plot.y + yFrac * plot.h : plot.y + plot.h - yFrac * plot.h;
       const r = Math.sqrt(Math.abs(size)) * sizeScaleFactor * (series.bubbleScale ?? 1);
       bubbles.push(
         <circle

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

@@ -39,6 +39,17 @@ export interface ComboChartProps {
 }
 
 function ComboChartImpl({ model, layout, theme }: ComboChartProps): React.ReactElement {
+  // Pre-compute the series-index offset for each group so palette slots
+  // cycle across the whole combo rather than colliding at group boundaries.
+  // Word's observed behavior treats series across all groups as one
+  // continuous palette sequence.
+  const offsets: number[] = [];
+  let running = 0;
+  for (const group of model.groups) {
+    offsets.push(running);
+    running += group.series.length;
+  }
+
   // Groups render in declaration order → last group paints on top.
   return (
     <g
@@ -48,7 +59,7 @@ function ComboChartImpl({ model, layout, theme }: ComboChartProps): React.ReactE
     >
       {model.groups.map((group, i) => (
         <g key={`combo-group-${i}`} data-role="combo-group" data-group-index={i}>
-          {renderGroup(group, layout, theme)}
+          {renderGroup(group, layout, theme, offsets[i]!)}
         </g>
       ))}
       <g data-role="data-labels" />
@@ -73,13 +84,35 @@ function renderGroup(
   group: ComboChartModel["groups"][number],
   layout: PlotAreaLayout,
   theme: ResolvedTheme | undefined,
+  seriesIndexOffset: number,
 ): React.ReactElement {
   switch (group.kind) {
     case "bar":
-      return <BarColumnChart model={group} layout={layout} theme={theme} />;
+      return (
+        <BarColumnChart
+          model={group}
+          layout={layout}
+          theme={theme}
+          seriesIndexOffset={seriesIndexOffset}
+        />
+      );
     case "line":
-      return <LineChart model={group} layout={layout} theme={theme} />;
+      return (
+        <LineChart
+          model={group}
+          layout={layout}
+          theme={theme}
+          seriesIndexOffset={seriesIndexOffset}
+        />
+      );
     case "area":
-      return <AreaChart model={group} layout={layout} theme={theme} />;
+      return (
+        <AreaChart
+          model={group}
+          layout={layout}
+          theme={theme}
+          seriesIndexOffset={seriesIndexOffset}
+        />
+      );
   }
 }

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

@@ -37,9 +37,20 @@ export interface LineChartProps {
   model: LineChartModel;
   layout: PlotAreaLayout;
   theme: ResolvedTheme | undefined;
+  /**
+   * Offset added to each series' palette index. Used by combo charts so
+   * series in group N don't collide with group (N-1)'s palette slots.
+   * Defaults to 0 for standalone render.
+   */
+  seriesIndexOffset?: number;
 }
 
-function LineChartImpl({ model, layout, theme }: LineChartProps): React.ReactElement {
+function LineChartImpl({
+  model,
+  layout,
+  theme,
+  seriesIndexOffset = 0,
+}: LineChartProps): React.ReactElement {
   const plot = layout.plotRect;
   const { valueMin, valueMax } = computeValueRange(model);
   const categoryCount = Math.max(
@@ -52,11 +63,12 @@ function LineChartImpl({ model, layout, theme }: LineChartProps): React.ReactEle
   const slotWidth = plot.w / categoryCount;
   const valueSpan = Math.max(1e-9, valueMax - valueMin);
 
+  const reverseY = model.valueAxis.reverse === true;
   /** Map (categoryIdx, value) → plot-coordinate point. */
   const toPoint = (c: number, v: number): Point => {
     const x = plot.x + (c + 0.5) * slotWidth;
     const frac = (v - valueMin) / valueSpan;
-    const y = plot.y + plot.h - frac * plot.h;
+    const y = reverseY ? plot.y + frac * plot.h : plot.y + plot.h - frac * plot.h;
     return [x, y];
   };
 
@@ -69,7 +81,7 @@ function LineChartImpl({ model, layout, theme }: LineChartProps): React.ReactEle
   for (let s = 0; s < model.series.length; s++) {
     const series = model.series[s]!;
     const values = effectiveValues[s]!;
-    const color = composeSeriesColor(model, theme ?? { colors: {} }, s);
+    const color = composeSeriesColor(model, theme ?? { colors: {} }, s + seriesIndexOffset);
     const smooth = series.smooth ?? model.smooth;
     const showMarkers = (series.marker?.symbol ?? null) !== "none"
       && ((series.marker !== undefined) || model.marker);
@@ -140,14 +152,25 @@ export const LineChart = React.memo(
 function polylinePath(points: ReadonlyArray<Point>): string {
   if (points.length === 0) return "";
   const first = points[0]!;
-  let d = `M ${first[0]} ${first[1]}`;
+  let d = `M ${fmt(first[0])} ${fmt(first[1])}`;
   for (let i = 1; i < points.length; i++) {
     const p = points[i]!;
-    d += ` L ${p[0]} ${p[1]}`;
+    d += ` L ${fmt(p[0])} ${fmt(p[1])}`;
   }
   return d;
 }
 
+/**
+ * Round to 3 decimals and strip trailing zeros. Matches `smooth-curve.ts`
+ * so straight and smoothed path serializations are symmetric (important
+ * for deterministic pixel-diff output in Stage 7).
+ */
+function fmt(n: number): string {
+  if (!Number.isFinite(n)) return "0";
+  const rounded = Math.round(n * 1000) / 1000;
+  return rounded === 0 ? "0" : String(rounded);
+}
+
 // ---------------------------------------------------------------------------
 // Value extraction (B3 — dispBlanksAs)
 // ---------------------------------------------------------------------------

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

@@ -81,7 +81,6 @@ function PieChartImpl({ model, layout, theme, defs }: PieChartProps): React.Reac
   let currentAngleWord = startDegWord;
 
   const slices: React.ReactElement[] = [];
-  const palette = computePalette(model);
 
   for (let i = 0; i < values.length; i++) {
     const v = values[i];
@@ -91,7 +90,7 @@ function PieChartImpl({ model, layout, theme, defs }: PieChartProps): React.Reac
     const endWord = currentAngleWord + sweep;
     currentAngleWord = endWord;
 
-    const color = resolveSliceColor(model, theme, series, i, palette, defsRegistry);
+    const color = resolveSliceColor(model, theme, series, i, defsRegistry);
 
     const explosionPct = resolveExplosion(series, i);
     const midWord = (startWord + endWord) / 2;
@@ -174,6 +173,37 @@ function buildSlicePath(
   endWord: number,
 ): string {
   const sweep = endWord - startWord;
+
+  // Full-circle slice (one value at 100% of total) — SVG `A` with coincident
+  // start/end points draws nothing, so split at the midpoint into two
+  // half-arcs. Threshold < 360 to tolerate float drift from (v/total)*360.
+  if (sweep >= 359.999) {
+    const midWord = startWord + sweep / 2;
+    if (rInner <= 0) {
+      const p0 = polarToCartesian(cx, cy, rOuter, startWord);
+      const pm = polarToCartesian(cx, cy, rOuter, midWord);
+      return (
+        `M ${fmt(cx)} ${fmt(cy)} ` +
+        `L ${fmt(p0.x)} ${fmt(p0.y)} ` +
+        `A ${fmt(rOuter)} ${fmt(rOuter)} 0 0 1 ${fmt(pm.x)} ${fmt(pm.y)} ` +
+        `A ${fmt(rOuter)} ${fmt(rOuter)} 0 0 1 ${fmt(p0.x)} ${fmt(p0.y)} Z`
+      );
+    }
+    // Doughnut full-circle: two-subpath annulus.
+    const p0O = polarToCartesian(cx, cy, rOuter, startWord);
+    const pmO = polarToCartesian(cx, cy, rOuter, midWord);
+    const p0I = polarToCartesian(cx, cy, rInner, startWord);
+    const pmI = polarToCartesian(cx, cy, rInner, midWord);
+    return (
+      `M ${fmt(p0O.x)} ${fmt(p0O.y)} ` +
+      `A ${fmt(rOuter)} ${fmt(rOuter)} 0 0 1 ${fmt(pmO.x)} ${fmt(pmO.y)} ` +
+      `A ${fmt(rOuter)} ${fmt(rOuter)} 0 0 1 ${fmt(p0O.x)} ${fmt(p0O.y)} Z ` +
+      `M ${fmt(p0I.x)} ${fmt(p0I.y)} ` +
+      `A ${fmt(rInner)} ${fmt(rInner)} 0 0 0 ${fmt(pmI.x)} ${fmt(pmI.y)} ` +
+      `A ${fmt(rInner)} ${fmt(rInner)} 0 0 0 ${fmt(p0I.x)} ${fmt(p0I.y)} Z`
+    );
+  }
+
   const largeArc = sweep > 180 ? 1 : 0;
   const p0Outer = polarToCartesian(cx, cy, rOuter, startWord);
   const p1Outer = polarToCartesian(cx, cy, rOuter, endWord);
@@ -200,8 +230,9 @@ function buildSlicePath(
 
 /**
  * Offset a slice center radially outward along its bisector by the
- * explosion percentage (0 = no offset, 100 = push out by full radius;
- * Word visually caps the real-rendered effect at ~35% of radius).
+ * explosion percentage (0 = no offset, 100 = push out by full radius).
+ * Word's `c:explosion` value corresponds directly to the fraction of
+ * slice radius the slice moves outward.
  */
 function applyExplosion(
   cx: number,
@@ -211,7 +242,7 @@ function applyExplosion(
   explosionPct: number,
 ): { cx: number; cy: number } {
   if (explosionPct === 0) return { cx, cy };
-  const dist = rOuter * Math.min(1, explosionPct / 100) * 0.35;
+  const dist = rOuter * Math.min(1, explosionPct / 100);
   const p = polarToCartesian(0, 0, dist, midAngleWord);
   return { cx: cx + p.x, cy: cy + p.y };
 }
@@ -220,22 +251,11 @@ function applyExplosion(
 // Color & explosion resolution
 // ---------------------------------------------------------------------------
 
-function computePalette(
-  model: PieChartModel,
-): (sliceIdx: number) => string | null {
-  // Returns null to indicate "fall through to series color" when
-  // varyColors is false and no palette path is taken.
-  const style = getChartStyle(resolveChartStyleId(model.styleId));
-  const mode = style.seriesColorMode;
-  return (sliceIdx: number) => paletteColorRef(mode, sliceIdx).kind === "scheme" ? null : null;
-}
-
 function resolveSliceColor(
   model: PieChartModel,
   theme: ResolvedTheme | undefined,
   series: PieSeries,
   sliceIdx: number,
-  _palette: (i: number) => string | null,
   defs: DefsRegistry,
 ): string {
   // Per-slice dPt override wins.

package/src/ui-tailwind/chart/render/progressive-render.ts

@@ -91,7 +91,14 @@ export function useProgressiveCount(
         () => dispatch({ type: "advance", to: next }),
         { timeout: 100 },
       );
-      return () => cancelIdleCallback(h);
+      return () => {
+        // Guard `cancelIdleCallback` existence — the spec pairs them, but
+        // some polyfills ship only `requestIdleCallback`. Throwing
+        // ReferenceError on cleanup would leak the pending callback.
+        if (typeof cancelIdleCallback !== "undefined") {
+          cancelIdleCallback(h);
+        }
+      };
     } else {
       const h = setTimeout(() => dispatch({ type: "advance", to: next }), 0);
       return () => clearTimeout(h);