@opendata-ai/openchart-vanilla 8.0.0-rc.2 → 8.0.0-rc.20

package/dist/{chunk-W34KN7FD.js → chunk-2NAQRP66.js}

@@ -3,7 +3,7 @@ import {
   renderChromeElement,
   renderLegend,
   stampAnimationVars
-} from "./chunk-5EOV5JQZ.js";
+} from "./chunk-EKAUQAAX.js";
 
 // src/tilemap-renderer.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
@@ -295,4 +295,4 @@ function renderTileMapSVG(layout, opts) {
 export {
   renderTileMapSVG
 };
-//# sourceMappingURL=chunk-W34KN7FD.js.map
+//# sourceMappingURL=chunk-2NAQRP66.js.map

package/dist/chunk-DCODCLWI.js

@@ -0,0 +1,234 @@
+import {
+  embedFonts,
+  ensureSVGDimensions,
+  exportSVG,
+  getSVGBackgroundColor,
+  getSVGDimensions,
+  rasterizeSVGToCanvas
+} from "./chunk-T32UHMZA.js";
+import {
+  injectThemeStyleBlock
+} from "./chunk-RM5XS6NR.js";
+
+// src/gif-encode.ts
+function readCanvasSRGB(canvas) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Canvas 2D context not available");
+  return ctx.getImageData(0, 0, canvas.width, canvas.height, {
+    colorSpace: "srgb"
+  }).data;
+}
+function paletteFromCanvas(canvas, quantize) {
+  return quantize(readCanvasSRGB(canvas), 256);
+}
+
+// src/export-gif.ts
+var EASE_SMOOTH_SAMPLES = [
+  0,
+  0.157,
+  0.438,
+  0.64,
+  0.766,
+  0.85,
+  0.906,
+  0.941,
+  0.964,
+  0.978,
+  0.988,
+  0.994,
+  0.998,
+  1
+];
+function evalLinearSamples(samples, t) {
+  if (t <= 0) return samples[0];
+  if (t >= 1) return samples[samples.length - 1];
+  const scaled = t * (samples.length - 1);
+  const i = Math.floor(scaled);
+  const frac = scaled - i;
+  return samples[i] + (samples[i + 1] - samples[i]) * frac;
+}
+function ease(p, _kind) {
+  return evalLinearSamples(EASE_SMOOTH_SAMPLES, p);
+}
+function classifyTarget(groupOrEl) {
+  const cls = groupOrEl.getAttribute("class") ?? "";
+  if (cls.includes("oc-mark-rect") || cls.includes("oc-mark-bar")) {
+    const rect = groupOrEl.querySelector("rect") ?? groupOrEl.querySelector("path");
+    if (!rect) return null;
+    const horizontal = groupOrEl.getAttribute("data-orient") === "horizontal";
+    return { el: rect, kind: horizontal ? "bar-horizontal" : "bar-vertical" };
+  }
+  if (cls.includes("oc-mark-line") || cls.includes("oc-mark-area")) {
+    return { el: groupOrEl, kind: "line-area" };
+  }
+  if (cls.includes("oc-mark-arc") || cls.includes("oc-mark-point") || cls.includes("oc-mark-circle")) {
+    return { el: groupOrEl, kind: "fade" };
+  }
+  return { el: groupOrEl, kind: "fade" };
+}
+function collectTargets(clone, enterDurationMs, staggerMs) {
+  const els = clone.querySelectorAll("[data-animation-index]");
+  const targets = [];
+  for (const el of els) {
+    const classified = classifyTarget(el);
+    if (!classified) continue;
+    const idx = parseInt(el.getAttribute("data-animation-index") ?? "0", 10) || 0;
+    const isPoint = classified.kind === "fade" && /oc-mark-(point|circle)/.test(el.getAttribute("class") ?? "");
+    const lineOffset = isPoint && hasLineAreaSibling(el) ? enterDurationMs * 0.35 : 0;
+    targets.push({
+      el: classified.el,
+      kind: classified.kind,
+      startMs: staggerMs * idx + lineOffset,
+      durationMs: isPoint ? enterDurationMs * 0.4 : enterDurationMs
+    });
+  }
+  return targets;
+}
+function hasLineAreaSibling(point) {
+  let sib = point.previousElementSibling;
+  while (sib) {
+    const cls = sib.getAttribute("class") ?? "";
+    if (cls.includes("oc-mark-line") || cls.includes("oc-mark-area")) return true;
+    sib = sib.previousElementSibling;
+  }
+  return false;
+}
+var clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+function isModuleNotFound(err) {
+  const code = err?.code;
+  if (code === "ERR_MODULE_NOT_FOUND" || code === "MODULE_NOT_FOUND") return true;
+  const message = err?.message ?? "";
+  return /cannot find (module|package)|failed to (resolve|fetch)/i.test(message);
+}
+function resolveRepeat(loop) {
+  if (loop === true) return 0;
+  if (typeof loop === "number") return loop;
+  return -1;
+}
+function applyFrameState(target, nowMs, easeKind) {
+  const p = clamp01((nowMs - target.startMs) / target.durationMs);
+  const eased = ease(p, easeKind);
+  const style = target.el.style;
+  switch (target.kind) {
+    case "bar-vertical": {
+      const inset = (1 - eased) * 100;
+      style.clipPath = `inset(${inset}% 0 0 0)`;
+      style.opacity = String(clamp01(p / 0.75));
+      break;
+    }
+    case "bar-horizontal": {
+      const inset = (1 - eased) * 100;
+      style.clipPath = `inset(0 ${inset}% 0 0)`;
+      style.opacity = String(clamp01(p / 0.75));
+      break;
+    }
+    case "line-area": {
+      const inset = (1 - eased) * 100;
+      style.clipPath = `inset(0 ${inset}% 0 0)`;
+      style.opacity = String(clamp01(p / 0.15));
+      break;
+    }
+    case "fade": {
+      style.opacity = String(eased);
+      break;
+    }
+  }
+}
+function clearFrameState(target) {
+  const style = target.el.style;
+  style.clipPath = "";
+  style.opacity = "";
+}
+async function exportGIF(svgElement, animation, options) {
+  let gifenc;
+  try {
+    gifenc = await import("gifenc");
+  } catch (err) {
+    if (isModuleNotFound(err)) {
+      throw new Error(
+        "GIF export requires the optional 'gifenc' peer dependency. Install it: npm install gifenc"
+      );
+    }
+    throw new Error("GIF export failed to load the gifenc encoder", { cause: err });
+  }
+  const { GIFEncoder, quantize, applyPalette } = gifenc;
+  const fps = options?.fps ?? 25;
+  const dpi = options?.dpi ?? 2;
+  const shouldEmbed = options?.embedFonts ?? true;
+  const { width, height } = getSVGDimensions(svgElement);
+  if (!width || !height) {
+    throw new Error(`SVG has zero dimensions (width=${width}, height=${height})`);
+  }
+  const enter = animation?.enter;
+  const enterDurationMs = enter?.duration ?? 600;
+  const staggerMs = enter?.staggerDelay ?? 0;
+  const easeKind = enter?.ease ?? "smooth";
+  const clone = svgElement.cloneNode(true);
+  injectThemeStyleBlock(clone, options?.theme);
+  if (shouldEmbed) {
+    await embedFonts(clone);
+  }
+  const targets = collectTargets(clone, enterDurationMs, staggerMs);
+  const annotationDelay = animation?.annotationDelay ?? 0;
+  const lastMarkEnd = targets.reduce(
+    (m, t) => Math.max(m, t.startMs + t.durationMs),
+    enterDurationMs
+  );
+  const lastEnd = Math.max(lastMarkEnd, enterDurationMs + annotationDelay);
+  const totalMs = options?.durationMs ?? lastEnd + 300;
+  const frameDelay = Math.round(1e3 / fps);
+  const totalFrames = Math.max(1, Math.round(totalMs / 1e3 * fps));
+  const repeat = resolveRepeat(options?.loop);
+  const bgColor = options?.backgroundColor ?? getSVGBackgroundColor(svgElement, options?.theme?.colors.background);
+  const fillBackground = (ctx, cv) => {
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, cv.width, cv.height);
+  };
+  const gif = GIFEncoder();
+  let globalPalette = [];
+  await seedPalette(clone, targets, width, height, dpi, fillBackground, (data) => {
+    globalPalette = quantize(data, 256);
+  });
+  let frameWritten = 0;
+  const writeFrame = async (nowMs) => {
+    if (nowMs === null) {
+      for (const t of targets) clearFrameState(t);
+    } else {
+      for (const t of targets) applyFrameState(t, nowMs, easeKind);
+    }
+    const svgString = ensureSVGDimensions(exportSVG(clone), width, height);
+    const canvas = await rasterizeSVGToCanvas(svgString, width, height, dpi, fillBackground);
+    const index = applyPalette(readCanvasSRGB(canvas), globalPalette);
+    gif.writeFrame(index, canvas.width, canvas.height, {
+      palette: globalPalette,
+      delay: frameDelay,
+      ...frameWritten === 0 ? { repeat } : {}
+    });
+    frameWritten++;
+  };
+  for (let i = 0; i < totalFrames; i++) {
+    await writeFrame(i / fps * 1e3);
+  }
+  await writeFrame(null);
+  gif.finish();
+  return new Blob([gif.bytes()], { type: "image/gif" });
+}
+async function seedPalette(clone, targets, width, height, dpi, prepare, use) {
+  for (const t of targets) clearFrameState(t);
+  const svgString = ensureSVGDimensions(exportSVG(clone), width, height);
+  const canvas = await rasterizeSVGToCanvas(svgString, width, height, dpi, prepare);
+  use(readCanvasSRGB(canvas));
+}
+
+export {
+  readCanvasSRGB,
+  paletteFromCanvas,
+  EASE_SMOOTH_SAMPLES,
+  evalLinearSamples,
+  classifyTarget,
+  isModuleNotFound,
+  resolveRepeat,
+  applyFrameState,
+  exportGIF
+};
+//# sourceMappingURL=chunk-DCODCLWI.js.map

package/dist/chunk-DCODCLWI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/gif-encode.ts","../src/export-gif.ts"],"sourcesContent":["/**\n * Shared gifenc frame-encoding primitives.\n *\n * Both GIF exporters (`export-gif.ts`, entrance animation; `export-sequence.ts`,\n * spec-swap keyframes) need the same low-level steps: read a canvas back in\n * sRGB (the export canvas may be display-p3, but gifenc's quantizer assumes sRGB\n * bytes), quantize a shared palette, and write indexed frames. They differ only\n * in how they PRODUCE canvases — synthesized per time-step vs. one per spec — so\n * that stays in each caller; only these primitives are shared, which keeps the\n * sRGB-readback subtlety in exactly one place.\n */\n\n/**\n * Read a canvas's pixels back in sRGB. The export canvas may be display-p3 (so\n * PNG/JPG can embed a wide-gamut profile), but GIF is sRGB-only and gifenc's\n * quantizer assumes sRGB bytes — feeding it P3-encoded data would shift and\n * desaturate the GIF. The browser converts P3→sRGB on readback.\n */\nexport function readCanvasSRGB(canvas: HTMLCanvasElement): Uint8ClampedArray {\n  const ctx = canvas.getContext('2d');\n  if (!ctx) throw new Error('Canvas 2D context not available');\n  return ctx.getImageData(0, 0, canvas.width, canvas.height, {\n    colorSpace: 'srgb',\n  }).data;\n}\n\n/** Quantize a 256-color palette from a canvas's sRGB pixels. */\nexport function paletteFromCanvas(\n  canvas: HTMLCanvasElement,\n  quantize: (data: Uint8ClampedArray, maxColors: number) => number[][],\n): number[][] {\n  return quantize(readCanvasSRGB(canvas), 256);\n}\n","/**\n * Animated GIF export.\n *\n * Unlike PNG/JPG (single static frame), GIF export must reproduce the chart's\n * entrance animation across many frames. OpenChart entrance animations are pure\n * CSS keyframes that mutate `clip-path`/`opacity`/`transform` in *computed*\n * style, which `XMLSerializer` does not capture — so serializing the live,\n * mid-animation SVG yields the base markup on every frame (a static GIF).\n *\n * This module sidesteps that by *synthesizing* frames deterministically: it\n * takes the settled, final-state SVG plus the resolved animation config,\n * computes each animated element's value at time `t` in JS, stamps\n * `clip-path`/`opacity` as INLINE attributes on a clone (inline values DO\n * serialize), rasterizes that clone, and encodes each frame with gifenc.\n *\n * This mirrors the entrance keyframes in `packages/core/src/styles/*.css`:\n * bars clip bottom-up / left-right, line/area clip left-right, arcs and points\n * fade. Only the entrance is reproduced; the on-screen CSS animation is\n * untouched. `gifenc` is an optional peer dependency, loaded dynamically.\n */\n\nimport type { AnimationEase, ResolvedAnimation, ResolvedTheme } from '@opendata-ai/openchart-core';\nimport {\n  embedFonts,\n  ensureSVGDimensions,\n  exportSVG,\n  getSVGBackgroundColor,\n  getSVGDimensions,\n  rasterizeSVGToCanvas,\n} from './export';\nimport { readCanvasSRGB } from './gif-encode';\nimport { injectThemeStyleBlock } from './theme-style-block';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface GIFExportOptions {\n  /** Frames per second to capture. Defaults to 25. */\n  fps?: number;\n  /** DPI scaling factor, matching PNG export. Defaults to 2. */\n  dpi?: number;\n  /**\n   * Loop behavior. Defaults to play-once (hold the final frame):\n   * - `false` / omitted: play once, then hold the final frame\n   * - `true`: loop forever\n   * - a number: loop that many times, then hold\n   */\n  loop?: boolean | number;\n  /**\n   * Explicit capture duration in ms. Defaults to the resolved animation total\n   * (enter duration + last element's stagger delay + a small tail).\n   */\n  durationMs?: number;\n  /** Embed fonts as base64 data URIs so text matches on-screen. Defaults to true. */\n  embedFonts?: boolean;\n  /**\n   * Opaque background fill. GIF can't carry partial alpha, so a transparent\n   * chart would composite onto black. Defaults to the chart's own background\n   * color (or white if the chart is transparent).\n   */\n  backgroundColor?: string;\n  /**\n   * Resolved theme to inline as a `<style>` block so class-based fills (metric\n   * cells, brand watermark dot, legend text) survive serialization. Omit to skip.\n   */\n  theme?: ResolvedTheme;\n}\n\n/** Which visual property an element's entrance keyframe animates. */\nexport type AnimationKind = 'bar-vertical' | 'bar-horizontal' | 'line-area' | 'fade';\n\nexport interface AnimatedTarget {\n  /** The element in the CLONE that receives per-frame inline styles. */\n  el: SVGElement;\n  kind: AnimationKind;\n  /** Start offset in ms (stagger * mark index). */\n  startMs: number;\n  /** Duration of this element's own animation in ms. */\n  durationMs: number;\n}\n\n// ---------------------------------------------------------------------------\n// Easing — replicate --oc-ease-smooth (CSS linear() sample points)\n// ---------------------------------------------------------------------------\n\n/**\n * Sample points of the `--oc-ease-smooth` token (see tokens.css). CSS\n * `linear()` interpolates piecewise-linearly between evenly-spaced samples, so\n * we reproduce it exactly rather than approximating with a cubic-bezier.\n */\nexport const EASE_SMOOTH_SAMPLES = [\n  0, 0.157, 0.438, 0.64, 0.766, 0.85, 0.906, 0.941, 0.964, 0.978, 0.988, 0.994, 0.998, 1,\n];\n\n/** Piecewise-linear evaluation of a CSS linear() sample array at t in [0,1]. */\nexport function evalLinearSamples(samples: number[], t: number): number {\n  if (t <= 0) return samples[0];\n  if (t >= 1) return samples[samples.length - 1];\n  const scaled = t * (samples.length - 1);\n  const i = Math.floor(scaled);\n  const frac = scaled - i;\n  return samples[i] + (samples[i + 1] - samples[i]) * frac;\n}\n\n/** Ease a normalized progress value. Only 'smooth' is sample-accurate today. */\nfunction ease(p: number, _kind: AnimationEase): number {\n  // The entrance rules use --oc-ease-smooth (or fall back to it) in all cases\n  // GIF export handles today. Snappy/others could add their own samples later.\n  return evalLinearSamples(EASE_SMOOTH_SAMPLES, p);\n}\n\n// ---------------------------------------------------------------------------\n// Target discovery\n// ---------------------------------------------------------------------------\n\n/**\n * Classify an animated element (identified by `data-animation-index`) into the\n * keyframe it plays, and return the element that should receive inline styles.\n * Returns null only when a bar group has no shape child to clip. Unrecognized\n * mark types (map/tilemap/table/text) fall back to a plain opacity fade rather\n * than a hard pop-in — see the generic case at the end.\n */\nexport function classifyTarget(\n  groupOrEl: SVGElement,\n): { el: SVGElement; kind: AnimationKind } | null {\n  const cls = groupOrEl.getAttribute('class') ?? '';\n\n  // Bars: CSS animates the child <rect>; clip + fade. Orient on the group.\n  if (cls.includes('oc-mark-rect') || cls.includes('oc-mark-bar')) {\n    const rect = groupOrEl.querySelector('rect') ?? groupOrEl.querySelector('path');\n    if (!rect) return null;\n    const horizontal = groupOrEl.getAttribute('data-orient') === 'horizontal';\n    return { el: rect as SVGElement, kind: horizontal ? 'bar-horizontal' : 'bar-vertical' };\n  }\n\n  // Line/area: the whole group clips left-to-right + fades.\n  if (cls.includes('oc-mark-line') || cls.includes('oc-mark-area')) {\n    return { el: groupOrEl, kind: 'line-area' };\n  }\n\n  // Arcs and points: fade only (scale breaks arc/point positioning, so the CSS\n  // uses a plain opacity fade too).\n  if (\n    cls.includes('oc-mark-arc') ||\n    cls.includes('oc-mark-point') ||\n    cls.includes('oc-mark-circle')\n  ) {\n    return { el: groupOrEl, kind: 'fade' };\n  }\n\n  // Everything else (text labels, rules, ticks, map/tilemap/table marks) is a\n  // plain fade; treat generically so the frame isn't a hard pop-in.\n  return { el: groupOrEl, kind: 'fade' };\n}\n\n/**\n * Build the list of animated targets from a cloned SVG, pairing each element\n * with its timing. Elements carry `data-animation-index` (the mark index that\n * drives stagger) stamped by the renderer.\n */\nfunction collectTargets(\n  clone: SVGElement,\n  enterDurationMs: number,\n  staggerMs: number,\n): AnimatedTarget[] {\n  const els = clone.querySelectorAll<SVGElement>('[data-animation-index]');\n  const targets: AnimatedTarget[] = [];\n\n  for (const el of els) {\n    const classified = classifyTarget(el);\n    if (!classified) continue;\n    const idx = parseInt(el.getAttribute('data-animation-index') ?? '0', 10) || 0;\n    // Points animate at 40% of the base duration (matches animation.css).\n    const isPoint =\n      classified.kind === 'fade' && /oc-mark-(point|circle)/.test(el.getAttribute('class') ?? '');\n    // Points on line/area charts start 35% of a duration in, so they pop as the\n    // line draws through them (the `.oc-mark-line ~ circle.oc-mark-point` rule).\n    const lineOffset = isPoint && hasLineAreaSibling(el) ? enterDurationMs * 0.35 : 0;\n    targets.push({\n      el: classified.el,\n      kind: classified.kind,\n      startMs: staggerMs * idx + lineOffset,\n      durationMs: isPoint ? enterDurationMs * 0.4 : enterDurationMs,\n    });\n  }\n\n  return targets;\n}\n\n/**\n * Replicate the CSS sibling combinator `.oc-mark-line ~ circle.oc-mark-point`:\n * true when a line or area mark precedes this point among its siblings.\n */\nfunction hasLineAreaSibling(point: SVGElement): boolean {\n  let sib = point.previousElementSibling;\n  while (sib) {\n    const cls = sib.getAttribute('class') ?? '';\n    if (cls.includes('oc-mark-line') || cls.includes('oc-mark-area')) return true;\n    sib = sib.previousElementSibling;\n  }\n  return false;\n}\n\n// ---------------------------------------------------------------------------\n// Per-frame interpolation\n// ---------------------------------------------------------------------------\n\nconst clamp01 = (v: number): number => (v < 0 ? 0 : v > 1 ? 1 : v);\n\n/**\n * Distinguish \"the optional gifenc peer isn't installed\" from a real error\n * thrown while loading it. Node/bundlers use ERR_MODULE_NOT_FOUND /\n * MODULE_NOT_FOUND / \"Cannot find module\" for the former.\n */\nexport function isModuleNotFound(err: unknown): boolean {\n  const code = (err as { code?: string })?.code;\n  if (code === 'ERR_MODULE_NOT_FOUND' || code === 'MODULE_NOT_FOUND') return true;\n  const message = (err as { message?: string })?.message ?? '';\n  return /cannot find (module|package)|failed to (resolve|fetch)/i.test(message);\n}\n\n/**\n * Map the `loop` option to gifenc's `repeat` value:\n * `true` → 0 (loop forever), a number → that count, otherwise → -1 (play once,\n * hold the final frame — the default and the common editorial case).\n */\nexport function resolveRepeat(loop: boolean | number | undefined): number {\n  if (loop === true) return 0;\n  if (typeof loop === 'number') return loop;\n  return -1;\n}\n\n/**\n * Apply the interpolated entrance state for a target at absolute time `nowMs`,\n * writing inline `clip-path`/`opacity` so it survives serialization.\n */\nexport function applyFrameState(\n  target: AnimatedTarget,\n  nowMs: number,\n  easeKind: AnimationEase,\n): void {\n  const p = clamp01((nowMs - target.startMs) / target.durationMs);\n  const eased = ease(p, easeKind);\n  const style = target.el.style;\n\n  switch (target.kind) {\n    case 'bar-vertical': {\n      // oc-enter-bar: clip-path inset(100%→0 from top) + opacity (full by 75%).\n      const inset = (1 - eased) * 100;\n      style.clipPath = `inset(${inset}% 0 0 0)`;\n      style.opacity = String(clamp01(p / 0.75));\n      break;\n    }\n    case 'bar-horizontal': {\n      // oc-enter-bar-h: clip-path inset(0 100%→0 from right) + opacity.\n      const inset = (1 - eased) * 100;\n      style.clipPath = `inset(0 ${inset}% 0 0)`;\n      style.opacity = String(clamp01(p / 0.75));\n      break;\n    }\n    case 'line-area': {\n      // oc-enter-line: clip-path inset(0 100%→0 from right); opacity full by 15%.\n      const inset = (1 - eased) * 100;\n      style.clipPath = `inset(0 ${inset}% 0 0)`;\n      style.opacity = String(clamp01(p / 0.15));\n      break;\n    }\n    case 'fade': {\n      // oc-enter-fade-only: opacity 0→1.\n      style.opacity = String(eased);\n      break;\n    }\n  }\n}\n\n/** Clear any inline entrance styles so the settled frame renders at rest. */\nfunction clearFrameState(target: AnimatedTarget): void {\n  const style = target.el.style;\n  style.clipPath = '';\n  style.opacity = '';\n}\n\n// ---------------------------------------------------------------------------\n// Export\n// ---------------------------------------------------------------------------\n\n/**\n * Render a chart's entrance animation to an animated GIF Blob.\n *\n * @param svgElement - The settled, fully-rendered chart SVG (animation complete).\n * @param animation - The chart's resolved animation config (for exact timing).\n *   When undefined, timing falls back to sensible defaults.\n * @param options - fps, dpi, loop, duration, font-embedding overrides.\n * @returns A Promise resolving to the GIF Blob.\n */\nexport async function exportGIF(\n  svgElement: SVGElement,\n  animation: ResolvedAnimation | undefined,\n  options?: GIFExportOptions,\n): Promise<Blob> {\n  let gifenc: typeof import('gifenc');\n  try {\n    gifenc = await import('gifenc');\n  } catch (err) {\n    // Only a genuine \"module not found\" means the optional peer is absent. Any\n    // other failure (a real bug in gifenc's module eval, a corrupt install) must\n    // surface with its context, not the misleading install hint.\n    if (isModuleNotFound(err)) {\n      throw new Error(\n        \"GIF export requires the optional 'gifenc' peer dependency. Install it: npm install gifenc\",\n      );\n    }\n    throw new Error('GIF export failed to load the gifenc encoder', { cause: err });\n  }\n  const { GIFEncoder, quantize, applyPalette } = gifenc;\n\n  const fps = options?.fps ?? 25;\n  const dpi = options?.dpi ?? 2;\n  const shouldEmbed = options?.embedFonts ?? true;\n  const { width, height } = getSVGDimensions(svgElement);\n  if (!width || !height) {\n    throw new Error(`SVG has zero dimensions (width=${width}, height=${height})`);\n  }\n\n  // Resolve timing from the config (exact) with defaults as a fallback.\n  const enter = animation?.enter;\n  const enterDurationMs = enter?.duration ?? 600;\n  const staggerMs = enter?.staggerDelay ?? 0;\n  const easeKind: AnimationEase = enter?.ease ?? 'smooth';\n\n  // Build one font-embedded clone that represents the FINAL frame; every frame\n  // derives from it, so fonts are embedded exactly once.\n  const clone = svgElement.cloneNode(true) as SVGElement;\n  // Inline the theme style block so class-based chrome fills survive the detach\n  // from the page stylesheet (metrics, brand dot, legend). No-op when undefined.\n  injectThemeStyleBlock(clone, options?.theme);\n  if (shouldEmbed) {\n    await embedFonts(clone);\n  }\n  const targets = collectTargets(clone, enterDurationMs, staggerMs);\n\n  // Total capture window: explicit override, else the animation total. Mirrors\n  // computeAnimationDuration (animation.ts): the window must cover the last\n  // mark's stagger + its own duration AND the annotation reveal, which animates\n  // at enterDuration + annotationDelay. Without the annotationDelay term, charts\n  // with annotations get cut off before the annotations finish fading in.\n  const annotationDelay = animation?.annotationDelay ?? 0;\n  const lastMarkEnd = targets.reduce(\n    (m, t) => Math.max(m, t.startMs + t.durationMs),\n    enterDurationMs,\n  );\n  const lastEnd = Math.max(lastMarkEnd, enterDurationMs + annotationDelay);\n  const totalMs = options?.durationMs ?? lastEnd + 300;\n  const frameDelay = Math.round(1000 / fps);\n  const totalFrames = Math.max(1, Math.round((totalMs / 1000) * fps));\n\n  // Loop → gifenc repeat: play-once (-1), forever (0), or explicit count.\n  const repeat = resolveRepeat(options?.loop);\n\n  // GIF can't carry partial alpha, so fill an opaque background before drawing\n  // each frame (else a transparent chart composites onto black). Runs before\n  // ctx.scale, so paint the raw device-pixel canvas size.\n  // The theme background is the fallback: canvas mark mode suppresses the SVG\n  // background rect, so there's nothing in the markup to read it from.\n  const bgColor =\n    options?.backgroundColor ??\n    getSVGBackgroundColor(svgElement, options?.theme?.colors.background);\n  const fillBackground = (ctx: CanvasRenderingContext2D, cv: HTMLCanvasElement): void => {\n    ctx.fillStyle = bgColor;\n    ctx.fillRect(0, 0, cv.width, cv.height);\n  };\n\n  const gif = GIFEncoder();\n\n  // Derive ONE global palette from the settled frame (most complete colors)\n  // and reuse it for every frame, so colors stay stable and the file stays\n  // small. gifenc writes the global color table from the palette on the first\n  // frame; later frames reuse it.\n  let globalPalette: number[][] = [];\n  await seedPalette(clone, targets, width, height, dpi, fillBackground, (data) => {\n    globalPalette = quantize(data, 256);\n  });\n\n  let frameWritten = 0;\n  const writeFrame = async (nowMs: number | null): Promise<void> => {\n    if (nowMs === null) {\n      for (const t of targets) clearFrameState(t);\n    } else {\n      for (const t of targets) applyFrameState(t, nowMs, easeKind);\n    }\n    const svgString = ensureSVGDimensions(exportSVG(clone), width, height);\n    const canvas = await rasterizeSVGToCanvas(svgString, width, height, dpi, fillBackground);\n    const index = applyPalette(readCanvasSRGB(canvas), globalPalette);\n    // `repeat` is only meaningful on the first frame (it writes the loop\n    // extension); passing it later is ignored by gifenc.\n    gif.writeFrame(index, canvas.width, canvas.height, {\n      palette: globalPalette,\n      delay: frameDelay,\n      ...(frameWritten === 0 ? { repeat } : {}),\n    });\n    frameWritten++;\n  };\n\n  for (let i = 0; i < totalFrames; i++) {\n    await writeFrame((i / fps) * 1000);\n  }\n  // Final settled frame the GIF holds on.\n  await writeFrame(null);\n\n  gif.finish();\n  // gifenc types bytes() as Uint8Array<ArrayBufferLike>; BlobPart wants a view\n  // over a plain ArrayBuffer. The runtime value is a valid BufferSource, so the\n  // cast is safe — it only bridges the ArrayBufferLike/ArrayBuffer lib mismatch.\n  return new Blob([gif.bytes() as BlobPart], { type: 'image/gif' });\n}\n\n/**\n * Render the settled clone once (no per-frame state) to derive the palette\n * source, without writing a frame. Restores frame state afterward.\n */\nasync function seedPalette(\n  clone: SVGElement,\n  targets: AnimatedTarget[],\n  width: number,\n  height: number,\n  dpi: number,\n  prepare: (ctx: CanvasRenderingContext2D, cv: HTMLCanvasElement) => void,\n  use: (data: Uint8ClampedArray) => void,\n): Promise<void> {\n  for (const t of targets) clearFrameState(t);\n  const svgString = ensureSVGDimensions(exportSVG(clone), width, height);\n  const canvas = await rasterizeSVGToCanvas(svgString, width, height, dpi, prepare);\n  use(readCanvasSRGB(canvas));\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-5EOV5JQZ.js → chunk-EKAUQAAX.js}

@@ -1,30 +1,10 @@
-// src/renderers/svg-dom.ts
-var SVG_NS = "http://www.w3.org/2000/svg";
-var XLINK_NS = "http://www.w3.org/1999/xlink";
-function createSVGElement(tag) {
-  return document.createElementNS(SVG_NS, tag);
-}
-function setAttrs(el, attrs) {
-  for (const [key, value] of Object.entries(attrs)) {
-    el.setAttribute(key, String(value));
-  }
-}
-function applyTextStyle(el, style) {
-  const inline = el.style;
-  inline.setProperty("fill", style.fill);
-  inline.setProperty("font-size", `${style.fontSize}px`);
-  inline.setProperty("font-weight", String(style.fontWeight));
-  inline.setProperty("font-family", style.fontFamily);
-  if (style.textAnchor) {
-    el.setAttribute("text-anchor", style.textAnchor);
-  }
-  if (style.dominantBaseline) {
-    el.setAttribute("dominant-baseline", style.dominantBaseline);
-  }
-  if (style.fontVariant) {
-    el.setAttribute("font-variant", style.fontVariant);
-  }
-}
+import {
+  SVG_NS,
+  XLINK_NS,
+  applyTextStyle,
+  createSVGElement,
+  setAttrs
+} from "./chunk-RM5XS6NR.js";
 
 // src/svg-ids.ts
 var counter = 0;
@@ -483,11 +463,12 @@ function getMarkSeries(mark) {
   }
   return void 0;
 }
-function renderMarks(parent, layout) {
+function renderMarks(parent, layout, opts) {
   const g = createSVGElement("g");
   g.setAttribute("class", "oc-marks");
   for (let i = 0; i < layout.marks.length; i++) {
     const mark = layout.marks[i];
+    if (opts?.skipPoints && mark.type === "point") continue;
     const renderer = markRenderers[mark.type];
     if (!renderer) continue;
     const el = renderer(mark, i);
@@ -850,7 +831,7 @@ function appendCompoundLabel(parent, primaryText, subtitle, fontWeight) {
   subtitleSpan.setAttribute("fill-opacity", "0.6");
   parent.appendChild(subtitleSpan);
 }
-function renderAxis(parent, axis, orientation, layout) {
+function renderAxis(parent, axis, orientation, layout, opts) {
   const g = createSVGElement("g");
   const isRight = orientation === "y" && axis.orient === "right";
   const isInlineY = orientation === "y" && axis.tickPosition === "inline" && !isRight;
@@ -995,7 +976,7 @@ function renderAxis(parent, axis, orientation, layout) {
       g.appendChild(label);
     }
   }
-  if (!isRight) {
+  if (!isRight && !opts?.skipGridlines) {
     const posToTickKey = /* @__PURE__ */ new Map();
     for (const tick of axis.ticks) {
       posToTickKey.set(tick.position, serializeKeyValue(tick.value));
@@ -1101,15 +1082,15 @@ function renderAxis(parent, axis, orientation, layout) {
   }
   parent.appendChild(g);
 }
-function renderAxes(parent, layout) {
+function renderAxes(parent, layout, opts) {
   if (layout.axes.x) {
-    renderAxis(parent, layout.axes.x, "x", layout);
+    renderAxis(parent, layout.axes.x, "x", layout, opts);
   }
   if (layout.axes.y) {
-    renderAxis(parent, layout.axes.y, "y", layout);
+    renderAxis(parent, layout.axes.y, "y", layout, opts);
   }
   if (layout.axes.y2) {
-    renderAxis(parent, layout.axes.y2, "y", layout);
+    renderAxis(parent, layout.axes.y2, "y", layout, opts);
   }
 }
 
@@ -1122,6 +1103,7 @@ import {
   FOOTNOTE_LINE_HEIGHT,
   footnoteBandHeight as footnoteBandHeightFor,
   textAscent as textAscent2,
+  truncateToWidth,
   wrapText
 } from "@opendata-ai/openchart-core";
 function footnoteBandHeight(layout) {
@@ -1141,8 +1123,25 @@ function renderChromeElement(parent, element, className, chromeKey, measureText,
     element.maxWidth,
     measureText
   );
-  if (lines.length === 1) {
+  let truncated = false;
+  if (element.maxLines != null && lines.length > element.maxLines) {
+    truncated = true;
+    lines.length = element.maxLines;
+    const lastIndex = element.maxLines - 1;
+    const measure = measureText ? (text2, fontSize, fontWeight) => measureText(text2, fontSize, fontWeight).width : void 0;
+    const withEllipsis = `${lines[lastIndex]}\u2026`;
+    lines[lastIndex] = truncateToWidth(
+      withEllipsis,
+      element.maxWidth,
+      element.style.fontSize,
+      element.style.fontWeight,
+      measure
+    );
+  }
+  if (lines.length === 1 && !truncated) {
     text.textContent = renderedText;
+  } else if (lines.length === 1) {
+    text.textContent = lines[0];
   } else {
     const lineHeight = element.style.fontSize * (element.style.lineHeight ?? 1.3);
     for (let i = 0; i < lines.length; i++) {
@@ -1532,7 +1531,7 @@ function renderLegend(parent, legend) {
   g.setAttribute("class", "oc-legend");
   g.setAttribute("role", "list");
   g.setAttribute("aria-label", "Chart legend");
-  const isHorizontal = legend.position === "top" || legend.position === "bottom";
+  const isHorizontal = legend.position === "top" || legend.position === "top-left" || legend.position === "bottom";
   const positions = "entryPositions" in legend ? legend.entryPositions : void 0;
   let offsetX = legend.bounds.x;
   let offsetY = legend.bounds.y;
@@ -1735,7 +1734,8 @@ function renderChartSVG(layout, container, opts) {
       stackSegmentDuration
     });
   }
-  if (layout.display !== "sparkline") {
+  const canvasMarks = opts?.canvasMarks === true;
+  if (layout.display !== "sparkline" && !canvasMarks) {
     const bg = createSVGElement("rect");
     setAttrs(bg, {
       x: 0,
@@ -1775,13 +1775,13 @@ function renderChartSVG(layout, container, opts) {
     if (layout.facet) {
       renderFacetedPanels(svg, layout, layout.facet.panels, defs);
     } else {
-      renderAxes(svg, layout);
+      renderAxes(svg, layout, { skipGridlines: canvasMarks });
       const clipGroup = createSVGElement("g");
       clipGroup.setAttribute("clip-path", `url(#${clipId})`);
       const clippedGroup = createSVGElement("g");
       clippedGroup.setAttribute("data-oc-marks-group", "true");
       clipGroup.appendChild(clippedGroup);
-      const markLabelsOverlay = renderMarks(clippedGroup, layout);
+      const markLabelsOverlay = renderMarks(clippedGroup, layout, { skipPoints: canvasMarks });
       const hasLineOrAreaWithDataPoints = layout.marks.some(
         (m) => (m.type === "line" || m.type === "area") && m.dataPoints && m.dataPoints.length > 0
       );
@@ -1859,6 +1859,13 @@ function renderChartSVG(layout, container, opts) {
   } finally {
     resetMarkRenderState();
   }
+  if (canvasMarks) {
+    svg.style.pointerEvents = "none";
+    for (const g of svg.querySelectorAll(".oc-legend, .oc-annotations, .oc-chrome, .oc-metrics")) {
+      g.style.pointerEvents = "auto";
+    }
+    svg.style.position = "relative";
+  }
   container.appendChild(svg);
   return svg;
 }
@@ -1881,7 +1888,7 @@ function renderFacetedPanels(svg, layout, panels, defs) {
     setAttrs(headerText, {
       x: panel.header.x,
       y: panel.header.y,
-      "text-anchor": "middle",
+      "text-anchor": panel.header.textAnchor ?? "middle",
       "font-family": layout.theme.fonts.family,
       "font-size": panel.header.fontSize,
       "font-weight": panel.header.fontWeight,
@@ -1923,18 +1930,15 @@ function renderFacetedPanels(svg, layout, panels, defs) {
 
 export {
   stampAnimationVars,
-  SVG_NS,
-  createSVGElement,
-  setAttrs,
-  renderChromeElement,
   nextSvgId,
   resetSvgIdCounter,
-  renderLegend,
   buildGradientDefs,
   resolveMarkFill,
+  renderChromeElement,
+  renderLegend,
   registerMarkRenderer,
   rectPathWithCorners,
   renderSingleMark,
   renderChartSVG
 };
-//# sourceMappingURL=chunk-5EOV5JQZ.js.map
+//# sourceMappingURL=chunk-EKAUQAAX.js.map