@opendata-ai/openchart-engine 8.0.0-rc.9 → 8.1.0

package/dist/index.js

@@ -9,6 +9,7 @@ import {
   getHeightClass,
   getLayoutStrategy,
   isAxislessMark as isAxislessMark3,
+  MAX_SR_TABLE_ROWS,
   resolveTheme as resolveTheme7
 } from "@opendata-ai/openchart-core";
 
@@ -8559,6 +8560,11 @@ function computePieLabels(marks, _chartArea, density = "auto", _textFill = "#333
       width: textWidth,
       height: textHeight,
       priority: "data",
+      // Index into the ORIGINAL marks array, not `targetMarks`. Density
+      // filtering drops slices and resolveCollisions re-sorts by priority, so
+      // the returned labels line up with neither. Callers assign by this index
+      // instead of zipping positionally.
+      index: marks.indexOf(mark),
       style: {
         fontFamily: "system-ui, -apple-system, sans-serif",
         fontSize: LABEL_FONT_SIZE5,
@@ -8580,14 +8586,16 @@ function computePieLabels(marks, _chartArea, density = "auto", _textFill = "#333
       x: c.anchorX,
       y: c.anchorY,
       style: c.style,
-      visible: true
+      visible: true,
+      ...c.index !== void 0 ? { index: c.index } : {}
     }));
   } else {
     resolved = resolveCollisions5(candidates);
   }
-  for (let i = 0; i < resolved.length && i < targetMarks.length; i++) {
+  for (let i = 0; i < resolved.length; i++) {
     const label = resolved[i];
-    const mark = targetMarks[i];
+    const mark = label.index !== void 0 ? marks[label.index] : void 0;
+    if (!mark) continue;
     if (label.visible) {
       label.connector = {
         from: { x: label.x, y: label.y },
@@ -8605,16 +8613,16 @@ function computePieLabels(marks, _chartArea, density = "auto", _textFill = "#333
 var pieRenderer = (spec, scales, chartArea, strategy, theme) => {
   const marks = computePieMarks(spec, scales, chartArea, strategy, false);
   const labels = computePieLabels(marks, chartArea, spec.labels.density, theme.colors.text);
-  for (let i = 0; i < marks.length && i < labels.length; i++) {
-    marks[i].label = labels[i];
+  for (const label of labels) {
+    if (label.index !== void 0 && marks[label.index]) marks[label.index].label = label;
   }
   return marks;
 };
 var donutRenderer = (spec, scales, chartArea, strategy, theme) => {
   const marks = computePieMarks(spec, scales, chartArea, strategy, true);
   const labels = computePieLabels(marks, chartArea, spec.labels.density, theme.colors.text);
-  for (let i = 0; i < marks.length && i < labels.length; i++) {
-    marks[i].label = labels[i];
+  for (const label of labels) {
+    if (label.index !== void 0 && marks[label.index]) marks[label.index].label = label;
   }
   return marks;
 };
@@ -9062,6 +9070,7 @@ var ruleRenderer = (spec, scales, chartArea, _strategy, _theme) => {
 };
 
 // src/charts/scatter/compute.ts
+import { isOpaqueColor } from "@opendata-ai/openchart-core";
 var DEFAULT_POINT_RADIUS2 = 5;
 function resolvePosition2(value2, channelType, scale) {
   switch (channelType) {
@@ -9087,7 +9096,7 @@ function resolvePosition2(value2, channelType, scale) {
     }
   }
 }
-function computeScatterMarks(spec, scales, _chartArea, _strategy) {
+function computeScatterMarks(spec, scales, _chartArea, _strategy, theme) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
   const yChannel = encoding.y;
@@ -9105,6 +9114,10 @@ function computeScatterMarks(spec, scales, _chartArea, _strategy) {
   const sizeField = sizeEnc?.field;
   const resolvedSize = buildSizeScale(sizeEnc, spec.data, SIZE_SCALE_DEFAULTS.point);
   const sizeScale = resolvedSize?.scale;
+  const constFill = spec.markDef.fill;
+  const constSize = spec.markDef.size;
+  const bg = theme?.colors?.background;
+  const defaultStroke = bg && isOpaqueColor(bg) ? bg : "#ffffff";
   const keyEnc = encoding.key && "field" in encoding.key ? encoding.key : void 0;
   const keyField = keyEnc?.field;
   const marks = [];
@@ -9119,10 +9132,12 @@ function computeScatterMarks(spec, scales, _chartArea, _strategy) {
     if (isSequentialColor && colorField) {
       const val = Number(row[colorField]);
       color2 = Number.isFinite(val) ? getSequentialColor(scales, val) : getColor(scales, "__default__");
-    } else {
+    } else if (colorField) {
       color2 = getColor(scales, category ?? "__default__");
+    } else {
+      color2 = constFill ?? getColor(scales, "__default__");
     }
-    let radius = DEFAULT_POINT_RADIUS2;
+    let radius = constSize != null ? constSize : DEFAULT_POINT_RADIUS2;
     if (sizeScale && sizeField) {
       const sizeVal = Number(row[sizeField]);
       if (Number.isFinite(sizeVal)) {
@@ -9143,9 +9158,9 @@ function computeScatterMarks(spec, scales, _chartArea, _strategy) {
       cy,
       r: radius,
       fill: color2,
-      stroke: "#ffffff",
-      strokeWidth: 1,
-      fillOpacity: 0.7,
+      stroke: spec.markDef.stroke ?? defaultStroke,
+      strokeWidth: spec.markDef.strokeWidth ?? 1,
+      fillOpacity: spec.markDef.opacity ?? 0.7,
       data: row,
       aria
     });
@@ -9186,7 +9201,7 @@ function linearRegression(points) {
   const intercept = (sumY - slope * sumX) / n;
   return { slope, intercept };
 }
-function computeTrendLine(marks) {
+function computeTrendLine(marks, stroke = TRENDLINE_COLOR, strokeWidth = TRENDLINE_STROKE_WIDTH) {
   if (marks.length < 2) return null;
   const points = marks.map((m) => ({ x: m.cx, y: m.cy }));
   const result = linearRegression(points);
@@ -9209,8 +9224,8 @@ function computeTrendLine(marks) {
       { x: minX, y: y12 },
       { x: maxX, y: y2 }
     ],
-    stroke: TRENDLINE_COLOR,
-    strokeWidth: TRENDLINE_STROKE_WIDTH,
+    stroke,
+    strokeWidth,
     strokeDasharray: TRENDLINE_DASH,
     data: [],
     aria
@@ -9218,13 +9233,20 @@ function computeTrendLine(marks) {
 }
 
 // src/charts/scatter/index.ts
-var scatterRenderer = (spec, scales, chartArea, strategy, _theme) => {
-  const pointMarks = computeScatterMarks(spec, scales, chartArea, strategy);
+var scatterRenderer = (spec, scales, chartArea, strategy, theme) => {
+  const pointMarks = computeScatterMarks(spec, scales, chartArea, strategy, theme);
   const marks = [...pointMarks];
-  if (spec.markDef?.trendline !== false) {
-    const trendLine = computeTrendLine(pointMarks);
+  const trendline = spec.markDef?.trendline;
+  if (trendline !== false) {
+    const config = typeof trendline === "object" ? trendline : void 0;
+    const stroke = config?.stroke ?? theme?.colors?.text;
+    const trendLine = computeTrendLine(pointMarks, stroke, config?.strokeWidth);
     if (trendLine) {
-      marks.unshift(trendLine);
+      if (config?.layer === "above") {
+        marks.push(trendLine);
+      } else {
+        marks.unshift(trendLine);
+      }
     }
   }
   return marks;
@@ -9704,6 +9726,16 @@ function stripIgnoredKeys(spec, warnings) {
   const { $schema: _schema, ...rest } = spec;
   return rest;
 }
+function stripRemovedMarkRender(spec, warnings) {
+  const mark = spec.mark;
+  if (!mark || typeof mark !== "object" || Array.isArray(mark)) return spec;
+  if (!("render" in mark)) return spec;
+  warnings.push(
+    "[openchart] mark.render was removed in v8. This field is stripped for backward compatibility. Pass { renderer } to createChart() or the compile options instead."
+  );
+  const { render: _render, ...restMark } = mark;
+  return { ...spec, mark: restMark };
+}
 function applyFixedSizeDefault(spec) {
   if (typeof spec.width === "number" && typeof spec.height === "number" && spec.responsive === void 0) {
     return { ...spec, responsive: false };
@@ -9846,7 +9878,16 @@ function expandChannelSugar(spec, warnings) {
   }
   return result;
 }
-var COUNT_GROUP_CHANNELS = ["x", "y", "color", "detail", "strokeDash", "facet"];
+var COUNT_GROUP_CHANNELS = [
+  "x",
+  "y",
+  "color",
+  "detail",
+  "strokeDash",
+  "facet",
+  "row",
+  "column"
+];
 function expandCountAggregate(spec) {
   const encoding = spec.encoding;
   if (!encoding || typeof encoding !== "object") return spec;
@@ -9965,6 +10006,7 @@ function expandChartSugar(spec, warnings, inheritedData) {
   out = expandTopLevelTitle(out);
   out = expandDescriptionSugar(out);
   out = stripIgnoredKeys(out, warnings);
+  out = stripRemovedMarkRender(out, warnings);
   out = applyFixedSizeDefault(out);
   out = expandAnnotationSugar(out, warnings);
   out = expandChannelSugar(out, warnings);
@@ -10081,6 +10123,12 @@ function resolveAnimation(spec) {
   const enter = resolvePhase(config.enter, ENTER_DEFAULTS);
   const update = resolvePhase(config.update, UPDATE_DEFAULTS);
   const exit = resolvePhase(config.exit, EXIT_DEFAULTS);
+  if (update && config.update && typeof config.update === "object" && !Array.isArray(config.update)) {
+    const cap = config.update.maxMarks;
+    if (typeof cap === "number" && Number.isFinite(cap) && cap >= 1) {
+      update.maxMarks = Math.floor(cap);
+    }
+  }
   if (!enter && !update && !exit) return void 0;
   return {
     enter: enter ?? void 0,
@@ -10122,9 +10170,9 @@ function resolveStagger(stagger, defaults) {
 import {
   isBarListSpec,
   isChartSpec,
+  isGeoMapSpec,
   isGraphSpec,
   isLayerSpec,
-  isMapSpec,
   isSankeySpec,
   isTableSpec,
   isTileMapSpec,
@@ -10473,6 +10521,7 @@ function normalizeChartSpec(spec, warnings) {
     data: spec.data,
     encoding,
     chrome: normalizeChrome(spec.chrome),
+    chromeLayout: spec.chromeLayout,
     metrics: spec.metrics,
     seriesSearch: normalizeSeriesSearch(spec, encoding, warnings),
     youDrawIt: normalizeYouDrawIt(spec),
@@ -10546,16 +10595,16 @@ function normalizeSankeySpec(spec, _warnings) {
     watermark: spec.watermark ?? true
   };
 }
-function normalizeGraphSpec(spec) {
-  const defaultLayout = {
+function normalizeGraphSpec(spec, warnings) {
+  const layout = {
     type: "force",
-    chargeStrength: -300,
-    linkDistance: 30
-  };
-  const layout = spec.layout ? {
-    ...defaultLayout,
     ...spec.layout
-  } : defaultLayout;
+  };
+  let seedNode = typeof spec.seedNode === "string" ? { id: spec.seedNode } : spec.seedNode;
+  if (seedNode && !spec.nodes.some((n) => n.id === seedNode?.id)) {
+    warnings.push(`seedNode "${seedNode.id}" does not match any node id; it will be ignored.`);
+    seedNode = void 0;
+  }
   return {
     type: "graph",
     nodes: spec.nodes,
@@ -10563,11 +10612,15 @@ function normalizeGraphSpec(spec) {
     encoding: spec.encoding ?? {},
     layout,
     nodeOverrides: spec.nodeOverrides,
+    seedNode,
     chrome: normalizeChrome(spec.chrome),
     annotations: normalizeAnnotations(spec.annotations),
     theme: spec.theme ?? {},
     darkMode: spec.darkMode ?? "off",
-    watermark: spec.watermark ?? true
+    watermark: spec.watermark ?? true,
+    animation: spec.animation,
+    interaction: spec.interaction,
+    legend: spec.legend
   };
 }
 function normalizeTileMapSpec(spec, warnings) {
@@ -10623,7 +10676,7 @@ function normalizeTileMapSpec(spec, warnings) {
     valueFormat: spec.valueFormat
   };
 }
-function normalizeMapSpec(spec, _warnings) {
+function normalizeGeoMapSpec(spec, _warnings) {
   return {
     type: "map",
     geo: {
@@ -10675,7 +10728,7 @@ function normalizeSpec(spec, warnings = []) {
     return normalizeTableSpec(spec, warnings);
   }
   if (isGraphSpec(spec)) {
-    return normalizeGraphSpec(spec);
+    return normalizeGraphSpec(spec, warnings);
   }
   if (isSankeySpec(spec)) {
     return normalizeSankeySpec(spec, warnings);
@@ -10683,8 +10736,8 @@ function normalizeSpec(spec, warnings = []) {
   if (isTileMapSpec(spec)) {
     return normalizeTileMapSpec(spec, warnings);
   }
-  if (isMapSpec(spec)) {
-    return normalizeMapSpec(spec, warnings);
+  if (isGeoMapSpec(spec)) {
+    return normalizeGeoMapSpec(spec, warnings);
   }
   if (isBarListSpec(spec)) {
     return normalizeBarListSpec(spec, warnings);
@@ -11000,6 +11053,40 @@ function validateCalendarSpec(spec, errors) {
     seenDays.set(dayKey, i);
   }
 }
+var MAX_PLAUSIBLE_POINT_RADIUS = 50;
+function pointSizeError(path2, value2) {
+  const radius = Math.max(1, Math.round(Math.sqrt(value2 / Math.PI)));
+  return {
+    message: `Spec error: ${path2} is a radius in pixels, and ${value2} would draw a ${Math.round(value2 * 2)}px-wide circle. This usually means the value was written in Vega-Lite's units, where point size is an area in px^2.`,
+    path: path2,
+    code: "INVALID_VALUE",
+    suggestion: `Point sizes are radii in px (default 5, typical 2-12). For the dot a Vega-Lite size of ${value2} draws, use ${radius} (r = sqrt(area / pi)).`
+  };
+}
+function validatePointSize(spec, errors) {
+  const markType = typeof spec.mark === "string" ? spec.mark : spec.mark?.type;
+  if (markType !== "point") return;
+  if (spec.mark && typeof spec.mark === "object") {
+    const size = spec.mark.size;
+    if (typeof size === "number" && size > MAX_PLAUSIBLE_POINT_RADIUS) {
+      errors.push(pointSizeError("mark.size", size));
+    }
+  }
+  const sizeEnc = spec.encoding && typeof spec.encoding === "object" ? spec.encoding.size : void 0;
+  if (!sizeEnc || typeof sizeEnc !== "object") return;
+  if (typeof sizeEnc.value === "number" && sizeEnc.value > MAX_PLAUSIBLE_POINT_RADIUS) {
+    errors.push(pointSizeError("encoding.size.value", sizeEnc.value));
+  }
+  const range3 = sizeEnc.scale && typeof sizeEnc.scale === "object" ? sizeEnc.scale.range : void 0;
+  if (Array.isArray(range3)) {
+    const worst = range3.find(
+      (entry) => typeof entry === "number" && entry > MAX_PLAUSIBLE_POINT_RADIUS
+    );
+    if (typeof worst === "number") {
+      errors.push(pointSizeError("encoding.size.scale.range", worst));
+    }
+  }
+}
 function validateChartSpec(spec, errors) {
   const markType = typeof spec.mark === "string" ? spec.mark : spec.mark?.type;
   if (!Array.isArray(spec.data)) {
@@ -11105,6 +11192,7 @@ function validateChartSpec(spec, errors) {
   if (markType === "calendar") {
     validateCalendarSpec(spec, errors);
   }
+  validatePointSize(spec, errors);
   if (Array.isArray(spec.transform)) {
     const transforms = spec.transform;
     for (let i = 0; i < transforms.length; i++) {
@@ -11317,6 +11405,52 @@ function validateChartSpec(spec, errors) {
       }
     }
   }
+  for (const channel of ["row", "column"]) {
+    const ch = encoding[channel];
+    if (ch && typeof ch === "object") {
+      const facetCh = ch;
+      if (!facetCh.field || typeof facetCh.field !== "string") {
+        errors.push({
+          message: `Spec error: encoding.${channel}.field is required and must be a non-empty string`,
+          path: `encoding.${channel}.field`,
+          code: "MISSING_FIELD",
+          suggestion: `Add a field property to encoding.${channel} (e.g. { field: "category", type: "nominal" })`
+        });
+      } else if (!dataColumns.has(facetCh.field) && !transformFields.has(facetCh.field)) {
+        errors.push({
+          message: `Spec error: encoding.${channel}.field "${facetCh.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}.${didYouMean(facetCh.field, columnList)}`
+        });
+      }
+      if (!facetCh.type || facetCh.type !== "nominal" && facetCh.type !== "ordinal") {
+        errors.push({
+          message: `Spec error: encoding.${channel}.type must be "nominal" or "ordinal"${facetCh.type ? `, got "${facetCh.type}"` : ""}`,
+          path: `encoding.${channel}.type`,
+          code: facetCh.type ? "INVALID_VALUE" : "MISSING_FIELD",
+          suggestion: `Set encoding.${channel}.type to "nominal" or "ordinal"`
+        });
+      }
+      if (encoding.facet && typeof encoding.facet === "object") {
+        errors.push({
+          message: `Spec error: encoding.${channel} and encoding.facet cannot be used together`,
+          path: `encoding.${channel}`,
+          code: "INVALID_VALUE",
+          suggestion: `Use either encoding.${channel} or encoding.facet, not both`
+        });
+      }
+      const otherChannel = channel === "row" ? "column" : "row";
+      if (encoding[otherChannel]) {
+        errors.push({
+          message: "Spec error: encoding.row and encoding.column cannot be used together (cross-product faceting is not yet supported)",
+          path: `encoding.${channel}`,
+          code: "INVALID_VALUE",
+          suggestion: "Use encoding.facet with columns for grid layout, or use only row or column"
+        });
+      }
+    }
+  }
   if (spec.darkMode !== void 0 && !VALID_DARK_MODES.has(spec.darkMode)) {
     errors.push({
       message: `Spec error: darkMode must be "auto", "force", or "off"`,
@@ -11496,6 +11630,35 @@ function validateGraphSpec(spec, errors) {
       nodeIds.add(node.id);
     }
   }
+  if (spec.seedNode !== void 0) {
+    if (typeof spec.seedNode === "string") {
+      if (spec.seedNode === "") {
+        errors.push({
+          message: 'Spec error: "seedNode" must be a non-empty node id',
+          path: "seedNode",
+          code: "MISSING_FIELD",
+          suggestion: `Use one of the existing node ids, e.g. seedNode: "${[...nodeIds][0] ?? "a"}"`
+        });
+      }
+    } else if (typeof spec.seedNode !== "object" || spec.seedNode === null || Array.isArray(spec.seedNode)) {
+      errors.push({
+        message: `Spec error: "seedNode" must be a node id string or an object like { id, style }, got ${Array.isArray(spec.seedNode) ? "array" : typeof spec.seedNode}`,
+        path: "seedNode",
+        code: "INVALID_TYPE",
+        suggestion: `Use the id shorthand (seedNode: "${[...nodeIds][0] ?? "a"}") or the object form (seedNode: { id: "${[...nodeIds][0] ?? "a"}", style: { radius: 14 } })`
+      });
+    } else {
+      const seedId = spec.seedNode.id;
+      if (typeof seedId !== "string" || seedId === "") {
+        errors.push({
+          message: 'Spec error: "seedNode" must have a non-empty string "id" field',
+          path: "seedNode.id",
+          code: "MISSING_FIELD",
+          suggestion: `Add the seed node id, e.g. seedNode: { id: "${[...nodeIds][0] ?? "a"}" }`
+        });
+      }
+    }
+  }
   if (!Array.isArray(spec.edges)) {
     errors.push({
       message: 'Spec error: graph spec requires an "edges" array',
@@ -11550,14 +11713,28 @@ function validateGraphSpec(spec, errors) {
   }
   if (spec.encoding && typeof spec.encoding === "object") {
     const encoding = spec.encoding;
-    const firstNode = nodes[0];
-    const firstEdge = edges.length > 0 ? edges[0] : null;
-    const nodeFields = firstNode ? new Set(Object.keys(firstNode)) : /* @__PURE__ */ new Set();
-    const edgeFields = firstEdge ? new Set(Object.keys(firstEdge)) : /* @__PURE__ */ new Set();
-    const nodeChannels = ["nodeColor", "nodeSize", "nodeLabel"];
+    const nodeFields = /* @__PURE__ */ new Set();
+    for (const node of nodes) {
+      if (node && typeof node === "object") {
+        for (const key of Object.keys(node)) nodeFields.add(key);
+      }
+    }
+    const edgeFields = /* @__PURE__ */ new Set();
+    for (const edge of edges) {
+      if (edge && typeof edge === "object") {
+        for (const key of Object.keys(edge)) edgeFields.add(key);
+      }
+    }
+    const nodeChannels = [
+      "nodeColor",
+      "nodeSize",
+      "nodeOpacity",
+      "nodeLabel",
+      "nodeLabelPriority"
+    ];
     for (const channel of nodeChannels) {
       const ch = encoding[channel];
-      if (ch?.field && typeof ch.field === "string" && !nodeFields.has(ch.field)) {
+      if (ch?.field && typeof ch.field === "string" && nodes.length > 0 && !nodeFields.has(ch.field)) {
         errors.push({
           message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist on nodes. Available fields: ${[...nodeFields].join(", ")}`,
           path: `encoding.${channel}.field`,
@@ -11566,10 +11743,10 @@ function validateGraphSpec(spec, errors) {
         });
       }
     }
-    const edgeChannels = ["edgeColor", "edgeWidth"];
+    const edgeChannels = ["edgeColor", "edgeWidth", "edgeStyle"];
     for (const channel of edgeChannels) {
       const ch = encoding[channel];
-      if (ch?.field && typeof ch.field === "string" && firstEdge && !edgeFields.has(ch.field)) {
+      if (ch?.field && typeof ch.field === "string" && edges.length > 0 && !edgeFields.has(ch.field)) {
         errors.push({
           message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist on edges. Available fields: ${[...edgeFields].join(", ")}`,
           path: `encoding.${channel}.field`,
@@ -11782,7 +11959,7 @@ function validateTileMapSpec(spec, errors) {
     });
   }
 }
-function validateMapSpec(spec, errors) {
+function validateGeoMapSpec(spec, errors) {
   if (!spec.geo || typeof spec.geo !== "object") {
     errors.push({
       message: 'Spec error: map spec requires a "geo" object with a TopoJSON "features" field',
@@ -12162,6 +12339,22 @@ function validateLayerSpec(spec, errors) {
     }
   }
 }
+function validateAnimation(spec, errors) {
+  const animation = spec.animation;
+  if (!animation || typeof animation !== "object" || Array.isArray(animation)) return;
+  const update = animation.update;
+  if (!update || typeof update !== "object" || Array.isArray(update)) return;
+  const maxMarks = update.maxMarks;
+  if (maxMarks === void 0) return;
+  if (typeof maxMarks !== "number" || !Number.isFinite(maxMarks) || maxMarks < 1) {
+    errors.push({
+      message: `Spec error: animation.update.maxMarks must be a number >= 1, got ${JSON.stringify(maxMarks)}`,
+      path: "animation.update.maxMarks",
+      code: "INVALID_VALUE",
+      suggestion: "Set animation.update.maxMarks to the largest mark count that should still tween, e.g. animation: { update: { maxMarks: 5000 } }. Omit it to use the default of 500."
+    });
+  }
+}
 function validateSpec(spec) {
   const errors = [];
   if (!spec || typeof spec !== "object" || Array.isArray(spec)) {
@@ -12266,10 +12459,13 @@ function validateSpec(spec) {
   } else if (isTileMap) {
     validateTileMapSpec(obj, errors);
   } else if (isMap) {
-    validateMapSpec(obj, errors);
+    validateGeoMapSpec(obj, errors);
   } else if (isBarList) {
     validateBarListSpec(obj, errors);
   }
+  if (!isGraph) {
+    validateAnimation(obj, errors);
+  }
   if (errors.length > 0) {
     return { valid: false, errors, normalized: null };
   }
@@ -12293,6 +12489,36 @@ ${errorMessages}`);
   return { spec: normalized, warnings };
 }
 
+// src/layout/shared.ts
+function chromeToInput(chrome) {
+  return {
+    eyebrow: chrome.eyebrow,
+    title: chrome.title,
+    subtitle: chrome.subtitle,
+    source: chrome.source,
+    byline: chrome.byline,
+    footer: chrome.footer,
+    brand: chrome.brand
+  };
+}
+function scalePadding(basePadding, width, height) {
+  const minDim = Math.min(width, height);
+  if (minDim >= 500) return basePadding;
+  if (minDim <= 200) return Math.max(Math.round(basePadding * 0.5), 4);
+  const t = (minDim - 200) / 300;
+  return Math.max(Math.round(basePadding * (0.5 + t * 0.5)), 4);
+}
+function bottomMargin(bottomHeight, padding, xAxisHeight) {
+  return padding + bottomHeight + xAxisHeight;
+}
+var INLINE_TICK_OVERHANG_PAD = 6;
+function resolveChromeLayout(spec, options) {
+  const encoding = spec?.encoding;
+  const isFaceted = !!(encoding?.facet || encoding?.row || encoding?.column);
+  if (isFaceted) return "subtract";
+  return spec?.chromeLayout ?? options?.chromeLayout ?? "subtract";
+}
+
 // src/barlist/compile-barlist.ts
 var DEFAULT_ROW_GAP = 8;
 var LABEL_BAR_GAP = 12;
@@ -12340,14 +12566,19 @@ function compileBarList(spec, options) {
     watermark
   );
   const padding = theme.spacing.padding;
+  const chromeLayout = resolveChromeLayout(
+    spec,
+    options
+  );
+  const grownHeight = chromeLayout === "grow" ? options.height + chrome.topHeight + chrome.bottomHeight : options.height;
   const fullArea = {
     x: padding,
     y: padding + chrome.topHeight,
     width: options.width - padding * 2,
-    height: options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
+    height: chromeLayout === "grow" ? options.height - padding * 2 : options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
   };
   if (fullArea.width <= 0 || fullArea.height <= 0) {
-    return emptyLayout2(chrome, theme, options, watermark);
+    return emptyLayout2(chrome, theme, { ...options, height: grownHeight }, watermark);
   }
   const labelField = barlistSpec.encoding.label.field;
   const valueField = barlistSpec.encoding.value.field;
@@ -12532,7 +12763,7 @@ function compileBarList(spec, options) {
     a11y,
     theme,
     width: options.width,
-    height: options.height,
+    height: grownHeight,
     animation: resolvedAnimation,
     watermark,
     measureText
@@ -13317,9 +13548,9 @@ function buildBandScale(channel, data, rangeStart, rangeEnd, defaultPadding = DE
   }
   return { scale, type: "band", channel };
 }
-function buildPointScale(channel, data, rangeStart, rangeEnd) {
+function buildPointScale(channel, data, rangeStart, rangeEnd, defaultPadding = 0.5) {
   const values = channel.scale?.domain ? channel.scale.domain : applyCategoricalSort(uniqueStrings(fieldValues(data, channel.field)), channel.sort);
-  const padding = channel.scale?.padding ?? channel.scale?.paddingOuter ?? 0.5;
+  const padding = channel.scale?.padding ?? channel.scale?.paddingOuter ?? defaultPadding;
   const scale = point().domain(values).range([rangeStart, rangeEnd]).padding(padding);
   if (channel.scale?.reverse) {
     const [r0, r1] = scale.range();
@@ -13396,7 +13627,7 @@ function buildPositionalScale(channel, data, rangeStart, rangeEnd, chartType, ax
       case "point":
         return buildPointScale(channel, data, rangeStart, rangeEnd);
       case "ordinal":
-        return buildBandScale(channel, data, rangeStart, rangeEnd);
+        return buildCategoricalScale(channel, data, rangeStart, rangeEnd, chartType, axis);
     }
   }
   switch (channel.type) {
@@ -13406,17 +13637,21 @@ function buildPositionalScale(channel, data, rangeStart, rangeEnd, chartType, ax
       return buildLinearScale(channel, data, rangeStart, rangeEnd);
     case "nominal":
     case "ordinal":
-      if (chartType === "rect") {
-        return buildBandScale(channel, data, rangeStart, rangeEnd, HEATMAP_BAND_PADDING);
-      }
-      if (chartType === "bar" || chartType === "beeswarm" || chartType === "range" || (chartType === "circle" || chartType === "lollipop") && axis === "y") {
-        return buildBandScale(channel, data, rangeStart, rangeEnd);
-      }
-      return buildPointScale(channel, data, rangeStart, rangeEnd);
+      return buildCategoricalScale(channel, data, rangeStart, rangeEnd, chartType, axis);
     default:
       return buildLinearScale(channel, data, rangeStart, rangeEnd);
   }
 }
+function buildCategoricalScale(channel, data, rangeStart, rangeEnd, chartType, axis) {
+  if (chartType === "rect") {
+    return buildBandScale(channel, data, rangeStart, rangeEnd, HEATMAP_BAND_PADDING);
+  }
+  if (chartType === "bar" || chartType === "beeswarm" || chartType === "range" || (chartType === "circle" || chartType === "lollipop") && axis === "y") {
+    return buildBandScale(channel, data, rangeStart, rangeEnd);
+  }
+  const isTrendMark = chartType === "line" || chartType === "area";
+  return buildPointScale(channel, data, rangeStart, rangeEnd, isTrendMark ? 0 : 0.5);
+}
 function computeScales(spec, chartArea, data) {
   const result = {};
   const encoding = spec.encoding;
@@ -13660,6 +13895,7 @@ var LEGEND_PADDING = 8;
 var LEGEND_RIGHT_WIDTH = 120;
 var RIGHT_LEGEND_MAX_HEIGHT_RATIO = 0.4;
 var TOP_LEGEND_MAX_ROWS = 2;
+var ARC_LABEL_CROWDING_LIMIT = 21;
 function hasLegendContent(content) {
   return content.entries.length > 0 || content.continuous != null;
 }
@@ -13817,6 +14053,12 @@ function computeLegendContent(spec, strategy, theme, availableWidth, availableHe
       }
     }
   }
+  const density = spec.labels.density;
+  const everySliceLabeled = density === "all" || density === "auto";
+  const uncrowded = seriesCount > 0 && seriesCount <= ARC_LABEL_CROWDING_LIMIT;
+  if (spec.markType === "arc" && everySliceLabeled && uncrowded && !spec.userExplicit?.legend) {
+    entries = [];
+  }
   const labelStyle = {
     fontFamily: theme.fonts.family,
     fontSize: theme.fonts.sizes.small,
@@ -14561,6 +14803,32 @@ function applyBandLabelStride(ticks2, stride) {
   const lastIdx = ticks2.length - 1;
   return ticks2.filter((_, i) => (lastIdx - i) % stride === 0);
 }
+var LABEL_EDGE_GUARD = 2;
+function clampXTickLabels(ticks2, totalWidth, tickAngle, fontSize, fontWeight, measureText) {
+  const rotated = tickAngle !== void 0 && Math.abs(tickAngle) > 10;
+  const rad = rotated ? Math.abs(tickAngle) * Math.PI / 180 : 0;
+  const across = rotated ? fontSize * 1.2 * Math.sin(rad) / 2 : 0;
+  return ticks2.map((tick) => {
+    const width = measureLabel(tick.label, fontSize, fontWeight, measureText);
+    let left2;
+    let right2;
+    if (rotated) {
+      const along = width * Math.cos(rad);
+      const trailsLeft = tickAngle < 0;
+      left2 = trailsLeft ? -(along + across) : -across;
+      right2 = trailsLeft ? across : along + across;
+    } else {
+      left2 = -width / 2;
+      right2 = width / 2;
+    }
+    let x2 = tick.position;
+    const overRight = x2 + right2 - (totalWidth - LABEL_EDGE_GUARD);
+    if (overRight > 0) x2 -= overRight;
+    const overLeft = LABEL_EDGE_GUARD - (x2 + left2);
+    if (overLeft > 0) x2 += overLeft;
+    return x2 === tick.position ? tick : { ...tick, labelPosition: x2 };
+  });
+}
 function computeAxes(scales, chartArea, strategy, theme, measureText, dataContext) {
   const result = {};
   const baseDensity = strategy.axisLabelDensity;
@@ -14773,6 +15041,14 @@ function computeAxes(scales, chartArea, strategy, theme, measureText, dataContex
   const totalWidth = dataContext?.totalWidth ?? chartArea.x + chartArea.width;
   if (result.x) {
     const isRotated = !!result.x.tickAngle && Math.abs(result.x.tickAngle) > 10;
+    result.x.ticks = clampXTickLabels(
+      result.x.ticks,
+      totalWidth,
+      result.x.tickAngle,
+      result.x.tickLabelStyle.fontSize,
+      result.x.tickLabelStyle.fontWeight,
+      measureText
+    );
     result.x.extent = computeXAxisExtentFromLabels({
       labels: result.x.ticks.map((t) => t.label),
       tickAngle: result.x.tickAngle,
@@ -14826,30 +15102,6 @@ function computeAxes(scales, chartArea, strategy, theme, measureText, dataContex
   return result;
 }
 
-// src/layout/shared.ts
-function chromeToInput(chrome) {
-  return {
-    eyebrow: chrome.eyebrow,
-    title: chrome.title,
-    subtitle: chrome.subtitle,
-    source: chrome.source,
-    byline: chrome.byline,
-    footer: chrome.footer,
-    brand: chrome.brand
-  };
-}
-function scalePadding(basePadding, width, height) {
-  const minDim = Math.min(width, height);
-  if (minDim >= 500) return basePadding;
-  if (minDim <= 200) return Math.max(Math.round(basePadding * 0.5), 4);
-  const t = (minDim - 200) / 300;
-  return Math.max(Math.round(basePadding * (0.5 + t * 0.5)), 4);
-}
-function bottomMargin(bottomHeight, padding, xAxisHeight) {
-  return padding + bottomHeight + xAxisHeight;
-}
-var INLINE_TICK_OVERHANG_PAD = 6;
-
 // src/layout/plan.ts
 function createMeasureFn(measureText) {
   if (measureText) {
@@ -15071,7 +15323,9 @@ function resolveLayoutPlan(chartSpec, renderSpec, options, theme, strategy, wate
     if (hasTopLegend) topMargin += TOP_LEGEND_GAP_ABOVE + legendContent.height + gap;
     topMargin += effectiveTopAxisGap;
     const bMargin = bottomMargin(chrome.bottomHeight, padding, xAxisExtent);
-    const chartHeight = Math.max(0, height - topMargin - bMargin);
+    const chromeLayout = resolveChromeLayout(renderSpec, options);
+    const effectiveHeight = chromeLayout === "grow" ? height + chrome.topHeight + chrome.bottomHeight : height;
+    const chartHeight = Math.max(0, effectiveHeight - topMargin - bMargin);
     const rightMargin = hPad + (isRadial ? hPad : axisMargin);
     const rightAxisReserve = options.rightAxisReserve ?? 0;
     const provisionalArea = {
@@ -15223,11 +15477,12 @@ function compileLayer(spec, options, compileChart2) {
     const singleSpec = buildPrimarySpec(leaves, spec);
     return compileChart2(singleSpec, options);
   }
+  const layerOptions = { ...options, layered: true };
   if (spec.resolve?.scale?.y === "independent") {
-    return compileLayerIndependent(leaves, spec, options, compileChart2);
+    return compileLayerIndependent(leaves, spec, layerOptions, compileChart2);
   }
   const primarySpec = buildPrimarySpec(leaves, spec);
-  const primaryLayout = compileChart2(primarySpec, options);
+  const primaryLayout = compileChart2(primarySpec, layerOptions);
   const allMarks = [];
   const seenLabels = /* @__PURE__ */ new Set();
   const pLegend = primaryLayout.legend;
@@ -15240,7 +15495,7 @@ function compileLayer(spec, options, compileChart2) {
     zIndex: leaf.zIndex ?? i
   }));
   indexedLeaves.sort((a, b) => a.zIndex - b.zIndex);
-  const leafOptions = { ...options, frozenChartArea: primaryLayout.area };
+  const leafOptions = { ...layerOptions, frozenChartArea: primaryLayout.area };
   const sharedDomains = computeSharedDomains(leaves);
   for (const { leaf } of indexedLeaves) {
     const themedLeaf = {
@@ -15349,11 +15604,9 @@ function compileLayerIndependent(leaves, layerSpec, options, compileChart2) {
   };
   const xField0 = leaf0.encoding?.x?.field;
   const xField1 = leaf1.encoding?.x?.field;
-  const unionXValues = /* @__PURE__ */ new Set();
-  if (xField0) for (const row of leaf0.data) unionXValues.add(row[xField0]);
-  if (xField1) for (const row of leaf1.data) unionXValues.add(row[xField1]);
-  let leaf0WithUnionX = ensureXDomainCoverage(leaf0, xField0, unionXValues);
-  let leaf1WithUnionX = ensureXDomainCoverage(leaf1, xField1, unionXValues);
+  const union = withUnionXDomain(leaf0, leaf1);
+  let leaf0WithUnionX = union.leaf0;
+  let leaf1WithUnionX = union.leaf1;
   const aligned = alignYDomains(leaf0WithUnionX, leaf1WithUnionX);
   if (aligned) {
     leaf0WithUnionX = withYDomain(leaf0WithUnionX, aligned.domain0);
@@ -15500,20 +15753,75 @@ function compileLayerIndependent(leaves, layerSpec, options, compileChart2) {
     tooltipDescriptors: mergedTooltips
   };
 }
-function ensureXDomainCoverage(leaf, xField, allXValues) {
-  if (!xField || allXValues.size === 0) return leaf;
-  const existingXValues = /* @__PURE__ */ new Set();
-  for (const row of leaf.data) existingXValues.add(row[xField]);
-  const missingRows = [];
-  for (const xVal of allXValues) {
-    if (!existingXValues.has(xVal)) {
-      missingRows.push({ [xField]: xVal });
+function withXDomain(leaf, domain) {
+  if (!leaf.encoding?.x) return leaf;
+  return {
+    ...leaf,
+    encoding: {
+      ...leaf.encoding,
+      x: {
+        ...leaf.encoding.x,
+        scale: {
+          ...leaf.encoding.x.scale,
+          domain
+        }
+      }
     }
+  };
+}
+function withUnionXDomain(leaf0, leaf1) {
+  const xEnc0 = leaf0.encoding?.x;
+  const xEnc1 = leaf1.encoding?.x;
+  const xField0 = xEnc0?.field;
+  const xField1 = xEnc1?.field;
+  if (!xField0 || !xField1) return { leaf0, leaf1 };
+  const xType = xEnc0?.type ?? xEnc1?.type;
+  const pinned0 = xEnc0?.scale?.domain !== void 0;
+  const pinned1 = xEnc1?.scale?.domain !== void 0;
+  if (pinned0 && pinned1) return { leaf0, leaf1 };
+  const values0 = leaf0.data.map((row) => row[xField0]);
+  const values1 = leaf1.data.map((row) => row[xField1]);
+  const allValues = [...values0, ...values1].filter((v) => v != null);
+  if (allValues.length === 0) return { leaf0, leaf1 };
+  let domain;
+  if (xType === "temporal") {
+    let minMs = Number.POSITIVE_INFINITY;
+    let maxMs = Number.NEGATIVE_INFINITY;
+    for (const v of allValues) {
+      const ms = (v instanceof Date ? v : new Date(String(v))).getTime();
+      if (Number.isNaN(ms)) continue;
+      if (ms < minMs) minMs = ms;
+      if (ms > maxMs) maxMs = ms;
+    }
+    if (minMs <= maxMs) {
+      domain = [new Date(minMs).toISOString(), new Date(maxMs).toISOString()];
+    }
+  } else if (xType === "quantitative") {
+    let min4 = Number.POSITIVE_INFINITY;
+    let max4 = Number.NEGATIVE_INFINITY;
+    for (const v of allValues) {
+      const n = typeof v === "number" ? v : Number(v);
+      if (!Number.isFinite(n)) continue;
+      if (n < min4) min4 = n;
+      if (n > max4) max4 = n;
+    }
+    if (min4 <= max4) domain = [min4, max4];
+  } else {
+    const seen = /* @__PURE__ */ new Set();
+    const categories = [];
+    for (const v of allValues) {
+      const s = String(v);
+      if (!seen.has(s)) {
+        seen.add(s);
+        categories.push(s);
+      }
+    }
+    if (categories.length > 0) domain = categories;
   }
-  if (missingRows.length === 0) return leaf;
+  if (domain === void 0) return { leaf0, leaf1 };
   return {
-    ...leaf,
-    data: [...leaf.data, ...missingRows]
+    leaf0: pinned0 ? leaf0 : withXDomain(leaf0, domain),
+    leaf1: pinned1 ? leaf1 : withXDomain(leaf1, domain)
   };
 }
 function alignYDomains(leaf0, leaf1) {
@@ -15736,7 +16044,7 @@ function resolveYouDrawIt(config, marks, scales, chartArea, xField) {
 }
 
 // src/compiler/a11y-warnings.ts
-import { contrastRatio, findAccessibleColor, isOpaqueColor } from "@opendata-ai/openchart-core";
+import { contrastRatio, findAccessibleColor, isOpaqueColor as isOpaqueColor2 } from "@opendata-ai/openchart-core";
 var GRAPHIC_MIN = 3;
 var TEXT_MIN = 4.5;
 var ADJACENT_FILL_MARKS = /* @__PURE__ */ new Set(["bar", "area", "arc", "waffle"]);
@@ -15744,7 +16052,7 @@ var fmt = (ratio) => `${ratio.toFixed(2)}:1`;
 function collectContrastWarnings(scales, markType, theme) {
   const warnings = [];
   const bg = theme.colors.background;
-  const bgIsCheckable = isOpaqueColor(bg);
+  const bgIsCheckable = isOpaqueColor2(bg);
   const series = [];
   if (scales.color && scales.color.type !== "sequential") {
     const ordinal2 = scales.color.scale;
@@ -15792,6 +16100,37 @@ function collectContrastWarnings(scales, markType, theme) {
   return warnings;
 }
 
+// src/compiler/mark-render-mode.ts
+var AUTO_CANVAS_THRESHOLD = 1e3;
+var AUTO_CANVAS_REFUSAL_WARN_THRESHOLD = 5e3;
+function resolveMarkRenderMode(args, warnings = []) {
+  const { markType, pointCount, display, faceted, layered } = args;
+  const requested = args.requested ?? "auto";
+  if (requested === "svg") return "svg";
+  const refusal = describeRefusal(markType, display, faceted, layered);
+  if (refusal) {
+    if (requested === "canvas") {
+      warnings.push(
+        `Chart warning: renderer "canvas" is not supported ${refusal}; rendering marks as SVG instead.`
+      );
+    } else if (pointCount > AUTO_CANVAS_REFUSAL_WARN_THRESHOLD) {
+      warnings.push(
+        `[openchart] Rendering ${pointCount} point marks as SVG: the canvas mark layer is not supported ${refusal}. Expect slow paint and interaction. Reduce the point count, or restructure so the dense marks compile as a single unlayered, unfaceted point chart.`
+      );
+    }
+    return "svg";
+  }
+  if (requested === "canvas") return "canvas";
+  return pointCount > AUTO_CANVAS_THRESHOLD ? "canvas" : "svg";
+}
+function describeRefusal(markType, display, faceted, layered) {
+  if (markType !== "point") return `for ${markType} marks (point marks only)`;
+  if (faceted) return "on faceted charts";
+  if (layered) return "on layered charts";
+  if (display === "sparkline") return "on sparklines";
+  return void 0;
+}
+
 // src/compiler/sparkline-defaults.ts
 var TREND_DEADBAND = 5e-4;
 function computeTrend(values) {
@@ -15858,7 +16197,7 @@ function buildSparklineAreaGradient(baseColor) {
   };
 }
 
-// src/geo/compile-map.ts
+// src/geo/compile-geo-map.ts
 import {
   adaptTheme as adaptTheme2,
   buildD3Formatter as buildD3Formatter2,
@@ -17759,7 +18098,7 @@ function identity_default4() {
   return projection2;
 }
 
-// src/geo/compile-map.ts
+// src/geo/compile-geo-map.ts
 import { feature as topoFeature, mesh as topoMesh } from "topojson-client";
 
 // src/geo/join.ts
@@ -17892,7 +18231,7 @@ function excludePolarFeatures(geojson) {
   return { type: "FeatureCollection", features: filtered };
 }
 
-// src/geo/compile-map.ts
+// src/geo/compile-geo-map.ts
 var OVERLAY_LEGEND_INSET = 18;
 function validateGeoFeatures(geo) {
   if (!geo.features) {
@@ -17914,14 +18253,14 @@ function validateGeoFeatures(geo) {
   }
   return topo;
 }
-function compileMap(spec, options) {
+function compileGeoMap(spec, options) {
   const sugarWarnings = [];
   const expandedSpec = spec && typeof spec === "object" && !Array.isArray(spec) ? expandSpecSugar(spec, sugarWarnings) : spec;
   const { spec: normalized, warnings } = compile(expandedSpec);
   emitSpecWarnings([...sugarWarnings, ...warnings], options.onWarn);
   if (!("type" in normalized) || normalized.type !== "map") {
     throw new Error(
-      "compileMap received a non-map spec. Use compileChart, compileTileMap, compileSankey, or compileBarList instead."
+      "compileGeoMap received a non-map spec. Use compileChart, compileTileMap, compileSankey, or compileBarList instead."
     );
   }
   const mapSpec = normalized;
@@ -17951,11 +18290,15 @@ function compileMap(spec, options) {
     watermark
   );
   const padding = getBreakpoint(options.width) === "compact" ? Math.max(HPAD_COMPACT_MIN2, Math.round(theme.spacing.padding * HPAD_COMPACT_FRACTION2)) : theme.spacing.padding;
+  const chromeLayout = resolveChromeLayout(
+    spec,
+    options
+  );
   const fullArea = {
     x: padding,
     y: padding + chrome.topHeight,
     width: options.width - padding * 2,
-    height: options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
+    height: chromeLayout === "grow" ? options.height - padding * 2 : options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
   };
   if (fullArea.width <= 0 || fullArea.height <= 0) {
     return emptyLayout3(chrome, theme, options, watermark);
@@ -18057,7 +18400,7 @@ function compileMap(spec, options) {
     compileWarnings.push(...filteredJoinWarnings);
   }
   const droppedFeatures = [];
-  const formatter = buildD3Formatter2(mapSpec.valueFormat) ?? formatNumber3;
+  const formatter = buildD3Formatter2(mapSpec.encoding?.color?.format ?? mapSpec.valueFormat) ?? formatNumber3;
   const neutralFill = isDarkMode ? "#2a2a2a" : "#e8e8e8";
   const neutralStroke = isDarkMode ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)";
   let featureMarks;
@@ -18852,6 +19195,65 @@ import {
   resolveTheme as resolveTheme4
 } from "@opendata-ai/openchart-core";
 
+// src/graphs/animation.ts
+var ENTER_DEFAULT = {
+  duration: 500,
+  ease: "smooth",
+  stagger: true,
+  cameraFit: true
+};
+var UPDATE_DEFAULT = { duration: 300, ease: "smooth" };
+var EXIT_DEFAULT = { duration: 300, ease: "smooth" };
+var CAMERA_DEFAULT = { duration: "auto", ease: "smooth" };
+var HOVER_DEFAULT = { duration: 150, ease: "smooth" };
+function fullDefaults() {
+  return {
+    enter: { ...ENTER_DEFAULT },
+    update: { ...UPDATE_DEFAULT },
+    exit: { ...EXIT_DEFAULT },
+    camera: { ...CAMERA_DEFAULT },
+    hover: { ...HOVER_DEFAULT }
+  };
+}
+function resolveGraphAnimation(spec) {
+  if (spec === void 0 || spec === true) return fullDefaults();
+  if (spec === false) return void 0;
+  return {
+    enter: resolveEnter(spec.enter),
+    update: resolveDurationPhase(spec.update, UPDATE_DEFAULT),
+    exit: resolveDurationPhase(spec.exit, EXIT_DEFAULT),
+    camera: resolveCamera(spec.camera),
+    hover: resolveDurationPhase(spec.hover, HOVER_DEFAULT)
+  };
+}
+function resolveEnter(phase) {
+  if (phase === false) return null;
+  if (phase === void 0 || phase === true) return { ...ENTER_DEFAULT };
+  return {
+    duration: phase.duration ?? ENTER_DEFAULT.duration,
+    ease: phase.ease ?? ENTER_DEFAULT.ease,
+    stagger: phase.stagger !== false,
+    cameraFit: ENTER_DEFAULT.cameraFit
+  };
+}
+function resolveDurationPhase(phase, defaults) {
+  if (phase === false) return null;
+  if (phase === void 0 || phase === true)
+    return { duration: defaults.duration, ease: defaults.ease };
+  return {
+    duration: phase.duration ?? defaults.duration,
+    ease: phase.ease ?? defaults.ease
+  };
+}
+function resolveCamera(phase) {
+  if (phase === false) return null;
+  if (phase === void 0 || phase === true) return { ...CAMERA_DEFAULT };
+  return {
+    duration: phase.duration ?? CAMERA_DEFAULT.duration,
+    ease: phase.ease ?? CAMERA_DEFAULT.ease
+  };
+}
+
 // src/graphs/encoding.ts
 var DEFAULT_NODE_RADIUS = 5;
 var MIN_NODE_RADIUS = 3;
@@ -18891,16 +19293,42 @@ function computeDegrees(nodes, edges) {
   }
   return degrees2;
 }
+function resolveCategoricalDomain(values, sort, scaleDomain) {
+  if (Array.isArray(scaleDomain) && scaleDomain.length > 0) {
+    return scaleDomain.map((v) => String(v));
+  }
+  const seen = [];
+  const set = /* @__PURE__ */ new Set();
+  for (const v of values) {
+    if (!set.has(v)) {
+      set.add(v);
+      seen.push(v);
+    }
+  }
+  if (sort === null) return seen;
+  if (Array.isArray(sort)) {
+    const pinned = sort.filter((v) => set.has(v));
+    const pinnedSet = new Set(pinned);
+    const rest = seen.filter((v) => !pinnedSet.has(v));
+    return [...pinned, ...rest];
+  }
+  const sorted = [...seen].sort((a, b) => a.localeCompare(b));
+  return sort === "descending" ? sorted.reverse() : sorted;
+}
 function resolveNodeVisuals(nodes, encoding, edges, theme, nodeOverrides) {
   const degrees2 = computeDegrees(nodes, edges);
   const maxDegree = Math.max(1, ...degrees2.values());
   let sizeScale;
   if (encoding.nodeSize?.field) {
     const field = encoding.nodeSize.field;
+    const scaleConfig = encoding.nodeSize.scale;
     const values = nodes.map((n) => Number(n[field])).filter((v) => Number.isFinite(v));
     const sizeMin = min(values) ?? 0;
     const sizeMax = max(values) ?? 1;
-    sizeScale = sqrt().domain([sizeMin, sizeMax]).range([MIN_NODE_RADIUS, MAX_NODE_RADIUS]);
+    const domain = scaleConfig?.domain && scaleConfig.domain.length === 2 ? scaleConfig.domain : [sizeMin, sizeMax];
+    const range3 = scaleConfig?.range && scaleConfig.range.length >= 2 ? [Number(scaleConfig.range[0]), Number(scaleConfig.range[1])] : [MIN_NODE_RADIUS, MAX_NODE_RADIUS];
+    const ctor = scaleConfig?.type === "linear" ? linear2 : sqrt;
+    sizeScale = ctor().domain(domain).range(range3);
   }
   let colorFn;
   if (encoding.nodeColor?.field) {
@@ -18921,13 +19349,39 @@ function resolveNodeVisuals(nodes, encoding, edges, theme, nodeOverrides) {
         return Number.isFinite(val) ? colorScale(val) : theme.colors.categorical[0];
       };
     } else {
-      const domain = scaleConfig?.domain && Array.isArray(scaleConfig.domain) ? scaleConfig.domain : [...new Set(nodes.map((n) => String(n[field] ?? "")))];
+      const domain = resolveCategoricalDomain(
+        nodes.map((n) => String(n[field] ?? "")),
+        encoding.nodeColor.sort,
+        scaleConfig?.domain
+      );
       const range3 = scaleConfig?.range && scaleConfig.range.length > 0 ? scaleConfig.range : theme.colors.categorical;
       const ordinalScale = ordinal().domain(domain).range(range3);
       colorFn = (node) => ordinalScale(String(node[field] ?? ""));
     }
   }
   const defaultColor = theme.colors.categorical[0];
+  let opacityScale;
+  if (encoding.nodeOpacity?.field) {
+    const field = encoding.nodeOpacity.field;
+    const scaleConfig = encoding.nodeOpacity.scale;
+    const values = nodes.map((n) => Number(n[field])).filter((v) => Number.isFinite(v));
+    const opMin = min(values) ?? 0;
+    const opMax = max(values) ?? 1;
+    const domain = scaleConfig?.domain && scaleConfig.domain.length === 2 ? scaleConfig.domain : [opMin, opMax];
+    const range3 = scaleConfig?.range && scaleConfig.range.length >= 2 ? [Number(scaleConfig.range[0]), Number(scaleConfig.range[1])] : [0.25, 1];
+    opacityScale = linear2().domain(domain).range(range3);
+  }
+  let labelPriorityScale;
+  if (encoding.nodeLabelPriority?.field) {
+    const field = encoding.nodeLabelPriority.field;
+    const scaleConfig = encoding.nodeLabelPriority.scale;
+    const values = nodes.map((n) => Number(n[field])).filter((v) => Number.isFinite(v));
+    const lpMin = min(values) ?? 0;
+    const lpMax = max(values) ?? 1;
+    const domain = scaleConfig?.domain && scaleConfig.domain.length === 2 ? scaleConfig.domain : [lpMin, lpMax];
+    const range3 = scaleConfig?.range && scaleConfig.range.length >= 2 ? [Number(scaleConfig.range[0]), Number(scaleConfig.range[1])] : [0, 1];
+    labelPriorityScale = linear2().domain(domain).range(range3);
+  }
   return nodes.map((node) => {
     let radius = DEFAULT_NODE_RADIUS;
     if (sizeScale && encoding.nodeSize?.field) {
@@ -18936,6 +19390,13 @@ function resolveNodeVisuals(nodes, encoding, edges, theme, nodeOverrides) {
         radius = sizeScale(val);
       }
     }
+    let opacity = 1;
+    if (opacityScale && encoding.nodeOpacity?.field) {
+      const val = Number(node[encoding.nodeOpacity.field]);
+      if (Number.isFinite(val)) {
+        opacity = opacityScale(val);
+      }
+    }
     const fill = colorFn ? colorFn(node) : defaultColor;
     const stroke = darkenColor(fill);
     let label;
@@ -18945,8 +19406,14 @@ function resolveNodeVisuals(nodes, encoding, edges, theme, nodeOverrides) {
     } else {
       label = node.id;
     }
-    const degree = degrees2.get(node.id) ?? 0;
-    const labelPriority = maxDegree > 0 ? degree / maxDegree : 0;
+    let labelPriority;
+    if (labelPriorityScale && encoding.nodeLabelPriority?.field) {
+      const val = Number(node[encoding.nodeLabelPriority.field]);
+      labelPriority = Number.isFinite(val) ? labelPriorityScale(val) : 0;
+    } else {
+      const degree = degrees2.get(node.id) ?? 0;
+      labelPriority = maxDegree > 0 ? degree / maxDegree : 0;
+    }
     const { id: _id, ...rest } = node;
     const data = { id: node.id, ...rest };
     const override = nodeOverrides?.[node.id];
@@ -18964,6 +19431,7 @@ function resolveNodeVisuals(nodes, encoding, edges, theme, nodeOverrides) {
       label,
       labelPriority: finalLabelPriority,
       community: void 0,
+      opacity,
       data
     };
   });
@@ -18996,7 +19464,11 @@ function resolveEdgeVisuals(edges, encoding, theme) {
         return Number.isFinite(val) ? colorScale(val) : hexWithOpacity(theme.colors.axis, 0.4);
       };
     } else {
-      const domain = scaleConfig?.domain && Array.isArray(scaleConfig.domain) ? scaleConfig.domain : [...new Set(edges.map((e) => String(e[field] ?? "")))];
+      const domain = resolveCategoricalDomain(
+        edges.map((e) => String(e[field] ?? "")),
+        encoding.edgeColor.sort,
+        scaleConfig?.domain
+      );
       const range3 = scaleConfig?.range && scaleConfig.range.length > 0 ? scaleConfig.range : theme.colors.categorical;
       const ordinalScale = ordinal().domain(domain).range(range3);
       edgeColorFn = (edge) => ordinalScale(String(edge[field] ?? ""));
@@ -19007,10 +19479,14 @@ function resolveEdgeVisuals(edges, encoding, theme) {
   let styleFn;
   if (encoding.edgeStyle?.field) {
     const field = encoding.edgeStyle.field;
-    const uniqueValues = [...new Set(edges.map((e) => String(e[field] ?? "")))];
+    const domain = resolveCategoricalDomain(
+      edges.map((e) => String(e[field] ?? "")),
+      encoding.edgeStyle.sort,
+      encoding.edgeStyle.scale?.domain
+    );
     const styleMap = /* @__PURE__ */ new Map();
-    for (let i = 0; i < uniqueValues.length; i++) {
-      styleMap.set(uniqueValues[i], EDGE_STYLES[i % EDGE_STYLES.length]);
+    for (let i = 0; i < domain.length; i++) {
+      styleMap.set(domain[i], EDGE_STYLES[i % EDGE_STYLES.length]);
     }
     styleFn = (edge) => styleMap.get(String(edge[field] ?? "")) ?? "solid";
   }
@@ -19068,12 +19544,59 @@ function applyCommunityColors(nodes, colorMap) {
   }
 }
 
+// src/graphs/interaction.ts
+var DEFAULT_DIM_OPACITY = 0.15;
+var DEFAULT_CURSOR_RADIUS = 80;
+var DEFAULT_CURSOR_STRENGTH = 30;
+function resolveGraphInteraction(cfg) {
+  const hover = cfg?.hover;
+  const cursor = cfg?.cursorRepulsion;
+  let cursorRepulsion = null;
+  if (cursor === true) {
+    cursorRepulsion = { radius: DEFAULT_CURSOR_RADIUS, strength: DEFAULT_CURSOR_STRENGTH };
+  } else if (cursor && typeof cursor === "object") {
+    cursorRepulsion = {
+      radius: cursor.radius ?? DEFAULT_CURSOR_RADIUS,
+      strength: cursor.strength ?? DEFAULT_CURSOR_STRENGTH
+    };
+  }
+  return {
+    hoverMode: hover?.mode ?? "neighbors",
+    dimOpacity: hover?.dimOpacity ?? DEFAULT_DIM_OPACITY,
+    selectFlyTo: cfg?.select?.flyTo ?? false,
+    cursorRepulsion,
+    springyDrag: cfg?.springyDrag ?? false
+  };
+}
+
 // src/graphs/compile-graph.ts
 var graphNumberFormatter = defaultNumberFormatter8({ allIntegers: false, surface: "chart" });
+function mergeOverrides(...layers) {
+  const merged = {};
+  for (const layer of layers) {
+    if (!layer) continue;
+    for (const [key, value2] of Object.entries(layer)) {
+      if (value2 !== void 0) merged[key] = value2;
+    }
+  }
+  return merged;
+}
 var SWATCH_SIZE2 = 12;
 var SWATCH_GAP2 = 6;
 var ENTRY_GAP2 = 16;
-function buildGraphLegend(nodes, communityColorMap, hasCommunities, theme, nodeColorField) {
+var ENERGY_PRESETS = {
+  gentle: { chargeStrength: -150, velocityDecay: 0.5 },
+  balanced: { chargeStrength: -300, velocityDecay: 0.4 },
+  energetic: { chargeStrength: -600, velocityDecay: 0.3 }
+};
+var SETTLE_PRESETS = {
+  quick: 0.05,
+  balanced: 0.0228,
+  thorough: 0.01
+};
+var DEFAULT_WARMUP_TICKS = 100;
+var DEFAULT_WARMUP_BUDGET_MS = 250;
+function buildGraphLegend(nodes, communityColorMap, hasCommunities, theme, nodeColorField, legendOrder) {
   const labelStyle = {
     fontFamily: theme.fonts.family,
     fontSize: theme.fonts.sizes.small,
@@ -19083,25 +19606,35 @@ function buildGraphLegend(nodes, communityColorMap, hasCommunities, theme, nodeC
   };
   let entries;
   if (hasCommunities && communityColorMap.size > 0) {
+    const counts = /* @__PURE__ */ new Map();
+    for (const node of nodes) {
+      if (node.community != null) {
+        counts.set(node.community, (counts.get(node.community) ?? 0) + 1);
+      }
+    }
     entries = [...communityColorMap.entries()].map(([label, color2]) => ({
       label,
       color: color2,
       shape: "circle",
-      active: true
+      active: true,
+      count: counts.get(label) ?? 0
     }));
   } else if (nodeColorField) {
     const categoryColors = /* @__PURE__ */ new Map();
+    const categoryCounts = /* @__PURE__ */ new Map();
     for (const node of nodes) {
       const category = String(node.data[nodeColorField] ?? node.label ?? node.id);
       if (!categoryColors.has(category)) {
         categoryColors.set(category, node.fill);
       }
+      categoryCounts.set(category, (categoryCounts.get(category) ?? 0) + 1);
     }
-    entries = categoryColors.size <= 1 ? [] : [...categoryColors.entries()].map(([label, color2]) => ({
+    entries = categoryColors.size <= 1 ? [] : (legendOrder ?? [...categoryColors.keys()]).filter((label) => categoryColors.has(label)).map((label) => ({
       label,
-      color: color2,
+      color: categoryColors.get(label),
       shape: "circle",
-      active: true
+      active: true,
+      count: categoryCounts.get(label) ?? 0
     }));
   } else {
     entries = [];
@@ -19117,6 +19650,30 @@ function buildGraphLegend(nodes, communityColorMap, hasCommunities, theme, nodeC
     swatchChipFill: theme.colors.annotationFill
   };
 }
+function buildEdgeLegend(edges, encoding) {
+  const field = encoding.edgeColor?.field;
+  if (!field || (encoding.edgeColor?.type ?? "nominal") === "quantitative") return void 0;
+  const categoryColors = /* @__PURE__ */ new Map();
+  const categoryCounts = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    const category = String(edge.data[field] ?? "");
+    if (!categoryColors.has(category)) categoryColors.set(category, edge.stroke);
+    categoryCounts.set(category, (categoryCounts.get(category) ?? 0) + 1);
+  }
+  if (categoryColors.size <= 1) return void 0;
+  const order = resolveCategoricalDomain(
+    edges.map((e) => String(e.data[field] ?? "")),
+    encoding.edgeColor?.sort,
+    encoding.edgeColor?.scale?.domain
+  );
+  return order.filter((label) => categoryColors.has(label)).map((label) => ({
+    label,
+    color: categoryColors.get(label),
+    shape: "line",
+    active: true,
+    count: categoryCounts.get(label) ?? 0
+  }));
+}
 function buildGraphTooltips(nodes) {
   const descriptors = /* @__PURE__ */ new Map();
   for (const node of nodes) {
@@ -19143,6 +19700,21 @@ function buildGraphTooltips(nodes) {
   }
   return descriptors;
 }
+function buildEdgeTooltip(edge) {
+  const fields = [];
+  for (const [key, value2] of Object.entries(edge.data)) {
+    if (key === "source" || key === "target") continue;
+    if (value2 == null) continue;
+    fields.push({
+      label: key,
+      value: typeof value2 === "number" ? graphNumberFormatter(value2) : String(value2)
+    });
+  }
+  return {
+    title: `${edge.source} \u2192 ${edge.target}`,
+    fields
+  };
+}
 function compileGraph(spec, options) {
   const { spec: normalized, warnings } = compile(spec);
   emitSpecWarnings(warnings, options.onWarn);
@@ -19152,6 +19724,16 @@ function compileGraph(spec, options) {
     );
   }
   const graphSpec = normalized;
+  for (const [name, ch] of [
+    ["nodeColor", graphSpec.encoding.nodeColor],
+    ["edgeColor", graphSpec.encoding.edgeColor]
+  ]) {
+    if (ch?.sort != null && ch.type === "quantitative") {
+      options.onWarn?.(
+        `encoding.${name}.sort is ignored for a quantitative field (sort only orders categorical domains).`
+      );
+    }
+  }
   const rawWatermark = spec.watermark;
   const watermark = rawWatermark !== void 0 ? graphSpec.watermark : options.watermark ?? true;
   const mergedThemeConfig = options.theme ? { ...graphSpec.theme, ...options.theme } : graphSpec.theme;
@@ -19159,12 +19741,23 @@ function compileGraph(spec, options) {
   if (options.darkMode) {
     theme = adaptTheme3(theme);
   }
+  const seedNodeIds = graphSpec.seedNode ? [graphSpec.seedNode.id] : [];
+  const nodeOverrides = graphSpec.seedNode ? {
+    ...graphSpec.nodeOverrides,
+    [graphSpec.seedNode.id]: mergeOverrides(
+      // Radius is deliberately absent so the seed doesn't fight a nodeSize
+      // encoding; a host wanting a bigger seed sets seedNode.style.radius.
+      { stroke: theme.colors.text, strokeWidth: 2, alwaysShowLabel: true },
+      graphSpec.seedNode.style,
+      graphSpec.nodeOverrides?.[graphSpec.seedNode.id]
+    )
+  } : graphSpec.nodeOverrides;
   const compiledNodes = resolveNodeVisuals(
     graphSpec.nodes,
     graphSpec.encoding,
     graphSpec.edges,
     theme,
-    graphSpec.nodeOverrides
+    nodeOverrides
   );
   const clusteringField = graphSpec.layout.clustering?.field;
   const hasCommunities = !!clusteringField;
@@ -19177,13 +19770,30 @@ function compileGraph(spec, options) {
   }
   const compiledEdges = resolveEdgeVisuals(graphSpec.edges, graphSpec.encoding, theme);
   const useCommunitiesForLegend = hasCommunities && !hasNodeColorEncoding;
+  const nodeColorField = graphSpec.encoding.nodeColor?.field;
+  const legendOrder = nodeColorField ? resolveCategoricalDomain(
+    compiledNodes.map((n) => String(n.data[nodeColorField] ?? n.label ?? n.id)),
+    graphSpec.encoding.nodeColor?.sort,
+    graphSpec.encoding.nodeColor?.scale?.domain
+  ) : void 0;
   const legend = buildGraphLegend(
     compiledNodes,
     communityColorMap,
     useCommunitiesForLegend,
     theme,
-    graphSpec.encoding.nodeColor?.field
+    nodeColorField,
+    legendOrder
   );
+  const edgeLegend = buildEdgeLegend(compiledEdges, graphSpec.encoding);
+  const legendField = nodeColorField ?? (useCommunitiesForLegend ? clusteringField ?? null : null);
+  let initialHighlight;
+  if (nodeColorField && graphSpec.encoding.nodeColor?.highlight != null) {
+    const raw = graphSpec.encoding.nodeColor.highlight;
+    const requested = Array.isArray(raw) ? raw : [raw];
+    const available = new Set(legendOrder ?? []);
+    const values = requested.filter((v) => available.has(v));
+    if (values.length > 0) initialHighlight = { field: nodeColorField, values };
+  }
   const tooltipDescriptors = buildGraphTooltips(compiledNodes);
   const communityCount = communityColorMap.size;
   const altParts = [
@@ -19200,17 +19810,26 @@ function compileGraph(spec, options) {
   };
   const collisionPadding = graphSpec.layout.collisionPadding ?? 2;
   const maxRadius = compiledNodes.length > 0 ? Math.max(...compiledNodes.map((n) => n.radius)) : DEFAULT_COLLISION_PADDING;
+  const energyPreset = graphSpec.layout.energy ? ENERGY_PRESETS[graphSpec.layout.energy] : ENERGY_PRESETS.balanced;
+  const settlePreset = graphSpec.layout.settle ? SETTLE_PRESETS[graphSpec.layout.settle] : SETTLE_PRESETS.balanced;
+  const warmupRaw = graphSpec.layout.warmup;
+  const warmupTicks = warmupRaw === false ? 0 : typeof warmupRaw === "number" ? Math.max(0, Math.floor(warmupRaw)) : DEFAULT_WARMUP_TICKS;
   const simulationConfig = {
-    chargeStrength: graphSpec.layout.chargeStrength ?? -300,
+    chargeStrength: graphSpec.layout.chargeStrength ?? energyPreset.chargeStrength,
     linkDistance: graphSpec.layout.linkDistance ?? 30,
     clustering: clusteringField ? { field: clusteringField, strength: 0.5 } : null,
-    alphaDecay: 0.0228,
-    velocityDecay: 0.4,
+    alphaDecay: settlePreset,
+    velocityDecay: energyPreset.velocityDecay,
     collisionRadius: maxRadius + collisionPadding,
     collisionPadding,
     linkStrength: graphSpec.layout.linkStrength,
-    centerForce: graphSpec.layout.centerForce
+    centerForce: graphSpec.layout.centerForce,
+    seed: graphSpec.layout.seed,
+    warmupTicks,
+    warmupBudgetMs: DEFAULT_WARMUP_BUDGET_MS
   };
+  const animation = resolveGraphAnimation(graphSpec.animation);
+  const interaction = resolveGraphInteraction(graphSpec.interaction);
   const chrome = computeChrome4(
     {
       title: graphSpec.chrome.title,
@@ -19239,7 +19858,13 @@ function compileGraph(spec, options) {
       height: options.height
     },
     simulationConfig,
-    watermark
+    watermark,
+    animation,
+    interaction,
+    legendField,
+    initialHighlight,
+    seedNodeIds,
+    edgeLegend
   };
 }
 var DEFAULT_COLLISION_PADDING = 5;
@@ -19332,6 +19957,7 @@ function legendLayoutHasContent(legendLayout) {
 }
 var MIN_CHART_WIDTH = 60;
 var MIN_CHART_HEIGHT2 = 40;
+var PLOT_SHARE_MAX = 0.4;
 var SERIES_SEARCH_INPUT_HEIGHT = 32;
 var SERIES_SEARCH_GAP = 12;
 function getMinChartDims(display) {
@@ -19374,8 +20000,10 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     watermark,
     bottomLegendReservation
   );
+  const chromeLayout = resolveChromeLayout(spec, options);
+  const effectiveHeight = chromeLayout === "grow" ? height + chrome.topHeight + chrome.bottomHeight : height;
   if (isSparkline) {
-    const total2 = { x: 0, y: 0, width, height };
+    const total2 = { x: 0, y: 0, width, height: effectiveHeight };
     const sparkPad = getSparklinePad(spec);
     const xAxisSpace = userExplicit.xAxis ? 26 : 0;
     const yAxisSpace = userExplicit.yAxis ? 30 : 0;
@@ -19399,7 +20027,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       x: margins2.left,
       y: margins2.top,
       width: Math.max(0, width - margins2.left - margins2.right),
-      height: Math.max(0, height - margins2.top - margins2.bottom)
+      height: Math.max(0, effectiveHeight - margins2.top - margins2.bottom)
     };
     return {
       total: total2,
@@ -19411,7 +20039,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       effectiveAxisGap: 0
     };
   }
-  const total = { x: 0, y: 0, width, height };
+  const total = { x: 0, y: 0, width, height: effectiveHeight };
   const isRadial = isAxislessMark2(spec.markType);
   const encoding = spec.encoding;
   const xAxisSuppressed = encoding.x?.axis === false;
@@ -19641,10 +20269,11 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     x: margins.left,
     y: margins.top,
     width: Math.max(0, width - margins.left - margins.right),
-    height: Math.max(0, height - margins.top - margins.bottom)
+    height: Math.max(0, effectiveHeight - margins.top - margins.bottom)
   };
   const minDims = getMinChartDims(spec.display);
-  if ((chartArea.width < minDims.width || chartArea.height < minDims.height) && chromeMode !== "hidden") {
+  const chromeEatsPlot = chromeLayout !== "grow" && chrome.topHeight > height * PLOT_SHARE_MAX;
+  if ((chartArea.width < minDims.width || chartArea.height < minDims.height || chromeEatsPlot) && chromeMode !== "hidden") {
     const fallbackMode = chromeMode === "full" ? "compact" : "hidden";
     const fallbackChrome = computeChrome5(
       chromeToInput(spec.chrome),
@@ -19670,7 +20299,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
         x: margins.left,
         y: margins.top,
         width: Math.max(0, width - margins.left - margins.right),
-        height: Math.max(0, height - margins.top - margins.bottom)
+        height: Math.max(0, effectiveHeight - margins.top - margins.bottom)
       };
       const fallbackMetricsTopY = topPad + fallbackChrome.topHeight;
       const fallbackMetricsArea = { x: hPad, width: Math.max(0, width - hPad * 2) };
@@ -19687,7 +20316,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
         chartArea = {
           ...chartArea,
           y: margins.top,
-          height: Math.max(0, height - margins.top - margins.bottom)
+          height: Math.max(0, effectiveHeight - margins.top - margins.bottom)
         };
       }
       return {
@@ -19703,7 +20332,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
           fallbackMetricsArea
         ) : void 0,
         xAxisHeight,
-        effectiveAxisGap: fallbackEffectiveAxisGap
+        effectiveAxisGap: fallbackEffectiveAxisGap,
+        chromeStripped: true
       };
     }
   }
@@ -19715,7 +20345,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     chartArea = {
       ...chartArea,
       y: margins.top,
-      height: Math.max(0, height - margins.top - margins.bottom)
+      height: Math.max(0, effectiveHeight - margins.top - margins.bottom)
     };
   }
   return {
@@ -20467,14 +21097,19 @@ function compileSankey(spec, options) {
     watermark
   );
   const padding = theme.spacing.padding;
+  const chromeLayout = resolveChromeLayout(
+    spec,
+    options
+  );
+  const grownHeight = chromeLayout === "grow" ? options.height + chrome.topHeight + chrome.bottomHeight : options.height;
   const fullArea = {
     x: padding,
     y: padding + chrome.topHeight,
     width: options.width - padding * 2,
-    height: options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
+    height: chromeLayout === "grow" ? options.height - padding * 2 : options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
   };
   if (fullArea.width <= 0 || fullArea.height <= 0) {
-    return emptyLayout4(fullArea, chrome, theme, options, watermark);
+    return emptyLayout4(fullArea, chrome, theme, { ...options, height: grownHeight }, watermark);
   }
   const sourceField = sankeySpec.encoding.source.field;
   const targetField = sankeySpec.encoding.target.field;
@@ -20514,7 +21149,7 @@ function compileSankey(spec, options) {
     height: fullArea.height - legend.bounds.height - legendGap2
   };
   if (area.height <= 0) {
-    return emptyLayout4(area, chrome, theme, options, watermark);
+    return emptyLayout4(area, chrome, theme, { ...options, height: grownHeight }, watermark);
   }
   const labelFontSize = theme.fonts.sizes.small;
   const labelFontWeight = theme.fonts.weights.normal;
@@ -20666,7 +21301,7 @@ function compileSankey(spec, options) {
     theme,
     dimensions: {
       width: options.width,
-      height: options.height
+      height: grownHeight
     },
     animation: resolvedAnimation,
     watermark,
@@ -21485,6 +22120,10 @@ var LEGEND_ENTRY_GAP = 16;
 function clamp(value2, min4, max4) {
   return Math.min(max4, Math.max(min4, value2));
 }
+function growContentHeight(contentHeight, chromeLayout, budgetHeight, chrome) {
+  if (chromeLayout !== "grow") return contentHeight;
+  return Math.max(contentHeight, budgetHeight + chrome.topHeight + chrome.bottomHeight);
+}
 function compileTileMap(spec, options) {
   const sugarWarnings = [];
   const expandedSpec = spec && typeof spec === "object" && !Array.isArray(spec) ? expandSpecSugar(spec, sugarWarnings) : spec;
@@ -21521,22 +22160,44 @@ function compileTileMap(spec, options) {
     watermark
   );
   const padding = getBreakpoint2(options.width) === "compact" ? Math.max(HPAD_COMPACT_MIN4, Math.round(theme.spacing.padding * HPAD_COMPACT_FRACTION4)) : theme.spacing.padding;
+  const chromeLayout = resolveChromeLayout(
+    spec,
+    options
+  );
   const fullArea = {
     x: padding,
     y: padding + chrome.topHeight,
     width: options.width - padding * 2,
-    height: options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
+    height: chromeLayout === "grow" ? options.height - padding * 2 : options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
   };
   if (fullArea.width <= 0 || fullArea.height <= 0) {
     return emptyLayout5(chrome, theme, options, watermark);
   }
   const isCategorical = tilemapSpec.encoding.color !== void 0 || tilemapSpec.colors !== void 0;
   if (isCategorical) {
-    return compileCategorical(tilemapSpec, options, theme, chrome, fullArea, isDarkMode, watermark);
+    return compileCategorical(
+      tilemapSpec,
+      options,
+      theme,
+      chrome,
+      fullArea,
+      isDarkMode,
+      watermark,
+      chromeLayout
+    );
   }
-  return compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDarkMode, watermark);
+  return compileQuantitative(
+    tilemapSpec,
+    options,
+    theme,
+    chrome,
+    fullArea,
+    isDarkMode,
+    watermark,
+    chromeLayout
+  );
 }
-function compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDarkMode, watermark) {
+function compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDarkMode, watermark, chromeLayout) {
   const stateField = tilemapSpec.encoding.state.field;
   const valueField = tilemapSpec.encoding.value.field;
   const stateValueMap = /* @__PURE__ */ new Map();
@@ -21637,7 +22298,12 @@ function compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDa
   };
   const resolvedAnimation = resolveAnimation(tilemapSpec.animation);
   const padding = fullArea.x;
-  const contentHeight = tileGridOffsetY + tilePositions.gridHeight + legendGap2 + legendTotalHeight + chrome.bottomHeight + padding;
+  const contentHeight = growContentHeight(
+    tileGridOffsetY + tilePositions.gridHeight + legendGap2 + legendTotalHeight + chrome.bottomHeight + padding,
+    chromeLayout,
+    options.height,
+    chrome
+  );
   return {
     area: fullArea,
     chrome,
@@ -21654,7 +22320,7 @@ function compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDa
     measureText: options.measureText ?? ((text, fontSize) => ({ width: estimateTextWidth23(text, fontSize), height: fontSize }))
   };
 }
-function compileCategorical(tilemapSpec, options, theme, chrome, fullArea, isDarkMode, watermark) {
+function compileCategorical(tilemapSpec, options, theme, chrome, fullArea, isDarkMode, watermark, chromeLayout) {
   const stateField = tilemapSpec.encoding.state.field;
   const colorField = tilemapSpec.encoding.color?.field ?? tilemapSpec.encoding.value.field;
   const stateCategoryMap = /* @__PURE__ */ new Map();
@@ -21773,7 +22439,12 @@ function compileCategorical(tilemapSpec, options, theme, chrome, fullArea, isDar
   };
   const resolvedAnimation = resolveAnimation(tilemapSpec.animation);
   const padding = fullArea.x;
-  const contentHeight = tileGridOffsetY + tilePositions.gridHeight + legendGap2 + legendTotalHeight + chrome.bottomHeight + padding;
+  const contentHeight = growContentHeight(
+    tileGridOffsetY + tilePositions.gridHeight + legendGap2 + legendTotalHeight + chrome.bottomHeight + padding,
+    chromeLayout,
+    options.height,
+    chrome
+  );
   return {
     area: fullArea,
     chrome,
@@ -22881,7 +23552,7 @@ function compileChart(spec, optionsInput) {
     throw new Error("compileChart received a sankey spec. Use compileSankey instead.");
   }
   if ("type" in normalized && normalized.type === "map") {
-    throw new Error("compileChart received a map spec. Use compileMap instead.");
+    throw new Error("compileChart received a map spec. Use compileGeoMap instead.");
   }
   let chartSpec = normalized;
   const rawWatermark = expandedSpec.watermark;
@@ -23034,6 +23705,10 @@ function compileChart(spec, optionsInput) {
     watermark = false;
     chartSpec = { ...chartSpec, watermark: false };
   }
+  if (heightClass === "cramped" && !chartSpec.userExplicit.watermark) {
+    watermark = false;
+    chartSpec = { ...chartSpec, watermark: false };
+  }
   const mergedThemeConfig = options.theme ? { ...chartSpec.theme, ...options.theme } : chartSpec.theme;
   let theme = resolveTheme7(mergedThemeConfig);
   if (options.darkMode) {
@@ -23065,12 +23740,35 @@ function compileChart(spec, optionsInput) {
       }
     };
   }
+  let facetDirection = "wrap";
+  const rowChannel = renderSpec.encoding.row;
+  const colChannel = renderSpec.encoding.column;
+  if (rowChannel?.field || colChannel?.field) {
+    const channel = rowChannel?.field ? rowChannel : colChannel;
+    facetDirection = rowChannel?.field ? "row" : "column";
+    const desugared = { ...renderSpec.encoding };
+    delete desugared.row;
+    delete desugared.column;
+    desugared.facet = {
+      field: channel.field,
+      type: channel.type,
+      sort: channel.sort,
+      ...facetDirection === "row" ? { columns: 1 } : {}
+    };
+    renderSpec = { ...renderSpec, encoding: desugared };
+    const chartDesugared = { ...chartSpec.encoding };
+    delete chartDesugared.row;
+    delete chartDesugared.column;
+    chartDesugared.facet = desugared.facet;
+    chartSpec = { ...chartSpec, encoding: chartDesugared };
+  }
   const facetChannel = renderSpec.encoding.facet;
   if (facetChannel?.field) {
     return compileFaceted(
       chartSpec,
       renderSpec,
       facetChannel,
+      facetDirection,
       options,
       theme,
       strategy,
@@ -23135,7 +23833,10 @@ function compileChart(spec, optionsInput) {
     skipY,
     markType: chartSpec.markType,
     totalWidth: options.width,
-    precomputedYTicks: plan.yTickValues.length > 0 ? plan.yTickValues : void 0
+    // If the guardrail stripped chrome, the plan's y-ticks were sized
+    // against the pre-strip (shorter) plot. Drop them so computeAxes
+    // regenerates against the final (taller) chartArea.
+    precomputedYTicks: !dims.chromeStripped && plan.yTickValues.length > 0 ? plan.yTickValues : void 0
   });
   const xAxisExtent = axes.x?.extent ?? 0;
   dims.chrome.bottomAnchorY = chartArea.y + chartArea.height + xAxisExtent;
@@ -23150,6 +23851,19 @@ function compileChart(spec, optionsInput) {
   const renderer = getChartRenderer(rendererKey);
   const marks = renderer ? renderer(renderSpec, scales, chartArea, strategy, theme, options.width) : [];
   applyFillPatterns(marks, chartSpec.markDef, theme);
+  const markRenderModeWarnings = [];
+  const markRenderMode = resolveMarkRenderMode(
+    {
+      requested: options.renderer,
+      markType: chartSpec.markType,
+      pointCount: marks.reduce((n, m) => m.type === "point" ? n + 1 : n, 0),
+      display: chartSpec.display,
+      faceted: false,
+      layered: options.layered ?? false
+    },
+    markRenderModeWarnings
+  );
+  emitSpecWarnings(markRenderModeWarnings, options.onWarn);
   const xFieldForYdi = chartSpec.encoding.x && "field" in chartSpec.encoding.x ? chartSpec.encoding.x.field : void 0;
   const youDrawIt = resolveYouDrawIt(chartSpec.youDrawIt, marks, scales, chartArea, xFieldForYdi);
   const endpointLabels = computeEndpointLabels(
@@ -23251,6 +23965,7 @@ function compileChart(spec, optionsInput) {
     a11y: {
       altText,
       dataTableFallback,
+      ...chartSpec.data.length > MAX_SR_TABLE_ROWS ? { totalRows: chartSpec.data.length } : {},
       role: "img",
       keyboardNavigable: marks.length > 0,
       ...chartSpec.a11y?.hidden ? { hidden: true } : {}
@@ -23258,7 +23973,10 @@ function compileChart(spec, optionsInput) {
     theme,
     dimensions: {
       width: options.width,
-      height: options.height
+      // In chromeLayout 'grow' mode, computeDimensions grows total.height by the
+      // chrome height so the plot keeps its full budget. In the default
+      // 'subtract' mode total.height === options.height, so this is a no-op.
+      height: dims.total.height
     },
     animation: resolvedAnimation,
     watermark,
@@ -23266,10 +23984,11 @@ function compileChart(spec, optionsInput) {
     crosshair,
     measureText: options.measureText,
     ...xInvert ? { xInvert } : {},
-    ...yInvert ? { yInvert } : {}
+    ...yInvert ? { yInvert } : {},
+    ...markRenderMode === "canvas" ? { markRenderMode } : {}
   };
 }
-function compileFaceted(chartSpec, renderSpec, facetChannel, options, theme, strategy, watermark, resolvedAnimation, crosshair, rawSpec, optionsInput) {
+function compileFaceted(chartSpec, renderSpec, facetChannel, facetDirection, options, theme, strategy, watermark, resolvedAnimation, crosshair, rawSpec, optionsInput) {
   const measure = createMeasureFn(options.measureText);
   const panelEncoding = { ...renderSpec.encoding };
   delete panelEncoding.facet;
@@ -23315,10 +24034,10 @@ function compileFaceted(chartSpec, renderSpec, facetChannel, options, theme, str
     plan.xAxisExtent,
     dims.effectiveAxisGap
   );
-  const leftReservation = plan.leftGutter;
   const bottomReservation = plan.xAxisExtent;
-  const grid = computeFacetGrid(facetValues, facetChannel.columns, chartArea, {
-    left: leftReservation,
+  const effectiveColumns = facetDirection === "column" ? facetValues.length : facetChannel.columns;
+  const grid = computeFacetGrid(facetValues, effectiveColumns, chartArea, {
+    left: 0,
     bottom: bottomReservation
   });
   if (!optionsInput.facetHeightGrown && grid.panels.length > 0 && grid.panels[0].area.height < MIN_PANEL_HEIGHT) {
@@ -23333,8 +24052,10 @@ function compileFaceted(chartSpec, renderSpec, facetChannel, options, theme, str
     }
   }
   const resolveConfig = chartSpec.resolve;
-  const yResolve = resolveConfig?.scale?.y ?? "shared";
-  const xResolve = resolveConfig?.scale?.x ?? "shared";
+  const xDefault = facetDirection === "column" ? "independent" : "shared";
+  const yDefault = facetDirection === "row" ? "independent" : "shared";
+  const yResolve = resolveConfig?.scale?.y ?? yDefault;
+  const xResolve = resolveConfig?.scale?.x ?? xDefault;
   const fullScales = computeScales(panelSpec, chartArea, renderSpec.data);
   const sharedXDomain = xResolve === "shared" && fullScales.x ? fullScales.x.scale.domain() : void 0;
   const sharedYDomain = yResolve === "shared" && fullScales.y ? fullScales.y.scale.domain() : void 0;
@@ -23399,6 +24120,16 @@ function compileFaceted(chartSpec, renderSpec, facetChannel, options, theme, str
         tickMarks: false
       };
     }
+    const isBottomRow = gridPanel.row === grid.rows - 1;
+    if (xResolve === "shared" && facetDirection === "row" && !isBottomRow && panelAxes.x) {
+      panelAxes.x = {
+        ...panelAxes.x,
+        ticks: [],
+        label: void 0,
+        domainLine: false,
+        tickMarks: false
+      };
+    }
     const panelMarks = renderer ? renderer(
       panelSpecWithDomains,
       panelScales,
@@ -23452,10 +24183,11 @@ function compileFaceted(chartSpec, renderSpec, facetChannel, options, theme, str
       annotations: panelAnnotations,
       header: {
         text: gridPanel.key,
-        x: gridPanel.headerPos.x,
+        x: facetDirection === "row" ? gridPanel.area.x : gridPanel.headerPos.x,
         y: gridPanel.headerPos.y,
         fontSize: theme.fonts.sizes.body,
-        fontWeight: theme.fonts.weights.medium
+        fontWeight: theme.fonts.weights.medium,
+        ...facetDirection === "row" ? { textAnchor: "start" } : {}
       }
     });
   }
@@ -23492,6 +24224,19 @@ function compileFaceted(chartSpec, renderSpec, facetChannel, options, theme, str
     chartSpec.data
   );
   assignAnimationIndices(allMarks, resolvedAnimation);
+  const facetRenderModeWarnings = [];
+  resolveMarkRenderMode(
+    {
+      requested: options.renderer,
+      markType: chartSpec.markType,
+      pointCount: allMarks.reduce((n, m) => m.type === "point" ? n + 1 : n, 0),
+      display: chartSpec.display,
+      faceted: true,
+      layered: options.layered ?? false
+    },
+    facetRenderModeWarnings
+  );
+  emitSpecWarnings(facetRenderModeWarnings, options.onWarn);
   return {
     area: chartArea,
     chrome: allFootnotes.length > 0 ? { ...dims.chrome, footnotes: allFootnotes } : dims.chrome,
@@ -23508,6 +24253,7 @@ function compileFaceted(chartSpec, renderSpec, facetChannel, options, theme, str
     a11y: {
       altText,
       dataTableFallback,
+      ...chartSpec.data.length > MAX_SR_TABLE_ROWS ? { totalRows: chartSpec.data.length } : {},
       role: "img",
       keyboardNavigable: allMarks.length > 0,
       ...chartSpec.a11y?.hidden ? { hidden: true } : {}
@@ -23523,7 +24269,8 @@ function compileFaceted(chartSpec, renderSpec, facetChannel, options, theme, str
       panels: panelLayouts,
       facetField: facetChannel.field,
       columns: grid.columns,
-      sharedScales: yResolve === "shared" && xResolve === "shared"
+      sharedScales: yResolve === "shared" && xResolve === "shared",
+      direction: facetDirection
     }
   };
 }
@@ -23562,14 +24309,15 @@ function compileSankey2(spec, options) {
 function compileTileMap2(spec, options) {
   return compileTileMap(spec, options);
 }
-function compileMap2(spec, options) {
-  return compileMap(spec, options);
+function compileGeoMap2(spec, options) {
+  return compileGeoMap(spec, options);
 }
 function compileBarList2(spec, options) {
   return compileBarList(spec, options);
 }
 export {
   ARROWHEAD_LENGTH,
+  AUTO_CANVAS_THRESHOLD,
   BOLD_SPAN_FONT_WEIGHT,
   DEFAULT_ANNOTATION_FONT_SIZE,
   DEFAULT_LINE_HEIGHT,
@@ -23577,15 +24325,16 @@ export {
   EXIT_DEFAULTS,
   UPDATE_DEFAULTS,
   buildAreaPath,
+  buildEdgeTooltip,
   buildLinePath,
   clampStaggerDelay,
   clearRenderers,
   compile,
   compileBarList2 as compileBarList,
   compileChart,
+  compileGeoMap2 as compileGeoMap,
   compileGraph2 as compileGraph,
   compileLayer2 as compileLayer,
-  compileMap2 as compileMap,
   compileSankey2 as compileSankey,
   compileTable,
   compileTileMap2 as compileTileMap,