@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/components/chart/ChartArea.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,28 @@
+import { useChartPart } from "./ChartRoot.vue_vue_type_script_setup_true_lang.js";
+import { defineComponent } from "vue";
+//#region src/components/chart/ChartArea.vue?vue&type=script&setup=true&lang.ts
+var ChartArea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "ChartArea",
+	__name: "ChartArea",
+	props: {
+		yKey: {},
+		label: {},
+		color: {},
+		scale: { default: "y" },
+		format: {},
+		curve: { default: "smooth" },
+		points: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		useChartPart("series", () => ({
+			kind: "area",
+			...props
+		}));
+		return (_ctx, _cache) => {
+			return null;
+		};
+	}
+});
+//#endregion
+export { ChartArea_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/chart/ChartAxis.js

@@ -0,0 +1,5 @@
+import ChartAxis_vue_vue_type_script_setup_true_lang_default from "./ChartAxis.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/chart/ChartAxis.vue
+var ChartAxis_default = ChartAxis_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ChartAxis_default as default };

package/dist/components/chart/ChartAxis.vue.d.ts

@@ -0,0 +1,18 @@
+import { type ChartSide } from './ChartRoot.vue';
+type __VLS_Props = {
+    /** `x` labels the rows from `x-key`, `y` the values, whichever way the chart lies. */
+    type: 'x' | 'y';
+    /** The value scale a `y` axis shows, as its series name it. @default 'y' */
+    scale?: string;
+    /** Which edge it sits on. A second value axis defaults to the far one. */
+    side?: ChartSide;
+    /** Formats its labels, and the tooltip's values or heading. */
+    format?: (value: any) => string;
+    /** How many ticks it aims for. An `x` axis labels every row it has room for. */
+    numTicks?: number;
+    /** Cut long row labels rather than dropping the ones that would collide. */
+    trimLabels?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/chart/ChartAxis.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,24 @@
+import { useChartPart } from "./ChartRoot.vue_vue_type_script_setup_true_lang.js";
+import { defineComponent } from "vue";
+//#region src/components/chart/ChartAxis.vue?vue&type=script&setup=true&lang.ts
+var ChartAxis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "ChartAxis",
+	__name: "ChartAxis",
+	props: {
+		type: {},
+		scale: {},
+		side: {},
+		format: { type: Function },
+		numTicks: {},
+		trimLabels: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		useChartPart("axis", () => ({ ...props }));
+		return (_ctx, _cache) => {
+			return null;
+		};
+	}
+});
+//#endregion
+export { ChartAxis_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/chart/ChartBar.js

@@ -0,0 +1,5 @@
+import ChartBar_vue_vue_type_script_setup_true_lang_default from "./ChartBar.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/chart/ChartBar.vue
+var ChartBar_default = ChartBar_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ChartBar_default as default };

package/dist/components/chart/ChartBar.vue.d.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    /** The key plotted, read off each row. */
+    yKey: string;
+    /** Its name in the legend, the tooltip and the chart's accessible name. Defaults to `y-key`. */
+    label?: string;
+    /** Defaults to `var(--chart-color-N)`, `N` its place among the chart's series. */
+    color?: string;
+    /** The value scale it reads against. Every bar uses the first bar's. @default 'y' */
+    scale?: string;
+    /** Formats its value in the tooltip. Defaults to its scale's axis. */
+    format?: (value: any) => string;
+    /** Fade the bar towards its foot. */
+    gradient?: boolean;
+    /** The radius of the bar's end, in pixels. Every bar uses the first bar's. @default 2 */
+    roundedCorners?: number;
+    /** Gap between rows, as a fraction of the row. Every bar uses the first bar's. @default 0.1 */
+    padding?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    padding: number;
+    scale: string;
+    roundedCorners: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/chart/ChartBar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,29 @@
+import { useChartPart } from "./ChartRoot.vue_vue_type_script_setup_true_lang.js";
+import { defineComponent } from "vue";
+//#region src/components/chart/ChartBar.vue?vue&type=script&setup=true&lang.ts
+var ChartBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "ChartBar",
+	__name: "ChartBar",
+	props: {
+		yKey: {},
+		label: {},
+		color: {},
+		scale: { default: "y" },
+		format: {},
+		gradient: { type: Boolean },
+		roundedCorners: { default: 2 },
+		padding: { default: .1 }
+	},
+	setup(__props) {
+		const props = __props;
+		useChartPart("series", () => ({
+			kind: "bar",
+			...props
+		}));
+		return (_ctx, _cache) => {
+			return null;
+		};
+	}
+});
+//#endregion
+export { ChartBar_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/chart/ChartCrosshair.js

@@ -0,0 +1,5 @@
+import ChartCrosshair_vue_vue_type_script_setup_true_lang_default from "./ChartCrosshair.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/chart/ChartCrosshair.vue
+var ChartCrosshair_default = ChartCrosshair_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ChartCrosshair_default as default };

package/dist/components/chart/ChartCrosshair.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/chart/ChartCrosshair.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,15 @@
+import { useChartPart } from "./ChartRoot.vue_vue_type_script_setup_true_lang.js";
+import { defineComponent } from "vue";
+//#region src/components/chart/ChartCrosshair.vue?vue&type=script&setup=true&lang.ts
+var ChartCrosshair_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "ChartCrosshair",
+	__name: "ChartCrosshair",
+	setup(__props) {
+		useChartPart("crosshair", () => ({}));
+		return (_ctx, _cache) => {
+			return null;
+		};
+	}
+});
+//#endregion
+export { ChartCrosshair_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/chart/ChartDonut.js

@@ -0,0 +1,5 @@
+import ChartDonut_vue_vue_type_script_setup_true_lang_default from "./ChartDonut.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/chart/ChartDonut.vue
+var ChartDonut_default = ChartDonut_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ChartDonut_default as default };

package/dist/components/chart/ChartDonut.vue.d.ts

@@ -0,0 +1,66 @@
+import { type HTMLAttributes } from 'vue';
+declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        /** The rows, one slice each. */
+        data: T[];
+        /** The key naming each slice. */
+        categoryKey: keyof T & string;
+        /** The key holding each slice's size. */
+        valueKey: keyof T & string;
+        /** Formats a slice's size, in the middle and in the tooltip. */
+        valueFormat?: (value: number) => string;
+        /** Renames a slice for the reader. */
+        labelFormat?: (category: string) => string;
+        /** One per slice. Defaults to `var(--chart-color-N)`. */
+        colors?: string[];
+        /** Slices not drawn. `v-model:hidden` pairs it with a `ChartLegend`. */
+        hidden?: string[];
+        /** A number means pixels. @default '20rem' */
+        height?: number | string;
+        /** Gap between slices, in radians. @default 0.04 */
+        padAngle?: number;
+        /** The radius of each slice's corners, in pixels. @default 6 */
+        cornerRadius?: number;
+        /** How thick the ring is. `0` fills it in, making a pie. @default 12 */
+        arcWidth?: number;
+        /** Defaults to the total of what is showing. Empty string for nothing. */
+        centralLabel?: string;
+        /** The line under the central label. @default 'Total' */
+        centralSubLabel?: string;
+        /** Shows the slice under the pointer. @default true */
+        tooltip?: boolean;
+        /** A class for the tooltip's box. */
+        tooltipClass?: HTMLAttributes["class"];
+        /** The chart's accessible name. Defaults to its slices. */
+        label?: string;
+    } & {
+        "onUpdate:hidden"?: ((hidden: string[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        /** Content inside the chart, such as a `ChartLegend`. */
+        default(): unknown;
+        /** Replaces the tooltip's content. */
+        tooltip(props: {
+            /** The slice under the pointer: its `category`, `value` and `color`. */
+            slice: {
+                category: string;
+                value: number;
+                color: string;
+            };
+        }): unknown;
+    };
+    emit: (evt: "update:hidden", hidden: string[]) => void;
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/chart/ChartDonut.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,156 @@
+import { useChartSeries } from "./use-chart-series.js";
+import { chartName } from "./chart-scales.js";
+import ChartFrame_default from "./ChartFrame.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, defineComponent, guardReactiveProps, mergeProps, normalizeProps, normalizeStyle, openBlock, renderSlot, toDisplayString, withCtx } from "vue";
+import { formatNumber } from "@vunset/utils";
+import { defineChart } from "@tanstack/charts";
+import { tooltip } from "@tanstack/charts/tooltip";
+import { scaleOrdinal } from "@tanstack/charts/scales/ordinal";
+import { pie, polar, radialArc } from "@tanstack/charts/polar";
+//#region src/components/chart/ChartDonut.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { "data-part": "tooltip-rows" };
+var _hoisted_2 = { "data-part": "tooltip-row" };
+var _hoisted_3 = { "data-part": "tooltip-label" };
+var _hoisted_4 = { "data-part": "tooltip-value" };
+var _hoisted_5 = {
+	key: 0,
+	"data-part": "chart-center-label"
+};
+var _hoisted_6 = {
+	key: 1,
+	"data-part": "chart-center-sub-label"
+};
+var ChartDonut_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "ChartDonut",
+	inheritAttrs: false,
+	__name: "ChartDonut",
+	props: {
+		data: {},
+		categoryKey: {},
+		valueKey: {},
+		valueFormat: {},
+		labelFormat: {},
+		colors: {},
+		hidden: {},
+		height: { default: "20rem" },
+		padAngle: { default: .04 },
+		cornerRadius: { default: 6 },
+		arcWidth: { default: 12 },
+		centralLabel: { default: void 0 },
+		centralSubLabel: { default: void 0 },
+		tooltip: {
+			type: Boolean,
+			default: void 0
+		},
+		tooltipClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		label: {}
+	},
+	emits: ["update:hidden"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slices = computed(() => props.data.map((row) => ({
+			category: String(row[props.categoryKey]),
+			value: Number(row[props.valueKey]) || 0
+		})));
+		const { visible } = useChartSeries({
+			categories: () => slices.value.map((slice) => slice.category),
+			colors: () => props.colors,
+			hidden: () => props.hidden,
+			onHiddenChange: (next) => emit("update:hidden", next)
+		});
+		const shown = computed(() => visible.value.map((series) => ({
+			category: series.category,
+			color: series.color,
+			size: slices.value.find((slice) => slice.category === series.category)?.value ?? 0
+		})));
+		const showTooltip = computed(() => props.tooltip ?? true);
+		const total = computed(() => shown.value.reduce((sum, slice) => sum + slice.size, 0));
+		const format = (value) => props.valueFormat ? props.valueFormat(value) : formatNumber(value);
+		const label = (category) => props.labelFormat ? props.labelFormat(category) : category;
+		const sliceOf = (point) => ({
+			category: point.datum.category,
+			value: point.datum.size,
+			color: point.datum.color
+		});
+		const definition = computed(() => {
+			const width = props.arcWidth;
+			const cornerRadius = props.cornerRadius;
+			return defineChart({
+				marks: [polar({
+					marks: [radialArc(pie(shown.value, {
+						value: "size",
+						gapAngle: props.padAngle
+					}), {
+						color: "category",
+						key: "category",
+						innerRadius: ({ radius }) => width > 0 ? Math.max(radius - width, 0) : 0,
+						cornerRadius
+					})],
+					scales: {
+						angle: null,
+						radius: null
+					}
+				})],
+				scales: {
+					x: null,
+					y: null
+				},
+				color: { scale: scaleOrdinal().domain(shown.value.map((slice) => slice.category)).range(shown.value.map((slice) => slice.color)) },
+				tooltip: showTooltip.value && {
+					use: tooltip,
+					content: (points) => {
+						const slice = points[0] && sliceOf(points[0]);
+						return { rows: slice ? [{
+							label: label(slice.category),
+							value: format(slice.value),
+							color: slice.color
+						}] : [] };
+					}
+				}
+			});
+		});
+		const centralLabel = computed(() => props.centralLabel ?? format(total.value));
+		const centralSubLabel = computed(() => props.centralSubLabel ?? "Total");
+		const ariaLabel = computed(() => props.label ?? chartName(shown.value.map((slice) => slice.category), props.labelFormat, "Donut chart"));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ChartFrame_default, mergeProps({
+				kind: "donut",
+				definition: () => definition.value,
+				label: () => ariaLabel.value,
+				height: props.height,
+				tooltip: () => showTooltip.value,
+				"tooltip-attrs": () => ({ class: props.tooltipClass })
+			}, _ctx.$attrs), createSlots({
+				tooltip: withCtx(({ point }) => [renderSlot(_ctx.$slots, "tooltip", normalizeProps(guardReactiveProps({ slice: sliceOf(point) })), () => [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [
+					createElementVNode("span", {
+						"data-part": "tooltip-swatch",
+						style: normalizeStyle({ background: sliceOf(point).color })
+					}, null, 4),
+					createElementVNode("span", _hoisted_3, toDisplayString(label(sliceOf(point).category)), 1),
+					createElementVNode("span", _hoisted_4, toDisplayString(format(sliceOf(point).value)), 1)
+				])])])]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 2
+			}, [centralLabel.value || centralSubLabel.value ? {
+				name: "center",
+				fn: withCtx(() => [centralLabel.value ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(centralLabel.value), 1)) : createCommentVNode("", true), centralSubLabel.value ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(centralSubLabel.value), 1)) : createCommentVNode("", true)]),
+				key: "0"
+			} : void 0]), 1040, [
+				"definition",
+				"label",
+				"height",
+				"tooltip",
+				"tooltip-attrs"
+			]);
+		};
+	}
+});
+//#endregion
+export { ChartDonut_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/chart/ChartFrame.js

@@ -0,0 +1,5 @@
+import ChartFrame_vue_vue_type_script_setup_true_lang_default from "./ChartFrame.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/chart/ChartFrame.vue
+var ChartFrame_default = ChartFrame_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ChartFrame_default as default };

package/dist/components/chart/ChartFrame.vue.d.ts

@@ -0,0 +1,66 @@
+import { type ChartDefinition, type ChartPoint } from '@tanstack/charts/vue';
+/** What a chart sees after each draw: the scene's size, and where the plot sits in it. */
+export interface ChartRender {
+    scene: {
+        width: number;
+        height: number;
+        chart: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+    };
+    svg: SVGSVGElement;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Which chart this is, for `data-chart`. */
+    kind?: string;
+    definition: () => ChartDefinition<any, any, any>;
+    /** The accessible name. */
+    label: () => string;
+    /** A number means pixels. */
+    height: number | string;
+    tooltip: () => boolean;
+    /** Attributes for the tooltip's box. */
+    tooltipAttrs?: () => Record<string, unknown>;
+} & {
+    /** `--chart-tick-font-size` in px, for the chart's definition. */
+    tickSize?: number;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:tickSize": (value: number | undefined) => any;
+    render: (context: ChartRender) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** Which chart this is, for `data-chart`. */
+    kind?: string;
+    definition: () => ChartDefinition<any, any, any>;
+    /** The accessible name. */
+    label: () => string;
+    /** A number means pixels. */
+    height: number | string;
+    tooltip: () => boolean;
+    /** Attributes for the tooltip's box. */
+    tooltipAttrs?: () => Record<string, unknown>;
+} & {
+    /** `--chart-tick-font-size` in px, for the chart's definition. */
+    tickSize?: number;
+}> & Readonly<{
+    "onUpdate:tickSize"?: ((value: number | undefined) => any) | undefined;
+    onRender?: ((context: ChartRender) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    /** Content before the drawing, such as a `ChartLegend`. */
+    default(): unknown;
+    /** The tooltip's content, for the point in focus. */
+    tooltip(props: {
+        point: ChartPoint<any>;
+    }): unknown;
+    /** Content laid over the plot, centered on it. */
+    center?(): unknown;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/chart/ChartFrame.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,96 @@
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, mergeModels, mergeProps, normalizeStyle, onMounted, openBlock, renderSlot, shallowRef, unref, useModel, useSlots, useTemplateRef } from "vue";
+import { Chart } from "@tanstack/charts/vue";
+//#region src/components/chart/ChartFrame.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-chart"];
+var _hoisted_2 = {
+	"data-part": "chart-plot",
+	style: { position: "relative" }
+};
+var ChartFrame_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "ChartFrame",
+	__name: "ChartFrame",
+	props: /*@__PURE__*/ mergeModels({
+		kind: {},
+		definition: { type: Function },
+		label: { type: Function },
+		height: {},
+		tooltip: { type: Function },
+		tooltipAttrs: { type: Function }
+	}, {
+		"tickSize": {},
+		"tickSizeModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["render"], ["update:tickSize"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		/** `--chart-tick-font-size` in px, for the chart's definition. */
+		const tickSize = useModel(__props, "tickSize");
+		const probe = useTemplateRef("probe");
+		function readTickSize() {
+			const size = probe.value ? parseFloat(getComputedStyle(probe.value).fontSize) : NaN;
+			const next = size > 0 ? size : void 0;
+			if (next !== tickSize.value) tickSize.value = next;
+		}
+		onMounted(readTickSize);
+		const plot = shallowRef();
+		function onRender(context) {
+			readTickSize();
+			if (slots.center) {
+				const { width, height, chart } = context.scene;
+				plot.value = {
+					top: `${chart.y}px`,
+					left: `${chart.x}px`,
+					right: `${width - chart.x - chart.width}px`,
+					bottom: `${height - chart.y - chart.height}px`
+				};
+			}
+			emit("render", context);
+		}
+		const height = computed(() => typeof props.height === "number" ? `${props.height}px` : props.height);
+		const tooltipBody = ({ primaryPoint }) => primaryPoint ? h("div", mergeProps({ "data-part": "chart-tooltip" }, props.tooltipAttrs?.() ?? {}), [h("div", { "data-part": "tooltip" }, slots.tooltip({ point: primaryPoint }))]) : null;
+		const Drawing = defineComponent({
+			name: "ChartDrawing",
+			setup: () => () => h(Chart, {
+				definition: props.definition(),
+				ariaLabel: props.label(),
+				style: { height: height.value },
+				onRender
+			}, props.tooltip() ? { tooltipBody } : {})
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-part": "chart",
+				"data-chart": props.kind
+			}, [renderSlot(_ctx.$slots, "default"), createElementVNode("div", _hoisted_2, [
+				createElementVNode("span", {
+					ref_key: "probe",
+					ref: probe,
+					"aria-hidden": "true",
+					style: {
+						position: "absolute",
+						visibility: "hidden",
+						fontSize: "var(--chart-tick-font-size, 0px)"
+					}
+				}, null, 512),
+				createVNode(unref(Drawing)),
+				slots.center && plot.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					"data-part": "chart-center",
+					style: normalizeStyle({
+						position: "absolute",
+						...plot.value,
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "center",
+						justifyContent: "center",
+						pointerEvents: "none"
+					})
+				}, [renderSlot(_ctx.$slots, "center")], 4)) : createCommentVNode("", true)
+			])], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { ChartFrame_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/chart/ChartGrid.js

@@ -0,0 +1,5 @@
+import ChartGrid_vue_vue_type_script_setup_true_lang_default from "./ChartGrid.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/chart/ChartGrid.vue
+var ChartGrid_default = ChartGrid_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ChartGrid_default as default };

package/dist/components/chart/ChartGrid.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    /** `y` draws a line per value tick, `x` one per row. @default 'y' */
+    type?: 'x' | 'y';
+    /** The value scale whose ticks it follows. Defaults to the first one with a series showing. */
+    scale?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "x" | "y";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/chart/ChartGrid.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,20 @@
+import { useChartPart } from "./ChartRoot.vue_vue_type_script_setup_true_lang.js";
+import { defineComponent } from "vue";
+//#region src/components/chart/ChartGrid.vue?vue&type=script&setup=true&lang.ts
+var ChartGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "ChartGrid",
+	__name: "ChartGrid",
+	props: {
+		type: { default: "y" },
+		scale: {}
+	},
+	setup(__props) {
+		const props = __props;
+		useChartPart("grid", () => ({ ...props }));
+		return (_ctx, _cache) => {
+			return null;
+		};
+	}
+});
+//#endregion
+export { ChartGrid_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/chart/ChartLegend.js

@@ -0,0 +1,5 @@
+import ChartLegend_vue_vue_type_script_setup_true_lang_default from "./ChartLegend.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/chart/ChartLegend.vue
+var ChartLegend_default = ChartLegend_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ChartLegend_default as default };

package/dist/components/chart/ChartLegend.vue.d.ts

@@ -0,0 +1,46 @@
+type __VLS_Props = {
+    /** The hidden categories, bound with `v-model`, for a legend beside a chart rather than inside it. */
+    modelValue?: string[];
+    /** Taken from the chart this sits inside, when it sits inside one. */
+    categories?: string[];
+    /** One per category; taken from the chart this sits inside, or `var(--chart-color-N)`. */
+    colors?: string[];
+    /** Renames a category for the reader. Inside a chart, each series' `label` already does. */
+    labelFormat?: (category: string) => string;
+    /** Element or component to render. */
+    as?: string | object;
+};
+type __VLS_Slots = {
+    /**
+     * Replaces the buttons.
+     * @slotOnly The element carries only `data-part="legend"`.
+     */
+    default(props: {
+        /** One per category, with its `category`, `label`, `color`, whether it is `hidden`, and a `toggle()`. */
+        items: {
+            category: string;
+            label: string;
+            color: string;
+            hidden: boolean;
+            toggle: () => void;
+        }[];
+        /** The hidden categories. */
+        hidden: string[];
+    }): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (hidden: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((hidden: string[]) => any) | undefined;
+}>, {
+    as: string | object;
+    modelValue: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};