likec4 1.9.0 → 1.10.0

package/react/index.d.ts

@@ -1,9 +1,1064 @@
-import '@mantine/core/styles.css';
-import '@xyflow/react/dist/style.css';
-export { LikeC4Browser } from './LikeC4Browser';
-export { LikeC4ViewElement } from './LikeC4ViewElement';
-export { useColorScheme, useCreateStyleSheet } from './styles';
-export type * from './LikeC4Browser';
-export type * from './LikeC4ViewElement';
-export type * from './types';
-export type * from './types-filter';
+// Generated by dts-bundle-generator v9.5.1
+
+import { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+
+declare const BorderStyles: readonly [
+	"solid",
+	"dashed",
+	"dotted",
+	"none"
+];
+declare const ElementShapes: readonly [
+	"rectangle",
+	"person",
+	"browser",
+	"mobile",
+	"cylinder",
+	"storage",
+	"queue"
+];
+declare const ThemeColors: readonly [
+	"amber",
+	"blue",
+	"gray",
+	"slate",
+	"green",
+	"indigo",
+	"muted",
+	"primary",
+	"red",
+	"secondary",
+	"sky"
+];
+declare const tag: unique symbol;
+declare enum BackgroundVariant {
+	Lines = "lines",
+	Dots = "dots",
+	Cross = "cross"
+}
+declare namespace ViewChange {
+	interface ChangeElementStyle {
+		op: "change-element-style";
+		style: {
+			border?: BorderStyle;
+			opacity?: number;
+			shape?: ElementShape;
+			color?: ThemeColor;
+		};
+		targets: NonEmptyArray<Fqn>;
+	}
+	interface SaveManualLayout {
+		op: "save-manual-layout";
+		layout: ViewManualLayout;
+	}
+	interface ChangeAutoLayout {
+		op: "change-autolayout";
+		layout: AutoLayoutDirection;
+	}
+}
+export declare const BundledStyles: () => any;
+export declare const DefaultTheme: MantineThemeOverride;
+export declare function LikeC4Browser<ViewId extends string, Tag extends string, Kind extends string>({ className, colorScheme, view, injectFontCss, onNavigateTo, onClose, renderIcon, where, style, mantineTheme, background }: LikeC4BrowserProps<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4ViewEmbedded<ViewId extends string, Tag extends string, Kind extends string>({ onNavigateTo: _onNavigateTo, className, view, injectFontCss, colorScheme, background, renderIcon, showDiagramTitle, showElementLinks, showNavigationButtons, enableFocusMode, showNotations, mantineTheme, where, style }: LikeC4ViewEmbeddedProps<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
+export declare function ReactLikeC4<ViewId extends string = ViewID, Tag extends string = Tag$1, Kind extends string = ElementKind>({ className, view, colorScheme: explicitColorScheme, injectFontCss, keepAspectRatio, showNotations, onNavigateTo, background, style, mantineTheme, ...props }: ReactLikeC4Props<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
+export declare function useBundledStyleSheet(injectFontCss?: boolean): CSSStyleSheet[];
+export declare function useColorScheme(explicit?: ColorScheme): ColorScheme;
+export declare namespace ReactLikeC4 {
+	var displayName: string;
+}
+export type LikeC4BrowserProps<ViewId extends string, Tag extends string, Kind extends string> = Pick<HTMLAttributes<HTMLDialogElement>, "style" | "className"> & {
+	view: ViewData<ViewId>;
+	/**
+	 * By default determined by the user's system preferences.
+	 */
+	colorScheme?: "light" | "dark";
+	/**
+	 * LikeC4 views are using 'IBM Plex Sans' font.
+	 * By default, component injects the CSS to document head.
+	 * Set to false if you want to handle the font yourself.
+	 *
+	 * @default true
+	 */
+	injectFontCss?: boolean | undefined;
+	/**
+	 * Background pattern
+	 * @default 'dots'
+	 */
+	background?: "dots" | "lines" | "cross" | "transparent" | "solid" | undefined;
+	onNavigateTo: (to: ViewId) => void;
+	onClose: () => void;
+	/**
+	 * Render custom icon for a node
+	 * By default, if icon is http:// or https://, it will be rendered as an image
+	 */
+	renderIcon?: ElementIconRenderer | undefined;
+	where?: WhereOperator<Tag, Kind> | undefined;
+	mantineTheme?: MantineThemeOverride | undefined;
+};
+export type LikeC4ViewEmbeddedProps<ViewId extends string, Tag extends string, Kind extends string> = Pick<HTMLAttributes<HTMLDivElement>, "style" | "className"> & {
+	view: ViewData<ViewId>;
+	/**
+	 * By default determined by the user's system preferences.
+	 */
+	colorScheme?: "light" | "dark";
+	/**
+	 * LikeC4 views are using 'IBM Plex Sans' font.
+	 * By default, component injects the CSS to document head.
+	 * Set to false if you want to handle the font yourself.
+	 *
+	 * @default true
+	 */
+	injectFontCss?: boolean | undefined;
+	/**
+	 * Background pattern
+	 * @default 'transparent'
+	 */
+	background?: "dots" | "lines" | "cross" | "transparent" | "solid" | undefined;
+	onNavigateTo?: ((to: ViewId) => void) | undefined;
+	/**
+	 * Render custom icon for a node
+	 * By default, if icon is http:// or https://, it will be rendered as an image
+	 */
+	renderIcon?: ElementIconRenderer | undefined;
+	/**
+	 * Display hovercards with element links
+	 * @default true
+	 */
+	showElementLinks?: boolean | undefined;
+	/**
+	 * Display panel with diagram title / description
+	 * @default false
+	 */
+	showDiagramTitle?: boolean | undefined;
+	/**
+	 * Show back/forward navigation buttons
+	 * @default false
+	 */
+	showNavigationButtons?: undefined | boolean;
+	/**
+	 * Display notations of the view
+	 * @default false
+	 */
+	showNotations?: boolean | undefined;
+	/**
+	 * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+	 * @default false
+	 */
+	enableFocusMode?: boolean | undefined;
+	where?: WhereOperator<Tag, Kind> | undefined;
+	mantineTheme?: MantineThemeOverride | undefined;
+};
+export type LikeC4ViewProps<ViewId extends string, Tag extends string, Kind extends string> = {
+	/**
+	 * View to display.
+	 */
+	viewId: ViewId;
+	/**
+	 * Background pattern
+	 * @default 'transparent'
+	 */
+	background?: "dots" | "lines" | "cross" | "transparent" | "solid" | undefined;
+	/**
+	 * Background pattern for the browser view.
+	 * @default 'dots'
+	 */
+	browserBackground?: "dots" | "lines" | "cross" | "transparent" | "solid" | undefined;
+	/**
+	 * Click on the view opens a modal with browser.
+	 *
+	 * @default true
+	 */
+	interactive?: boolean;
+	/**
+	 * By default determined by the user's system preferences.
+	 */
+	colorScheme?: "light" | "dark" | undefined;
+	/**
+	 * LikeC4 views are using 'IBM Plex Sans' font.
+	 * By default, component injects the CSS to document head.
+	 * Set to false if you want to handle the font yourself.
+	 *
+	 * @default true
+	 */
+	injectFontCss?: boolean | undefined;
+	/**
+	 * Display hovercards with element links
+	 * @default true
+	 */
+	showElementLinks?: boolean | undefined;
+	/**
+	 * Display panel with diagram title / description
+	 * @default false
+	 */
+	showDiagramTitle?: boolean | undefined;
+	/**
+	 * Show back/forward navigation buttons
+	 * @default false
+	 */
+	showNavigationButtons?: undefined | boolean;
+	/**
+	 * Display notations of the view
+	 * @default false
+	 */
+	showNotations?: boolean | undefined;
+	/**
+	 * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+	 * Conflicts with `interactive`
+	 *
+	 * @default false
+	 */
+	enableFocusMode?: boolean | undefined;
+	where?: WhereOperator<Tag, Kind> | undefined;
+	className?: string | undefined;
+	style?: CSSProperties | undefined;
+	browserClassName?: string | undefined;
+	browserStyle?: CSSProperties | undefined;
+	mantineTheme?: MantineThemeOverride | undefined;
+};
+export type ReactLikeC4Props<ViewId extends string = ViewID, Tag extends string = Tag$1, Kind extends string = ElementKind> = Omit<LikeC4DiagramProps, "view" | "where" | "onNavigateTo"> & {
+	view: ViewData<ViewId>;
+	/**
+	 * Keep aspect ratio of the diagram
+	 * Disable if you need to manage the viewport (use className)
+	 *
+	 * @default true
+	 */
+	keepAspectRatio?: boolean | undefined;
+	/**
+	 * By default determined by the user's system preferences.
+	 */
+	colorScheme?: "light" | "dark" | undefined;
+	/**
+	 * LikeC4 views are using 'IBM Plex Sans' font.
+	 * By default, component injects the CSS to document head.
+	 * Set to false if you want to handle the font yourself.
+	 *
+	 * @default true
+	 */
+	injectFontCss?: boolean | undefined;
+	style?: CSSProperties | undefined;
+	where?: WhereOperator<Tag, Kind> | undefined;
+	onNavigateTo?: OnNavigateTo<ViewId> | undefined;
+	mantineTheme?: MantineThemeOverride | undefined;
+};
+export type ViewData<ViewId extends string> = Omit<DiagramView, "id"> & {
+	id: ViewId;
+};
+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 BasicElementView extends BasicView<"element"> {
+	readonly viewOf?: Fqn;
+	readonly rules: ViewRule[];
+}
+interface BasicView<ViewType extends "element" | "dynamic"> {
+	readonly __?: ViewType;
+	readonly id: ViewID;
+	readonly title: string | null;
+	readonly description: string | null;
+	readonly tags: NonEmptyArray<Tag$1> | null;
+	readonly links: NonEmptyArray<Link> | null;
+	/**
+	 * URI to the source file of this view.
+	 * Undefined if the view is auto-generated.
+	 */
+	readonly docUri?: string;
+	/**
+	 * For all views we find common ancestor path.
+	 * This is used to generate relative paths, i.e.:
+	 * - "/home/project/index.c4" becomes "index.c4"
+	 * - "/home/project/subdir/views.c4" becomes "subdir/views.c4"
+	 *
+	 * Undefined if the view is auto-generated.
+	 */
+	readonly relativePath?: string;
+	/**
+	 * If the view is changed manually this field contains the layout data.
+	 */
+	readonly manualLayout?: ViewManualLayout | undefined;
+	readonly customColorDefinitions: CustomColorDefinitions;
+}
+interface ComputedDynamicView extends Omit<DynamicView, "rules" | "steps" | "docUri">, ViewWithHash, ViewWithNotation {
+	readonly autoLayout: ViewRuleAutoLayout["autoLayout"];
+	readonly nodes: ComputedNode[];
+	readonly edges: ComputedEdge[];
+	steps?: never;
+	rules?: never;
+	docUri?: never;
+}
+interface ComputedEdge {
+	id: EdgeId;
+	parent: NodeId | null;
+	source: NodeId;
+	target: NodeId;
+	label: string | null;
+	description?: string;
+	technology?: string;
+	relations: RelationID[];
+	kind?: RelationshipKind;
+	notation?: string;
+	notes?: string;
+	color?: Color;
+	line?: RelationshipLineType;
+	head?: RelationshipArrowType;
+	tail?: RelationshipArrowType;
+	tags?: NonEmptyArray<Tag$1>;
+	navigateTo?: ViewID;
+	/**
+	 * If this edge is derived from custom relationship predicate
+	 */
+	isCustomized?: boolean;
+	/**
+	 * For layouting purposes
+	 * @default 'forward'
+	 */
+	dir?: "forward" | "back";
+}
+interface ComputedElementView extends Omit<ElementView, "rules" | "docUri">, ViewWithHash, ViewWithNotation {
+	readonly extends?: ViewID;
+	readonly autoLayout: ViewRuleAutoLayout["autoLayout"];
+	readonly nodes: ComputedNode[];
+	readonly edges: ComputedEdge[];
+	rules?: never;
+	docUri?: never;
+}
+interface ComputedNode {
+	id: NodeId;
+	kind: ElementKind;
+	parent: NodeId | null;
+	title: string;
+	description: string | null;
+	technology: string | null;
+	notation?: string;
+	tags: NonEmptyArray<Tag$1> | null;
+	links: NonEmptyArray<Link> | null;
+	children: NodeId[];
+	inEdges: EdgeId[];
+	outEdges: EdgeId[];
+	shape: ElementShape;
+	/**
+	 * @deprecated Use `style` instead
+	 */
+	color: Color;
+	/**
+	 * @deprecated Use `style` instead
+	 */
+	icon?: IconUrl;
+	style: ElementStyle;
+	navigateTo?: ViewID;
+	level: number;
+	depth?: number;
+	/**
+	 * If this node was customized in the view
+	 */
+	isCustomized?: boolean;
+}
+interface 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 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;
+	};
+}
+interface DiagramEdge extends ComputedEdge {
+	points: NonEmptyArray<Point>;
+	controlPoints?: NonEmptyArray<XYPoint>;
+	labelBBox?: BBox | null;
+	dotpos?: string;
+}
+interface DiagramNode extends ComputedNode {
+	width: number;
+	height: number;
+	position: Point;
+	labelBBox: BBox;
+}
+interface DiagramView extends Omit<ComputedView, "nodes" | "edges" | "manualLayout"> {
+	readonly nodes: DiagramNode[];
+	readonly edges: DiagramEdge[];
+	readonly bounds: BBox;
+	/**
+	 * If diagram has manual layout
+	 * But was changed and layout should be recalculated
+	 */
+	hasLayoutDrift?: boolean;
+	manualLayout?: never;
+}
+interface DynamicView extends BasicView<"dynamic"> {
+	readonly __: "dynamic";
+	readonly steps: DynamicViewStepOrParallel[];
+	readonly rules: DynamicViewRule[];
+}
+interface DynamicViewParallelSteps {
+	readonly __parallel: DynamicViewStep[];
+}
+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 ElementKindExpr extends Omit<BaseExpr, "elementKind" | "isEqual"> {
+	elementKind: ElementKind;
+	isEqual: boolean;
+}
+interface ElementRefExpr extends Omit<BaseExpr, "element" | "isDescedants"> {
+	element: Fqn;
+	isDescedants?: boolean;
+}
+interface ElementStyle {
+	border?: BorderStyle;
+	opacity?: number;
+}
+interface ElementTagExpr extends Omit<BaseExpr, "elementTag" | "isEqual"> {
+	elementTag: Tag$1;
+	isEqual: boolean;
+}
+interface ElementThemeColorValues {
+	fill: ColorLiteral;
+	stroke: ColorLiteral;
+	hiContrast: ColorLiteral;
+	loContrast: ColorLiteral;
+}
+interface ElementWhereExpr extends Omit<BaseExpr, "where"> {
+	where: {
+		expr: ElementExpression;
+		condition: WhereOperator<string, string>;
+	};
+}
+interface ExpandedElementExpr extends Omit<BaseExpr, "expanded"> {
+	expanded: Fqn;
+}
+interface ExtendsElementView extends BasicElementView {
+	readonly extends: ViewID;
+}
+interface HeadingStyle {
+	fontSize: string;
+	fontWeight?: string;
+	lineHeight: string;
+}
+interface InOutExpr extends Omit<BaseExpr, "inout"> {
+	inout: ElementExpression;
+}
+interface IncomingExpr extends Omit<BaseExpr, "incoming"> {
+	incoming: ElementExpression;
+}
+interface LikeC4DiagramEventHandlers {
+	onChange?: OnChange | null | undefined;
+	onNavigateTo?: OnNavigateTo | null | undefined;
+	onNodeClick?: OnNodeClick | null | undefined;
+	onNodeContextMenu?: OnNodeClick | null | undefined;
+	onCanvasContextMenu?: OnCanvasClick | null | undefined;
+	onEdgeClick?: OnEdgeClick | null | undefined;
+	onEdgeContextMenu?: OnEdgeClick | null | undefined;
+	onCanvasClick?: OnCanvasClick | null | undefined;
+	onCanvasDblClick?: OnCanvasClick | null | undefined;
+	onBurgerMenuClick?: null | undefined | (() => void);
+	onOpenSourceView?: null | undefined | (() => void);
+	onOpenSourceElement?: null | undefined | ((fqn: Fqn) => void);
+	onOpenSourceRelation?: null | undefined | ((id: RelationID) => void);
+}
+interface LikeC4DiagramProperties {
+	view: DiagramView;
+	className?: string | undefined;
+	/**
+	 * Show/hide ReactFlow controls menu
+	 * @default false
+	 */
+	controls?: boolean | undefined;
+	/**
+	 * Enable/disable panning
+	 * @default true
+	 */
+	pannable?: boolean | undefined;
+	/**
+	 * Enable/disable zooming
+	 * @default true
+	 */
+	zoomable?: boolean | undefined;
+	/**
+	 * Disable any editing (dragging still can be enabled with `nodesDraggable`)
+	 * @default true
+	 */
+	readonly?: boolean | undefined;
+	/**
+	 * If set, initial viewport will show all nodes & edges
+	 * @default true
+	 */
+	fitView?: boolean | undefined;
+	/**
+	 * Seems like this is percentage of the view size
+	 * @default 0
+	 */
+	fitViewPadding?: number | undefined;
+	/**
+	 * @default false if readonly
+	 */
+	nodesSelectable?: boolean | undefined;
+	/**
+	 * @default false if readonly
+	 */
+	nodesDraggable?: boolean | undefined;
+	initialWidth?: number | undefined;
+	initialHeight?: number | undefined;
+	/**
+	 * Keep aspect ratio of the diagram
+	 * @default false
+	 */
+	keepAspectRatio?: boolean | undefined;
+	/**
+	 * Background pattern
+	 * @default 'dots'
+	 */
+	background?: "transparent" | "solid" | XYBackground | undefined;
+	/**
+	 * Display hovercards with element links
+	 * @default true
+	 */
+	showElementLinks?: boolean | undefined;
+	/**
+	 * Display panel with diagram title / description
+	 * @default true
+	 */
+	showDiagramTitle?: boolean | undefined;
+	/**
+	 * Show back/forward navigation buttons
+	 * @default true if `onNavigateTo` is set
+	 */
+	showNavigationButtons?: undefined | boolean;
+	/**
+	 * Display notations of the view
+	 * @default true
+	 */
+	showNotations?: boolean | undefined;
+	/**
+	 * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+	 * @default true
+	 */
+	enableFocusMode?: boolean | undefined;
+	/**
+	 * If Walkthrough for dynamic views should be enabled
+	 * @default false
+	 */
+	enableDynamicViewWalkthrough?: boolean | undefined;
+	/**
+	 * Experimental feature to enable edge editing
+	 * @default false
+	 */
+	experimentalEdgeEditing?: boolean | undefined;
+	/**
+	 * Render icon for an element, bundled or remote
+	 * By default, if icon is http:// or https://, it will be rendered as an image
+	 */
+	renderIcon?: ElementIconRenderer$1 | undefined;
+	/**
+	 * Dynamic filter, applies both to nodes and edges
+	 */
+	where?: WhereOperator<string, string> | undefined;
+}
+interface Link {
+	readonly title?: string;
+	readonly url: string;
+	readonly relative?: string;
+}
+interface MantineGradient {
+	from: string;
+	to: string;
+	deg?: number;
+}
+interface MantinePrimaryShade {
+	light: MantineColorShade;
+	dark: MantineColorShade;
+}
+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;
+}
+interface MantineThemeColorsOverride {
+}
+interface MantineThemeComponent {
+	classNames?: any;
+	styles?: any;
+	vars?: any;
+	defaultProps?: any;
+}
+interface MantineThemeOther {
+	[key: string]: any;
+}
+interface OutgoingExpr extends Omit<BaseExpr, "outgoing"> {
+	outgoing: ElementExpression;
+}
+interface RelationExpr extends Omit<BaseExpr, "source" | "target"> {
+	source: ElementExpression;
+	target: ElementExpression;
+	isBidirectional?: boolean;
+}
+interface RelationWhereExpr extends Omit<BaseExpr, "where"> {
+	where: {
+		expr: RelationExpression;
+		condition: WhereOperator<string, string>;
+	};
+}
+interface RelationshipThemeColorValues {
+	lineColor: ColorLiteral;
+	labelBgColor: ColorLiteral;
+	labelColor: ColorLiteral;
+}
+interface ScopedElementView extends BasicElementView {
+	readonly viewOf: Fqn;
+}
+interface ThemeColorValues {
+	elements: ElementThemeColorValues;
+	relationships: RelationshipThemeColorValues;
+}
+interface VariantColorResolverResult {
+	background: string;
+	hover: string;
+	color: string;
+	border: string;
+	hoverColor?: string;
+}
+interface VariantColorsResolverInput {
+	color: MantineColor | undefined;
+	theme: MantineTheme;
+	variant: string;
+	gradient?: MantineGradient;
+	autoContrast?: boolean;
+}
+interface ViewRuleAutoLayout {
+	autoLayout: AutoLayoutDirection;
+}
+interface ViewRuleStyle {
+	targets: ElementExpression[];
+	notation?: string;
+	style: ElementStyle & {
+		color?: Color;
+		shape?: ElementShape;
+		icon?: IconUrl;
+	};
+}
+interface ViewWithHash {
+	/**
+	 * Hash of the view object.
+	 * This is used to detect changes in layout
+	 */
+	hash: string;
+}
+interface ViewWithNotation {
+	notation?: {
+		elements: ElementNotation[];
+	};
+}
+interface WildcardExpr extends Omit<BaseExpr, "wildcard"> {
+	wildcard: true;
+}
+interface XYPoint {
+	x: number;
+	y: number;
+}
+type AllNever = {
+	not?: never;
+	and?: never;
+	or?: never;
+	tag?: never;
+	kind?: never;
+};
+type AndOperator<Tag, Kind> = Omit<AllNever, "and"> & {
+	and: NonEmptyArray<WhereOperator<Tag, Kind>>;
+};
+type AutoLayoutDirection = "TB" | "BT" | "LR" | "RL";
+type BBox = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
+type BackgroundProps = {
+	id?: string;
+	/** Color of the pattern */
+	color?: string;
+	/** Color of the background */
+	bgColor?: string;
+	/** 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 BorderStyle = typeof BorderStyles[number];
+type BuiltIns = Primitive | void | Date | RegExp;
+type ChangeEvent = {
+	change: ViewChange;
+};
+type Color = LiteralUnion<ThemeColor, string>;
+type ColorLiteral = HexColorLiteral;
+type ColorScheme = "light" | "dark";
+type ComputedView = ComputedElementView | ComputedDynamicView;
+type CustomColorDefinitions = {
+	[key: string]: ThemeColorValues;
+};
+type DefaultMantineColor = "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "green" | "lime" | "yellow" | "orange" | "teal" | (string & {});
+type DiagramNodeWithNavigate<ID extends string = ViewID> = Omit<DiagramNode, "navigateTo"> & {
+	navigateTo: ID;
+};
+type DynamicViewIncludeRule = {
+	include: ElementPredicateExpression[];
+};
+type DynamicViewRule = DynamicViewIncludeRule | ViewRuleStyle | ViewRuleAutoLayout;
+type DynamicViewStepOrParallel = DynamicViewStep | DynamicViewParallelSteps;
+type EdgeId = Tagged<string, "EdgeId">;
+type ElementExpression = ElementRefExpr | WildcardExpr | ElementKindExpr | ElementTagExpr | ExpandedElementExpr;
+type ElementIconNodeProps = {
+	id: string;
+	title: string;
+	icon?: string | undefined;
+};
+type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
+type ElementIconRenderer$1 = (props: {
+	node: ElementIconNodeProps;
+}) => ReactNode;
+type ElementIconRendererProps = {
+	node: {
+		id: string;
+		title: string;
+		icon?: string | undefined;
+	};
+};
+type ElementKind = Tagged<string, "ElementKind">;
+type ElementNotation = {
+	kinds: ElementKind[];
+	shape: ElementShape;
+	color: Color;
+	title: string;
+};
+type ElementPredicateExpression = ElementExpression | ElementWhereExpr | CustomElementExpr;
+type ElementShape = typeof ElementShapes[number];
+type ElementView = ScopedElementView | ExtendsElementView | BasicElementView;
+type EqualOperator<V> = {
+	eq: V;
+	neq?: never;
+} | {
+	eq?: never;
+	neq: V;
+};
+type Expression = ElementPredicateExpression | RelationPredicateExpression;
+type Fqn = Tagged<string, "Fqn">;
+type HexColorLiteral = `#${string}`;
+type IconUrl = Tagged<string, "IconUrl">;
+type KindEqual<Kind> = Omit<AllNever, "kind"> & {
+	kind: EqualOperator<Kind>;
+};
+type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers;
+type LiteralUnion<LiteralType, BaseType extends Primitive> = LiteralType | (BaseType & Record<never, never>);
+type MantineBreakpointsValues = Record<MantineSize | (string & {}), string>;
+type MantineColor = keyof MantineThemeColors;
+type MantineColorShade = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type MantineColorsTuple = readonly [
+	string,
+	string,
+	string,
+	string,
+	string,
+	string,
+	string,
+	string,
+	string,
+	string,
+	...string[]
+];
+type MantineFontSizesValues = Record<MantineSize | (string & {}), string>;
+type MantineLineHeightValues = Record<MantineSize | (string & {}), string>;
+type MantineRadius = keyof MantineRadiusValues | (string & {}) | number;
+type MantineRadiusValues = Record<MantineSize | (string & {}), string>;
+type MantineShadowsValues = Record<MantineSize | (string & {}), string>;
+type MantineSize = "xs" | "sm" | "md" | "lg" | "xl";
+type MantineSpacingValues = Record<MantineSize | (string & {}), string>;
+type MantineThemeColors = MantineThemeColorsOverride extends {
+	colors: Record<infer CustomColors, MantineColorsTuple>;
+} ? Record<CustomColors, MantineColorsTuple> : Record<DefaultMantineColor, MantineColorsTuple>;
+type MantineThemeComponents = Record<string, MantineThemeComponent>;
+type MantineThemeOverride = PartialDeep<MantineTheme>;
+type Merge<Destination, Source> = Simplify<SimpleMerge<PickIndexSignature<Destination>, PickIndexSignature<Source>> & SimpleMerge<OmitIndexSignature<Destination>, OmitIndexSignature<Source>>>;
+type NodeId = Tagged<string, "Fqn">;
+type NonEmptyArray<T> = [
+	T,
+	...T[]
+];
+type NotOperator<Tag, Kind> = Omit<AllNever, "not"> & {
+	not: WhereOperator<Tag, Kind>;
+};
+type OmitIndexSignature<ObjectType> = {
+	[KeyType in keyof ObjectType as {} extends Record<KeyType, unknown> ? never : KeyType]: ObjectType[KeyType];
+};
+type OnCanvasClick = (event: ReactMouseEvent) => void;
+type OnChange = (event: ChangeEvent) => void;
+type OnEdgeClick = (edge: DiagramEdge, event: ReactMouseEvent) => void;
+type OnNavigateTo<ID extends string = ViewID> = (to: ID, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<ID>) => void;
+type OnNodeClick = (node: DiagramNode, event: ReactMouseEvent) => void;
+type OrOperator<Tag, Kind> = Omit<AllNever, "or"> & {
+	or: NonEmptyArray<WhereOperator<Tag, Kind>>;
+};
+type OverrideProperties<TOriginal, 
+// This first bit where we use `Partial` is to enable autocomplete
+// and the second bit with the mapped type is what enforces that we don't try
+// to override properties that doesn't exist in the original type.
+TOverride extends Partial<Record<keyof TOriginal, unknown>> & {
+	[Key in keyof TOverride]: Key extends keyof TOriginal ? TOverride[Key] : never;
+}> = Merge<TOriginal, TOverride>;
+type PartialDeep<T, Options extends PartialDeepOptions = {}> = T extends BuiltIns | (((...arguments_: any[]) => unknown)) | (new (...arguments_: any[]) => unknown) ? T : T extends Map<infer KeyType, infer ValueType> ? PartialMapDeep<KeyType, ValueType, Options> : T extends Set<infer ItemType> ? PartialSetDeep<ItemType, Options> : T extends ReadonlyMap<infer KeyType, infer ValueType> ? PartialReadonlyMapDeep<KeyType, ValueType, Options> : T extends ReadonlySet<infer ItemType> ? PartialReadonlySetDeep<ItemType, Options> : T extends object ? T extends ReadonlyArray<infer ItemType> // Test for arrays/tuples, per https://github.com/microsoft/TypeScript/issues/35156
+ ? Options["recurseIntoArrays"] extends true ? ItemType[] extends T // Test for arrays (non-tuples) specifically
+ ? readonly ItemType[] extends T // Differentiate readonly and mutable arrays
+ ? ReadonlyArray<PartialDeep<ItemType | undefined, Options>> : Array<PartialDeep<ItemType | undefined, Options>> : PartialObjectDeep<T, Options> // Tuples behave properly
+ : T // If they don't opt into array testing, just use the original type
+ : PartialObjectDeep<T, Options> : unknown;
+type PartialDeepOptions = {
+	/**
+	Whether to affect the individual elements of arrays and tuples.
+
+	@default false
+	*/
+	readonly recurseIntoArrays?: boolean;
+};
+type PartialMapDeep<KeyType, ValueType, Options extends PartialDeepOptions> = {} & Map<PartialDeep<KeyType, Options>, PartialDeep<ValueType, Options>>;
+type PartialObjectDeep<ObjectType extends object, Options extends PartialDeepOptions> = {
+	[KeyType in keyof ObjectType]?: PartialDeep<ObjectType[KeyType], Options>;
+};
+type PartialReadonlyMapDeep<KeyType, ValueType, Options extends PartialDeepOptions> = {} & ReadonlyMap<PartialDeep<KeyType, Options>, PartialDeep<ValueType, Options>>;
+type PartialReadonlySetDeep<T, Options extends PartialDeepOptions> = {} & ReadonlySet<PartialDeep<T, Options>>;
+type PartialSetDeep<T, Options extends PartialDeepOptions> = {} & Set<PartialDeep<T, Options>>;
+type PickIndexSignature<ObjectType> = {
+	[KeyType in keyof ObjectType as {} extends Record<KeyType, unknown> ? KeyType : never]: ObjectType[KeyType];
+};
+type Point = readonly [
+	x: number,
+	y: number
+];
+type Primitive = null | undefined | string | number | boolean | symbol | bigint;
+type RelationExpression = RelationExpr | InOutExpr | IncomingExpr | OutgoingExpr;
+type RelationID = Tagged<string, "RelationID">;
+type RelationPredicateExpression = RelationExpression | RelationWhereExpr | CustomRelationExpr;
+type RelationshipArrowType = "none" | "normal" | "onormal" | "dot" | "odot" | "diamond" | "odiamond" | "crow" | "open" | "vee";
+type RelationshipKind = Tagged<string, "RelationshipKind">;
+type RelationshipLineType = "dashed" | "solid" | "dotted";
+type SimpleMerge<Destination, Source> = {
+	[Key in keyof Destination as Key extends keyof Source ? never : Key]: Destination[Key];
+} & Source;
+type Simplify<T> = {
+	[KeyType in keyof T]: T[KeyType];
+} & {};
+type Tag$1 = Tagged<string, "Tag">;
+type Tag<Token extends PropertyKey, TagMetadata> = TagContainer<{
+	[K in Token]: TagMetadata;
+}>;
+type TagContainer<Token> = {
+	readonly [tag]: Token;
+};
+type TagEqual<Tag> = Omit<AllNever, "tag"> & {
+	tag: EqualOperator<Tag>;
+};
+type Tagged<Type, TagName extends PropertyKey, TagMetadata = never> = Type & Tag<TagName, TagMetadata>;
+type ThemeColor = typeof ThemeColors[number];
+type VariantColorsResolver = (input: VariantColorsResolverInput) => VariantColorResolverResult;
+type ViewChange = ViewChange.ChangeElementStyle | ViewChange.SaveManualLayout | ViewChange.ChangeAutoLayout;
+type ViewID = Tagged<string, "ViewID">;
+type ViewManualLayout = {
+	readonly hash: string;
+	readonly x: number;
+	readonly y: number;
+	readonly width: number;
+	readonly height: number;
+	readonly autoLayout: AutoLayoutDirection;
+	readonly nodes: Record<string, {
+		isCompound: boolean;
+		x: number;
+		y: number;
+		width: number;
+		height: number;
+	}>;
+	readonly edges: Record<string, {
+		dotpos?: string;
+		points: NonEmptyArray<Point>;
+		controlPoints?: NonEmptyArray<XYPoint>;
+		labelBBox?: BBox;
+	}>;
+};
+type ViewRule = ViewRulePredicate | ViewRuleStyle | ViewRuleAutoLayout;
+type ViewRulePredicate = {
+	include: Expression[];
+	exclude?: never;
+} | {
+	include?: never;
+	exclude: Expression[];
+};
+type WhereOperator<Tag, Kind> = TagEqual<Tag> | KindEqual<Kind> | NotOperator<Tag, Kind> | AndOperator<Tag, Kind> | OrOperator<Tag, Kind>;
+type XYBackground = XYBackgroundVariant | OverrideProperties<BackgroundProps, {
+	variant: XYBackgroundVariant;
+}>;
+type XYBackgroundVariant = "dots" | "lines" | "cross";
+
+export {};