likec4 1.19.2 → 1.20.0

package/react/index.d.ts

@@ -1,1546 +1,771 @@
-// Generated by dts-bundle-generator v9.5.1
-
-import { CSSProperties, DependencyList, HTMLAttributes, JSX as JSX$1, MouseEvent as ReactMouseEvent, PropsWithChildren, ReactNode } from 'react';
-import { LiteralUnion, OverrideProperties, PartialDeep, Simplify, Tagged, TupleToUnion, UnionToIntersection } 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"> | "none";
-type Point = readonly [
-	x: number,
-	y: number
-];
-interface XYPoint {
-	x: number;
-	y: number;
-}
-type AllNever<Expressions> = UnionToIntersection<{
-	[Name in keyof Expressions]: {
-		-readonly [Key in keyof Expressions[Name]]?: never;
-	};
-}[keyof Expressions]>;
-type ExclusiveUnion<Expressions> = Expressions extends object ? {
-	[Name in keyof Expressions]: Simplify<Omit<AllNever<Expressions>, keyof Expressions[Name]> & Expressions[Name]>;
-}[keyof Expressions] : Expressions;
-type Fqn<Id extends string = string> = Tagged<Id, "Fqn">;
-declare const BorderStyles: readonly [
-	"solid",
-	"dashed",
-	"dotted",
-	"none"
-];
-type BorderStyle = TupleToUnion<typeof BorderStyles>;
-type ElementKind<Kinds extends string = string> = Tagged<Kinds, "ElementKind">;
-declare namespace ElementKind {
-	const Group: ElementKind;
-}
-declare const ElementShapes: readonly [
-	"rectangle",
-	"person",
-	"browser",
-	"mobile",
-	"cylinder",
-	"storage",
-	"queue"
-];
-type ElementShape = TupleToUnion<typeof ElementShapes>;
-interface ElementStyle {
-	readonly border?: BorderStyle;
-	/**
-	 * In percentage 0-100, 0 is fully transparent
-	 *
-	 * @default 100
-	 */
-	readonly opacity?: number;
-}
-type Tag<Tags extends string = string> = Tagged<Tags, "Tag">;
-interface Link {
-	readonly title?: string;
-	readonly url: string;
-	readonly relative?: string;
-}
-type EqualOperator<V> = {
-	eq: V;
-	neq?: never;
-} | {
-	eq?: never;
-	neq: V;
-};
-type AllNever$1 = {
-	not?: never;
-	and?: never;
-	or?: never;
-	tag?: never;
-	kind?: never;
-};
-type TagEqual<Tag> = Omit<AllNever$1, "tag"> & {
-	tag: EqualOperator<Tag>;
-};
-type KindEqual<Kind> = Omit<AllNever$1, "kind"> & {
-	kind: EqualOperator<Kind>;
-};
-type NotOperator<Tag, Kind> = Omit<AllNever$1, "not"> & {
-	not: WhereOperator<Tag, Kind>;
-};
-type AndOperator<Tag, Kind> = Omit<AllNever$1, "and"> & {
-	and: NonEmptyArray<WhereOperator<Tag, Kind>>;
-};
-type OrOperator<Tag, Kind> = Omit<AllNever$1, "or"> & {
-	or: NonEmptyArray<WhereOperator<Tag, Kind>>;
-};
-type WhereOperator<Tag, Kind> = TagEqual<Tag> | KindEqual<Kind> | NotOperator<Tag, Kind> | AndOperator<Tag, Kind> | OrOperator<Tag, Kind>;
-interface BaseExpr {
-	where?: never;
-	element?: never;
-	custom?: never;
-	expanded?: never;
-	elementKind?: never;
-	elementTag?: never;
-	isEqual?: never;
-	isChildren?: never;
-	isDescendants?: never;
-	wildcard?: never;
-	source?: never;
-	target?: never;
-	inout?: never;
-	incoming?: never;
-	outgoing?: never;
-	customRelation?: never;
-}
-interface ElementRefExpr extends Omit<BaseExpr, "element" | "isChildren" | "isDescendants"> {
-	element: Fqn;
-	isChildren?: boolean;
-	isDescendants?: boolean;
-}
-interface ExpandedElementExpr extends Omit<BaseExpr, "expanded"> {
-	expanded: Fqn;
-}
-interface CustomElementExpr extends Omit<BaseExpr, "custom"> {
-	custom: {
-		expr: ElementExpression | ElementWhereExpr;
-		title?: string;
-		description?: string;
-		technology?: string;
-		notation?: string;
-		shape?: ElementShape;
-		color?: Color;
-		icon?: IconUrl;
-		border?: BorderStyle;
-		opacity?: number;
-		navigateTo?: ViewId;
-	};
-}
-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 NonWilcard = ElementRefExpr | ElementKindExpr | ElementTagExpr | ExpandedElementExpr;
-type ElementExpression = NonWilcard | WildcardExpr;
-interface ElementWhereExpr extends Omit<BaseExpr, "where"> {
-	where: {
-		expr: ElementExpression;
-		condition: WhereOperator<string, string>;
-	};
-}
-type ElementPredicateExpression = ElementExpression | ElementWhereExpr | CustomElementExpr;
-interface DirectRelationExpr extends Omit<BaseExpr, "source" | "target"> {
-	source: ElementExpression;
-	target: ElementExpression;
-	isBidirectional?: boolean;
-}
-interface InOutExpr extends Omit<BaseExpr, "inout"> {
-	inout: ElementExpression;
-}
-interface IncomingExpr extends Omit<BaseExpr, "incoming"> {
-	incoming: ElementExpression;
-}
-interface OutgoingExpr extends Omit<BaseExpr, "outgoing"> {
-	outgoing: ElementExpression;
-}
-type RelationExpression = DirectRelationExpr | InOutExpr | IncomingExpr | OutgoingExpr;
-interface RelationWhereExpr extends Omit<BaseExpr, "where"> {
-	where: {
-		expr: RelationExpression;
-		condition: WhereOperator<string, string>;
-	};
-}
-interface CustomRelationExpr extends Omit<BaseExpr, "customRelation"> {
-	customRelation: {
-		relation: RelationExpression | RelationWhereExpr;
-		title?: string;
-		description?: string;
-		technology?: string;
-		notation?: string;
-		navigateTo?: ViewId;
-		notes?: string;
-		color?: Color;
-		line?: RelationshipLineType;
-		head?: RelationshipArrowType;
-		tail?: RelationshipArrowType;
-	};
-}
-type RelationPredicateExpression = RelationExpression | RelationWhereExpr | CustomRelationExpr;
-type Expression = ElementPredicateExpression | RelationPredicateExpression;
-declare namespace FqnRef {
-	/**
-	 * Represents a reference to an instance within a deployment.
-	 *
-	 * @template D - The type representing the deployment fqn. Defaults to `Fqn`.
-	 * @template M - The type representing the model fqn. Defaults to `Fqn`.
-	 *
-	 * @property {D} deployment - TThe fully qualified name (FQN) of the deployed instance.
-	 * @property {M} element - The element reference within the deployment.
-	 */
-	type InsideInstanceRef<D = Fqn, M = Fqn> = {
-		deployment: D;
-		element: M;
-	};
-	const isInsideInstanceRef: (ref: FqnRef) => ref is InsideInstanceRef;
-	/**
-	 * Represents a reference to a deployment element.
-	 *
-	 * @template F - The type of the fully qualified name (FQN) of the deployment element. Defaults to `Fqn`.
-	 * @property {F} deployment - The fully qualified name (FQN) of the deployment element.
-	 */
-	type DeploymentElementRef<F = Fqn> = {
-		deployment: F;
-	};
-	const isDeploymentElementRef: (ref: FqnRef) => ref is DeploymentElementRef;
-	type DeploymentRef<D = Fqn, M = Fqn> = DeploymentElementRef<D> | InsideInstanceRef<D, M>;
-	const isDeploymentRef: (ref: FqnRef) => ref is DeploymentRef;
-	/**
-	 * Reference to logical model element
-	 */
-	type ModelRef<F = Fqn> = {
-		model: F;
-	};
-	const isModelRef: (ref: FqnRef) => ref is ModelRef;
-	const toDeploymentRef: (ref: FqnRef) => DeploymentRef;
-}
-type FqnRef<D = Fqn, M = Fqn> = ExclusiveUnion<{
-	InsideInstanceRef: FqnRef.InsideInstanceRef<D, M>;
-	DeploymentRef: FqnRef.DeploymentRef<D>;
-	ModelRef: FqnRef.ModelRef<M>;
-}>;
-declare namespace FqnExpr {
-	type Wildcard = {
-		wildcard: true;
-	};
-	const isWildcard: (expr: ExpressionV2) => expr is Wildcard;
-	type ModelRef<M = Fqn> = {
-		ref: FqnRef.ModelRef<M>;
-		selector?: PredicateSelector;
-	};
-	const isModelRef: (ref: ExpressionV2) => ref is ModelRef;
-	type DeploymentRef<D = Fqn, M = Fqn> = {
-		ref: FqnRef.DeploymentRef<D> | FqnRef.InsideInstanceRef<D, M>;
-		selector?: PredicateSelector;
-	};
-	const isDeploymentRef: (ref: ExpressionV2) => ref is FqnExpr.DeploymentRef;
-	type NonWildcard<D = Fqn, M = Fqn> = ExclusiveUnion<{
-		ModelRef: ModelRef<M>;
-		DeploymentRef: DeploymentRef<D, M>;
-	}>;
-}
-type FqnExpr<D = Fqn, M = Fqn> = ExclusiveUnion<{
-	Wildcard: FqnExpr.Wildcard;
-	ModelRef: FqnExpr.ModelRef<M>;
-	DeploymentRef: FqnExpr.DeploymentRef<D, M>;
-}>;
-declare namespace RelationExpr {
-	type Direct<D = Fqn, M = Fqn> = {
-		source: FqnExpr<D, M>;
-		target: FqnExpr<D, M>;
-		isBidirectional?: boolean;
-	};
-	const isDirect: (expr: ExpressionV2) => expr is Direct;
-	type Incoming<D = Fqn, M = Fqn> = {
-		incoming: FqnExpr<D, M>;
-	};
-	const isIncoming: (expr: ExpressionV2) => expr is Incoming;
-	type Outgoing<D = Fqn, M = Fqn> = {
-		outgoing: FqnExpr<D, M>;
-	};
-	const isOutgoing: (expr: ExpressionV2) => expr is Outgoing;
-	type InOut<D = Fqn, M = Fqn> = {
-		inout: FqnExpr<D, M>;
-	};
-	const isInOut: (expr: ExpressionV2) => expr is InOut;
-	type Where<D = Fqn, M = Fqn> = {
-		where: {
-			expr: ExpressionV2<D, M>;
-			condition: WhereOperator<string, string>;
-		};
-	};
-	const isWhere: (expr: ExpressionV2) => expr is Where;
-}
-type RelationExpr<D = Fqn, M = Fqn> = ExclusiveUnion<{
-	Direct: RelationExpr.Direct<D, M>;
-	Incoming: RelationExpr.Incoming<D, M>;
-	Outgoing: RelationExpr.Outgoing<D, M>;
-	InOut: RelationExpr.InOut<D, M>;
-	Where: RelationExpr.Where<D, M>;
-}>;
-type ExpressionV2<D = Fqn, M = Fqn> = ExclusiveUnion<{
-	Wildcard: FqnExpr.Wildcard;
-	ModelRef: FqnExpr.ModelRef<M>;
-	DeploymentRef: FqnExpr.DeploymentRef<D, M>;
-	Direct: RelationExpr.Direct<D, M>;
-	Incoming: RelationExpr.Incoming<D, M>;
-	Outgoing: RelationExpr.Outgoing<D, M>;
-	InOut: RelationExpr.InOut<D, M>;
-	RelationPredicateOrWhere: RelationExpr.Where<D, M>;
-}>;
-declare namespace ExpressionV2 {
-	const isFqnExpr: (expr: ExpressionV2) => expr is FqnExpr;
-	const isRelation: (expr: ExpressionV2) => expr is RelationExpr;
-}
-type GlobalPredicateId = Tagged<string, "GlobalPredicateId">;
-type GlobalStyleID = Tagged<string, "GlobalStyleID">;
-type ElementNotation = {
-	kinds: string[];
-	shape: ElementShape;
-	color: Color;
-	title: string;
-};
-type ViewId<Id extends string = string> = Tagged<Id, "ViewID">;
-type ViewRulePredicate = {
-	include: Expression[];
-	exclude?: never;
-} | {
-	include?: never;
-	exclude: Expression[];
-};
-interface ViewRuleGlobalPredicateRef {
-	predicateId: GlobalPredicateId;
-}
-interface ViewRuleStyle {
-	targets: ElementExpression[];
-	notation?: string;
-	style: ElementStyle & {
-		color?: Color;
-		shape?: ElementShape;
-		icon?: IconUrl;
-	};
-}
-interface ViewRuleGlobalStyle {
-	styleId: GlobalStyleID;
-}
-type AutoLayoutDirection = "TB" | "BT" | "LR" | "RL";
-interface ViewRuleAutoLayout {
-	direction: AutoLayoutDirection;
-	nodeSep?: number;
-	rankSep?: number;
-}
-interface ViewRuleGroup {
-	groupRules: Array<ViewRulePredicate | ViewRuleGroup>;
-	title: string | null;
-	color?: Color;
-	border?: BorderStyle;
-	opacity?: number;
-}
-type ViewRule = ViewRulePredicate | ViewRuleGlobalPredicateRef | ViewRuleGroup | ViewRuleStyle | ViewRuleGlobalStyle | ViewRuleAutoLayout;
-interface BasicView<ViewType extends "element" | "dynamic" | "deployment", ViewIDs extends string, Tags extends string> {
-	readonly __?: ViewType;
-	readonly id: ViewId<ViewIDs>;
-	readonly title: string | null;
-	readonly description: string | null;
-	readonly tags: NonEmptyArray<Tag<Tags>> | null;
-	readonly links: NonEmptyArray<Link> | null;
-	/**
-	 * URI to the source file of this view.
-	 * Undefined if the view is auto-generated.
-	 */
-	readonly docUri?: string;
-	/**
-	 * For all views we find common ancestor path.
-	 * This is used to generate relative paths, i.e.:
-	 * - "/home/project/index.c4" becomes "index.c4"
-	 * - "/home/project/subdir/views.c4" becomes "subdir/views.c4"
-	 *
-	 * Undefined if the view is auto-generated.
-	 */
-	readonly relativePath?: string;
-	/**
-	 * If the view is changed manually this field contains the layout data.
-	 */
-	readonly manualLayout?: ViewManualLayout | undefined;
-	readonly customColorDefinitions: CustomColorDefinitions;
-}
-interface BasicElementView<ViewIDs extends string, Tags extends string> extends BasicView<"element", ViewIDs, Tags> {
-	readonly viewOf?: Fqn;
-	readonly rules: ViewRule[];
-}
-interface ScopedElementView<ViewIDs extends string, Tags extends string> extends BasicElementView<ViewIDs, Tags> {
-	readonly viewOf: Fqn;
-}
-interface ExtendsElementView<ViewIDs extends string, Tags extends string> extends BasicElementView<ViewIDs, Tags> {
-	readonly extends: ViewId<ViewIDs>;
-}
-type ElementView<ViewIDs extends string = string, Tags extends string = string> = ScopedElementView<ViewIDs, Tags> | ExtendsElementView<ViewIDs, Tags> | BasicElementView<ViewIDs, Tags>;
-interface DynamicViewStep {
-	readonly source: Fqn;
-	readonly target: Fqn;
-	readonly title: string | null;
-	readonly description?: string;
-	readonly technology?: string;
-	readonly notation?: string;
-	readonly notes?: string;
-	readonly color?: Color;
-	readonly line?: RelationshipLineType;
-	readonly head?: RelationshipArrowType;
-	readonly tail?: RelationshipArrowType;
-	readonly isBackward?: boolean;
-	readonly navigateTo?: ViewId;
-	__parallel?: never;
-}
-interface DynamicViewParallelSteps {
-	readonly __parallel: DynamicViewStep[];
-}
-type DynamicViewStepOrParallel = DynamicViewStep | DynamicViewParallelSteps;
-type DynamicViewIncludeRule = {
-	include: ElementPredicateExpression[];
-};
-type DynamicViewRule = DynamicViewIncludeRule | ViewRuleGlobalPredicateRef | ViewRuleStyle | ViewRuleGlobalStyle | ViewRuleAutoLayout;
-interface DynamicView<ViewIDs extends string = string, Tags extends string = string> extends BasicView<"dynamic", ViewIDs, Tags> {
-	readonly __: "dynamic";
-	readonly steps: DynamicViewStepOrParallel[];
-	readonly rules: DynamicViewRule[];
-}
-type CustomColorDefinitions = {
-	[key: string]: ThemeColorValues;
-};
-type DeploymentViewRulePredicate = {
-	include: ExpressionV2[];
-	exclude?: never;
-} | {
-	include?: never;
-	exclude: ExpressionV2[];
-};
-type DeploymentViewRuleStyle = {
-	targets: FqnExpr[];
-	notation?: string;
-	style: ElementStyle & {
-		color?: Color;
-		shape?: ElementShape;
-		icon?: IconUrl;
-	};
-};
-type DeploymentViewRule = DeploymentViewRulePredicate | ViewRuleAutoLayout | DeploymentViewRuleStyle;
-interface DeploymentView<ViewIDs extends string = string, Tags extends string = string> extends BasicView<"deployment", ViewIDs, Tags> {
-	readonly __: "deployment";
-	readonly rules: DeploymentViewRule[];
-}
-type NodeId<IDs extends string = string> = Tagged<IDs, "Fqn">;
-type EdgeId = Tagged<string, "EdgeId">;
-interface ComputedNode {
-	id: NodeId;
-	kind: string;
-	parent: NodeId | null;
-	/**
-	 * Reference to model element
-	 * If 1 - node id is a reference
-	 */
-	modelRef?: 1 | Fqn;
-	/**
-	 * Reference to deployment element
-	 * If 1 - node id is a reference
-	 */
-	deploymentRef?: 1 | Fqn;
-	title: string;
-	description: string | null;
-	technology: string | null;
-	notation?: string;
-	tags: NonEmptyArray<Tag> | null;
-	links: NonEmptyArray<Link> | null;
-	children: NodeId[];
-	inEdges: EdgeId[];
-	outEdges: EdgeId[];
-	shape: ElementShape;
-	color: Color;
-	/**
-	 * @deprecated Use `style` instead
-	 */
-	icon?: IconUrl;
-	style: ElementStyle;
-	navigateTo?: ViewId;
-	level: number;
-	depth?: number;
-	/**
-	 * If this node was customized in the view
-	 */
-	isCustomized?: boolean;
-}
-declare namespace ComputedNode {
-	function modelRef(node: ComputedNode): Fqn | null;
-	function deploymentRef(node: ComputedNode): Fqn | null;
-	/**
-	 * Nodes group is a special kind of node, exisiting only in view
-	 */
-	function isNodesGroup(node: ComputedNode): boolean;
-}
-interface ComputedEdge {
-	id: EdgeId;
-	parent: NodeId | null;
-	source: NodeId;
-	target: NodeId;
-	label: string | null;
-	description?: string;
-	technology?: string;
-	relations: RelationId[];
-	kind?: RelationshipKind;
-	notation?: string;
-	notes?: string;
-	color?: Color;
-	line?: RelationshipLineType;
-	head?: RelationshipArrowType;
-	tail?: RelationshipArrowType;
-	tags?: NonEmptyArray<Tag>;
-	navigateTo?: ViewId;
-	/**
-	 * If this edge is derived from custom relationship predicate
-	 */
-	isCustomized?: boolean;
-	/**
-	 * For layouting purposes
-	 * @default 'forward'
-	 */
-	dir?: "forward" | "back" | "both";
-}
-interface ViewWithHash {
-	/**
-	 * Hash of the view object.
-	 * This is used to detect changes in layout
-	 */
-	hash: string;
-}
-interface ViewWithNotation {
-	notation?: {
-		elements: ElementNotation[];
-	};
-}
-interface ViewAutoLayout {
-	direction: ViewRuleAutoLayout["direction"];
-	rankSep?: number;
-	nodeSep?: number;
-}
-interface ComputedElementView<ViewIDs extends string = string, Tags extends string = string> extends Omit<ElementView<ViewIDs, Tags>, "rules" | "docUri">, ViewWithHash, ViewWithNotation {
-	readonly extends?: ViewId<ViewIDs>;
-	readonly autoLayout: ViewAutoLayout;
-	readonly nodes: ComputedNode[];
-	readonly edges: ComputedEdge[];
-	rules?: never;
-	docUri?: never;
-}
-interface ComputedDynamicView<ViewIDs extends string = string, Tags extends string = string> extends Omit<DynamicView<ViewIDs, Tags>, "rules" | "steps" | "docUri">, ViewWithHash, ViewWithNotation {
-	readonly autoLayout: ViewAutoLayout;
-	readonly nodes: ComputedNode[];
-	readonly edges: ComputedEdge[];
-	steps?: never;
-	rules?: never;
-	docUri?: never;
-}
-interface ComputedDeploymentView<ViewIDs extends string = string, Tags extends string = string> extends Omit<DeploymentView<ViewIDs, Tags>, "rules" | "docUri">, ViewWithHash, ViewWithNotation {
-	readonly autoLayout: ViewAutoLayout;
-	readonly nodes: ComputedNode[];
-	readonly edges: ComputedEdge[];
-	rules?: never;
-	docUri?: never;
-}
-type ComputedView<ViewIDs extends string = string, Tags extends string = string> = ComputedElementView<ViewIDs, Tags> | ComputedDynamicView<ViewIDs, Tags> | ComputedDeploymentView<ViewIDs, Tags>;
-declare namespace ComputedView {
-	function isDeployment(view: ComputedView): view is ComputedDeploymentView;
-	function isDynamic(view: ComputedView): view is ComputedDynamicView;
-	function isElement(view: ComputedView): view is ComputedElementView;
-}
-type BBox = {
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-};
-interface DiagramNode extends ComputedNode {
-	width: number;
-	height: number;
-	position: Point;
-	labelBBox: BBox;
-}
-declare namespace DiagramNode {
-	function modelRef(node: DiagramNode): Fqn | null;
-	function deploymentRef(node: DiagramNode): Fqn | null;
-	/**
-	 * Nodes group is a special kind of node, exisiting only in view
-	 */
-	function isNodesGroup(node: DiagramNode): boolean;
-}
-interface DiagramEdge extends ComputedEdge {
-	points: NonEmptyArray<Point>;
-	controlPoints?: NonEmptyArray<XYPoint>;
-	labelBBox?: BBox | null;
-	dotpos?: string;
-}
-export interface DiagramView<ViewIDs extends string = string, Tags extends string = string> extends Omit<ComputedView<ViewIDs, Tags>, "nodes" | "edges" | "manualLayout"> {
-	readonly nodes: DiagramNode[];
-	readonly edges: DiagramEdge[];
-	readonly bounds: BBox;
-	/**
-	 * If diagram has manual layout
-	 * But was changed and layout should be recalculated
-	 */
-	hasLayoutDrift?: boolean;
-	manualLayout?: never;
-}
-type ViewManualLayout = {
-	readonly hash: string;
-	readonly x: number;
-	readonly y: number;
-	readonly width: number;
-	readonly height: number;
-	readonly autoLayout: ViewAutoLayout;
-	readonly nodes: Record<string, {
-		isCompound: boolean;
-		x: number;
-		y: number;
-		width: number;
-		height: number;
-	}>;
-	readonly edges: Record<string, {
-		dotpos?: string;
-		points: NonEmptyArray<Point>;
-		controlPoints?: NonEmptyArray<XYPoint>;
-		labelBBox?: BBox;
-	}>;
-};
-type RelationId = Tagged<string, "RelationID">;
-type RelationshipKind<Kinds extends string = string> = Tagged<Kinds, "RelationshipKind">;
-type RelationshipLineType = "dashed" | "solid" | "dotted";
-type RelationshipArrowType = "none" | "normal" | "onormal" | "dot" | "odot" | "diamond" | "odiamond" | "crow" | "open" | "vee";
-type PredicateSelector = "children" | "expanded" | "descendants";
-declare namespace ViewChange {
-	interface ChangeElementStyle {
-		op: "change-element-style";
-		style: {
-			border?: BorderStyle;
-			opacity?: number;
-			shape?: ElementShape;
-			color?: ThemeColor;
-		};
-		targets: NonEmptyArray<Fqn>;
-	}
-	interface SaveManualLayout {
-		op: "save-manual-layout";
-		layout: ViewManualLayout;
-	}
-	interface ChangeAutoLayout {
-		op: "change-autolayout";
-		layout: {
-			direction: AutoLayoutDirection;
-			nodeSep?: number | null;
-			rankSep?: number | null;
-		};
-	}
-}
-type ViewChange = ViewChange.ChangeElementStyle | ViewChange.SaveManualLayout | ViewChange.ChangeAutoLayout;
-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)
-	 *  - `always` – focus ring is displayed when the user navigates with keyboard and mouse
-	 *  - `never` – focus ring is always hidden (not recommended)
-	 */
-	focusRing: "auto" | "always" | "never";
-	/** Rem units scale, change if you customize font-size of `<html />` element
-	 *  default value is `1` (for `100%`/`16px` font-size on `<html />`)
-	 */
-	scale: number;
-	/** Determines whether `font-smoothing` property should be set on the body, `true` by default */
-	fontSmoothing: boolean;
-	/** White color */
-	white: string;
-	/** Black color */
-	black: string;
-	/** Object of colors, key is color name, value is an array of at least 10 strings (colors) */
-	colors: MantineThemeColors;
-	/** Index of theme.colors[color].
-	 *  Primary shade is used in all components to determine which color from theme.colors[color] should be used.
-	 *  Can be either a number (0–9) or an object to specify different color shades for light and dark color schemes.
-	 *  Default value `{ light: 6, dark: 8 }`
-	 *
-	 *  For example,
-	 *  { primaryShade: 6 } // shade 6 is used both for dark and light color schemes
-	 *  { primaryShade: { light: 6, dark: 7 } } // different shades for dark and light color schemes
-	 * */
-	primaryShade: MantineColorShade | MantinePrimaryShade;
-	/** Key of `theme.colors`, hex/rgb/hsl values are not supported.
-	 *  Determines which color will be used in all components by default.
-	 *  Default value – `blue`.
-	 * */
-	primaryColor: string;
-	/** Function to resolve colors based on variant.
-	 *  Can be used to deeply customize how colors are applied to `Button`, `ActionIcon`, `ThemeIcon`
-	 *  and other components that use colors from theme.
-	 * */
-	variantColorResolver: VariantColorsResolver;
-	/** Determines whether text color must be changed based on the given `color` prop in filled variant
-	 *  For example, if you pass `color="blue.1"` to Button component, text color will be changed to `var(--mantine-color-black)`
-	 *  Default value – `false`
-	 * */
-	autoContrast: boolean;
-	/** Determines which luminance value is used to determine if text color should be light or dark.
-	 *  Used only if `theme.autoContrast` is set to `true`.
-	 *  Default value is `0.3`
-	 * */
-	luminanceThreshold: number;
-	/** Font-family used in all components, system fonts by default */
-	fontFamily: string;
-	/** Monospace font-family, used in code and other similar components, system fonts by default  */
-	fontFamilyMonospace: string;
-	/** Controls various styles of h1-h6 elements, used in TypographyStylesProvider and Title components */
-	headings: {
-		fontFamily: string;
-		fontWeight: string;
-		textWrap: "wrap" | "nowrap" | "balance" | "pretty" | "stable";
-		sizes: {
-			h1: HeadingStyle;
-			h2: HeadingStyle;
-			h3: HeadingStyle;
-			h4: HeadingStyle;
-			h5: HeadingStyle;
-			h6: HeadingStyle;
-		};
-	};
-	/** Object of values that are used to set `border-radius` in all components that support it */
-	radius: MantineRadiusValues;
-	/** Key of `theme.radius` or any valid CSS value. Default `border-radius` used by most components */
-	defaultRadius: MantineRadius;
-	/** Object of values that are used to set various CSS properties that control spacing between elements */
-	spacing: MantineSpacingValues;
-	/** Object of values that are used to control `font-size` property in all components */
-	fontSizes: MantineFontSizesValues;
-	/** Object of values that are used to control `line-height` property in `Text` component */
-	lineHeights: MantineLineHeightValues;
-	/** Object of values that are used to control breakpoints in all components,
-	 *  values are expected to be defined in em
-	 * */
-	breakpoints: MantineBreakpointsValues;
-	/** Object of values that are used to add `box-shadow` styles to components that support `shadow` prop */
-	shadows: MantineShadowsValues;
-	/** Determines whether user OS settings to reduce motion should be respected, `false` by default */
-	respectReducedMotion: boolean;
-	/** Determines which cursor type will be used for interactive elements
-	 * - `default` – cursor that is used by native HTML elements, for example, `input[type="checkbox"]` has `cursor: default` styles
-	 * - `pointer` – sets `cursor: pointer` on interactive elements that do not have these styles by default
-	 */
-	cursorType: "default" | "pointer";
-	/** Default gradient configuration for components that support `variant="gradient"` */
-	defaultGradient: MantineGradient;
-	/** Class added to the elements that have active styles, for example, `Button` and `ActionIcon` */
-	activeClassName: string;
-	/** Class added to the elements that have focus styles, for example, `Button` or `ActionIcon`.
-	 *  Overrides `theme.focusRing` property.
-	 */
-	focusClassName: string;
-	/** Allows adding `classNames`, `styles` and `defaultProps` to any component */
-	components: MantineThemeComponents;
-	/** Any other properties that you want to access with the theme objects */
-	other: MantineThemeOther;
-}
-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 MantineGradient {
-	from: string;
-	to: string;
-	deg?: number;
-}
-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;
-}
-type DefaultMantineColor = "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "green" | "lime" | "yellow" | "orange" | "teal" | (string & {});
-interface MantineThemeColorsOverride {
-}
-type MantineThemeColors = MantineThemeColorsOverride extends {
-	colors: Record<infer CustomColors, MantineColorsTuple>;
-} ? Record<CustomColors, MantineColorsTuple> : Record<DefaultMantineColor, MantineColorsTuple>;
-type MantineColor = keyof MantineThemeColors;
-export type ViewData<Views extends string, Tag extends string = string> = DiagramView<Views, Tag>;
-type ElementIconRendererProps = {
-	node: {
-		id: string;
-		title: string;
-		icon?: string | undefined;
-	};
-};
-export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
-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 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;
-	/**
-	 * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
-	 * Conflicts with `interactive`
-	 *
-	 * @default false
-	 */
-	enableFocusMode?: boolean | undefined;
-	/**
-	 * Enable popup with element details
-	 * @default false
-	 */
-	enableElementDetails?: boolean | undefined;
-	/**
-	 * Experimental feature to browse relationships
-	 *
-	 * @default enableElementDetails
-	 */
-	enableRelationshipBrowser?: boolean | undefined;
-	/**
-	 * Display dropdown with details on relationship's label click
-	 * @default enableRelationshipBrowser
-	 */
-	enableRelationshipDetails?: boolean | undefined;
-	where?: WhereOperator<Tag, Kind> | undefined;
-	className?: string | undefined;
-	style?: CSSProperties | undefined;
-	browserClassName?: string | undefined;
-	browserStyle?: CSSProperties | undefined;
-	mantineTheme?: MantineThemeOverride | undefined;
-	/** Function to generate nonce attribute added to all generated `<style />` tags */
-	styleNonce?: string | (() => string) | 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;
-	/** Function to generate nonce attribute added to all generated `<style />` tags */
-	styleNonce?: string | (() => string) | undefined;
-	/**
-	 * Enable popup with element details
-	 * @default true
-	 */
-	enableElementDetails?: boolean | undefined;
-	/**
-	 * Experimental feature to browse relationships
-	 *
-	 * @default enableElementDetails
-	 */
-	enableRelationshipBrowser?: boolean | undefined;
-	/**
-	 * Display dropdown with details on relationship's label click
-	 * @default enableRelationshipBrowser
-	 */
-	enableRelationshipDetails?: boolean | undefined;
-};
-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, enableElementDetails, enableRelationshipBrowser, enableRelationshipDetails, }: 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 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;
-	/**
-	 * 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;
-	/** Function to generate nonce attribute added to all generated `<style />` tags */
-	styleNonce?: string | (() => string) | undefined;
-	/**
-	 * Enable popup with element details
-	 * @default false
-	 */
-	enableElementDetails?: boolean | undefined;
-	/**
-	 * Experimental feature to browse relationships
-	 *
-	 * @default enableElementDetails
-	 */
-	enableRelationshipBrowser?: boolean | undefined;
-	/**
-	 * Display dropdown with details on relationship's label click
-	 * @default enableRelationshipBrowser
-	 */
-	enableRelationshipDetails?: boolean | undefined;
-};
-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, showNavigationButtons, enableFocusMode, showNotations, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, mantineTheme, where, style, styleNonce, }: 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 */
-	patternClassName?: string;
-	/** Gap between repetitions of the pattern */
-	gap?: number | [
-		number,
-		number
-	];
-	/** Size of a single pattern element */
-	size?: number;
-	/** Offset of the pattern */
-	offset?: number | [
-		number,
-		number
-	];
-	/** Line width of the Line pattern */
-	lineWidth?: number;
-	/** Variant of the pattern
-	 * @example BackgroundVariant.Lines, BackgroundVariant.Dots, BackgroundVariant.Cross
-	 * 'lines', 'dots', 'cross'
-	 */
-	variant?: BackgroundVariant;
-	/** Style applied to the container */
-	style?: CSSProperties;
-};
-type XYBackgroundVariant = "dots" | "lines" | "cross";
-type XYBackground = XYBackgroundVariant | OverrideProperties<BackgroundProps, {
-	variant: XYBackgroundVariant;
-}>;
-type DiagramNodeWithNavigate<ID extends string = ViewId> = Omit<DiagramNode, "navigateTo"> & {
-	navigateTo: ID;
-};
-type ElementIconNodeProps = {
-	id: string;
-	title: string;
-	icon?: string | undefined;
-};
-type ElementIconRenderer$1 = (props: {
-	node: ElementIconNodeProps;
-}) => ReactNode;
-type OnNavigateTo<ID extends string = ViewId> = (to: ID, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<ID>) => void;
-type OnNodeClick = (node: DiagramNode, event: ReactMouseEvent) => void;
-type OnEdgeClick = (edge: DiagramEdge, event: ReactMouseEvent) => void;
-type OnCanvasClick = (event: ReactMouseEvent) => void;
-type ChangeEvent = {
-	change: ViewChange;
-};
-type OnChange = (event: ChangeEvent) => void;
-interface LikeC4DiagramProperties {
-	view: DiagramView;
-	className?: string | undefined;
-	/**
-	 * Enable/disable panning
-	 * @default true
-	 */
-	pannable?: boolean | undefined;
-	/**
-	 * Enable/disable zooming
-	 * @default true
-	 */
-	zoomable?: boolean | undefined;
-	/**
-	 * Disable any editing (dragging still can be enabled with `nodesDraggable`)
-	 * @default true
-	 */
-	readonly?: boolean | undefined;
-	/**
-	 * Show/hide panel with top left controls,
-	 *
-	 * @default true if not readonly
-	 */
-	controls?: boolean | undefined;
-	/**
-	 * If set, initial viewport will show all nodes & edges
-	 * @default true
-	 */
-	fitView?: boolean | undefined;
-	/**
-	 * Seems like this is percentage of the view size
-	 * @default 0
-	 */
-	fitViewPadding?: number | undefined;
-	/**
-	 * @default false if readonly
-	 */
-	nodesSelectable?: boolean | undefined;
-	/**
-	 * @default false if readonly
-	 */
-	nodesDraggable?: boolean | undefined;
-	initialWidth?: number | undefined;
-	initialHeight?: number | undefined;
-	/**
-	 * Keep aspect ratio of the diagram
-	 * @default false
-	 */
-	keepAspectRatio?: boolean | undefined;
-	/**
-	 * Background pattern
-	 * @default 'dots'
-	 */
-	background?: "transparent" | "solid" | XYBackground | undefined;
-	/**
-	 * Display webview with diagram title / description
-	 * @default true
-	 */
-	showDiagramTitle?: boolean | undefined;
-	/**
-	 * Show back/forward history navigation buttons
-	 * @default true if `onNavigateTo` is set
-	 */
-	showNavigationButtons?: undefined | boolean;
-	/**
-	 * Display notations of the view
-	 * @default true
-	 */
-	showNotations?: boolean | undefined;
-	/**
-	 * Display dropdown with details on relationship's label click
-	 * @default false
-	 */
-	enableRelationshipDetails?: boolean | undefined;
-	/**
-	 * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
-	 * @default false
-	 */
-	enableFocusMode?: boolean | undefined;
-	/**
-	 * Enable search popup for elements and views
-	 * @default true
-	 */
-	enableSearch?: boolean | undefined;
-	/**
-	 * Enable modal with element details
-	 * @default false
-	 */
-	enableElementDetails?: boolean | undefined;
-	/**
-	 * Experimental feature to browse relationships
-	 *
-	 * @default false
-	 */
-	enableRelationshipBrowser?: boolean | undefined;
-	/**
-	 * If Walkthrough for dynamic views should be enabled
-	 * @default false
-	 */
-	enableDynamicViewWalkthrough?: boolean | undefined;
-	/**
-	 * Experimental feature to enable edge editing
-	 * @default false
-	 */
-	experimentalEdgeEditing?: boolean | undefined;
-	/**
-	 * 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;
-}
-type OpenSourceParams = {
-	element: Fqn;
-	property?: string;
-} | {
-	relation: RelationId;
-} | {
-	deployment: Fqn;
-	property?: string;
-} | {
-	view: ViewId;
-};
-interface LikeC4DiagramEventHandlers {
-	onChange?: OnChange | null | undefined;
-	onNavigateTo?: OnNavigateTo | null | undefined;
-	onNodeClick?: OnNodeClick | null | undefined;
-	onNodeContextMenu?: OnNodeClick | null | undefined;
-	onCanvasContextMenu?: OnCanvasClick | null | undefined;
-	onEdgeClick?: OnEdgeClick | null | undefined;
-	onEdgeContextMenu?: OnEdgeClick | null | undefined;
-	onCanvasClick?: OnCanvasClick | null | undefined;
-	onCanvasDblClick?: OnCanvasClick | null | undefined;
-	onBurgerMenuClick?: null | undefined | (() => void);
-	onOpenSource?: null | undefined | ((params: OpenSourceParams) => void);
-}
-type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers;
-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;
-	/** 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, styleNonce, ...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 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]>;
-};
-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> {
-	/**
-	 * @default
-	 * ```ts
-	 * [store, options.keys]
-	 * ```
-	 */
-	deps?: DependencyList;
-	/**
-	 * Will re-render components only on specific key changes.
-	 */
-	keys?: StoreKeys<SomeStore>[];
-}
-declare function useStore<SomeStore extends Store>(store: SomeStore, options?: UseStoreOptions<SomeStore>): StoreValue<SomeStore>;
-export declare const FontCss: string;
-export declare const DefaultTheme: MantineThemeOverride;
-export declare const BundledStyles: () => any;
-export declare function useBundledStyleSheet(injectFontCss: boolean, styleNonce?: string | (() => string) | undefined): CSSStyleSheet[];
-type ColorScheme = "light" | "dark";
-export declare function useColorScheme(explicit?: ColorScheme): ColorScheme;
-export declare const ViewNotFound: ({ viewId }: {
-	viewId: string;
-}) => import("react/jsx-runtime").JSX.Element;
-type LikeC4ModelProviderProps = PropsWithChildren<{
-	likec4model: any;
-}>;
-export declare const LikeC4ModelProvider: (props: LikeC4ModelProviderProps) => JSX.Element;
-
-declare namespace nano {
-	export { atom, computed, map, useStore };
-}
-
-export {
-	nano,
-};
-
-export {};
+import { CSSProperties } from 'react';
+import type { DependencyList } from 'react';
+import { DiagramEdge } from '@likec4/core';
+import { DiagramNode } from '@likec4/core';
+import { DiagramView } from '@likec4/core';
+import { Fqn } from '@likec4/core';
+import { JSX } from 'react/jsx-runtime';
+import { JSX as JSX_2 } from 'react';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+import { RelationId } from '@likec4/core';
+import { ViewChange } from '@likec4/core';
+import { ViewId } from '@likec4/core';
+import { WhereOperator } from '@likec4/core';
+
+declare type AllKeys<T> = T extends any ? keyof T : never
+
+declare type AnyStore<Value = any> = {
+    get(): Value
+    readonly value: undefined | Value
+}
+
+/**
+ * Create store with atomic value. It could be a string or an object, which you
+ * will replace completely.
+ *
+ * If you want to change keys in the object inside store, use {@link map}.
+ *
+ * ```js
+ * import { atom, onMount } from 'nanostores'
+ *
+ * // Initial value
+ * export const $router = atom({ path: '', page: 'home' })
+ *
+ * function parse () {
+ *   $router.set({ path: location.pathname, page: parse(location.pathname) })
+ * }
+ *
+ * // Listen for URL changes on first store’s listener.
+ * onMount($router, () => {
+ *   parse()
+ *   window.addEventListener('popstate', parse)
+ *   return () => {
+ *     window.removeEventListener('popstate', parse)
+ *   }
+ * })
+ * ```
+ *
+ * @param initialValue Initial value of the store.
+ * @returns The store object with methods to subscribe.
+ */
+declare function atom<Value, StoreExt = {}>(
+...args: undefined extends Value ? [] | [Value] : [Value]
+): PreinitializedWritableAtom<Value> & StoreExt
+
+export declare const BundledStyles: () => any;
+
+declare type ChangeEvent = {
+    change: ViewChange;
+};
+
+declare type ColorScheme = 'light' | 'dark';
+
+declare 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;
+
+declare type DiagramNodeWithNavigate<ID = ViewId> = Omit<DiagramNode, 'navigateTo'> & {
+    navigateTo: ID;
+};
+
+declare type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
+
+declare type ElementIconRendererProps = {
+    node: {
+        id: string;
+        title: string;
+        icon?: string | null | undefined;
+    };
+};
+
+export declare const FontCss: string;
+
+declare type Get<T, K extends KeyofBase> = Extract<T, { [K1 in K]: any }>[K]
+
+declare type KeyofBase = keyof any
+
+declare interface LikeC4BrowserProps {
+    /**
+     * Background pattern for the browser view.
+     * @default 'dots'
+     */
+    background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined;
+    /**
+     * If double click on a node should enable focus mode
+     *
+     * @default true
+     */
+    enableFocusMode?: boolean | undefined;
+    /**
+     * Enable popup with element details
+     * @default true
+     */
+    enableElementDetails?: boolean | undefined;
+    /**
+     * Experimental feature to browse relationships
+     *
+     * @default enableElementDetails
+     */
+    enableRelationshipBrowser?: boolean | undefined;
+    /**
+     * Display dropdown with details on relationship's label click
+     * @default enableRelationshipBrowser
+     */
+    enableRelationshipDetails?: boolean | undefined;
+    /**
+     * Display notations of the view
+     * @default true
+     */
+    showNotations?: boolean | undefined;
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
+}
+
+declare interface LikeC4DiagramEventHandlers {
+    onChange?: OnChange | null | undefined;
+    onNavigateTo?: OnNavigateTo | null | undefined;
+    onNodeClick?: OnNodeClick | null | undefined;
+    onNodeContextMenu?: OnNodeClick | null | undefined;
+    onCanvasContextMenu?: OnCanvasClick | null | undefined;
+    onEdgeClick?: OnEdgeClick | null | undefined;
+    onEdgeContextMenu?: OnEdgeClick | null | undefined;
+    onCanvasClick?: OnCanvasClick | null | undefined;
+    onCanvasDblClick?: OnCanvasClick | null | undefined;
+    onBurgerMenuClick?: null | undefined | (() => void);
+    onOpenSource?: null | undefined | ((params: OpenSourceParams) => void);
+}
+
+declare interface LikeC4DiagramProperties {
+    view: DiagramView;
+    className?: string | undefined;
+    /**
+     * Enable/disable panning
+     * @default true
+     */
+    pannable?: boolean | undefined;
+    /**
+     * Enable/disable zooming
+     * @default true
+     */
+    zoomable?: boolean | undefined;
+    /**
+     * Disable any editing (dragging still can be enabled with `nodesDraggable`)
+     * @default true
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Show/hide panel with top left controls,
+     *
+     * @default true if not readonly
+     */
+    controls?: boolean | undefined;
+    /**
+     * If set, initial viewport will show all nodes & edges
+     * @default true
+     */
+    fitView?: boolean | undefined;
+    /**
+     * Seems like this is percentage of the view size
+     * @default 0
+     */
+    fitViewPadding?: number | undefined;
+    /**
+     * @default false if readonly
+     */
+    nodesSelectable?: boolean | undefined;
+    /**
+     * @default false if readonly
+     */
+    nodesDraggable?: boolean | undefined;
+    initialWidth?: number | undefined;
+    initialHeight?: number | undefined;
+    /**
+     * Background pattern
+     * @default 'dots'
+     */
+    background?: 'transparent' | 'solid' | 'dots' | 'lines' | 'cross' | undefined;
+    /**
+     * Display webview with diagram title / description
+     * @default true
+     */
+    showDiagramTitle?: boolean | undefined;
+    /**
+     * Show back/forward history navigation buttons
+     * @default true if `onNavigateTo` is set
+     */
+    showNavigationButtons?: undefined | boolean;
+    /**
+     * Display notations of the view
+     * @default true
+     */
+    showNotations?: boolean | undefined;
+    /**
+     * Display dropdown with details on relationship's label click
+     * @default false
+     */
+    enableRelationshipDetails?: boolean | undefined;
+    /**
+     * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+     * @default false
+     */
+    enableFocusMode?: boolean | undefined;
+    /**
+     * Enable search popup for elements and views
+     * @default true
+     */
+    enableSearch?: boolean | undefined;
+    /**
+     * Enable modal with element details
+     * @default false
+     */
+    enableElementDetails?: boolean | undefined;
+    /**
+     * Experimental feature to browse relationships
+     *
+     * @default false
+     */
+    enableRelationshipBrowser?: boolean | undefined;
+    /**
+     * If Walkthrough for dynamic views should be enabled
+     * @default false
+     */
+    enableDynamicViewWalkthrough?: boolean | undefined;
+    /**
+     * Experimental feature to enable edge editing
+     * @default false
+     */
+    experimentalEdgeEditing?: boolean | undefined;
+    /**
+     * Render icon for an element, bundled or remote
+     * By default, if icon is http:// or https://, it will be rendered as an image
+     */
+    renderIcon?: ElementIconRenderer | undefined;
+    /**
+     * Dynamic filter, applies both to nodes and edges
+     */
+    where?: WhereOperator<string, string> | undefined;
+}
+
+declare type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers;
+
+export declare const LikeC4ModelProvider: (props: LikeC4ModelProviderProps) => JSX_2.Element;
+
+declare type LikeC4ModelProviderProps = PropsWithChildren<{
+    likec4model: any;
+}>;
+
+export declare function LikeC4View<ViewId extends string = string, Tag = string, Kind = string>({ viewId, ...props }: LikeC4ViewProps<ViewId, Tag, Kind>): JSX.Element;
+
+export declare interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
+    /**
+     * View to display.
+     */
+    viewId: ViewId;
+    /**
+     * Enable/disable panning
+     * @default false
+     */
+    pannable?: boolean | undefined;
+    /**
+     * Enable/disable zooming
+     * @default false
+     */
+    zoomable?: boolean | undefined;
+    /**
+     * @default true
+     */
+    keepAspectRatio?: boolean | undefined;
+    /**
+     * Background pattern
+     * @default 'transparent'
+     */
+    background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined;
+    /**
+     * Click on the view opens a modal with browser.
+     * You can customize or disable the browser view.
+     */
+    browser?: boolean | LikeC4BrowserProps | 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;
+    /**
+     * Show/hide panel with top left controls,
+     * @default false
+     */
+    controls?: boolean | undefined;
+    /**
+     * If set, initial viewport will show all nodes & edges
+     * @default true
+     */
+    fitView?: boolean | undefined;
+    /**
+     * Seems like this is percentage of the view size
+     * @default 0.05
+     */
+    fitViewPadding?: number | 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;
+    /**
+     * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+     * Conflicts with `interactive`
+     *
+     * @default false
+     */
+    enableFocusMode?: boolean | undefined;
+    /**
+     * Enable popup with element details
+     * @default false
+     */
+    enableElementDetails?: boolean | undefined;
+    /**
+     * Experimental feature to browse relationships
+     *
+     * @default enableElementDetails
+     */
+    enableRelationshipBrowser?: boolean | undefined;
+    /**
+     * Display dropdown with details on relationship's label click
+     * @default enableRelationshipBrowser
+     */
+    enableRelationshipDetails?: boolean | undefined;
+    where?: WhereOperator<Tag, Kind> | undefined;
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
+    mantineTheme?: any;
+    /** Function to generate nonce attribute added to all generated `<style />` tags */
+    styleNonce?: string | (() => string) | undefined;
+    /**
+     * Render custom icon for a node
+     * By default, if icon is http:// or https://, it will be rendered as an image
+     */
+    renderIcon?: ElementIconRenderer | undefined;
+}
+
+/**
+ * Create map store. Map store is a store with key-value object
+ * as a store value.
+ *
+ * @param init Initialize store and return store destructor.
+ * @returns The store object with methods to subscribe.
+ */
+declare function map<Value extends object, StoreExt extends object = {}>(
+value?: Value
+): PreinitializedMapStore<Value> & StoreExt
+
+declare 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
+}
+
+export declare namespace nano {
+    export {
+        atom,
+        computed,
+        map,
+        useStore
+    }
+}
+
+/**
+ * On pane/canvas click (not on any node or edge)
+ */
+declare type OnCanvasClick = (event: MouseEvent_2) => void;
+
+declare type OnChange = (event: ChangeEvent) => void;
+
+declare type OnEdgeClick = (edge: DiagramEdge, event: MouseEvent_2) => void;
+
+declare type OnNavigateTo<ID = ViewId> = (to: ID, event?: MouseEvent_2, element?: DiagramNodeWithNavigate<ID>) => void;
+
+declare type OnNodeClick = (node: DiagramNode, event: MouseEvent_2) => void;
+
+declare type OpenSourceParams = {
+    element: Fqn;
+    property?: string;
+} | {
+    relation: RelationId;
+} | {
+    deployment: Fqn;
+    property?: string;
+} | {
+    view: ViewId;
+};
+
+declare interface PreinitializedMapStore<Value extends object = any>
+extends MapStore<Value> {
+    readonly value: Value
+}
+
+declare interface PreinitializedWritableAtom<Value extends any>
+extends WritableAtom<Value> {
+    readonly value: Value
+}
+
+declare type Primitive = boolean | number | string
+
+export declare function ReactLikeC4<ViewId extends string = string, Tag = string, Kind = string>({ viewId, ...props }: ReactLikeC4Props<ViewId, Tag, Kind>): JSX.Element;
+
+export declare namespace ReactLikeC4 {
+    var displayName: string;
+}
+
+export declare type ReactLikeC4Props<ViewId = string, Tag = string, Kind = string> = Omit<LikeC4DiagramProps, 'view' | 'where' | 'onNavigateTo'> & {
+    viewId: ViewId;
+    /**
+     * Keep aspect ratio of the diagram
+     * Disable if you need to manage the viewport (use className)
+     *
+     * @default true
+     */
+    keepAspectRatio?: boolean | undefined;
+    /**
+     * By default determined by the user's system preferences.
+     */
+    colorScheme?: 'light' | 'dark' | undefined;
+    /**
+     * LikeC4 views are using 'IBM Plex Sans' font.
+     * By default, component injects the CSS to document head.
+     * Set to false if you want to handle the font yourself.
+     *
+     * @default true
+     */
+    injectFontCss?: boolean | undefined;
+    style?: CSSProperties | undefined;
+    where?: WhereOperator<Tag, Kind> | undefined;
+    onNavigateTo?: OnNavigateTo<ViewId> | undefined;
+    mantineTheme?: any;
+    /** Function to generate nonce attribute added to all generated `<style />` tags */
+    styleNonce?: string | (() => string) | undefined;
+};
+
+/**
+ * Store object.
+ */
+declare 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
+}
+
+declare type ReadonlyIfObject<Value> = Value extends undefined
+? Value
+: Value extends (...args: any) => any
+? Value
+: Value extends Primitive
+? Value
+: Value extends object
+? Readonly<Value>
+: Value
+
+declare type Store<Value = any> = ReadableAtom<Value> | WritableStore<Value>
+
+declare type StoreKeys<T> = T extends { setKey: (k: infer K, v: any) => unknown }
+? K
+: never
+
+declare type StoreValue<SomeStore> = SomeStore extends {
+    get(): infer Value
+}
+? Value
+: any
+
+declare type StoreValues<Stores extends AnyStore[]> = {
+    [Index in keyof Stores]: StoreValue<Stores[Index]>
+}
+
+declare interface Task<Value> extends Promise<Value> {
+    t: true
+}
+
+export declare function useBundledStyleSheet(injectFontCss: boolean, styleNonce?: string | (() => string) | undefined): CSSStyleSheet[];
+
+export declare function useColorScheme(explicit?: ColorScheme): ColorScheme;
+
+/**
+ * Subscribe to store changes and get store’s value.
+ *
+ * Can be user with store builder too.
+ *
+ * ```js
+ * import { useStore } from 'nanostores/react'
+ *
+ * import { router } from '../store/router'
+ *
+ * export const Layout = () => {
+ *   let page = useStore(router)
+ *   if (page.route === 'home') {
+ *     return <HomePage />
+ *   } else {
+ *     return <Error404 />
+ *   }
+ * }
+ * ```
+ *
+ * @param store Store instance.
+ * @returns Store value.
+ */
+declare function useStore<SomeStore extends Store>(
+store: SomeStore,
+options?: UseStoreOptions<SomeStore>
+): StoreValue<SomeStore>
+
+declare interface UseStoreOptions<SomeStore> {
+    /**
+     * @default
+     * ```ts
+     * [store, options.keys]
+     * ```
+     */
+    deps?: DependencyList
+
+    /**
+     * Will re-render components only on specific key changes.
+     */
+    keys?: StoreKeys<SomeStore>[]
+}
+
+/**
+ * Store with a way to manually change the value.
+ */
+declare 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
+}
+
+declare type WritableStore<Value = any> =
+| (Value extends object ? MapStore<Value> : never)
+| WritableAtom<Value>
+
+export { }