@opendata-ai/openchart-svelte 2.0.0

package/README.md

@@ -0,0 +1,94 @@
+# @opendata-ai/openchart-svelte
+
+Svelte 5 components for OpenChart. Renders chart specs as SVG and table specs as DOM, using Svelte's rune-based reactivity.
+
+## Install
+
+```bash
+npm install @opendata-ai/openchart-svelte @opendata-ai/openchart-core
+```
+
+## Quick start
+
+```svelte
+<script lang="ts">
+import { Chart } from '@opendata-ai/openchart-svelte';
+import { lineChart } from '@opendata-ai/openchart-core';
+
+const data = [
+  { date: '2024-01', value: 100 },
+  { date: '2024-02', value: 150 },
+  { date: '2024-03', value: 130 },
+];
+
+const spec = lineChart(data, 'date', 'value');
+</script>
+
+<Chart {spec} />
+```
+
+See the [core README](../core/README.md) for all available spec builders.
+
+## Components
+
+| Component | Purpose |
+|-----------|---------|
+| `Chart` | Renders any chart spec (line, bar, column, pie, scatter, etc.) |
+| `DataTable` | Renders table specs with sorting, search, and pagination |
+| `Graph` | Renders network graph specs with force-directed layout |
+| `Visualization` | Routes to the correct component based on spec type |
+| `VizThemeProvider` | Provides theme and dark mode context to child components |
+
+## Visualization
+
+When you're rendering arbitrary `VizSpec` values and don't know the type ahead of time, `Visualization` inspects the spec and routes to the correct component.
+
+```svelte
+<script lang="ts">
+import { Visualization } from '@opendata-ai/openchart-svelte';
+import type { VizSpec } from '@opendata-ai/openchart-core';
+
+let { spec }: { spec: VizSpec } = $props();
+</script>
+
+<!-- Renders Chart, DataTable, or Graph based on spec.type -->
+<Visualization {spec} />
+```
+
+If you need event handlers or component-specific props, use the specific component directly instead.
+
+## Dark mode and theming
+
+Wrap components with `VizThemeProvider` to set theme and dark mode for all child visualizations. It uses Svelte's context API, so all `Chart`, `DataTable`, and `Graph` components inside the provider inherit its values.
+
+```svelte
+<script lang="ts">
+import { VizThemeProvider, Chart } from '@opendata-ai/openchart-svelte';
+</script>
+
+<VizThemeProvider theme={myTheme} darkMode="auto">
+  <Chart spec={spec1} />
+  <Chart spec={spec2} />
+</VizThemeProvider>
+```
+
+`darkMode` accepts `"auto"` (follows system preference), `"force"` (always dark), or `"off"` (always light).
+
+For one-off overrides, pass `darkMode` or `theme` directly on an individual component. Component-level props take priority over the provider.
+
+## Composables
+
+For lower-level control or custom rendering:
+
+- `useChart(spec, options?)` - Returns `{ action, chart, layout }`. Use with `use:action` directive
+- `useGraph(spec, options?)` - Returns `{ action, search, zoomToFit, ... }`. Use with `use:action`
+- `useTable(spec, options?)` - Returns `{ action, table, layout }`. Use with `use:action` directive
+- `useTableState(options?)` - Manages table sorting, pagination, and search state
+- `useDarkMode(preference?)` - Resolves dark mode preference against system settings
+
+Context helpers for reading provider values directly:
+
+- `getVizTheme()` - Returns the theme from the nearest `VizThemeProvider`
+- `getVizDarkMode()` - Returns the dark mode preference from the nearest provider
+- `setVizTheme(getter)` - Sets theme context (used internally by `VizThemeProvider`)
+- `setVizDarkMode(getter)` - Sets dark mode context (used internally by `VizThemeProvider`)

package/dist/Chart.svelte

@@ -0,0 +1,132 @@
+<!--
+  Chart component: Svelte 5 wrapper around the vanilla adapter.
+
+  Mounts a chart instance on render, updates when spec/options change,
+  and cleans up on unmount. All heavy lifting is done by the vanilla
+  createChart() function.
+-->
+<script lang="ts">
+import type {
+  Annotation,
+  AnnotationOffset,
+  ChartSpec,
+  DarkMode,
+  ElementEdit,
+  GraphSpec,
+  MarkEvent,
+  TextAnnotation,
+  ThemeConfig,
+} from '@opendata-ai/openchart-core';
+import { type ChartInstance, createChart, type MountOptions } from '@opendata-ai/openchart-vanilla';
+import { onMount, untrack } from 'svelte';
+import { getVizDarkMode, getVizTheme } from './context.js';
+
+let {
+  spec,
+  theme,
+  darkMode,
+  onmarkclick,
+  onmarkhover,
+  onmarkleave,
+  onlegendtoggle,
+  onannotationclick,
+  onannotationedit,
+  onedit,
+  ondatapointclick,
+  class: className,
+  style,
+}: {
+  spec: ChartSpec | GraphSpec;
+  theme?: ThemeConfig;
+  darkMode?: DarkMode;
+  onmarkclick?: (event: MarkEvent) => void;
+  onmarkhover?: (event: MarkEvent) => void;
+  onmarkleave?: () => void;
+  onlegendtoggle?: (series: string, visible: boolean) => void;
+  onannotationclick?: (annotation: Annotation, event: MouseEvent) => void;
+  onannotationedit?: (annotation: TextAnnotation, offset: AnnotationOffset) => void;
+  onedit?: (edit: ElementEdit) => void;
+  ondatapointclick?: (data: Record<string, unknown>) => void;
+  class?: string;
+  style?: string;
+} = $props();
+
+let containerEl: HTMLDivElement;
+let instance: ChartInstance | null = null;
+
+const ctxTheme = getVizTheme();
+const ctxDarkMode = getVizDarkMode();
+
+onMount(() => {
+  return () => {
+    instance?.destroy();
+    instance = null;
+  };
+});
+
+// Stable callback wrappers that read current handler props without
+// creating reactive dependencies. This prevents callback prop changes
+// from triggering a full chart destroy/recreate cycle.
+const stableHandlers: MountOptions = {
+  onMarkClick: (event: MarkEvent) => untrack(() => onmarkclick)?.(event),
+  onMarkHover: (event: MarkEvent) => untrack(() => onmarkhover)?.(event),
+  onMarkLeave: () => untrack(() => onmarkleave)?.(),
+  onLegendToggle: (series: string, visible: boolean) =>
+    untrack(() => onlegendtoggle)?.(series, visible),
+  onAnnotationClick: (annotation: Annotation, event: MouseEvent) =>
+    untrack(() => onannotationclick)?.(annotation, event),
+  onDataPointClick: (data: Record<string, unknown>) => untrack(() => ondatapointclick)?.(data),
+};
+
+// Editing callbacks - only defined as stable wrappers, but only
+// included in options when the consumer provides the prop.
+const stableOnAnnotationEdit = (annotation: TextAnnotation, offset: AnnotationOffset) =>
+  untrack(() => onannotationedit)?.(annotation, offset);
+const stableOnEdit = (edit: ElementEdit) => untrack(() => onedit)?.(edit);
+
+let prevSpec = '';
+
+// Effect 1: Mount/recreate chart on theme/darkMode changes.
+// Reads spec via untrack() so spec changes don't trigger full recreate.
+$effect(() => {
+  const resolvedTheme = theme ?? ctxTheme?.();
+  const resolvedDarkMode = darkMode ?? ctxDarkMode?.();
+  // Read spec without tracking - spec changes handled in Effect 2
+  const currentSpec = untrack(() => spec);
+
+  instance?.destroy();
+
+  const hasAnnotationEdit = untrack(() => onannotationedit) !== undefined;
+  const hasEdit = untrack(() => onedit) !== undefined;
+
+  const options: MountOptions = {
+    theme: resolvedTheme,
+    darkMode: resolvedDarkMode,
+    responsive: true,
+    ...stableHandlers,
+    ...(hasAnnotationEdit ? { onAnnotationEdit: stableOnAnnotationEdit } : {}),
+    ...(hasEdit ? { onEdit: stableOnEdit } : {}),
+  };
+
+  instance = createChart(containerEl, currentSpec, options);
+  prevSpec = JSON.stringify(currentSpec);
+});
+
+// Effect 2: Update chart when spec changes (no destroy/recreate).
+$effect(() => {
+  const currentSpec = spec;
+  if (!instance) return;
+
+  const specString = JSON.stringify(currentSpec);
+  if (specString !== prevSpec) {
+    prevSpec = specString;
+    instance.update(currentSpec);
+  }
+});
+</script>
+
+<div
+  bind:this={containerEl}
+  class={className ? `viz-chart-root ${className}` : 'viz-chart-root'}
+  {style}
+></div>

package/dist/Chart.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Annotation, AnnotationOffset, ChartSpec, DarkMode, ElementEdit, GraphSpec, MarkEvent, TextAnnotation, ThemeConfig } from '@opendata-ai/openchart-core';
+type $$ComponentProps = {
+    spec: ChartSpec | GraphSpec;
+    theme?: ThemeConfig;
+    darkMode?: DarkMode;
+    onmarkclick?: (event: MarkEvent) => void;
+    onmarkhover?: (event: MarkEvent) => void;
+    onmarkleave?: () => void;
+    onlegendtoggle?: (series: string, visible: boolean) => void;
+    onannotationclick?: (annotation: Annotation, event: MouseEvent) => void;
+    onannotationedit?: (annotation: TextAnnotation, offset: AnnotationOffset) => void;
+    onedit?: (edit: ElementEdit) => void;
+    ondatapointclick?: (data: Record<string, unknown>) => void;
+    class?: string;
+    style?: string;
+};
+declare const Chart: import("svelte").Component<$$ComponentProps, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;
+//# sourceMappingURL=Chart.svelte.d.ts.map

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

@@ -0,0 +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,SAAS,EACT,SAAS,EACT,cAAc,EACd,WAAW,EACZ,MAAM,6BAA6B,CAAC;AAKpC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,SAAS,GAAG,SAAS,CAAC;IAC5B,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,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsGF,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/DataTable.svelte

@@ -0,0 +1,132 @@
+<!--
+  DataTable component: Svelte 5 wrapper around the vanilla table adapter.
+
+  Mounts a table instance on render, updates when spec changes,
+  and cleans up on unmount. Supports both controlled and uncontrolled modes
+  for sort, search, and pagination state.
+-->
+<script lang="ts">
+import type { DarkMode, SortState, TableSpec, ThemeConfig } from '@opendata-ai/openchart-core';
+import {
+  createTable,
+  type TableInstance,
+  type TableMountOptions,
+} from '@opendata-ai/openchart-vanilla';
+import { onMount, untrack } from 'svelte';
+import { getVizDarkMode, getVizTheme } from './context.js';
+
+let {
+  spec,
+  theme,
+  darkMode,
+  onrowclick,
+  onsortchange,
+  onsearchchange,
+  onpagechange,
+  sort,
+  search,
+  page,
+  class: className,
+  style,
+}: {
+  spec: TableSpec;
+  theme?: ThemeConfig;
+  darkMode?: DarkMode;
+  onrowclick?: (row: Record<string, unknown>) => void;
+  onsortchange?: (sort: SortState | null) => void;
+  onsearchchange?: (query: string) => void;
+  onpagechange?: (page: number) => void;
+  sort?: SortState | null;
+  search?: string;
+  page?: number;
+  class?: string;
+  style?: string;
+} = $props();
+
+let containerEl: HTMLDivElement;
+let instance: TableInstance | null = null;
+
+const ctxTheme = getVizTheme();
+const ctxDarkMode = getVizDarkMode();
+
+const isControlled = $derived(sort !== undefined || search !== undefined || page !== undefined);
+
+onMount(() => {
+  return () => {
+    instance?.destroy();
+    instance = null;
+  };
+});
+
+let prevSpec = '';
+
+// Effect 1: Mount/recreate table on theme/darkMode changes.
+$effect(() => {
+  const resolvedTheme = theme ?? ctxTheme?.();
+  const resolvedDarkMode = darkMode ?? ctxDarkMode?.();
+  // Read spec and controlled state without tracking
+  const currentSpec = untrack(() => spec);
+  const currentIsControlled = untrack(() => isControlled);
+  const currentSort = untrack(() => sort);
+  const currentSearch = untrack(() => search);
+  const currentPage = untrack(() => page);
+
+  instance?.destroy();
+
+  const mountOptions: TableMountOptions = {
+    theme: resolvedTheme,
+    darkMode: resolvedDarkMode,
+    onRowClick: (row: Record<string, unknown>) => untrack(() => onrowclick)?.(row),
+    responsive: true,
+    onStateChange: (state) => {
+      if (state.sort !== undefined) untrack(() => onsortchange)?.(state.sort);
+      if (state.search !== undefined) untrack(() => onsearchchange)?.(state.search);
+      if (state.page !== undefined) untrack(() => onpagechange)?.(state.page);
+    },
+  };
+
+  if (currentIsControlled) {
+    mountOptions.externalState = {
+      sort: currentSort ?? null,
+      search: currentSearch ?? '',
+      page: currentPage ?? 0,
+    };
+  }
+
+  instance = createTable(containerEl, currentSpec, mountOptions);
+  prevSpec = JSON.stringify(currentSpec);
+});
+
+// Effect 2: Update table when spec changes (no destroy/recreate).
+$effect(() => {
+  const currentSpec = spec;
+  if (!instance) return;
+
+  const specString = JSON.stringify(currentSpec);
+  if (specString !== prevSpec) {
+    prevSpec = specString;
+    instance.update(currentSpec);
+  }
+});
+
+// Effect 3: Sync controlled state without remounting.
+$effect(() => {
+  const currentIsControlled = isControlled;
+  const currentSort = sort;
+  const currentSearch = search;
+  const currentPage = page;
+  if (!instance || !currentIsControlled) return;
+
+  instance.setState({
+    sort: currentSort ?? null,
+    search: currentSearch ?? '',
+    page: currentPage ?? 0,
+  });
+});
+</script>
+
+<div
+  bind:this={containerEl}
+  class={className ? `viz-table-root ${className}` : 'viz-table-root'}
+  {style}
+></div>

package/dist/DataTable.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { DarkMode, SortState, TableSpec, ThemeConfig } from '@opendata-ai/openchart-core';
+type $$ComponentProps = {
+    spec: TableSpec;
+    theme?: ThemeConfig;
+    darkMode?: DarkMode;
+    onrowclick?: (row: Record<string, unknown>) => void;
+    onsortchange?: (sort: SortState | null) => void;
+    onsearchchange?: (query: string) => void;
+    onpagechange?: (page: number) => void;
+    sort?: SortState | null;
+    search?: string;
+    page?: number;
+    class?: string;
+    style?: string;
+};
+declare const DataTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type DataTable = ReturnType<typeof DataTable>;
+export default DataTable;
+//# sourceMappingURL=DataTable.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../src/DataTable.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAS9F,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACpD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6GF,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/Graph.svelte

@@ -0,0 +1,119 @@
+<!--
+  Graph component: Svelte 5 wrapper around the vanilla adapter.
+
+  Mounts a graph instance on render, updates when spec changes,
+  and cleans up on unmount. All heavy lifting is done by the vanilla
+  createGraph() function.
+
+  Exposes imperative methods via component exports for programmatic
+  control (search, zoom, select).
+-->
+<script lang="ts">
+import type { DarkMode, GraphSpec, ThemeConfig } from '@opendata-ai/openchart-core';
+import {
+  createGraph,
+  type GraphInstance,
+  type GraphMountOptions,
+} from '@opendata-ai/openchart-vanilla';
+import { onMount, untrack } from 'svelte';
+import { getVizDarkMode, getVizTheme } from './context.js';
+
+let {
+  spec,
+  theme,
+  darkMode,
+  onnodeclick,
+  onnodedoubleclick,
+  onselectionchange,
+  class: className,
+  style,
+}: {
+  spec: GraphSpec;
+  theme?: ThemeConfig;
+  darkMode?: DarkMode;
+  onnodeclick?: (node: Record<string, unknown>) => void;
+  onnodedoubleclick?: (node: Record<string, unknown>) => void;
+  onselectionchange?: (nodeIds: string[]) => void;
+  class?: string;
+  style?: string;
+} = $props();
+
+let containerEl: HTMLDivElement;
+let instance: GraphInstance | null = null;
+
+const ctxTheme = getVizTheme();
+const ctxDarkMode = getVizDarkMode();
+
+onMount(() => {
+  return () => {
+    instance?.destroy();
+    instance = null;
+  };
+});
+
+let prevSpec = '';
+
+// Effect 1: Mount/recreate graph on theme/darkMode changes.
+$effect(() => {
+  const resolvedTheme = theme ?? ctxTheme?.();
+  const resolvedDarkMode = darkMode ?? ctxDarkMode?.();
+  const currentSpec = untrack(() => spec);
+
+  instance?.destroy();
+
+  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),
+    responsive: true,
+  };
+
+  instance = createGraph(containerEl, currentSpec, options);
+  prevSpec = JSON.stringify(currentSpec);
+});
+
+// Effect 2: Update graph when spec changes (no destroy/recreate).
+$effect(() => {
+  const currentSpec = spec;
+  if (!instance) return;
+
+  const specString = JSON.stringify(currentSpec);
+  if (specString !== prevSpec) {
+    prevSpec = specString;
+    instance.update(currentSpec);
+  }
+});
+
+// Imperative methods exposed via component exports
+export function search(query: string): void {
+  instance?.search(query);
+}
+
+export function clearSearch(): void {
+  instance?.clearSearch();
+}
+
+export function zoomToFit(): void {
+  instance?.zoomToFit();
+}
+
+export function zoomToNode(nodeId: string): void {
+  instance?.zoomToNode(nodeId);
+}
+
+export function selectNode(nodeId: string): void {
+  instance?.selectNode(nodeId);
+}
+
+export function getSelectedNodes(): string[] {
+  return instance?.getSelectedNodes() ?? [];
+}
+</script>
+
+<div
+  bind:this={containerEl}
+  class={className ? `viz-graph-root ${className}` : 'viz-graph-root'}
+  {style}
+></div>

package/dist/Graph.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { DarkMode, GraphSpec, ThemeConfig } from '@opendata-ai/openchart-core';
+type $$ComponentProps = {
+    spec: GraphSpec;
+    theme?: ThemeConfig;
+    darkMode?: DarkMode;
+    onnodeclick?: (node: Record<string, unknown>) => void;
+    onnodedoubleclick?: (node: Record<string, unknown>) => void;
+    onselectionchange?: (nodeIds: string[]) => 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;
+    getSelectedNodes: () => string[];
+}, "">;
+type Graph = ReturnType<typeof Graph>;
+export default Graph;
+//# sourceMappingURL=Graph.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/ThemeProvider.svelte

@@ -0,0 +1,27 @@
+<!--
+  VizThemeProvider: provides a theme and dark mode preference to all
+  descendant Chart, DataTable, and Graph components.
+
+  Components use the context values as fallbacks when no explicit
+  `theme` or `darkMode` prop is passed.
+-->
+<script lang="ts">
+import type { DarkMode, ThemeConfig } from '@opendata-ai/openchart-core';
+import type { Snippet } from 'svelte';
+import { setVizDarkMode, setVizTheme } from './context.js';
+
+let {
+  theme,
+  darkMode,
+  children,
+}: {
+  theme: ThemeConfig | undefined;
+  darkMode?: DarkMode;
+  children: Snippet;
+} = $props();
+
+setVizTheme(() => theme);
+setVizDarkMode(() => darkMode);
+</script>
+
+{@render children()}

package/dist/ThemeProvider.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { DarkMode, ThemeConfig } from '@opendata-ai/openchart-core';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    theme: ThemeConfig | undefined;
+    darkMode?: DarkMode;
+    children: Snippet;
+};
+declare const ThemeProvider: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemeProvider = ReturnType<typeof ThemeProvider>;
+export default ThemeProvider;
+//# sourceMappingURL=ThemeProvider.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGrC,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,WAAW,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAqBF,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/Visualization.svelte

@@ -0,0 +1,35 @@
+<!--
+  Visualization routing component: renders Chart, DataTable, or Graph
+  based on the spec type. Use this when rendering arbitrary VizSpec values.
+
+  For event handlers, use the specific component (Chart, DataTable, Graph) directly.
+-->
+<script lang="ts">
+import type { DarkMode, ThemeConfig, VizSpec } from '@opendata-ai/openchart-core';
+import { isGraphSpec, isTableSpec } from '@opendata-ai/openchart-core';
+import Chart from './Chart.svelte';
+import DataTable from './DataTable.svelte';
+import Graph from './Graph.svelte';
+
+let {
+  spec,
+  theme,
+  darkMode,
+  class: className,
+  style,
+}: {
+  spec: VizSpec;
+  theme?: ThemeConfig;
+  darkMode?: DarkMode;
+  class?: string;
+  style?: string;
+} = $props();
+</script>
+
+{#if isTableSpec(spec)}
+  <DataTable {spec} {theme} {darkMode} class={className} {style} />
+{:else if isGraphSpec(spec)}
+  <Graph {spec} {theme} {darkMode} class={className} {style} />
+{:else}
+  <Chart {spec} {theme} {darkMode} class={className} {style} />
+{/if}

package/dist/Visualization.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { DarkMode, ThemeConfig, VizSpec } from '@opendata-ai/openchart-core';
+type $$ComponentProps = {
+    spec: VizSpec;
+    theme?: ThemeConfig;
+    darkMode?: DarkMode;
+    class?: string;
+    style?: string;
+};
+declare const Visualization: import("svelte").Component<$$ComponentProps, {}, "">;
+type Visualization = ReturnType<typeof Visualization>;
+export default Visualization;
+//# sourceMappingURL=Visualization.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Visualization.svelte.d.ts","sourceRoot":"","sources":["../src/Visualization.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAMjF,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4BF,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}