likec4 1.12.2 → 1.13.0

package/react/index.d.ts

@@ -1,8 +1,21 @@
 // Generated by dts-bundle-generator v9.5.1
 
 import { CSSProperties, DependencyList, HTMLAttributes, MouseEvent as ReactMouseEvent, PropsWithChildren, ReactNode } from 'react';
-import { LiteralUnion, OverrideProperties, PartialDeep, Tagged, UnwrapTagged } from 'type-fest';
+import { Class, LiteralUnion, OverrideProperties, PartialDeep, Tagged, TupleToUnion } from 'type-fest';
 
+type NonEmptyArray<T> = [
+	T,
+	...T[]
+];
+type IconUrl = Tagged<string, "IconUrl">;
+type Point = readonly [
+	x: number,
+	y: number
+];
+interface XYPoint {
+	x: number;
+	y: number;
+}
 declare const ThemeColors: readonly [
 	"amber",
 	"blue",
@@ -35,28 +48,15 @@ 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">;
+type Fqn<Id extends string = string> = Tagged<Id, "Fqn">;
 declare const BorderStyles: readonly [
 	"solid",
 	"dashed",
 	"dotted",
 	"none"
 ];
-type BorderStyle = typeof BorderStyles[number];
-type ElementKind = Tagged<string, "ElementKind">;
+type BorderStyle = TupleToUnion<typeof BorderStyles>;
+type ElementKind<Kinds extends string = string> = Tagged<Kinds, "ElementKind">;
 declare const ElementShapes: readonly [
 	"rectangle",
 	"person",
@@ -66,33 +66,33 @@ declare const ElementShapes: readonly [
 	"storage",
 	"queue"
 ];
-type ElementShape = typeof ElementShapes[number];
+type ElementShape = TupleToUnion<typeof ElementShapes>;
 interface ElementStyle {
 	border?: BorderStyle;
 	opacity?: number;
 }
-type Tag = Tagged<string, "Tag">;
+type Tag<Tags extends string = string> = Tagged<Tags, "Tag">;
 interface Link {
 	readonly title?: string;
 	readonly url: string;
 	readonly relative?: string;
 }
-interface Element$1 {
-	readonly id: Fqn;
-	readonly kind: ElementKind;
+interface TypedElement<Ids extends string, Kinds extends string, Tags extends string, MetadataKeys extends string = never> {
+	readonly id: Fqn<Ids>;
+	readonly kind: ElementKind<Kinds>;
 	readonly title: string;
 	readonly description: string | null;
 	readonly technology: string | null;
-	readonly tags: NonEmptyArray<Tag> | null;
+	readonly tags: NonEmptyArray<Tag<Tags>> | 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;
-	};
+	readonly metadata?: Record<MetadataKeys, string>;
+}
+interface Element$1 extends TypedElement<string, string, string, string> {
 }
 interface ElementKindSpecificationStyle {
 	shape?: ElementShape;
@@ -136,140 +136,13 @@ 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;
-	custom?: never;
-	expanded?: never;
-	elementKind?: never;
-	elementTag?: never;
-	isEqual?: never;
-	isDescedants?: never;
-	wildcard?: never;
-	source?: never;
-	target?: never;
-	inout?: never;
-	incoming?: never;
-	outgoing?: never;
-	customRelation?: never;
-}
-interface ElementRefExpr extends Omit<BaseExpr, "element" | "isDescedants"> {
-	element: Fqn;
-	isDescedants?: boolean;
-}
-interface ExpandedElementExpr extends Omit<BaseExpr, "expanded"> {
-	expanded: Fqn;
-}
-interface CustomElementExpr extends Omit<BaseExpr, "custom"> {
-	custom: {
-		expr: ElementExpression | ElementWhereExpr;
-		title?: string;
-		description?: string;
-		technology?: string;
-		notation?: string;
-		shape?: ElementShape;
-		color?: Color;
-		icon?: IconUrl;
-		border?: BorderStyle;
-		opacity?: number;
-		navigateTo?: ViewID;
-	};
-}
-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;
-		title?: string;
-		description?: string;
-		technology?: string;
-		notation?: string;
-		navigateTo?: ViewID;
-		notes?: string;
-		color?: Color;
-		line?: RelationshipLineType;
-		head?: RelationshipArrowType;
-		tail?: RelationshipArrowType;
-	};
-}
-type RelationPredicateExpression = RelationExpression | RelationWhereExpr | CustomRelationExpr;
-type Expression = ElementPredicateExpression | RelationPredicateExpression;
 type ElementNotation = {
 	kinds: ElementKind[];
 	shape: ElementShape;
 	color: Color;
 	title: string;
 };
-type ViewID = Tagged<string, "ViewID">;
+type ViewID<Id extends string = string> = Tagged<Id, "ViewID">;
 type ViewRulePredicate = {
 	include: Expression[];
 	exclude?: never;
@@ -293,12 +166,12 @@ interface ViewRuleAutoLayout {
 	rankSep?: number;
 }
 type ViewRule = ViewRulePredicate | ViewRuleStyle | ViewRuleAutoLayout;
-interface BasicView<ViewType extends "element" | "dynamic"> {
+interface BasicView<ViewType extends "element" | "dynamic", ViewIDs extends string, Tags extends string> {
 	readonly __?: ViewType;
-	readonly id: ViewID;
+	readonly id: ViewID<ViewIDs>;
 	readonly title: string | null;
 	readonly description: string | null;
-	readonly tags: NonEmptyArray<Tag> | null;
+	readonly tags: NonEmptyArray<Tag<Tags>> | null;
 	readonly links: NonEmptyArray<Link> | null;
 	/**
 	 * URI to the source file of this view.
@@ -320,17 +193,17 @@ interface BasicView<ViewType extends "element" | "dynamic"> {
 	readonly manualLayout?: ViewManualLayout | undefined;
 	readonly customColorDefinitions: CustomColorDefinitions;
 }
-interface BasicElementView extends BasicView<"element"> {
+interface BasicElementView<ViewIDs extends string, Tags extends string> extends BasicView<"element", ViewIDs, Tags> {
 	readonly viewOf?: Fqn;
 	readonly rules: ViewRule[];
 }
-interface ScopedElementView extends BasicElementView {
+interface ScopedElementView<ViewIDs extends string, Tags extends string> extends BasicElementView<ViewIDs, Tags> {
 	readonly viewOf: Fqn;
 }
-interface ExtendsElementView extends BasicElementView {
-	readonly extends: ViewID;
+interface ExtendsElementView<ViewIDs extends string, Tags extends string> extends BasicElementView<ViewIDs, Tags> {
+	readonly extends: ViewID<ViewIDs>;
 }
-type ElementView = ScopedElementView | ExtendsElementView | BasicElementView;
+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;
@@ -355,7 +228,7 @@ type DynamicViewIncludeRule = {
 	include: ElementPredicateExpression[];
 };
 type DynamicViewRule = DynamicViewIncludeRule | ViewRuleStyle | ViewRuleAutoLayout;
-interface DynamicView extends BasicView<"dynamic"> {
+interface DynamicView<ViewIDs extends string = string, Tags extends string = string> extends BasicView<"dynamic", ViewIDs, Tags> {
 	readonly __: "dynamic";
 	readonly steps: DynamicViewStepOrParallel[];
 	readonly rules: DynamicViewRule[];
@@ -363,8 +236,8 @@ interface DynamicView extends BasicView<"dynamic"> {
 type CustomColorDefinitions = {
 	[key: string]: ThemeColorValues;
 };
-type LikeC4View = ElementView | DynamicView;
-type NodeId = Tagged<string, "Fqn">;
+type LikeC4View<ViewIDs extends string = string, Tags extends string = string> = ElementView<ViewIDs, Tags> | DynamicView<ViewIDs, Tags>;
+type NodeId<IDs extends string = string> = Tagged<IDs, "Fqn">;
 type EdgeId = Tagged<string, "EdgeId">;
 interface ComputedNode {
 	id: NodeId;
@@ -442,15 +315,15 @@ interface ViewAutoLayout {
 	rankSep?: number;
 	nodeSep?: number;
 }
-interface ComputedElementView extends Omit<ElementView, "rules" | "docUri">, ViewWithHash, ViewWithNotation {
-	readonly extends?: ViewID;
+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 extends Omit<DynamicView, "rules" | "steps" | "docUri">, ViewWithHash, ViewWithNotation {
+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[];
@@ -458,7 +331,7 @@ interface ComputedDynamicView extends Omit<DynamicView, "rules" | "steps" | "doc
 	rules?: never;
 	docUri?: never;
 }
-type ComputedView = ComputedElementView | ComputedDynamicView;
+type ComputedView<ViewIDs extends string = string, Tags extends string = string> = ComputedElementView<ViewIDs, Tags> | ComputedDynamicView<ViewIDs, Tags>;
 type BBox = {
 	x: number;
 	y: number;
@@ -477,7 +350,7 @@ interface DiagramEdge extends ComputedEdge {
 	labelBBox?: BBox | null;
 	dotpos?: string;
 }
-interface DiagramView extends Omit<ComputedView, "nodes" | "edges" | "manualLayout"> {
+interface DiagramView<ViewIDs extends string = string, Tags extends string = string> extends Omit<ComputedView<ViewIDs, Tags>, "nodes" | "edges" | "manualLayout"> {
 	readonly nodes: DiagramNode[];
 	readonly edges: DiagramEdge[];
 	readonly bounds: BBox;
@@ -509,15 +382,142 @@ type ViewManualLayout = {
 		labelBBox?: BBox;
 	}>;
 };
-interface ParsedLikeC4Model {
+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";
+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;
+	custom?: never;
+	expanded?: never;
+	elementKind?: never;
+	elementTag?: never;
+	isEqual?: never;
+	isDescedants?: never;
+	wildcard?: never;
+	source?: never;
+	target?: never;
+	inout?: never;
+	incoming?: never;
+	outgoing?: never;
+	customRelation?: never;
+}
+interface ElementRefExpr extends Omit<BaseExpr, "element" | "isDescedants"> {
+	element: Fqn;
+	isDescedants?: boolean;
+}
+interface ExpandedElementExpr extends Omit<BaseExpr, "expanded"> {
+	expanded: Fqn;
+}
+interface CustomElementExpr extends Omit<BaseExpr, "custom"> {
+	custom: {
+		expr: ElementExpression | ElementWhereExpr;
+		title?: string;
+		description?: string;
+		technology?: string;
+		notation?: string;
+		shape?: ElementShape;
+		color?: Color;
+		icon?: IconUrl;
+		border?: BorderStyle;
+		opacity?: number;
+		navigateTo?: ViewID;
+	};
+}
+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;
+		title?: string;
+		description?: string;
+		technology?: string;
+		notation?: string;
+		navigateTo?: ViewID;
+		notes?: string;
+		color?: Color;
+		line?: RelationshipLineType;
+		head?: RelationshipArrowType;
+		tail?: RelationshipArrowType;
+	};
+}
+type RelationPredicateExpression = RelationExpression | RelationWhereExpr | CustomRelationExpr;
+type Expression = ElementPredicateExpression | RelationPredicateExpression;
+interface ParsedLikeC4Model<ElementKinds extends string = string, RelationKinds extends string = string, Tags extends string = string, Fqns extends string = string, Views extends string = string> {
 	specification: {
-		tags: Tag[];
-		elements: Record<UnwrapTagged<ElementKind>, ElementKindSpecification>;
-		relationships: Record<UnwrapTagged<ElementKind>, RelationshipKindSpecification>;
+		tags: Tag<Tags>[];
+		elements: Record<ElementKinds, ElementKindSpecification>;
+		relationships: Record<RelationKinds, RelationshipKindSpecification>;
 	};
-	elements: Record<Fqn, Element$1>;
+	elements: Record<Fqns, TypedElement<Fqns, ElementKinds, Tags>>;
 	relations: Record<RelationID, Relation>;
-	views: Record<ViewID, LikeC4View>;
+	views: Record<Views, LikeC4View<Views, Tags>>;
 }
 interface ComputedLikeC4Model extends Omit<ParsedLikeC4Model, "views"> {
 	__?: never;
@@ -527,6 +527,31 @@ interface LayoutedLikeC4Model extends Omit<ParsedLikeC4Model, "views"> {
 	__: "layouted";
 	views: Record<ViewID, DiagramView>;
 }
+declare namespace ViewChange {
+	interface ChangeElementStyle {
+		op: "change-element-style";
+		style: {
+			border?: BorderStyle;
+			opacity?: number;
+			shape?: ElementShape;
+			color?: ThemeColor;
+		};
+		targets: NonEmptyArray<Fqn>;
+	}
+	interface SaveManualLayout {
+		op: "save-manual-layout";
+		layout: ViewManualLayout;
+	}
+	interface ChangeAutoLayout {
+		op: "change-autolayout";
+		layout: {
+			direction: AutoLayoutDirection;
+			nodeSep?: number | null;
+			rankSep?: number | null;
+		};
+	}
+}
+type ViewChange = ViewChange.ChangeElementStyle | ViewChange.SaveManualLayout | ViewChange.ChangeAutoLayout;
 type Fqn$1 = LiteralUnion<Fqn, string>;
 type RelationID$1 = LiteralUnion<RelationID, string>;
 type ViewID$1 = LiteralUnion<ViewID, string>;
@@ -539,11 +564,11 @@ type ElementOrFqn = Fqn$1 | {
 declare class LikeC4ViewModel {
 	readonly view: ComputedView;
 	readonly model: LikeC4Model<LikeC4ViewModel>;
-	private _rootElements;
-	private _elements;
-	private _connections;
+	private readonly _rootElements;
+	private readonly _elements;
+	private readonly _connections;
 	constructor(view: ComputedView, model: LikeC4Model<LikeC4ViewModel>);
-	get id(): ViewID;
+	get id(): ViewID<string>;
 	get title(): string;
 	get viewOf(): LikeC4Model.ElementModel<LikeC4ViewModel>;
 	get tags(): Tag[];
@@ -578,9 +603,9 @@ declare namespace LikeC4ViewModel {
 	 */
 	class Element {
 		readonly node: ComputedNode;
-		private viewmodel;
+		private readonly viewmodel;
 		constructor(node: ComputedNode, viewmodel: LikeC4ViewModel);
-		get id(): NodeId;
+		get id(): NodeId<string>;
 		get title(): string;
 		get kind(): ElementKind;
 		get isRoot(): boolean;
@@ -609,7 +634,7 @@ declare namespace LikeC4ViewModel {
 	 */
 	class Connection {
 		readonly edge: ComputedEdge;
-		private viewmodel;
+		private readonly viewmodel;
 		constructor(edge: ComputedEdge, viewmodel: LikeC4ViewModel);
 		get id(): EdgeId;
 		get source(): LikeC4ViewModel.Element;
@@ -635,10 +660,7 @@ export declare class LikeC4Model<M extends LikeC4Model.ViewModel = LikeC4Model.V
 	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[]);
+	constructor(type: LikeC4Model.ModelType<M>, sourcemodel: LikeC4Model.SourceModel<M>, elements: Element$1[], relations: Relation[], views: LikeC4Model.SourceModel<M>["views"], ViewModelClass: Class<M>);
 	/**
 	 * Returns the root elements of the model.
 	 */
@@ -729,10 +751,14 @@ export declare class LikeC4Model<M extends LikeC4Model.ViewModel = LikeC4Model.V
 	private _internalOf;
 }
 export declare namespace LikeC4Model {
+	function create(source: LikeC4Model.SourceModel): PickBySource<typeof source>;
+	function computed(source: ComputedLikeC4Model): LikeC4Model<LikeC4ViewModel>;
+	function layouted(source: LayoutedLikeC4Model): LikeC4Model<LikeC4DiagramModel>;
 	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 ElementModel = LikeC4ViewModel.Element | LikeC4DiagramModel.Element;
 		type Relationship = LikeC4Model.Relationship<ViewModel>;
 		function isLayouted(model: ViewModel): model is LikeC4DiagramModel;
 	}
@@ -748,13 +774,13 @@ export declare namespace LikeC4Model {
 	}
 	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> {
+	class Relationship<M extends ViewModel = ViewModel> {
 		readonly relationship: Relation;
-		private model;
+		private readonly model;
 		constructor(relationship: Relation, model: LikeC4Model<M>);
 		get id(): RelationID;
 		get title(): string;
-		get kind(): RelationshipKind;
+		get kind(): RelationshipKind<string>;
 		get tags(): Tag[];
 		get source(): ElementModel<M>;
 		get target(): ElementModel<M>;
@@ -762,11 +788,11 @@ export declare namespace LikeC4Model {
 		metadata(key: string, defaultValue: string): string;
 		hasMetadata(key: string): boolean;
 	}
-	class ElementModel<M extends ViewModel> {
+	class ElementModel<M extends ViewModel = ViewModel> {
 		readonly element: Element$1;
-		private model;
+		private readonly model;
 		constructor(element: Element$1, model: LikeC4Model<M>);
-		get id(): Fqn;
+		get id(): Fqn<string>;
 		get title(): string;
 		get kind(): ElementKind;
 		get isRoot(): boolean;
@@ -782,6 +808,10 @@ export declare namespace LikeC4Model {
 		siblings(): readonly ElementModel<M>[];
 		descendants(): readonly ElementModel<M>[];
 		children(): readonly ElementModel<M>[];
+		/**
+		 * All views 'view of' current element
+		 */
+		viewsOf(): M[];
 		/**
 		 * Views that contain this element
 		 */
@@ -791,17 +821,22 @@ export declare namespace LikeC4Model {
 		outgoing(filter?: OutgoingFilter): readonly Relationship<M>[];
 		outgoers(filter?: OutgoingFilter): readonly ElementModel<M>[];
 		internal(): readonly Relationship<M>[];
+		/**
+		 * Resolve siblings of the element and siblings of ancestors
+		 *  (from closest to root)
+		 */
+		ascendingSiblings(): readonly ElementModel<M>[];
 	}
 }
 declare class LikeC4DiagramModel {
 	readonly view: DiagramView;
 	readonly model: LikeC4Model.Layouted;
-	private _rootElements;
-	private _elements;
-	private _connections;
+	private readonly _rootElements;
+	private readonly _elements;
+	private readonly _connections;
 	constructor(view: DiagramView, model: LikeC4Model.Layouted);
 	get isDynamic(): boolean;
-	get id(): ViewID;
+	get id(): ViewID<string>;
 	get title(): string;
 	get viewOf(): LikeC4Model.ElementModel<LikeC4DiagramModel>;
 	get tags(): Tag[];
@@ -836,9 +871,9 @@ declare namespace LikeC4DiagramModel {
 	 */
 	class Element {
 		readonly node: DiagramNode;
-		private view;
+		private readonly view;
 		constructor(node: DiagramNode, view: LikeC4DiagramModel);
-		get id(): NodeId;
+		get id(): NodeId<string>;
 		get title(): string;
 		get kind(): ElementKind;
 		get isRoot(): boolean;
@@ -869,7 +904,7 @@ declare namespace LikeC4DiagramModel {
 	 */
 	class Connection {
 		readonly edge: DiagramEdge;
-		private view;
+		private readonly view;
 		constructor(edge: DiagramEdge, view: LikeC4DiagramModel);
 		get id(): EdgeId;
 		get source(): LikeC4DiagramModel.Element;
@@ -882,27 +917,6 @@ declare namespace LikeC4DiagramModel {
 		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: ViewRuleAutoLayout;
-	}
-}
-type ViewChange = ViewChange.ChangeElementStyle | ViewChange.SaveManualLayout | ViewChange.ChangeAutoLayout;
 interface VariantColorsResolverInput {
 	color: MantineColor | undefined;
 	theme: MantineTheme;
@@ -1151,6 +1165,12 @@ export type LikeC4ViewProps<ViewId extends string, Tag extends string, Kind exte
 	 * @default false
 	 */
 	enableFocusMode?: boolean | undefined;
+	/**
+	 * Experimental feature to browse relationships
+	 *
+	 * @default false
+	 */
+	enableRelationshipsBrowser?: boolean | undefined;
 	where?: WhereOperator<Tag, Kind> | undefined;
 	className?: string | undefined;
 	style?: CSSProperties | undefined;
@@ -1190,8 +1210,14 @@ export type LikeC4BrowserProps<ViewId extends string, Tag extends string, Kind e
 	mantineTheme?: MantineThemeOverride | undefined;
 	/** Function to generate nonce attribute added to all generated `<style />` tags */
 	styleNonce?: string | (() => string) | undefined;
+	/**
+	 * Experimental feature to browse relationships
+	 *
+	 * @default false
+	 */
+	enableRelationshipsBrowser?: boolean | 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, styleNonce }: LikeC4BrowserProps<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
+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, styleNonce, enableRelationshipsBrowser }: 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>;
 	/**
@@ -1251,8 +1277,14 @@ export type LikeC4ViewEmbeddedProps<ViewId extends string, Tag extends string, K
 	mantineTheme?: MantineThemeOverride | undefined;
 	/** Function to generate nonce attribute added to all generated `<style />` tags */
 	styleNonce?: string | (() => string) | undefined;
+	/**
+	 * Experimental feature to browse relationships
+	 *
+	 * @default false
+	 */
+	enableRelationshipsBrowser?: boolean | 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, styleNonce }: LikeC4ViewEmbeddedProps<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
+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, enableRelationshipsBrowser, mantineTheme, where, style, styleNonce }: LikeC4ViewEmbeddedProps<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
 declare enum BackgroundVariant {
 	Lines = "lines",
 	Dots = "dots",
@@ -1316,11 +1348,6 @@ 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
@@ -1336,6 +1363,12 @@ interface LikeC4DiagramProperties {
 	 * @default true
 	 */
 	readonly?: boolean | undefined;
+	/**
+	 * Show/hide panel with top left controls,
+	 *
+	 * @default true if not readonly
+	 */
+	controls?: boolean | undefined;
 	/**
 	 * If set, initial viewport will show all nodes & edges
 	 * @default true
@@ -1377,7 +1410,7 @@ interface LikeC4DiagramProperties {
 	 */
 	showDiagramTitle?: boolean | undefined;
 	/**
-	 * Show back/forward navigation buttons
+	 * Show back/forward history navigation buttons
 	 * @default true if `onNavigateTo` is set
 	 */
 	showNavigationButtons?: undefined | boolean;
@@ -1393,9 +1426,15 @@ interface LikeC4DiagramProperties {
 	showRelationshipDetails?: boolean | undefined;
 	/**
 	 * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
-	 * @default true
+	 * @default false
 	 */
 	enableFocusMode?: boolean | undefined;
+	/**
+	 * Experimental feature to browse relationships
+	 *
+	 * @default false
+	 */
+	enableRelationshipsBrowser?: boolean | undefined;
 	/**
 	 * If Walkthrough for dynamic views should be enabled
 	 * @default false
@@ -1480,8 +1519,10 @@ export type ReactLikeC4Props<ViewId extends string, Tag extends string, Kind ext
 	where?: WhereOperator<Tag, Kind> | undefined;
 	onNavigateTo?: OnNavigateTo<ViewId> | undefined;
 	mantineTheme?: MantineThemeOverride | undefined;
+	/** Function to generate nonce attribute added to all generated `<style />` tags */
+	styleNonce?: string | (() => string) | undefined;
 };
-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 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, styleNonce, ...props }: ReactLikeC4Props<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ReactLikeC4 {
 	var displayName: string;
 }
@@ -1718,7 +1759,7 @@ interface UseStoreOptions<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[];
+export declare function useBundledStyleSheet(injectFontCss: boolean, styleNonce?: string | (() => string) | undefined): CSSStyleSheet[];
 type ColorScheme = "light" | "dark";
 export declare function useColorScheme(explicit?: ColorScheme): ColorScheme;
 /**