@likec4/diagram 1.60.0 → 1.61.0

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -23,5 +23,4 @@ const __iconNode = [
 ];
 const IconStack2 = createReactComponent("outline", "stack-2", "Stack2", __iconNode);
 
-//#endregion
 export { __iconNode, IconStack2 as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -13,5 +13,4 @@ const __iconNode = [["path", {
 }]];
 const IconStarFilled = createReactComponent("filled", "star-filled", "StarFilled", __iconNode);
 
-//#endregion
 export { __iconNode, IconStarFilled as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -23,5 +23,4 @@ const __iconNode = [
 ];
 const IconTarget = createReactComponent("outline", "target", "Target", __iconNode);
 
-//#endregion
 export { __iconNode, IconTarget as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -27,5 +27,4 @@ const __iconNode = [
 ];
 const IconTransform = createReactComponent("outline", "transform", "Transform", __iconNode);
 
-//#endregion
 export { __iconNode, IconTransform as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -16,5 +16,4 @@ const __iconNode = [["path", {
 }]];
 const IconUser = createReactComponent("outline", "user", "User", __iconNode);
 
-//#endregion
 export { __iconNode, IconUser as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -16,5 +16,4 @@ const __iconNode = [["path", {
 }]];
 const IconX = createReactComponent("outline", "x", "X", __iconNode);
 
-//#endregion
 export { __iconNode, IconX as default };

package/dist/node_modules/.pnpm/{@tabler_icons-react@3.49.0_react@19.3.0 → @tabler_icons-react@3.49.0_react@19.3.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs

@@ -1,6 +1,6 @@
 import createReactComponent from "../createReactComponent.mjs";
 
-//#region ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs
+// ../../node_modules/.pnpm/@tabler+icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs
 /**
 * @license @tabler/icons-react v3.49.0 - MIT
 *
@@ -35,5 +35,4 @@ const __iconNode = [
 ];
 const IconZoomScan = createReactComponent("outline", "zoom-scan", "ZoomScan", __iconNode);
 
-//#endregion
 export { __iconNode, IconZoomScan as default };

package/dist/overlays/Overlays.mjs

@@ -1,12 +1,12 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { ErrorBoundary } from "../components/ErrorFallback.mjs";
 import { DiagramFeatures } from "../context/DiagramFeatures.mjs";
 import { useDiagram } from "../hooks/safeContext.mjs";
-import { ErrorBoundary } from "../components/ErrorFallback.mjs";
-import { Overlay } from "./overlay/Overlay.mjs";
-import { RelationshipsBrowser } from "./relationships-browser/RelationshipsBrowser.mjs";
 import { ElementDetails } from "./element-details/ElementDetails.mjs";
 import { OverlaysActorContext, selectOverlaysSnapshot, useSelectOverlaysActor } from "./hooks.mjs";
+import { Overlay } from "./overlay/Overlay.mjs";
 import { RelationshipDetails } from "./relationship-details/RelationshipDetails.mjs";
+import { RelationshipsBrowser } from "./relationships-browser/RelationshipsBrowser.mjs";
 import { useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 import { isNonNullish } from "remeda";
@@ -14,7 +14,7 @@ import { nonexhaustive } from "@likec4/core";
 import { AnimatePresence, LayoutGroup, useReducedMotionConfig } from "motion/react";
 import { animate } from "motion";
 
-//#region src/overlays/Overlays.tsx
+// src/overlays/Overlays.tsx
 const Overlays = ({ overlaysActorRef }) => /* @__PURE__ */ jsx(OverlaysActorContext, {
 	value: overlaysActorRef,
 	children: /* @__PURE__ */ jsx(OverlaysSurface, { overlaysActorRef })
@@ -109,5 +109,4 @@ function OverlaysSurface({ overlaysActorRef }) {
 	}) });
 }
 
-//#endregion
 export { Overlays };

package/dist/overlays/element-details/ElementDetails.mjs

@@ -5,12 +5,12 @@ import { jsx } from "react/jsx-runtime";
 import { shallowEqual } from "fast-equals";
 import { useSelector } from "@xstate/react";
 
-//#region src/overlays/element-details/ElementDetails.tsx
+// src/overlays/element-details/ElementDetails.tsx
 const selector = (s) => ({
 	viewId: s.context.currentView.id,
 	fromNode: s.context.initiatedFrom.node,
 	rectFromNode: s.context.initiatedFrom.clientRect,
-	fqn: s.context.subject
+	subject: s.context.subject
 });
 function ElementDetails({ actorRef, onClose }) {
 	const props = useSelector(actorRef, selector, shallowEqual);
@@ -23,5 +23,4 @@ function ElementDetails({ actorRef, onClose }) {
 	});
 }
 
-//#endregion
 export { ElementDetails };

package/dist/overlays/element-details/ElementDetailsCard.css.mjs

@@ -1,27 +1,12 @@
-import { css } from "@likec4/styles/css";
-import { flex } from "@likec4/styles/patterns";
+import { css, cx, sva } from "@likec4/styles/css";
+import { styled } from "@likec4/styles/jsx";
+import { hstack } from "@likec4/styles/patterns";
+import { overlay } from "@likec4/styles/recipes";
 
-//#region src/overlays/element-details/ElementDetailsCard.css.ts
+// src/overlays/element-details/ElementDetailsCard.css.ts
 const backdropBlur = "--_blur";
 const backdropOpacity = "--_opacity";
-const dialog = css({
-	boxSizing: "border-box",
-	margin: "0",
-	padding: "0",
-	position: "fixed",
-	inset: "0",
-	width: "100vw",
-	height: "100vh",
-	maxWidth: "100vw",
-	maxHeight: "100vh",
-	background: "transparent",
-	border: "transparent",
-	_backdrop: {
-		backdropFilter: "auto",
-		backdropBlur: `var(${backdropBlur})`,
-		backgroundColor: `[rgb(36 36 36 / var(${backdropOpacity}, 5%))]`
-	}
-});
+const dialog = cx(overlay({ fullscreen: true }), css({ background: "transparent" }));
 const card = css({
 	position: "absolute",
 	pointerEvents: "all",
@@ -50,19 +35,18 @@ const cardHeader = css({
 	flex: "[0]",
 	cursor: "move"
 });
-const title = css({
-	display: "block",
+const ElementTitle = styled("div", { base: {
 	fontFamily: "likec4.element",
 	fontOpticalSizing: "auto",
 	fontStyle: "normal",
 	fontWeight: "bold",
-	fontSize: "[24px]",
+	fontSize: "h2",
 	lineHeight: "xs",
 	overflow: "hidden",
 	textOverflow: "ellipsis",
 	wordBreak: "break-word",
 	lineClamp: 2
-});
+} });
 const iconSize = "40px";
 const elementIcon = css({
 	flex: `[0 0 ${iconSize}]`,
@@ -88,11 +72,13 @@ const elementIcon = css({
 });
 const viewTitleColor = "--view-title-color";
 const iconColor = "--icon-color";
-const viewButton = css({
+const viewButton = hstack({
+	flexWrap: "nowrap",
 	width: "100%",
 	background: "surface.default",
 	borderRadius: "sm",
 	padding: `[10px 8px]`,
+	gap: "2",
 	transition: "fast",
 	border: `default`,
 	borderStyle: "dashed",
@@ -115,89 +101,44 @@ const viewButton = css({
 	},
 	"& > *": { transition: `[all 130ms {easings.inOut}]` }
 });
-const viewButtonTitle = css({
+const ViewButtonTitle = styled("div", { base: {
 	transition: "fast",
 	color: `[var(${viewTitleColor}, {colors.mantine.gray[7]})]`,
 	fontSize: "[15px]",
 	fontWeight: "medium",
-	lineHeight: "[1.4]"
+	lineHeight: "[1.4]",
+	lineClamp: 1
+} });
+const propertiesMain = css({
+	height: "100%",
+	"& > .mantine-ScrollArea-viewport": { paddingLeft: "0!" }
 });
-const tabsRoot = flex({
-	flex: "1",
-	flexDirection: "column",
-	justifyContent: "stretch",
-	overflow: "hidden",
-	gap: "sm"
-});
-const tabsList = css({
-	background: "mantine.gray[1]",
-	borderRadius: "sm",
-	flexWrap: "nowrap",
-	gap: "1.5",
-	padding: "1",
-	_dark: { background: "mantine.dark[7]" }
+const propertiesSidebar = css({
+	width: "100%",
+	height: "100%",
+	borderRadius: "md",
+	backgroundColor: "surface.sunken",
+	"& > .mantine-ScrollArea-viewport": { padding: "3!" }
 });
-const tabsTab = css({
-	fontSize: "xs",
-	fontWeight: "medium",
-	flexGrow: 1,
-	padding: "[6px 8px]",
-	transition: "fast",
-	borderRadius: "sm",
-	color: "mantine.gray[7]",
-	_hover: {
-		transitionTimingFunction: "out",
-		color: "text",
-		background: "mantine.gray[3]"
-	},
-	["&[data-active]"]: {
-		transition: "none",
-		background: "white",
-		shadow: "xs",
-		color: "text"
-	},
-	_dark: {
-		color: "mantine.dark[1]",
-		_hover: {
-			color: "white",
-			background: "mantine.dark[6]"
-		},
-		[`&:is([data-active])`]: {
-			color: "white",
-			background: "mantine.dark[5]"
-		}
-	}
+const facts = css({
+	display: "flex",
+	flexDirection: "column",
+	gap: "6"
 });
-const tabsPanel = css({
-	flex: "1",
-	overflow: "hidden",
-	position: "relative",
-	"&:not(:has(.mantine-ScrollArea-root))": {
-		paddingLeft: "1",
-		paddingRight: "1"
-	},
-	"& .mantine-ScrollArea-root": {
-		width: "100%",
-		height: "100%",
-		"& > div": {
-			paddingLeft: "1",
-			paddingRight: "1"
-		}
-	}
+const factLabel = css({
+	textStyle: "fieldLabel",
+	margin: "0",
+	marginBottom: "2"
 });
-const propertiesGrid = css({
-	flex: "1",
-	display: "grid",
-	gridTemplateColumns: "[min-content 1fr]",
-	gridAutoRows: "[min-content max-content]",
-	gap: `[24px 20px]`,
-	alignItems: "baseline",
-	justifyItems: "stretch"
+const factValues = css({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: "1",
+	fontSize: "md"
 });
-const propertyLabel = css({
-	justifySelf: "end",
-	textAlign: "right",
-	userSelect: "none"
+const technologyBadge = css({
+	minHeight: "[24px]",
+	backgroundColor: "transparent"
 });
 const resizeHandle = css({
 	position: "absolute",
@@ -215,6 +156,111 @@ const resizeHandle = css({
 		borderColor: "mantine.dark[1]"
 	}
 });
+const tabs = sva({
+	className: "likec4-details-tabs",
+	slots: [
+		"root",
+		"list",
+		"tab",
+		"panel",
+		"tabSection",
+		"tabLabel"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			justifyContent: "stretch",
+			overflow: "hidden",
+			gap: "sm"
+		},
+		list: {
+			background: "surface.sunken",
+			borderRadius: "sm",
+			flexWrap: "nowrap",
+			gap: "1.5",
+			padding: "1"
+		},
+		tab: {
+			fontSize: "xs",
+			fontWeight: "medium",
+			flexGrow: 1,
+			padding: "[6px 8px]",
+			transition: "fast",
+			borderRadius: "sm",
+			color: "mantine.gray[7]",
+			_hover: {
+				transitionTimingFunction: "out",
+				color: "text",
+				background: "mantine.gray[3]"
+			},
+			["&[data-active]"]: {
+				transition: "none",
+				background: "white",
+				shadow: "xs",
+				color: "text"
+			},
+			_dark: {
+				color: "mantine.dark[1]",
+				_hover: {
+					color: "white",
+					background: "mantine.dark[6]"
+				},
+				[`&:is([data-active])`]: {
+					color: "white",
+					background: "mantine.dark[5]"
+				}
+			}
+		},
+		panel: {
+			flex: "1",
+			overflow: "hidden",
+			position: "relative",
+			"&:not(:has(.mantine-ScrollArea-root))": {
+				paddingLeft: "1",
+				paddingRight: "1"
+			},
+			"& .mantine-ScrollArea-root": {
+				width: "100%",
+				height: "100%",
+				"& > div": {
+					paddingLeft: "1",
+					paddingRight: "1"
+				}
+			}
+		},
+		tabLabel: {
+			fontSize: "xxs",
+			fontFamily: "body",
+			textTransform: "uppercase",
+			fontWeight: "medium",
+			letterSpacing: "caps.sm"
+		}
+	}
+});
+const CardFooter = styled("div", { base: {
+	flex: "[0]",
+	display: "flex",
+	alignItems: "center",
+	flexWrap: "wrap",
+	columnGap: "lg",
+	rowGap: "xs",
+	marginTop: "[-8px]",
+	paddingTop: "xs",
+	borderTop: "subtle"
+} });
+const CardFooterSection = styled("div", {
+	base: {
+		display: "flex",
+		alignItems: "baseline",
+		gap: "1",
+		minWidth: "0"
+	},
+	variants: { full: { true: {
+		flex: "1",
+		overflow: "hidden"
+	} } }
+});
 
-//#endregion
-export { backdropBlur, backdropOpacity, card, cardHeader, dialog, elementIcon, propertiesGrid, propertyLabel, resizeHandle, tabsList, tabsPanel, tabsRoot, tabsTab, title, viewButton, viewButtonTitle };
+export { CardFooter, CardFooterSection, ElementTitle, ViewButtonTitle, backdropBlur, backdropOpacity, card, cardHeader, dialog, elementIcon, factLabel, factValues, facts, propertiesMain, propertiesSidebar, resizeHandle, tabs, technologyBadge, viewButton };