vccs 0.0.1 → 0.2.0

package/dist/components/types.d.ts

@@ -0,0 +1,9 @@
+import { Coordinate } from '../types';
+export type RadialCursorPoints = {
+    points: [startPoint: Coordinate, endPoint: Coordinate];
+    cx?: number;
+    cy?: number;
+    radius?: number;
+    startAngle?: number;
+    endAngle?: number;
+};

package/dist/components/utils.d.ts

@@ -0,0 +1,4 @@
+import { RadialCursorPoints } from './types';
+import { ChartCoordinate, Coordinate, LayoutType } from '../types';
+import { ChartOffsetInternal } from '../utils/types';
+export declare function getCursorPoints(layout: LayoutType, activeCoordinate: ChartCoordinate, offset: ChartOffsetInternal): [Coordinate, Coordinate] | RadialCursorPoints;

package/dist/container/ClipPath.d.ts

@@ -0,0 +1,12 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    clipPathId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    clipPathId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/container/Layer.d.ts

@@ -0,0 +1,2 @@
+import { SVGAttributes } from 'vue';
+export declare const Layer: import('vue').DefineComponent<SVGAttributes, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SVGAttributes> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/container/ResponsiveContainer.d.ts

@@ -0,0 +1,50 @@
+import { CSSProperties, VNode } from 'vue';
+export interface ResponsiveContainerProps {
+    aspect?: number;
+    width?: string | number;
+    height?: string | number;
+    minWidth?: string | number;
+    minHeight?: string | number;
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
+    maxHeight?: number;
+    debounce?: number;
+    id?: string | number;
+    class?: string | number;
+    style?: Omit<CSSProperties, keyof ResponsiveContainerProps>;
+    onResize?: (width: number, height: number) => void;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default: () => VNode[];
+    }> & {
+        default: () => VNode[];
+    };
+    refs: {
+        containerRef: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ResponsiveContainerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ResponsiveContainerProps> & Readonly<{}>, {
+    width: string | number;
+    height: string | number;
+    minWidth: string | number;
+    initialDimension: {
+        width: number;
+        height: number;
+    };
+    debounce: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    containerRef: HTMLDivElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/container/RootSurface.d.ts

@@ -0,0 +1,17 @@
+export declare const RootSurface: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    title: StringConstructor;
+    desc: StringConstructor;
+    otherAttributes: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    title: StringConstructor;
+    desc: StringConstructor;
+    otherAttributes: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    otherAttributes: Record<string, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/container/Surface.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties, SVGAttributes } from 'vue';
+interface ViewBox {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+declare const Surface: import('vue').DefineComponent<Omit<SVGAttributes, "viewBox"> & {
+    width: number;
+    height: number;
+    viewBox?: ViewBox;
+    class?: string;
+    style?: CSSProperties;
+    title?: string;
+    desc?: string;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Omit<SVGAttributes, "viewBox"> & {
+    width: number;
+    height: number;
+    viewBox?: ViewBox;
+    class?: string;
+    style?: CSSProperties;
+    title?: string;
+    desc?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default Surface;

package/dist/container/index.d.ts

@@ -0,0 +1 @@
+export { default as ResponsiveContainer, type ResponsiveContainerProps } from './ResponsiveContainer';

package/dist/container/useSizeContext.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+export interface SizeContextValue {
+    sizes: Ref<{
+        width: number;
+        height: number;
+    }>;
+    calculatedWidth: Ref<number>;
+    calculatedHeight: Ref<number>;
+}
+declare const useSizeContext: <T extends SizeContextValue = SizeContextValue>(fallback?: T) => T extends null ? SizeContextValue : SizeContextValue, provideSizeContext: (contextValue: SizeContextValue) => SizeContextValue;
+export { provideSizeContext, useSizeContext };

package/dist/context/ChartDataContextProvider.d.ts

@@ -0,0 +1,17 @@
+import { PropType } from 'vue';
+import { ChartData } from '../state/chartDataSlice';
+/**
+ * ChartDataContextProvider for Vue
+ * Sets chartData in store on mount/update, clears on unmount. Renders nothing.
+ */
+export declare const ChartDataContextProvider: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    chartData: {
+        type: PropType<ChartData>;
+        required: true;
+    };
+}>, () => any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    chartData: {
+        type: PropType<ChartData>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/context/PanoramaContextProvider.d.ts

@@ -0,0 +1,22 @@
+/**
+ * useIsPanorama composable
+ * Returns the injected isPanorama value (default: false)
+ */
+export declare function useIsPanorama(): boolean;
+/**
+ * PanoramaContextProvider for Vue
+ * Provides isPanorama to descendants via provide/inject. Renders slot.
+ */
+export declare const PanoramaContextProvider: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    isPanorama: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    isPanorama: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/context/accessibilityContext.d.ts

@@ -0,0 +1 @@
+export declare const useAccessibilityLayer: () => Readonly<import('vue').ShallowRef<boolean>>;

package/dist/context/cartesianLabelListContext.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+import { Data } from '../components/label/types';
+export declare const useCartesianLabelListData: <T extends Ref<readonly Data[], readonly Data[]> = Ref<readonly Data[], readonly Data[]>>(fallback?: T) => T extends null ? Ref<readonly Data[], readonly Data[]> : Ref<readonly Data[], readonly Data[]>, provideCartesianLabelListData: (contextValue: Ref<readonly Data[], readonly Data[]>) => Ref<readonly Data[], readonly Data[]>;

package/dist/context/chartLayoutContext.d.ts

@@ -0,0 +1,8 @@
+import { Margin } from '../types';
+export declare function useOffset(): Readonly<import('vue').ShallowRef<Required<import('../types').ChartOffset>>>;
+export declare const useChartLayout: () => Readonly<import('vue').ShallowRef<import('../types').LayoutType>>;
+export declare function useViewBox(): import('vue').ComputedRef<Required<import('../cartesian/type').CartesianViewBox>>;
+export declare function useChartWidth(): Readonly<import('vue').ShallowRef<number>>;
+export declare function useChartHeight(): Readonly<import('vue').ShallowRef<number>>;
+export declare function useOffsetInternal(): Readonly<import('vue').ShallowRef<import('../utils/types').ChartOffsetInternal>>;
+export declare function useMargin(): Readonly<import('vue').ShallowRef<Margin>>;

package/dist/context/cursorLayerContext.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare const useCursorLayerRef: <T extends Ref<SVGGElement, SVGGElement> = Ref<SVGGElement, SVGGElement>>(fallback?: T) => T extends null ? Ref<SVGGElement, SVGGElement> : Ref<SVGGElement, SVGGElement>, provideCursorLayerRef: (contextValue: Ref<SVGGElement, SVGGElement>) => Ref<SVGGElement, SVGGElement>;

package/dist/context/graphicalLayerContext.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare const useGraphicalLayerRef: <T extends Ref<SVGGElement, SVGGElement> = Ref<SVGGElement, SVGGElement>>(fallback?: T) => T extends null ? Ref<SVGGElement, SVGGElement> : Ref<SVGGElement, SVGGElement>, provideGraphicalLayerRef: (contextValue: Ref<SVGGElement, SVGGElement>) => Ref<SVGGElement, SVGGElement>;

package/dist/context/labelLayerContext.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare const useLabelLayerRef: <T extends Ref<SVGGElement, SVGGElement> = Ref<SVGGElement, SVGGElement>>(fallback?: T) => T extends null ? Ref<SVGGElement, SVGGElement> : Ref<SVGGElement, SVGGElement>, provideLabelLayerRef: (contextValue: Ref<SVGGElement, SVGGElement>) => Ref<SVGGElement, SVGGElement>;

package/dist/context/polarLabelViewBoxContext.d.ts

@@ -0,0 +1,4 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { PolarViewBox } from '../cartesian/type';
+export declare const POLAR_LABEL_VIEW_BOX_KEY: InjectionKey<ComputedRef<PolarViewBox | undefined>>;
+export declare function usePolarLabelViewBox(): ComputedRef<PolarViewBox | undefined>;

package/dist/context/useTooltipAxis.d.ts

@@ -0,0 +1,2 @@
+export declare const useTooltipAxis: () => Readonly<import('vue').ShallowRef<import('../state/selectors/axisSelectors').AxisWithTicksSettings>>;
+export declare function useTooltipAxisBandSize(): import('vue').ComputedRef<number>;

package/dist/es/animation/Animate.mjs

@@ -0,0 +1,89 @@
+import { defineComponent, onUnmounted, ref, watch } from "vue";
+import { animate } from "motion-v";
+import { usePreferredReducedMotion } from "@vueuse/core";
+//#region src/animation/Animate.tsx
+var DEFAULT_TRANSITION = {
+	duration: .4,
+	ease: "easeOut"
+};
+var Animate = /* @__PURE__ */ defineComponent({
+	name: "Animate",
+	props: {
+		isActive: {
+			type: Boolean,
+			default: true
+		},
+		transition: {
+			type: Object,
+			default: void 0
+		},
+		onAnimationStart: {
+			type: Function,
+			default: void 0
+		},
+		onAnimationEnd: {
+			type: Function,
+			default: void 0
+		},
+		onUpdate: {
+			type: Function,
+			default: void 0
+		},
+		from: {
+			type: Number,
+			default: 0
+		},
+		to: {
+			type: Number,
+			default: 1
+		}
+	},
+	setup(props, { slots }) {
+		let animationControls = null;
+		const currentValue = ref(0);
+		const reducedMotion = usePreferredReducedMotion();
+		const startAnimation = () => {
+			if (animationControls) animationControls.stop();
+			if (props.onAnimationStart) props.onAnimationStart();
+			animationControls = animate(props.from, props.to, {
+				...DEFAULT_TRANSITION,
+				...props.transition,
+				onUpdate: (latest) => {
+					currentValue.value = latest;
+					if (props.onUpdate) props.onUpdate(latest);
+				},
+				onComplete: () => {
+					currentValue.value = 1;
+					if (props.onAnimationEnd) props.onAnimationEnd();
+				}
+			});
+		};
+		const stopAnimation = () => {
+			if (animationControls) {
+				animationControls.stop();
+				animationControls = null;
+			}
+		};
+		watch([() => props.isActive, reducedMotion], ([isActive, motion]) => {
+			if (isActive) if (motion === "reduce") {
+				stopAnimation();
+				if (props.onAnimationStart) props.onAnimationStart();
+				currentValue.value = props.to;
+				if (props.onAnimationEnd) props.onAnimationEnd();
+			} else startAnimation();
+			else {
+				stopAnimation();
+				currentValue.value = props.to;
+			}
+		}, { immediate: true });
+		onUnmounted(() => {
+			stopAnimation();
+		});
+		return () => {
+			if (!slots.default) return null;
+			return slots.default(currentValue.value);
+		};
+	}
+});
+//#endregion
+export { Animate };

package/dist/es/cartesian/GraphicalItemClipPath.mjs

@@ -0,0 +1,37 @@
+import { useOffset } from "../context/chartLayoutContext.mjs";
+import { useNeedsClip } from "./useNeedsClip.mjs";
+import { createVNode, defineComponent } from "vue";
+//#region src/cartesian/GraphicalItemClipPath.tsx
+var GraphicalItemClipPath = /* @__PURE__ */ defineComponent({
+	name: "GraphicalItemClipPath",
+	props: {
+		xAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		yAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		clipPathId: {
+			type: String,
+			required: true
+		}
+	},
+	setup(props) {
+		const offset = useOffset();
+		const { needClipX, needClipY, needClip } = useNeedsClip(props.xAxisId, props.yAxisId);
+		return () => {
+			if (!needClip) return null;
+			const { left, top, width, height } = offset.value;
+			return createVNode("clipPath", { "id": `clipPath-${props.clipPathId}` }, [createVNode("rect", {
+				"x": needClipX ? left : left - width / 2,
+				"y": needClipY ? top : top - height / 2,
+				"width": needClipX ? width : width * 2,
+				"height": needClipY ? height : height * 2
+			}, null)]);
+		};
+	}
+});
+//#endregion
+export { GraphicalItemClipPath };

package/dist/es/cartesian/area/ActivePoints.mjs

@@ -0,0 +1,78 @@
+import { isNullish } from "../../utils/validate.mjs";
+import { selectActiveTooltipIndex } from "../../state/selectors/tooltipSelectors.mjs";
+import { useAppSelector } from "../../state/hooks.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { Dot } from "../../shape/Dot.mjs";
+import { createVNode, defineComponent, isVNode } from "vue";
+//#region src/cartesian/area/ActivePoints.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var ActivePoints = /* @__PURE__ */ defineComponent({
+	name: "ActivePoints",
+	props: {
+		points: {
+			type: Array,
+			required: true
+		},
+		mainColor: {
+			type: String,
+			required: true
+		},
+		itemDataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			required: true
+		},
+		activeDot: {
+			type: [
+				Object,
+				Boolean,
+				Function
+			],
+			required: true
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const activeTooltipIndex = useAppSelector(selectActiveTooltipIndex);
+		return () => {
+			const { points } = props;
+			if (!points?.length || isNullish(activeTooltipIndex.value)) return null;
+			const activePoint = points[Number(activeTooltipIndex.value)];
+			if (isNullish(activePoint)) return null;
+			return renderActivePoint({
+				point: activePoint,
+				childIndex: Number(activeTooltipIndex.value),
+				mainColor: props.mainColor,
+				dataKey: props.itemDataKey,
+				activeDot: props.activeDot,
+				slots
+			});
+		};
+	}
+});
+function renderActivePoint({ point, childIndex, mainColor, activeDot, dataKey, slots }) {
+	if (activeDot === false) return null;
+	const dotProps = {
+		"index": childIndex,
+		dataKey,
+		"cx": point.x,
+		"cy": point.y,
+		"r": 4,
+		"fill": mainColor,
+		"stroke-width": 2,
+		"stroke": "#fff",
+		"payload": point.payload,
+		"value": point.value
+	};
+	let dot;
+	if (slots.activeDot) dot = slots.activeDot(dotProps);
+	else dot = createVNode(Dot, dotProps, null);
+	return createVNode(Layer, { "class": "v-charts-active-dot" }, _isSlot(dot) ? dot : { default: () => [dot] });
+}
+//#endregion
+export { ActivePoints };

package/dist/es/cartesian/area/Area.mjs

@@ -0,0 +1,52 @@
+import { AreaVueProps } from "./type.mjs";
+import { useArea } from "./hooks/useArea.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { StaticArea } from "./RenderArea.mjs";
+import { ClipRect } from "./ClipRect.mjs";
+import { ActivePoints } from "./ActivePoints.mjs";
+import { useSetupGraphicalItem } from "../../hooks/useSetupGraphicalItem.mjs";
+import { useGraphicalLayerRef } from "../../context/graphicalLayerContext.mjs";
+import { Fragment, Teleport, createVNode, defineComponent, isVNode } from "vue";
+//#region src/cartesian/area/Area.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* Type-safe Area component with slot types preserved in .d.ts output.
+* The `new () => { $slots }` pattern ensures Volar picks up slot types
+* even when consuming from compiled declarations.
+*/
+var Area = /* @__PURE__ */ defineComponent({
+	name: "Area",
+	props: AreaVueProps,
+	inheritAttrs: false,
+	slots: Object,
+	setup(props, { attrs, slots }) {
+		useSetupGraphicalItem(props, "area");
+		const { shouldRender, areaData, points, clipPathId, shouldShowAnimation } = useArea(props, attrs, slots.dot);
+		const graphicalLayerRef = useGraphicalLayerRef(null);
+		return () => {
+			let _slot;
+			if (!shouldRender.value) return null;
+			let activeDot;
+			if (slots.activeDot) activeDot = { activeDot: slots.activeDot };
+			const renderAreaContent = () => {
+				if (shouldShowAnimation.value) return createVNode(Layer, { "key": "area-with-animation" }, { default: () => [createVNode("defs", null, [createVNode("clipPath", { "id": `animationClipPath-${clipPathId.value}` }, [createVNode(ClipRect, null, null)])]), createVNode(Layer, { "clip-path": `url(#animationClipPath-${clipPathId.value})` }, { default: () => [createVNode(StaticArea, null, null)] })] });
+				return createVNode(StaticArea, { "key": "static-area" }, null);
+			};
+			const areaContent = createVNode(Fragment, null, [createVNode(Layer, { "class": ["v-charts-area", attrs.class] }, _isSlot(_slot = renderAreaContent()) ? _slot : { default: () => [_slot] }), createVNode(ActivePoints, {
+				"points": areaData.value?.points ?? [],
+				"mainColor": getLegendItemColor(attrs.stroke, props.fill),
+				"itemDataKey": props.dataKey,
+				"activeDot": props.activeDot
+			}, _isSlot(activeDot) ? activeDot : { default: () => [activeDot] })]);
+			if (graphicalLayerRef?.value) return createVNode(Teleport, { "to": graphicalLayerRef.value }, _isSlot(areaContent) ? areaContent : { default: () => [areaContent] });
+			return areaContent;
+		};
+	}
+});
+function getLegendItemColor(stroke, fill) {
+	return stroke && stroke !== "none" ? stroke : fill;
+}
+//#endregion
+export { Area };

package/dist/es/cartesian/area/ClipRect.mjs

@@ -0,0 +1,125 @@
+import { isNumber, isWellBehavedNumber } from "../../utils/validate.mjs";
+import { useAreaContext } from "./hooks/useArea.mjs";
+import { Animate } from "../../animation/Animate.mjs";
+import { createVNode, defineComponent, ref, watch } from "vue";
+//#region src/cartesian/area/ClipRect.tsx
+var HorizontalRect = /* @__PURE__ */ defineComponent({
+	name: "HorizontalRect",
+	props: {
+		alpha: {
+			type: Number,
+			required: true
+		},
+		points: {
+			type: Array,
+			required: true
+		},
+		baseLine: {
+			type: [Number, Array],
+			required: true
+		},
+		strokeWidth: {
+			type: Number,
+			required: true
+		}
+	},
+	setup(props) {
+		const { points } = props;
+		return () => {
+			const { alpha, baseLine, strokeWidth } = props;
+			const startX = points[0].x;
+			const endX = points[points.length - 1].x;
+			const width = alpha * Math.abs(startX - endX);
+			let maxY = Math.max(...points.map((entry) => entry.y || 0));
+			if (isNumber(baseLine)) maxY = Math.max(baseLine, maxY);
+			else if (baseLine && Array.isArray(baseLine) && baseLine.length) maxY = Math.max(...baseLine.map((entry) => entry.y || 0), maxY);
+			if (isNumber(maxY)) return createVNode("rect", {
+				"x": startX < endX ? startX : startX - width,
+				"y": 0,
+				"width": width,
+				"height": Math.floor(maxY + (strokeWidth ? parseInt(`${strokeWidth}`, 10) : 1))
+			}, null);
+			return null;
+		};
+	}
+});
+var VerticalRect = /* @__PURE__ */ defineComponent({
+	name: "VerticalRect",
+	props: {
+		alpha: {
+			type: Number,
+			required: true
+		},
+		points: {
+			type: Array,
+			required: true
+		},
+		baseLine: {
+			type: [Number, Array],
+			required: true
+		},
+		strokeWidth: {
+			type: Number,
+			required: true
+		}
+	},
+	setup(props) {
+		const { points } = props;
+		return () => {
+			const { alpha, baseLine, strokeWidth } = props;
+			const startY = points[0].y;
+			const endY = points[points.length - 1].y;
+			if (!isWellBehavedNumber(startY) || !isWellBehavedNumber(endY)) return null;
+			const height = alpha * Math.abs(startY - endY);
+			let maxX = Math.max(...points.map((entry) => entry.x || 0));
+			if (isNumber(baseLine)) maxX = Math.max(baseLine, maxX);
+			else if (baseLine && Array.isArray(baseLine) && baseLine.length) maxX = Math.max(...baseLine.map((entry) => entry.x || 0), maxX);
+			return createVNode("rect", {
+				"x": 0,
+				"y": startY < endY ? startY : startY - height,
+				"width": maxX + (strokeWidth ? parseInt(`${strokeWidth}`, 10) : 1),
+				"height": Math.floor(height)
+			}, null);
+		};
+	}
+});
+var ClipRect = /* @__PURE__ */ defineComponent({
+	name: "ClipRect",
+	setup() {
+		const { points, props, areaData, layout, isClipRectAnimating } = useAreaContext();
+		const isAnimationActive = ref(false);
+		watch(points, (newPoints) => {
+			if (newPoints && newPoints.length > 0 && !isAnimationActive.value) isAnimationActive.value = true;
+		}, { immediate: true });
+		const handleAnimationEnd = () => {
+			isAnimationActive.value = false;
+			isClipRectAnimating.value = false;
+			props.onAnimationEnd?.();
+		};
+		return () => {
+			const baseLine = areaData.value?.baseLine;
+			if (!points.value || points.value.length === 0) return null;
+			return createVNode(Animate, {
+				"isActive": isAnimationActive.value,
+				"transition": props.transition,
+				"onAnimationStart": props.onAnimationStart,
+				"onAnimationEnd": handleAnimationEnd
+			}, { default: (t) => {
+				if (layout.value === "horizontal") return createVNode(HorizontalRect, {
+					"alpha": t,
+					"points": points.value,
+					"baseLine": baseLine,
+					"strokeWidth": props.strokeWidth || 2
+				}, null);
+				return createVNode(VerticalRect, {
+					"alpha": t,
+					"points": points.value,
+					"baseLine": baseLine,
+					"strokeWidth": props.strokeWidth || 2
+				}, null);
+			} });
+		};
+	}
+});
+//#endregion
+export { ClipRect };