likec4 1.26.2 → 1.27.1

package/react/index.d.mts

@@ -0,0 +1,2659 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { CSSProperties, ComponentType, DependencyList, HTMLAttributes, JSX, MouseEvent as ReactMouseEvent, PropsWithChildren, ReactNode, WheelEvent as WheelEvent$1 } from 'react';
+
+type Primitive = null | undefined | string | number | boolean | symbol | bigint;
+type UnionToIntersection<Union> = (
+// `extends unknown` is always going to be the case and is used to convert the
+// `Union` into a [distributive conditional
+// type](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#distributive-conditional-types).
+Union extends unknown ? (distributedUnion: Union) => void : never) extends ((mergedIntersection: infer Intersection) => void) ? Intersection & Union : never;
+type Simplify<T> = {
+	[KeyType in keyof T]: T[KeyType];
+} & {};
+type LiteralUnion<LiteralType, BaseType extends Primitive> = LiteralType | (BaseType & Record<never, never>);
+declare const tag: unique symbol;
+type TagContainer<Token> = {
+	readonly [tag]: Token;
+};
+type Tag<Token extends PropertyKey, TagMetadata> = TagContainer<{
+	[K in Token]: TagMetadata;
+}>;
+type Tagged<Type, TagName extends PropertyKey, TagMetadata = never> = Type & Tag<TagName, TagMetadata>;
+type TupleToUnion<ArrayType> = ArrayType extends readonly unknown[] ? ArrayType[number] : never;
+declare const ThemeColors: readonly [
+	"amber",
+	"blue",
+	"gray",
+	"slate",
+	"green",
+	"indigo",
+	"muted",
+	"primary",
+	"red",
+	"secondary",
+	"sky"
+];
+type ThemeColor = typeof ThemeColors[number];
+type HexColorLiteral = `#${string}`;
+type ColorLiteral = HexColorLiteral;
+type Color = LiteralUnion<ThemeColor, string>;
+type ShapeSize = "xs" | "sm" | "md" | "lg" | "xl";
+type SpacingSize = "xs" | "sm" | "md" | "lg" | "xl";
+type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface ElementThemeColorValues {
+	fill: ColorLiteral;
+	stroke: ColorLiteral;
+	hiContrast: ColorLiteral;
+	loContrast: ColorLiteral;
+}
+interface RelationshipThemeColorValues {
+	lineColor: ColorLiteral;
+	labelBgColor: ColorLiteral;
+	labelColor: ColorLiteral;
+}
+interface ThemeColorValues {
+	elements: ElementThemeColorValues;
+	relationships: RelationshipThemeColorValues;
+}
+type NonEmptyArray<T> = [
+	T,
+	...T[]
+];
+type IconUrl = Tagged<string, "IconUrl"> | "none";
+type Point = readonly [
+	x: number,
+	y: number
+];
+interface XYPoint {
+	x: number;
+	y: number;
+}
+type AllNever<Expressions> = UnionToIntersection<{
+	[Name in keyof Expressions]: {
+		-readonly [Key in keyof Expressions[Name]]?: never;
+	};
+}[keyof Expressions]>;
+type ExclusiveUnion<Expressions> = Expressions extends object ? {
+	[Name in keyof Expressions]: Simplify<Omit<AllNever<Expressions>, keyof Expressions[Name]> & Expressions[Name]>;
+}[keyof Expressions] : Expressions;
+type Fqn<Id extends string = string> = Tagged<Id, "Fqn">;
+declare const BorderStyles: readonly [
+	"solid",
+	"dashed",
+	"dotted",
+	"none"
+];
+type BorderStyle = TupleToUnion<typeof BorderStyles>;
+type ElementKind<Kinds extends string = string> = Tagged<Kinds, "ElementKind">;
+declare namespace ElementKind {
+	const Group: ElementKind;
+}
+declare const ElementShapes: readonly [
+	"rectangle",
+	"person",
+	"browser",
+	"mobile",
+	"cylinder",
+	"storage",
+	"queue"
+];
+type ElementShape = TupleToUnion<typeof ElementShapes>;
+interface ElementStyle {
+	readonly border?: BorderStyle;
+	/**
+	 * In percentage 0-100, 0 is fully transparent
+	 *
+	 * @default 100
+	 */
+	readonly opacity?: number;
+	/**
+	 * If true, the element is rendered as multiple shapes
+	 * @default false
+	 */
+	readonly multiple?: boolean;
+	/**
+	 * Shape size
+	 *
+	 * @default 'md'
+	 */
+	readonly size?: ShapeSize;
+	readonly padding?: SpacingSize;
+	readonly textSize?: TextSize;
+}
+type Tag$1<Tags extends string = string> = Tagged<Tags, "Tag">;
+interface Link {
+	readonly title?: string;
+	readonly url: string;
+	readonly relative?: string;
+}
+type EqualOperator<V> = {
+	eq: V;
+	neq?: never;
+} | {
+	eq?: never;
+	neq: V;
+};
+type AllNever$1 = {
+	not?: never;
+	and?: never;
+	or?: never;
+	tag?: never;
+	kind?: never;
+	participant?: never;
+};
+type TagEqual<Tag> = Omit<AllNever$1, "tag"> & {
+	tag: EqualOperator<Tag>;
+};
+type KindEqual<Kind> = Omit<AllNever$1, "kind"> & {
+	kind: EqualOperator<Kind>;
+};
+type Participant = "source" | "target";
+type ParticipantOperator<Tag, Kind> = Omit<AllNever$1, "participant"> & {
+	participant: Participant;
+	operator: KindEqual<Kind> | TagEqual<Tag>;
+};
+type NotOperator<Tag, Kind> = Omit<AllNever$1, "not"> & {
+	not: WhereOperator<Tag, Kind>;
+};
+type AndOperator<Tag, Kind> = Omit<AllNever$1, "and"> & {
+	and: NonEmptyArray<WhereOperator<Tag, Kind>>;
+};
+type OrOperator<Tag, Kind> = Omit<AllNever$1, "or"> & {
+	or: NonEmptyArray<WhereOperator<Tag, Kind>>;
+};
+type WhereOperator<Tag, Kind> = TagEqual<Tag> | KindEqual<Kind> | ParticipantOperator<Tag, Kind> | NotOperator<Tag, Kind> | AndOperator<Tag, Kind> | OrOperator<Tag, Kind>;
+interface BaseExpr {
+	where?: never;
+	element?: never;
+	custom?: never;
+	expanded?: never;
+	elementKind?: never;
+	elementTag?: never;
+	isEqual?: never;
+	isChildren?: never;
+	isDescendants?: never;
+	wildcard?: never;
+	source?: never;
+	target?: never;
+	inout?: never;
+	incoming?: never;
+	outgoing?: never;
+	customRelation?: never;
+}
+interface ElementRefExpr extends Omit<BaseExpr, "element" | "isChildren" | "isDescendants"> {
+	element: Fqn;
+	isChildren?: boolean;
+	isDescendants?: boolean;
+}
+interface ExpandedElementExpr extends Omit<BaseExpr, "expanded"> {
+	expanded: Fqn;
+}
+interface CustomElementExpr extends Omit<BaseExpr, "custom"> {
+	custom: {
+		expr: ElementExpression | ElementWhereExpr;
+		title?: string;
+		description?: string;
+		technology?: string;
+		notation?: string;
+		shape?: ElementShape;
+		color?: Color;
+		icon?: IconUrl;
+		border?: BorderStyle;
+		opacity?: number;
+		navigateTo?: ViewId;
+		multiple?: boolean;
+		size?: ShapeSize;
+		padding?: ShapeSize;
+		textSize?: ShapeSize;
+	};
+}
+interface WildcardExpr extends Omit<BaseExpr, "wildcard"> {
+	wildcard: true;
+}
+interface ElementKindExpr extends Omit<BaseExpr, "elementKind" | "isEqual"> {
+	elementKind: ElementKind;
+	isEqual: boolean;
+}
+interface ElementTagExpr extends Omit<BaseExpr, "elementTag" | "isEqual"> {
+	elementTag: Tag$1;
+	isEqual: boolean;
+}
+type NonWilcard = ElementRefExpr | ElementKindExpr | ElementTagExpr | ExpandedElementExpr;
+type ElementExpression = NonWilcard | WildcardExpr;
+interface ElementWhereExpr extends Omit<BaseExpr, "where"> {
+	where: {
+		expr: ElementExpression;
+		condition: WhereOperator<string, string>;
+	};
+}
+type ElementPredicateExpression = ElementExpression | ElementWhereExpr | CustomElementExpr;
+interface DirectRelationExpr extends Omit<BaseExpr, "source" | "target"> {
+	source: ElementExpression;
+	target: ElementExpression;
+	isBidirectional?: boolean;
+}
+interface InOutExpr extends Omit<BaseExpr, "inout"> {
+	inout: ElementExpression;
+}
+interface IncomingExpr extends Omit<BaseExpr, "incoming"> {
+	incoming: ElementExpression;
+}
+interface OutgoingExpr extends Omit<BaseExpr, "outgoing"> {
+	outgoing: ElementExpression;
+}
+type RelationExpression = DirectRelationExpr | InOutExpr | IncomingExpr | OutgoingExpr;
+interface RelationWhereExpr extends Omit<BaseExpr, "where"> {
+	where: {
+		expr: RelationExpression;
+		condition: WhereOperator<string, string>;
+	};
+}
+interface CustomRelationExpr extends Omit<BaseExpr, "customRelation"> {
+	customRelation: {
+		relation: RelationExpression | RelationWhereExpr;
+		title?: string;
+		description?: string;
+		technology?: string;
+		notation?: string;
+		navigateTo?: ViewId;
+		notes?: string;
+		color?: Color;
+		line?: RelationshipLineType;
+		head?: RelationshipArrowType;
+		tail?: RelationshipArrowType;
+	};
+}
+type RelationPredicateExpression = RelationExpression | RelationWhereExpr | CustomRelationExpr;
+type Expression = ElementPredicateExpression | RelationPredicateExpression;
+declare namespace FqnRef {
+	/**
+	 * Represents a reference to an instance within a deployment.
+	 *
+	 * @template D - The type representing the deployment fqn. Defaults to `Fqn`.
+	 * @template M - The type representing the model fqn. Defaults to `Fqn`.
+	 *
+	 * @property {D} deployment - TThe fully qualified name (FQN) of the deployed instance.
+	 * @property {M} element - The element reference within the deployment.
+	 */
+	type InsideInstanceRef<D = Fqn, M = Fqn> = {
+		deployment: D;
+		element: M;
+	};
+	const isInsideInstanceRef: (ref: FqnRef) => ref is InsideInstanceRef;
+	/**
+	 * Represents a reference to a deployment element.
+	 *
+	 * @template F - The type of the fully qualified name (FQN) of the deployment element. Defaults to `Fqn`.
+	 * @property {F} deployment - The fully qualified name (FQN) of the deployment element.
+	 */
+	type DeploymentElementRef<F = Fqn> = {
+		deployment: F;
+	};
+	const isDeploymentElementRef: (ref: FqnRef) => ref is DeploymentElementRef;
+	type DeploymentRef<D = Fqn, M = Fqn> = DeploymentElementRef<D> | InsideInstanceRef<D, M>;
+	const isDeploymentRef: (ref: FqnRef) => ref is DeploymentRef;
+	/**
+	 * Reference to logical model element
+	 */
+	type ModelRef<F = Fqn> = {
+		model: F;
+	};
+	const isModelRef: (ref: FqnRef) => ref is ModelRef;
+	const toDeploymentRef: (ref: FqnRef) => DeploymentRef;
+}
+type FqnRef<D = Fqn, M = Fqn> = ExclusiveUnion<{
+	InsideInstanceRef: FqnRef.InsideInstanceRef<D, M>;
+	DeploymentRef: FqnRef.DeploymentRef<D>;
+	ModelRef: FqnRef.ModelRef<M>;
+}>;
+declare namespace FqnExpr {
+	type Wildcard = {
+		wildcard: true;
+	};
+	const isWildcard: (expr: ExpressionV2) => expr is Wildcard;
+	type ModelRef<M = Fqn> = {
+		ref: FqnRef.ModelRef<M>;
+		selector?: PredicateSelector;
+	};
+	const isModelRef: (ref: ExpressionV2) => ref is ModelRef;
+	type DeploymentRef<D = Fqn, M = Fqn> = {
+		ref: FqnRef.DeploymentRef<D> | FqnRef.InsideInstanceRef<D, M>;
+		selector?: PredicateSelector;
+	};
+	const isDeploymentRef: (ref: ExpressionV2) => ref is FqnExpr.DeploymentRef;
+	type NonWildcard<D = Fqn, M = Fqn> = ExclusiveUnion<{
+		ModelRef: ModelRef<M>;
+		DeploymentRef: DeploymentRef<D, M>;
+	}>;
+}
+type FqnExpr<D = Fqn, M = Fqn> = ExclusiveUnion<{
+	Wildcard: FqnExpr.Wildcard;
+	ModelRef: FqnExpr.ModelRef<M>;
+	DeploymentRef: FqnExpr.DeploymentRef<D, M>;
+}>;
+declare namespace RelationExpr {
+	type Direct<D = Fqn, M = Fqn> = {
+		source: FqnExpr<D, M>;
+		target: FqnExpr<D, M>;
+		isBidirectional?: boolean;
+	};
+	const isDirect: (expr: ExpressionV2) => expr is Direct;
+	type Incoming<D = Fqn, M = Fqn> = {
+		incoming: FqnExpr<D, M>;
+	};
+	const isIncoming: (expr: ExpressionV2) => expr is Incoming;
+	type Outgoing<D = Fqn, M = Fqn> = {
+		outgoing: FqnExpr<D, M>;
+	};
+	const isOutgoing: (expr: ExpressionV2) => expr is Outgoing;
+	type InOut<D = Fqn, M = Fqn> = {
+		inout: FqnExpr<D, M>;
+	};
+	const isInOut: (expr: ExpressionV2) => expr is InOut;
+	type Where<D = Fqn, M = Fqn> = {
+		where: {
+			expr: ExpressionV2<D, M>;
+			condition: WhereOperator<string, string>;
+		};
+	};
+	const isWhere: (expr: ExpressionV2) => expr is Where;
+}
+type RelationExpr<D = Fqn, M = Fqn> = ExclusiveUnion<{
+	Direct: RelationExpr.Direct<D, M>;
+	Incoming: RelationExpr.Incoming<D, M>;
+	Outgoing: RelationExpr.Outgoing<D, M>;
+	InOut: RelationExpr.InOut<D, M>;
+	Where: RelationExpr.Where<D, M>;
+}>;
+type ExpressionV2<D = Fqn, M = Fqn> = ExclusiveUnion<{
+	Wildcard: FqnExpr.Wildcard;
+	ModelRef: FqnExpr.ModelRef<M>;
+	DeploymentRef: FqnExpr.DeploymentRef<D, M>;
+	Direct: RelationExpr.Direct<D, M>;
+	Incoming: RelationExpr.Incoming<D, M>;
+	Outgoing: RelationExpr.Outgoing<D, M>;
+	InOut: RelationExpr.InOut<D, M>;
+	RelationPredicateOrWhere: RelationExpr.Where<D, M>;
+}>;
+declare namespace ExpressionV2 {
+	const isFqnExpr: (expr: ExpressionV2) => expr is FqnExpr;
+	const isRelation: (expr: ExpressionV2) => expr is RelationExpr;
+}
+type GlobalPredicateId = Tagged<string, "GlobalPredicateId">;
+type GlobalStyleID = Tagged<string, "GlobalStyleID">;
+type ElementNotation = {
+	kinds: string[];
+	shape: ElementShape;
+	color: Color;
+	title: string;
+};
+type ViewId<Id extends string = string> = Tagged<Id, "ViewID">;
+type ViewRulePredicate = {
+	include: Expression[];
+	exclude?: never;
+} | {
+	include?: never;
+	exclude: Expression[];
+};
+interface ViewRuleGlobalPredicateRef {
+	predicateId: GlobalPredicateId;
+}
+interface ViewRuleStyle {
+	targets: ElementExpression[];
+	notation?: string;
+	style: ElementStyle & {
+		color?: Color;
+		shape?: ElementShape;
+		icon?: IconUrl;
+	};
+}
+interface ViewRuleGlobalStyle {
+	styleId: GlobalStyleID;
+}
+type AutoLayoutDirection = "TB" | "BT" | "LR" | "RL";
+interface ViewRuleAutoLayout {
+	direction: AutoLayoutDirection;
+	nodeSep?: number;
+	rankSep?: number;
+}
+interface ViewRuleGroup {
+	groupRules: Array<ViewRulePredicate | ViewRuleGroup>;
+	title: string | null;
+	color?: Color;
+	border?: BorderStyle;
+	opacity?: number;
+	multiple?: boolean;
+	size?: ShapeSize;
+	padding?: SpacingSize;
+	textSize?: TextSize;
+}
+type ViewRule = ViewRulePredicate | ViewRuleGlobalPredicateRef | ViewRuleGroup | ViewRuleStyle | ViewRuleGlobalStyle | ViewRuleAutoLayout;
+interface BasicView<ViewType extends "element" | "dynamic" | "deployment", ViewIDs extends string, Tags extends string> {
+	readonly __?: ViewType;
+	readonly id: ViewId<ViewIDs>;
+	readonly title: string | null;
+	readonly description: string | null;
+	readonly tags: NonEmptyArray<Tag$1<Tags>> | null;
+	readonly links: NonEmptyArray<Link> | null;
+	/**
+	 * URI to the source file of this view.
+	 * Undefined if the view is auto-generated.
+	 */
+	readonly docUri?: string;
+	/**
+	 * For all views we find common ancestor path.
+	 * This is used to generate relative paths, i.e.:
+	 * - "/home/project/index.c4" becomes "index.c4"
+	 * - "/home/project/subdir/views.c4" becomes "subdir/views.c4"
+	 *
+	 * Undefined if the view is auto-generated.
+	 */
+	readonly relativePath?: string;
+	/**
+	 * If the view is changed manually this field contains the layout data.
+	 */
+	readonly manualLayout?: ViewManualLayout | undefined;
+	readonly customColorDefinitions: CustomColorDefinitions;
+}
+interface BasicElementView<ViewIDs extends string, Tags extends string> extends BasicView<"element", ViewIDs, Tags> {
+	readonly viewOf?: Fqn;
+	readonly rules: ViewRule[];
+}
+interface ScopedElementView<ViewIDs extends string, Tags extends string> extends BasicElementView<ViewIDs, Tags> {
+	readonly viewOf: Fqn;
+}
+interface ExtendsElementView<ViewIDs extends string, Tags extends string> extends BasicElementView<ViewIDs, Tags> {
+	readonly extends: ViewId<ViewIDs>;
+}
+type ElementView<ViewIDs extends string = string, Tags extends string = string> = ScopedElementView<ViewIDs, Tags> | ExtendsElementView<ViewIDs, Tags> | BasicElementView<ViewIDs, Tags>;
+interface DynamicViewStep {
+	readonly source: Fqn;
+	readonly target: Fqn;
+	readonly title: string | null;
+	readonly description?: string;
+	readonly technology?: string;
+	readonly notation?: string;
+	readonly notes?: string;
+	readonly color?: Color;
+	readonly line?: RelationshipLineType;
+	readonly head?: RelationshipArrowType;
+	readonly tail?: RelationshipArrowType;
+	readonly isBackward?: boolean;
+	readonly navigateTo?: ViewId;
+	__parallel?: never;
+}
+interface DynamicViewParallelSteps {
+	readonly __parallel: DynamicViewStep[];
+}
+type DynamicViewStepOrParallel = DynamicViewStep | DynamicViewParallelSteps;
+type DynamicViewIncludeRule = {
+	include: ElementPredicateExpression[];
+};
+type DynamicViewRule = DynamicViewIncludeRule | ViewRuleGlobalPredicateRef | ViewRuleStyle | ViewRuleGlobalStyle | ViewRuleAutoLayout;
+interface DynamicView<ViewIDs extends string = string, Tags extends string = string> extends BasicView<"dynamic", ViewIDs, Tags> {
+	readonly __: "dynamic";
+	readonly steps: DynamicViewStepOrParallel[];
+	readonly rules: DynamicViewRule[];
+}
+type CustomColorDefinitions = {
+	[key: string]: ThemeColorValues;
+};
+type DeploymentViewRulePredicate = {
+	include: ExpressionV2[];
+	exclude?: never;
+} | {
+	include?: never;
+	exclude: ExpressionV2[];
+};
+type DeploymentViewRuleStyle = {
+	targets: FqnExpr[];
+	notation?: string;
+	style: ElementStyle & {
+		color?: Color;
+		shape?: ElementShape;
+		icon?: IconUrl;
+	};
+};
+type DeploymentViewRule = DeploymentViewRulePredicate | ViewRuleAutoLayout | DeploymentViewRuleStyle;
+interface DeploymentView<ViewIDs extends string = string, Tags extends string = string> extends BasicView<"deployment", ViewIDs, Tags> {
+	readonly __: "deployment";
+	readonly rules: DeploymentViewRule[];
+}
+type NodeId<IDs extends string = string> = Tagged<IDs, "Fqn">;
+type EdgeId = Tagged<string, "EdgeId">;
+interface ComputedNode {
+	id: NodeId;
+	kind: string;
+	parent: NodeId | null;
+	/**
+	 * Reference to model element
+	 * If 1 - node id is a reference
+	 */
+	modelRef?: 1 | Fqn;
+	/**
+	 * Reference to deployment element
+	 * If 1 - node id is a reference
+	 */
+	deploymentRef?: 1 | Fqn;
+	title: string;
+	description: string | null;
+	technology: string | null;
+	notation?: string;
+	tags: NonEmptyArray<Tag$1> | null;
+	links: NonEmptyArray<Link> | null;
+	children: NodeId[];
+	inEdges: EdgeId[];
+	outEdges: EdgeId[];
+	shape: ElementShape;
+	color: Color;
+	/**
+	 * @deprecated Use `style` instead
+	 */
+	icon?: IconUrl;
+	style: ElementStyle;
+	navigateTo?: ViewId | null;
+	level: number;
+	depth?: number;
+	/**
+	 * If this node was customized in the view
+	 */
+	isCustomized?: boolean;
+}
+declare namespace ComputedNode {
+	function modelRef(node: ComputedNode): Fqn | null;
+	function deploymentRef(node: ComputedNode): Fqn | null;
+	/**
+	 * Nodes group is a special kind of node, exisiting only in view
+	 */
+	function isNodesGroup(node: ComputedNode): boolean;
+}
+interface ComputedEdge {
+	id: EdgeId;
+	parent: NodeId | null;
+	source: NodeId;
+	target: NodeId;
+	label: string | null;
+	description?: string;
+	technology?: string;
+	relations: RelationId[];
+	kind?: RelationshipKind;
+	notation?: string;
+	notes?: string;
+	color?: Color;
+	line?: RelationshipLineType;
+	head?: RelationshipArrowType;
+	tail?: RelationshipArrowType;
+	tags?: NonEmptyArray<Tag$1>;
+	navigateTo?: ViewId;
+	/**
+	 * If this edge is derived from custom relationship predicate
+	 */
+	isCustomized?: boolean;
+	/**
+	 * For layouting purposes
+	 * @default 'forward'
+	 */
+	dir?: "forward" | "back" | "both";
+}
+interface ViewWithHash {
+	/**
+	 * Hash of the view object.
+	 * This is used to detect changes in layout
+	 */
+	hash: string;
+}
+interface ViewWithNotation {
+	notation?: {
+		elements: ElementNotation[];
+	};
+}
+interface ViewAutoLayout {
+	direction: ViewRuleAutoLayout["direction"];
+	rankSep?: number;
+	nodeSep?: number;
+}
+interface ComputedElementView<ViewIDs extends string = string, Tags extends string = string> extends Omit<ElementView<ViewIDs, Tags>, "rules" | "docUri">, ViewWithHash, ViewWithNotation {
+	readonly extends?: ViewId<ViewIDs>;
+	readonly autoLayout: ViewAutoLayout;
+	readonly nodes: ComputedNode[];
+	readonly edges: ComputedEdge[];
+	rules?: never;
+	docUri?: never;
+}
+interface ComputedDynamicView<ViewIDs extends string = string, Tags extends string = string> extends Omit<DynamicView<ViewIDs, Tags>, "rules" | "steps" | "docUri">, ViewWithHash, ViewWithNotation {
+	readonly autoLayout: ViewAutoLayout;
+	readonly nodes: ComputedNode[];
+	readonly edges: ComputedEdge[];
+	steps?: never;
+	rules?: never;
+	docUri?: never;
+}
+interface ComputedDeploymentView<ViewIDs extends string = string, Tags extends string = string> extends Omit<DeploymentView<ViewIDs, Tags>, "rules" | "docUri">, ViewWithHash, ViewWithNotation {
+	readonly autoLayout: ViewAutoLayout;
+	readonly nodes: ComputedNode[];
+	readonly edges: ComputedEdge[];
+	rules?: never;
+	docUri?: never;
+}
+type ComputedView<ViewIDs extends string = string, Tags extends string = string> = ComputedElementView<ViewIDs, Tags> | ComputedDynamicView<ViewIDs, Tags> | ComputedDeploymentView<ViewIDs, Tags>;
+declare namespace ComputedView {
+	function isDeployment(view: ComputedView): view is ComputedDeploymentView;
+	function isDynamic(view: ComputedView): view is ComputedDynamicView;
+	function isElement(view: ComputedView): view is ComputedElementView;
+}
+type BBox = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
+interface DiagramNode extends ComputedNode {
+	width: number;
+	height: number;
+	position: Point;
+	labelBBox: BBox;
+}
+declare namespace DiagramNode {
+	function modelRef(node: DiagramNode): Fqn | null;
+	function deploymentRef(node: DiagramNode): Fqn | null;
+	/**
+	 * Nodes group is a special kind of node, exisiting only in view
+	 */
+	function isNodesGroup(node: DiagramNode): boolean;
+}
+interface DiagramEdge extends ComputedEdge {
+	points: NonEmptyArray<Point>;
+	controlPoints?: NonEmptyArray<XYPoint>;
+	labelBBox?: BBox | null;
+	dotpos?: string;
+}
+interface DiagramView<ViewIDs extends string = string, Tags extends string = string> extends Omit<ComputedView<ViewIDs, Tags>, "nodes" | "edges" | "manualLayout"> {
+	readonly nodes: DiagramNode[];
+	readonly edges: DiagramEdge[];
+	readonly bounds: BBox;
+	/**
+	 * If diagram has manual layout
+	 * But was changed and layout should be recalculated
+	 */
+	hasLayoutDrift?: boolean;
+	manualLayout?: never;
+}
+type ViewManualLayout = {
+	readonly hash: string;
+	readonly x: number;
+	readonly y: number;
+	readonly width: number;
+	readonly height: number;
+	readonly autoLayout: ViewAutoLayout;
+	readonly nodes: Record<string, {
+		isCompound: boolean;
+		x: number;
+		y: number;
+		width: number;
+		height: number;
+	}>;
+	readonly edges: Record<string, {
+		dotpos?: string;
+		points: NonEmptyArray<Point>;
+		controlPoints?: NonEmptyArray<XYPoint>;
+		labelBBox?: BBox;
+	}>;
+};
+type RelationId = Tagged<string, "RelationID">;
+type RelationshipKind<Kinds extends string = string> = Tagged<Kinds, "RelationshipKind">;
+type RelationshipLineType = "dashed" | "solid" | "dotted";
+type RelationshipArrowType = "none" | "normal" | "onormal" | "dot" | "odot" | "diamond" | "odiamond" | "crow" | "open" | "vee";
+type PredicateSelector = "children" | "expanded" | "descendants";
+declare namespace ViewChange {
+	interface ChangeElementStyle {
+		op: "change-element-style";
+		style: {
+			border?: BorderStyle;
+			opacity?: number;
+			shape?: ElementShape;
+			color?: ThemeColor;
+		};
+		targets: NonEmptyArray<Fqn>;
+	}
+	interface SaveManualLayout {
+		op: "save-manual-layout";
+		layout: ViewManualLayout;
+	}
+	interface ChangeAutoLayout {
+		op: "change-autolayout";
+		layout: {
+			direction: AutoLayoutDirection;
+			nodeSep?: number | null;
+			rankSep?: number | null;
+		};
+	}
+}
+type ViewChange = ViewChange.ChangeElementStyle | ViewChange.SaveManualLayout | ViewChange.ChangeAutoLayout;
+type NodeDimensionChange = {
+	id: string;
+	type: "dimensions";
+	dimensions?: Dimensions;
+	resizing?: boolean;
+	setAttributes?: boolean;
+};
+type NodePositionChange = {
+	id: string;
+	type: "position";
+	position?: XYPosition;
+	positionAbsolute?: XYPosition;
+	dragging?: boolean;
+};
+type NodeSelectionChange = {
+	id: string;
+	type: "select";
+	selected: boolean;
+};
+type NodeRemoveChange = {
+	id: string;
+	type: "remove";
+};
+type NodeAddChange<NodeType extends NodeBase = NodeBase> = {
+	item: NodeType;
+	type: "add";
+	index?: number;
+};
+type NodeReplaceChange<NodeType extends NodeBase = NodeBase> = {
+	id: string;
+	item: NodeType;
+	type: "replace";
+};
+type NodeChange<NodeType extends NodeBase = NodeBase> = NodeDimensionChange | NodePositionChange | NodeSelectionChange | NodeRemoveChange | NodeAddChange<NodeType> | NodeReplaceChange<NodeType>;
+type EdgeSelectionChange = NodeSelectionChange;
+type EdgeRemoveChange = NodeRemoveChange;
+type EdgeAddChange<EdgeType extends EdgeBase = EdgeBase> = {
+	item: EdgeType;
+	type: "add";
+	index?: number;
+};
+type EdgeReplaceChange<EdgeType extends EdgeBase = EdgeBase> = {
+	id: string;
+	item: EdgeType;
+	type: "replace";
+};
+type EdgeChange<EdgeType extends EdgeBase = EdgeBase> = EdgeSelectionChange | EdgeRemoveChange | EdgeAddChange<EdgeType> | EdgeReplaceChange<EdgeType>;
+declare enum Position {
+	Left = "left",
+	Top = "top",
+	Right = "right",
+	Bottom = "bottom"
+}
+type XYPosition = {
+	x: number;
+	y: number;
+};
+type Dimensions = {
+	width: number;
+	height: number;
+};
+type Rect = Dimensions & XYPosition;
+type CoordinateExtent = [
+	[
+		number,
+		number
+	],
+	[
+		number,
+		number
+	]
+];
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+type NodeBase<NodeData extends Record<string, unknown> = Record<string, unknown>, NodeType extends string = string> = {
+	/** Unique id of a node */
+	id: string;
+	/**
+	 * Position of a node on the pane
+	 * @example { x: 0, y: 0 }
+	 */
+	position: XYPosition;
+	/** Arbitrary data passed to a node */
+	data: NodeData;
+	/** Type of node defined in nodeTypes */
+	type?: NodeType;
+	/**
+	 * Only relevant for default, source, target nodeType. controls source position
+	 * @example 'right', 'left', 'top', 'bottom'
+	 */
+	sourcePosition?: Position;
+	/**
+	 * Only relevant for default, source, target nodeType. controls target position
+	 * @example 'right', 'left', 'top', 'bottom'
+	 */
+	targetPosition?: Position;
+	hidden?: boolean;
+	selected?: boolean;
+	/** True, if node is being dragged */
+	dragging?: boolean;
+	draggable?: boolean;
+	selectable?: boolean;
+	connectable?: boolean;
+	deletable?: boolean;
+	dragHandle?: string;
+	width?: number;
+	height?: number;
+	initialWidth?: number;
+	initialHeight?: number;
+	/** Parent node id, used for creating sub-flows */
+	parentId?: string;
+	zIndex?: number;
+	/**
+	 * Boundary a node can be moved in
+	 * @example 'parent' or [[0, 0], [100, 100]]
+	 */
+	extent?: "parent" | CoordinateExtent;
+	expandParent?: boolean;
+	ariaLabel?: string;
+	/**
+	 * Origin of the node relative to it's position
+	 * @example
+	 * [0.5, 0.5] // centers the node
+	 * [0, 0] // top left
+	 * [1, 1] // bottom right
+	 */
+	origin?: NodeOrigin;
+	handles?: NodeHandle[];
+	measured?: {
+		width?: number;
+		height?: number;
+	};
+};
+type InternalNodeBase<NodeType extends NodeBase = NodeBase> = NodeType & {
+	measured: {
+		width?: number;
+		height?: number;
+	};
+	internals: {
+		positionAbsolute: XYPosition;
+		z: number;
+		/**
+		 * Holds a reference to the original node object provided by the user.
+		 * Used as an optimization to avoid certain operations.
+		 */
+		userNode: NodeType;
+		handleBounds?: NodeHandleBounds;
+		bounds?: NodeBounds;
+	};
+};
+type NodeProps<NodeType extends NodeBase> = Pick<NodeType, "id" | "data" | "width" | "height" | "sourcePosition" | "targetPosition" | "dragHandle" | "parentId"> & Required<Pick<NodeType, "type" | "dragging" | "zIndex" | "selectable" | "deletable" | "selected" | "draggable">> & {
+	/** whether a node is connectable or not */
+	isConnectable: boolean;
+	/** position absolute x value */
+	positionAbsoluteX: number;
+	/** position absolute x value */
+	positionAbsoluteY: number;
+};
+type NodeHandleBounds = {
+	source: Handle[] | null;
+	target: Handle[] | null;
+};
+type NodeBounds = XYPosition & {
+	width: number | null;
+	height: number | null;
+};
+type NodeOrigin = [
+	number,
+	number
+];
+type NodeHandle = Omit<Optional<Handle, "width" | "height">, "nodeId">;
+type HandleType = "source" | "target";
+type Handle = {
+	id?: string | null;
+	nodeId: string;
+	x: number;
+	y: number;
+	position: Position;
+	type: HandleType;
+	width: number;
+	height: number;
+};
+type OnMove = (event: MouseEvent | TouchEvent | null, viewport: Viewport) => void;
+type OnMoveStart = OnMove;
+type OnMoveEnd = OnMove;
+type ZoomInOut = (options?: ViewportHelperFunctionOptions) => Promise<boolean>;
+type ZoomTo = (zoomLevel: number, options?: ViewportHelperFunctionOptions) => Promise<boolean>;
+type GetZoom = () => number;
+type GetViewport = () => Viewport;
+type SetViewport = (viewport: Viewport, options?: ViewportHelperFunctionOptions) => Promise<boolean>;
+type SetCenter = (x: number, y: number, options?: SetCenterOptions) => Promise<boolean>;
+type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => Promise<boolean>;
+type Connection = {
+	source: string;
+	target: string;
+	sourceHandle: string | null;
+	targetHandle: string | null;
+};
+type HandleConnection = Connection & {
+	edgeId: string;
+};
+type NodeConnection = Connection & {
+	edgeId: string;
+};
+declare enum ConnectionMode {
+	Strict = "strict",
+	Loose = "loose"
+}
+type OnConnectStartParams = {
+	nodeId: string | null;
+	handleId: string | null;
+	handleType: HandleType | null;
+};
+type OnConnectStart = (event: MouseEvent | TouchEvent, params: OnConnectStartParams) => void;
+type OnConnect = (connection: Connection) => void;
+type OnConnectEnd = (event: MouseEvent | TouchEvent, connectionState: FinalConnectionState) => void;
+type FitViewOptionsBase<NodeType extends NodeBase = NodeBase> = {
+	padding?: number;
+	includeHiddenNodes?: boolean;
+	minZoom?: number;
+	maxZoom?: number;
+	duration?: number;
+	nodes?: (NodeType | {
+		id: string;
+	})[];
+};
+type Viewport = {
+	x: number;
+	y: number;
+	zoom: number;
+};
+type KeyCode = string | Array<string>;
+type SnapGrid = [
+	number,
+	number
+];
+declare enum PanOnScrollMode {
+	Free = "free",
+	Vertical = "vertical",
+	Horizontal = "horizontal"
+}
+type ViewportHelperFunctionOptions = {
+	duration?: number;
+};
+type SetCenterOptions = ViewportHelperFunctionOptions & {
+	zoom?: number;
+};
+type FitBoundsOptions = ViewportHelperFunctionOptions & {
+	padding?: number;
+};
+type PanelPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type ProOptions = {
+	account?: string;
+	hideAttribution: boolean;
+};
+declare enum SelectionMode$1 {
+	Partial = "partial",
+	Full = "full"
+}
+type OnError = (id: string, message: string) => void;
+type NoConnection = {
+	inProgress: false;
+	isValid: null;
+	from: null;
+	fromHandle: null;
+	fromPosition: null;
+	fromNode: null;
+	to: null;
+	toHandle: null;
+	toPosition: null;
+	toNode: null;
+};
+type ConnectionInProgress<NodeType extends InternalNodeBase = InternalNodeBase> = {
+	inProgress: true;
+	isValid: boolean | null;
+	from: XYPosition;
+	fromHandle: Handle;
+	fromPosition: Position;
+	fromNode: NodeType;
+	to: XYPosition;
+	toHandle: Handle | null;
+	toPosition: Position;
+	toNode: NodeType | null;
+};
+type ConnectionState<NodeType extends InternalNodeBase = InternalNodeBase> = ConnectionInProgress<NodeType> | NoConnection;
+type FinalConnectionState<NodeType extends InternalNodeBase = InternalNodeBase> = Omit<ConnectionState<NodeType>, "inProgress">;
+type ColorModeClass = "light" | "dark";
+type ColorMode = ColorModeClass | "system";
+type OnBeforeDeleteBase<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase> = ({ nodes, edges, }: {
+	nodes: NodeType[];
+	edges: EdgeType[];
+}) => Promise<boolean | {
+	nodes: NodeType[];
+	edges: EdgeType[];
+}>;
+type EdgeBase<EdgeData extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string | undefined = string | undefined> = {
+	/** Unique id of an edge */
+	id: string;
+	/** Type of an edge defined in edgeTypes */
+	type?: EdgeType;
+	/** Id of source node */
+	source: string;
+	/** Id of target node */
+	target: string;
+	/**
+	 * Id of source handle
+	 * only needed if there are multiple handles per node
+	 */
+	sourceHandle?: string | null;
+	/**
+	 * Id of target handle
+	 * only needed if there are multiple handles per node
+	 */
+	targetHandle?: string | null;
+	animated?: boolean;
+	hidden?: boolean;
+	deletable?: boolean;
+	selectable?: boolean;
+	/** Arbitrary data passed to an edge */
+	data?: EdgeData;
+	selected?: boolean;
+	/**
+	 * Set the marker on the beginning of an edge
+	 * @example 'arrow', 'arrowclosed' or custom marker
+	 */
+	markerStart?: EdgeMarkerType;
+	/**
+	 * Set the marker on the end of an edge
+	 * @example 'arrow', 'arrowclosed' or custom marker
+	 */
+	markerEnd?: EdgeMarkerType;
+	zIndex?: number;
+	ariaLabel?: string;
+	/** Padding around the edge where interaction is still possible */
+	interactionWidth?: number;
+};
+type DefaultEdgeOptionsBase<EdgeType extends EdgeBase> = Omit<EdgeType, "id" | "source" | "target" | "sourceHandle" | "targetHandle" | "selected">;
+declare enum ConnectionLineType {
+	Bezier = "default",
+	Straight = "straight",
+	Step = "step",
+	SmoothStep = "smoothstep",
+	SimpleBezier = "simplebezier"
+}
+type EdgeMarker = {
+	type: MarkerType;
+	color?: string;
+	width?: number;
+	height?: number;
+	markerUnits?: string;
+	orient?: string;
+	strokeWidth?: number;
+};
+type EdgeMarkerType = string | EdgeMarker;
+declare enum MarkerType {
+	Arrow = "arrow",
+	ArrowClosed = "arrowclosed"
+}
+type EdgePosition = {
+	sourceX: number;
+	sourceY: number;
+	targetX: number;
+	targetY: number;
+	sourcePosition: Position;
+	targetPosition: Position;
+};
+type OnNodesChange<NodeType extends Node$1 = Node$1> = (changes: NodeChange<NodeType>[]) => void;
+type OnEdgesChange<EdgeType extends Edge = Edge> = (changes: EdgeChange<EdgeType>[]) => void;
+type OnNodesDelete<NodeType extends Node$1 = Node$1> = (nodes: NodeType[]) => void;
+type OnEdgesDelete<EdgeType extends Edge = Edge> = (edges: EdgeType[]) => void;
+type OnDelete<NodeType extends Node$1 = Node$1, EdgeType extends Edge = Edge> = (params: {
+	nodes: NodeType[];
+	edges: EdgeType[];
+}) => void;
+type NodeTypes = Record<string, ComponentType<NodeProps$1 & {
+	data: any;
+	type: any;
+}>>;
+type EdgeTypes = Record<string, ComponentType<EdgeProps & {
+	data: any;
+	type: any;
+}>>;
+type OnSelectionChangeParams<NodeType extends Node$1 = Node$1, EdgeType extends Edge = Edge> = {
+	nodes: NodeType[];
+	edges: EdgeType[];
+};
+type OnSelectionChangeFunc<NodeType extends Node$1 = Node$1, EdgeType extends Edge = Edge> = (params: OnSelectionChangeParams<NodeType, EdgeType>) => void;
+type FitViewOptions<NodeType extends Node$1 = Node$1> = FitViewOptionsBase<NodeType>;
+type FitView = (fitViewOptions?: FitViewOptions) => Promise<boolean>;
+type OnInit<NodeType extends Node$1 = Node$1, EdgeType extends Edge = Edge> = (reactFlowInstance: ReactFlowInstance<NodeType, EdgeType>) => void;
+type ViewportHelperFunctions = {
+	/**
+	 * Zooms viewport in by 1.2.
+	 *
+	 * @param options.duration - optional duration. If set, a transition will be applied
+	 */
+	zoomIn: ZoomInOut;
+	/**
+	 * Zooms viewport out by 1 / 1.2.
+	 *
+	 * @param options.duration - optional duration. If set, a transition will be applied
+	 */
+	zoomOut: ZoomInOut;
+	/**
+	 * Sets the current zoom level.
+	 *
+	 * @param zoomLevel - the zoom level to set
+	 * @param options.duration - optional duration. If set, a transition will be applied
+	 */
+	zoomTo: ZoomTo;
+	/**
+	 * Returns the current zoom level.
+	 *
+	 * @returns current zoom as a number
+	 */
+	getZoom: GetZoom;
+	/**
+	 * Sets the current viewport.
+	 *
+	 * @param viewport - the viewport to set
+	 * @param options.duration - optional duration. If set, a transition will be applied
+	 */
+	setViewport: SetViewport;
+	/**
+	 * Returns the current viewport.
+	 *
+	 * @returns Viewport
+	 */
+	getViewport: GetViewport;
+	/**
+	 * Fits the view.
+	 *
+	 * @param options.padding - optional padding
+	 * @param options.includeHiddenNodes - optional includeHiddenNodes
+	 * @param options.minZoom - optional minZoom
+	 * @param options.maxZoom - optional maxZoom
+	 * @param options.duration - optional duration. If set, a transition will be applied
+	 * @param options.nodes - optional nodes to fit the view to
+	 */
+	fitView: FitView;
+	/**
+	 * Sets the center of the view to the given position.
+	 *
+	 * @param x - x position
+	 * @param y - y position
+	 * @param options.zoom - optional zoom
+	 */
+	setCenter: SetCenter;
+	/**
+	 * Fits the view to the given bounds .
+	 *
+	 * @param bounds - the bounds ({ x: number, y: number, width: number, height: number }) to fit the view to
+	 * @param options.padding - optional padding
+	 */
+	fitBounds: FitBounds;
+	/**
+	 * Converts a screen / client position to a flow position.
+	 *
+	 * @param clientPosition - the screen / client position. When you are working with events you can use event.clientX and event.clientY
+	 * @param options.snapToGrid - if true, the converted position will be snapped to the grid
+	 * @returns position as { x: number, y: number }
+	 *
+	 * @example
+	 * const flowPosition = screenToFlowPosition({ x: event.clientX, y: event.clientY })
+	 */
+	screenToFlowPosition: (clientPosition: XYPosition, options?: {
+		snapToGrid: boolean;
+	}) => XYPosition;
+	/**
+	 * Converts a flow position to a screen / client position.
+	 *
+	 * @param flowPosition - the screen / client position. When you are working with events you can use event.clientX and event.clientY
+	 * @returns position as { x: number, y: number }
+	 *
+	 * @example
+	 * const clientPosition = flowToScreenPosition({ x: node.position.x, y: node.position.y })
+	 */
+	flowToScreenPosition: (flowPosition: XYPosition) => XYPosition;
+};
+type OnBeforeDelete<NodeType extends Node$1 = Node$1, EdgeType extends Edge = Edge> = OnBeforeDeleteBase<NodeType, EdgeType>;
+type IsValidConnection<EdgeType extends Edge = Edge> = (edge: EdgeType | Connection) => boolean;
+type Node$1<NodeData extends Record<string, unknown> = Record<string, unknown>, NodeType extends string = string> = NodeBase<NodeData, NodeType> & {
+	style?: CSSProperties;
+	className?: string;
+	resizing?: boolean;
+	focusable?: boolean;
+};
+type InternalNode<NodeType extends Node$1 = Node$1> = InternalNodeBase<NodeType>;
+type NodeMouseHandler<NodeType extends Node$1 = Node$1> = (event: ReactMouseEvent, node: NodeType) => void;
+type SelectionDragHandler<NodeType extends Node$1 = Node$1> = (event: ReactMouseEvent, nodes: NodeType[]) => void;
+type OnNodeDrag<NodeType extends Node$1 = Node$1> = (event: ReactMouseEvent, node: NodeType, nodes: NodeType[]) => void;
+type NodeProps$1<NodeType extends Node$1 = Node$1> = NodeProps<NodeType>;
+type EdgeLabelOptions = {
+	label?: string | ReactNode;
+	labelStyle?: CSSProperties;
+	labelShowBg?: boolean;
+	labelBgStyle?: CSSProperties;
+	labelBgPadding?: [
+		number,
+		number
+	];
+	labelBgBorderRadius?: number;
+};
+type Edge<EdgeData extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string | undefined = string | undefined> = EdgeBase<EdgeData, EdgeType> & EdgeLabelOptions & {
+	style?: CSSProperties;
+	className?: string;
+	reconnectable?: boolean | HandleType;
+	focusable?: boolean;
+};
+type EdgeMouseHandler<EdgeType extends Edge = Edge> = (event: ReactMouseEvent, edge: EdgeType) => void;
+type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
+type EdgeProps<EdgeType extends Edge = Edge> = Pick<EdgeType, "id" | "animated" | "data" | "style" | "selected" | "source" | "target" | "selectable" | "deletable"> & EdgePosition & EdgeLabelOptions & {
+	sourceHandleId?: string | null;
+	targetHandleId?: string | null;
+	markerStart?: string;
+	markerEnd?: string;
+	pathOptions?: any;
+	interactionWidth?: number;
+};
+type OnReconnect<EdgeType extends Edge = Edge> = (oldEdge: EdgeType, newConnection: Connection) => void;
+type ConnectionLineComponentProps<NodeType extends Node$1 = Node$1> = {
+	connectionLineStyle?: CSSProperties;
+	connectionLineType: ConnectionLineType;
+	fromNode: InternalNode<NodeType>;
+	fromHandle: Handle;
+	fromX: number;
+	fromY: number;
+	toX: number;
+	toY: number;
+	fromPosition: Position;
+	toPosition: Position;
+	connectionStatus: "valid" | "invalid" | null;
+	toNode: InternalNode<NodeType> | null;
+	toHandle: Handle | null;
+};
+type ConnectionLineComponent<NodeType extends Node$1 = Node$1> = ComponentType<ConnectionLineComponentProps<NodeType>>;
+interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge = Edge> extends Omit<HTMLAttributes<HTMLDivElement>, "onError"> {
+	/**
+	 * An array of nodes to render in a controlled flow.
+	 * @example
+	 * const nodes = [
+	 *  {
+	 *    id: 'node-1',
+	 *    type: 'input',
+	 *    data: { label: 'Node 1' },
+	 *    position: { x: 250, y: 50 }
+	 *  }
+	 * ];
+	 */
+	nodes?: NodeType[];
+	/**
+	 * An array of edges to render in a controlled flow.
+	 * @example
+	 * const edges = [
+	 *  {
+	 *    id: 'edge-1-2',
+	 *    source: 'node-1',
+	 *    target: 'node-2',
+	 *  }
+	 * ];
+	 */
+	edges?: EdgeType[];
+	/** The initial nodes to render in an uncontrolled flow. */
+	defaultNodes?: NodeType[];
+	/** The initial edges to render in an uncontrolled flow. */
+	defaultEdges?: EdgeType[];
+	/**
+	 * Defaults to be applied to all new edges that are added to the flow.
+	 *
+	 * Properties on a new edge will override these defaults if they exist.
+	 * @example
+	 * const defaultEdgeOptions = {
+	 *  type: 'customEdgeType',
+	 *  animated: true,
+	 *  interactionWidth: 10,
+	 *  data: { label: 'custom label' },
+	 *  hidden: false,
+	 *  deletable: true,
+	 *  selected: false,
+	 *  focusable: true,
+	 *  markerStart: EdgeMarker.ArrowClosed,
+	 *  markerEnd: EdgeMarker.ArrowClosed,
+	 *  zIndex: 12,
+	 *  ariaLabel: 'custom aria label'
+	 * }
+	 */
+	defaultEdgeOptions?: DefaultEdgeOptions;
+	/** This event handler is called when a user clicks on a node */
+	onNodeClick?: NodeMouseHandler<NodeType>;
+	/** This event handler is called when a user double clicks on a node */
+	onNodeDoubleClick?: NodeMouseHandler<NodeType>;
+	/** This event handler is called when mouse of a user enters a node */
+	onNodeMouseEnter?: NodeMouseHandler<NodeType>;
+	/** This event handler is called when mouse of a user moves over a node */
+	onNodeMouseMove?: NodeMouseHandler<NodeType>;
+	/** This event handler is called when mouse of a user leaves a node */
+	onNodeMouseLeave?: NodeMouseHandler<NodeType>;
+	/** This event handler is called when a user right clicks on a node */
+	onNodeContextMenu?: NodeMouseHandler<NodeType>;
+	/** This event handler is called when a user starts to drag a node */
+	onNodeDragStart?: OnNodeDrag<NodeType>;
+	/** This event handler is called when a user drags a node */
+	onNodeDrag?: OnNodeDrag<NodeType>;
+	/** This event handler is called when a user stops dragging a node */
+	onNodeDragStop?: OnNodeDrag<NodeType>;
+	/** This event handler is called when a user clicks on an edge */
+	onEdgeClick?: (event: ReactMouseEvent, edge: EdgeType) => void;
+	/** This event handler is called when a user right clicks on an edge */
+	onEdgeContextMenu?: EdgeMouseHandler<EdgeType>;
+	/** This event handler is called when mouse of a user enters an edge */
+	onEdgeMouseEnter?: EdgeMouseHandler<EdgeType>;
+	/** This event handler is called when mouse of a user moves over an edge */
+	onEdgeMouseMove?: EdgeMouseHandler<EdgeType>;
+	/** This event handler is called when mouse of a user leaves an edge */
+	onEdgeMouseLeave?: EdgeMouseHandler<EdgeType>;
+	/** This event handler is called when a user double clicks on an edge */
+	onEdgeDoubleClick?: EdgeMouseHandler<EdgeType>;
+	onReconnect?: OnReconnect<EdgeType>;
+	onReconnectStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void;
+	onReconnectEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void;
+	/**
+	 * This event handler is called when a Node is updated
+	 * @example // Use NodesState hook to create edges and get onNodesChange handler
+	 * import ReactFlow, { useNodesState } from '@xyflow/react';
+	 * const [edges, setNodes, onNodesChange] = useNodesState(initialNodes);
+	 *
+	 * return (<ReactFlow onNodeChange={onNodeChange} {...rest} />)
+	 * @example // Use helper function to update edge
+	 * import ReactFlow, { applyNodeChanges } from '@xyflow/react';
+	 *
+	 * const onNodeChange = useCallback(
+	 *  (changes) => setNode((eds) => applyNodeChanges(changes, eds)),
+	 *  [],
+	 * );
+	 *
+	 * return (<ReactFlow onNodeChange={onNodeChange} {...rest} />)
+	 */
+	onNodesChange?: OnNodesChange<NodeType>;
+	/**
+	 * This event handler is called when a Edge is updated
+	 * @example // Use EdgesState hook to create edges and get onEdgesChange handler
+	 * import ReactFlow, { useEdgesState } from '@xyflow/react';
+	 * const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+	 *
+	 * return (<ReactFlow onEdgesChange={onEdgesChange} {...rest} />)
+	 * @example // Use helper function to update edge
+	 * import ReactFlow, { applyEdgeChanges } from '@xyflow/react';
+	 *
+	 * const onEdgesChange = useCallback(
+	 *  (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+	 *  [],
+	 * );
+	 *
+	 * return (<ReactFlow onEdgesChange={onEdgesChange} {...rest} />)
+	 */
+	onEdgesChange?: OnEdgesChange<EdgeType>;
+	/** This event handler gets called when a Node is deleted */
+	onNodesDelete?: OnNodesDelete<NodeType>;
+	/** This event handler gets called when a Edge is deleted */
+	onEdgesDelete?: OnEdgesDelete<EdgeType>;
+	/** This event handler gets called when a Node or Edge is deleted */
+	onDelete?: OnDelete<NodeType, EdgeType>;
+	/** This event handler gets called when a user starts to drag a selection box */
+	onSelectionDragStart?: SelectionDragHandler<NodeType>;
+	/** This event handler gets called when a user drags a selection box */
+	onSelectionDrag?: SelectionDragHandler<NodeType>;
+	/** This event handler gets called when a user stops dragging a selection box */
+	onSelectionDragStop?: SelectionDragHandler<NodeType>;
+	onSelectionStart?: (event: ReactMouseEvent) => void;
+	onSelectionEnd?: (event: ReactMouseEvent) => void;
+	onSelectionContextMenu?: (event: ReactMouseEvent, nodes: NodeType[]) => void;
+	/**
+	 * When a connection line is completed and two nodes are connected by the user, this event fires with the new connection.
+	 *
+	 * You can use the addEdge utility to convert the connection to a complete edge.
+	 * @example // Use helper function to update edges onConnect
+	 * import ReactFlow, { addEdge } from '@xyflow/react';
+	 *
+	 * const onConnect = useCallback(
+	 *  (params) => setEdges((eds) => addEdge(params, eds)),
+	 *  [],
+	 * );
+	 *
+	 * return (<ReactFlow onConnect={onConnect} {...rest} />)
+	 */
+	onConnect?: OnConnect;
+	/** This event handler gets called when a user starts to drag a connection line */
+	onConnectStart?: OnConnectStart;
+	/** This event handler gets called when a user stops dragging a connection line */
+	onConnectEnd?: OnConnectEnd;
+	onClickConnectStart?: OnConnectStart;
+	onClickConnectEnd?: OnConnectEnd;
+	/** This event handler gets called when a flow has finished initializing */
+	onInit?: OnInit<NodeType, EdgeType>;
+	/** This event handler is called while the user is either panning or zooming the viewport. */
+	onMove?: OnMove;
+	/** This event handler gets called when a user starts to pan or zoom the viewport */
+	onMoveStart?: OnMoveStart;
+	/** This event handler gets called when a user stops panning or zooming the viewport */
+	onMoveEnd?: OnMoveEnd;
+	/** This event handler gets called when a user changes group of selected elements in the flow */
+	onSelectionChange?: OnSelectionChangeFunc<NodeType, EdgeType>;
+	/** This event handler gets called when user scroll inside the pane */
+	onPaneScroll?: (event?: WheelEvent) => void;
+	/** This event handler gets called when user clicks inside the pane */
+	onPaneClick?: (event: ReactMouseEvent) => void;
+	/** This event handler gets called when user right clicks inside the pane */
+	onPaneContextMenu?: (event: ReactMouseEvent | MouseEvent) => void;
+	/** This event handler gets called when mouse enters the pane */
+	onPaneMouseEnter?: (event: ReactMouseEvent) => void;
+	/** This event handler gets called when mouse moves over the pane */
+	onPaneMouseMove?: (event: ReactMouseEvent) => void;
+	/** This event handler gets called when mouse leaves the pane */
+	onPaneMouseLeave?: (event: ReactMouseEvent) => void;
+	/**
+	 * Distance that the mouse can move between mousedown/up that will trigger a click
+	 * @default 0
+	 */
+	paneClickDistance?: number;
+	/**
+	 * Distance that the mouse can move between mousedown/up that will trigger a click
+	 * @default 0
+	 */
+	nodeClickDistance?: number;
+	/** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */
+	onBeforeDelete?: OnBeforeDelete<NodeType, EdgeType>;
+	/**
+	 * Custom node types to be available in a flow.
+	 *
+	 * React Flow matches a node's type to a component in the nodeTypes object.
+	 * @example
+	 * import CustomNode from './CustomNode';
+	 *
+	 * const nodeTypes = { nameOfNodeType: CustomNode };
+	 */
+	nodeTypes?: NodeTypes;
+	/**
+	 * Custom edge types to be available in a flow.
+	 *
+	 * React Flow matches an edge's type to a component in the edgeTypes object.
+	 * @example
+	 * import CustomEdge from './CustomEdge';
+	 *
+	 * const edgeTypes = { nameOfEdgeType: CustomEdge };
+	 */
+	edgeTypes?: EdgeTypes;
+	/**
+	 * The type of edge path to use for connection lines.
+	 *
+	 * Although created edges can be of any type, React Flow needs to know what type of path to render for the connection line before the edge is created!
+	 */
+	connectionLineType?: ConnectionLineType;
+	/** Styles to be applied to the connection line */
+	connectionLineStyle?: CSSProperties;
+	/** React Component to be used as a connection line */
+	connectionLineComponent?: ConnectionLineComponent<NodeType>;
+	/** Styles to be applied to the container of the connection line */
+	connectionLineContainerStyle?: CSSProperties;
+	/**
+	 * 'strict' connection mode will only allow you to connect source handles to target handles.
+	 *
+	 * 'loose' connection mode will allow you to connect handles of any type to one another.
+	 * @default 'strict'
+	 */
+	connectionMode?: ConnectionMode;
+	/**
+	 * Pressing down this key deletes all selected nodes & edges.
+	 * @default 'Backspace'
+	 */
+	deleteKeyCode?: KeyCode | null;
+	/**
+	 * If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false.
+	 *
+	 * By setting this prop to null you can disable this functionality.
+	 * @default 'Space'
+	 */
+	selectionKeyCode?: KeyCode | null;
+	/** Select multiple elements with a selection box, without pressing down selectionKey */
+	selectionOnDrag?: boolean;
+	/**
+	 * When set to "partial", when the user creates a selection box by click and dragging nodes that are only partially in the box are still selected.
+	 * @default 'full'
+	 */
+	selectionMode?: SelectionMode$1;
+	/**
+	 * If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false.
+	 *
+	 * By setting this prop to null you can disable this functionality.
+	 * @default 'Space'
+	 */
+	panActivationKeyCode?: KeyCode | null;
+	/**
+	 * Pressing down this key you can select multiple elements by clicking.
+	 * @default 'Meta' for macOS, "Ctrl" for other systems
+	 */
+	multiSelectionKeyCode?: KeyCode | null;
+	/**
+	 * If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false.
+	 *
+	 * By setting this prop to null you can disable this functionality.
+	 * @default 'Meta' for macOS, "Ctrl" for other systems
+	 *
+	 */
+	zoomActivationKeyCode?: KeyCode | null;
+	/** Set this prop to make the flow snap to the grid */
+	snapToGrid?: boolean;
+	/**
+	 * Grid all nodes will snap to
+	 * @example [20, 20]
+	 */
+	snapGrid?: SnapGrid;
+	/**
+	 * You can enable this optimisation to instruct Svelte Flow to only render nodes and edges that would be visible in the viewport.
+	 *
+	 * This might improve performance when you have a large number of nodes and edges but also adds an overhead.
+	 * @default false
+	 */
+	onlyRenderVisibleElements?: boolean;
+	/**
+	 * Controls if all nodes should be draggable
+	 * @default true
+	 */
+	nodesDraggable?: boolean;
+	/**
+	 * Controls if all nodes should be connectable to each other
+	 * @default true
+	 */
+	nodesConnectable?: boolean;
+	/**
+	 * Controls if all nodes should be focusable
+	 * @default true
+	 */
+	nodesFocusable?: boolean;
+	/**
+	 * Defines nodes relative position to its coordinates
+	 * @example
+	 * [0, 0] // default, top left
+	 * [0.5, 0.5] // center
+	 * [1, 1] // bottom right
+	 */
+	nodeOrigin?: NodeOrigin;
+	/**
+	 * Controls if all edges should be focusable
+	 * @default true
+	 */
+	edgesFocusable?: boolean;
+	/**
+	 * Controls if all edges should be updateable
+	 * @default true
+	 */
+	edgesReconnectable?: boolean;
+	/**
+	 * Controls if all elements should (nodes & edges) be selectable
+	 * @default true
+	 */
+	elementsSelectable?: boolean;
+	/**
+	 * If true, nodes get selected on drag
+	 * @default true
+	 */
+	selectNodesOnDrag?: boolean;
+	/**
+	 * Enableing this prop allows users to pan the viewport by clicking and dragging.
+	 *
+	 * You can also set this prop to an array of numbers to limit which mouse buttons can activate panning.
+	 * @example [0, 2] // allows panning with the left and right mouse buttons
+	 * [0, 1, 2, 3, 4] // allows panning with all mouse buttons
+	 */
+	panOnDrag?: boolean | number[];
+	/**
+	 * Minimum zoom level
+	 * @default 0.5
+	 */
+	minZoom?: number;
+	/**
+	 * Maximum zoom level
+	 * @default 2
+	 */
+	maxZoom?: number;
+	/** Controlled viewport to be used instead of internal one */
+	viewport?: Viewport;
+	/**
+	 * Sets the initial position and zoom of the viewport.
+	 *
+	 * If a default viewport is provided but fitView is enabled, the default viewport will be ignored.
+	 * @example
+	 * const initialViewport = {
+	 *  zoom: 0.5,
+	 *  position: { x: 0, y: 0 }
+	 * };
+	 */
+	defaultViewport?: Viewport;
+	/**
+	 * Gets called when the viewport changes.
+	 */
+	onViewportChange?: (viewport: Viewport) => void;
+	/**
+	 * By default the viewport extends infinitely. You can use this prop to set a boundary.
+	 *
+	 * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
+	 * @example [[-1000, -10000], [1000, 1000]]
+	 */
+	translateExtent?: CoordinateExtent;
+	/**
+	 * Disabling this prop will allow the user to scroll the page even when their pointer is over the flow.
+	 * @default true
+	 */
+	preventScrolling?: boolean;
+	/**
+	 * By default nodes can be placed on an infinite flow. You can use this prop to set a boundary.
+	 *
+	 * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
+	 * @example [[-1000, -10000], [1000, 1000]]
+	 */
+	nodeExtent?: CoordinateExtent;
+	/**
+	 * Color of edge markers
+	 * @example "#b1b1b7"
+	 */
+	defaultMarkerColor?: string;
+	/** Controls if the viewport should zoom by scrolling inside the container */
+	zoomOnScroll?: boolean;
+	/** Controls if the viewport should zoom by pinching on a touch screen */
+	zoomOnPinch?: boolean;
+	/**
+	 * Controls if the viewport should pan by scrolling inside the container
+	 *
+	 * Can be limited to a specific direction with panOnScrollMode
+	 */
+	panOnScroll?: boolean;
+	/**
+	 * Controls how fast viewport should be panned on scroll.
+	 *
+	 * Use togther with panOnScroll prop.
+	 */
+	panOnScrollSpeed?: number;
+	/**
+	 * This prop is used to limit the direction of panning when panOnScroll is enabled.
+	 *
+	 * The "free" option allows panning in any direction.
+	 * @default "free"
+	 * @example "horizontal" | "vertical"
+	 */
+	panOnScrollMode?: PanOnScrollMode;
+	/** Controls if the viewport should zoom by double clicking somewhere on the flow */
+	zoomOnDoubleClick?: boolean;
+	reconnectRadius?: number;
+	noDragClassName?: string;
+	noWheelClassName?: string;
+	noPanClassName?: string;
+	/** If set, initial viewport will show all nodes & edges */
+	fitView?: boolean;
+	/**
+	 * Options to be used in combination with fitView
+	 * @example
+	 * const fitViewOptions = {
+	 *  padding: 0.1,
+	 *  includeHiddenNodes: false,
+	 *  minZoom: 0.1,
+	 *  maxZoom: 1,
+	 *  duration: 200,
+	 *  nodes: [{id: 'node-1'}, {id: 'node-2'}], // nodes to fit
+	 * };
+	 */
+	fitViewOptions?: FitViewOptions;
+	/**
+	 *The connectOnClick option lets you click or tap on a source handle to start a connection
+	 * and then click on a target handle to complete the connection.
+	 *
+	 * If you set this option to false, users will need to drag the connection line to the target
+	 * handle to create a connection.
+	 */
+	connectOnClick?: boolean;
+	/**
+	 * Set position of the attribution
+	 * @default 'bottom-right'
+	 * @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+	 */
+	attributionPosition?: PanelPosition;
+	/**
+	 * By default, we render a small attribution in the corner of your flows that links back to the project.
+	 *
+	 * Anyone is free to remove this attribution whether they're a Pro subscriber or not
+	 * but we ask that you take a quick look at our {@link https://reactflow.dev/learn/troubleshooting/remove-attribution | removing attribution guide}
+	 * before doing so.
+	 */
+	proOptions?: ProOptions;
+	/**
+	 * Enabling this option will raise the z-index of nodes when they are selected.
+	 * @default true
+	 */
+	elevateNodesOnSelect?: boolean;
+	/**
+	 * Enabling this option will raise the z-index of edges when they are selected.
+	 * @default true
+	 */
+	elevateEdgesOnSelect?: boolean;
+	/**
+	 * Can be set true if built-in keyboard controls should be disabled.
+	 * @default false
+	 */
+	disableKeyboardA11y?: boolean;
+	/**
+	 * You can enable this prop to automatically pan the viewport while dragging a node.
+	 * @default true
+	 */
+	autoPanOnNodeDrag?: boolean;
+	/**
+	 * You can enable this prop to automatically pan the viewport while dragging a node.
+	 * @default true
+	 */
+	autoPanOnConnect?: boolean;
+	/**
+	 * The speed at which the viewport pans while dragging a node or a selection box.
+	 * @default 15
+	 */
+	autoPanSpeed?: number;
+	/**
+	 * You can enable this prop to automatically pan the viewport while making a new connection.
+	 * @default true
+	 */
+	connectionRadius?: number;
+	/**
+	 * Ocassionally something may happen that causes Svelte Flow to throw an error.
+	 *
+	 * Instead of exploding your application, we log a message to the console and then call this event handler.
+	 * You might use it for additional logging or to show a message to the user.
+	 */
+	onError?: OnError;
+	/**
+	 * This callback can be used to validate a new connection
+	 *
+	 * If you return false, the edge will not be added to your flow.
+	 * If you have custom connection logic its preferred to use this callback over the isValidConnection prop on the handle component for performance reasons.
+	 * @default (connection: Connection) => true
+	 */
+	isValidConnection?: IsValidConnection<EdgeType>;
+	/**
+	 * With a threshold greater than zero you can control the distinction between node drag and click events.
+	 *
+	 * If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired.
+	 * @default 1
+	 */
+	nodeDragThreshold?: number;
+	/** Sets a fixed width for the flow */
+	width?: number;
+	/** Sets a fixed height for the flow */
+	height?: number;
+	/**
+	 * Controls color scheme used for styling the flow
+	 * @default 'system'
+	 * @example 'system' | 'light' | 'dark'
+	 */
+	colorMode?: ColorMode;
+	/**
+	 * If set true, some debug information will be logged to the console like which events are fired.
+	 *
+	 * @default undefined
+	 */
+	debug?: boolean;
+}
+type ReactFlowJsonObject<NodeType extends Node$1 = Node$1, EdgeType extends Edge = Edge> = {
+	nodes: NodeType[];
+	edges: EdgeType[];
+	viewport: Viewport;
+};
+type DeleteElementsOptions = {
+	nodes?: (Node$1 | {
+		id: Node$1["id"];
+	})[];
+	edges?: (Edge | {
+		id: Edge["id"];
+	})[];
+};
+type GeneralHelpers<NodeType extends Node$1 = Node$1, EdgeType extends Edge = Edge> = {
+	/**
+	 * Returns nodes.
+	 *
+	 * @returns nodes array
+	 */
+	getNodes: () => NodeType[];
+	/**
+	 * Sets nodes.
+	 *
+	 * @param payload - the nodes to set or a function that receives the current nodes and returns the new nodes
+	 */
+	setNodes: (payload: NodeType[] | ((nodes: NodeType[]) => NodeType[])) => void;
+	/**
+	 * Adds nodes.
+	 *
+	 * @param payload - the nodes to add
+	 */
+	addNodes: (payload: NodeType[] | NodeType) => void;
+	/**
+	 * Returns a node by id.
+	 *
+	 * @param id - the node id
+	 * @returns the node or undefined if no node was found
+	 */
+	getNode: (id: string) => NodeType | undefined;
+	/**
+	 * Returns an internal node by id.
+	 *
+	 * @param id - the node id
+	 * @returns the internal node or undefined if no node was found
+	 */
+	getInternalNode: (id: string) => InternalNode<NodeType> | undefined;
+	/**
+	 * Returns edges.
+	 *
+	 * @returns edges array
+	 */
+	getEdges: () => EdgeType[];
+	/**
+	 * Sets edges.
+	 *
+	 * @param payload - the edges to set or a function that receives the current edges and returns the new edges
+	 */
+	setEdges: (payload: EdgeType[] | ((edges: EdgeType[]) => EdgeType[])) => void;
+	/**
+	 * Adds edges.
+	 *
+	 * @param payload - the edges to add
+	 */
+	addEdges: (payload: EdgeType[] | EdgeType) => void;
+	/**
+	 * Returns an edge by id.
+	 *
+	 * @param id - the edge id
+	 * @returns the edge or undefined if no edge was found
+	 */
+	getEdge: (id: string) => EdgeType | undefined;
+	/**
+	 * Returns the nodes, edges and the viewport as a JSON object.
+	 *
+	 * @returns the nodes, edges and the viewport as a JSON object
+	 */
+	toObject: () => ReactFlowJsonObject<NodeType, EdgeType>;
+	/**
+	 * Deletes nodes and edges.
+	 *
+	 * @param params.nodes - optional nodes array to delete
+	 * @param params.edges - optional edges array to delete
+	 *
+	 * @returns a promise that resolves with the deleted nodes and edges
+	 */
+	deleteElements: (params: DeleteElementsOptions) => Promise<{
+		deletedNodes: Node$1[];
+		deletedEdges: Edge[];
+	}>;
+	/**
+	 * Returns all nodes that intersect with the given node or rect.
+	 *
+	 * @param node - the node or rect to check for intersections
+	 * @param partially - if true, the node is considered to be intersecting if it partially overlaps with the passed node or rect
+	 * @param nodes - optional nodes array to check for intersections
+	 *
+	 * @returns an array of intersecting nodes
+	 */
+	getIntersectingNodes: (node: NodeType | {
+		id: Node$1["id"];
+	} | Rect, partially?: boolean, nodes?: NodeType[]) => NodeType[];
+	/**
+	 * Checks if the given node or rect intersects with the passed rect.
+	 *
+	 * @param node - the node or rect to check for intersections
+	 * @param area - the rect to check for intersections
+	 * @param partially - if true, the node is considered to be intersecting if it partially overlaps with the passed react
+	 *
+	 * @returns true if the node or rect intersects with the given area
+	 */
+	isNodeIntersecting: (node: NodeType | {
+		id: Node$1["id"];
+	} | Rect, area: Rect, partially?: boolean) => boolean;
+	/**
+	 * Updates a node.
+	 *
+	 * @param id - id of the node to update
+	 * @param nodeUpdate - the node update as an object or a function that receives the current node and returns the node update
+	 * @param options.replace - if true, the node is replaced with the node update, otherwise the changes get merged
+	 *
+	 * @example
+	 * updateNode('node-1', (node) => ({ position: { x: node.position.x + 10, y: node.position.y } }));
+	 */
+	updateNode: (id: string, nodeUpdate: Partial<NodeType> | ((node: NodeType) => Partial<NodeType>), options?: {
+		replace: boolean;
+	}) => void;
+	/**
+	 * Updates the data attribute of a node.
+	 *
+	 * @param id - id of the node to update
+	 * @param dataUpdate - the data update as an object or a function that receives the current data and returns the data update
+	 * @param options.replace - if true, the data is replaced with the data update, otherwise the changes get merged
+	 *
+	 * @example
+	 * updateNodeData('node-1', { label: 'A new label' });
+	 */
+	updateNodeData: (id: string, dataUpdate: Partial<NodeType["data"]> | ((node: NodeType) => Partial<NodeType["data"]>), options?: {
+		replace: boolean;
+	}) => void;
+	/**
+	 * Updates an edge.
+	 *
+	 * @param id - id of the edge to update
+	 * @param edgeUpdate - the edge update as an object or a function that receives the current edge and returns the edge update
+	 * @param options.replace - if true, the edge is replaced with the edge update, otherwise the changes get merged
+	 *
+	 * @example
+	 * updateEdge('edge-1', (edge) => ({ label: 'A new label' }));
+	 */
+	updateEdge: (id: string, edgeUpdate: Partial<EdgeType> | ((edge: EdgeType) => Partial<EdgeType>), options?: {
+		replace: boolean;
+	}) => void;
+	/**
+	 * Updates the data attribute of a edge.
+	 *
+	 * @param id - id of the edge to update
+	 * @param dataUpdate - the data update as an object or a function that receives the current data and returns the data update
+	 * @param options.replace - if true, the data is replaced with the data update, otherwise the changes get merged
+	 *
+	 * @example
+	 * updateEdgeData('edge-1', { label: 'A new label' });
+	 */
+	updateEdgeData: (id: string, dataUpdate: Partial<EdgeType["data"]> | ((edge: EdgeType) => Partial<EdgeType["data"]>), options?: {
+		replace: boolean;
+	}) => void;
+	/**
+	 * Returns the bounds of the given nodes or node ids.
+	 *
+	 * @param nodes - the nodes or node ids to calculate the bounds for
+	 *
+	 * @returns the bounds of the given nodes
+	 */
+	getNodesBounds: (nodes: (NodeType | InternalNode | string)[]) => Rect;
+	/**
+	 * Gets all connections for a given handle belonging to a specific node.
+	 * @deprecated
+	 * @param type - handle type 'source' or 'target'
+	 * @param id - the handle id (this is only needed if you have multiple handles of the same type, meaning you have to provide a unique id for each handle)
+	 * @param nodeId - the node id the handle belongs to
+	 * @returns an array with handle connections
+	 */
+	getHandleConnections: ({ type, id, nodeId, }: {
+		type: HandleType;
+		nodeId: string;
+		id?: string | null;
+	}) => HandleConnection[];
+	/**
+	 * Gets all connections to a node. Can be filtered by handle type and id.
+	 * @param type - handle type 'source' or 'target'
+	 * @param handleId - the handle id (this is only needed if you have multiple handles of the same type, meaning you have to provide a unique id for each handle)
+	 * @param nodeId - the node id the handle belongs to
+	 * @returns an array with handle connections
+	 */
+	getNodeConnections: ({ type, handleId, nodeId, }: {
+		type?: HandleType;
+		nodeId: string;
+		handleId?: string | null;
+	}) => NodeConnection[];
+};
+type ReactFlowInstance<NodeType extends Node$1 = Node$1, EdgeType extends Edge = Edge> = GeneralHelpers<NodeType, EdgeType> & Omit<ViewportHelperFunctions, "initialized"> & {
+	viewportInitialized: boolean;
+};
+type ControlsCustomLayoutProps = {
+	burgerMenu: ReactNode;
+	navigationButtons: ReactNode;
+	search: ReactNode;
+	actionsGroup: ReactNode;
+	syncInProgressBadge: ReactNode;
+};
+type ControlsCustomLayout = (props: ControlsCustomLayoutProps) => ReactNode;
+type DiagramNodeWithNavigate<ID = ViewId> = Omit<DiagramNode, "navigateTo"> & {
+	navigateTo: ID;
+};
+type ElementIconRendererProps = {
+	node: {
+		id: string;
+		title: string;
+		icon?: string | null | undefined;
+	};
+};
+type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
+type OnNavigateTo<ID = ViewId> = (to: ID, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<ID>) => void;
+type OnNodeClick = (node: DiagramNode, event: ReactMouseEvent) => void;
+type OnEdgeClick = (edge: DiagramEdge, event: ReactMouseEvent) => void;
+type OnCanvasClick = (event: ReactMouseEvent) => void;
+type ChangeEvent = {
+	change: ViewChange;
+};
+type OnChange = (event: ChangeEvent) => void;
+type OverrideReactFlowProps = Pick<ReactFlowProps, "paneClickDistance" | "nodeClickDistance" | "selectionKeyCode" | "panActivationKeyCode" | "multiSelectionKeyCode" | "zoomActivationKeyCode" | "snapToGrid" | "snapGrid" | "onlyRenderVisibleElements" | "nodesDraggable" | "nodesFocusable" | "elementsSelectable" | "selectNodesOnDrag" | "panOnDrag" | "preventScrolling" | "zoomOnScroll" | "zoomOnPinch" | "panOnScroll" | "panOnScrollSpeed" | "panOnScrollMode" | "zoomOnDoubleClick" | "nodeDragThreshold">;
+interface LikeC4DiagramProperties {
+	view: DiagramView;
+	className?: string | undefined;
+	/**
+	 * Enable/disable panning
+	 * @default true
+	 */
+	pannable?: boolean | undefined;
+	/**
+	 * Enable/disable zooming
+	 * @default true
+	 */
+	zoomable?: boolean | undefined;
+	/**
+	 * Disable any editing (dragging still can be enabled with `nodesDraggable`)
+	 * @default true
+	 */
+	readonly?: boolean | undefined;
+	/**
+	 * Show/hide panel with top left controls,
+	 *
+	 * @default true if not readonly
+	 */
+	controls?: boolean | undefined;
+	/**
+	 * If set, initial viewport will show all nodes & edges
+	 * @default true
+	 */
+	fitView?: boolean | undefined;
+	/**
+	 * Seems like this is percentage of the view size
+	 * @default 0
+	 */
+	fitViewPadding?: number | undefined;
+	/**
+	 * @default false if readonly
+	 */
+	nodesSelectable?: boolean | undefined;
+	/**
+	 * @default false if readonly
+	 */
+	nodesDraggable?: boolean | undefined;
+	initialWidth?: number | undefined;
+	initialHeight?: number | undefined;
+	/**
+	 * Background pattern
+	 * @default 'dots'
+	 */
+	background?: "transparent" | "solid" | "dots" | "lines" | "cross" | undefined;
+	/**
+	 * Display webview with diagram title / description
+	 * @default true
+	 */
+	showDiagramTitle?: boolean | undefined;
+	/**
+	 * Show back/forward history navigation buttons
+	 * @default true if `onNavigateTo` is set
+	 */
+	showNavigationButtons?: undefined | boolean;
+	/**
+	 * Display notations of the view
+	 * @default true
+	 */
+	showNotations?: boolean | undefined;
+	/**
+	 * Display dropdown with details on relationship's label click
+	 * @default false
+	 */
+	enableRelationshipDetails?: boolean | undefined;
+	/**
+	 * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+	 * @default false
+	 */
+	enableFocusMode?: boolean | undefined;
+	/**
+	 * Enable search popup for elements and views
+	 * @default true
+	 */
+	enableSearch?: boolean | undefined;
+	/**
+	 * Enable modal with element details
+	 * @default false
+	 */
+	enableElementDetails?: boolean | undefined;
+	/**
+	 * Experimental feature to browse relationships
+	 *
+	 * @default false
+	 */
+	enableRelationshipBrowser?: boolean | undefined;
+	/**
+	 * If Walkthrough for dynamic views should be enabled
+	 * @default false
+	 */
+	enableDynamicViewWalkthrough?: boolean | undefined;
+	/**
+	 * Experimental feature to enable edge editing
+	 * @default false
+	 */
+	experimentalEdgeEditing?: boolean | undefined;
+	/**
+	 * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+	 *
+	 * @default 'auto' - will be set to true if view has more then 3000 * 2000 pixels
+	 */
+	reduceGraphics?: "auto" | boolean | undefined;
+	/**
+	 * Render icon for an element, bundled or remote
+	 * By default, if icon is http:// or https://, it will be rendered as an image
+	 */
+	renderIcon?: ElementIconRenderer | undefined;
+	/**
+	 * Customize layout of the controls on the top left
+	 */
+	renderControls?: ControlsCustomLayout | undefined;
+	/**
+	 * Dynamic filter, applies both to nodes and edges
+	 */
+	where?: WhereOperator<string, string> | undefined;
+	/**
+	 * Override ReactFlow props
+	 */
+	reactFlowProps?: OverrideReactFlowProps | undefined;
+}
+type OpenSourceParams = {
+	element: Fqn;
+	property?: string;
+} | {
+	relation: RelationId;
+} | {
+	deployment: Fqn;
+	property?: string;
+} | {
+	view: ViewId;
+};
+interface LikeC4DiagramEventHandlers {
+	onChange?: OnChange | null | undefined;
+	onNavigateTo?: OnNavigateTo | null | undefined;
+	onNodeClick?: OnNodeClick | null | undefined;
+	onNodeContextMenu?: OnNodeClick | null | undefined;
+	onCanvasContextMenu?: OnCanvasClick | null | undefined;
+	onEdgeClick?: OnEdgeClick | null | undefined;
+	onEdgeContextMenu?: OnEdgeClick | null | undefined;
+	onCanvasClick?: OnCanvasClick | null | undefined;
+	onCanvasDblClick?: OnCanvasClick | null | undefined;
+	onBurgerMenuClick?: null | undefined | (() => void);
+	onOpenSource?: null | undefined | ((params: OpenSourceParams) => void);
+}
+export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
+	/**
+	 * View to display.
+	 */
+	viewId: ViewId;
+	/**
+	 * Enable/disable panning
+	 * @default false
+	 */
+	pannable?: boolean | undefined;
+	/**
+	 * Enable/disable zooming
+	 * @default false
+	 */
+	zoomable?: boolean | undefined;
+	/**
+	 * @default true
+	 */
+	keepAspectRatio?: boolean | undefined;
+	/**
+	 * Background pattern
+	 * @default 'transparent'
+	 */
+	background?: "dots" | "lines" | "cross" | "transparent" | "solid" | undefined;
+	/**
+	 * Click on the view opens a modal with browser.
+	 * You can customize or disable the browser.
+	 *
+	 * @default true
+	 */
+	browser?: boolean | LikeC4BrowserProps | undefined;
+	/**
+	 * @default - determined by the user's system preferences.
+	 */
+	colorScheme?: "light" | "dark" | undefined;
+	/**
+	 * LikeC4 views are using 'IBM Plex Sans' font.
+	 * By default, component injects the CSS to document head.
+	 * Set to false if you want to handle the font yourself.
+	 *
+	 * @default true
+	 */
+	injectFontCss?: boolean | undefined;
+	/**
+	 * Show/hide panel with top left controls,
+	 * @default false
+	 */
+	controls?: boolean | undefined;
+	/**
+	 * If set, initial viewport will show all nodes & edges
+	 * @default true
+	 */
+	fitView?: boolean | undefined;
+	/**
+	 * Seems like this is percentage of the view size
+	 * @default 0.1
+	 */
+	fitViewPadding?: number | undefined;
+	/**
+	 * Display diagram title / description
+	 *
+	 * @default false
+	 */
+	showDiagramTitle?: boolean | undefined;
+	/**
+	 * Show back/forward navigation buttons
+	 * @default false
+	 */
+	showNavigationButtons?: undefined | boolean;
+	/**
+	 * Display notations of the view
+	 * @default false
+	 */
+	showNotations?: boolean | undefined;
+	/**
+	 * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+	 * Conflicts with `browser` prop
+	 *
+	 * @default false
+	 */
+	enableFocusMode?: boolean | undefined;
+	/**
+	 * If Walkthrough for dynamic views should be enabled
+	 * @default enableFocusMode
+	 */
+	enableDynamicViewWalkthrough?: boolean | undefined;
+	/**
+	 * Enable popup with element details
+	 * @default false
+	 */
+	enableElementDetails?: boolean | undefined;
+	/**
+	 * Experimental feature to browse relationships
+	 *
+	 * @default enableElementDetails
+	 */
+	enableRelationshipBrowser?: boolean | undefined;
+	/**
+	 * Display dropdown with details on relationship's label click
+	 * @default enableRelationshipBrowser
+	 */
+	enableRelationshipDetails?: boolean | undefined;
+	/**
+	 * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+	 *
+	 * @default 'auto' - will be set to true if view is pannable and has more than 3000 * 2000 pixels
+	 */
+	reduceGraphics?: "auto" | boolean | undefined;
+	where?: WhereOperator<Tag, Kind> | undefined;
+	/**
+	 * Override some react flow props
+	 */
+	reactFlowProps?: OverrideReactFlowProps | undefined;
+	className?: string | undefined;
+	style?: CSSProperties | undefined;
+	/**
+	 * Override Mantine theme
+	 */
+	mantineTheme?: any;
+	/** Function to generate nonce attribute added to all generated `<style />` tags */
+	styleNonce?: string | (() => string) | undefined;
+	/**
+	 * Render custom icon for a node
+	 * By default, if icon is http:// or https://, it will be rendered as an image
+	 */
+	renderIcon?: ElementIconRenderer | undefined;
+}
+interface LikeC4BrowserProps {
+	/**
+	 * Background pattern for the browser view.
+	 * @default 'dots'
+	 */
+	background?: "dots" | "lines" | "cross" | "transparent" | "solid" | undefined;
+	/**
+	 * Seems like this is percentage of the view size
+	 * @default 0.1
+	 */
+	fitViewPadding?: number | undefined;
+	/**
+	 * Show/hide panel with top left controls,
+	 * @default true
+	 */
+	controls?: boolean | undefined;
+	/**
+	 * Display diagram title / description
+	 *
+	 * @default true
+	 */
+	showDiagramTitle?: boolean | undefined;
+	/**
+	 * Show back/forward navigation buttons
+	 * @default true
+	 */
+	showNavigationButtons?: undefined | boolean;
+	/**
+	 * Enable search popup for elements and views
+	 * @default true
+	 */
+	enableSearch?: boolean | undefined;
+	/**
+	 * If double click on a node should enable focus mode
+	 *
+	 * @default true
+	 */
+	enableFocusMode?: boolean | undefined;
+	/**
+	 * If Walkthrough for dynamic views should be enabled
+	 * @default true
+	 */
+	enableDynamicViewWalkthrough?: boolean | undefined;
+	/**
+	 * Enable popup with element details
+	 * @default true
+	 */
+	enableElementDetails?: boolean | undefined;
+	/**
+	 * Experimental feature to browse relationships
+	 *
+	 * @default enableElementDetails
+	 */
+	enableRelationshipBrowser?: boolean | undefined;
+	/**
+	 * Display dropdown with details on relationship's label click
+	 * @default enableRelationshipBrowser
+	 */
+	enableRelationshipDetails?: boolean | undefined;
+	/**
+	 * Display notations of the view
+	 * @default true
+	 */
+	showNotations?: boolean | undefined;
+	/**
+	 * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+	 *
+	 * @default 'auto' - will be set to true if view is pannable and has more than 3000 * 2000 pixels
+	 */
+	reduceGraphics?: "auto" | boolean | undefined;
+	className?: string | undefined;
+	style?: CSSProperties | undefined;
+	/**
+	 * Override some react flow props
+	 */
+	reactFlowProps?: OverrideReactFlowProps | undefined;
+}
+export declare function LikeC4View<ViewId extends string = string, Tag = string, Kind = string>({ viewId, ...props }: LikeC4ViewProps<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
+type LikeC4DiagramProps = PropsWithChildren<LikeC4DiagramProperties & LikeC4DiagramEventHandlers>;
+export type ReactLikeC4Props<ViewId = string, Tag = string, Kind = string> = Omit<LikeC4DiagramProps, "view" | "where" | "onNavigateTo"> & {
+	viewId: ViewId;
+	/**
+	 * Keep aspect ratio of the diagram
+	 * Disable if you need to manage the viewport (use className)
+	 *
+	 * @default true
+	 */
+	keepAspectRatio?: boolean | undefined;
+	/**
+	 * By default determined by the user's system preferences.
+	 */
+	colorScheme?: "light" | "dark" | undefined;
+	/**
+	 * LikeC4 views are using 'IBM Plex Sans' font.
+	 * By default, component injects the CSS to document head.
+	 * Set to false if you want to handle the font yourself.
+	 *
+	 * @default true
+	 */
+	injectFontCss?: boolean | undefined;
+	style?: CSSProperties | undefined;
+	where?: WhereOperator<Tag, Kind> | undefined;
+	onNavigateTo?: OnNavigateTo<ViewId> | undefined;
+	mantineTheme?: any;
+	/** Function to generate nonce attribute added to all generated `<style />` tags */
+	styleNonce?: string | (() => string) | undefined;
+};
+export declare function ReactLikeC4<ViewId extends string = string, Tag = string, Kind = string>({ viewId, ...props }: ReactLikeC4Props<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ReactLikeC4 {
+	var displayName: string;
+}
+type LikeC4ModelProviderProps = PropsWithChildren<{
+	/**
+	 * The LikeC4 model to be provided to the context.
+	 * TODO: refer to 'likec4/model'
+	 */
+	likec4model: any;
+}>;
+export declare const LikeC4ModelProvider: (props: LikeC4ModelProviderProps) => JSX.Element;
+type AllKeys<T> = T extends any ? keyof T : never;
+type Primitive$1 = boolean | number | string;
+type ReadonlyIfObject<Value> = Value extends undefined ? Value : Value extends (...args: any) => any ? Value : Value extends Primitive$1 ? Value : Value extends object ? Readonly<Value> : Value;
+interface ReadableAtom<Value = any> {
+	/**
+	 * Get store value.
+	 *
+	 * In contrast with {@link ReadableAtom#value} this value will be always
+	 * initialized even if store had no listeners.
+	 *
+	 * ```js
+	 * $store.get()
+	 * ```
+	 *
+	 * @returns Store value.
+	 */
+	get(): Value;
+	/**
+	 * Listeners count.
+	 */
+	readonly lc: number;
+	/**
+	 * Subscribe to store changes.
+	 *
+	 * In contrast with {@link Store#subscribe} it do not call listener
+	 * immediately.
+	 *
+	 * @param listener Callback with store value and old value.
+	 * @returns Function to remove listener.
+	 */
+	listen(listener: (value: ReadonlyIfObject<Value>, oldValue: ReadonlyIfObject<Value>) => void): () => void;
+	/**
+	 * Low-level method to notify listeners about changes in the store.
+	 *
+	 * Can cause unexpected behaviour when combined with frontend frameworks
+	 * that perform equality checks for values, such as React.
+	 */
+	notify(oldValue?: ReadonlyIfObject<Value>): void;
+	/**
+	 * Unbind all listeners.
+	 */
+	off(): void;
+	/**
+	 * Subscribe to store changes and call listener immediately.
+	 *
+	 * ```
+	 * import { $router } from '../store'
+	 *
+	 * $router.subscribe(page => {
+	 *   console.log(page)
+	 * })
+	 * ```
+	 *
+	 * @param listener Callback with store value and old value.
+	 * @returns Function to remove listener.
+	 */
+	subscribe(listener: (value: ReadonlyIfObject<Value>, oldValue?: ReadonlyIfObject<Value>) => void): () => void;
+	/**
+	 * Low-level method to read store’s value without calling `onStart`.
+	 *
+	 * Try to use only {@link ReadableAtom#get}.
+	 * Without subscribers, value can be undefined.
+	 */
+	readonly value: undefined | Value;
+}
+interface WritableAtom<Value = any> extends ReadableAtom<Value> {
+	/**
+	 * Change store value.
+	 *
+	 * ```js
+	 * $router.set({ path: location.pathname, page: parse(location.pathname) })
+	 * ```
+	 *
+	 * @param newValue New store value.
+	 */
+	set(newValue: Value): void;
+}
+interface PreinitializedWritableAtom<Value> extends WritableAtom<Value> {
+	readonly value: Value;
+}
+type Atom<Value = any> = ReadableAtom<Value> | WritableAtom<Value>;
+declare function atom<Value, StoreExt = object>(...args: undefined extends Value ? [
+] | [
+	Value
+] : [
+	Value
+]): PreinitializedWritableAtom<Value> & StoreExt;
+type KeyofBase = keyof any;
+type Get<T, K extends KeyofBase> = Extract<T, {
+	[K1 in K]: any;
+}>[K];
+type WritableStore<Value = any> = (Value extends object ? MapStore<Value> : never) | WritableAtom<Value>;
+type Store<Value = any> = ReadableAtom<Value> | WritableStore<Value>;
+type AnyStore<Value = any> = {
+	get(): Value;
+	readonly value: undefined | Value;
+};
+type StoreValue<SomeStore> = SomeStore extends {
+	get(): infer Value;
+} ? Value : any;
+interface MapStore<Value extends object = any> extends WritableAtom<Value> {
+	/**
+	 * Subscribe to store changes.
+	 *
+	 * In contrast with {@link Store#subscribe} it do not call listener
+	 * immediately.
+	 *
+	 * @param listener Callback with store value and old value.
+	 * @param changedKey Key that was changed. Will present only if `setKey`
+	 *                   has been used to change a store.
+	 * @returns Function to remove listener.
+	 */
+	listen(listener: (value: ReadonlyIfObject<Value>, oldValue: ReadonlyIfObject<Value>, changedKey: AllKeys<Value>) => void): () => void;
+	/**
+	 * Low-level method to notify listeners about changes in the store.
+	 *
+	 * Can cause unexpected behaviour when combined with frontend frameworks
+	 * that perform equality checks for values, such as React.
+	 */
+	notify(oldValue?: ReadonlyIfObject<Value>, changedKey?: AllKeys<Value>): void;
+	/**
+	 * Change store value.
+	 *
+	 * ```js
+	 * $settings.set({ theme: 'dark' })
+	 * ```
+	 *
+	 * Operation is atomic, subscribers will be notified once with the new value.
+	 * `changedKey` will be undefined
+	 *
+	 * @param newValue New store value.
+	 */
+	set(newValue: Value): void;
+	/**
+	 * Change key in store value.
+	 *
+	 * ```js
+	 * $settings.setKey('theme', 'dark')
+	 * ```
+	 *
+	 * To delete key set `undefined`.
+	 *
+	 * ```js
+	 * $settings.setKey('theme', undefined)
+	 * ```
+	 *
+	 * @param key The key name.
+	 * @param value New value.
+	 */
+	setKey<Key extends AllKeys<Value>>(key: Key, value: Get<Value, Key> | Value[Key]): void;
+	/**
+	 * Subscribe to store changes and call listener immediately.
+	 *
+	 * ```
+	 * import { $router } from '../store'
+	 *
+	 * $router.subscribe(page => {
+	 *   console.log(page)
+	 * })
+	 * ```
+	 *
+	 * @param listener Callback with store value and old value.
+	 * @param changedKey Key that was changed. Will present only
+	 *                   if `setKey` has been used to change a store.
+	 * @returns Function to remove listener.
+	 */
+	subscribe(listener: (value: ReadonlyIfObject<Value>, oldValue: ReadonlyIfObject<Value> | undefined, changedKey: AllKeys<Value> | undefined) => void): () => void;
+}
+interface PreinitializedMapStore<Value extends object = any> extends MapStore<Value> {
+	readonly value: Value;
+}
+declare function map<Value extends object, StoreExt extends object = object>(value?: Value): PreinitializedMapStore<Value> & StoreExt;
+interface Task<Value> extends Promise<Value> {
+	t: true;
+}
+type StoreValues<Stores extends AnyStore[]> = {
+	[Index in keyof Stores]: StoreValue<Stores[Index]>;
+};
+interface Computed {
+	<Value, OriginStore extends Store>(stores: OriginStore, cb: (value: StoreValue<OriginStore>) => Task<Value>): ReadableAtom<undefined | Value>;
+	<Value, OriginStores extends AnyStore[]>(stores: [
+		...OriginStores
+	], cb: (...values: StoreValues<OriginStores>) => Task<Value>): ReadableAtom<undefined | Value>;
+	<Value, OriginStore extends Store>(stores: OriginStore, cb: (value: StoreValue<OriginStore>) => Value): ReadableAtom<Value>;
+	/**
+	 * Create derived store, which use generates value from another stores.
+	 *
+	 * ```js
+	 * import { computed } from 'nanostores'
+	 *
+	 * import { $users } from './users.js'
+	 *
+	 * export const $admins = computed($users, users => {
+	 *   return users.filter(user => user.isAdmin)
+	 * })
+	 * ```
+	 *
+	 * An async function can be evaluated by using {@link task}.
+	 *
+	 * ```js
+	 * import { computed, task } from 'nanostores'
+	 *
+	 * import { $userId } from './users.js'
+	 *
+	 * export const $user = computed($userId, userId => task(async () => {
+	 *   const response = await fetch(`https://my-api/users/${userId}`)
+	 *   return response.json()
+	 * }))
+	 * ```
+	 */
+	<Value, OriginStores extends AnyStore[]>(stores: [
+		...OriginStores
+	], cb: (...values: StoreValues<OriginStores>) => Task<Value> | Value): ReadableAtom<Value>;
+}
+declare const computed: Computed;
+type StoreKeys<T> = T extends {
+	setKey: (k: infer K, v: any) => unknown;
+} ? K : never;
+interface UseStoreOptions<SomeStore> {
+	/**
+	 * @default
+	 * ```ts
+	 * [store, options.keys]
+	 * ```
+	 */
+	deps?: DependencyList;
+	/**
+	 * Will re-render components only on specific key changes.
+	 */
+	keys?: StoreKeys<SomeStore>[];
+}
+declare function useStore<SomeStore extends Store>(store: SomeStore, options?: UseStoreOptions<SomeStore>): StoreValue<SomeStore>;
+export declare const createHooksForModel: ($atom: WritableAtom) => any;
+
+declare namespace nano {
+	export { Atom, WritableAtom, atom, computed, map, useStore };
+}
+
+export {
+	nano,
+};
+
+export {};