likec4 1.30.0 → 1.32.0

package/react/index.d.mts

@@ -2,16 +2,72 @@
 
 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 KeysOfUnion<ObjectType> = 
+// Hack to fix https://github.com/sindresorhus/type-fest/issues/1008
+keyof UnionToIntersection<ObjectType extends unknown ? Record<keyof ObjectType, never> : never>;
+type OptionalKeysOf<BaseType extends object> = BaseType extends unknown // For distributing `BaseType`
+ ? (keyof {
+	[Key in keyof BaseType as BaseType extends Record<Key, BaseType[Key]> ? never : Key]: never;
+}) & (keyof BaseType) // Intersect with `keyof BaseType` to ensure result of `OptionalKeysOf<BaseType>` is always assignable to `keyof BaseType`
+ : never;
+type RequiredKeysOf<BaseType extends object> = BaseType extends unknown // For distributing `BaseType`
+ ? Exclude<keyof BaseType, OptionalKeysOf<BaseType>> : never;
+type IsNever<T> = [
+	T
+] extends [
+	never
+] ? true : false;
+type IfNever<T, TypeIfNever = true, TypeIfNotNever = false> = (IsNever<T> extends true ? TypeIfNever : TypeIfNotNever);
+type UnknownArray = readonly unknown[];
+type IsArrayReadonly<T extends UnknownArray> = IfNever<T, false, T extends unknown[] ? false : true>;
+type IfArrayReadonly<T extends UnknownArray, TypeIfArrayReadonly = true, TypeIfNotArrayReadonly = false> = IsArrayReadonly<T> extends infer Result ? Result extends true ? TypeIfArrayReadonly : TypeIfNotArrayReadonly : never;
+type NoInfer$1<T> = T extends infer U ? U : never;
+type IsAny<T> = 0 extends 1 & NoInfer$1<T> ? true : false;
+type IsEqual<A, B> = (<G>() => G extends A & G | G ? 1 : 2) extends (<G>() => G extends B & G | G ? 1 : 2) ? true : false;
 type Simplify<T> = {
 	[KeyType in keyof T]: T[KeyType];
 } & {};
-type LiteralUnion<LiteralType, BaseType extends Primitive> = LiteralType | (BaseType & Record<never, never>);
+type OmitIndexSignature<ObjectType> = {
+	[KeyType in keyof ObjectType as {} extends Record<KeyType, unknown> ? never : KeyType]: ObjectType[KeyType];
+};
+type PickIndexSignature<ObjectType> = {
+	[KeyType in keyof ObjectType as {} extends Record<KeyType, unknown> ? KeyType : never]: ObjectType[KeyType];
+};
+type SimpleMerge<Destination, Source> = {
+	[Key in keyof Destination as Key extends keyof Source ? never : Key]: Destination[Key];
+} & Source;
+type Merge<Destination, Source> = Simplify<SimpleMerge<PickIndexSignature<Destination>, PickIndexSignature<Source>> & SimpleMerge<OmitIndexSignature<Destination>, OmitIndexSignature<Source>>>;
+type IfAny<T, TypeIfAny = true, TypeIfNotAny = false> = (IsAny<T> extends true ? TypeIfAny : TypeIfNotAny);
+type HomomorphicPick<T, Keys extends KeysOfUnion<T>> = {
+	[P in keyof T as Extract<P, Keys>]: T[P];
+};
+type ApplyDefaultOptions<Options extends object, Defaults extends Simplify<Omit<Required<Options>, RequiredKeysOf<Options>> & Partial<Record<RequiredKeysOf<Options>, never>>>, SpecifiedOptions extends Options> = IfAny<SpecifiedOptions, Defaults, IfNever<SpecifiedOptions, Defaults, Simplify<Merge<Defaults, {
+	[Key in keyof SpecifiedOptions as Key extends OptionalKeysOf<Options> ? Extract<SpecifiedOptions[Key], undefined> extends never ? Key : never : Key]: SpecifiedOptions[Key];
+}> & Required<Options>> // `& Required<Options>` ensures that `ApplyDefaultOptions<SomeOption, ...>` is always assignable to `Required<SomeOption>`
+>>;
+type Filter<KeyType, ExcludeType> = IsEqual<KeyType, ExcludeType> extends true ? never : (KeyType extends ExcludeType ? never : KeyType);
+type ExceptOptions = {
+	/**
+	Disallow assigning non-specified properties.
+
+	Note that any omitted properties in the resulting type will be present in autocomplete as `undefined`.
+
+	@default false
+	*/
+	requireExactProps?: boolean;
+};
+type DefaultExceptOptions = {
+	requireExactProps: false;
+};
+type Except<ObjectType, KeysType extends keyof ObjectType, Options extends ExceptOptions = {}> = _Except<ObjectType, KeysType, ApplyDefaultOptions<ExceptOptions, DefaultExceptOptions, Options>>;
+type _Except<ObjectType, KeysType extends keyof ObjectType, Options extends Required<ExceptOptions>> = {
+	[KeyType in keyof ObjectType as Filter<KeyType, KeysType>]: ObjectType[KeyType];
+} & (Options["requireExactProps"] extends true ? Partial<Record<KeysType, never>> : {});
 declare const tag: unique symbol;
 type TagContainer<Token> = {
 	readonly [tag]: Token;
@@ -20,114 +76,111 @@ type Tag<Token extends PropertyKey, TagMetadata> = TagContainer<{
 	[K in Token]: TagMetadata;
 }>;
 type Tagged<Type, TagName extends PropertyKey, TagMetadata = never> = Type & Tag<TagName, TagMetadata>;
+type SetRequired<BaseType, Keys extends keyof BaseType> = BaseType extends UnknownArray ? SetArrayRequired<BaseType, Keys> extends infer ResultantArray ? IfArrayReadonly<BaseType, Readonly<ResultantArray>, ResultantArray> : never : Simplify<
+// Pick just the keys that are optional from the base type.
+Except<BaseType, Keys> & 
+// Pick the keys that should be required from the base type and make them required.
+Required<HomomorphicPick<BaseType, Keys>>>;
+type SetArrayRequired<TArray extends UnknownArray, Keys, Counter extends any[] = [
+], Accumulator extends UnknownArray = [
+]> = TArray extends unknown // For distributing `TArray` when it's a union
+ ? keyof TArray & `${number}` extends never ? [
+	...Accumulator,
+	...TArray
+] : TArray extends readonly [
+	(infer First)?,
+	...infer Rest
+] ? "0" extends OptionalKeysOf<TArray> // If the first element of `TArray` is optional
+ ? `${Counter["length"]}` extends `${Keys & (string | number)}` // If the current index needs to be required
+ ? SetArrayRequired<Rest, Keys, [
+	...Counter,
+	any
+], [
+	...Accumulator,
+	First
+]> : [
+	...Accumulator,
+	...TArray
+] : SetArrayRequired<Rest, Keys, [
+	...Counter,
+	any
+], [
+	...Accumulator,
+	TArray[0]
+]> : never // Should never happen, since `[(infer F)?, ...infer R]` is a top-type for arrays.
+ : never;
 type TupleToUnion<ArrayType> = ArrayType extends readonly unknown[] ? ArrayType[number] : never;
 type NonEmptyArray<T> = [
 	T,
 	...T[]
 ];
-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 ProjectId = Tagged<string, "ProjectID">;
-type IconUrl = Tagged<string, "IconUrl"> | "none";
-type Fqn<Id extends string = string> = Tagged<Id, "Fqn">;
-type Tag$1<Tags extends string = string> = Tagged<Tags, "Tag">;
-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;
-}
-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;
+interface Link {
+	title?: string;
+	url: string;
+	relative?: string;
 }
-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 Coalesce<V extends string, OrIfAny = string> = IsAny<V> extends true ? OrIfAny : V;
+type BuiltInIcon = "none" | `${"aws" | "azure" | "gcp" | "tech"}:${string}`;
+type Icon = Tagged<string, "Icon"> | BuiltInIcon;
+type IconUrl = Icon;
+type Fqn<Id = string> = Tagged<Id, "Fqn">;
+declare function Fqn(name: string, parent?: Fqn | null): Fqn;
+type DeploymentFqn<T = string> = Tagged<T, "DeploymentFqn">;
+declare function DeploymentFqn(name: string, parent?: DeploymentFqn | null): DeploymentFqn;
+type ViewId<Id = string> = Tagged<Id, "ViewId">;
+declare function ViewId(id: string): ViewId;
+type RelationId<Id = string> = Tagged<Id, "RelationId">;
+declare function RelationId(id: string): RelationId;
+type NodeId = Tagged<string, "NodeId" | "Fqn" | "DeploymentFqn">;
+declare function NodeId(id: string): NodeId;
+type EdgeId = Tagged<string, "EdgeId">;
+declare function EdgeId(id: string): EdgeId;
+declare const StepEdgeKind = "@step";
+type ModelStage = "parsed" | "computed" | "layouted";
+declare const _stage = "_stage";
+type _stage = typeof _stage;
+declare const _type = "_type";
+type _type = typeof _type;
+interface SpecAux<ElementKind extends string, DeploymentKind extends string, RelationKind extends string, Tag extends string, MetadataKey extends string> {
+	ElementKind: ElementKind;
+	DeploymentKind: DeploymentKind;
+	RelationKind: RelationKind;
+	Tag: Tag;
+	MetadataKey: MetadataKey;
 }
-interface Link {
-	readonly title?: string;
-	readonly url: string;
-	readonly relative?: string;
+interface Aux<Stage extends ModelStage, Element extends string, Deployment extends string, View extends string, Project extends string, Spec extends SpecAux<string, string, string, string, string>> {
+	Stage: Stage;
+	ProjectId: Project;
+	ElementId: Element;
+	DeploymentId: Deployment;
+	ViewId: View;
+	ElementKind: Spec["ElementKind"];
+	DeploymentKind: Spec["DeploymentKind"];
+	RelationKind: Spec["RelationKind"];
+	Tag: Spec["Tag"];
+	MetadataKey: Spec["MetadataKey"];
 }
+type Any = Aux<any, any, any, any, any, SpecAux<any, any, any, any, any>>;
+type UnknownLayouted = Aux<"layouted", string, string, string, string, SpecAux<string, string, string, string, string>>;
+type Fqn$1<A> = A extends infer T extends Any ? Fqn<ElementId<T>> : never;
+type ElementId<A> = A extends infer T extends Any ? Coalesce<T["ElementId"]> : never;
+type DeploymentFqn$1<A> = A extends infer T extends Any ? DeploymentFqn<DeploymentId<T>> : never;
+type DeploymentId<A> = A extends infer T extends Any ? Coalesce<T["DeploymentId"]> : never;
+type ViewId$1<A> = A extends infer T extends Any ? Coalesce<T["ViewId"]> : never;
+type RelationId$1 = RelationId;
+type ElementKind<A> = A extends infer T extends Any ? Coalesce<T["ElementKind"]> : never;
+type DeploymentKind<A> = A extends infer T extends Any ? Coalesce<T["DeploymentKind"]> : never;
+type RelationKind<A> = A extends infer T extends Any ? Coalesce<T["RelationKind"]> : never;
+type Tag$1<A> = A extends infer T extends Any ? Coalesce<T["Tag"]> : never;
+type Tags<A extends Any> = readonly Tag$1<A>[];
+type AllKinds<A> = ElementKind<A> | DeploymentKind<A> | RelationKind<A>;
+type StrictViewId<A> = A extends infer T extends Any ? ViewId<ViewId$1<T>> : never;
+type WithOptionalTags<A extends Any> = {
+	readonly tags?: Tags<A> | null;
+};
+type WithOptionalLinks = {
+	readonly links?: readonly Link[] | null;
+};
 type EqualOperator<V> = {
 	eq: V;
 	neq?: never;
@@ -135,504 +188,105 @@ type EqualOperator<V> = {
 	eq?: never;
 	neq: V;
 };
-type AllNever$1 = {
+type AllNever = {
 	not?: never;
 	and?: never;
 	or?: never;
 	tag?: never;
 	kind?: never;
 	participant?: never;
+	operator?: never;
 };
-type TagEqual<Tag> = Omit<AllNever$1, "tag"> & {
-	tag: EqualOperator<Tag>;
+type TagEqual<A extends Any> = Omit<AllNever, "tag"> & {
+	tag: EqualOperator<Tag$1<A>> | Tag$1<A>;
 };
-type KindEqual<Kind> = Omit<AllNever$1, "kind"> & {
-	kind: EqualOperator<Kind>;
+type KindEqual<A extends Any> = Omit<AllNever, "kind"> & {
+	kind: EqualOperator<AllKinds<A>> | AllKinds<A>;
 };
 type Participant = "source" | "target";
-type ParticipantOperator<Tag, Kind> = Omit<AllNever$1, "participant"> & {
+type ParticipantOperator<A extends Any> = Omit<AllNever, "participant" | "operator"> & {
 	participant: Participant;
-	operator: KindEqual<Kind> | TagEqual<Tag>;
+	operator: KindEqual<A> | TagEqual<A>;
 };
-type NotOperator<Tag, Kind> = Omit<AllNever$1, "not"> & {
-	not: WhereOperator<Tag, Kind>;
+type NotOperator<A extends Any> = Omit<AllNever, "not"> & {
+	not: WhereOperator<A>;
 };
-type AndOperator<Tag, Kind> = Omit<AllNever$1, "and"> & {
-	and: NonEmptyArray<WhereOperator<Tag, Kind>>;
+type AndOperator<A extends Any> = Omit<AllNever, "and"> & {
+	and: NonEmptyArray<WhereOperator<A>>;
 };
-type OrOperator<Tag, Kind> = Omit<AllNever$1, "or"> & {
-	or: NonEmptyArray<WhereOperator<Tag, Kind>>;
+type OrOperator<A extends Any> = Omit<AllNever, "or"> & {
+	or: NonEmptyArray<WhereOperator<A>>;
 };
-type WhereOperator<Tag, Kind> = TagEqual<Tag> | KindEqual<Kind> | ParticipantOperator<Tag, Kind> | NotOperator<Tag, Kind> | AndOperator<Tag, Kind> | OrOperator<Tag, Kind>;
-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;
-	/**
-	 * Reference to imported logical model element
-	 */
-	type ImportRef<F = Fqn> = {
-		project: ProjectId;
-		model: F;
-	};
-	const isImportRef: (ref: FqnRef) => ref is ImportRef;
-	const toDeploymentRef: (ref: FqnRef) => DeploymentRef;
-	const toModelFqn: (ref: FqnRef) => Fqn;
-}
-type FqnRef<D = Fqn, M = Fqn> = ExclusiveUnion<{
-	InsideInstanceRef: FqnRef.InsideInstanceRef<D, M>;
-	DeploymentRef: FqnRef.DeploymentRef<D>;
-	ModelRef: FqnRef.ModelRef<M>;
-	ImportRef: FqnRef.ImportRef<M>;
-}>;
-declare namespace FqnExpr {
-	type Wildcard = {
-		wildcard: true;
-	};
-	const isWildcard: (expr: ExpressionV2) => expr is FqnExpr.Wildcard;
-	type ModelRef<M = Fqn> = {
-		ref: FqnRef.ModelRef<M> | FqnRef.ImportRef<M>;
-		selector?: PredicateSelector;
-	};
-	const isModelRef: (ref: ExpressionV2) => ref is FqnExpr.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 ElementKindExpr = {
-		elementKind: ElementKind;
-		isEqual: boolean;
-	};
-	function isElementKindExpr(expr: ExpressionV2): expr is ElementKindExpr;
-	type ElementTagExpr = {
-		elementTag: Tag$1;
-		isEqual: boolean;
-	};
-	function isElementTagExpr(expr: ExpressionV2): expr is ElementTagExpr;
-	type NonWildcard<D = Fqn, M = Fqn> = ExclusiveUnion<{
-		ModelRef: ModelRef<M>;
-		DeploymentRef: DeploymentRef<D, M>;
-		ElementKind: ElementKindExpr;
-		ElementTag: ElementTagExpr;
-	}>;
-	type Where<D = Fqn, M = Fqn> = {
-		where: {
-			expr: ExclusiveUnion<{
-				Wildcard: Wildcard;
-				ModelRef: ModelRef<M>;
-				DeploymentRef: DeploymentRef<D, M>;
-				ElementKind: ElementKindExpr;
-				ElementTag: ElementTagExpr;
-			}>;
-			condition: WhereOperator<string, string>;
-		};
-	};
-	const isWhere: (expr: ExpressionV2) => expr is FqnExpr.Where;
-	type Custom<D = Fqn, M = Fqn> = {
-		custom: {
-			expr: OrWhere<D, M>;
-			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;
-		};
-	};
-	const isCustom: (expr: ExpressionV2) => expr is Custom;
-	const is: (expr: ExpressionV2) => expr is FqnExpr;
-	type OrWhere<D = Fqn, M = Fqn> = ExclusiveUnion<{
-		Wildcard: FqnExpr.Wildcard;
-		ModelRef: FqnExpr.ModelRef<M>;
-		DeploymentRef: FqnExpr.DeploymentRef<D, M>;
-		ElementKind: ElementKindExpr;
-		ElementTag: ElementTagExpr;
-		Where: FqnExpr.Where<D, M>;
-	}>;
-	type Any<D = Fqn, M = Fqn> = ExclusiveUnion<{
-		Wildcard: Wildcard;
-		ModelRef: ModelRef<M>;
-		DeploymentRef: DeploymentRef<D, M>;
-		ElementKind: ElementKindExpr;
-		ElementTag: ElementTagExpr;
-		Where: Where<D, M>;
-		Custom: Custom<D, M>;
-	}>;
-	const unwrap: (expr: FqnExpr) => Wildcard | ModelRef | DeploymentRef | ElementKindExpr | ElementTagExpr;
-}
-type FqnExpr<D = Fqn, M = Fqn> = ExclusiveUnion<{
-	Wildcard: FqnExpr.Wildcard;
-	ModelRef: FqnExpr.ModelRef<M>;
-	DeploymentRef: FqnExpr.DeploymentRef<D, M>;
-	ElementKind: FqnExpr.ElementKindExpr;
-	ElementTag: FqnExpr.ElementTagExpr;
-}>;
-declare namespace RelationExpr {
-	type Endpoint<D = Fqn, M = Fqn> = FqnExpr.Where<D, M>["where"]["expr"];
-	type Direct<D = Fqn, M = Fqn> = {
-		source: Endpoint<D, M>;
-		target: Endpoint<D, M>;
-		isBidirectional?: boolean;
-	};
-	const isDirect: (expr: ExpressionV2) => expr is RelationExpr.Direct;
-	type Incoming<D = Fqn, M = Fqn> = {
-		incoming: Endpoint<D, M>;
-	};
-	const isIncoming: (expr: ExpressionV2) => expr is RelationExpr.Incoming;
-	type Outgoing<D = Fqn, M = Fqn> = {
-		outgoing: Endpoint<D, M>;
-	};
-	const isOutgoing: (expr: ExpressionV2) => expr is RelationExpr.Outgoing;
-	type InOut<D = Fqn, M = Fqn> = {
-		inout: Endpoint<D, M>;
-	};
-	const isInOut: (expr: ExpressionV2) => expr is RelationExpr.InOut;
-	type Where<D = Fqn, M = Fqn> = {
-		where: {
-			expr: ExclusiveUnion<{
-				Direct: RelationExpr.Direct<D, M>;
-				Incoming: RelationExpr.Incoming<D, M>;
-				Outgoing: RelationExpr.Outgoing<D, M>;
-				InOut: RelationExpr.InOut<D, M>;
-			}>;
-			condition: WhereOperator<string, string>;
-		};
-	};
-	const isWhere: (expr: ExpressionV2) => expr is RelationExpr.Where;
-	type Custom<D = Fqn, M = Fqn> = {
-		customRelation: {
-			expr: OrWhere<D, M>;
-			title?: string;
-			description?: string;
-			technology?: string;
-			notation?: string;
-			navigateTo?: ViewId;
-			notes?: string;
-			color?: Color;
-			line?: RelationshipLineType;
-			head?: RelationshipArrowType;
-			tail?: RelationshipArrowType;
-		};
-	};
-	const isCustom: (expr: ExpressionV2) => expr is Custom;
-	const is: (expr: ExpressionV2) => expr is RelationExpr;
-	type OrWhere<D = Fqn, M = Fqn> = ExclusiveUnion<{
-		Direct: Direct<D, M>;
-		Incoming: Incoming<D, M>;
-		Outgoing: Outgoing<D, M>;
-		InOut: InOut<D, M>;
-		Where: Where<D, M>;
-	}>;
-	type Any<D = Fqn, M = Fqn> = ExclusiveUnion<{
-		Direct: Direct<D, M>;
-		Incoming: Incoming<D, M>;
-		Outgoing: Outgoing<D, M>;
-		InOut: InOut<D, M>;
-		Where: Where<D, M>;
-		Custom: Custom<D, M>;
-	}>;
-	const unwrap: (expr: RelationExpr) => Direct | Incoming | Outgoing | InOut;
-}
-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>;
-}>;
-type ExpressionV2<D = Fqn, M = Fqn> = ExclusiveUnion<{
-	Wildcard: FqnExpr.Wildcard;
-	ModelRef: FqnExpr.ModelRef<M>;
-	DeploymentRef: FqnExpr.DeploymentRef<D, M>;
-	ElementKind: FqnExpr.ElementKindExpr;
-	ElementTag: FqnExpr.ElementTagExpr;
-	Custom: FqnExpr.Custom<D, M>;
-	Direct: RelationExpr.Direct<D, M>;
-	Incoming: RelationExpr.Incoming<D, M>;
-	Outgoing: RelationExpr.Outgoing<D, M>;
-	InOut: RelationExpr.InOut<D, M>;
-	Where: ExpressionV2.Where<D, M>;
-	CustomRelation: RelationExpr.Custom<D, M>;
-}>;
-declare namespace ExpressionV2 {
-	type Where<D = Fqn, M = Fqn> = FqnExpr.Where<D, M> | RelationExpr.Where<D, M>;
-	const isWhere: (expr: ExpressionV2) => expr is ExpressionV2.Where;
-	const isRelationWhere: (expr: ExpressionV2) => expr is RelationExpr.Where;
-	const isFqnExprWhere: (expr: ExpressionV2) => expr is FqnExpr.Where;
-	const isFqnExpr: (expr: ExpressionV2) => expr is FqnExpr.Any;
-	const isRelation: (expr: ExpressionV2) => expr is RelationExpr.Any;
+type WhereOperator<A extends Any = Any> = TagEqual<A> | KindEqual<A> | ParticipantOperator<A> | NotOperator<A> | AndOperator<A> | OrOperator<A>;
+type SpacingSize = "xs" | "sm" | "md" | "lg" | "xl";
+type TextSize = "xs" | "sm" | "md" | "lg" | "xl";
+type ShapeSize = "xs" | "sm" | "md" | "lg" | "xl";
+declare const BorderStyles: readonly [
+	"solid",
+	"dashed",
+	"dotted",
+	"none"
+];
+type BorderStyle = TupleToUnion<typeof BorderStyles>;
+declare const ElementShapes: readonly [
+	"rectangle",
+	"person",
+	"browser",
+	"mobile",
+	"cylinder",
+	"storage",
+	"queue"
+];
+type ElementShape = TupleToUnion<typeof ElementShapes>;
+type HexColor = `#${string}`;
+type RelationshipLineType = "dashed" | "solid" | "dotted";
+type RelationshipArrowType = "none" | "normal" | "onormal" | "dot" | "odot" | "diamond" | "odiamond" | "crow" | "open" | "vee";
+declare const ThemeColors: readonly [
+	"amber",
+	"blue",
+	"gray",
+	"slate",
+	"green",
+	"indigo",
+	"muted",
+	"primary",
+	"red",
+	"secondary",
+	"sky"
+];
+type ThemeColor = typeof ThemeColors[number];
+type Color = ThemeColor | HexColor;
+type Point = readonly [
+	x: number,
+	y: number
+];
+interface XYPoint {
+	x: number;
+	y: number;
 }
-declare namespace ModelLayer {
-	namespace FqnRef {
-		/**
-		 * Reference to logical model element
-		 */
-		type ModelRef<F = Fqn> = {
-			model: F;
-		};
-		const isModelRef: (ref: FqnRef) => ref is ModelRef;
-		/**
-		 * Reference to imported logical model element
-		 */
-		type ImportRef<F = Fqn> = {
-			project: ProjectId;
-			model: F;
-		};
-		const isImportRef: (ref: FqnRef) => ref is ImportRef;
-		const toFqn: (ref: FqnRef) => Fqn;
-	}
-	type FqnRef<M = Fqn> = ExclusiveUnion<{
-		ModelRef: FqnRef.ModelRef<M>;
-		ImportRef: FqnRef.ImportRef<M>;
-	}>;
-	namespace FqnExpr {
-		type Wildcard = {
-			wildcard: true;
-		};
-		const isWildcard: (expr: Expression) => expr is FqnExpr.Wildcard;
-		type ModelRef<M = Fqn> = {
-			ref: FqnRef.ModelRef<M> | FqnRef.ImportRef<M>;
-			selector?: PredicateSelector;
-		};
-		const isModelRef: (ref: Expression) => ref is FqnExpr.ModelRef;
-		type ElementKindExpr = {
-			elementKind: ElementKind;
-			isEqual: boolean;
-		};
-		function isElementKindExpr(expr: Expression): expr is ElementKindExpr;
-		type ElementTagExpr = {
-			elementTag: Tag$1;
-			isEqual: boolean;
-		};
-		function isElementTagExpr(expr: Expression): expr is ElementTagExpr;
-		type NonWildcard<M = Fqn> = ExclusiveUnion<{
-			ModelRef: ModelRef<M>;
-			ElementKind: ElementKindExpr;
-			ElementTag: ElementTagExpr;
-		}>;
-		type Where<M = Fqn> = {
-			where: {
-				expr: ExclusiveUnion<{
-					Wildcard: Wildcard;
-					ModelRef: ModelRef<M>;
-					ElementKind: ElementKindExpr;
-					ElementTag: ElementTagExpr;
-				}>;
-				condition: WhereOperator<string, string>;
-			};
-		};
-		const isWhere: (expr: Expression) => expr is FqnExpr.Where;
-		type Custom<M = Fqn> = {
-			custom: {
-				expr: FqnExprOrWhere<M>;
-				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;
-			};
-		};
-		const isCustom: (expr: Expression) => expr is FqnExpr.Custom;
-		const is: (expr: Expression) => expr is FqnExpr;
-	}
-	type FqnExpr<M = Fqn> = ExclusiveUnion<{
-		Wildcard: FqnExpr.Wildcard;
-		ModelRef: FqnExpr.ModelRef<M>;
-		ElementKind: FqnExpr.ElementKindExpr;
-		ElementTag: FqnExpr.ElementTagExpr;
-	}>;
-	type FqnExprOrWhere<M = Fqn> = ExclusiveUnion<{
-		Wildcard: FqnExpr.Wildcard;
-		ModelRef: FqnExpr.ModelRef<M>;
-		ElementKind: FqnExpr.ElementKindExpr;
-		ElementTag: FqnExpr.ElementTagExpr;
-		Where: FqnExpr.Where<M>;
-	}>;
-	type AnyFqnExpr<M = Fqn> = ExclusiveUnion<{
-		Wildcard: FqnExpr.Wildcard;
-		ModelRef: FqnExpr.ModelRef<M>;
-		ElementKind: FqnExpr.ElementKindExpr;
-		ElementTag: FqnExpr.ElementTagExpr;
-		Where: FqnExpr.Where<M>;
-		Custom: FqnExpr.Custom<M>;
-	}>;
-	function isAnyFqnExpr(expr: Expression): expr is AnyFqnExpr;
-	namespace RelationExpr {
-		type Direct<M = Fqn> = {
-			source: FqnExpr<M>;
-			target: FqnExpr<M>;
-			isBidirectional?: boolean;
-		};
-		const isDirect: (expr: Expression) => expr is RelationExpr.Direct;
-		type Incoming<M = Fqn> = {
-			incoming: FqnExpr<M>;
-		};
-		const isIncoming: (expr: Expression) => expr is RelationExpr.Incoming;
-		type Outgoing<M = Fqn> = {
-			outgoing: FqnExpr<M>;
-		};
-		const isOutgoing: (expr: Expression) => expr is RelationExpr.Outgoing;
-		type InOut<M = Fqn> = {
-			inout: FqnExpr<M>;
-		};
-		const isInOut: (expr: Expression) => expr is RelationExpr.InOut;
-		type Where<M = Fqn> = {
-			where: {
-				expr: ExclusiveUnion<{
-					Direct: RelationExpr.Direct<M>;
-					Incoming: RelationExpr.Incoming<M>;
-					Outgoing: RelationExpr.Outgoing<M>;
-					InOut: RelationExpr.InOut<M>;
-				}>;
-				condition: WhereOperator<string, string>;
-			};
-		};
-		const isWhere: (expr: Expression) => expr is RelationExpr.Where;
-		type Custom<M = Fqn> = {
-			customRelation: {
-				expr: RelationExprOrWhere<M>;
-				title?: string;
-				description?: string;
-				technology?: string;
-				notation?: string;
-				navigateTo?: ViewId;
-				notes?: string;
-				color?: Color;
-				line?: RelationshipLineType;
-				head?: RelationshipArrowType;
-				tail?: RelationshipArrowType;
-			};
-		};
-		const isCustom: (expr: Expression) => expr is Custom;
-		const is: (expr: Expression) => expr is RelationExpr;
-	}
-	type RelationExpr<M = Fqn> = ExclusiveUnion<{
-		Direct: RelationExpr.Direct<M>;
-		Incoming: RelationExpr.Incoming<M>;
-		Outgoing: RelationExpr.Outgoing<M>;
-		InOut: RelationExpr.InOut<M>;
-	}>;
-	type RelationExprOrWhere<M = Fqn> = ExclusiveUnion<{
-		Direct: RelationExpr.Direct<M>;
-		Incoming: RelationExpr.Incoming<M>;
-		Outgoing: RelationExpr.Outgoing<M>;
-		InOut: RelationExpr.InOut<M>;
-		Where: RelationExpr.Where<M>;
-	}>;
-	type AnyRelationExpr<M = Fqn> = ExclusiveUnion<{
-		Direct: RelationExpr.Direct<M>;
-		Incoming: RelationExpr.Incoming<M>;
-		Outgoing: RelationExpr.Outgoing<M>;
-		InOut: RelationExpr.InOut<M>;
-		Where: RelationExpr.Where<M>;
-		CustomRelation: RelationExpr.Custom<M>;
-	}>;
-	function isAnyRelationExpr(expr: Expression): expr is AnyRelationExpr;
-	/**
-	 * Represents a version 2 expression which can be one of several types.
-	 *
-	 * @template M - The type for the model FQN, defaults to `Fqn`.
-	 */
-	type Expression<M = Fqn> = ExclusiveUnion<{
-		Wildcard: FqnExpr.Wildcard;
-		ModelRef: FqnExpr.ModelRef<M>;
-		ElementKind: FqnExpr.ElementKindExpr;
-		ElementTag: FqnExpr.ElementTagExpr;
-		Custom: FqnExpr.Custom<M>;
-		Direct: RelationExpr.Direct<M>;
-		Incoming: RelationExpr.Incoming<M>;
-		Outgoing: RelationExpr.Outgoing<M>;
-		InOut: RelationExpr.InOut<M>;
-		CustomRelation: RelationExpr.Custom<M>;
-		Where: Expression.Where<M>;
-	}>;
-	function isExpression(expr: any): expr is Expression;
-	namespace Expression {
-		type Where<M = Fqn> = FqnExpr.Where<M> | RelationExpr.Where<M>;
-		const isWhere: (expr: Expression) => expr is Expression.Where;
-		const isCustomFqnExpr: (expr: Expression) => expr is FqnExpr.Custom;
-		const isCustomRelationExpr: (expr: Expression) => expr is RelationExpr.Custom;
-		const isFqnExpr: (expr: Expression) => expr is FqnExpr;
-		const isRelation: (expr: Expression) => expr is RelationExpr;
-	}
+interface BBox {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
 }
-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: ModelLayer.Expression[];
-	exclude?: never;
-} | {
-	include?: never;
-	exclude: ModelLayer.Expression[];
-};
-interface ViewRuleGlobalPredicateRef {
-	predicateId: GlobalPredicateId;
+declare namespace BBox {
+	function center({ x, y, width, height }: BBox): XYPoint;
+	function fromPoints(points: Point[]): BBox;
+	function merge(...boxes: BBox[]): BBox;
+	function toRectBox(box: BBox): RectBox;
 }
-interface ViewRuleStyle {
-	targets: ModelLayer.FqnExpr[];
-	notation?: string;
-	style: ElementStyle & {
-		color?: Color;
-		shape?: ElementShape;
-		icon?: IconUrl;
-	};
+interface RectBox {
+	x1: number;
+	y1: number;
+	x2: number;
+	y2: number;
 }
-interface ViewRuleGlobalStyle {
-	styleId: GlobalStyleID;
+declare namespace RectBox {
+	function center({ x1, y1, x2, y2 }: RectBox): XYPoint;
+	function fromPoints(points: Point[]): RectBox;
+	function merge(...boxes: RectBox[]): RectBox;
+	function toBBox(box: RectBox): BBox;
 }
 type AutoLayoutDirection = "TB" | "BT" | "LR" | "RL";
 interface ViewRuleAutoLayout {
@@ -640,30 +294,36 @@ interface ViewRuleAutoLayout {
 	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;
+interface ViewAutoLayout {
+	direction: ViewRuleAutoLayout["direction"];
+	rankSep?: number;
+	nodeSep?: number;
 }
-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>;
+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;
+	}>;
+};
+interface BaseViewProperties<A extends Any> extends WithOptionalTags<A>, WithOptionalLinks {
+	readonly id: StrictViewId<A>;
 	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.:
@@ -672,110 +332,75 @@ interface BasicView<ViewType extends "element" | "dynamic" | "deployment", ViewI
 	 *
 	 * 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;
+	readonly relativePath?: string | undefined;
 }
-interface DynamicViewParallelSteps {
-	readonly __parallel: DynamicViewStep[];
-}
-type DynamicViewStepOrParallel = DynamicViewStep | DynamicViewParallelSteps;
-type DynamicViewIncludeRule = {
-	include: ModelLayer.AnyFqnExpr[];
-};
-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 NodeNotation = {
+	kinds: string[];
+	shape: ElementShape;
+	color: Color;
+	title: string;
 };
-type DeploymentViewRuleStyle = {
-	targets: FqnExpr[];
-	notation?: string;
-	style: ElementStyle & {
-		color?: Color;
-		shape?: ElementShape;
-		icon?: IconUrl;
+interface ViewWithNotation {
+	notation?: {
+		nodes: NodeNotation[];
 	};
-};
-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 {
+interface ViewWithHash {
+	/**
+	 * Hash of the view object.
+	 * This is used to detect changes in layout
+	 */
+	hash: string;
+}
+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;
+}
+interface ComputedNode<A extends Any = Any> extends WithOptionalLinks {
 	id: NodeId;
-	kind: string;
+	kind: ElementKind<A> | DeploymentKind<A> | "@group";
 	parent: NodeId | null;
 	/**
 	 * Reference to model element
 	 * If 1 - node id is a reference
 	 */
-	modelRef?: 1 | Fqn;
+	modelRef?: Fqn$1<A> | undefined;
 	/**
 	 * Reference to deployment element
 	 * If 1 - node id is a reference
 	 */
-	deploymentRef?: 1 | Fqn;
+	deploymentRef?: DeploymentFqn$1<A> | undefined;
 	title: string;
-	description: string | null;
-	technology: string | null;
+	description?: string | null;
+	technology?: string | null;
 	notation?: string;
-	tags: NonEmptyArray<Tag$1> | null;
-	links: NonEmptyArray<Link> | null;
 	children: NodeId[];
 	inEdges: EdgeId[];
 	outEdges: EdgeId[];
+	tags: Tags<A>;
 	shape: ElementShape;
 	color: Color;
-	/**
-	 * @deprecated Use `style` instead
-	 */
-	icon?: IconUrl;
+	icon?: Icon;
 	style: ElementStyle;
-	navigateTo?: ViewId | null;
+	navigateTo?: StrictViewId<A> | null;
 	level: number;
 	depth?: number;
 	/**
@@ -783,15 +408,7 @@ interface ComputedNode {
 	 */
 	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 {
+interface ComputedEdge<A extends Any = Any> extends WithOptionalTags<A> {
 	id: EdgeId;
 	parent: NodeId | null;
 	source: NodeId;
@@ -800,15 +417,14 @@ interface ComputedEdge {
 	description?: string;
 	technology?: string;
 	relations: RelationId[];
-	kind?: RelationshipKind;
+	kind?: RelationKind<A> | typeof StepEdgeKind;
 	notation?: string;
 	notes?: string;
 	color?: Color;
 	line?: RelationshipLineType;
 	head?: RelationshipArrowType;
 	tail?: RelationshipArrowType;
-	tags?: NonEmptyArray<Tag$1>;
-	navigateTo?: ViewId;
+	navigateTo?: StrictViewId<A> | null;
 	/**
 	 * If this edge is derived from custom relationship predicate
 	 */
@@ -819,115 +435,70 @@ interface ComputedEdge {
 	 */
 	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 = {
+interface DiagramNode<A extends Any = Any> extends ComputedNode<A>, BBox {
 	x: number;
 	y: number;
 	width: number;
 	height: number;
-};
-interface DiagramNode extends ComputedNode {
-	width: number;
-	height: number;
+	/**
+	 * Absolute position, top left
+	 * @deprecated Use `x` and `y` instead
+	 */
 	position: Point;
+	/**
+	 * Bounding box of label
+	 * (Absolute coordinates)
+	 */
 	labelBBox: BBox;
 }
-declare namespace DiagramNode {
-	function modelRef(node: Pick<DiagramNode, "id" | "modelRef">): Fqn | null;
-	function deploymentRef(node: Pick<DiagramNode, "id" | "deploymentRef">): Fqn | null;
+interface DiagramEdge<A extends Any = Any> extends ComputedEdge<A> {
 	/**
-	 * Nodes group is a special kind of node, exisiting only in view
+	 * Bezier points
+	 * (Absolute coordinates)
 	 */
-	function isNodesGroup(node: Pick<DiagramNode, "kind">): boolean;
-}
-interface DiagramEdge extends ComputedEdge {
 	points: NonEmptyArray<Point>;
+	/**
+	 * Control points to adjust the edge
+	 * (Absolute coordinates)
+	 */
 	controlPoints?: NonEmptyArray<XYPoint>;
+	/**
+	 * Bounding box of label
+	 * (Absolute coordinates)
+	 */
 	labelBBox?: BBox | null;
+	/**
+	 * Graphviz edge POS
+	 *
+	 * TODO: temporary solution, should be moved out
+	 * @deprecated
+	 */
 	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[];
+interface BaseLayoutedViewProperties<A extends Any> extends BaseViewProperties<A>, ViewWithHash, ViewWithNotation {
+	readonly [_stage]: "layouted";
+	readonly autoLayout: ViewAutoLayout;
+	readonly nodes: DiagramNode<A>[];
+	readonly edges: DiagramEdge<A>[];
 	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";
+interface LayoutedElementView<A extends Any = Any> extends BaseLayoutedViewProperties<A> {
+	readonly [_type]: "element";
+	readonly viewOf?: Fqn$1<A>;
+	readonly extends?: StrictViewId<A>;
+}
+interface LayoutedDeploymentView<A extends Any = Any> extends BaseLayoutedViewProperties<A> {
+	readonly [_type]: "deployment";
+}
+interface LayoutedDynamicView<A extends Any = Any> extends BaseLayoutedViewProperties<A> {
+	readonly [_type]: "dynamic";
+}
+type LayoutedView<A extends Any = Any> = LayoutedElementView<A> | LayoutedDeploymentView<A> | LayoutedDynamicView<A>;
 declare namespace ViewChange {
 	interface ChangeElementStyle {
 		op: "change-element-style";
@@ -937,7 +508,7 @@ declare namespace ViewChange {
 			shape?: ElementShape;
 			color?: ThemeColor;
 		};
-		targets: NonEmptyArray<Fqn>;
+		targets: NonEmptyArray<Fqn | DeploymentFqn>;
 	}
 	interface SaveManualLayout {
 		op: "save-manual-layout";
@@ -958,7 +529,7 @@ type NodeDimensionChange = {
 	type: "dimensions";
 	dimensions?: Dimensions;
 	resizing?: boolean;
-	setAttributes?: boolean;
+	setAttributes?: boolean | "width" | "height";
 };
 type NodePositionChange = {
 	id: string;
@@ -1182,6 +753,7 @@ type OnConnectStartParams = {
 type OnConnectStart = (event: MouseEvent | TouchEvent, params: OnConnectStartParams) => void;
 type OnConnect = (connection: Connection) => void;
 type OnConnectEnd = (event: MouseEvent | TouchEvent, connectionState: FinalConnectionState) => void;
+type OnReconnect<EdgeType extends EdgeBase = EdgeBase> = (oldEdge: EdgeType, newConnection: Connection) => void;
 type PaddingUnit = "px" | "%";
 type PaddingWithUnit = `${number}${PaddingUnit}` | number;
 type Padding = PaddingWithUnit | {
@@ -1511,7 +1083,6 @@ type EdgeProps<EdgeType extends Edge = Edge> = Pick<EdgeType, "id" | "animated"
 	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;
@@ -1568,22 +1139,11 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	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'
+	 *  animated: true
 	 * }
 	 */
 	defaultEdgeOptions?: DefaultEdgeOptions;
@@ -1620,7 +1180,6 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	/**
 	 * This handler is called when the source or target of a reconnectable edge is dragged from the
 	 * current node. It will fire even if the edge's source or target do not end up changing.
-	 *
 	 * You can use the `reconnectEdge` utility to convert the connection to a new edge.
 	 */
 	onReconnect?: OnReconnect<EdgeType>;
@@ -1631,7 +1190,6 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	/**
 	 * This event fires when the user releases the source or target of an editable edge. It is called
 	 * even if an edge update does not occur.
-	 *
 	 */
 	onReconnectEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void;
 	/**
@@ -1692,7 +1250,6 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	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';
@@ -1760,9 +1317,7 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	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.
-	 * @TODO check if @default is correct
 	 * @default {
 	 *   input: InputNode,
 	 *   default: DefaultNode,
@@ -1777,9 +1332,7 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	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.
-	 * @TODO check if @default is correct
 	 * @default {
 	 *   default: BezierEdge,
 	 *   straight: StraightEdge,
@@ -1795,7 +1348,6 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	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!
 	 * @default ConnectionLineType.Bezier
 	 */
@@ -1816,7 +1368,7 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	/**
 	 * If set, pressing the key or chord will delete any selected nodes and edges. Passing an array
 	 * represents multiple keys that can be pressed.
-	 *
+  
 	 * For example, `["Delete", "Backspace"]` will delete selected elements when either key is pressed.
 	 * @default 'Backspace'
 	 */
@@ -1933,7 +1485,6 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	selectNodesOnDrag?: boolean;
 	/**
 	 * Enabling 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.
 	 * @default true
 	 * @example [0, 2] // allows panning with the left and right mouse buttons
@@ -1972,7 +1523,6 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	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.
 	 * @default [[-∞, -∞], [+∞, +∞]]
 	 * @example [[-1000, -10000], [1000, 1000]]
@@ -1985,7 +1535,6 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	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]]
 	 */
@@ -2007,21 +1556,18 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	zoomOnPinch?: boolean;
 	/**
 	 * Controls if the viewport should pan by scrolling inside the container.
-	 *
 	 * Can be limited to a specific direction with `panOnScrollMode`.
 	 * @default false
 	 */
 	panOnScroll?: boolean;
 	/**
 	 * Controls how fast viewport should be panned on scroll.
-	 *
 	 * Use together with `panOnScroll` prop.
 	 * @default 0.5
 	 */
 	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"
@@ -2154,10 +1700,8 @@ interface ReactFlowProps<NodeType extends Node$1 = Node$1, EdgeType extends Edge
 	isValidConnection?: IsValidConnection<EdgeType>;
 	/**
 	 * With a threshold greater than zero you can delay node drag events.
-	 *
 	 * If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired.
-	 *
-	 * 1 is the default value, so clicks don't trigger drag events.
+	 * 1 is the default value, so that clicks don't trigger drag events.
 	 * @default 1
 	 */
 	nodeDragThreshold?: number;
@@ -2403,20 +1947,158 @@ type ControlsCustomLayoutProps = {
 	syncInProgressBadge: ReactNode;
 };
 type ControlsCustomLayout = (props: ControlsCustomLayoutProps) => ReactNode;
-type DiagramNodeWithNavigate<ID = ViewId> = Omit<DiagramNode, "navigateTo"> & {
-	navigateTo: ID;
+type Dimmed = "immediate" | boolean;
+type NodeData = {
+	/**
+	 * Whether the cursor is hovering over the node
+	 */
+	hovered?: boolean;
+	/**
+	 * Whether the node is dimmed
+	 * 'immediate' means that the node is dimmed without delay
+	 */
+	dimmed?: Dimmed;
+};
+type Node$1 = Node$1<NodeData>;
+type NodeProps$2 = NodeProps$1<Node$1<NodeData, any>>;
+type EdgeData = {
+	/**
+	 * Whether the cursor is hovering over the edge
+	 */
+	hovered?: boolean;
+	/**
+	 * Whether the edge is active (animated and highlighted)
+	 */
+	active?: boolean;
+	/**
+	 * Whether the edge is dimmed
+	 * 'immediate' means that the edge is dimmed without delay
+	 */
+	dimmed?: Dimmed;
+};
+type Edge$1 = Simplify<Omit<Edge, "data"> & {
+	data: EdgeData;
+}>;
+type WithDimmed = {
+	data: {
+		dimmed?: Dimmed;
+	};
 };
+type WithHovered = {
+	data: {
+		hovered?: boolean;
+	};
+};
+declare function setDimmed<T extends WithDimmed>(value: T, dimmed: "immediate" | boolean): T;
+declare function setDimmed(dimmed: "immediate" | boolean): <T extends WithDimmed>(value: T) => T;
+declare function setHovered<T extends WithHovered>(value: T, hovered: boolean): T;
+declare function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T;
+type WithData<D> = {
+	data: D;
+};
+declare function setData<E extends WithData<any>>(value: E, state: Partial<E["data"]>): E;
+declare function setData<E extends WithData<any>>(state: Partial<E["data"]>): (value: E) => E;
+type NodeProps$3<T extends Record<string, unknown> = {}, NodeType extends string = string> = NodeProps$1<Node$1<Base.NodeData & T, NodeType>>;
+type ReactFlowNode<Data extends Record<string, unknown>, NodeType extends string> = SetRequired<Node$1<Data, NodeType>, "type" | "initialWidth" | "initialHeight">;
+type ReactFlowEdge<Data extends Record<string, unknown>, EdgeType extends string> = SetRequired<Edge<Data, EdgeType>, "type" | "data">;
+type NonOptional<T extends object> = Simplify<{
+	[P in Exclude<keyof T, OptionalKeysOf<T>>]: T[P];
+} & {
+	[P in OptionalKeysOf<T>]-?: T[P] | undefined;
+}>;
+declare namespace Types {
+	type LeafNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, "id" | "title" | "technology" | "description" | "color" | "shape" | "width" | "level" | "height" | "style" | "tags" | "position">> & {
+		/**
+		 * View this node belongs to
+		 */
+		viewId: ViewId;
+		isMultiple?: boolean | undefined;
+		icon: string | null;
+	};
+	/**
+	 * Represents element from logical model
+	 */
+	type ElementNodeData = LeafNodeData & {
+		modelFqn: Fqn;
+		deploymentFqn?: never;
+		/**
+		 * If set - this node has navigation to another view and diagram has handler for this
+		 */
+		navigateTo: ViewId | null;
+	};
+	/**
+	 * Represents element from deployment model
+	 */
+	type DeploymentElementNodeData = LeafNodeData & {
+		navigateTo: ViewId | null;
+		deploymentFqn: DeploymentFqn;
+		modelFqn: Fqn | null;
+	};
+	type CompoundNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, "id" | "title" | "color" | "shape" | "style" | "tags" | "position">> & {
+		/**
+		 * View this node belongs to
+		 */
+		viewId: ViewId;
+		depth: number;
+		icon?: IconUrl;
+	};
+	type CompoundElementNodeData = CompoundNodeData & {
+		modelFqn: Fqn;
+		deploymentFqn?: never;
+		/**
+		 * If set - this node has navigation to another view and diagram has handler for this
+		 */
+		navigateTo: ViewId | null;
+	};
+	type CompoundDeploymentNodeData = CompoundNodeData & {
+		deploymentFqn: DeploymentFqn;
+		/**
+		 * If set - this node refers to a model element
+		 */
+		modelFqn: Fqn | null;
+		/**
+		 * If set - this node has navigation to another view and diagram has handler for this
+		 */
+		navigateTo: ViewId | null;
+	};
+	type ViewGroupNodeData = CompoundNodeData & {
+		isViewGroup: true;
+	};
+	type ElementNode = ReactFlowNode<ElementNodeData, "element">;
+	type DeploymentElementNode = ReactFlowNode<DeploymentElementNodeData, "deployment">;
+	type CompoundElementNode = ReactFlowNode<CompoundElementNodeData, "compound-element">;
+	type CompoundDeploymentNode = ReactFlowNode<CompoundDeploymentNodeData, "compound-deployment">;
+	type ViewGroupNode = ReactFlowNode<ViewGroupNodeData, "view-group">;
+	type Node = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode;
+	type NodeData = Node["data"];
+	type RelationshipEdgeData = Simplify<Base.EdgeData & NonOptional<Pick<DiagramEdge, "id" | "label" | "labelBBox" | "technology" | "points" | "dir" | "color" | "line" | "head" | "tail" | "navigateTo" | "notes">> & {
+		labelXY: XYPosition | null;
+		controlPoints: XYPosition[] | undefined | null;
+	}>;
+	type RelationshipEdge = ReactFlowEdge<RelationshipEdgeData, "relationship">;
+	type Edge = RelationshipEdge;
+	type EdgeData = RelationshipEdgeData;
+}
+interface CustomNodes {
+	element?: undefined | ((props: NodeProps$3<Types.ElementNodeData, "element">) => ReactNode);
+	deployment?: undefined | ((props: NodeProps$3<Types.DeploymentElementNodeData, "deployment">) => ReactNode);
+	compoundElement?: undefined | ((props: NodeProps$3<Types.CompoundElementNodeData, "compound-element">) => ReactNode);
+	compoundDeployment?: undefined | ((props: NodeProps$3<Types.CompoundDeploymentNodeData, "compound-deployment">) => ReactNode);
+	viewGroup?: undefined | ((props: NodeProps$3<Types.ViewGroupNodeData, "view-group">) => ReactNode);
+}
+type DiagramNodeWithNavigate<A extends Any> = SetRequired<DiagramNode<A>, "navigateTo">;
 type ElementIconRendererProps = {
 	node: {
 		id: string;
 		title: string;
 		icon?: string | null | undefined;
 	};
+	className?: string;
 };
-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;
+export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
+type OnNavigateTo<A extends Any> = (to: ViewId$1<A>, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<A>) => void;
+type OnNodeClick<A extends Any> = (node: DiagramNode<A>, event: ReactMouseEvent) => void;
+type OnEdgeClick<A extends Any> = (edge: DiagramEdge<A>, event: ReactMouseEvent) => void;
 type OnCanvasClick = (event: ReactMouseEvent) => void;
 type ChangeEvent = {
 	change: ViewChange;
@@ -2425,8 +2107,8 @@ 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">;
 type PaddingUnit$1 = "px" | "%";
 type PaddingWithUnit$1 = `${number}${PaddingUnit$1}` | number;
-interface LikeC4DiagramProperties {
-	view: DiagramView;
+interface LikeC4DiagramProperties<A extends Any> {
+	view: LayoutedView<A>;
 	className?: string | undefined;
 	/**
 	 * Enable/disable panning
@@ -2520,6 +2202,11 @@ interface LikeC4DiagramProperties {
 	 * @default false
 	 */
 	enableDynamicViewWalkthrough?: boolean | undefined;
+	/**
+	 * Display element tags in the bottom left corner
+	 * @default true
+	 */
+	enableElementTags?: boolean | undefined;
 	/**
 	 * Experimental feature to enable edge editing
 	 * @default false
@@ -2540,44 +2227,48 @@ interface LikeC4DiagramProperties {
 	 * Customize layout of the controls on the top left
 	 */
 	renderControls?: ControlsCustomLayout | undefined;
+	/**
+	 * Override node renderers
+	 */
+	renderNodes?: CustomNodes | undefined;
 	/**
 	 * Dynamic filter, applies both to nodes and edges
 	 */
-	where?: WhereOperator<string, string> | undefined;
+	where?: WhereOperator<A> | undefined;
 	/**
 	 * Override ReactFlow props
 	 */
 	reactFlowProps?: OverrideReactFlowProps | undefined;
 }
-type OpenSourceParams = {
-	element: Fqn;
+type OpenSourceParams<A extends Any = Any> = {
+	element: Fqn$1<A>;
 	property?: string;
 } | {
-	relation: RelationId;
+	relation: RelationId$1;
 } | {
-	deployment: Fqn;
+	deployment: DeploymentFqn$1<A>;
 	property?: string;
 } | {
-	view: ViewId;
+	view: StrictViewId<A>;
 };
-interface LikeC4DiagramEventHandlers {
+interface LikeC4DiagramEventHandlers<A extends Any> {
 	onChange?: OnChange | null | undefined;
-	onNavigateTo?: OnNavigateTo | null | undefined;
-	onNodeClick?: OnNodeClick | null | undefined;
-	onNodeContextMenu?: OnNodeClick | null | undefined;
+	onNavigateTo?: OnNavigateTo<A> | null | undefined;
+	onNodeClick?: OnNodeClick<A> | null | undefined;
+	onNodeContextMenu?: OnNodeClick<A> | null | undefined;
 	onCanvasContextMenu?: OnCanvasClick | null | undefined;
-	onEdgeClick?: OnEdgeClick | null | undefined;
-	onEdgeContextMenu?: OnEdgeClick | null | undefined;
+	onEdgeClick?: OnEdgeClick<A> | null | undefined;
+	onEdgeContextMenu?: OnEdgeClick<A> | null | undefined;
 	onCanvasClick?: OnCanvasClick | null | undefined;
 	onCanvasDblClick?: OnCanvasClick | null | undefined;
 	onBurgerMenuClick?: null | undefined | (() => void);
-	onOpenSource?: null | undefined | ((params: OpenSourceParams) => void);
+	onOpenSource?: null | undefined | ((params: OpenSourceParams<A>) => void);
 }
-export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
+export interface LikeC4ViewProps<A extends Any> {
 	/**
 	 * View to display.
 	 */
-	viewId: ViewId;
+	viewId: ViewId$1<A>;
 	/**
 	 * Enable/disable panning
 	 * @default false
@@ -2664,6 +2355,11 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
 	 * @default false
 	 */
 	enableElementDetails?: boolean | undefined;
+	/**
+	 * Display element tags in the bottom left corner
+	 * @default false
+	 */
+	enableElementTags?: boolean | undefined;
 	/**
 	 * Experimental feature to browse relationships
 	 *
@@ -2681,7 +2377,7 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
 	 * @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;
+	where?: WhereOperator<A> | undefined;
 	/**
 	 * Override some react flow props
 	 */
@@ -2694,6 +2390,10 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
 	mantineTheme?: any;
 	/** Function to generate nonce attribute added to all generated `<style />` tags */
 	styleNonce?: string | (() => string) | undefined;
+	/**
+	 * Override node renderers
+	 */
+	renderNodes?: CustomNodes | undefined;
 	/**
 	 * Render custom icon for a node
 	 * By default, if icon is http:// or https://, it will be rendered as an image
@@ -2759,6 +2459,11 @@ interface LikeC4BrowserProps {
 	 * @default enableRelationshipBrowser
 	 */
 	enableRelationshipDetails?: boolean | undefined;
+	/**
+	 * Display element tags in the bottom left corner
+	 * @default true
+	 */
+	enableElementTags?: boolean | undefined;
 	/**
 	 * Display notations of the view
 	 * @default true
@@ -2777,10 +2482,10 @@ interface LikeC4BrowserProps {
 	 */
 	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;
+export declare function LikeC4View<A extends Any = UnknownLayouted>({ viewId, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;
+type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<LikeC4DiagramProperties<A> & LikeC4DiagramEventHandlers<A>>;
+export type ReactLikeC4Props<A extends Any> = Omit<LikeC4DiagramProps<A>, "view"> & {
+	viewId: ViewId$1<A>;
 	/**
 	 * Keep aspect ratio of the diagram
 	 * Disable if you need to manage the viewport (use className)
@@ -2801,13 +2506,11 @@ export type ReactLikeC4Props<ViewId = string, Tag = string, Kind = string> = Omi
 	 */
 	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 function ReactLikeC4<A extends Any = UnknownLayouted>({ viewId, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ReactLikeC4 {
 	var displayName: string;
 }
@@ -2819,9 +2522,12 @@ type LikeC4ModelProviderProps = PropsWithChildren<{
 	likec4model: any;
 }>;
 export declare const LikeC4ModelProvider: (props: LikeC4ModelProviderProps) => JSX.Element;
+export declare const ViewNotFound: ({ viewId }: {
+	viewId: string;
+}) => import("react/jsx-runtime").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;
+type Primitive = boolean | number | string;
+type ReadonlyIfObject<Value> = Value extends undefined ? Value : Value extends (...args: any) => any ? Value : Value extends Primitive ? Value : Value extends object ? Readonly<Value> : Value;
 interface ReadableAtom<Value = any> {
 	/**
 	 * Get store value.
@@ -3036,6 +2742,27 @@ interface Computed {
 	], cb: (...values: StoreValues<OriginStores>) => Task<Value> | Value): ReadableAtom<Value>;
 }
 declare const computed: Computed;
+interface Batched {
+	<Value, OriginStore extends Store>(stores: OriginStore, cb: (value: StoreValue<OriginStore>) => Task<Value> | Value): ReadableAtom<Value>;
+	/**
+	 * Create derived store, which use generates value from another stores.
+	 *
+	 * ```js
+	 * import { batched } from 'nanostores'
+	 *
+	 * const $sortBy = atom('id')
+	 * const $category = atom('')
+	 *
+	 * export const $link = batched([$sortBy, $category], (sortBy, category) => {
+	 *   return `/api/entities?sortBy=${sortBy}&category=${category}`
+	 * })
+	 * ```
+	 */
+	<Value, OriginStores extends AnyStore[]>(stores: [
+		...OriginStores
+	], cb: (...values: StoreValues<OriginStores>) => Task<Value> | Value): ReadableAtom<Value>;
+}
+declare const batched: Batched;
 type StoreKeys<T> = T extends {
 	setKey: (k: infer K, v: any) => unknown;
 } ? K : never;
@@ -3055,8 +2782,11 @@ interface UseStoreOptions<SomeStore> {
 declare function useStore<SomeStore extends Store>(store: SomeStore, options?: UseStoreOptions<SomeStore>): StoreValue<SomeStore>;
 export declare const createHooksForModel: ($atom: WritableAtom) => any;
 
+declare namespace Base {
+	export { Dimmed, Edge$1 as Edge, EdgeData, Node$1 as Node, NodeData, NodeProps$2 as NodeProps, setData, setDimmed, setHovered };
+}
 declare namespace nano {
-	export { Atom, WritableAtom, atom, computed, map, useStore };
+	export { Atom, ReadableAtom, WritableAtom, atom, batched, computed, map, useStore };
 }
 
 export {