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

package/dist/Chart.svelte

@@ -27,6 +27,7 @@ let {
   spec,
   theme,
   darkMode,
+  renderer,
   onmarkclick,
   onmarkhover,
   onmarkleave,
@@ -47,6 +48,7 @@ let {
   spec: ChartSpec | LayerSpec | GraphSpec;
   theme?: ThemeConfig;
   darkMode?: DarkMode;
+  renderer?: 'auto' | 'svg' | 'canvas';
   onmarkclick?: (event: MarkEvent) => void;
   onmarkhover?: (event: MarkEvent) => void;
   onmarkleave?: () => void;
@@ -109,6 +111,7 @@ let prevSpec = '';
 $effect(() => {
   const resolvedTheme = theme ?? ctxTheme?.();
   const resolvedDarkMode = darkMode ?? ctxDarkMode?.();
+  const resolvedRenderer = renderer;
   const resolvedEditable = editable;
   // Read spec without tracking - spec changes handled in Effect 2
   const currentSpec = untrack(() => spec);
@@ -125,6 +128,7 @@ $effect(() => {
   const options: MountOptions = {
     theme: resolvedTheme,
     darkMode: resolvedDarkMode,
+    renderer: resolvedRenderer,
     responsive: true,
     ...stableHandlers,
     ...(resolvedEditable != null ? { editable: resolvedEditable } : {}),

package/dist/Chart.svelte.d.ts

@@ -3,6 +3,7 @@ type $$ComponentProps = {
     spec: ChartSpec | LayerSpec | GraphSpec;
     theme?: ThemeConfig;
     darkMode?: DarkMode;
+    renderer?: 'auto' | 'svg' | 'canvas';
     onmarkclick?: (event: MarkEvent) => void;
     onmarkhover?: (event: MarkEvent) => void;
     onmarkleave?: () => void;

package/dist/Chart.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.svelte.d.ts","sourceRoot":"","sources":["../src/Chart.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,WAAW,EACX,UAAU,EACV,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACd,WAAW,EACZ,MAAM,6BAA6B,CAAC;AAKpC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IACxC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACxE,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClF,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,IAAI,CAAC;IAC3C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA8JF,QAAA,MAAM,KAAK;8BAlBqB,UAAU,GAAG,IAAI;kBAI3B,UAAU,KAAG,IAAI;oBAIjB,IAAI;MAUyB,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chart.svelte.d.ts","sourceRoot":"","sources":["../src/Chart.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,WAAW,EACX,UAAU,EACV,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACd,WAAW,EACZ,MAAM,6BAA6B,CAAC;AAKpC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IACxC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACxE,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClF,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,IAAI,CAAC;IAC3C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiKF,QAAA,MAAM,KAAK;8BAlBqB,UAAU,GAAG,IAAI;kBAI3B,UAAU,KAAG,IAAI;oBAIjB,IAAI;MAUyB,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/ChartStory.svelte

@@ -11,7 +11,7 @@
   Pass `step` to drive the story externally; omit for self-driving scroll.
 -->
 <script lang="ts">
-import type { ChartSpec, GraphSpec, LayerSpec, MapSpec } from '@opendata-ai/openchart-core';
+import type { ChartSpec, GeoMapSpec, GraphSpec, LayerSpec } from '@opendata-ai/openchart-core';
 import type { MountOptions } from '@opendata-ai/openchart-vanilla';
 import {
   type ChartStoryInstance,
@@ -30,7 +30,7 @@ let {
   mountOptions,
   class: className,
 }: {
-  spec: ChartSpec | LayerSpec | GraphSpec | MapSpec;
+  spec: ChartSpec | LayerSpec | GraphSpec | GeoMapSpec;
   steps: ChartStoryOptions['steps'];
   narrative: Snippet[];
   step?: number;

package/dist/ChartStory.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { ChartSpec, GraphSpec, LayerSpec, MapSpec } from '@opendata-ai/openchart-core';
+import type { ChartSpec, GeoMapSpec, GraphSpec, LayerSpec } from '@opendata-ai/openchart-core';
 import type { MountOptions } from '@opendata-ai/openchart-vanilla';
 import { type ChartStoryInstance, type ChartStoryOptions } from '@opendata-ai/openchart-vanilla/story';
 import { type Snippet } from 'svelte';
 type $$ComponentProps = {
-    spec: ChartSpec | LayerSpec | GraphSpec | MapSpec;
+    spec: ChartSpec | LayerSpec | GraphSpec | GeoMapSpec;
     steps: ChartStoryOptions['steps'];
     narrative: Snippet[];
     step?: number;

package/dist/ChartStory.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartStory.svelte.d.ts","sourceRoot":"","sources":["../src/ChartStory.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAC5F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EAEvB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAW,KAAK,OAAO,EAAW,MAAM,QAAQ,CAAC;AAEvD,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAClC,SAAS,EAAE,OAAO,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsFF,QAAA,MAAM,UAAU;kBA1BM,MAAM,KAAG,IAAI;uBAIV,kBAAkB,GAAG,IAAI;MAsBM,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ChartStory.svelte.d.ts","sourceRoot":"","sources":["../src/ChartStory.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAC/F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EAEvB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAW,KAAK,OAAO,EAAW,MAAM,QAAQ,CAAC;AAEvD,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IACrD,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAClC,SAAS,EAAE,OAAO,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsFF,QAAA,MAAM,UAAU;kBA1BM,MAAM,KAAG,IAAI;uBAIV,kBAAkB,GAAG,IAAI;MAsBM,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/GeoMap.svelte

@@ -3,15 +3,15 @@
 
   Mounts a map instance on render, updates when spec changes,
   and cleans up on unmount. All heavy lifting is done by the vanilla
-  createMap() function.
+  createGeoMap() function.
 -->
 <script lang="ts">
-import type { DarkMode, MapSpec, ThemeConfig } from '@opendata-ai/openchart-core';
+import type { DarkMode, GeoMapSpec, ThemeConfig } from '@opendata-ai/openchart-core';
 import {
-  createMap,
-  type MapInstance,
-  type MapMarkEvent,
-  type MapMountOptions,
+  createGeoMap,
+  type GeoMapInstance,
+  type GeoMapMarkEvent,
+  type GeoMapMountOptions,
 } from '@opendata-ai/openchart-vanilla';
 import { onMount, untrack } from 'svelte';
 import { getVizDarkMode, getVizTheme } from './context.js';
@@ -25,17 +25,17 @@ let {
   class: className,
   style,
 }: {
-  spec: MapSpec;
+  spec: GeoMapSpec;
   theme?: ThemeConfig;
   darkMode?: DarkMode;
-  onmarkclick?: (event: MapMarkEvent) => void;
-  onmarkhover?: (event: MapMarkEvent | null) => void;
+  onmarkclick?: (event: GeoMapMarkEvent) => void;
+  onmarkhover?: (event: GeoMapMarkEvent | null) => void;
   class?: string;
   style?: string;
 } = $props();
 
 let containerEl: HTMLDivElement;
-let instance: MapInstance | null = null;
+let instance: GeoMapInstance | null = null;
 
 const ctxTheme = getVizTheme();
 const ctxDarkMode = getVizDarkMode();
@@ -57,7 +57,7 @@ $effect(() => {
 
   instance?.destroy();
 
-  const options: MapMountOptions = {
+  const options: GeoMapMountOptions = {
     theme: resolvedTheme,
     darkMode: resolvedDarkMode,
     onMarkClick: (feature) => untrack(() => onmarkclick)?.(feature),
@@ -65,7 +65,7 @@ $effect(() => {
     responsive: true,
   };
 
-  instance = createMap(containerEl, currentSpec, options);
+  instance = createGeoMap(containerEl, currentSpec, options);
   prevSpec = JSON.stringify(currentSpec);
 });
 

package/dist/GeoMap.svelte.d.ts

@@ -1,11 +1,11 @@
-import type { DarkMode, MapSpec, ThemeConfig } from '@opendata-ai/openchart-core';
-import { type MapMarkEvent } from '@opendata-ai/openchart-vanilla';
+import type { DarkMode, GeoMapSpec, ThemeConfig } from '@opendata-ai/openchart-core';
+import { type GeoMapMarkEvent } from '@opendata-ai/openchart-vanilla';
 type $$ComponentProps = {
-    spec: MapSpec;
+    spec: GeoMapSpec;
     theme?: ThemeConfig;
     darkMode?: DarkMode;
-    onmarkclick?: (event: MapMarkEvent) => void;
-    onmarkhover?: (event: MapMarkEvent | null) => void;
+    onmarkclick?: (event: GeoMapMarkEvent) => void;
+    onmarkhover?: (event: GeoMapMarkEvent | null) => void;
     class?: string;
     style?: string;
 };

package/dist/GeoMap.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GeoMap.svelte.d.ts","sourceRoot":"","sources":["../src/GeoMap.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,gCAAgC,CAAC;AAIvC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsEF,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"GeoMap.svelte.d.ts","sourceRoot":"","sources":["../src/GeoMap.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACrF,OAAO,EAGL,KAAK,eAAe,EAErB,MAAM,gCAAgC,CAAC;AAIvC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsEF,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/Graph.svelte

@@ -6,44 +6,95 @@
   createGraph() function.
 
   Exposes imperative methods via component exports for programmatic
-  control (search, zoom, select).
+  control (search, zoom, select, fly, highlight).
 -->
 <script lang="ts">
 import type { DarkMode, GraphSpec, ThemeConfig } from '@opendata-ai/openchart-core';
 import {
+  type CameraFlightOptions,
   createGraph,
+  type GraphHighlightTarget,
   type GraphInstance,
+  type GraphLegendData,
   type GraphMountOptions,
+  type GraphTooltipFormatter,
 } from '@opendata-ai/openchart-vanilla';
 import { onMount, untrack } from 'svelte';
 import { getVizDarkMode, getVizTheme } from './context.js';
 
+/** Tooltip prop: `false` off, `true` default, or an object with a formatter. */
+type GraphTooltipProp = boolean | { formatter?: GraphTooltipFormatter };
+/** Legend prop: `false` off, `true` default, or an object toggling interactivity/counts. */
+type GraphLegendProp = boolean | { interactive?: boolean; counts?: boolean };
+
 let {
   spec,
   theme,
   darkMode,
+  tooltip,
+  legend,
+  fitOnLoad,
   onnodeclick,
   onnodedoubleclick,
+  onnodehover,
+  onedgehover,
   onselectionchange,
+  onlegendhover,
+  onlegendtoggle,
+  onhighlightchange,
+  oncamerachange,
   class: className,
   style,
 }: {
   spec: GraphSpec;
   theme?: ThemeConfig;
   darkMode?: DarkMode;
+  tooltip?: GraphTooltipProp;
+  legend?: GraphLegendProp;
+  fitOnLoad?: boolean;
   onnodeclick?: (node: Record<string, unknown>) => void;
   onnodedoubleclick?: (node: Record<string, unknown>) => void;
+  onnodehover?: (node: Record<string, unknown> | null) => void;
+  onedgehover?: (edge: Record<string, unknown> | null) => void;
   onselectionchange?: (nodeIds: string[]) => void;
+  onlegendhover?: (entry: { field: string; value: string } | null) => void;
+  onlegendtoggle?: (activeValues: string[]) => void;
+  onhighlightchange?: (nodeIds: string[] | null) => void;
+  oncamerachange?: (camera: { x: number; y: number; k: number }) => void;
   class?: string;
   style?: string;
 } = $props();
 
 let containerEl: HTMLDivElement;
 let instance: GraphInstance | null = null;
+// First mount plays the entrance; theme/darkMode-only recreations suppress it.
+let mountedOnce = false;
 
 const ctxTheme = getVizTheme();
 const ctxDarkMode = getVizDarkMode();
 
+// Only the on/off decision gates recreation; the formatter (a function) rides
+// the trampoline below so swapping it never remounts the graph.
+const tooltipOn = $derived(tooltip !== false);
+// Serialize the structural legend shape so a { interactive, counts } change
+// recreates, but reference identity churn doesn't.
+const legendKey = $derived(
+  legend === false
+    ? 'false'
+    : legend === true || legend === undefined
+      ? 'true'
+      : JSON.stringify({ interactive: legend.interactive, counts: legend.counts }),
+);
+
+// Stable tooltip formatter wrapper: always reads the LATEST formatter off the
+// (untracked) prop, so a formatter can be added or swapped per-render without
+// recreation and without going stale.
+const stableTooltipFormatter: GraphTooltipFormatter = (item, defaults) => {
+  const t = untrack(() => tooltip);
+  const fn = t && typeof t === 'object' ? t.formatter : undefined;
+  return fn ? fn(item, defaults) : defaults;
+};
+
 onMount(() => {
   return () => {
     instance?.destroy();
@@ -53,25 +104,49 @@ onMount(() => {
 
 let prevSpec = '';
 
-// Effect 1: Mount/recreate graph on theme/darkMode changes.
+// Effect 1: Mount/recreate graph on theme/darkMode/structural option changes.
 $effect(() => {
   const resolvedTheme = theme ?? ctxTheme?.();
   const resolvedDarkMode = darkMode ?? ctxDarkMode?.();
+  // Read the structural tooltip/legend keys + fitOnLoad so a change to any of
+  // them recreates the graph; the tooltip formatter is deliberately NOT tracked
+  // (it rides the trampoline). Referencing `legendKey` here registers the
+  // reactive dependency — the actual `legend` object is read untracked below.
+  const on = tooltipOn;
+  void legendKey;
+  const fit = fitOnLoad;
   const currentSpec = untrack(() => spec);
 
   instance?.destroy();
 
+  const tooltipOption: GraphMountOptions['tooltip'] = on
+    ? { formatter: stableTooltipFormatter }
+    : false;
+
   const options: GraphMountOptions = {
     theme: resolvedTheme,
     darkMode: resolvedDarkMode,
-    onNodeClick: (node: Record<string, unknown>) => untrack(() => onnodeclick)?.(node),
-    onNodeDoubleClick: (node: Record<string, unknown>) => untrack(() => onnodedoubleclick)?.(node),
-    onSelectionChange: (nodeIds: string[]) => untrack(() => onselectionchange)?.(nodeIds),
+    tooltip: tooltipOption,
+    legend: untrack(() => legend),
+    fitOnLoad: fit,
+    onNodeClick: (node) => untrack(() => onnodeclick)?.(node),
+    onNodeDoubleClick: (node) => untrack(() => onnodedoubleclick)?.(node),
+    onNodeHover: (node) => untrack(() => onnodehover)?.(node),
+    onEdgeHover: (edge) => untrack(() => onedgehover)?.(edge),
+    onSelectionChange: (nodeIds) => untrack(() => onselectionchange)?.(nodeIds),
+    onLegendHover: (entry) => untrack(() => onlegendhover)?.(entry),
+    onLegendToggle: (activeValues) => untrack(() => onlegendtoggle)?.(activeValues),
+    onHighlightChange: (nodeIds) => untrack(() => onhighlightchange)?.(nodeIds),
+    onCameraChange: (camera) => untrack(() => oncamerachange)?.(camera),
     responsive: true,
+    // untrack so reading the flag doesn't add a dependency; the value is set
+    // after the first mount and reset only on component teardown.
+    suppressEntrance: untrack(() => mountedOnce),
   };
 
   instance = createGraph(containerEl, currentSpec, options);
   prevSpec = JSON.stringify(currentSpec);
+  mountedOnce = true;
 });
 
 // Effect 2: Update graph when spec changes (no destroy/recreate).
@@ -86,7 +161,8 @@ $effect(() => {
   }
 });
 
-// Imperative methods exposed via component exports
+// Imperative methods exposed via component exports. Each forwards opts to the
+// underlying instance so consumers get the full vanilla API surface.
 export function search(query: string): void {
   instance?.search(query);
 }
@@ -95,21 +171,68 @@ export function clearSearch(): void {
   instance?.clearSearch();
 }
 
-export function zoomToFit(): void {
-  instance?.zoomToFit();
+export function getSearchMatches(): string[] {
+  return instance?.getSearchMatches() ?? [];
+}
+
+export function zoomToFit(opts?: CameraFlightOptions & { padding?: number }): void {
+  instance?.zoomToFit(opts);
+}
+
+export function zoomToNode(nodeId: string, opts?: CameraFlightOptions & { scale?: number }): void {
+  instance?.zoomToNode(nodeId, opts);
 }
 
-export function zoomToNode(nodeId: string): void {
-  instance?.zoomToNode(nodeId);
+export function flyTo(
+  target: { x: number; y: number; k?: number },
+  opts?: CameraFlightOptions,
+): void {
+  instance?.flyTo(target, opts);
 }
 
-export function selectNode(nodeId: string): void {
-  instance?.selectNode(nodeId);
+export function centerAt(x: number, y: number, opts?: CameraFlightOptions): void {
+  instance?.centerAt(x, y, opts);
+}
+
+export function getCamera(): { x: number; y: number; k: number } {
+  return instance?.getCamera() ?? { x: 0, y: 0, k: 1 };
+}
+
+export function selectNode(nodeId: string, opts?: { fly?: boolean } & CameraFlightOptions): void {
+  instance?.selectNode(nodeId, opts);
 }
 
 export function getSelectedNodes(): string[] {
   return instance?.getSelectedNodes() ?? [];
 }
+
+export function highlight(target: GraphHighlightTarget, opts?: { dimOpacity?: number }): void {
+  instance?.highlight(target, opts);
+}
+
+export function clearHighlight(): void {
+  instance?.clearHighlight();
+}
+
+export function getHighlight(): string[] | null {
+  return instance?.getHighlight() ?? null;
+}
+
+export function getLegend(): GraphLegendData | null {
+  return instance?.getLegend() ?? null;
+}
+
+export function setActiveCategories(values: string[]): void {
+  instance?.setActiveCategories(values);
+}
+
+export function getActiveCategories(): string[] {
+  return instance?.getActiveCategories() ?? [];
+}
+
+export function updateVisuals(nextSpec: GraphSpec): void {
+  instance?.updateVisuals(nextSpec);
+}
 </script>
 
 <div

package/dist/Graph.svelte.d.ts

@@ -1,21 +1,74 @@
 import type { DarkMode, GraphSpec, ThemeConfig } from '@opendata-ai/openchart-core';
+import { type CameraFlightOptions, type GraphHighlightTarget, type GraphLegendData, type GraphTooltipFormatter } from '@opendata-ai/openchart-vanilla';
+/** Tooltip prop: `false` off, `true` default, or an object with a formatter. */
+type GraphTooltipProp = boolean | {
+    formatter?: GraphTooltipFormatter;
+};
+/** Legend prop: `false` off, `true` default, or an object toggling interactivity/counts. */
+type GraphLegendProp = boolean | {
+    interactive?: boolean;
+    counts?: boolean;
+};
 type $$ComponentProps = {
     spec: GraphSpec;
     theme?: ThemeConfig;
     darkMode?: DarkMode;
+    tooltip?: GraphTooltipProp;
+    legend?: GraphLegendProp;
+    fitOnLoad?: boolean;
     onnodeclick?: (node: Record<string, unknown>) => void;
     onnodedoubleclick?: (node: Record<string, unknown>) => void;
+    onnodehover?: (node: Record<string, unknown> | null) => void;
+    onedgehover?: (edge: Record<string, unknown> | null) => void;
     onselectionchange?: (nodeIds: string[]) => void;
+    onlegendhover?: (entry: {
+        field: string;
+        value: string;
+    } | null) => void;
+    onlegendtoggle?: (activeValues: string[]) => void;
+    onhighlightchange?: (nodeIds: string[] | null) => void;
+    oncamerachange?: (camera: {
+        x: number;
+        y: number;
+        k: number;
+    }) => void;
     class?: string;
     style?: string;
 };
 declare const Graph: import("svelte").Component<$$ComponentProps, {
     search: (query: string) => void;
     clearSearch: () => void;
-    zoomToFit: () => void;
-    zoomToNode: (nodeId: string) => void;
-    selectNode: (nodeId: string) => void;
+    getSearchMatches: () => string[];
+    zoomToFit: (opts?: CameraFlightOptions & {
+        padding?: number;
+    }) => void;
+    zoomToNode: (nodeId: string, opts?: CameraFlightOptions & {
+        scale?: number;
+    }) => void;
+    flyTo: (target: {
+        x: number;
+        y: number;
+        k?: number;
+    }, opts?: CameraFlightOptions) => void;
+    centerAt: (x: number, y: number, opts?: CameraFlightOptions) => void;
+    getCamera: () => {
+        x: number;
+        y: number;
+        k: number;
+    };
+    selectNode: (nodeId: string, opts?: {
+        fly?: boolean;
+    } & CameraFlightOptions) => void;
     getSelectedNodes: () => string[];
+    highlight: (target: GraphHighlightTarget, opts?: {
+        dimOpacity?: number;
+    }) => void;
+    clearHighlight: () => void;
+    getHighlight: () => string[] | null;
+    getLegend: () => GraphLegendData | null;
+    setActiveCategories: (values: string[]) => void;
+    getActiveCategories: () => string[];
+    updateVisuals: (nextSpec: GraphSpec) => void;
 }, "">;
 type Graph = ReturnType<typeof Graph>;
 export default Graph;

package/dist/Graph.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Graph.svelte.d.ts","sourceRoot":"","sources":["../src/Graph.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AASnF,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC5D,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiGF,QAAA,MAAM,KAAK;oBA9Ba,MAAM,KAAG,IAAI;uBAIZ,IAAI;qBAIN,IAAI;yBAIE,MAAM,KAAG,IAAI;yBAIb,MAAM,KAAG,IAAI;4BAIZ,MAAM,EAAE;MAUa,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Graph.svelte.d.ts","sourceRoot":"","sources":["../src/Graph.svelte.ts"],"names":[],"mappings":"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"}

package/dist/Visualization.svelte

@@ -8,8 +8,8 @@
 import type { DarkMode, ThemeConfig, VizSpec } from '@opendata-ai/openchart-core';
 import {
   isBarListSpec,
+  isGeoMapSpec,
   isGraphSpec,
-  isMapSpec,
   isSankeySpec,
   isTableSpec,
   isTileMapSpec,
@@ -47,7 +47,7 @@ let {
   <TileMap {spec} {theme} {darkMode} class={className} {style} />
 {:else if isBarListSpec(spec)}
   <BarList {spec} {theme} {darkMode} class={className} {style} />
-{:else if isMapSpec(spec)}
+{:else if isGeoMapSpec(spec)}
   <GeoMap {spec} {theme} {darkMode} class={className} {style} />
 {:else}
   <Chart {spec} {theme} {darkMode} class={className} {style} />

package/dist/__tests__/Graph.test.js

@@ -101,4 +101,54 @@ describe('<Graph />', () => {
         const canvas = container.querySelector('canvas');
         expect(canvas).not.toBeNull();
     });
+    it('exposes the full imperative API and forwards calls without throwing', async () => {
+        const result = await renderGraph({ spec: basicSpec });
+        // Svelte 5 exposes component exports on the returned component instance.
+        const api = result.component;
+        for (const name of [
+            'search',
+            'clearSearch',
+            'getSearchMatches',
+            'zoomToFit',
+            'zoomToNode',
+            'flyTo',
+            'centerAt',
+            'getCamera',
+            'selectNode',
+            'getSelectedNodes',
+            'highlight',
+            'clearHighlight',
+            'getHighlight',
+            'getLegend',
+            'updateVisuals',
+        ]) {
+            expect(typeof api[name]).toBe('function');
+        }
+        // Readback methods return sensible defaults from the live instance.
+        expect(api.getSelectedNodes()).toEqual([]);
+        expect(api.getSearchMatches()).toEqual([]);
+        expect(api.getHighlight()).toBeNull();
+        const cam = api.getCamera();
+        expect(cam.k).toBeGreaterThan(0);
+        // Opt-forwarding methods don't throw.
+        expect(() => api.zoomToFit({ duration: 0 })).not.toThrow();
+        expect(() => api.zoomToNode('a', { scale: 2 })).not.toThrow();
+        expect(() => api.flyTo({ x: 0, y: 0, k: 1 }, { duration: 0 })).not.toThrow();
+        expect(() => api.centerAt(0, 0, { duration: 0 })).not.toThrow();
+        expect(() => api.highlight({ nodeIds: ['a'] })).not.toThrow();
+        expect(() => api.clearHighlight()).not.toThrow();
+    });
+    it('renders with new option props (tooltip formatter, legend object, events)', async () => {
+        const { container } = await renderGraph({
+            spec: basicSpec,
+            tooltip: { formatter: () => 'custom' },
+            legend: { interactive: false, counts: false },
+            fitOnLoad: true,
+            onlegendhover: () => { },
+            onhighlightchange: () => { },
+            oncamerachange: () => { },
+        });
+        const canvas = container.querySelector('canvas');
+        expect(canvas).not.toBeNull();
+    });
 });

package/dist/composables/useChart.svelte.d.ts

@@ -26,6 +26,8 @@ export interface UseChartOptions {
     onDataPointClick?: MountOptions['onDataPointClick'];
     /** Enable responsive resizing. Defaults to true. */
     responsive?: boolean;
+    /** Rendering backend for point marks; see the vanilla `MountOptions.renderer`. */
+    renderer?: MountOptions['renderer'];
 }
 export interface UseChartReturn {
     /** Svelte action to attach to a container div. */

package/dist/composables/useChart.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChart.svelte.d.ts","sourceRoot":"","sources":["../../src/composables/useChart.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAChG,OAAO,EAAE,KAAK,aAAa,EAAe,KAAK,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAGpG,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B,yBAAyB;IACzB,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACpC,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;IACpD,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,MAAM,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK;QAAE,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IACvD,+CAA+C;IAC/C,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,wDAAwD;IACxD,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CACrC;AAED,wBAAgB,QAAQ,CACtB,IAAI,EAAE,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,EAC7C,OAAO,CAAC,EAAE,MAAM,eAAe,GAAG,SAAS,GAC1C,cAAc,CA8DhB"}
+{"version":3,"file":"useChart.svelte.d.ts","sourceRoot":"","sources":["../../src/composables/useChart.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAChG,OAAO,EAAE,KAAK,aAAa,EAAe,KAAK,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAGpG,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B,yBAAyB;IACzB,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACpC,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;IACpD,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,MAAM,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK;QAAE,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IACvD,+CAA+C;IAC/C,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,wDAAwD;IACxD,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CACrC;AAED,wBAAgB,QAAQ,CACtB,IAAI,EAAE,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,EAC7C,OAAO,CAAC,EAAE,MAAM,eAAe,GAAG,SAAS,GAC1C,cAAc,CA+DhB"}

package/dist/composables/useChart.svelte.js

@@ -30,6 +30,7 @@ export function useChart(spec, options) {
                 darkMode: opts?.darkMode,
                 onDataPointClick: opts?.onDataPointClick,
                 responsive: opts?.responsive ?? true,
+                renderer: opts?.renderer,
             };
             // Read spec without tracking
             const currentSpec = untrack(() => spec());