@likec4/styles 1.55.1 → 1.57.0

package/dist/jsx/txt.mjs

@@ -5,7 +5,7 @@ import { getTxtStyle } from '../patterns/txt.mjs';
 import { styled } from './factory.mjs';
 
 export const Txt = /* @__PURE__ */ forwardRef(function Txt(props, ref) {
-  const [patternProps, restProps] = splitProps(props, ["inline","dimmed","lh","size","likec4color"])
+  const [patternProps, restProps] = splitProps(props, ["inline","dimmed","noUserSelect","lh","size","likec4color"])
 
 const styleProps = getTxtStyle(patternProps)
 const mergedProps = { ref, ...styleProps, ...restProps }

package/dist/patterns/txt.d.mts

@@ -8,6 +8,7 @@ import type { Tokens } from '../tokens/index.d.mts';
 export interface TxtProperties {
    inline?: ConditionalValue<boolean>
 	dimmed?: ConditionalValue<boolean>
+	noUserSelect?: ConditionalValue<boolean>
 	lh?: ConditionalValue<Tokens["lineHeights"]>
 	size?: ConditionalValue<"xxs" | "xs" | "sm" | "md" | "lg" | "xl">
 	likec4color?: ConditionalValue<"amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "muted" | "primary" | "red" | "secondary" | "sky">

package/dist/patterns/txt.mjs

@@ -3,7 +3,7 @@ import { css } from '../css/index.mjs';
 
 const txtConfig = {
 transform(props, _helpers) {
-  const { inline, size, dimmed, lh, likec4color, ...rest } = props;
+  const { inline, size, dimmed, lh, likec4color, noUserSelect, ...rest } = props;
   if (dimmed && likec4color) {
     throw new Error("dimmed and likec4color are mutually exclusive");
   }
@@ -14,10 +14,11 @@ transform(props, _helpers) {
     ...inline && { display: "inline-block" },
     ...lh && { lineHeight: lh },
     ...likec4color && { "data-likec4-color": likec4color },
+    ...noUserSelect && { userSelect: "none" },
     ...rest
   };
 },
-defaultValues:{inline:false,dimmed:false,size:'md'}}
+defaultValues:{inline:false,dimmed:false,size:'md',noUserSelect:false}}
 
 export const getTxtStyle = (styles = {}) => {
   const _styles = getPatternStyles(txtConfig, styles)

package/package.json

@@ -2,7 +2,7 @@
   "name": "@likec4/styles",
   "description": "Shared PandaCSS preset and generated styles, used in LikeC4",
   "license": "MIT",
-  "version": "1.55.1",
+  "version": "1.57.0",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -77,10 +77,10 @@
     }
   },
   "dependencies": {
-    "@pandacss/types": "^1.9.1"
+    "@pandacss/types": "^1.11.1"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^1.9.1",
+    "@pandacss/dev": "^1.11.1",
     "react": "^18.x || ^19.x"
   },
   "peerDependenciesMeta": {
@@ -92,21 +92,21 @@
     }
   },
   "devDependencies": {
-    "@types/node": "~22.19.15",
+    "@types/node": "~22.19.19",
     "@pandabox/panda-plugins": "^0.0.8",
     "@pandabox/utils": "^0.0.5",
     "@pandabox/unplugin": "^0.2.2",
-    "@pandacss/dev": "^1.9.1",
+    "@pandacss/dev": "^1.11.1",
     "@types/picomatch": "^4.0.3",
-    "@types/react": "19.2.14",
-    "postcss": "8.5.9",
+    "@types/react": "19.2.15",
+    "postcss": "8.5.15",
     "remeda": "^2.33.7",
     "nano-spawn": "^2.0.0",
     "obuild": "0.4.31",
     "typescript": "5.9.3",
-    "@likec4/style-preset": "1.55.1",
-    "@likec4/devops": "1.42.0",
-    "@likec4/tsconfig": "1.55.1"
+    "@likec4/style-preset": "1.57.0",
+    "@likec4/devops": "1.57.0",
+    "@likec4/tsconfig": "1.57.0"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",

package/preset/_chunks/libs/@radix-ui/colors.mjs

@@ -1,4 +1,5 @@
 import { t as __exportAll } from "../../rolldown-runtime.mjs";
+//#region ../../node_modules/.pnpm/@radix-ui+colors@3.0.0/node_modules/@radix-ui/colors/index.mjs
 var colors_exports = /* @__PURE__ */ __exportAll({
 	amber: () => amber,
 	amberA: () => amberA,
@@ -3781,4 +3782,5 @@ const whiteP3A = {
 	whiteA11: "color(display-p3 1 1 1 / 0.9)",
 	whiteA12: "color(display-p3 1 1 1 / 0.95)"
 };
+//#endregion
 export { grass as a, orange as c, red as d, ruby as f, yellow as g, violet as h, crimson as i, pink as l, tomato as m, blue as n, indigo as o, teal as p, colors_exports as r, lime as s, amber as t, purple as u };

package/preset/_chunks/libs/pandacss-preset-radix-colors.mjs

@@ -1,5 +1,6 @@
 import { r as colors_exports } from "./@radix-ui/colors.mjs";
 import { definePreset } from "@pandacss/dev";
+//#region ../../node_modules/.pnpm/pandacss-preset-radix-colors@0.2.1_@pandacss+dev@1.11.1_typescript@5.9.3__@radix-ui+colors@3.0.0/node_modules/pandacss-preset-radix-colors/index.mjs
 var SCALE_TAGS_REGEX = new RegExp(`(${["P3"].join("|")})|(?=[A-Z0-9])`, "g");
 function getScaleTags(fullName) {
 	return fullName.split(SCALE_TAGS_REGEX).filter(Boolean).map((x) => x.toLowerCase());
@@ -144,4 +145,5 @@ function transformScaleName(scale) {
 	return scale.split(/(Dark|P3|A)/).map((x) => x.toLowerCase()).filter(Boolean).join(".");
 }
 Object.keys(colors_exports).filter((scale) => !scale.includes("default")).map(transformScaleName);
+//#endregion
 export { createPreset as t };

package/preset/_chunks/libs/remeda.mjs

@@ -1,3 +1,4 @@
+//#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/lazyDataLastImpl-DtF3cihj.js
 function e$4(e, t, n) {
 	let r = (n) => e(n, ...t);
 	return n === void 0 ? r : Object.assign(r, {
@@ -5,12 +6,16 @@ function e$4(e, t, n) {
 		lazyArgs: t
 	});
 }
+//#endregion
+//#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/purry.js
 function t$10(t, n, r) {
 	let i = t.length - n.length;
 	if (i === 0) return t(...n);
 	if (i === 1) return e$4(t, n, r);
 	throw Error(`Wrong number of arguments`);
 }
+//#endregion
+//#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/capitalize.js
 function t$9(...t) {
 	return t$10(n$6, t);
 }
@@ -18,6 +23,8 @@ const n$6 = (e) => `${e[0]?.toUpperCase() ?? ``}${e.slice(1)}`, t$8 = {
 	done: !1,
 	hasNext: !1
 };
+//#endregion
+//#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/pipe.js
 function t$7(e, ...t) {
 	let a = e, o = t.map((e) => `lazy` in e ? r(e) : void 0), s = 0;
 	for (; s < t.length;) {
@@ -66,16 +73,24 @@ function r(e) {
 function i(e) {
 	return typeof e == `string` || typeof e == `object` && !!e && Symbol.iterator in e;
 }
+//#endregion
+//#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/hasAtLeast.js
 function t$6(...t) {
 	return t$10(n$3, t);
 }
 const n$3 = (e, t) => e.length >= t;
+//#endregion
+//#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/isString.js
 function e$2(e) {
 	return typeof e == `string`;
 }
+//#endregion
+//#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/keys.js
 function t$5(...t) {
 	return t$10(Object.keys, t);
 }
+//#endregion
+//#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/mapKeys.js
 function t$4(...t) {
 	return t$10(n$2, t);
 }
@@ -87,6 +102,8 @@ function n$2(e, t) {
 	}
 	return n;
 }
+//#endregion
+//#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/mapToObj.js
 function t$3(...t) {
 	return t$10(n$1, t);
 }
@@ -98,6 +115,8 @@ function n$1(e, t) {
 	}
 	return n;
 }
+//#endregion
+//#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/mapValues.js
 function t$2(...t) {
 	return t$10(n, t);
 }
@@ -106,6 +125,8 @@ function n(e, t) {
 	for (let [r, i] of Object.entries(e)) n[r] = t(i, r, e);
 	return n;
 }
+//#endregion
+//#region ../../node_modules/.pnpm/remeda@2.33.7/node_modules/remeda/dist/prop.js
 function e$1(e, ...n) {
 	return typeof e == `string` || typeof e == `number` || typeof e == `symbol` ? (r) => t$1(r, e, ...n) : t$1(e, ...n);
 }
@@ -123,4 +144,5 @@ new Set([
 	...`	.
 .\v.\f.\r. .….\xA0. . . . . . . . . . . . .\u2028.\u2029. . .　.`.split(`.`)
 ]);
+//#endregion
 export { t$5 as a, t$7 as c, t$4 as i, t$9 as l, t$2 as n, e$2 as o, t$3 as r, t$6 as s, e$1 as t };

package/preset/_chunks/rolldown-runtime.mjs

@@ -1,3 +1,4 @@
+//#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
 	let target = {};
@@ -8,4 +9,5 @@ var __exportAll = (all, no_symbols) => {
 	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
 	return target;
 };
+//#endregion
 export { __exportAll as t };

package/preset/preset.mjs

@@ -3,6 +3,7 @@ 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
 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, defineUtility } from "@pandacss/dev";
+//#region ../preset/src/animations.ts
 const keyframes = defineKeyframes({
 	"indicatorOpacity": {
 		"0%": { opacity: .8 },
@@ -29,6 +30,8 @@ const animationStyles = defineAnimationStyles({
 		animationName: "xyedgeAnimated"
 	} }
 });
+//#endregion
+//#region ../preset/src/defaults/vars.ts
 const vars = {
 	font: "--likec4-app-font",
 	spacing: "--likec4-spacing",
@@ -73,8 +76,11 @@ 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";
-`${root}`;
+//#endregion
+//#region ../preset/src/defaults/element-colors.ts
 const blue$1 = {
 	fill: "#3b82f6",
 	stroke: "#2563eb",
@@ -131,6 +137,8 @@ const ElementColors = {
 		loContrast: "#c7d2fe"
 	}
 };
+//#endregion
+//#region ../preset/src/defaults/relationship-colors.ts
 const gray = {
 	line: "#8D8D8D",
 	labelBg: "#18191B",
@@ -144,12 +152,12 @@ const slate = {
 const blue = {
 	line: "#3b82f6",
 	labelBg: "#172554",
-	label: "#60a5fa"
+	label: "#eff5fd"
 };
 const sky = {
 	line: "#0ea5e9",
 	labelBg: "#082f49",
-	label: "#38bdf8"
+	label: "#d4f2ff"
 };
 const RelationshipColors = {
 	amber: {
@@ -162,24 +170,26 @@ const RelationshipColors = {
 	green: {
 		line: "#15803d",
 		labelBg: "#052e16",
-		label: "#22c55e"
+		label: "#bbfcd3"
 	},
 	indigo: {
 		line: "#6366f1",
 		labelBg: "#1e1b4b",
-		label: "#818cf8"
+		label: "#cbd0fd"
 	},
 	muted: slate,
 	primary: blue,
 	red: {
 		line: "#AC4D39",
 		labelBg: "#b91c1c",
-		label: "#f5b2a3"
+		label: "#fcd9d2"
 	},
 	secondary: sky,
 	sky,
 	slate
 };
+//#endregion
+//#region ../preset/src/defaults/sizes.ts
 const defaultSizes = {
 	sizes: {
 		xs: {
@@ -210,6 +220,13 @@ const defaultSizes = {
 		lg: 24,
 		xl: 32
 	},
+	/**
+	* Text sizes for titles
+	* https://typescale.com/
+	*
+	* Scale:  1.2
+	* Base:   16px
+	*/
 	textSizes: {
 		xs: 13.33,
 		sm: 16,
@@ -225,6 +242,8 @@ const defaultSizes = {
 		xl: 90
 	}
 };
+//#endregion
+//#region ../preset/src/defaults/types.ts
 const ElementShapes = [
 	"rectangle",
 	"person",
@@ -268,6 +287,8 @@ const DefaultTagColors = [
 	"violet"
 ];
 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;
+//#endregion
+//#region ../preset/src/defaults/index.ts
 const defaultTheme = {
 	colors: ThemeColors.reduce((acc, key) => {
 		acc[key] = {
@@ -278,6 +299,8 @@ 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)),
@@ -307,6 +330,8 @@ const conditions = { extend: {
 	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",
@@ -1310,6 +1335,8 @@ const mantine = {
 	darkSelector: "[data-mantine-color-scheme=\"dark\"] &",
 	lightSelector: "[data-mantine-color-scheme=\"light\"] &"
 };
+//#endregion
+//#region ../preset/src/helpers.ts
 /**
 * Changes the alpha channel of a color
 * @param color color value or CSS variable
@@ -1327,6 +1354,8 @@ function alpha(color, percentage = 50) {
 function rem(pixels) {
 	return `${pixels}px`;
 }
+//#endregion
+//#region ../preset/src/globalCss.ts
 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}}` }])
@@ -1337,12 +1366,7 @@ const globalCss = { extend: {
 	".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": {
-			"--mantine-font-family": "var(--likec4-app-font, var(--likec4-app-font-default))",
-			color: "var(--colors-text)"
-		}
+		"& dialog": { color: "var(--colors-text)" }
 	},
 	".likec4-edge-label-container": {
 		top: 0,
@@ -1420,11 +1444,11 @@ const globalCss = { extend: {
 			"--xy-edge-stroke-selected": __v("palette.relationStrokeSelected"),
 			"--xy-edge-label-color": {
 				base: __v("palette.relationLabel"),
-				_light: `oklch(from ${__v("palette.relationLabel")} calc(l + 0.05) c h)`
+				_light: `oklch(from ${__v("palette.relationLabel")} calc(l + 0.1) c h)`
 			},
 			"--xy-edge-label-background-color": {
-				_dark: alpha(__v("palette.relationLabelBg"), 45),
-				_light: alpha(__v("palette.relationLabelBg"), 60)
+				base: alpha(__v("palette.relationLabelBg"), 85),
+				_light: alpha(__v("palette.relationLabelBg"), 65)
 			},
 			"&:is([data-likec4-hovered=\"true\"], [data-edge-active=\"true\"])": {
 				"--xy-edge-stroke-width": 4,
@@ -1446,8 +1470,8 @@ const globalCss = { extend: {
 				transitionDuration: "400ms"
 			},
 			"& :where(.react-flow__edgelabel-renderer) > *": { mixBlendMode: {
-				base: "hard-light",
-				_dark: "screen",
+				base: "luminosity",
+				_light: "hard-light",
 				_print: "normal!"
 			} },
 			"& :where(.react-flow__edges) > svg": { mixBlendMode: {
@@ -1465,8 +1489,10 @@ const globalCss = { extend: {
 	},
 	":where(.likec4-static-view, .relationships-browser, .likec4-relationship-details) .react-flow .react-flow__attribution": { display: "none" }
 } };
+//#endregion
+//#region ../preset/src/globalVars.ts
 const globalVars = { extend: {
-	[vars.font]: "/*-*/ /*-*/",
+	[vars.font]: "var(--likec4-app-font-default)",
 	[vars.spacing]: "/*-*/ /*-*/",
 	[vars.textsize]: rem(defaultTheme.textSizes.md),
 	[vars.palette.fill]: defaultTheme.colors.primary.elements.fill,
@@ -1483,6 +1509,8 @@ 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",
@@ -1566,6 +1594,8 @@ const layerStyles = /* @__PURE__ */ defineLayerStyles({ likec4: {
 		}
 	}
 } });
+//#endregion
+//#region ../preset/src/pattens/index.ts
 const patterns = { extend: {
 	vstack: { defaultValues: {
 		alignItems: "stretch",
@@ -1575,8 +1605,18 @@ const patterns = { extend: {
 	box: { jsx: ["Box", "MarkdownBlock"] },
 	txt: definePattern({
 		properties: {
-			inline: { type: "boolean" },
-			dimmed: { type: "boolean" },
+			inline: {
+				description: "Whether the text should be inline (default: false)",
+				type: "boolean"
+			},
+			dimmed: {
+				description: "Whether the text should be dimmed (default: false)",
+				type: "boolean"
+			},
+			noUserSelect: {
+				description: "Whether the text should not be selectable (default: false)",
+				type: "boolean"
+			},
 			lh: {
 				type: "token",
 				value: "lineHeights"
@@ -1600,10 +1640,11 @@ const patterns = { extend: {
 		defaultValues: {
 			inline: false,
 			dimmed: false,
-			size: "md"
+			size: "md",
+			noUserSelect: false
 		},
 		transform(props, _helpers) {
-			const { inline, size, dimmed, lh, likec4color, ...rest } = props;
+			const { inline, size, dimmed, lh, likec4color, noUserSelect, ...rest } = props;
 			if (dimmed && likec4color) throw new Error("dimmed and likec4color are mutually exclusive");
 			return {
 				userSelect: "all",
@@ -1612,6 +1653,7 @@ const patterns = { extend: {
 				...inline && { display: "inline-block" },
 				...lh && { lineHeight: lh },
 				...likec4color && { "data-likec4-color": likec4color },
+				...noUserSelect && { userSelect: "none" },
 				...rest
 			};
 		},
@@ -1620,6 +1662,8 @@ const patterns = { extend: {
 		jsx: ["Txt"]
 	})
 } };
+//#endregion
+//#region ../preset/src/radixColors.ts
 const radixColorsPreset = /* @__PURE__ */ createPreset({
 	autoP3: false,
 	darkMode: { condition: "[data-mantine-color-scheme=\"dark\"] &" },
@@ -1719,6 +1763,8 @@ const actionBtn = defineRecipe({
 		conditions: ["*"]
 	}]
 });
+//#endregion
+//#region ../preset/src/recipes/compoundNode.ts
 const borderWidth = {
 	var: "--_border-width",
 	ref: "var(--_border-width)"
@@ -1948,6 +1994,8 @@ 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",
@@ -1985,6 +2033,8 @@ const edgeActionBtn = defineRecipe({
 	defaultVariants: {},
 	staticCss: [{ conditions: ["*"] }]
 });
+//#endregion
+//#region ../preset/src/recipes/edgeLabel.ts
 const parts$4 = defineParts({
 	root: { selector: "&" },
 	stepNumber: { selector: "& .likec4-edge-label__step-number" },
@@ -2027,7 +2077,7 @@ const edgeLabel = defineRecipe({
 			},
 			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, var(--xy-edge-label-background-color), {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,6 +2144,8 @@ const edgeLabel = defineRecipe({
 		pointerEvents: ["*"]
 	}]
 });
+//#endregion
+//#region ../preset/src/recipes/edgePath.ts
 const edgePath = defineSlotRecipe({
 	description: "Recipe for Edge Path",
 	slots: [
@@ -2177,6 +2229,8 @@ const edgePath = defineSlotRecipe({
 	},
 	staticCss: [{ conditions: ["*"] }]
 });
+//#endregion
+//#region ../preset/src/recipes/elementNode.ts
 const elementNode = defineRecipe({
 	className: "likec4-element-node",
 	jsx: ["ElementNodeContainer", "ElementNode"],
@@ -2210,6 +2264,8 @@ const elementNode = defineRecipe({
 	},
 	staticCss: [{ conditions: ["*"] }]
 });
+//#endregion
+//#region ../preset/src/recipes/elementNodeData.ts
 const parts$3 = defineParts({
 	root: { selector: "&" },
 	icon: { selector: "& [data-likec4-icon]" },
@@ -2442,6 +2498,8 @@ const elementNodeData = defineRecipe({
 		conditions: ["*"]
 	}]
 });
+//#endregion
+//#region ../preset/src/recipes/elementShape.ts
 const parts$2 = defineParts({
 	root: { selector: "&" },
 	outline: { selector: "& .likec4-shape-outline" },
@@ -2662,6 +2720,8 @@ const elementShapeRecipe = defineRecipe({
 		withBorder: ["*"]
 	}]
 });
+//#endregion
+//#region ../preset/src/recipes/likec4tag.ts
 const likec4tag = defineRecipe({
 	className: "likec4-tag",
 	base: {
@@ -2704,6 +2764,8 @@ const likec4tag = defineRecipe({
 		conditions: ["hover"]
 	}]
 });
+//#endregion
+//#region ../preset/src/recipes/markdownBlock.ts
 const markdownBlock = defineRecipe({
 	className: "likec4-markdown-block",
 	jsx: ["MarkdownBlock", "Markdown"],
@@ -2932,6 +2994,9 @@ const markdownBlock = defineRecipe({
 		}
 	},
 	variants: {
+		/**
+		* When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
+		*/
 		uselikec4palette: {
 			true: {
 				"--code-background": "color-mix(in oklab , var(--likec4-palette-stroke) 70%, transparent)",
@@ -2953,6 +3018,9 @@ const markdownBlock = defineRecipe({
 			},
 			false: {}
 		},
+		/**
+		* Markdown block can receive either markdown or plain text.
+		*/
 		value: {
 			markdown: {},
 			plaintext: { "& :where(p)": { whiteSpace: "preserve-breaks" } }
@@ -2968,6 +3036,8 @@ const markdownBlock = defineRecipe({
 		conditions: ["*"]
 	}]
 });
+//#endregion
+//#region ../preset/src/recipes/navigationPanelActionIcon.ts
 const navigationPanelActionIcon = defineRecipe({
 	className: "likec4-navigation-panel-icon",
 	jsx: ["PanelActionIcon"],
@@ -3016,6 +3086,8 @@ const navigationPanelActionIcon = defineRecipe({
 		conditions: ["*"]
 	}]
 });
+//#endregion
+//#region ../preset/src/recipes/nodeNotes.ts
 const parts$1 = defineParts({
 	root: { selector: "&" },
 	paper: { selector: "& .__paper" },
@@ -3090,6 +3162,8 @@ const nodeNotes = defineRecipe({
 	defaultVariants: { opened: false },
 	staticCss: [{ opened: ["*"] }]
 });
+//#endregion
+//#region ../preset/src/recipes/overlay.ts
 const backdropBlur = "--_blur";
 const backdropOpacity = "--_opacity";
 const level = "--_level";
@@ -3177,6 +3251,8 @@ const overlay = defineRecipe({
 		withBackdrop: ["*"]
 	}]
 });
+//#endregion
+//#region ../preset/src/recipes/index.ts
 var recipes_exports = /* @__PURE__ */ __exportAll({
 	actionBtn: () => actionBtn,
 	actionButtons: () => actionButtons,
@@ -3193,6 +3269,8 @@ var recipes_exports = /* @__PURE__ */ __exportAll({
 	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)",
@@ -3251,6 +3329,8 @@ const navigationLink = defineSlotRecipe({
 		conditions: ["*"]
 	}]
 });
+//#endregion
+//#region ../preset/src/stot-recipes/navigationPanel.ts
 const navigationPanel = defineSlotRecipe({
 	className: "likec4-navigation-panel",
 	jsx: ["NavigationPanel", /NavigationPanel/],
@@ -3376,10 +3456,14 @@ 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
 function defineTextStyles$1(definition) {
 	return defineTextStyles(definition);
 }
@@ -3473,6 +3557,8 @@ const textStyles = defineTextStyles$1({
 		}
 	}
 });
+//#endregion
+//#region ../preset/src/tokens-semantic.ts
 const semanticTokens = defineSemanticTokens({ colors: defineSemanticTokens.colors({
 	white: { value: "#fff" },
 	black: { value: "#000" },
@@ -3708,12 +3794,16 @@ const semanticTokens = defineSemanticTokens({ colors: defineSemanticTokens.color
 		}
 	}
 }) });
+//#endregion
+//#region ../preset/src/tokens.colors.ts
 const colors = defineTokens.colors({
 	mantine: tokens$1.colors.mantine,
 	transparent: { value: "transparent" },
 	none: { value: "none" },
 	inherit: { value: "inherit" }
 });
+//#endregion
+//#region ../preset/src/tokens.ts
 const tokens = defineTokens({
 	fontSizes: {
 		"xxs": { value: "10px" },
@@ -3926,6 +4016,8 @@ const tokens = defineTokens({
 		}
 	}
 });
+//#endregion
+//#region ../preset/src/utilities.ts
 const durationValues = [
 	"fastest",
 	"faster",
@@ -3948,6 +4040,8 @@ const utilities = { extend: { transition: defineUtility({
 		};
 	}
 }) } };
+//#endregion
+//#region ../preset/src/index.ts
 const theme = {
 	breakpoints,
 	textStyles,
@@ -3977,4 +4071,5 @@ var src_default = /* @__PURE__ */ definePreset({
 	utilities,
 	theme: { extend: theme }
 });
+//#endregion
 export { src_default as default, theme };

package/vars/vars.mjs

@@ -1,3 +1,5 @@
+//#endregion
+//#region ../preset/src/index.ts
 const vars = {
 	likec4: {
 		font: "--likec4-app-font",
@@ -412,4 +414,5 @@ const vars = {
 		lightSelector: "[data-mantine-color-scheme=\"light\"] &"
 	}
 };
+//#endregion
 export { vars as default };