@nowline/layout 0.8.5 → 0.9.0

package/src/themes/light.ts

@@ -64,13 +64,19 @@ export const lightTheme: Theme = {
             shadow: 'subtle',
             cornerRadius: 'sm',
         },
+        // Containers shade their body with `bg` as a light tint
+        // (CONTAINER_BODY_FILL_OPACITY); groups and parallels get distinct
+        // ones, and a parallel's header bracket is dashed, a group's solid
+        // (specs/true-width-layout.md §3.3).
         parallel: {
             ...baseEntity,
-            bracket: 'none',
+            bg: '#635cf1',
+            bracket: 'dashed',
             padding: 'xs',
         },
         group: {
             ...baseEntity,
+            bg: '#ea9818',
             bracket: 'solid',
             padding: 'xs',
             fg: '#475569',
@@ -127,6 +133,8 @@ export const lightTheme: Theme = {
     timeline: {
         gridLine: '#cbd5e1',
         minorGridLine: '#e2e8f0',
+        nonWorkingSeam: '#a0aec0',
+        nonWorkingFill: '#64748b',
         tickMark: '#cbd5e1',
         labelText: '#64748b',
         panelFill: '#ffffff',
@@ -199,6 +207,15 @@ export const lightTheme: Theme = {
         badgeStroke: '#cbd5e1',
         badgeText: '#475569',
     },
+    wave: {
+        stripFill: '#f0fdfa',
+        stripFillAlt: '#ccfbf1',
+        labelText: '#134e4a',
+        labelMuted: '#0f766e',
+        boundary: '#0d9488',
+        hatch: '#0f172a',
+        hatchOnDark: '#ffffff',
+    },
     arrowhead: {
         neutral: '#475569',
         light: '#94a3b8',
@@ -212,6 +229,16 @@ export const lightTheme: Theme = {
         planned: '#94a3b8',
         neutral: '#94a3b8',
     },
+    // Item bar fill per status, applied by layout when the item's resolved
+    // `bg` is still `entities.item.bg` (m2d Resolution 3).
+    statusTint: {
+        done: '#ecfdf5',
+        inProgress: '#eff6ff',
+        atRisk: '#fffbeb',
+        blocked: '#fee2e2',
+        planned: '#f8fafc',
+        neutral: '#f8fafc',
+    },
     // Status-dot palettes — the renderer picks one based on the
     // bar's effective bg luminance.
     //

package/src/themes/shape.ts

@@ -82,6 +82,15 @@ export interface Theme {
         // when the roadmap's resolved `minor-grid` style is `true`. A step
         // lighter than `gridLine` so the major lines still dominate.
         minorGridLine: string;
+        // Faint dotted seam where hidden non-working days collapse between
+        // two working-day columns and no grid line already marks the spot
+        // (specs/working-calendar.md §7.4). Darker than `gridLine`, so it
+        // reads as a join rather than a column boundary.
+        nonWorkingSeam: string;
+        // Fill of a non-working band under the `show` display, painted at
+        // `NON_WORKING_FILL_OPACITY` over the row tints (specs/working-
+        // calendar.md §7.3): a faint shade a grid line still reads over.
+        nonWorkingFill: string;
         tickMark: string;
         labelText: string;
         // m2.5d: lifted from renderTimeline.
@@ -160,6 +169,22 @@ export interface Theme {
         badgeStroke: string;
         badgeText: string;
     };
+    /**
+     * Wave tokens (specs/waves.md section 9.10). `stripFill` and
+     * `stripFillAlt` alternate across the wave strip cells; `labelText`
+     * and `labelMuted` paint strip labels and secondary text; `boundary`
+     * is the vertical wave boundary line; `hatch` and `hatchOnDark` are
+     * the background-work hatch stroke on light and dark bar fills.
+     */
+    wave: {
+        stripFill: string;
+        stripFillAlt: string;
+        labelText: string;
+        labelMuted: string;
+        boundary: string;
+        hatch: string;
+        hatchOnDark: string;
+    };
     // m2.5d: lifted from renderEdge marker defs.
     arrowhead: {
         neutral: string;
@@ -175,6 +200,19 @@ export interface Theme {
         planned: string;
         neutral: string;
     };
+    /**
+     * Item bar fill per status when the item's resolved `bg` is the theme's
+     * item default (`entities.item.bg`); an explicit `bg:` wins. Same keys as
+     * `status`, which colors the border the same way for `entities.item.fg`.
+     */
+    statusTint: {
+        done: string;
+        inProgress: string;
+        atRisk: string;
+        blocked: string;
+        planned: string;
+        neutral: string;
+    };
     /**
      * Upper-right status-dot colors. Two palettes — the renderer
      * picks `onLight` for bars whose effective bg is light/pale and

package/src/themes/shared.ts

@@ -21,15 +21,6 @@ export const PADDING_PX: Record<'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', numbe
     xl: 32,
 };
 
-export const HEADER_HEIGHT_PX: Record<'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', number> = {
-    none: 0,
-    xs: 24,
-    sm: 36,
-    md: 56,
-    lg: 80,
-    xl: 112,
-};
-
 export const TEXT_SIZE_PX: Record<'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', number> = {
     none: 0,
     xs: 10,
@@ -63,8 +54,10 @@ export const LOGO_SIZE_PX: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number> = {
 // `defaultRowBand()` keeps the legacy 64/56 split byte-stable; new
 // callers should consume `bandScale.step()` and `bandScale.bandwidth()`.
 
-// Minimum item bar width so zero-duration items remain visible.
-export const MIN_ITEM_WIDTH = 8;
+// Minimum painted bar width: a bar spans exactly its dates, so this floor
+// only keeps a sub-pixel or zero-duration item visible
+// (specs/true-width-layout.md §3.1).
+export const MIN_ITEM_WIDTH = 1;
 
 // Height (px) of the bottom progress strip drawn along the item bar's
 // bottom edge. Single source of truth used by:
@@ -80,28 +73,43 @@ export const MIN_ITEM_WIDTH = 8;
 export const PROGRESS_STRIP_HEIGHT_PX = 4;
 
 // Timeline tick header band — a single row that holds the date labels
-// (e.g. "Jan 05", "Feb 14"). Layout sizes the panel; the renderer
-// paints the labels at a fixed baseline offset from the panel's top.
-//
-// Bumping the panel height without re-centering the baseline mis-centers
-// the dates — keep both knobs together so a change to either one is
-// visible at a glance.
-export const TIMELINE_TICK_PANEL_HEIGHT_PX = 24;
+// (e.g. "Jan 05", "Feb 14"). The roadmap's `header-height` style key
+// picks the panel height from this table; `none` drops the panel (top
+// and mirrored bottom) entirely. Layout sizes the panel; the renderer
+// paints the labels at `timelineTickLabelBaselineOffsetPx(height)` from
+// the panel's top, so the dates stay centered at every bucket.
+export const HEADER_HEIGHT_PX: Record<'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', number> = {
+    none: 0,
+    xs: 16,
+    sm: 20,
+    md: 24,
+    lg: 32,
+    xl: 40,
+};
+
+/** Tick panel height at the default `header-height:md`. */
+export const TIMELINE_TICK_PANEL_HEIGHT_PX = HEADER_HEIGHT_PX.md;
 
 /**
- * Baseline Y of the tick-label text relative to the tick panel's top.
- * Approximately vertically centers a 10 pt label in the panel.
+ * Baseline Y of the tick-label text relative to the tick panel's top,
+ * for a panel `panelHeightPx` tall. Approximately vertically centers a
+ * 10 pt label: half the panel plus ~3 px of descender allowance.
  */
-export const TIMELINE_TICK_LABEL_BASELINE_OFFSET_PX = 15;
+export function timelineTickLabelBaselineOffsetPx(panelHeightPx: number): number {
+    return Math.round(panelHeightPx / 2 + 3);
+}
+
+/** Tick-label baseline offset at the default panel height. */
+export const TIMELINE_TICK_LABEL_BASELINE_OFFSET_PX = timelineTickLabelBaselineOffsetPx(
+    TIMELINE_TICK_PANEL_HEIGHT_PX,
+);
 
 /**
- * Horizontal breathing room (px) added to a track-block's right edge
- * after sequencing. Applied to `group { ... }` and `parallel { ... }`
- * blocks so successive blocks don't crowd each other. Items butt up
- * against their neighbors (no gutter) — only block boundaries get this
- * gutter.
+ * Font size of the tick labels. Layout reads it to decide whether a
+ * partial edge column is wide enough to hold its label; the renderer
+ * paints at the same size.
  */
-export const TRACK_BLOCK_TAIL_GUTTER_PX = 8;
+export const TIMELINE_TICK_LABEL_FONT_SIZE_PX = 10;
 
 // Frame-tab chiclet — the rounded label tab that overhangs a swimlane
 // frame and the dashed include-region border. Both surfaces share the
@@ -117,60 +125,6 @@ export const FRAME_TAB_HEIGHT_PX = 22;
 /** Baseline Y of the chiclet label relative to the tab's top edge. */
 export const FRAME_TAB_LABEL_BASELINE_OFFSET_PX = 15;
 
-// Group title chiclet — the small label tab anchored flush in the upper-left
-// corner of a styled group's bounding box. Smaller than the frame-tab so it
-// reads as a "container label" rather than a sibling of the swimlane tab.
-//
-// The chiclet's top edge aligns with the group box's top edge and its left
-// edge aligns with the box's left edge (no overhang). The group reserves
-// `GROUP_TITLE_TAB_HEIGHT_PX + GROUP_TITLE_TAB_GUTTER_PX` of vertical top
-// padding inside the box before the first child row begins, so the chiclet
-// never overlaps content. Bumping the height without re-tuning
-// `GROUP_TITLE_TAB_LABEL_BASELINE_OFFSET_PX` mis-centers the label.
-
-/** Height (px) of the group-title chiclet anchored at the box's upper-left. */
-export const GROUP_TITLE_TAB_HEIGHT_PX = 16;
-
-/** Horizontal padding (px) on each side of the title text inside the chiclet. */
-export const GROUP_TITLE_TAB_PAD_X_PX = 6;
-
-/** Vertical gap (px) between the chiclet's bottom edge and the first inner row. */
-export const GROUP_TITLE_TAB_GUTTER_PX = 4;
-
-/** Baseline Y of the chiclet label relative to the chiclet's top edge.
- *  Tuned for a 9 pt bold glyph roughly vertically centered in a 16 px tab. */
-export const GROUP_TITLE_TAB_LABEL_BASELINE_OFFSET_PX = 11;
-
-/** Font size (px) of the group-title chiclet label. */
-export const GROUP_TITLE_TAB_LABEL_FONT_SIZE_PX = 9;
-
-/** Approximate per-character width factor used to size the chiclet to its
- *  title text. Mirrors the constant used in the renderer's pre-port code
- *  so the chiclet hugs short titles without clipping long ones. */
-export const GROUP_TITLE_TAB_CHAR_WIDTH_PX = 5.5;
-
-/** Padding (px) reserved on the inside-bottom of a styled group box before
- *  its lower stroke. Symmetric with the chiclet gutter so children breathe
- *  on both ends. */
-export const GROUP_BOTTOM_PAD_PX = 4;
-
-/**
- * Vertical space (px) reserved ABOVE a bracket-style (no-fill) group's
- * box to host its overhanging title label. Bracket groups paint their
- * label at `box.y - 2` (baseline) in the renderer — the glyph extent
- * lives entirely ABOVE box.y. Without an explicit reservation, that
- * overhang collides with the previous sibling's bracket-foot when two
- * bracket-titled groups stack in a parallel (the foot ends right where
- * the next label's top would render). The group shifts its own box.y
- * down by this amount so the label has clear space above it; the
- * caller advances by `bracketLabelOverhang + box.height + interRowGap`.
- *
- * Filled-style ("chiclet") groups use `GROUP_TITLE_TAB_HEIGHT_PX +
- * GROUP_TITLE_TAB_GUTTER_PX` instead — the chiclet sits INSIDE the box,
- * so they need no above-box reservation.
- */
-export const GROUP_BRACKET_LABEL_OVERHANG_PX = 12;
-
 /**
  * Dashed-accent pattern (px on / px off) used for two nowline accents
  * that read as "structural emphasis": the milestone vertical cut line
@@ -226,15 +180,15 @@ export const NOW_PILL_LABEL_INSET_X_PX = 6;
  */
 export const NOWLINE_STROKE_WIDTH_PX = 2.25;
 
-// Visual inset applied on each side of an item bar. Two adjacent (logically
-// chained) items therefore have a 2× ITEM_INSET_PX visible gutter between
-// them, leaving room for vertical drop-lines (dependency arrows, anchor /
-// milestone cuts, the now-line) to pass between bars without crossing them.
-export const ITEM_INSET_PX = 6;
+// The seam a bar gives up on each side, from inside its dates, so two bars
+// that abut in time show a 2 px gap between their strokes
+// (specs/true-width-layout.md §3.1). A bar too short for both seams and the
+// `MIN_ITEM_WIDTH` floor shrinks its seams instead, staying centred in its
+// dates.
+export const ITEM_SEAM_PX = 1;
 
 // Canonical content gutter — the rest-state spacing between adjacent
 // pieces of chart content. Used for:
-//   - the gap between two adjacent items in a track (= 2 × ITEM_INSET_PX),
 //   - the gap between the header card and the chart's left edge (originX
 //     offset from chartLeftX),
 //   - the bottom margin around the attribution wordmark.
@@ -244,11 +198,14 @@ export const ITEM_INSET_PX = 6;
 // That's a runtime concern — the layout engine emits a static positioned
 // model and the interactive shell animates spacing on top. Keep this
 // constant as the rest-state baseline.
-export const GUTTER_PX = 2 * ITEM_INSET_PX;
+export const GUTTER_PX = 12;
 
-// Default pixel-per-day when no explicit scale is set. Calibrated so a
-// 26-week (180 day) roadmap fits a 1200 px content area.
-export const DEFAULT_PIXELS_PER_DAY = 5;
+// Pixels per day at the days scale (`scale:1d`). A day literal labels
+// every column, so a day must hold its widest `M/D` label (`12/31`, about
+// 29 px at the 10 px tick font), as a 40 px week holds `Sep 28`. That
+// also keeps a day here wider than a day inside a default week column
+// (8 px under business, about 5.7 px under full).
+export const DEFAULT_PIXELS_PER_DAY = 32;
 
 // Header box defaults per position. The beside-mode card width is dynamic
 // (sized to the title + author text, clamped to MIN..MAX with text wrap),
@@ -266,13 +223,15 @@ export const HEADER_ABOVE_HEIGHT_PX = 72;
 //   │  Footnotes              ↑     │   header band (HEADER_HEIGHT)
 //   │                         │     │
 //   ├─────────────────────────┘     │   gap = PANEL_PADDING
-//   │  N  Title — description       │   row N (ROW_HEIGHT each)
+//   │  N  Title — description       │   row (ROW_HEIGHT each)
+//   │     that wraps at the title   │   wrapped row
 //   │  N  …                         │
 //   │                               │
 //   └───────────────────────────────┘   bottom pad = PANEL_PADDING
 //
 // Total panel height (when entries.length > 0):
-//   HEADER_HEIGHT + entries × ROW_HEIGHT + PANEL_PADDING
+//   HEADER_HEIGHT + rows × ROW_HEIGHT + PANEL_PADDING, where rows counts
+//   every entry's rows (wrapped ones included) and each region heading.
 
 /** Height (px) of the header band above the entry rows. */
 export const FOOTNOTE_HEADER_HEIGHT_PX = 28;
@@ -367,3 +326,36 @@ export const LABEL_THINNING: Record<'days' | 'weeks' | 'months' | 'quarters' | '
     quarters: 4,
     years: 5,
 };
+
+// Opacity of a non-working band (`timeline.nonWorkingFill`) under the
+// `show` display (specs/working-calendar.md §7.3).
+export const NON_WORKING_FILL_OPACITY = 0.1;
+
+// Waves (specs/waves.md section 9.10; hatch geometry section 9.3).
+export const WAVE_STRIP_HEIGHT_PX = 20;
+export const WAVE_BOUNDARY_WIDTH_PX = 2;
+export const WAVE_CROSS_DASH = '2 2';
+export const WAVE_HATCH_OPACITY = 0.13;
+export const WAVE_HATCH_TILE_PX = 6;
+export const WAVE_HATCH_STROKE_PX = 2;
+export const WAVE_STYLED_TINT_OPACITY = 0.12;
+export const WAVE_STYLED_STRIP_MIX_OPACITY = 0.25;
+export const WAVE_STRIP_LABEL_FONT_SIZE_PX = 10;
+export const WAVE_LEGEND_LINE_PX = 14;
+export const WAVE_LEGEND_GAP_PX = 8;
+// Wave strip and legend geometry (specs/waves.md §9.1, §9.5).
+/** Horizontal padding on each side of a strip label in the fit test. */
+export const WAVE_STRIP_LABEL_PAD_PX = 6;
+/** Horizontal padding of a strip label's halo on each side. */
+export const WAVE_LABEL_HALO_PAD_PX = 2;
+/** Vertical inset of a strip label's halo from the strip's top and bottom. */
+export const WAVE_LABEL_HALO_INSET_Y_PX = 3;
+/** How far a strip cell sits inside the backing panel: half its 1 px stroke. */
+export const WAVE_CELL_INSET_PX = 0.5;
+/** Legend swatch (a hatched bar) size. */
+export const WAVE_LEGEND_SWATCH_WIDTH_PX = 18;
+export const WAVE_LEGEND_SWATCH_HEIGHT_PX = 10;
+/** Gap between a legend swatch and its text. */
+export const WAVE_LEGEND_SWATCH_GAP_PX = 6;
+/** Legend text baseline below its line's top (10 px text in a 14 px line). */
+export const WAVE_LEGEND_BASELINE_OFFSET_PX = 11;

package/src/time-scale.ts

@@ -3,23 +3,39 @@
 // also exposes `invert(x) -> Date` for the m4 editor work and that
 // composes with a `WorkingCalendar` for non-continuous time models.
 //
-// Forward direction matches the legacy arithmetic byte-for-byte
-// (`originX + daysBetween(domain[0], date) * pixelsPerDay`) so the
-// m2.5a refactor leaves the rendered output unchanged. Invert uses
-// `d3-scale.scaleTime` so callers get a precise Date back from a
-// pixel coordinate.
-
-import { type ScaleTime, scaleTime } from 'd3-scale';
-import { daysBetween } from './calendar.js';
+// x is linear in the working-day index from the domain start
+// (specs/working-calendar.md §7.1): `originX + index * pixelsPerDay`.
+// With no calendar, or one with no non-working day, the index is
+// `daysBetween`, so the forward direction matches the legacy
+// arithmetic byte-for-byte. Under a calendar with non-working days a
+// hidden date maps to the start of the next working day, and `invert`
+// returns the working day whose start is nearest x.
+//
+// Under the `show` display (§7.3) a calendar's non-working days keep their
+// full width instead: x is linear in calendar days, and `startX` /
+// `advanceX` step an item over the non-working days it crosses. Every
+// branch for it is gated on `showsNonWorking`, so `hide`, a calendar with no
+// non-working day and a scale with no calendar keep the code above verbatim.
+
+import { addDays, daysBetween } from './calendar.js';
+import type { NonWorkingDisplay } from './non-working-display.js';
 import type { WorkingCalendar } from './working-calendar.js';
 
+/**
+ * Tolerance, in days, for reading a day off an x. Pixel sums carry float
+ * noise, so an x a hair before a day's start counts as that day.
+ */
+const DAY_EPSILON = 1e-6;
+
 export interface TimeScaleOptions {
     /** [start, end] in calendar dates (UTC midnight assumed). */
     domain: [Date, Date];
     /** [originX, originX + chartWidth]. */
     range: [number, number];
-    /** Optional non-continuous calendar for future weekend-skip support. */
+    /** The working calendar; without one every day is a working day. */
     calendar?: WorkingCalendar;
+    /** How non-working days are drawn; `hide` when omitted. */
+    nonWorking?: NonWorkingDisplay;
 }
 
 export class TimeScale {
@@ -27,15 +43,43 @@ export class TimeScale {
     readonly range: [number, number];
     readonly pixelsPerDay: number;
     readonly calendar?: WorkingCalendar;
-    private readonly d3: ScaleTime<number, number>;
+    /** The requested display; `showsNonWorking` says whether it takes effect. */
+    readonly nonWorking: NonWorkingDisplay;
 
     constructor(opts: TimeScaleOptions) {
         this.domain = opts.domain;
         this.range = opts.range;
         this.calendar = opts.calendar;
-        const spanDays = Math.max(1, daysBetween(opts.domain[0], opts.domain[1]));
+        this.nonWorking = opts.nonWorking ?? 'hide';
+        const spanDays = Math.max(
+            1,
+            this.showsNonWorking
+                ? daysBetween(opts.domain[0], opts.domain[1])
+                : this.indexOf(opts.domain[1]),
+        );
         this.pixelsPerDay = (opts.range[1] - opts.range[0]) / spanDays;
-        this.d3 = scaleTime().domain(opts.domain).range(opts.range);
+    }
+
+    /**
+     * True when non-working days are drawn at full width: the `show`
+     * display over a calendar that has non-working days. The one predicate
+     * every show-only branch in the layout is gated on.
+     */
+    get showsNonWorking(): boolean {
+        return this.nonWorking === 'show' && this.calendar?.hasNonWorkingDays === true;
+    }
+
+    /** Working days from the domain start to `date` (calendar days without a calendar). */
+    private indexOf(date: Date): number {
+        return this.calendar
+            ? this.calendar.workingIndexOf(this.domain[0], date)
+            : daysBetween(this.domain[0], date);
+    }
+
+    /** Calendar days from the domain start to `x`, and the whole day `x` lies in. */
+    private dayAt(x: number): { days: number; day: number } {
+        const days = (x - this.range[0]) / this.pixelsPerDay;
+        return { days, day: Math.floor(days + DAY_EPSILON) };
     }
 
     /**
@@ -44,14 +88,17 @@ export class TimeScale {
      * `forwardWithinDomain`).
      */
     forward(date: Date): number {
-        const days = daysBetween(this.domain[0], date);
-        return this.range[0] + days * this.pixelsPerDay;
+        if (this.showsNonWorking) {
+            return this.range[0] + daysBetween(this.domain[0], date) * this.pixelsPerDay;
+        }
+        return this.range[0] + this.indexOf(date) * this.pixelsPerDay;
     }
 
     /**
      * Project a date onto the x-axis, returning `null` when the date
-     * is outside [domain[0], domain[1]]. Replaces the legacy
-     * `xForDate(date, timeline)` helper.
+     * is outside [domain[0], domain[1]]. The guard compares raw dates,
+     * so a hidden day inside the window still projects. Replaces the
+     * legacy `xForDate(date, timeline)` helper.
      */
     forwardWithinDomain(date: Date): number | null {
         if (date < this.domain[0] || date > this.domain[1]) return null;
@@ -59,11 +106,62 @@ export class TimeScale {
     }
 
     /**
-     * Inverse projection. Returns a Date for any x in the chart;
-     * callers that want day-resolution can floor the result.
+     * Inverse projection: the working day whose start is nearest x
+     * (UTC midnight). Never a non-working day, except under `show`, where
+     * every day has width and this is the calendar day nearest x.
      */
     invert(x: number): Date {
-        return this.d3.invert(x);
+        const index = Math.round((x - this.range[0]) / this.pixelsPerDay);
+        if (this.showsNonWorking) return addDays(this.domain[0], index);
+        return this.calendar
+            ? this.calendar.dateAtWorkingIndex(this.domain[0], index)
+            : addDays(this.domain[0], index);
+    }
+
+    /**
+     * The working-day index at `x`, with the fraction of a working day it
+     * is into. Under `show` an x inside a non-working day reads as the start
+     * of the next working day; otherwise x is linear in the index.
+     */
+    indexAtX(x: number): number {
+        const { days, day } = this.dayAt(x);
+        if (!this.showsNonWorking || !this.calendar) return days;
+        const date = addDays(this.domain[0], day);
+        const index = this.calendar.workingIndexOf(this.domain[0], date);
+        if (!this.calendar.isWorkingDay(date)) return index;
+        return index + Math.max(0, days - day);
+    }
+
+    /**
+     * Where an item placed at `x` starts. Under `show` an x inside a
+     * non-working day moves forward to the start of the next working day;
+     * an x inside a working day keeps its fraction, so a start mid-Friday
+     * stays mid-Friday. The identity otherwise.
+     */
+    startX(x: number): number {
+        if (!this.showsNonWorking || !this.calendar) return x;
+        const date = addDays(this.domain[0], this.dayAt(x).day);
+        if (this.calendar.isWorkingDay(date)) return x;
+        const index = this.calendar.workingIndexOf(this.domain[0], date);
+        return this.forward(this.calendar.dateAtWorkingIndex(this.domain[0], index));
+    }
+
+    /**
+     * The x where `n` working days from `startX(x)` end. Under `show` that is
+     * the end of the last working day the span reaches, with a partial day
+     * interpolated, so a Mon-Fri item ends on Friday evening and the weekend
+     * after it stays open. `x + n * pixelsPerDay` otherwise.
+     */
+    advanceX(x: number, n: number): number {
+        if (!this.showsNonWorking || !this.calendar) return x + n * this.pixelsPerDay;
+        const start = this.startX(x);
+        if (n <= 0) return start;
+        const target = this.indexAtX(start) + n;
+        // The working day the span ends in, and how much of it it covers (0, 1].
+        const lastDay = Math.ceil(target - DAY_EPSILON) - 1;
+        const covered = target - lastDay;
+        const lastDate = this.calendar.dateAtWorkingIndex(this.domain[0], lastDay);
+        return this.forward(lastDate) + covered * this.pixelsPerDay;
     }
 
     /** First pixel of the chart (start of range). */