likec4 1.10.0 → 1.11.0

package/react/index.d.ts

@@ -1,13 +1,62 @@
 // Generated by dts-bundle-generator v9.5.1
 
-import { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, PropsWithChildren, ReactNode } from 'react';
+import { LiteralUnion, OverrideProperties, PartialDeep, RequireExactlyOne, Tagged, UnwrapTagged } from 'type-fest';
 
+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>;
+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">;
+type Point = readonly [
+	x: number,
+	y: number
+];
+interface XYPoint {
+	x: number;
+	y: number;
+}
+type Fqn = Tagged<string, "Fqn">;
 declare const BorderStyles: readonly [
 	"solid",
 	"dashed",
 	"dotted",
 	"none"
 ];
+type BorderStyle = typeof BorderStyles[number];
+type ElementKind = Tagged<string, "ElementKind">;
 declare const ElementShapes: readonly [
 	"rectangle",
 	"person",
@@ -17,233 +66,107 @@ declare const ElementShapes: readonly [
 	"storage",
 	"queue"
 ];
-declare const ThemeColors: readonly [
-	"amber",
-	"blue",
-	"gray",
-	"slate",
-	"green",
-	"indigo",
-	"muted",
-	"primary",
-	"red",
-	"secondary",
-	"sky"
-];
-declare const tag: unique symbol;
-declare enum BackgroundVariant {
-	Lines = "lines",
-	Dots = "dots",
-	Cross = "cross"
+type ElementShape = typeof ElementShapes[number];
+interface ElementStyle {
+	border?: BorderStyle;
+	opacity?: number;
 }
-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: AutoLayoutDirection;
-	}
+type Tag = Tagged<string, "Tag">;
+interface Link {
+	readonly title?: string;
+	readonly url: string;
+	readonly relative?: string;
 }
-export declare const BundledStyles: () => any;
-export declare const DefaultTheme: MantineThemeOverride;
-export declare function LikeC4Browser<ViewId extends string, Tag extends string, Kind extends string>({ className, colorScheme, view, injectFontCss, onNavigateTo, onClose, renderIcon, where, style, mantineTheme, background }: LikeC4BrowserProps<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
-export declare function LikeC4ViewEmbedded<ViewId extends string, Tag extends string, Kind extends string>({ onNavigateTo: _onNavigateTo, className, view, injectFontCss, colorScheme, background, renderIcon, showDiagramTitle, showElementLinks, showNavigationButtons, enableFocusMode, showNotations, mantineTheme, where, style }: LikeC4ViewEmbeddedProps<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
-export declare function ReactLikeC4<ViewId extends string = ViewID, Tag extends string = Tag$1, Kind extends string = ElementKind>({ className, view, colorScheme: explicitColorScheme, injectFontCss, keepAspectRatio, showNotations, onNavigateTo, background, style, mantineTheme, ...props }: ReactLikeC4Props<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
-export declare function useBundledStyleSheet(injectFontCss?: boolean): CSSStyleSheet[];
-export declare function useColorScheme(explicit?: ColorScheme): ColorScheme;
-export declare namespace ReactLikeC4 {
-	var displayName: string;
+interface Element$1 {
+	readonly id: Fqn;
+	readonly kind: ElementKind;
+	readonly title: string;
+	readonly description: string | null;
+	readonly technology: string | null;
+	readonly tags: NonEmptyArray<Tag> | null;
+	readonly links: NonEmptyArray<Link> | null;
+	readonly icon?: IconUrl;
+	readonly shape?: ElementShape;
+	readonly color?: Color;
+	readonly style?: ElementStyle;
+	readonly notation?: string;
+	readonly metadata?: {
+		[key: string]: string;
+	};
 }
-export type LikeC4BrowserProps<ViewId extends string, Tag extends string, Kind extends string> = Pick<HTMLAttributes<HTMLDialogElement>, "style" | "className"> & {
-	view: ViewData<ViewId>;
-	/**
-	 * By default determined by the user's system preferences.
-	 */
-	colorScheme?: "light" | "dark";
-	/**
-	 * 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;
-	/**
-	 * Background pattern
-	 * @default 'dots'
-	 */
-	background?: "dots" | "lines" | "cross" | "transparent" | "solid" | undefined;
-	onNavigateTo: (to: ViewId) => void;
-	onClose: () => void;
-	/**
-	 * Render custom icon for a node
-	 * By default, if icon is http:// or https://, it will be rendered as an image
-	 */
-	renderIcon?: ElementIconRenderer | undefined;
-	where?: WhereOperator<Tag, Kind> | undefined;
-	mantineTheme?: MantineThemeOverride | undefined;
+interface ElementKindSpecificationStyle {
+	shape?: ElementShape;
+	icon?: IconUrl;
+	color?: Color;
+	border?: BorderStyle;
+	opacity?: number;
+}
+interface ElementKindSpecification {
+	readonly technology?: string;
+	readonly notation?: string;
+	readonly style: ElementKindSpecificationStyle;
+}
+type EqualOperator<V> = {
+	eq: V;
+	neq?: never;
+} | {
+	eq?: never;
+	neq: V;
 };
-export type LikeC4ViewEmbeddedProps<ViewId extends string, Tag extends string, Kind extends string> = Pick<HTMLAttributes<HTMLDivElement>, "style" | "className"> & {
-	view: ViewData<ViewId>;
-	/**
-	 * By default determined by the user's system preferences.
-	 */
-	colorScheme?: "light" | "dark";
-	/**
-	 * 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;
-	/**
-	 * Background pattern
-	 * @default 'transparent'
-	 */
-	background?: "dots" | "lines" | "cross" | "transparent" | "solid" | undefined;
-	onNavigateTo?: ((to: ViewId) => void) | 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;
-	/**
-	 * Display hovercards with element links
-	 * @default true
-	 */
-	showElementLinks?: boolean | undefined;
-	/**
-	 * Display panel with 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
-	 * @default false
-	 */
-	enableFocusMode?: boolean | undefined;
-	where?: WhereOperator<Tag, Kind> | undefined;
-	mantineTheme?: MantineThemeOverride | undefined;
+type AllNever = {
+	not?: never;
+	and?: never;
+	or?: never;
+	tag?: never;
+	kind?: never;
 };
-export type LikeC4ViewProps<ViewId extends string, Tag extends string, Kind extends string> = {
-	/**
-	 * View to display.
-	 */
-	viewId: ViewId;
-	/**
-	 * Background pattern
-	 * @default 'transparent'
-	 */
-	background?: "dots" | "lines" | "cross" | "transparent" | "solid" | undefined;
-	/**
-	 * Background pattern for the browser view.
-	 * @default 'dots'
-	 */
-	browserBackground?: "dots" | "lines" | "cross" | "transparent" | "solid" | undefined;
-	/**
-	 * Click on the view opens a modal with browser.
-	 *
-	 * @default true
-	 */
-	interactive?: boolean;
-	/**
-	 * 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;
-	/**
-	 * Display hovercards with element links
-	 * @default true
-	 */
-	showElementLinks?: boolean | undefined;
-	/**
-	 * Display panel with 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 `interactive`
-	 *
-	 * @default false
-	 */
-	enableFocusMode?: boolean | undefined;
-	where?: WhereOperator<Tag, Kind> | undefined;
-	className?: string | undefined;
-	style?: CSSProperties | undefined;
-	browserClassName?: string | undefined;
-	browserStyle?: CSSProperties | undefined;
-	mantineTheme?: MantineThemeOverride | undefined;
+type TagEqual<Tag> = Omit<AllNever, "tag"> & {
+	tag: EqualOperator<Tag>;
 };
-export type ReactLikeC4Props<ViewId extends string = ViewID, Tag extends string = Tag$1, Kind extends string = ElementKind> = Omit<LikeC4DiagramProps, "view" | "where" | "onNavigateTo"> & {
-	view: ViewData<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?: MantineThemeOverride | undefined;
+type KindEqual<Kind> = Omit<AllNever, "kind"> & {
+	kind: EqualOperator<Kind>;
 };
-export type ViewData<ViewId extends string> = Omit<DiagramView, "id"> & {
-	id: ViewId;
+type NotOperator<Tag, Kind> = Omit<AllNever, "not"> & {
+	not: WhereOperator<Tag, Kind>;
+};
+type AndOperator<Tag, Kind> = Omit<AllNever, "and"> & {
+	and: NonEmptyArray<WhereOperator<Tag, Kind>>;
+};
+type OrOperator<Tag, Kind> = Omit<AllNever, "or"> & {
+	or: NonEmptyArray<WhereOperator<Tag, Kind>>;
 };
+type WhereOperator<Tag, Kind> = TagEqual<Tag> | KindEqual<Kind> | NotOperator<Tag, Kind> | AndOperator<Tag, Kind> | OrOperator<Tag, Kind>;
+type RelationID = Tagged<string, "RelationID">;
+type RelationshipKind = Tagged<string, "RelationshipKind">;
+type RelationshipLineType = "dashed" | "solid" | "dotted";
+type RelationshipArrowType = "none" | "normal" | "onormal" | "dot" | "odot" | "diamond" | "odiamond" | "crow" | "open" | "vee";
+interface Relation {
+	readonly id: RelationID;
+	readonly source: Fqn;
+	readonly target: Fqn;
+	readonly title: string;
+	readonly description?: string;
+	readonly technology?: string;
+	readonly tags?: NonEmptyArray<Tag>;
+	readonly kind?: RelationshipKind;
+	readonly color?: Color;
+	readonly line?: RelationshipLineType;
+	readonly head?: RelationshipArrowType;
+	readonly tail?: RelationshipArrowType;
+	readonly links?: NonEmptyArray<Link>;
+	readonly navigateTo?: ViewID;
+	readonly metadata?: {
+		[key: string]: string;
+	};
+}
+interface RelationshipKindSpecification {
+	readonly technology?: string;
+	readonly notation?: string;
+	readonly color?: Color;
+	readonly line?: RelationshipLineType;
+	readonly head?: RelationshipArrowType;
+	readonly tail?: RelationshipArrowType;
+}
 interface BaseExpr {
 	where?: never;
 	element?: never;
@@ -261,111 +184,12 @@ interface BaseExpr {
 	outgoing?: never;
 	customRelation?: never;
 }
-interface BasicElementView extends BasicView<"element"> {
-	readonly viewOf?: Fqn;
-	readonly rules: ViewRule[];
-}
-interface BasicView<ViewType extends "element" | "dynamic"> {
-	readonly __?: ViewType;
-	readonly id: ViewID;
-	readonly title: string | null;
-	readonly description: string | null;
-	readonly tags: NonEmptyArray<Tag$1> | 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 ComputedDynamicView extends Omit<DynamicView, "rules" | "steps" | "docUri">, ViewWithHash, ViewWithNotation {
-	readonly autoLayout: ViewRuleAutoLayout["autoLayout"];
-	readonly nodes: ComputedNode[];
-	readonly edges: ComputedEdge[];
-	steps?: never;
-	rules?: never;
-	docUri?: never;
-}
-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";
-}
-interface ComputedElementView extends Omit<ElementView, "rules" | "docUri">, ViewWithHash, ViewWithNotation {
-	readonly extends?: ViewID;
-	readonly autoLayout: ViewRuleAutoLayout["autoLayout"];
-	readonly nodes: ComputedNode[];
-	readonly edges: ComputedEdge[];
-	rules?: never;
-	docUri?: never;
+interface ElementRefExpr extends Omit<BaseExpr, "element" | "isDescedants"> {
+	element: Fqn;
+	isDescedants?: boolean;
 }
-interface ComputedNode {
-	id: NodeId;
-	kind: ElementKind;
-	parent: NodeId | null;
-	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;
-	/**
-	 * @deprecated Use `style` instead
-	 */
-	color: Color;
-	/**
-	 * @deprecated Use `style` instead
-	 */
-	icon?: IconUrl;
-	style: ElementStyle;
-	navigateTo?: ViewID;
-	level: number;
-	depth?: number;
-	/**
-	 * If this node was customized in the view
-	 */
-	isCustomized?: boolean;
+interface ExpandedElementExpr extends Omit<BaseExpr, "expanded"> {
+	expanded: Fqn;
 }
 interface CustomElementExpr extends Omit<BaseExpr, "custom"> {
 	custom: {
@@ -382,6 +206,46 @@ interface CustomElementExpr extends Omit<BaseExpr, "custom"> {
 		navigateTo?: ViewID;
 	};
 }
+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;
+	isEqual: boolean;
+}
+type ElementExpression = ElementRefExpr | WildcardExpr | ElementKindExpr | ElementTagExpr | ExpandedElementExpr;
+interface ElementWhereExpr extends Omit<BaseExpr, "where"> {
+	where: {
+		expr: ElementExpression;
+		condition: WhereOperator<string, string>;
+	};
+}
+type ElementPredicateExpression = ElementExpression | ElementWhereExpr | CustomElementExpr;
+interface RelationExpr 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 = RelationExpr | 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;
@@ -397,37 +261,74 @@ interface CustomRelationExpr extends Omit<BaseExpr, "customRelation"> {
 		tail?: RelationshipArrowType;
 	};
 }
-interface DiagramEdge extends ComputedEdge {
-	points: NonEmptyArray<Point>;
-	controlPoints?: NonEmptyArray<XYPoint>;
-	labelBBox?: BBox | null;
-	dotpos?: string;
+type RelationPredicateExpression = RelationExpression | RelationWhereExpr | CustomRelationExpr;
+type Expression = ElementPredicateExpression | RelationPredicateExpression;
+type ElementNotation = {
+	kinds: ElementKind[];
+	shape: ElementShape;
+	color: Color;
+	title: string;
+};
+type ViewID = Tagged<string, "ViewID">;
+type ViewRulePredicate = {
+	include: Expression[];
+	exclude?: never;
+} | {
+	include?: never;
+	exclude: Expression[];
+};
+interface ViewRuleStyle {
+	targets: ElementExpression[];
+	notation?: string;
+	style: ElementStyle & {
+		color?: Color;
+		shape?: ElementShape;
+		icon?: IconUrl;
+	};
 }
-interface DiagramNode extends ComputedNode {
-	width: number;
-	height: number;
-	position: Point;
-	labelBBox: BBox;
+type AutoLayoutDirection = "TB" | "BT" | "LR" | "RL";
+interface ViewRuleAutoLayout {
+	autoLayout: AutoLayoutDirection;
 }
-interface DiagramView extends Omit<ComputedView, "nodes" | "edges" | "manualLayout"> {
-	readonly nodes: DiagramNode[];
-	readonly edges: DiagramEdge[];
-	readonly bounds: BBox;
+type ViewRule = ViewRulePredicate | ViewRuleStyle | ViewRuleAutoLayout;
+interface BasicView<ViewType extends "element" | "dynamic"> {
+	readonly __?: ViewType;
+	readonly id: ViewID;
+	readonly title: string | null;
+	readonly description: string | null;
+	readonly tags: NonEmptyArray<Tag> | null;
+	readonly links: NonEmptyArray<Link> | null;
 	/**
-	 * If diagram has manual layout
-	 * But was changed and layout should be recalculated
+	 * URI to the source file of this view.
+	 * Undefined if the view is auto-generated.
 	 */
-	hasLayoutDrift?: boolean;
-	manualLayout?: never;
+	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 DynamicView extends BasicView<"dynamic"> {
-	readonly __: "dynamic";
-	readonly steps: DynamicViewStepOrParallel[];
-	readonly rules: DynamicViewRule[];
+interface BasicElementView extends BasicView<"element"> {
+	readonly viewOf?: Fqn;
+	readonly rules: ViewRule[];
 }
-interface DynamicViewParallelSteps {
-	readonly __parallel: DynamicViewStep[];
+interface ScopedElementView extends BasicElementView {
+	readonly viewOf: Fqn;
+}
+interface ExtendsElementView extends BasicElementView {
+	readonly extends: ViewID;
 }
+type ElementView = ScopedElementView | ExtendsElementView | BasicElementView;
 interface DynamicViewStep {
 	readonly source: Fqn;
 	readonly target: Fqn;
@@ -444,178 +345,572 @@ interface DynamicViewStep {
 	readonly navigateTo?: ViewID;
 	__parallel?: never;
 }
-interface ElementKindExpr extends Omit<BaseExpr, "elementKind" | "isEqual"> {
-	elementKind: ElementKind;
-	isEqual: boolean;
+interface DynamicViewParallelSteps {
+	readonly __parallel: DynamicViewStep[];
 }
-interface ElementRefExpr extends Omit<BaseExpr, "element" | "isDescedants"> {
-	element: Fqn;
-	isDescedants?: boolean;
+type DynamicViewStepOrParallel = DynamicViewStep | DynamicViewParallelSteps;
+type DynamicViewIncludeRule = {
+	include: ElementPredicateExpression[];
+};
+type DynamicViewRule = DynamicViewIncludeRule | ViewRuleStyle | ViewRuleAutoLayout;
+interface DynamicView extends BasicView<"dynamic"> {
+	readonly __: "dynamic";
+	readonly steps: DynamicViewStepOrParallel[];
+	readonly rules: DynamicViewRule[];
 }
-interface ElementStyle {
-	border?: BorderStyle;
-	opacity?: number;
+type CustomColorDefinitions = {
+	[key: string]: ThemeColorValues;
+};
+type LikeC4View = ElementView | DynamicView;
+type NodeId = Tagged<string, "Fqn">;
+type EdgeId = Tagged<string, "EdgeId">;
+interface ComputedNode {
+	id: NodeId;
+	kind: ElementKind;
+	parent: NodeId | null;
+	title: string;
+	description: string | null;
+	technology: string | null;
+	notation?: string;
+	tags: NonEmptyArray<Tag> | null;
+	links: NonEmptyArray<Link> | null;
+	children: NodeId[];
+	inEdges: EdgeId[];
+	outEdges: EdgeId[];
+	shape: ElementShape;
+	/**
+	 * @deprecated Use `style` instead
+	 */
+	color: Color;
+	/**
+	 * @deprecated Use `style` instead
+	 */
+	icon?: IconUrl;
+	style: ElementStyle;
+	navigateTo?: ViewID;
+	level: number;
+	depth?: number;
+	/**
+	 * If this node was customized in the view
+	 */
+	isCustomized?: boolean;
 }
-interface ElementTagExpr extends Omit<BaseExpr, "elementTag" | "isEqual"> {
-	elementTag: Tag$1;
-	isEqual: 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>;
+	navigateTo?: ViewID;
+	/**
+	 * If this edge is derived from custom relationship predicate
+	 */
+	isCustomized?: boolean;
+	/**
+	 * For layouting purposes
+	 * @default 'forward'
+	 */
+	dir?: "forward" | "back";
 }
-interface ElementThemeColorValues {
-	fill: ColorLiteral;
-	stroke: ColorLiteral;
-	hiContrast: ColorLiteral;
-	loContrast: ColorLiteral;
+interface ViewWithHash {
+	/**
+	 * Hash of the view object.
+	 * This is used to detect changes in layout
+	 */
+	hash: string;
 }
-interface ElementWhereExpr extends Omit<BaseExpr, "where"> {
-	where: {
-		expr: ElementExpression;
-		condition: WhereOperator<string, string>;
+interface ViewWithNotation {
+	notation?: {
+		elements: ElementNotation[];
 	};
 }
-interface ExpandedElementExpr extends Omit<BaseExpr, "expanded"> {
-	expanded: Fqn;
+interface ComputedElementView extends Omit<ElementView, "rules" | "docUri">, ViewWithHash, ViewWithNotation {
+	readonly extends?: ViewID;
+	readonly autoLayout: ViewRuleAutoLayout["autoLayout"];
+	readonly nodes: ComputedNode[];
+	readonly edges: ComputedEdge[];
+	rules?: never;
+	docUri?: never;
 }
-interface ExtendsElementView extends BasicElementView {
-	readonly extends: ViewID;
+interface ComputedDynamicView extends Omit<DynamicView, "rules" | "steps" | "docUri">, ViewWithHash, ViewWithNotation {
+	readonly autoLayout: ViewRuleAutoLayout["autoLayout"];
+	readonly nodes: ComputedNode[];
+	readonly edges: ComputedEdge[];
+	steps?: never;
+	rules?: never;
+	docUri?: never;
 }
-interface HeadingStyle {
-	fontSize: string;
-	fontWeight?: string;
-	lineHeight: string;
+type ComputedView = ComputedElementView | ComputedDynamicView;
+type BBox = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
+interface DiagramNode extends ComputedNode {
+	width: number;
+	height: number;
+	position: Point;
+	labelBBox: BBox;
 }
-interface InOutExpr extends Omit<BaseExpr, "inout"> {
-	inout: ElementExpression;
+interface DiagramEdge extends ComputedEdge {
+	points: NonEmptyArray<Point>;
+	controlPoints?: NonEmptyArray<XYPoint>;
+	labelBBox?: BBox | null;
+	dotpos?: string;
 }
-interface IncomingExpr extends Omit<BaseExpr, "incoming"> {
-	incoming: ElementExpression;
+interface DiagramView extends Omit<ComputedView, "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;
 }
-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);
-	onOpenSourceView?: null | undefined | (() => void);
-	onOpenSourceElement?: null | undefined | ((fqn: Fqn) => void);
-	onOpenSourceRelation?: null | undefined | ((id: RelationID) => void);
+type ViewManualLayout = {
+	readonly hash: string;
+	readonly x: number;
+	readonly y: number;
+	readonly width: number;
+	readonly height: number;
+	readonly autoLayout: AutoLayoutDirection;
+	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 ParsedLikeC4Model {
+	specification: {
+		tags: Tag[];
+		elements: Record<UnwrapTagged<ElementKind>, ElementKindSpecification>;
+		relationships: Record<UnwrapTagged<ElementKind>, RelationshipKindSpecification>;
+	};
+	elements: Record<Fqn, Element$1>;
+	relations: Record<RelationID, Relation>;
+	views: Record<ViewID, LikeC4View>;
 }
-interface LikeC4DiagramProperties {
-	view: DiagramView;
-	className?: string | undefined;
+interface ComputedLikeC4Model extends Omit<ParsedLikeC4Model, "views"> {
+	__?: never;
+	views: Record<ViewID, ComputedView>;
+}
+interface LayoutedLikeC4Model extends Omit<ParsedLikeC4Model, "views"> {
+	__: "layouted";
+	views: Record<ViewID, DiagramView>;
+}
+type Fqn$1 = LiteralUnion<Fqn, string>;
+type RelationID$1 = LiteralUnion<RelationID, string>;
+type ViewID$1 = LiteralUnion<ViewID, string>;
+type EdgeId$1 = LiteralUnion<EdgeId, string>;
+type IncomingFilter = "all" | "direct" | "to-descendants";
+type OutgoingFilter = "all" | "direct" | "from-descendants";
+type ElementOrFqn = Fqn$1 | {
+	id: Fqn$1;
+};
+declare class LikeC4ViewModel {
+	readonly view: ComputedView;
+	readonly model: LikeC4Model<LikeC4ViewModel>;
+	private _rootElements;
+	private _elements;
+	private _connections;
+	constructor(view: ComputedView, model: LikeC4Model<LikeC4ViewModel>);
+	get id(): ViewID;
+	get title(): string;
+	get viewOf(): LikeC4Model.ElementModel<LikeC4ViewModel>;
+	get tags(): Tag[];
+	roots(): ReadonlyArray<LikeC4ViewModel.Element>;
+	elements(): ReadonlyArray<LikeC4ViewModel.Element>;
+	element(id: Fqn$1): LikeC4ViewModel.Element;
+	hasElement(id: Fqn$1): boolean;
+	connections(): ReadonlyArray<LikeC4ViewModel.Connection>;
+	connection(id: EdgeId$1): LikeC4ViewModel.Connection;
+	findConnections(source: ElementOrFqn, target: ElementOrFqn, direction?: "both" | "direct"): ReadonlyArray<LikeC4ViewModel.Connection>;
+	parent(element: ElementOrFqn): LikeC4ViewModel.Element | null;
+	children(element: ElementOrFqn): ReadonlyArray<LikeC4ViewModel.Element>;
+	siblings(element: ElementOrFqn): ReadonlyArray<LikeC4ViewModel.Element>;
 	/**
-	 * Show/hide ReactFlow controls menu
-	 * @default false
+	 * Get all ancestor elements (i.e. parent, parent’s parent, etc.)
+	 * (from closest to root)
 	 */
-	controls?: boolean | undefined;
+	ancestors(element: ElementOrFqn): ReadonlyArray<LikeC4ViewModel.Element>;
+	descendants(element: ElementOrFqn): ReadonlyArray<LikeC4ViewModel.Element>;
+	incoming(element: ElementOrFqn, filter?: IncomingFilter): ReadonlyArray<LikeC4ViewModel.Connection>;
+	incomers(element: ElementOrFqn, filter?: IncomingFilter): ReadonlyArray<LikeC4ViewModel.Element>;
 	/**
-	 * Enable/disable panning
-	 * @default true
+	 * Outgoing relationships from the element and its descendants
 	 */
-	pannable?: boolean | undefined;
+	outgoing(element: ElementOrFqn, filter?: OutgoingFilter): ReadonlyArray<LikeC4ViewModel.Connection>;
+	outgoers(element: ElementOrFqn, filter?: OutgoingFilter): ReadonlyArray<LikeC4ViewModel.Element>;
+}
+declare namespace LikeC4ViewModel {
 	/**
-	 * Enable/disable zooming
-	 * @default true
+	 * Represents an element in the view. (Diagram node)
+	 * All methods are view-scoped, i.e. `children` returns only children of the element in the view.
 	 */
-	zoomable?: boolean | undefined;
+	class Element {
+		readonly node: ComputedNode;
+		private viewmodel;
+		constructor(node: ComputedNode, viewmodel: LikeC4ViewModel);
+		get id(): NodeId;
+		get title(): string;
+		get kind(): ElementKind;
+		get isRoot(): boolean;
+		get hasNested(): boolean;
+		get shape(): ElementShape;
+		get color(): Color;
+		get tags(): Tag[];
+		model(): LikeC4Model.ElementModel<LikeC4ViewModel>;
+		parent(): LikeC4ViewModel.Element | null;
+		metadata(key: string): string | undefined;
+		metadata(key: string, defaultValue: string): string;
+		hasMetadata(key: string): boolean;
+		ancestors(): ReadonlyArray<LikeC4ViewModel.Element>;
+		siblings(): ReadonlyArray<LikeC4ViewModel.Element>;
+		descendants(): ReadonlyArray<LikeC4ViewModel.Element>;
+		children(): ReadonlyArray<LikeC4ViewModel.Element>;
+		incoming(filter?: "all" | "direct" | "to-descendants"): ReadonlyArray<LikeC4ViewModel.Connection>;
+		incomers(filter?: "all" | "direct" | "to-descendants"): ReadonlyArray<LikeC4ViewModel.Element>;
+		outgoing(filter?: OutgoingFilter): ReadonlyArray<LikeC4ViewModel.Connection>;
+		outgoers(filter?: OutgoingFilter): ReadonlyArray<LikeC4ViewModel.Element>;
+		connectionsTo(target: Fqn$1 | LikeC4ViewModel.Element): ReadonlyArray<LikeC4ViewModel.Connection>;
+	}
 	/**
-	 * Disable any editing (dragging still can be enabled with `nodesDraggable`)
-	 * @default true
+	 * Represents a connection between two elements.
+	 * May be source from multiple model relationships.
 	 */
-	readonly?: boolean | undefined;
+	class Connection {
+		readonly edge: ComputedEdge;
+		private viewmodel;
+		constructor(edge: ComputedEdge, viewmodel: LikeC4ViewModel);
+		get id(): EdgeId;
+		get source(): LikeC4ViewModel.Element;
+		get target(): LikeC4ViewModel.Element;
+		get tags(): Tag[];
+		/**
+		 * Model relationships
+		 */
+		relationships(): ReadonlyArray<LikeC4Model.Relationship<LikeC4ViewModel>>;
+	}
+}
+type PickBySource<Source> = Source extends LikeC4Model.Layouted.SourceModel ? LikeC4Model.Layouted : Source extends LikeC4Model.Computed.SourceModel ? LikeC4Model.Computed : never;
+export declare class LikeC4Model<M extends LikeC4Model.ViewModel = LikeC4Model.ViewModel> {
+	readonly type: LikeC4Model.ModelType<M>;
+	readonly sourcemodel: LikeC4Model.SourceModel<M>;
+	private _elements;
+	private _parents;
+	private _children;
+	private _rootElements;
+	private _relations;
+	private _incoming;
+	private _outgoing;
+	private _internal;
+	private _cacheAscendingSiblings;
+	private _views;
+	static create(source: LikeC4Model.SourceModel): PickBySource<typeof source>;
+	static computed(source: ComputedLikeC4Model): LikeC4Model<LikeC4ViewModel>;
+	static layouted(source: LayoutedLikeC4Model): LikeC4Model<LikeC4DiagramModel>;
+	protected constructor(type: LikeC4Model.ModelType<M>, sourcemodel: LikeC4Model.SourceModel<M>, elements: Element$1[], relations: Relation[]);
 	/**
-	 * If set, initial viewport will show all nodes & edges
-	 * @default true
+	 * Returns the root elements of the model.
 	 */
-	fitView?: boolean | undefined;
+	roots(): ReadonlyArray<LikeC4Model.ElementModel<M>>;
 	/**
-	 * Seems like this is percentage of the view size
-	 * @default 0
+	 * Returns all elements in the model.
 	 */
-	fitViewPadding?: number | undefined;
+	elements(): ReadonlyArray<LikeC4Model.ElementModel<M>>;
 	/**
-	 * @default false if readonly
+	 * Returns a specific element by its FQN.
 	 */
-	nodesSelectable?: boolean | undefined;
+	element(id: Fqn$1): LikeC4Model.ElementModel<M>;
 	/**
-	 * @default false if readonly
+	 * Returns all relationships in the model.
 	 */
-	nodesDraggable?: boolean | undefined;
-	initialWidth?: number | undefined;
-	initialHeight?: number | undefined;
+	relationships(): ReadonlyArray<LikeC4Model.Relationship<M>>;
 	/**
-	 * Keep aspect ratio of the diagram
-	 * @default false
+	 * Returns a specific relationship by its ID.
 	 */
-	keepAspectRatio?: boolean | undefined;
+	relationship(id: RelationID$1): LikeC4Model.Relationship<M>;
 	/**
-	 * Background pattern
-	 * @default 'dots'
+	 * Returns all views in the model.
 	 */
-	background?: "transparent" | "solid" | XYBackground | undefined;
+	views(): ReadonlyArray<M>;
 	/**
-	 * Display hovercards with element links
-	 * @default true
+	 * Returns a specific view by its ID.
 	 */
-	showElementLinks?: boolean | undefined;
+	view(viewId: ViewID$1): M;
 	/**
-	 * Display panel with diagram title / description
-	 * @default true
+	 * Returns the parent element of given element.
+	 * @see ancestors
 	 */
-	showDiagramTitle?: boolean | undefined;
+	parent(element: ElementOrFqn): LikeC4Model.ElementModel<M> | null;
 	/**
-	 * Show back/forward navigation buttons
-	 * @default true if `onNavigateTo` is set
+	 * Get all children of the element (only direct children),
+	 * @see descendants
 	 */
-	showNavigationButtons?: undefined | boolean;
+	children(element: ElementOrFqn): ReadonlyArray<LikeC4Model.ElementModel<M>>;
 	/**
-	 * Display notations of the view
-	 * @default true
+	 * Get all sibling (i.e. same parent)
 	 */
-	showNotations?: boolean | undefined;
+	siblings(element: ElementOrFqn): ReadonlyArray<LikeC4Model.ElementModel<M>>;
 	/**
-	 * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
-	 * @default true
+	 * Get all ancestor elements (i.e. parent, parent’s parent, etc.)
+	 * (from closest to root)
 	 */
-	enableFocusMode?: boolean | undefined;
+	ancestors(element: ElementOrFqn): ReadonlyArray<LikeC4Model.ElementModel<M>>;
 	/**
-	 * If Walkthrough for dynamic views should be enabled
-	 * @default false
+	 * Get all descendant elements (i.e. children, children’s children, etc.)
 	 */
-	enableDynamicViewWalkthrough?: boolean | undefined;
+	descendants(element: ElementOrFqn): ReadonlyArray<LikeC4Model.ElementModel<M>>;
 	/**
-	 * Experimental feature to enable edge editing
-	 * @default false
+	 * Incoming relationships to the element and its descendants
+	 * @see incomers
 	 */
-	experimentalEdgeEditing?: boolean | undefined;
+	incoming(element: ElementOrFqn, filter?: IncomingFilter): ReadonlyArray<LikeC4Model.Relationship<M>>;
 	/**
-	 * Render icon for an element, bundled or remote
-	 * By default, if icon is http:// or https://, it will be rendered as an image
+	 * Source elements of incoming relationships
 	 */
-	renderIcon?: ElementIconRenderer$1 | undefined;
+	incomers(element: ElementOrFqn, filter?: IncomingFilter): ReadonlyArray<LikeC4Model.ElementModel<M>>;
 	/**
-	 * Dynamic filter, applies both to nodes and edges
+	 * Outgoing relationships from the element and its descendants
+	 * @see outgoers
 	 */
-	where?: WhereOperator<string, string> | undefined;
+	outgoing(element: ElementOrFqn, filter?: OutgoingFilter): ReadonlyArray<LikeC4Model.Relationship<M>>;
+	/**
+	 * Target elements of outgoing relationships
+	 */
+	outgoers(element: ElementOrFqn, filter?: OutgoingFilter): ReadonlyArray<LikeC4Model.ElementModel<M>>;
+	/**
+	 * Relationships inside the element, among descendants
+	 */
+	internal(element: ElementOrFqn): ReadonlyArray<LikeC4Model.Relationship<M>>;
+	/**
+	 * Resolve siblings of the element and siblings of ancestors
+	 *  (from closest to root)
+	 */
+	ascendingSiblings(element: ElementOrFqn): ReadonlyArray<LikeC4Model.ElementModel<M>>;
+	/**
+	 * Resolve all views that contain the element
+	 */
+	viewsWithElement(element: ElementOrFqn): ReadonlyArray<M>;
+	private addElement;
+	private addRelation;
+	private _childrenOf;
+	private _incomingTo;
+	private _outgoingFrom;
+	private _internalOf;
 }
-interface Link {
-	readonly title?: string;
-	readonly url: string;
-	readonly relative?: string;
+export declare namespace LikeC4Model {
+	function isModel(model: any): model is LikeC4Model;
+	type SourceModel<M extends ViewModel = ViewModel> = M extends LikeC4DiagramModel ? LayoutedLikeC4Model : ComputedLikeC4Model;
+	type ViewModel = LikeC4ViewModel | LikeC4DiagramModel;
+	namespace ViewModel {
+		type Relationship = LikeC4Model.Relationship<ViewModel>;
+		function isLayouted(model: ViewModel): model is LikeC4DiagramModel;
+	}
+	type Computed = LikeC4Model<LikeC4ViewModel>;
+	namespace Computed {
+		type ViewModel = LikeC4ViewModel;
+		type SourceModel = LikeC4Model.SourceModel<ViewModel>;
+	}
+	type Layouted = LikeC4Model<LikeC4DiagramModel>;
+	namespace Layouted {
+		type ViewModel = LikeC4DiagramModel;
+		type SourceModel = LikeC4Model.SourceModel<ViewModel>;
+	}
+	type ModelType<M extends ViewModel = ViewModel> = M extends LikeC4DiagramModel ? "layouted" : M extends LikeC4ViewModel ? "computed" : never;
+	function isLayouted(model: LikeC4Model): model is Layouted;
+	class Relationship<M extends ViewModel> {
+		readonly relationship: Relation;
+		private model;
+		constructor(relationship: Relation, model: LikeC4Model<M>);
+		get id(): RelationID;
+		get title(): string;
+		get kind(): RelationshipKind;
+		get tags(): Tag[];
+		get source(): ElementModel<M>;
+		get target(): ElementModel<M>;
+		metadata(key: string): string | undefined;
+		metadata(key: string, defaultValue: string): string;
+		hasMetadata(key: string): boolean;
+	}
+	class ElementModel<M extends ViewModel> {
+		readonly element: Element$1;
+		private model;
+		constructor(element: Element$1, model: LikeC4Model<M>);
+		get id(): Fqn;
+		get title(): string;
+		get kind(): ElementKind;
+		get isRoot(): boolean;
+		get hasNested(): boolean;
+		get shape(): ElementShape;
+		get color(): Color;
+		get tags(): Tag[];
+		parent(): ElementModel<M> | null;
+		metadata(key: string): string | undefined;
+		metadata(key: string, defaultValue: string): string;
+		hasMetadata(key: string): boolean;
+		ancestors(): readonly ElementModel<M>[];
+		siblings(): readonly ElementModel<M>[];
+		descendants(): readonly ElementModel<M>[];
+		children(): readonly ElementModel<M>[];
+		/**
+		 * Views that contain this element
+		 */
+		views(): readonly M[];
+		incoming(filter?: IncomingFilter): readonly Relationship<M>[];
+		incomers(filter?: IncomingFilter): readonly ElementModel<M>[];
+		outgoing(filter?: OutgoingFilter): readonly Relationship<M>[];
+		outgoers(filter?: OutgoingFilter): readonly ElementModel<M>[];
+		internal(): readonly Relationship<M>[];
+	}
 }
-interface MantineGradient {
-	from: string;
-	to: string;
-	deg?: number;
+declare class LikeC4DiagramModel {
+	readonly view: DiagramView;
+	readonly model: LikeC4Model.Layouted;
+	private _rootElements;
+	private _elements;
+	private _connections;
+	constructor(view: DiagramView, model: LikeC4Model.Layouted);
+	get isDynamic(): boolean;
+	get id(): ViewID;
+	get title(): string;
+	get viewOf(): LikeC4Model.ElementModel<LikeC4DiagramModel>;
+	get tags(): Tag[];
+	roots(): ReadonlyArray<LikeC4DiagramModel.Element>;
+	elements(): ReadonlyArray<LikeC4DiagramModel.Element>;
+	element(id: Fqn$1): LikeC4DiagramModel.Element;
+	hasElement(id: Fqn$1): boolean;
+	connections(): ReadonlyArray<LikeC4DiagramModel.Connection>;
+	connection(id: EdgeId$1): LikeC4DiagramModel.Connection;
+	findConnections(source: ElementOrFqn, target: ElementOrFqn, direction?: "both" | "direct"): ReadonlyArray<LikeC4DiagramModel.Connection>;
+	parent(element: ElementOrFqn): LikeC4DiagramModel.Element | null;
+	children(element: ElementOrFqn): ReadonlyArray<LikeC4DiagramModel.Element>;
+	siblings(element: ElementOrFqn): ReadonlyArray<LikeC4DiagramModel.Element>;
+	/**
+	 * Get all ancestor elements (i.e. parent, parent’s parent, etc.)
+	 * (from closest to root)
+	 */
+	ancestors(element: ElementOrFqn): ReadonlyArray<LikeC4DiagramModel.Element>;
+	descendants(element: ElementOrFqn): ReadonlyArray<LikeC4DiagramModel.Element>;
+	incoming(element: ElementOrFqn, filter?: IncomingFilter): ReadonlyArray<LikeC4DiagramModel.Connection>;
+	incomers(element: ElementOrFqn, filter?: IncomingFilter): ReadonlyArray<LikeC4DiagramModel.Element>;
+	/**
+	 * Outgoing relationships from the element and its descendants
+	 */
+	outgoing(element: ElementOrFqn, filter?: OutgoingFilter): ReadonlyArray<LikeC4DiagramModel.Connection>;
+	outgoers(element: ElementOrFqn, filter?: OutgoingFilter): ReadonlyArray<LikeC4DiagramModel.Element>;
 }
-interface MantinePrimaryShade {
-	light: MantineColorShade;
-	dark: MantineColorShade;
+declare namespace LikeC4DiagramModel {
+	/**
+	 * Represents an element in the view. (Diagram node)
+	 * All methods are view-scoped, i.e. `children` returns only children of the element in the view.
+	 */
+	class Element {
+		readonly node: DiagramNode;
+		private view;
+		constructor(node: DiagramNode, view: LikeC4DiagramModel);
+		get id(): NodeId;
+		get title(): string;
+		get kind(): ElementKind;
+		get isRoot(): boolean;
+		get hasNested(): boolean;
+		get shape(): ElementShape;
+		get color(): Color;
+		get tags(): Tag[];
+		get level(): number;
+		get depth(): number;
+		model(): LikeC4Model.ElementModel<LikeC4DiagramModel>;
+		parent(): LikeC4DiagramModel.Element | null;
+		metadata(key: string): string | undefined;
+		metadata(key: string, defaultValue: string): string;
+		hasMetadata(key: string): boolean;
+		ancestors(): ReadonlyArray<LikeC4DiagramModel.Element>;
+		siblings(): ReadonlyArray<LikeC4DiagramModel.Element>;
+		descendants(): ReadonlyArray<LikeC4DiagramModel.Element>;
+		children(): ReadonlyArray<LikeC4DiagramModel.Element>;
+		incoming(filter?: IncomingFilter): ReadonlyArray<LikeC4DiagramModel.Connection>;
+		incomers(filter?: IncomingFilter): ReadonlyArray<LikeC4DiagramModel.Element>;
+		outgoing(filter?: OutgoingFilter): ReadonlyArray<LikeC4DiagramModel.Connection>;
+		outgoers(filter?: OutgoingFilter): ReadonlyArray<LikeC4DiagramModel.Element>;
+		connectionsTo(target: Fqn$1 | LikeC4DiagramModel.Element): ReadonlyArray<LikeC4DiagramModel.Connection>;
+	}
+	/**
+	 * Represents a connection between two elements.
+	 * May be source from multiple model relationships.
+	 */
+	class Connection {
+		readonly edge: DiagramEdge;
+		private view;
+		constructor(edge: DiagramEdge, view: LikeC4DiagramModel);
+		get id(): EdgeId;
+		get source(): LikeC4DiagramModel.Element;
+		get target(): LikeC4DiagramModel.Element;
+		get tags(): Tag[];
+		get color(): Color;
+		/**
+		 * Model relationships
+		 */
+		relationships(): ReadonlyArray<LikeC4Model.Relationship<LikeC4DiagramModel>>;
+	}
+}
+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: AutoLayoutDirection;
+	}
+}
+type ViewChange = ViewChange.ChangeElementStyle | ViewChange.SaveManualLayout | ViewChange.ChangeAutoLayout;
+interface VariantColorsResolverInput {
+	color: MantineColor | undefined;
+	theme: MantineTheme;
+	variant: string;
+	gradient?: MantineGradient;
+	autoContrast?: boolean;
+}
+interface VariantColorResolverResult {
+	background: string;
+	hover: string;
+	color: string;
+	border: string;
+	hoverColor?: string;
 }
+type VariantColorsResolver = (input: VariantColorsResolverInput) => VariantColorResolverResult;
 interface MantineTheme {
 	/** Controls focus ring styles. Supports the following options:
 	 *  - `auto` – focus ring is displayed only when the user navigates with keyboard (default value)
@@ -719,111 +1014,243 @@ interface MantineTheme {
 	/** Any other properties that you want to access with the theme objects */
 	other: MantineThemeOther;
 }
-interface MantineThemeColorsOverride {
-}
+type MantineThemeOverride = PartialDeep<MantineTheme>;
 interface MantineThemeComponent {
 	classNames?: any;
 	styles?: any;
 	vars?: any;
 	defaultProps?: any;
 }
+type MantineThemeComponents = Record<string, MantineThemeComponent>;
+interface HeadingStyle {
+	fontSize: string;
+	fontWeight?: string;
+	lineHeight: string;
+}
+type MantineSize = "xs" | "sm" | "md" | "lg" | "xl";
+type MantineBreakpointsValues = Record<MantineSize | (string & {}), string>;
+type MantineFontSizesValues = Record<MantineSize | (string & {}), string>;
+type MantineRadiusValues = Record<MantineSize | (string & {}), string>;
+type MantineSpacingValues = Record<MantineSize | (string & {}), string>;
+type MantineShadowsValues = Record<MantineSize | (string & {}), string>;
+type MantineLineHeightValues = Record<MantineSize | (string & {}), string>;
+type MantineRadius = keyof MantineRadiusValues | (string & {}) | number;
 interface MantineThemeOther {
 	[key: string]: any;
 }
-interface OutgoingExpr extends Omit<BaseExpr, "outgoing"> {
-	outgoing: ElementExpression;
-}
-interface RelationExpr extends Omit<BaseExpr, "source" | "target"> {
-	source: ElementExpression;
-	target: ElementExpression;
-	isBidirectional?: boolean;
-}
-interface RelationWhereExpr extends Omit<BaseExpr, "where"> {
-	where: {
-		expr: RelationExpression;
-		condition: WhereOperator<string, string>;
-	};
-}
-interface RelationshipThemeColorValues {
-	lineColor: ColorLiteral;
-	labelBgColor: ColorLiteral;
-	labelColor: ColorLiteral;
-}
-interface ScopedElementView extends BasicElementView {
-	readonly viewOf: Fqn;
-}
-interface ThemeColorValues {
-	elements: ElementThemeColorValues;
-	relationships: RelationshipThemeColorValues;
-}
-interface VariantColorResolverResult {
-	background: string;
-	hover: string;
-	color: string;
-	border: string;
-	hoverColor?: string;
+interface MantineGradient {
+	from: string;
+	to: string;
+	deg?: number;
 }
-interface VariantColorsResolverInput {
-	color: MantineColor | undefined;
-	theme: MantineTheme;
-	variant: string;
-	gradient?: MantineGradient;
-	autoContrast?: boolean;
+type MantineColorsTuple = readonly [
+	string,
+	string,
+	string,
+	string,
+	string,
+	string,
+	string,
+	string,
+	string,
+	string,
+	...string[]
+];
+type MantineColorShade = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+interface MantinePrimaryShade {
+	light: MantineColorShade;
+	dark: MantineColorShade;
 }
-interface ViewRuleAutoLayout {
-	autoLayout: AutoLayoutDirection;
+type DefaultMantineColor = "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "green" | "lime" | "yellow" | "orange" | "teal" | (string & {});
+interface MantineThemeColorsOverride {
 }
-interface ViewRuleStyle {
-	targets: ElementExpression[];
-	notation?: string;
-	style: ElementStyle & {
-		color?: Color;
-		shape?: ElementShape;
-		icon?: IconUrl;
+type MantineThemeColors = MantineThemeColorsOverride extends {
+	colors: Record<infer CustomColors, MantineColorsTuple>;
+} ? Record<CustomColors, MantineColorsTuple> : Record<DefaultMantineColor, MantineColorsTuple>;
+type MantineColor = keyof MantineThemeColors;
+export type ViewData<ViewId extends string> = Omit<DiagramView, "id"> & {
+	id: ViewId;
+};
+type ElementIconRendererProps = {
+	node: {
+		id: string;
+		title: string;
+		icon?: string | undefined;
 	};
-}
-interface ViewWithHash {
+};
+export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
+export type LikeC4ViewProps<ViewId extends string, Tag extends string, Kind extends string> = {
 	/**
-	 * Hash of the view object.
-	 * This is used to detect changes in layout
+	 * View to display.
 	 */
-	hash: string;
-}
-interface ViewWithNotation {
-	notation?: {
-		elements: ElementNotation[];
-	};
-}
-interface WildcardExpr extends Omit<BaseExpr, "wildcard"> {
-	wildcard: true;
-}
-interface XYPoint {
-	x: number;
-	y: number;
-}
-type AllNever = {
-	not?: never;
-	and?: never;
-	or?: never;
-	tag?: never;
-	kind?: never;
-};
-type AndOperator<Tag, Kind> = Omit<AllNever, "and"> & {
-	and: NonEmptyArray<WhereOperator<Tag, Kind>>;
-};
-type AutoLayoutDirection = "TB" | "BT" | "LR" | "RL";
-type BBox = {
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-};
-type BackgroundProps = {
-	id?: string;
-	/** Color of the pattern */
-	color?: string;
-	/** Color of the background */
-	bgColor?: string;
+	viewId: ViewId;
+	/**
+	 * Background pattern
+	 * @default 'transparent'
+	 */
+	background?: "dots" | "lines" | "cross" | "transparent" | "solid" | undefined;
+	/**
+	 * Background pattern for the browser view.
+	 * @default 'dots'
+	 */
+	browserBackground?: "dots" | "lines" | "cross" | "transparent" | "solid" | undefined;
+	/**
+	 * Click on the view opens a modal with browser.
+	 *
+	 * @default true
+	 */
+	interactive?: boolean;
+	/**
+	 * 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;
+	/**
+	 * Display hovercards with element links
+	 * @default true
+	 */
+	showElementLinks?: boolean | undefined;
+	/**
+	 * Display webview with 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;
+	/**
+	 * Display dropdown with details on relationship's label click
+	 * @default false
+	 */
+	showRelationshipDetails?: boolean | undefined;
+	/**
+	 * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+	 * Conflicts with `interactive`
+	 *
+	 * @default false
+	 */
+	enableFocusMode?: boolean | undefined;
+	where?: WhereOperator<Tag, Kind> | undefined;
+	className?: string | undefined;
+	style?: CSSProperties | undefined;
+	browserClassName?: string | undefined;
+	browserStyle?: CSSProperties | undefined;
+	mantineTheme?: MantineThemeOverride | undefined;
+};
+export type LikeC4BrowserProps<ViewId extends string, Tag extends string, Kind extends string> = Pick<HTMLAttributes<HTMLDialogElement>, "style" | "className"> & {
+	view: ViewData<ViewId>;
+	/**
+	 * By default determined by the user's system preferences.
+	 */
+	colorScheme?: "light" | "dark";
+	/**
+	 * 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;
+	/**
+	 * Background pattern
+	 * @default 'dots'
+	 */
+	background?: "dots" | "lines" | "cross" | "transparent" | "solid" | undefined;
+	onNavigateTo: (to: ViewId) => void;
+	onClose: () => void;
+	/**
+	 * Render custom icon for a node
+	 * By default, if icon is http:// or https://, it will be rendered as an image
+	 */
+	renderIcon?: ElementIconRenderer | undefined;
+	where?: WhereOperator<Tag, Kind> | undefined;
+	mantineTheme?: MantineThemeOverride | undefined;
+};
+export declare function LikeC4Browser<ViewId extends string = string, Tag extends string = string, Kind extends string = string>({ className, colorScheme, view, injectFontCss, onNavigateTo, onClose, renderIcon, where, style, mantineTheme, background }: LikeC4BrowserProps<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
+export type LikeC4ViewEmbeddedProps<ViewId extends string, Tag extends string, Kind extends string> = Pick<HTMLAttributes<HTMLDivElement>, "style" | "className"> & {
+	view: ViewData<ViewId>;
+	/**
+	 * By default determined by the user's system preferences.
+	 */
+	colorScheme?: "light" | "dark";
+	/**
+	 * 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;
+	/**
+	 * Background pattern
+	 * @default 'transparent'
+	 */
+	background?: "dots" | "lines" | "cross" | "transparent" | "solid" | undefined;
+	onNavigateTo?: ((to: ViewId) => void) | 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;
+	/**
+	 * Display hovercards with element links
+	 * @default true
+	 */
+	showElementLinks?: boolean | undefined;
+	/**
+	 * Display webview with 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;
+	/**
+	 * Display dropdown with details on relationship's label click
+	 * @default false
+	 */
+	showRelationshipDetails?: boolean | undefined;
+	/**
+	 * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+	 * @default false
+	 */
+	enableFocusMode?: boolean | undefined;
+	where?: WhereOperator<Tag, Kind> | undefined;
+	mantineTheme?: MantineThemeOverride | undefined;
+};
+export declare function LikeC4ViewEmbedded<ViewId extends string = string, Tag extends string = string, Kind extends string = string>({ onNavigateTo: _onNavigateTo, className, view, injectFontCss, colorScheme, background, renderIcon, showDiagramTitle, showElementLinks, showNavigationButtons, enableFocusMode, showNotations, showRelationshipDetails, mantineTheme, where, style }: LikeC4ViewEmbeddedProps<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
+declare enum BackgroundVariant {
+	Lines = "lines",
+	Dots = "dots",
+	Cross = "cross"
+}
+type BackgroundProps = {
+	id?: string;
+	/** Color of the pattern */
+	color?: string;
+	/** Color of the background */
+	bgColor?: string;
 	/** Class applied to the container */
 	className?: string;
 	/** Class applied to the pattern */
@@ -850,215 +1277,441 @@ type BackgroundProps = {
 	/** Style applied to the container */
 	style?: CSSProperties;
 };
-type BorderStyle = typeof BorderStyles[number];
-type BuiltIns = Primitive | void | Date | RegExp;
-type ChangeEvent = {
-	change: ViewChange;
-};
-type Color = LiteralUnion<ThemeColor, string>;
-type ColorLiteral = HexColorLiteral;
-type ColorScheme = "light" | "dark";
-type ComputedView = ComputedElementView | ComputedDynamicView;
-type CustomColorDefinitions = {
-	[key: string]: ThemeColorValues;
-};
-type DefaultMantineColor = "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "green" | "lime" | "yellow" | "orange" | "teal" | (string & {});
+type XYBackgroundVariant = "dots" | "lines" | "cross";
+type XYBackground = XYBackgroundVariant | OverrideProperties<BackgroundProps, {
+	variant: XYBackgroundVariant;
+}>;
 type DiagramNodeWithNavigate<ID extends string = ViewID> = Omit<DiagramNode, "navigateTo"> & {
 	navigateTo: ID;
 };
-type DynamicViewIncludeRule = {
-	include: ElementPredicateExpression[];
-};
-type DynamicViewRule = DynamicViewIncludeRule | ViewRuleStyle | ViewRuleAutoLayout;
-type DynamicViewStepOrParallel = DynamicViewStep | DynamicViewParallelSteps;
-type EdgeId = Tagged<string, "EdgeId">;
-type ElementExpression = ElementRefExpr | WildcardExpr | ElementKindExpr | ElementTagExpr | ExpandedElementExpr;
 type ElementIconNodeProps = {
 	id: string;
 	title: string;
 	icon?: string | undefined;
 };
-type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
 type ElementIconRenderer$1 = (props: {
 	node: ElementIconNodeProps;
 }) => ReactNode;
-type ElementIconRendererProps = {
-	node: {
-		id: string;
-		title: string;
-		icon?: string | undefined;
-	};
-};
-type ElementKind = Tagged<string, "ElementKind">;
-type ElementNotation = {
-	kinds: ElementKind[];
-	shape: ElementShape;
-	color: Color;
-	title: string;
-};
-type ElementPredicateExpression = ElementExpression | ElementWhereExpr | CustomElementExpr;
-type ElementShape = typeof ElementShapes[number];
-type ElementView = ScopedElementView | ExtendsElementView | BasicElementView;
-type EqualOperator<V> = {
-	eq: V;
-	neq?: never;
-} | {
-	eq?: never;
-	neq: V;
-};
-type Expression = ElementPredicateExpression | RelationPredicateExpression;
-type Fqn = Tagged<string, "Fqn">;
-type HexColorLiteral = `#${string}`;
-type IconUrl = Tagged<string, "IconUrl">;
-type KindEqual<Kind> = Omit<AllNever, "kind"> & {
-	kind: EqualOperator<Kind>;
-};
-type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers;
-type LiteralUnion<LiteralType, BaseType extends Primitive> = LiteralType | (BaseType & Record<never, never>);
-type MantineBreakpointsValues = Record<MantineSize | (string & {}), string>;
-type MantineColor = keyof MantineThemeColors;
-type MantineColorShade = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
-type MantineColorsTuple = readonly [
-	string,
-	string,
-	string,
-	string,
-	string,
-	string,
-	string,
-	string,
-	string,
-	string,
-	...string[]
-];
-type MantineFontSizesValues = Record<MantineSize | (string & {}), string>;
-type MantineLineHeightValues = Record<MantineSize | (string & {}), string>;
-type MantineRadius = keyof MantineRadiusValues | (string & {}) | number;
-type MantineRadiusValues = Record<MantineSize | (string & {}), string>;
-type MantineShadowsValues = Record<MantineSize | (string & {}), string>;
-type MantineSize = "xs" | "sm" | "md" | "lg" | "xl";
-type MantineSpacingValues = Record<MantineSize | (string & {}), string>;
-type MantineThemeColors = MantineThemeColorsOverride extends {
-	colors: Record<infer CustomColors, MantineColorsTuple>;
-} ? Record<CustomColors, MantineColorsTuple> : Record<DefaultMantineColor, MantineColorsTuple>;
-type MantineThemeComponents = Record<string, MantineThemeComponent>;
-type MantineThemeOverride = PartialDeep<MantineTheme>;
-type Merge<Destination, Source> = Simplify<SimpleMerge<PickIndexSignature<Destination>, PickIndexSignature<Source>> & SimpleMerge<OmitIndexSignature<Destination>, OmitIndexSignature<Source>>>;
-type NodeId = Tagged<string, "Fqn">;
-type NonEmptyArray<T> = [
-	T,
-	...T[]
-];
-type NotOperator<Tag, Kind> = Omit<AllNever, "not"> & {
-	not: WhereOperator<Tag, Kind>;
-};
-type OmitIndexSignature<ObjectType> = {
-	[KeyType in keyof ObjectType as {} extends Record<KeyType, unknown> ? never : KeyType]: ObjectType[KeyType];
-};
-type OnCanvasClick = (event: ReactMouseEvent) => void;
-type OnChange = (event: ChangeEvent) => void;
-type OnEdgeClick = (edge: DiagramEdge, event: ReactMouseEvent) => void;
 type OnNavigateTo<ID extends string = ViewID> = (to: ID, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<ID>) => void;
 type OnNodeClick = (node: DiagramNode, event: ReactMouseEvent) => void;
-type OrOperator<Tag, Kind> = Omit<AllNever, "or"> & {
-	or: NonEmptyArray<WhereOperator<Tag, Kind>>;
-};
-type OverrideProperties<TOriginal, 
-// This first bit where we use `Partial` is to enable autocomplete
-// and the second bit with the mapped type is what enforces that we don't try
-// to override properties that doesn't exist in the original type.
-TOverride extends Partial<Record<keyof TOriginal, unknown>> & {
-	[Key in keyof TOverride]: Key extends keyof TOriginal ? TOverride[Key] : never;
-}> = Merge<TOriginal, TOverride>;
-type PartialDeep<T, Options extends PartialDeepOptions = {}> = T extends BuiltIns | (((...arguments_: any[]) => unknown)) | (new (...arguments_: any[]) => unknown) ? T : T extends Map<infer KeyType, infer ValueType> ? PartialMapDeep<KeyType, ValueType, Options> : T extends Set<infer ItemType> ? PartialSetDeep<ItemType, Options> : T extends ReadonlyMap<infer KeyType, infer ValueType> ? PartialReadonlyMapDeep<KeyType, ValueType, Options> : T extends ReadonlySet<infer ItemType> ? PartialReadonlySetDeep<ItemType, Options> : T extends object ? T extends ReadonlyArray<infer ItemType> // Test for arrays/tuples, per https://github.com/microsoft/TypeScript/issues/35156
- ? Options["recurseIntoArrays"] extends true ? ItemType[] extends T // Test for arrays (non-tuples) specifically
- ? readonly ItemType[] extends T // Differentiate readonly and mutable arrays
- ? ReadonlyArray<PartialDeep<ItemType | undefined, Options>> : Array<PartialDeep<ItemType | undefined, Options>> : PartialObjectDeep<T, Options> // Tuples behave properly
- : T // If they don't opt into array testing, just use the original type
- : PartialObjectDeep<T, Options> : unknown;
-type PartialDeepOptions = {
-	/**
-	Whether to affect the individual elements of arrays and tuples.
-
-	@default false
-	*/
-	readonly recurseIntoArrays?: boolean;
-};
-type PartialMapDeep<KeyType, ValueType, Options extends PartialDeepOptions> = {} & Map<PartialDeep<KeyType, Options>, PartialDeep<ValueType, Options>>;
-type PartialObjectDeep<ObjectType extends object, Options extends PartialDeepOptions> = {
-	[KeyType in keyof ObjectType]?: PartialDeep<ObjectType[KeyType], Options>;
-};
-type PartialReadonlyMapDeep<KeyType, ValueType, Options extends PartialDeepOptions> = {} & ReadonlyMap<PartialDeep<KeyType, Options>, PartialDeep<ValueType, Options>>;
-type PartialReadonlySetDeep<T, Options extends PartialDeepOptions> = {} & ReadonlySet<PartialDeep<T, Options>>;
-type PartialSetDeep<T, Options extends PartialDeepOptions> = {} & Set<PartialDeep<T, Options>>;
-type PickIndexSignature<ObjectType> = {
-	[KeyType in keyof ObjectType as {} extends Record<KeyType, unknown> ? KeyType : never]: ObjectType[KeyType];
+type OnEdgeClick = (edge: DiagramEdge, event: ReactMouseEvent) => void;
+type OnCanvasClick = (event: ReactMouseEvent) => void;
+type ChangeEvent = {
+	change: ViewChange;
 };
-type Point = readonly [
-	x: number,
-	y: number
-];
-type Primitive = null | undefined | string | number | boolean | symbol | bigint;
-type RelationExpression = RelationExpr | InOutExpr | IncomingExpr | OutgoingExpr;
-type RelationID = Tagged<string, "RelationID">;
-type RelationPredicateExpression = RelationExpression | RelationWhereExpr | CustomRelationExpr;
-type RelationshipArrowType = "none" | "normal" | "onormal" | "dot" | "odot" | "diamond" | "odiamond" | "crow" | "open" | "vee";
-type RelationshipKind = Tagged<string, "RelationshipKind">;
-type RelationshipLineType = "dashed" | "solid" | "dotted";
-type SimpleMerge<Destination, Source> = {
-	[Key in keyof Destination as Key extends keyof Source ? never : Key]: Destination[Key];
-} & Source;
-type Simplify<T> = {
-	[KeyType in keyof T]: T[KeyType];
-} & {};
-type Tag$1 = Tagged<string, "Tag">;
-type Tag<Token extends PropertyKey, TagMetadata> = TagContainer<{
-	[K in Token]: TagMetadata;
-}>;
-type TagContainer<Token> = {
-	readonly [tag]: Token;
+type OnChange = (event: ChangeEvent) => void;
+interface LikeC4DiagramProperties {
+	view: DiagramView;
+	className?: string | undefined;
+	/**
+	 * Show/hide ReactFlow controls menu
+	 * @default false
+	 */
+	controls?: boolean | 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;
+	/**
+	 * 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;
+	/**
+	 * Keep aspect ratio of the diagram
+	 * @default false
+	 */
+	keepAspectRatio?: boolean | undefined;
+	/**
+	 * Background pattern
+	 * @default 'dots'
+	 */
+	background?: "transparent" | "solid" | XYBackground | undefined;
+	/**
+	 * Display hovercards with element links
+	 * @default true
+	 */
+	showElementLinks?: boolean | undefined;
+	/**
+	 * Display webview with diagram title / description
+	 * @default true
+	 */
+	showDiagramTitle?: boolean | undefined;
+	/**
+	 * Show back/forward 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 true
+	 */
+	showRelationshipDetails?: boolean | undefined;
+	/**
+	 * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+	 * @default true
+	 */
+	enableFocusMode?: 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;
+	/**
+	 * 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$1 | undefined;
+	/**
+	 * Dynamic filter, applies both to nodes and edges
+	 */
+	where?: WhereOperator<string, string> | undefined;
+}
+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);
+	onOpenSourceView?: null | undefined | (() => void);
+	onOpenSourceElement?: null | undefined | ((fqn: Fqn) => void);
+	onOpenSourceRelation?: null | undefined | ((id: RelationID) => void);
+}
+type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers;
+export declare function useLikeC4Model(): LikeC4Model | null;
+export declare function useLikeC4Model(strict: true): LikeC4Model;
+export declare function useLikeC4Model(strict: boolean): LikeC4Model | null;
+export declare function useLikeC4Model(strict: true, type: "layouted"): LikeC4Model.Layouted;
+export declare function useLikeC4Model(strict: true, type: "computed"): LikeC4Model.Computed;
+export declare function useLikeC4Model(strict: true, type: LikeC4Model["type"] | undefined): LikeC4Model;
+export declare function useLikeC4Model(strict: boolean, type: "layouted"): LikeC4Model.Layouted | null;
+export declare function useLikeC4Model(strict: boolean, type: "computed"): LikeC4Model.Computed | null;
+export declare function useLikeC4Model(strict: boolean, type: LikeC4Model["type"] | undefined): LikeC4Model | null;
+export declare function useLikeC4Views(): LikeC4Model.SourceModel["views"];
+export declare function useLikeC4ViewModel(viewId: LiteralUnion<ViewID, string>): LikeC4Model.ViewModel;
+export declare function useLikeC4View(viewId: LiteralUnion<ViewID, string>): ComputedView | DiagramView | null;
+export declare function useLikeC4DiagramView(viewId: LiteralUnion<ViewID, string>): DiagramView | null;
+type LikeC4ModelProviderProps = PropsWithChildren<RequireExactlyOne<{
+	likec4model: LikeC4Model;
+	layouted: LikeC4Model.Layouted.SourceModel;
+	computed: LikeC4Model.Computed.SourceModel;
+}>>;
+/**
+ * Ensures LikeC4Model context
+ */
+export declare function LikeC4ModelProvider({ children, ...props }: LikeC4ModelProviderProps): import("react/jsx-runtime").JSX.Element;
+export type ReactLikeC4Props<ViewId extends string, Tag extends string, Kind extends string> = Omit<LikeC4DiagramProps, "view" | "where" | "onNavigateTo"> & {
+	view: ViewData<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?: MantineThemeOverride | undefined;
 };
-type TagEqual<Tag> = Omit<AllNever, "tag"> & {
-	tag: EqualOperator<Tag>;
+export declare function ReactLikeC4<ViewId extends string = string, Tag extends string = string, Kind extends string = string>({ className, view, colorScheme: explicitColorScheme, injectFontCss, keepAspectRatio, showNotations, onNavigateTo, background, style, mantineTheme, ...props }: ReactLikeC4Props<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ReactLikeC4 {
+	var displayName: string;
+}
+type AllKeys<T> = T extends any ? keyof T : never;
+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.
+	 *
+	 * 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 any> extends WritableAtom<Value> {
+	readonly value: Value;
+}
+declare function atom<Value, StoreExt = {}>(...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 Tagged<Type, TagName extends PropertyKey, TagMetadata = never> = Type & Tag<TagName, TagMetadata>;
-type ThemeColor = typeof ThemeColors[number];
-type VariantColorsResolver = (input: VariantColorsResolverInput) => VariantColorResolverResult;
-type ViewChange = ViewChange.ChangeElementStyle | ViewChange.SaveManualLayout | ViewChange.ChangeAutoLayout;
-type ViewID = Tagged<string, "ViewID">;
-type ViewManualLayout = {
-	readonly hash: string;
-	readonly x: number;
-	readonly y: number;
-	readonly width: number;
-	readonly height: number;
-	readonly autoLayout: AutoLayoutDirection;
-	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 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 = {}>(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]>;
 };
-type ViewRule = ViewRulePredicate | ViewRuleStyle | ViewRuleAutoLayout;
-type ViewRulePredicate = {
-	include: Expression[];
-	exclude?: never;
-} | {
-	include?: never;
-	exclude: Expression[];
+interface Computed {
+	<Value extends any, OriginStore extends Store>(stores: OriginStore, cb: (value: StoreValue<OriginStore>) => Task<Value>): ReadableAtom<undefined | Value>;
+	<Value extends any, OriginStores extends AnyStore[]>(stores: [
+		...OriginStores
+	], cb: (...values: StoreValues<OriginStores>) => Task<Value>): ReadableAtom<undefined | Value>;
+	<Value extends any, 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 extends any, 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> {
+	/**
+	 * 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 DefaultTheme: MantineThemeOverride;
+export declare const BundledStyles: () => any;
+export declare function useBundledStyleSheet(injectFontCss?: boolean): CSSStyleSheet[];
+type ColorScheme = "light" | "dark";
+export declare function useColorScheme(explicit?: ColorScheme): ColorScheme;
+/**
+ * We need this function to bundle LikeC4Model with `likec4/react'
+ * Used by vite plugin to generate `virtual:likec4/model`
+ */
+export declare function createLikeC4Model(model: LayoutedLikeC4Model): LikeC4Model.Layouted;
+
+declare namespace nano {
+	export { atom, computed, map, useStore };
+}
+
+export {
+	nano,
 };
-type WhereOperator<Tag, Kind> = TagEqual<Tag> | KindEqual<Kind> | NotOperator<Tag, Kind> | AndOperator<Tag, Kind> | OrOperator<Tag, Kind>;
-type XYBackground = XYBackgroundVariant | OverrideProperties<BackgroundProps, {
-	variant: XYBackgroundVariant;
-}>;
-type XYBackgroundVariant = "dots" | "lines" | "cross";
 
 export {};