graphein 0.9.1 → 0.11.0

package/dist/index.js

@@ -741,11 +741,33 @@ var CATEGORICAL = {
     "#f97316",
     "#6366f1",
     "#84cc16"
+  ],
+  colorblind: ["#E69F00", "#56B4E9", "#009E73", "#F0E442", "#0072B2", "#D55E00", "#CC79A7", "#999999"],
+  bright: [
+    "#2563eb",
+    "#06b6d4",
+    "#22c55e",
+    "#eab308",
+    "#f97316",
+    "#ef4444",
+    "#a855f7",
+    "#ec4899"
+  ],
+  muted: [
+    "#4f46e5",
+    "#0f766e",
+    "#65a30d",
+    "#ca8a04",
+    "#c2410c",
+    "#be123c",
+    "#7c3aed",
+    "#475569"
   ]
 };
 function categorical(name = "graphein") {
   return [...CATEGORICAL[name] ?? CATEGORICAL.graphein];
 }
+var categoricalSchemes = Object.keys(CATEGORICAL);
 var must = (hex) => {
   const c = parseColor(hex);
   if (!c) throw new Error(`Graphein: invalid palette color ${hex}`);
@@ -1841,9 +1863,9 @@ function summarizeChart(spec) {
     return { label: description.trim(), rowCount };
   }
   const type = chartTypeLabel(spec.type);
-  const title = chartTitleText(spec) ?? (spec.type === "kpi" ? spec.label : void 0);
+  const title2 = chartTitleText(spec) ?? (spec.type === "kpi" ? spec.label : void 0);
   let label = type;
-  if (title) label += `: ${title}`;
+  if (title2) label += `: ${title2}`;
   if (rowCount > 0 && spec.type !== "kpi") {
     label += `. ${rowCount} data point${rowCount === 1 ? "" : "s"}.`;
   }
@@ -3071,1484 +3093,998 @@ function linearRegression(xs, ys) {
   };
 }
 
-// src/render/env.ts
-var isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
-function getDevicePixelRatio() {
-  const dpr = globalThis.devicePixelRatio;
-  return typeof dpr === "number" && dpr > 0 ? dpr : 1;
-}
+// src/spec/types.ts
+var SLICER_TYPES = [
+  "dropdown",
+  "search",
+  "list",
+  "range",
+  "dateRange"
+];
+var CHART_TYPES = [
+  "line",
+  "area",
+  "bar",
+  "scatter",
+  "combo",
+  "histogram",
+  "pie",
+  "heatmap",
+  "funnel",
+  "kpi",
+  "treemap",
+  "gauge",
+  "bullet",
+  "calendarHeatmap",
+  "waterfall",
+  "slope",
+  "dumbbell",
+  "table",
+  "matrix",
+  "box",
+  "sankey",
+  "choropleth",
+  "dropdown",
+  "search",
+  "list",
+  "range",
+  "dateRange"
+];
 
-// src/render/sizing.ts
-function computeBackingSize(width, height, dpr) {
-  const d = dpr > 0 ? dpr : 1;
-  const cssWidth = Math.max(0, width);
-  const cssHeight = Math.max(0, height);
-  return {
-    cssWidth,
-    cssHeight,
-    pixelWidth: Math.max(1, Math.round(cssWidth * d)),
-    pixelHeight: Math.max(1, Math.round(cssHeight * d)),
-    dpr: d
+// src/spec/transform/types.ts
+var TRANSFORM_KINDS = ["aggregate", "bin", "filter", "fold", "timeUnit", "calculate"];
+var TIME_UNITS = [
+  "year",
+  "quarter",
+  "month",
+  "week",
+  "day",
+  "hour",
+  "minute",
+  "second"
+];
+
+// src/spec/transform/aggregate.ts
+function applyAggregate(transform2, data) {
+  const groupby = transform2.groupby ?? [];
+  const reads = groupby.map((f) => accessor(f));
+  const emit = (keyValues, rows) => {
+    const out2 = {};
+    groupby.forEach((field, i) => {
+      out2[field] = keyValues[i];
+    });
+    for (const agg of transform2.aggregate) {
+      const values = agg.field === void 0 ? rows : rows.map((r) => r[agg.field]);
+      out2[agg.as] = aggregateValues(values, agg.op);
+    }
+    return out2;
   };
+  if (groupby.length === 0) {
+    return [emit([], data)];
+  }
+  const groups = /* @__PURE__ */ new Map();
+  for (const row of data) {
+    const keyValues = reads.map((read) => read(row));
+    const key = keyValues.map((v) => toKey(v)).join("\0");
+    let group = groups.get(key);
+    if (group === void 0) {
+      group = { keys: keyValues, rows: [] };
+      groups.set(key, group);
+    }
+    group.rows.push(row);
+  }
+  const out = [];
+  for (const group of groups.values()) {
+    out.push(emit(group.keys, group.rows));
+  }
+  return out;
 }
 
-// src/render/dom.ts
-function setStyle(el, style) {
-  Object.assign(el.style, style);
-}
-function createDiv(className, style) {
-  const el = document.createElement("div");
-  if (className) el.className = className;
-  if (style) setStyle(el, style);
-  return el;
+// src/spec/transform/bin.ts
+function roundNice(value, step) {
+  if (!Number.isFinite(step) || step === 0) return value;
+  const places = Math.max(0, -Math.floor(Math.log10(Math.abs(step))) + 1);
+  const rounded = Number(value.toFixed(Math.min(places, 15)));
+  return Object.is(rounded, -0) ? 0 : rounded;
 }
-var fillParentStyle = {
-  position: "absolute",
-  top: "0",
-  left: "0"
-};
-
-// src/render/canvasLayer.ts
-var CanvasLayer = class {
-  constructor(canvas) {
-    __publicField(this, "canvas");
-    __publicField(this, "ctx");
-    /** Logical (CSS px) width. */
-    __publicField(this, "width", 0);
-    /** Logical (CSS px) height. */
-    __publicField(this, "height", 0);
-    __publicField(this, "dpr", 1);
-    this.canvas = canvas ?? document.createElement("canvas");
-    const ctx = this.canvas.getContext("2d");
-    if (!ctx) {
-      throw new Error("Graphein: 2D canvas context is unavailable in this environment.");
+function computeBins(values, opts = {}) {
+  let min = Infinity;
+  let max = -Infinity;
+  if (opts.extent) {
+    [min, max] = opts.extent;
+  } else {
+    for (const v of values) {
+      if (!Number.isFinite(v)) continue;
+      if (v < min) min = v;
+      if (v > max) max = v;
     }
-    this.ctx = ctx;
   }
-  /** Resize the layer to a CSS size; updates the backing store + DPR transform. */
-  resize(width, height, dpr = getDevicePixelRatio()) {
-    const b = computeBackingSize(width, height, dpr);
-    this.width = b.cssWidth;
-    this.height = b.cssHeight;
-    this.dpr = b.dpr;
-    if (this.canvas.width !== b.pixelWidth) this.canvas.width = b.pixelWidth;
-    if (this.canvas.height !== b.pixelHeight) this.canvas.height = b.pixelHeight;
-    this.canvas.style.width = `${b.cssWidth}px`;
-    this.canvas.style.height = `${b.cssHeight}px`;
-    this.ctx.setTransform(b.dpr, 0, 0, b.dpr, 0, 0);
+  if (!Number.isFinite(min) || !Number.isFinite(max)) return null;
+  const explicit = opts.step !== void 0 && opts.step > 0;
+  if (min === max) {
+    const step2 = explicit ? opts.step : 1;
+    return { start: min, step: step2, count: 1 };
   }
-  /** Clear the entire backing store regardless of the current transform. */
-  clear() {
-    const { ctx, canvas } = this;
-    ctx.save();
-    ctx.setTransform(1, 0, 0, 1, 0, 0);
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.restore();
+  const nice = opts.nice !== false;
+  let step = explicit ? opts.step : tickStep(min, max, opts.maxbins ?? 10);
+  if (!Number.isFinite(step) || step <= 0) step = max - min || 1;
+  const start = nice ? Math.floor(min / step) * step : min;
+  const end = nice ? Math.ceil(max / step) * step : max;
+  const count = Math.max(1, Math.ceil((end - start) / step - 1e-9));
+  return { start: roundNice(start, step), step, count };
+}
+function applyBin(transform2, data) {
+  const read = accessor(transform2.bin);
+  const finite4 = [];
+  for (const row of data) {
+    const n = toNumber(read(row));
+    if (Number.isFinite(n)) finite4.push(n);
+  }
+  const layout2 = computeBins(finite4, {
+    maxbins: transform2.maxbins,
+    step: transform2.step,
+    extent: transform2.extent,
+    nice: transform2.nice
+  });
+  const startField = Array.isArray(transform2.as) ? transform2.as[0] : transform2.as;
+  const endField = Array.isArray(transform2.as) ? transform2.as[1] : void 0;
+  return data.map((row) => {
+    const out = { ...row };
+    const v = toNumber(read(row));
+    const outside = transform2.extent != null && (v < transform2.extent[0] || v > transform2.extent[1]);
+    if (layout2 == null || !Number.isFinite(v) || outside) {
+      out[startField] = null;
+      if (endField) out[endField] = null;
+      return out;
+    }
+    let index = Math.floor((v - layout2.start) / layout2.step + 1e-9);
+    if (index < 0) index = 0;
+    if (index > layout2.count - 1) index = layout2.count - 1;
+    out[startField] = roundNice(layout2.start + index * layout2.step, layout2.step);
+    if (endField) out[endField] = roundNice(layout2.start + (index + 1) * layout2.step, layout2.step);
+    return out;
+  });
+}
+
+// src/spec/transform/expr/error.ts
+var ExpressionError = class extends Error {
+  constructor(message, pos) {
+    super(message);
+    /** Source offset where the problem was detected, when known. */
+    __publicField(this, "pos");
+    this.name = "ExpressionError";
+    this.pos = pos;
   }
 };
 
-// src/render/surface.ts
-var Surface = class {
-  constructor(container) {
-    __publicField(this, "container");
-    __publicField(this, "root");
-    __publicField(this, "marks");
-    __publicField(this, "interaction");
-    __publicField(this, "overlay");
-    /** Visually-hidden container for the screen-reader data-table fallback. */
-    __publicField(this, "a11y");
-    __publicField(this, "width", 0);
-    __publicField(this, "height", 0);
-    __publicField(this, "dpr", 1);
-    /**
-     * When true, overlay text (axis labels, titles, legends, annotation labels) is
-     * painted onto the `marks` canvas instead of the HTML overlay. Set by headless
-     * renderers (`@graphein/node`) where there is no DOM to host crisp text.
-     * Defaults to false (browser).
-     */
-    __publicField(this, "headless", false);
-    this.container = container;
-    this.root = createDiv("graphein-root", {
-      position: "relative",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden"
-    });
-    const marksCanvas = document.createElement("canvas");
-    marksCanvas.className = "graphein-layer-marks";
-    setStyle(marksCanvas, { ...fillParentStyle });
-    const interactionCanvas = document.createElement("canvas");
-    interactionCanvas.className = "graphein-layer-interaction";
-    setStyle(interactionCanvas, { ...fillParentStyle, pointerEvents: "none" });
-    this.overlay = createDiv("graphein-layer-overlay", {
-      ...fillParentStyle,
-      width: "100%",
-      height: "100%",
-      pointerEvents: "none"
-    });
-    this.a11y = createDiv("graphein-a11y", {
-      position: "absolute",
-      width: "1px",
-      height: "1px",
-      overflow: "hidden",
-      clip: "rect(0 0 0 0)",
-      clipPath: "inset(50%)",
-      whiteSpace: "nowrap",
-      border: "0",
-      margin: "-1px",
-      padding: "0"
-    });
-    this.root.appendChild(marksCanvas);
-    this.root.appendChild(interactionCanvas);
-    this.root.appendChild(this.overlay);
-    this.root.appendChild(this.a11y);
-    container.appendChild(this.root);
-    this.marks = new CanvasLayer(marksCanvas);
-    this.interaction = new CanvasLayer(interactionCanvas);
+// src/spec/transform/expr/tokenize.ts
+var MULTI_OPS = ["===", "!==", "==", "!=", "<=", ">=", "&&", "||"];
+var SINGLE_OPS = new Set("+-*/%!<>?:.,()[]".split(""));
+function isDigit(ch) {
+  return ch >= "0" && ch <= "9";
+}
+function isIdentStart(ch) {
+  return ch >= "a" && ch <= "z" || ch >= "A" && ch <= "Z" || ch === "_" || ch === "$";
+}
+function isIdentPart(ch) {
+  return isIdentStart(ch) || isDigit(ch);
+}
+function tokenize(src) {
+  const tokens = [];
+  let i = 0;
+  const n = src.length;
+  while (i < n) {
+    const ch = src[i];
+    if (ch === " " || ch === "	" || ch === "\n" || ch === "\r") {
+      i++;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      const start = i;
+      const quote = ch;
+      i++;
+      let out = "";
+      while (i < n && src[i] !== quote) {
+        if (src[i] === "\\") {
+          const next = src[i + 1];
+          if (next === void 0) throw new ExpressionError("Unterminated string literal.", start);
+          out += next === "n" ? "\n" : next === "t" ? "	" : next === "r" ? "\r" : next;
+          i += 2;
+        } else {
+          out += src[i];
+          i++;
+        }
+      }
+      if (i >= n) throw new ExpressionError("Unterminated string literal.", start);
+      i++;
+      tokens.push({ type: "str", value: out, pos: start });
+      continue;
+    }
+    if (isDigit(ch) || ch === "." && isDigit(src[i + 1] ?? "")) {
+      const start = i;
+      while (i < n && isDigit(src[i])) i++;
+      if (src[i] === ".") {
+        i++;
+        while (i < n && isDigit(src[i])) i++;
+      }
+      if (src[i] === "e" || src[i] === "E") {
+        i++;
+        if (src[i] === "+" || src[i] === "-") i++;
+        if (!isDigit(src[i] ?? "")) throw new ExpressionError("Malformed number literal.", start);
+        while (i < n && isDigit(src[i])) i++;
+      }
+      tokens.push({ type: "num", value: Number(src.slice(start, i)), pos: start });
+      continue;
+    }
+    if (isIdentStart(ch)) {
+      const start = i;
+      i++;
+      while (i < n && isIdentPart(src[i])) i++;
+      tokens.push({ type: "ident", value: src.slice(start, i), pos: start });
+      continue;
+    }
+    const three = src.slice(i, i + 3);
+    const two = src.slice(i, i + 2);
+    const multi = MULTI_OPS.find((op) => op === three) ?? MULTI_OPS.find((op) => op === two);
+    if (multi) {
+      tokens.push({ type: "op", value: multi, pos: i });
+      i += multi.length;
+      continue;
+    }
+    if (SINGLE_OPS.has(ch)) {
+      tokens.push({ type: "op", value: ch, pos: i });
+      i++;
+      continue;
+    }
+    throw new ExpressionError(`Unexpected character ${JSON.stringify(ch)}.`, i);
   }
-  resize(width, height, dpr = getDevicePixelRatio()) {
-    this.width = width;
-    this.height = height;
-    this.dpr = dpr;
-    this.marks.resize(width, height, dpr);
-    this.interaction.resize(width, height, dpr);
-    setStyle(this.overlay, { width: `${width}px`, height: `${height}px` });
+  tokens.push({ type: "eof", value: "", pos: n });
+  return tokens;
+}
+
+// src/spec/transform/expr/parse.ts
+var EQUALITY = /* @__PURE__ */ new Set(["==", "!=", "===", "!=="]);
+var RELATIONAL = /* @__PURE__ */ new Set(["<", "<=", ">", ">="]);
+var ADDITIVE = /* @__PURE__ */ new Set(["+", "-"]);
+var MULTIPLICATIVE = /* @__PURE__ */ new Set(["*", "/", "%"]);
+var Parser = class {
+  constructor(tokens) {
+    __publicField(this, "tokens");
+    __publicField(this, "pos", 0);
+    this.tokens = tokens;
   }
-  /** Clear both canvas layers and empty the HTML overlay. */
-  clear() {
-    this.marks.clear();
-    this.interaction.clear();
-    this.overlay.replaceChildren();
+  peek() {
+    return this.tokens[this.pos];
   }
-  /** Remove all DOM created by this Surface. */
-  destroy() {
-    this.clear();
-    this.root.remove();
+  next() {
+    return this.tokens[this.pos++];
   }
-};
-
-// src/render/overlayText.ts
-function paintCanvasText(ctx, c) {
-  const align = c.align ?? "left";
-  const baseline = c.baseline ?? "top";
-  ctx.save();
-  if (c.opacity != null) ctx.globalAlpha *= c.opacity;
-  if (c.rotate) {
-    ctx.translate(c.x, c.y);
-    ctx.rotate(c.rotate);
-    ctx.translate(-c.x, -c.y);
+  isOp(value) {
+    const t = this.peek();
+    return t.type === "op" && t.value === value;
   }
-  ctx.font = c.font;
-  ctx.textAlign = align;
-  ctx.textBaseline = baseline;
-  if (c.pill) {
-    const padX = c.pill.padX ?? 7;
-    const padY = c.pill.padY ?? 2;
-    const tw = ctx.measureText(c.text).width;
-    const th = c.size;
-    let bx = c.x;
-    if (align === "center") bx = c.x - tw / 2;
-    else if (align === "right") bx = c.x - tw;
-    let by = c.y;
-    if (baseline === "middle") by = c.y - th / 2;
-    else if (baseline === "alphabetic") by = c.y - th;
-    ctx.beginPath();
-    roundedRect(ctx, bx - padX, by - padY, tw + padX * 2, th + padY * 2, c.pill.radius ?? 999);
-    ctx.fillStyle = c.pill.background;
-    ctx.fill();
-    if (c.pill.border) {
-      ctx.lineWidth = 1;
-      ctx.strokeStyle = c.pill.border;
-      ctx.stroke();
+  eat(value) {
+    if (!this.isOp(value)) {
+      const t = this.peek();
+      throw new ExpressionError(`Expected "${value}" but found ${describe(t)}.`, t.pos);
     }
+    this.pos++;
   }
-  ctx.fillStyle = c.color;
-  ctx.fillText(c.text, c.x, c.y);
-  ctx.restore();
-}
-function overlayTextToCanvasCmd(o, font) {
-  const t = o.transform ?? "";
-  const rotate = t.includes("rotate(-90deg)") ? -Math.PI / 2 : t.includes("rotate(90deg)") ? Math.PI / 2 : (() => {
-    const m = t.match(/rotate\((-?\d+(?:\.\d+)?)deg\)/);
-    return m ? parseFloat(m[1]) * Math.PI / 180 : void 0;
-  })();
-  let align = "left";
-  let x = o.left;
-  const y = o.top;
-  if (o.width != null) {
-    align = o.align ?? "left";
-    x = align === "right" ? o.left + o.width : align === "center" ? o.left + o.width / 2 : o.left;
-  } else if (t.includes("translateX(-100%)")) {
-    align = "right";
-  } else if (t.includes("translateX(-50%)") || t.includes("translate(-50%")) {
-    align = "center";
+  parse() {
+    const node = this.parseTernary();
+    const t = this.peek();
+    if (t.type !== "eof") throw new ExpressionError(`Unexpected ${describe(t)}.`, t.pos);
+    return node;
   }
-  const baseline = t.includes("translateY(-50%)") || t.includes(",-50%") || t.includes(", -50%") ? "middle" : "top";
-  return {
-    x,
-    y,
-    text: o.text,
-    font,
-    color: o.color,
-    size: o.size,
-    align,
-    baseline,
-    rotate,
-    opacity: o.opacity,
-    pill: o.pill
-  };
-}
-function legendSwatchWidth(symbol, swatch = 11) {
-  return symbol === "line" ? swatch + 3 : swatch;
-}
-function paintLegendSwatch(ctx, x, midY, symbol, color, swatch = 11) {
-  ctx.save();
-  ctx.fillStyle = color;
-  ctx.beginPath();
-  if (symbol === "circle") {
-    ctx.arc(x + swatch / 2, midY, swatch / 2, 0, Math.PI * 2);
-  } else if (symbol === "line") {
-    roundedRect(ctx, x, midY - 1.5, swatch + 3, 3, 1.5);
-  } else {
-    roundedRect(ctx, x, midY - swatch / 2, swatch, swatch, 2);
+  parseTernary() {
+    const test = this.parseBinary(0);
+    if (this.isOp("?")) {
+      this.eat("?");
+      const then = this.parseTernary();
+      this.eat(":");
+      const alt = this.parseTernary();
+      return { type: "ternary", test, then, alt };
+    }
+    return test;
   }
-  ctx.fill();
-  ctx.restore();
-}
-
-// src/render/text.ts
-var measureCtx;
-var injectedCtx = null;
-function setMeasureContext(ctx) {
-  injectedCtx = ctx;
-}
-function getMeasureCtx() {
-  if (injectedCtx) return injectedCtx;
-  if (measureCtx !== void 0) return measureCtx;
-  try {
-    measureCtx = document.createElement("canvas").getContext("2d");
-  } catch {
-    measureCtx = null;
+  /** Precedence-climbing for the binary/logical operator levels. */
+  parseBinary(minLevel) {
+    let left = this.parseUnary();
+    for (; ; ) {
+      const t = this.peek();
+      if (t.type !== "op") break;
+      const level = binaryLevel(t.value);
+      if (level < minLevel || level < 0) break;
+      this.next();
+      const right = this.parseBinary(level + 1);
+      const op = t.value;
+      left = op === "&&" || op === "||" ? { type: "logical", op, left, right } : { type: "binary", op, left, right };
+    }
+    return left;
   }
-  return measureCtx;
-}
-function measureText(text, font) {
-  const ctx = getMeasureCtx();
-  if (!ctx) {
-    const sizeMatch = /(\d+(?:\.\d+)?)px/.exec(font);
-    const size = sizeMatch ? parseFloat(sizeMatch[1]) : 12;
-    return { width: text.length * size * 0.55 };
+  parseUnary() {
+    const t = this.peek();
+    if (t.type === "op" && (t.value === "!" || t.value === "-" || t.value === "+")) {
+      this.next();
+      return { type: "unary", op: t.value, arg: this.parseUnary() };
+    }
+    return this.parsePostfix();
   }
-  ctx.font = font;
-  return { width: ctx.measureText(text).width };
-}
-function fontString(size, family, weight = 400, style = "normal") {
-  return `${style} ${weight} ${size}px ${family}`;
-}
-function ellipsize(text, maxWidth, font) {
-  if (maxWidth <= 0 || text.length === 0) return "";
-  if (measureText(text, font).width <= maxWidth) return text;
-  const ellipsis = "\u2026";
-  const ellipsisW = measureText(ellipsis, font).width;
-  if (ellipsisW > maxWidth) return "";
-  let lo = 0;
-  let hi = text.length;
-  while (lo < hi) {
-    const mid = Math.ceil((lo + hi) / 2);
-    if (measureText(text.slice(0, mid) + ellipsis, font).width <= maxWidth) lo = mid;
-    else hi = mid - 1;
+  parsePostfix() {
+    let node = this.parsePrimary();
+    for (; ; ) {
+      if (this.isOp(".")) {
+        this.eat(".");
+        const t = this.next();
+        if (t.type !== "ident") throw new ExpressionError(`Expected a property name after ".".`, t.pos);
+        node = { type: "member", obj: node, prop: { type: "str", value: t.value }, computed: false };
+      } else if (this.isOp("[")) {
+        this.eat("[");
+        const prop = this.parseTernary();
+        this.eat("]");
+        node = { type: "member", obj: node, prop, computed: true };
+      } else {
+        break;
+      }
+    }
+    return node;
   }
-  return text.slice(0, lo) + ellipsis;
-}
-
-// src/theme/tokens.ts
-var PALETTE = [
-  "#3b82f6",
-  // blue
-  "#14b8a6",
-  // teal
-  "#f59e0b",
-  // amber
-  "#ef4444",
-  // red
-  "#8b5cf6",
-  // violet
-  "#ec4899",
-  // pink
-  "#10b981",
-  // emerald
-  "#f97316",
-  // orange
-  "#6366f1",
-  // indigo
-  "#84cc16"
-  // lime
-];
-var FONT_FAMILY = 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
-var SHARED = {
-  font: {
-    family: FONT_FAMILY,
-    size: { tiny: 10, small: 11, base: 12, large: 14, title: 16 },
-    weight: { normal: 400, medium: 500, bold: 600 }
-  },
-  spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 },
-  radius: { sm: 4, md: 6, lg: 8 },
-  stroke: { thin: 1, base: 1.5, thick: 2 }
-};
-var lightTheme = {
-  name: "light",
-  dark: false,
-  color: {
-    background: "#ffffff",
-    surface: "#f8fafc",
-    text: "#0f172a",
-    textMuted: "#64748b",
-    axis: "#cbd5e1",
-    grid: "#eef2f6",
-    border: "#e2e8f0",
-    accent: "#0d9488",
-    palette: PALETTE,
-    positive: "#16a34a",
-    negative: "#dc2626"
-  },
-  ...SHARED
-};
-var darkTheme = {
-  name: "dark",
-  dark: true,
-  color: {
-    background: "#0b1220",
-    surface: "#111a2e",
-    text: "#f1f5f9",
-    textMuted: "#94a3b8",
-    axis: "#334155",
-    grid: "#1c2740",
-    border: "#1e293b",
-    accent: "#2dd4bf",
-    palette: PALETTE,
-    positive: "#22c55e",
-    negative: "#f87171"
-  },
-  ...SHARED
-};
-var themes = {
-  light: lightTheme,
-  dark: darkTheme
-};
-function isPlainObject(v) {
-  return typeof v === "object" && v !== null && !Array.isArray(v);
-}
-function deepMerge(base, override) {
-  if (!isPlainObject(override)) return base;
-  if (!isPlainObject(base)) return override;
-  const out = { ...base };
-  for (const [key, value] of Object.entries(override)) {
-    const baseValue = out[key];
-    if (isPlainObject(baseValue) && isPlainObject(value)) {
-      out[key] = deepMerge(baseValue, value);
-    } else {
-      out[key] = value;
+  parsePrimary() {
+    const t = this.next();
+    if (t.type === "num") return { type: "num", value: t.value };
+    if (t.type === "str") return { type: "str", value: t.value };
+    if (t.type === "ident") {
+      const name = t.value;
+      if (name === "true") return { type: "lit", value: true };
+      if (name === "false") return { type: "lit", value: false };
+      if (name === "null") return { type: "lit", value: null };
+      if (this.isOp("(")) {
+        this.eat("(");
+        const args = [];
+        if (!this.isOp(")")) {
+          args.push(this.parseTernary());
+          while (this.isOp(",")) {
+            this.eat(",");
+            args.push(this.parseTernary());
+          }
+        }
+        this.eat(")");
+        return { type: "call", callee: name, args };
+      }
+      if (name === "datum") return { type: "datum" };
+      return { type: "field", name };
     }
+    if (t.type === "op" && t.value === "(") {
+      const node = this.parseTernary();
+      this.eat(")");
+      return node;
+    }
+    throw new ExpressionError(`Unexpected ${describe(t)}.`, t.pos);
   }
-  return out;
+};
+function binaryLevel(op) {
+  if (op === "||") return 1;
+  if (op === "&&") return 2;
+  if (EQUALITY.has(op)) return 3;
+  if (RELATIONAL.has(op)) return 4;
+  if (ADDITIVE.has(op)) return 5;
+  if (MULTIPLICATIVE.has(op)) return 6;
+  return -1;
 }
-function resolveTheme(theme) {
-  if (theme == null) return lightTheme;
-  if (typeof theme === "string") return themes[theme] ?? lightTheme;
-  const baseName = theme.base ?? (theme.dark ? "dark" : "light");
-  const base = themes[baseName] ?? lightTheme;
-  const { base: _ignored, ...override } = theme;
-  return deepMerge(base, override);
+function describe(t) {
+  if (t.type === "eof") return "end of input";
+  if (t.type === "str") return `string ${JSON.stringify(t.value)}`;
+  if (t.type === "num") return `number ${t.value}`;
+  return `"${t.value}"`;
+}
+function parse(src) {
+  if (typeof src !== "string" || src.trim() === "") {
+    throw new ExpressionError("Expression must be a non-empty string.", 0);
+  }
+  return new Parser(tokenize(src)).parse();
 }
 
-// src/theme/sketch.ts
-var SKETCH_FONT_NAME = "Patrick Hand";
-var SKETCH_FONT_FAMILY = `'Patrick Hand', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', ui-rounded, cursive`;
-var injected = false;
-function injectViaStyle(dataUrl) {
-  const style = document.createElement("style");
-  style.setAttribute("data-graphein-sketch-font", "");
-  style.textContent = `@font-face{font-family:'${SKETCH_FONT_NAME}';font-style:normal;font-weight:400;font-display:swap;src:url("${dataUrl}") format("woff2");}`;
-  document.head.appendChild(style);
+// src/spec/transform/expr/evaluate.ts
+var BLOCKED_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+function truthy(v) {
+  if (typeof v === "number") return v !== 0 && !Number.isNaN(v);
+  return Boolean(v);
 }
-async function ensureSketchFont() {
-  if (injected) return false;
-  if (typeof document === "undefined") return false;
-  injected = true;
-  try {
-    const { PATRICK_HAND_DATA_URL } = await import('./patrickHand-ITDQJJE2.js');
-    const docFonts = document.fonts;
-    if (typeof FontFace !== "undefined" && docFonts?.add) {
-      const face = new FontFace(
-        SKETCH_FONT_NAME,
-        `url("${PATRICK_HAND_DATA_URL}") format("woff2")`,
-        { style: "normal", weight: "400" }
-      );
-      await face.load();
-      docFonts.add(face);
-      return true;
-    }
-    injectViaStyle(PATRICK_HAND_DATA_URL);
-    return true;
-  } catch {
-    injected = false;
-    return false;
-  }
+function toStr(v) {
+  if (v == null) return "";
+  if (v instanceof Date) return v.toISOString();
+  return String(v);
 }
-function withSketchFont(tokens) {
-  return {
-    ...tokens,
-    font: {
-      ...tokens.font,
-      family: `${SKETCH_FONT_FAMILY}`
-    }
-  };
+function looseEquals(a, b) {
+  if (a == null || b == null) return a == null && b == null;
+  const na = toNumber(a);
+  const nb = toNumber(b);
+  if (Number.isFinite(na) && Number.isFinite(nb)) return na === nb;
+  return toStr(a) === toStr(b);
 }
-
-// src/spec/types.ts
-var SLICER_TYPES = [
-  "dropdown",
-  "search",
-  "list",
-  "range",
-  "dateRange"
-];
-var CHART_TYPES = [
-  "line",
-  "area",
-  "bar",
-  "scatter",
-  "combo",
-  "histogram",
-  "pie",
-  "heatmap",
-  "funnel",
-  "kpi",
-  "treemap",
-  "gauge",
-  "bullet",
-  "calendarHeatmap",
-  "waterfall",
-  "slope",
-  "dumbbell",
-  "table",
-  "matrix",
-  "box",
-  "sankey",
-  "choropleth",
-  "dropdown",
-  "search",
-  "list",
-  "range",
-  "dateRange"
-];
-
-// src/spec/transform/types.ts
-var TRANSFORM_KINDS = ["aggregate", "bin", "filter", "fold", "timeUnit", "calculate"];
-var TIME_UNITS = [
-  "year",
-  "quarter",
-  "month",
-  "week",
-  "day",
-  "hour",
-  "minute",
-  "second"
-];
-
-// src/spec/transform/aggregate.ts
-function applyAggregate(transform2, data) {
-  const groupby = transform2.groupby ?? [];
-  const reads = groupby.map((f) => accessor(f));
-  const emit = (keyValues, rows) => {
-    const out2 = {};
-    groupby.forEach((field, i) => {
-      out2[field] = keyValues[i];
-    });
-    for (const agg of transform2.aggregate) {
-      const values = agg.field === void 0 ? rows : rows.map((r) => r[agg.field]);
-      out2[agg.as] = aggregateValues(values, agg.op);
+function compare(a, b) {
+  const na = toNumber(a);
+  const nb = toNumber(b);
+  if (Number.isFinite(na) && Number.isFinite(nb)) return na < nb ? -1 : na > nb ? 1 : 0;
+  const sa = toStr(a);
+  const sb = toStr(b);
+  return sa < sb ? -1 : sa > sb ? 1 : 0;
+}
+var nums = (args) => args.map(toNumber);
+var FUNCTIONS = {
+  abs: (a) => Math.abs(toNumber(a[0])),
+  round: (a) => {
+    const d = a.length > 1 ? Math.trunc(toNumber(a[1])) : 0;
+    const f = 10 ** d;
+    return Math.round(toNumber(a[0]) * f) / f;
+  },
+  floor: (a) => Math.floor(toNumber(a[0])),
+  ceil: (a) => Math.ceil(toNumber(a[0])),
+  trunc: (a) => Math.trunc(toNumber(a[0])),
+  sign: (a) => Math.sign(toNumber(a[0])),
+  sqrt: (a) => Math.sqrt(toNumber(a[0])),
+  exp: (a) => Math.exp(toNumber(a[0])),
+  log: (a) => Math.log(toNumber(a[0])),
+  log10: (a) => Math.log10(toNumber(a[0])),
+  log2: (a) => Math.log2(toNumber(a[0])),
+  pow: (a) => toNumber(a[0]) ** toNumber(a[1]),
+  min: (a) => Math.min(...nums(a)),
+  max: (a) => Math.max(...nums(a)),
+  number: (a) => toNumber(a[0]),
+  isFinite: (a) => Number.isFinite(toNumber(a[0])),
+  isNaN: (a) => Number.isNaN(toNumber(a[0])),
+  str: (a) => toStr(a[0]),
+  lower: (a) => toStr(a[0]).toLowerCase(),
+  upper: (a) => toStr(a[0]).toUpperCase(),
+  trim: (a) => toStr(a[0]).trim(),
+  length: (a) => Array.isArray(a[0]) ? a[0].length : toStr(a[0]).length,
+  substring: (a) => {
+    const s = toStr(a[0]);
+    const start = Math.trunc(toNumber(a[1]));
+    return a.length > 2 ? s.substring(start, Math.trunc(toNumber(a[2]))) : s.substring(start);
+  },
+  replace: (a) => toStr(a[0]).split(toStr(a[1])).join(toStr(a[2])),
+  contains: (a) => toStr(a[0]).includes(toStr(a[1])),
+  startsWith: (a) => toStr(a[0]).startsWith(toStr(a[1])),
+  endsWith: (a) => toStr(a[0]).endsWith(toStr(a[1])),
+  concat: (a) => a.map(toStr).join(""),
+  coalesce: (a) => a.find((v) => v != null),
+  if: (a) => truthy(a[0]) ? a[1] : a[2],
+  year: (a) => toDate(a[0])?.getFullYear() ?? NaN,
+  month: (a) => {
+    const d = toDate(a[0]);
+    return d ? d.getMonth() + 1 : NaN;
+  },
+  day: (a) => toDate(a[0])?.getDate() ?? NaN,
+  hours: (a) => toDate(a[0])?.getHours() ?? NaN,
+  minutes: (a) => toDate(a[0])?.getMinutes() ?? NaN
+};
+var FUNCTION_NAMES = Object.keys(FUNCTIONS);
+function evalNode(node, row) {
+  switch (node.type) {
+    case "num":
+    case "str":
+    case "lit":
+      return node.value;
+    case "datum":
+      return row;
+    case "field":
+      return row[node.name];
+    case "unary": {
+      const v = evalNode(node.arg, row);
+      if (node.op === "!") return !truthy(v);
+      if (node.op === "-") return -toNumber(v);
+      return toNumber(v);
     }
-    return out2;
-  };
-  if (groupby.length === 0) {
-    return [emit([], data)];
-  }
-  const groups = /* @__PURE__ */ new Map();
-  for (const row of data) {
-    const keyValues = reads.map((read) => read(row));
-    const key = keyValues.map((v) => toKey(v)).join("\0");
-    let group = groups.get(key);
-    if (group === void 0) {
-      group = { keys: keyValues, rows: [] };
-      groups.set(key, group);
+    case "logical": {
+      const left = evalNode(node.left, row);
+      if (node.op === "&&") return truthy(left) ? evalNode(node.right, row) : left;
+      return truthy(left) ? left : evalNode(node.right, row);
+    }
+    case "ternary":
+      return truthy(evalNode(node.test, row)) ? evalNode(node.then, row) : evalNode(node.alt, row);
+    case "binary":
+      return evalBinary(node.op, evalNode(node.left, row), evalNode(node.right, row));
+    case "member": {
+      const obj = evalNode(node.obj, row);
+      if (obj == null || typeof obj !== "object") return void 0;
+      const key = node.computed ? toStr(evalNode(node.prop, row)) : node.prop.value;
+      if (BLOCKED_KEYS.has(key)) return void 0;
+      return obj[key];
+    }
+    case "call": {
+      const fn = Object.prototype.hasOwnProperty.call(FUNCTIONS, node.callee) ? FUNCTIONS[node.callee] : void 0;
+      if (!fn) throw new ExpressionError(`Unknown function "${node.callee}".`);
+      return fn(node.args.map((a) => evalNode(a, row)));
     }
-    group.rows.push(row);
   }
-  const out = [];
-  for (const group of groups.values()) {
-    out.push(emit(group.keys, group.rows));
+}
+function evalBinary(op, a, b) {
+  switch (op) {
+    case "+":
+      return typeof a === "string" || typeof b === "string" ? toStr(a) + toStr(b) : toNumber(a) + toNumber(b);
+    case "-":
+      return toNumber(a) - toNumber(b);
+    case "*":
+      return toNumber(a) * toNumber(b);
+    case "/":
+      return toNumber(a) / toNumber(b);
+    case "%":
+      return toNumber(a) % toNumber(b);
+    case "<":
+      return compare(a, b) < 0;
+    case "<=":
+      return compare(a, b) <= 0;
+    case ">":
+      return compare(a, b) > 0;
+    case ">=":
+      return compare(a, b) >= 0;
+    case "==":
+      return looseEquals(a, b);
+    case "!=":
+      return !looseEquals(a, b);
+    case "===":
+      return a === b;
+    case "!==":
+      return a !== b;
+    default:
+      throw new ExpressionError(`Unknown operator "${op}".`);
   }
-  return out;
+}
+function evaluate(node, row) {
+  return evalNode(node, row);
 }
 
-// src/spec/transform/bin.ts
-function roundNice(value, step) {
-  if (!Number.isFinite(step) || step === 0) return value;
-  const places = Math.max(0, -Math.floor(Math.log10(Math.abs(step))) + 1);
-  const rounded = Number(value.toFixed(Math.min(places, 15)));
-  return Object.is(rounded, -0) ? 0 : rounded;
+// src/spec/transform/expr/index.ts
+function compileExpression(src) {
+  const ast = parse(src);
+  return (row) => evaluate(ast, row);
 }
-function computeBins(values, opts = {}) {
-  let min = Infinity;
-  let max = -Infinity;
-  if (opts.extent) {
-    [min, max] = opts.extent;
-  } else {
-    for (const v of values) {
-      if (!Number.isFinite(v)) continue;
-      if (v < min) min = v;
-      if (v > max) max = v;
-    }
-  }
-  if (!Number.isFinite(min) || !Number.isFinite(max)) return null;
-  const explicit = opts.step !== void 0 && opts.step > 0;
-  if (min === max) {
-    const step2 = explicit ? opts.step : 1;
-    return { start: min, step: step2, count: 1 };
+function checkExpression(src) {
+  try {
+    parse(src);
+    return null;
+  } catch (e) {
+    if (e instanceof ExpressionError) return { message: e.message, pos: e.pos };
+    throw e;
   }
-  const nice = opts.nice !== false;
-  let step = explicit ? opts.step : tickStep(min, max, opts.maxbins ?? 10);
-  if (!Number.isFinite(step) || step <= 0) step = max - min || 1;
-  const start = nice ? Math.floor(min / step) * step : min;
-  const end = nice ? Math.ceil(max / step) * step : max;
-  const count = Math.max(1, Math.ceil((end - start) / step - 1e-9));
-  return { start: roundNice(start, step), step, count };
 }
-function applyBin(transform2, data) {
-  const read = accessor(transform2.bin);
-  const finite4 = [];
-  for (const row of data) {
-    const n = toNumber(read(row));
-    if (Number.isFinite(n)) finite4.push(n);
-  }
-  const layout2 = computeBins(finite4, {
-    maxbins: transform2.maxbins,
-    step: transform2.step,
-    extent: transform2.extent,
-    nice: transform2.nice
-  });
-  const startField = Array.isArray(transform2.as) ? transform2.as[0] : transform2.as;
-  const endField = Array.isArray(transform2.as) ? transform2.as[1] : void 0;
-  return data.map((row) => {
-    const out = { ...row };
-    const v = toNumber(read(row));
-    const outside = transform2.extent != null && (v < transform2.extent[0] || v > transform2.extent[1]);
-    if (layout2 == null || !Number.isFinite(v) || outside) {
-      out[startField] = null;
-      if (endField) out[endField] = null;
-      return out;
-    }
-    let index = Math.floor((v - layout2.start) / layout2.step + 1e-9);
-    if (index < 0) index = 0;
-    if (index > layout2.count - 1) index = layout2.count - 1;
-    out[startField] = roundNice(layout2.start + index * layout2.step, layout2.step);
-    if (endField) out[endField] = roundNice(layout2.start + (index + 1) * layout2.step, layout2.step);
-    return out;
-  });
-}
-
-// src/spec/transform/expr/error.ts
-var ExpressionError = class extends Error {
-  constructor(message, pos) {
-    super(message);
-    /** Source offset where the problem was detected, when known. */
-    __publicField(this, "pos");
-    this.name = "ExpressionError";
-    this.pos = pos;
-  }
-};
 
-// src/spec/transform/expr/tokenize.ts
-var MULTI_OPS = ["===", "!==", "==", "!=", "<=", ">=", "&&", "||"];
-var SINGLE_OPS = new Set("+-*/%!<>?:.,()[]".split(""));
-function isDigit(ch) {
-  return ch >= "0" && ch <= "9";
-}
-function isIdentStart(ch) {
-  return ch >= "a" && ch <= "z" || ch >= "A" && ch <= "Z" || ch === "_" || ch === "$";
-}
-function isIdentPart(ch) {
-  return isIdentStart(ch) || isDigit(ch);
-}
-function tokenize(src) {
-  const tokens = [];
-  let i = 0;
-  const n = src.length;
-  while (i < n) {
-    const ch = src[i];
-    if (ch === " " || ch === "	" || ch === "\n" || ch === "\r") {
-      i++;
-      continue;
-    }
-    if (ch === '"' || ch === "'") {
-      const start = i;
-      const quote = ch;
-      i++;
-      let out = "";
-      while (i < n && src[i] !== quote) {
-        if (src[i] === "\\") {
-          const next = src[i + 1];
-          if (next === void 0) throw new ExpressionError("Unterminated string literal.", start);
-          out += next === "n" ? "\n" : next === "t" ? "	" : next === "r" ? "\r" : next;
-          i += 2;
-        } else {
-          out += src[i];
-          i++;
-        }
-      }
-      if (i >= n) throw new ExpressionError("Unterminated string literal.", start);
-      i++;
-      tokens.push({ type: "str", value: out, pos: start });
-      continue;
-    }
-    if (isDigit(ch) || ch === "." && isDigit(src[i + 1] ?? "")) {
-      const start = i;
-      while (i < n && isDigit(src[i])) i++;
-      if (src[i] === ".") {
-        i++;
-        while (i < n && isDigit(src[i])) i++;
-      }
-      if (src[i] === "e" || src[i] === "E") {
-        i++;
-        if (src[i] === "+" || src[i] === "-") i++;
-        if (!isDigit(src[i] ?? "")) throw new ExpressionError("Malformed number literal.", start);
-        while (i < n && isDigit(src[i])) i++;
-      }
-      tokens.push({ type: "num", value: Number(src.slice(start, i)), pos: start });
-      continue;
-    }
-    if (isIdentStart(ch)) {
-      const start = i;
-      i++;
-      while (i < n && isIdentPart(src[i])) i++;
-      tokens.push({ type: "ident", value: src.slice(start, i), pos: start });
-      continue;
-    }
-    const three = src.slice(i, i + 3);
-    const two = src.slice(i, i + 2);
-    const multi = MULTI_OPS.find((op) => op === three) ?? MULTI_OPS.find((op) => op === two);
-    if (multi) {
-      tokens.push({ type: "op", value: multi, pos: i });
-      i += multi.length;
-      continue;
-    }
-    if (SINGLE_OPS.has(ch)) {
-      tokens.push({ type: "op", value: ch, pos: i });
-      i++;
-      continue;
-    }
-    throw new ExpressionError(`Unexpected character ${JSON.stringify(ch)}.`, i);
-  }
-  tokens.push({ type: "eof", value: "", pos: n });
-  return tokens;
+// src/spec/transform/calculate.ts
+function applyCalculate(transform2, data) {
+  const evalRow = compileExpression(transform2.calculate);
+  const as = transform2.as;
+  return data.map((row) => ({ ...row, [as]: evalRow(row) }));
 }
 
-// src/spec/transform/expr/parse.ts
-var EQUALITY = /* @__PURE__ */ new Set(["==", "!=", "===", "!=="]);
-var RELATIONAL = /* @__PURE__ */ new Set(["<", "<=", ">", ">="]);
-var ADDITIVE = /* @__PURE__ */ new Set(["+", "-"]);
-var MULTIPLICATIVE = /* @__PURE__ */ new Set(["*", "/", "%"]);
-var Parser = class {
-  constructor(tokens) {
-    __publicField(this, "tokens");
-    __publicField(this, "pos", 0);
-    this.tokens = tokens;
+// src/spec/transform/filter.ts
+function toComparable(value) {
+  if (typeof value === "number") return value;
+  if (value instanceof Date) return value.getTime();
+  const n = toNumber(value);
+  if (!Number.isNaN(n)) return n;
+  const d = toDate(value);
+  return d ? d.getTime() : NaN;
+}
+function compilePredicate(pred) {
+  if ("and" in pred) {
+    const parts = pred.and.map(compilePredicate);
+    return (row) => parts.every((p) => p(row));
   }
-  peek() {
-    return this.tokens[this.pos];
+  if ("or" in pred) {
+    const parts = pred.or.map(compilePredicate);
+    return (row) => parts.some((p) => p(row));
   }
-  next() {
-    return this.tokens[this.pos++];
+  if ("not" in pred) {
+    const inner = compilePredicate(pred.not);
+    return (row) => !inner(row);
   }
-  isOp(value) {
-    const t = this.peek();
-    return t.type === "op" && t.value === value;
+  const read = accessor(pred.field);
+  if ("equals" in pred) {
+    const want = toKey(pred.equals);
+    return (row) => toKey(read(row)) === want;
   }
-  eat(value) {
-    if (!this.isOp(value)) {
-      const t = this.peek();
-      throw new ExpressionError(`Expected "${value}" but found ${describe(t)}.`, t.pos);
-    }
-    this.pos++;
+  if ("ne" in pred) {
+    const want = toKey(pred.ne);
+    return (row) => toKey(read(row)) !== want;
   }
-  parse() {
-    const node = this.parseTernary();
-    const t = this.peek();
-    if (t.type !== "eof") throw new ExpressionError(`Unexpected ${describe(t)}.`, t.pos);
-    return node;
+  if ("oneOf" in pred) {
+    const want = new Set(pred.oneOf.map((x) => toKey(x)));
+    return (row) => want.has(toKey(read(row)));
   }
-  parseTernary() {
-    const test = this.parseBinary(0);
-    if (this.isOp("?")) {
-      this.eat("?");
-      const then = this.parseTernary();
-      this.eat(":");
-      const alt = this.parseTernary();
-      return { type: "ternary", test, then, alt };
-    }
-    return test;
+  if ("contains" in pred) {
+    const q = String(pred.contains).toLowerCase();
+    return (row) => {
+      const raw = read(row);
+      return raw != null && String(raw).toLowerCase().includes(q);
+    };
   }
-  /** Precedence-climbing for the binary/logical operator levels. */
-  parseBinary(minLevel) {
-    let left = this.parseUnary();
-    for (; ; ) {
-      const t = this.peek();
-      if (t.type !== "op") break;
-      const level = binaryLevel(t.value);
-      if (level < minLevel || level < 0) break;
-      this.next();
-      const right = this.parseBinary(level + 1);
-      const op = t.value;
-      left = op === "&&" || op === "||" ? { type: "logical", op, left, right } : { type: "binary", op, left, right };
-    }
-    return left;
+  if ("valid" in pred) {
+    const wantValid = pred.valid !== false;
+    return (row) => {
+      const raw = read(row);
+      const ok = raw != null && !(typeof raw === "number" && Number.isNaN(raw));
+      return ok === wantValid;
+    };
   }
-  parseUnary() {
-    const t = this.peek();
-    if (t.type === "op" && (t.value === "!" || t.value === "-" || t.value === "+")) {
-      this.next();
-      return { type: "unary", op: t.value, arg: this.parseUnary() };
-    }
-    return this.parsePostfix();
+  if ("range" in pred) {
+    const a = toComparable(pred.range[0]);
+    const b = toComparable(pred.range[1]);
+    const min = Math.min(a, b);
+    const max = Math.max(a, b);
+    return (row) => {
+      const c = toComparable(read(row));
+      return !Number.isNaN(c) && c >= min && c <= max;
+    };
   }
-  parsePostfix() {
-    let node = this.parsePrimary();
-    for (; ; ) {
-      if (this.isOp(".")) {
-        this.eat(".");
-        const t = this.next();
-        if (t.type !== "ident") throw new ExpressionError(`Expected a property name after ".".`, t.pos);
-        node = { type: "member", obj: node, prop: { type: "str", value: t.value }, computed: false };
-      } else if (this.isOp("[")) {
-        this.eat("[");
-        const prop = this.parseTernary();
-        this.eat("]");
-        node = { type: "member", obj: node, prop, computed: true };
-      } else {
-        break;
-      }
-    }
-    return node;
+  if ("gt" in pred) {
+    const t = toComparable(pred.gt);
+    return (row) => {
+      const c = toComparable(read(row));
+      return !Number.isNaN(c) && c > t;
+    };
   }
-  parsePrimary() {
-    const t = this.next();
-    if (t.type === "num") return { type: "num", value: t.value };
-    if (t.type === "str") return { type: "str", value: t.value };
-    if (t.type === "ident") {
-      const name = t.value;
-      if (name === "true") return { type: "lit", value: true };
-      if (name === "false") return { type: "lit", value: false };
-      if (name === "null") return { type: "lit", value: null };
-      if (this.isOp("(")) {
-        this.eat("(");
-        const args = [];
-        if (!this.isOp(")")) {
-          args.push(this.parseTernary());
-          while (this.isOp(",")) {
-            this.eat(",");
-            args.push(this.parseTernary());
-          }
-        }
-        this.eat(")");
-        return { type: "call", callee: name, args };
-      }
-      if (name === "datum") return { type: "datum" };
-      return { type: "field", name };
-    }
-    if (t.type === "op" && t.value === "(") {
-      const node = this.parseTernary();
-      this.eat(")");
-      return node;
-    }
-    throw new ExpressionError(`Unexpected ${describe(t)}.`, t.pos);
+  if ("gte" in pred) {
+    const t = toComparable(pred.gte);
+    return (row) => {
+      const c = toComparable(read(row));
+      return !Number.isNaN(c) && c >= t;
+    };
   }
-};
-function binaryLevel(op) {
-  if (op === "||") return 1;
-  if (op === "&&") return 2;
-  if (EQUALITY.has(op)) return 3;
-  if (RELATIONAL.has(op)) return 4;
-  if (ADDITIVE.has(op)) return 5;
-  if (MULTIPLICATIVE.has(op)) return 6;
-  return -1;
+  if ("lt" in pred) {
+    const t = toComparable(pred.lt);
+    return (row) => {
+      const c = toComparable(read(row));
+      return !Number.isNaN(c) && c < t;
+    };
+  }
+  if ("lte" in pred) {
+    const t = toComparable(pred.lte);
+    return (row) => {
+      const c = toComparable(read(row));
+      return !Number.isNaN(c) && c <= t;
+    };
+  }
+  return () => false;
 }
-function describe(t) {
-  if (t.type === "eof") return "end of input";
-  if (t.type === "str") return `string ${JSON.stringify(t.value)}`;
-  if (t.type === "num") return `number ${t.value}`;
-  return `"${t.value}"`;
+function applyFilter(transform2, data) {
+  const test = compilePredicate(transform2.filter);
+  return data.filter(test);
 }
-function parse(src) {
-  if (typeof src !== "string" || src.trim() === "") {
-    throw new ExpressionError("Expression must be a non-empty string.", 0);
+
+// src/spec/transform/fold.ts
+function applyFold(transform2, data) {
+  const [keyName, valueName] = transform2.as ?? ["key", "value"];
+  const out = [];
+  for (const row of data) {
+    for (const column of transform2.fold) {
+      out.push({ ...row, [keyName]: column, [valueName]: row[column] });
+    }
   }
-  return new Parser(tokenize(src)).parse();
+  return out;
 }
 
-// src/spec/transform/expr/evaluate.ts
-var BLOCKED_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
-function truthy(v) {
-  if (typeof v === "number") return v !== 0 && !Number.isNaN(v);
-  return Boolean(v);
-}
-function toStr(v) {
-  if (v == null) return "";
-  if (v instanceof Date) return v.toISOString();
-  return String(v);
+// src/spec/transform/timeUnit.ts
+function truncateTo(date, unit) {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const day = date.getDate();
+  const hour = date.getHours();
+  const minute = date.getMinutes();
+  const second = date.getSeconds();
+  switch (unit) {
+    case "year":
+      return new Date(year, 0, 1);
+    case "quarter":
+      return new Date(year, Math.floor(month / 3) * 3, 1);
+    case "month":
+      return new Date(year, month, 1);
+    case "week": {
+      const start = new Date(year, month, day - date.getDay());
+      start.setHours(0, 0, 0, 0);
+      return start;
+    }
+    case "day":
+      return new Date(year, month, day);
+    case "hour":
+      return new Date(year, month, day, hour);
+    case "minute":
+      return new Date(year, month, day, hour, minute);
+    case "second":
+      return new Date(year, month, day, hour, minute, second);
+    default:
+      return new Date(date.getTime());
+  }
 }
-function looseEquals(a, b) {
-  if (a == null || b == null) return a == null && b == null;
-  const na = toNumber(a);
-  const nb = toNumber(b);
-  if (Number.isFinite(na) && Number.isFinite(nb)) return na === nb;
-  return toStr(a) === toStr(b);
+function applyTimeUnit(transform2, data) {
+  const read = accessor(transform2.field);
+  return data.map((row) => {
+    const date = toDate(read(row));
+    return { ...row, [transform2.as]: date ? truncateTo(date, transform2.timeUnit) : null };
+  });
 }
-function compare(a, b) {
-  const na = toNumber(a);
-  const nb = toNumber(b);
-  if (Number.isFinite(na) && Number.isFinite(nb)) return na < nb ? -1 : na > nb ? 1 : 0;
-  const sa = toStr(a);
-  const sb = toStr(b);
-  return sa < sb ? -1 : sa > sb ? 1 : 0;
+
+// src/spec/transform/apply.ts
+function applyTransform(transform2, data) {
+  if ("filter" in transform2) return applyFilter(transform2, data);
+  if ("aggregate" in transform2) return applyAggregate(transform2, data);
+  if ("bin" in transform2) return applyBin(transform2, data);
+  if ("fold" in transform2) return applyFold(transform2, data);
+  if ("timeUnit" in transform2) return applyTimeUnit(transform2, data);
+  if ("calculate" in transform2) return applyCalculate(transform2, data);
+  return data;
 }
-var nums = (args) => args.map(toNumber);
-var FUNCTIONS = {
-  abs: (a) => Math.abs(toNumber(a[0])),
-  round: (a) => {
-    const d = a.length > 1 ? Math.trunc(toNumber(a[1])) : 0;
-    const f = 10 ** d;
-    return Math.round(toNumber(a[0]) * f) / f;
-  },
-  floor: (a) => Math.floor(toNumber(a[0])),
-  ceil: (a) => Math.ceil(toNumber(a[0])),
-  trunc: (a) => Math.trunc(toNumber(a[0])),
-  sign: (a) => Math.sign(toNumber(a[0])),
-  sqrt: (a) => Math.sqrt(toNumber(a[0])),
-  exp: (a) => Math.exp(toNumber(a[0])),
-  log: (a) => Math.log(toNumber(a[0])),
-  log10: (a) => Math.log10(toNumber(a[0])),
-  log2: (a) => Math.log2(toNumber(a[0])),
-  pow: (a) => toNumber(a[0]) ** toNumber(a[1]),
-  min: (a) => Math.min(...nums(a)),
-  max: (a) => Math.max(...nums(a)),
-  number: (a) => toNumber(a[0]),
-  isFinite: (a) => Number.isFinite(toNumber(a[0])),
-  isNaN: (a) => Number.isNaN(toNumber(a[0])),
-  str: (a) => toStr(a[0]),
-  lower: (a) => toStr(a[0]).toLowerCase(),
-  upper: (a) => toStr(a[0]).toUpperCase(),
-  trim: (a) => toStr(a[0]).trim(),
-  length: (a) => Array.isArray(a[0]) ? a[0].length : toStr(a[0]).length,
-  substring: (a) => {
-    const s = toStr(a[0]);
-    const start = Math.trunc(toNumber(a[1]));
-    return a.length > 2 ? s.substring(start, Math.trunc(toNumber(a[2]))) : s.substring(start);
-  },
-  replace: (a) => toStr(a[0]).split(toStr(a[1])).join(toStr(a[2])),
-  contains: (a) => toStr(a[0]).includes(toStr(a[1])),
-  startsWith: (a) => toStr(a[0]).startsWith(toStr(a[1])),
-  endsWith: (a) => toStr(a[0]).endsWith(toStr(a[1])),
-  concat: (a) => a.map(toStr).join(""),
-  coalesce: (a) => a.find((v) => v != null),
-  if: (a) => truthy(a[0]) ? a[1] : a[2],
-  year: (a) => toDate(a[0])?.getFullYear() ?? NaN,
-  month: (a) => {
-    const d = toDate(a[0]);
-    return d ? d.getMonth() + 1 : NaN;
-  },
-  day: (a) => toDate(a[0])?.getDate() ?? NaN,
-  hours: (a) => toDate(a[0])?.getHours() ?? NaN,
-  minutes: (a) => toDate(a[0])?.getMinutes() ?? NaN
-};
-var FUNCTION_NAMES = Object.keys(FUNCTIONS);
-function evalNode(node, row) {
-  switch (node.type) {
-    case "num":
-    case "str":
-    case "lit":
-      return node.value;
-    case "datum":
-      return row;
-    case "field":
-      return row[node.name];
-    case "unary": {
-      const v = evalNode(node.arg, row);
-      if (node.op === "!") return !truthy(v);
-      if (node.op === "-") return -toNumber(v);
-      return toNumber(v);
-    }
-    case "logical": {
-      const left = evalNode(node.left, row);
-      if (node.op === "&&") return truthy(left) ? evalNode(node.right, row) : left;
-      return truthy(left) ? left : evalNode(node.right, row);
-    }
-    case "ternary":
-      return truthy(evalNode(node.test, row)) ? evalNode(node.then, row) : evalNode(node.alt, row);
-    case "binary":
-      return evalBinary(node.op, evalNode(node.left, row), evalNode(node.right, row));
-    case "member": {
-      const obj = evalNode(node.obj, row);
-      if (obj == null || typeof obj !== "object") return void 0;
-      const key = node.computed ? toStr(evalNode(node.prop, row)) : node.prop.value;
-      if (BLOCKED_KEYS.has(key)) return void 0;
-      return obj[key];
-    }
-    case "call": {
-      const fn = Object.prototype.hasOwnProperty.call(FUNCTIONS, node.callee) ? FUNCTIONS[node.callee] : void 0;
-      if (!fn) throw new ExpressionError(`Unknown function "${node.callee}".`);
-      return fn(node.args.map((a) => evalNode(a, row)));
-    }
+function applyTransforms(transforms, data) {
+  if (!transforms || transforms.length === 0) return data;
+  let out = data;
+  for (const transform2 of transforms) {
+    out = applyTransform(transform2, out);
   }
-}
-function evalBinary(op, a, b) {
-  switch (op) {
-    case "+":
-      return typeof a === "string" || typeof b === "string" ? toStr(a) + toStr(b) : toNumber(a) + toNumber(b);
-    case "-":
-      return toNumber(a) - toNumber(b);
-    case "*":
-      return toNumber(a) * toNumber(b);
-    case "/":
-      return toNumber(a) / toNumber(b);
-    case "%":
-      return toNumber(a) % toNumber(b);
-    case "<":
-      return compare(a, b) < 0;
-    case "<=":
-      return compare(a, b) <= 0;
-    case ">":
-      return compare(a, b) > 0;
-    case ">=":
-      return compare(a, b) >= 0;
-    case "==":
-      return looseEquals(a, b);
-    case "!=":
-      return !looseEquals(a, b);
-    case "===":
-      return a === b;
-    case "!==":
-      return a !== b;
-    default:
-      throw new ExpressionError(`Unknown operator "${op}".`);
-  }
-}
-function evaluate(node, row) {
-  return evalNode(node, row);
+  return out;
 }
 
-// src/spec/transform/expr/index.ts
-function compileExpression(src) {
-  const ast = parse(src);
-  return (row) => evaluate(ast, row);
+// src/spec/lint.ts
+var MAX_PIE_SLICES = 7;
+var MAX_SERIES = 12;
+var MAX_DISCRETE_AXIS = 50;
+var POSITIONAL_AXES = ["x", "y"];
+function isObject(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
 }
-function checkExpression(src) {
+function fieldDef(encoding, channel) {
+  const def = encoding?.[channel];
+  if (isObject(def) && typeof def.field === "string" && def.field !== "") return def;
+  return void 0;
+}
+function effectiveData(spec) {
+  const data = Array.isArray(spec.data) ? spec.data : [];
+  if (!("transform" in spec) || !Array.isArray(spec.transform) || spec.transform.length === 0) return data;
   try {
-    parse(src);
-    return null;
-  } catch (e) {
-    if (e instanceof ExpressionError) return { message: e.message, pos: e.pos };
-    throw e;
+    return applyTransforms(spec.transform, data);
+  } catch {
+    return data;
   }
 }
-
-// src/spec/transform/calculate.ts
-function applyCalculate(transform2, data) {
-  const evalRow = compileExpression(transform2.calculate);
-  const as = transform2.as;
-  return data.map((row) => ({ ...row, [as]: evalRow(row) }));
-}
-
-// src/spec/transform/filter.ts
-function toComparable(value) {
-  if (typeof value === "number") return value;
-  if (value instanceof Date) return value.getTime();
-  const n = toNumber(value);
-  if (!Number.isNaN(n)) return n;
-  const d = toDate(value);
-  return d ? d.getTime() : NaN;
-}
-function compilePredicate(pred) {
-  if ("and" in pred) {
-    const parts = pred.and.map(compilePredicate);
-    return (row) => parts.every((p) => p(row));
-  }
-  if ("or" in pred) {
-    const parts = pred.or.map(compilePredicate);
-    return (row) => parts.some((p) => p(row));
-  }
-  if ("not" in pred) {
-    const inner = compilePredicate(pred.not);
-    return (row) => !inner(row);
-  }
-  const read = accessor(pred.field);
-  if ("equals" in pred) {
-    const want = toKey(pred.equals);
-    return (row) => toKey(read(row)) === want;
-  }
-  if ("ne" in pred) {
-    const want = toKey(pred.ne);
-    return (row) => toKey(read(row)) !== want;
-  }
-  if ("oneOf" in pred) {
-    const want = new Set(pred.oneOf.map((x) => toKey(x)));
-    return (row) => want.has(toKey(read(row)));
+function lintSpec(spec) {
+  const findings = [];
+  const add = (rule, path, message, severity = "warning") => findings.push({ rule, path, message, severity });
+  const encoding = isObject(spec) ? spec.encoding : void 0;
+  const data = effectiveData(spec);
+  if (data.length === 0) return findings;
+  if (encoding) {
+    for (const channel of ["x", "y", "color", "series"]) {
+      const def = fieldDef(encoding, channel);
+      if (!def) continue;
+      const declared = def.type;
+      if ((declared === "nominal" || declared === "ordinal") && inferType(data, def.field) === "temporal") {
+        findings.push({
+          rule: "temporal-typed-as-categorical",
+          path: `encoding.${channel}.type`,
+          message: `Field "${def.field}" looks temporal but is typed "${declared}". Set type:"temporal" so it scales as time.`,
+          severity: "warning",
+          fix: [{ op: "replace", path: `/encoding/${channel}/type`, value: "temporal" }]
+        });
+      }
+    }
   }
-  if ("contains" in pred) {
-    const q = String(pred.contains).toLowerCase();
-    return (row) => {
-      const raw = read(row);
-      return raw != null && String(raw).toLowerCase().includes(q);
-    };
+  if (spec.type === "pie") {
+    const def = fieldDef(encoding, "color") ?? fieldDef(encoding, "theta");
+    const slices = def ? uniqueValues(data, def.field).length : data.length;
+    if (slices > MAX_PIE_SLICES) {
+      add(
+        "pie-too-many-slices",
+        "encoding.color",
+        `Pie has ${slices} slices (> ${MAX_PIE_SLICES}); proportions get hard to compare. Use a bar chart, or group small slices into "Other".`
+      );
+    }
   }
-  if ("valid" in pred) {
-    const wantValid = pred.valid !== false;
-    return (row) => {
-      const raw = read(row);
-      const ok = raw != null && !(typeof raw === "number" && Number.isNaN(raw));
-      return ok === wantValid;
-    };
+  for (const channel of ["series", "color"]) {
+    const def = fieldDef(encoding, channel);
+    if (!def) continue;
+    if (inferType(data, def.field) === "quantitative" && channel === "color") continue;
+    const count = uniqueValues(data, def.field).length;
+    if (count > MAX_SERIES) {
+      add(
+        "too-many-series",
+        `encoding.${channel}`,
+        `"${def.field}" has ${count} distinct values (> ${MAX_SERIES}); the legend/colors become hard to tell apart. Filter, group, or facet instead.`
+      );
+      break;
+    }
   }
-  if ("range" in pred) {
-    const a = toComparable(pred.range[0]);
-    const b = toComparable(pred.range[1]);
-    const min = Math.min(a, b);
-    const max = Math.max(a, b);
-    return (row) => {
-      const c = toComparable(read(row));
-      return !Number.isNaN(c) && c >= min && c <= max;
-    };
+  if (spec.type === "bar") {
+    const y = fieldDef(encoding, "y");
+    const scale = y?.scale;
+    if (scale?.zero === false) {
+      add(
+        "bar-nonzero-baseline",
+        "encoding.y.scale.zero",
+        "Bar lengths encode magnitude, so a non-zero baseline exaggerates differences. Remove scale.zero:false (bars should start at 0)."
+      );
+    } else if (Array.isArray(scale?.domain) && typeof scale.domain[0] === "number" && scale.domain[0] > 0) {
+      add(
+        "bar-nonzero-baseline",
+        "encoding.y.scale.domain",
+        `Bar y-domain starts at ${scale.domain[0]} (> 0); a truncated baseline exaggerates differences. Start the domain at 0.`
+      );
+    }
   }
-  if ("gt" in pred) {
-    const t = toComparable(pred.gt);
-    return (row) => {
-      const c = toComparable(read(row));
-      return !Number.isNaN(c) && c > t;
-    };
+  if (encoding) {
+    for (const channel of ["x", "y"]) {
+      const def = fieldDef(encoding, channel);
+      if (def?.scale?.type !== "log") continue;
+      const read = accessor(def.field);
+      const hasNonPositive = data.some((d) => {
+        const n = toNumber(read(d));
+        return Number.isFinite(n) && n <= 0;
+      });
+      if (hasNonPositive) {
+        add(
+          "log-nonpositive-data",
+          `encoding.${channel}.scale`,
+          `"${def.field}" has values \u2264 0, which a log scale cannot plot. Use a linear scale or filter non-positive values.`
+        );
+      }
+    }
   }
-  if ("gte" in pred) {
-    const t = toComparable(pred.gte);
-    return (row) => {
-      const c = toComparable(read(row));
-      return !Number.isNaN(c) && c >= t;
-    };
+  if (spec.type === "bar" || spec.type === "line" || spec.type === "area") {
+    for (const channel of POSITIONAL_AXES) {
+      const def = fieldDef(encoding, channel);
+      if (!def) continue;
+      const t = def.type ?? inferType(data, def.field);
+      const discrete = t === "nominal" || t === "ordinal" || def.scale?.type === "band" || def.scale?.type === "point";
+      if (!discrete) continue;
+      const count = uniqueValues(data, def.field).length;
+      if (count > MAX_DISCRETE_AXIS) {
+        add(
+          "high-cardinality-axis",
+          `encoding.${channel}`,
+          `"${def.field}" has ${count} categories on the ${channel}-axis (> ${MAX_DISCRETE_AXIS}); labels will be unreadable. Aggregate, filter to a top-N, or use a different chart.`
+        );
+      }
+    }
   }
-  if ("lt" in pred) {
-    const t = toComparable(pred.lt);
-    return (row) => {
-      const c = toComparable(read(row));
-      return !Number.isNaN(c) && c < t;
-    };
+  if (spec.type === "histogram") {
+    const def = fieldDef(encoding, "x");
+    if (def) {
+      const t = def.type ?? inferType(data, def.field);
+      if (t !== "quantitative") {
+        add(
+          "histogram-nonnumeric-field",
+          "encoding.x",
+          `Histogram field "${def.field}" is ${t}, not quantitative \u2014 binning needs numbers. Use a numeric field, or a bar chart for categories.`
+        );
+      }
+    }
   }
-  if ("lte" in pred) {
-    const t = toComparable(pred.lte);
-    return (row) => {
-      const c = toComparable(read(row));
-      return !Number.isNaN(c) && c <= t;
-    };
+  if (spec.type === "combo" && Array.isArray(spec.layers)) {
+    const layers = spec.layers;
+    const hasRight = layers.some((l) => isObject(l) && l.axis === "right");
+    const hasLeft = layers.some((l) => isObject(l) && l.axis !== "right");
+    if (hasRight && hasLeft) {
+      add(
+        "combo-dual-axis",
+        "layers",
+        "Dual-axis combo: a secondary y-axis can suggest correlations that are not real. Use it only for genuinely different units/scales, and label both axes clearly.",
+        "info"
+      );
+    }
   }
-  return () => false;
-}
-function applyFilter(transform2, data) {
-  const test = compilePredicate(transform2.filter);
-  return data.filter(test);
+  return findings;
 }
 
-// src/spec/transform/fold.ts
-function applyFold(transform2, data) {
-  const [keyName, valueName] = transform2.as ?? ["key", "value"];
-  const out = [];
-  for (const row of data) {
-    for (const column of transform2.fold) {
-      out.push({ ...row, [keyName]: column, [valueName]: row[column] });
+// src/spec/suggest.ts
+function levenshtein(a, b) {
+  if (a === b) return 0;
+  const m = a.length;
+  const n = b.length;
+  if (m === 0) return n;
+  if (n === 0) return m;
+  let prev = new Array(n + 1);
+  let curr = new Array(n + 1);
+  for (let j = 0; j <= n; j++) prev[j] = j;
+  for (let i = 1; i <= m; i++) {
+    curr[0] = i;
+    const ca = a.charCodeAt(i - 1);
+    for (let j = 1; j <= n; j++) {
+      const cost = ca === b.charCodeAt(j - 1) ? 0 : 1;
+      curr[j] = Math.min(prev[j] + 1, curr[j - 1] + 1, prev[j - 1] + cost);
     }
+    [prev, curr] = [curr, prev];
   }
-  return out;
+  return prev[n];
 }
-
-// src/spec/transform/timeUnit.ts
-function truncateTo(date, unit) {
-  const year = date.getFullYear();
-  const month = date.getMonth();
-  const day = date.getDate();
-  const hour = date.getHours();
-  const minute = date.getMinutes();
-  const second = date.getSeconds();
-  switch (unit) {
-    case "year":
-      return new Date(year, 0, 1);
-    case "quarter":
-      return new Date(year, Math.floor(month / 3) * 3, 1);
-    case "month":
-      return new Date(year, month, 1);
-    case "week": {
-      const start = new Date(year, month, day - date.getDay());
-      start.setHours(0, 0, 0, 0);
-      return start;
-    }
-    case "day":
-      return new Date(year, month, day);
-    case "hour":
-      return new Date(year, month, day, hour);
-    case "minute":
-      return new Date(year, month, day, hour, minute);
-    case "second":
-      return new Date(year, month, day, hour, minute, second);
-    default:
-      return new Date(date.getTime());
-  }
+function tolerance(input) {
+  return Math.max(2, Math.ceil(input.length * 0.5));
 }
-function applyTimeUnit(transform2, data) {
-  const read = accessor(transform2.field);
-  return data.map((row) => {
-    const date = toDate(read(row));
-    return { ...row, [transform2.as]: date ? truncateTo(date, transform2.timeUnit) : null };
-  });
+function rank(input, candidates) {
+  const lower = input.toLowerCase();
+  return candidates.map((value) => {
+    const lc = value.toLowerCase();
+    const distance = lc === lower ? 0 : levenshtein(lower, lc);
+    return { value, distance };
+  }).sort((a, b) => a.distance - b.distance || a.value.localeCompare(b.value));
 }
-
-// src/spec/transform/apply.ts
-function applyTransform(transform2, data) {
-  if ("filter" in transform2) return applyFilter(transform2, data);
-  if ("aggregate" in transform2) return applyAggregate(transform2, data);
-  if ("bin" in transform2) return applyBin(transform2, data);
-  if ("fold" in transform2) return applyFold(transform2, data);
-  if ("timeUnit" in transform2) return applyTimeUnit(transform2, data);
-  if ("calculate" in transform2) return applyCalculate(transform2, data);
-  return data;
+function suggestions(input, candidates, limit = 3, maxDistance = tolerance(input)) {
+  if (!input) return [];
+  return rank(input, candidates).filter((r) => r.distance <= maxDistance).slice(0, limit).map((r) => r.value);
 }
-function applyTransforms(transforms, data) {
-  if (!transforms || transforms.length === 0) return data;
-  let out = data;
-  for (const transform2 of transforms) {
-    out = applyTransform(transform2, out);
-  }
-  return out;
+function closest(input, candidates) {
+  if (!input) return void 0;
+  const ranked = rank(input, candidates);
+  if (ranked.length === 0) return void 0;
+  const best = ranked[0];
+  const bound = Math.max(2, Math.floor(input.length * 0.34));
+  if (best.distance > bound) return void 0;
+  const runnerUp = ranked[1];
+  if (runnerUp && runnerUp.distance === best.distance) return void 0;
+  return best.value;
 }
 
-// src/spec/infer.ts
-function looksTemporal2(value) {
-  if (value.length < 4) return false;
-  if (/^\d{4}(-\d{2}(-\d{2})?)?([T\s]\d{2}:\d{2})?/.test(value)) {
-    const t = Date.parse(value);
-    return !Number.isNaN(t);
+// src/spec/jsonpatch.ts
+function clone(value) {
+  if (value === null || typeof value !== "object") return value;
+  if (value instanceof Date) return new Date(value.getTime());
+  if (Array.isArray(value)) return value.map((v) => clone(v));
+  const out = {};
+  for (const key of Object.keys(value)) {
+    out[key] = clone(value[key]);
   }
-  return false;
+  return out;
 }
-function inferValueType(value) {
-  if (value == null) return void 0;
-  if (typeof value === "number") return Number.isFinite(value) ? "quantitative" : void 0;
-  if (value instanceof Date) return "temporal";
-  if (typeof value === "boolean") return "nominal";
-  if (typeof value === "string") {
-    if (value.trim() === "") return void 0;
-    if (looksTemporal2(value)) return "temporal";
-    if (/^-?\d*\.?\d+(e[-+]?\d+)?$/i.test(value.trim())) return "quantitative";
-    return "nominal";
-  }
-  return "nominal";
+function decode(token) {
+  return token.replace(/~1/g, "/").replace(/~0/g, "~");
 }
-function inferFieldType(data, field, sample = 50) {
-  let seen = 0;
-  const counts = {
-    quantitative: 0,
-    temporal: 0,
-    ordinal: 0,
-    nominal: 0
-  };
-  for (let i = 0; i < data.length && seen < sample; i++) {
-    const t = inferValueType(data[i]?.[field]);
-    if (!t) continue;
-    counts[t]++;
-    seen++;
-  }
-  if (seen === 0) return "nominal";
-  if (counts.temporal >= seen * 0.6) return "temporal";
-  if (counts.quantitative >= seen * 0.6) return "quantitative";
-  return "nominal";
+function parsePointer(pointer) {
+  if (pointer === "") return [];
+  if (pointer[0] !== "/") throw new Error(`Invalid JSON Pointer: ${pointer}`);
+  return pointer.slice(1).split("/").map(decode);
 }
-function inferFieldTypes(data) {
-  const fields = /* @__PURE__ */ new Set();
-  for (let i = 0; i < Math.min(data.length, 20); i++) {
-    const row = data[i];
-    if (row) for (const k of Object.keys(row)) fields.add(k);
+function toPointer(path) {
+  if (path === "") return "";
+  const parts = [];
+  for (const seg of path.replace(/\[(\d+)\]/g, ".$1").split(".")) {
+    if (seg === "") continue;
+    parts.push(seg.replace(/~/g, "~0").replace(/\//g, "~1"));
   }
-  const out = {};
-  for (const f of fields) out[f] = inferFieldType(data, f);
-  return out;
-}
-
-// src/spec/lint.ts
-var MAX_PIE_SLICES = 7;
-var MAX_SERIES = 12;
-var MAX_DISCRETE_AXIS = 50;
-var POSITIONAL_AXES = ["x", "y"];
-function isObject(v) {
-  return typeof v === "object" && v !== null && !Array.isArray(v);
+  return "/" + parts.join("/");
 }
-function fieldDef(encoding, channel) {
-  const def = encoding?.[channel];
-  if (isObject(def) && typeof def.field === "string" && def.field !== "") return def;
-  return void 0;
+function isObject2(v) {
+  return v !== null && typeof v === "object" && !Array.isArray(v) && !(v instanceof Date);
 }
-function effectiveData(spec) {
-  const data = Array.isArray(spec.data) ? spec.data : [];
-  if (!("transform" in spec) || !Array.isArray(spec.transform) || spec.transform.length === 0) return data;
-  try {
-    return applyTransforms(spec.transform, data);
-  } catch {
-    return data;
+function applyOne(doc, op) {
+  const segments = parsePointer(op.path);
+  if (segments.length === 0) {
+    return op.op === "remove" ? doc : op.value;
   }
-}
-function lintSpec(spec) {
-  const findings = [];
-  const add = (rule, path, message, severity = "warning") => findings.push({ rule, path, message, severity });
-  const encoding = isObject(spec) ? spec.encoding : void 0;
-  const data = effectiveData(spec);
-  if (data.length === 0) return findings;
-  if (encoding) {
-    for (const channel of ["x", "y", "color", "series"]) {
-      const def = fieldDef(encoding, channel);
-      if (!def) continue;
-      const declared = def.type;
-      if ((declared === "nominal" || declared === "ordinal") && inferType(data, def.field) === "temporal") {
-        findings.push({
-          rule: "temporal-typed-as-categorical",
-          path: `encoding.${channel}.type`,
-          message: `Field "${def.field}" looks temporal but is typed "${declared}". Set type:"temporal" so it scales as time.`,
-          severity: "warning",
-          fix: [{ op: "replace", path: `/encoding/${channel}/type`, value: "temporal" }]
-        });
-      }
+  let parent = doc;
+  for (let i = 0; i < segments.length - 1; i++) {
+    const seg = segments[i];
+    if (Array.isArray(parent)) {
+      parent = parent[Number(seg)];
+    } else if (isObject2(parent)) {
+      parent = parent[seg];
+    } else {
+      return doc;
     }
+    if (parent === void 0 || parent === null) return doc;
   }
-  if (spec.type === "pie") {
-    const def = fieldDef(encoding, "color") ?? fieldDef(encoding, "theta");
-    const slices = def ? uniqueValues(data, def.field).length : data.length;
-    if (slices > MAX_PIE_SLICES) {
-      add(
-        "pie-too-many-slices",
-        "encoding.color",
-        `Pie has ${slices} slices (> ${MAX_PIE_SLICES}); proportions get hard to compare. Use a bar chart, or group small slices into "Other".`
-      );
-    }
-  }
-  for (const channel of ["series", "color"]) {
-    const def = fieldDef(encoding, channel);
-    if (!def) continue;
-    if (inferType(data, def.field) === "quantitative" && channel === "color") continue;
-    const count = uniqueValues(data, def.field).length;
-    if (count > MAX_SERIES) {
-      add(
-        "too-many-series",
-        `encoding.${channel}`,
-        `"${def.field}" has ${count} distinct values (> ${MAX_SERIES}); the legend/colors become hard to tell apart. Filter, group, or facet instead.`
-      );
-      break;
-    }
-  }
-  if (spec.type === "bar") {
-    const y = fieldDef(encoding, "y");
-    const scale = y?.scale;
-    if (scale?.zero === false) {
-      add(
-        "bar-nonzero-baseline",
-        "encoding.y.scale.zero",
-        "Bar lengths encode magnitude, so a non-zero baseline exaggerates differences. Remove scale.zero:false (bars should start at 0)."
-      );
-    } else if (Array.isArray(scale?.domain) && typeof scale.domain[0] === "number" && scale.domain[0] > 0) {
-      add(
-        "bar-nonzero-baseline",
-        "encoding.y.scale.domain",
-        `Bar y-domain starts at ${scale.domain[0]} (> 0); a truncated baseline exaggerates differences. Start the domain at 0.`
-      );
-    }
-  }
-  if (encoding) {
-    for (const channel of ["x", "y"]) {
-      const def = fieldDef(encoding, channel);
-      if (def?.scale?.type !== "log") continue;
-      const read = accessor(def.field);
-      const hasNonPositive = data.some((d) => {
-        const n = toNumber(read(d));
-        return Number.isFinite(n) && n <= 0;
-      });
-      if (hasNonPositive) {
-        add(
-          "log-nonpositive-data",
-          `encoding.${channel}.scale`,
-          `"${def.field}" has values \u2264 0, which a log scale cannot plot. Use a linear scale or filter non-positive values.`
-        );
-      }
-    }
-  }
-  if (spec.type === "bar" || spec.type === "line" || spec.type === "area") {
-    for (const channel of POSITIONAL_AXES) {
-      const def = fieldDef(encoding, channel);
-      if (!def) continue;
-      const t = def.type ?? inferType(data, def.field);
-      const discrete = t === "nominal" || t === "ordinal" || def.scale?.type === "band" || def.scale?.type === "point";
-      if (!discrete) continue;
-      const count = uniqueValues(data, def.field).length;
-      if (count > MAX_DISCRETE_AXIS) {
-        add(
-          "high-cardinality-axis",
-          `encoding.${channel}`,
-          `"${def.field}" has ${count} categories on the ${channel}-axis (> ${MAX_DISCRETE_AXIS}); labels will be unreadable. Aggregate, filter to a top-N, or use a different chart.`
-        );
-      }
-    }
-  }
-  if (spec.type === "histogram") {
-    const def = fieldDef(encoding, "x");
-    if (def) {
-      const t = def.type ?? inferType(data, def.field);
-      if (t !== "quantitative") {
-        add(
-          "histogram-nonnumeric-field",
-          "encoding.x",
-          `Histogram field "${def.field}" is ${t}, not quantitative \u2014 binning needs numbers. Use a numeric field, or a bar chart for categories.`
-        );
-      }
-    }
-  }
-  if (spec.type === "combo" && Array.isArray(spec.layers)) {
-    const layers = spec.layers;
-    const hasRight = layers.some((l) => isObject(l) && l.axis === "right");
-    const hasLeft = layers.some((l) => isObject(l) && l.axis !== "right");
-    if (hasRight && hasLeft) {
-      add(
-        "combo-dual-axis",
-        "layers",
-        "Dual-axis combo: a secondary y-axis can suggest correlations that are not real. Use it only for genuinely different units/scales, and label both axes clearly.",
-        "info"
-      );
-    }
-  }
-  return findings;
-}
-
-// src/spec/suggest.ts
-function levenshtein(a, b) {
-  if (a === b) return 0;
-  const m = a.length;
-  const n = b.length;
-  if (m === 0) return n;
-  if (n === 0) return m;
-  let prev = new Array(n + 1);
-  let curr = new Array(n + 1);
-  for (let j = 0; j <= n; j++) prev[j] = j;
-  for (let i = 1; i <= m; i++) {
-    curr[0] = i;
-    const ca = a.charCodeAt(i - 1);
-    for (let j = 1; j <= n; j++) {
-      const cost = ca === b.charCodeAt(j - 1) ? 0 : 1;
-      curr[j] = Math.min(prev[j] + 1, curr[j - 1] + 1, prev[j - 1] + cost);
-    }
-    [prev, curr] = [curr, prev];
-  }
-  return prev[n];
-}
-function tolerance(input) {
-  return Math.max(2, Math.ceil(input.length * 0.5));
-}
-function rank(input, candidates) {
-  const lower = input.toLowerCase();
-  return candidates.map((value) => {
-    const lc = value.toLowerCase();
-    const distance = lc === lower ? 0 : levenshtein(lower, lc);
-    return { value, distance };
-  }).sort((a, b) => a.distance - b.distance || a.value.localeCompare(b.value));
-}
-function suggestions(input, candidates, limit = 3, maxDistance = tolerance(input)) {
-  if (!input) return [];
-  return rank(input, candidates).filter((r) => r.distance <= maxDistance).slice(0, limit).map((r) => r.value);
-}
-function closest(input, candidates) {
-  if (!input) return void 0;
-  const ranked = rank(input, candidates);
-  if (ranked.length === 0) return void 0;
-  const best = ranked[0];
-  const bound = Math.max(2, Math.floor(input.length * 0.34));
-  if (best.distance > bound) return void 0;
-  const runnerUp = ranked[1];
-  if (runnerUp && runnerUp.distance === best.distance) return void 0;
-  return best.value;
-}
-
-// src/spec/jsonpatch.ts
-function clone(value) {
-  if (value === null || typeof value !== "object") return value;
-  if (value instanceof Date) return new Date(value.getTime());
-  if (Array.isArray(value)) return value.map((v) => clone(v));
-  const out = {};
-  for (const key of Object.keys(value)) {
-    out[key] = clone(value[key]);
-  }
-  return out;
-}
-function decode(token) {
-  return token.replace(/~1/g, "/").replace(/~0/g, "~");
-}
-function parsePointer(pointer) {
-  if (pointer === "") return [];
-  if (pointer[0] !== "/") throw new Error(`Invalid JSON Pointer: ${pointer}`);
-  return pointer.slice(1).split("/").map(decode);
-}
-function toPointer(path) {
-  if (path === "") return "";
-  const parts = [];
-  for (const seg of path.replace(/\[(\d+)\]/g, ".$1").split(".")) {
-    if (seg === "") continue;
-    parts.push(seg.replace(/~/g, "~0").replace(/\//g, "~1"));
-  }
-  return "/" + parts.join("/");
-}
-function isObject2(v) {
-  return v !== null && typeof v === "object" && !Array.isArray(v) && !(v instanceof Date);
-}
-function applyOne(doc, op) {
-  const segments = parsePointer(op.path);
-  if (segments.length === 0) {
-    return op.op === "remove" ? doc : op.value;
-  }
-  let parent = doc;
-  for (let i = 0; i < segments.length - 1; i++) {
-    const seg = segments[i];
-    if (Array.isArray(parent)) {
-      parent = parent[Number(seg)];
-    } else if (isObject2(parent)) {
-      parent = parent[seg];
-    } else {
-      return doc;
-    }
-    if (parent === void 0 || parent === null) return doc;
-  }
-  const key = segments[segments.length - 1];
-  if (Array.isArray(parent)) {
-    const idx = key === "-" ? parent.length : Number(key);
-    if (Number.isNaN(idx)) return doc;
-    if (op.op === "remove") {
-      if (idx >= 0 && idx < parent.length) parent.splice(idx, 1);
-    } else if (op.op === "add") {
-      parent.splice(Math.min(idx, parent.length), 0, op.value);
-    } else {
-      if (idx >= 0 && idx < parent.length) parent[idx] = op.value;
-    }
-  } else if (isObject2(parent)) {
-    if (op.op === "remove") {
-      delete parent[key];
-    } else {
-      parent[key] = op.value;
+  const key = segments[segments.length - 1];
+  if (Array.isArray(parent)) {
+    const idx = key === "-" ? parent.length : Number(key);
+    if (Number.isNaN(idx)) return doc;
+    if (op.op === "remove") {
+      if (idx >= 0 && idx < parent.length) parent.splice(idx, 1);
+    } else if (op.op === "add") {
+      parent.splice(Math.min(idx, parent.length), 0, op.value);
+    } else {
+      if (idx >= 0 && idx < parent.length) parent[idx] = op.value;
+    }
+  } else if (isObject2(parent)) {
+    if (op.op === "remove") {
+      delete parent[key];
+    } else {
+      parent[key] = op.value;
     }
   }
   return doc;
@@ -5748,16 +5284,693 @@ function validateDashboard(spec) {
       }
     }
   }
-  return { valid: errors.length === 0, errors, warnings };
+  return { valid: errors.length === 0, errors, warnings };
+}
+function assertValidSpec(spec) {
+  const { valid, errors } = validateSpec(spec);
+  if (!valid) {
+    const detail = errors.map((e) => `  - ${e.path || "(root)"}: ${e.message}`).join("\n");
+    throw new Error(`Invalid Graphein chart spec:
+${detail}`);
+  }
+  return spec;
+}
+
+// src/analyze/recommend.ts
+function profileColumns(data) {
+  const fields = /* @__PURE__ */ new Set();
+  for (const row of data) {
+    for (const field of Object.keys(row)) fields.add(field);
+  }
+  return [...fields].map((field) => ({
+    field,
+    type: inferType(data, field),
+    cardinality: uniqueValues(data, field).length
+  }));
+}
+function title(text) {
+  return text.replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (m) => m.toUpperCase());
+}
+function fieldDef2(profile) {
+  return { field: profile.field, type: profile.type };
+}
+function boost(score, family, intent) {
+  if (!intent) return score;
+  const matches = family === intent || intent === "composition" && family === "comparison" || intent === "comparison" && family === "density";
+  return Math.min(1, score + (matches ? 0.12 : 0));
+}
+function pushValid(candidates, candidate, intent) {
+  const score = Number(boost(candidate.score, candidate.family, intent).toFixed(3));
+  const spec = candidate.spec;
+  if (!validateSpec(spec).valid) return;
+  candidates.push({ ...candidate, score });
+}
+function firstLowCardNominal(profiles, exclude = /* @__PURE__ */ new Set()) {
+  return profiles.find((p) => p.type === "nominal" && p.cardinality <= 12 && !exclude.has(p.field));
+}
+function recommendChart(data, opts = {}) {
+  if (!Array.isArray(data) || data.length === 0) return [];
+  const profiles = profileColumns(data);
+  const quantitative = profiles.filter((p) => p.type === "quantitative");
+  const ordered = profiles.filter((p) => p.type === "temporal" || p.type === "ordinal");
+  const nominal = profiles.filter((p) => p.type === "nominal");
+  const lowNominal = nominal.filter((p) => p.cardinality <= 12);
+  const manyNominal = nominal.filter((p) => p.cardinality > 12);
+  const candidates = [];
+  const measure = quantitative[0];
+  if (ordered.length > 0 && measure) {
+    const x = ordered[0];
+    const encoding = { x: fieldDef2(x), y: fieldDef2(measure) };
+    const series = firstLowCardNominal(profiles, /* @__PURE__ */ new Set([x.field, measure.field]));
+    if (series) encoding.series = fieldDef2(series);
+    pushValid(
+      candidates,
+      {
+        spec: {
+          type: "line",
+          data,
+          encoding,
+          title: `${title(measure.field)} over ${title(x.field)}`
+        },
+        score: 0.92,
+        family: "trend",
+        rationale: `${title(x.field)} is ${x.type}, so a line chart shows how ${title(measure.field)} changes over ordered rows${series ? `, split by low-cardinality ${title(series.field)}` : ""}.`
+      },
+      opts.intent
+    );
+  }
+  if (measure) {
+    const category = lowNominal[0];
+    if (category) {
+      pushValid(
+        candidates,
+        {
+          spec: {
+            type: "bar",
+            data,
+            encoding: { x: fieldDef2(category), y: fieldDef2(measure) },
+            title: `${title(measure.field)} by ${title(category.field)}`
+          },
+          score: 0.84,
+          family: "comparison",
+          rationale: `${title(category.field)} has ${category.cardinality} categories, making bars a good comparison of ${title(measure.field)}.`
+        },
+        opts.intent
+      );
+      if (category.cardinality <= 7) {
+        pushValid(
+          candidates,
+          {
+            spec: {
+              type: "pie",
+              data,
+              encoding: { theta: fieldDef2(measure), color: fieldDef2(category) },
+              title: `${title(measure.field)} share by ${title(category.field)}`
+            },
+            score: 0.58,
+            family: "composition",
+            rationale: `${title(category.field)} has ${category.cardinality} slices, so a pie can show part-to-whole share for ${title(measure.field)}.`
+          },
+          opts.intent
+        );
+      }
+    } else if (manyNominal.length > 0) {
+      const wideCategory = manyNominal[0];
+      pushValid(
+        candidates,
+        {
+          spec: {
+            type: "bar",
+            data,
+            encoding: { x: fieldDef2(wideCategory), y: fieldDef2(measure) },
+            title: `${title(measure.field)} by ${title(wideCategory.field)}`
+          },
+          score: 0.62,
+          family: "comparison",
+          rationale: `${title(wideCategory.field)} has ${wideCategory.cardinality} categories; use this bar chart with top-N filtering or grouping to keep labels readable.`
+        },
+        opts.intent
+      );
+    }
+  }
+  if (quantitative.length >= 2) {
+    const [x, y] = quantitative;
+    const encoding = { x: fieldDef2(x), y: fieldDef2(y) };
+    const size = quantitative[2];
+    const color = firstLowCardNominal(profiles, /* @__PURE__ */ new Set([x.field, y.field]));
+    if (size) encoding.size = fieldDef2(size);
+    if (color) encoding.color = fieldDef2(color);
+    pushValid(
+      candidates,
+      {
+        spec: {
+          type: "scatter",
+          data,
+          encoding,
+          title: `${title(y.field)} vs ${title(x.field)}`
+        },
+        score: 0.86,
+        family: "relationship",
+        rationale: `${title(x.field)} and ${title(y.field)} are quantitative, so scatter reveals their relationship${size ? ` with ${title(size.field)} as bubble size` : ""}${color ? ` and ${title(color.field)} as color` : ""}.`
+      },
+      opts.intent
+    );
+  }
+  if (quantitative.length === 1) {
+    const q = quantitative[0];
+    pushValid(
+      candidates,
+      {
+        spec: {
+          type: "histogram",
+          data,
+          encoding: { x: fieldDef2(q) },
+          title: `${title(q.field)} distribution`
+        },
+        score: 0.78,
+        family: "distribution",
+        rationale: `${title(q.field)} is the only quantitative field, so a histogram shows its distribution.`
+      },
+      opts.intent
+    );
+    pushValid(
+      candidates,
+      {
+        spec: {
+          type: "kpi",
+          data,
+          value: { field: q.field, aggregate: "sum" },
+          label: `Total ${title(q.field)}`,
+          title: `Total ${title(q.field)}`
+        },
+        score: 0.62,
+        family: "value",
+        rationale: `${title(q.field)} is the only quantitative field, so a KPI summarizes it as a total.`
+      },
+      opts.intent
+    );
+  }
+  if (lowNominal.length >= 2 && measure) {
+    const [x, y] = lowNominal;
+    pushValid(
+      candidates,
+      {
+        spec: {
+          type: "heatmap",
+          data,
+          encoding: { x: fieldDef2(x), y: fieldDef2(y), color: fieldDef2(measure) },
+          title: `${title(measure.field)} by ${title(x.field)} and ${title(y.field)}`
+        },
+        score: 0.76,
+        family: "density",
+        rationale: `${title(x.field)} and ${title(y.field)} are low-cardinality categories, so a heatmap shows ${title(measure.field)} across their combinations.`
+      },
+      opts.intent
+    );
+    pushValid(
+      candidates,
+      {
+        spec: {
+          type: "matrix",
+          data,
+          rows: [y.field],
+          columns: [x.field],
+          values: [{ field: measure.field, op: "sum" }],
+          title: `${title(measure.field)} matrix`
+        },
+        score: 0.68,
+        family: "density",
+        rationale: `A matrix summarizes ${title(measure.field)} by ${title(y.field)} rows and ${title(x.field)} columns.`
+      },
+      opts.intent
+    );
+  }
+  return candidates.sort((a, b) => b.score - a.score).slice(0, opts.maxResults ?? 5).map(({ spec, score, rationale }) => ({ spec, score, rationale }));
+}
+
+// src/render/env.ts
+var isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+function getDevicePixelRatio() {
+  const dpr = globalThis.devicePixelRatio;
+  return typeof dpr === "number" && dpr > 0 ? dpr : 1;
+}
+
+// src/render/sizing.ts
+function computeBackingSize(width, height, dpr) {
+  const d = dpr > 0 ? dpr : 1;
+  const cssWidth = Math.max(0, width);
+  const cssHeight = Math.max(0, height);
+  return {
+    cssWidth,
+    cssHeight,
+    pixelWidth: Math.max(1, Math.round(cssWidth * d)),
+    pixelHeight: Math.max(1, Math.round(cssHeight * d)),
+    dpr: d
+  };
+}
+
+// src/render/dom.ts
+function setStyle(el, style) {
+  Object.assign(el.style, style);
+}
+function createDiv(className, style) {
+  const el = document.createElement("div");
+  if (className) el.className = className;
+  if (style) setStyle(el, style);
+  return el;
+}
+var fillParentStyle = {
+  position: "absolute",
+  top: "0",
+  left: "0"
+};
+
+// src/render/canvasLayer.ts
+var CanvasLayer = class {
+  constructor(canvas) {
+    __publicField(this, "canvas");
+    __publicField(this, "ctx");
+    /** Logical (CSS px) width. */
+    __publicField(this, "width", 0);
+    /** Logical (CSS px) height. */
+    __publicField(this, "height", 0);
+    __publicField(this, "dpr", 1);
+    this.canvas = canvas ?? document.createElement("canvas");
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Graphein: 2D canvas context is unavailable in this environment.");
+    }
+    this.ctx = ctx;
+  }
+  /** Resize the layer to a CSS size; updates the backing store + DPR transform. */
+  resize(width, height, dpr = getDevicePixelRatio()) {
+    const b = computeBackingSize(width, height, dpr);
+    this.width = b.cssWidth;
+    this.height = b.cssHeight;
+    this.dpr = b.dpr;
+    if (this.canvas.width !== b.pixelWidth) this.canvas.width = b.pixelWidth;
+    if (this.canvas.height !== b.pixelHeight) this.canvas.height = b.pixelHeight;
+    this.canvas.style.width = `${b.cssWidth}px`;
+    this.canvas.style.height = `${b.cssHeight}px`;
+    this.ctx.setTransform(b.dpr, 0, 0, b.dpr, 0, 0);
+  }
+  /** Clear the entire backing store regardless of the current transform. */
+  clear() {
+    const { ctx, canvas } = this;
+    ctx.save();
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.restore();
+  }
+};
+
+// src/render/surface.ts
+var Surface = class {
+  constructor(container) {
+    __publicField(this, "container");
+    __publicField(this, "root");
+    __publicField(this, "marks");
+    __publicField(this, "interaction");
+    __publicField(this, "overlay");
+    /** Visually-hidden container for the screen-reader data-table fallback. */
+    __publicField(this, "a11y");
+    __publicField(this, "width", 0);
+    __publicField(this, "height", 0);
+    __publicField(this, "dpr", 1);
+    /**
+     * When true, overlay text (axis labels, titles, legends, annotation labels) is
+     * painted onto the `marks` canvas instead of the HTML overlay. Set by headless
+     * renderers (`@graphein/node`) where there is no DOM to host crisp text.
+     * Defaults to false (browser).
+     */
+    __publicField(this, "headless", false);
+    this.container = container;
+    this.root = createDiv("graphein-root", {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    });
+    const marksCanvas = document.createElement("canvas");
+    marksCanvas.className = "graphein-layer-marks";
+    setStyle(marksCanvas, { ...fillParentStyle });
+    const interactionCanvas = document.createElement("canvas");
+    interactionCanvas.className = "graphein-layer-interaction";
+    setStyle(interactionCanvas, { ...fillParentStyle, pointerEvents: "none" });
+    this.overlay = createDiv("graphein-layer-overlay", {
+      ...fillParentStyle,
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none"
+    });
+    this.a11y = createDiv("graphein-a11y", {
+      position: "absolute",
+      width: "1px",
+      height: "1px",
+      overflow: "hidden",
+      clip: "rect(0 0 0 0)",
+      clipPath: "inset(50%)",
+      whiteSpace: "nowrap",
+      border: "0",
+      margin: "-1px",
+      padding: "0"
+    });
+    this.root.appendChild(marksCanvas);
+    this.root.appendChild(interactionCanvas);
+    this.root.appendChild(this.overlay);
+    this.root.appendChild(this.a11y);
+    container.appendChild(this.root);
+    this.marks = new CanvasLayer(marksCanvas);
+    this.interaction = new CanvasLayer(interactionCanvas);
+  }
+  resize(width, height, dpr = getDevicePixelRatio()) {
+    this.width = width;
+    this.height = height;
+    this.dpr = dpr;
+    this.marks.resize(width, height, dpr);
+    this.interaction.resize(width, height, dpr);
+    setStyle(this.overlay, { width: `${width}px`, height: `${height}px` });
+  }
+  /** Clear both canvas layers and empty the HTML overlay. */
+  clear() {
+    this.marks.clear();
+    this.interaction.clear();
+    this.overlay.replaceChildren();
+  }
+  /** Remove all DOM created by this Surface. */
+  destroy() {
+    this.clear();
+    this.root.remove();
+  }
+};
+
+// src/render/overlayText.ts
+function paintCanvasText(ctx, c) {
+  const align = c.align ?? "left";
+  const baseline = c.baseline ?? "top";
+  ctx.save();
+  if (c.opacity != null) ctx.globalAlpha *= c.opacity;
+  if (c.rotate) {
+    ctx.translate(c.x, c.y);
+    ctx.rotate(c.rotate);
+    ctx.translate(-c.x, -c.y);
+  }
+  ctx.font = c.font;
+  ctx.textAlign = align;
+  ctx.textBaseline = baseline;
+  if (c.pill) {
+    const padX = c.pill.padX ?? 7;
+    const padY = c.pill.padY ?? 2;
+    const tw = ctx.measureText(c.text).width;
+    const th = c.size;
+    let bx = c.x;
+    if (align === "center") bx = c.x - tw / 2;
+    else if (align === "right") bx = c.x - tw;
+    let by = c.y;
+    if (baseline === "middle") by = c.y - th / 2;
+    else if (baseline === "alphabetic") by = c.y - th;
+    ctx.beginPath();
+    roundedRect(ctx, bx - padX, by - padY, tw + padX * 2, th + padY * 2, c.pill.radius ?? 999);
+    ctx.fillStyle = c.pill.background;
+    ctx.fill();
+    if (c.pill.border) {
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = c.pill.border;
+      ctx.stroke();
+    }
+  }
+  ctx.fillStyle = c.color;
+  ctx.fillText(c.text, c.x, c.y);
+  ctx.restore();
+}
+function overlayTextToCanvasCmd(o, font) {
+  const t = o.transform ?? "";
+  const rotate = t.includes("rotate(-90deg)") ? -Math.PI / 2 : t.includes("rotate(90deg)") ? Math.PI / 2 : (() => {
+    const m = t.match(/rotate\((-?\d+(?:\.\d+)?)deg\)/);
+    return m ? parseFloat(m[1]) * Math.PI / 180 : void 0;
+  })();
+  let align = "left";
+  let x = o.left;
+  const y = o.top;
+  if (o.width != null) {
+    align = o.align ?? "left";
+    x = align === "right" ? o.left + o.width : align === "center" ? o.left + o.width / 2 : o.left;
+  } else if (t.includes("translateX(-100%)")) {
+    align = "right";
+  } else if (t.includes("translateX(-50%)") || t.includes("translate(-50%")) {
+    align = "center";
+  }
+  const baseline = t.includes("translateY(-50%)") || t.includes(",-50%") || t.includes(", -50%") ? "middle" : "top";
+  return {
+    x,
+    y,
+    text: o.text,
+    font,
+    color: o.color,
+    size: o.size,
+    align,
+    baseline,
+    rotate,
+    opacity: o.opacity,
+    pill: o.pill
+  };
+}
+function legendSwatchWidth(symbol, swatch = 11) {
+  return symbol === "line" ? swatch + 3 : swatch;
+}
+function paintLegendSwatch(ctx, x, midY, symbol, color, swatch = 11) {
+  ctx.save();
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  if (symbol === "circle") {
+    ctx.arc(x + swatch / 2, midY, swatch / 2, 0, Math.PI * 2);
+  } else if (symbol === "line") {
+    roundedRect(ctx, x, midY - 1.5, swatch + 3, 3, 1.5);
+  } else {
+    roundedRect(ctx, x, midY - swatch / 2, swatch, swatch, 2);
+  }
+  ctx.fill();
+  ctx.restore();
+}
+
+// src/render/text.ts
+var measureCtx;
+var injectedCtx = null;
+function setMeasureContext(ctx) {
+  injectedCtx = ctx;
+}
+function getMeasureCtx() {
+  if (injectedCtx) return injectedCtx;
+  if (measureCtx !== void 0) return measureCtx;
+  try {
+    measureCtx = document.createElement("canvas").getContext("2d");
+  } catch {
+    measureCtx = null;
+  }
+  return measureCtx;
+}
+function measureText(text, font) {
+  const ctx = getMeasureCtx();
+  if (!ctx) {
+    const sizeMatch = /(\d+(?:\.\d+)?)px/.exec(font);
+    const size = sizeMatch ? parseFloat(sizeMatch[1]) : 12;
+    return { width: text.length * size * 0.55 };
+  }
+  ctx.font = font;
+  return { width: ctx.measureText(text).width };
+}
+function fontString(size, family, weight = 400, style = "normal") {
+  return `${style} ${weight} ${size}px ${family}`;
+}
+function ellipsize(text, maxWidth, font) {
+  if (maxWidth <= 0 || text.length === 0) return "";
+  if (measureText(text, font).width <= maxWidth) return text;
+  const ellipsis = "\u2026";
+  const ellipsisW = measureText(ellipsis, font).width;
+  if (ellipsisW > maxWidth) return "";
+  let lo = 0;
+  let hi = text.length;
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2);
+    if (measureText(text.slice(0, mid) + ellipsis, font).width <= maxWidth) lo = mid;
+    else hi = mid - 1;
+  }
+  return text.slice(0, lo) + ellipsis;
+}
+
+// src/theme/tokens.ts
+var PALETTE = categorical("graphein");
+var FONT_FAMILY = 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+var SHARED = {
+  font: {
+    family: FONT_FAMILY,
+    size: { tiny: 10, small: 11, base: 12, large: 14, title: 16 },
+    weight: { normal: 400, medium: 500, bold: 600 }
+  },
+  spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 },
+  radius: { sm: 4, md: 6, lg: 8 },
+  stroke: { thin: 1, base: 1.5, thick: 2 }
+};
+var lightTheme = {
+  name: "light",
+  dark: false,
+  color: {
+    background: "#ffffff",
+    surface: "#f8fafc",
+    text: "#0f172a",
+    textMuted: "#64748b",
+    axis: "#cbd5e1",
+    grid: "#eef2f6",
+    border: "#e2e8f0",
+    accent: "#0d9488",
+    palette: PALETTE,
+    positive: "#16a34a",
+    negative: "#dc2626"
+  },
+  ...SHARED
+};
+var darkTheme = {
+  name: "dark",
+  dark: true,
+  color: {
+    background: "#0b1220",
+    surface: "#111a2e",
+    text: "#f1f5f9",
+    textMuted: "#94a3b8",
+    axis: "#334155",
+    grid: "#1c2740",
+    border: "#1e293b",
+    accent: "#2dd4bf",
+    palette: PALETTE,
+    positive: "#22c55e",
+    negative: "#f87171"
+  },
+  ...SHARED
+};
+var themes = {
+  light: lightTheme,
+  dark: darkTheme
+};
+function isPlainObject(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function deepMerge(base, override) {
+  if (!isPlainObject(override)) return base;
+  if (!isPlainObject(base)) return override;
+  const out = { ...base };
+  for (const [key, value] of Object.entries(override)) {
+    const baseValue = out[key];
+    if (isPlainObject(baseValue) && isPlainObject(value)) {
+      out[key] = deepMerge(baseValue, value);
+    } else {
+      out[key] = value;
+    }
+  }
+  return out;
+}
+function resolveTheme(theme) {
+  if (theme == null) return lightTheme;
+  if (typeof theme === "string") return themes[theme] ?? lightTheme;
+  const baseName = theme.base ?? (theme.dark ? "dark" : "light");
+  const base = themes[baseName] ?? lightTheme;
+  const { base: _ignored, ...override } = theme;
+  return deepMerge(base, override);
+}
+
+// src/theme/sketch.ts
+var SKETCH_FONT_NAME = "Patrick Hand";
+var SKETCH_FONT_FAMILY = `'Patrick Hand', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', ui-rounded, cursive`;
+var injected = false;
+function injectViaStyle(dataUrl) {
+  const style = document.createElement("style");
+  style.setAttribute("data-graphein-sketch-font", "");
+  style.textContent = `@font-face{font-family:'${SKETCH_FONT_NAME}';font-style:normal;font-weight:400;font-display:swap;src:url("${dataUrl}") format("woff2");}`;
+  document.head.appendChild(style);
+}
+async function ensureSketchFont() {
+  if (injected) return false;
+  if (typeof document === "undefined") return false;
+  injected = true;
+  try {
+    const { PATRICK_HAND_DATA_URL } = await import('./patrickHand-ITDQJJE2.js');
+    const docFonts = document.fonts;
+    if (typeof FontFace !== "undefined" && docFonts?.add) {
+      const face = new FontFace(
+        SKETCH_FONT_NAME,
+        `url("${PATRICK_HAND_DATA_URL}") format("woff2")`,
+        { style: "normal", weight: "400" }
+      );
+      await face.load();
+      docFonts.add(face);
+      return true;
+    }
+    injectViaStyle(PATRICK_HAND_DATA_URL);
+    return true;
+  } catch {
+    injected = false;
+    return false;
+  }
 }
-function assertValidSpec(spec) {
-  const { valid, errors } = validateSpec(spec);
-  if (!valid) {
-    const detail = errors.map((e) => `  - ${e.path || "(root)"}: ${e.message}`).join("\n");
-    throw new Error(`Invalid Graphein chart spec:
-${detail}`);
+function withSketchFont(tokens) {
+  return {
+    ...tokens,
+    font: {
+      ...tokens.font,
+      family: `${SKETCH_FONT_FAMILY}`
+    }
+  };
+}
+
+// src/spec/infer.ts
+function looksTemporal2(value) {
+  if (value.length < 4) return false;
+  if (/^\d{4}(-\d{2}(-\d{2})?)?([T\s]\d{2}:\d{2})?/.test(value)) {
+    const t = Date.parse(value);
+    return !Number.isNaN(t);
   }
-  return spec;
+  return false;
+}
+function inferValueType(value) {
+  if (value == null) return void 0;
+  if (typeof value === "number") return Number.isFinite(value) ? "quantitative" : void 0;
+  if (value instanceof Date) return "temporal";
+  if (typeof value === "boolean") return "nominal";
+  if (typeof value === "string") {
+    if (value.trim() === "") return void 0;
+    if (looksTemporal2(value)) return "temporal";
+    if (/^-?\d*\.?\d+(e[-+]?\d+)?$/i.test(value.trim())) return "quantitative";
+    return "nominal";
+  }
+  return "nominal";
+}
+function inferFieldType(data, field, sample = 50) {
+  let seen = 0;
+  const counts = {
+    quantitative: 0,
+    temporal: 0,
+    ordinal: 0,
+    nominal: 0
+  };
+  for (let i = 0; i < data.length && seen < sample; i++) {
+    const t = inferValueType(data[i]?.[field]);
+    if (!t) continue;
+    counts[t]++;
+    seen++;
+  }
+  if (seen === 0) return "nominal";
+  if (counts.temporal >= seen * 0.6) return "temporal";
+  if (counts.quantitative >= seen * 0.6) return "quantitative";
+  return "nominal";
+}
+function inferFieldTypes(data) {
+  const fields = /* @__PURE__ */ new Set();
+  for (let i = 0; i < Math.min(data.length, 20); i++) {
+    const row = data[i];
+    if (row) for (const k of Object.keys(row)) fields.add(k);
+  }
+  const out = {};
+  for (const f of fields) out[f] = inferFieldType(data, f);
+  return out;
 }
 
 // src/spec/repair.ts
@@ -5784,10 +5997,10 @@ function repairSpec(spec) {
 
 // src/spec/sketch.ts
 function deriveSeed(spec) {
-  const title = typeof spec.title === "string" ? spec.title : spec.title?.text ?? spec.title?.subtitle ?? "";
+  const title2 = typeof spec.title === "string" ? spec.title : spec.title?.text ?? spec.title?.subtitle ?? "";
   const dataLen = Array.isArray(spec.data) ? spec.data.length : 0;
   const firstRow = Array.isArray(spec.data) && spec.data[0] ? Object.keys(spec.data[0]).join(",") : "";
-  return hashString(`${spec.type}|${title}|${dataLen}|${firstRow}`) || 1;
+  return hashString(`${spec.type}|${title2}|${dataLen}|${firstRow}`) || 1;
 }
 function resolveSketch(spec) {
   const sketch = spec.sketch;
@@ -6032,6 +6245,10 @@ function yGridEnabled(model) {
   return model.spec.axes?.y?.grid !== false;
 }
 function drawAxesUnderlay(surface, model) {
+  if (model.orientation === "horizontal") {
+    drawHorizontalAxesUnderlay(surface, model);
+    return;
+  }
   const ctx = surface.marks.ctx;
   const { plot, tokens } = model;
   const x0 = plot.x;
@@ -6105,6 +6322,58 @@ function drawAxesUnderlay(surface, model) {
   }
   ctx.restore();
 }
+function drawHorizontalAxesUnderlay(surface, model) {
+  const ctx = surface.marks.ctx;
+  const { plot, tokens } = model;
+  const x0 = plot.x;
+  const y0 = plot.y;
+  const y1 = plot.y + plot.height;
+  ctx.save();
+  ctx.lineWidth = 1;
+  const pen = model.sketch ? new RoughPen(ctx, model.sketch) : null;
+  const seg = (sx0, sy0, sx1, sy1, stroke) => {
+    pen.polyline([{ x: sx0, y: sy0 }, { x: sx1, y: sy1 }], {
+      stroke,
+      strokeWidth: 1,
+      roughness: model.sketch.roughness * 0.5,
+      bowing: model.sketch.bowing * 0.55
+    });
+  };
+  if (yGridEnabled(model)) {
+    if (pen) {
+      for (const t of model.yTicks) seg(t.pos, y0, t.pos, y1, tokens.color.grid);
+    } else {
+      ctx.strokeStyle = tokens.color.grid;
+      ctx.beginPath();
+      for (const t of model.yTicks) {
+        const x = crisp(t.pos);
+        ctx.moveTo(x, y0);
+        ctx.lineTo(x, y1);
+      }
+      ctx.stroke();
+    }
+  }
+  if (model.spec.axes?.x?.show !== false) {
+    if (pen) {
+      seg(x0, y0, x0, y1, tokens.color.axis);
+      for (const t of model.xTicks) seg(x0 - TICK_SIZE, t.pos, x0, t.pos, tokens.color.axis);
+    } else {
+      ctx.strokeStyle = tokens.color.axis;
+      ctx.beginPath();
+      ctx.moveTo(crisp(x0), y0);
+      ctx.lineTo(crisp(x0), y1);
+      ctx.stroke();
+      ctx.beginPath();
+      for (const t of model.xTicks) {
+        const y = crisp(t.pos);
+        ctx.moveTo(x0 - TICK_SIZE, y);
+        ctx.lineTo(x0, y);
+      }
+      ctx.stroke();
+    }
+  }
+  ctx.restore();
+}
 function thinXTicks(model, avgCharPx) {
   const ticks2 = model.xTicks;
   if (ticks2.length <= 1) return ticks2;
@@ -6175,9 +6444,12 @@ function drawOverlay(surface, model) {
   const { plot, tokens, frame } = model;
   const f = tokens.font;
   const smallFont = fontString(f.size.small, f.family, f.weight.normal);
-  if (model.spec.axes?.y?.labels !== false) {
+  const horizontal = model.orientation === "horizontal";
+  const gutterTicks = horizontal ? model.xTicks : model.yTicks;
+  const gutterLabelsOn = horizontal ? model.spec.axes?.x?.labels !== false : model.spec.axes?.y?.labels !== false;
+  if (gutterLabelsOn) {
     const gutterRight = plot.x - TICK_SIZE - 4;
-    for (const t of model.yTicks) {
+    for (const t of gutterTicks) {
       addText(surface, smallFont, {
         left: 0,
         top: t.pos,
@@ -6190,20 +6462,34 @@ function drawOverlay(surface, model) {
       });
     }
   }
-  if (model.spec.axes?.x?.labels !== false) {
+  const bottomLabelsOn = horizontal ? model.spec.axes?.y?.labels !== false : model.spec.axes?.x?.labels !== false;
+  if (bottomLabelsOn) {
     const top = plot.y + plot.height + TICK_SIZE + 3;
-    const rotated = frame.xLabelAngle > 0;
-    for (const p of resolveXLabels(model)) {
-      addText(surface, smallFont, {
-        left: p.left,
-        top,
-        text: p.text,
-        color: tokens.color.textMuted,
-        size: f.size.small,
-        align: rotated ? "right" : void 0,
-        transform: p.transform,
-        transformOrigin: rotated ? "100% 0%" : void 0
-      });
+    if (horizontal) {
+      for (const p of placeXLabels(model.yTicks, frame.originX, frame.width, smallFont)) {
+        addText(surface, smallFont, {
+          left: p.left,
+          top,
+          text: p.text,
+          color: tokens.color.textMuted,
+          size: f.size.small,
+          transform: p.transform
+        });
+      }
+    } else {
+      const rotated = frame.xLabelAngle > 0;
+      for (const p of resolveXLabels(model)) {
+        addText(surface, smallFont, {
+          left: p.left,
+          top,
+          text: p.text,
+          color: tokens.color.textMuted,
+          size: f.size.small,
+          align: rotated ? "right" : void 0,
+          transform: p.transform,
+          transformOrigin: rotated ? "100% 0%" : void 0
+        });
+      }
     }
   }
   drawAxisTitles(surface, model);
@@ -6215,6 +6501,32 @@ function drawAxisTitles(surface, model) {
   const f = tokens.font;
   const baseFont = fontString(f.size.base, f.family, f.weight.medium);
   const xTitle = model.spec.axes?.x?.title ?? model.spec.encoding.x.title;
+  const yTitle = model.spec.axes?.y?.title ?? model.spec.encoding.y.title;
+  if (model.orientation === "horizontal") {
+    if (yTitle) {
+      addText(surface, baseFont, {
+        left: plot.x + plot.width / 2,
+        top: frame.originY + frame.height - Math.round(f.size.base * 1.35),
+        text: yTitle,
+        color: tokens.color.text,
+        size: f.size.base,
+        weight: f.weight.medium,
+        transform: "translateX(-50%)"
+      });
+    }
+    if (xTitle) {
+      addText(surface, baseFont, {
+        left: frame.originX + Math.round(f.size.base * 0.4),
+        top: plot.y + plot.height / 2,
+        text: xTitle,
+        color: tokens.color.text,
+        size: f.size.base,
+        weight: f.weight.medium,
+        transform: "translate(-50%, -50%) rotate(-90deg)"
+      });
+    }
+    return;
+  }
   if (xTitle) {
     addText(surface, baseFont, {
       left: plot.x + plot.width / 2,
@@ -6226,7 +6538,6 @@ function drawAxisTitles(surface, model) {
       transform: "translateX(-50%)"
     });
   }
-  const yTitle = model.spec.axes?.y?.title ?? model.spec.encoding.y.title;
   if (yTitle) {
     addText(surface, baseFont, {
       left: frame.originX + Math.round(f.size.base * 0.4),
@@ -6242,25 +6553,25 @@ function drawAxisTitles(surface, model) {
 function drawTitle(surface, frame, spec, tokens) {
   if (!frame.titleRect) return;
   const f = tokens.font;
-  const title = typeof spec.title === "string" ? { text: spec.title } : spec.title ?? {};
+  const title2 = typeof spec.title === "string" ? { text: spec.title } : spec.title ?? {};
   const align = typeof spec.title === "object" && spec.title?.align || "left";
   const titleFont = fontString(f.size.title, f.family, f.weight.bold);
   addText(surface, titleFont, {
     left: frame.titleRect.x,
     top: frame.titleRect.y,
     width: frame.titleRect.width,
-    text: title.text ?? "",
+    text: title2.text ?? "",
     color: tokens.color.text,
     size: f.size.title,
     weight: f.weight.bold,
     align
   });
-  if (frame.subtitleRect && title.subtitle) {
+  if (frame.subtitleRect && title2.subtitle) {
     addText(surface, fontString(f.size.small, f.family, f.weight.normal), {
       left: frame.subtitleRect.x,
       top: frame.subtitleRect.y,
       width: frame.subtitleRect.width,
-      text: title.subtitle,
+      text: title2.subtitle,
       color: tokens.color.textMuted,
       size: f.size.small,
       align
@@ -6418,6 +6729,10 @@ function formatNumericTick(value, userFormat) {
   return formatNumber2(value, ",");
 }
 var DEFAULT_PADDING = { top: 12, right: 16, bottom: 12, left: 12 };
+var LEGEND_SWATCH2 = 11;
+function legendInteractive(spec) {
+  return typeof spec.legend === "object" && spec.legend.interactive === true;
+}
 function buildCartesianModel(spec, tokens, opts) {
   const data = spec.data ?? [];
   const enc = spec.encoding;
@@ -6425,10 +6740,11 @@ function buildCartesianModel(spec, tokens, opts) {
   const yField = enc.y.field;
   const xType = fieldType(spec, enc.x, "nominal");
   const xKind = xKindFor(spec, xType);
+  const horizontal = spec.type === "bar" && spec.orientation === "horizontal";
   const seriesField = resolveSeriesField(spec);
   const rawSeries = groupBySeries(data, seriesField);
   const seriesKeys = rawSeries.map((s) => s.key);
-  const palette = tokens.color.palette;
+  const palette = Array.isArray(spec.palette) ? spec.palette : typeof spec.palette === "string" ? categorical(spec.palette) : tokens.color.palette;
   const colorScale = ordinalColorScale({ domain: seriesKeys, palette });
   const colorCache = /* @__PURE__ */ new Map();
   const sharedColor = opts.shared?.colorOf;
@@ -6580,6 +6896,19 @@ function buildCartesianModel(spec, tokens, opts) {
   }));
   const padding = { ...DEFAULT_PADDING, ...spec.padding };
   const titleInput4 = resolveTitle(spec);
+  const categoryAxisInput = {
+    show: xShow,
+    labels: xLabels,
+    title: resolveAxisTitle(enc.x, xAxisCfg),
+    edgeAnchored: !categories,
+    labelAngle: xAxisCfg.labelAngle
+  };
+  const valueAxisInput = {
+    show: yShow,
+    labels: yLabels,
+    title: resolveAxisTitle(enc.y, yAxisCfg),
+    edgeAnchored: true
+  };
   const frame = computeFrame({
     width: opts.width,
     height: opts.height,
@@ -6589,20 +6918,37 @@ function buildCartesianModel(spec, tokens, opts) {
     font: tokens.font,
     title: titleInput4,
     legend: legend.show && legendItems.length > 1 ? { items: legendItems, position: legend.position } : void 0,
-    xAxis: { show: xShow, labels: xLabels, title: resolveAxisTitle(enc.x, xAxisCfg), edgeAnchored: !categories, labelAngle: xAxisCfg.labelAngle },
-    yAxis: { show: yShow, labels: yLabels, title: resolveAxisTitle(enc.y, yAxisCfg) }
+    xAxis: horizontal ? valueAxisInput : categoryAxisInput,
+    yAxis: horizontal ? categoryAxisInput : valueAxisInput
   });
+  const legendHits = legendInteractive(spec) && seriesField && frame.legendItems ? frame.legendItems.map((item, i) => {
+    const rowH = Math.max(LEGEND_SWATCH2, Math.round(tokens.font.size.small * 1.35));
+    const midY = item.y + LEGEND_SWATCH2 / 2;
+    return {
+      rect: {
+        x: item.x,
+        y: midY - rowH / 2,
+        width: item.width,
+        height: rowH
+      },
+      key: series[i]?.key ?? item.label,
+      value: series[i]?.value ?? item.label,
+      label: item.label
+    };
+  }) : void 0;
   const plot = frame.plot;
-  const yRange = [plot.y + plot.height, plot.y];
-  const yScale = yIsLog ? logScale({ domain: yDomain, range: yRange, base: yBase, clamp: yClamp }) : linearScale({ domain: yDomain, range: yRange, clamp: yClamp });
+  const valueRange = horizontal ? [plot.x, plot.x + plot.width] : [plot.y + plot.height, plot.y];
+  const yScale = yIsLog ? logScale({ domain: yDomain, range: valueRange, base: yBase, clamp: yClamp }) : linearScale({ domain: yDomain, range: valueRange, clamp: yClamp });
   const yPixel = (value) => yScale.map(toNumber(value));
-  const baseline = yIsLog ? plot.y + plot.height : clampPx(yScale.map(0), plot.y, plot.y + plot.height);
+  const valueMin = horizontal ? plot.x : plot.y;
+  const valueMax = horizontal ? plot.x + plot.width : plot.y + plot.height;
+  const baseline = yIsLog ? horizontal ? plot.x : plot.y + plot.height : clampPx(yScale.map(0), valueMin, valueMax);
   const xModel = buildXModel(xKind, {
     field: xField,
     type: xType,
     categories,
     domainNum: xDomainNum,
-    range: [plot.x, plot.x + plot.width],
+    range: horizontal ? [plot.y, plot.y + plot.height] : [plot.x, plot.x + plot.width],
     paddingInner: spec.type === "bar" ? 0.2 : spec.type === "box" ? 0.32 : 0.5,
     scaleCfg: enc.x.scale
   });
@@ -6625,9 +6971,12 @@ function buildCartesianModel(spec, tokens, opts) {
     series,
     seriesField,
     stacked,
+    orientation: horizontal ? "horizontal" : "vertical",
+    project: horizontal ? (catPixel, valPixel) => ({ x: valPixel, y: catPixel }) : (catPixel, valPixel) => ({ x: catPixel, y: valPixel }),
     xTicks,
     yTicks,
     colorOf,
+    legendHits,
     sketch: resolveSketch(spec)
   };
 }
@@ -7021,14 +7370,11 @@ function finite2(value) {
 function defaultRadius(model, spec) {
   return Math.max(0, spec.cornerRadius ?? Math.min(4, model.tokens.radius.sm));
 }
-function cornerSideFor(baseY, valueY) {
-  if (valueY < baseY) return "top";
-  if (valueY > baseY) return "bottom";
-  return "none";
-}
 function makeRadii(side, radius) {
   if (side === "top") return [radius, radius, 0, 0];
   if (side === "bottom") return [0, 0, radius, radius];
+  if (side === "right") return [0, radius, radius, 0];
+  if (side === "left") return [radius, 0, 0, radius];
   return 0;
 }
 function drawRect(ctx, rect, radius, pen, alpha = 1) {
@@ -7048,28 +7394,39 @@ function drawRect(ctx, rect, radius, pen, alpha = 1) {
   ctx.fill();
   if (alpha !== 1) ctx.globalAlpha = prevAlpha;
 }
-function barRect(x, width, baseY, valueY, color) {
-  if (!finite2(x) || !finite2(width) || !finite2(baseY) || !finite2(valueY)) return null;
-  const y = Math.min(baseY, valueY);
-  const height = Math.abs(valueY - baseY);
-  if (width <= 0 || height <= 0) return null;
+function orientedRect(horizontal, catStart, catThick, base, value, color) {
+  if (!finite2(catStart) || !finite2(catThick) || !finite2(base) || !finite2(value)) return null;
+  const lo = Math.min(base, value);
+  const len = Math.abs(value - base);
+  if (catThick <= 0 || len <= 0) return null;
+  if (horizontal) {
+    return {
+      x: lo,
+      y: catStart,
+      width: len,
+      height: catThick,
+      color,
+      cornerSide: value > base ? "right" : value < base ? "left" : "none"
+    };
+  }
   return {
-    x,
-    y,
-    width,
-    height,
+    x: catStart,
+    y: lo,
+    width: catThick,
+    height: len,
     color,
-    cornerSide: cornerSideFor(baseY, valueY)
+    cornerSide: value < base ? "top" : value > base ? "bottom" : "none"
   };
 }
 function drawGroupedBars(ctx, model, radius, pen) {
   const readX = accessor(model.x.field);
   const readY = accessor(model.y.field ?? "");
+  const horizontal = model.orientation === "horizontal";
   const seriesCount = model.series.length;
   const bandWidth = model.x.bandwidth;
   const subWidth = seriesCount > 1 ? bandWidth / seriesCount : bandWidth;
   const gap = seriesCount > 1 && subWidth > 3 ? Math.min(1, subWidth * 0.15) : 0;
-  const barWidth = Math.max(0, subWidth - gap);
+  const barThick = Math.max(0, subWidth - gap);
   model.series.forEach((series, seriesIndex) => {
     ctx.fillStyle = series.color;
     for (const row of series.rows) {
@@ -7078,8 +7435,8 @@ function drawGroupedBars(ctx, model, radius, pen) {
       if (raw == null || raw === "" || !finite2(value)) continue;
       const center2 = model.x.pixel(readX(row));
       if (center2 == null) continue;
-      const left = center2 - bandWidth / 2 + seriesIndex * subWidth + gap / 2;
-      const rect = barRect(left, barWidth, model.y.baseline, model.y.pixel(value), series.color);
+      const catStart = center2 - bandWidth / 2 + seriesIndex * subWidth + gap / 2;
+      const rect = orientedRect(horizontal, catStart, barThick, model.y.baseline, model.y.pixel(value), series.color);
       if (rect) drawRect(ctx, rect, radius, pen, rowAlpha(model.emphasis, row));
     }
   });
@@ -7087,6 +7444,7 @@ function drawGroupedBars(ctx, model, radius, pen) {
 function drawStackedBars(ctx, model, radius, pen) {
   const readX = accessor(model.x.field);
   const readY = accessor(model.y.field ?? "");
+  const horizontal = model.orientation === "horizontal";
   const positiveTotals = /* @__PURE__ */ new Map();
   const negativeTotals = /* @__PURE__ */ new Map();
   const segments = [];
@@ -7106,7 +7464,7 @@ function drawStackedBars(ctx, model, radius, pen) {
       const base = totals.get(categoryKey2) ?? 0;
       const top = base + value;
       totals.set(categoryKey2, top);
-      const rect = barRect(center2 - bandWidth / 2, bandWidth, model.y.pixel(base), model.y.pixel(top), series.color);
+      const rect = orientedRect(horizontal, center2 - bandWidth / 2, bandWidth, model.y.pixel(base), model.y.pixel(top), series.color);
       if (!rect) continue;
       segments.push({ ...rect, stackEndKey, alpha: rowAlpha(model.emphasis, row) });
       roundedEnds.set(stackEndKey, segments.length - 1);
@@ -7137,6 +7495,8 @@ function drawBar(surface, model) {
 }
 
 // src/charts/scatter.ts
+var QUANTIZE_MIN_POINTS = 4e3;
+var QUANTIZE_AREA_DIVISOR = 4;
 function isMissing(value) {
   return value == null || value === "";
 }
@@ -7146,6 +7506,35 @@ function isInvalidPositionValue(value) {
 function fixedRadius() {
   return 3.75;
 }
+function shouldQuantize(count, plot, hasSize) {
+  return !hasSize && count > QUANTIZE_MIN_POINTS && count > plot.width * plot.height / QUANTIZE_AREA_DIVISOR;
+}
+function quantizePoints(points) {
+  if (points.length === 0) return [];
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (const p of points) {
+    if (p.x < minX) minX = p.x;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.y > maxY) maxY = p.y;
+  }
+  const seen = /* @__PURE__ */ new Set();
+  const keep = [];
+  for (const p of points) {
+    const extentPoint = p.x === minX || p.x === maxX || p.y === minY || p.y === maxY;
+    const ix = Math.round(p.x);
+    const iy = Math.round(p.y);
+    const key = `${p.seriesKey}|${ix}|${iy}`;
+    if (extentPoint || !seen.has(key)) {
+      keep.push(p);
+      seen.add(key);
+    }
+  }
+  return keep;
+}
 function radiusScale(rows, field, plotSize) {
   const rMin = 3;
   const rMax = clamp(plotSize * 0.05, 10, 26);
@@ -7188,18 +7577,22 @@ function drawScatter(surface, model) {
         y: py,
         r: readSize ? radius(readSize(row)) : radius(),
         color: series.color,
-        alpha: rowAlpha(model.emphasis, row)
+        alpha: rowAlpha(model.emphasis, row),
+        seriesKey: series.key
       });
     }
   }
-  if (sizeField) points.sort((a, b) => b.r - a.r);
+  const originalCount = points.length;
+  const drawPoints = shouldQuantize(originalCount, plot, !!sizeField) ? quantizePoints(points) : points;
+  model.markStats = { drawn: drawPoints.length, original: originalCount };
+  if (sizeField) drawPoints.sort((a, b) => b.r - a.r);
   ctx.save();
   ctx.beginPath();
   ctx.rect(plot.x, plot.y, plot.width, plot.height);
   ctx.clip();
   if (model.sketch) {
     const pen = new RoughPen(ctx, model.sketch);
-    for (const point of points) {
+    for (const point of drawPoints) {
       const prev = ctx.globalAlpha;
       if (point.alpha !== 1) ctx.globalAlpha = point.alpha;
       pen.circle(point.x, point.y, point.r, {
@@ -7215,7 +7608,7 @@ function drawScatter(surface, model) {
   }
   ctx.lineWidth = 1;
   ctx.strokeStyle = tokens.color.background;
-  for (const point of points) {
+  for (const point of drawPoints) {
     ctx.beginPath();
     ctx.arc(point.x, point.y, point.r, 0, Math.PI * 2);
     ctx.fillStyle = point.color;
@@ -7473,10 +7866,10 @@ function buildBoxInteraction(model) {
 
 // src/charts/chrome.ts
 var CHROME_PAD = { top: 14, right: 16, bottom: 14, left: 16 };
-function resolveTitle2(title) {
-  if (typeof title === "string") return { text: title, align: "left" };
-  if (title && typeof title === "object") {
-    const t = title;
+function resolveTitle2(title2) {
+  if (typeof title2 === "string") return { text: title2, align: "left" };
+  if (title2 && typeof title2 === "object") {
+    const t = title2;
     return { text: t.text, subtitle: t.subtitle, align: t.align ?? "left" };
   }
   return { align: "left" };
@@ -7531,9 +7924,9 @@ function addOverlayText(surface, tokens, o) {
   surface.overlay.appendChild(el);
   return el;
 }
-function drawTitleBlock(surface, tokens, size, title) {
+function drawTitleBlock(surface, tokens, size, title2) {
   const f = tokens.font;
-  const t = resolveTitle2(title);
+  const t = resolveTitle2(title2);
   let top = CHROME_PAD.top;
   const innerWidth = size.width - CHROME_PAD.left - CHROME_PAD.right;
   if (t.text) {
@@ -9912,11 +10305,11 @@ function buildHeader(opts) {
   thead.appendChild(tr);
   return thead;
 }
-function makeHeaderCell(opts, title, colIndex, align, rowIndex = 0) {
+function makeHeaderCell(opts, title2, colIndex, align, rowIndex = 0) {
   const th = document.createElement("th");
   const metrics = densityMetrics(opts.density);
   th.scope = "col";
-  th.textContent = title;
+  th.textContent = title2;
   const isSorted = colIndex != null && opts.sortState?.col === colIndex;
   if (isSorted) th.setAttribute("aria-sort", opts.sortState?.dir === "desc" ? "descending" : "ascending");
   setCellBaseStyles(th, opts.tokens, align ?? "left", opts.stickyHeader !== false, metrics.padding);
@@ -9948,7 +10341,7 @@ function makeHeaderCell(opts, title, colIndex, align, rowIndex = 0) {
       font: "inherit"
     });
     const label = document.createElement("span");
-    label.textContent = title;
+    label.textContent = title2;
     label.style.overflow = "hidden";
     label.style.textOverflow = "ellipsis";
     const glyph = document.createElement("span");
@@ -10777,10 +11170,10 @@ function prepareMatrix(spec) {
     },
     ...leafValueColumns.map(({ leaf, valueIndex }) => {
       const valueDef = spec.values[valueIndex];
-      const title = spec.values.length > 1 ? valueDef.label ?? valueDef.field : leaf.key;
+      const title2 = spec.values.length > 1 ? valueDef.label ?? valueDef.field : leaf.key;
       return {
         key: `${leaf.path.join(PATH_SEPARATOR2)}:${valueIndex}`,
-        title,
+        title: title2,
         align: "right",
         type: "quantitative",
         format: valueDef.showAs && valueDef.showAs !== "value" ? ".1%" : valueDef.format,
@@ -10978,8 +11371,8 @@ function mountSlicerShell(surface, tokens, size, opts = {}) {
     color: c.text,
     font: fontString(tokens.font.size.base, tokens.font.family, tokens.font.weight.normal)
   });
-  const title = resolveTitle2(opts.title);
-  const labelText2 = title.text ?? opts.label;
+  const title2 = resolveTitle2(opts.title);
+  const labelText2 = title2.text ?? opts.label;
   const header = document.createElement("div");
   Object.assign(header.style, {
     display: "flex",
@@ -10993,16 +11386,16 @@ function mountSlicerShell(surface, tokens, size, opts = {}) {
   labelEl.textContent = labelText2 ?? "";
   Object.assign(labelEl.style, {
     font: fontString(
-      title.text ? tokens.font.size.large : tokens.font.size.small,
+      title2.text ? tokens.font.size.large : tokens.font.size.small,
       tokens.font.family,
-      title.text ? tokens.font.weight.bold : tokens.font.weight.medium
+      title2.text ? tokens.font.weight.bold : tokens.font.weight.medium
     ),
-    color: title.text ? c.text : c.textMuted,
+    color: title2.text ? c.text : c.textMuted,
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis"
   });
-  if (title.subtitle) labelEl.title = title.subtitle;
+  if (title2.subtitle) labelEl.title = title2.subtitle;
   const clearSlot = document.createElement("div");
   clearSlot.style.flex = "0 0 auto";
   header.appendChild(labelEl);
@@ -11104,8 +11497,8 @@ function makePopover(tokens) {
   const c = tokens.color;
   const pop = document.createElement("div");
   Object.assign(pop.style, {
-    position: "absolute",
-    zIndex: "20",
+    position: "fixed",
+    zIndex: "2147483000",
     background: c.surface,
     border: `1px solid ${c.border}`,
     borderRadius: `${tokens.radius.md}px`,
@@ -11322,14 +11715,26 @@ function makeDualSlider(tokens, opts) {
     }
   };
 }
-function positionPopover(pop, anchor, host) {
+function positionPopover(pop, anchor) {
   const a = anchor.getBoundingClientRect();
-  const h = host.getBoundingClientRect();
-  pop.style.left = `${a.left - h.left}px`;
-  pop.style.top = `${a.bottom - h.top + 4}px`;
+  const vw = window.innerWidth || document.documentElement.clientWidth || 0;
+  const vh = window.innerHeight || document.documentElement.clientHeight || 0;
+  const margin = 8;
+  const gap = 4;
   pop.style.width = `${a.width}px`;
-  const maxH = Math.max(80, h.bottom - a.bottom - 8);
-  pop.style.maxHeight = `${maxH}px`;
+  const left = Math.min(Math.max(margin, a.left), Math.max(margin, vw - a.width - margin));
+  pop.style.left = `${left}px`;
+  const spaceBelow = vh - a.bottom - margin;
+  const spaceAbove = a.top - margin;
+  if (spaceBelow >= 160 || spaceBelow >= spaceAbove) {
+    pop.style.top = `${a.bottom + gap}px`;
+    pop.style.bottom = "";
+    pop.style.maxHeight = `${Math.max(80, spaceBelow - gap)}px`;
+  } else {
+    pop.style.top = "";
+    pop.style.bottom = `${vh - a.top + gap}px`;
+    pop.style.maxHeight = `${Math.max(80, spaceAbove - gap)}px`;
+  }
 }
 function clamp7(v, lo, hi) {
   return v < lo ? lo : v > hi ? hi : v;
@@ -11390,12 +11795,14 @@ function emptyNotice(host, message, color) {
 }
 
 // src/charts/slicers/dropdown.ts
+var openMenus = /* @__PURE__ */ new WeakMap();
 function drawDropdown(surface, spec, tokens, size, context) {
   const s = spec;
   if (surface.headless) {
     drawDropdownCanvas(surface, s, tokens, size, context);
     return;
   }
+  openMenus.get(surface)?.();
   const shell = mountSlicerShell(surface, tokens, size, {
     title: s.title,
     label: slicerLabel(s)
@@ -11429,16 +11836,34 @@ function drawDropdown(surface, spec, tokens, size, context) {
     emit();
   };
   let pop = null;
+  const reposition = () => {
+    if (!pop) return;
+    if (!trigger.isConnected) {
+      closeMenu();
+      return;
+    }
+    positionPopover(pop, trigger);
+  };
   const closeMenu = () => {
     if (pop) {
       pop.remove();
       pop = null;
       document.removeEventListener("pointerdown", onOutside, true);
+      document.removeEventListener("keydown", onKey, true);
+      window.removeEventListener("scroll", reposition, true);
+      window.removeEventListener("resize", reposition);
+      openMenus.delete(surface);
     }
   };
   const onOutside = (e) => {
     if (pop && !pop.contains(e.target) && !trigger.contains(e.target)) closeMenu();
   };
+  const onKey = (e) => {
+    if (e.key === "Escape" && pop) {
+      closeMenu();
+      trigger.focus();
+    }
+  };
   const openMenu = () => {
     if (pop) {
       closeMenu();
@@ -11469,9 +11894,13 @@ function drawDropdown(surface, spec, tokens, size, context) {
       });
       pop.appendChild(row);
     }
-    shell.host.appendChild(pop);
-    positionPopover(pop, trigger, shell.host);
+    document.body.appendChild(pop);
+    positionPopover(pop, trigger);
+    openMenus.set(surface, closeMenu);
     document.addEventListener("pointerdown", onOutside, true);
+    document.addEventListener("keydown", onKey, true);
+    window.addEventListener("scroll", reposition, true);
+    window.addEventListener("resize", reposition);
   };
   trigger.addEventListener("click", openMenu);
   refreshChrome();
@@ -12131,10 +12560,12 @@ function tooltipEnabled(spec) {
   return true;
 }
 function buildCartesianInteraction(model) {
-  if (!tooltipEnabled(model.spec)) return null;
-  if (model.series.length === 0) return null;
-  if (model.spec.type === "scatter") return scatterInteraction(model);
-  return indexInteraction(model);
+  if (!tooltipEnabled(model.spec) || model.series.length === 0) {
+    return model.legendHits?.length ? { region: model.plot, hitTest: () => null, legendHits: model.legendHits } : null;
+  }
+  const interaction = model.spec.type === "scatter" ? scatterInteraction(model) : indexInteraction(model);
+  if (interaction) interaction.legendHits = model.legendHits;
+  return interaction;
 }
 function inside(r, px, py, pad3 = 0) {
   return px >= r.x - pad3 && px <= r.x + r.width + pad3 && py >= r.y - pad3 && py <= r.y + r.height + pad3;
@@ -12148,6 +12579,7 @@ function indexInteraction(model) {
   const xFormat = model.spec.encoding.x?.format;
   const yFormat = model.spec.encoding.y?.format;
   const band = x.kind === "band";
+  const horizontal = model.orientation === "horizontal";
   const showDots = !model.stacked && !band;
   const stopByKey = /* @__PURE__ */ new Map();
   const lookups = [];
@@ -12182,7 +12614,7 @@ function indexInteraction(model) {
   };
   const hitTest = (px, py) => {
     if (!inside(plot, px, py, 6)) return null;
-    const best = nearestStop(px);
+    const best = nearestStop(horizontal ? py : px);
     const rows = [];
     const dots = [];
     let nearestDy = Infinity;
@@ -12210,15 +12642,19 @@ function indexInteraction(model) {
     const anchorY = showDots && nearestIdx >= 0 ? dots[nearestIdx].py : py;
     return {
       key: best.key,
-      anchorX: best.px,
-      anchorY,
+      anchorX: horizontal ? px : best.px,
+      anchorY: horizontal ? best.px : anchorY,
       content: { title: formatValue(best.value, xFormat), rows },
       draw: (ctx) => {
         ctx.save();
         if (band) {
           const half = x.bandwidth / 2;
           ctx.fillStyle = withAlpha(model.tokens.color.text, 0.06);
-          ctx.fillRect(best.px - half, plot.y, x.bandwidth, plot.height);
+          if (horizontal) {
+            ctx.fillRect(plot.x, best.px - half, plot.width, x.bandwidth);
+          } else {
+            ctx.fillRect(best.px - half, plot.y, x.bandwidth, plot.height);
+          }
         } else {
           ctx.strokeStyle = withAlpha(model.tokens.color.text, 0.28);
           ctx.lineWidth = 1;
@@ -12247,7 +12683,7 @@ function indexInteraction(model) {
   };
   const pick = (px, py) => {
     if (!inside(plot, px, py, 6)) return null;
-    const best = nearestStop(px);
+    const best = nearestStop(horizontal ? py : px);
     return { kind: "point", fields: [xField], tuples: [[best.value]] };
   };
   return { region: plot, hitTest, pick };
@@ -12285,17 +12721,35 @@ function scatterInteraction(model) {
     }
   }
   if (points.length === 0) return null;
+  const cell = HIT_RADIUS;
+  const grid = /* @__PURE__ */ new Map();
+  for (let i = 0; i < points.length; i++) {
+    const col = Math.floor(points[i].px / cell);
+    const row = Math.floor(points[i].py / cell);
+    const key = `${col},${row}`;
+    const bucket = grid.get(key);
+    if (bucket) bucket.push(i);
+    else grid.set(key, [i]);
+  }
   const nearest = (px, py) => {
     if (!inside(plot, px, py, HIT_RADIUS)) return -1;
     let best = -1;
     let bestSq = HIT_RADIUS * HIT_RADIUS;
-    for (let i = 0; i < points.length; i++) {
-      const dx = points[i].px - px;
-      const dy = points[i].py - py;
-      const sq = dx * dx + dy * dy;
-      if (sq <= bestSq) {
-        bestSq = sq;
-        best = i;
+    const col = Math.floor(px / cell);
+    const row = Math.floor(py / cell);
+    for (let dc = -1; dc <= 1; dc++) {
+      for (let dr = -1; dr <= 1; dr++) {
+        const bucket = grid.get(`${col + dc},${row + dr}`);
+        if (!bucket) continue;
+        for (const i of bucket) {
+          const dx = points[i].px - px;
+          const dy = points[i].py - py;
+          const sq = dx * dx + dy * dy;
+          if (sq < bestSq || sq === bestSq && i > best) {
+            bestSq = sq;
+            best = i;
+          }
+        }
       }
     }
     return best;
@@ -12596,6 +13050,8 @@ function buildComboModel(spec, tokens, opts) {
       series: [{ key: "", label: name, color, value: name, rows: data }],
       seriesField: void 0,
       stacked: false,
+      orientation: "vertical",
+      project: (c, v) => ({ x: c, y: v }),
       xTicks,
       yTicks: sideTicks,
       colorOf: () => color,
@@ -12623,6 +13079,8 @@ function buildComboModel(spec, tokens, opts) {
     series: [],
     seriesField: void 0,
     stacked: false,
+    orientation: "vertical",
+    project: (c, v) => ({ x: c, y: v }),
     xTicks,
     yTicks: leftTicks,
     colorOf: () => "",
@@ -12860,6 +13318,8 @@ function buildHistogramModel(spec, tokens, opts) {
     series: [],
     seriesField: void 0,
     stacked: false,
+    orientation: "vertical",
+    project: (c, v) => ({ x: c, y: v }),
     xTicks,
     yTicks,
     colorOf: () => color,
@@ -13269,8 +13729,8 @@ function resolveValue2(ref, data) {
 function valueField2(ref) {
   return typeof ref === "number" ? null : ref.field;
 }
-function titleText(title) {
-  return resolveTitle2(title).text;
+function titleText(title2) {
+  return resolveTitle2(title2).text;
 }
 function withAlpha3(color, alpha) {
   const rgba2 = parseColor(color);
@@ -13454,9 +13914,9 @@ function drawGauge(surface, spec, tokens, size, context) {
 function clamp9(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
-function titleText2(title) {
-  if (typeof title === "string") return title;
-  if (title && typeof title === "object") return title.text;
+function titleText2(title2) {
+  if (typeof title2 === "string") return title2;
+  if (title2 && typeof title2 === "object") return title2.text;
   return void 0;
 }
 function valueField3(ref) {
@@ -14063,6 +14523,8 @@ function buildWaterfallModel(spec, tokens, opts) {
     series: [],
     seriesField: void 0,
     stacked: false,
+    orientation: "vertical",
+    project: (c, v) => ({ x: c, y: v }),
     xTicks,
     yTicks,
     colorOf: () => incColor,
@@ -14324,6 +14786,8 @@ function buildSlopeModel(spec, tokens, opts) {
     series: [],
     seriesField: void 0,
     stacked: false,
+    orientation: "vertical",
+    project: (c, v) => ({ x: c, y: v }),
     xTicks,
     yTicks,
     colorOf: () => tokens.color.text,
@@ -14798,9 +15262,14 @@ function toPixel(model, axis, value) {
   return px != null && Number.isFinite(px) ? px : void 0;
 }
 function pointPixels(model, ann) {
-  const px = toPixel(model, "x", ann.x);
-  const py = toPixel(model, "y", ann.y);
-  return px === void 0 || py === void 0 ? void 0 : { px, py };
+  const cat = toPixel(model, "x", ann.x);
+  const val = toPixel(model, "y", ann.y);
+  if (cat === void 0 || val === void 0) return void 0;
+  const { x, y } = model.project(cat, val);
+  return { px: x, py: y };
+}
+function drawsHorizontalRule(model, axis) {
+  return model.orientation === "horizontal" ? axis === "x" : axis === "y";
 }
 function anchorPixel(model, ann, axis, kind) {
   if (kind === "line") return toPixel(model, axis, ann.value);
@@ -14849,6 +15318,7 @@ function drawAnnotations(surface, model) {
     }
     const axis = ann.axis === "x" ? "x" : "y";
     const color = ann.color ?? tokens.color.textMuted;
+    const ruleHorizontal = drawsHorizontalRule(model, axis);
     if (kindOf(ann) === "line") {
       const p = toPixel(model, axis, ann.value);
       if (p === void 0) continue;
@@ -14857,7 +15327,7 @@ function drawAnnotations(surface, model) {
       ctx.lineWidth = ann.strokeWidth ?? 1.5;
       ctx.setLineDash(ann.strokeDash ?? DEFAULT_DASH);
       ctx.beginPath();
-      if (axis === "y") {
+      if (ruleHorizontal) {
         const y = crisp(p);
         ctx.moveTo(plot.x, y);
         ctx.lineTo(x1, y);
@@ -14878,7 +15348,7 @@ function drawAnnotations(surface, model) {
     ctx.save();
     ctx.globalAlpha = ann.fillOpacity ?? DEFAULT_FILL_OPACITY;
     ctx.fillStyle = color;
-    if (axis === "y") ctx.fillRect(plot.x, lo, plot.width, hi - lo);
+    if (ruleHorizontal) ctx.fillRect(plot.x, lo, plot.width, hi - lo);
     else ctx.fillRect(lo, plot.y, hi - lo, plot.height);
     ctx.restore();
     ctx.save();
@@ -14887,7 +15357,7 @@ function drawAnnotations(surface, model) {
     ctx.lineWidth = 1;
     ctx.setLineDash(ann.strokeDash ?? [4, 4]);
     ctx.beginPath();
-    if (axis === "y") {
+    if (ruleHorizontal) {
       ctx.moveTo(plot.x, crisp(lo));
       ctx.lineTo(x1, crisp(lo));
       ctx.moveTo(plot.x, crisp(hi));
@@ -14903,10 +15373,10 @@ function drawAnnotations(surface, model) {
   }
   ctx.restore();
 }
-function labelBox(model, axis, pos, p) {
+function labelBox(model, horizontalRule, pos, p) {
   const { plot } = model;
   const inset = 6;
-  if (axis === "y") {
+  if (horizontalRule) {
     const top = p - 3;
     const transform3 = "translateY(-100%)";
     if (pos === "start") return { left: plot.x + inset, top, width: plot.width - inset, align: "left", transform: transform3 };
@@ -14942,7 +15412,7 @@ function drawAnnotationLabels(surface, model) {
       const axis = ann.axis === "x" ? "x" : "y";
       const p = anchorPixel(model, ann, axis, kindOf(ann));
       if (p === void 0) continue;
-      box = labelBox(model, axis, ann.labelPosition ?? "end", p);
+      box = labelBox(model, drawsHorizontalRule(model, axis), ann.labelPosition ?? "end", p);
     }
     const color = ann.color ?? tokens.color.text;
     const pill = { background: withAlpha4(tokens.color.background, 0.72), radius: 3, padX: 3, padY: 1 };
@@ -15285,6 +15755,13 @@ var Tooltip = class {
 };
 
 // src/interaction/controller.ts
+function resolveLegendHit(model, px, py) {
+  for (const hit of model.legendHits ?? []) {
+    const r = hit.rect;
+    if (px >= r.x && px <= r.x + r.width && py >= r.y && py <= r.y + r.height) return hit;
+  }
+  return null;
+}
 var InteractionController = class {
   constructor(surface, tokens) {
     __publicField(this, "surface", surface);
@@ -15313,9 +15790,17 @@ var InteractionController = class {
     __publicField(this, "onClick", (e) => {
       const cfg = this.selectCfg;
       const model = this.model;
-      if (!cfg || !model || !model.pick) return;
+      if (!cfg || !model) return;
       const rect = this.surface.root.getBoundingClientRect();
-      cfg.onPick(model.pick(e.clientX - rect.left, e.clientY - rect.top));
+      const px = e.clientX - rect.left;
+      const py = e.clientY - rect.top;
+      const onLegendToggle = cfg.onLegendToggle;
+      const legendHit = onLegendToggle ? resolveLegendHit(model, px, py) : null;
+      if (legendHit && onLegendToggle) {
+        onLegendToggle(legendHit, e);
+        return;
+      }
+      if (model.pick && cfg.onPick) cfg.onPick(model.pick(px, py));
     });
     __publicField(this, "flush", () => {
       this.raf = 0;
@@ -15343,7 +15828,7 @@ var InteractionController = class {
     this.tokens = tokens;
     this.tooltip.setTokens(tokens);
     this.activeKey = null;
-    this.pickable = Boolean(model?.pick);
+    this.pickable = Boolean(model?.pick || model?.legendHits?.length);
     if (!model) this.tooltip.hide();
   }
   /** Wire click/tap selection for this chart (or `null` to disable it). */
@@ -15611,6 +16096,14 @@ function buildRenderReport(input) {
   const colorCount = model ? new Set(seriesColors).size || 1 : seriesCount;
   const markCount = model ? model.series.reduce((n, s) => n + s.rows.length, 0) : data.length;
   const plot = model?.plot;
+  if (type === "scatter" && model?.markStats && model.markStats.drawn < model.markStats.original) {
+    add({
+      code: "scatter-quantized",
+      severity: "info",
+      message: `Dense scatter rendering was quantized from ${model.markStats.original} to ${model.markStats.drawn} drawn points to keep interaction smooth.`,
+      details: { drawn: model.markStats.drawn, original: model.markStats.original }
+    });
+  }
   const hasLiteralValue = VALUE_CHART_TYPES.has(type) && typeof spec.value === "number";
   if (data.length === 0 && !hasLiteralValue) {
     add({
@@ -15634,9 +16127,9 @@ function buildRenderReport(input) {
   }
   if (model) {
     checkDegenerateAxis(model, add);
-    checkClippedMarks(model, add);
-    checkAxisLabelOverlap(model, tokens, add);
-    checkLegendOverflow(model, add);
+    checkClippedMarks(model, spec, add);
+    checkAxisLabelOverlap(model, spec, tokens, add);
+    checkLegendOverflow(model, spec, add);
   }
   if (bg) {
     const specColor = spec.color;
@@ -15675,7 +16168,8 @@ function buildRenderReport(input) {
       code: "too-many-colors",
       severity: "info",
       message: `${colorCount} series share one color scale \u2014 beyond ~${MAX_DISTINGUISHABLE_SERIES} the colors repeat or blur together. Consider faceting, filtering, or grouping the long tail.`,
-      details: { colorCount, max: MAX_DISTINGUISHABLE_SERIES }
+      details: { colorCount, max: MAX_DISTINGUISHABLE_SERIES },
+      ...tooManyColorsRepair(spec)
     });
   }
   diagnostics.sort((a, b) => SEVERITY_RANK[a.severity] - SEVERITY_RANK[b.severity]);
@@ -15683,6 +16177,11 @@ function buildRenderReport(input) {
   const summary = summarize({ ...spec, data }) || void 0;
   return { type, size, plot, markCount, seriesCount, colorCount, ok, diagnostics, summary };
 }
+function repairReport(spec, report) {
+  const applied = report.diagnostics.flatMap((d) => d.fix ?? []);
+  if (applied.length === 0) return { spec, applied: [] };
+  return { spec: applyPatch(spec, applied), applied };
+}
 function seriesCountOf(spec, data) {
   const enc = spec.encoding;
   const field = enc?.series?.field ?? enc?.color?.field;
@@ -15714,7 +16213,7 @@ function checkDegenerateAxis(model, add) {
     });
   }
 }
-function checkClippedMarks(model, add) {
+function checkClippedMarks(model, spec, add) {
   const field = model.y.field;
   if (!field) return;
   const read = accessor(field);
@@ -15734,20 +16233,25 @@ function checkClippedMarks(model, add) {
   const pHi = model.y.pixel(hi);
   const pLo = model.y.pixel(lo);
   const EPS = 0.75;
-  if (pHi < top - EPS || pLo > bottom + EPS) {
+  const clipped = model.orientation === "horizontal" ? pLo < model.plot.x - EPS || pHi > model.plot.x + model.plot.width + EPS : pHi < top - EPS || pLo > bottom + EPS;
+  if (clipped) {
     add({
       code: "marks-clipped",
       severity: "warning",
       axis: "y",
       message: `Some data falls outside the y-axis range [${round(Math.min(lo, hi))}, ${round(Math.max(lo, hi))}] and is clipped at the plot edge \u2014 widen the y domain or drop the manual scale.`,
-      details: { dataMin: round(lo), dataMax: round(hi) }
+      details: { dataMin: round(lo), dataMax: round(hi) },
+      ...manualYDomainFix(spec) ?? {
+        hint: "Drop the manual y scale domain or set a y scale domain/zero option that includes every data value."
+      }
     });
   }
 }
-function checkAxisLabelOverlap(model, tokens, add) {
+function checkAxisLabelOverlap(model, spec, tokens, add) {
   const ticks2 = model.xTicks;
   if (ticks2.length < 2) return;
-  if (model.frame.xLabelAngle > 0) return;
+  const horizontal = model.orientation === "horizontal";
+  if (!horizontal && model.frame.xLabelAngle > 0) return;
   const font = fontString(tokens.font.size.small, tokens.font.family, tokens.font.weight.normal);
   const GAP3 = 4;
   let collisions = 0;
@@ -15755,7 +16259,7 @@ function checkAxisLabelOverlap(model, tokens, add) {
     const prev = ticks2[i - 1];
     const cur = ticks2[i];
     const spacing = Math.abs(cur.pos - prev.pos);
-    const half = (measureText(prev.label, font).width + measureText(cur.label, font).width) / 2;
+    const half = horizontal ? tokens.font.size.small : (measureText(prev.label, font).width + measureText(cur.label, font).width) / 2;
     if (half + GAP3 > spacing) collisions++;
   }
   if (collisions > 0) {
@@ -15764,11 +16268,14 @@ function checkAxisLabelOverlap(model, tokens, add) {
       severity: "warning",
       axis: "x",
       message: `${collisions} adjacent x-axis label${collisions === 1 ? "" : "s"} overlap \u2014 there isn't room to show all ${ticks2.length} categories. Reduce categories, widen the chart, or aggregate the long tail.`,
-      details: { collisions, ticks: ticks2.length }
+      details: { collisions, ticks: ticks2.length },
+      ...xLabelAngleFix(spec) ?? {
+        hint: "Rotate x-axis labels, facet the chart, widen it, or aggregate the long tail."
+      }
     });
   }
 }
-function checkLegendOverflow(model, add) {
+function checkLegendOverflow(model, spec, add) {
   const shown = model.frame.legendItems?.length;
   if (shown === void 0) return;
   const total = model.series.length;
@@ -15777,10 +16284,52 @@ function checkLegendOverflow(model, add) {
       code: "legend-overflow",
       severity: "warning",
       message: `The legend shows only ${shown} of ${total} series \u2014 the rest were clipped to fit. Move the legend to the top/bottom or give the chart more height.`,
-      details: { shown, total }
+      details: { shown, total },
+      ...legendPositionFix(spec) ?? {
+        hint: "Move the legend to top/bottom, increase chart height, filter series, or facet the chart."
+      }
     });
   }
 }
+function isRecord(v) {
+  return v !== null && typeof v === "object" && !Array.isArray(v) && !(v instanceof Date);
+}
+function xLabelAngleFix(spec) {
+  const axes = spec.axes;
+  if (!isRecord(axes)) return void 0;
+  const x = axes.x;
+  if (x === void 0) return { fix: [{ op: "add", path: "/axes/x", value: { labelAngle: 45 } }] };
+  if (!isRecord(x)) return void 0;
+  const op = Object.prototype.hasOwnProperty.call(x, "labelAngle") ? "replace" : "add";
+  return { fix: [{ op, path: "/axes/x/labelAngle", value: 45 }] };
+}
+function legendPositionFix(spec) {
+  const legend = spec.legend;
+  if (legend === false) return void 0;
+  if (legend === void 0 || legend === true) {
+    return { fix: [{ op: legend === void 0 ? "add" : "replace", path: "/legend", value: { position: "bottom" } }] };
+  }
+  if (!isRecord(legend)) return void 0;
+  const current = legend.position;
+  if (current === "bottom" || current === "top") return void 0;
+  const op = Object.prototype.hasOwnProperty.call(legend, "position") ? "replace" : "add";
+  return { fix: [{ op, path: "/legend/position", value: "bottom" }] };
+}
+function tooManyColorsRepair(spec) {
+  const palette = spec.palette;
+  const hint = "Switch to the colorblind palette, facet the chart, filter series, or group the long tail.";
+  if (Array.isArray(palette) || palette === "colorblind") return { hint };
+  return { fix: [{ op: palette === void 0 ? "add" : "replace", path: "/palette", value: "colorblind" }], hint };
+}
+function manualYDomainFix(spec) {
+  const enc = spec.encoding;
+  if (!isRecord(enc)) return void 0;
+  const y = enc.y;
+  if (!isRecord(y)) return void 0;
+  const scale = y.scale;
+  if (!isRecord(scale) || !Object.prototype.hasOwnProperty.call(scale, "domain")) return void 0;
+  return { fix: [{ op: "remove", path: "/encoding/y/scale/domain" }] };
+}
 
 // src/runtime/facet.ts
 var FACETABLE_TYPES2 = /* @__PURE__ */ new Set(["line", "area", "bar", "scatter"]);
@@ -15816,9 +16365,9 @@ function autoColumns(n) {
 function legendSymbol(type) {
   return type === "scatter" ? "circle" : type === "line" ? "line" : "square";
 }
-function titleInput3(title) {
-  if (!title) return void 0;
-  return typeof title === "string" ? { text: title } : title;
+function titleInput3(title2) {
+  if (!title2) return void 0;
+  return typeof title2 === "string" ? { text: title2 } : title2;
 }
 function panelSpec(spec, data, value) {
   const base = spec;
@@ -15989,6 +16538,60 @@ var CANVAS_MARK_TYPES = /* @__PURE__ */ new Set([
   "choropleth"
 ]);
 var EMPTY_DATA = [];
+function legendConfigFor(model) {
+  const legend = model.spec.legend;
+  if (!(typeof legend === "object" && legend.interactive === true)) return null;
+  const field = model.seriesField;
+  if (!field || !model.legendHits?.length) return null;
+  return { param: legend.param ?? field, field };
+}
+function visibleLegendKeys(value, field) {
+  if (!value || value.kind !== "set" || value.field !== field) return null;
+  return new Set(value.values.map((v) => toKey(v)));
+}
+function applyLegendVisibility(model, store) {
+  const cfg = legendConfigFor(model);
+  if (!cfg) return null;
+  const visible = visibleLegendKeys(store.get(cfg.param), cfg.field);
+  if (!visible) return cfg;
+  model.series = model.series.filter((s) => visible.has(toKey(s.value)));
+  return cfg;
+}
+function publishLegendToggle(store, cfg, allHits, hit, isolate) {
+  const all = allHits.map((h) => h.value);
+  const allKeys = all.map((v) => toKey(v));
+  const hitKey = toKey(hit.value);
+  const current = visibleLegendKeys(store.get(cfg.param), cfg.field);
+  const visible = current ? new Set(current) : new Set(allKeys);
+  if (isolate) {
+    if (visible.size === 1 && visible.has(hitKey)) {
+      store.set(cfg.param, null);
+      return;
+    }
+    visible.clear();
+    visible.add(hitKey);
+  } else if (visible.has(hitKey)) {
+    visible.delete(hitKey);
+  } else {
+    visible.add(hitKey);
+  }
+  if (visible.size === 0 || visible.size === allKeys.length) {
+    store.set(cfg.param, null);
+    return;
+  }
+  store.set(cfg.param, {
+    kind: "set",
+    field: cfg.field,
+    values: all.filter((v) => visible.has(toKey(v)))
+  });
+}
+function specLegendParam(spec) {
+  const legend = spec.legend;
+  if (!(typeof legend === "object" && legend.interactive === true)) return null;
+  if (legend.param) return legend.param;
+  const enc = spec.encoding;
+  return enc?.series?.field ?? enc?.color?.field ?? null;
+}
 function resolveContainer(target) {
   if (typeof target === "string") {
     const el = document.querySelector(target);
@@ -16084,6 +16687,7 @@ function render(target, spec, options) {
     let interactionModel = null;
     let reportModel;
     let facetRpt;
+    let legendSelect = null;
     const type = currentSpec.type;
     const facetLayout = isFaceted(effectiveSpec) ? buildFacetModels(effectiveSpec, tokens, size) : null;
     if (facetLayout) {
@@ -16092,6 +16696,8 @@ function render(target, spec, options) {
     } else if (CARTESIAN_TYPES.has(type)) {
       const renderer = cartesianRenderers[type];
       const model = buildCartesianModel(effectiveSpec, tokens, size);
+      const legendCfg = applyLegendVisibility(model, store);
+      if (legendCfg && model.legendHits?.length) legendSelect = { cfg: legendCfg, hits: model.legendHits };
       model.emphasis = emphasis;
       reportModel = model;
       if (!anim.enabled) {
@@ -16140,9 +16746,14 @@ function render(target, spec, options) {
     }
     if (!interaction) interaction = new InteractionController(surface, tokens);
     interaction.setModel(interactionModel, tokens);
-    if (ownParam && interactionModel?.pick) {
-      const cfg = { store, param: ownParam.name, def: ownParam.select };
-      interaction.setSelect({ onPick: (value) => applyPick(cfg, value) });
+    if (ownParam && interactionModel?.pick || legendSelect && interactionModel?.legendHits?.length) {
+      const cfg = ownParam ? { store, param: ownParam.name, def: ownParam.select } : null;
+      interaction.setSelect({
+        onPick: cfg && interactionModel?.pick ? (value) => applyPick(cfg, value) : void 0,
+        onLegendToggle: legendSelect ? (hit, event) => {
+          publishLegendToggle(store, legendSelect.cfg, legendSelect.hits, hit, event.shiftKey || event.altKey);
+        } : void 0
+      });
     } else {
       interaction.setSelect(null);
     }
@@ -16199,7 +16810,7 @@ function render(target, spec, options) {
   const unsubscribe = store.subscribe((name, value) => {
     for (const listener of [...hostListeners]) listener(name, value);
     if (destroyed) return;
-    if (dependentParams(currentSpec.highlight, currentSpec.filter).has(name)) {
+    if (dependentParams(currentSpec.highlight, currentSpec.filter).has(name) || specLegendParam(currentSpec) === name) {
       draw(false);
     }
   });
@@ -16380,6 +16991,14 @@ function isSlicerType(type) {
 function fieldOf(channel) {
   return channel && typeof channel.field === "string" ? channel.field : void 0;
 }
+function legendSource(spec) {
+  const legend = spec.legend;
+  if (!(typeof legend === "object" && legend.interactive === true)) return null;
+  const enc = spec.encoding;
+  const field = fieldOf(enc?.series) ?? fieldOf(enc?.color);
+  if (!field) return null;
+  return { param: legend.param ?? field, field };
+}
 function specFields(spec) {
   const out = /* @__PURE__ */ new Set();
   if (isSlicerType(spec.type)) {
@@ -16468,9 +17087,14 @@ function wireViews(views, interactions) {
       });
     } else if (PICKABLE.has(type)) {
       const fields = keyFields(v.spec);
-      if (fields.length === 0) return;
-      const param = autoParamName(v);
-      sources.push({ view: i, param, fields, as: "highlight", slicer: false });
+      if (fields.length > 0) {
+        const param = autoParamName(v);
+        sources.push({ view: i, param, fields, as: "highlight", slicer: false });
+      }
+      const legend = legendSource(v.spec);
+      if (legend) {
+        sources.push({ view: i, param: legend.param, fields: [legend.field], as: "filter", slicer: true });
+      }
     }
   });
   const explicit = Array.isArray(interactions);
@@ -16536,6 +17160,14 @@ var DEFAULT_BREAKPOINTS = [
   { maxWidth: 960, cols: 6 }
 ];
 var STRIP_SLICERS = /* @__PURE__ */ new Set(["dropdown", "search", "dateRange", "range"]);
+function stripCellHeight(view, rowHeight) {
+  const titled = !!(view.title || view.subtitle);
+  const titlePad = titled ? 30 : 0;
+  const base = Math.max(96, rowHeight + 8);
+  if (view.spec.type === "dateRange") return Math.max(base, 150 + titlePad);
+  if (view.spec.type === "range") return Math.max(base, 132 + titlePad);
+  return Math.max(base, 96 + titlePad);
+}
 var clamp10 = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
 function defaultSpan(spec, cols) {
   const t = spec.type;
@@ -16799,14 +17431,14 @@ function renderDashboard(target, spec, options) {
           gap: "2px"
         });
         if (view.title) {
-          const title = document.createElement("div");
-          title.textContent = view.title;
-          Object.assign(title.style, {
+          const title2 = document.createElement("div");
+          title2.textContent = view.title;
+          Object.assign(title2.style, {
             font: `${tokens.font.weight.bold} ${tokens.font.size.base}px ${tokens.font.family}`,
             color: tokens.color.text,
             letterSpacing: "-0.01em"
           });
-          header.appendChild(title);
+          header.appendChild(title2);
         }
         if (view.subtitle) {
           const subtitle = document.createElement("div");
@@ -16838,6 +17470,7 @@ function renderDashboard(target, spec, options) {
       Object.assign(strip.style, {
         display: "flex",
         flexWrap: "wrap",
+        alignItems: "flex-start",
         gap: `${layout2.gap}px`
       });
       for (const view of stripViews) {
@@ -16845,7 +17478,7 @@ function renderDashboard(target, spec, options) {
         Object.assign(cell.style, {
           flex: "1 1 220px",
           minWidth: "200px",
-          height: `${Math.max(96, layout2.rowHeight + 8)}px`
+          height: `${stripCellHeight(view, layout2.rowHeight)}px`
         });
         strip.appendChild(cell);
         deferredMounts.push({ el: host, view, mounted: false });
@@ -16885,10 +17518,10 @@ function renderDashboard(target, spec, options) {
         const titles = document.createElement("span");
         Object.assign(titles.style, { display: "flex", flexDirection: "column", gap: "2px" });
         if (plan.section?.title) {
-          const title = document.createElement("span");
-          title.textContent = plan.section.title;
-          Object.assign(title.style, { fontWeight: String(tokens.font.weight.bold), fontSize: `${tokens.font.size.large}px` });
-          titles.appendChild(title);
+          const title2 = document.createElement("span");
+          title2.textContent = plan.section.title;
+          Object.assign(title2.style, { fontWeight: String(tokens.font.weight.bold), fontSize: `${tokens.font.size.large}px` });
+          titles.appendChild(title2);
         }
         if (plan.section?.subtitle) {
           const subtitle = document.createElement("span");
@@ -17231,6 +17864,6 @@ function renderToContext(target, spec) {
 // src/index.ts
 var VERSION = "0.1.0";
 
-export { CARTESIAN_TYPES, CHART_TYPES, CanvasLayer, DEFAULT_ENTRANCE_DURATION, DEFAULT_ROUGH_STYLE, DEFAULT_UPDATE_DURATION, DIM_ALPHA, ExpressionError, FACETABLE_TYPES2 as FACETABLE_TYPES, FUNCTION_NAMES, InteractionController, RoughPen, SKETCH_FONT_FAMILY, SKETCH_FONT_NAME, SLICER_TYPES, SR_ONLY_STYLE, Surface, TICK_SIZE, TIME_UNITS, TRANSFORM_KINDS, Tooltip, VERSION, aggregateValues, analyzeChart, animate, applyA11y, applyAggregate, applyBin, applyCalculate, applyFilter, applyFold, applyPatch, applyPick, applyTimeUnit, applyTransform, applyTransforms, arc, area, assertValidSpec, autoInsightAnnotations, backOut, bandScale, bounceOut, buildCartesianInteraction, buildCartesianModel, buildComboModel, buildDataTableFallback, buildFacetModels, buildHistogramModel, buildRenderReport, cartesianInteractionBuilders, cartesianRenderers, categorical, chartTitleText, chartTypeLabel, checkExpression, clamp012 as clamp01, clamp255, compileExpression, compilePredicate, computeBackingSize, computeBins, computeFrame, computeSeriesInsights, contrastRatio, createDiv, createRoughPen, createSelectionStore, cubicIn, cubicInOut, cubicOut, curveCatmullRom, curveLinear, curveMonotoneX, curveStep, curveStepAfter, curveStepBefore, customRenderers, darkTheme, decimate, defaultSpan, dependentParams, diverging, divergingColorScale, divergingSchemes, drawAnnotationLabels, drawAnnotations, drawAxesUnderlay, drawFacet, drawLegend, drawOverlay, drawTitle, drawTrendlineLabels, drawTrendlines, easings, elasticOut, ellipsize, ensureSketchFont, expoInOut, expoOut, facetReport, fillParentStyle, filterRows, fontString, formatDate, formatNumber2 as formatNumber, formatValue, getDevicePixelRatio, groupBy, hashString, inferFieldType, inferFieldTypes, inferValueType, inheritInto, interpolateArray, interpolateNumber, interpolateNumberArray, interpolateObject, interpolateOklab, interpolateRgb, isBrowser, isEmptyValue, isFaceted, isParamClause, isSlicerType, keyFields, legendSwatchWidth, lightTheme, line, linear, linearRegression, linearScale, linearToSrgb, lintSpec, literalToValue, logScale, lttbRun, makeMatcher, matchesValue, measureText, monotoneXTangents, mulberry32, niceDomain, oklabToOklch, oklabToRgb, oklchToOklab, ordinalColorScale, overlayTextToCanvasCmd, paintCanvasText, paintLegendSwatch, parseColor, parseNumberFormat, pivot, placeViews, pointScale, polygonHachureLines, prefersReducedMotion, prettyDate, quadIn, quadInOut, quadOut, rampFromStops, readableTextColor, relativeLuminance, render, renderDashboard, renderToContext, repairSpec, resolveCurve, resolveDashboardLayout, resolveDashboardSections, resolveEmphasis, resolveEntrance, resolveFilterValues, resolveInsightOptions, resolveSketch, resolveTheme, resolveUpdate, rgbToOklab, rgbaToCss, rotatePoint, roundedRect, sampleArc, sequential, sequentialColorScale, sequentialSchemes, setMeasureContext, setStyle, sinInOut, slicerParamName, smartDate, specFields, srgbToLinear, summarize, summarizeChart, themes, tickIncrement, tickStep, ticks, timeScale, timeTickFormat, timeTicks, toHex, toPointer, tooltipEnabled, truncateTo, validateDashboard, validateSpec, wireViews, withAlpha, withSketchFont };
+export { CARTESIAN_TYPES, CHART_TYPES, CanvasLayer, DEFAULT_ENTRANCE_DURATION, DEFAULT_ROUGH_STYLE, DEFAULT_UPDATE_DURATION, DIM_ALPHA, ExpressionError, FACETABLE_TYPES2 as FACETABLE_TYPES, FUNCTION_NAMES, InteractionController, RoughPen, SKETCH_FONT_FAMILY, SKETCH_FONT_NAME, SLICER_TYPES, SR_ONLY_STYLE, Surface, TICK_SIZE, TIME_UNITS, TRANSFORM_KINDS, Tooltip, VERSION, aggregateValues, analyzeChart, animate, applyA11y, applyAggregate, applyBin, applyCalculate, applyFilter, applyFold, applyPatch, applyPick, applyTimeUnit, applyTransform, applyTransforms, arc, area, assertValidSpec, autoInsightAnnotations, backOut, bandScale, bounceOut, buildCartesianInteraction, buildCartesianModel, buildComboModel, buildDataTableFallback, buildFacetModels, buildHistogramModel, buildRenderReport, cartesianInteractionBuilders, cartesianRenderers, categorical, categoricalSchemes, chartTitleText, chartTypeLabel, checkExpression, clamp012 as clamp01, clamp255, compileExpression, compilePredicate, computeBackingSize, computeBins, computeFrame, computeSeriesInsights, contrastRatio, createDiv, createRoughPen, createSelectionStore, cubicIn, cubicInOut, cubicOut, curveCatmullRom, curveLinear, curveMonotoneX, curveStep, curveStepAfter, curveStepBefore, customRenderers, darkTheme, decimate, defaultSpan, dependentParams, diverging, divergingColorScale, divergingSchemes, drawAnnotationLabels, drawAnnotations, drawAxesUnderlay, drawFacet, drawLegend, drawOverlay, drawTitle, drawTrendlineLabels, drawTrendlines, easings, elasticOut, ellipsize, ensureSketchFont, expoInOut, expoOut, facetReport, fillParentStyle, filterRows, fontString, formatDate, formatNumber2 as formatNumber, formatValue, getDevicePixelRatio, groupBy, hashString, inferFieldType, inferFieldTypes, inferValueType, inheritInto, interpolateArray, interpolateNumber, interpolateNumberArray, interpolateObject, interpolateOklab, interpolateRgb, isBrowser, isEmptyValue, isFaceted, isParamClause, isSlicerType, keyFields, legendSwatchWidth, lightTheme, line, linear, linearRegression, linearScale, linearToSrgb, lintSpec, literalToValue, logScale, lttbRun, makeMatcher, matchesValue, measureText, monotoneXTangents, mulberry32, niceDomain, oklabToOklch, oklabToRgb, oklchToOklab, ordinalColorScale, overlayTextToCanvasCmd, paintCanvasText, paintLegendSwatch, parseColor, parseNumberFormat, pivot, placeViews, pointScale, polygonHachureLines, prefersReducedMotion, prettyDate, profileColumns, quadIn, quadInOut, quadOut, rampFromStops, readableTextColor, recommendChart, relativeLuminance, render, renderDashboard, renderToContext, repairReport, repairSpec, resolveCurve, resolveDashboardLayout, resolveDashboardSections, resolveEmphasis, resolveEntrance, resolveFilterValues, resolveInsightOptions, resolveSketch, resolveTheme, resolveUpdate, rgbToOklab, rgbaToCss, rotatePoint, roundedRect, sampleArc, sequential, sequentialColorScale, sequentialSchemes, setMeasureContext, setStyle, sinInOut, slicerParamName, smartDate, specFields, srgbToLinear, summarize, summarizeChart, themes, tickIncrement, tickStep, ticks, timeScale, timeTickFormat, timeTicks, toHex, toPointer, tooltipEnabled, truncateTo, validateDashboard, validateSpec, wireViews, withAlpha, withSketchFont };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map