vccs 0.5.0 → 0.6.0

package/dist/cartesian/cartesian-axis/CartesianAxis.d.ts

@@ -205,9 +205,9 @@ export declare const CartesianAxis: import('vue').DefineComponent<import('vue').
     height: number;
     x: number;
     y: number;
+    viewBox: Record<string, any>;
     orientation: string;
     stroke: string;
-    viewBox: Record<string, any>;
     label: any;
     ticks: readonly CartesianTickItem[];
     hide: boolean;

package/dist/cartesian/cartesianPositionToCSSTranslate.d.ts

@@ -0,0 +1,15 @@
+import { TextAnchor, TextVerticalAnchor } from './getCartesianPosition';
+/**
+ * CalculatedCartesianPosition returns horizontalAnchor and verticalAnchor
+ * which work directly with an SVG text element
+ * but for use in HTML context we have to translate them into CSS transform(translate)
+ * so this is what this function is doing.
+ *
+ * horizontalPosition is type: 'start' | 'middle' | 'end' | 'inherit'
+ * verticalPosition is type: 'start' | 'middle' | 'end'
+ *
+ * @param horizontalPosition as returned from {@link getCartesianPosition}
+ * @param verticalPosition as returned from {@link getCartesianPosition}
+ * @return CSS transform string
+ */
+export declare function cartesianPositionToCSSTranslate(horizontalPosition: TextAnchor, verticalPosition: TextVerticalAnchor): string;

package/dist/cartesian/getCartesianPosition.d.ts

@@ -0,0 +1,45 @@
+import { CartesianViewBoxRequired, TrapezoidViewBox } from './type';
+export type TextAnchor = 'start' | 'middle' | 'end' | 'inherit';
+export type TextVerticalAnchor = 'start' | 'middle' | 'end';
+export declare function cartesianViewBoxToTrapezoid(box: undefined): undefined;
+export declare function cartesianViewBoxToTrapezoid(box: CartesianViewBoxRequired | TrapezoidViewBox): TrapezoidViewBox;
+/**
+ * @inline
+ */
+export type CartesianPosition = 'top' | 'left' | 'right' | 'bottom' | 'center' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' | 'insideTopLeft' | 'insideBottomLeft' | 'insideTopRight' | 'insideBottomRight' | {
+    x: number | string;
+    y: number | string;
+};
+export type GetCartesianPositionOptions = {
+    viewBox: TrapezoidViewBox | CartesianViewBoxRequired;
+    parentViewBox?: CartesianViewBoxRequired;
+    /**
+     * The offset to the specified "position". Direction of the offset depends on the position.
+     */
+    offset?: number;
+    /**
+     * The position of the element relative to the view box.
+     */
+    position?: CartesianPosition;
+    /**
+     * If true, the returned width and height will be clamped to keep the element within the parentViewBox.
+     * This is useful for preventing labels from overflowing the chart area.
+     */
+    clamp?: boolean;
+};
+export type CalculatedCartesianPosition = {
+    x: number;
+    y: number;
+    horizontalAnchor: TextAnchor;
+    verticalAnchor: TextVerticalAnchor;
+    width?: number;
+    height?: number;
+};
+/**
+ * Calculates the position and alignment for a generic element in a Cartesian coordinate system.
+ *
+ * @param options - The options including viewBox, position, and offset.
+ * @returns The calculated x, y, alignment and size.
+ */
+export declare function getCartesianPosition(options: GetCartesianPositionOptions): CalculatedCartesianPosition;
+export declare function isOutsidePosition(position: CartesianPosition | undefined): boolean;

package/dist/cartesian/index.d.ts

@@ -11,3 +11,4 @@ export * from './reference-line';
 export * from './scatter';
 export * from './z-axis';
 export * from './funnel';
+export type { CartesianPosition } from './getCartesianPosition';

package/dist/cartesian/type.d.ts

@@ -18,4 +18,12 @@ export interface CartesianViewBox {
 }
 export type ViewBox = CartesianViewBox | PolarViewBox;
 export type CartesianViewBoxRequired = Required<CartesianViewBox>;
+export interface TrapezoidViewBox {
+    x: number;
+    y: number;
+    upperWidth: number;
+    lowerWidth: number;
+    width: number;
+    height: number;
+}
 export type Sign = 0 | 1 | -1;

package/dist/components/Tooltip.d.ts

@@ -268,8 +268,8 @@ export declare const Tooltip: import('vue').DefineComponent<import('vue').Extrac
         readonly default: " : ";
     };
 }>> & Readonly<{}>, {
-    readonly cursor: boolean | object;
     readonly offset: number;
+    readonly cursor: boolean | object;
     readonly style: Record<string, any>;
     readonly isAnimationActive: boolean;
     readonly includeHidden: boolean;

package/dist/components/legend/hooks/useLegend.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'vue';
+import { LayoutType } from '../../../types';
 import { LegendPayload } from '../../DefaultLegendContent';
 import { LegendProps } from '../type';
 export declare function useLegend(props: LegendProps): {
@@ -14,6 +15,8 @@ export declare function useLegend(props: LegendProps): {
     processedPayload: import('vue').ComputedRef<LegendPayload[]>;
     outerStyle: import('vue').ComputedRef<CSSProperties>;
     legendPortal: import('vue').ComputedRef<HTMLElement>;
+    resolvedLayout: import('vue').ComputedRef<LayoutType>;
+    positionViewBox: import('vue').ComputedRef<Required<import('../../../cartesian/type').CartesianViewBox>>;
     syncSettings: () => void;
     syncSize: () => void;
 };

package/dist/components/legend/type.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties, PropType, VNode } from 'vue';
 import { LayoutType, Margin } from '../../types';
+import { CartesianPosition } from '../../cartesian/getCartesianPosition';
 import { LegendType } from '../../types/legend';
 import { HorizontalAlignmentType, LegendPayload, VerticalAlignmentType } from '../DefaultLegendContent';
 import { VuePropsToType, WithSVGProps } from '../../types/common';
@@ -8,8 +9,8 @@ export interface LegendSlots {
 }
 export declare const LegendVueProps: {
     readonly layout: {
-        readonly type: PropType<LayoutType>;
-        readonly default: "horizontal";
+        readonly type: PropType<LayoutType | "auto">;
+        readonly default: "auto";
     };
     readonly align: {
         readonly type: PropType<HorizontalAlignmentType>;
@@ -19,6 +20,21 @@ export declare const LegendVueProps: {
         readonly type: PropType<VerticalAlignmentType>;
         readonly default: "bottom";
     };
+    /**
+     * The position of the legend relative to the chart.
+     * If this is defined, it overrides `align` and `verticalAlign`.
+     */
+    readonly position: {
+        readonly type: PropType<CartesianPosition>;
+        readonly default: any;
+    };
+    /**
+     * The offset to the specified `position`. Direction of the offset depends on the position.
+     */
+    readonly offset: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     readonly width: NumberConstructor;
     readonly height: NumberConstructor;
     readonly iconSize: {

package/dist/components/legend/utils.d.ts

@@ -1,11 +1,20 @@
 import { CSSProperties } from 'vue';
 import { LayoutType, Margin } from '../../types';
+import { CartesianPosition } from '../../cartesian/getCartesianPosition';
 import { HorizontalAlignmentType, VerticalAlignmentType } from '../DefaultLegendContent';
 type PositionInput = {
     layout?: LayoutType;
     align?: HorizontalAlignmentType;
     verticalAlign?: VerticalAlignmentType;
 };
+export declare function getLayoutForPosition(position: CartesianPosition | undefined): LayoutType;
+export declare function getOutsidePositionOffset(position: CartesianPosition | undefined, offset: number, box: {
+    width: number;
+    height: number;
+}): {
+    top?: number;
+    left?: number;
+};
 export declare function getDefaultPosition(style: CSSProperties | undefined, props: PositionInput, margin: Margin, chartWidth: number, chartHeight: number, box: {
     width: number;
     height: number;

package/dist/es/cartesian/axis/XAxis.mjs

@@ -4,7 +4,7 @@ import { implicitXAxis, selectAxisScale, selectTicksOfAxis, selectXAxisPosition,
 import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
 import { addXAxis, removeXAxis } from "../../state/cartesianAxisSlice.mjs";
 import { CartesianAxis } from "../cartesian-axis/CartesianAxis.mjs";
-import { createVNode, defineComponent, mergeProps, watchEffect } from "vue";
+import { createVNode, defineComponent, mergeProps, onUnmounted, watchEffect } from "vue";
 //#region src/cartesian/axis/XAxis.tsx
 /**
 * @fileOverview X Axis
@@ -78,7 +78,8 @@ var XAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
 	},
 	setup(props, { slots: dispatcherSlots }) {
 		const dispatch = useAppDispatch();
-		watchEffect((onCleanup) => {
+		let registeredSettings;
+		watchEffect(() => {
 			const settings = {
 				interval: props.interval ?? "preserveEnd",
 				id: props.xAxisId,
@@ -105,10 +106,15 @@ var XAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
 				tick: props.tick ?? true,
 				tickFormatter: props.tickFormatter
 			};
+			if (registeredSettings && registeredSettings.id !== settings.id) dispatch(removeXAxis(registeredSettings));
 			dispatch(addXAxis(settings));
-			onCleanup(() => {
-				dispatch(removeXAxis(settings));
-			});
+			registeredSettings = settings;
+		});
+		onUnmounted(() => {
+			if (registeredSettings) {
+				dispatch(removeXAxis(registeredSettings));
+				registeredSettings = void 0;
+			}
 		});
 		return () => createVNode(XAxisImpl, props, { default: () => [dispatcherSlots.tick ? { tick: dispatcherSlots.tick } : void 0] });
 	}

package/dist/es/cartesian/axis/YAxis.mjs

@@ -5,7 +5,7 @@ import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
 import { addYAxis, removeYAxis, updateYAxisWidth } from "../../state/cartesianAxisSlice.mjs";
 import { CartesianAxis } from "../cartesian-axis/CartesianAxis.mjs";
 import { getCalculatedYAxisWidth } from "../../utils/YAxisUtils.mjs";
-import { createVNode, defineComponent, isVNode, mergeProps, nextTick, ref, watch, watchEffect } from "vue";
+import { createVNode, defineComponent, isVNode, mergeProps, nextTick, onUnmounted, ref, watch, watchEffect } from "vue";
 //#region src/cartesian/axis/YAxis.tsx
 var YAxisImpl = /* @__PURE__ */ defineComponent({
 	props: { yAxisId: {
@@ -125,7 +125,8 @@ var YAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
 	},
 	setup(props) {
 		const dispatch = useAppDispatch();
-		watchEffect((onCleanup) => {
+		let registeredSettings;
+		watchEffect(() => {
 			const settings = {
 				...props,
 				interval: props.interval ?? "preserveEnd",
@@ -136,10 +137,15 @@ var YAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
 				minTickGap: props.minTickGap ?? 5,
 				tick: props.tick ?? true
 			};
+			if (registeredSettings && registeredSettings.id !== settings.id) dispatch(removeYAxis(registeredSettings));
 			dispatch(addYAxis(settings));
-			onCleanup(() => {
-				dispatch(removeYAxis(settings));
-			});
+			registeredSettings = settings;
+		});
+		onUnmounted(() => {
+			if (registeredSettings) {
+				dispatch(removeYAxis(registeredSettings));
+				registeredSettings = void 0;
+			}
 		});
 		return () => createVNode(YAxisImpl, props, null);
 	}

package/dist/es/cartesian/cartesianPositionToCSSTranslate.mjs

@@ -0,0 +1,28 @@
+//#region src/cartesian/cartesianPositionToCSSTranslate.ts
+/**
+* CalculatedCartesianPosition returns horizontalAnchor and verticalAnchor
+* which work directly with an SVG text element
+* but for use in HTML context we have to translate them into CSS transform(translate)
+* so this is what this function is doing.
+*
+* horizontalPosition is type: 'start' | 'middle' | 'end' | 'inherit'
+* verticalPosition is type: 'start' | 'middle' | 'end'
+*
+* @param horizontalPosition as returned from {@link getCartesianPosition}
+* @param verticalPosition as returned from {@link getCartesianPosition}
+* @return CSS transform string
+*/
+function cartesianPositionToCSSTranslate(horizontalPosition, verticalPosition) {
+	if (horizontalPosition === "start" && verticalPosition === "start") return "";
+	return `translate(${horizontalPosition === "inherit" ? "0" : {
+		start: "0",
+		middle: "-50%",
+		end: "-100%"
+	}[horizontalPosition]}, ${{
+		start: "0",
+		middle: "-50%",
+		end: "-100%"
+	}[verticalPosition] ?? "0"})`;
+}
+//#endregion
+export { cartesianPositionToCSSTranslate };

package/dist/es/cartesian/getCartesianPosition.mjs

@@ -0,0 +1,176 @@
+import { isNumber, isPercent } from "../utils/validate.mjs";
+import { getPercentValue } from "../utils/data.mjs";
+//#region src/cartesian/getCartesianPosition.ts
+function cartesianViewBoxToTrapezoid(box) {
+	if (!box) return;
+	return {
+		x: box.x,
+		y: box.y,
+		upperWidth: "upperWidth" in box ? box.upperWidth : box.width,
+		lowerWidth: "lowerWidth" in box ? box.lowerWidth : box.width,
+		width: box.width,
+		height: box.height
+	};
+}
+/**
+* Calculates the position and alignment for a generic element in a Cartesian coordinate system.
+*
+* @param options - The options including viewBox, position, and offset.
+* @returns The calculated x, y, alignment and size.
+*/
+function getCartesianPosition(options) {
+	const { viewBox, position, offset = 0, parentViewBox, clamp } = options;
+	const { x, y, height, upperWidth, lowerWidth } = cartesianViewBoxToTrapezoid(viewBox);
+	const upperX = x;
+	const lowerX = x + (upperWidth - lowerWidth) / 2;
+	const middleX = (upperX + lowerX) / 2;
+	const midHeightWidth = (upperWidth + lowerWidth) / 2;
+	const centerX = upperX + upperWidth / 2;
+	const verticalSign = height >= 0 ? 1 : -1;
+	const verticalOffset = verticalSign * offset;
+	const verticalEnd = verticalSign > 0 ? "end" : "start";
+	const verticalStart = verticalSign > 0 ? "start" : "end";
+	const horizontalSign = upperWidth >= 0 ? 1 : -1;
+	const horizontalOffset = horizontalSign * offset;
+	const horizontalEnd = horizontalSign > 0 ? "end" : "start";
+	const horizontalStart = horizontalSign > 0 ? "start" : "end";
+	if (position === "top") {
+		const result = {
+			x: upperX + upperWidth / 2,
+			y: y - verticalOffset,
+			horizontalAnchor: "middle",
+			verticalAnchor: verticalEnd
+		};
+		if (clamp && parentViewBox) {
+			result.height = Math.max(y - parentViewBox.y, 0);
+			result.width = upperWidth;
+		}
+		return result;
+	}
+	if (position === "bottom") {
+		const result = {
+			x: lowerX + lowerWidth / 2,
+			y: y + height + verticalOffset,
+			horizontalAnchor: "middle",
+			verticalAnchor: verticalStart
+		};
+		if (clamp && parentViewBox) {
+			result.height = Math.max(parentViewBox.y + parentViewBox.height - (y + height), 0);
+			result.width = lowerWidth;
+		}
+		return result;
+	}
+	if (position === "left") {
+		const result = {
+			x: middleX - horizontalOffset,
+			y: y + height / 2,
+			horizontalAnchor: horizontalEnd,
+			verticalAnchor: "middle"
+		};
+		if (clamp && parentViewBox) {
+			result.width = Math.max(result.x - parentViewBox.x, 0);
+			result.height = height;
+		}
+		return result;
+	}
+	if (position === "right") {
+		const result = {
+			x: middleX + midHeightWidth + horizontalOffset,
+			y: y + height / 2,
+			horizontalAnchor: horizontalStart,
+			verticalAnchor: "middle"
+		};
+		if (clamp && parentViewBox) {
+			result.width = Math.max(parentViewBox.x + parentViewBox.width - result.x, 0);
+			result.height = height;
+		}
+		return result;
+	}
+	const sizeAttrs = clamp && parentViewBox ? {
+		width: midHeightWidth,
+		height
+	} : {};
+	if (position === "insideLeft") return {
+		x: middleX + horizontalOffset,
+		y: y + height / 2,
+		horizontalAnchor: horizontalStart,
+		verticalAnchor: "middle",
+		...sizeAttrs
+	};
+	if (position === "insideRight") return {
+		x: middleX + midHeightWidth - horizontalOffset,
+		y: y + height / 2,
+		horizontalAnchor: horizontalEnd,
+		verticalAnchor: "middle",
+		...sizeAttrs
+	};
+	if (position === "insideTop") return {
+		x: upperX + upperWidth / 2,
+		y: y + verticalOffset,
+		horizontalAnchor: "middle",
+		verticalAnchor: verticalStart,
+		...sizeAttrs
+	};
+	if (position === "insideBottom") return {
+		x: lowerX + lowerWidth / 2,
+		y: y + height - verticalOffset,
+		horizontalAnchor: "middle",
+		verticalAnchor: verticalEnd,
+		...sizeAttrs
+	};
+	if (position === "insideTopLeft") return {
+		x: upperX + horizontalOffset,
+		y: y + verticalOffset,
+		horizontalAnchor: horizontalStart,
+		verticalAnchor: verticalStart,
+		...sizeAttrs
+	};
+	if (position === "insideTopRight") return {
+		x: upperX + upperWidth - horizontalOffset,
+		y: y + verticalOffset,
+		horizontalAnchor: horizontalEnd,
+		verticalAnchor: verticalStart,
+		...sizeAttrs
+	};
+	if (position === "insideBottomLeft") return {
+		x: lowerX + horizontalOffset,
+		y: y + height - verticalOffset,
+		horizontalAnchor: horizontalStart,
+		verticalAnchor: verticalEnd,
+		...sizeAttrs
+	};
+	if (position === "insideBottomRight") return {
+		x: lowerX + lowerWidth - horizontalOffset,
+		y: y + height - verticalOffset,
+		horizontalAnchor: horizontalEnd,
+		verticalAnchor: verticalEnd,
+		...sizeAttrs
+	};
+	if (!!position && typeof position === "object" && (isNumber(position.x) || isPercent(position.x)) && (isNumber(position.y) || isPercent(position.y))) return {
+		x: x + getPercentValue(position.x, midHeightWidth),
+		y: y + getPercentValue(position.y, height),
+		horizontalAnchor: "end",
+		verticalAnchor: "end",
+		...sizeAttrs
+	};
+	return {
+		x: centerX,
+		y: y + height / 2,
+		horizontalAnchor: "middle",
+		verticalAnchor: "middle",
+		...sizeAttrs
+	};
+}
+var absolutePositions = [
+	"top",
+	"left",
+	"right",
+	"bottom"
+];
+function isOutsidePosition(position) {
+	if (position == null) return false;
+	if (typeof position === "object") return true;
+	return absolutePositions.includes(position);
+}
+//#endregion
+export { getCartesianPosition, isOutsidePosition };

package/dist/es/chart/ChartsWrapper.mjs

@@ -10,7 +10,7 @@ import { useSynchronisedEventsFromOtherCharts } from "../events/useChartSynchron
 import { useReportScale } from "../state/utils/useReportScale.mjs";
 import { providePortalRaw } from "./TooltipPortalContext.mjs";
 import { provideLegendPortalRaw } from "./LegendPortalContext.mjs";
-import { createVNode, defineComponent, onMounted, ref } from "vue";
+import { createVNode, defineComponent, ref, watch } from "vue";
 import { useResizeObserver } from "@vueuse/core";
 //#region src/chart/ChartsWrapper.tsx
 var ChartsWrapper = /* @__PURE__ */ defineComponent({
@@ -62,17 +62,13 @@ var ChartsWrapper = /* @__PURE__ */ defineComponent({
 			legendPortal.value = node;
 			wrapperEl.value = node;
 		};
-		if (props.responsive) {
-			useResizeObserver(wrapperEl, (entries) => {
+		watch(() => props.responsive, (responsive, _, onCleanup) => {
+			if (!responsive) return;
+			onCleanup(useResizeObserver(wrapperEl, (entries) => {
 				const { width, height } = entries[0].contentRect;
 				props.onResize?.(width, height);
-			});
-			onMounted(() => {
-				if (!wrapperEl.value) return;
-				const { width, height } = wrapperEl.value.getBoundingClientRect();
-				props.onResize?.(width, height);
-			});
-		}
+			}).stop);
+		}, { immediate: true });
 		const myOnClick = (e) => {
 			const chartPointer = getChartPointer(e);
 			if (chartPointer) dispatch(mouseClickAction(chartPointer));

package/dist/es/chart/generateCategoricalChart.mjs

@@ -1,5 +1,4 @@
 import { classProp } from "../types/common.mjs";
-import { validateWidthHeight } from "../utils/validate.mjs";
 import { provideClipPathId } from "./provideClipPathId.mjs";
 import { createRechartsStore } from "../state/store.mjs";
 import Surface_default from "./Surface.mjs";
@@ -11,7 +10,8 @@ import { ReportMainChartProps } from "../state/ReportMainChartProps.mjs";
 import ReportChartProps_default from "../state/ReportChartProps.mjs";
 import { applyDefaultProps } from "../utils/props.mjs";
 import { ReportPolarOptions } from "../state/ReportPolarOptions.mjs";
-import { Fragment, createVNode, defineComponent, mergeProps, ref } from "vue";
+import { useResponsiveSize } from "../hooks/useResponsiveSize.mjs";
+import { Fragment, createVNode, defineComponent, mergeProps } from "vue";
 import { provideStore } from "@reduxjs/vue-redux";
 //#region src/chart/generateCategoricalChart.tsx
 var defaultLayout = "horizontal";
@@ -106,57 +106,43 @@ function generateCategoricalChart({ chartName, defaultProps = {}, defaultTooltip
 				eventEmitter: void 0
 			} }, props.id ?? chartName) });
 			const clipPathId = provideClipPathId(props);
-			const responsiveSize = ref({
-				width: 0,
-				height: 0
-			});
-			function handleResize(width, height) {
-				const roundedWidth = Math.round(width);
-				const roundedHeight = Math.round(height);
-				if (responsiveSize.value.width === roundedWidth && responsiveSize.value.height === roundedHeight) return;
-				responsiveSize.value = {
-					width: roundedWidth,
-					height: roundedHeight
-				};
+			const { effectiveWidth, effectiveHeight, hasValidSize, handleResize } = useResponsiveSize(props);
+			function renderPolarOptions(isPolarChart) {
+				if (!isPolarChart) return null;
+				return createVNode(ReportPolarOptions, {
+					"cx": props.cx ?? "50%",
+					"cy": props.cy ?? "50%",
+					"startAngle": props.startAngle ?? defaultProps.startAngle ?? 90,
+					"endAngle": props.endAngle ?? defaultProps.endAngle ?? -270,
+					"innerRadius": props.innerRadius ?? 0,
+					"outerRadius": props.outerRadius ?? "80%"
+				}, null);
 			}
 			return () => {
 				const { compact, width, height, title, desc, responsive, ...rest } = props;
 				const attributes = { ...attrs };
-				const effectiveWidth = responsive ? responsiveSize.value.width : width;
-				const effectiveHeight = responsive ? responsiveSize.value.height : height;
-				const hasValidSize = validateWidthHeight({
-					width: effectiveWidth,
-					height: effectiveHeight
-				});
 				const layout = props.layout ?? defaultProps.layout ?? defaultLayout;
 				const isPolarChart = layout === "centric" || layout === "radial";
 				if (compact) {
-					if (!hasValidSize) return null;
+					if (!hasValidSize.value) return null;
 					return createVNode(Fragment, null, [
 						createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
 						createVNode(ReportMainChartProps, {
-							"width": effectiveWidth,
-							"height": effectiveHeight,
+							"width": effectiveWidth.value,
+							"height": effectiveHeight.value,
 							"layout": layout,
-							"margin": props.margin ?? defaultMargin
-						}, null),
-						isPolarChart && createVNode(ReportPolarOptions, {
-							"cx": props.cx ?? "50%",
-							"cy": props.cy ?? "50%",
-							"startAngle": props.startAngle ?? defaultProps.startAngle ?? 90,
-							"endAngle": props.endAngle ?? defaultProps.endAngle ?? -270,
-							"innerRadius": props.innerRadius ?? 0,
-							"outerRadius": props.outerRadius ?? "80%"
+							"margin": props.margin
 						}, null),
+						renderPolarOptions(isPolarChart),
 						createVNode(Surface_default, mergeProps(attrs, rest, {
-							"width": effectiveWidth,
-							"height": effectiveHeight,
+							"width": effectiveWidth.value,
+							"height": effectiveHeight.value,
 							"title": title,
 							"desc": desc
 						}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] })
 					]);
 				}
-				if (!responsive && !hasValidSize) return null;
+				if (!responsive && !hasValidSize.value) return null;
 				if (props.accessibilityLayer) {
 					attributes.tabindex = props.tabIndex ?? 0;
 					attributes.role = props.role ?? "application";
@@ -166,36 +152,29 @@ function generateCategoricalChart({ chartName, defaultProps = {}, defaultTooltip
 				for (const [key, value] of Object.entries(attributes)) if (key.startsWith("on") && typeof value === "function") eventHandlerAttrs[key] = value;
 				else svgAttributes[key] = value;
 				return createVNode(Fragment, null, [
-					hasValidSize && createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
-					hasValidSize && createVNode(ReportMainChartProps, {
-						"width": effectiveWidth,
-						"height": effectiveHeight,
+					hasValidSize.value && createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
+					hasValidSize.value && createVNode(ReportMainChartProps, {
+						"width": effectiveWidth.value,
+						"height": effectiveHeight.value,
 						"layout": layout,
 						"margin": props.margin ?? defaultMargin
 					}, null),
-					hasValidSize && isPolarChart && createVNode(ReportPolarOptions, {
-						"cx": props.cx ?? "50%",
-						"cy": props.cy ?? "50%",
-						"startAngle": props.startAngle ?? defaultProps.startAngle ?? 90,
-						"endAngle": props.endAngle ?? defaultProps.endAngle ?? -270,
-						"innerRadius": props.innerRadius ?? 0,
-						"outerRadius": props.outerRadius ?? "80%"
-					}, null),
+					hasValidSize.value && renderPolarOptions(isPolarChart),
 					createVNode(ChartsWrapper, mergeProps({
 						"responsive": responsive,
 						"onResize": handleResize,
 						"style": props.style,
 						"class": props.class,
-						"width": effectiveWidth,
-						"height": effectiveHeight
-					}, eventHandlerAttrs), { default: () => [hasValidSize && createVNode(Surface_default, mergeProps(svgAttributes, {
-						"width": effectiveWidth,
-						"height": effectiveHeight,
+						"width": effectiveWidth.value,
+						"height": effectiveHeight.value
+					}, eventHandlerAttrs), { default: () => [hasValidSize.value && createVNode(Surface_default, mergeProps(svgAttributes, {
+						"width": effectiveWidth.value,
+						"height": effectiveHeight.value,
 						"title": title,
 						"desc": desc,
 						"style": FULL_WIDTH_AND_HEIGHT
 					}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] }), slots.tooltip?.()] }),
-					hasValidSize && createVNode(ReportChartProps_default, props, null)
+					hasValidSize.value && createVNode(ReportChartProps_default, props, null)
 				]);
 			};
 		}

package/dist/es/components/legend/Legend.mjs

@@ -12,7 +12,7 @@ var Legend_default = /* @__PURE__ */ defineComponent({
 	name: "Legend",
 	props: LegendVueProps,
 	setup(props, { slots }) {
-		const { legendRef, processedPayload, outerStyle, legendPortal, syncSettings, syncSize } = useLegend(props);
+		const { legendRef, processedPayload, outerStyle, legendPortal, resolvedLayout, positionViewBox, syncSettings, syncSize } = useLegend(props);
 		const { getItemStyle, getSvgStyle, formatValue, handleClick, handleMouseEnter, handleMouseLeave } = useLegendContent(props);
 		watchEffect(() => {
 			syncSettings();
@@ -20,7 +20,8 @@ var Legend_default = /* @__PURE__ */ defineComponent({
 		});
 		const renderDefaultContent = () => {
 			if (!processedPayload.value || processedPayload.value.length === 0) return null;
-			const { layout = "horizontal", align = "center", iconSize = 14 } = props;
+			const { align = "center", iconSize = 14 } = props;
+			const layout = resolvedLayout.value;
 			const finalStyle = {
 				padding: 0,
 				margin: 0,
@@ -73,13 +74,14 @@ var Legend_default = /* @__PURE__ */ defineComponent({
 			if (!processedPayload.value || processedPayload.value.length === 0) return null;
 			const contentProps = {
 				...props,
+				layout: resolvedLayout.value,
 				payload: processedPayload.value
 			};
 			if (slots.content) return slots.content(contentProps);
 			return renderDefaultContent();
 		};
 		return () => {
-			if (legendPortal.value == null) return null;
+			if (legendPortal.value == null || props.position != null && positionViewBox.value == null) return null;
 			const legendElement = createVNode("div", {
 				"class": "v-charts-legend-wrapper",
 				"style": outerStyle.value,

package/dist/es/components/legend/hooks/useLegend.mjs

@@ -1,10 +1,13 @@
 import { selectLegendPayload } from "../../../state/selectors/legendSelectors.mjs";
+import { getCartesianPosition, isOutsidePosition } from "../../../cartesian/getCartesianPosition.mjs";
 import { useAppDispatch, useAppSelector } from "../../../state/hooks.mjs";
-import { useChartHeight, useChartWidth, useMargin } from "../../../context/chartLayoutContext.mjs";
+import { useChartHeight, useChartWidth, useMargin, useViewBox } from "../../../context/chartLayoutContext.mjs";
 import { setLegendSettings, setLegendSize } from "../../../state/legendSlice.mjs";
 import { useLegendPortal } from "../../../chart/LegendPortalContext.mjs";
+import { selectLegendArea } from "../../../state/selectors/selectLegendArea.mjs";
 import { getUniqPayload } from "../../../utils/payload/getUniqPayload.mjs";
-import { defaultUniqBy, getDefaultPosition, getWidthOrHeight } from "../utils.mjs";
+import { cartesianPositionToCSSTranslate } from "../../../cartesian/cartesianPositionToCSSTranslate.mjs";
+import { defaultUniqBy, getDefaultPosition, getLayoutForPosition, getOutsidePositionOffset, getWidthOrHeight } from "../utils.mjs";
 import { computed, ref } from "vue";
 import { sortBy } from "es-toolkit/compat";
 import { useElementBounding } from "@vueuse/core";
@@ -16,14 +19,22 @@ function useLegend(props) {
 	const margin = useMargin();
 	const chartWidth = useChartWidth();
 	const chartHeight = useChartHeight();
+	const viewBox = useViewBox();
+	const legendArea = useAppSelector(selectLegendArea);
 	const legendRef = ref();
 	const { width: boundingWidth, height: boundingHeight } = useElementBounding(legendRef);
+	const resolvedLayout = computed(() => props.layout && props.layout !== "auto" ? props.layout : getLayoutForPosition(props.position));
 	const maxWidth = computed(() => chartWidth.value - (margin.value.left || 0) - (margin.value.right || 0));
-	const widthOrHeight = computed(() => getWidthOrHeight(props.layout, props.height, props.width, maxWidth.value));
+	const widthOrHeight = computed(() => getWidthOrHeight(resolvedLayout.value, props.height, props.width, maxWidth.value));
 	const boundingBox = computed(() => ({
 		width: boundingWidth.value,
 		height: boundingHeight.value
 	}));
+	const positionViewBox = computed(() => {
+		if (props.position == null) return null;
+		return isOutsidePosition(props.position) ? legendArea.value : viewBox.value;
+	});
+	const shouldReportDimensions = computed(() => props.portal == null && (props.position == null || isOutsidePosition(props.position)));
 	const processedPayload = computed(() => {
 		if (!contextPayload.value || contextPayload.value.length === 0) return [];
 		let finalPayload = getUniqPayload(contextPayload.value, props.payloadUniqBy, defaultUniqBy);
@@ -33,30 +44,58 @@ function useLegend(props) {
 		}
 		return Array.from(finalPayload);
 	});
+	const positionStyle = computed(() => {
+		if (props.position == null || positionViewBox.value == null) return;
+		const positionResult = getCartesianPosition({
+			viewBox: positionViewBox.value,
+			position: props.position,
+			offset: props.offset ?? 0
+		});
+		const outsidePositionOffset = getOutsidePositionOffset(props.position, props.offset ?? 0, boundingBox.value);
+		const positionMaxWidth = resolvedLayout.value === "vertical" ? (positionViewBox.value.width ?? 0) / 2 : positionViewBox.value.width ?? 0;
+		const positionMaxHeight = resolvedLayout.value === "horizontal" ? (positionViewBox.value.height ?? 0) / 2 : positionViewBox.value.height ?? 0;
+		return {
+			width: "max-content",
+			height: "max-content",
+			maxWidth: `${positionMaxWidth}px`,
+			maxHeight: `${positionMaxHeight}px`,
+			overflowY: "auto",
+			top: `${positionResult.y + (outsidePositionOffset.top ?? 0)}px`,
+			left: `${positionResult.x + (outsidePositionOffset.left ?? 0)}px`,
+			transform: cartesianPositionToCSSTranslate(positionResult.horizontalAnchor, positionResult.verticalAnchor)
+		};
+	});
 	const outerStyle = computed(() => {
 		const userStyle = props.wrapperStyle ? { ...props.wrapperStyle } : {};
 		if (props.portal) return userStyle;
 		const baseStyle = {
 			position: "absolute",
-			width: widthOrHeight.value?.width ? `${widthOrHeight.value.width}px` : props.width ? `${props.width}px` : "auto",
-			height: widthOrHeight.value?.height ? `${widthOrHeight.value.height}px` : props.height ? `${props.height}px` : "auto"
+			width: widthOrHeight.value?.width || props.width || "auto",
+			height: widthOrHeight.value?.height || props.height || "auto"
 		};
-		const positionStyle = getDefaultPosition(userStyle, props, margin.value, chartWidth.value, chartHeight.value, boundingBox.value);
+		const calculatedPositionStyle = positionStyle.value ?? getDefaultPosition(userStyle, {
+			layout: resolvedLayout.value,
+			align: props.align,
+			verticalAlign: props.verticalAlign
+		}, margin.value, chartWidth.value, chartHeight.value, boundingBox.value);
 		return {
 			...baseStyle,
-			...positionStyle,
+			...calculatedPositionStyle,
 			...userStyle
 		};
 	});
 	const legendPortal = computed(() => props.portal ?? legendPortalFromContext?.value);
 	const syncSettings = () => {
 		dispatch(setLegendSettings({
-			layout: props.layout,
+			layout: resolvedLayout.value,
 			align: props.align,
-			verticalAlign: props.verticalAlign
+			verticalAlign: props.verticalAlign,
+			position: props.position,
+			offset: props.offset
 		}));
 	};
 	const syncSize = () => {
+		if (!shouldReportDimensions.value) return;
 		dispatch(setLegendSize({
 			width: boundingBox.value.width,
 			height: boundingBox.value.height
@@ -69,6 +108,8 @@ function useLegend(props) {
 		processedPayload,
 		outerStyle,
 		legendPortal,
+		resolvedLayout,
+		positionViewBox,
 		syncSettings,
 		syncSize
 	};

package/dist/es/components/legend/type.mjs

@@ -2,7 +2,7 @@
 var LegendVueProps = {
 	layout: {
 		type: String,
-		default: "horizontal"
+		default: "auto"
 	},
 	align: {
 		type: String,
@@ -12,6 +12,14 @@ var LegendVueProps = {
 		type: String,
 		default: "bottom"
 	},
+	position: {
+		type: [String, Object],
+		default: void 0
+	},
+	offset: {
+		type: Number,
+		default: 0
+	},
 	width: Number,
 	height: Number,
 	iconSize: {

package/dist/es/components/legend/utils.mjs

@@ -1,5 +1,16 @@
 import { isNumber } from "../../utils/validate.mjs";
 //#region src/components/legend/utils.ts
+function getLayoutForPosition(position) {
+	if (position === "left" || position === "right" || position === "insideLeft" || position === "insideRight") return "vertical";
+	return "horizontal";
+}
+function getOutsidePositionOffset(position, offset, box) {
+	if (position === "top") return { top: box.height + offset };
+	if (position === "bottom") return { top: -box.height - offset };
+	if (position === "left") return { left: box.width + offset };
+	if (position === "right") return { left: -box.width - offset };
+	return {};
+}
 function getDefaultPosition(style, props, margin, chartWidth, chartHeight, box) {
 	const { layout, align, verticalAlign } = props;
 	let hPos = {};
@@ -22,4 +33,4 @@ function defaultUniqBy(entry) {
 	return entry.value;
 }
 //#endregion
-export { defaultUniqBy, getDefaultPosition, getWidthOrHeight };
+export { defaultUniqBy, getDefaultPosition, getLayoutForPosition, getOutsidePositionOffset, getWidthOrHeight };

package/dist/es/container/ResponsiveContainer.vue_vue_type_script_setup_true_lang.mjs

@@ -1,5 +1,6 @@
 import { isPercent } from "../utils/validate.mjs";
 import { normalizeStyle as normalizeStyle$1 } from "../utils/style.mjs";
+import { useRoundedSize } from "../hooks/useRoundedSize.mjs";
 import { provideSizeContext } from "./useSizeContext.mjs";
 import { Fragment, cloneVNode, computed, createElementBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, toRef, useSlots } from "vue";
 import { useThrottleFn } from "@vueuse/core";
@@ -30,7 +31,7 @@ var ResponsiveContainer_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 		const props = __props;
 		const slots = useSlots();
 		const debounce = toRef(props, "debounce");
-		const sizes = ref({
+		const { size: sizes, setSize: setContainerSize } = useRoundedSize({
 			width: props.initialDimension.width,
 			height: props.initialDimension.height
 		});
@@ -57,16 +58,6 @@ var ResponsiveContainer_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 			calculatedWidth: finalCalculatedWidth,
 			calculatedHeight
 		});
-		function setContainerSize(width, height) {
-			const roundedWidth = Math.round(width);
-			const roundedHeight = Math.round(height);
-			const { width: containerWidth, height: containerHeight } = sizes.value;
-			if (containerWidth === roundedWidth && containerHeight === roundedHeight) return;
-			sizes.value = {
-				width: roundedWidth,
-				height: roundedHeight
-			};
-		}
 		const handleResize = useThrottleFn((entries) => {
 			const { width: containerWidth, height: containerHeight } = entries[0].contentRect;
 			setContainerSize(containerWidth, containerHeight);

package/dist/es/hooks/useResponsiveSize.mjs

@@ -0,0 +1,27 @@
+import { validateWidthHeight } from "../utils/validate.mjs";
+import { useRoundedSize } from "./useRoundedSize.mjs";
+import { computed } from "vue";
+//#region src/hooks/useResponsiveSize.ts
+/**
+* Owns the chart's size resolution: in responsive mode the size is measured
+* from the wrapper div (via `handleResize`), otherwise it comes from props.
+*
+* Render gating (`return null` when the size is invalid) stays with the
+* caller — the rules differ between the compact and normal branches.
+*/
+function useResponsiveSize(props) {
+	const { size: responsiveSize, setSize: handleResize } = useRoundedSize();
+	const effectiveWidth = computed(() => props.responsive ? responsiveSize.value.width : props.width ?? 0);
+	const effectiveHeight = computed(() => props.responsive ? responsiveSize.value.height : props.height ?? 0);
+	return {
+		effectiveWidth,
+		effectiveHeight,
+		hasValidSize: computed(() => validateWidthHeight({
+			width: effectiveWidth.value,
+			height: effectiveHeight.value
+		})),
+		handleResize
+	};
+}
+//#endregion
+export { useResponsiveSize };

package/dist/es/hooks/useRoundedSize.mjs

@@ -0,0 +1,31 @@
+import { ref } from "vue";
+//#region src/hooks/useRoundedSize.ts
+/**
+* Shared size-state core: a size ref plus a setter that rounds to
+* integers and ignores no-change updates.
+*
+* Adapters: `useResponsiveSize` (chart sizing) and `ResponsiveContainer`.
+* ResponsiveContainer is planned for removal (see ADR-0001); when it goes,
+* this module stays behind as the chart's size-state implementation.
+*/
+function useRoundedSize(initial = {
+	width: 0,
+	height: 0
+}) {
+	const size = ref(initial);
+	function setSize(width, height) {
+		const roundedWidth = Math.round(width);
+		const roundedHeight = Math.round(height);
+		if (size.value.width === roundedWidth && size.value.height === roundedHeight) return;
+		size.value = {
+			width: roundedWidth,
+			height: roundedHeight
+		};
+	}
+	return {
+		size,
+		setSize
+	};
+}
+//#endregion
+export { useRoundedSize };

package/dist/es/shape/Sector.mjs

@@ -1,6 +1,6 @@
 import { classProp } from "../types/common.mjs";
-import { RADIAN, polarToCartesian } from "../utils/polar.mjs";
 import { getPercentValue, mathSign } from "../utils/data.mjs";
+import { RADIAN, polarToCartesian } from "../utils/polar.mjs";
 import { createVNode, defineComponent, mergeProps } from "vue";
 //#region src/shape/Sector.tsx
 /**

package/dist/es/state/legendSlice.mjs

@@ -24,6 +24,8 @@ var legendSlice = createSlice({
 			state.settings.align = action.payload.align;
 			state.settings.layout = action.payload.layout;
 			state.settings.verticalAlign = action.payload.verticalAlign;
+			state.settings.position = action.payload.position;
+			state.settings.offset = action.payload.offset;
 		},
 		addLegendPayload(state, action) {
 			state.payload.push(castDraft(action.payload));

package/dist/es/state/selectors/axisSelectors.mjs

@@ -2,11 +2,11 @@ import { isCategoricalAxis, isNan, isNumOrStr, isNumber, isWellBehavedNumber } f
 import { selectChartDataWithIndexes, selectChartDataWithIndexesIfNotInPanorama } from "./dataSelectors.mjs";
 import { selectChartHeight, selectChartWidth } from "./containerSelectors.mjs";
 import { selectAllXAxes, selectAllYAxes } from "./selectAllAxes.mjs";
+import { getPercentValue, hasDuplicate, mathSign } from "../../utils/data.mjs";
 import { selectChartOffset } from "./selectChartOffset.mjs";
 import { selectBrushDimensions, selectBrushSettings } from "./brushSelectors.mjs";
 import { selectBarCategoryGap, selectChartName, selectStackOffsetType } from "./rootPropsSelectors.mjs";
 import { combineAxisRangeWithReverse } from "./combiners/combineAxisRangeWithReverse.mjs";
-import { getPercentValue, hasDuplicate, mathSign } from "../../utils/data.mjs";
 import { selectChartLayout } from "./common.mjs";
 import { selectAngleAxis, selectAngleAxisRange, selectRadiusAxis, selectRadiusAxisRange } from "./polarAxisSelectors.mjs";
 import { pickAxisType } from "./pickAxisType.mjs";

package/dist/es/state/selectors/barSelectors.mjs

@@ -1,8 +1,8 @@
 import { isNullish } from "../../utils/validate.mjs";
 import { selectChartDataWithIndexesIfNotInPanorama } from "./dataSelectors.mjs";
+import { getPercentValue } from "../../utils/data.mjs";
 import { selectChartOffset } from "./selectChartOffset.mjs";
 import { selectBarCategoryGap, selectBarGap, selectRootBarSize, selectRootMaxBarSize } from "./rootPropsSelectors.mjs";
-import { getPercentValue } from "../../utils/data.mjs";
 import { selectChartLayout } from "./common.mjs";
 import { getBandSizeOfAxis } from "../../utils/chart.mjs";
 import { selectAxisWithScale, selectCartesianAxisSize, selectStackGroups, selectTicksOfGraphicalItem, selectUnfilteredCartesianItems } from "./axisSelectors.mjs";

package/dist/es/state/selectors/pieSelectors.mjs

@@ -1,8 +1,8 @@
 import { isNumber } from "../../utils/validate.mjs";
 import { selectChartDataAndAlwaysIgnoreIndexes } from "./dataSelectors.mjs";
+import { getPercentValue, mathSign } from "../../utils/data.mjs";
 import { selectChartOffset } from "./selectChartOffset.mjs";
 import { getMaxRadius, polarToCartesian } from "../../utils/polar.mjs";
-import { getPercentValue, mathSign } from "../../utils/data.mjs";
 import { getValueByDataKey } from "../../utils/chart.mjs";
 import { selectUnfilteredPolarItems } from "./polarSelectors.mjs";
 import { createSelector } from "@reduxjs/toolkit";

package/dist/es/state/selectors/polarAxisSelectors.mjs

@@ -1,8 +1,8 @@
 import { selectChartHeight, selectChartWidth } from "./containerSelectors.mjs";
+import { getPercentValue } from "../../utils/data.mjs";
 import { selectChartOffset } from "./selectChartOffset.mjs";
 import { combineAxisRangeWithReverse } from "./combiners/combineAxisRangeWithReverse.mjs";
 import { getMaxRadius } from "../../utils/polar.mjs";
-import { getPercentValue } from "../../utils/data.mjs";
 import { selectChartLayout } from "./common.mjs";
 import { createSelector } from "@reduxjs/toolkit";
 //#region src/state/selectors/polarAxisSelectors.ts

package/dist/es/state/selectors/radialBarSelectors.mjs

@@ -1,7 +1,7 @@
 import { isCategoricalAxis, isNullish } from "../../utils/validate.mjs";
 import { selectChartDataAndAlwaysIgnoreIndexes, selectChartDataWithIndexes } from "./dataSelectors.mjs";
-import { selectBarCategoryGap, selectBarGap, selectRootBarSize, selectRootMaxBarSize, selectStackOffsetType } from "./rootPropsSelectors.mjs";
 import { mathSign } from "../../utils/data.mjs";
+import { selectBarCategoryGap, selectBarGap, selectRootBarSize, selectRootMaxBarSize, selectStackOffsetType } from "./rootPropsSelectors.mjs";
 import { selectChartLayout } from "./common.mjs";
 import { selectAngleAxis, selectPolarViewBox, selectRadiusAxis } from "./polarAxisSelectors.mjs";
 import { getBandSizeOfAxis, getBaseValueOfBar, getCateCoordinateOfBar, getValueByDataKey, truncateByDomain } from "../../utils/chart.mjs";

package/dist/es/state/selectors/selectLegendArea.mjs

@@ -0,0 +1,19 @@
+import { selectChartHeight, selectChartWidth, selectMargin } from "./containerSelectors.mjs";
+import { createSelector } from "@reduxjs/toolkit";
+//#region src/state/selectors/selectLegendArea.ts
+/**
+* The margin-inset chart area. Outside-positioned legends are placed here,
+* beyond any axes.
+*/
+var selectLegendArea = createSelector([
+	selectChartWidth,
+	selectChartHeight,
+	selectMargin
+], (chartWidth, chartHeight, margin) => ({
+	x: margin?.left || 0,
+	y: margin?.top || 0,
+	width: Math.max(chartWidth - (margin?.left || 0) - (margin?.right || 0), 0),
+	height: Math.max(chartHeight - (margin?.top || 0) - (margin?.bottom || 0), 0)
+}));
+//#endregion
+export { selectLegendArea };

package/dist/es/state/selectors/tooltipSelectors.mjs

@@ -1,10 +1,10 @@
 import { isCategoricalAxis } from "../../utils/validate.mjs";
 import { selectChartDataWithIndexes } from "./dataSelectors.mjs";
 import { selectChartHeight, selectChartWidth } from "./containerSelectors.mjs";
+import { findEntryInArray, mathSign } from "../../utils/data.mjs";
 import { selectChartOffset } from "./selectChartOffset.mjs";
 import { selectChartName, selectStackOffsetType } from "./rootPropsSelectors.mjs";
 import { combineAxisRangeWithReverse } from "./combiners/combineAxisRangeWithReverse.mjs";
-import { findEntryInArray, mathSign } from "../../utils/data.mjs";
 import { selectChartLayout } from "./common.mjs";
 import { getTooltipEntry, getValueByDataKey } from "../../utils/chart.mjs";
 import { combineAppliedNumericalValuesIncludingErrorValues, combineAppliedValues, combineAreasDomain, combineAxisDomain, combineAxisDomainWithNiceTicks, combineCategoricalDomain, combineDisplayedData, combineDomainOfStackGroups, combineDotsDomain, combineDuplicateDomain, combineGraphicalItemsData, combineGraphicalItemsSettings, combineLinesDomain, combineNiceTicks, combineNumericalDomain, combineRealScaleType, combineScaleFunction, combineStackGroups, filterGraphicalNotStackedItems, filterReferenceElements, getDomainDefinition, itemAxisPredicate, mergeDomains, selectAxisRange, selectAxisSettings, selectHasBar, selectReferenceAreas, selectReferenceDots, selectReferenceLines } from "./axisSelectors.mjs";

package/dist/es/utils/chart.mjs

@@ -1,6 +1,6 @@
 import { isNan, isNullish, isNumOrStr, isNumber } from "./validate.mjs";
-import { formatAngleOfSector, getAngleOfPoint, polarToCartesian, reverseFormatAngleOfSector } from "./polar.mjs";
 import { findEntryInArray, mathSign } from "./data.mjs";
+import { formatAngleOfSector, getAngleOfPoint, polarToCartesian, reverseFormatAngleOfSector } from "./polar.mjs";
 import { toRaw } from "vue";
 import { stack, stackOffsetExpand, stackOffsetNone, stackOffsetSilhouette, stackOffsetWiggle, stackOrderNone } from "victory-vendor/d3-shape";
 import { get, isNaN, sortBy } from "lodash-es";

package/dist/es/utils/legend.mjs

@@ -1,9 +1,31 @@
 import { isNumber } from "./validate.mjs";
+import { isOutsidePosition } from "../cartesian/getCartesianPosition.mjs";
 //#region src/utils/legend.ts
 function appendOffsetOfLegend(offset, legendSettings, legendSize) {
 	if (legendSettings && legendSize) {
 		const { width: boxWidth, height: boxHeight } = legendSize;
-		const { align, verticalAlign, layout } = legendSettings;
+		const { align, verticalAlign, layout, position, offset: legendOffset = 0 } = legendSettings;
+		if (position != null) {
+			if (isOutsidePosition(position)) {
+				if (position === "top" && isNumber(offset.top)) return {
+					...offset,
+					top: offset.top + (boxHeight || 0) + legendOffset
+				};
+				if (position === "bottom" && isNumber(offset.bottom)) return {
+					...offset,
+					bottom: offset.bottom + (boxHeight || 0) + legendOffset
+				};
+				if (position === "left" && isNumber(offset.left)) return {
+					...offset,
+					left: offset.left + (boxWidth || 0) + legendOffset
+				};
+				if (position === "right" && isNumber(offset.right)) return {
+					...offset,
+					right: offset.right + (boxWidth || 0) + legendOffset
+				};
+			}
+			return offset;
+		}
 		if ((layout === "vertical" || layout === "horizontal" && verticalAlign === "middle") && align !== "center" && isNumber(offset[align])) return {
 			...offset,
 			[align]: offset[align] + (boxWidth || 0)

package/dist/hooks/useResponsiveSize.d.ts

@@ -0,0 +1,22 @@
+import { ComputedRef } from 'vue';
+import { CategoricalChartPropsWithOutSvg } from '../chart/generateCategoricalChart';
+type ResponsiveSizeProps = Pick<CategoricalChartPropsWithOutSvg, 'responsive' | 'width' | 'height'>;
+interface UseResponsiveSizeResult {
+    /** Final width: measured from the wrapper when `responsive`, otherwise from props. */
+    effectiveWidth: ComputedRef<number>;
+    /** Final height: measured from the wrapper when `responsive`, otherwise from props. */
+    effectiveHeight: ComputedRef<number>;
+    /** Whether the effective size passes validateWidthHeight. Render policy is the caller's decision. */
+    hasValidSize: ComputedRef<boolean>;
+    /** Feeds the wrapper's ResizeObserver callback. Rounds and ignores no-change updates. */
+    handleResize: (width: number, height: number) => void;
+}
+/**
+ * Owns the chart's size resolution: in responsive mode the size is measured
+ * from the wrapper div (via `handleResize`), otherwise it comes from props.
+ *
+ * Render gating (`return null` when the size is invalid) stays with the
+ * caller — the rules differ between the compact and normal branches.
+ */
+export declare function useResponsiveSize(props: ResponsiveSizeProps): UseResponsiveSizeResult;
+export {};

package/dist/hooks/useRoundedSize.d.ts

@@ -0,0 +1,22 @@
+export interface RoundedSize {
+    width: number;
+    height: number;
+}
+/**
+ * Shared size-state core: a size ref plus a setter that rounds to
+ * integers and ignores no-change updates.
+ *
+ * Adapters: `useResponsiveSize` (chart sizing) and `ResponsiveContainer`.
+ * ResponsiveContainer is planned for removal (see ADR-0001); when it goes,
+ * this module stays behind as the chart's size-state implementation.
+ */
+export declare function useRoundedSize(initial?: RoundedSize): {
+    size: import('vue').Ref<{
+        width: number;
+        height: number;
+    }, RoundedSize | {
+        width: number;
+        height: number;
+    }>;
+    setSize: (width: number, height: number) => void;
+};

package/dist/state/legendSlice.d.ts

@@ -1,9 +1,12 @@
 import { HorizontalAlignmentType, LegendPayload, VerticalAlignmentType } from '../components/DefaultLegendContent';
+import { CartesianPosition } from '../cartesian/getCartesianPosition';
 import { LayoutType, Size } from '../types';
 export type LegendSettings = {
     layout: LayoutType;
     align: HorizontalAlignmentType;
     verticalAlign: VerticalAlignmentType;
+    position?: CartesianPosition;
+    offset?: number;
 };
 /**
  * The properties inside this state update independently of each other and quite often.

package/dist/state/selectors/selectLegendArea.d.ts

@@ -0,0 +1,7 @@
+import { CartesianViewBoxRequired } from '../../cartesian/type';
+import { RechartsRootState } from '../store';
+/**
+ * The margin-inset chart area. Outside-positioned legends are placed here,
+ * beyond any axes.
+ */
+export declare const selectLegendArea: (state: RechartsRootState) => CartesianViewBoxRequired;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vccs",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Composable charting components for Vue 3 — an unofficial port of Recharts",
   "author": "rick-hup",
   "license": "MIT",