@opendata-ai/openchart-core 8.3.0 → 8.4.0

package/dist/index.js

@@ -443,6 +443,274 @@ function findAccessibleColor(baseColor, bg, targetRatio = 4.5) {
   return baseColor;
 }
 
+// src/styles/token-definitions.ts
+var CSS_TOKEN_ROOT_SELECTORS = [
+  ".oc-root",
+  ".oc-chart-root",
+  ".oc-table-wrapper",
+  ".oc-table-root",
+  ".oc-graph-wrapper",
+  ".oc-graph-root",
+  ".oc-sankey-root",
+  ".oc-tilemap-root",
+  ".oc-barlist-root",
+  ".oc-map-root"
+];
+var CSS_TOKENS = [
+  {
+    name: "--oc-font-family",
+    light: '\n      "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+  },
+  {
+    name: "--oc-font-mono",
+    light: '"JetBrains Mono", "Fira Code", "Cascadia Code", monospace'
+  },
+  {
+    section: "Animation easing presets via CSS linear()",
+    name: "--oc-ease-smooth",
+    light: "linear(\n      0,\n      0.157,\n      0.438,\n      0.64,\n      0.766,\n      0.85,\n      0.906,\n      0.941,\n      0.964,\n      0.978,\n      0.988,\n      0.994,\n      0.998,\n      1\n    )"
+  },
+  {
+    name: "--oc-ease-snappy",
+    light: "linear(\n      0,\n      0.012,\n      0.048,\n      0.108,\n      0.194,\n      0.302,\n      0.426,\n      0.559,\n      0.69,\n      0.808,\n      0.905,\n      0.973,\n      1.013,\n      1.028,\n      1.023,\n      1.006,\n      0.984,\n      0.966,\n      0.957,\n      0.957,\n      0.964,\n      0.975,\n      0.986,\n      0.995,\n      1,\n      1.003,\n      1.002,\n      1,\n      0.998,\n      0.998,\n      0.999,\n      1\n    )",
+    consumers: "EASE_VAR_MAP in vanilla renderers"
+  },
+  { section: "Animation timing defaults", name: "--oc-animation-duration", light: "450ms" },
+  { name: "--oc-animation-stagger", light: "30ms" },
+  { name: "--oc-annotation-delay", light: "150ms" },
+  { section: "Typography scale (editorial design system)", name: "--oc-title-size", light: "26px" },
+  {
+    name: "--oc-title-weight",
+    light: "600",
+    comment: "one ladder: 400 regular / 500 medium / 600 semibold / 700 bold"
+  },
+  { name: "--oc-title-tracking", light: "-0.022em" },
+  { name: "--oc-subtitle-size", light: "14px" },
+  { name: "--oc-subtitle-weight", light: "400" },
+  { name: "--oc-source-size", light: "11px" },
+  { name: "--oc-source-weight", light: "400" },
+  { name: "--oc-body-size", light: "13px" },
+  { name: "--oc-eyebrow-size", light: "11px" },
+  { name: "--oc-eyebrow-weight", light: "500" },
+  { name: "--oc-eyebrow-tracking", light: "0.08em" },
+  { section: "Surfaces (light mode defaults)", name: "--oc-bg", light: "#ffffff", dark: "#09090b" },
+  { name: "--oc-card", light: "#ffffff", dark: "#111113" },
+  {
+    name: "--oc-secondary",
+    light: "#f4f4f5",
+    dark: "#27272a",
+    comment: "zinc-100, raised surface"
+  },
+  {
+    section: `Text levels. Names invert across modes: in light mode "muted" sits at
+   * a lighter zinc step than "subtle" because both are picked relative to
+   * the active background, not from a fixed lightness ladder. The intent
+   * is "muted = first step away from primary text"; "subtle = next step
+   * down"; etc.
+   *
+   *   Light mode: text=zinc-950, secondary=zinc-700, muted=zinc-500,
+   *               subtle=zinc-400, faint=zinc-300
+   *   Dark mode (dark.css): inverts the surface tokens but keeps the same
+   *               muted -> subtle -> faint progression away from primary.`,
+    name: "--oc-text",
+    light: "#09090b",
+    dark: "#f7f8f8"
+  },
+  { name: "--oc-text-secondary", light: "#3f3f46", dark: "#d0d6e0" },
+  { name: "--oc-text-muted", light: "#71717a", dark: "#a1a1aa" },
+  { name: "--oc-text-faint", light: "#d4d4d8", dark: "#52525b" },
+  {
+    section: `Derived neutral ramp. Named by the share of *text* in a text-toward-
+   * background mix: 100 is nearly the background, 800 is nearly the text.
+   * These static values are the mix against the default surfaces; mounts
+   * restamp them from ResolvedTheme.colors.neutral, which a custom warm or
+   * cool theme derives from its own text/background pair.`,
+    name: "--oc-gray-100",
+    light: "#f0f0f0",
+    dark: "#171719"
+  },
+  { name: "--oc-gray-200", light: "#e1e1e2", dark: "#262627" },
+  { name: "--oc-gray-300", light: "#c9c9c9", dark: "#3d3e3f" },
+  { name: "--oc-gray-400", light: "#9d9d9d", dark: "#68696a" },
+  { name: "--oc-gray-600", light: "#787879", dark: "#8c8c8d" },
+  { name: "--oc-gray-800", light: "#474748", dark: "#bcbcbd" },
+  {
+    section: "Lines",
+    name: "--oc-gridline",
+    light: "rgba(0, 0, 0, 0.08)",
+    dark: "rgba(255, 255, 255, 0.06)"
+  },
+  {
+    name: "--oc-axis",
+    light: "rgba(0, 0, 0, 0.14)",
+    dark: "rgba(255, 255, 255, 0.14)",
+    comment: "hairline = theme.colors.hairline, not the tick-label ink"
+  },
+  {
+    name: "--oc-border",
+    light: "rgba(0, 0, 0, 0.08)",
+    dark: "rgba(255, 255, 255, 0.1)"
+  },
+  {
+    name: "--oc-border-radius",
+    light: "8px",
+    comment: "containers and tooltips; marks use --oc-radius-sm"
+  },
+  { section: "Radius ladder", name: "--oc-radius-sm", light: "2px" },
+  { name: "--oc-radius-md", light: "6px" },
+  { name: "--oc-radius-lg", light: "var(--oc-border-radius)" },
+  { name: "--oc-radius-full", light: "999px" },
+  {
+    section: "Brand and semantic",
+    name: "--oc-accent",
+    light: "#06b6d4",
+    dark: "#06b6d4"
+  },
+  {
+    name: "--oc-accent-strong",
+    light: "#0891b2",
+    dark: "#06b6d4",
+    comment: "darker cyan for line strokes on light bg",
+    consumers: "stamped via adaptForLightLineStroke"
+  },
+  {
+    name: "--oc-positive",
+    light: "#15803d",
+    dark: "#4ade80",
+    comment: "kept equal to DEFAULT_THEME.colors.positive (token-theme-parity test)"
+  },
+  { name: "--oc-negative", light: "#dc2626", dark: "#f87171" },
+  {
+    name: "--oc-positive-tint",
+    light: "color-mix(in srgb, var(--oc-positive) 10%, var(--oc-bg))",
+    comment: "delta chip background"
+  },
+  {
+    name: "--oc-negative-tint",
+    light: "color-mix(in srgb, var(--oc-negative) 10%, var(--oc-bg))"
+  },
+  { name: "--oc-focus", light: "#3b82f6", dark: "#60a5fa" },
+  {
+    name: "--oc-focus-ring",
+    light: "rgba(59, 130, 246, 0.1)",
+    comment: "static, intentionally NOT derived from --oc-focus and NOT flipped in dark mode"
+  },
+  {
+    name: "--oc-focus-ring-strong",
+    light: "rgba(59, 130, 246, 0.25)"
+  },
+  {
+    name: "--oc-editable-hover",
+    light: "rgba(79, 70, 229, 0.35)",
+    comment: "edit-mode hover outline, indigo one-off"
+  },
+  {
+    section: "Spacing scale (4px base) \u2014 only --oc-space-2/4 are consumed (JS-stamped)",
+    name: "--oc-space-2",
+    light: "8px",
+    consumers: "stamped at mount from theme.spacing (theme-tokens.ts); component CSS must NOT consume these"
+  },
+  {
+    name: "--oc-space-4",
+    light: "16px",
+    consumers: "stamped at mount from theme.spacing (theme-tokens.ts); component CSS must NOT consume these"
+  },
+  {
+    section: `Hover language. The hovered element goes to full ink; the rest of its
+   * group drops to --oc-hover-dim over --oc-hover-duration. Maps override the
+   * dim locally (3000 county paths at 0.3 reads as a blackout, not a hint).`,
+    name: "--oc-hover-dim",
+    light: "0.3"
+  },
+  { name: "--oc-hover-duration", light: "140ms" },
+  { name: "--oc-map-hover-dim", light: "0.75" },
+  {
+    section: "Interactive states",
+    name: "--oc-hover-bg",
+    light: "rgba(0, 0, 0, 0.025)",
+    dark: "rgba(255, 255, 255, 0.05)"
+  },
+  {
+    name: "--oc-tooltip-bg",
+    light: "rgba(255, 255, 255, 0.88)",
+    dark: "rgba(17, 17, 19, 0.92)"
+  },
+  {
+    name: "--oc-tooltip-border",
+    light: "rgba(0, 0, 0, 0.08)",
+    dark: "rgba(255, 255, 255, 0.08)"
+  },
+  {
+    name: "--oc-tooltip-shadow",
+    light: "0 2px 8px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.12)",
+    dark: "0 2px 8px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.4)"
+  },
+  { name: "--oc-tooltip-text", light: "#09090b", dark: "#f7f8f8" },
+  { name: "--oc-legend-text", light: "#3f3f46", dark: "#d0d6e0" }
+];
+var TOKEN_MAP = new Map(CSS_TOKENS.map((t) => [t.name, t]));
+function cssTokenDefault(name, mode) {
+  const token = TOKEN_MAP.get(name);
+  if (!token) throw new Error(`Unknown CSS token: ${name}`);
+  if (mode === "dark" && token.dark !== void 0) return token.dark;
+  return token.light;
+}
+
+// src/colors/neutral.ts
+var STEPS = [
+  [100, 0.06],
+  [200, 0.12],
+  [300, 0.22],
+  [400, 0.4],
+  [600, 0.55],
+  [800, 0.75]
+];
+function parseHex(color) {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim());
+  if (!m) return null;
+  const hex = m[1].length === 3 ? m[1].split("").map((c) => c + c).join("") : m[1];
+  return [
+    parseInt(hex.slice(0, 2), 16),
+    parseInt(hex.slice(2, 4), 16),
+    parseInt(hex.slice(4, 6), 16)
+  ];
+}
+function mix(text, bg, t) {
+  const c = (i) => Math.round(text[i] * t + bg[i] * (1 - t));
+  const hex = (n) => Math.max(0, Math.min(255, n)).toString(16).padStart(2, "0");
+  return `#${hex(c(0))}${hex(c(1))}${hex(c(2))}`;
+}
+function staticRamp(mode) {
+  return {
+    100: cssTokenDefault("--oc-gray-100", mode),
+    200: cssTokenDefault("--oc-gray-200", mode),
+    300: cssTokenDefault("--oc-gray-300", mode),
+    400: cssTokenDefault("--oc-gray-400", mode),
+    600: cssTokenDefault("--oc-gray-600", mode),
+    800: cssTokenDefault("--oc-gray-800", mode),
+    secondary: cssTokenDefault("--oc-text-secondary", mode),
+    faint: cssTokenDefault("--oc-text-faint", mode),
+    border: cssTokenDefault("--oc-border", mode),
+    surface: cssTokenDefault("--oc-bg", mode)
+  };
+}
+function deriveNeutralRamp(text, bg, isDark = false) {
+  const mode = isDark ? "dark" : "light";
+  const surface = isOpaqueColor(bg) ? bg : cssTokenDefault("--oc-bg", mode);
+  if (!isOpaqueColor(bg)) return staticRamp(mode);
+  const t = parseHex(text);
+  const b = parseHex(bg);
+  if (!t || !b) return { ...staticRamp(mode), surface };
+  const ramp = Object.fromEntries(STEPS.map(([step, w]) => [step, mix(t, b, w)]));
+  return {
+    ...ramp,
+    secondary: ramp[800],
+    faint: ramp[300],
+    border: ramp[100],
+    surface
+  };
+}
+
 // src/colors/palettes.ts
 var ACHROMATIC_RAMP = {
   fg: "#f7f8f8",
@@ -464,23 +732,73 @@ var ACHROMATIC_RAMP = {
 };
 var CATEGORICAL_PALETTE = [
   "#06b6d4",
-  // cyan,    primary accent (sRGB literal, ~205°)
-  "#ee4a73",
-  // rose     — oklch(65% 0.20 10)
-  "#00b054",
-  // emerald  — oklch(65% 0.20 155)
-  "#a46bf5",
-  // violet   — oklch(65% 0.20 300)
-  "#e07d00",
-  // amber    — oklch(68% 0.19 70)
-  "#0091ff",
-  // sky      — oklch(65% 0.20 250)
-  "#f36000",
-  // orange   — oklch(67% 0.20 45)
-  "#6f7dff",
-  // indigo   — oklch(65% 0.20 275)
-  "#00afbf"
-  // teal     — oklch(65% 0.20 200)
+  // cyan   — oklch(0.715 0.126 215) — sRGB literal, primary accent
+  "#e29e47",
+  // ochre  — oklch(0.750 0.130 70)
+  "#4170cb",
+  // blue   — oklch(0.559 0.150 262)
+  "#b2417f",
+  // rose   — oklch(0.550 0.161 350)
+  "#3ca368",
+  // green  — oklch(0.640 0.130 155)
+  "#a584dc"
+  // violet — oklch(0.679 0.130 300)
+];
+var CATEGORICAL_FILL_PALETTE = [
+  "#51bccc",
+  // cyan   — oklch(0.739 0.100 209)
+  "#dda96b",
+  // ochre  — oklch(0.770 0.100 70)
+  "#587fc8",
+  // blue   — oklch(0.601 0.120 262)
+  "#bf6291",
+  // rose   — oklch(0.619 0.131 350)
+  "#62ab7d",
+  // green  — oklch(0.681 0.101 155)
+  "#ae96da"
+  // violet — oklch(0.719 0.100 300)
+];
+var CATEGORICAL_PALETTE_DARK = [
+  "#22d3ee",
+  // cyan   — oklch(0.797 0.134 212) — sRGB literal
+  "#f9be78",
+  // ochre  — oklch(0.840 0.111 70)
+  "#6591e1",
+  // blue   — oklch(0.660 0.129 262)
+  "#d771a4",
+  // rose   — oklch(0.680 0.140 350)
+  "#6ebf8c",
+  // green  — oklch(0.739 0.109 155)
+  "#bca1ed"
+  // violet — oklch(0.760 0.110 300)
+];
+var CATEGORICAL_FILL_PALETTE_DARK = [
+  "#72cedc",
+  // cyan   — oklch(0.800 0.090 208)
+  "#f3c898",
+  // ochre  — oklch(0.859 0.079 70)
+  "#7698d6",
+  // blue   — oklch(0.679 0.100 262)
+  "#d281a8",
+  // rose   — oklch(0.700 0.111 350)
+  "#82ba95",
+  // green  — oklch(0.740 0.079 155)
+  "#c2afe7"
+  // violet — oklch(0.789 0.081 300)
+];
+var CATEGORICAL_EXTENDED_PALETTE = [
+  "#8e8f19",
+  // olive     — oklch(0.629 0.130 110)
+  "#b086eb",
+  // periwinkle— oklch(0.701 0.149 302)
+  "#ac3225",
+  // brick     — oklch(0.501 0.161 30)
+  "#00bfc0",
+  // teal      — oklch(0.729 0.124 195)
+  "#a5538c",
+  // mulberry  — oklch(0.560 0.129 340)
+  "#65b1f6"
+  // sky       — oklch(0.740 0.126 248)
 ];
 var SEQUENTIAL_BLUE = {
   name: "blue",
@@ -972,6 +1290,16 @@ function getLayoutStrategy(breakpoint, heightClass = "normal") {
   const base = getWidthStrategy(breakpoint);
   return applyHeightConstraints(base, heightClass);
 }
+var HEIGHT_NO_GRID_MAX = 150;
+var COMPACT_MAX_X_TICKS = 3;
+function resolveChromeEconomy(width, height) {
+  const economy = {
+    gridlines: height >= HEIGHT_NO_GRID_MAX,
+    axes: height >= HEIGHT_CRAMPED_MAX
+  };
+  if (getBreakpoint(width) === "compact") economy.maxXTicks = COMPACT_MAX_X_TICKS;
+  return economy;
+}
 
 // src/responsive/metrics.ts
 var AXIS_TITLE_OFFSET_COMPACT = 35;
@@ -983,7 +1311,7 @@ var HPAD_COMPACT_FRACTION = 0.5;
 var HPAD_COMPACT_MIN = 4;
 var TICK_LABEL_OFFSET = 6;
 var AXIS_TITLE_TRAILING_PAD = 4;
-var AXIS_TITLE_GAP = 7;
+var AXIS_TITLE_GAP = 3;
 function axisTitleOffset(maxTickLabelWidth, titleFontSize, width, inline = false) {
   const halfTitleGlyph = Math.ceil(titleFontSize / 2);
   if (inline) {
@@ -1063,18 +1391,22 @@ function truncateRotatedLabel(label, tickAngle, tickFontSize, tickFontWeight, me
 var DEFAULT_THEME = {
   colors: {
     categorical: [...CATEGORICAL_PALETTE],
+    categoricalFill: [...CATEGORICAL_FILL_PALETTE],
     sequential: SEQUENTIAL_PALETTES,
     diverging: DIVERGING_PALETTES,
     background: "transparent",
     text: "#09090b",
-    gridline: "rgba(0,0,0,0.1)",
+    gridline: "rgba(0,0,0,0.08)",
+    // Structural hairline: axis lines, separators. Deliberately heavier than
+    // the gridline and lighter than any ink, so structure reads as structure.
+    hairline: "rgba(0,0,0,0.14)",
     // Used for axis lines/ticks AND axis tick label fill. Must clear WCAG AA
     // contrast (4.5:1) on white because tick labels are rendered with this
     // color. Zinc-500 hits ~5.7:1.
     axis: "#71717a",
     annotationFill: "rgba(0,0,0,0.04)",
     annotationText: "#71717a",
-    positive: "#16a34a",
+    positive: "#15803d",
     negative: "#dc2626"
   },
   fonts: {
@@ -1086,19 +1418,21 @@ var DEFAULT_THEME = {
       body: 13,
       small: 11,
       axisTick: 11,
-      metricLabel: 10,
+      metricLabel: 11,
       metricValue: 22
     },
+    // One ladder everywhere: 400 regular / 500 medium (eyebrow, labels, UI,
+    // values) / 600 semibold (title, series names, annotation lede) / 700 bold.
     weights: {
-      normal: 450,
-      medium: 550,
-      semibold: 590,
+      normal: 400,
+      medium: 500,
+      semibold: 600,
       bold: 700
     }
   },
   spacing: {
     padding: 20,
-    chromeGap: 4,
+    chromeGap: 6,
     chromeToChart: 8,
     chartToFooter: 8,
     axisMargin: 6,
@@ -1110,17 +1444,18 @@ var DEFAULT_THEME = {
     // so the gap holds regardless of font size.
     xAxisLabelPadding: 4
   },
-  borderRadius: 2,
+  /** Containers and tooltips. Marks carry their own 2px radius constant. */
+  borderRadius: 8,
   chrome: {
     eyebrow: {
       fontSize: 11,
-      fontWeight: 510,
+      fontWeight: 500,
       color: "#06b6d4",
       lineHeight: 1.4
     },
     title: {
       fontSize: 26,
-      fontWeight: 590,
+      fontWeight: 600,
       color: "#09090b",
       lineHeight: 1.15
     },
@@ -1149,6 +1484,8 @@ var DEFAULT_THEME = {
       lineHeight: 1.4
     }
   },
+  /** No editorial rule by default; the `broadsheet` preset sets one. */
+  rule: null,
   seriesStrategy: "palette"
 };
 
@@ -1215,9 +1552,15 @@ function adaptTheme(theme) {
   const lightChrome = DEFAULT_THEME.chrome;
   const overridden = (current, lightDefault, darkDefault) => current === lightDefault ? darkDefault : current;
   const darkText = pairs?.["colors.text"] ? pairs["colors.text"].dark : overridden(theme.colors.text, light.text, DARK_TEXT);
-  const darkGridline = pairs?.["colors.gridline"] ? pairs["colors.gridline"].dark : overridden(theme.colors.gridline, light.gridline, "rgba(255,255,255,0.05)");
+  const darkGridline = pairs?.["colors.gridline"] ? pairs["colors.gridline"].dark : overridden(theme.colors.gridline, light.gridline, "rgba(255,255,255,0.06)");
+  const darkHairline = pairs?.["colors.hairline"] ? pairs["colors.hairline"].dark : overridden(theme.colors.hairline, light.hairline, "rgba(255,255,255,0.14)");
   const darkAxis = pairs?.["colors.axis"] ? pairs["colors.axis"].dark : overridden(theme.colors.axis, light.axis, "#a1a1aa");
-  const categorical = theme.colors.categorical;
+  const categorical = overridden(theme.colors.categorical, light.categorical, [
+    ...CATEGORICAL_PALETTE_DARK
+  ]);
+  const categoricalFill = overridden(theme.colors.categoricalFill, light.categoricalFill, [
+    ...CATEGORICAL_FILL_PALETTE_DARK
+  ]);
   return {
     ...theme,
     isDark: true,
@@ -1230,8 +1573,11 @@ function adaptTheme(theme) {
       annotationFill: pairs?.["colors.annotationFill"] ? pairs["colors.annotationFill"].dark : overridden(theme.colors.annotationFill, light.annotationFill, "rgba(255,255,255,0.06)"),
       annotationText: pairs?.["colors.annotationText"] ? pairs["colors.annotationText"].dark : overridden(theme.colors.annotationText, light.annotationText, darkMuted),
       categorical,
-      positive: pairs?.["colors.positive"] ? pairs["colors.positive"].dark : theme.colors.positive !== "#16a34a" ? theme.colors.positive : "#34d399",
-      negative: pairs?.["colors.negative"] ? pairs["colors.negative"].dark : theme.colors.negative !== "#dc2626" ? theme.colors.negative : "#f87171"
+      categoricalFill,
+      hairline: darkHairline,
+      positive: pairs?.["colors.positive"] ? pairs["colors.positive"].dark : overridden(theme.colors.positive, light.positive, "#4ade80"),
+      negative: pairs?.["colors.negative"] ? pairs["colors.negative"].dark : overridden(theme.colors.negative, light.negative, "#f87171"),
+      neutral: deriveNeutralRamp(darkText, darkBg, true)
     },
     chrome: {
       // Eyebrow keeps its accent tint (cyan in both modes) unless the user
@@ -1261,7 +1607,10 @@ function adaptTheme(theme) {
         ...theme.chrome.footer,
         color: pairs?.["chrome.footer.color"] ? pairs["chrome.footer.color"].dark : overridden(theme.chrome.footer.color, lightChrome.footer.color, darkMuted)
       }
-    }
+    },
+    // The editorial rule is a brand device: it keeps its authored color unless
+    // the theme gave an explicit dark half of the pair.
+    rule: theme.rule && pairs?.["rule.color"] ? { ...theme.rule, color: pairs["rule.color"].dark } : theme.rule
   };
 }
 function adaptForLightLineStroke(color) {
@@ -1324,6 +1673,71 @@ var wire = {
   },
   borderRadius: 2
 };
+var broadsheet = {
+  colors: {
+    categorical: ["#1d5f8a", "#e3120b", "#7fb0d3", "#e0a63b", "#3a8a6e", "#8c8680"],
+    categoricalFill: ["#3b7097", "#ee493a", "#97c2e2", "#efbb64", "#579a81", "#9e9893"],
+    background: { light: "#fffdf9", dark: "#171513" },
+    text: { light: "#1a1714", dark: "#f4f1ea" },
+    gridline: { light: "rgba(26,23,20,0.08)", dark: "rgba(244,241,234,0.07)" },
+    // Heavier than the default 0.14: newsprint rules are drawn to be seen.
+    hairline: { light: "rgba(26,23,20,0.28)", dark: "rgba(244,241,234,0.28)" },
+    axis: { light: "#6b645c", dark: "#a8a099" },
+    annotationFill: { light: "rgba(26,23,20,0.05)", dark: "rgba(244,241,234,0.07)" },
+    annotationText: { light: "#6b645c", dark: "#a8a099" }
+  },
+  fonts: {
+    sizes: { title: 24, subtitle: 14, body: 13, small: 11 }
+  },
+  spacing: {
+    padding: 20,
+    chromeGap: 8,
+    chromeToChart: 16,
+    chartToFooter: 12
+  },
+  chrome: {
+    eyebrow: { color: { light: "#e3120b", dark: "#f4463f" }, fontSize: 11, fontWeight: 700 },
+    title: { fontSize: 24, fontWeight: 700, lineHeight: 1.18 },
+    subtitle: { fontWeight: 400, lineHeight: 1.45 }
+  },
+  /** The masthead device: a short red bar above the eyebrow. */
+  rule: { color: { light: "#e3120b", dark: "#f4463f" }, width: 40, thickness: 3 },
+  borderRadius: 0
+};
+var terminal = {
+  colors: {
+    categorical: [...CATEGORICAL_PALETTE_DARK],
+    categoricalFill: [...CATEGORICAL_FILL_PALETTE_DARK],
+    background: { light: "#0b0f14", dark: "#0b0f14" },
+    text: { light: "#e6edf3", dark: "#e6edf3" },
+    gridline: { light: "rgba(230,237,243,0.06)", dark: "rgba(230,237,243,0.06)" },
+    hairline: { light: "rgba(230,237,243,0.14)", dark: "rgba(230,237,243,0.14)" },
+    // 6.25:1 on #0b0f14 — tick labels are drawn in this color too.
+    axis: { light: "#8b949e", dark: "#8b949e" },
+    annotationFill: { light: "rgba(230,237,243,0.06)", dark: "rgba(230,237,243,0.06)" },
+    annotationText: { light: "#8b949e", dark: "#8b949e" },
+    positive: { light: "#4ade80", dark: "#4ade80" },
+    negative: { light: "#f87171", dark: "#f87171" }
+  },
+  fonts: {
+    family: '"Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    mono: '"JetBrains Mono", "Fira Code", "Cascadia Code", monospace',
+    sizes: { title: 15, subtitle: 12, body: 12, small: 10, axisTick: 10 }
+  },
+  spacing: {
+    padding: 12,
+    chromeGap: 3,
+    chromeToChart: 6,
+    chartToFooter: 6
+  },
+  chrome: {
+    eyebrow: { color: { light: "#22d3ee", dark: "#22d3ee" }, fontSize: 10, fontWeight: 500 },
+    title: { fontSize: 15, fontWeight: 600, lineHeight: 1.3 },
+    subtitle: { fontWeight: 400, lineHeight: 1.4 }
+  },
+  borderRadius: 4,
+  seriesStrategy: "accent-neutral"
+};
 
 // src/theme/resolve.ts
 function deepMerge(target, source) {
@@ -1350,11 +1764,13 @@ function themeConfigToPartial(config) {
       colors.categorical = config.colors;
     } else {
       if (config.colors.categorical) colors.categorical = config.colors.categorical;
+      if (config.colors.categoricalFill) colors.categoricalFill = config.colors.categoricalFill;
       if (config.colors.sequential) colors.sequential = config.colors.sequential;
       if (config.colors.diverging) colors.diverging = config.colors.diverging;
       if (config.colors.background) colors.background = resolveTokenLight(config.colors.background);
       if (config.colors.text) colors.text = resolveTokenLight(config.colors.text);
       if (config.colors.gridline) colors.gridline = resolveTokenLight(config.colors.gridline);
+      if (config.colors.hairline) colors.hairline = resolveTokenLight(config.colors.hairline);
       if (config.colors.axis) colors.axis = resolveTokenLight(config.colors.axis);
       if (config.colors.annotationFill)
         colors.annotationFill = resolveTokenLight(config.colors.annotationFill);
@@ -1363,6 +1779,9 @@ function themeConfigToPartial(config) {
       if (config.colors.positive) colors.positive = resolveTokenLight(config.colors.positive);
       if (config.colors.negative) colors.negative = resolveTokenLight(config.colors.negative);
     }
+    if (colors.categorical && !colors.categoricalFill) {
+      colors.categoricalFill = colors.categorical;
+    }
     partial.colors = colors;
   }
   if (config.fonts) {
@@ -1408,6 +1827,13 @@ function themeConfigToPartial(config) {
     }
     partial.chrome = chrome;
   }
+  if (config.rule) {
+    partial.rule = {
+      color: resolveTokenLight(config.rule.color),
+      width: config.rule.width,
+      thickness: config.rule.thickness
+    };
+  }
   if (config.seriesStrategy) {
     partial.seriesStrategy = config.seriesStrategy;
   }
@@ -1420,6 +1846,7 @@ function collectTokenPairs(config) {
       "background",
       "text",
       "gridline",
+      "hairline",
       "axis",
       "annotationFill",
       "annotationText",
@@ -1433,6 +1860,9 @@ function collectTokenPairs(config) {
       }
     }
   }
+  if (config.rule?.color && typeof config.rule.color === "object" && "light" in config.rule.color) {
+    pairs["rule.color"] = config.rule.color;
+  }
   if (config.chrome) {
     for (const [element, value] of Object.entries(config.chrome)) {
       if (value && typeof value === "object" && "color" in value && value.color && typeof value.color === "object" && "light" in value.color) {
@@ -1491,9 +1921,9 @@ function adjustOpacity(hex, opacity) {
   const r = parseInt(m[1].slice(0, 2), 16);
   const g = parseInt(m[1].slice(2, 4), 16);
   const b = parseInt(m[1].slice(4, 6), 16);
-  const mix = (c) => Math.round(c * opacity + 128 * (1 - opacity));
+  const mix2 = (c) => Math.round(c * opacity + 128 * (1 - opacity));
   const toHex = (n) => n.toString(16).padStart(2, "0");
-  return `#${toHex(mix(r))}${toHex(mix(g))}${toHex(mix(b))}`;
+  return `#${toHex(mix2(r))}${toHex(mix2(g))}${toHex(mix2(b))}`;
 }
 function resolveTheme(userTheme, base = DEFAULT_THEME) {
   let merged = userTheme ? deepMerge(base, themeConfigToPartial(userTheme)) : { ...base };
@@ -1523,6 +1953,10 @@ function resolveTheme(userTheme, base = DEFAULT_THEME) {
   }
   return {
     ...merged,
+    colors: {
+      ...merged.colors,
+      neutral: deriveNeutralRamp(merged.colors.text, merged.colors.background, dark)
+    },
     isDark: dark,
     _tokenPairs: userTheme ? collectTokenPairs(userTheme) : void 0
   };
@@ -1626,6 +2060,19 @@ function computeChrome(chrome, theme, width, measureText, chromeMode = "full", p
   let topY = pad;
   const topElements = {};
   const eyebrowNorm = chromeMode === "compact" ? null : normalizeChromeText(chrome.eyebrow);
+  const titleNormPeek = normalizeChromeText(chrome.title);
+  const subtitleNormPeek = chromeMode === "compact" ? null : normalizeChromeText(chrome.subtitle);
+  let ruleElement;
+  if (theme.rule && (eyebrowNorm || titleNormPeek || subtitleNormPeek)) {
+    ruleElement = {
+      x: pad,
+      y: topY,
+      width: theme.rule.width,
+      thickness: theme.rule.thickness,
+      color: theme.rule.color
+    };
+    topY += theme.rule.thickness + chromeGap;
+  }
   if (eyebrowNorm) {
     const style = buildTextStyle(
       theme.chrome.eyebrow,
@@ -1647,7 +2094,7 @@ function computeChrome(chrome, theme, width, measureText, chromeMode = "full", p
     topElements.eyebrow = element;
     topY += estimateTextHeight(style.fontSize, lineCount, style.lineHeight) + chromeGap;
   }
-  const titleNorm = normalizeChromeText(chrome.title);
+  const titleNorm = titleNormPeek;
   if (titleNorm) {
     const style = buildTextStyle(
       theme.chrome.title,
@@ -1669,7 +2116,7 @@ function computeChrome(chrome, theme, width, measureText, chromeMode = "full", p
     topElements.title = element;
     topY += estimateTextHeight(style.fontSize, lineCount, style.lineHeight) + chromeGap;
   }
-  const subtitleNorm = chromeMode === "compact" ? null : normalizeChromeText(chrome.subtitle);
+  const subtitleNorm = subtitleNormPeek;
   if (subtitleNorm) {
     const style = buildTextStyle(
       theme.chrome.subtitle,
@@ -1705,6 +2152,7 @@ function computeChrome(chrome, theme, width, measureText, chromeMode = "full", p
     return {
       topHeight,
       bottomHeight: compactBottom,
+      ...ruleElement ? { rule: ruleElement } : {},
       ...topElements
     };
   }
@@ -1811,6 +2259,7 @@ function computeChrome(chrome, theme, width, measureText, chromeMode = "full", p
   return {
     topHeight,
     bottomHeight,
+    ...ruleElement ? { rule: ruleElement } : {},
     ...topElements,
     ...bottomElements,
     ...brandElement ? { brand: brandElement } : {}
@@ -2072,6 +2521,12 @@ var D3_FORMAT_SUFFIX_RE = /^(.*~?[efgsrdxXobcnp%])(.+)$/;
 function buildD3Formatter(formatStr) {
   if (!formatStr) return null;
   if (formatStr === "ordinal") return formatOrdinal;
+  if (formatStr === "compact") {
+    return (v) => {
+      if (!Number.isFinite(v)) return String(v);
+      return Math.abs(v) >= 1e3 ? abbreviateNumber(v) : formatNumber(v);
+    };
+  }
   try {
     const fmt = d3Format(formatStr);
     if (formatStr.includes("s")) {
@@ -2142,6 +2597,12 @@ function isYearContext(ctx) {
 function resolveNumberFormatter(formatStr, ctx) {
   if (!formatStr) return null;
   if (formatStr === "ordinal") return formatOrdinal;
+  if (formatStr === "compact") {
+    return (v) => {
+      if (!Number.isFinite(v)) return String(v);
+      return Math.abs(v) >= 1e3 ? abbreviateNumber(v) : formatNumber(v);
+    };
+  }
   if (formatStr === "percent") {
     const fraction = ctx?.extent ? Math.max(Math.abs(ctx.extent[0]), Math.abs(ctx.extent[1])) <= 1 : true;
     return (v) => formatPercent(v, { fraction });
@@ -2583,168 +3044,6 @@ function deepMergeSpec(target, source) {
   }
   return result;
 }
-
-// src/styles/token-definitions.ts
-var CSS_TOKEN_ROOT_SELECTORS = [
-  ".oc-root",
-  ".oc-chart-root",
-  ".oc-table-wrapper",
-  ".oc-table-root",
-  ".oc-graph-wrapper",
-  ".oc-graph-root",
-  ".oc-sankey-root",
-  ".oc-tilemap-root",
-  ".oc-barlist-root",
-  ".oc-map-root"
-];
-var CSS_TOKENS = [
-  {
-    name: "--oc-font-family",
-    light: '\n      "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
-  },
-  {
-    name: "--oc-font-mono",
-    light: '"JetBrains Mono", "Fira Code", "Cascadia Code", monospace'
-  },
-  {
-    section: "Animation easing presets via CSS linear()",
-    name: "--oc-ease-smooth",
-    light: "linear(\n      0,\n      0.157,\n      0.438,\n      0.64,\n      0.766,\n      0.85,\n      0.906,\n      0.941,\n      0.964,\n      0.978,\n      0.988,\n      0.994,\n      0.998,\n      1\n    )"
-  },
-  {
-    name: "--oc-ease-snappy",
-    light: "linear(\n      0,\n      0.012,\n      0.048,\n      0.108,\n      0.194,\n      0.302,\n      0.426,\n      0.559,\n      0.69,\n      0.808,\n      0.905,\n      0.973,\n      1.013,\n      1.028,\n      1.023,\n      1.006,\n      0.984,\n      0.966,\n      0.957,\n      0.957,\n      0.964,\n      0.975,\n      0.986,\n      0.995,\n      1,\n      1.003,\n      1.002,\n      1,\n      0.998,\n      0.998,\n      0.999,\n      1\n    )",
-    consumers: "EASE_VAR_MAP in vanilla renderers"
-  },
-  { section: "Animation timing defaults", name: "--oc-animation-duration", light: "500ms" },
-  { name: "--oc-animation-stagger", light: "80ms" },
-  { name: "--oc-annotation-delay", light: "200ms" },
-  { section: "Typography scale (editorial design system)", name: "--oc-title-size", light: "26px" },
-  { name: "--oc-title-weight", light: "590" },
-  { name: "--oc-title-tracking", light: "-0.022em" },
-  { name: "--oc-subtitle-size", light: "14px" },
-  { name: "--oc-subtitle-weight", light: "450" },
-  { name: "--oc-source-size", light: "11px" },
-  { name: "--oc-source-weight", light: "450" },
-  { name: "--oc-body-size", light: "13px" },
-  { name: "--oc-eyebrow-size", light: "11px" },
-  { name: "--oc-eyebrow-weight", light: "550" },
-  { name: "--oc-eyebrow-tracking", light: "0.08em" },
-  { section: "Surfaces (light mode defaults)", name: "--oc-bg", light: "#ffffff", dark: "#09090b" },
-  { name: "--oc-card", light: "#ffffff", dark: "#111113" },
-  {
-    name: "--oc-secondary",
-    light: "#f4f4f5",
-    dark: "#27272a",
-    comment: "zinc-100, raised surface"
-  },
-  {
-    section: `Text levels. Names invert across modes: in light mode "muted" sits at
-   * a lighter zinc step than "subtle" because both are picked relative to
-   * the active background, not from a fixed lightness ladder. The intent
-   * is "muted = first step away from primary text"; "subtle = next step
-   * down"; etc.
-   *
-   *   Light mode: text=zinc-950, secondary=zinc-700, muted=zinc-500,
-   *               subtle=zinc-400, faint=zinc-300
-   *   Dark mode (dark.css): inverts the surface tokens but keeps the same
-   *               muted -> subtle -> faint progression away from primary.`,
-    name: "--oc-text",
-    light: "#09090b",
-    dark: "#f7f8f8"
-  },
-  { name: "--oc-text-secondary", light: "#3f3f46", dark: "#d0d6e0" },
-  { name: "--oc-text-muted", light: "#71717a", dark: "#a1a1aa" },
-  { name: "--oc-text-faint", light: "#d4d4d8", dark: "#52525b" },
-  {
-    section: "Lines",
-    name: "--oc-gridline",
-    light: "rgba(0, 0, 0, 0.1)",
-    dark: "rgba(255, 255, 255, 0.05)"
-  },
-  {
-    name: "--oc-axis",
-    light: "rgba(0, 0, 0, 0.1)",
-    dark: "rgba(255, 255, 255, 0.1)"
-  },
-  {
-    name: "--oc-border",
-    light: "rgba(0, 0, 0, 0.08)",
-    dark: "rgba(255, 255, 255, 0.1)"
-  },
-  { name: "--oc-border-radius", light: "2px" },
-  {
-    section: "Brand and semantic",
-    name: "--oc-accent",
-    light: "#06b6d4",
-    dark: "#06b6d4"
-  },
-  {
-    name: "--oc-accent-strong",
-    light: "#0891b2",
-    dark: "#06b6d4",
-    comment: "darker cyan for line strokes on light bg",
-    consumers: "stamped via adaptForLightLineStroke"
-  },
-  { name: "--oc-positive", light: "#10b981", dark: "#34d399" },
-  { name: "--oc-negative", light: "#e11d48", dark: "#fb7185" },
-  { name: "--oc-focus", light: "#3b82f6", dark: "#60a5fa" },
-  {
-    name: "--oc-focus-ring",
-    light: "rgba(59, 130, 246, 0.1)",
-    comment: "static, intentionally NOT derived from --oc-focus and NOT flipped in dark mode"
-  },
-  {
-    name: "--oc-focus-ring-strong",
-    light: "rgba(59, 130, 246, 0.25)"
-  },
-  {
-    name: "--oc-editable-hover",
-    light: "rgba(79, 70, 229, 0.35)",
-    comment: "edit-mode hover outline, indigo one-off"
-  },
-  {
-    section: "Spacing scale (4px base) \u2014 only --oc-space-2/4 are consumed (JS-stamped)",
-    name: "--oc-space-2",
-    light: "8px",
-    consumers: "stamped at mount from theme.spacing (theme-tokens.ts); component CSS must NOT consume these"
-  },
-  {
-    name: "--oc-space-4",
-    light: "16px",
-    consumers: "stamped at mount from theme.spacing (theme-tokens.ts); component CSS must NOT consume these"
-  },
-  {
-    section: "Interactive states",
-    name: "--oc-hover-bg",
-    light: "rgba(0, 0, 0, 0.025)",
-    dark: "rgba(255, 255, 255, 0.05)"
-  },
-  {
-    name: "--oc-tooltip-bg",
-    light: "rgba(255, 255, 255, 0.88)",
-    dark: "rgba(17, 17, 19, 0.92)"
-  },
-  {
-    name: "--oc-tooltip-border",
-    light: "rgba(0, 0, 0, 0.08)",
-    dark: "rgba(255, 255, 255, 0.08)"
-  },
-  {
-    name: "--oc-tooltip-shadow",
-    light: "0 2px 8px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.12)",
-    dark: "0 2px 8px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.4)"
-  },
-  { name: "--oc-tooltip-text", light: "#09090b", dark: "#f7f8f8" },
-  { name: "--oc-legend-text", light: "#3f3f46", dark: "#d0d6e0" }
-];
-var TOKEN_MAP = new Map(CSS_TOKENS.map((t) => [t.name, t]));
-function cssTokenDefault(name, mode) {
-  const token = TOKEN_MAP.get(name);
-  if (!token) throw new Error(`Unknown CSS token: ${name}`);
-  if (mode === "dark" && token.dark !== void 0) return token.dark;
-  return token.light;
-}
 export {
   ACHROMATIC_RAMP,
   AXIS_TITLE_GAP,
@@ -2756,7 +3055,12 @@ export {
   BRAND_RESERVE_WIDTH,
   BREAKPOINT_COMPACT_MAX,
   BREAKPOINT_MEDIUM_MAX,
+  CATEGORICAL_EXTENDED_PALETTE,
+  CATEGORICAL_FILL_PALETTE,
+  CATEGORICAL_FILL_PALETTE_DARK,
   CATEGORICAL_PALETTE,
+  CATEGORICAL_PALETTE_DARK,
+  COMPACT_MAX_X_TICKS,
   COMPACT_WIDTH,
   CSS_TOKENS,
   CSS_TOKEN_ROOT_SELECTORS,
@@ -2766,6 +3070,7 @@ export {
   FOOTNOTE_LINE_HEIGHT,
   GRAPH_ENCODING_RULES,
   HEIGHT_CRAMPED_MAX,
+  HEIGHT_NO_GRID_MAX,
   HEIGHT_SHORT_MAX,
   HPAD_COMPACT_FRACTION,
   HPAD_COMPACT_MIN,
@@ -2799,6 +3104,7 @@ export {
   areaChart,
   axisTitleOffset,
   barChart,
+  broadsheet,
   buildCompactStepFormatter,
   buildD3Formatter,
   buildTemporalFormatter,
@@ -2813,6 +3119,7 @@ export {
   dataTable,
   deepMergeSpec,
   defaultNumberFormatter,
+  deriveNeutralRamp,
   detectCollision,
   donutChart,
   dotChart,
@@ -2861,6 +3168,7 @@ export {
   overlapArea,
   pickLabelColor,
   pieChart,
+  resolveChromeEconomy,
   resolveCollisions,
   resolveMarkDef,
   resolveMarkType,
@@ -2870,6 +3178,7 @@ export {
   resolveTheme,
   scatterChart,
   simulateColorBlindness,
+  terminal,
   textAscent,
   tileMap,
   truncateRotatedLabel,