@fusionboard/core

Framework-agnostic state engine for FusionBoard. Provides the foundation for view management, event handling, storage adapters, theme system, and grid-chart synchronization.

Installation

npm install @fusionboard/core

API

ViewManager

Manages saved dashboard views with persistence, middleware, and schema migrations.

import { ViewManager, LocalStorageAdapter } from '@fusionboard/core';

const manager = new ViewManager({ storage: new LocalStorageAdapter() });

await manager.saveView(view);
await manager.upsertViewByName('Default', dashboardState); // creates or updates by name
const all = await manager.getAllViews();
await manager.applyView('view-id');
await manager.deleteView('view-id');
const json = await manager.exportViewState();
await manager.importViewState(json); // validates each entry has id, name, dashboardState

EventBus

Type-safe event emitter with compile-time payload checking.

import { EventBus } from '@fusionboard/core';

const bus = new EventBus();
const unsub = bus.on('view:saved', (view) => console.log(view.name));
bus.emit('theme:changed', newTheme);

Storage Adapters

• LocalStorageAdapter — browser localStorage (~5MB limit)
• SessionStorageAdapter — session-scoped storage
• MemoryStorageAdapter — in-memory (tests/SSR)
• IndexedDBStorageAdapter — IndexedDB (large payloads)

Theme System

import { createTheme, themeToCSSSVariables, themeToPrimeNGVariables } from '@fusionboard/core';

const theme = createTheme({ mode: 'dark' });
const cssVars = themeToCSSSVariables(theme);
const primeVars = themeToPrimeNGVariables(theme);

GridChartSync

Bidirectional grid-chart synchronization with debouncing.

import { GridChartSync } from '@fusionboard/core';

const sync = new GridChartSync({ debounceMs: 200 });
sync.onGridSelectionChange((rows) => updateChart(rows));
sync.onChartClick((info) => highlightRow(info.dataIndex));
sync.emitGridSelection(selectedRows);

System Theme Detection

import { onSystemThemeChange, getSystemTheme } from '@fusionboard/core';

const unsub = onSystemThemeChange((mode) => applyTheme(mode));

Middleware

const loggingMiddleware = {
  afterSave: (view) => console.log('Saved:', view.name),
  beforeDelete: (id) => confirm('Delete?'),
};

const manager = new ViewManager({ storage, middleware: [loggingMiddleware] });