@knime/kds-echarts 6.0.0

package/README.md

@@ -0,0 +1,174 @@
+# KNIME® Design System – ECharts
+
+This package contains the KNIME Design System integration for [Apache ECharts]: the `KdsECharts` [Vue] component, the `useKdsEChartsColors` composable, and the generated KDS ECharts **themes** (`light` / `dark`) with all chart tokens resolved to concrete values.
+
+It's published as npm package: [@knime/kds-echarts]
+
+## Development
+
+This package is part of the [KNIME Design System monorepo](../../README.md). For setup instructions, see the **[root README](../../README.md)**.
+
+## Building
+
+```sh
+pnpm run build          # Build only this package
+pnpm run build:theme    # Only regenerate the ECharts themes from the KDS tokens
+```
+
+Results are saved to `dist/`.
+
+`build:theme` reads the resolved design tokens from `@knime/kds-styles` and writes `src/theme/generated.ts` (gitignored), so `@knime/kds-styles` must be built first. The repository's `postinstall` does both in order.
+
+## Using ECharts in a Vue application
+
+Install the [@knime/kds-echarts] npm package as a dependency:
+
+```sh
+pnpm add @knime/kds-echarts echarts
+```
+
+`KdsECharts` deliberately registers nothing itself, so the bundle stays tree-shaken — the consumer registers exactly the renderer, charts and components it uses via ECharts' `use()`:
+
+```vue
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import { BarChart } from "echarts/charts";
+import { GridComponent, TooltipComponent } from "echarts/components";
+import { use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+
+import { KdsECharts } from "@knime/kds-echarts";
+
+use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);
+
+const option: EChartsOption = {
+  xAxis: { type: "category", data: ["Jan", "Feb", "Mar"] },
+  yAxis: { type: "value" },
+  series: [{ type: "bar", data: [120, 200, 150] }],
+};
+</script>
+
+<template>
+  <KdsECharts :option="option" style="height: 240px" />
+</template>
+```
+
+The KDS theme is applied automatically and follows light/dark mode, so an option should generally omit colors and fonts and let the theme drive styling.
+
+Events (`@click`, `@datazoom`, `@finished`, `zr:*`, …) as well as `class` and `style` fall through to the wrapped `vue-echarts` component. The underlying ECharts instance is exposed as `chart` for imperative use (`dispatchAction`, `resize`, `getDataURL`, …).
+
+### Public exports
+
+| Export                | Kind       | Description                                                                         |
+| --------------------- | ---------- | ----------------------------------------------------------------------------------- |
+| `KdsECharts`          | component  | ECharts chart with the KDS theme applied and light/dark mode handled                |
+| `useKdsEChartsColors` | composable | Reactive semantic chart colors for explicit per-series coloring                     |
+| `light` / `dark`      | const      | The KDS ECharts theme objects (also available from `@knime/kds-echarts/theme`)      |
+| `chartColors`         | const      | The semantic chart colors per mode (also available from `@knime/kds-echarts/theme`) |
+| `KdsEChartsProps`     | type       | Props of `KdsECharts`                                                               |
+| `KdsEChartsTheme`     | type       | Shape of a KDS ECharts theme object                                                 |
+| `KdsChartColors`      | type       | Shape of the semantic chart colors for one mode                                     |
+
+### Explicit per-series coloring
+
+The theme's base palette covers series 1–9 in order. For colors it doesn't reach — status hues, label inks drawn on a segment fill, chart controls — use `useKdsEChartsColors()`, which resolves against the effective dark mode and flips automatically when the mode changes:
+
+```vue
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { KdsECharts, useKdsEChartsColors } from "@knime/kds-echarts";
+
+const colors = useKdsEChartsColors();
+const option = computed(() => ({
+  xAxis: { type: "category", data: ["Jan", "Feb", "Mar"] },
+  yAxis: { type: "value" },
+  series: [
+    {
+      type: "bar",
+      data: [120, 200, 150],
+      itemStyle: { color: colors.value.series[1] },
+    },
+    {
+      type: "line",
+      data: [90, 90, 90],
+      lineStyle: { color: colors.value.status.negative },
+    },
+  ],
+}));
+</script>
+```
+
+## Using the KDS ECharts theme without Vue
+
+[Apache ECharts] renders to `<canvas>`/SVG and cannot resolve CSS custom properties or `light-dark()`, so it needs concrete, per-mode values. The `@knime/kds-echarts/theme` entry point ships those theme objects with the KDS chart tokens already resolved, and imports **neither Vue nor vue-echarts**:
+
+```ts
+import { BarChart } from "echarts/charts";
+import { GridComponent, TooltipComponent } from "echarts/components";
+import { init, use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+
+import { dark, fontFaces, light } from "@knime/kds-echarts/theme";
+
+use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);
+
+// Canvas keeps whatever glyphs it drew with, so wait for the fonts first.
+await Promise.all(fontFaces.map((face) => document.fonts.load(face)));
+
+const chart = init(el, dark); // initialise with a theme object
+chart.setTheme(light); // swap themes at runtime (e.g. on dark-mode change)
+```
+
+| Export        | Description                                                                                                                                        |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `light`       | Light-mode ECharts theme (palette, axes, tooltip, text, …) for `registerTheme` or vue-echarts' `theme` prop.                                       |
+| `dark`        | Dark-mode ECharts theme, same shape as `light`.                                                                                                    |
+| `chartColors` | Semantic colors the base theme palette doesn't reach (series 1–9, status hues, on-fill inks, controls) per mode, for explicit per-series coloring. |
+| `fontFaces`   | Every font face the themes draw with, as `document.fonts.load()` arguments.                                                                        |
+
+A non-Vue app can skip installing Vue-related dependencies entirely with pnpm overrides:
+
+```jsonc
+// package.json (consumer)
+{
+  "pnpm": {
+    "overrides": {
+      "vue": "-",
+      "vue-echarts": "-",
+      "@knime/kds-components": "-",
+    },
+  },
+}
+```
+
+### Using with Vitest, Nuxt, or Vite SSR
+
+The published JavaScript imports its CSS as a side effect (e.g.
+`import "./index.css"`), which bundlers handle automatically. When the package
+is instead evaluated by Node's native ESM loader — as **Vitest** and
+**Vite/Nuxt SSR** do by default, since they externalize `node_modules` — Node
+has no `.css` loader and throws `Unknown file extension ".css"`. Configure the
+consuming project once so `@knime/*` packages are processed instead of
+externalized:
+
+```ts
+// Vitest — vitest.config.ts
+export default defineConfig({
+  test: { server: { deps: { inline: [/@knime\//] } } },
+});
+```
+
+```ts
+// Vite SSR — vite.config.ts
+export default defineConfig({ ssr: { noExternal: [/@knime\//] } });
+```
+
+```ts
+// Nuxt — nuxt.config.ts
+export default defineNuxtConfig({ build: { transpile: [/@knime\//] } });
+```
+
+[Apache ECharts]: https://echarts.apache.org/
+[Vue]: https://vuejs.org/
+[@knime/kds-echarts]: https://www.npmjs.com/package/@knime/kds-echarts

package/dist/index.css

@@ -0,0 +1,4 @@
+
+.kds-echarts[data-v-7601cf05] {
+  width: 100%;
+}

package/dist/index.js

@@ -0,0 +1,80 @@
+import { i as light, n as dark, r as fontFaces, t as chartColors } from "./theme-CrV5MB97.js";
+import { computed, createBlock, createCommentVNode, createPropsRestProxy, defineComponent, mergeProps, onMounted, openBlock, ref, unref, useTemplateRef } from "vue";
+import VChart from "vue-echarts";
+import { useKdsDarkMode } from "@knime/kds-components";
+import './index.css';//#region src/KdsECharts.vue?vue&type=script&setup=true&lang.ts
+var KdsECharts_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "KdsECharts",
+	props: {
+		option: {},
+		autoresize: { default: true },
+		initOptions: {},
+		updateOptions: {},
+		loading: {},
+		loadingOptions: {},
+		group: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const rest = createPropsRestProxy(__props, ["option", "autoresize"]);
+		const { isDark } = useKdsDarkMode();
+		const theme = computed(() => isDark.value ? dark : light);
+		const vchart = useTemplateRef("vchart");
+		const chart = computed(() => vchart.value?.chart);
+		const fontsReady = ref(!globalThis.document?.fonts);
+		onMounted(async () => {
+			try {
+				await Promise.all(fontFaces.map((face) => document.fonts.load(face)));
+			} catch {}
+			fontsReady.value = true;
+		});
+		__expose({ 
+		/**
+		* The underlying ECharts instance for imperative use (`dispatchAction`,
+		* `resize`, `getDataURL`, …), or `undefined` before the chart is mounted.
+		*/
+chart });
+		return (_ctx, _cache) => {
+			return fontsReady.value ? (openBlock(), createBlock(unref(VChart), mergeProps({
+				key: 0,
+				ref_key: "vchart",
+				ref: vchart,
+				class: "kds-echarts",
+				option: __props.option,
+				theme: theme.value,
+				autoresize: __props.autoresize
+			}, rest), null, 16, [
+				"option",
+				"theme",
+				"autoresize"
+			])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+//#region src/KdsECharts.vue
+var KdsECharts_default = /*#__PURE__*/ _plugin_vue_export_helper_default(KdsECharts_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-7601cf05"]]);
+//#endregion
+//#region src/useKdsEChartsColors.ts
+/**
+* Reactive KDS chart colors resolved for the effective dark mode. Use it to
+* color individual series, markers or custom shapes that the theme's base
+* palette does not reach — e.g. `colors.value.series[1]` for the blue series,
+* `colors.value.status.negative` for an over-cap line. The value flips
+* automatically when the dark mode changes, so a consumer never needs a
+* `MutationObserver` on `data-theme` or a `resolveColor()` probe.
+*/
+var useKdsEChartsColors = () => {
+	const { isDark } = useKdsDarkMode();
+	return computed(() => isDark.value ? chartColors.dark : chartColors.light);
+};
+//#endregion
+export { KdsECharts_default as KdsECharts, chartColors, dark, light, useKdsEChartsColors };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/KdsECharts.vue","../src/KdsECharts.vue","../src/useKdsEChartsColors.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, ref, useTemplateRef } from \"vue\";\nimport VChart from \"vue-echarts\";\n\nimport { useKdsDarkMode } from \"@knime/kds-components\";\n\nimport { dark, fontFaces, light } from \"./theme\";\nimport type { KdsEChartsProps } from \"./types\";\n\nconst { option, autoresize = true, ...rest } = defineProps<KdsEChartsProps>();\n\nconst { isDark } = useKdsDarkMode();\n// vue-echarts calls echarts' setTheme() when `theme` changes, so flipping this\n// re-themes the whole chart (palette / axes / tooltip / text).\nconst theme = computed(() => (isDark.value ? dark : light));\n\nconst vchart = useTemplateRef(\"vchart\");\n// vue-echarts exposes the live ECharts instance as `chart`; surface it directly\n// so consumers get the raw instance rather than the wrapper component.\nconst chart = computed(() => vchart.value?.chart);\n\n/* Canvas keeps whatever glyphs it drew with, so hold the first paint until the\n   fonts are there. `fonts.ready` is no use — it resolves while the faces are\n   still undiscovered. */\nconst fontsReady = ref(!globalThis.document?.fonts);\nonMounted(async () => {\n  try {\n    await Promise.all(fontFaces.map((face) => document.fonts.load(face)));\n  } catch {\n    // A face that fails to load must never keep the chart from rendering.\n  }\n  fontsReady.value = true;\n});\n\ndefineExpose({\n  /**\n   * The underlying ECharts instance for imperative use (`dispatchAction`,\n   * `resize`, `getDataURL`, …), or `undefined` before the chart is mounted.\n   */\n  chart,\n});\n</script>\n\n<template>\n  <VChart\n    v-if=\"fontsReady\"\n    ref=\"vchart\"\n    class=\"kds-echarts\"\n    :option=\"option\"\n    :theme=\"theme\"\n    :autoresize=\"autoresize\"\n    v-bind=\"rest\"\n  />\n</template>\n\n<style scoped>\n.kds-echarts {\n  width: 100%;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, onMounted, ref, useTemplateRef } from \"vue\";\nimport VChart from \"vue-echarts\";\n\nimport { useKdsDarkMode } from \"@knime/kds-components\";\n\nimport { dark, fontFaces, light } from \"./theme\";\nimport type { KdsEChartsProps } from \"./types\";\n\nconst { option, autoresize = true, ...rest } = defineProps<KdsEChartsProps>();\n\nconst { isDark } = useKdsDarkMode();\n// vue-echarts calls echarts' setTheme() when `theme` changes, so flipping this\n// re-themes the whole chart (palette / axes / tooltip / text).\nconst theme = computed(() => (isDark.value ? dark : light));\n\nconst vchart = useTemplateRef(\"vchart\");\n// vue-echarts exposes the live ECharts instance as `chart`; surface it directly\n// so consumers get the raw instance rather than the wrapper component.\nconst chart = computed(() => vchart.value?.chart);\n\n/* Canvas keeps whatever glyphs it drew with, so hold the first paint until the\n   fonts are there. `fonts.ready` is no use — it resolves while the faces are\n   still undiscovered. */\nconst fontsReady = ref(!globalThis.document?.fonts);\nonMounted(async () => {\n  try {\n    await Promise.all(fontFaces.map((face) => document.fonts.load(face)));\n  } catch {\n    // A face that fails to load must never keep the chart from rendering.\n  }\n  fontsReady.value = true;\n});\n\ndefineExpose({\n  /**\n   * The underlying ECharts instance for imperative use (`dispatchAction`,\n   * `resize`, `getDataURL`, …), or `undefined` before the chart is mounted.\n   */\n  chart,\n});\n</script>\n\n<template>\n  <VChart\n    v-if=\"fontsReady\"\n    ref=\"vchart\"\n    class=\"kds-echarts\"\n    :option=\"option\"\n    :theme=\"theme\"\n    :autoresize=\"autoresize\"\n    v-bind=\"rest\"\n  />\n</template>\n\n<style scoped>\n.kds-echarts {\n  width: 100%;\n}\n</style>\n","import { computed } from \"vue\";\n\nimport { useKdsDarkMode } from \"@knime/kds-components\";\n\nimport { chartColors } from \"./theme\";\n\n/**\n * Reactive KDS chart colors resolved for the effective dark mode. Use it to\n * color individual series, markers or custom shapes that the theme's base\n * palette does not reach — e.g. `colors.value.series[1]` for the blue series,\n * `colors.value.status.negative` for an over-cap line. The value flips\n * automatically when the dark mode changes, so a consumer never needs a\n * `MutationObserver` on `data-theme` or a `resolveColor()` probe.\n */\nexport const useKdsEChartsColors = () => {\n  const { isDark } = useKdsDarkMode();\n  return computed(() => (isDark.value ? chartColors.dark : chartColors.light));\n};\n"],"mappings":";;;;;;;;;;;;;;;;;EASA,MAAM,OAAyC,qBAAA,SAAA,CAAA,UAAA,YAAA,CAAA;EAE/C,MAAM,EAAE,WAAW,eAAe;EAGlC,MAAM,QAAQ,eAAgB,OAAO,QAAQ,OAAO,KAAM;EAE1D,MAAM,SAAS,eAAe,QAAQ;EAGtC,MAAM,QAAQ,eAAe,OAAO,OAAO,KAAK;EAKhD,MAAM,aAAa,IAAI,CAAC,WAAW,UAAU,KAAK;EAClD,UAAU,YAAY;GACpB,IAAI;IACF,MAAM,QAAQ,IAAI,UAAU,KAAK,SAAS,SAAS,MAAM,KAAK,IAAI,CAAC,CAAC;GACtE,QAAQ,CAER;GACA,WAAW,QAAQ;EACrB,CAAC;EAED,SAAa;;;;;AAKX,MACF,CAAC;;UAKS,WAAA,SAAA,UAAA,GADR,YAQE,MAAA,MAAA,GARF,WAQE;;aANI;IAAJ,KAAI;IACJ,OAAM;IACL,QAAQ,QAAA;IACR,OAAO,MAAA;IACP,YAAY,QAAA;MACL,IAAI,GAAA,MAAA,IAAA;IAAA;IAAA;IAAA;GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;AErChB,IAAa,4BAA4B;CACvC,MAAM,EAAE,WAAW,eAAe;CAClC,OAAO,eAAgB,OAAO,QAAQ,YAAY,OAAO,YAAY,KAAM;AAC7E"}

package/dist/src/KdsECharts.vue.d.ts

@@ -0,0 +1,11 @@
+import { KdsEChartsProps } from './types';
+declare const __VLS_export: import('vue').DefineComponent<KdsEChartsProps, {
+    /**
+     * The underlying ECharts instance for imperative use (`dispatchAction`,
+     * `resize`, `getDataURL`, …), or `undefined` before the chart is mounted.
+     */
+    chart: import('vue').ComputedRef<import('echarts').ECharts | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<KdsEChartsProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=KdsECharts.vue.d.ts.map

package/dist/src/KdsECharts.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KdsECharts.vue.d.ts","sourceRoot":"","sources":["../../src/KdsECharts.vue"],"names":[],"mappings":"AAqEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA4F/C,QAAA,MAAM,YAAY;IA9DhB;;;OAGG;;wPA8DH,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/src/index.d.ts

@@ -0,0 +1,6 @@
+export { default as KdsECharts } from './KdsECharts.vue';
+export { useKdsEChartsColors } from './useKdsEChartsColors';
+export { chartColors, dark, light } from './theme';
+export type * from './types';
+export type * from './theme';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEnD,mBAAmB,SAAS,CAAC;AAC7B,mBAAmB,SAAS,CAAC"}

package/dist/src/theme/generated.d.ts

@@ -0,0 +1,16 @@
+import { KdsChartColors, KdsEChartsTheme } from './types';
+/** KDS ECharts theme for light mode. */
+export declare const light: KdsEChartsTheme;
+/** KDS ECharts theme for dark mode. */
+export declare const dark: KdsEChartsTheme;
+/** Semantic chart colors resolved per mode, for explicit per-series coloring. */
+export declare const chartColors: {
+    light: KdsChartColors;
+    dark: KdsChartColors;
+};
+/**
+ * Every font face the themes draw with, as `document.fonts.load()` arguments.
+ * Await them before the first paint: canvas keeps whatever glyphs it drew with.
+ */
+export declare const fontFaces: readonly string[];
+//# sourceMappingURL=generated.d.ts.map

package/dist/src/theme/generated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generated.d.ts","sourceRoot":"","sources":["../../../src/theme/generated.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/D,wCAAwC;AACxC,eAAO,MAAM,KAAK,EAAE,eA6MnB,CAAC;AAEF,uCAAuC;AACvC,eAAO,MAAM,IAAI,EAAE,eA6MlB,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,WAAW,EAAE;IAAE,KAAK,EAAE,cAAc,CAAC;IAAC,IAAI,EAAE,cAAc,CAAA;CA2DtE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,SAAS,MAAM,EAKtC,CAAC"}

package/dist/src/theme/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Framework-agnostic entry point (`@knime/kds-echarts/theme`): the generated KDS
+ * ECharts themes with no Vue or vue-echarts import, for consumers that drive
+ * ECharts directly.
+ */
+export { chartColors, dark, fontFaces, light } from './generated';
+export type * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAClE,mBAAmB,SAAS,CAAC"}

package/dist/src/theme/types.d.ts

@@ -0,0 +1,34 @@
+/**
+ * A KDS ECharts theme: concrete, resolved color/dimension/font values ready to
+ * hand to ECharts' `registerTheme` or vue-echarts' `theme` prop. Typed loosely
+ * (as ECharts itself types themes) since a theme is a partial merge template.
+ */
+export type KdsEChartsTheme = Record<string, unknown>;
+/**
+ * Semantic chart colors resolved for a single mode — the categorical series
+ * palette plus the colors the base palette does not reach.
+ */
+export type KdsChartColors = {
+    /** Categorical series palette (series 1–9), matching the theme's `color`. */
+    readonly series: string[];
+    /** Directional / limit status hues for markers, lines and labels on data. */
+    readonly status: {
+        readonly positive: string;
+        readonly negative: string;
+        readonly warning: string;
+        readonly error: string;
+    };
+    /** Label inks for text drawn on a segment fill; pick by contrast per fill. */
+    readonly onFill: {
+        readonly dark: string;
+        readonly light: string;
+    };
+    /** Chart control colors (toolbox, dataZoom handle, legend pager). */
+    readonly control: {
+        readonly default: string;
+        readonly hover: string;
+        readonly selected: string;
+        readonly disabled: string;
+    };
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/src/theme/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/theme/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEtD;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,6EAA6E;IAC7E,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;IAC1B,6EAA6E;IAC7E,QAAQ,CAAC,MAAM,EAAE;QACf,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;QAC1B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;QAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;QACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,8EAA8E;IAC9E,QAAQ,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,qEAAqE;IACrE,QAAQ,CAAC,OAAO,EAAE;QAChB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;QACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QACvB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;QAC1B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;KAC3B,CAAC;CACH,CAAC"}

package/dist/src/types.d.ts

@@ -0,0 +1,35 @@
+import { EChartsOption } from 'echarts';
+/**
+ * vue-echarts does not re-export its prop value types (AutoResize, InitOptions,
+ * …), so we source them from the component's resolved props. The `typeof
+ * import(...)` type query keeps this in sync with the wrapped component without
+ * a runtime import and without re-declaring echarts' option shapes.
+ */
+type VChartProps = InstanceType<(typeof import("vue-echarts"))["default"]>["$props"];
+export type KdsEChartsProps = {
+    /**
+     * The ECharts option describing the chart (series, axes, tooltip, …). Colors,
+     * fonts and light/dark theming are applied automatically from KDS tokens, so
+     * an option should generally omit them and let the theme drive styling; set a
+     * color explicitly (e.g. from `useKdsEChartsColors`) only for deliberate
+     * per-series choices.
+     */
+    option: EChartsOption;
+    /**
+     * Whether the chart resizes with its container. `true` (the default) covers
+     * the common responsive case; pass an object to throttle or hook resizes.
+     */
+    autoresize?: VChartProps["autoresize"];
+    /** Options forwarded to `echarts.init` (renderer, devicePixelRatio, locale, …). */
+    initOptions?: VChartProps["initOptions"];
+    /** Options forwarded to every `setOption` update (e.g. `notMerge`, `replaceMerge`). */
+    updateOptions?: VChartProps["updateOptions"];
+    /** Whether to overlay ECharts' loading animation. */
+    loading?: VChartProps["loading"];
+    /** Styling for the loading animation (text, colors, spinner). */
+    loadingOptions?: VChartProps["loadingOptions"];
+    /** Connects charts sharing the same group id for coordinated interactions. */
+    group?: VChartProps["group"];
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;;GAKG;AACH,KAAK,WAAW,GAAG,YAAY,CAC7B,CAAC,cAAc,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAC1C,CAAC,QAAQ,CAAC,CAAC;AAEZ,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;;OAMG;IACH,MAAM,EAAE,aAAa,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;IACvC,mFAAmF;IACnF,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IACzC,uFAAuF;IACvF,aAAa,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAC7C,qDAAqD;IACrD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,iEAAiE;IACjE,cAAc,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;IAC/C,8EAA8E;IAC9E,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC9B,CAAC"}

package/dist/src/useKdsEChartsColors.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Reactive KDS chart colors resolved for the effective dark mode. Use it to
+ * color individual series, markers or custom shapes that the theme's base
+ * palette does not reach — e.g. `colors.value.series[1]` for the blue series,
+ * `colors.value.status.negative` for an over-cap line. The value flips
+ * automatically when the dark mode changes, so a consumer never needs a
+ * `MutationObserver` on `data-theme` or a `resolveColor()` probe.
+ */
+export declare const useKdsEChartsColors: () => import('vue').ComputedRef<import('./theme').KdsChartColors>;
+//# sourceMappingURL=useKdsEChartsColors.d.ts.map

package/dist/src/useKdsEChartsColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKdsEChartsColors.d.ts","sourceRoot":"","sources":["../../src/useKdsEChartsColors.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,mEAG/B,CAAC"}