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

package/src/composables/useDarkMode.svelte.ts

@@ -1,51 +0,0 @@
-/**
- * useDarkMode: resolve a DarkMode preference to a boolean.
- *
- * - "force" -> true
- * - "off" -> false
- * - "auto" -> matches system preference (reactive to changes)
- *
- * Uses .svelte.ts extension so runes ($state, $effect) work outside
- * .svelte components.
- */
-
-import type { DarkMode } from '@opendata-ai/openchart-core';
-
-export function useDarkMode(mode: () => DarkMode | undefined) {
-  let isDark = $state(resolveInitial(mode()));
-
-  $effect(() => {
-    const m = mode();
-    if (m !== 'auto') {
-      isDark = m === 'force';
-      return;
-    }
-    if (typeof window === 'undefined' || !window.matchMedia) {
-      isDark = false;
-      return;
-    }
-    const mq = window.matchMedia('(prefers-color-scheme: dark)');
-    isDark = mq.matches;
-    const handler = (e: MediaQueryListEvent) => {
-      isDark = e.matches;
-    };
-    mq.addEventListener('change', handler);
-    return () => mq.removeEventListener('change', handler);
-  });
-
-  return {
-    get isDark() {
-      return isDark;
-    },
-  };
-}
-
-function resolveInitial(mode?: DarkMode): boolean {
-  if (mode === 'force') return true;
-  if (mode === 'off' || mode === undefined) return false;
-  // "auto"
-  if (typeof window !== 'undefined' && window.matchMedia) {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches;
-  }
-  return false;
-}

package/src/composables/useGraph.svelte.ts

@@ -1,115 +0,0 @@
-/**
- * useGraph: composable for imperative graph control.
- *
- * Returns a Svelte action and exposes graph methods (search, zoom, select)
- * for programmatic control of the graph instance.
- *
- * Usage:
- * ```svelte
- * <script>
- *   const { action, search, zoomToFit } = useGraph(spec);
- * </script>
- * <div use:action></div>
- * ```
- *
- * Uses .svelte.ts extension so runes ($state, $effect) work outside
- * .svelte components.
- */
-
-import type { GraphSpec } from '@opendata-ai/openchart-core';
-import {
-  createGraph,
-  type GraphInstance,
-  type GraphMountOptions,
-} from '@opendata-ai/openchart-vanilla';
-
-export interface UseGraphOptions {
-  /** Theme overrides. */
-  theme?: GraphMountOptions['theme'];
-  /** Dark mode setting. */
-  darkMode?: GraphMountOptions['darkMode'];
-  /** Node click handler. */
-  onNodeClick?: GraphMountOptions['onNodeClick'];
-  /** Node double-click handler. */
-  onNodeDoubleClick?: GraphMountOptions['onNodeDoubleClick'];
-  /** Selection change handler. */
-  onSelectionChange?: GraphMountOptions['onSelectionChange'];
-  /** Enable responsive resizing. Defaults to true. */
-  responsive?: boolean;
-}
-
-export interface UseGraphReturn {
-  /** Svelte action to attach to a container div. */
-  action: (node: HTMLElement) => { destroy: () => void };
-  /** Search for nodes matching a query string. */
-  search: (query: string) => void;
-  /** Clear the current search. */
-  clearSearch: () => void;
-  /** Zoom to fit all nodes in view. */
-  zoomToFit: () => void;
-  /** Zoom and center on a specific node. */
-  zoomToNode: (nodeId: string) => void;
-  /** Select a node by id. */
-  selectNode: (nodeId: string) => void;
-  /** Get the currently selected node ids. */
-  getSelectedNodes: () => string[];
-}
-
-export function useGraph(
-  spec: () => GraphSpec,
-  options?: () => UseGraphOptions | undefined,
-): UseGraphReturn {
-  let instance = $state<GraphInstance | null>(null);
-
-  function action(node: HTMLElement) {
-    $effect(() => {
-      const currentSpec = spec();
-      const opts = options?.();
-
-      const mountOpts: GraphMountOptions = {
-        theme: opts?.theme,
-        darkMode: opts?.darkMode,
-        onNodeClick: opts?.onNodeClick,
-        onNodeDoubleClick: opts?.onNodeDoubleClick,
-        onSelectionChange: opts?.onSelectionChange,
-        responsive: opts?.responsive ?? true,
-      };
-
-      const graph = createGraph(node, currentSpec, mountOpts);
-      instance = graph;
-
-      return () => {
-        graph.destroy();
-        instance = null;
-      };
-    });
-
-    return {
-      destroy() {
-        // $effect cleanup handles teardown
-      },
-    };
-  }
-
-  return {
-    action,
-    search(query: string) {
-      instance?.search(query);
-    },
-    clearSearch() {
-      instance?.clearSearch();
-    },
-    zoomToFit() {
-      instance?.zoomToFit();
-    },
-    zoomToNode(nodeId: string) {
-      instance?.zoomToNode(nodeId);
-    },
-    selectNode(nodeId: string) {
-      instance?.selectNode(nodeId);
-    },
-    getSelectedNodes(): string[] {
-      return instance?.getSelectedNodes() ?? [];
-    },
-  };
-}

package/src/composables/useTable.svelte.ts

@@ -1,85 +0,0 @@
-/**
- * useTable: composable for manual table lifecycle control.
- *
- * Returns a Svelte action and exposes the table instance and current state.
- *
- * Usage:
- * ```svelte
- * <script>
- *   const { action, table, state } = useTable(spec);
- * </script>
- * <div use:action></div>
- * ```
- *
- * Uses .svelte.ts extension so runes ($state, $effect) work outside
- * .svelte components.
- */
-
-import type { TableSpec } from '@opendata-ai/openchart-core';
-import {
-  createTable,
-  type TableInstance,
-  type TableMountOptions,
-  type TableState,
-} from '@opendata-ai/openchart-vanilla';
-
-export interface UseTableReturn {
-  /** Svelte action to attach to a container div. */
-  action: (node: HTMLElement) => { destroy: () => void };
-  /** The table instance (null until mounted). */
-  readonly table: TableInstance | null;
-  /** The current table state (sort, search, page). */
-  readonly state: TableState;
-}
-
-export function useTable(
-  spec: () => TableSpec,
-  options?: () => TableMountOptions | undefined,
-): UseTableReturn {
-  let table = $state<TableInstance | null>(null);
-  let state = $state<TableState>({
-    sort: null,
-    search: '',
-    page: 0,
-  });
-
-  function action(node: HTMLElement) {
-    $effect(() => {
-      const currentSpec = spec();
-      const opts = options?.();
-
-      const mountOpts: TableMountOptions = {
-        ...opts,
-        onStateChange: (newState) => {
-          state = newState;
-          opts?.onStateChange?.(newState);
-        },
-      };
-
-      const instance = createTable(node, currentSpec, mountOpts);
-      table = instance;
-      state = instance.getState();
-
-      return () => {
-        instance.destroy();
-        table = null;
-      };
-    });
-
-    return {
-      destroy() {
-        // $effect cleanup handles teardown
-      },
-    };
-  }
-
-  return {
-    action,
-    get table() {
-      return table;
-    },
-    get state() {
-      return state;
-    },
-  };
-}

package/src/composables/useTableState.svelte.ts

@@ -1,78 +0,0 @@
-/**
- * useTableState: managed state for controlled table usage.
- *
- * Provides individual sort/search/page state with setters and a
- * resetState function to return to initial values.
- *
- * Uses .svelte.ts extension so runes ($state) work outside
- * .svelte components.
- */
-
-import type { SortState } from '@opendata-ai/openchart-core';
-
-export interface UseTableStateOptions {
-  sort?: SortState | null;
-  search?: string;
-  page?: number;
-}
-
-export interface UseTableStateReturn {
-  readonly sort: SortState | null;
-  setSort: (sort: SortState | null) => void;
-  readonly search: string;
-  setSearch: (query: string) => void;
-  readonly page: number;
-  setPage: (page: number) => void;
-  resetState: () => void;
-}
-
-/**
- * Composable for managing table state (sort, search, page).
- *
- * Usage:
- * ```svelte
- * <script>
- *   const state = useTableState();
- * </script>
- * <DataTable
- *   spec={spec}
- *   sort={state.sort}
- *   search={state.search}
- *   page={state.page}
- *   onsortchange={state.setSort}
- *   onsearchchange={state.setSearch}
- *   onpagechange={state.setPage}
- * />
- * ```
- */
-export function useTableState(initialState?: UseTableStateOptions): UseTableStateReturn {
-  let sort = $state<SortState | null>(initialState?.sort ?? null);
-  let search = $state(initialState?.search ?? '');
-  let page = $state(initialState?.page ?? 0);
-
-  return {
-    get sort() {
-      return sort;
-    },
-    setSort(newSort: SortState | null) {
-      sort = newSort;
-    },
-    get search() {
-      return search;
-    },
-    setSearch(query: string) {
-      search = query;
-    },
-    get page() {
-      return page;
-    },
-    setPage(newPage: number) {
-      page = newPage;
-    },
-    resetState() {
-      sort = initialState?.sort ?? null;
-      search = initialState?.search ?? '';
-      page = initialState?.page ?? 0;
-    },
-  };
-}

package/src/context.ts

@@ -1,35 +0,0 @@
-/**
- * Theme context: provides a theme and dark mode preference to all
- * descendant Chart, DataTable, and Graph components without prop drilling.
- *
- * Context values are getter functions so reads from children stay reactive
- * when the parent's props change.
- */
-
-import type { DarkMode, ThemeConfig } from '@opendata-ai/openchart-core';
-import { getContext, setContext } from 'svelte';
-
-/** @internal Context key for theme (exported for test use). */
-export const THEME_KEY = Symbol('oc-theme');
-/** @internal Context key for dark mode (exported for test use). */
-export const DARK_MODE_KEY = Symbol('oc-dark-mode');
-
-/** Set the theme context for descendant components. */
-export function setVizTheme(theme: () => ThemeConfig | undefined): void {
-  setContext(THEME_KEY, theme);
-}
-
-/** Read the current theme from the nearest VizThemeProvider. */
-export function getVizTheme(): (() => ThemeConfig | undefined) | undefined {
-  return getContext<(() => ThemeConfig | undefined) | undefined>(THEME_KEY);
-}
-
-/** Set the dark mode context for descendant components. */
-export function setVizDarkMode(darkMode: () => DarkMode | undefined): void {
-  setContext(DARK_MODE_KEY, darkMode);
-}
-
-/** Read the current dark mode preference from the nearest VizThemeProvider. */
-export function getVizDarkMode(): (() => DarkMode | undefined) | undefined {
-  return getContext<(() => DarkMode | undefined) | undefined>(DARK_MODE_KEY);
-}

package/src/index.ts

@@ -1,100 +0,0 @@
-/**
- * @opendata-ai/openchart-svelte
- *
- * Svelte 5 adapter for openchart. Provides <Chart />, <DataTable />,
- * and <Graph /> components that wrap the vanilla adapter with Svelte
- * lifecycle management using runes.
- *
- * Re-exports the full core type system and utilities so Svelte consumers
- * only need a single @opendata-ai/openchart-svelte dependency.
- */
-
-// ---------------------------------------------------------------------------
-// Core: full type system, theme, colors, locale, accessibility, helpers
-// ---------------------------------------------------------------------------
-
-export * from '@opendata-ai/openchart-core';
-
-// ---------------------------------------------------------------------------
-// Vanilla: export utilities (SVG/PNG/JPG/CSV)
-// ---------------------------------------------------------------------------
-
-export type { JPGExportOptions, PNGExportOptions } from '@opendata-ai/openchart-vanilla';
-export { exportCSV, exportJPG, exportPNG, exportSVG } from '@opendata-ai/openchart-vanilla';
-
-// ---------------------------------------------------------------------------
-// Engine: compile API and types not covered by core
-// ---------------------------------------------------------------------------
-
-export type {
-  ChartRenderer,
-  CompiledGraphEdge,
-  CompiledGraphNode,
-  CompileResult,
-  GraphCompilation,
-  NormalizedBarListSpec,
-  NormalizedChartSpec,
-  NormalizedChrome,
-  NormalizedGraphSpec,
-  NormalizedMapSpec,
-  NormalizedSankeySpec,
-  NormalizedSpec,
-  NormalizedTableSpec,
-  SimulationConfig,
-  ValidationError,
-  ValidationErrorCode,
-  ValidationResult,
-} from '@opendata-ai/openchart-engine';
-export {
-  clearRenderers,
-  compile,
-  compileBarList,
-  compileChart,
-  compileGraph,
-  compileMap,
-  compileSankey,
-  compileTable,
-  getChartRenderer,
-  normalizeSpec,
-  registerChartRenderer,
-  validateSpec,
-} from '@opendata-ai/openchart-engine';
-export { default as BarList } from './BarList.svelte';
-// Components
-export { default as Chart } from './Chart.svelte';
-// Scrollytelling
-export { default as ChartStory } from './ChartStory.svelte';
-export type { UseChartOptions, UseChartReturn } from './composables/useChart.svelte.js';
-export { useChart } from './composables/useChart.svelte.js';
-// Composables
-export { useDarkMode } from './composables/useDarkMode.svelte.js';
-export type { UseGraphOptions, UseGraphReturn } from './composables/useGraph.svelte.js';
-export { useGraph } from './composables/useGraph.svelte.js';
-export type { UseTableReturn } from './composables/useTable.svelte.js';
-export { useTable } from './composables/useTable.svelte.js';
-export type {
-  UseTableStateOptions,
-  UseTableStateReturn,
-} from './composables/useTableState.svelte.js';
-export { useTableState } from './composables/useTableState.svelte.js';
-// Context
-export { getVizDarkMode, getVizTheme, setVizDarkMode, setVizTheme } from './context.js';
-export { default as DataTable } from './DataTable.svelte';
-export { default as GeoMap } from './GeoMap.svelte';
-export { default as Graph } from './Graph.svelte';
-export { default as Sankey } from './Sankey.svelte';
-export { default as VizThemeProvider } from './ThemeProvider.svelte';
-export { default as TileMap } from './TileMap.svelte';
-// Component prop types
-export type {
-  BarListProps,
-  ChartProps,
-  DataTableProps,
-  GraphProps,
-  MapProps,
-  SankeyProps,
-  TileMapProps,
-  VisualizationProps,
-  VizThemeProviderProps,
-} from './types.js';
-export { default as Visualization } from './Visualization.svelte';

package/src/types.ts

@@ -1,149 +0,0 @@
-/**
- * Exported prop types for Svelte components.
- *
- * These mirror the inline types used in each component's $props() destructuring
- * and provide named exports for downstream typing.
- */
-
-import type {
-  Annotation,
-  AnnotationOffset,
-  BarListSpec,
-  ChartSpec,
-  DarkMode,
-  ElementEdit,
-  GraphSpec,
-  LayerSpec,
-  MapSpec,
-  MarkEvent,
-  SankeySpec,
-  SortState,
-  TableSpec,
-  TextAnnotation,
-  ThemeConfig,
-  TileMapSpec,
-  VizSpec,
-} from '@opendata-ai/openchart-core';
-import type { Snippet } from 'svelte';
-
-export interface ChartProps {
-  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;
-  ondatapointclick?: (data: Record<string, unknown>) => void;
-  class?: string;
-  style?: string;
-}
-
-export interface DataTableProps {
-  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;
-}
-
-export interface GraphProps {
-  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;
-}
-
-export interface SankeyProps {
-  spec: SankeySpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  onnodeclick?: (node: Record<string, unknown>) => void;
-  onlinkclick?: (link: Record<string, unknown>) => void;
-  onnodehover?: (node: Record<string, unknown> | null) => void;
-  onlinkhover?: (link: Record<string, unknown> | null) => void;
-  class?: string;
-  style?: string;
-}
-
-export interface MapFeatureEvent {
-  id: string | number;
-  name?: string;
-  data: Record<string, unknown> | null;
-}
-
-export interface MapProps {
-  spec: MapSpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  onmarkclick?: (event: MapFeatureEvent) => void;
-  onmarkhover?: (event: MapFeatureEvent) => void;
-  class?: string;
-  style?: string;
-}
-
-export interface TileMapProps {
-  spec: TileMapSpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  ontileclick?: (tile: {
-    stateCode: string;
-    stateName: string;
-    value: number | null;
-    data: Record<string, unknown>;
-  }) => void;
-  ontilehover?: (
-    tile: {
-      stateCode: string;
-      stateName: string;
-      value: number | null;
-      data: Record<string, unknown>;
-    } | null,
-  ) => void;
-  class?: string;
-  style?: string;
-}
-
-export interface BarListProps {
-  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;
-}
-
-export interface VisualizationProps {
-  spec: VizSpec;
-  theme?: ThemeConfig;
-  darkMode?: DarkMode;
-  class?: string;
-  style?: string;
-}
-
-export interface VizThemeProviderProps {
-  theme: ThemeConfig | undefined;
-  darkMode?: DarkMode;
-  children: Snippet;
-}