likec4 1.16.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "likec4",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "license": "MIT",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -102,18 +102,18 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "type-fest": "4.26.1",
-    "vite": "5.4.10"
+    "vite": "5.4.11"
   },
   "devDependencies": {
     "@fontsource/ibm-plex-sans": "^5.1.0",
-    "@likec4/core": "1.16.0",
-    "@likec4/diagram": "1.16.0",
-    "@likec4/generators": "1.16.0",
-    "@likec4/icons": "1.16.0",
-    "@likec4/language-server": "1.16.0",
-    "@likec4/layouts": "1.16.0",
-    "@likec4/log": "1.16.0",
-    "@likec4/tsconfig": "1.16.0",
+    "@likec4/core": "1.17.0",
+    "@likec4/diagram": "1.17.0",
+    "@likec4/generators": "1.17.0",
+    "@likec4/icons": "1.17.0",
+    "@likec4/language-server": "1.17.0",
+    "@likec4/layouts": "1.17.0",
+    "@likec4/log": "1.17.0",
+    "@likec4/tsconfig": "1.17.0",
     "@mantine/core": "7.13.4",
     "@mantine/hooks": "7.13.4",
     "@mantine/vanilla-extract": "7.13.4",
@@ -132,8 +132,8 @@
     "@vanilla-extract/css": "^1.16.0",
     "@vanilla-extract/dynamic": "^2.1.2",
     "@vanilla-extract/vite-plugin": "^4.0.17",
-    "@xyflow/react": "12.3.2",
-    "@xyflow/system": "0.0.43",
+    "@xyflow/react": "12.3.4",
+    "@xyflow/system": "0.0.45",
     "autoprefixer": "^10.4.20",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
@@ -144,7 +144,7 @@
     "execa": "^9.3.1",
     "fast-equals": "^5.0.1",
     "fdir": "^6.4.2",
-    "framer-motion": "^11.11.10",
+    "framer-motion": "^11.11.11",
     "get-port": "^7.1.0",
     "glob": "^11.0.0",
     "html-to-image": "^1.11.11",
@@ -175,7 +175,7 @@
     "unbuild": "^3.0.0-rc.11",
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-shadow-style": "^1.1.1",
-    "vitest": "^2.1.4",
+    "vitest": "^2.1.5",
     "yargs": "17.7.2"
   },
   "packageManager": "yarn@4.5.1"

package/react/index.d.ts

@@ -7,7 +7,7 @@ type NonEmptyArray<T> = [
 	T,
 	...T[]
 ];
-type IconUrl = Tagged<string, "IconUrl">;
+type IconUrl = Tagged<string, "IconUrl"> | "none";
 type Point = readonly [
 	x: number,
 	y: number
@@ -847,6 +847,10 @@ export declare namespace LikeC4Model {
 		siblings(): readonly ElementModel<M>[];
 		descendants(): readonly ElementModel<M>[];
 		children(): readonly ElementModel<M>[];
+		/**
+		 * First 'view of' current element
+		 */
+		viewOf(): M;
 		/**
 		 * All views 'view of' current element
 		 */
@@ -1172,11 +1176,6 @@ export type LikeC4ViewProps<ViewId extends string, Tag extends string, Kind exte
 	 * @default true
 	 */
 	injectFontCss?: boolean | undefined;
-	/**
-	 * Display hovercards with element links
-	 * @default true
-	 */
-	showElementLinks?: boolean | undefined;
 	/**
 	 * Display webview with diagram title / description
 	 * @default false
@@ -1192,11 +1191,6 @@ export type LikeC4ViewProps<ViewId extends string, Tag extends string, Kind exte
 	 * @default false
 	 */
 	showNotations?: boolean | undefined;
-	/**
-	 * Display dropdown with details on relationship's label click
-	 * @default false
-	 */
-	showRelationshipDetails?: boolean | undefined;
 	/**
 	 * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
 	 * Conflicts with `interactive`
@@ -1204,12 +1198,22 @@ export type LikeC4ViewProps<ViewId extends string, Tag extends string, Kind exte
 	 * @default false
 	 */
 	enableFocusMode?: boolean | undefined;
+	/**
+	 * Enable popup with element details
+	 * @default false
+	 */
+	enableElementDetails?: boolean | undefined;
 	/**
 	 * Experimental feature to browse relationships
 	 *
-	 * @default false
+	 * @default enableElementDetails
+	 */
+	enableRelationshipBrowser?: boolean | undefined;
+	/**
+	 * Display dropdown with details on relationship's label click
+	 * @default enableRelationshipBrowser
 	 */
-	enableRelationshipsBrowser?: boolean | undefined;
+	enableRelationshipDetails?: boolean | undefined;
 	where?: WhereOperator<Tag, Kind> | undefined;
 	className?: string | undefined;
 	style?: CSSProperties | undefined;
@@ -1249,14 +1253,24 @@ export type LikeC4BrowserProps<ViewId extends string, Tag extends string, Kind e
 	mantineTheme?: MantineThemeOverride | undefined;
 	/** Function to generate nonce attribute added to all generated `<style />` tags */
 	styleNonce?: string | (() => string) | undefined;
+	/**
+	 * Enable popup with element details
+	 * @default true
+	 */
+	enableElementDetails?: boolean | undefined;
 	/**
 	 * Experimental feature to browse relationships
 	 *
-	 * @default false
+	 * @default enableElementDetails
+	 */
+	enableRelationshipBrowser?: boolean | undefined;
+	/**
+	 * Display dropdown with details on relationship's label click
+	 * @default enableRelationshipBrowser
 	 */
-	enableRelationshipsBrowser?: boolean | undefined;
+	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, enableRelationshipsBrowser }: LikeC4BrowserProps<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Browser<ViewId extends string = string, Tag extends string = string, Kind extends string = string>({ className, colorScheme, view, injectFontCss, onNavigateTo, onClose, renderIcon, where, style, mantineTheme, background, styleNonce, 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>;
 	/**
@@ -1282,11 +1296,6 @@ export type LikeC4ViewEmbeddedProps<ViewId extends string, Tag extends string, K
 	 * By default, if icon is http:// or https://, it will be rendered as an image
 	 */
 	renderIcon?: ElementIconRenderer | undefined;
-	/**
-	 * Display hovercards with element links
-	 * @default true
-	 */
-	showElementLinks?: boolean | undefined;
 	/**
 	 * Display webview with diagram title / description
 	 * @default false
@@ -1302,11 +1311,6 @@ export type LikeC4ViewEmbeddedProps<ViewId extends string, Tag extends string, K
 	 * @default false
 	 */
 	showNotations?: boolean | undefined;
-	/**
-	 * Display dropdown with details on relationship's label click
-	 * @default false
-	 */
-	showRelationshipDetails?: boolean | undefined;
 	/**
 	 * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
 	 * @default false
@@ -1316,14 +1320,24 @@ export type LikeC4ViewEmbeddedProps<ViewId extends string, Tag extends string, K
 	mantineTheme?: MantineThemeOverride | undefined;
 	/** Function to generate nonce attribute added to all generated `<style />` tags */
 	styleNonce?: string | (() => string) | undefined;
+	/**
+	 * Enable popup with element details
+	 * @default false
+	 */
+	enableElementDetails?: boolean | undefined;
 	/**
 	 * Experimental feature to browse relationships
 	 *
-	 * @default false
+	 * @default enableElementDetails
 	 */
-	enableRelationshipsBrowser?: boolean | undefined;
+	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, showElementLinks, showNavigationButtons, enableFocusMode, showNotations, showRelationshipDetails, enableRelationshipsBrowser, mantineTheme, where, style, styleNonce }: LikeC4ViewEmbeddedProps<ViewId, Tag, Kind>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4ViewEmbedded<ViewId extends string = string, Tag extends string = string, Kind extends string = string>({ onNavigateTo: _onNavigateTo, className, view, injectFontCss, colorScheme, background, renderIcon, showDiagramTitle, 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",
@@ -1438,11 +1452,6 @@ interface LikeC4DiagramProperties {
 	 * @default 'dots'
 	 */
 	background?: "transparent" | "solid" | XYBackground | undefined;
-	/**
-	 * Display hovercards with element links
-	 * @default true
-	 */
-	showElementLinks?: boolean | undefined;
 	/**
 	 * Display webview with diagram title / description
 	 * @default true
@@ -1460,20 +1469,25 @@ interface LikeC4DiagramProperties {
 	showNotations?: boolean | undefined;
 	/**
 	 * Display dropdown with details on relationship's label click
-	 * @default true
+	 * @default false
 	 */
-	showRelationshipDetails?: boolean | undefined;
+	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 modal with element details
+	 * @default false
+	 */
+	enableElementDetails?: boolean | undefined;
 	/**
 	 * Experimental feature to browse relationships
 	 *
 	 * @default false
 	 */
-	enableRelationshipsBrowser?: boolean | undefined;
+	enableRelationshipBrowser?: boolean | undefined;
 	/**
 	 * If Walkthrough for dynamic views should be enabled
 	 * @default false