nteract/semiotic

Added

• band prop on LineChart and AreaChart (and StreamXYFrame) — asymmetric min/max envelope drawn under the lines/areas, driven by independent y0Accessor / y1Accessor. Distinct from the existing boundsAccessor (symmetric ±offset) and from AreaChart.y0Accessor (which replaces the area baseline). Pass a single BandConfig or an array of them for percentile fans (e.g. p25/p75 stacked on top of p10/p90). Per-series by default — one ribbon per lineBy / colorBy group, colored from the parent line at 0.2 fillOpacity. Pass perSeries: false for an aggregate min/max envelope across all series. Non-interactive by default (hovers pass through to the line on top); set interactive: true if the band should participate in hit testing. Band y0/y1 values feed yExtent auto-derivation so a tall envelope can never clip, with explicit yExtent still winning.
  • Tooltip enrichment now covers every interaction surface: the hovered datum carries band: { y0, y1 } (first band) and bands: [...] (all bands) on the pointer hover path, each allSeries[i].datum in multi-mode, and the keyboard-navigation datum — one shared enrichDatumWithBand helper drives all three. Bounds-sourced ribbons stay decorative and are excluded from the contract.
  • Default tooltip surfaces band values automatically: configure band without supplying a custom tooltip function and the default tooltip gains one row pair per band (low + high). String accessors become labels; function accessors fall back to low / high. Custom tooltips still read datum.band / datum.bands directly. Live demo at /charts/line-chart#band.
• tickAnchor: "edges" on frameProps.axes[i] — flips the leftmost tick's text-anchor to start and the rightmost to end on horizontal axes (and dominant-baseline to hanging / auto on vertical axes) so edge tick labels can't overflow the plot area. Default "middle" keeps existing behavior. Pairs naturally with axisExtent: "exact": exact pins the domain to the literal data min/max, edges keeps the labels readable at those bounds. Edge detection is pixel-based, not array-index-based, so inverted y scales (the default [height, 0]) and reversed x scales (streaming arrowOfTime: "left") anchor the right edges. Closes a common wrapper-library workaround that previously routed through xFormat returning ReactNodes with translateX math.
• --semiotic-tick-font-size and --semiotic-axis-label-font-size CSS variables — emitted from the canonical theme typography fields (tickSize, labelSize) alongside the existing --semiotic-tick-font-family and --semiotic-title-font-size. Both themeToCSS (raw string serialization) and ThemeProvider (inline style) write them; themeToTokens exports them as DTCG dimension tokens. SVG axes consume the variables via style={{ fontSize: "var(--semiotic-tick-font-size, 10px)" }} so a CSS-var override on any ancestor (<div style={{ "--semiotic-tick-font-size": "14px" }}>) flows down without consumers needing !important. Landmark ticks bump by calc(... + 1px) so the +1 size stays relative to the var.
• data-orient attributes and per-axis class names on axis groups — each axis now renders as its own <g class="semiotic-axis semiotic-axis-{bottom|left|right|top}" data-orient="…"> inside the .stream-axes wrapper. Consumers can target one axis at a time from external CSS without affecting the others: [data-orient='left'] text { font-size: 14px } works. Tick text carries class="semiotic-axis-tick", axis labels class="semiotic-axis-label", and chart titles class="semiotic-chart-title" for class-based targeting too.
• loadingContent prop on all HOCs — sibling to emptyContent. When loading is true and loadingContent is set, it renders in place of the default shimmer-bar skeleton (wrapped in the same sized container so the chart slot stays reserved). Pass false to suppress the loading UI entirely (the early-return becomes null and a consumer's outer loading state takes over). Threaded through useChartSetup, useNetworkChartSetup, and useCustomChartSetup; all 47 HOCs accept it via BaseChartProps.

Fixed

• website:build parcel resolution for the Atom feed link — docs/public/index.html previously declared <link rel="alternate" href="/blog/feed.xml"> with an absolute path so prerendered nested routes (e.g. /charts/line-chart/) wouldn't resolve it as /charts/line-chart/blog/feed.xml. Parcel's HTML packager couldn't resolve the absolute path during build, so the website build failed. Moved the link injection into scripts/prerender.mjs alongside the existing /llms.txt alternate injection — same strip-and-inject pattern, same absolute-URL semantics, and Parcel no longer sees the unresolvable reference in source HTML.

Changed

• boundsAccessor and band now share one rendering primitive. Both public envelope APIs normalize to a single resolvedRibbons: ResolvedRibbon[] array at the PipelineStore layer, then flow through xySceneBuilders/ribbonScene.ts — one scene builder, one y-extent expansion pass, one style cascade. boundsScene.ts and bandScene.ts are deleted; the public prop surfaces stay distinct (asymmetric pairs read better as band than as a boundsAccessor union return type) but the implementation is no longer duplicated. The bounds ribbon also now correctly skips datums with null/NaN y (previously the coerced +null === 0 could silently render a ribbon around the implicit-zero "value" of a missing row). The kind: "bounds" | "band" discriminator on each ribbon lets the hover handler restrict datum.band / datum.bands enrichment to band-sourced envelopes — bounds stays decorative-only, matching its prior contract.