@likec4/styles 1.48.0 → 1.49.0

package/{dist → preset}/preset.mjs

@@ -1,9 +1,8 @@
 import { t as __exportAll } from "./_chunks/rolldown-runtime.mjs";
 import { a as t$6, c as t$2, i as t$4, l as t$1, n as t$3, o as e$1, r as t$5, s as t, t as e } from "./_chunks/libs/remeda.mjs";
+import { a as grass, c as orange, d as red, f as ruby, g as yellow, h as violet, i as crimson, l as pink, m as tomato, n as blue$2, o as indigo, p as teal, s as lime, t as amber, u as purple } from "./_chunks/libs/@radix-ui/colors.mjs";
 import { t as createPreset } from "./_chunks/libs/pandacss-preset-radix-colors.mjs";
-import { defineAnimationStyles, defineKeyframes, defineLayerStyles, defineParts, definePattern, definePreset, defineRecipe, defineSemanticTokens, defineSlotRecipe, defineTextStyles, defineTokens } from "@pandacss/dev";
-
-//#region ../preset/src/animations.ts
+import { defineAnimationStyles, defineKeyframes, defineLayerStyles, defineParts, definePattern, definePreset, defineRecipe, defineSemanticTokens, defineSlotRecipe, defineTextStyles, defineTokens, defineUtility } from "@pandacss/dev";
 const keyframes = defineKeyframes({
 	"indicatorOpacity": {
 		"0%": { opacity: .8 },
@@ -30,9 +29,6 @@ const animationStyles = defineAnimationStyles({
 		animationName: "xyedgeAnimated"
 	} }
 });
-
-//#endregion
-//#region ../preset/src/defaults/vars.ts
 const vars = {
 	font: "--likec4-app-font",
 	spacing: "--likec4-spacing",
@@ -59,16 +55,6 @@ function readName(key) {
 	let name = e(vars, ...path);
 	return e$1(name) ? name : void 0;
 }
-/**
-* Returns a CSS variable declaration string.
-*
-* If `defaultTo` is not provided, returns a string like `var(--likec4-palette-fill)`.
-* If `defaultTo` is a Vars or string, returns a string like `var(--likec4-palette-fill, var(--default-to))`.
-*
-* @param key - The name of the CSS variable to generate.
-* @param defaultTo - An optional string, Vars, or object to use as the default value.
-* @returns A CSS variable declaration string.
-*/
 function __v(key, defaultTo) {
 	let name = readName(key);
 	if (!name) throw new Error(`Unknown var: ${key}`);
@@ -77,14 +63,8 @@ function __v(key, defaultTo) {
 	if (defaultValue) return `var(${name}, var(${defaultValue}))`;
 	return `var(${name}, ${defaultTo})`;
 }
-
-//#endregion
-//#region ../preset/src/const.ts
 const root = ".likec4-root";
-const rootNotReduced = `${root}:not([data-likec4-reduced-graphics])`;
-
-//#endregion
-//#region ../preset/src/defaults/element-colors.ts
+`${root}`;
 const blue$1 = {
 	fill: "#3b82f6",
 	stroke: "#2563eb",
@@ -141,9 +121,6 @@ const ElementColors = {
 		loContrast: "#c7d2fe"
 	}
 };
-
-//#endregion
-//#region ../preset/src/defaults/relationship-colors.ts
 const gray = {
 	line: "#8D8D8D",
 	labelBg: "#18191B",
@@ -193,9 +170,6 @@ const RelationshipColors = {
 	sky,
 	slate
 };
-
-//#endregion
-//#region ../preset/src/defaults/sizes.ts
 const defaultSizes = {
 	sizes: {
 		xs: {
@@ -241,9 +215,6 @@ const defaultSizes = {
 		xl: 90
 	}
 };
-
-//#endregion
-//#region ../preset/src/defaults/types.ts
 const ElementShapes = [
 	"rectangle",
 	"person",
@@ -253,7 +224,8 @@ const ElementShapes = [
 	"storage",
 	"queue",
 	"bucket",
-	"document"
+	"document",
+	"component"
 ];
 const ThemeColors = [
 	"amber",
@@ -285,9 +257,7 @@ const DefaultTagColors = [
 	"yellow",
 	"violet"
 ];
-
-//#endregion
-//#region ../preset/src/defaults/index.ts
+tomato.tomato9, grass.grass9, blue$2.blue9, ruby.ruby9, orange.orange9, indigo.indigo9, pink.pink9, teal.teal9, purple.purple9, amber.amber9, crimson.crimson9, red.red9, lime.lime9, yellow.yellow9, violet.violet9;
 const defaultTheme = {
 	colors: ThemeColors.reduce((acc, key) => {
 		acc[key] = {
@@ -298,9 +268,6 @@ const defaultTheme = {
 	}, {}),
 	...defaultSizes
 };
-
-//#endregion
-//#region ../preset/src/conditions.ts
 const shapeSizeCondition = (key) => `shapeSize${t$1(key)}`;
 const conditions = { extend: {
 	...t$2(defaultTheme.sizes, t$3((_, key) => `:where([data-likec4-shape-size='${key}']) &`), t$4(shapeSizeCondition)),
@@ -324,15 +291,12 @@ const conditions = { extend: {
 	smallZoom: ":where([data-likec4-zoom-small=\"true\"]) &",
 	compoundTransparent: ":where([data-compound-transparent]) &",
 	edgeActive: ":where([data-likec4-edge-active=\"true\"]) &",
-	whenHovered: ":where(.react-flow__node:has([data-likec4-hovered=\"true\"]), .react-flow__edge:has([data-likec4-hovered=\"true\"]), .likec4-edge-container[data-likec4-hovered=\"true\"]) &",
+	whenHovered: ":where([data-likec4-hovered=\"true\"]) &",
 	whenSelectable: ":where(.react-flow__node, .react-flow__edge, .likec4-edge-container):is(.selectable) &",
 	whenSelected: ":where(.react-flow__node, .react-flow__edge, .likec4-edge-container):is(.selected) &",
 	whenDimmed: ":where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed]) &",
 	whenFocused: ":where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) &"
 } };
-
-//#endregion
-//#region ../preset/src/generated.ts
 const breakpoints = {
 	xs: "36em",
 	sm: "48em",
@@ -1336,9 +1300,17 @@ const mantine = {
 	darkSelector: "[data-mantine-color-scheme=\"dark\"] &",
 	lightSelector: "[data-mantine-color-scheme=\"light\"] &"
 };
-
-//#endregion
-//#region ../preset/src/globalCss.ts
+function alpha(color, percentage = 50) {
+	let alpha = percentage;
+	if (typeof percentage === "number") {
+		if (percentage > 0 && percentage < 1) percentage *= 100;
+		alpha = `${percentage}%`;
+	}
+	return `oklch(from ${color} l c h / ${alpha})`;
+}
+function rem(pixels) {
+	return `${pixels}px`;
+}
 const sizeConditions = {
 	...t$5(t$6(defaultTheme.textSizes), (size) => [`:where([data-likec4-text-size='${size}'])`, { [vars.textsize]: `{fontSizes.likec4.${size}}` }]),
 	...t$5(t$6(defaultTheme.spacing), (size) => [`:where([data-likec4-spacing='${size}'])`, { [vars.spacing]: `{spacing.likec4.${size}}` }])
@@ -1348,9 +1320,13 @@ const globalCss = { extend: {
 	...sizeConditions,
 	".likec4-shadow-root": {
 		display: "contents",
+		color: "var(--colors-text)",
 		"--mantine-font-family": "var(--likec4-app-font, var(--likec4-app-font-default))",
 		"--mantine-font-family-headings": "var(--likec4-app-font, var(--likec4-app-font-default))",
-		"& dialog": { color: "var(--mantine-color-text)" }
+		"& dialog": {
+			"--mantine-font-family": "var(--likec4-app-font, var(--likec4-app-font-default))",
+			color: "var(--colors-text)"
+		}
 	},
 	".likec4-edge-label-container": {
 		top: 0,
@@ -1361,7 +1337,9 @@ const globalCss = { extend: {
 		display: {
 			_reduceGraphicsOnPan: "none",
 			_smallZoom: "none"
-		}
+		},
+		willChange: "transform",
+		zIndex: "likec4.diagram.edge.label"
 	},
 	".likec4-root": {
 		overflow: "hidden",
@@ -1398,7 +1376,7 @@ const globalCss = { extend: {
 				"--xy-background-color": "transparent !important"
 			},
 			"& .react-flow__pane": { userSelect: "none" },
-			"& :where(.react-flow__nodes, .react-flow__edges, .react-flow__edgelabel-renderer)": { display: "contents" },
+			"& :is(.react-flow__nodes, .react-flow__edges, .react-flow__edgelabel-renderer, .react-flow__viewport-portal)": { display: "contents" },
 			"& .react-flow__node.draggable:has(.likec4-compound-node)": { cursor: "default" },
 			"& .likec4-node-handle-center": {
 				top: "50%!",
@@ -1417,12 +1395,13 @@ const globalCss = { extend: {
 			"--xy-edge-stroke-width": 3,
 			"--xy-edge-stroke": __v("palette.relationStroke"),
 			"--xy-edge-stroke-selected": __v("palette.relationStrokeSelected"),
-			"--xy-edge-label-color": __v("palette.relationLabel"),
-			"--xy-edge-label-background-color": __v("palette.relationLabelBg"),
-			_dark: { "--xy-edge-label-background-color": `color-mix(in oklab, ${__v("palette.relationLabelBg")} 50%, transparent)` },
-			_light: {
-				"--xy-edge-label-color": `color-mix(in oklab, ${__v("palette.relationLabel")}, #FFF 50%)`,
-				"--xy-edge-label-background-color": `color-mix(in oklab, ${__v("palette.relationLabelBg")} 65%, transparent)`
+			"--xy-edge-label-color": {
+				base: __v("palette.relationLabel"),
+				_light: `oklch(from ${__v("palette.relationLabel")} calc(l + 0.05) c h)`
+			},
+			"--xy-edge-label-background-color": {
+				_dark: alpha(__v("palette.relationLabelBg"), 45),
+				_light: alpha(__v("palette.relationLabelBg"), 60)
 			},
 			"&:is([data-likec4-hovered=\"true\"], [data-edge-active=\"true\"])": {
 				"--xy-edge-stroke-width": 4,
@@ -1444,13 +1423,13 @@ const globalCss = { extend: {
 				transitionDuration: "400ms"
 			},
 			"& :where(.react-flow__edgelabel-renderer) > *": { mixBlendMode: {
+				base: "hard-light",
 				_dark: "screen",
-				_light: "hard-light",
 				_print: "normal!"
 			} },
 			"& :where(.react-flow__edges) > svg": { mixBlendMode: {
+				base: "multiply",
 				_dark: "plus-lighter",
-				_light: "multiply",
 				_print: "normal!"
 			} },
 			"&:has(.react-flow__node-seq-parallel) :where(.react-flow__edges > svg)": { mixBlendMode: { _light: "color-burn" } },
@@ -1459,34 +1438,10 @@ const globalCss = { extend: {
 				_light: "color-burn",
 				_print: "normal!"
 			} }
-		},
-		"& :where(.relationships-browser, .likec4-relationship-details) .react-flow__attribution": { display: "none" }
+		}
 	},
-	".likec4-static-view .react-flow .react-flow__attribution": { display: "none" }
+	":where(.likec4-static-view, .relationships-browser, .likec4-relationship-details) .react-flow .react-flow__attribution": { display: "none" }
 } };
-
-//#endregion
-//#region ../preset/src/helpers.ts
-/**
-* Changes the alpha channel of a color
-* @param color color value or CSS variable
-* @param percentage Alpha channel value
-* @returns
-*/
-function alpha(color, percentage = 50) {
-	let alpha = percentage;
-	if (typeof percentage === "number") {
-		if (percentage > 0 && percentage < 1) percentage *= 100;
-		alpha = `${percentage}%`;
-	}
-	return `oklch(from ${color} l c h / ${alpha})`;
-}
-function rem(pixels) {
-	return `${pixels}px`;
-}
-
-//#endregion
-//#region ../preset/src/globalVars.ts
 const globalVars = { extend: {
 	[vars.font]: "/*-*/ /*-*/",
 	[vars.spacing]: "/*-*/ /*-*/",
@@ -1505,9 +1460,6 @@ const globalVars = { extend: {
 	[vars.icon.color]: "/*-*/ /*-*/",
 	[vars.icon.size]: "/*-*/ /*-*/"
 } };
-
-//#endregion
-//#region ../preset/src/layer-styles.ts
 const layerStyles = /* @__PURE__ */ defineLayerStyles({ likec4: {
 	tag: {
 		description: "LikeC4 tag layer",
@@ -1591,55 +1543,6 @@ const layerStyles = /* @__PURE__ */ defineLayerStyles({ likec4: {
 		}
 	}
 } });
-
-//#endregion
-//#region ../preset/src/patterns.ts
-const txt = definePattern({
-	properties: {
-		inline: { type: "boolean" },
-		dimmed: { type: "boolean" },
-		lh: {
-			type: "token",
-			value: "lineHeights"
-		},
-		size: {
-			type: "enum",
-			value: [
-				"xxs",
-				"xs",
-				"sm",
-				"md",
-				"lg",
-				"xl"
-			]
-		},
-		likec4color: {
-			type: "enum",
-			value: [...ThemeColors]
-		}
-	},
-	defaultValues: {
-		inline: false,
-		dimmed: false,
-		size: "md"
-	},
-	transform(props, _helpers) {
-		const { inline, size, dimmed, lh, likec4color, ...rest } = props;
-		if (dimmed && likec4color) throw new Error("dimmed and likec4color are mutually exclusive");
-		return {
-			userSelect: "all",
-			cursor: "default",
-			textStyle: dimmed ? `dimmed.${size}` : size,
-			...inline && { display: "inline-block" },
-			...lh && { lineHeight: lh },
-			...likec4color && { "data-likec4-color": likec4color },
-			...rest
-		};
-	},
-	jsxElement: "div",
-	jsxName: "Txt",
-	jsx: ["Txt"]
-});
 const patterns = { extend: {
 	vstack: { defaultValues: {
 		alignItems: "stretch",
@@ -1647,27 +1550,65 @@ const patterns = { extend: {
 	} },
 	hstack: { defaultValues: { gap: "sm" } },
 	box: { jsx: ["Box", "MarkdownBlock"] },
-	txt
+	txt: definePattern({
+		properties: {
+			inline: { type: "boolean" },
+			dimmed: { type: "boolean" },
+			lh: {
+				type: "token",
+				value: "lineHeights"
+			},
+			size: {
+				type: "enum",
+				value: [
+					"xxs",
+					"xs",
+					"sm",
+					"md",
+					"lg",
+					"xl"
+				]
+			},
+			likec4color: {
+				type: "enum",
+				value: [...ThemeColors]
+			}
+		},
+		defaultValues: {
+			inline: false,
+			dimmed: false,
+			size: "md"
+		},
+		transform(props, _helpers) {
+			const { inline, size, dimmed, lh, likec4color, ...rest } = props;
+			if (dimmed && likec4color) throw new Error("dimmed and likec4color are mutually exclusive");
+			return {
+				userSelect: "all",
+				cursor: "default",
+				textStyle: dimmed ? `dimmed.${size}` : size,
+				...inline && { display: "inline-block" },
+				...lh && { lineHeight: lh },
+				...likec4color && { "data-likec4-color": likec4color },
+				...rest
+			};
+		},
+		jsxElement: "div",
+		jsxName: "Txt",
+		jsx: ["Txt"]
+	})
 } };
-
-//#endregion
-//#region ../preset/src/radixColors.ts
 const radixColorsPreset = /* @__PURE__ */ createPreset({
 	autoP3: false,
 	darkMode: { condition: "[data-mantine-color-scheme=\"dark\"] &" },
 	colorScales: [...DefaultTagColors]
 });
-
-//#endregion
-//#region ../preset/src/recipes/actionBtn.ts
-const parts$5 = defineParts({
-	root: { selector: "&" },
-	container: { selector: "& > div" }
-});
 const actionButtons = defineRecipe({
 	className: "action-buttons",
 	description: "Action Buttons Container within Diagram Node (Bottom-Center)",
-	base: parts$5({
+	base: defineParts({
+		root: { selector: "&" },
+		container: { selector: "& > div" }
+	})({
 		root: {
 			display: "flex",
 			flexDirection: "row",
@@ -1735,8 +1676,8 @@ const actionBtn = defineRecipe({
 			} }
 		},
 		size: {
-			sm: { ["--ai-size"]: `var(--ai-size-sm)` },
-			md: { ["--ai-size"]: `var(--ai-size-md)` }
+			sm: { ["--ai-size"]: `22px` },
+			md: { ["--ai-size"]: `28px` }
 		},
 		radius: {
 			sm: { "--ai-radius": `{radii.sm}` },
@@ -1755,9 +1696,6 @@ const actionBtn = defineRecipe({
 		conditions: ["*"]
 	}]
 });
-
-//#endregion
-//#region ../preset/src/recipes/compoundNode.ts
 const borderWidth = {
 	var: "--_border-width",
 	ref: "var(--_border-width)"
@@ -1782,7 +1720,7 @@ const compoundColor = {
 	var: "--_compound-color",
 	ref: "var(--_compound-color)"
 };
-const parts$4 = defineParts({
+const parts$5 = defineParts({
 	root: { selector: "&" },
 	titleContainer: { selector: "& .likec4-compound-title-container" },
 	title: { selector: "& .likec4-compound-title" },
@@ -1794,7 +1732,7 @@ const parts$4 = defineParts({
 const iconSize = "20px";
 const compoundNode = defineRecipe({
 	className: "likec4-compound-node",
-	base: parts$4({
+	base: parts$5({
 		root: {
 			position: "relative",
 			width: "100%",
@@ -1928,7 +1866,7 @@ const compoundNode = defineRecipe({
 	}),
 	variants: {
 		isTransparent: {
-			false: parts$4({ root: {
+			false: parts$5({ root: {
 				boxShadow: {
 					_noReduceGraphics: "0 4px 10px 0.5px rgb(0 0 0/10%) , 0 2px 2px -1px rgb(0 0 0/40%)",
 					_whenSelected: "none",
@@ -1938,14 +1876,14 @@ const compoundNode = defineRecipe({
 				borderColor: __v("palette.stroke"),
 				[compoundColor.var]: alpha(__v("palette.hiContrast"), 90)
 			} }),
-			true: parts$4({ root: {
+			true: parts$5({ root: {
 				backgroundColor: alpha(__v("palette.fill"), compoundTransparency.ref),
 				borderColor: alpha(__v("palette.stroke"), borderTransparency.ref),
 				[compoundColor.var]: `color-mix(in oklch, ${__v("palette.hiContrast")}, ${__v("palette.stroke")} 10%)`
 			} })
 		},
 		inverseColor: {
-			true: parts$4({
+			true: parts$5({
 				root: {
 					"--_mix": `color-mix(in oklch, ${__v("palette.hiContrast")}, ${__v("palette.stroke")} 60%)`,
 					[compoundColor.var]: {
@@ -1966,10 +1904,10 @@ const compoundNode = defineRecipe({
 			false: {}
 		},
 		borderStyle: {
-			solid: parts$4({ root: { borderStyle: "solid" } }),
-			dashed: parts$4({ root: { borderStyle: "dashed" } }),
-			dotted: parts$4({ root: { borderStyle: "dotted" } }),
-			none: parts$4({ root: {
+			solid: parts$5({ root: { borderStyle: "solid" } }),
+			dashed: parts$5({ root: { borderStyle: "dashed" } }),
+			dotted: parts$5({ root: { borderStyle: "dotted" } }),
+			none: parts$5({ root: {
 				borderColor: "transparent!",
 				backgroundClip: "border-box!",
 				[indicatorSpacing.var]: `calc(${borderWidth.ref} * 2)`
@@ -1987,9 +1925,6 @@ const compoundNode = defineRecipe({
 		borderStyle: ["*"]
 	}]
 });
-
-//#endregion
-//#region ../preset/src/recipes/edgeActionBtn.ts
 const edgeActionBtn = defineRecipe({
 	className: "likec4-edge-action-btn",
 	description: "Action Button within Diagram Edge Label",
@@ -2002,7 +1937,7 @@ const edgeActionBtn = defineRecipe({
 		translate: "auto",
 		"--ai-bg": "transparent",
 		"--ai-hover": `color-mix(in oklab , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)`,
-		"--ai-size": `var(--ai-size-sm)`,
+		"--ai-size": `28px`,
 		"--ai-radius": `{radii.sm}`,
 		_hover: {
 			translateY: "[2px]",
@@ -2027,10 +1962,7 @@ const edgeActionBtn = defineRecipe({
 	defaultVariants: {},
 	staticCss: [{ conditions: ["*"] }]
 });
-
-//#endregion
-//#region ../preset/src/recipes/edgeLabel.ts
-const parts$3 = defineParts({
+const parts$4 = defineParts({
 	root: { selector: "&" },
 	stepNumber: { selector: "& .likec4-edge-label__step-number" },
 	contents: { selector: "& .likec4-edge-label__contents" },
@@ -2040,7 +1972,7 @@ const parts$3 = defineParts({
 const edgeLabel = defineRecipe({
 	className: "likec4-edge-label",
 	jsx: [],
-	base: parts$3({
+	base: parts$4({
 		root: {
 			fontFamily: "likec4.relation",
 			paddingBlock: "1",
@@ -2070,9 +2002,9 @@ const edgeLabel = defineRecipe({
 				borderRadius: "4px",
 				minWidth: "24px"
 			},
-			background: `color-mix(in oklab, ${__v("palette.relationLabelBg")}, {colors.likec4.mixColor} 10%)`,
+			background: `color-mix(in oklab, var(--xy-edge-label-background-color), {colors.likec4.mixColor} 12%)`,
 			fontVariantNumeric: "tabular-nums",
-			[":where([data-likec4-color=\"gray\"]) &"]: { _dark: { background: `[color-mix(in oklab, ${__v("palette.relationLabelBg")}, {colors.likec4.mixColor} 15%)]` } }
+			[":where([data-likec4-color=\"gray\"]) &"]: { _dark: { background: `[color-mix(in oklab, var(--xy-edge-label-background-color), {colors.likec4.mixColor} 15%)]` } }
 		},
 		contents: {
 			display: "contents",
@@ -2094,16 +2026,16 @@ const edgeLabel = defineRecipe({
 	}),
 	variants: {
 		pointerEvents: {
-			none: parts$3({ root: { pointerEvents: "none" } }),
-			all: parts$3({ root: { pointerEvents: "all" } })
+			none: parts$4({ root: { pointerEvents: "none" } }),
+			all: parts$4({ root: { pointerEvents: "all" } })
 		},
 		cursor: {
-			pointer: parts$3({ root: { cursor: "pointer" } }),
-			default: parts$3({ root: { cursor: "default" } })
+			pointer: parts$4({ root: { cursor: "pointer" } }),
+			default: parts$4({ root: { cursor: "default" } })
 		},
 		isStepEdge: {
 			false: {},
-			true: parts$3({
+			true: parts$4({
 				root: {
 					flexDirection: "row",
 					gap: "1",
@@ -2137,9 +2069,6 @@ const edgeLabel = defineRecipe({
 		pointerEvents: ["*"]
 	}]
 });
-
-//#endregion
-//#region ../preset/src/recipes/edgePath.ts
 const edgePath = defineSlotRecipe({
 	description: "Recipe for Edge Path",
 	slots: [
@@ -2211,9 +2140,6 @@ const edgePath = defineSlotRecipe({
 	},
 	staticCss: [{ conditions: ["*"] }]
 });
-
-//#endregion
-//#region ../preset/src/recipes/elementNode.ts
 const elementNode = defineRecipe({
 	className: "likec4-element-node",
 	jsx: ["ElementNodeContainer", "ElementNode"],
@@ -2247,10 +2173,7 @@ const elementNode = defineRecipe({
 	},
 	staticCss: [{ conditions: ["*"] }]
 });
-
-//#endregion
-//#region ../preset/src/recipes/elementNodeData.ts
-const parts$2 = defineParts({
+const parts$3 = defineParts({
 	root: { selector: "&" },
 	icon: { selector: "& [data-likec4-icon]" },
 	content: { selector: "& .likec4-element-node-content" },
@@ -2269,7 +2192,7 @@ const elementNodeData = defineRecipe({
 		"ElementTitle",
 		"Root"
 	],
-	base: parts$2({
+	base: parts$3({
 		root: {
 			position: "relative",
 			flex: "1",
@@ -2308,6 +2231,7 @@ const elementNodeData = defineRecipe({
 				paddingLeft: `calc(${__v("spacing")} + 20px)`,
 				paddingRight: `calc(${__v("spacing")} + 20px)`
 			},
+			_shapeComponent: { paddingLeft: `calc(${__v("spacing")} + 30px)` },
 			_shapeSizeXs: { [vars.icon.size]: `${defaultSizes.iconSizes.xs}px` },
 			_shapeSizeSm: { [vars.icon.size]: `${defaultSizes.iconSizes.sm}px` },
 			_shapeSizeMd: { [vars.icon.size]: `${defaultSizes.iconSizes.md}px` },
@@ -2335,9 +2259,11 @@ const elementNodeData = defineRecipe({
 				width: "100%",
 				height: "auto",
 				maxHeight: "100%",
+				transition: "fast",
 				filter: {
-					base: [`drop-shadow(1px 2px 1px var(--likec4-palette-stroke))`].join("\n"),
-					_reduceGraphicsOnPan: "none"
+					base: ["drop-shadow(0 1px 3px rgb(0 0 0 / 20%))"].join("\n"),
+					_whenHovered: ["drop-shadow(0 2px 4px rgb(0 0 0 / 30%))"].join("\n"),
+					_reduceGraphicsOnPan: "none!"
 				}
 			},
 			"& img": { objectFit: "contain" }
@@ -2420,14 +2346,14 @@ const elementNodeData = defineRecipe({
 	}),
 	variants: {
 		iconPosition: {
-			left: parts$2({ root: { [hasIcon]: {
+			left: parts$3({ root: { [hasIcon]: {
 				[textAlign]: "left",
 				"& .likec4-element-node-content": {
 					minWidth: `calc(50% + calc(${__v("icon.size")} / 2))`,
 					alignItems: "flex-start"
 				}
 			} } }),
-			right: parts$2({ root: { [hasIcon]: {
+			right: parts$3({ root: { [hasIcon]: {
 				flexDirection: "row-reverse",
 				[textAlign]: "right",
 				gap: "4",
@@ -2436,7 +2362,7 @@ const elementNodeData = defineRecipe({
 					alignItems: "flex-end"
 				}
 			} } }),
-			top: parts$2({
+			top: parts$3({
 				root: { [hasIcon]: {
 					flexDirection: "column",
 					gap: "2",
@@ -2448,7 +2374,7 @@ const elementNodeData = defineRecipe({
 				} },
 				icon: { alignSelf: "center" }
 			}),
-			bottom: parts$2({
+			bottom: parts$3({
 				root: { [hasIcon]: {
 					flexDirection: "column-reverse",
 					gap: "2",
@@ -2462,8 +2388,8 @@ const elementNodeData = defineRecipe({
 			})
 		},
 		withIconColor: {
-			true: parts$2({ icon: { color: __v("icon.color", "palette.stroke") } }),
-			false: parts$2({ icon: { mixBlendMode: {
+			true: parts$3({ icon: { "& svg": { color: __v("icon.color", "palette.stroke") } } }),
+			false: parts$3({ icon: { mixBlendMode: {
 				base: "hard-light",
 				_reduceGraphicsOnPan: "normal"
 			} } })
@@ -2479,19 +2405,17 @@ const elementNodeData = defineRecipe({
 		conditions: ["*"]
 	}]
 });
-
-//#endregion
-//#region ../preset/src/recipes/elementShape.ts
-const parts$1 = defineParts({
+const parts$2 = defineParts({
 	root: { selector: "&" },
 	outline: { selector: "& .likec4-shape-outline" },
 	multipleHtml: { selector: "& .likec4-shape-multiple" },
+	componentTopLeftRect: { selector: "& .top-left-rect" },
 	multipleSvg: { selector: "&:is([data-likec4-shape-multiple=\"true\"])" }
 });
 const elementShapeRecipe = defineRecipe({
 	description: "Recipe for Diagram node shape",
 	className: "likec4-element-shape",
-	base: parts$1({
+	base: parts$2({
 		root: {
 			top: "0",
 			left: "0",
@@ -2508,6 +2432,7 @@ const elementShapeRecipe = defineRecipe({
 		},
 		outline: {
 			opacity: .8,
+			transitionBehavior: "allow-discrete",
 			visibility: {
 				base: "hidden",
 				_smallZoom: "hidden",
@@ -2527,11 +2452,11 @@ const elementShapeRecipe = defineRecipe({
 	}),
 	variants: {
 		shapetype: {
-			html: parts$1({
+			html: parts$2({
 				root: {
 					backgroundColor: "var(--likec4-palette-fill)",
 					border: "none",
-					borderRadius: "[6px]",
+					borderRadius: "6px",
 					boxShadow: {
 						base: [
 							"0 2px 1px 0 rgb(0 0 0 / 21%)",
@@ -2547,9 +2472,10 @@ const elementShapeRecipe = defineRecipe({
 						_whenPanning: "none"
 					},
 					transition: {
-						base: "background-color 120ms linear, box-shadow 130ms {easings.inOut}",
+						base: "background-color 150ms, box-shadow 130ms",
 						_reduceGraphicsOnPan: "none"
 					},
+					transitionTimingFunction: "out",
 					transitionDelay: "0ms"
 				},
 				multipleHtml: {
@@ -2587,11 +2513,15 @@ const elementShapeRecipe = defineRecipe({
 					animationStyle: "indicator"
 				}
 			}),
-			svg: parts$1({
+			svg: parts$2({
 				root: {
 					fill: "var(--likec4-palette-fill)",
 					stroke: "var(--likec4-palette-stroke)",
-					transition: `fill 120ms linear, filter 130ms {easings.inOut}`,
+					transition: `fill 120ms {easings.in}, filter 130ms {easings.in}`,
+					transitionTimingFunction: {
+						base: "out",
+						_whenHovered: "in"
+					},
 					transitionDelay: "0ms",
 					filter: {
 						base: [
@@ -2612,7 +2542,24 @@ const elementShapeRecipe = defineRecipe({
 					},
 					"& [data-likec4-fill=\"fill\"]": { fill: "var(--likec4-palette-fill)" },
 					"& [data-likec4-fill=\"stroke\"]": { fill: "var(--likec4-palette-stroke)" },
-					"& [data-likec4-fill=\"mix-stroke\"]": { fill: "[color-mix(in oklab, var(--likec4-palette-stroke) 80%, var(--likec4-palette-fill))]" }
+					"& [data-likec4-fill=\"mix-stroke\"]": { fill: "color-mix(in oklab, var(--likec4-palette-stroke) 80%, var(--likec4-palette-fill))" }
+				},
+				componentTopLeftRect: {
+					"--mix-bg": "40%",
+					fill: "color-mix(in oklab, var(--likec4-palette-stroke) var(--mix-bg), var(--likec4-palette-fill))",
+					transition: `all 120ms {easings.in}`,
+					transitionDelay: "0ms",
+					strokeOpacity: .8,
+					_whenSelected: {
+						transitionTimingFunction: "out",
+						"--mix-bg": "60%",
+						strokeOpacity: 1
+					},
+					_whenHovered: {
+						transitionTimingFunction: "out",
+						"--mix-bg": "60%",
+						strokeOpacity: 1
+					}
 				},
 				multipleSvg: {
 					transformOrigin: {
@@ -2625,7 +2572,9 @@ const elementShapeRecipe = defineRecipe({
 						base: "translate(14px, 14px) perspective(200px) translateZ(-4px)",
 						_whenHovered: "translate(2px, 2px) perspective(200px) translateZ(-4px)"
 					},
-					transition: "fast",
+					transitionBehavior: "allow-discrete",
+					transitionProperty: "fill, filter, transform",
+					transitionDuration: "faster",
 					filter: "brightness(0.5) !important",
 					stroke: "none",
 					display: {
@@ -2647,13 +2596,20 @@ const elementShapeRecipe = defineRecipe({
 		withBorder: {
 			true: {},
 			false: {}
+		},
+		withOutline: {
+			true: parts$2({ outline: { display: "block" } }),
+			false: parts$2({ outline: { display: "none" } })
 		}
 	},
-	defaultVariants: { withBorder: false },
+	defaultVariants: {
+		withBorder: false,
+		withOutline: false
+	},
 	compoundVariants: [{
 		shapetype: "html",
 		withBorder: true,
-		css: parts$1({
+		css: parts$2({
 			root: {
 				borderStyle: "solid",
 				borderWidth: "3px",
@@ -2665,12 +2621,10 @@ const elementShapeRecipe = defineRecipe({
 	}],
 	staticCss: [{
 		shapetype: ["*"],
+		withOutline: ["*"],
 		withBorder: ["*"]
 	}]
 });
-
-//#endregion
-//#region ../preset/src/recipes/likec4tag.ts
 const likec4tag = defineRecipe({
 	className: "likec4-tag",
 	base: {
@@ -2713,9 +2667,6 @@ const likec4tag = defineRecipe({
 		conditions: ["hover"]
 	}]
 });
-
-//#endregion
-//#region ../preset/src/recipes/markdownBlock.ts
 const markdownBlock = defineRecipe({
 	className: "likec4-markdown-block",
 	jsx: ["MarkdownBlock", "Markdown"],
@@ -2804,7 +2755,7 @@ const markdownBlock = defineRecipe({
 			marginTop: "0",
 			marginBottom: "var(--typography-spacing)"
 		},
-		"& :where(strong)": { fontWeight: "500" },
+		"& :where(strong)": { fontWeight: "550" },
 		"& :where(mark)": {
 			fontSize: "var(--text-fz-md)",
 			backgroundColor: mantine.colors.yellow[2],
@@ -2818,7 +2769,7 @@ const markdownBlock = defineRecipe({
 			fontSize: "var(--text-fz-md)",
 			color: mantine.colors.anchor,
 			textDecoration: "none",
-			fontWeight: "500",
+			fontWeight: "450",
 			_hover: { textDecoration: "underline" }
 		},
 		"& :where(hr)": {
@@ -2880,7 +2831,7 @@ const markdownBlock = defineRecipe({
 			},
 			"& :where(th)": {
 				textAlign: "left",
-				fontWeight: "bold",
+				fontWeight: "550",
 				fontSize: "var(--text-fz-sm)",
 				padding: "var(--typography-spacing)"
 			},
@@ -2922,7 +2873,7 @@ const markdownBlock = defineRecipe({
 				alignItems: "center",
 				display: "flex",
 				fontSize: "var(--text-fz-md)",
-				fontWeight: "500",
+				fontWeight: "550",
 				lineHeight: "1.5",
 				marginBottom: "0.1em",
 				gap: "2"
@@ -2956,12 +2907,12 @@ const markdownBlock = defineRecipe({
 						_print: "normal!"
 					}
 				},
-				"& :where(strong)": { color: `color-mix(in oklab , var(--likec4-palette-hiContrast) 50%,  var(--likec4-palette-loContrast))` },
+				"& :where(strong)": { color: `color-mix(in oklab, ${__v("palette.hiContrast")} 50%,  ${__v("palette.loContrast")})` },
 				"& :where(blockquote)": {
 					padding: "xxs",
-					backgroundColor: "var(--likec4-palette-stroke)/65"
+					backgroundColor: alpha(__v("palette.stroke"), 65)
 				},
-				"& :where(hr)": { borderColor: "var(--likec4-palette-stroke)/85" }
+				"& :where(hr)": { borderColor: alpha(__v("palette.stroke"), 85) }
 			},
 			false: {}
 		},
@@ -2980,9 +2931,6 @@ const markdownBlock = defineRecipe({
 		conditions: ["*"]
 	}]
 });
-
-//#endregion
-//#region ../preset/src/recipes/navigationPanelActionIcon.ts
 const navigationPanelActionIcon = defineRecipe({
 	className: "likec4-navigation-panel-icon",
 	jsx: ["PanelActionIcon"],
@@ -3031,23 +2979,93 @@ const navigationPanelActionIcon = defineRecipe({
 		conditions: ["*"]
 	}]
 });
-
-//#endregion
-//#region ../preset/src/recipes/overlay.ts
+const parts$1 = defineParts({
+	root: { selector: "&" },
+	paper: { selector: "& .__paper" },
+	popover: { selector: "& .__popover" }
+});
+const nodeNotes = defineRecipe({
+	className: "likec4-node-notes",
+	jsx: ["NodeNotesr"],
+	base: parts$1({
+		root: {
+			position: "absolute",
+			top: "-20px",
+			left: "10px",
+			width: "120px",
+			height: "60px",
+			pointerEvents: "all",
+			userSelect: "none",
+			appearance: "none",
+			touchAction: "manipulation",
+			overflow: "visible",
+			"--paper-bg": `color-mix(in oklab, ${__v("palette.fill")} 10%, #DDD)`
+		},
+		paper: {
+			pointerEvents: "all",
+			position: "absolute",
+			top: "14px",
+			left: "10px",
+			width: "90px",
+			height: "120px",
+			boxShadow: ["inset 0 0 20px rgba(0, 0, 0, 0.25)", "0px 0px 3px 0px rgba(0, 0, 0, 0.35)"].join(", "),
+			backgroundColor: "oklch(from var(--paper-bg) calc(l - 0.1) c h)",
+			zIndex: -1,
+			transform: "rotateZ(-3deg)",
+			transformOrigin: "55% 90% 0",
+			overflow: "visible",
+			transition: "faster",
+			transitionDelay: "20ms",
+			_before: {
+				position: "absolute",
+				zIndex: -1,
+				content: "\" \"",
+				width: "100%",
+				height: "100%",
+				transform: "rotateZ(6deg) translate(-2px, 0px)",
+				transformOrigin: "45% 90% 0",
+				boxShadow: ["inset 0 0 20px rgba(0, 0, 0, 0.25)", "0px 0px 3px 0px rgba(0, 0, 0, 0.35)"].join(", "),
+				backgroundColor: "var(--paper-bg)"
+			},
+			_whenHovered: {
+				transform: "rotateZ(-4deg) scale(1.06)",
+				_before: { transform: "translate(-1px, -2px) rotateZ(6deg) scale(1.02)" }
+			}
+		},
+		popover: {
+			position: "absolute",
+			w: "auto",
+			h: "auto",
+			zIndex: 300,
+			top: "0",
+			left: "0",
+			display: "block",
+			pointerEvents: "all",
+			rounded: "sm",
+			backgroundColor: "likec4.overlay.body",
+			padding: "sm"
+		}
+	}),
+	variants: { opened: {
+		false: parts$1({}),
+		true: parts$1({})
+	} },
+	defaultVariants: { opened: false },
+	staticCss: [{ opened: ["*"] }]
+});
 const backdropBlur = "--_blur";
 const backdropOpacity = "--_opacity";
 const level = "--_level";
 const offset = "--_offset";
 const inset = "--_inset";
 const borderRadius = "--_border-radius";
-const parts = defineParts({
-	dialog: { selector: "&" },
-	body: { selector: "& .likec4-overlay-body" }
-});
 const overlay = defineRecipe({
 	description: "Recipe for Overlay Dialog",
 	className: "likec4-overlay",
-	base: parts({
+	base: defineParts({
+		dialog: { selector: "&" },
+		body: { selector: "& .likec4-overlay-body" }
+	})({
 		dialog: {
 			boxSizing: "border-box",
 			margin: "0",
@@ -3122,9 +3140,6 @@ const overlay = defineRecipe({
 		withBackdrop: ["*"]
 	}]
 });
-
-//#endregion
-//#region ../preset/src/recipes/index.ts
 var recipes_exports = /* @__PURE__ */ __exportAll({
 	actionBtn: () => actionBtn,
 	actionButtons: () => actionButtons,
@@ -3138,11 +3153,9 @@ var recipes_exports = /* @__PURE__ */ __exportAll({
 	likec4tag: () => likec4tag,
 	markdownBlock: () => markdownBlock,
 	navigationPanelActionIcon: () => navigationPanelActionIcon,
+	nodeNotes: () => nodeNotes,
 	overlay: () => overlay
 });
-
-//#endregion
-//#region ../preset/src/stot-recipes/navigationLink.ts
 const navigationLink = defineSlotRecipe({
 	className: "likec4-navlink",
 	description: "Navigation Link (classes for Mantine NavLink)",
@@ -3160,8 +3173,8 @@ const navigationLink = defineSlotRecipe({
 			px: "xs",
 			py: "xxs",
 			backgroundColor: { _hover: { "&:not([data-active])": {
-				base: "mantine.colors.gray[1]",
-				_dark: "mantine.colors.dark[5]"
+				base: mantine.colors.gray[1],
+				_dark: mantine.colors.dark[5]
 			} } }
 		},
 		body: {
@@ -3201,9 +3214,6 @@ const navigationLink = defineSlotRecipe({
 		conditions: ["*"]
 	}]
 });
-
-//#endregion
-//#region ../preset/src/stot-recipes/navigationPanel.ts
 const navigationPanel = defineSlotRecipe({
 	className: "likec4-navigation-panel",
 	jsx: ["NavigationPanel", /NavigationPanel/],
@@ -3225,16 +3235,22 @@ const navigationPanel = defineSlotRecipe({
 			margin: "0",
 			width: "100%",
 			gap: "xxs",
+			height: "auto",
+			overflow: "hidden",
+			maxHeight: ["calc(100vh)", "calc(100cqh)"],
 			maxWidth: ["calc(100vw)", "calc(100cqw)"],
 			"@/sm": {
 				margin: "xs",
 				gap: "xs",
 				width: "max-content",
-				maxWidth: ["calc(100vw - 2 * {spacing.xs})", "calc(100cqw - 2 * {spacing.xs})"]
+				maxWidth: ["calc(100vw - 2 * {spacing.xs})", "calc(100cqw - 2 * {spacing.xs})"],
+				maxHeight: ["calc(100vh - 2 * {spacing.xs})", "calc(100cqh - 2 * {spacing.xs})"]
 			},
 			"@/md": {
 				margin: "sm",
-				maxWidth: ["calc(100vw - 2 * {spacing.md})", "calc(100cqw - 2 * {spacing.md})"]
+				width: "max-content",
+				maxWidth: ["calc(100vw - 2 * {spacing.md})", "calc(100cqw - 2 * {spacing.md})"],
+				maxHeight: ["calc(100vh - 2 * {spacing.md})", "calc(100cqh - 2 * {spacing.md})"]
 			},
 			_print: { display: "none" }
 		},
@@ -3247,6 +3263,7 @@ const navigationPanel = defineSlotRecipe({
 			gap: "xs",
 			pointerEvents: "all",
 			width: "100%",
+			"@/sm": { width: "auto" },
 			minHeight: "40px",
 			cursor: "default"
 		},
@@ -3260,7 +3277,7 @@ const navigationPanel = defineSlotRecipe({
 			cursor: "pointer",
 			width: {
 				base: "20px",
-				"@/md": "64px"
+				"@/sm": "64px"
 			},
 			["& > [data-logo-icon]"]: { display: {
 				base: "block",
@@ -3279,6 +3296,12 @@ const navigationPanel = defineSlotRecipe({
 			color: "likec4.panel.text"
 		},
 		dropdown: {
+			display: "flex",
+			height: "auto",
+			width: "auto",
+			flex: "1",
+			flexGrow: 0,
+			overflow: "hidden",
 			layerStyle: "likec4.dropdown",
 			pointerEvents: "all"
 		}
@@ -3316,18 +3339,23 @@ const navigationPanel = defineSlotRecipe({
 		panelPosition: ["*"]
 	}]
 });
-
-//#endregion
-//#region ../preset/src/stot-recipes/index.ts
 var stot_recipes_exports = /* @__PURE__ */ __exportAll({
 	navigationLink: () => navigationLink,
 	navigationPanel: () => navigationPanel
 });
-
-//#endregion
-//#region ../preset/src/text-styles.ts
-const textStyles = defineTextStyles({
+function defineTextStyles$1(definition) {
+	return defineTextStyles(definition);
+}
+const textStyles = defineTextStyles$1({
 	dimmed: {
+		DEFAULT: {
+			description: "Text style for dimmed content",
+			value: {
+				fontSize: "md",
+				lineHeight: "md",
+				color: "text.dimmed"
+			}
+		},
 		xxs: { value: {
 			fontSize: "xxs",
 			lineHeight: "xxs",
@@ -3373,228 +3401,282 @@ const textStyles = defineTextStyles({
 		fontSize: "xl",
 		lineHeight: "xl"
 	} },
-	likec4: { panel: {
+	likec4: {
 		DEFAULT: {
 			description: "Text style for panel content",
 			value: {
-				fontSize: "sm",
-				lineHeight: "sm",
-				fontWeight: "medium",
-				color: "likec4.panel.text"
+				fontSize: "md",
+				lineHeight: "md",
+				fontWeight: "normal",
+				color: "text"
 			}
 		},
-		action: {
-			description: "Text style for panel action items",
-			value: {
-				fontSize: "sm",
-				lineHeight: "sm",
-				fontWeight: "medium",
-				color: {
-					base: "likec4.panel.action",
-					_hover: "likec4.panel.action.hover"
+		panel: {
+			DEFAULT: {
+				description: "Text style for panel content",
+				value: {
+					fontSize: "sm",
+					lineHeight: "sm",
+					fontWeight: "medium",
+					color: "likec4.panel.text"
+				}
+			},
+			action: {
+				description: "Text style for panel action items",
+				value: {
+					fontSize: "sm",
+					lineHeight: "sm",
+					fontWeight: "medium",
+					color: {
+						base: "likec4.panel.action",
+						_hover: "likec4.panel.action.hover"
+					}
 				}
 			}
 		}
-	} }
+	}
 });
-
-//#endregion
-//#region ../preset/src/tokens-semantic.colors.ts
-const colors$1 = defineSemanticTokens.colors({ likec4: {
-	background: {
+const semanticTokens = defineSemanticTokens({ colors: defineSemanticTokens.colors({
+	white: { value: "#fff" },
+	black: { value: "#000" },
+	body: {
+		description: "Background color",
+		value: mantine.colors.body
+	},
+	text: {
 		DEFAULT: {
-			description: "Background color",
-			value: mantine.colors.body
+			description: "Default text color",
+			value: mantine.colors.text
 		},
-		pattern: {
-			description: "Background pattern color",
-			value: {
-				base: mantine.colors.gray[4],
-				_dark: alpha(mantine.colors.dark[4], 70)
-			}
+		bright: {
+			description: "Bright text color",
+			value: "var(--mantine-color-bright)"
+		},
+		dimmed: {
+			description: "Dimmed text color",
+			value: alpha(mantine.colors.text, 60)
+		},
+		placeholder: {
+			description: "Placeholder text color",
+			value: mantine.colors.placeholder
 		}
 	},
-	mixColor: {
-		description: "Color to be used in color-mix",
-		value: {
-			base: "#000",
-			_dark: "#fff"
+	default: {
+		DEFAULT: {
+			description: "Default color",
+			value: mantine.colors.default
+		},
+		color: {
+			description: "Default text color",
+			value: mantine.colors.defaultColor
+		},
+		border: {
+			description: "Default border color",
+			value: mantine.colors.defaultBorder
+		},
+		hover: {
+			description: "Default hover color",
+			value: mantine.colors.defaultHover
 		}
 	},
-	tag: {
-		bg: {
-			DEFAULT: { value: `{colors.tomato.9}` },
-			hover: { value: `{colors.tomato.10}` }
+	disabled: {
+		text: {
+			description: "Disabled text color",
+			value: mantine.colors.disabledText
 		},
-		border: { value: `{colors.tomato.8}` },
-		text: { value: `{colors.tomato.12}` }
-	},
-	panel: {
-		bg: { DEFAULT: {
-			description: "LikeC4 panel background color",
-			value: {
-				base: mantine.colors.body,
-				_dark: mantine.colors.dark[6]
-			}
-		} },
 		border: {
-			description: "LikeC4 panel border color",
-			value: {
-				base: "transparent",
-				_light: mantine.colors.gray[2]
-			}
+			description: "Disabled border color",
+			value: mantine.colors.disabledBorder
 		},
-		text: {
+		body: {
+			description: "Disabled body color",
+			value: mantine.colors.disabledBody
+		}
+	},
+	likec4: {
+		background: {
 			DEFAULT: {
-				description: "LikeC4 panel text color",
-				value: alpha(mantine.colors.text, 85)
+				description: "Background color",
+				value: mantine.colors.body
 			},
-			dimmed: {
-				description: "LikeC4 panel dimmed text color",
-				value: "{colors.text.dimmed}"
+			pattern: {
+				description: "Background pattern color",
+				value: {
+					base: mantine.colors.gray[4],
+					_dark: alpha(mantine.colors.dark[4], 70)
+				}
 			}
 		},
-		action: {
-			DEFAULT: {
-				description: "LikeC4 panel action text color (Links/Icons)",
-				value: alpha(mantine.colors.text, 90)
-			},
-			disabled: {
-				description: "LikeC4 action icon text color when disabled",
-				value: "{colors.text.dimmed}"
+		mixColor: {
+			description: "Color to be used in color-mix",
+			value: {
+				base: "#000",
+				_dark: "#fff"
+			}
+		},
+		tag: {
+			bg: {
+				DEFAULT: { value: `{colors.tomato.9}` },
+				hover: { value: `{colors.tomato.10}` }
 			},
-			hover: {
-				description: "LikeC4 panel action text color on hover",
-				value: "var(--mantine-color-bright)"
+			border: { value: `{colors.tomato.8}` },
+			text: { value: `{colors.tomato.12}` }
+		},
+		panel: {
+			bg: { DEFAULT: {
+				description: "LikeC4 panel background color",
+				value: {
+					base: mantine.colors.body,
+					_dark: mantine.colors.dark[6]
+				}
+			} },
+			border: {
+				description: "LikeC4 panel border color",
+				value: {
+					base: "transparent",
+					_light: mantine.colors.gray[2]
+				}
 			},
-			bg: {
+			text: {
 				DEFAULT: {
-					description: "LikeC4 action icon background color",
-					value: {
-						base: mantine.colors.gray[1],
-						_dark: alpha(mantine.colors.dark[7], 70)
-					}
+					description: "LikeC4 panel text color",
+					value: alpha(mantine.colors.text, 85)
 				},
-				hover: {
-					description: "LikeC4 action icon background color on hover",
-					value: {
-						base: mantine.colors.gray[2],
-						_dark: mantine.colors.dark[8]
-					}
+				dimmed: {
+					description: "LikeC4 panel dimmed text color",
+					value: "{colors.text.dimmed}"
 				}
 			},
-			warning: {
+			action: {
 				DEFAULT: {
-					description: "LikeC4 action icon text color",
-					value: mantine.colors.orange[6]
+					description: "LikeC4 panel action text color (Links/Icons)",
+					value: alpha(mantine.colors.text, 90)
+				},
+				disabled: {
+					description: "LikeC4 action icon text color when disabled",
+					value: "{colors.text.dimmed}"
 				},
 				hover: {
-					description: "LikeC4 action icon text color on hover",
-					value: {
-						base: mantine.colors.orange[7],
-						_dark: mantine.colors.orange[5]
-					}
+					description: "LikeC4 panel action text color on hover",
+					value: "var(--mantine-color-bright)"
 				},
 				bg: {
 					DEFAULT: {
 						description: "LikeC4 action icon background color",
 						value: {
-							base: alpha(mantine.colors.orange[1], 90),
-							_dark: alpha(mantine.colors.orange[9], 10)
+							base: mantine.colors.gray[1],
+							_dark: alpha(mantine.colors.dark[7], 70)
 						}
 					},
 					hover: {
 						description: "LikeC4 action icon background color on hover",
 						value: {
-							base: alpha(mantine.colors.orange[3], 70),
-							_dark: alpha(mantine.colors.orange[9], 20)
+							base: mantine.colors.gray[2],
+							_dark: mantine.colors.dark[8]
+						}
+					}
+				},
+				warning: {
+					DEFAULT: {
+						description: "LikeC4 action icon text color",
+						value: mantine.colors.orange[6]
+					},
+					hover: {
+						description: "LikeC4 action icon text color on hover",
+						value: {
+							base: mantine.colors.orange[7],
+							_dark: mantine.colors.orange[5]
+						}
+					},
+					bg: {
+						DEFAULT: {
+							description: "LikeC4 action icon background color",
+							value: {
+								base: alpha(mantine.colors.orange[1], 90),
+								_dark: alpha(mantine.colors.orange[9], 10)
+							}
+						},
+						hover: {
+							description: "LikeC4 action icon background color on hover",
+							value: {
+								base: alpha(mantine.colors.orange[3], 70),
+								_dark: alpha(mantine.colors.orange[9], 20)
+							}
 						}
 					}
 				}
 			}
-		}
-	},
-	dropdown: {
-		bg: { DEFAULT: {
-			description: "LikeC4 dropdown background color",
-			value: {
-				base: `#FFF`,
-				_dark: mantine.colors.dark[6]
+		},
+		dropdown: {
+			bg: { DEFAULT: {
+				description: "LikeC4 dropdown background color",
+				value: {
+					base: `#FFF`,
+					_dark: mantine.colors.dark[6]
+				}
+			} },
+			border: {
+				description: "LikeC4 dropdown border color",
+				value: "{colors.likec4.panel.border}"
 			}
-		} },
-		border: {
-			description: "LikeC4 dropdown border color",
-			value: "{colors.likec4.panel.border}"
-		}
-	},
-	overlay: {
-		backdrop: { DEFAULT: {
-			description: "LikeC4 overlay backdrop color",
-			value: {
-				base: `rgb(15 15 15)`,
-				_dark: `rgb(34 34 34)`
+		},
+		overlay: {
+			backdrop: { DEFAULT: {
+				description: "LikeC4 overlay backdrop color",
+				value: {
+					base: `rgb(15 15 15)`,
+					_dark: `rgb(34 34 34)`
+				}
+			} },
+			body: { DEFAULT: {
+				description: "LikeC4 overlay body color",
+				value: {
+					base: mantine.colors.body,
+					_dark: mantine.colors.dark[6]
+				}
+			} },
+			border: {
+				description: "LikeC4 overlay border color",
+				value: alpha(mantine.colors.defaultBorder, 50)
 			}
-		} },
-		body: { DEFAULT: {
-			description: "LikeC4 overlay body color",
+		},
+		walkthrough: { parallelFrame: {
+			description: "LikeC4 walkthrough parallel frame color",
 			value: {
-				base: mantine.colors.body,
-				_dark: mantine.colors.dark[6]
+				_light: mantine.colors.orange[8],
+				_dark: mantine.colors.orange[6]
 			}
 		} },
-		border: {
-			description: "LikeC4 overlay border color",
-			value: alpha(mantine.colors.defaultBorder, 50)
-		}
-	},
-	compare: {
-		manual: {
-			DEFAULT: {
-				description: "LikeC4 Compare color for manual changes",
-				value: {
-					_light: mantine.colors.orange[8],
-					_dark: mantine.colors.orange[6]
+		compare: {
+			manual: {
+				DEFAULT: {
+					description: "LikeC4 Compare color for manual changes",
+					value: {
+						_light: mantine.colors.orange[8],
+						_dark: mantine.colors.orange[6]
+					}
+				},
+				outline: {
+					description: "LikeC4 Compare color for outline around nodes with manual changes",
+					value: {
+						_light: mantine.colors.orange[8],
+						_dark: alpha(mantine.colors.orange[6], 80)
+					}
 				}
 			},
-			outline: {
-				description: "LikeC4 Compare color for outline around nodes with manual changes",
-				value: {
-					_light: mantine.colors.orange[8],
-					_dark: alpha(mantine.colors.orange[6], 80)
-				}
+			latest: {
+				description: "LikeC4 Compare color for latest changes",
+				value: mantine.colors.green[6]
 			}
-		},
-		latest: {
-			description: "LikeC4 Compare color for latest changes",
-			value: mantine.colors.green[6]
 		}
 	}
-} });
-
-//#endregion
-//#region ../preset/src/tokens-semantic.ts
-const semanticTokens = defineSemanticTokens({ colors: colors$1 });
-
-//#endregion
-//#region ../preset/src/tokens.colors.ts
+}) });
 const colors = defineTokens.colors({
 	mantine: tokens$1.colors.mantine,
 	transparent: { value: "transparent" },
 	none: { value: "none" },
-	text: {
-		DEFAULT: {
-			description: "Default text color",
-			value: mantine.colors.text
-		},
-		dimmed: {
-			description: "Dimmed text color",
-			value: mantine.colors.dimmed
-		}
-	}
+	inherit: { value: "inherit" }
 });
-
-//#endregion
-//#region ../preset/src/tokens.ts
 const tokens = defineTokens({
 	fontSizes: {
 		"xxs": { value: "10px" },
@@ -3624,7 +3706,14 @@ const tokens = defineTokens({
 	borders: {
 		none: { value: "none" },
 		transparent: { value: "0px solid transparent" },
-		default: { value: `1px solid ${mantine.colors.defaultBorder}` }
+		default: { value: `1px solid {colors.default.border}` }
+	},
+	borderWidths: {
+		"0": { value: "0px" },
+		"1": { value: "1px" },
+		"2": { value: "2px" },
+		"3": { value: "3px" },
+		"4": { value: "4px" }
 	},
 	spacing: {
 		"0": {
@@ -3782,7 +3871,11 @@ const tokens = defineTokens({
 		"1": { value: "1" },
 		likec4: {
 			diagram: {
-				edge: { value: "20" },
+				edge: {
+					DEFAULT: { value: "20" },
+					label: { value: "25" },
+					controlPoint: { value: "30" }
+				},
 				node: {
 					compound: { value: "10" },
 					element: { value: "40" }
@@ -3796,9 +3889,6 @@ const tokens = defineTokens({
 		}
 	}
 });
-
-//#endregion
-//#region ../preset/src/utilities.ts
 const durationValues = [
 	"fastest",
 	"faster",
@@ -3809,18 +3899,18 @@ const durationValues = [
 	"slowest",
 	"none"
 ];
-const utilities = { extend: { transition: {
+const utilities = { extend: { transition: defineUtility({
 	values: durationValues,
 	className: "transition",
 	transform(value, { token }) {
 		if (value === "none") return { transition: "none" };
 		if (!durationValues.includes(value)) return { transition: value };
-		return { transition: `all ${token.raw(`durations.${value}`).value} ${token.raw("easings.inOut").value}` };
+		return {
+			transitionDuration: token(`durations.${value}`),
+			transitionTimingFunction: token("easings.inOut")
+		};
 	}
-} } };
-
-//#endregion
-//#region ../preset/src/index.ts
+}) } };
 const theme = {
 	breakpoints,
 	textStyles,
@@ -3850,6 +3940,4 @@ var src_default = /* @__PURE__ */ definePreset({
 	utilities,
 	theme: { extend: theme }
 });
-
-//#endregion
-export { src_default as default, theme };
+export { src_default as default, theme };