@xyflow/vue 2.0.0-next.0 → 2.0.0-next.2

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { CSSProperties, Component, ComputedRef, DefineComponent, HTMLAttributes, InjectionKey, MaybeRefOrGetter, SVGAttributes, ToRefs, VNode } from "vue";
-import { Align, AriaLabelConfig, AriaLabelConfig as AriaLabelConfig$1, ColorMode, ColorMode as ColorMode$1, ColorModeClass, Connection, Connection as Connection$1, ConnectionLineType, ConnectionLineType as ConnectionLineType$1, ConnectionMode, ConnectionMode as ConnectionMode$1, ControlLinePosition, ControlLinePosition as ControlLinePosition$1, ControlPosition, ControlPosition as ControlPosition$1, CoordinateExtent, CoordinateExtent as CoordinateExtent$1, Dimensions, Dimensions as Dimensions$1, DistributivePick, EdgeBase, EdgeRemoveChange, EdgeRemoveChange as EdgeRemoveChange$1, EdgeSelectionChange, EdgeSelectionChange as EdgeSelectionChange$1, FinalConnectionState, FinalConnectionState as FinalConnectionState$1, FitViewOptionsBase, FitViewOptionsBase as FitViewOptions, GetViewport, GetViewport as GetViewport$1, HandleType, HandleType as HandleType$1, InternalNodeBase, NodeBase, NodeConnection, NodeConnection as NodeConnection$1, NodeDimensionChange, NodeDimensionChange as NodeDimensionChange$1, NodePositionChange, NodePositionChange as NodePositionChange$1, NodeRemoveChange, NodeRemoveChange as NodeRemoveChange$1, NodeSelectionChange, NodeSelectionChange as NodeSelectionChange$1, Padding, Padding as Padding$1, PaddingUnit, PaddingWithUnit, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, PanZoomInstance, PanelPosition, Position, Position as Position$1, Project, Project as Project$1, Rect, Rect as Rect$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$1, ResizeControlVariant as ResizeControlVariant$2, ResizeDragEvent, ResizeDragEvent as ResizeDragEvent$1, ResizeParams, ResizeParams as ResizeParams$1, ResizeParamsWithDirection, ResizeParamsWithDirection as ResizeParamsWithDirection$1, SelectionMode, SelectionMode as SelectionMode$1, SelectionRect, SelectionRect as SelectionRect$1, SetCenter, SetCenter as SetCenter$1, SetCenterOptions, SetViewport, SetViewport as SetViewport$1, ShouldResize, ShouldResize as ShouldResize$1, SnapGrid, SnapGrid as SnapGrid$1, Transform, Viewport, Viewport as Viewport$1, ViewportHelperFunctionOptions, ViewportHelperFunctionOptions as ViewportHelperFunctionOptions$1, XYPosition, XYPosition as XYPosition$1, ZIndexMode, ZIndexMode as ZIndexMode$1, ZoomInOut, ZoomInOut as ZoomInOut$1, ZoomTo, ZoomTo as ZoomTo$1, clamp, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdgeBase, isInternalNodeBase, isMacOs, isNodeBase, pointToRendererPoint, rendererPointToPoint } from "@xyflow/system";
+import { Align, AriaLabelConfig, AriaLabelConfig as AriaLabelConfig$1, ColorMode, ColorMode as ColorMode$1, Connection, Connection as Connection$1, ConnectionLineType, ConnectionLineType as ConnectionLineType$1, ConnectionMode, ConnectionMode as ConnectionMode$1, ControlLinePosition, ControlLinePosition as ControlLinePosition$1, ControlPosition, ControlPosition as ControlPosition$1, CoordinateExtent, CoordinateExtent as CoordinateExtent$1, Dimensions, Dimensions as Dimensions$1, DistributivePick, EdgeBase, EdgeRemoveChange, EdgeRemoveChange as EdgeRemoveChange$1, EdgeSelectionChange, EdgeSelectionChange as EdgeSelectionChange$1, FinalConnectionState, FinalConnectionState as FinalConnectionState$1, FitViewOptionsBase, FitViewOptionsBase as FitViewOptions, GetViewport, GetViewport as GetViewport$1, HandleType, HandleType as HandleType$1, InternalNodeBase, NodeBase, NodeConnection, NodeConnection as NodeConnection$1, NodeDimensionChange, NodeDimensionChange as NodeDimensionChange$1, NodePositionChange, NodePositionChange as NodePositionChange$1, NodeRemoveChange, NodeRemoveChange as NodeRemoveChange$1, NodeSelectionChange, NodeSelectionChange as NodeSelectionChange$1, Padding, Padding as Padding$1, PaddingUnit, PaddingWithUnit, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, PanZoomInstance, PanelPosition, Position, Position as Position$1, Project, Project as Project$1, Rect, Rect as Rect$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$1, ResizeControlVariant as ResizeControlVariant$2, ResizeDragEvent, ResizeDragEvent as ResizeDragEvent$1, ResizeParams, ResizeParams as ResizeParams$1, ResizeParamsWithDirection, ResizeParamsWithDirection as ResizeParamsWithDirection$1, SelectionMode, SelectionMode as SelectionMode$1, SelectionRect, SelectionRect as SelectionRect$1, SetCenter, SetCenter as SetCenter$1, SetCenterOptions, SetViewport, SetViewport as SetViewport$1, ShouldResize, ShouldResize as ShouldResize$1, SnapGrid, SnapGrid as SnapGrid$1, Transform, Viewport, Viewport as Viewport$1, ViewportHelperFunctionOptions, ViewportHelperFunctionOptions as ViewportHelperFunctionOptions$1, XYPosition, XYPosition as XYPosition$1, ZIndexMode, ZIndexMode as ZIndexMode$1, ZoomInOut, ZoomInOut as ZoomInOut$1, ZoomTo, ZoomTo as ZoomTo$1, clamp, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdgeBase, isInternalNodeBase, isMacOs, isNodeBase, pointToRendererPoint, rendererPointToPoint } from "@xyflow/system";
 import { KeyFilter } from "@vueuse/core";
 
 //#region src/components/Background/types.d.ts
@@ -75,8 +75,8 @@ declare const _default: typeof __VLS_export$14;
 declare const __VLS_export$14: __VLS_WithSlots$10<import("vue").DefineComponent<BackgroundProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BackgroundProps> & Readonly<{}>, {
   x: number;
   y: number;
-  offset: number | [number, number];
   size: number;
+  offset: number | [number, number];
   variant: BackgroundVariant;
   gap: number | number[];
   lineWidth: number;
@@ -671,7 +671,6 @@ interface State<NodeType extends Node = Node, EdgeType extends Edge = Edge> exte
   translateExtent: CoordinateExtent$1;
   nodeExtent: CoordinateExtent$1;
   nodeOrigin: NodeOrigin;
-  colorMode: ColorMode$1;
   /** viewport dimensions - do not change! */
   readonly dimensions: Dimensions$1;
   /** canonical viewport transform `[x, y, zoom]` (the `@xyflow/system` representation) - do not change! Read `viewport` for the `{ x, y, zoom }` shape. */
@@ -1212,8 +1211,8 @@ interface FlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
   nodeExtent?: CoordinateExtent$1;
   /** origin of all nodes relative to their position — `[0, 0]` top-left, `[0.5, 0.5]` center, `[1, 1]` bottom-right */
   nodeOrigin?: NodeOrigin;
-  /** light/dark/system — applies the resolved `light`/`dark` class to the flow container; `system` follows `prefers-color-scheme` @default 'light' */
-  colorMode?: ColorMode$1;
+  /** Forces a color scheme on the flow container via class name. Page-level theming is typically done by setting `data-theme` on `<html>`. */
+  forceColorMode?: ColorMode$1;
   /** color of edge markers; pass `null` to drive the arrowhead color from the `--xy-edge-stroke` CSS variable @default '#b1b1b7' */
   defaultMarkerColor?: string | null;
   zoomOnScroll?: boolean;
@@ -1359,14 +1358,14 @@ interface FlowEmits<NodeType extends Node = Node, EdgeType extends Edge = Edge>
   nodeDrag: [nodeDragEvent: NodeDragEvent<NodeType>];
   nodeDragStop: [nodeDragEvent: NodeDragEvent<NodeType>];
 }
-type NodeByType<NodeType extends Node, T extends string> = NodeType extends any ? (T extends NonNullable<NodeType['type']> ? NodeType : never) : never;
-type EdgeByType<EdgeType extends Edge, T extends string> = EdgeType extends any ? (T extends NonNullable<EdgeType['type']> ? EdgeType : never) : never;
+type NodeByType<NodeType extends Node, T extends string> = NodeType extends any ? T extends NonNullable<NodeType['type']> ? NodeType : never : never;
+type EdgeByType<EdgeType extends Edge, T extends string> = EdgeType extends any ? T extends NonNullable<EdgeType['type']> ? EdgeType : never : never;
 type NodeSlots<NodeType extends Node = Node> = Partial<{ [T in NonNullable<NodeType['type']> as `node-${T}`]: (nodeProps: NodeProps<NodeByType<NodeType, T>>) => any } & Record<`node-${string}`, (nodeProps: NodeProps<NodeType>) => any>>;
 type EdgeSlots<EdgeType extends Edge = Edge> = Partial<{ [T in NonNullable<EdgeType['type']> as `edge-${T}`]: (edgeProps: EdgeProps<EdgeByType<EdgeType, T>>) => any } & Record<`edge-${string}`, (edgeProps: EdgeProps<EdgeType>) => any>>;
 type FlowSlots<NodeType extends Node = Node, EdgeType extends Edge = Edge> = NodeSlots<NodeType> & EdgeSlots<EdgeType> & {
   'connection-line'?: (connectionLineProps: ConnectionLineProps<NodeType>) => any;
   'zoom-pane'?: () => any;
-  'default'?: () => any;
+  default?: () => any;
 };
 //#endregion
 //#region src/types/node.d.ts
@@ -2204,5 +2203,5 @@ declare const NodeId: InjectionKey<string>;
 declare const defaultNodeTypes: DefaultNodeTypes;
 declare const defaultEdgeTypes: DefaultEdgeTypes;
 //#endregion
-export { Actions, AddEdges, AddNodes, type Align, type AriaLabelConfig, _default as Background, BackgroundProps, BackgroundVariant, _default$1 as BaseEdge, BaseEdgeProps, BezierEdge, BezierEdgeProps, BezierEdgeType, BezierPathOptions, BuiltInNode, CSSVars, ClassValue, type ColorMode, type ColorModeClass, ComputedGetters, ConnectEndEvent, ConnectingHandle, type Connection, ConnectionInProgress, ConnectionLineOptions, ConnectionLineProps, ConnectionLineType, ConnectionLookup, ConnectionMode, ConnectionState, ConnectionStatus, Connector, _default$2 as ControlButton, ControlEmits, type ControlLinePosition, type ControlPosition, ControlProps, _default$3 as Controls, type CoordinateExtent, CustomThemeVars, DefaultEdge, DefaultEdgeOptions, DefaultEdgeTypes, DefaultNodeTypes, DeleteElements, type Dimensions, Edge, EdgeAddChange, EdgeChange, EdgeComponent, EdgeEventsHandler, EdgeEventsOn, EdgeLabelOptions, _default$4 as EdgeLabelRenderer, EdgeLookup, EdgeMarker, EdgeMarkerType, EdgeMouseEvent, EdgePositions, EdgeProps, EdgeReconnectEndEvent, EdgeReconnectEvent, EdgeReconnectStartEvent, EdgeReconnectable, type EdgeRemoveChange, type EdgeSelectionChange, EdgeSlots, _default$5 as EdgeText, EdgeTextProps, EdgeTypesObject, ElementChange, ErrorCode, type FinalConnectionState, FitBounds, FitBoundsOptions, FitView, type FitViewOptions, FlowEmits, FlowEvents, FlowExportObject, FlowHooks, FlowHooksEmit, FlowHooksOn, FlowOptions, FlowProps, FlowSlots, GetEdge, GetInternalNode, GetIntersectingNodes, GetNode, type GetViewport, Getters, _default$6 as Handle, HandleConnectable, HandleConnectableFunc, HandleElement, HandleProps, type HandleType, InternalNode, IsNodeIntersecting, IsValidParams, MarkerProps, MarkerType, _default$7 as MiniMap, MiniMapEmits, _default$8 as MiniMapNode, MiniMapNodeEmits, MiniMapNodeFunc, MiniMapNodeProps, MiniMapProps, MiniMapSlots, MouseTouchEvent, NoConnection, Node, NodeAddChange, NodeChange, NodeComponent, type NodeConnection, type NodeDimensionChange, NodeDragEvent, NodeDragItem, NodeEventsHandler, NodeEventsOn, NodeHandleBounds, NodeId as NodeIdInjection, NodeLookup, NodeMouseEvent, NodeOrigin, type NodePositionChange, NodeProps, type NodeRemoveChange, _default$9 as NodeResizeControl, _default$10 as NodeResizer, NodeResizerEmits, NodeResizerProps, type NodeSelectionChange, NodeSlots, _default$11 as NodeToolbar, NodeToolbarProps, NodeTypesObject, OnBeforeDelete, OnConnectStartParams, OnResize, OnResizeEnd, OnResizeStart, type Padding, type PaddingUnit, type PaddingWithUnit, PanOnScrollMode, _default$12 as Panel, PanelProps, Position, type Project, ReconnectEdge, type Rect, RemoveEdges, RemoveNodes, ResizeControlLineProps, ResizeControlProps, ResizeControlVariant, type ResizeDragEvent, type ResizeParams, type ResizeParamsWithDirection, Result, SelectionChangeEvent, SelectionMode, type SelectionRect, type SetCenter, type SetCenterOptions, SetEdges, SetNodes, SetState, SetStateOptions, type SetViewport, ShapeRendering, type ShouldResize, SimpleBezierEdge, SimpleBezierEdgeProps, Slots, SmoothStepEdge, SmoothStepEdgeProps, SmoothStepEdgeType, SmoothStepPathOptions, type SnapGrid, State, StepEdge, StepEdgeProps, StraightEdge, StraightEdgeProps, Styles, ThemeVars, UpdateEdge, UpdateEdgeData, UpdateNode, UpdateNodeData, UpdateNodeDimensions, UpdateNodeDimensionsParams, UpdateNodeInternals, UpdateNodePosition, ValidConnectionFunc, type Viewport, ViewportFunctions, type ViewportHelperFunctionOptions, _default$13 as VueFlow, VueFlowError, VueFlow as VueFlowInjection, VueFlowInstance, _default$14 as VueFlowProvider, VueFlowState, VueFlowStoreHandle, type XYPosition, type ZIndexMode, type ZoomInOut, type ZoomTo, applyChanges, applyEdgeChanges, applyNodeChanges, clamp, connectionExists, defaultEdgeTypes, defaultNodeTypes, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSimpleBezierPath, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdge, isEdgeBase, isErrorOfType, isInternalNode, isInternalNodeBase, isMacOs, isNode, isNodeBase, pointToRendererPoint, rendererPointToPoint, storeToRefs, useConnection, useEdge, useEdgesData, useHandle, useInternalNode, useKeyPress, useNode, useNodeConnections, useNodeId, useNodesData, useNodesInitialized, useStore, useVueFlow };
+export { Actions, AddEdges, AddNodes, type Align, type AriaLabelConfig, _default as Background, BackgroundProps, BackgroundVariant, _default$1 as BaseEdge, BaseEdgeProps, BezierEdge, BezierEdgeProps, BezierEdgeType, BezierPathOptions, BuiltInNode, CSSVars, ClassValue, type ColorMode, ComputedGetters, ConnectEndEvent, ConnectingHandle, type Connection, ConnectionInProgress, ConnectionLineOptions, ConnectionLineProps, ConnectionLineType, ConnectionLookup, ConnectionMode, ConnectionState, ConnectionStatus, Connector, _default$2 as ControlButton, ControlEmits, type ControlLinePosition, type ControlPosition, ControlProps, _default$3 as Controls, type CoordinateExtent, CustomThemeVars, DefaultEdge, DefaultEdgeOptions, DefaultEdgeTypes, DefaultNodeTypes, DeleteElements, type Dimensions, Edge, EdgeAddChange, EdgeChange, EdgeComponent, EdgeEventsHandler, EdgeEventsOn, EdgeLabelOptions, _default$4 as EdgeLabelRenderer, EdgeLookup, EdgeMarker, EdgeMarkerType, EdgeMouseEvent, EdgePositions, EdgeProps, EdgeReconnectEndEvent, EdgeReconnectEvent, EdgeReconnectStartEvent, EdgeReconnectable, type EdgeRemoveChange, type EdgeSelectionChange, EdgeSlots, _default$5 as EdgeText, EdgeTextProps, EdgeTypesObject, ElementChange, ErrorCode, type FinalConnectionState, FitBounds, FitBoundsOptions, FitView, type FitViewOptions, FlowEmits, FlowEvents, FlowExportObject, FlowHooks, FlowHooksEmit, FlowHooksOn, FlowOptions, FlowProps, FlowSlots, GetEdge, GetInternalNode, GetIntersectingNodes, GetNode, type GetViewport, Getters, _default$6 as Handle, HandleConnectable, HandleConnectableFunc, HandleElement, HandleProps, type HandleType, InternalNode, IsNodeIntersecting, IsValidParams, MarkerProps, MarkerType, _default$7 as MiniMap, MiniMapEmits, _default$8 as MiniMapNode, MiniMapNodeEmits, MiniMapNodeFunc, MiniMapNodeProps, MiniMapProps, MiniMapSlots, MouseTouchEvent, NoConnection, Node, NodeAddChange, NodeChange, NodeComponent, type NodeConnection, type NodeDimensionChange, NodeDragEvent, NodeDragItem, NodeEventsHandler, NodeEventsOn, NodeHandleBounds, NodeId as NodeIdInjection, NodeLookup, NodeMouseEvent, NodeOrigin, type NodePositionChange, NodeProps, type NodeRemoveChange, _default$9 as NodeResizeControl, _default$10 as NodeResizer, NodeResizerEmits, NodeResizerProps, type NodeSelectionChange, NodeSlots, _default$11 as NodeToolbar, NodeToolbarProps, NodeTypesObject, OnBeforeDelete, OnConnectStartParams, OnResize, OnResizeEnd, OnResizeStart, type Padding, type PaddingUnit, type PaddingWithUnit, PanOnScrollMode, _default$12 as Panel, PanelProps, Position, type Project, ReconnectEdge, type Rect, RemoveEdges, RemoveNodes, ResizeControlLineProps, ResizeControlProps, ResizeControlVariant, type ResizeDragEvent, type ResizeParams, type ResizeParamsWithDirection, Result, SelectionChangeEvent, SelectionMode, type SelectionRect, type SetCenter, type SetCenterOptions, SetEdges, SetNodes, SetState, SetStateOptions, type SetViewport, ShapeRendering, type ShouldResize, SimpleBezierEdge, SimpleBezierEdgeProps, Slots, SmoothStepEdge, SmoothStepEdgeProps, SmoothStepEdgeType, SmoothStepPathOptions, type SnapGrid, State, StepEdge, StepEdgeProps, StraightEdge, StraightEdgeProps, Styles, ThemeVars, UpdateEdge, UpdateEdgeData, UpdateNode, UpdateNodeData, UpdateNodeDimensions, UpdateNodeDimensionsParams, UpdateNodeInternals, UpdateNodePosition, ValidConnectionFunc, type Viewport, ViewportFunctions, type ViewportHelperFunctionOptions, _default$13 as VueFlow, VueFlowError, VueFlow as VueFlowInjection, VueFlowInstance, _default$14 as VueFlowProvider, VueFlowState, VueFlowStoreHandle, type XYPosition, type ZIndexMode, type ZoomInOut, type ZoomTo, applyChanges, applyEdgeChanges, applyNodeChanges, clamp, connectionExists, defaultEdgeTypes, defaultNodeTypes, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSimpleBezierPath, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdge, isEdgeBase, isErrorOfType, isInternalNode, isInternalNodeBase, isMacOs, isNode, isNodeBase, pointToRendererPoint, rendererPointToPoint, storeToRefs, useConnection, useEdge, useEdgesData, useHandle, useInternalNode, useKeyPress, useNode, useNodeConnections, useNodeId, useNodesData, useNodesInitialized, useStore, useVueFlow };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Align, AriaLabelConfig, AriaLabelConfig as AriaLabelConfig$1, ColorMode, ColorMode as ColorMode$1, ColorModeClass, Connection, Connection as Connection$1, ConnectionLineType, ConnectionLineType as ConnectionLineType$1, ConnectionMode, ConnectionMode as ConnectionMode$1, ControlLinePosition, ControlLinePosition as ControlLinePosition$1, ControlPosition, ControlPosition as ControlPosition$1, CoordinateExtent, CoordinateExtent as CoordinateExtent$1, Dimensions, Dimensions as Dimensions$1, DistributivePick, EdgeBase, EdgeRemoveChange, EdgeRemoveChange as EdgeRemoveChange$1, EdgeSelectionChange, EdgeSelectionChange as EdgeSelectionChange$1, FinalConnectionState, FinalConnectionState as FinalConnectionState$1, FitViewOptionsBase, FitViewOptionsBase as FitViewOptions, GetViewport, GetViewport as GetViewport$1, HandleType, HandleType as HandleType$1, InternalNodeBase, NodeBase, NodeConnection, NodeConnection as NodeConnection$1, NodeDimensionChange, NodeDimensionChange as NodeDimensionChange$1, NodePositionChange, NodePositionChange as NodePositionChange$1, NodeRemoveChange, NodeRemoveChange as NodeRemoveChange$1, NodeSelectionChange, NodeSelectionChange as NodeSelectionChange$1, Padding, Padding as Padding$1, PaddingUnit, PaddingWithUnit, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, PanZoomInstance, PanelPosition, Position, Position as Position$1, Project, Project as Project$1, Rect, Rect as Rect$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$1, ResizeControlVariant as ResizeControlVariant$2, ResizeDragEvent, ResizeDragEvent as ResizeDragEvent$1, ResizeParams, ResizeParams as ResizeParams$1, ResizeParamsWithDirection, ResizeParamsWithDirection as ResizeParamsWithDirection$1, SelectionMode, SelectionMode as SelectionMode$1, SelectionRect, SelectionRect as SelectionRect$1, SetCenter, SetCenter as SetCenter$1, SetCenterOptions, SetViewport, SetViewport as SetViewport$1, ShouldResize, ShouldResize as ShouldResize$1, SnapGrid, SnapGrid as SnapGrid$1, Transform, Viewport, Viewport as Viewport$1, ViewportHelperFunctionOptions, ViewportHelperFunctionOptions as ViewportHelperFunctionOptions$1, XYPosition, XYPosition as XYPosition$1, ZIndexMode, ZIndexMode as ZIndexMode$1, ZoomInOut, ZoomInOut as ZoomInOut$1, ZoomTo, ZoomTo as ZoomTo$1, clamp, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdgeBase, isInternalNodeBase, isMacOs, isNodeBase, pointToRendererPoint, rendererPointToPoint } from "@xyflow/system";
+import { Align, AriaLabelConfig, AriaLabelConfig as AriaLabelConfig$1, ColorMode, ColorMode as ColorMode$1, Connection, Connection as Connection$1, ConnectionLineType, ConnectionLineType as ConnectionLineType$1, ConnectionMode, ConnectionMode as ConnectionMode$1, ControlLinePosition, ControlLinePosition as ControlLinePosition$1, ControlPosition, ControlPosition as ControlPosition$1, CoordinateExtent, CoordinateExtent as CoordinateExtent$1, Dimensions, Dimensions as Dimensions$1, DistributivePick, EdgeBase, EdgeRemoveChange, EdgeRemoveChange as EdgeRemoveChange$1, EdgeSelectionChange, EdgeSelectionChange as EdgeSelectionChange$1, FinalConnectionState, FinalConnectionState as FinalConnectionState$1, FitViewOptionsBase, FitViewOptionsBase as FitViewOptions, GetViewport, GetViewport as GetViewport$1, HandleType, HandleType as HandleType$1, InternalNodeBase, NodeBase, NodeConnection, NodeConnection as NodeConnection$1, NodeDimensionChange, NodeDimensionChange as NodeDimensionChange$1, NodePositionChange, NodePositionChange as NodePositionChange$1, NodeRemoveChange, NodeRemoveChange as NodeRemoveChange$1, NodeSelectionChange, NodeSelectionChange as NodeSelectionChange$1, Padding, Padding as Padding$1, PaddingUnit, PaddingWithUnit, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, PanZoomInstance, PanelPosition, Position, Position as Position$1, Project, Project as Project$1, Rect, Rect as Rect$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$1, ResizeControlVariant as ResizeControlVariant$2, ResizeDragEvent, ResizeDragEvent as ResizeDragEvent$1, ResizeParams, ResizeParams as ResizeParams$1, ResizeParamsWithDirection, ResizeParamsWithDirection as ResizeParamsWithDirection$1, SelectionMode, SelectionMode as SelectionMode$1, SelectionRect, SelectionRect as SelectionRect$1, SetCenter, SetCenter as SetCenter$1, SetCenterOptions, SetViewport, SetViewport as SetViewport$1, ShouldResize, ShouldResize as ShouldResize$1, SnapGrid, SnapGrid as SnapGrid$1, Transform, Viewport, Viewport as Viewport$1, ViewportHelperFunctionOptions, ViewportHelperFunctionOptions as ViewportHelperFunctionOptions$1, XYPosition, XYPosition as XYPosition$1, ZIndexMode, ZIndexMode as ZIndexMode$1, ZoomInOut, ZoomInOut as ZoomInOut$1, ZoomTo, ZoomTo as ZoomTo$1, clamp, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdgeBase, isInternalNodeBase, isMacOs, isNodeBase, pointToRendererPoint, rendererPointToPoint } from "@xyflow/system";
 import { CSSProperties, Component, ComputedRef, DefineComponent, HTMLAttributes, InjectionKey, MaybeRefOrGetter, SVGAttributes, ToRefs, VNode } from "vue";
 import { KeyFilter } from "@vueuse/core";
 
@@ -75,8 +75,8 @@ declare const _default: typeof __VLS_export$14;
 declare const __VLS_export$14: __VLS_WithSlots$10<import("vue").DefineComponent<BackgroundProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BackgroundProps> & Readonly<{}>, {
   x: number;
   y: number;
-  offset: number | [number, number];
   size: number;
+  offset: number | [number, number];
   variant: BackgroundVariant;
   gap: number | number[];
   lineWidth: number;
@@ -671,7 +671,6 @@ interface State<NodeType extends Node = Node, EdgeType extends Edge = Edge> exte
   translateExtent: CoordinateExtent$1;
   nodeExtent: CoordinateExtent$1;
   nodeOrigin: NodeOrigin;
-  colorMode: ColorMode$1;
   /** viewport dimensions - do not change! */
   readonly dimensions: Dimensions$1;
   /** canonical viewport transform `[x, y, zoom]` (the `@xyflow/system` representation) - do not change! Read `viewport` for the `{ x, y, zoom }` shape. */
@@ -1212,8 +1211,8 @@ interface FlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
   nodeExtent?: CoordinateExtent$1;
   /** origin of all nodes relative to their position — `[0, 0]` top-left, `[0.5, 0.5]` center, `[1, 1]` bottom-right */
   nodeOrigin?: NodeOrigin;
-  /** light/dark/system — applies the resolved `light`/`dark` class to the flow container; `system` follows `prefers-color-scheme` @default 'light' */
-  colorMode?: ColorMode$1;
+  /** Forces a color scheme on the flow container via class name. Page-level theming is typically done by setting `data-theme` on `<html>`. */
+  forceColorMode?: ColorMode$1;
   /** color of edge markers; pass `null` to drive the arrowhead color from the `--xy-edge-stroke` CSS variable @default '#b1b1b7' */
   defaultMarkerColor?: string | null;
   zoomOnScroll?: boolean;
@@ -1359,14 +1358,14 @@ interface FlowEmits<NodeType extends Node = Node, EdgeType extends Edge = Edge>
   nodeDrag: [nodeDragEvent: NodeDragEvent<NodeType>];
   nodeDragStop: [nodeDragEvent: NodeDragEvent<NodeType>];
 }
-type NodeByType<NodeType extends Node, T extends string> = NodeType extends any ? (T extends NonNullable<NodeType['type']> ? NodeType : never) : never;
-type EdgeByType<EdgeType extends Edge, T extends string> = EdgeType extends any ? (T extends NonNullable<EdgeType['type']> ? EdgeType : never) : never;
+type NodeByType<NodeType extends Node, T extends string> = NodeType extends any ? T extends NonNullable<NodeType['type']> ? NodeType : never : never;
+type EdgeByType<EdgeType extends Edge, T extends string> = EdgeType extends any ? T extends NonNullable<EdgeType['type']> ? EdgeType : never : never;
 type NodeSlots<NodeType extends Node = Node> = Partial<{ [T in NonNullable<NodeType['type']> as `node-${T}`]: (nodeProps: NodeProps<NodeByType<NodeType, T>>) => any } & Record<`node-${string}`, (nodeProps: NodeProps<NodeType>) => any>>;
 type EdgeSlots<EdgeType extends Edge = Edge> = Partial<{ [T in NonNullable<EdgeType['type']> as `edge-${T}`]: (edgeProps: EdgeProps<EdgeByType<EdgeType, T>>) => any } & Record<`edge-${string}`, (edgeProps: EdgeProps<EdgeType>) => any>>;
 type FlowSlots<NodeType extends Node = Node, EdgeType extends Edge = Edge> = NodeSlots<NodeType> & EdgeSlots<EdgeType> & {
   'connection-line'?: (connectionLineProps: ConnectionLineProps<NodeType>) => any;
   'zoom-pane'?: () => any;
-  'default'?: () => any;
+  default?: () => any;
 };
 //#endregion
 //#region src/types/node.d.ts
@@ -2204,5 +2203,5 @@ declare const NodeId: InjectionKey<string>;
 declare const defaultNodeTypes: DefaultNodeTypes;
 declare const defaultEdgeTypes: DefaultEdgeTypes;
 //#endregion
-export { Actions, AddEdges, AddNodes, type Align, type AriaLabelConfig, _default as Background, BackgroundProps, BackgroundVariant, _default$1 as BaseEdge, BaseEdgeProps, BezierEdge, BezierEdgeProps, BezierEdgeType, BezierPathOptions, BuiltInNode, CSSVars, ClassValue, type ColorMode, type ColorModeClass, ComputedGetters, ConnectEndEvent, ConnectingHandle, type Connection, ConnectionInProgress, ConnectionLineOptions, ConnectionLineProps, ConnectionLineType, ConnectionLookup, ConnectionMode, ConnectionState, ConnectionStatus, Connector, _default$2 as ControlButton, ControlEmits, type ControlLinePosition, type ControlPosition, ControlProps, _default$3 as Controls, type CoordinateExtent, CustomThemeVars, DefaultEdge, DefaultEdgeOptions, DefaultEdgeTypes, DefaultNodeTypes, DeleteElements, type Dimensions, Edge, EdgeAddChange, EdgeChange, EdgeComponent, EdgeEventsHandler, EdgeEventsOn, EdgeLabelOptions, _default$4 as EdgeLabelRenderer, EdgeLookup, EdgeMarker, EdgeMarkerType, EdgeMouseEvent, EdgePositions, EdgeProps, EdgeReconnectEndEvent, EdgeReconnectEvent, EdgeReconnectStartEvent, EdgeReconnectable, type EdgeRemoveChange, type EdgeSelectionChange, EdgeSlots, _default$5 as EdgeText, EdgeTextProps, EdgeTypesObject, ElementChange, ErrorCode, type FinalConnectionState, FitBounds, FitBoundsOptions, FitView, type FitViewOptions, FlowEmits, FlowEvents, FlowExportObject, FlowHooks, FlowHooksEmit, FlowHooksOn, FlowOptions, FlowProps, FlowSlots, GetEdge, GetInternalNode, GetIntersectingNodes, GetNode, type GetViewport, Getters, _default$6 as Handle, HandleConnectable, HandleConnectableFunc, HandleElement, HandleProps, type HandleType, InternalNode, IsNodeIntersecting, IsValidParams, MarkerProps, MarkerType, _default$7 as MiniMap, MiniMapEmits, _default$8 as MiniMapNode, MiniMapNodeEmits, MiniMapNodeFunc, MiniMapNodeProps, MiniMapProps, MiniMapSlots, MouseTouchEvent, NoConnection, Node, NodeAddChange, NodeChange, NodeComponent, type NodeConnection, type NodeDimensionChange, NodeDragEvent, NodeDragItem, NodeEventsHandler, NodeEventsOn, NodeHandleBounds, NodeId as NodeIdInjection, NodeLookup, NodeMouseEvent, NodeOrigin, type NodePositionChange, NodeProps, type NodeRemoveChange, _default$9 as NodeResizeControl, _default$10 as NodeResizer, NodeResizerEmits, NodeResizerProps, type NodeSelectionChange, NodeSlots, _default$11 as NodeToolbar, NodeToolbarProps, NodeTypesObject, OnBeforeDelete, OnConnectStartParams, OnResize, OnResizeEnd, OnResizeStart, type Padding, type PaddingUnit, type PaddingWithUnit, PanOnScrollMode, _default$12 as Panel, PanelProps, Position, type Project, ReconnectEdge, type Rect, RemoveEdges, RemoveNodes, ResizeControlLineProps, ResizeControlProps, ResizeControlVariant, type ResizeDragEvent, type ResizeParams, type ResizeParamsWithDirection, Result, SelectionChangeEvent, SelectionMode, type SelectionRect, type SetCenter, type SetCenterOptions, SetEdges, SetNodes, SetState, SetStateOptions, type SetViewport, ShapeRendering, type ShouldResize, SimpleBezierEdge, SimpleBezierEdgeProps, Slots, SmoothStepEdge, SmoothStepEdgeProps, SmoothStepEdgeType, SmoothStepPathOptions, type SnapGrid, State, StepEdge, StepEdgeProps, StraightEdge, StraightEdgeProps, Styles, ThemeVars, UpdateEdge, UpdateEdgeData, UpdateNode, UpdateNodeData, UpdateNodeDimensions, UpdateNodeDimensionsParams, UpdateNodeInternals, UpdateNodePosition, ValidConnectionFunc, type Viewport, ViewportFunctions, type ViewportHelperFunctionOptions, _default$13 as VueFlow, VueFlowError, VueFlow as VueFlowInjection, VueFlowInstance, _default$14 as VueFlowProvider, VueFlowState, VueFlowStoreHandle, type XYPosition, type ZIndexMode, type ZoomInOut, type ZoomTo, applyChanges, applyEdgeChanges, applyNodeChanges, clamp, connectionExists, defaultEdgeTypes, defaultNodeTypes, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSimpleBezierPath, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdge, isEdgeBase, isErrorOfType, isInternalNode, isInternalNodeBase, isMacOs, isNode, isNodeBase, pointToRendererPoint, rendererPointToPoint, storeToRefs, useConnection, useEdge, useEdgesData, useHandle, useInternalNode, useKeyPress, useNode, useNodeConnections, useNodeId, useNodesData, useNodesInitialized, useStore, useVueFlow };
+export { Actions, AddEdges, AddNodes, type Align, type AriaLabelConfig, _default as Background, BackgroundProps, BackgroundVariant, _default$1 as BaseEdge, BaseEdgeProps, BezierEdge, BezierEdgeProps, BezierEdgeType, BezierPathOptions, BuiltInNode, CSSVars, ClassValue, type ColorMode, ComputedGetters, ConnectEndEvent, ConnectingHandle, type Connection, ConnectionInProgress, ConnectionLineOptions, ConnectionLineProps, ConnectionLineType, ConnectionLookup, ConnectionMode, ConnectionState, ConnectionStatus, Connector, _default$2 as ControlButton, ControlEmits, type ControlLinePosition, type ControlPosition, ControlProps, _default$3 as Controls, type CoordinateExtent, CustomThemeVars, DefaultEdge, DefaultEdgeOptions, DefaultEdgeTypes, DefaultNodeTypes, DeleteElements, type Dimensions, Edge, EdgeAddChange, EdgeChange, EdgeComponent, EdgeEventsHandler, EdgeEventsOn, EdgeLabelOptions, _default$4 as EdgeLabelRenderer, EdgeLookup, EdgeMarker, EdgeMarkerType, EdgeMouseEvent, EdgePositions, EdgeProps, EdgeReconnectEndEvent, EdgeReconnectEvent, EdgeReconnectStartEvent, EdgeReconnectable, type EdgeRemoveChange, type EdgeSelectionChange, EdgeSlots, _default$5 as EdgeText, EdgeTextProps, EdgeTypesObject, ElementChange, ErrorCode, type FinalConnectionState, FitBounds, FitBoundsOptions, FitView, type FitViewOptions, FlowEmits, FlowEvents, FlowExportObject, FlowHooks, FlowHooksEmit, FlowHooksOn, FlowOptions, FlowProps, FlowSlots, GetEdge, GetInternalNode, GetIntersectingNodes, GetNode, type GetViewport, Getters, _default$6 as Handle, HandleConnectable, HandleConnectableFunc, HandleElement, HandleProps, type HandleType, InternalNode, IsNodeIntersecting, IsValidParams, MarkerProps, MarkerType, _default$7 as MiniMap, MiniMapEmits, _default$8 as MiniMapNode, MiniMapNodeEmits, MiniMapNodeFunc, MiniMapNodeProps, MiniMapProps, MiniMapSlots, MouseTouchEvent, NoConnection, Node, NodeAddChange, NodeChange, NodeComponent, type NodeConnection, type NodeDimensionChange, NodeDragEvent, NodeDragItem, NodeEventsHandler, NodeEventsOn, NodeHandleBounds, NodeId as NodeIdInjection, NodeLookup, NodeMouseEvent, NodeOrigin, type NodePositionChange, NodeProps, type NodeRemoveChange, _default$9 as NodeResizeControl, _default$10 as NodeResizer, NodeResizerEmits, NodeResizerProps, type NodeSelectionChange, NodeSlots, _default$11 as NodeToolbar, NodeToolbarProps, NodeTypesObject, OnBeforeDelete, OnConnectStartParams, OnResize, OnResizeEnd, OnResizeStart, type Padding, type PaddingUnit, type PaddingWithUnit, PanOnScrollMode, _default$12 as Panel, PanelProps, Position, type Project, ReconnectEdge, type Rect, RemoveEdges, RemoveNodes, ResizeControlLineProps, ResizeControlProps, ResizeControlVariant, type ResizeDragEvent, type ResizeParams, type ResizeParamsWithDirection, Result, SelectionChangeEvent, SelectionMode, type SelectionRect, type SetCenter, type SetCenterOptions, SetEdges, SetNodes, SetState, SetStateOptions, type SetViewport, ShapeRendering, type ShouldResize, SimpleBezierEdge, SimpleBezierEdgeProps, Slots, SmoothStepEdge, SmoothStepEdgeProps, SmoothStepEdgeType, SmoothStepPathOptions, type SnapGrid, State, StepEdge, StepEdgeProps, StraightEdge, StraightEdgeProps, Styles, ThemeVars, UpdateEdge, UpdateEdgeData, UpdateNode, UpdateNodeData, UpdateNodeDimensions, UpdateNodeDimensionsParams, UpdateNodeInternals, UpdateNodePosition, ValidConnectionFunc, type Viewport, ViewportFunctions, type ViewportHelperFunctionOptions, _default$13 as VueFlow, VueFlowError, VueFlow as VueFlowInjection, VueFlowInstance, _default$14 as VueFlowProvider, VueFlowState, VueFlowStoreHandle, type XYPosition, type ZIndexMode, type ZoomInOut, type ZoomTo, applyChanges, applyEdgeChanges, applyNodeChanges, clamp, connectionExists, defaultEdgeTypes, defaultNodeTypes, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSimpleBezierPath, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdge, isEdgeBase, isErrorOfType, isInternalNode, isInternalNodeBase, isMacOs, isNode, isNodeBase, pointToRendererPoint, rendererPointToPoint, storeToRefs, useConnection, useEdge, useEdgesData, useHandle, useInternalNode, useKeyPress, useNode, useNodeConnections, useNodeId, useNodesData, useNodesInitialized, useStore, useVueFlow };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -2566,18 +2566,6 @@ const _sfc_main$17 = /* @__PURE__ */ (0, vue.defineComponent)({
 			"data-nodeid": nodeId,
 			"data-handlepos": __props.position
 		}));
-		const isConnectableStart = (0, vue.toRef)(() => typeof __props.connectableStart !== "undefined" ? __props.connectableStart : true);
-		const isConnectableEnd = (0, vue.toRef)(() => typeof __props.connectableEnd !== "undefined" ? __props.connectableEnd : true);
-		const connectionInProcess = (0, vue.toRef)(() => store.connectionStartHandle !== null);
-		const clickConnectionInProcess = (0, vue.toRef)(() => store.connectionClickStartHandle !== null);
-		const isPossibleEndHandle = (0, vue.toRef)(() => {
-			const fromHandle = store.connectionStartHandle;
-			return store.connectionMode === _xyflow_system.ConnectionMode.Strict ? fromHandle?.type !== type.value : nodeId !== fromHandle?.nodeId || __props.id !== fromHandle?.id;
-		});
-		const isClickConnecting = (0, vue.toRef)(() => store.connectionClickStartHandle?.nodeId === nodeId && store.connectionClickStartHandle?.id === __props.id && store.connectionClickStartHandle?.type === type.value);
-		const connectingFrom = (0, vue.toRef)(() => store.connectionStartHandle?.nodeId === nodeId && store.connectionStartHandle?.id === __props.id && store.connectionStartHandle?.type === type.value);
-		const connectingTo = (0, vue.toRef)(() => store.connectionEndHandle?.nodeId === nodeId && store.connectionEndHandle?.id === __props.id && store.connectionEndHandle?.type === type.value);
-		const valid = (0, vue.toRef)(() => connectingTo.value && store.connectionStatus === "valid");
 		const { handlePointerDown, handleClick } = useHandle({
 			nodeId,
 			handleId: __props.id,
@@ -2598,6 +2586,28 @@ const _sfc_main$17 = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (typeof __props.isConnectable === "function") return nodeRef.value ? __props.isConnectable(nodeRef.value, connectedEdges.value) : false;
 			return isDef(__props.isConnectable) ? __props.isConnectable : store.nodesConnectable;
 		});
+		const connectionClasses = (0, vue.computed)((prev) => {
+			const fromHandle = store.connectionStartHandle;
+			const clickFromHandle = store.connectionClickStartHandle;
+			const toHandle = store.connectionEndHandle;
+			const handleType = type.value;
+			const connectionInProcess = fromHandle !== null;
+			const clickConnectionInProcess = clickFromHandle !== null;
+			const isPossibleEndHandle = store.connectionMode === _xyflow_system.ConnectionMode.Strict ? fromHandle?.type !== handleType : nodeId !== fromHandle?.nodeId || __props.id !== fromHandle?.id;
+			const connectingto = toHandle?.nodeId === nodeId && toHandle?.id === __props.id && toHandle?.type === handleType;
+			const next = {
+				connectable: isHandleConnectable.value,
+				connecting: clickFromHandle?.nodeId === nodeId && clickFromHandle?.id === __props.id && clickFromHandle?.type === handleType,
+				connectablestart: __props.connectableStart,
+				connectableend: __props.connectableEnd,
+				connectingfrom: fromHandle?.nodeId === nodeId && fromHandle?.id === __props.id && fromHandle?.type === handleType,
+				connectingto,
+				valid: connectingto && store.connectionStatus === "valid",
+				connectionindicator: isHandleConnectable.value && (!connectionInProcess || isPossibleEndHandle) && (connectionInProcess || clickConnectionInProcess ? __props.connectableEnd : __props.connectableStart)
+			};
+			if (prev && prev.connectable === next.connectable && prev.connecting === next.connecting && prev.connectablestart === next.connectablestart && prev.connectableend === next.connectableend && prev.connectingfrom === next.connectingfrom && prev.connectingto === next.connectingto && prev.valid === next.valid && prev.connectionindicator === next.connectionindicator) return prev;
+			return next;
+		});
 		(0, vue.onMounted)(() => {
 			const node = nodeRef.value;
 			if (!node || !(0, _xyflow_system.nodeHasDimensions)(node)) return;
@@ -2627,10 +2637,10 @@ const _sfc_main$17 = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		function onPointerDown(event) {
 			const isMouseTriggered = (0, _xyflow_system.isMouseEvent)(event);
-			if (isHandleConnectable.value && isConnectableStart.value && (isMouseTriggered && event.button === 0 || !isMouseTriggered)) handlePointerDown(event);
+			if (isHandleConnectable.value && __props.connectableStart && (isMouseTriggered && event.button === 0 || !isMouseTriggered)) handlePointerDown(event);
 		}
 		function onClick(event) {
-			if (!nodeId || !store.connectionClickStartHandle && !isConnectableStart.value) return;
+			if (!nodeId || !store.connectionClickStartHandle && !__props.connectableStart) return;
 			if (isHandleConnectable.value) handleClick(event);
 		}
 		__expose({
@@ -2651,18 +2661,10 @@ const _sfc_main$17 = /* @__PURE__ */ (0, vue.defineComponent)({
 			connectedEdges,
 			handle,
 			handleDataIds,
-			isConnectableStart,
-			isConnectableEnd,
-			connectionInProcess,
-			clickConnectionInProcess,
-			isPossibleEndHandle,
-			isClickConnecting,
-			connectingFrom,
-			connectingTo,
-			valid,
 			handlePointerDown,
 			handleClick,
 			isHandleConnectable,
+			connectionClasses,
 			onPointerDown,
 			onClick
 		};
@@ -2683,16 +2685,7 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
 			$setup.store.noDragClassName,
 			$setup.store.noPanClassName,
 			$setup.type,
-			{
-				connectable: $setup.isHandleConnectable,
-				connecting: $setup.isClickConnecting,
-				connectablestart: $setup.isConnectableStart,
-				connectableend: $setup.isConnectableEnd,
-				connectingfrom: $setup.connectingFrom,
-				connectingto: $setup.connectingTo,
-				valid: $setup.valid,
-				connectionindicator: $setup.isHandleConnectable && (!$setup.connectionInProcess || $setup.isPossibleEndHandle) && ($setup.connectionInProcess || $setup.clickConnectionInProcess ? $setup.isConnectableEnd : $setup.isConnectableStart)
-			}
+			$setup.connectionClasses
 		]],
 		onMousedown: $setup.onPointerDown,
 		onTouchstartPassive: $setup.onPointerDown,
@@ -4041,23 +4034,6 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var A11yDescriptions_default = /* @__PURE__ */ export_helper_default(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/A11y/A11yDescriptions.vue"]]);
 //#endregion
-//#region src/composables/useColorModeClass.ts
-/**
-* Resolves the `colorMode` prop to the `light`/`dark` class applied to the flow container, tracking
-* `prefers-color-scheme` reactively when `colorMode` is `system` (matching xyflow/react+svelte).
-*
-* Takes the state explicitly because it runs inside `<VueFlow>`'s own setup; defaults to `useStore()`.
-*
-* @internal
-*/
-function useColorModeClass(state = useStore()) {
-	const prefersDark = (0, _vueuse_core.useMediaQuery)("(prefers-color-scheme: dark)");
-	return (0, vue.computed)(() => {
-		if (state.colorMode === "system") return prefersDark.value ? "dark" : "light";
-		return state.colorMode;
-	});
-}
-//#endregion
 //#region src/store/hooks.ts
 function createHooks() {
 	return {
@@ -4175,7 +4151,6 @@ function useState() {
 		translateExtent: [[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY], [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]],
 		nodeExtent: [[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY], [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]],
 		nodeOrigin: [0, 0],
-		colorMode: "light",
 		selectionMode: _xyflow_system.SelectionMode.Full,
 		paneDragging: false,
 		preventScrolling: true,
@@ -7116,7 +7091,7 @@ const _sfc_main$1 = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Array,
 			required: false
 		},
-		colorMode: {
+		forceColorMode: {
 			type: String,
 			required: false,
 			default: void 0
@@ -7368,7 +7343,6 @@ const _sfc_main$1 = /* @__PURE__ */ (0, vue.defineComponent)({
 		useOnInitHandler(instance);
 		useSelectionChange(instance);
 		useStylesLoadedWarning(instance);
-		const colorModeClass = useColorModeClass(state);
 		useViewportSync(modelViewport, state);
 		const stateRefs = storeToRefs(state);
 		(0, vue.provide)(Slots$1, slots);
@@ -7387,7 +7361,6 @@ const _sfc_main$1 = /* @__PURE__ */ (0, vue.defineComponent)({
 			instance,
 			state,
 			disposeWatchers,
-			colorModeClass,
 			stateRefs,
 			A11yDescriptions: A11yDescriptions_default,
 			ZoomPane: ZoomPane_default
@@ -7402,7 +7375,7 @@ const _sfc_main$1 = /* @__PURE__ */ (0, vue.defineComponent)({
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 	return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 		ref: $setup.stateRefs.vueFlowRef,
-		class: (0, vue.normalizeClass)(["vue-flow", $setup.colorModeClass])
+		class: (0, vue.normalizeClass)(["vue-flow", $setup.props.forceColorMode])
 	}, [
 		(0, vue.createCommentVNode)(" the `zoom-pane` slot (affected by zooming & panning) renders inside the transformed Viewport via\n    the provided `Slots` (see ZoomPaneSlot), not drilled through ZoomPane → Pane → Viewport "),
 		(0, vue.createVNode)($setup["ZoomPane"]),