@opendata-ai/openchart-engine 6.25.4 → 6.27.0

package/dist/index.js

@@ -1,17 +1,17 @@
 // src/compile.ts
 import {
   AXIS_TITLE_TRAILING_PAD as AXIS_TITLE_TRAILING_PAD2,
-  adaptTheme as adaptTheme3,
+  adaptTheme as adaptTheme4,
   BREAKPOINT_COMPACT_MAX as BREAKPOINT_COMPACT_MAX2,
   computeLabelBounds,
-  estimateTextWidth as estimateTextWidth14,
+  estimateTextWidth as estimateTextWidth15,
   generateAltText,
   generateDataTable,
   getAxisTitleOffset as getAxisTitleOffset2,
   getBreakpoint,
   getHeightClass,
   getLayoutStrategy,
-  resolveTheme as resolveTheme3,
+  resolveTheme as resolveTheme4,
   TICK_LABEL_OFFSET
 } from "@opendata-ai/openchart-core";
 
@@ -4115,6 +4115,12 @@ import { isGradientDef } from "@opendata-ai/openchart-core";
 function isFieldPredicate(pred) {
   return "field" in pred;
 }
+function isRelativeTimeRef(value2) {
+  return typeof value2 === "object" && value2 !== null && "anchor" in value2 && "offset" in value2 && "unit" in value2;
+}
+function toNum(v) {
+  return typeof v === "number" ? v : NaN;
+}
 function evaluateFieldPredicate(datum, pred) {
   const value2 = datum[pred.field];
   if (pred.valid !== void 0) {
@@ -4124,22 +4130,26 @@ function evaluateFieldPredicate(datum, pred) {
   if (pred.equal !== void 0) {
     return value2 == pred.equal;
   }
-  const numValue = Number(value2);
+  let numValue = Number(value2);
+  if (Number.isNaN(numValue) && value2 != null) {
+    const ms = new Date(value2).getTime();
+    if (!Number.isNaN(ms)) numValue = ms;
+  }
   if (pred.lt !== void 0) {
-    return numValue < pred.lt;
+    return numValue < toNum(pred.lt);
   }
   if (pred.lte !== void 0) {
-    return numValue <= pred.lte;
+    return numValue <= toNum(pred.lte);
   }
   if (pred.gt !== void 0) {
-    return numValue > pred.gt;
+    return numValue > toNum(pred.gt);
   }
   if (pred.gte !== void 0) {
-    return numValue >= pred.gte;
+    return numValue >= toNum(pred.gte);
   }
   if (pred.range !== void 0) {
-    const [min4, max4] = pred.range;
-    return numValue >= min4 && numValue <= max4;
+    const [lo, hi] = pred.range;
+    return numValue >= toNum(lo) && numValue <= toNum(hi);
   }
   if (pred.oneOf !== void 0) {
     return pred.oneOf.some((v) => v == value2);
@@ -4356,16 +4366,16 @@ function computeStackedBars(data, valueField, categoryField, colorField, xScale,
     }
     let cumulativeValue = stackMode === "center" ? -categoryTotal / 2 : 0;
     for (const row of rows) {
-      const groupKey2 = String(row[colorField] ?? "");
+      const groupKey3 = String(row[colorField] ?? "");
       const rawValue = Number(row[valueField] ?? 0);
       if (!Number.isFinite(rawValue) || rawValue <= 0) continue;
       const value2 = stackMode === "normalize" && categoryTotal > 0 ? rawValue / categoryTotal : rawValue;
-      const color2 = getColor(scales, groupKey2);
+      const color2 = getColor(scales, groupKey3);
       const xLeft = xScale(cumulativeValue);
       const xRight = xScale(cumulativeValue + value2);
       const barWidth = Math.max(Math.abs(xRight - xLeft), MIN_BAR_WIDTH);
       const aria = {
-        label: `${category}, ${groupKey2}: ${formatLabelValue(rawValue)}`
+        label: `${category}, ${groupKey3}: ${formatLabelValue(rawValue)}`
       };
       marks.push({
         type: "rect",
@@ -4403,16 +4413,16 @@ function computeGroupedBars(data, valueField, categoryField, colorField, xScale,
     const bandY = yScale(category);
     if (bandY === void 0) continue;
     for (const row of rows) {
-      const groupKey2 = String(row[colorField] ?? "");
+      const groupKey3 = String(row[colorField] ?? "");
       const value2 = Number(row[valueField] ?? 0);
       if (!Number.isFinite(value2)) continue;
-      const groupIndex = groupIndexMap.get(groupKey2) ?? 0;
-      const color2 = getColor(scales, groupKey2);
+      const groupIndex = groupIndexMap.get(groupKey3) ?? 0;
+      const color2 = getColor(scales, groupKey3);
       const xPos = value2 >= 0 ? baseline : xScale(value2);
       const barWidth = Math.max(Math.abs(xScale(value2) - baseline), MIN_BAR_WIDTH);
       const subY = bandY + groupIndex * (subBandHeight + gap);
       const aria = {
-        label: `${category}, ${groupKey2}: ${formatLabelValue(value2)}`
+        label: `${category}, ${groupKey3}: ${formatLabelValue(value2)}`
       };
       marks.push({
         type: "rect",
@@ -4438,12 +4448,12 @@ function computeColoredBars(data, valueField, categoryField, colorField, xScale,
     if (!Number.isFinite(value2)) continue;
     const bandY = yScale(category);
     if (bandY === void 0) continue;
-    const groupKey2 = String(row[colorField] ?? "");
-    const color2 = getColor(scales, groupKey2);
+    const groupKey3 = String(row[colorField] ?? "");
+    const color2 = getColor(scales, groupKey3);
     const xPos = value2 >= 0 ? baseline : xScale(value2);
     const barWidth = Math.max(Math.abs(xScale(value2) - baseline), MIN_BAR_WIDTH);
     const aria = {
-      label: `${category}, ${groupKey2}: ${formatLabelValue(value2)}`
+      label: `${category}, ${groupKey3}: ${formatLabelValue(value2)}`
     };
     marks.push({
       type: "rect",
@@ -4810,13 +4820,13 @@ function computeColoredColumns(data, categoryField, valueField, colorField, xSca
     if (!Number.isFinite(value2)) continue;
     const bandX = xScale(category);
     if (bandX === void 0) continue;
-    const groupKey2 = String(row[colorField] ?? "");
-    const color2 = getColor(scales, groupKey2);
+    const groupKey3 = String(row[colorField] ?? "");
+    const color2 = getColor(scales, groupKey3);
     const yPos = yScale(value2);
     const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
     const y2 = value2 >= 0 ? yPos : baseline;
     const aria = {
-      label: `${category}, ${groupKey2}: ${formatLabelValue(value2)}`
+      label: `${category}, ${groupKey3}: ${formatLabelValue(value2)}`
     };
     marks.push({
       type: "rect",
@@ -4854,17 +4864,17 @@ function computeGroupedColumns(data, categoryField, valueField, colorField, xSca
     const bandX = xScale(category);
     if (bandX === void 0) continue;
     for (const row of rows) {
-      const groupKey2 = String(row[colorField] ?? "");
+      const groupKey3 = String(row[colorField] ?? "");
       const value2 = Number(row[valueField] ?? 0);
       if (!Number.isFinite(value2)) continue;
-      const groupIndex = groupIndexMap.get(groupKey2) ?? 0;
-      const color2 = getColor(scales, groupKey2);
+      const groupIndex = groupIndexMap.get(groupKey3) ?? 0;
+      const color2 = getColor(scales, groupKey3);
       const yPos = yScale(value2);
       const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
       const y2 = value2 >= 0 ? yPos : baseline;
       const subX = bandX + groupIndex * (subBandWidth + gap);
       const aria = {
-        label: `${category}, ${groupKey2}: ${formatLabelValue(value2)}`
+        label: `${category}, ${groupKey3}: ${formatLabelValue(value2)}`
       };
       marks.push({
         type: "rect",
@@ -4895,16 +4905,16 @@ function computeStackedColumns(data, categoryField, valueField, colorField, xSca
     }
     let cumulativeValue = stackMode === "center" ? -categoryTotal / 2 : 0;
     for (const row of rows) {
-      const groupKey2 = String(row[colorField] ?? "");
+      const groupKey3 = String(row[colorField] ?? "");
       const rawValue = Number(row[valueField] ?? 0);
       if (!Number.isFinite(rawValue) || rawValue <= 0) continue;
       const value2 = stackMode === "normalize" && categoryTotal > 0 ? rawValue / categoryTotal : rawValue;
-      const color2 = getColor(scales, groupKey2);
+      const color2 = getColor(scales, groupKey3);
       const yTop = yScale(cumulativeValue + value2);
       const yBottom = yScale(cumulativeValue);
       const columnHeight = Math.max(Math.abs(yBottom - yTop), MIN_COLUMN_HEIGHT);
       const aria = {
-        label: `${category}, ${groupKey2}: ${formatLabelValue(rawValue)}`
+        label: `${category}, ${groupKey3}: ${formatLabelValue(rawValue)}`
       };
       marks.push({
         type: "rect",
@@ -5341,7 +5351,7 @@ function computeSingleArea(spec, scales, _chartArea) {
       fill: fillValue,
       fillOpacity,
       stroke: getRepresentativeColor4(isGradientDef3(fillValue) ? color2 : fillValue),
-      strokeWidth: 2,
+      strokeWidth: spec.display === "sparkline" ? 1.25 : 2,
       seriesKey: seriesKey === "__default__" ? void 0 : seriesKey,
       data: validPoints.map((p) => p.row),
       dataPoints: validPoints.map((p) => ({ x: p.x, y: p.yTop, datum: p.row })),
@@ -5458,6 +5468,7 @@ function computeAreaMarks(spec, scales, chartArea) {
 // src/charts/line/compute.ts
 import { getRepresentativeColor as getRepresentativeColor5 } from "@opendata-ai/openchart-core";
 var DEFAULT_STROKE_WIDTH = 2.5;
+var SPARKLINE_STROKE_WIDTH = 1.25;
 var DEFAULT_POINT_RADIUS = 3;
 function computeLineMarks(spec, scales, _chartArea, _strategy) {
   const encoding = spec.encoding;
@@ -5524,7 +5535,7 @@ function computeLineMarks(spec, scales, _chartArea, _strategy) {
       points: allPoints,
       path: combinedPath,
       stroke: strokeColor,
-      strokeWidth: styleOverride?.strokeWidth ?? DEFAULT_STROKE_WIDTH,
+      strokeWidth: styleOverride?.strokeWidth ?? (spec.display === "sparkline" ? SPARKLINE_STROKE_WIDTH : DEFAULT_STROKE_WIDTH),
       strokeDasharray,
       opacity: styleOverride?.opacity,
       seriesKey: seriesStyleKey,
@@ -6543,9 +6554,146 @@ import {
   isLayerSpec,
   isSankeySpec,
   isTableSpec,
+  isTileMapSpec,
   resolveMarkDef,
   resolveMarkType
 } from "@opendata-ai/openchart-core";
+
+// src/tilemap/layout.ts
+var US_STATE_TILES = [
+  // Row 0
+  { state: "ME", col: 10, row: 0 },
+  // Row 1
+  { state: "VT", col: 9, row: 1 },
+  { state: "NH", col: 10, row: 1 },
+  // Row 2
+  { state: "WA", col: 0, row: 2 },
+  { state: "ID", col: 1, row: 2 },
+  { state: "MT", col: 2, row: 2 },
+  { state: "ND", col: 3, row: 2 },
+  { state: "MN", col: 4, row: 2 },
+  { state: "WI", col: 5, row: 2 },
+  { state: "MI", col: 6, row: 2 },
+  { state: "NY", col: 8, row: 2 },
+  { state: "MA", col: 9, row: 2 },
+  // Row 3
+  { state: "OR", col: 0, row: 3 },
+  { state: "NV", col: 1, row: 3 },
+  { state: "WY", col: 2, row: 3 },
+  { state: "SD", col: 3, row: 3 },
+  { state: "IA", col: 4, row: 3 },
+  { state: "IL", col: 5, row: 3 },
+  { state: "IN", col: 6, row: 3 },
+  { state: "OH", col: 7, row: 3 },
+  { state: "PA", col: 8, row: 3 },
+  { state: "NJ", col: 9, row: 3 },
+  { state: "CT", col: 10, row: 3 },
+  // Row 4
+  { state: "CA", col: 0, row: 4 },
+  { state: "UT", col: 1, row: 4 },
+  { state: "CO", col: 2, row: 4 },
+  { state: "NE", col: 3, row: 4 },
+  { state: "MO", col: 4, row: 4 },
+  { state: "KY", col: 5, row: 4 },
+  { state: "WV", col: 6, row: 4 },
+  { state: "VA", col: 7, row: 4 },
+  { state: "MD", col: 8, row: 4 },
+  { state: "DE", col: 9, row: 4 },
+  { state: "RI", col: 10, row: 4 },
+  // Row 5
+  { state: "AZ", col: 1, row: 5 },
+  { state: "NM", col: 2, row: 5 },
+  { state: "KS", col: 3, row: 5 },
+  { state: "AR", col: 4, row: 5 },
+  { state: "TN", col: 5, row: 5 },
+  { state: "NC", col: 6, row: 5 },
+  { state: "SC", col: 7, row: 5 },
+  { state: "DC", col: 8, row: 5 },
+  // Row 6
+  { state: "AK", col: 0, row: 6 },
+  { state: "OK", col: 3, row: 6 },
+  { state: "LA", col: 4, row: 6 },
+  { state: "MS", col: 5, row: 6 },
+  { state: "AL", col: 6, row: 6 },
+  { state: "GA", col: 7, row: 6 },
+  // Row 7
+  { state: "HI", col: 1, row: 7 },
+  { state: "TX", col: 3, row: 7 },
+  { state: "FL", col: 7, row: 7 }
+];
+var STATE_CODE_SET = new Set(US_STATE_TILES.map((t) => t.state));
+var STATE_NAMES = {
+  AL: "Alabama",
+  AK: "Alaska",
+  AZ: "Arizona",
+  AR: "Arkansas",
+  CA: "California",
+  CO: "Colorado",
+  CT: "Connecticut",
+  DE: "Delaware",
+  DC: "District of Columbia",
+  FL: "Florida",
+  GA: "Georgia",
+  HI: "Hawaii",
+  ID: "Idaho",
+  IL: "Illinois",
+  IN: "Indiana",
+  IA: "Iowa",
+  KS: "Kansas",
+  KY: "Kentucky",
+  LA: "Louisiana",
+  ME: "Maine",
+  MD: "Maryland",
+  MA: "Massachusetts",
+  MI: "Michigan",
+  MN: "Minnesota",
+  MS: "Mississippi",
+  MO: "Missouri",
+  MT: "Montana",
+  NE: "Nebraska",
+  NV: "Nevada",
+  NH: "New Hampshire",
+  NJ: "New Jersey",
+  NM: "New Mexico",
+  NY: "New York",
+  NC: "North Carolina",
+  ND: "North Dakota",
+  OH: "Ohio",
+  OK: "Oklahoma",
+  OR: "Oregon",
+  PA: "Pennsylvania",
+  RI: "Rhode Island",
+  SC: "South Carolina",
+  SD: "South Dakota",
+  TN: "Tennessee",
+  TX: "Texas",
+  UT: "Utah",
+  VT: "Vermont",
+  VA: "Virginia",
+  WA: "Washington",
+  WV: "West Virginia",
+  WI: "Wisconsin",
+  WY: "Wyoming"
+};
+var GRID_COLS = 12;
+var GRID_ROWS = 8;
+function computeTilePositions(availableWidth, availableHeight, gap = 4) {
+  const maxTileW = (availableWidth - gap * (GRID_COLS - 1)) / GRID_COLS;
+  const maxTileH = (availableHeight - gap * (GRID_ROWS - 1)) / GRID_ROWS;
+  const tileSize = Math.max(1, Math.floor(Math.min(maxTileW, maxTileH)));
+  const gridWidth = tileSize * GRID_COLS + gap * (GRID_COLS - 1);
+  const gridHeight = tileSize * GRID_ROWS + gap * (GRID_ROWS - 1);
+  const positions = /* @__PURE__ */ new Map();
+  for (const { state, col, row } of US_STATE_TILES) {
+    positions.set(state, {
+      x: col * (tileSize + gap),
+      y: row * (tileSize + gap)
+    });
+  }
+  return { tileSize, gap, positions, gridWidth, gridHeight };
+}
+
+// src/compiler/normalize.ts
 function normalizeChromeField(value2) {
   if (value2 === void 0) return void 0;
   if (typeof value2 === "string") return { text: value2 };
@@ -6665,6 +6813,12 @@ function normalizeChartSpec(spec, warnings) {
   const encoding = inferEncodingTypes(spec.encoding, spec.data, warnings);
   const markType = resolveMarkType(spec.mark);
   const markDef = resolveMarkDef(spec.mark);
+  const display = spec.display ?? "full";
+  if (display === "sparkline" && markType !== "line" && markType !== "area" && markType !== "bar" && markType !== "point") {
+    warnings.push(
+      `[openchart] display: 'sparkline' works best with mark: 'line' | 'area' | 'bar' | 'point'. Got mark: '${markType}' \u2014 rendering may degrade.`
+    );
+  }
   return {
     markType,
     markDef,
@@ -6679,7 +6833,20 @@ function normalizeChartSpec(spec, warnings) {
     darkMode: spec.darkMode ?? "off",
     hiddenSeries: spec.hiddenSeries ?? [],
     seriesStyles: spec.seriesStyles ?? {},
-    watermark: spec.watermark ?? true
+    watermark: spec.watermark ?? true,
+    display,
+    // Default empty userExplicit; compileChart overwrites this with the real
+    // descriptor built from the raw expanded spec before normalize runs.
+    userExplicit: {
+      chrome: false,
+      legend: false,
+      xAxis: false,
+      yAxis: false,
+      labels: false,
+      animation: false,
+      watermark: false,
+      crosshair: false
+    }
   };
 }
 function normalizeTableSpec(spec, _warnings) {
@@ -6746,6 +6913,45 @@ function normalizeGraphSpec(spec, _warnings) {
     watermark: spec.watermark ?? true
   };
 }
+function normalizeTileMapSpec(spec, warnings) {
+  let data = Array.isArray(spec.data) ? spec.data : [];
+  if (!Array.isArray(spec.data)) {
+    data = Object.entries(spec.data).map(([state, value2]) => ({ state, value: value2 }));
+  }
+  let encoding = spec.encoding;
+  if (!encoding) {
+    encoding = {
+      state: { field: "state", type: "nominal" },
+      value: { field: "value", type: "quantitative" }
+    };
+  }
+  let matchedCount = 0;
+  for (const row of data) {
+    const stateCode = String(row[encoding.state.field]);
+    if (STATE_CODE_SET.has(stateCode)) {
+      matchedCount++;
+    }
+  }
+  const matchRatio = data.length > 0 ? matchedCount / data.length : 0;
+  if (matchRatio < 0.5 && data.length > 0) {
+    warnings.push(
+      `TileMap data: only ${matchedCount} of ${data.length} rows have valid US state codes (expected \u226550%)`
+    );
+  }
+  return {
+    type: "tilemap",
+    data,
+    encoding,
+    palette: spec.palette ?? "blue",
+    chrome: normalizeChrome(spec.chrome),
+    legend: spec.legend,
+    theme: spec.theme ?? {},
+    darkMode: spec.darkMode ?? "off",
+    watermark: spec.watermark ?? true,
+    animation: spec.animation,
+    valueFormat: spec.valueFormat
+  };
+}
 function normalizeSpec(spec, warnings = []) {
   if (isLayerSpec(spec)) {
     const leaves = flattenLayers(spec);
@@ -6766,8 +6972,11 @@ function normalizeSpec(spec, warnings = []) {
   if (isSankeySpec(spec)) {
     return normalizeSankeySpec(spec, warnings);
   }
+  if (isTileMapSpec(spec)) {
+    return normalizeTileMapSpec(spec, warnings);
+  }
   throw new Error(
-    `Unknown spec shape. Expected mark (chart), layer, type: 'table', type: 'graph', or type: 'sankey'.`
+    `Unknown spec shape. Expected mark (chart), layer, type: 'table', type: 'graph', type: 'sankey', or type: 'tilemap'.`
   );
 }
 function flattenLayers(spec, parentData, parentEncoding, parentTransforms, parentWatermark) {
@@ -7317,6 +7526,96 @@ function validateSankeySpec(spec, errors) {
     });
   }
 }
+function validateTileMapSpec(spec, errors) {
+  if (!spec.data || typeof spec.data !== "object") {
+    errors.push({
+      message: 'Spec error: tilemap spec requires a "data" field (record or array)',
+      path: "data",
+      code: "INVALID_TYPE",
+      suggestion: 'Provide data as either a record mapping state codes to values (e.g. { "CA": 12000, "TX": 8500 }) or an array of objects with state and value fields'
+    });
+    return;
+  }
+  if (!Array.isArray(spec.data) && Object.keys(spec.data).length === 0) {
+    errors.push({
+      message: 'Spec error: "data" must have at least one entry',
+      path: "data",
+      code: "EMPTY_DATA",
+      suggestion: 'Add at least one state-value pair, e.g. { "CA": 12000 }'
+    });
+    return;
+  }
+  if (Array.isArray(spec.data)) {
+    if (spec.data.length === 0) {
+      errors.push({
+        message: 'Spec error: "data" array must be non-empty',
+        path: "data",
+        code: "EMPTY_DATA",
+        suggestion: "Add at least one data row"
+      });
+      return;
+    }
+    const firstRow = spec.data[0];
+    if (typeof firstRow !== "object" || firstRow === null || Array.isArray(firstRow)) {
+      errors.push({
+        message: 'Spec error: each item in "data" must be a plain object',
+        path: "data[0]",
+        code: "INVALID_TYPE",
+        suggestion: 'Each data item should be an object, e.g. { state: "CA", value: 12000 }'
+      });
+      return;
+    }
+    if (!spec.encoding || typeof spec.encoding !== "object") {
+      errors.push({
+        message: 'Spec error: tilemap spec with array data requires an "encoding" object with state and value channels',
+        path: "encoding",
+        code: "MISSING_FIELD",
+        suggestion: 'Add an encoding object, e.g. encoding: { state: { field: "state", type: "nominal" }, value: { field: "value", type: "quantitative" } }'
+      });
+      return;
+    }
+    const encoding = spec.encoding;
+    const dataColumns = new Set(Object.keys(firstRow));
+    const availableColumns = [...dataColumns].join(", ");
+    for (const channel of ["state", "value"]) {
+      const ch = encoding[channel];
+      if (!ch || typeof ch !== "object") {
+        errors.push({
+          message: `Spec error: tilemap encoding requires "${channel}" channel`,
+          path: `encoding.${channel}`,
+          code: "MISSING_FIELD",
+          suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}). Example: ${channel}: { field: "${[...dataColumns][0] ?? "myField"}", type: "${channel === "value" ? "quantitative" : "nominal"}" }`
+        });
+        continue;
+      }
+      if (!ch.field || typeof ch.field !== "string") {
+        errors.push({
+          message: `Spec error: encoding.${channel} must have a "field" string`,
+          path: `encoding.${channel}.field`,
+          code: "MISSING_FIELD",
+          suggestion: `Add a field name from your data columns: ${availableColumns}`
+        });
+        continue;
+      }
+      if (!dataColumns.has(ch.field)) {
+        errors.push({
+          message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist in data. Available columns: ${availableColumns}`,
+          path: `encoding.${channel}.field`,
+          code: "DATA_FIELD_MISSING",
+          suggestion: `Use one of the available data columns: ${availableColumns}`
+        });
+      }
+    }
+  }
+  if (spec.darkMode !== void 0 && !VALID_DARK_MODES.has(spec.darkMode)) {
+    errors.push({
+      message: 'Spec error: darkMode must be "auto", "force", or "off"',
+      path: "darkMode",
+      code: "INVALID_VALUE",
+      suggestion: 'Use one of: "auto" (system preference), "force" (always dark), or "off" (always light)'
+    });
+  }
+}
 function validateLayerSpec(spec, errors) {
   const layer = spec.layer;
   if (layer.length === 0) {
@@ -7411,17 +7710,18 @@ function validateSpec(spec) {
   const isTable = obj.type === "table";
   const isGraph = obj.type === "graph";
   const isSankey = obj.type === "sankey";
-  const isLayer = hasLayer && !isTable && !isGraph && !isSankey;
-  const isChart = hasMark && !hasLayer && !isTable && !isGraph && !isSankey;
-  if (!isChart && !isTable && !isGraph && !isSankey && !isLayer) {
+  const isTileMap = obj.type === "tilemap";
+  const isLayer = hasLayer && !isTable && !isGraph && !isSankey && !isTileMap;
+  const isChart = hasMark && !hasLayer && !isTable && !isGraph && !isSankey && !isTileMap;
+  if (!isChart && !isTable && !isGraph && !isSankey && !isTileMap && !isLayer) {
     return {
       valid: false,
       errors: [
         {
-          message: 'Spec error: spec must have a "mark" field for charts, a "layer" array for layered charts, or a "type" field for tables/graphs/sankey',
+          message: 'Spec error: spec must have a "mark" field for charts, a "layer" array for layered charts, or a "type" field for tables/graphs/sankey/tilemap',
           path: "mark",
           code: "MISSING_FIELD",
-          suggestion: `Add a "mark" field for charts (e.g. mark: "bar"), a "layer" array for layered charts, or a "type" field for tables/graphs/sankey (type: "table", type: "graph", or type: "sankey"). Valid mark types: ${[...MARK_TYPES].join(", ")}`
+          suggestion: `Add a "mark" field for charts (e.g. mark: "bar"), a "layer" array for layered charts, or a "type" field for tables/graphs/sankey/tilemap (type: "table", type: "graph", type: "sankey", or type: "tilemap"). Valid mark types: ${[...MARK_TYPES].join(", ")}`
         }
       ],
       normalized: null
@@ -7459,6 +7759,8 @@ function validateSpec(spec) {
     validateGraphSpec(obj, errors);
   } else if (isSankey) {
     validateSankeySpec(obj, errors);
+  } else if (isTileMap) {
+    validateTileMapSpec(obj, errors);
   }
   if (errors.length > 0) {
     return { valid: false, errors, normalized: null };
@@ -8021,7 +8323,7 @@ function scaleSupportsTickCount(resolvedScale) {
   const scale = resolvedScale.scale;
   return "ticks" in scale && typeof scale.ticks === "function";
 }
-function categoricalTicks(resolvedScale, density, orientation = "horizontal", bandwidth, labelAngle, fontSize, fontWeight, measureText) {
+function categoricalTicks(resolvedScale, density, orientation = "horizontal", bandwidth, labelAngle, fontSize, fontWeight, measureText, subtitleContext) {
   const scale = resolvedScale.scale;
   const domain = scale.domain();
   const explicitTickCount = resolvedScale.channel.axis?.tickCount;
@@ -8057,14 +8359,37 @@ function categoricalTicks(resolvedScale, density, orientation = "horizontal", ba
       selectedValues = domain.filter((_, i) => i % step === 0);
     }
   }
+  let subtitleMap;
+  if (subtitleContext) {
+    const { data, fieldName, labelField } = subtitleContext;
+    if (data.length > 0) {
+      subtitleMap = /* @__PURE__ */ new Map();
+      for (const row of data) {
+        const key = String(row[fieldName] ?? "");
+        if (!subtitleMap.has(key)) {
+          const val = row[labelField];
+          if (val != null) {
+            subtitleMap.set(key, String(val));
+          }
+        }
+      }
+    }
+  }
   const ticks2 = selectedValues.map((value2) => {
     const bandScale = resolvedScale.type === "band" ? scale : null;
     const pos = bandScale ? (bandScale(value2) ?? 0) + bandScale.bandwidth() / 2 : scale(value2) ?? 0;
-    return {
+    const tick = {
       value: value2,
       position: pos,
       label: value2
     };
+    if (subtitleMap) {
+      const subtitle = subtitleMap.get(value2);
+      if (subtitle !== void 0) {
+        tick.subtitle = subtitle;
+      }
+    }
+    return tick;
   });
   return ticks2;
 }
@@ -8136,7 +8461,7 @@ function fitContinuousTicks(scale, initialTicks, initialCount, fontSize, fontWei
   const fallback = bestWithinFloor ?? buildContinuousTicks(scale, floor);
   return thinTicksUntilFit(fallback, fontSize, fontWeight, measureText, orientation);
 }
-function computeAxes(scales, chartArea, strategy, theme, measureText) {
+function computeAxes(scales, chartArea, strategy, theme, measureText, dataContext) {
   const result = {};
   const baseDensity = strategy.axisLabelDensity;
   const yDensity = effectiveDensity(
@@ -8168,7 +8493,7 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
   };
   const { fontSize } = tickLabelStyle;
   const { fontWeight } = tickLabelStyle;
-  if (scales.x) {
+  if (scales.x && !dataContext?.skipX) {
     const axisConfig = scales.x.channel.axis;
     const isContinuousX = scales.x.type !== "band" && scales.x.type !== "point" && scales.x.type !== "ordinal";
     const xTargetCount = isContinuousX ? targetTickCount(chartArea.width, xDensity, "x") : void 0;
@@ -8246,7 +8571,7 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
       labelFlush: axisConfig?.labelFlush
     };
   }
-  if (scales.y) {
+  if (scales.y && !dataContext?.skipY) {
     const axisConfig = scales.y.channel.axis;
     const isContinuousY = scales.y.type !== "band" && scales.y.type !== "point" && scales.y.type !== "ordinal";
     const yTargetCount = isContinuousY ? targetTickCount(chartArea.height, yDensity, "y") : void 0;
@@ -8254,7 +8579,19 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
     if (axisConfig?.values) {
       allTicks = resolveExplicitTicks(axisConfig.values, scales.y);
     } else if (!isContinuousY) {
-      allTicks = categoricalTicks(scales.y, yDensity, "vertical");
+      const yFieldName = dataContext?.encoding.y?.field;
+      const yLabelField = axisConfig?.labelField;
+      allTicks = categoricalTicks(
+        scales.y,
+        yDensity,
+        "vertical",
+        void 0,
+        void 0,
+        void 0,
+        void 0,
+        void 0,
+        yFieldName && yLabelField && dataContext ? { data: dataContext.data, fieldName: yFieldName, labelField: yLabelField } : void 0
+      );
     } else {
       allTicks = continuousTicks(scales.y, yDensity, yTargetCount);
     }
@@ -8386,12 +8723,24 @@ function scalePadding(basePadding, width, height) {
 }
 var MIN_CHART_WIDTH = 60;
 var MIN_CHART_HEIGHT = 40;
+function getMinChartDims(display) {
+  return display === "sparkline" ? { width: 30, height: 20 } : { width: MIN_CHART_WIDTH, height: MIN_CHART_HEIGHT };
+}
+function getSparklinePad(spec) {
+  const strokeWidth = spec.markDef.strokeWidth ?? 2;
+  return Math.max(strokeWidth / 2 + 1, 2);
+}
 function computeDimensions(spec, options, legendLayout, theme, strategy, watermark = true) {
   const { width, height } = options;
   const padding = scalePadding(theme.spacing.padding, width, height);
   const hPad = width < BREAKPOINT_COMPACT_MAX ? Math.max(Math.round(padding * HPAD_COMPACT_FRACTION), HPAD_COMPACT_MIN) : padding;
   const axisMargin = theme.spacing.axisMargin;
-  const chromeMode = strategy?.chromeMode ?? "full";
+  const userExplicit = spec.userExplicit;
+  const isSparkline = spec.display === "sparkline";
+  let chromeMode = strategy?.chromeMode ?? "full";
+  if (isSparkline && !userExplicit.chrome) {
+    chromeMode = "hidden";
+  }
   const chrome = computeChrome2(
     chromeToInput(spec.chrome),
     theme,
@@ -8401,6 +8750,35 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     padding,
     watermark
   );
+  if (isSparkline) {
+    const total2 = { x: 0, y: 0, width, height };
+    const sparkPad = getSparklinePad(spec);
+    const xAxisSpace = userExplicit.xAxis ? 26 : 0;
+    const yAxisSpace = userExplicit.yAxis ? 30 : 0;
+    const margins2 = {
+      top: chrome.topHeight + sparkPad,
+      right: sparkPad,
+      bottom: chrome.bottomHeight + sparkPad + xAxisSpace,
+      left: sparkPad + yAxisSpace
+    };
+    if (userExplicit.legend && "entries" in legendLayout && legendLayout.entries.length > 0) {
+      const gap = legendGap(width);
+      if (legendLayout.position === "right" || legendLayout.position === "bottom-right") {
+        margins2.right += legendLayout.bounds.width + 8;
+      } else if (legendLayout.position === "top") {
+        margins2.top += legendLayout.bounds.height + gap;
+      } else if (legendLayout.position === "bottom") {
+        margins2.bottom += legendLayout.bounds.height + gap;
+      }
+    }
+    const chartArea2 = {
+      x: margins2.left,
+      y: margins2.top,
+      width: Math.max(0, width - margins2.left - margins2.right),
+      height: Math.max(0, height - margins2.top - margins2.bottom)
+    };
+    return { total: total2, chrome, chartArea: chartArea2, margins: margins2, theme };
+  }
   const total = { x: 0, y: 0, width, height };
   const isRadial = spec.markType === "arc";
   const encoding = spec.encoding;
@@ -8488,10 +8866,23 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
   if (encoding.y && !isRadial) {
     if (spec.markType === "bar" || spec.markType === "circle" || spec.markType === "lollipop" || encoding.y.type === "nominal" || encoding.y.type === "ordinal") {
       const yField = encoding.y.field;
+      const yLabelField = encoding.y.axis?.labelField;
       let maxLabelWidth = 0;
       for (const row of spec.data) {
         const label = String(row[yField] ?? "");
-        const w = estimateTextWidth10(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        let w = estimateTextWidth10(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        if (yLabelField) {
+          const subtitle = String(row[yLabelField] ?? "");
+          if (subtitle) {
+            const gap = theme.fonts.sizes.axisTick * 0.6;
+            const subtitleWidth = estimateTextWidth10(
+              subtitle,
+              theme.fonts.sizes.axisTick,
+              theme.fonts.weights.normal
+            );
+            w += gap + subtitleWidth;
+          }
+        }
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
       if (maxLabelWidth > 0) {
@@ -8545,7 +8936,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
   if (options.rightAxisReserve && options.rightAxisReserve > 0) {
     margins.right = Math.max(margins.right, hPad + options.rightAxisReserve);
   }
-  if (legendLayout.entries.length > 0) {
+  if ("entries" in legendLayout && legendLayout.entries.length > 0) {
     const gap = legendGap(width);
     if (legendLayout.position === "right" || legendLayout.position === "bottom-right") {
       margins.right += legendLayout.bounds.width + 8;
@@ -8561,7 +8952,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     width: Math.max(0, width - margins.left - margins.right),
     height: Math.max(0, height - margins.top - margins.bottom)
   };
-  if ((chartArea.width < MIN_CHART_WIDTH || chartArea.height < MIN_CHART_HEIGHT) && chromeMode !== "hidden") {
+  const minDims = getMinChartDims(spec.display);
+  if ((chartArea.width < minDims.width || chartArea.height < minDims.height) && chromeMode !== "hidden") {
     const fallbackMode = chromeMode === "full" ? "compact" : "hidden";
     const fallbackChrome = computeChrome2(
       chromeToInput(spec.chrome),
@@ -8579,7 +8971,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     const bottomDelta = margins.bottom - newBottom;
     if (topDelta > 0 || bottomDelta > 0) {
       const gap = legendGap(width);
-      margins.top = newTop + (legendLayout.entries.length > 0 && legendLayout.position === "top" ? legendLayout.bounds.height + gap : 0);
+      margins.top = newTop + ("entries" in legendLayout && legendLayout.entries.length > 0 && legendLayout.position === "top" ? legendLayout.bounds.height + gap : 0);
       margins.bottom = newBottom;
       chartArea = {
         x: margins.left,
@@ -9108,7 +9500,8 @@ function truncateEntries(entries, maxCount) {
   return truncated;
 }
 function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
-  if (spec.legend?.show === false || strategy.legendMaxHeight === 0) {
+  const sparklineHidden = spec.display === "sparkline" && !spec.userExplicit.legend;
+  if (sparklineHidden || spec.legend?.show === false || strategy.legendMaxHeight === 0) {
     return {
       position: "top",
       entries: [],
@@ -9904,7 +10297,7 @@ function compileSankey(spec, options) {
     theme,
     fullArea
   );
-  const legendGap2 = legend.entries.length > 0 ? 4 : 0;
+  const legendGap2 = "entries" in legend && legend.entries.length > 0 ? 4 : 0;
   const area = {
     x: fullArea.x,
     y: fullArea.y + legend.bounds.height + legendGap2,
@@ -10847,11 +11240,266 @@ function compileTableLayout(spec, options, theme) {
   };
 }
 
+// src/tilemap/compile-tilemap.ts
+import {
+  adaptTheme as adaptTheme3,
+  buildD3Formatter as buildD3Formatter7,
+  computeChrome as computeChrome5,
+  estimateTextWidth as estimateTextWidth14,
+  formatNumber as formatNumber5,
+  resolveTheme as resolveTheme3,
+  SEQUENTIAL_PALETTES
+} from "@opendata-ai/openchart-core";
+var TILE_CORNER_RADIUS = 2;
+var TILE_STROKE_WIDTH = 0;
+function compileTileMap(spec, options) {
+  const { spec: normalized } = compile(spec);
+  if (!("type" in normalized) || normalized.type !== "tilemap") {
+    throw new Error(
+      "compileTileMap received a non-tilemap spec. Use compileChart, compileTable, compileGraph, or compileSankey instead."
+    );
+  }
+  const tilemapSpec = normalized;
+  const rawWatermark = spec.watermark;
+  const watermark = rawWatermark !== void 0 ? tilemapSpec.watermark : options.watermark ?? true;
+  const mergedThemeConfig = options.theme ? { ...tilemapSpec.theme, ...options.theme } : tilemapSpec.theme;
+  const lightTheme = resolveTheme3(mergedThemeConfig);
+  let theme = lightTheme;
+  if (options.darkMode) {
+    theme = adaptTheme3(theme);
+  }
+  const isDarkMode = options.darkMode;
+  const chrome = computeChrome5(
+    {
+      title: tilemapSpec.chrome.title,
+      subtitle: tilemapSpec.chrome.subtitle,
+      source: tilemapSpec.chrome.source,
+      byline: tilemapSpec.chrome.byline,
+      footer: tilemapSpec.chrome.footer
+    },
+    theme,
+    options.width,
+    options.measureText,
+    "full",
+    void 0,
+    watermark
+  );
+  const padding = theme.spacing.padding;
+  const fullArea = {
+    x: padding,
+    y: padding + chrome.topHeight,
+    width: options.width - padding * 2,
+    height: options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
+  };
+  if (fullArea.width <= 0 || fullArea.height <= 0) {
+    return emptyLayout2(chrome, theme, options, watermark);
+  }
+  const stateField = tilemapSpec.encoding.state.field;
+  const valueField = tilemapSpec.encoding.value.field;
+  const stateValueMap = /* @__PURE__ */ new Map();
+  for (const row of tilemapSpec.data) {
+    const stateCode = String(row[stateField]);
+    const raw = row[valueField];
+    if (STATE_CODE_SET.has(stateCode) && raw !== null && raw !== void 0) {
+      const value2 = Number(raw);
+      if (!Number.isNaN(value2)) {
+        stateValueMap.set(stateCode, value2);
+      }
+    }
+  }
+  const values = Array.from(stateValueMap.values());
+  const min4 = values.length > 0 ? Math.min(...values) : 0;
+  const max4 = values.length > 0 ? Math.max(...values) : 100;
+  const paletteStops = [...SEQUENTIAL_PALETTES[tilemapSpec.palette] ?? SEQUENTIAL_PALETTES.blue];
+  if (isDarkMode) paletteStops.reverse();
+  const domain = paletteStops.map((_, i) => min4 + i / (paletteStops.length - 1) * (max4 - min4));
+  const colorScale = linear2().domain(domain).range(paletteStops).clamp(true);
+  const showLegend = tilemapSpec.legend?.show !== false;
+  const legendBarHeight = 12;
+  const legendLabelGap = 4;
+  const legendTotalHeight = showLegend ? legendBarHeight + legendLabelGap + 14 : 0;
+  const legendGap2 = showLegend ? 8 : 0;
+  const tileAreaHeight = fullArea.height - legendTotalHeight - legendGap2;
+  const tilePositions = computeTilePositions(fullArea.width, tileAreaHeight, 4);
+  const tileGridOffsetX = fullArea.x + (fullArea.width - tilePositions.gridWidth) / 2;
+  const tileGridOffsetY = fullArea.y;
+  const legendX = tileGridOffsetX;
+  const legendY = tileGridOffsetY + tilePositions.gridHeight + legendGap2;
+  const legendWidth = tilePositions.gridWidth;
+  const formatter = buildD3Formatter7(tilemapSpec.valueFormat) ?? formatNumber5;
+  const neutralFillLight = "#e0e0e0";
+  const neutralFillDark = "#2a2a3e";
+  const neutralStrokeLight = "#d0d0d0";
+  const neutralStrokeDark = "#3a3a50";
+  const neutralFill = isDarkMode ? neutralFillDark : neutralFillLight;
+  const neutralStroke = isDarkMode ? neutralStrokeDark : neutralStrokeLight;
+  const tiles = [];
+  for (const { state: stateCode } of US_STATE_TILES) {
+    const pos = tilePositions.positions.get(stateCode);
+    if (!pos) continue;
+    const hasData = stateValueMap.has(stateCode);
+    const value2 = hasData ? stateValueMap.get(stateCode) : null;
+    const fill = hasData ? colorScale(value2) : neutralFill;
+    const formattedValue = hasData ? formatter(value2) : "\u2013";
+    const labelStyle = {
+      fontFamily: theme.fonts.family,
+      fontSize: tilePositions.tileSize > 24 ? 14 : 11,
+      fontWeight: 700,
+      fill: "#ffffff",
+      lineHeight: 1.2
+    };
+    const valueLabelStyle = {
+      fontFamily: theme.fonts.family,
+      fontSize: tilePositions.tileSize > 24 ? 12 : 10,
+      fontWeight: 400,
+      fill: "#ffffff",
+      lineHeight: 1.2
+    };
+    const valueLabel = tilePositions.tileSize < 24 ? { text: "", x: 0, y: 0, style: valueLabelStyle, visible: false } : {
+      text: formattedValue,
+      x: tileGridOffsetX + pos.x + tilePositions.tileSize / 2,
+      y: tileGridOffsetY + pos.y + tilePositions.tileSize / 2 + 8,
+      style: valueLabelStyle,
+      visible: true
+    };
+    const tile = {
+      type: "tile",
+      stateCode,
+      x: tileGridOffsetX + pos.x,
+      y: tileGridOffsetY + pos.y,
+      size: tilePositions.tileSize,
+      fill,
+      stroke: neutralStroke,
+      strokeWidth: TILE_STROKE_WIDTH,
+      cornerRadius: TILE_CORNER_RADIUS,
+      value: value2 ?? null,
+      formattedValue,
+      hasData,
+      label: {
+        text: stateCode,
+        x: tileGridOffsetX + pos.x + tilePositions.tileSize / 2,
+        y: tileGridOffsetY + pos.y + tilePositions.tileSize / 2 - 4,
+        style: labelStyle,
+        visible: true
+      },
+      valueLabel,
+      data: { state: stateCode, value: value2, stateName: STATE_NAMES[stateCode] ?? stateCode },
+      aria: {
+        role: "img",
+        label: `${STATE_NAMES[stateCode] ?? stateCode}: ${formattedValue}`
+      },
+      animationIndex: 0
+    };
+    tiles.push(tile);
+  }
+  const indices = Array.from({ length: tiles.length }, (_, i) => i);
+  let seed = 42;
+  for (let i = indices.length - 1; i > 0; i--) {
+    seed = seed * 1103515245 + 12345 & 2147483647;
+    const j = seed % (i + 1);
+    [indices[i], indices[j]] = [indices[j], indices[i]];
+  }
+  for (let i = 0; i < tiles.length; i++) {
+    tiles[i].animationIndex = indices[i];
+  }
+  let gradientLegend = null;
+  if (showLegend) {
+    const gradientColorStops = paletteStops.map((color2, i) => ({
+      offset: i / (paletteStops.length - 1),
+      color: color2
+    }));
+    gradientLegend = {
+      type: "gradient",
+      position: "bottom",
+      bounds: { x: legendX, y: legendY, width: legendWidth, height: legendBarHeight },
+      labelStyle: {
+        fontFamily: theme.fonts.family,
+        fontSize: 11,
+        fontWeight: 400,
+        fill: theme.colors.text,
+        lineHeight: 1.2
+      },
+      colorStops: gradientColorStops,
+      minLabel: formatter(min4),
+      maxLabel: formatter(max4)
+    };
+  }
+  const tooltipDescriptors = /* @__PURE__ */ new Map();
+  for (const tile of tiles) {
+    const fields = [
+      {
+        label: "Value",
+        value: tile.formattedValue
+      }
+    ];
+    tooltipDescriptors.set(tile.stateCode, {
+      title: STATE_NAMES[tile.stateCode] ?? tile.stateCode,
+      fields
+    });
+  }
+  const a11y = {
+    altText: `Tile map of US states showing values from ${formatter(min4)} to ${formatter(max4)}`,
+    dataTableFallback: tiles.map((t) => [t.stateCode, t.formattedValue]),
+    role: "img",
+    keyboardNavigable: tiles.length > 0
+  };
+  const resolvedAnimation = resolveAnimation(tilemapSpec.animation);
+  return {
+    area: fullArea,
+    chrome,
+    tiles,
+    gradientLegend,
+    tooltipDescriptors,
+    a11y,
+    theme,
+    width: options.width,
+    height: options.height,
+    animation: resolvedAnimation,
+    watermark,
+    measureText: options.measureText ?? ((text, fontSize) => ({ width: estimateTextWidth14(text, fontSize), height: fontSize }))
+  };
+}
+function emptyLayout2(chrome, theme, options, watermark) {
+  return {
+    area: { x: 0, y: 0, width: 0, height: 0 },
+    chrome,
+    tiles: [],
+    gradientLegend: {
+      type: "gradient",
+      position: "bottom",
+      bounds: { x: 0, y: 0, width: 0, height: 0 },
+      labelStyle: {
+        fontFamily: theme.fonts.family,
+        fontSize: 11,
+        fontWeight: 400,
+        fill: theme.colors.text,
+        lineHeight: 1.2
+      },
+      colorStops: [],
+      minLabel: "0",
+      maxLabel: "0"
+    },
+    tooltipDescriptors: /* @__PURE__ */ new Map(),
+    a11y: {
+      altText: "Empty tile map",
+      dataTableFallback: [],
+      role: "img",
+      keyboardNavigable: false
+    },
+    theme,
+    width: options.width,
+    height: options.height,
+    watermark,
+    animation: void 0,
+    measureText: options.measureText ?? ((text, fontSize) => ({ width: estimateTextWidth14(text, fontSize), height: fontSize }))
+  };
+}
+
 // src/tooltips/compute.ts
 import {
   buildTemporalFormatter as buildTemporalFormatter2,
   formatDate as formatDate3,
-  formatNumber as formatNumber5,
+  formatNumber as formatNumber6,
   getRepresentativeColor as getRepresentativeColor10
 } from "@opendata-ai/openchart-core";
 function formatValue(value2, fieldType, format2) {
@@ -10866,10 +11514,10 @@ function formatValue(value2, fieldType, format2) {
       try {
         return format(format2)(value2);
       } catch {
-        return formatNumber5(value2);
+        return formatNumber6(value2);
       }
     }
-    return formatNumber5(value2);
+    return formatNumber6(value2);
   }
   return String(value2);
 }
@@ -11219,8 +11867,78 @@ function runCalculate(data, transform) {
 }
 
 // src/transforms/filter.ts
+function applyOffset2(anchor, offset, unit2) {
+  const d = new Date(anchor.getTime());
+  switch (unit2) {
+    case "year":
+      d.setFullYear(d.getFullYear() + offset);
+      break;
+    case "quarter":
+      d.setMonth(d.getMonth() + offset * 3);
+      break;
+    case "month":
+      d.setMonth(d.getMonth() + offset);
+      break;
+    case "week":
+      d.setDate(d.getDate() + offset * 7);
+      break;
+    case "day":
+      d.setDate(d.getDate() + offset);
+      break;
+  }
+  return d.getTime();
+}
+function resolveRef(data, field, ref) {
+  let anchorMs = ref.anchor === "max" ? -Infinity : Infinity;
+  for (const row of data) {
+    const val = row[field];
+    if (val == null) continue;
+    const ms = new Date(val).getTime();
+    if (Number.isNaN(ms)) continue;
+    if (ref.anchor === "max" && ms > anchorMs) anchorMs = ms;
+    if (ref.anchor === "min" && ms < anchorMs) anchorMs = ms;
+  }
+  if (!Number.isFinite(anchorMs)) return 0;
+  return applyOffset2(new Date(anchorMs), ref.offset, ref.unit);
+}
+function resolveRelativeRefs(data, predicate) {
+  if ("and" in predicate) {
+    return { and: predicate.and.map((p) => resolveRelativeRefs(data, p)) };
+  }
+  if ("or" in predicate) {
+    return { or: predicate.or.map((p) => resolveRelativeRefs(data, p)) };
+  }
+  if ("not" in predicate) {
+    return { not: resolveRelativeRefs(data, predicate.not) };
+  }
+  if ("field" in predicate) {
+    const fp = predicate;
+    let needsCopy = false;
+    const resolved = {};
+    for (const prop of ["lt", "lte", "gt", "gte"]) {
+      if (isRelativeTimeRef(fp[prop])) {
+        resolved[prop] = resolveRef(data, fp.field, fp[prop]);
+        needsCopy = true;
+      }
+    }
+    if (fp.range) {
+      const [lo, hi] = fp.range;
+      const loResolved = isRelativeTimeRef(lo) ? resolveRef(data, fp.field, lo) : lo;
+      const hiResolved = isRelativeTimeRef(hi) ? resolveRef(data, fp.field, hi) : hi;
+      if (isRelativeTimeRef(lo) || isRelativeTimeRef(hi)) {
+        resolved.range = [loResolved, hiResolved];
+        needsCopy = true;
+      }
+    }
+    if (needsCopy) {
+      return { ...fp, ...resolved };
+    }
+  }
+  return predicate;
+}
 function runFilter(data, predicate) {
-  return data.filter((datum) => evaluatePredicate(datum, predicate));
+  const resolved = resolveRelativeRefs(data, predicate);
+  return data.filter((datum) => evaluatePredicate(datum, resolved));
 }
 
 // src/transforms/fold.ts
@@ -11312,6 +12030,131 @@ function runTimeUnit(data, transform) {
   });
 }
 
+// src/transforms/window.ts
+function groupKey2(row, groupby) {
+  return groupby.map((f) => String(row[f] ?? "")).join("\0");
+}
+function tryParseDate(val) {
+  if (val == null) return NaN;
+  if (typeof val === "number") return new Date(val).getTime();
+  if (typeof val === "string" && (val.includes("-") || val.includes("T"))) {
+    const ms = new Date(val).getTime();
+    return ms;
+  }
+  return NaN;
+}
+function compareValues(a, b, order) {
+  const dir = order === "descending" ? -1 : 1;
+  const dateA = tryParseDate(a);
+  const dateB = tryParseDate(b);
+  if (!Number.isNaN(dateA) && !Number.isNaN(dateB)) {
+    return dir * (dateA - dateB);
+  }
+  const numA = Number(a);
+  const numB = Number(b);
+  if (Number.isFinite(numA) && Number.isFinite(numB)) {
+    return dir * (numA - numB);
+  }
+  return dir * String(a ?? "").localeCompare(String(b ?? ""));
+}
+function runWindow(data, transform) {
+  if (data.length === 0) return [];
+  const { window: windowDefs, sort, groupby = [] } = transform;
+  const indexed = data.map((row, i) => ({ row, originalIndex: i }));
+  const groups = /* @__PURE__ */ new Map();
+  for (const entry of indexed) {
+    const key = groupby.length > 0 ? groupKey2(entry.row, groupby) : "";
+    const existing = groups.get(key);
+    if (existing) {
+      existing.push(entry);
+    } else {
+      groups.set(key, [entry]);
+    }
+  }
+  const result = new Array(data.length);
+  for (const groupEntries of groups.values()) {
+    const sorted = [...groupEntries].sort((a, b) => {
+      for (const s of sort) {
+        const cmp = compareValues(a.row[s.field], b.row[s.field], s.order ?? "ascending");
+        if (cmp !== 0) return cmp;
+      }
+      return 0;
+    });
+    for (let i = 0; i < sorted.length; i++) {
+      const entry = sorted[i];
+      const outRow = { ...entry.row };
+      for (const def of windowDefs) {
+        const offset = def.offset ?? 1;
+        let computed = null;
+        switch (def.op) {
+          case "lag": {
+            const lagIdx = i - offset;
+            computed = lagIdx >= 0 ? sorted[lagIdx].row[def.field] ?? null : null;
+            break;
+          }
+          case "lead": {
+            const leadIdx = i + offset;
+            computed = leadIdx < sorted.length ? sorted[leadIdx].row[def.field] ?? null : null;
+            break;
+          }
+          case "diff": {
+            const lagIdx = i - offset;
+            if (lagIdx >= 0) {
+              const current = Number(entry.row[def.field]);
+              const lagged = Number(sorted[lagIdx].row[def.field]);
+              computed = Number.isFinite(current) && Number.isFinite(lagged) ? current - lagged : null;
+            }
+            break;
+          }
+          case "pct_change": {
+            const lagIdx = i - offset;
+            if (lagIdx >= 0) {
+              const current = Number(entry.row[def.field]);
+              const lagged = Number(sorted[lagIdx].row[def.field]);
+              if (Number.isFinite(current) && Number.isFinite(lagged) && lagged !== 0) {
+                computed = (current - lagged) / lagged;
+              }
+            }
+            break;
+          }
+          case "cumsum": {
+            const val = Number(entry.row[def.field]);
+            const addend = Number.isFinite(val) ? val : 0;
+            if (i === 0) {
+              computed = addend;
+            } else {
+              const prev = Number(result[sorted[i - 1].originalIndex]?.[def.as] ?? 0);
+              computed = prev + addend;
+            }
+            break;
+          }
+          case "rank": {
+            let rank = i + 1;
+            for (let j = 0; j < i; j++) {
+              const isTie = sort.every(
+                (s) => String(sorted[j].row[s.field]) === String(entry.row[s.field])
+              );
+              if (isTie) {
+                rank = result[sorted[j].originalIndex]?.[def.as];
+                break;
+              }
+            }
+            computed = rank;
+            break;
+          }
+          case "first_value": {
+            computed = sorted[0].row[def.field] ?? null;
+            break;
+          }
+        }
+        outRow[def.as] = computed;
+      }
+      result[entry.originalIndex] = outRow;
+    }
+  }
+  return result;
+}
+
 // src/transforms/index.ts
 function runTransforms(data, transforms) {
   let result = data;
@@ -11328,6 +12171,8 @@ function runTransforms(data, transforms) {
       result = runAggregate(result, transform);
     } else if ("fold" in transform) {
       result = runFold(result, transform);
+    } else if ("window" in transform) {
+      result = runWindow(result, transform);
     }
   }
   return result;
@@ -11394,7 +12239,7 @@ function compileChart(spec, options) {
   }
   let chartSpec = normalized;
   const rawWatermark = expandedSpec.watermark;
-  const watermark = rawWatermark !== void 0 ? chartSpec.watermark : options.watermark ?? true;
+  let watermark = rawWatermark !== void 0 ? chartSpec.watermark : options.watermark ?? true;
   const rawTransforms = expandedSpec.transform;
   if (rawTransforms && rawTransforms.length > 0) {
     chartSpec = { ...chartSpec, data: runTransforms(chartSpec.data, rawTransforms) };
@@ -11404,6 +12249,21 @@ function compileChart(spec, options) {
   let strategy = getLayoutStrategy(breakpoint, heightClass);
   const rawSpec = expandedSpec;
   const overrides = rawSpec.overrides;
+  const rawEncoding = rawSpec.encoding;
+  const bpForExplicit = overrides?.[breakpoint];
+  const bpEncoding = bpForExplicit?.encoding;
+  const hasChromeKeys = (v) => !!v && typeof v === "object" && Object.keys(v).length > 0;
+  const userExplicit = {
+    chrome: hasChromeKeys(rawSpec.chrome) || hasChromeKeys(bpForExplicit?.chrome),
+    legend: rawSpec.legend !== void 0 || bpForExplicit?.legend !== void 0,
+    xAxis: rawEncoding?.x?.axis !== void 0 || bpEncoding?.x?.axis !== void 0,
+    yAxis: rawEncoding?.y?.axis !== void 0 || bpEncoding?.y?.axis !== void 0,
+    labels: rawSpec.labels !== void 0 || bpForExplicit?.labels !== void 0,
+    animation: rawSpec.animation !== void 0 || bpForExplicit?.animation !== void 0,
+    watermark: rawSpec.watermark !== void 0 || bpForExplicit?.watermark !== void 0,
+    crosshair: rawSpec.crosshair !== void 0 || bpForExplicit?.crosshair !== void 0
+  };
+  chartSpec = { ...chartSpec, userExplicit };
   if (overrides?.[breakpoint]) {
     const bp = overrides[breakpoint];
     if (bp.chrome) {
@@ -11447,13 +12307,84 @@ function compileChart(spec, options) {
       };
       strategy = { ...strategy, annotationPosition: "inline" };
     }
+    if (bp.display !== void 0) {
+      chartSpec = {
+        ...chartSpec,
+        display: bp.display
+      };
+    }
+    if (bp.encoding !== void 0) {
+      const bpEnc = bp.encoding;
+      const mergedEncoding = { ...chartSpec.encoding };
+      const NESTED_CHANNEL_KEYS = ["axis", "scale"];
+      for (const channel of Object.keys(bpEnc)) {
+        const baseCh = mergedEncoding[channel];
+        const bpCh = bpEnc[channel];
+        if (bpCh && baseCh) {
+          const merged = { ...baseCh, ...bpCh };
+          for (const key of NESTED_CHANNEL_KEYS) {
+            const baseNested = baseCh[key];
+            const bpNested = bpCh[key];
+            if (baseNested && bpNested && typeof baseNested === "object" && typeof bpNested === "object" && !Array.isArray(baseNested) && !Array.isArray(bpNested)) {
+              merged[key] = { ...baseNested, ...bpNested };
+            }
+          }
+          mergedEncoding[channel] = merged;
+        } else if (bpCh) {
+          mergedEncoding[channel] = bpCh;
+        }
+      }
+      chartSpec = {
+        ...chartSpec,
+        encoding: mergedEncoding
+      };
+    }
+    if (typeof bp.watermark === "boolean") {
+      watermark = bp.watermark;
+      chartSpec = { ...chartSpec, watermark };
+    }
+  }
+  if (chartSpec.display === "sparkline" && !chartSpec.userExplicit.labels) {
+    chartSpec = {
+      ...chartSpec,
+      labels: { ...chartSpec.labels, density: "none" }
+    };
+  }
+  let rawAnimationSpec = overrides?.[breakpoint]?.animation ?? rawSpec.animation;
+  if (rawAnimationSpec === void 0 && chartSpec.display === "sparkline") {
+    rawAnimationSpec = false;
+  }
+  if (chartSpec.display === "sparkline" && rawAnimationSpec !== false && rawAnimationSpec !== void 0) {
+    const SPARK_DURATION = 1100;
+    if (rawAnimationSpec === true) {
+      rawAnimationSpec = { enter: { duration: SPARK_DURATION } };
+    } else if (typeof rawAnimationSpec === "object") {
+      const cfg = rawAnimationSpec;
+      const enter = cfg.enter;
+      if (enter === void 0 || enter === true) {
+        rawAnimationSpec = {
+          ...cfg,
+          enter: { duration: SPARK_DURATION }
+        };
+      } else if (typeof enter === "object" && enter !== null && enter.duration === void 0) {
+        rawAnimationSpec = {
+          ...cfg,
+          enter: { ...enter, duration: SPARK_DURATION }
+        };
+      }
+    }
   }
-  const rawAnimationSpec = overrides?.[breakpoint]?.animation ?? rawSpec.animation;
   const resolvedAnimation = resolveAnimation(rawAnimationSpec);
+  const rawCrosshair = bpForExplicit?.crosshair ?? rawSpec.crosshair;
+  const crosshair = chartSpec.display === "sparkline" && !chartSpec.userExplicit.crosshair ? false : rawCrosshair === true;
+  if (chartSpec.display === "sparkline" && !chartSpec.userExplicit.watermark) {
+    watermark = false;
+    chartSpec = { ...chartSpec, watermark: false };
+  }
   const mergedThemeConfig = options.theme ? { ...chartSpec.theme, ...options.theme } : chartSpec.theme;
-  let theme = resolveTheme3(mergedThemeConfig);
+  let theme = resolveTheme4(mergedThemeConfig);
   if (options.darkMode) {
-    theme = adaptTheme3(theme);
+    theme = adaptTheme4(theme);
   }
   const preliminaryArea = {
     x: 0,
@@ -11465,7 +12396,7 @@ function compileChart(spec, options) {
   const dims = computeDimensions(chartSpec, options, legendLayout, theme, strategy, watermark);
   const chartArea = dims.chartArea;
   const legendArea = { ...chartArea };
-  if (legendLayout.entries.length > 0) {
+  if ("entries" in legendLayout && legendLayout.entries.length > 0) {
     const gap = legendGap(options.width);
     switch (legendLayout.position) {
       case "top":
@@ -11494,7 +12425,14 @@ function compileChart(spec, options) {
   applyColorScaleRange(scales, renderSpec.encoding, theme);
   scales.defaultColor = chartSpec.markDef.fill ?? chartSpec.markDef.stroke ?? theme.colors.categorical[0];
   const isRadial = chartSpec.markType === "arc";
-  const axes = isRadial ? { x: void 0, y: void 0 } : computeAxes(scales, chartArea, strategy, theme, options.measureText);
+  const skipX = chartSpec.display === "sparkline" && !chartSpec.userExplicit.xAxis;
+  const skipY = chartSpec.display === "sparkline" && !chartSpec.userExplicit.yAxis;
+  const axes = isRadial ? { x: void 0, y: void 0 } : computeAxes(scales, chartArea, strategy, theme, options.measureText, {
+    data: renderSpec.data,
+    encoding: renderSpec.encoding,
+    skipX,
+    skipY
+  });
   if (!isRadial) {
     computeGridlines(axes, chartArea);
   }
@@ -11569,6 +12507,8 @@ function compileChart(spec, options) {
     },
     animation: resolvedAnimation,
     watermark,
+    display: chartSpec.display,
+    crosshair,
     measureText: options.measureText
   };
 }
@@ -11588,7 +12528,8 @@ function compileLayer(spec, options) {
   const primaryLayout = compileChart(primarySpec, options);
   const allMarks = [];
   const seenLabels = /* @__PURE__ */ new Set();
-  const mergedLegendEntries = [...primaryLayout.legend.entries];
+  const pLegend = primaryLayout.legend;
+  const mergedLegendEntries = "entries" in pLegend ? [...pLegend.entries] : [];
   for (const entry of mergedLegendEntries) {
     seenLabels.add(entry.label);
   }
@@ -11600,10 +12541,13 @@ function compileLayer(spec, options) {
   for (const { leaf } of indexedLeaves) {
     const leafLayout = compileChart(leaf, options);
     allMarks.push(...leafLayout.marks);
-    for (const entry of leafLayout.legend.entries) {
-      if (!seenLabels.has(entry.label)) {
-        seenLabels.add(entry.label);
-        mergedLegendEntries.push(entry);
+    const leafLeg = leafLayout.legend;
+    if ("entries" in leafLeg) {
+      for (const entry of leafLeg.entries) {
+        if (!seenLabels.has(entry.label)) {
+          seenLabels.add(entry.label);
+          mergedLegendEntries.push(entry);
+        }
       }
     }
   }
@@ -11612,7 +12556,7 @@ function compileLayer(spec, options) {
     marks: allMarks,
     legend: {
       ...primaryLayout.legend,
-      entries: mergedLegendEntries
+      ..."entries" in pLegend ? { entries: mergedLegendEntries } : {}
     }
   };
 }
@@ -11626,7 +12570,7 @@ function estimateYAxisLabelWidth(data, encoding, baseFontSize) {
     let maxWidth = 0;
     for (const row of data) {
       const label = String(row[yField] ?? "");
-      const w = estimateTextWidth14(label, baseFontSize, 400);
+      const w = estimateTextWidth15(label, baseFontSize, 400);
       if (w > maxWidth) maxWidth = w;
     }
     return maxWidth > 0 ? maxWidth + 10 : 40;
@@ -11655,7 +12599,7 @@ function estimateYAxisLabelWidth(data, encoding, baseFontSize) {
   }
   const hasNeg = data.some((r) => Number(r[yField]) < 0);
   const labelEst = (hasNeg ? "-" : "") + sampleLabel;
-  return estimateTextWidth14(labelEst, baseFontSize, 400) + 10;
+  return estimateTextWidth15(labelEst, baseFontSize, 400) + 10;
 }
 function compileLayerIndependent(leaves, layerSpec, options) {
   if (leaves.length > 2) {
@@ -11672,7 +12616,7 @@ function compileLayerIndependent(leaves, layerSpec, options) {
       `Dual-axis charts require matching x-field types across layers. Layer 0 has '${xType0}', layer 1 has '${xType1}'.`
     );
   }
-  const theme = resolveTheme3(layerSpec.theme ?? leaf1.theme);
+  const theme = resolveTheme4(layerSpec.theme ?? leaf1.theme);
   const axisFontSize = theme.fonts?.sizes?.axisTick ?? 11;
   const rightAxisWidth = estimateYAxisLabelWidth(leaf1.data, leaf1.encoding, axisFontSize);
   const hasRightAxisTitle = !!leaf1.encoding?.y?.axis?.title;
@@ -11789,9 +12733,12 @@ function compileLayerIndependent(leaves, layerSpec, options) {
     return tagged;
   });
   const seenLabels = /* @__PURE__ */ new Set();
-  const mergedLegendEntries = [...layout0.legend.entries];
+  const l0Legend = layout0.legend;
+  const l1Legend = layout1.legend;
+  const mergedLegendEntries = "entries" in l0Legend ? [...l0Legend.entries] : [];
   for (const entry of mergedLegendEntries) seenLabels.add(entry.label);
-  for (const entry of layout1.legend.entries) {
+  const l1Entries = "entries" in l1Legend ? l1Legend.entries : [];
+  for (const entry of l1Entries) {
     if (!seenLabels.has(entry.label)) {
       seenLabels.add(entry.label);
       mergedLegendEntries.push(entry);
@@ -11821,7 +12768,7 @@ function compileLayerIndependent(leaves, layerSpec, options) {
     marks,
     legend: {
       ...layout0.legend,
-      entries: mergedLegendEntries
+      ..."entries" in l0Legend ? { entries: mergedLegendEntries } : {}
     },
     tooltipDescriptors: mergedTooltips
   };
@@ -11934,9 +12881,9 @@ function compileTable(spec, options) {
   }
   const tableSpec = normalized;
   const mergedThemeConfig = options.theme ? { ...tableSpec.theme, ...options.theme } : tableSpec.theme;
-  let theme = resolveTheme3(mergedThemeConfig);
+  let theme = resolveTheme4(mergedThemeConfig);
   if (options.darkMode) {
-    theme = adaptTheme3(theme);
+    theme = adaptTheme4(theme);
   }
   const rawWatermark = spec.watermark;
   const watermark = rawWatermark !== void 0 ? tableSpec.watermark : options.watermark ?? true;
@@ -11948,6 +12895,9 @@ function compileGraph2(spec, options) {
 function compileSankey2(spec, options) {
   return compileSankey(spec, options);
 }
+function compileTileMap2(spec, options) {
+  return compileTileMap(spec, options);
+}
 export {
   clampStaggerDelay,
   clearRenderers,
@@ -11957,6 +12907,7 @@ export {
   compileLayer,
   compileSankey2 as compileSankey,
   compileTable,
+  compileTileMap2 as compileTileMap,
   evaluatePredicate,
   getChartRenderer,
   isConditionalValueDef,