grafana-react 0.0.0 → 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kiwi Research
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,91 @@
 # grafana-react
 
-  React DSL for Grafana dashboards. Coming soon.
+React-based DSL for creating Grafana dashboards. Write dashboards as JSX components and compile them to Grafana JSON.
 
-  https://github.com/kiwi-research/grafana-react
+<p align="center">
+  <img src="docs/public/img/hero-code.png" alt="JSX code for Stat panel" height="180" />
+  &nbsp;&nbsp;&nbsp;
+  <img src="docs/public/img/hero-grafana-stat-panel.png" alt="Rendered Grafana Stat panel" height="140" />
+</p>
+
+## Features
+
+- **Declarative JSX Syntax** - Write dashboards using familiar React patterns
+- **Component Composition** - Create reusable dashboard components
+- **Type Safety** - Full TypeScript support with comprehensive types
+- **CLI Tool** - Build, validate, and watch dashboard files
+- **Zero Runtime** - Compiles to static JSON, no React in production
+
+## Installation
+
+```bash
+npm install grafana-react react@19 tsx@4
+```
+
+## Quick Start
+
+```tsx
+import { Dashboard, Row, Stat, Timeseries, Variable } from 'grafana-react';
+
+export default function MyDashboard() {
+  return (
+    <Dashboard uid="my-dashboard" title="My Dashboard" datasource="prometheus">
+      <Variable name="instance">label_values(up, instance)</Variable>
+
+      <Row title="Summary">
+        <Stat
+          title="CPU %"
+          unit="percent"
+          thresholds={{ 70: 'yellow', 90: 'red' }}
+        >
+          100 - avg(rate(cpu_idle[$__rate_interval])) * 100
+        </Stat>
+      </Row>
+
+      <Row title="Details">
+        <Timeseries title="CPU Over Time" unit="percent" stack legend="right">
+          sum(rate(node_cpu_seconds_total[5m])) by (mode) * 100
+        </Timeseries>
+      </Row>
+    </Dashboard>
+  );
+}
+```
+
+Build to JSON using the CLI:
+
+```bash
+npx grafana-react build my-dashboard.tsx output/my-dashboard.json
+```
+
+Or programmatically with `renderToString`:
+
+```ts
+import React from 'react';
+import { renderToString } from 'grafana-react';
+
+// Use the JSON string directly, e.g. add as a ConfigMap with Pulumi
+const json = renderToString(React.createElement(MyDashboard));
+```
+
+## Documentation
+
+Full documentation is available at: **[kiwi-research.github.io/grafana-react](https://kiwi-research.github.io/grafana-react)**
+
+- [Getting Started](https://kiwi-research.github.io/grafana-react/getting-started/installation/)
+- [Components Reference](https://kiwi-research.github.io/grafana-react/components/structure/)
+- [CLI Usage](https://kiwi-research.github.io/grafana-react/guides/cli-usage/)
+- [Reusable Components](https://kiwi-research.github.io/grafana-react/guides/reusable-components/)
+
+## CLI Commands
+
+```bash
+npx grafana-react build <input.tsx> [output.json]     # Build single dashboard
+npx grafana-react build-all <dir> [output-dir]        # Build all dashboards
+npx grafana-react validate <input.tsx>                # Validate without output
+npx grafana-react watch <dir> [output-dir]            # Watch and rebuild
+```
+
+## License
+
+MIT

package/build/cli/cli.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * CLI integration tests
+ *
+ * These tests verify the CLI's basic functionality.
+ * Note: Full dashboard compilation tests are limited because Node.js
+ * cannot dynamically import .tsx files without a TypeScript loader.
+ */
+export {};

package/build/cli/cli.test.js

@@ -0,0 +1,78 @@
+/**
+ * CLI integration tests
+ *
+ * These tests verify the CLI's basic functionality.
+ * Note: Full dashboard compilation tests are limited because Node.js
+ * cannot dynamically import .tsx files without a TypeScript loader.
+ */
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import { execSync, spawnSync } from 'node:child_process';
+import * as path from 'node:path';
+// Path to the built CLI
+const CLI_PATH = path.resolve(import.meta.dirname, '../../build/cli/index.js');
+describe('CLI integration', () => {
+    it('shows help with --help flag', () => {
+        const result = execSync(`node ${CLI_PATH} --help`, {
+            encoding: 'utf8',
+        });
+        assert.ok(result.includes('grafana-react'));
+        assert.ok(result.includes('build'));
+        assert.ok(result.includes('validate'));
+        assert.ok(result.includes('watch'));
+        assert.ok(result.includes('build-all'));
+    });
+    it('shows help with no arguments', () => {
+        const result = execSync(`node ${CLI_PATH}`, {
+            encoding: 'utf8',
+        });
+        assert.ok(result.includes('Usage:'));
+    });
+    it('shows version with --version flag', () => {
+        const result = execSync(`node ${CLI_PATH} --version`, {
+            encoding: 'utf8',
+        });
+        assert.ok(result.includes('grafana-react v'));
+    });
+    it('shows version with -v flag', () => {
+        const result = execSync(`node ${CLI_PATH} -v`, {
+            encoding: 'utf8',
+        });
+        assert.ok(result.includes('grafana-react v'));
+    });
+    it('exits with error for missing input file on build', () => {
+        const result = spawnSync('node', [CLI_PATH, 'build'], {
+            encoding: 'utf8',
+        });
+        assert.strictEqual(result.status, 1);
+        assert.ok(result.stderr.includes('Missing input file'));
+    });
+    it('exits with error for missing input directory on build-all', () => {
+        const result = spawnSync('node', [CLI_PATH, 'build-all'], {
+            encoding: 'utf8',
+        });
+        assert.strictEqual(result.status, 1);
+        assert.ok(result.stderr.includes('Missing input directory'));
+    });
+    it('exits with error for missing input file on validate', () => {
+        const result = spawnSync('node', [CLI_PATH, 'validate'], {
+            encoding: 'utf8',
+        });
+        assert.strictEqual(result.status, 1);
+        assert.ok(result.stderr.includes('Missing input file'));
+    });
+    it('exits with error for non-existent file', () => {
+        const result = spawnSync('node', [CLI_PATH, 'build', '/nonexistent/file.tsx'], {
+            encoding: 'utf8',
+        });
+        assert.strictEqual(result.status, 1);
+        assert.ok(result.stderr.includes('File not found'));
+    });
+    it('exits with error for unknown command', () => {
+        const result = spawnSync('node', [CLI_PATH, 'unknown-command'], {
+            encoding: 'utf8',
+        });
+        assert.strictEqual(result.status, 1);
+        assert.ok(result.stderr.includes('Unknown command'));
+    });
+});

package/build/cli/index.d.ts

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+/**
+ * Grafana React CLI
+ *
+ * Build Grafana dashboards from React/TSX files.
+ *
+ * Usage:
+ *   grafana-react build <input> [output]     Build a single dashboard
+ *   grafana-react build-all <dir> [outdir]   Build all dashboards in a directory
+ *   grafana-react validate <input>           Validate a dashboard without output
+ *   grafana-react watch <dir> [outdir]       Watch and rebuild on changes
+ */
+export {};

package/build/cli/index.js

@@ -0,0 +1,266 @@
+#!/usr/bin/env node
+/**
+ * Grafana React CLI
+ *
+ * Build Grafana dashboards from React/TSX files.
+ *
+ * Usage:
+ *   grafana-react build <input> [output]     Build a single dashboard
+ *   grafana-react build-all <dir> [outdir]   Build all dashboards in a directory
+ *   grafana-react validate <input>           Validate a dashboard without output
+ *   grafana-react watch <dir> [outdir]       Watch and rebuild on changes
+ */
+// Register tsx loader for TypeScript/TSX support
+try {
+    const { register } = await import('tsx/esm/api');
+    register();
+}
+catch {
+    console.error(`Error: The grafana-react CLI requires 'tsx' to be installed.
+
+Install it with:
+  npm install tsx@4
+
+Or install all peer dependencies:
+  npm install react@19 tsx@4
+`);
+    process.exit(1);
+}
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import React from 'react';
+import { renderToString } from '../lib/renderer.js';
+// ============================================================================
+// CLI Helpers
+// ============================================================================
+function printUsage() {
+    console.log(`
+grafana-react - Build Grafana dashboards from React/TSX files
+
+Usage:
+  grafana-react build <input.tsx> [output.json]
+    Build a single dashboard from a TSX file.
+    If output is not specified, prints to stdout.
+
+  grafana-react build-all <input-dir> [output-dir]
+    Build all *.dashboard.tsx files in a directory.
+    Output files are named *.gen.json in the output directory.
+
+  grafana-react validate <input.tsx>
+    Validate a dashboard file without generating output.
+
+  grafana-react watch <input-dir> [output-dir]
+    Watch for changes and rebuild automatically.
+
+Options:
+  --help, -h     Show this help message
+  --version, -v  Show version
+
+Examples:
+  grafana-react build dashboards/node.dashboard.tsx
+  grafana-react build dashboards/node.dashboard.tsx output/node.json
+  grafana-react build-all dashboards/ output/
+  grafana-react validate dashboards/node.dashboard.tsx
+`);
+}
+function printVersion() {
+    const pkgPath = new URL('../../package.json', import.meta.url);
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+    console.log(`grafana-react v${pkg.version}`);
+}
+function error(message) {
+    console.error(`Error: ${message}`);
+    process.exit(1);
+}
+function success(message) {
+    console.log(`\u2713 ${message}`);
+}
+// ============================================================================
+// Build Functions
+// ============================================================================
+async function loadDashboard(inputFile) {
+    const absolutePath = path.resolve(inputFile);
+    if (!fs.existsSync(absolutePath)) {
+        error(`File not found: ${absolutePath}`);
+    }
+    const ext = path.extname(absolutePath);
+    if (ext !== '.tsx' && ext !== '.ts') {
+        error(`Expected .tsx or .ts file, got ${ext}`);
+    }
+    // Import the module (tsx loader handles TSX transformation)
+    const module = (await import(absolutePath));
+    // Find the dashboard component
+    const Component = module.default ??
+        module.Dashboard ??
+        Object.values(module).find((exp) => typeof exp === 'function' &&
+            /dashboard/i.test(exp.name ?? ''));
+    if (!Component) {
+        error('No dashboard component found. Export as default or named "Dashboard"');
+    }
+    return React.createElement(Component);
+}
+async function buildOne(inputFile, outputFile) {
+    const element = await loadDashboard(inputFile);
+    const json = renderToString(element);
+    if (outputFile) {
+        const absoluteOutput = path.resolve(outputFile);
+        const outputDir = path.dirname(absoluteOutput);
+        if (!fs.existsSync(outputDir)) {
+            fs.mkdirSync(outputDir, { recursive: true });
+        }
+        fs.writeFileSync(absoluteOutput, json + '\n');
+        success(`Built ${path.relative(process.cwd(), absoluteOutput)}`);
+    }
+    else {
+        console.log(json);
+    }
+}
+async function buildAll(inputDir, outputDir) {
+    const absoluteInput = path.resolve(inputDir);
+    if (!fs.existsSync(absoluteInput)) {
+        error(`Directory not found: ${absoluteInput}`);
+    }
+    const files = findDashboardFiles(absoluteInput);
+    if (files.length === 0) {
+        console.log('No dashboard files found (*.dashboard.tsx)');
+        return;
+    }
+    console.log(`Found ${files.length} dashboard file(s)`);
+    const resolvedOutputDir = outputDir ? path.resolve(outputDir) : absoluteInput;
+    for (const file of files) {
+        const relativePath = path.relative(absoluteInput, file);
+        const outputName = relativePath.replace(/\.dashboard\.tsx$/, '.gen.json');
+        const outputPath = path.join(resolvedOutputDir, outputName);
+        try {
+            const element = await loadDashboard(file);
+            const json = renderToString(element);
+            const outputFileDir = path.dirname(outputPath);
+            if (!fs.existsSync(outputFileDir)) {
+                fs.mkdirSync(outputFileDir, { recursive: true });
+            }
+            fs.writeFileSync(outputPath, json + '\n');
+            success(`${relativePath} -> ${path.relative(process.cwd(), outputPath)}`);
+        }
+        catch (err) {
+            console.error(`\u2717 ${relativePath}: ${err.message}`);
+        }
+    }
+}
+async function validate(inputFile) {
+    const element = await loadDashboard(inputFile);
+    // Just render to validate - don't output
+    renderToString(element);
+    success(`Valid: ${path.relative(process.cwd(), inputFile)}`);
+}
+async function watch(inputDir, outputDir) {
+    const absoluteInput = path.resolve(inputDir);
+    const resolvedOutputDir = outputDir ? path.resolve(outputDir) : absoluteInput;
+    console.log(`Watching ${absoluteInput} for changes...`);
+    // Initial build
+    await buildAll(inputDir, outputDir);
+    // Watch for changes
+    const { watch: fsWatch } = await import('node:fs');
+    fsWatch(absoluteInput, { recursive: true }, async (_eventType, filename) => {
+        if (!filename?.endsWith('.dashboard.tsx'))
+            return;
+        const filePath = path.join(absoluteInput, filename);
+        const relativePath = path.relative(absoluteInput, filePath);
+        const outputName = relativePath.replace(/\.dashboard\.tsx$/, '.gen.json');
+        const outputPath = path.join(resolvedOutputDir, outputName);
+        console.log(`\nRebuilding ${filename}...`);
+        try {
+            // Clear module cache for hot reload
+            const absolutePath = path.resolve(filePath);
+            delete require.cache?.[absolutePath];
+            const element = await loadDashboard(filePath);
+            const json = renderToString(element);
+            const outputFileDir = path.dirname(outputPath);
+            if (!fs.existsSync(outputFileDir)) {
+                fs.mkdirSync(outputFileDir, { recursive: true });
+            }
+            fs.writeFileSync(outputPath, json + '\n');
+            success(`${relativePath} -> ${path.relative(process.cwd(), outputPath)}`);
+        }
+        catch (err) {
+            console.error(`\u2717 ${relativePath}: ${err.message}`);
+        }
+    });
+    // Keep process alive
+    process.on('SIGINT', () => {
+        console.log('\nStopping watch...');
+        process.exit(0);
+    });
+}
+// ============================================================================
+// File Discovery
+// ============================================================================
+function findDashboardFiles(dir) {
+    const files = [];
+    function walk(currentDir) {
+        const entries = fs.readdirSync(currentDir, { withFileTypes: true });
+        for (const entry of entries) {
+            const fullPath = path.join(currentDir, entry.name);
+            if (entry.isDirectory() && entry.name !== 'node_modules') {
+                walk(fullPath);
+            }
+            else if (entry.isFile() && entry.name.endsWith('.dashboard.tsx')) {
+                files.push(fullPath);
+            }
+        }
+    }
+    walk(dir);
+    return files.sort();
+}
+// ============================================================================
+// Main
+// ============================================================================
+async function main() {
+    const args = process.argv.slice(2);
+    if (args.length === 0 || args.includes('--help') || args.includes('-h')) {
+        printUsage();
+        process.exit(0);
+    }
+    if (args.includes('--version') || args.includes('-v')) {
+        printVersion();
+        process.exit(0);
+    }
+    const command = args[0];
+    switch (command) {
+        case 'build':
+            if (!args[1]) {
+                error('Missing input file. Usage: grafana-react build <input.tsx> [output.json]');
+            }
+            await buildOne(args[1], args[2]);
+            break;
+        case 'build-all':
+            if (!args[1]) {
+                error('Missing input directory. Usage: grafana-react build-all <input-dir> [output-dir]');
+            }
+            await buildAll(args[1], args[2]);
+            break;
+        case 'validate':
+            if (!args[1]) {
+                error('Missing input file. Usage: grafana-react validate <input.tsx>');
+            }
+            await validate(args[1]);
+            break;
+        case 'watch':
+            if (!args[1]) {
+                error('Missing input directory. Usage: grafana-react watch <input-dir> [output-dir]');
+            }
+            await watch(args[1], args[2]);
+            break;
+        default:
+            // Treat as build command if it's a file path
+            if (args[0].endsWith('.tsx') || args[0].endsWith('.ts')) {
+                await buildOne(args[0], args[1]);
+            }
+            else {
+                error(`Unknown command: ${command}. Use --help for usage.`);
+            }
+    }
+}
+main().catch((err) => {
+    console.error('Error:', err.message);
+    process.exit(1);
+});

package/build/components/annotation/annotation.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Annotation - Alert annotation markers
+ *
+ * Annotations display markers on panels when alerts fire.
+ *
+ * @example
+ * <Annotation name="Alerts" color="light-red" title="{{alertname}}">
+ *   ALERTS{alertstate="firing"}
+ * </Annotation>
+ */
+export interface AnnotationProps {
+    /** Annotation name */
+    name: string;
+    /** Marker color */
+    color?: string;
+    /** Title format using {{label}} syntax */
+    title?: string;
+    /** Tag keys to include */
+    tags?: string;
+    /** Hide annotation from view */
+    hide?: boolean;
+    /** Enable annotation */
+    enabled?: boolean;
+    /** PromQL expression as child */
+    children?: string;
+}
+export declare const Annotation: import("react").FC<AnnotationProps>;

package/build/components/annotation/annotation.js

@@ -0,0 +1,12 @@
+/**
+ * Annotation - Alert annotation markers
+ *
+ * Annotations display markers on panels when alerts fire.
+ *
+ * @example
+ * <Annotation name="Alerts" color="light-red" title="{{alertname}}">
+ *   ALERTS{alertstate="firing"}
+ * </Annotation>
+ */
+import { createComponent } from '../base.js';
+export const Annotation = createComponent('annotation');

package/build/components/base.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Base component utilities
+ *
+ * Provides the foundation for creating grafana-react components.
+ * Components don't render to DOM - they create a virtual tree
+ * that gets converted to Grafana JSON by the renderer.
+ */
+import type React from 'react';
+/** Symbol used to identify component types */
+export declare const COMPONENT_TYPE: unique symbol;
+/** All component types */
+export type ComponentType = 'dashboard' | 'row' | 'variable' | 'annotation' | 'link' | 'query' | 'override' | 'stat' | 'timeseries' | 'table' | 'bargauge' | 'heatmap' | 'gauge' | 'text' | 'barchart' | 'piechart' | 'histogram' | 'state-timeline' | 'status-history' | 'candlestick' | 'trend' | 'xychart' | 'logs' | 'datagrid' | 'nodeGraph' | 'traces' | 'flamegraph' | 'canvas' | 'geomap' | 'dashlist' | 'alertlist' | 'annolist' | 'news' | 'plugin' | 'business-variable';
+/**
+ * Create a grafana-react component with type marker
+ *
+ * Components created this way don't render anything - they just
+ * carry their props and children for the renderer to process.
+ */
+export declare function createComponent<P extends object>(type: ComponentType): React.FC<P>;
+/**
+ * Get the component type from a React element
+ */
+export declare function getComponentType(element: React.ReactElement): ComponentType | null;

package/build/components/base.js

@@ -0,0 +1,28 @@
+/**
+ * Base component utilities
+ *
+ * Provides the foundation for creating grafana-react components.
+ * Components don't render to DOM - they create a virtual tree
+ * that gets converted to Grafana JSON by the renderer.
+ */
+/** Symbol used to identify component types */
+export const COMPONENT_TYPE = Symbol('grafana-component-type');
+/**
+ * Create a grafana-react component with type marker
+ *
+ * Components created this way don't render anything - they just
+ * carry their props and children for the renderer to process.
+ */
+export function createComponent(type) {
+    const Component = () => null;
+    Component[COMPONENT_TYPE] = type;
+    Component.displayName = type.charAt(0).toUpperCase() + type.slice(1);
+    return Component;
+}
+/**
+ * Get the component type from a React element
+ */
+export function getComponentType(element) {
+    const type = element.type;
+    return type?.[COMPONENT_TYPE] ?? null;
+}

package/build/components/dashboard/dashboard.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Dashboard - Root container for Grafana dashboards
+ *
+ * @example
+ * <Dashboard uid="my-dashboard" title="My Dashboard" tags={['tag1']}>
+ *   <Variable name="instance" />
+ *   <Row title="Summary">...</Row>
+ * </Dashboard>
+ */
+import type { ReactNode } from 'react';
+export interface DashboardProps {
+    /** Unique identifier for the dashboard */
+    uid: string;
+    /** Dashboard title */
+    title: string;
+    /** Dashboard tags for filtering */
+    tags?: string[];
+    /** Default datasource UID for all panels */
+    datasource?: string;
+    /** Datasource type (e.g., 'prometheus', 'victoriametrics-metrics-datasource'). Defaults to 'prometheus' */
+    datasourceType?: string;
+    /** Auto-refresh interval (e.g., '5s', '1m', 'auto') */
+    refresh?: string | 'auto' | false;
+    /** Default time range (e.g., '1h', '6h', '24h') */
+    time?: string;
+    /** Timezone setting */
+    timezone?: 'browser' | 'utc';
+    /** Tooltip sharing mode */
+    tooltip?: 'shared' | 'single' | 'hidden';
+    /** Dashboard children */
+    children?: ReactNode;
+}
+export declare const Dashboard: import("react").FC<DashboardProps>;

package/build/components/dashboard/dashboard.js

@@ -0,0 +1,11 @@
+/**
+ * Dashboard - Root container for Grafana dashboards
+ *
+ * @example
+ * <Dashboard uid="my-dashboard" title="My Dashboard" tags={['tag1']}>
+ *   <Variable name="instance" />
+ *   <Row title="Summary">...</Row>
+ * </Dashboard>
+ */
+import { createComponent } from '../base.js';
+export const Dashboard = createComponent('dashboard');

package/build/components/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Component exports
+ *
+ * All components and their prop types are exported from here.
+ */
+export { COMPONENT_TYPE, getComponentType, createComponent } from './base.js';
+export type { ComponentType } from './base.js';
+export { Dashboard, type DashboardProps } from './dashboard/dashboard.js';
+export { Row, type RowProps } from './row/row.js';
+export { Variable, type VariableProps } from './variable/variable.js';
+export { Annotation, type AnnotationProps } from './annotation/annotation.js';
+export { Link, type LinkProps } from './link/link.js';
+export { Query, type QueryProps } from './query/query.js';
+export { Override, type OverrideProps } from './override/override.js';
+export { PluginPanel, type PluginPanelProps, } from './plugin-panel/plugin-panel.js';
+export { Stat, type StatProps } from './panels/core/stat/stat.js';
+export { Timeseries, type TimeseriesProps, } from './panels/core/timeseries/timeseries.js';
+export { Table, type TableProps } from './panels/core/table/table.js';
+export { BarGauge, type BarGaugeProps, } from './panels/core/bar-gauge/bar-gauge.js';
+export { Heatmap, type HeatmapProps } from './panels/core/heatmap/heatmap.js';
+export { Gauge, type GaugeProps } from './panels/core/gauge/gauge.js';
+export { Text, type TextProps } from './panels/core/text/text.js';
+export { BarChart, type BarChartProps, } from './panels/core/bar-chart/bar-chart.js';
+export { PieChart, type PieChartProps, } from './panels/core/pie-chart/pie-chart.js';
+export { Histogram, type HistogramProps, } from './panels/core/histogram/histogram.js';
+export { StateTimeline, type StateTimelineProps, } from './panels/core/state-timeline/state-timeline.js';
+export { StatusHistory, type StatusHistoryProps, } from './panels/core/status-history/status-history.js';
+export { Candlestick, type CandlestickProps, } from './panels/core/candlestick/candlestick.js';
+export { Trend, type TrendProps } from './panels/core/trend/trend.js';
+export { XYChart, type XYChartProps } from './panels/core/xy-chart/xy-chart.js';
+export { Logs, type LogsProps } from './panels/core/logs/logs.js';
+export { Datagrid, type DatagridProps, } from './panels/core/datagrid/datagrid.js';
+export { NodeGraph, type NodeGraphProps, } from './panels/core/node-graph/node-graph.js';
+export { Traces, type TracesProps } from './panels/core/traces/traces.js';
+export { FlameGraph, type FlameGraphProps, } from './panels/core/flame-graph/flame-graph.js';
+export { Canvas, type CanvasProps } from './panels/core/canvas/canvas.js';
+export { Geomap, type GeomapProps } from './panels/core/geomap/geomap.js';
+export { DashboardList, type DashboardListProps, } from './panels/core/dashboard-list/dashboard-list.js';
+export { AlertList, type AlertListProps, } from './panels/core/alert-list/alert-list.js';
+export { AnnotationsList, type AnnotationsListProps, } from './panels/core/annotations-list/annotations-list.js';
+export { News, type NewsProps } from './panels/core/news/news.js';
+export { BusinessVariablePanel, type BusinessVariablePanelProps, type TreeViewLevel, type VariableGroup, } from './panels/plugins/business-variable-panel/business-variable-panel.js';
+import { Fragment } from 'react';
+export { Fragment };