@opendata-ai/openchart-svelte 8.0.0-rc.2 → 8.0.0-rc.21

package/src/BarList.svelte

@@ -1,95 +0,0 @@
-<!--
-  BarList component: Svelte 5 wrapper around the vanilla adapter.
--->
-<script lang="ts">
-import type { BarListSpec, DarkMode, ThemeConfig } from '@opendata-ai/openchart-core';
-import {
-  type BarListInstance,
-  type BarListMountOptions,
-  createBarList,
-} from '@opendata-ai/openchart-vanilla';
-import { onMount, untrack } from 'svelte';
-import { getVizDarkMode, getVizTheme } from './context.js';
-
-let {
-  spec,
-  theme,
-  darkMode,
-  onrowclick,
-  onrowhover,
-  class: className,
-  style,
-}: {
-  spec: BarListSpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  onrowclick?: (row: { label: string; value: number; data: Record<string, unknown> }) => void;
-  onrowhover?: (
-    row: {
-      label: string;
-      value: number;
-      data: Record<string, unknown>;
-    } | null,
-  ) => void;
-  class?: string;
-  style?: string;
-} = $props();
-
-let containerEl: HTMLDivElement;
-let instance: BarListInstance | null = null;
-
-const ctxTheme = getVizTheme();
-const ctxDarkMode = getVizDarkMode();
-
-onMount(() => {
-  return () => {
-    instance?.destroy();
-    instance = null;
-  };
-});
-
-let prevSpec = '';
-
-$effect(() => {
-  const resolvedTheme = theme ?? ctxTheme?.();
-  const resolvedDarkMode = darkMode ?? ctxDarkMode?.();
-  const currentSpec = untrack(() => spec);
-
-  instance?.destroy();
-
-  const options: BarListMountOptions = {
-    theme: resolvedTheme,
-    darkMode: resolvedDarkMode,
-    onRowClick: (row: { label: string; value: number; data: Record<string, unknown> }) =>
-      untrack(() => onrowclick)?.(row),
-    onRowHover: (
-      row: {
-        label: string;
-        value: number;
-        data: Record<string, unknown>;
-      } | null,
-    ) => untrack(() => onrowhover)?.(row),
-    responsive: true,
-  };
-
-  instance = createBarList(containerEl, currentSpec, options);
-  prevSpec = JSON.stringify(currentSpec);
-});
-
-$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 ? `oc-barlist-root ${className}` : 'oc-barlist-root'}
-  {style}
-></div>

package/src/Chart.svelte

@@ -1,192 +0,0 @@
-<!--
-  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,
-  ElementRef,
-  GraphSpec,
-  LayerSpec,
-  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,
-  onselect,
-  ondeselect,
-  ontextedit,
-  ondatapointclick,
-  selectedElement: selectedElementProp,
-  highlight,
-  class: className,
-  style,
-}: {
-  spec: ChartSpec | LayerSpec | 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;
-  onselect?: (element: ElementRef) => void;
-  ondeselect?: (element: ElementRef) => void;
-  ontextedit?: (element: ElementRef, oldText: string, newText: string) => void;
-  ondatapointclick?: (data: Record<string, unknown>) => void;
-  selectedElement?: ElementRef;
-  highlight?: string[] | null;
-  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);
-const stableOnSelect = (element: ElementRef) => untrack(() => onselect)?.(element);
-const stableOnDeselect = (element: ElementRef) => untrack(() => ondeselect)?.(element);
-const stableOnTextEdit = (element: ElementRef, oldText: string, newText: string) =>
-  untrack(() => ontextedit)?.(element, oldText, newText);
-
-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 hasSelect = untrack(() => onselect) !== undefined;
-  const hasDeselect = untrack(() => ondeselect) !== undefined;
-  const hasTextEdit = untrack(() => ontextedit) !== undefined;
-  const currentSelectedElement = untrack(() => selectedElementProp);
-
-  const options: MountOptions = {
-    theme: resolvedTheme,
-    darkMode: resolvedDarkMode,
-    responsive: true,
-    ...stableHandlers,
-    ...(hasAnnotationEdit ? { onAnnotationEdit: stableOnAnnotationEdit } : {}),
-    ...(hasEdit ? { onEdit: stableOnEdit } : {}),
-    ...(hasSelect ? { onSelect: stableOnSelect } : {}),
-    ...(hasDeselect ? { onDeselect: stableOnDeselect } : {}),
-    ...(hasTextEdit ? { onTextEdit: stableOnTextEdit } : {}),
-    ...(currentSelectedElement ? { selectedElement: currentSelectedElement } : {}),
-  };
-
-  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, { selectedElement: untrack(() => selectedElementProp) });
-  }
-});
-
-// Effect 3: Watch selectedElement prop changes.
-$effect(() => {
-  const sel = selectedElementProp;
-  // Read instance without tracking to avoid coupling to Effect 1
-  const inst = untrack(() => instance);
-  if (!inst) return;
-
-  if (sel) {
-    inst.select(sel);
-  } else {
-    inst.deselect();
-  }
-});
-
-// Effect 4: Watch highlight prop changes.
-$effect(() => {
-  const h = highlight;
-  if (h === undefined) return;
-  const inst = untrack(() => instance);
-  if (!inst) return;
-  inst.setHighlight(h ?? null);
-});
-
-// Imperative methods exposed via component exports
-export function getSelectedElement(): ElementRef | null {
-  return instance?.getSelectedElement() ?? null;
-}
-
-export function select(ref: ElementRef): void {
-  instance?.select(ref);
-}
-
-export function deselect(): void {
-  instance?.deselect();
-}
-</script>
-
-<div
-  bind:this={containerEl}
-  class={className ? `oc-chart-root ${className}` : 'oc-chart-root'}
-  {style}
-></div>

package/src/ChartStory.svelte

@@ -1,116 +0,0 @@
-<!--
-  ChartStory: Svelte 5 scrollytelling shell around the vanilla
-  `createChartStory`.
-
-  A sticky chart panel plus a scrolling narrative column whose blocks advance
-  the story. The vanilla driver owns cumulative patch application, mark
-  morphing, crossfade, and camera; this component owns only Svelte lifecycle
-  and the sticky layout.
-
-  Narrative is provided as an array of snippets (`narrative`), one per step.
-  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 { MountOptions } from '@opendata-ai/openchart-vanilla';
-import {
-  type ChartStoryInstance,
-  type ChartStoryOptions,
-  createChartStory,
-} from '@opendata-ai/openchart-vanilla/story';
-import { onMount, type Snippet, untrack } from 'svelte';
-
-let {
-  spec,
-  steps,
-  narrative,
-  step,
-  triggerPosition,
-  cameraMode,
-  mountOptions,
-  class: className,
-}: {
-  spec: ChartSpec | LayerSpec | GraphSpec | MapSpec;
-  steps: ChartStoryOptions['steps'];
-  narrative: Snippet[];
-  step?: number;
-  triggerPosition?: number;
-  cameraMode?: 'step' | 'scrub';
-  mountOptions?: MountOptions;
-  class?: string;
-} = $props();
-
-let sectionEl: HTMLElement;
-let mountEl: HTMLDivElement;
-const stepEls: Array<HTMLElement | null> = $state([]);
-let story: ChartStoryInstance | null = null;
-
-onMount(() => {
-  if (narrative.length !== steps.length) {
-    console.warn(
-      `[openchart] ChartStory: narrative length (${narrative.length}) does not match steps length (${steps.length}). Each step should have a corresponding narrative element.`,
-    );
-  }
-
-  story = createChartStory(
-    mountEl,
-    {
-      spec: untrack(() => spec),
-      steps: untrack(() => steps),
-      triggerPosition: untrack(() => triggerPosition),
-      cameraMode: untrack(() => cameraMode),
-    },
-    untrack(() => mountOptions),
-  );
-  story.setContainer(sectionEl);
-  stepEls.forEach((el, i) => {
-    if (el) story?.registerStep(i, el);
-  });
-  const initialStep = untrack(() => step);
-  if (initialStep !== undefined) story.goTo(initialStep);
-
-  return () => {
-    story?.destroy();
-    story = null;
-  };
-});
-
-// Controlled mode: drive the story when `step` changes.
-$effect(() => {
-  const next = step;
-  if (next === undefined) return;
-  untrack(() => story)?.goTo(next);
-});
-
-export function goTo(index: number): void {
-  story?.goTo(index);
-}
-
-export function getInstance(): ChartStoryInstance | null {
-  return story;
-}
-</script>
-
-<section
-  bind:this={sectionEl}
-  class={className ? `oc-story ${className}` : 'oc-story'}
-  style="position:relative;display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:3rem;align-items:start;"
->
-  <div style="position:relative;">
-    <!-- Keyed by index: steps are a fixed ordered list, so the index is the
-         stable identity. Don't reorder or splice narrative entries at runtime
-         (it would remap step refs to the wrong content); rebuild the story. -->
-    {#each narrative as block, i (i)}
-      <div
-        bind:this={stepEls[i]}
-        data-oc-story-step={i}
-        style="min-height:80vh;display:flex;align-items:center;"
-      >
-        <div style="max-width:36rem;">{@render block()}</div>
-      </div>
-    {/each}
-  </div>
-  <div style="position:sticky;top:2rem;height:calc(100vh - 4rem);display:flex;align-items:center;justify-content:center;">
-    <div bind:this={mountEl} style="width:100%;"></div>
-  </div>
-</section>

package/src/DataTable.svelte

@@ -1,132 +0,0 @@
-<!--
-  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 ? `oc-table-root ${className}` : 'oc-table-root'}
-  {style}
-></div>

package/src/GeoMap.svelte

@@ -1,91 +0,0 @@
-<!--
-  Map component: Svelte 5 wrapper around the vanilla adapter.
-
-  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.
--->
-<script lang="ts">
-import type { DarkMode, MapSpec, ThemeConfig } from '@opendata-ai/openchart-core';
-
-type MapFeatureEvent = {
-  id: string | number;
-  name?: string;
-  data: Record<string, unknown> | null;
-};
-
-import { createMap, type MapInstance, type MapMountOptions } from '@opendata-ai/openchart-vanilla';
-import { onMount, untrack } from 'svelte';
-import { getVizDarkMode, getVizTheme } from './context.js';
-
-let {
-  spec,
-  theme,
-  darkMode,
-  onmarkclick,
-  onmarkhover,
-  class: className,
-  style,
-}: {
-  spec: MapSpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  onmarkclick?: (event: MapFeatureEvent) => void;
-  onmarkhover?: (event: MapFeatureEvent | null) => void;
-  class?: string;
-  style?: string;
-} = $props();
-
-let containerEl: HTMLDivElement;
-let instance: MapInstance | null = null;
-
-const ctxTheme = getVizTheme();
-const ctxDarkMode = getVizDarkMode();
-
-onMount(() => {
-  return () => {
-    instance?.destroy();
-    instance = null;
-  };
-});
-
-let prevSpec = '';
-
-// Effect 1: Mount/recreate map on theme/darkMode changes.
-$effect(() => {
-  const resolvedTheme = theme ?? ctxTheme?.();
-  const resolvedDarkMode = darkMode ?? ctxDarkMode?.();
-  const currentSpec = untrack(() => spec);
-
-  instance?.destroy();
-
-  const options: MapMountOptions = {
-    theme: resolvedTheme,
-    darkMode: resolvedDarkMode,
-    onMarkClick: (feature) => untrack(() => onmarkclick)?.(feature),
-    onMarkHover: (feature) => untrack(() => onmarkhover)?.(feature),
-    responsive: true,
-  };
-
-  instance = createMap(containerEl, currentSpec, options);
-  prevSpec = JSON.stringify(currentSpec);
-});
-
-// Effect 2: Update map 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 ? `oc-map-root ${className}` : 'oc-map-root'}
-  {style}
-></div>