@wildo-ai/saas-frontend-lib 1.0.1

package/dist/esm/components/views/chart-view/chart-runtime.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-runtime.utils.js","sourceRoot":"","sources":["../../../../../src/components/views/chart-view/chart-runtime.utils.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/views/chart-view/chart-theme-bridge.d.ts

@@ -0,0 +1,61 @@
+/** ──────────────────────────────────────────────────────────────
+ * ChartThemeBridge — Design Token → ECharts Theme Adapter
+ *
+ * Bridges the two rendering domains:
+ *   DOM (CSS custom properties / Tailwind)  →  Canvas (ECharts)
+ *
+ * Reads Level 1 design system tokens from CSS at runtime,
+ * resolves them to concrete hex values, and registers a 'wildo'
+ * theme with ECharts. Re-registers on theme/mode changes.
+ *
+ * Token mapping:
+ *   --background             → transparent (container handles bg)
+ *   --foreground             → textStyle.color, title.textStyle.color
+ *   --muted-foreground       → axisLabel.color, legend.textStyle.color
+ *   --border                 → axisLine, splitLine, axisTick
+ *   --surface-raised         → tooltip.backgroundColor
+ *   --surface-raised-fg      → tooltip.textStyle.color
+ *   --chart-color-palette    → color[] array (via getChartColors)
+ *   --radius                 → tooltip.borderRadius
+ *
+ * Color palette flows through the design token system:
+ *   DesignSystemToken.CHART_COLOR_PALETTE → --chart-color-palette CSS var
+ *   → getChartColorPaletteFromCSS() → getChartColors(N, { shade })
+ *   → hex[] for ECharts
+ *
+ * @see chart-design-customization.md (plan)
+ * ────────────────────────────────────────────────────────────── */
+import type { ChartStylePreset } from '@wildo-ai/presets-components-models';
+/**
+ * Resolve a CSS variable to a concrete color value usable on canvas.
+ * Combines variable lookup + color format conversion.
+ * Exported for use by option builder (canvas can't interpret CSS vars).
+ */
+export declare function resolveCSSColor(varName: string, fallback: string): string;
+export declare function getDefaultChartStylePreset(): ChartStylePreset;
+/** Register (or re-register) the Wildo theme with ECharts */
+export declare function registerWildoChartTheme(preset?: ChartStylePreset): void;
+/** Get the theme name for echarts-for-react */
+export declare function getWildoThemeName(): string;
+/**
+ * Get the resolved color palette (hex strings) for the current mode.
+ * Used by option builders when they need explicit colors (e.g., per-series override).
+ */
+export declare function getChartColorPalette(preset?: ChartStylePreset): string[];
+/**
+ * React hook that registers the Wildo chart theme and re-registers on
+ * design system / theme changes. Call once in the chart view root.
+ *
+ * @param preset - Chart style preset from the current theme (via useUI)
+ *
+ * Watches for changes on documentElement:
+ *   - class (dark mode toggle via .dark class)
+ *   - data-theme (dark mode toggle via attribute)
+ *   - style (runtime token overrides via inline CSS variables)
+ *
+ * Debounces re-registration to avoid excessive calls during batch updates.
+ */
+export declare function useChartTheme(preset?: ChartStylePreset): {
+    themeName: string;
+};
+//# sourceMappingURL=chart-theme-bridge.d.ts.map

package/dist/esm/components/views/chart-view/chart-theme-bridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-theme-bridge.d.ts","sourceRoot":"","sources":["../../../../../src/components/views/chart-view/chart-theme-bridge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;oEA0BoE;AAKpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAwB5E;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEzE;AAmBD,wBAAgB,0BAA0B,IAAI,gBAAgB,CAE7D;AAiHD,6DAA6D;AAC7D,wBAAgB,uBAAuB,CAAC,MAAM,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAGvE;AAED,+CAA+C;AAC/C,wBAAgB,iBAAiB,IAAI,MAAM,CAE1C;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,gBAAgB,GAAG,MAAM,EAAE,CAKxE;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,MAAM,CAAC,EAAE,gBAAgB,GAAG;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,CAkC9E"}

package/dist/esm/components/views/chart-view/chart-theme-bridge.js

@@ -0,0 +1,239 @@
+/** ──────────────────────────────────────────────────────────────
+ * ChartThemeBridge — Design Token → ECharts Theme Adapter
+ *
+ * Bridges the two rendering domains:
+ *   DOM (CSS custom properties / Tailwind)  →  Canvas (ECharts)
+ *
+ * Reads Level 1 design system tokens from CSS at runtime,
+ * resolves them to concrete hex values, and registers a 'wildo'
+ * theme with ECharts. Re-registers on theme/mode changes.
+ *
+ * Token mapping:
+ *   --background             → transparent (container handles bg)
+ *   --foreground             → textStyle.color, title.textStyle.color
+ *   --muted-foreground       → axisLabel.color, legend.textStyle.color
+ *   --border                 → axisLine, splitLine, axisTick
+ *   --surface-raised         → tooltip.backgroundColor
+ *   --surface-raised-fg      → tooltip.textStyle.color
+ *   --chart-color-palette    → color[] array (via getChartColors)
+ *   --radius                 → tooltip.borderRadius
+ *
+ * Color palette flows through the design token system:
+ *   DesignSystemToken.CHART_COLOR_PALETTE → --chart-color-palette CSS var
+ *   → getChartColorPaletteFromCSS() → getChartColors(N, { shade })
+ *   → hex[] for ECharts
+ *
+ * @see chart-design-customization.md (plan)
+ * ────────────────────────────────────────────────────────────── */
+import { useCallback, useEffect, useRef } from 'react';
+import { DEFAULT_CHART_STYLE_PRESET } from '../../../core/ui/chart-style-defaults.js';
+import { getChartColors } from '../../../core/ui/design-token.utils.js';
+import { echarts } from './echarts-setup.js';
+/** Number of palette colors to generate for the ECharts theme */
+const PALETTE_SIZE = 12;
+const WILDO_THEME_NAME = 'wildo';
+// ── CSS Variable Helpers ──────────────────────────────────────
+/** Resolve a CSS custom property to a computed value */
+function getCSSVar(varName, fallback) {
+    if (typeof document === 'undefined')
+        return fallback;
+    const value = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+    return value || fallback;
+}
+/** Detect current dark mode state from document root */
+function isDarkMode() {
+    if (typeof document === 'undefined')
+        return false;
+    const el = document.documentElement;
+    return el.classList.contains('dark') || el.getAttribute('data-theme') === 'dark';
+}
+/**
+ * Resolve a CSS variable to a concrete color value usable on canvas.
+ * Combines variable lookup + color format conversion.
+ * Exported for use by option builder (canvas can't interpret CSS vars).
+ */
+export function resolveCSSColor(varName, fallback) {
+    return resolveColor(getCSSVar(varName, fallback));
+}
+/** Convert OKLCH / HSL CSS var format to a usable color string */
+function resolveColor(cssVarValue) {
+    // Already a hex/rgb value — pass through
+    if (cssVarValue.startsWith('#') || cssVarValue.startsWith('rgb')) {
+        return cssVarValue;
+    }
+    // OKLCH format: "0.588 0.158 241" → oklch(...)
+    if (/^[\d.]+\s+[\d.]+\s+[\d.]+$/.test(cssVarValue)) {
+        return `oklch(${cssVarValue})`;
+    }
+    // HSL shorthand: "220 14.3% 95.9%" → hsl(...)
+    if (/^\d/.test(cssVarValue)) {
+        return `hsl(${cssVarValue.replace(/\s+/g, ', ')})`;
+    }
+    return cssVarValue;
+}
+export function getDefaultChartStylePreset() {
+    return { ...DEFAULT_CHART_STYLE_PRESET };
+}
+// ── Theme Builder ─────────────────────────────────────────────
+/** Build the ECharts theme object from resolved CSS variables + chart style preset */
+function buildWildoTheme(preset) {
+    const p = preset ?? DEFAULT_CHART_STYLE_PRESET;
+    const dark = isDarkMode();
+    // Level 1 token resolution
+    const bg = resolveColor(getCSSVar('--background', '#ffffff'));
+    const fg = resolveColor(getCSSVar('--foreground', '#0a0a0a'));
+    const mutedFg = resolveColor(getCSSVar('--muted-foreground', '#737373'));
+    const border = resolveColor(getCSSVar('--border', '#e5e5e5'));
+    const surfaceRaised = resolveColor(getCSSVar('--surface-raised', getCSSVar('--popover', '#ffffff')));
+    const surfaceRaisedFg = resolveColor(getCSSVar('--surface-raised-foreground', getCSSVar('--popover-foreground', '#0a0a0a')));
+    const radius = getCSSVar('--radius', '0.5rem');
+    // Parse radius to number (in px)
+    const borderRadiusPx = parseFloat(radius) * (radius.includes('rem') ? 16 : 1);
+    // Color palette — shade-aware for light/dark mode
+    const shade = dark ? p.colorShadeDark : p.colorShadeLight;
+    const colorPalette = getChartColors(PALETTE_SIZE, { shade });
+    // Split line style
+    const splitLineStyle = p.axis.splitLineType === 'none'
+        ? { show: false }
+        : { lineStyle: { color: border, type: p.axis.splitLineType } };
+    const typo = p.typography ?? DEFAULT_CHART_STYLE_PRESET.typography;
+    const axisLabelFontSize = typo.axisLabelFontSize;
+    return {
+        color: colorPalette,
+        backgroundColor: 'transparent', // Container handles background
+        textStyle: {
+            color: fg,
+            fontFamily: 'inherit',
+        },
+        title: {
+            textStyle: { color: fg, fontSize: typo.titleFontSize, fontWeight: typo.titleFontWeight },
+            subtextStyle: { color: mutedFg, fontSize: typo.subtitleFontSize },
+        },
+        legend: {
+            textStyle: { color: mutedFg, fontSize: typo.legendFontSize },
+        },
+        tooltip: {
+            backgroundColor: surfaceRaised,
+            borderColor: border,
+            borderWidth: p.tooltip.borderWidth,
+            borderRadius: borderRadiusPx,
+            textStyle: { color: surfaceRaisedFg, fontSize: typo.tooltipFontSize },
+            extraCssText: p.tooltip.extraCss,
+        },
+        axisPointer: {
+            lineStyle: { color: border },
+            crossStyle: { color: border },
+        },
+        categoryAxis: {
+            axisLine: { show: p.axis.showAxisLine, lineStyle: { color: border } },
+            axisTick: { show: p.axis.showTicks, lineStyle: { color: border } },
+            axisLabel: { color: mutedFg, fontSize: axisLabelFontSize },
+            splitLine: splitLineStyle,
+        },
+        valueAxis: {
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { color: mutedFg, fontSize: axisLabelFontSize },
+            nameTextStyle: { color: mutedFg, fontSize: typo.axisNameFontSize },
+            splitLine: splitLineStyle,
+        },
+        timeAxis: {
+            axisLine: { show: p.axis.showAxisLine, lineStyle: { color: border } },
+            axisTick: { show: p.axis.showTicks, lineStyle: { color: border } },
+            axisLabel: { color: mutedFg, fontSize: axisLabelFontSize },
+            splitLine: splitLineStyle,
+        },
+        line: {
+            smooth: false,
+            symbol: 'circle',
+            symbolSize: p.series.pointSize,
+            lineStyle: { width: p.series.lineWidth },
+        },
+        bar: {
+            itemStyle: { borderRadius: p.series.barBorderRadius },
+        },
+        pie: {
+            itemStyle: { borderColor: bg, borderWidth: p.series.pieBorderWidth },
+        },
+        scatter: {
+            symbolSize: p.series.pointSize,
+        },
+        radar: {
+            axisLine: { lineStyle: { color: border } },
+            splitLine: { lineStyle: { color: border } },
+            splitArea: { show: false },
+        },
+        gauge: {
+            axisLine: { lineStyle: { color: [[1, border]] } },
+        },
+        dataZoom: {
+            backgroundColor: 'transparent',
+            borderColor: border,
+            fillerColor: resolveColor(getCSSVar('--muted', '#f5f5f5')),
+            handleColor: mutedFg,
+            textStyle: { color: mutedFg },
+        },
+    };
+}
+// ── Public API ─────────────────────────────────────────────────
+/** Register (or re-register) the Wildo theme with ECharts */
+export function registerWildoChartTheme(preset) {
+    const theme = buildWildoTheme(preset);
+    echarts.registerTheme(WILDO_THEME_NAME, theme);
+}
+/** Get the theme name for echarts-for-react */
+export function getWildoThemeName() {
+    return WILDO_THEME_NAME;
+}
+/**
+ * Get the resolved color palette (hex strings) for the current mode.
+ * Used by option builders when they need explicit colors (e.g., per-series override).
+ */
+export function getChartColorPalette(preset) {
+    const dark = isDarkMode();
+    const p = preset ?? DEFAULT_CHART_STYLE_PRESET;
+    const shade = dark ? p.colorShadeDark : p.colorShadeLight;
+    return getChartColors(PALETTE_SIZE, { shade });
+}
+/**
+ * React hook that registers the Wildo chart theme and re-registers on
+ * design system / theme changes. Call once in the chart view root.
+ *
+ * @param preset - Chart style preset from the current theme (via useUI)
+ *
+ * Watches for changes on documentElement:
+ *   - class (dark mode toggle via .dark class)
+ *   - data-theme (dark mode toggle via attribute)
+ *   - style (runtime token overrides via inline CSS variables)
+ *
+ * Debounces re-registration to avoid excessive calls during batch updates.
+ */
+export function useChartTheme(preset) {
+    const debounceTimer = useRef(undefined);
+    const registerTheme = useCallback(() => {
+        registerWildoChartTheme(preset);
+    }, [preset]);
+    const debouncedRegister = useCallback(() => {
+        clearTimeout(debounceTimer.current);
+        debounceTimer.current = setTimeout(registerTheme, 50);
+    }, [registerTheme]);
+    useEffect(() => {
+        // Register on mount and whenever preset changes
+        registerTheme();
+        // Watch for theme changes on documentElement
+        const observer = new MutationObserver(() => {
+            // Any relevant attribute change → debounced re-register
+            debouncedRegister();
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class', 'data-theme', 'style'],
+        });
+        return () => {
+            observer.disconnect();
+            clearTimeout(debounceTimer.current);
+        };
+    }, [registerTheme, debouncedRegister]);
+    return { themeName: WILDO_THEME_NAME };
+}
+//# sourceMappingURL=chart-theme-bridge.js.map

package/dist/esm/components/views/chart-view/chart-theme-bridge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-theme-bridge.js","sourceRoot":"","sources":["../../../../../src/components/views/chart-view/chart-theme-bridge.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/views/chart-view/chart-view.utils.d.ts

@@ -0,0 +1,27 @@
+/** ──────────────────────────────────────────────────────────────
+ * Chart View Utilities — Data fetching hook + helpers
+ * ────────────────────────────────────────────────────────────── */
+import { type AggregationQueryResponse } from '@wildo-ai/saas-models';
+import type { ChartDefinition, ChartInputValues } from '@wildo-ai/saas-models';
+export interface ChartDataState {
+    data: AggregationQueryResponse | null;
+    loading: boolean;
+    error: ChartError | null;
+    refetch: () => void;
+}
+export interface ChartError {
+    code: string;
+    message: string;
+}
+/**
+ * Hook to fetch chart data from the backend.
+ * Handles loading, error states, and optional auto-refresh.
+ *
+ * Uses WildoBackendHttpClient (via getManualCallsHttpClient) which provides:
+ * - Correct base URL from environment config
+ * - Authentication headers (JWT/session)
+ * - Request interception and error handling
+ * - Retry logic and network queue
+ */
+export declare function useChartData(definition: ChartDefinition | undefined, executionChartRef: string | undefined, inputs?: ChartInputValues, contextResourceIdentifiers?: Record<string, string>, urlParamValues?: Record<string, string>): ChartDataState;
+//# sourceMappingURL=chart-view.utils.d.ts.map

package/dist/esm/components/views/chart-view/chart-view.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-view.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/views/chart-view/chart-view.utils.ts"],"names":[],"mappings":"AAAA;;oEAEoE;AAGpE,OAAO,EAAkC,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtG,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAO/E,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,wBAAwB,GAAG,IAAI,CAAC;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAuCD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC1B,UAAU,EAAE,eAAe,GAAG,SAAS,EACvC,iBAAiB,EAAE,MAAM,GAAG,SAAS,EACrC,MAAM,CAAC,EAAE,gBAAgB,EACzB,0BAA0B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACnD,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACtC,cAAc,CAoGhB"}

package/dist/esm/components/views/chart-view/chart-view.utils.js

@@ -0,0 +1,134 @@
+/** ──────────────────────────────────────────────────────────────
+ * Chart View Utilities — Data fetching hook + helpers
+ * ────────────────────────────────────────────────────────────── */
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { AggregationQueryResponseSchema } from '@wildo-ai/saas-models';
+import { CoreResourceType } from '@wildo-ai/saas-models';
+import { CoreWebSocketEvent } from '@wildo-ai/saas-models';
+import { useWebSocket } from '../../../core/requests/websockets/useWebSocket.js';
+import { getManualCallsHttpClient } from '../../../core/requests/wildo-http-client-manual-calls.frontend.service.js';
+function resolveOrganizationIdFromContextResourceIdentifiers(contextResourceIdentifiers) {
+    if (!contextResourceIdentifiers) {
+        return undefined;
+    }
+    const exactOrganizationId = contextResourceIdentifiers[CoreResourceType.ORGANIZATIONS];
+    if (exactOrganizationId) {
+        return exactOrganizationId;
+    }
+    const normalizedOrganizationKey = CoreResourceType.ORGANIZATIONS.toLowerCase();
+    for (const [key, value] of Object.entries(contextResourceIdentifiers)) {
+        if (key.toLowerCase() === normalizedOrganizationKey && value) {
+            return value;
+        }
+    }
+    return undefined;
+}
+// ── Error Parsing ────────────────────────────────────────────
+function parseChartError(error) {
+    // Handle errors from WildoBackendHttpClient (already unwrapped from axios)
+    if (error && typeof error === 'object') {
+        const err = error;
+        const code = (err.errorRef || err.code || 'unknown');
+        const message = (err.message || String(error));
+        return { code, message };
+    }
+    return { code: 'unknown', message: String(error) };
+}
+// ── Data Fetching Hook ───────────────────────────────────────
+/**
+ * Hook to fetch chart data from the backend.
+ * Handles loading, error states, and optional auto-refresh.
+ *
+ * Uses WildoBackendHttpClient (via getManualCallsHttpClient) which provides:
+ * - Correct base URL from environment config
+ * - Authentication headers (JWT/session)
+ * - Request interception and error handling
+ * - Retry logic and network queue
+ */
+export function useChartData(definition, executionChartRef, inputs, contextResourceIdentifiers, urlParamValues) {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const abortRef = useRef(null);
+    const fetchData = useCallback(async () => {
+        if (!definition || !executionChartRef) {
+            abortRef.current?.abort();
+            setData(null);
+            setError(null);
+            setLoading(false);
+            return;
+        }
+        // Cancel previous request
+        abortRef.current?.abort();
+        const controller = new AbortController();
+        abortRef.current = controller;
+        setLoading(true);
+        setError(null);
+        try {
+            const httpClient = getManualCallsHttpClient();
+            const organizationId = resolveOrganizationIdFromContextResourceIdentifiers(contextResourceIdentifiers);
+            const queryParams = {
+                ...(urlParamValues ?? {}),
+                ...(organizationId ? { organizationId } : {}),
+            };
+            const requestBody = {
+                ...(inputs && Object.keys(inputs).length > 0 ? { inputs } : {}),
+                ...(contextResourceIdentifiers && Object.keys(contextResourceIdentifiers).length > 0
+                    ? { contextResourceIdentifiers }
+                    : {}),
+            };
+            const response = await httpClient.getChartData(executionChartRef, Object.keys(requestBody).length > 0 ? requestBody : undefined, { signal: controller.signal }, Object.keys(queryParams).length > 0 ? queryParams : undefined);
+            const parsedResponse = AggregationQueryResponseSchema.safeParse(response);
+            if (!parsedResponse.success) {
+                throw new Error(`Invalid aggregation response for chart "${executionChartRef}".`);
+            }
+            setData(parsedResponse.data);
+        }
+        catch (err) {
+            // Ignore abort errors (request was cancelled by a newer request)
+            if (err instanceof DOMException && err.name === 'AbortError')
+                return;
+            setError(parseChartError(err));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [contextResourceIdentifiers, definition, executionChartRef, inputs, urlParamValues]);
+    useEffect(() => {
+        fetchData();
+        return () => abortRef.current?.abort();
+    }, [fetchData]);
+    // Auto-refresh (interval-based)
+    useEffect(() => {
+        const interval = definition?.refreshInterval;
+        if (!interval || interval <= 0)
+            return;
+        const timer = setInterval(fetchData, interval);
+        return () => clearInterval(timer);
+    }, [definition?.refreshInterval, fetchData]);
+    // WebSocket real-time re-fetch — subscribe to resource mutations on the main resource type
+    // Debounced to prevent excessive refetches during bulk operations
+    const { on, isConnected } = useWebSocket();
+    const resourceType = definition?.dataQuery?.mainResourceType;
+    const wsDebounceRef = useRef(undefined);
+    useEffect(() => {
+        if (!isConnected || !resourceType || !definition)
+            return;
+        // Subscribe to resource:updated events for the chart's main resource type
+        // This ensures the chart refreshes when data changes (create, update, delete)
+        const unsubscribe = on(CoreWebSocketEvent.RESOURCE_UPDATED, (payload) => {
+            if (payload.resourceType === resourceType) {
+                // Debounce: wait 500ms after last event before refetching
+                // Prevents 50 HTTP requests during bulk operations
+                clearTimeout(wsDebounceRef.current);
+                wsDebounceRef.current = setTimeout(fetchData, 500);
+            }
+        });
+        return () => {
+            unsubscribe();
+            clearTimeout(wsDebounceRef.current);
+        };
+    }, [isConnected, resourceType, definition, on, fetchData]);
+    return { data, loading, error, refetch: fetchData };
+}
+//# sourceMappingURL=chart-view.utils.js.map

package/dist/esm/components/views/chart-view/chart-view.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-view.utils.js","sourceRoot":"","sources":["../../../../../src/components/views/chart-view/chart-view.utils.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/views/chart-view/dev/ChartDevPreview.d.ts

@@ -0,0 +1,16 @@
+/** ──────────────────────────────────────────────────────────────
+ * ChartDevPreview — Development-only chart preview page
+ *
+ * Route: /dev/chart-preview
+ *
+ * Features:
+ * - Lists all registered charts
+ * - Live preview of selected chart
+ * - Theme toggle (light/dark)
+ * - Raw JSON panel (definition + data response)
+ * - Only available in development mode
+ * ────────────────────────────────────────────────────────────── */
+import React from 'react';
+export declare const ChartDevPreview: React.FC;
+export default ChartDevPreview;
+//# sourceMappingURL=ChartDevPreview.d.ts.map

package/dist/esm/components/views/chart-view/dev/ChartDevPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDevPreview.d.ts","sourceRoot":"","sources":["../../../../../../src/components/views/chart-view/dev/ChartDevPreview.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;oEAWoE;AAEpE,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EA0KnC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/esm/components/views/chart-view/dev/ChartDevPreview.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** ──────────────────────────────────────────────────────────────
+ * ChartDevPreview — Development-only chart preview page
+ *
+ * Route: /dev/chart-preview
+ *
+ * Features:
+ * - Lists all registered charts
+ * - Live preview of selected chart
+ * - Theme toggle (light/dark)
+ * - Raw JSON panel (definition + data response)
+ * - Only available in development mode
+ * ────────────────────────────────────────────────────────────── */
+import React, { useState, Suspense, useMemo } from 'react';
+import { useUI } from '../../../../core/ui/useUI.js';
+import { useChartData } from '../../../../components/views/chart-view/chart-view.utils.js';
+import { ChartLoadingSkeleton } from '../../../../components/views/chart-view/ChartLoadingSkeleton.js';
+// Lazy-load ChartView
+const LazyChartView = React.lazy(() => import('../ChartView.js'));
+export const ChartDevPreview = () => {
+    const { chartViews } = useUI();
+    const [selectedRef, setSelectedRef] = useState();
+    const [showJson, setShowJson] = useState(false);
+    const [jsonTab, setJsonTab] = useState('definition');
+    // Find the selected chart definition
+    const selectedDefinition = useMemo(() => chartViews?.find(v => v.ref === selectedRef), [chartViews, selectedRef]);
+    // Fetch data for JSON panel
+    const { data: responseData } = useChartData(showJson ? selectedDefinition : undefined, showJson ? selectedDefinition?.ref : undefined);
+    if (!chartViews || chartViews.length === 0) {
+        return (_jsxs("div", { style: { padding: 32, textAlign: 'center', color: '#888' }, children: [_jsx("h2", { style: { marginBottom: 8 }, children: "Chart Dev Preview" }), _jsx("p", { children: "No charts registered. Register charts via ChartRegistryService." })] }));
+    }
+    return (_jsxs("div", { style: { display: 'flex', height: '100vh', fontFamily: 'system-ui, sans-serif' }, children: [_jsxs("div", { style: {
+                    width: 260,
+                    borderRight: '1px solid #e5e5e5',
+                    overflowY: 'auto',
+                    padding: '16px 0',
+                    flexShrink: 0,
+                }, children: [_jsxs("h3", { style: { padding: '0 16px', marginBottom: 12, fontSize: 14, fontWeight: 600, color: '#555' }, children: ["Charts (", chartViews.length, ")"] }), chartViews.map(chart => (_jsxs("button", { onClick: () => setSelectedRef(chart.ref), style: {
+                            display: 'block',
+                            width: '100%',
+                            textAlign: 'left',
+                            padding: '10px 16px',
+                            border: 'none',
+                            background: selectedRef === chart.ref ? '#f0f0ff' : 'transparent',
+                            cursor: 'pointer',
+                            fontSize: 13,
+                            color: '#333',
+                            borderLeft: selectedRef === chart.ref ? '3px solid #5470c6' : '3px solid transparent',
+                        }, children: [_jsx("div", { style: { fontWeight: 500 }, children: chart.ref }), _jsxs("div", { style: { fontSize: 11, color: '#999', marginTop: 2 }, children: [chart.chartType, " \u2022 ", chart.dataQuery?.mainResourceType] })] }, chart.ref)))] }), _jsxs("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 12,
+                            padding: '10px 16px',
+                            borderBottom: '1px solid #e5e5e5',
+                            fontSize: 13,
+                        }, children: [_jsx("span", { style: { fontWeight: 600 }, children: selectedRef ? `Preview: ${selectedRef}` : 'Select a chart' }), _jsx("div", { style: { flex: 1 } }), selectedRef && (_jsx("button", { onClick: () => setShowJson(j => !j), style: {
+                                    padding: '4px 12px',
+                                    border: '1px solid #ddd',
+                                    borderRadius: 4,
+                                    background: showJson ? '#f0f0ff' : 'white',
+                                    cursor: 'pointer',
+                                    fontSize: 12,
+                                }, children: showJson ? 'Hide JSON' : 'Show JSON' }))] }), _jsxs("div", { style: { flex: 1, overflow: 'auto', padding: 16 }, children: [selectedRef ? (_jsx(Suspense, { fallback: _jsx(ChartLoadingSkeleton, { height: 400 }), children: _jsx(LazyChartView, { viewRef: selectedRef, height: 400 }) })) : (_jsx("div", { style: { textAlign: 'center', color: '#aaa', paddingTop: 100 }, children: "Select a chart from the sidebar to preview" })), showJson && selectedDefinition && (_jsxs("div", { style: { marginTop: 16, border: '1px solid #ddd', borderRadius: 6, overflow: 'hidden' }, children: [_jsxs("div", { style: { display: 'flex', borderBottom: '1px solid #ddd' }, children: [_jsx("button", { onClick: () => setJsonTab('definition'), style: {
+                                                    padding: '8px 16px',
+                                                    border: 'none',
+                                                    background: jsonTab === 'definition' ? '#f8f8f8' : 'white',
+                                                    fontWeight: jsonTab === 'definition' ? 600 : 400,
+                                                    cursor: 'pointer',
+                                                    fontSize: 12,
+                                                    borderBottom: jsonTab === 'definition' ? '2px solid #5470c6' : '2px solid transparent',
+                                                }, children: "Definition" }), _jsx("button", { onClick: () => setJsonTab('data'), style: {
+                                                    padding: '8px 16px',
+                                                    border: 'none',
+                                                    background: jsonTab === 'data' ? '#f8f8f8' : 'white',
+                                                    fontWeight: jsonTab === 'data' ? 600 : 400,
+                                                    cursor: 'pointer',
+                                                    fontSize: 12,
+                                                    borderBottom: jsonTab === 'data' ? '2px solid #5470c6' : '2px solid transparent',
+                                                }, children: "Data Response" })] }), _jsx("pre", { style: {
+                                            padding: 16,
+                                            margin: 0,
+                                            fontSize: 11,
+                                            lineHeight: 1.5,
+                                            background: '#f8f8f8',
+                                            maxHeight: 400,
+                                            overflow: 'auto',
+                                            fontFamily: 'monospace',
+                                        }, children: jsonTab === 'definition'
+                                            ? JSON.stringify(selectedDefinition, null, 2)
+                                            : responseData
+                                                ? JSON.stringify(responseData, null, 2)
+                                                : 'Loading data...' })] }))] })] })] }));
+};
+export default ChartDevPreview;
+//# sourceMappingURL=ChartDevPreview.js.map