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

package/dist/mount-CUKQLeqD.d.ts

@@ -0,0 +1,207 @@
+import { ChartSpec, LayerSpec, GraphSpec, ElementRef, ChartLayout, ChartEventHandlers, ThemeConfig, DarkMode, DataRow } from '@opendata-ai/openchart-core';
+
+/**
+ * Export utilities: serialize charts to SVG, PNG, JPG, or CSV.
+ *
+ * - SVG: serializes the rendered DOM element via XMLSerializer
+ * - SVG with fonts: async version that embeds @font-face data URIs
+ * - PNG: renders SVG to canvas, then extracts as Blob
+ * - JPG: same as PNG but with JPEG compression and background fill
+ * - CSV: converts a data array to comma-separated text
+ */
+interface SVGExportOptions {
+    /** Embed fonts as base64 data URIs in the SVG. Defaults to true. */
+    embedFonts?: boolean;
+}
+interface PNGExportOptions extends SVGExportOptions {
+    /** DPI scaling factor. Defaults to 2 for retina-quality output. */
+    dpi?: number;
+}
+interface JPGExportOptions extends PNGExportOptions {
+    /** JPEG quality from 0 to 1. Defaults to 0.92. */
+    quality?: number;
+}
+/**
+ * Serialize an SVG element to an XML string.
+ *
+ * @param svgElement - The rendered SVG element to serialize.
+ * @returns The SVG markup as a string.
+ */
+declare function exportSVG(svgElement: SVGElement): string;
+/**
+ * Serialize an SVG element with embedded fonts to an XML string.
+ *
+ * Collects font-family declarations from the SVG's text elements,
+ * finds matching @font-face rules in the page's stylesheets, fetches
+ * the font files, and embeds them as base64 data URIs. The resulting
+ * SVG is self-contained and renders correctly without external fonts.
+ *
+ * @param svgElement - The rendered SVG element to serialize.
+ * @param options - Export options.
+ * @returns A Promise resolving to the SVG markup as a string.
+ */
+declare function exportSVGWithFonts(svgElement: SVGElement, options?: SVGExportOptions): Promise<string>;
+/**
+ * Render an SVG element to a PNG Blob via a canvas.
+ *
+ * Embeds fonts by default so the exported image matches on-screen rendering.
+ * Set `embedFonts: false` to skip font embedding for faster exports.
+ *
+ * @param svgElement - The rendered SVG element.
+ * @param options - Optional DPI scaling and font embedding.
+ * @returns A Promise resolving to the PNG Blob.
+ */
+declare function exportPNG(svgElement: SVGElement, options?: PNGExportOptions): Promise<Blob>;
+/**
+ * Render an SVG element to a JPEG Blob via a canvas.
+ *
+ * Same pipeline as exportPNG but outputs JPEG with configurable quality.
+ * The canvas is filled with the chart's background color before drawing
+ * to avoid transparent backgrounds rendering as black in JPEG format.
+ *
+ * @param svgElement - The rendered SVG element.
+ * @param options - Optional DPI scaling, JPEG quality, and font embedding.
+ * @returns A Promise resolving to the JPEG Blob.
+ */
+declare function exportJPG(svgElement: SVGElement, options?: JPGExportOptions): Promise<Blob>;
+/**
+ * Convert an array of data objects to a CSV string.
+ *
+ * Uses the keys from the first row as column headers.
+ * Values are quoted if they contain commas, quotes, or newlines.
+ *
+ * @param data - Array of row objects.
+ * @returns CSV-formatted string.
+ */
+declare function exportCSV(data: Record<string, unknown>[]): string;
+
+/**
+ * Pure math for the scrollytelling camera. `createChartStory` owns DOM
+ * writes; everything here is testable without a browser. Ported from
+ * opendata/shared/lib/scrolly/camera-math.ts.
+ *
+ * The camera is a center + zoom over a fixed viewBox, applied as a
+ * `transform` on a dedicated wrapper `<g>` around the marks group (NOT
+ * viewBox interpolation -- that scales text and gives labels no way to
+ * counter-scale). See .claude/rules/svg-animation.md: CSS transform
+ * replaces SVG transform attributes, so the camera transform must compose
+ * with, not replace, existing SVG transforms on marks.
+ */
+interface Camera {
+    cx: number;
+    cy: number;
+    /** Zoom factor. 1 = full viewBox visible. */
+    k: number;
+}
+interface CameraTarget {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** ViewBox units added on all sides before fitting */
+    padding?: number;
+}
+interface ViewBoxSize {
+    width: number;
+    height: number;
+}
+declare const FULL_VIEW: (vb: ViewBoxSize) => CameraTarget;
+/** Fit a target rect inside the viewBox, preserving aspect ratio. */
+declare function fitTarget(target: CameraTarget, vb: ViewBoxSize): Camera;
+/**
+ * Pan lerps linearly; zoom lerps in LOG space so the zoom rate reads
+ * constant (a 1->4 zoom passes through 2 at the midpoint, not 2.5).
+ */
+declare function interpolateCamera(a: Camera, b: Camera, t: number): Camera;
+/** SVG transform string that frames the camera inside the viewBox. */
+declare function cameraTransform(c: Camera, vb: ViewBoxSize): string;
+/**
+ * Frame-rate-independent exponential damping: two 8ms steps land where one
+ * 16ms step does. `tauMs` is the time constant (~63% of the gap per tau).
+ */
+declare function damp(current: number, target: number, tauMs: number, dtMs: number): number;
+declare function dampCamera(current: Camera, target: Camera, tauMs: number, dtMs: number): Camera;
+declare function camerasClose(a: Camera, b: Camera, epsilon?: number): boolean;
+/**
+ * Where the scrub camera should point for a given frame.
+ *
+ * Hold-zone semantics: the camera DWELLS on the active step's target while
+ * the reader reads, and only transitions toward the next step's target in
+ * the tail of the span (`stepProgress > holdUntil`). Interpolating across
+ * the whole span would mean the camera departs the moment a step activates
+ * and never rests on what the text is describing.
+ */
+declare function scrubCamera(step: number, stepProgress: number, fitted: Camera[], holdUntil: number, ease: (t: number) => number): Camera;
+
+/**
+ * Mount API: the main entry point for vanilla JS usage.
+ *
+ * createChart() takes a container, spec, and options, compiles the chart,
+ * renders it as SVG, sets up responsive resizing, tooltip interaction
+ * (mouse/touch/keyboard), keyboard navigation between data points,
+ * and returns a ChartInstance with update/resize/export/destroy methods.
+ */
+
+interface MountOptions extends ChartEventHandlers {
+    /** Theme overrides. */
+    theme?: ThemeConfig;
+    /** Dark mode setting: "auto" (system pref), "force", or "off". */
+    darkMode?: DarkMode;
+    /** Callback when a data point is clicked. @deprecated Use onMarkClick instead. */
+    onDataPointClick?: (data: Record<string, unknown>) => void;
+    /** Enable responsive resizing. Defaults to true. */
+    responsive?: boolean;
+    /** Show the tryOpenData.ai watermark. Defaults to true. */
+    watermark?: boolean;
+    /** Initial selected element. */
+    selectedElement?: ElementRef;
+}
+interface UpdateOptions {
+    /** Override the selected element after update. When omitted, preserves current selection. */
+    selectedElement?: ElementRef;
+}
+interface ExportOptions extends JPGExportOptions {
+}
+interface ChartInstance {
+    /** Re-compile and re-render with a new spec. */
+    update(spec: ChartSpec | LayerSpec | GraphSpec, options?: UpdateOptions): void;
+    /** Re-compile at current container dimensions. */
+    resize(): void;
+    /** Export the chart. */
+    export(format: 'svg'): string;
+    export(format: 'svg-with-fonts', options?: SVGExportOptions): Promise<string>;
+    export(format: 'png', options?: ExportOptions): Promise<Blob>;
+    export(format: 'jpg', options?: ExportOptions): Promise<Blob>;
+    export(format: 'csv'): string;
+    export(format: 'svg' | 'svg-with-fonts' | 'png' | 'jpg' | 'csv', options?: ExportOptions): string | Promise<Blob> | Promise<string>;
+    /** Remove all DOM elements and disconnect observers. */
+    destroy(): void;
+    /** The current compiled layout (for hooks / debugging). */
+    readonly layout: ChartLayout;
+    /** Get the currently selected element, or null if none. */
+    getSelectedElement(): ElementRef | null;
+    /** Programmatically select an element. Silent no-op if element not found. */
+    select(ref: ElementRef): void;
+    /** Deselect the current element. */
+    deselect(): void;
+    /** Whether inline text editing is active. */
+    readonly isEditing: boolean;
+    /** Set highlight values on the color encoding and re-render. Pass null to clear. */
+    setHighlight(values: string[] | null): void;
+    /**
+     * Reset a "you draw it" (`youDrawIt`) drawing: clears the reader's guess and
+     * returns to the drawing state. No-op when youDrawIt isn't enabled.
+     */
+    resetDrawing(): void;
+    /**
+     * Reveal a "you draw it" drawing programmatically (equivalent to the
+     * skip-to-reveal button). No-op when youDrawIt isn't enabled.
+     */
+    revealDrawing(): void;
+}
+/**
+ * Create a chart instance from a spec and mount it into a container.
+ */
+declare function createChart<TData extends DataRow = DataRow>(container: HTMLElement, spec: ChartSpec<TData> | LayerSpec<TData> | GraphSpec, options?: MountOptions): ChartInstance;
+
+export { type Camera as C, type ExportOptions as E, FULL_VIEW as F, type JPGExportOptions as J, type MountOptions as M, type PNGExportOptions as P, type SVGExportOptions as S, type UpdateOptions as U, type ViewBoxSize as V, type ChartInstance as a, exportJPG as b, createChart as c, exportPNG as d, exportCSV as e, exportSVG as f, exportSVGWithFonts as g, type CameraTarget as h, cameraTransform as i, camerasClose as j, damp as k, dampCamera as l, fitTarget as m, interpolateCamera as n, scrubCamera as s };

package/dist/static.js

@@ -1,13 +1,20 @@
+import {
+  renderTileMapSVG
+} from "./chunk-W34KN7FD.js";
 import {
   SVG_NS,
   renderChartSVG,
-  renderTileMapSVG,
   resetSvgIdCounter
-} from "./chunk-EQ6DYFO7.js";
+} from "./chunk-5EOV5JQZ.js";
 
 // src/static.ts
 import { createRequire } from "module";
-import { adaptForLightLineStroke, isLayerSpec, isTileMapSpec } from "@opendata-ai/openchart-core";
+import {
+  adaptForLightLineStroke,
+  cssTokenDefault,
+  isLayerSpec,
+  isTileMapSpec
+} from "@opendata-ai/openchart-core";
 import { compileChart, compileLayer, compileTileMap } from "@opendata-ai/openchart-engine";
 var esmRequire = createRequire(import.meta.url);
 var cachedWindow;
@@ -28,15 +35,14 @@ function resolveStaticDarkMode(mode) {
   return false;
 }
 function buildThemeStyleBlock(theme) {
-  const accent = theme.colors.categorical[0] ?? "#06b6d4";
-  const bg = theme.colors.background === "transparent" ? theme.isDark ? "#09090b" : "#ffffff" : theme.colors.background;
+  const accent = theme.colors.categorical[0] ?? cssTokenDefault("--oc-accent", "light");
+  const bg = theme.colors.background === "transparent" ? theme.isDark ? cssTokenDefault("--oc-bg", "dark") : cssTokenDefault("--oc-bg", "light") : theme.colors.background;
   const props = [
     `--oc-font-family: ${theme.fonts.family}`,
     `--oc-font-mono: ${theme.fonts.mono}`,
     `--oc-title-size: ${theme.chrome.title.fontSize}px`,
     `--oc-title-weight: ${theme.chrome.title.fontWeight}`,
-    `--oc-title-tracking: -0.022em`,
-    // sync with tokens.css
+    `--oc-title-tracking: ${cssTokenDefault("--oc-title-tracking", "light")}`,
     `--oc-subtitle-size: ${theme.chrome.subtitle.fontSize}px`,
     `--oc-subtitle-weight: ${theme.chrome.subtitle.fontWeight}`,
     `--oc-source-size: ${theme.chrome.source.fontSize}px`,
@@ -44,12 +50,11 @@ function buildThemeStyleBlock(theme) {
     `--oc-body-size: ${theme.fonts.sizes.body}px`,
     `--oc-eyebrow-size: ${theme.chrome.eyebrow.fontSize}px`,
     `--oc-eyebrow-weight: ${theme.chrome.eyebrow.fontWeight}`,
-    `--oc-eyebrow-tracking: 0.08em`,
-    // sync with tokens.css
+    `--oc-eyebrow-tracking: ${cssTokenDefault("--oc-eyebrow-tracking", "light")}`,
     `--oc-bg: ${bg}`,
     `--oc-text: ${theme.colors.text}`,
     `--oc-text-muted: ${theme.colors.axis}`,
-    `--oc-text-faint: ${theme.isDark ? "#52525b" : "#d4d4d8"}`,
+    `--oc-text-faint: ${theme.isDark ? cssTokenDefault("--oc-text-faint", "dark") : cssTokenDefault("--oc-text-faint", "light")}`,
     `--oc-gridline: ${theme.colors.gridline}`,
     `--oc-axis: ${theme.colors.axis}`,
     `--oc-border-radius: ${theme.borderRadius}px`,
@@ -57,7 +62,7 @@ function buildThemeStyleBlock(theme) {
     `--oc-accent-strong: ${adaptForLightLineStroke(accent)}`,
     `--oc-positive: ${theme.colors.positive}`,
     `--oc-negative: ${theme.colors.negative}`,
-    `--oc-legend-text: ${theme.isDark ? "#d0d6e0" : "#3f3f46"}`,
+    `--oc-legend-text: ${theme.isDark ? cssTokenDefault("--oc-legend-text", "dark") : cssTokenDefault("--oc-legend-text", "light")}`,
     `--oc-space-2: ${theme.spacing.chromeGap * 2}px`,
     `--oc-space-4: ${theme.spacing.padding}px`
   ];

package/dist/static.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/static.ts"],"sourcesContent":["// Node.js only — do not import from browser code.\nimport { createRequire } from 'node:module';\nimport type {\n  ChartLayout,\n  ChartSpec,\n  CompileOptions,\n  DarkMode,\n  LayerSpec,\n  ResolvedTheme,\n  ThemeConfig,\n  TileMapSpec,\n} from '@opendata-ai/openchart-core';\nimport { adaptForLightLineStroke, isLayerSpec, isTileMapSpec } from '@opendata-ai/openchart-core';\nimport { compileChart, compileLayer, compileTileMap } from '@opendata-ai/openchart-engine';\nimport { SVG_NS } from './renderers/svg-dom';\nimport { resetSvgIdCounter } from './svg-ids';\nimport { renderChartSVG } from './svg-renderer';\nimport { renderTileMapSVG } from './tilemap-renderer';\n\nconst esmRequire = createRequire(import.meta.url);\n\nlet cachedWindow: typeof import('happy-dom').Window | undefined;\nfunction getHappyDomWindow(): typeof import('happy-dom').Window {\n  if (cachedWindow) return cachedWindow;\n  try {\n    ({ Window: cachedWindow } = esmRequire('happy-dom') as typeof import('happy-dom'));\n  } catch {\n    throw new Error(\n      \"renderStaticSVG requires 'happy-dom' as a peer dependency. Install it with: npm add happy-dom\",\n    );\n  }\n  return cachedWindow;\n}\n\nlet rendering = false;\n\nexport interface StaticRenderOptions {\n  width?: number;\n  height?: number;\n  theme?: ThemeConfig;\n  /**\n   * Dark mode setting. In static rendering `'auto'` resolves to light mode\n   * since there is no `matchMedia` to query. Use `'force'` for dark output.\n   */\n  darkMode?: DarkMode;\n  watermark?: boolean;\n}\n\nfunction resolveStaticDarkMode(mode?: DarkMode): boolean {\n  if (mode === 'force') return true;\n  return false;\n}\n\nfunction buildThemeStyleBlock(theme: ResolvedTheme): string {\n  const accent = theme.colors.categorical[0] ?? '#06b6d4';\n  const bg =\n    theme.colors.background === 'transparent'\n      ? theme.isDark\n        ? '#09090b'\n        : '#ffffff'\n      : theme.colors.background;\n\n  const props = [\n    `--oc-font-family: ${theme.fonts.family}`,\n    `--oc-font-mono: ${theme.fonts.mono}`,\n    `--oc-title-size: ${theme.chrome.title.fontSize}px`,\n    `--oc-title-weight: ${theme.chrome.title.fontWeight}`,\n    `--oc-title-tracking: -0.022em`, // sync with tokens.css\n    `--oc-subtitle-size: ${theme.chrome.subtitle.fontSize}px`,\n    `--oc-subtitle-weight: ${theme.chrome.subtitle.fontWeight}`,\n    `--oc-source-size: ${theme.chrome.source.fontSize}px`,\n    `--oc-source-weight: ${theme.chrome.source.fontWeight}`,\n    `--oc-body-size: ${theme.fonts.sizes.body}px`,\n    `--oc-eyebrow-size: ${theme.chrome.eyebrow.fontSize}px`,\n    `--oc-eyebrow-weight: ${theme.chrome.eyebrow.fontWeight}`,\n    `--oc-eyebrow-tracking: 0.08em`, // sync with tokens.css\n    `--oc-bg: ${bg}`,\n    `--oc-text: ${theme.colors.text}`,\n    `--oc-text-muted: ${theme.colors.axis}`,\n    `--oc-text-faint: ${theme.isDark ? '#52525b' : '#d4d4d8'}`,\n    `--oc-gridline: ${theme.colors.gridline}`,\n    `--oc-axis: ${theme.colors.axis}`,\n    `--oc-border-radius: ${theme.borderRadius}px`,\n    `--oc-accent: ${accent}`,\n    `--oc-accent-strong: ${adaptForLightLineStroke(accent)}`,\n    `--oc-positive: ${theme.colors.positive}`,\n    `--oc-negative: ${theme.colors.negative}`,\n    `--oc-legend-text: ${theme.isDark ? '#d0d6e0' : '#3f3f46'}`,\n    `--oc-space-2: ${theme.spacing.chromeGap * 2}px`,\n    `--oc-space-4: ${theme.spacing.padding}px`,\n  ];\n\n  const rules = [\n    `svg.oc-chart { ${props.join('; ')}; }`,\n    `.oc-chrome { font-family: var(--oc-font-family); }`,\n    `.oc-eyebrow { font-size: var(--oc-eyebrow-size); font-weight: var(--oc-eyebrow-weight); letter-spacing: var(--oc-eyebrow-tracking); text-transform: uppercase; fill: var(--oc-accent); }`,\n    `.oc-title { font-size: var(--oc-title-size); font-weight: var(--oc-title-weight); letter-spacing: var(--oc-title-tracking); fill: var(--oc-text); }`,\n    `.oc-subtitle { font-size: var(--oc-subtitle-size); font-weight: var(--oc-subtitle-weight); fill: var(--oc-text-muted); }`,\n    `.oc-source, .oc-byline, .oc-footer { font-size: var(--oc-source-size); font-weight: var(--oc-source-weight); fill: var(--oc-text-muted); }`,\n    `.oc-brand { font-size: 11px; font-weight: 510; letter-spacing: 0.02em; fill: var(--oc-text-faint); }`,\n    `.oc-brand-dot { fill: var(--oc-accent); }`,\n    `.oc-eyebrow-dot { fill: var(--oc-accent); }`,\n    `.oc-metrics { font-family: var(--oc-font-family); }`,\n    `.oc-metric-label { font-size: 10px; font-weight: 510; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--oc-text-muted); }`,\n    `.oc-metric-value { font-size: 22px; font-weight: 510; letter-spacing: -0.01em; fill: var(--oc-text); font-variant-numeric: tabular-nums; }`,\n    `.oc-metric-delta-up { fill: var(--oc-positive); font-size: 12px; font-weight: 510; }`,\n    `.oc-metric-delta-down { fill: var(--oc-negative); font-size: 12px; font-weight: 510; }`,\n    `.oc-axis-tick-inline { font-size: 11px; font-weight: 400; fill: var(--oc-text-muted); }`,\n    `.oc-endpoint-labels { font-family: var(--oc-font-family); }`,\n    `.oc-endpoint-label { fill: var(--oc-endpoint-label-color, var(--oc-text)); }`,\n    `.oc-endpoint-value { fill: var(--oc-endpoint-value-color, var(--oc-text-muted)); }`,\n    `.oc-endpoint-leader { stroke: var(--oc-endpoint-leader-color, currentColor); }`,\n    `.oc-annotation-subtitle { fill: var(--oc-annotation-subtitle-color, var(--oc-text-muted)); }`,\n    `.oc-metric-secondary { fill: var(--oc-positive); font-size: 12px; font-weight: 400; }`,\n    `.oc-legend { font-family: var(--oc-font-family); font-size: var(--oc-body-size); }`,\n    `.oc-legend-entry { cursor: default; }`,\n    `.oc-legend text { fill: var(--oc-legend-text); }`,\n  ];\n\n  return rules.join('\\n');\n}\n\nfunction stripInteractiveElements(svg: Element): void {\n  const selectors = ['[data-voronoi-overlay]', '[data-crosshair]', '[data-snap-dots]'];\n  for (const selector of selectors) {\n    const els = svg.querySelectorAll(selector);\n    for (const el of els) {\n      el.parentNode?.removeChild(el);\n    }\n  }\n}\n\n/**\n * Render a chart spec to a standalone SVG string without a browser DOM.\n *\n * Requires `happy-dom` as a peer dependency (`bun add happy-dom`).\n *\n * Not safe for concurrent invocation: the render pipeline relies on a global\n * SVG ID counter and a temporary global `document` swap, both of which are\n * single-threaded. In a server handling parallel requests, serialize calls\n * through a queue or mutex.\n *\n * The entire render pipeline is synchronous; the global swap is safe as long\n * as no code schedules microtasks that outlive the call.\n */\nexport function renderStaticSVG(\n  spec: ChartSpec | LayerSpec | TileMapSpec,\n  options?: StaticRenderOptions,\n): string {\n  if (rendering) {\n    throw new Error('renderStaticSVG is not reentrant — serialize calls through a queue or mutex');\n  }\n  rendering = true;\n\n  const Window = getHappyDomWindow();\n  const win = new Window({ url: 'about:blank' });\n\n  const prevDocument = globalThis.document;\n  const prevWindow = (globalThis as Record<string, unknown>).window;\n\n  try {\n    (globalThis as Record<string, unknown>).document = win.document;\n    (globalThis as Record<string, unknown>).window = win;\n\n    resetSvgIdCounter();\n\n    const width = options?.width ?? 640;\n    const height = options?.height ?? 420;\n    const darkMode = resolveStaticDarkMode(options?.darkMode);\n\n    const compileOpts: CompileOptions = {\n      width,\n      height,\n      theme: options?.theme,\n      darkMode,\n      watermark: options?.watermark,\n    };\n\n    let svg: SVGElement;\n    let themeForStyle: ResolvedTheme;\n\n    if (isTileMapSpec(spec)) {\n      const tileMapLayout = compileTileMap(spec, compileOpts);\n      svg = renderTileMapSVG(tileMapLayout, { animate: false });\n      themeForStyle = tileMapLayout.theme;\n    } else {\n      let layout: ChartLayout;\n      if (isLayerSpec(spec)) {\n        layout = compileLayer(spec, compileOpts);\n      } else {\n        layout = compileChart(spec, compileOpts);\n      }\n\n      const container = win.document.createElement('div');\n      Object.defineProperty(container, 'getBoundingClientRect', {\n        value: () => ({\n          width,\n          height,\n          top: 0,\n          left: 0,\n          right: width,\n          bottom: height,\n          x: 0,\n          y: 0,\n          toJSON: () => ({}),\n        }),\n      });\n\n      svg = renderChartSVG(layout, container as unknown as HTMLElement, {\n        animate: false,\n        crosshair: false,\n      });\n\n      stripInteractiveElements(svg);\n      themeForStyle = layout.theme;\n    }\n\n    const doc = win.document as unknown as Document;\n    let defs = svg.querySelector('defs');\n    if (!defs) {\n      defs = doc.createElementNS(SVG_NS, 'defs');\n      svg.insertBefore(defs as unknown as Node, svg.firstChild);\n    }\n    const styleEl = doc.createElementNS(SVG_NS, 'style');\n    styleEl.textContent = buildThemeStyleBlock(themeForStyle);\n    defs.insertBefore(styleEl as unknown as Node, defs.firstChild);\n\n    const serializer = new (\n      win as unknown as { XMLSerializer: typeof XMLSerializer }\n    ).XMLSerializer();\n    return serializer.serializeToString(svg as unknown as Node);\n  } finally {\n    rendering = false;\n    if (prevDocument !== undefined) {\n      (globalThis as Record<string, unknown>).document = prevDocument;\n    } else {\n      delete (globalThis as Record<string, unknown>).document;\n    }\n    if (prevWindow !== undefined) {\n      (globalThis as Record<string, unknown>).window = prevWindow;\n    } else {\n      delete (globalThis as Record<string, unknown>).window;\n    }\n    win.close();\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/static.ts"],"sourcesContent":["// Node.js only — do not import from browser code.\nimport { createRequire } from 'node:module';\nimport type {\n  ChartLayout,\n  ChartSpec,\n  CompileOptions,\n  DarkMode,\n  LayerSpec,\n  ResolvedTheme,\n  ThemeConfig,\n  TileMapSpec,\n} from '@opendata-ai/openchart-core';\nimport {\n  adaptForLightLineStroke,\n  cssTokenDefault,\n  isLayerSpec,\n  isTileMapSpec,\n} from '@opendata-ai/openchart-core';\nimport { compileChart, compileLayer, compileTileMap } from '@opendata-ai/openchart-engine';\nimport { SVG_NS } from './renderers/svg-dom';\nimport { resetSvgIdCounter } from './svg-ids';\nimport { renderChartSVG } from './svg-renderer';\nimport { renderTileMapSVG } from './tilemap-renderer';\n\nconst esmRequire = createRequire(import.meta.url);\n\nlet cachedWindow: typeof import('happy-dom').Window | undefined;\nfunction getHappyDomWindow(): typeof import('happy-dom').Window {\n  if (cachedWindow) return cachedWindow;\n  try {\n    ({ Window: cachedWindow } = esmRequire('happy-dom') as typeof import('happy-dom'));\n  } catch {\n    throw new Error(\n      \"renderStaticSVG requires 'happy-dom' as a peer dependency. Install it with: npm add happy-dom\",\n    );\n  }\n  return cachedWindow;\n}\n\nlet rendering = false;\n\nexport interface StaticRenderOptions {\n  width?: number;\n  height?: number;\n  theme?: ThemeConfig;\n  /**\n   * Dark mode setting. In static rendering `'auto'` resolves to light mode\n   * since there is no `matchMedia` to query. Use `'force'` for dark output.\n   */\n  darkMode?: DarkMode;\n  watermark?: boolean;\n}\n\nfunction resolveStaticDarkMode(mode?: DarkMode): boolean {\n  if (mode === 'force') return true;\n  return false;\n}\n\nfunction buildThemeStyleBlock(theme: ResolvedTheme): string {\n  const accent = theme.colors.categorical[0] ?? cssTokenDefault('--oc-accent', 'light');\n  const bg =\n    theme.colors.background === 'transparent'\n      ? theme.isDark\n        ? cssTokenDefault('--oc-bg', 'dark')\n        : cssTokenDefault('--oc-bg', 'light')\n      : theme.colors.background;\n\n  const props = [\n    `--oc-font-family: ${theme.fonts.family}`,\n    `--oc-font-mono: ${theme.fonts.mono}`,\n    `--oc-title-size: ${theme.chrome.title.fontSize}px`,\n    `--oc-title-weight: ${theme.chrome.title.fontWeight}`,\n    `--oc-title-tracking: ${cssTokenDefault('--oc-title-tracking', 'light')}`,\n    `--oc-subtitle-size: ${theme.chrome.subtitle.fontSize}px`,\n    `--oc-subtitle-weight: ${theme.chrome.subtitle.fontWeight}`,\n    `--oc-source-size: ${theme.chrome.source.fontSize}px`,\n    `--oc-source-weight: ${theme.chrome.source.fontWeight}`,\n    `--oc-body-size: ${theme.fonts.sizes.body}px`,\n    `--oc-eyebrow-size: ${theme.chrome.eyebrow.fontSize}px`,\n    `--oc-eyebrow-weight: ${theme.chrome.eyebrow.fontWeight}`,\n    `--oc-eyebrow-tracking: ${cssTokenDefault('--oc-eyebrow-tracking', 'light')}`,\n    `--oc-bg: ${bg}`,\n    `--oc-text: ${theme.colors.text}`,\n    `--oc-text-muted: ${theme.colors.axis}`,\n    `--oc-text-faint: ${theme.isDark ? cssTokenDefault('--oc-text-faint', 'dark') : cssTokenDefault('--oc-text-faint', 'light')}`,\n    `--oc-gridline: ${theme.colors.gridline}`,\n    `--oc-axis: ${theme.colors.axis}`,\n    `--oc-border-radius: ${theme.borderRadius}px`,\n    `--oc-accent: ${accent}`,\n    `--oc-accent-strong: ${adaptForLightLineStroke(accent)}`,\n    `--oc-positive: ${theme.colors.positive}`,\n    `--oc-negative: ${theme.colors.negative}`,\n    `--oc-legend-text: ${theme.isDark ? cssTokenDefault('--oc-legend-text', 'dark') : cssTokenDefault('--oc-legend-text', 'light')}`,\n    `--oc-space-2: ${theme.spacing.chromeGap * 2}px`,\n    `--oc-space-4: ${theme.spacing.padding}px`,\n  ];\n\n  const rules = [\n    `svg.oc-chart { ${props.join('; ')}; }`,\n    `.oc-chrome { font-family: var(--oc-font-family); }`,\n    `.oc-eyebrow { font-size: var(--oc-eyebrow-size); font-weight: var(--oc-eyebrow-weight); letter-spacing: var(--oc-eyebrow-tracking); text-transform: uppercase; fill: var(--oc-accent); }`,\n    `.oc-title { font-size: var(--oc-title-size); font-weight: var(--oc-title-weight); letter-spacing: var(--oc-title-tracking); fill: var(--oc-text); }`,\n    `.oc-subtitle { font-size: var(--oc-subtitle-size); font-weight: var(--oc-subtitle-weight); fill: var(--oc-text-muted); }`,\n    `.oc-source, .oc-byline, .oc-footer { font-size: var(--oc-source-size); font-weight: var(--oc-source-weight); fill: var(--oc-text-muted); }`,\n    `.oc-brand { font-size: 11px; font-weight: 510; letter-spacing: 0.02em; fill: var(--oc-text-faint); }`,\n    `.oc-brand-dot { fill: var(--oc-accent); }`,\n    `.oc-eyebrow-dot { fill: var(--oc-accent); }`,\n    `.oc-metrics { font-family: var(--oc-font-family); }`,\n    `.oc-metric-label { font-size: 10px; font-weight: 510; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--oc-text-muted); }`,\n    `.oc-metric-value { font-size: 22px; font-weight: 510; letter-spacing: -0.01em; fill: var(--oc-text); font-variant-numeric: tabular-nums; }`,\n    `.oc-metric-delta-up { fill: var(--oc-positive); font-size: 12px; font-weight: 510; }`,\n    `.oc-metric-delta-down { fill: var(--oc-negative); font-size: 12px; font-weight: 510; }`,\n    `.oc-axis-tick-inline { font-size: 11px; font-weight: 400; fill: var(--oc-text-muted); }`,\n    `.oc-endpoint-labels { font-family: var(--oc-font-family); }`,\n    `.oc-endpoint-label { fill: var(--oc-endpoint-label-color, var(--oc-text)); }`,\n    `.oc-endpoint-value { fill: var(--oc-endpoint-value-color, var(--oc-text-muted)); }`,\n    `.oc-endpoint-leader { stroke: var(--oc-endpoint-leader-color, currentColor); }`,\n    `.oc-annotation-subtitle { fill: var(--oc-annotation-subtitle-color, var(--oc-text-muted)); }`,\n    `.oc-metric-secondary { fill: var(--oc-positive); font-size: 12px; font-weight: 400; }`,\n    `.oc-legend { font-family: var(--oc-font-family); font-size: var(--oc-body-size); }`,\n    `.oc-legend-entry { cursor: default; }`,\n    `.oc-legend text { fill: var(--oc-legend-text); }`,\n  ];\n\n  return rules.join('\\n');\n}\n\nfunction stripInteractiveElements(svg: Element): void {\n  const selectors = ['[data-voronoi-overlay]', '[data-crosshair]', '[data-snap-dots]'];\n  for (const selector of selectors) {\n    const els = svg.querySelectorAll(selector);\n    for (const el of els) {\n      el.parentNode?.removeChild(el);\n    }\n  }\n}\n\n/**\n * Render a chart spec to a standalone SVG string without a browser DOM.\n *\n * Requires `happy-dom` as a peer dependency (`bun add happy-dom`).\n *\n * Not safe for concurrent invocation: the render pipeline relies on a global\n * SVG ID counter and a temporary global `document` swap, both of which are\n * single-threaded. In a server handling parallel requests, serialize calls\n * through a queue or mutex.\n *\n * The entire render pipeline is synchronous; the global swap is safe as long\n * as no code schedules microtasks that outlive the call.\n */\nexport function renderStaticSVG(\n  spec: ChartSpec | LayerSpec | TileMapSpec,\n  options?: StaticRenderOptions,\n): string {\n  if (rendering) {\n    throw new Error('renderStaticSVG is not reentrant — serialize calls through a queue or mutex');\n  }\n  rendering = true;\n\n  const Window = getHappyDomWindow();\n  const win = new Window({ url: 'about:blank' });\n\n  const prevDocument = globalThis.document;\n  const prevWindow = (globalThis as Record<string, unknown>).window;\n\n  try {\n    (globalThis as Record<string, unknown>).document = win.document;\n    (globalThis as Record<string, unknown>).window = win;\n\n    resetSvgIdCounter();\n\n    const width = options?.width ?? 640;\n    const height = options?.height ?? 420;\n    const darkMode = resolveStaticDarkMode(options?.darkMode);\n\n    const compileOpts: CompileOptions = {\n      width,\n      height,\n      theme: options?.theme,\n      darkMode,\n      watermark: options?.watermark,\n    };\n\n    let svg: SVGElement;\n    let themeForStyle: ResolvedTheme;\n\n    if (isTileMapSpec(spec)) {\n      const tileMapLayout = compileTileMap(spec, compileOpts);\n      svg = renderTileMapSVG(tileMapLayout, { animate: false });\n      themeForStyle = tileMapLayout.theme;\n    } else {\n      let layout: ChartLayout;\n      if (isLayerSpec(spec)) {\n        layout = compileLayer(spec, compileOpts);\n      } else {\n        layout = compileChart(spec, compileOpts);\n      }\n\n      const container = win.document.createElement('div');\n      Object.defineProperty(container, 'getBoundingClientRect', {\n        value: () => ({\n          width,\n          height,\n          top: 0,\n          left: 0,\n          right: width,\n          bottom: height,\n          x: 0,\n          y: 0,\n          toJSON: () => ({}),\n        }),\n      });\n\n      svg = renderChartSVG(layout, container as unknown as HTMLElement, {\n        animate: false,\n        crosshair: false,\n      });\n\n      stripInteractiveElements(svg);\n      themeForStyle = layout.theme;\n    }\n\n    const doc = win.document as unknown as Document;\n    let defs = svg.querySelector('defs');\n    if (!defs) {\n      defs = doc.createElementNS(SVG_NS, 'defs');\n      svg.insertBefore(defs as unknown as Node, svg.firstChild);\n    }\n    const styleEl = doc.createElementNS(SVG_NS, 'style');\n    styleEl.textContent = buildThemeStyleBlock(themeForStyle);\n    defs.insertBefore(styleEl as unknown as Node, defs.firstChild);\n\n    const serializer = new (\n      win as unknown as { XMLSerializer: typeof XMLSerializer }\n    ).XMLSerializer();\n    return serializer.serializeToString(svg as unknown as Node);\n  } finally {\n    rendering = false;\n    if (prevDocument !== undefined) {\n      (globalThis as Record<string, unknown>).document = prevDocument;\n    } else {\n      delete (globalThis as Record<string, unknown>).document;\n    }\n    if (prevWindow !== undefined) {\n      (globalThis as Record<string, unknown>).window = prevWindow;\n    } else {\n      delete (globalThis as Record<string, unknown>).window;\n    }\n    win.close();\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/story/index.d.ts

@@ -0,0 +1,277 @@
+import { h as CameraTarget, M as MountOptions } from '../mount-CUKQLeqD.js';
+export { C as Camera, F as FULL_VIEW, V as ViewBoxSize, i as cameraTransform, j as camerasClose, k as damp, l as dampCamera, m as fitTarget, n as interpolateCamera, s as scrubCamera } from '../mount-CUKQLeqD.js';
+import { DataRow, ChartSpec, LayerSpec, GraphSpec, MapSpec, ChartLayout } from '@opendata-ai/openchart-core';
+
+/** A spec a story can drive: same union `ChartInstance.update()` accepts. */
+type StorySpec<TData extends DataRow = DataRow> = ChartSpec<TData> | LayerSpec<TData> | GraphSpec | MapSpec;
+/** Deep-partial patch applied onto the accumulated spec at each step. */
+type StorySpecPatch = Record<string, unknown>;
+/**
+ * One step in a story. Patches are cumulative: step N's effective spec is
+ * the base spec with patches 0..N applied in order.
+ */
+interface StoryStep {
+    /** Deep-partial patch merged onto the running spec. Omit for a no-op step. */
+    spec?: StorySpecPatch;
+    /**
+     * Emphasis sugar: sets `encoding.color.highlight`. Equivalent to
+     * `spec: { encoding: { color: { highlight: [...] } } }` but doesn't
+     * require the caller to know the color field is nested under `encoding`.
+     * Pass `null` to clear a highlight set by an earlier step.
+     */
+    highlight?: string[] | null;
+    /**
+     * Pan/zoom the camera to a data-coordinate region (resolved via the
+     * chart's compiled scales) or a raw viewBox-space `CameraTarget`. Pass
+     * `null`/omit to return to the full viewBox.
+     */
+    camera?: StoryCameraStep | null;
+}
+/** Data-coordinate camera target: resolved to viewBox space via the chart's scales. */
+interface StoryDataCameraTarget {
+    /** x-domain range to frame, in data units (or category names for ordinal scales). */
+    x?: [unknown, unknown];
+    /** y-domain range to frame, in data units (or category names for ordinal scales). */
+    y?: [unknown, unknown];
+    /** ViewBox units of padding added around the resolved rect. Default 24. */
+    padding?: number;
+}
+type StoryCameraStep = StoryDataCameraTarget | CameraTarget;
+interface ChartStoryOptions<TData extends DataRow = DataRow> {
+    spec: StorySpec<TData>;
+    steps: StoryStep[];
+    /** Fraction of viewport height where the scroll trigger line sits. Default 0.4. */
+    triggerPosition?: number;
+    /** Camera driving mode. Step mode (default) eases on step change; scrub follows scroll continuously. */
+    cameraMode?: 'step' | 'scrub';
+}
+interface ChartStoryInstance {
+    /** Jump directly to a step index, applying patches 0..n and animating the diff. */
+    goTo(index: number): void;
+    /** Register a step element so the built-in scroll driver advances the story on scroll. */
+    registerStep(index: number, el: HTMLElement | null): (el: HTMLElement | null) => void;
+    /** Register the scrolling container that wraps all step elements. */
+    setContainer(el: HTMLElement | null): void;
+    /** Current step index. -1 before any step has activated. */
+    readonly currentStep: number;
+    /** Total number of steps. */
+    readonly totalSteps: number;
+    /** Tear down the scroll driver, camera, and underlying chart instance. */
+    destroy(): void;
+}
+
+/**
+ * `createChartStory`: a base spec plus an ordered list of deep-partial
+ * patch steps, driven by scroll (built-in `ScrollDriver`) or directly via
+ * `goTo(n)`.
+ *
+ * Animation-clock ownership (decision baked 2026-07-11, see
+ * plans/design-evolution/11-scrollytelling.md): the data-update-transitions
+ * driver in `../transition.ts` owns mark morphing; the ported tween in
+ * `./tween.ts` owns camera and any scalar story-level animation. They never
+ * animate the same property. `goTo` calls `ChartInstance.update()`, which
+ * internally decides morph-vs-instant-swap via `canTransition`; this module
+ * predicts that decision ahead of time (`canTransitionSpecShape`) only to
+ * decide whether to arm the crossfade fallback, and separately drives the
+ * camera tween. It does not bridge the two clocks.
+ */
+
+/**
+ * Create a scrollytelling story bound to a container. Mounts a chart with
+ * the base spec, then drives it through cumulative patch steps as the
+ * reader scrolls (or via `goTo`).
+ *
+ * `editMode` (any of `onEdit`/`onSelect`/`onDeselect`/`onTextEdit` on
+ * `mountOptions`) and an active story are mutually exclusive in v1: passing
+ * both warns once and disables the story's own drive loop, matching the
+ * seriesSearch/edit-mode precedent in `mount.ts`.
+ */
+declare function createChartStory<TData extends DataRow = DataRow>(container: HTMLElement, options: ChartStoryOptions<TData>, mountOptions?: MountOptions): ChartStoryInstance;
+
+/**
+ * Whole-chart crossfade fallback for story steps whose spec diff falls
+ * outside the data-update-transitions morph gate (`canTransition` in
+ * `../transition.ts`): re-encodes, type changes, and anything else that
+ * would otherwise instant-snap. No step in a story may visibly snap, so
+ * this ghosts the current rendered SVG over the container, lets
+ * `ChartInstance.update()` perform its normal instant swap underneath,
+ * then fades the ghost out to reveal the new state.
+ *
+ * This is deliberately NOT the mark-morphing transition driver: it never
+ * interpolates geometry, only opacity. See the animation-clock ownership
+ * note in the scrollytelling plan -- the transitions driver owns mark
+ * morphing, this owns the pixel-level fallback when that driver declines.
+ */
+interface CrossfadeOptions {
+    /** Fade duration in ms. Default `storyMotion.crossfade`. */
+    duration?: number;
+    /** Skip the fade and swap instantly (reduced motion). */
+    reducedMotion?: boolean;
+}
+/**
+ * Ghost the container's current SVG, run `applyUpdate` (which mutates the
+ * container to its next state), then fade the ghost out.
+ */
+declare function crossfadeUpdate(container: HTMLElement, applyUpdate: () => void, options?: CrossfadeOptions): void;
+
+/**
+ * Pure math for continuous scrollytelling progress. The `ScrollDriver`
+ * measures DOM rects and feeds them here. Ported from
+ * opendata/shared/lib/scrolly/progress-math.ts.
+ */
+interface ScrollyFrame {
+    /** Geometric active step; -1 while the trigger line is above step 0 */
+    step: number;
+    /** 0..1 progress of the trigger line through the active step's span */
+    stepProgress: number;
+    /** 0..1 traversal from first step top to last step bottom */
+    progress: number;
+    direction: 'down' | 'up';
+}
+type ScrollyFrameGeometry = Omit<ScrollyFrame, 'direction'>;
+/**
+ * Compute the geometric frame from viewport-relative step tops.
+ *
+ * @param tops viewport-relative step top offsets, ordered by step index
+ * @param lastBottom viewport-relative bottom of the final step
+ * @param triggerY the trigger line's viewport y (innerHeight * triggerPosition)
+ */
+declare function computeProgress(tops: number[], lastBottom: number, triggerY: number): ScrollyFrameGeometry;
+/**
+ * Reduced-motion variant: no scrubbing. `stepProgress` pins to 0 and overall
+ * progress quantizes to the step's start fraction, so consumers see discrete
+ * snaps only.
+ */
+declare function quantizeFrame(frame: ScrollyFrameGeometry, totalSteps: number): ScrollyFrameGeometry;
+declare function framesEqual(a: ScrollyFrame | null, b: ScrollyFrame): boolean;
+
+/**
+ * Resolves data-coordinate camera targets (`{ x: [a, b], y: [c, d] }`) to
+ * viewBox-space `CameraTarget` rects using the compiled chart's axis ticks.
+ *
+ * There is no raw d3 scale on `ChartLayout` (by design -- the compiled
+ * layout is the public surface, not engine internals), so resolution works
+ * off `AxisTick[]`, which pairs each tick's raw data `value` with its pixel
+ * `position`:
+ *   - Exact tick match (ordinal/categorical values, or a quantitative value
+ *     that happens to land on a tick): use that tick's position directly.
+ *   - Otherwise linear interpolation between the two nearest ticks by data
+ *     value. Works for quantitative and temporal axes (temporal values are
+ *     compared as timestamps). Ordinal axes with no exact match have no
+ *     well-ordered "between" and fall back to the nearest tick.
+ */
+
+/**
+ * Resolve a data-coordinate camera target to viewBox space. Falls back to
+ * the full chart area (padded) for axes that are missing or unresolvable,
+ * so a malformed target degrades to "camera does nothing" rather than
+ * throwing mid-scroll.
+ */
+declare function resolveCameraTarget(layout: ChartLayout, target: StoryDataCameraTarget): CameraTarget;
+/** Type guard: a camera step given in data coordinates vs. raw viewBox `CameraTarget`. */
+declare function isDataCameraTarget(value: StoryDataCameraTarget | CameraTarget): value is StoryDataCameraTarget;
+
+/**
+ * Framework-agnostic scroll-step driver: element registry + rAF-throttled
+ * scroll handler + subscription store. Ported from the React
+ * `use-scroll-steps` hook in opendata/shared; the store design (60fps
+ * frames as subscriptions, never framework state) carries over unchanged
+ * because vanilla, React, Vue, and Svelte all want the same contract.
+ *
+ * Measurement is lazy: with zero subscribers the scroll handler does no
+ * rect reads.
+ */
+
+interface ScrollyProgressStore {
+    /** Latest frame; `{step: -1, ...}` sentinel before any measurement */
+    get(): ScrollyFrame;
+    /** Emits the current frame immediately on subscribe, then on every change */
+    subscribe(cb: (frame: ScrollyFrame) => void): () => void;
+}
+interface ScrollDriverOptions {
+    /** Fraction of viewport height where the trigger line sits. Default 0.4 */
+    triggerPosition?: number;
+}
+interface ScrollDriver {
+    /** Register the scrolling container that wraps all steps. */
+    setContainer(el: HTMLElement | null): void;
+    /** Register a step element by index. Pass `null` to unregister. */
+    registerStep(index: number, el: HTMLElement | null): void;
+    /** Continuous progress as a subscription store. */
+    progress: ScrollyProgressStore;
+    /** Scroll a step into view (center). Honors reduced motion. */
+    scrollToStep(index: number): void;
+    /** Force a re-measurement (e.g. after layout changes). */
+    measure(): void;
+    /** Tear down scroll/resize listeners and the reduced-motion media query. */
+    destroy(): void;
+}
+/**
+ * Create a scroll-step driver. Framework wrappers (React/Vue/Svelte hooks)
+ * are thin adapters over this: they own component lifecycle, this owns the
+ * measurement/subscription machinery.
+ */
+declare function createScrollDriver(options?: ScrollDriverOptions): ScrollDriver;
+
+/**
+ * Numeric rAF tweening for scrollytelling story steps.
+ *
+ * Owns imperative numeric interpolation: the story driver and camera math
+ * mutate scalar/vector values per frame using these primitives instead of
+ * hand-rolling rAF loops. Ported from opendata/shared/lib/tween.ts.
+ *
+ * Everything here is SSR-safe: no `window`/`performance` access at module
+ * scope. Callers are expected to invoke these client-side.
+ */
+declare const clamp01: (t: number) => number;
+declare const lerp: (a: number, b: number, t: number) => number;
+type EasingFn = (t: number) => number;
+declare const easingFns: {
+    readonly linear: (t: number) => number;
+    readonly easeOutCubic: (t: number) => number;
+    readonly easeInOutCubic: (t: number) => number;
+    readonly easeOutQuint: (t: number) => number;
+};
+/**
+ * Duration tokens (ms) for story state changes. Use these instead of
+ * arbitrary numbers so all stories share one timing scale.
+ */
+declare const storyMotion: {
+    /** Small opacity/emphasis shifts */
+    readonly fast: 300;
+    /** Step state transitions */
+    readonly base: 500;
+    /** Whole-chart crossfade fallback (steps outside the morph gate) */
+    readonly crossfade: 400;
+    /** Step-mode camera transitions */
+    readonly camera: 600;
+    /** Scrub-mode camera damping time constant */
+    readonly cameraTau: 100;
+};
+interface TweenConfig<T> {
+    initial: T;
+    lerp: (a: T, b: T, t: number) => T;
+    /** Default `storyMotion.base` */
+    duration?: number;
+    /** Default `easingFns.easeOutCubic` */
+    ease?: EasingFn;
+    onFrame: (value: T) => void;
+}
+interface Tween<T> {
+    /**
+     * Retarget the tween. If a tween is mid-flight, the new tween starts FROM
+     * THE LIVE INTERPOLATED VALUE, not the previous target -- fast retargeting
+     * never jumps. `snap: true` applies the target synchronously with no rAF.
+     */
+    to: (target: T, opts?: {
+        snap?: boolean;
+    }) => void;
+    get: () => T;
+    cancel: () => void;
+}
+/**
+ * Retargetable tween over an arbitrary shape T.
+ */
+declare function createTween<T>(config: TweenConfig<T>): Tween<T>;
+
+export { CameraTarget, type ChartStoryInstance, type ChartStoryOptions, type EasingFn, type ScrollDriver, type ScrollDriverOptions, type ScrollyFrame, type ScrollyFrameGeometry, type ScrollyProgressStore, type StoryCameraStep, type StoryDataCameraTarget, type StorySpec, type StorySpecPatch, type StoryStep, type Tween, type TweenConfig, clamp01, computeProgress, createChartStory, createScrollDriver, createTween, crossfadeUpdate, easingFns, framesEqual, isDataCameraTarget, lerp, quantizeFrame, resolveCameraTarget, storyMotion };