@opendata-ai/openchart-svelte 2.0.0

package/dist/__tests__/Chart.test.js

@@ -0,0 +1,108 @@
+import { cleanup, render, waitFor } from '@testing-library/svelte';
+import { afterEach, describe, expect, it } from 'vitest';
+import Chart from '../Chart.svelte';
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+const lineSpec = {
+    type: 'line',
+    data: [
+        { date: '2020-01-01', value: 10, country: 'US' },
+        { date: '2021-01-01', value: 40, country: 'US' },
+        { date: '2020-01-01', value: 15, country: 'UK' },
+        { date: '2021-01-01', value: 35, country: 'UK' },
+    ],
+    encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative' },
+        color: { field: 'country', type: 'nominal' },
+    },
+    chrome: {
+        title: 'GDP Growth',
+        subtitle: 'US vs UK over time',
+        source: 'World Bank',
+    },
+};
+const barSpec = {
+    type: 'bar',
+    data: [
+        { name: 'A', value: 10 },
+        { name: 'B', value: 30 },
+        { name: 'C', value: 20 },
+    ],
+    encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'name', type: 'nominal' },
+    },
+    chrome: {
+        title: 'Updated Title',
+    },
+};
+// ---------------------------------------------------------------------------
+// Helper: render Chart and wait for SVG to appear ($effect is deferred)
+// ---------------------------------------------------------------------------
+async function renderChart(props) {
+    const result = render(Chart, { props });
+    await waitFor(() => {
+        expect(result.container.querySelector('svg')).not.toBeNull();
+    });
+    return result;
+}
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+afterEach(() => {
+    cleanup();
+});
+describe('<Chart />', () => {
+    it('renders an SVG element', async () => {
+        const { container } = await renderChart({ spec: lineSpec });
+        const svg = container.querySelector('svg');
+        expect(svg).not.toBeNull();
+        expect(svg?.getAttribute('class')).toBe('viz-chart');
+    });
+    it('renders chrome text elements', async () => {
+        const { container } = await renderChart({ spec: lineSpec });
+        const title = container.querySelector('.viz-title');
+        expect(title).not.toBeNull();
+        expect(title?.textContent).toBe('GDP Growth');
+        const subtitle = container.querySelector('.viz-subtitle');
+        expect(subtitle?.textContent).toBe('US vs UK over time');
+        const source = container.querySelector('.viz-source');
+        expect(source?.textContent).toBe('World Bank');
+    });
+    it('spec changes trigger re-render', async () => {
+        const { container, rerender } = await renderChart({ spec: lineSpec });
+        const titleBefore = container.querySelector('.viz-title');
+        expect(titleBefore?.textContent).toBe('GDP Growth');
+        await rerender({ spec: barSpec });
+        await waitFor(() => {
+            expect(container.querySelector('.viz-title')?.textContent).toBe('Updated Title');
+        });
+    });
+    it('unmounting cleans up chart instance', async () => {
+        const { container, unmount } = await renderChart({ spec: lineSpec });
+        const svgBefore = container.querySelector('svg');
+        expect(svgBefore).not.toBeNull();
+        unmount();
+        expect(container.querySelector('svg')).toBeNull();
+    });
+    it('className prop passes through to wrapper div', async () => {
+        const { container } = await renderChart({ spec: lineSpec, class: 'my-chart' });
+        const wrapper = container.firstElementChild;
+        expect(wrapper?.className).toContain('my-chart');
+    });
+    it('renders with dark mode option', async () => {
+        const { container } = await renderChart({ spec: lineSpec, darkMode: 'force' });
+        const svg = container.querySelector('svg');
+        expect(svg).not.toBeNull();
+    });
+    it('style prop passes through to wrapper div', async () => {
+        const { container } = await renderChart({
+            spec: lineSpec,
+            style: 'border: 1px solid red',
+        });
+        const wrapper = container.firstElementChild;
+        expect(wrapper?.style.border).toBe('1px solid red');
+    });
+});

package/dist/__tests__/DataTable.test.js

@@ -0,0 +1,101 @@
+import { cleanup, render, waitFor } from '@testing-library/svelte';
+import { afterEach, describe, expect, it } from 'vitest';
+import DataTable from '../DataTable.svelte';
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+const tableSpec = {
+    type: 'table',
+    data: [
+        { name: 'Alice', age: 30, city: 'Portland' },
+        { name: 'Bob', age: 25, city: 'Seattle' },
+        { name: 'Charlie', age: 35, city: 'Denver' },
+    ],
+    columns: [
+        { key: 'name', label: 'Name' },
+        { key: 'age', label: 'Age' },
+        { key: 'city', label: 'City' },
+    ],
+    chrome: { title: 'People Table' },
+};
+const updatedSpec = {
+    type: 'table',
+    data: [
+        { x: 1, y: 2 },
+        { x: 3, y: 4 },
+    ],
+    columns: [
+        { key: 'x', label: 'X Value' },
+        { key: 'y', label: 'Y Value' },
+    ],
+    chrome: { title: 'Updated Table' },
+};
+// ---------------------------------------------------------------------------
+// Helper: render DataTable and wait for the table to mount ($effect is deferred)
+// ---------------------------------------------------------------------------
+async function renderTable(props) {
+    const result = render(DataTable, { props });
+    await waitFor(() => {
+        expect(result.container.querySelector('table')).not.toBeNull();
+    });
+    return result;
+}
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+afterEach(() => {
+    cleanup();
+});
+describe('<DataTable />', () => {
+    it('renders a table', async () => {
+        const { container } = await renderTable({ spec: tableSpec });
+        const table = container.querySelector('table');
+        expect(table).not.toBeNull();
+    });
+    it('renders correct number of columns', async () => {
+        const { container } = await renderTable({ spec: tableSpec });
+        const headers = container.querySelectorAll('thead th');
+        expect(headers.length).toBe(3);
+    });
+    it('renders correct number of rows', async () => {
+        const { container } = await renderTable({ spec: tableSpec });
+        const rows = container.querySelectorAll('tbody tr');
+        expect(rows.length).toBe(3);
+    });
+    it('spec changes trigger re-render', async () => {
+        const { container, rerender } = await renderTable({ spec: tableSpec });
+        const titleBefore = container.querySelector('.viz-table-title');
+        expect(titleBefore?.textContent).toBe('People Table');
+        await rerender({ spec: updatedSpec });
+        await waitFor(() => {
+            expect(container.querySelector('.viz-table-title')?.textContent).toBe('Updated Table');
+        });
+        const headersAfter = container.querySelectorAll('thead th');
+        expect(headersAfter.length).toBe(2);
+    });
+    it('unmounting cleans up', async () => {
+        const { container, unmount } = await renderTable({ spec: tableSpec });
+        const tableBefore = container.querySelector('table');
+        expect(tableBefore).not.toBeNull();
+        unmount();
+        expect(container.querySelector('table')).toBeNull();
+    });
+    it('className passes through', async () => {
+        const { container } = await renderTable({ spec: tableSpec, class: 'my-table' });
+        const wrapper = container.firstElementChild;
+        expect(wrapper?.className).toContain('my-table');
+    });
+    it('renders with dark mode option', async () => {
+        const { container } = await renderTable({ spec: tableSpec, darkMode: 'force' });
+        const table = container.querySelector('table');
+        expect(table).not.toBeNull();
+    });
+    it('style prop passes through to wrapper div', async () => {
+        const { container } = await renderTable({
+            spec: tableSpec,
+            style: 'border: 1px solid red',
+        });
+        const wrapper = container.firstElementChild;
+        expect(wrapper?.style.border).toBe('1px solid red');
+    });
+});

package/dist/__tests__/Graph.test.js

@@ -0,0 +1,104 @@
+import { cleanup, render, waitFor } from '@testing-library/svelte';
+import { afterEach, describe, expect, it } from 'vitest';
+import Graph from '../Graph.svelte';
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+const basicSpec = {
+    type: 'graph',
+    nodes: [
+        { id: 'a', label: 'Node A' },
+        { id: 'b', label: 'Node B' },
+        { id: 'c', label: 'Node C' },
+    ],
+    edges: [
+        { source: 'a', target: 'b' },
+        { source: 'b', target: 'c' },
+    ],
+    chrome: {
+        title: 'Test Graph',
+        subtitle: 'A simple test graph',
+    },
+};
+const updatedSpec = {
+    type: 'graph',
+    nodes: [
+        { id: 'x', label: 'Node X' },
+        { id: 'y', label: 'Node Y' },
+    ],
+    edges: [{ source: 'x', target: 'y' }],
+    chrome: {
+        title: 'Updated Graph',
+    },
+};
+// ---------------------------------------------------------------------------
+// Helper: render Graph and wait for canvas to mount ($effect is deferred)
+// ---------------------------------------------------------------------------
+async function renderGraph(props) {
+    const result = render(Graph, { props });
+    await waitFor(() => {
+        expect(result.container.querySelector('canvas')).not.toBeNull();
+    });
+    return result;
+}
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+afterEach(() => {
+    cleanup();
+});
+describe('<Graph />', () => {
+    it('renders a container div', async () => {
+        const { container } = await renderGraph({ spec: basicSpec });
+        const wrapper = container.firstElementChild;
+        expect(wrapper).not.toBeNull();
+        expect(wrapper.tagName.toLowerCase()).toBe('div');
+    });
+    it('mounts graph instance with canvas element', async () => {
+        const { container } = await renderGraph({ spec: basicSpec });
+        const canvas = container.querySelector('canvas');
+        expect(canvas).not.toBeNull();
+    });
+    it('renders chrome text elements', async () => {
+        const { container } = await renderGraph({ spec: basicSpec });
+        const title = container.querySelector('.viz-title');
+        expect(title).not.toBeNull();
+        expect(title?.textContent).toBe('Test Graph');
+        const subtitle = container.querySelector('.viz-subtitle');
+        expect(subtitle?.textContent).toBe('A simple test graph');
+    });
+    it('spec changes trigger re-render', async () => {
+        const { container, rerender } = await renderGraph({ spec: basicSpec });
+        const titleBefore = container.querySelector('.viz-title');
+        expect(titleBefore?.textContent).toBe('Test Graph');
+        await rerender({ spec: updatedSpec });
+        await waitFor(() => {
+            expect(container.querySelector('.viz-title')?.textContent).toBe('Updated Graph');
+        });
+    });
+    it('unmounting cleans up graph instance', async () => {
+        const { container, unmount } = await renderGraph({ spec: basicSpec });
+        const canvasBefore = container.querySelector('canvas');
+        expect(canvasBefore).not.toBeNull();
+        unmount();
+        expect(container.querySelector('canvas')).toBeNull();
+    });
+    it('className prop passes through to wrapper div', async () => {
+        const { container } = await renderGraph({ spec: basicSpec, class: 'my-graph' });
+        const wrapper = container.firstElementChild;
+        expect(wrapper?.className).toContain('my-graph');
+    });
+    it('style prop passes through to wrapper div', async () => {
+        const { container } = await renderGraph({
+            spec: basicSpec,
+            style: 'border: 1px solid red',
+        });
+        const wrapper = container.firstElementChild;
+        expect(wrapper?.style.border).toBe('1px solid red');
+    });
+    it('renders with dark mode option', async () => {
+        const { container } = await renderGraph({ spec: basicSpec, darkMode: 'force' });
+        const canvas = container.querySelector('canvas');
+        expect(canvas).not.toBeNull();
+    });
+});

package/dist/__tests__/ThemeContext.test.js

@@ -0,0 +1,89 @@
+/**
+ * Tests for VizThemeProvider context propagation.
+ *
+ * Tests that theme and dark mode contexts are correctly provided to
+ * descendant Chart components via the VizThemeProvider.
+ *
+ * Since testing context requires Svelte components that consume context,
+ * we test through the Chart component which reads context via
+ * getVizTheme() and getVizDarkMode().
+ */
+import { cleanup, render, waitFor } from '@testing-library/svelte';
+import { afterEach, describe, expect, it } from 'vitest';
+import Chart from '../Chart.svelte';
+import { DARK_MODE_KEY, THEME_KEY } from '../context.js';
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+const minimalSpec = {
+    type: 'bar',
+    data: [
+        { name: 'A', value: 10 },
+        { name: 'B', value: 20 },
+    ],
+    encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'name', type: 'nominal' },
+    },
+};
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+afterEach(() => {
+    cleanup();
+});
+describe('Theme context', () => {
+    it('Chart renders without context (graceful fallback)', async () => {
+        const { container } = render(Chart, { props: { spec: minimalSpec } });
+        await waitFor(() => {
+            expect(container.querySelector('svg')).not.toBeNull();
+        });
+    });
+    it('Chart receives theme from context', async () => {
+        const theme = {
+            colors: { categorical: ['#ff0000', '#00ff00', '#0000ff'] },
+        };
+        const { container } = render(Chart, {
+            props: { spec: minimalSpec },
+            context: new Map([[THEME_KEY, () => theme]]),
+        });
+        await waitFor(() => {
+            expect(container.querySelector('svg')).not.toBeNull();
+        });
+    });
+    it('Chart receives dark mode from context', async () => {
+        const { container } = render(Chart, {
+            props: { spec: minimalSpec },
+            context: new Map([[DARK_MODE_KEY, () => 'force']]),
+        });
+        await waitFor(() => {
+            expect(container.querySelector('svg')).not.toBeNull();
+        });
+    });
+    it('explicit theme prop overrides context theme', async () => {
+        const contextTheme = {
+            colors: { categorical: ['#111'] },
+        };
+        const propTheme = {
+            colors: { categorical: ['#222'] },
+        };
+        // When both context and prop are provided, prop should take priority.
+        // We just verify it renders successfully (the override logic is in the component).
+        const { container } = render(Chart, {
+            props: { spec: minimalSpec, theme: propTheme },
+            context: new Map([[THEME_KEY, () => contextTheme]]),
+        });
+        await waitFor(() => {
+            expect(container.querySelector('svg')).not.toBeNull();
+        });
+    });
+    it('explicit darkMode prop overrides context darkMode', async () => {
+        const { container } = render(Chart, {
+            props: { spec: minimalSpec, darkMode: 'off' },
+            context: new Map([[DARK_MODE_KEY, () => 'force']]),
+        });
+        await waitFor(() => {
+            expect(container.querySelector('svg')).not.toBeNull();
+        });
+    });
+});

package/dist/__tests__/composables.test.js

@@ -0,0 +1,84 @@
+/**
+ * Tests for useDarkMode composable.
+ *
+ * Since useDarkMode uses Svelte 5 runes ($state, $effect), it needs to run
+ * in a Svelte component context. We test by rendering a Chart component with
+ * dark mode options and verifying it renders correctly.
+ *
+ * Direct unit testing of rune-based composables outside a component context
+ * is limited in Svelte 5, so we test the observable behavior through components.
+ */
+import { cleanup, render, waitFor } from '@testing-library/svelte';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import Chart from '../Chart.svelte';
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+const barSpec = {
+    type: 'bar',
+    data: [
+        { name: 'A', value: 10 },
+        { name: 'B', value: 30 },
+    ],
+    encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'name', type: 'nominal' },
+    },
+};
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+afterEach(() => {
+    cleanup();
+});
+describe('dark mode rendering', () => {
+    it('renders without dark mode', async () => {
+        const { container } = render(Chart, { props: { spec: barSpec } });
+        await waitFor(() => {
+            expect(container.querySelector('svg')).not.toBeNull();
+        });
+    });
+    it('renders with dark mode off', async () => {
+        const { container } = render(Chart, {
+            props: { spec: barSpec, darkMode: 'off' },
+        });
+        await waitFor(() => {
+            expect(container.querySelector('svg')).not.toBeNull();
+        });
+    });
+    it('renders with dark mode forced', async () => {
+        const { container } = render(Chart, {
+            props: { spec: barSpec, darkMode: 'force' },
+        });
+        await waitFor(() => {
+            expect(container.querySelector('svg')).not.toBeNull();
+        });
+    });
+    it('renders with dark mode auto', async () => {
+        const spy = vi.spyOn(window, 'matchMedia').mockImplementation((query) => ({
+            matches: query === '(prefers-color-scheme: dark)',
+            media: query,
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+        }));
+        const { container } = render(Chart, {
+            props: { spec: barSpec, darkMode: 'auto' },
+        });
+        await waitFor(() => {
+            expect(container.querySelector('svg')).not.toBeNull();
+        });
+        spy.mockRestore();
+    });
+    it('switching dark mode re-renders chart', async () => {
+        const { container, rerender } = render(Chart, {
+            props: { spec: barSpec, darkMode: 'off' },
+        });
+        await waitFor(() => {
+            expect(container.querySelector('svg')).not.toBeNull();
+        });
+        await rerender({ spec: barSpec, darkMode: 'force' });
+        await waitFor(() => {
+            expect(container.querySelector('svg')).not.toBeNull();
+        });
+    });
+});

package/dist/__tests__/useTableState.test.js

@@ -0,0 +1,105 @@
+/**
+ * Tests for useTableState composable.
+ *
+ * Since useTableState uses $state runes, it requires running within a Svelte
+ * reactive context. We test by verifying the returned object's behavior
+ * directly since $state creates reactive getters/setters that work
+ * synchronously outside of $effect tracking.
+ */
+import { describe, expect, it } from 'vitest';
+import { useTableState } from '../composables/useTableState.svelte.js';
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('useTableState', () => {
+    // -----------------------------------------------------------------------
+    // Default initial state
+    // -----------------------------------------------------------------------
+    it('initializes with default values when no options provided', () => {
+        const state = useTableState();
+        expect(state.sort).toBeNull();
+        expect(state.search).toBe('');
+        expect(state.page).toBe(0);
+    });
+    // -----------------------------------------------------------------------
+    // Custom initial state
+    // -----------------------------------------------------------------------
+    it('initializes with provided sort state', () => {
+        const state = useTableState({
+            sort: { column: 'name', direction: 'asc' },
+        });
+        expect(state.sort).toEqual({ column: 'name', direction: 'asc' });
+    });
+    it('initializes with provided search string', () => {
+        const state = useTableState({ search: 'hello' });
+        expect(state.search).toBe('hello');
+    });
+    it('initializes with provided page number', () => {
+        const state = useTableState({ page: 3 });
+        expect(state.page).toBe(3);
+    });
+    // -----------------------------------------------------------------------
+    // State setters
+    // -----------------------------------------------------------------------
+    it('setSort updates the sort state', () => {
+        const state = useTableState();
+        state.setSort({ column: 'age', direction: 'desc' });
+        expect(state.sort).toEqual({ column: 'age', direction: 'desc' });
+    });
+    it('setSort can clear sort by passing null', () => {
+        const state = useTableState({
+            sort: { column: 'name', direction: 'asc' },
+        });
+        expect(state.sort).toEqual({ column: 'name', direction: 'asc' });
+        state.setSort(null);
+        expect(state.sort).toBeNull();
+    });
+    it('setSearch updates the search query', () => {
+        const state = useTableState();
+        state.setSearch('filter text');
+        expect(state.search).toBe('filter text');
+    });
+    it('setPage updates the current page', () => {
+        const state = useTableState();
+        state.setPage(5);
+        expect(state.page).toBe(5);
+    });
+    // -----------------------------------------------------------------------
+    // resetState
+    // -----------------------------------------------------------------------
+    it('resetState restores default initial values', () => {
+        const state = useTableState();
+        // Change all values
+        state.setSort({ column: 'name', direction: 'asc' });
+        state.setSearch('filter text');
+        state.setPage(5);
+        expect(state.sort).toEqual({ column: 'name', direction: 'asc' });
+        expect(state.search).toBe('filter text');
+        expect(state.page).toBe(5);
+        // Reset
+        state.resetState();
+        expect(state.sort).toBeNull();
+        expect(state.search).toBe('');
+        expect(state.page).toBe(0);
+    });
+    it('resetState restores custom initial values', () => {
+        const initialState = {
+            sort: { column: 'age', direction: 'desc' },
+            search: 'initial',
+            page: 1,
+        };
+        const state = useTableState(initialState);
+        // Change all values
+        state.setSort(null);
+        state.setSearch('changed');
+        state.setPage(5);
+        expect(state.sort).toBeNull();
+        expect(state.search).toBe('changed');
+        expect(state.page).toBe(5);
+        // Reset to initial
+        state.resetState();
+        expect(state.sort).toEqual({ column: 'age', direction: 'desc' });
+        expect(state.search).toBe('initial');
+        expect(state.page).toBe(1);
+    });
+});

package/dist/composables/useChart.svelte.d.ts

@@ -0,0 +1,41 @@
+/**
+ * useChart: composable for manual chart lifecycle control.
+ *
+ * Returns a Svelte action function for use with `use:chart` directive
+ * and exposes the chart instance and compiled layout.
+ *
+ * Usage:
+ * ```svelte
+ * <script>
+ *   const { action, chart, layout } = useChart(spec);
+ * </script>
+ * <div use:action></div>
+ * ```
+ *
+ * Uses .svelte.ts extension so runes ($state, $effect) work outside
+ * .svelte components.
+ */
+import type { ChartLayout, ChartSpec, GraphSpec } from '@opendata-ai/openchart-core';
+import { type ChartInstance, type MountOptions } from '@opendata-ai/openchart-vanilla';
+export interface UseChartOptions {
+    /** Theme overrides. */
+    theme?: MountOptions['theme'];
+    /** Dark mode setting. */
+    darkMode?: MountOptions['darkMode'];
+    /** Data point click handler. */
+    onDataPointClick?: MountOptions['onDataPointClick'];
+    /** Enable responsive resizing. Defaults to true. */
+    responsive?: boolean;
+}
+export interface UseChartReturn {
+    /** Svelte action to attach to a container div. */
+    action: (node: HTMLElement) => {
+        destroy: () => void;
+    };
+    /** The chart instance (null until mounted). */
+    readonly chart: ChartInstance | null;
+    /** The current compiled layout (null until mounted). */
+    readonly layout: ChartLayout | null;
+}
+export declare function useChart(spec: () => ChartSpec | GraphSpec, options?: () => UseChartOptions | undefined): UseChartReturn;
+//# sourceMappingURL=useChart.svelte.d.ts.map

package/dist/composables/useChart.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChart.svelte.d.ts","sourceRoot":"","sources":["../../src/composables/useChart.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACrF,OAAO,EAAE,KAAK,aAAa,EAAe,KAAK,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAGpG,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B,yBAAyB;IACzB,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACpC,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;IACpD,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,MAAM,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK;QAAE,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IACvD,+CAA+C;IAC/C,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,wDAAwD;IACxD,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CACrC;AAED,wBAAgB,QAAQ,CACtB,IAAI,EAAE,MAAM,SAAS,GAAG,SAAS,EACjC,OAAO,CAAC,EAAE,MAAM,eAAe,GAAG,SAAS,GAC1C,cAAc,CA8DhB"}