@figurestead/web 0.9.0-alpha.1 → 0.9.0-alpha.2

package/src/schema.js

@@ -1,3 +1,5 @@
+import { linearFit } from "./statistics.js";
+
 export const SCHEMA_VERSION = "0.4";
 export const LEGACY_SCHEMA_VERSION = "0.3";
 export const RENDERER_API_VERSION = "1";
@@ -29,6 +31,14 @@ export function requiredString(value, path) {
   }
 }
 
+const CANONICAL_COLOR = /^#[0-9a-fA-F]{6}$/;
+
+export function requiredColor(value, path) {
+  if (typeof value !== "string" || !CANONICAL_COLOR.test(value)) {
+    throw new FiguresteadConfigError("must be a canonical #RRGGBB color", path);
+  }
+}
+
 export function numberArray(value, path, { allowEmpty = false } = {}) {
   if (!Array.isArray(value) || (!allowEmpty && value.length === 0)) {
     throw new FiguresteadConfigError("must be a non-empty numeric array", path);
@@ -62,21 +72,27 @@ function timelineWindow(value, path) {
   }
 }
 
-function validateTheme(theme) {
-  requiredObject(theme, "config.theme");
-  ["key", "name", "field", "panel", "grid", "spine", "label", "secondary", "faint", "primary", "summaryCore", "warm"]
-    .forEach((key) => requiredString(theme[key], `config.theme.${key}`));
+export function validateThemeColors(theme, path = "config.theme") {
+  requiredObject(theme, path);
+  ["field", "panel", "grid", "spine", "label", "secondary", "faint", "primary", "summaryCore", "warm"]
+    .forEach((key) => requiredColor(theme[key], `${path}.${key}`));
   if (!Array.isArray(theme.series) || !theme.series.length) {
-    throw new FiguresteadConfigError("must be a non-empty color array", "config.theme.series");
+    throw new FiguresteadConfigError("must be a non-empty color array", `${path}.series`);
   }
-  theme.series.forEach((color, index) => requiredString(color, `config.theme.series[${index}]`));
-  for (const key of ["primaryEdge", "summaryEdge"]) if (theme[key] != null) requiredString(theme[key], `config.theme.${key}`);
+  theme.series.forEach((color, index) => requiredColor(color, `${path}.series[${index}]`));
+  for (const key of ["primaryEdge", "summaryEdge"]) if (theme[key] != null) requiredColor(theme[key], `${path}.${key}`);
   if (theme.seriesEdges != null) {
-    if (!Array.isArray(theme.seriesEdges) || theme.seriesEdges.length !== theme.series.length) throw new FiguresteadConfigError(`must contain exactly ${theme.series.length} colors`, "config.theme.seriesEdges");
-    theme.seriesEdges.forEach((color, index) => requiredString(color, `config.theme.seriesEdges[${index}]`));
+    if (!Array.isArray(theme.seriesEdges) || theme.seriesEdges.length !== theme.series.length) throw new FiguresteadConfigError(`must contain exactly ${theme.series.length} colors`, `${path}.seriesEdges`);
+    theme.seriesEdges.forEach((color, index) => requiredColor(color, `${path}.seriesEdges[${index}]`));
   }
 }
 
+function validateTheme(theme) {
+  requiredObject(theme, "config.theme");
+  ["key", "name"].forEach((key) => requiredString(theme[key], `config.theme.${key}`));
+  validateThemeColors(theme);
+}
+
 function validateProfile(profile) {
   requiredObject(profile, "config.profile");
   ["key", "name", "marker"].forEach((key) => requiredString(profile[key], `config.profile.${key}`));
@@ -170,6 +186,13 @@ export function normalizeScatterData(data, basePath = "config.data") {
   if (summary !== null && summary !== "linear_fit") {
     throw new FiguresteadConfigError("must be null or 'linear_fit'", `${basePath}.summary`);
   }
+  if (summary === "linear_fit") {
+    try {
+      linearFit(x, y);
+    } catch (error) {
+      throw new FiguresteadConfigError(error.message, `${basePath}.summary`);
+    }
+  }
   return {
     x, y, series: series.map(String), seriesLabels: normalizeSeriesLabels(keys, data.seriesLabels), summary,
     xDomain: domain(data.xDomain, `${basePath}.xDomain`), yDomain: domain(data.yDomain, `${basePath}.yDomain`),

package/src/scientific-layout.js

@@ -0,0 +1,148 @@
+const clamp = (value, minimum, maximum) => Math.max(minimum, Math.min(maximum, value));
+
+const DEFAULT_FONT_WIDTH = 0.602;
+
+function fallbackMetric(text, fontSize) {
+  return {
+    width: String(text).length * fontSize * DEFAULT_FONT_WIDTH,
+    ascent: fontSize * 0.78,
+    descent: fontSize * 0.22,
+  };
+}
+
+function normalizedMetric(measureText, text, fontSize) {
+  const measured = measureText?.(String(text), fontSize) ?? fallbackMetric(text, fontSize);
+  const ascent = measured.ascent ?? measured.actualBoundingBoxAscent ?? fontSize * 0.78;
+  const descent = measured.descent ?? measured.actualBoundingBoxDescent ?? fontSize * 0.22;
+  return { width: measured.width, ascent, descent, height: ascent + descent };
+}
+
+function annotationGaps(scale) {
+  return {
+    outer: clamp(7 * scale, 4, 10),
+    plotTick: clamp(7 * scale, 4, 9),
+    tickTitle: clamp(7 * scale, 4, 9),
+    titleFooter: clamp(8 * scale, 5, 10),
+    yTitleTick: clamp(8 * scale, 5, 10),
+  };
+}
+
+function xTickDepth(axes, plot, metric) {
+  const slot = axes.x.step?.() ?? Math.max(40, (plot.right - plot.left) / Math.max(1, axes.xTicks.length));
+  const metrics = axes.xTicks.map((tick) => metric(tick.label));
+  const rotate = axes.xType === "band" && metrics.some((value) => value.width > slot * 0.92);
+  const depth = metrics.length
+    ? Math.max(...metrics.map((value) => rotate ? (value.width + value.height) / Math.sqrt(2) : value.height))
+    : 0;
+  return { rotate, depth, metrics };
+}
+
+/**
+ * Internal annotation layout pass. It deliberately consumes resolved tick strings
+ * rather than guessing from canvas size. No contract or renderer API is exposed.
+ */
+export function refineScientificLayout(source, panel, axes, options = {}) {
+  const layout = {
+    ...source,
+    rect: { ...source.rect }, plot: { ...source.plot }, font: { ...source.font },
+    text: { ...(source.text ?? {}) }, provenance: source.provenance ? { ...source.provenance } : null,
+    legend: source.legend ? { ...source.legend } : null,
+  };
+  const { rect, font, scale } = layout, gaps = annotationGaps(scale);
+  const axisMetric = (text) => normalizedMetric(options.measureText, text, font.axis);
+  const signatureMetric = (text) => normalizedMetric(options.measureText, text, font.signature);
+  const xTitleMetric = panel.spec.xLabel ? axisMetric(panel.spec.xLabel) : null;
+  const yTitleMetric = panel.spec.yLabel ? axisMetric(panel.spec.yLabel) : null;
+  const footerMetric = panel.spec.signature ? signatureMetric(panel.spec.signature) : null;
+  const hasLocalFooter = Boolean(
+    footerMetric && options.themeMode !== "paper" && (layout.panelIndex ?? 0) === 0
+    && (!layout.provenance || layout.provenance.y <= rect.bottom)
+  );
+
+  const provisionalPlot = { ...layout.plot };
+  const xTick = xTickDepth(axes, provisionalPlot, axisMetric);
+  const yTickMetrics = axes.yTicks.map((tick) => axisMetric(tick.label));
+  const yTickWidth = yTickMetrics.length ? Math.max(...yTickMetrics.map((value) => value.width)) : 0;
+
+  let cursorBottom = rect.bottom - gaps.outer;
+  let provenance = null;
+  if (hasLocalFooter) {
+    const baseline = cursorBottom - footerMetric.descent;
+    provenance = {
+      left: 0, right: rect.right - gaps.outer, y: baseline,
+      bounds: { left: 0, right: 0, top: baseline - footerMetric.ascent, bottom: baseline + footerMetric.descent },
+    };
+    cursorBottom = provenance.bounds.top - gaps.titleFooter;
+  }
+  let xTitle = null;
+  if (xTitleMetric) {
+    xTitle = { left: 0, right: 0, top: cursorBottom - xTitleMetric.height, bottom: cursorBottom };
+    cursorBottom = xTitle.top - gaps.tickTitle;
+  }
+  const xTicks = {
+    left: 0, right: 0,
+    top: cursorBottom - xTick.depth,
+    bottom: cursorBottom,
+  };
+  const requestedPlotBottom = xTicks.top - gaps.plotTick;
+  const availablePlotHeight = Math.max(0, requestedPlotBottom - layout.plot.top);
+  const minimumPlotHeight = Math.min(120, availablePlotHeight);
+  layout.plot.bottom = Math.max(layout.plot.top + minimumPlotHeight, requestedPlotBottom);
+
+  const yTitleThickness = yTitleMetric?.height ?? 0;
+  const requestedPlotLeft = rect.left + gaps.outer + yTitleThickness
+    + (yTitleMetric && yTickWidth ? gaps.yTitleTick : 0) + yTickWidth + gaps.plotTick;
+  layout.plot.left = Math.min(layout.plot.right - 160, requestedPlotLeft);
+
+  const xCenter = (layout.plot.left + layout.plot.right) / 2;
+  xTicks.left = layout.plot.left; xTicks.right = layout.plot.right;
+  if (xTitle) {
+    xTitle.left = xCenter - xTitleMetric.width / 2;
+    xTitle.right = xCenter + xTitleMetric.width / 2;
+    layout.text.xLabelY = xTitle.bottom;
+    layout.text.xLabelBaselineY = xTitle.top + xTitleMetric.ascent;
+  }
+  layout.text.xTickY = xTicks.top;
+  layout.text.xTickBaselineY = xTicks.top + (xTick.metrics[0]?.ascent ?? font.axis * 0.78);
+  layout.text.rotateX = xTick.rotate;
+
+  const yTicks = {
+    left: layout.plot.left - gaps.plotTick - yTickWidth,
+    right: layout.plot.left - gaps.plotTick,
+    top: layout.plot.top, bottom: layout.plot.bottom,
+  };
+  let yTitle = null;
+  if (yTitleMetric) {
+    const right = yTicks.left - (yTickWidth ? gaps.yTitleTick : 0);
+    yTitle = { left: right - yTitleMetric.height, right, top: layout.plot.top, bottom: layout.plot.bottom };
+    layout.text.yLabelX = yTitle.left;
+  }
+
+  if (provenance) {
+    provenance.left = layout.plot.left;
+    provenance.bounds.left = provenance.left;
+    provenance.bounds.right = provenance.left + footerMetric.width;
+    layout.provenance = { left: provenance.left, right: provenance.right, y: provenance.y };
+  } else if (layout.provenance?.y <= rect.bottom) {
+    layout.provenance = null;
+  }
+  if (layout.legend) {
+    layout.legend = layout.legend.outside
+      ? { ...layout.legend, top: layout.plot.top, bottom: layout.plot.bottom }
+      : { ...layout.legend, left: layout.plot.left, right: layout.plot.right, top: layout.plot.top, bottom: layout.plot.bottom };
+  }
+
+  layout.annotationBounds = {
+    plot: { ...layout.plot }, xTicks, xTitle, provenance: provenance?.bounds ?? null, yTicks, yTitle,
+    gaps: {
+      plotToXTicks: xTicks.top - layout.plot.bottom,
+      xTicksToTitle: xTitle ? xTitle.top - xTicks.bottom : null,
+      xTitleToProvenance: xTitle && provenance ? provenance.bounds.top - xTitle.bottom : null,
+      xTicksToProvenance: !xTitle && provenance ? provenance.bounds.top - xTicks.bottom : null,
+      yTitleToTicks: yTitle ? yTicks.left - yTitle.right : null,
+      yTicksToPlot: layout.plot.left - yTicks.right,
+    },
+    rotateX: xTick.rotate,
+  };
+  return layout;
+}

package/src/screen-legibility.js

@@ -0,0 +1,30 @@
+import { resolveContrastColor } from "./color-space.js";
+
+export const SCREEN_LEGIBILITY_VERSION = "figurestead.screen-legibility/1";
+
+// Figurestead project floors for browser-rendered evidence. These are not
+// assertions of conformance with an external accessibility standard.
+export const SCREEN_PROJECT_LEGIBILITY_FLOORS = Object.freeze({
+  provenanceContrast: 3.4,
+  compactProvenancePx: 9,
+});
+
+export function resolveScreenTheme(source) {
+  const resolution = resolveContrastColor(
+    source.faint,
+    source.field,
+    SCREEN_PROJECT_LEGIBILITY_FLOORS.provenanceContrast,
+  );
+  const theme = { ...source, faint: resolution.color };
+  return Object.freeze({
+    theme: Object.freeze(theme),
+    report: Object.freeze({
+      schemaVersion: SCREEN_LEGIBILITY_VERSION,
+      policy: "Figurestead screen/project legibility floor",
+      token: "faint",
+      surface: "field",
+      minimum: SCREEN_PROJECT_LEGIBILITY_FLOORS.provenanceContrast,
+      resolution: Object.freeze({ ...resolution }),
+    }),
+  });
+}

package/src/statistics.js

@@ -0,0 +1,21 @@
+export function linearFit(x, y) {
+  if (!Array.isArray(x) || !Array.isArray(y) || x.length !== y.length) {
+    throw new TypeError("linear_fit requires x and y arrays of equal length");
+  }
+  if (x.length < 2) throw new TypeError("linear_fit requires at least two finite observations");
+  if (!x.every(Number.isFinite) || !y.every(Number.isFinite)) {
+    throw new TypeError("linear_fit requires finite x and y values");
+  }
+  if (new Set(x).size < 2) throw new TypeError("linear_fit requires at least two distinct finite x values");
+
+  const meanX = x.reduce((sum, value) => sum + value, 0) / x.length;
+  const meanY = y.reduce((sum, value) => sum + value, 0) / y.length;
+  let numerator = 0;
+  let denominator = 0;
+  for (let index = 0; index < x.length; index += 1) {
+    const centeredX = x[index] - meanX;
+    numerator += centeredX * (y[index] - meanY);
+    denominator += centeredX * centeredX;
+  }
+  return { slope: numerator / denominator, intercept: meanY - (numerator / denominator) * meanX };
+}

package/src/svg-export.js

@@ -4,8 +4,11 @@ import { resolveTerminalScene } from "./resolved-scene.js";
 import { composeResolvedScene } from "./composition.js";
 import { partitionPanelMarks, plotClipRect } from "./render-layers.js";
 import { resolveExportSize } from "./physical-export.js";
+import { validateThemeColors } from "./schema.js";
+import { fixedResponsiveHeader, RESPONSIVE_HEADER_MAX_WIDTH } from "./responsive-header.js";
 
-const esc = (value) => String(value).replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&apos;" }[char]));
+const xmlValue = (value) => String(value).replace(/[^\u0009\u000A\u000D\u0020-\uD7FF\uE000-\uFFFD\u{10000}-\u{10FFFF}]/gu, "\uFFFD");
+const esc = (value) => xmlValue(value).replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&apos;" }[char]));
 const attrs = (value) => Object.entries(value).filter(([, item]) => item != null).map(([key, item]) => `${key}="${esc(item)}"`).join(" ");
 const FONT = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
 
@@ -145,11 +148,11 @@ function panelSurface(panel, theme) {
 function axes(panel, theme) {
   const plot = panel.axes.plot ?? panel.layout.plot, { font } = panel.layout, pieces = [`<path ${attrs({ d: `M ${plot.left} ${plot.top} L ${plot.left} ${plot.bottom} L ${plot.right} ${plot.bottom}`, fill: "none", stroke: theme.spine })}/>`];
   const slot = panel.axes.x.step?.() ?? Math.max(40, (plot.right - plot.left) / Math.max(1, panel.axes.xTicks.length));
-  const rotate = panel.axes.xType === "band" && panel.axes.xTicks.some((tick) => String(tick.label).length * font.axis * 0.62 > slot * 0.92);
-  panel.axes.xTicks.forEach((tick) => { const x = tickPosition(panel.axes.x, tick), y = plot.bottom + 16 * panel.layout.scale; pieces.push(`<text ${attrs({ x, y, fill: theme.secondary, "font-size": font.axis, "text-anchor": rotate ? "end" : "middle", transform: rotate ? `rotate(-45 ${x} ${y})` : null })}>${esc(tick.label)}</text>`); });
+  const rotate = panel.layout.text?.rotateX ?? (panel.axes.xType === "band" && panel.axes.xTicks.some((tick) => String(tick.label).length * font.axis * 0.62 > slot * 0.92));
+  panel.axes.xTicks.forEach((tick) => { const x = tickPosition(panel.axes.x, tick), y = panel.layout.text?.xTickBaselineY ?? plot.bottom + 16 * panel.layout.scale; pieces.push(`<text ${attrs({ x, y, fill: theme.secondary, "font-size": font.axis, "text-anchor": rotate ? "end" : "middle", transform: rotate ? `rotate(-45 ${x} ${y})` : null })}>${esc(tick.label)}</text>`); });
   panel.axes.yTicks.forEach((tick) => pieces.push(`<text ${attrs({ x: plot.left - 7 * panel.layout.scale, y: tickPosition(panel.axes.y, tick), fill: theme.secondary, "font-size": font.axis, "text-anchor": "end", "dominant-baseline": "middle" })}>${esc(tick.label)}</text>`));
-  if (panel.spec.xLabel) pieces.push(`<text ${attrs({ x: (plot.left + plot.right) / 2, y: panel.layout.rect.bottom - 6 * panel.layout.scale, fill: theme.label, "font-size": font.axis, "text-anchor": "middle" })}>${esc(panel.spec.xLabel)}</text>`);
-  if (panel.spec.yLabel) pieces.push(`<text ${attrs({ x: panel.layout.rect.left + 12 * panel.layout.scale, y: (plot.top + plot.bottom) / 2, fill: theme.label, "font-size": font.axis, transform: `rotate(-90 ${panel.layout.rect.left + 12 * panel.layout.scale} ${(plot.top + plot.bottom) / 2})`, "text-anchor": "middle" })}>${esc(panel.spec.yLabel)}</text>`);
+  if (panel.spec.xLabel) pieces.push(`<text ${attrs({ x: (plot.left + plot.right) / 2, y: panel.layout.text?.xLabelBaselineY ?? panel.layout.rect.bottom - 6 * panel.layout.scale, fill: theme.label, "font-size": font.axis, "text-anchor": "middle" })}>${esc(panel.spec.xLabel)}</text>`);
+  if (panel.spec.yLabel) { const x = panel.layout.text?.yLabelX ?? panel.layout.rect.left + 12 * panel.layout.scale; pieces.push(`<text ${attrs({ x, y: (plot.top + plot.bottom) / 2, fill: theme.label, "font-size": font.axis, transform: `rotate(-90 ${x} ${(plot.top + plot.bottom) / 2})`, "text-anchor": "middle", "dominant-baseline": "hanging" })}>${esc(panel.spec.yLabel)}</text>`); }
   return pieces.join("");
 }
 
@@ -183,7 +186,17 @@ function matrixLegend(panel, theme, namespace) {
   return `<defs><linearGradient id="${esc(id)}"><stop offset="0%" stop-color="${esc(style.low)}"/><stop offset="68%" stop-color="${esc(style.color)}"/><stop offset="100%" stop-color="${esc(style.high)}"/></linearGradient></defs><text ${attrs({ x: left, y: top - 3 * panel.layout.scale, fill: theme.label, "font-size": panel.layout.font.legend })}>${esc(panel.valueScale.label)}</text><rect ${attrs({ x: left, y: top, width, height, fill: `url(#${id})`, stroke: theme.spine })}/><text ${attrs({ x: left, y: top + height + 12 * panel.layout.scale, fill: theme.secondary, "font-size": panel.layout.font.legend })}>${esc(panel.valueScale.domain[0])}</text><text ${attrs({ x: left + width, y: top + height + 12 * panel.layout.scale, fill: theme.secondary, "font-size": panel.layout.font.legend, "text-anchor": "end" })}>${esc(panel.valueScale.domain[1])}</text>`;
 }
 
-function panelSvg(panel, theme, profile, namespace) {
+function panelHeaderSvg(panel, theme, responsive) {
+  const titleFill = theme.mode === "paper" ? theme.label : theme.primary;
+  if (!responsive) {
+    return `<text ${attrs({ x: panel.layout.plot.left, y: panel.layout.text?.titleY ?? panel.layout.rect.top + 20, fill: titleFill, "font-size": panel.layout.font.title })}>${esc(panel.spec.title || panel.renderer)}</text>`;
+  }
+  const title = `<text ${attrs({ fill: titleFill, "font-size": panel.layout.font.title, "data-header-part": "title", "data-full-text": panel.spec.title || panel.renderer })}>${responsive.title.lines.map((line, index) => `<tspan ${attrs({ x: panel.layout.plot.left, y: responsive.title.baselines[index] })}>${esc(line)}</tspan>`).join("")}</text>`;
+  const subtitle = panel.spec.subtitle ? `<text ${attrs({ fill: theme.secondary, "font-size": panel.layout.font.subtitle, "font-style": "italic", "data-header-part": "subtitle", "data-full-text": panel.spec.subtitle })}>${responsive.subtitle.lines.map((line, index) => `<tspan ${attrs({ x: panel.layout.plot.left, y: responsive.subtitle.baselines[index] })}>${esc(line)}</tspan>`).join("")}</text>` : "";
+  return `<g ${attrs({ "data-responsive-header": responsive.policy })}>${title}${subtitle}</g>`;
+}
+
+function panelSvg(panel, theme, profile, namespace, responsive = null) {
   if (!panel.resolved) throw new TypeError(`SVG export requires a scene-aware renderer; ${panel.renderer} remains on the compatibility path`);
   const render = (mark) => mark.kind === "point" ? marker(mark)
     : ["segment", "summary-line"].includes(mark.kind) ? segment(mark)
@@ -204,7 +217,7 @@ function panelSvg(panel, theme, profile, namespace) {
     : mark.kind === "baseline-rule" ? baselineLabel(mark, panel)
       : mark.kind === "temporal-bar" ? temporalBarLabel(mark, panel, theme) : "").join("");
   const denominator = panel.meta?.denominator ? `<text ${attrs({ x: panel.layout.plot.right, y: panel.layout.plot.top - 5 * panel.layout.scale, fill: theme.warm, "font-size": panel.layout.font.signature, "text-anchor": "end" })}>${esc(`${panel.meta.denominator.label}: ${panel.meta.denominator.value}`)}</text>` : "";
-  const title = `<text ${attrs({ x: panel.layout.plot.left, y: panel.layout.text?.titleY ?? panel.layout.rect.top + 20, fill: theme.mode === "paper" ? theme.label : theme.primary, "font-size": panel.layout.font.title })}>${esc(panel.spec.title || panel.renderer)}</text>`;
+  const title = panelHeaderSvg(panel, theme, responsive);
   const provenance = theme.mode !== "paper" && panel.spec.signature && (panel.layout.panelIndex ?? 0) === 0
     ? `<text ${attrs({ x: panel.layout.provenance?.left ?? panel.layout.plot.left, y: panel.layout.provenance?.y ?? panel.layout.rect.bottom - 8 * panel.layout.scale, fill: theme.faint, "font-size": panel.layout.font.signature, "text-anchor": "start", "data-layer": "provenance" })}>${esc(panel.spec.signature)}</text>` : "";
   return `<g ${attrs({ "data-panel-id": panel.id, "data-renderer": panel.renderer, "data-denominator": panel.denominator == null ? null : JSON.stringify(panel.denominator), "data-x-category-order": panel.categories.x?.join("|"), "data-y-category-order": panel.categories.y?.join("|") })}><defs><clipPath id="${esc(clipId)}" clipPathUnits="userSpaceOnUse"><rect ${attrs({ x: plot.left, y: plot.top, width: plot.right - plot.left, height: plot.bottom - plot.top })}/></clipPath></defs><g data-layer="surface">${panelSurface(panel, theme)}</g><g data-layer="grid">${grid(panel, theme, profile)}</g>${renderLayer("reference", layers.reference)}${renderLayer("data", dataMarks)}${renderLayer("summary", layers.summary)}<g data-layer="axes">${title}${axes(panel, theme)}${provenance}</g><g data-layer="annotations">${dataLabels}${annotations(panel, theme)}</g><g data-layer="legend">${legend(panel, theme)}${matrixLegend(panel, theme, namespace)}${denominator}</g></g>`;
@@ -212,12 +225,14 @@ function panelSvg(panel, theme, profile, namespace) {
 
 export function resolvedSceneToSvg(resolved, options = {}) {
   const composed = resolved.schemaVersion === "figurestead.composed-scene/1" ? resolved : composeResolvedScene(resolved);
+  validateThemeColors(composed.theme, "scene.theme");
   const scene = options.sourceScene, namespace = svgNamespace(composed, scene, options);
   const exportSize = options.exportSize ?? resolveExportSize({ ...options, width: composed.width, height: composed.height });
   const title = composed.spec.title, description = [composed.spec.description || composed.spec.subtitle || "Scientific figure", composed.spec.note, ...composed.panels.flatMap((panel) => panel.notes ?? [])].filter(Boolean).join(" ");
   const titleId = `${namespace}-title`, descId = `${namespace}-desc`;
   const header = composed.layout.header ? `<text ${attrs({ x: composed.layout.header.left, y: composed.layout.header.titleY, fill: composed.theme.mode === "paper" ? composed.theme.label : composed.theme.primary, "font-size": composed.layout.font.title })}>${esc(title)}</text>` : "";
-  return `<svg xmlns="http://www.w3.org/2000/svg" ${attrs({ width: exportSize.widthAttribute, height: exportSize.heightAttribute, viewBox: `0 0 ${composed.width} ${composed.height}`, role: "img", "aria-labelledby": `${titleId} ${descId}`, "data-scene-version": composed.sourceSceneVersion, "data-resolved-scene-version": composed.resolvedSceneVersion, "data-composed-scene-version": composed.schemaVersion, "data-evidence-fingerprint": scene ? evidenceFingerprint(scene) : null, "data-physical-width-mm": exportSize.physical?.widthMm })}><title id="${titleId}">${esc(title)}</title><desc id="${descId}">${esc(description)}</desc><rect width="100%" height="100%" fill="${composed.theme.field}"/>${header}${composed.panels.map((panel) => panelSvg(panel, composed.theme, composed.profile, namespace)).join("")}</svg>`;
+  const fixedResponsive = composed.width <= RESPONSIVE_HEADER_MAX_WIDTH && composed.panels.length === 1 && composed.theme.mode !== "paper";
+  return `<svg xmlns="http://www.w3.org/2000/svg" ${attrs({ width: exportSize.widthAttribute, height: exportSize.heightAttribute, viewBox: `0 0 ${composed.width} ${composed.height}`, role: "img", "aria-labelledby": `${titleId} ${descId}`, "data-scene-version": composed.sourceSceneVersion, "data-resolved-scene-version": composed.resolvedSceneVersion, "data-composed-scene-version": composed.schemaVersion, "data-evidence-fingerprint": scene ? evidenceFingerprint(scene) : null, "data-physical-width-mm": exportSize.physical?.widthMm })}><title id="${titleId}">${esc(title)}</title><desc id="${descId}">${esc(description)}</desc><rect ${attrs({ width: "100%", height: "100%", fill: composed.theme.field })}/>${header}${composed.panels.map((panel) => panelSvg(panel, composed.theme, composed.profile, namespace, panel.layout.headerText ?? (fixedResponsive ? fixedResponsiveHeader(panel) : null))).join("")}</svg>`;
 }
 
 export function sceneToSvg(scene, options = {}) {

package/src/terminal-scene.js

@@ -7,6 +7,7 @@ import { legendWithStyles, resolveSeriesStyles } from "./series-style.js";
 import { compileMotionPlan, assertTerminalMotionIdentity } from "./motion-plan.js";
 import { auditPaperTheme, themeResolutionForProfile } from "./paper-profile.js";
 import { validateEvidenceCoverage } from "./evidence-coverage.js";
+import { linearFit } from "./statistics.js";
 
 export const TERMINAL_SCENE_VERSION = "figurestead.scene/1";
 
@@ -42,9 +43,7 @@ function scatterMarks(panel, contract, prepared, styles) {
     x: point.x, y: point.y, style: styles[point.series],
   }));
   if (contract.data.summary === "linear_fit") {
-    const n = prepared.points.length, sx = prepared.points.reduce((a, p) => a + p.x, 0), sy = prepared.points.reduce((a, p) => a + p.y, 0);
-    const sxx = prepared.points.reduce((a, p) => a + p.x * p.x, 0), sxy = prepared.points.reduce((a, p) => a + p.x * p.y, 0);
-    const slope = (n * sxy - sx * sy) / (n * sxx - sx * sx || 1), intercept = (sy - slope * sx) / n;
+    const { slope, intercept } = linearFit(prepared.points.map((point) => point.x), prepared.points.map((point) => point.y));
     marks.push({ id: markId(panel, "summary", "linear-fit"), kind: "summary-line", role: "model", slope, intercept, style: { color: contract.theme.summaryCore, edge: contract.theme.summaryEdge ?? null, lineStyle: "solid" } });
   }
   return marks;

package/themes/deep_observatory_sage_core.json

@@ -0,0 +1,28 @@
+{
+  "drafts": {},
+  "name": "Deep Observatory / Sage Core",
+  "schemaVersion": "figurestead.theme-pack/1",
+  "themes": {
+    "deep_observatory_sage_core": {
+      "faint": "#71817C",
+      "field": "#10171D",
+      "grid": "#29393A",
+      "key": "deep_observatory_sage_core",
+      "label": "#E3ECE8",
+      "name": "Deep Observatory / Sage Core",
+      "panel": "#19252A",
+      "primary": "#5A9FA4",
+      "secondary": "#A8B5AE",
+      "series": [
+        "#5A9FA4",
+        "#C59C3E",
+        "#B44D4F",
+        "#8A76C4",
+        "#7BB888"
+      ],
+      "spine": "#748780",
+      "summaryCore": "#C1C7BC",
+      "warm": "#D45A34"
+    }
+  }
+}

package/themes/lavender_fog_notebook.json

@@ -0,0 +1,29 @@
+{
+  "drafts": {},
+  "name": "Lavender Fog Notebook",
+  "schemaVersion": "figurestead.theme-pack/1",
+  "themes": {
+    "lavender_fog_notebook": {
+      "faint": "#7B718B",
+      "field": "#F4F1F8",
+      "grid": "#DDD7E7",
+      "key": "lavender_fog_notebook",
+      "label": "#201B2B",
+      "name": "Lavender Fog Notebook",
+      "panel": "#FCFAFF",
+      "primary": "#6855A8",
+      "secondary": "#51495F",
+      "series": [
+        "#6855A8",
+        "#18776D",
+        "#9B5B16",
+        "#A44E5E",
+        "#326D9B",
+        "#52752C"
+      ],
+      "spine": "#9087A1",
+      "summaryCore": "#18776D",
+      "warm": "#A44E5E"
+    }
+  }
+}

package/themes/midnight_transit_signal_slate.json

@@ -0,0 +1,28 @@
+{
+  "drafts": {},
+  "name": "Midnight Transit / Signal Slate",
+  "schemaVersion": "figurestead.theme-pack/1",
+  "themes": {
+    "midnight_transit_signal_slate": {
+      "faint": "#637980",
+      "field": "#0A1522",
+      "grid": "#263D4E",
+      "key": "midnight_transit_signal_slate",
+      "label": "#DDE7E5",
+      "name": "Midnight Transit / Signal Slate",
+      "panel": "#13243A",
+      "primary": "#5EA5C8",
+      "secondary": "#9EAFB3",
+      "series": [
+        "#5EA5C8",
+        "#8BAF81",
+        "#B6696B",
+        "#8B69A3",
+        "#CDAD33"
+      ],
+      "spine": "#708A93",
+      "summaryCore": "#C3C8BC",
+      "warm": "#E06018"
+    }
+  }
+}

package/themes/registration_ink.json

@@ -0,0 +1,28 @@
+{
+  "drafts": {},
+  "name": "Registration Ink",
+  "schemaVersion": "figurestead.theme-pack/1",
+  "themes": {
+    "registration_ink": {
+      "faint": "#94877B",
+      "field": "#E7DFD2",
+      "grid": "#D7CCC0",
+      "key": "registration_ink",
+      "label": "#271E1B",
+      "name": "Registration Ink",
+      "panel": "#F5EFE4",
+      "primary": "#9C3038",
+      "secondary": "#62564F",
+      "series": [
+        "#9C3038",
+        "#1C6673",
+        "#4E3E78",
+        "#B16D28",
+        "#6C2948"
+      ],
+      "spine": "#806F64",
+      "summaryCore": "#241B1C",
+      "warm": "#A83A9A"
+    }
+  }
+}

package/themes/slipware.json

@@ -0,0 +1,28 @@
+{
+  "drafts": {},
+  "name": "Slipware",
+  "schemaVersion": "figurestead.theme-pack/1",
+  "themes": {
+    "slipware": {
+      "faint": "#9C8F84",
+      "field": "#E0D3C4",
+      "grid": "#DCD1C2",
+      "key": "slipware",
+      "label": "#2B2320",
+      "name": "Slipware",
+      "panel": "#FAF5EE",
+      "primary": "#1B4C8A",
+      "secondary": "#6B5D53",
+      "series": [
+        "#1B4C8A",
+        "#143F33",
+        "#0E766E",
+        "#8B7A16",
+        "#3C97AC"
+      ],
+      "spine": "#6E6055",
+      "summaryCore": "#0E0A08",
+      "warm": "#B4552A"
+    }
+  }
+}

package/themes/ultraviolet_laboratory.json

@@ -0,0 +1,29 @@
+{
+  "drafts": {},
+  "name": "Ultraviolet Laboratory",
+  "schemaVersion": "figurestead.theme-pack/1",
+  "themes": {
+    "ultraviolet_laboratory": {
+      "faint": "#8D83B2",
+      "field": "#0D0B18",
+      "grid": "#302A4E",
+      "key": "ultraviolet_laboratory",
+      "label": "#F6F2FF",
+      "name": "Ultraviolet Laboratory",
+      "panel": "#171329",
+      "primary": "#B59BFF",
+      "secondary": "#C9C0E5",
+      "series": [
+        "#B59BFF",
+        "#67D7C4",
+        "#F2A65A",
+        "#E57FA6",
+        "#8DB7FF",
+        "#BBD66B"
+      ],
+      "spine": "#4D4672",
+      "summaryCore": "#67D7C4",
+      "warm": "#F2A65A"
+    }
+  }
+}

package/types/extensions/temporal.d.ts

@@ -0,0 +1,45 @@
+import type {
+  FiguresteadContract,
+  FiguresteadPanelBase,
+  RendererDefinition,
+  UnknownRecord,
+} from "@figurestead/web";
+
+export type FiguresteadDate = string;
+
+export interface TemporalCoverageData {
+  dates: FiguresteadDate[];
+  sites: string[];
+  siteOrder: string[];
+}
+
+export interface TemporalReferenceBand {
+  type: "reference_band";
+  from: number;
+  to: number;
+  label: string;
+  status: "provisional_project_constant";
+}
+
+export interface TemporalObservationData {
+  dates: FiguresteadDate[];
+  values: number[];
+  site: string;
+  referenceBands?: TemporalReferenceBand[];
+}
+
+export type TemporalCoveragePanel = FiguresteadPanelBase<"temporal_coverage", TemporalCoverageData>;
+export type TemporalObservationsPanel = FiguresteadPanelBase<"temporal_observations", TemporalObservationData>;
+export type TemporalPanel = TemporalCoveragePanel | TemporalObservationsPanel;
+export type TemporalFiguresteadContract = FiguresteadContract<TemporalPanel>;
+
+export const TEMPORAL_COVERAGE_RENDERER: Readonly<RendererDefinition<TemporalCoverageData>>;
+export const TEMPORAL_OBSERVATIONS_RENDERER: Readonly<RendererDefinition<TemporalObservationData>>;
+export const TEMPORAL_RENDERERS: readonly [typeof TEMPORAL_COVERAGE_RENDERER, typeof TEMPORAL_OBSERVATIONS_RENDERER];
+export const PROVISIONAL_LABEL: "Provisional project constant; not a regulatory threshold";
+export const PROVISIONAL_STATUS: "provisional_project_constant";
+
+export function validateCoverageData(data: unknown, path?: string): TemporalCoverageData;
+export function validateObservationData(data: unknown, path?: string): TemporalObservationData;
+export function compileCoverageScene(context: UnknownRecord): UnknownRecord;
+export function compileObservationsScene(context: UnknownRecord): UnknownRecord;