@likec4/styles 1.47.0 → 1.49.0

package/preset/preset.mjs

@@ -0,0 +1,3943 @@
+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, defineUtility } from "@pandacss/dev";
+const keyframes = defineKeyframes({
+	"indicatorOpacity": {
+		"0%": { opacity: .8 },
+		"100%": { opacity: .3 }
+	},
+	"xyedgeAnimated": {
+		"0%": { strokeDashoffset: 36 },
+		"100%": { strokeDashoffset: 0 }
+	}
+});
+const animationStyles = defineAnimationStyles({
+	"indicator": { value: {
+		animationDuration: ".8s",
+		animationIterationCount: "infinite",
+		animationDirection: "alternate",
+		animationName: "indicatorOpacity",
+		animationTimingFunction: "{easings.in}"
+	} },
+	"xyedgeAnimated": { value: {
+		animationDuration: ".8s",
+		animationIterationCount: "infinite",
+		animationTimingFunction: "linear",
+		animationFillMode: "both",
+		animationName: "xyedgeAnimated"
+	} }
+});
+const vars = {
+	font: "--likec4-app-font",
+	spacing: "--likec4-spacing",
+	textsize: "--likec4-text-size",
+	palette: {
+		fill: "--likec4-palette-fill",
+		stroke: "--likec4-palette-stroke",
+		hiContrast: "--likec4-palette-hiContrast",
+		loContrast: "--likec4-palette-loContrast",
+		relationStroke: "--likec4-palette-relation-stroke",
+		relationStrokeSelected: "--likec4-palette-relation-stroke-selected",
+		relationLabel: "--likec4-palette-relation-label",
+		relationLabelBg: "--likec4-palette-relation-label-bg",
+		outline: "--likec4-palette-outline"
+	},
+	icon: {
+		size: "--likec4-icon-size",
+		color: "--likec4-icon-color"
+	}
+};
+function readName(key) {
+	let path = key.includes(".") ? key.split(".") : [key];
+	if (!t(path, 1)) return;
+	let name = e(vars, ...path);
+	return e$1(name) ? name : void 0;
+}
+function __v(key, defaultTo) {
+	let name = readName(key);
+	if (!name) throw new Error(`Unknown var: ${key}`);
+	if (!defaultTo) return `var(${name})`;
+	const defaultValue = readName(defaultTo);
+	if (defaultValue) return `var(${name}, var(${defaultValue}))`;
+	return `var(${name}, ${defaultTo})`;
+}
+const root = ".likec4-root";
+`${root}`;
+const blue$1 = {
+	fill: "#3b82f6",
+	stroke: "#2563eb",
+	hiContrast: "#eff6ff",
+	loContrast: "#bfdbfe"
+};
+const sky$1 = {
+	fill: "#0284c7",
+	stroke: "#0369a1",
+	hiContrast: "#f0f9ff",
+	loContrast: "#B6ECF7"
+};
+const slate$1 = {
+	fill: "#64748b",
+	stroke: "#475569",
+	hiContrast: "#f8fafc",
+	loContrast: "#cbd5e1"
+};
+const ElementColors = {
+	primary: blue$1,
+	blue: blue$1,
+	secondary: sky$1,
+	sky: sky$1,
+	muted: slate$1,
+	slate: slate$1,
+	gray: {
+		fill: "#737373",
+		stroke: "#525252",
+		hiContrast: "#fafafa",
+		loContrast: "#d4d4d4"
+	},
+	red: {
+		fill: "#AC4D39",
+		stroke: "#853A2D",
+		hiContrast: "#FBD3CB",
+		loContrast: "#f5b2a3"
+	},
+	green: {
+		fill: "#428a4f",
+		stroke: "#2d5d39",
+		hiContrast: "#f8fafc",
+		loContrast: "#c2f0c2"
+	},
+	amber: {
+		fill: "#A35829",
+		stroke: "#7E451D",
+		hiContrast: "#FFE0C2",
+		loContrast: "#f9b27c"
+	},
+	indigo: {
+		fill: "#6366f1",
+		stroke: "#4f46e5",
+		hiContrast: "#eef2ff",
+		loContrast: "#c7d2fe"
+	}
+};
+const gray = {
+	line: "#8D8D8D",
+	labelBg: "#18191B",
+	label: "#C9C9C9"
+};
+const slate = {
+	line: "#64748b",
+	labelBg: "#0f172a",
+	label: "#cbd5e1"
+};
+const blue = {
+	line: "#3b82f6",
+	labelBg: "#172554",
+	label: "#60a5fa"
+};
+const sky = {
+	line: "#0ea5e9",
+	labelBg: "#082f49",
+	label: "#38bdf8"
+};
+const RelationshipColors = {
+	amber: {
+		line: "#b45309",
+		labelBg: "#78350f",
+		label: "#FFE0C2"
+	},
+	blue,
+	gray,
+	green: {
+		line: "#15803d",
+		labelBg: "#052e16",
+		label: "#22c55e"
+	},
+	indigo: {
+		line: "#6366f1",
+		labelBg: "#1e1b4b",
+		label: "#818cf8"
+	},
+	muted: slate,
+	primary: blue,
+	red: {
+		line: "#AC4D39",
+		labelBg: "#b91c1c",
+		label: "#f5b2a3"
+	},
+	secondary: sky,
+	sky,
+	slate
+};
+const defaultSizes = {
+	sizes: {
+		xs: {
+			width: 180,
+			height: 100
+		},
+		sm: {
+			width: 240,
+			height: 135
+		},
+		md: {
+			width: 320,
+			height: 180
+		},
+		lg: {
+			width: 420,
+			height: 234
+		},
+		xl: {
+			width: 520,
+			height: 290
+		}
+	},
+	spacing: {
+		xs: 8,
+		sm: 10,
+		md: 16,
+		lg: 24,
+		xl: 32
+	},
+	textSizes: {
+		xs: 13.33,
+		sm: 16,
+		md: 19.2,
+		lg: 23.04,
+		xl: 27.65
+	},
+	iconSizes: {
+		xs: 24,
+		sm: 36,
+		md: 60,
+		lg: 82,
+		xl: 90
+	}
+};
+const ElementShapes = [
+	"rectangle",
+	"person",
+	"browser",
+	"mobile",
+	"cylinder",
+	"storage",
+	"queue",
+	"bucket",
+	"document",
+	"component"
+];
+const ThemeColors = [
+	"amber",
+	"blue",
+	"gray",
+	"slate",
+	"green",
+	"indigo",
+	"muted",
+	"primary",
+	"red",
+	"secondary",
+	"sky"
+];
+const DefaultTagColors = [
+	"tomato",
+	"grass",
+	"blue",
+	"ruby",
+	"orange",
+	"indigo",
+	"pink",
+	"teal",
+	"purple",
+	"amber",
+	"crimson",
+	"red",
+	"lime",
+	"yellow",
+	"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;
+const defaultTheme = {
+	colors: ThemeColors.reduce((acc, key) => {
+		acc[key] = {
+			elements: ElementColors[key],
+			relationships: RelationshipColors[key]
+		};
+		return acc;
+	}, {}),
+	...defaultSizes
+};
+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)),
+	...t$5(ElementShapes, (shape) => ["shape" + t$1(shape), `:where([data-likec4-shape='${shape}']) &`]),
+	light: "[data-mantine-color-scheme=\"light\"] &",
+	dark: "[data-mantine-color-scheme=\"dark\"] &",
+	notDisabled: "&:not(:is(:disabled, [disabled], [data-disabled]))",
+	reduceGraphics: [`${root}:is([data-likec4-reduced-graphics])`, " &"].join(""),
+	reduceGraphicsOnPan: [
+		`${root}:is(`,
+		"[data-likec4-reduced-graphics]",
+		"[data-likec4-diagram-panning=\"true\"]",
+		") &"
+	].join(""),
+	noReduceGraphics: [
+		`${root}:not(`,
+		"[data-likec4-reduced-graphics]",
+		") &"
+	].join(""),
+	whenPanning: `${root}:is([data-likec4-diagram-panning="true"]) &`,
+	smallZoom: ":where([data-likec4-zoom-small=\"true\"]) &",
+	compoundTransparent: ":where([data-compound-transparent]) &",
+	edgeActive: ":where([data-likec4-edge-active=\"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) &"
+} };
+const breakpoints = {
+	xs: "36em",
+	sm: "48em",
+	md: "62em",
+	lg: "75em",
+	xl: "88em"
+};
+const tokens$1 = { colors: { mantine: { colors: {
+	primary: {
+		DEFAULT: {
+			description: "Mantine color primaryColors",
+			value: "var(--mantine-primary-color-6)"
+		},
+		filled: {
+			description: "Mantine color primaryColors filled",
+			value: "var(--mantine-primary-color-filled)"
+		},
+		filledHover: {
+			description: "Mantine color primaryColors filled hover",
+			value: "var(--mantine-primary-color-filled-hover)"
+		},
+		light: {
+			description: "Mantine color primaryColors light",
+			value: "var(--mantine-primary-color-light)"
+		},
+		lightHover: {
+			description: "Mantine color primaryColors light hover",
+			value: "var(--mantine-primary-color-light-hover)"
+		},
+		lightColor: {
+			description: "Mantine color primaryColors light color",
+			value: "var(--mantine-primary-color-light-color)"
+		},
+		outline: {
+			description: "Mantine color primaryColors outline",
+			value: "var(--mantine-primary-color-outline)"
+		},
+		outlineHover: {
+			description: "Mantine color primaryColors outline hover",
+			value: "var(--mantine-primary-color-outline-hover)"
+		}
+	},
+	"primary[0]": {
+		description: "Mantine color primaryColors.0",
+		value: "var(--mantine-primary-color-0)"
+	},
+	"primary[1]": {
+		description: "Mantine color primaryColors.1",
+		value: "var(--mantine-primary-color-1)"
+	},
+	"primary[2]": {
+		description: "Mantine color primaryColors.2",
+		value: "var(--mantine-primary-color-2)"
+	},
+	"primary[3]": {
+		description: "Mantine color primaryColors.3",
+		value: "var(--mantine-primary-color-3)"
+	},
+	"primary[4]": {
+		description: "Mantine color primaryColors.4",
+		value: "var(--mantine-primary-color-4)"
+	},
+	"primary[5]": {
+		description: "Mantine color primaryColors.5",
+		value: "var(--mantine-primary-color-5)"
+	},
+	"primary[6]": {
+		description: "Mantine color primaryColors.6",
+		value: "var(--mantine-primary-color-6)"
+	},
+	"primary[7]": {
+		description: "Mantine color primaryColors.7",
+		value: "var(--mantine-primary-color-7)"
+	},
+	"primary[8]": {
+		description: "Mantine color primaryColors.8",
+		value: "var(--mantine-primary-color-8)"
+	},
+	"primary[9]": {
+		description: "Mantine color primaryColors.9",
+		value: "var(--mantine-primary-color-9)"
+	},
+	white: { value: "var(--mantine-color-white)" },
+	text: { value: "var(--mantine-color-text)" },
+	body: { value: "var(--mantine-color-body)" },
+	dimmed: { value: "var(--mantine-color-dimmed)" },
+	defaultBorder: { value: "var(--mantine-color-default-border)" },
+	defaultColor: { value: "var(--mantine-color-default-color)" },
+	defaultHover: { value: "var(--mantine-color-default-hover)" },
+	default: { value: "var(--mantine-color-default)" },
+	error: { value: "var(--mantine-color-error)" },
+	placeholder: { value: "var(--mantine-color-placeholder)" },
+	gray: {
+		DEFAULT: {
+			description: "Mantine color gray",
+			value: "var(--mantine-color-gray-6)"
+		},
+		filled: {
+			description: "Mantine color gray filled",
+			value: "var(--mantine-color-gray-filled)"
+		},
+		filledHover: {
+			description: "Mantine color gray filled hover",
+			value: "var(--mantine-color-gray-filled-hover)"
+		},
+		light: {
+			description: "Mantine color gray light",
+			value: "var(--mantine-color-gray-light)"
+		},
+		lightHover: {
+			description: "Mantine color gray light hover",
+			value: "var(--mantine-color-gray-light-hover)"
+		},
+		lightColor: {
+			description: "Mantine color gray light color",
+			value: "var(--mantine-color-gray-light-color)"
+		},
+		outline: {
+			description: "Mantine color gray outline",
+			value: "var(--mantine-color-gray-outline)"
+		},
+		outlineHover: {
+			description: "Mantine color gray outline hover",
+			value: "var(--mantine-color-gray-outline-hover)"
+		}
+	},
+	"gray[0]": {
+		description: "Mantine color gray.0",
+		value: "var(--mantine-color-gray-0)"
+	},
+	"gray[1]": {
+		description: "Mantine color gray.1",
+		value: "var(--mantine-color-gray-1)"
+	},
+	"gray[2]": {
+		description: "Mantine color gray.2",
+		value: "var(--mantine-color-gray-2)"
+	},
+	"gray[3]": {
+		description: "Mantine color gray.3",
+		value: "var(--mantine-color-gray-3)"
+	},
+	"gray[4]": {
+		description: "Mantine color gray.4",
+		value: "var(--mantine-color-gray-4)"
+	},
+	"gray[5]": {
+		description: "Mantine color gray.5",
+		value: "var(--mantine-color-gray-5)"
+	},
+	"gray[6]": {
+		description: "Mantine color gray.6",
+		value: "var(--mantine-color-gray-6)"
+	},
+	"gray[7]": {
+		description: "Mantine color gray.7",
+		value: "var(--mantine-color-gray-7)"
+	},
+	"gray[8]": {
+		description: "Mantine color gray.8",
+		value: "var(--mantine-color-gray-8)"
+	},
+	"gray[9]": {
+		description: "Mantine color gray.9",
+		value: "var(--mantine-color-gray-9)"
+	},
+	dark: {
+		DEFAULT: {
+			description: "Mantine color dark",
+			value: "var(--mantine-color-dark-6)"
+		},
+		filled: {
+			description: "Mantine color dark filled",
+			value: "var(--mantine-color-dark-filled)"
+		},
+		filledHover: {
+			description: "Mantine color dark filled hover",
+			value: "var(--mantine-color-dark-filled-hover)"
+		},
+		light: {
+			description: "Mantine color dark light",
+			value: "var(--mantine-color-dark-light)"
+		},
+		lightHover: {
+			description: "Mantine color dark light hover",
+			value: "var(--mantine-color-dark-light-hover)"
+		},
+		lightColor: {
+			description: "Mantine color dark light color",
+			value: "var(--mantine-color-dark-light-color)"
+		},
+		outline: {
+			description: "Mantine color dark outline",
+			value: "var(--mantine-color-dark-outline)"
+		},
+		outlineHover: {
+			description: "Mantine color dark outline hover",
+			value: "var(--mantine-color-dark-outline-hover)"
+		}
+	},
+	"dark[0]": {
+		description: "Mantine color dark.0",
+		value: "var(--mantine-color-dark-0)"
+	},
+	"dark[1]": {
+		description: "Mantine color dark.1",
+		value: "var(--mantine-color-dark-1)"
+	},
+	"dark[2]": {
+		description: "Mantine color dark.2",
+		value: "var(--mantine-color-dark-2)"
+	},
+	"dark[3]": {
+		description: "Mantine color dark.3",
+		value: "var(--mantine-color-dark-3)"
+	},
+	"dark[4]": {
+		description: "Mantine color dark.4",
+		value: "var(--mantine-color-dark-4)"
+	},
+	"dark[5]": {
+		description: "Mantine color dark.5",
+		value: "var(--mantine-color-dark-5)"
+	},
+	"dark[6]": {
+		description: "Mantine color dark.6",
+		value: "var(--mantine-color-dark-6)"
+	},
+	"dark[7]": {
+		description: "Mantine color dark.7",
+		value: "var(--mantine-color-dark-7)"
+	},
+	"dark[8]": {
+		description: "Mantine color dark.8",
+		value: "var(--mantine-color-dark-8)"
+	},
+	"dark[9]": {
+		description: "Mantine color dark.9",
+		value: "var(--mantine-color-dark-9)"
+	},
+	orange: {
+		DEFAULT: {
+			description: "Mantine color orange",
+			value: "var(--mantine-color-orange-6)"
+		},
+		filled: {
+			description: "Mantine color orange filled",
+			value: "var(--mantine-color-orange-filled)"
+		},
+		filledHover: {
+			description: "Mantine color orange filled hover",
+			value: "var(--mantine-color-orange-filled-hover)"
+		},
+		light: {
+			description: "Mantine color orange light",
+			value: "var(--mantine-color-orange-light)"
+		},
+		lightHover: {
+			description: "Mantine color orange light hover",
+			value: "var(--mantine-color-orange-light-hover)"
+		},
+		lightColor: {
+			description: "Mantine color orange light color",
+			value: "var(--mantine-color-orange-light-color)"
+		},
+		outline: {
+			description: "Mantine color orange outline",
+			value: "var(--mantine-color-orange-outline)"
+		},
+		outlineHover: {
+			description: "Mantine color orange outline hover",
+			value: "var(--mantine-color-orange-outline-hover)"
+		}
+	},
+	"orange[0]": {
+		description: "Mantine color orange.0",
+		value: "var(--mantine-color-orange-0)"
+	},
+	"orange[1]": {
+		description: "Mantine color orange.1",
+		value: "var(--mantine-color-orange-1)"
+	},
+	"orange[2]": {
+		description: "Mantine color orange.2",
+		value: "var(--mantine-color-orange-2)"
+	},
+	"orange[3]": {
+		description: "Mantine color orange.3",
+		value: "var(--mantine-color-orange-3)"
+	},
+	"orange[4]": {
+		description: "Mantine color orange.4",
+		value: "var(--mantine-color-orange-4)"
+	},
+	"orange[5]": {
+		description: "Mantine color orange.5",
+		value: "var(--mantine-color-orange-5)"
+	},
+	"orange[6]": {
+		description: "Mantine color orange.6",
+		value: "var(--mantine-color-orange-6)"
+	},
+	"orange[7]": {
+		description: "Mantine color orange.7",
+		value: "var(--mantine-color-orange-7)"
+	},
+	"orange[8]": {
+		description: "Mantine color orange.8",
+		value: "var(--mantine-color-orange-8)"
+	},
+	"orange[9]": {
+		description: "Mantine color orange.9",
+		value: "var(--mantine-color-orange-9)"
+	},
+	teal: {
+		DEFAULT: {
+			description: "Mantine color teal",
+			value: "var(--mantine-color-teal-6)"
+		},
+		filled: {
+			description: "Mantine color teal filled",
+			value: "var(--mantine-color-teal-filled)"
+		},
+		filledHover: {
+			description: "Mantine color teal filled hover",
+			value: "var(--mantine-color-teal-filled-hover)"
+		},
+		light: {
+			description: "Mantine color teal light",
+			value: "var(--mantine-color-teal-light)"
+		},
+		lightHover: {
+			description: "Mantine color teal light hover",
+			value: "var(--mantine-color-teal-light-hover)"
+		},
+		lightColor: {
+			description: "Mantine color teal light color",
+			value: "var(--mantine-color-teal-light-color)"
+		},
+		outline: {
+			description: "Mantine color teal outline",
+			value: "var(--mantine-color-teal-outline)"
+		},
+		outlineHover: {
+			description: "Mantine color teal outline hover",
+			value: "var(--mantine-color-teal-outline-hover)"
+		}
+	},
+	"teal[0]": {
+		description: "Mantine color teal.0",
+		value: "var(--mantine-color-teal-0)"
+	},
+	"teal[1]": {
+		description: "Mantine color teal.1",
+		value: "var(--mantine-color-teal-1)"
+	},
+	"teal[2]": {
+		description: "Mantine color teal.2",
+		value: "var(--mantine-color-teal-2)"
+	},
+	"teal[3]": {
+		description: "Mantine color teal.3",
+		value: "var(--mantine-color-teal-3)"
+	},
+	"teal[4]": {
+		description: "Mantine color teal.4",
+		value: "var(--mantine-color-teal-4)"
+	},
+	"teal[5]": {
+		description: "Mantine color teal.5",
+		value: "var(--mantine-color-teal-5)"
+	},
+	"teal[6]": {
+		description: "Mantine color teal.6",
+		value: "var(--mantine-color-teal-6)"
+	},
+	"teal[7]": {
+		description: "Mantine color teal.7",
+		value: "var(--mantine-color-teal-7)"
+	},
+	"teal[8]": {
+		description: "Mantine color teal.8",
+		value: "var(--mantine-color-teal-8)"
+	},
+	"teal[9]": {
+		description: "Mantine color teal.9",
+		value: "var(--mantine-color-teal-9)"
+	},
+	red: {
+		DEFAULT: {
+			description: "Mantine color red",
+			value: "var(--mantine-color-red-6)"
+		},
+		filled: {
+			description: "Mantine color red filled",
+			value: "var(--mantine-color-red-filled)"
+		},
+		filledHover: {
+			description: "Mantine color red filled hover",
+			value: "var(--mantine-color-red-filled-hover)"
+		},
+		light: {
+			description: "Mantine color red light",
+			value: "var(--mantine-color-red-light)"
+		},
+		lightHover: {
+			description: "Mantine color red light hover",
+			value: "var(--mantine-color-red-light-hover)"
+		},
+		lightColor: {
+			description: "Mantine color red light color",
+			value: "var(--mantine-color-red-light-color)"
+		},
+		outline: {
+			description: "Mantine color red outline",
+			value: "var(--mantine-color-red-outline)"
+		},
+		outlineHover: {
+			description: "Mantine color red outline hover",
+			value: "var(--mantine-color-red-outline-hover)"
+		}
+	},
+	"red[0]": {
+		description: "Mantine color red.0",
+		value: "var(--mantine-color-red-0)"
+	},
+	"red[1]": {
+		description: "Mantine color red.1",
+		value: "var(--mantine-color-red-1)"
+	},
+	"red[2]": {
+		description: "Mantine color red.2",
+		value: "var(--mantine-color-red-2)"
+	},
+	"red[3]": {
+		description: "Mantine color red.3",
+		value: "var(--mantine-color-red-3)"
+	},
+	"red[4]": {
+		description: "Mantine color red.4",
+		value: "var(--mantine-color-red-4)"
+	},
+	"red[5]": {
+		description: "Mantine color red.5",
+		value: "var(--mantine-color-red-5)"
+	},
+	"red[6]": {
+		description: "Mantine color red.6",
+		value: "var(--mantine-color-red-6)"
+	},
+	"red[7]": {
+		description: "Mantine color red.7",
+		value: "var(--mantine-color-red-7)"
+	},
+	"red[8]": {
+		description: "Mantine color red.8",
+		value: "var(--mantine-color-red-8)"
+	},
+	"red[9]": {
+		description: "Mantine color red.9",
+		value: "var(--mantine-color-red-9)"
+	},
+	green: {
+		DEFAULT: {
+			description: "Mantine color green",
+			value: "var(--mantine-color-green-6)"
+		},
+		filled: {
+			description: "Mantine color green filled",
+			value: "var(--mantine-color-green-filled)"
+		},
+		filledHover: {
+			description: "Mantine color green filled hover",
+			value: "var(--mantine-color-green-filled-hover)"
+		},
+		light: {
+			description: "Mantine color green light",
+			value: "var(--mantine-color-green-light)"
+		},
+		lightHover: {
+			description: "Mantine color green light hover",
+			value: "var(--mantine-color-green-light-hover)"
+		},
+		lightColor: {
+			description: "Mantine color green light color",
+			value: "var(--mantine-color-green-light-color)"
+		},
+		outline: {
+			description: "Mantine color green outline",
+			value: "var(--mantine-color-green-outline)"
+		},
+		outlineHover: {
+			description: "Mantine color green outline hover",
+			value: "var(--mantine-color-green-outline-hover)"
+		}
+	},
+	"green[0]": {
+		description: "Mantine color green.0",
+		value: "var(--mantine-color-green-0)"
+	},
+	"green[1]": {
+		description: "Mantine color green.1",
+		value: "var(--mantine-color-green-1)"
+	},
+	"green[2]": {
+		description: "Mantine color green.2",
+		value: "var(--mantine-color-green-2)"
+	},
+	"green[3]": {
+		description: "Mantine color green.3",
+		value: "var(--mantine-color-green-3)"
+	},
+	"green[4]": {
+		description: "Mantine color green.4",
+		value: "var(--mantine-color-green-4)"
+	},
+	"green[5]": {
+		description: "Mantine color green.5",
+		value: "var(--mantine-color-green-5)"
+	},
+	"green[6]": {
+		description: "Mantine color green.6",
+		value: "var(--mantine-color-green-6)"
+	},
+	"green[7]": {
+		description: "Mantine color green.7",
+		value: "var(--mantine-color-green-7)"
+	},
+	"green[8]": {
+		description: "Mantine color green.8",
+		value: "var(--mantine-color-green-8)"
+	},
+	"green[9]": {
+		description: "Mantine color green.9",
+		value: "var(--mantine-color-green-9)"
+	},
+	yellow: {
+		DEFAULT: {
+			description: "Mantine color yellow",
+			value: "var(--mantine-color-yellow-6)"
+		},
+		filled: {
+			description: "Mantine color yellow filled",
+			value: "var(--mantine-color-yellow-filled)"
+		},
+		filledHover: {
+			description: "Mantine color yellow filled hover",
+			value: "var(--mantine-color-yellow-filled-hover)"
+		},
+		light: {
+			description: "Mantine color yellow light",
+			value: "var(--mantine-color-yellow-light)"
+		},
+		lightHover: {
+			description: "Mantine color yellow light hover",
+			value: "var(--mantine-color-yellow-light-hover)"
+		},
+		lightColor: {
+			description: "Mantine color yellow light color",
+			value: "var(--mantine-color-yellow-light-color)"
+		},
+		outline: {
+			description: "Mantine color yellow outline",
+			value: "var(--mantine-color-yellow-outline)"
+		},
+		outlineHover: {
+			description: "Mantine color yellow outline hover",
+			value: "var(--mantine-color-yellow-outline-hover)"
+		}
+	},
+	"yellow[0]": {
+		description: "Mantine color yellow.0",
+		value: "var(--mantine-color-yellow-0)"
+	},
+	"yellow[1]": {
+		description: "Mantine color yellow.1",
+		value: "var(--mantine-color-yellow-1)"
+	},
+	"yellow[2]": {
+		description: "Mantine color yellow.2",
+		value: "var(--mantine-color-yellow-2)"
+	},
+	"yellow[3]": {
+		description: "Mantine color yellow.3",
+		value: "var(--mantine-color-yellow-3)"
+	},
+	"yellow[4]": {
+		description: "Mantine color yellow.4",
+		value: "var(--mantine-color-yellow-4)"
+	},
+	"yellow[5]": {
+		description: "Mantine color yellow.5",
+		value: "var(--mantine-color-yellow-5)"
+	},
+	"yellow[6]": {
+		description: "Mantine color yellow.6",
+		value: "var(--mantine-color-yellow-6)"
+	},
+	"yellow[7]": {
+		description: "Mantine color yellow.7",
+		value: "var(--mantine-color-yellow-7)"
+	},
+	"yellow[8]": {
+		description: "Mantine color yellow.8",
+		value: "var(--mantine-color-yellow-8)"
+	},
+	"yellow[9]": {
+		description: "Mantine color yellow.9",
+		value: "var(--mantine-color-yellow-9)"
+	}
+} } } };
+const mantine = {
+	scale: "var(--mantine-scale)",
+	cursorType: "var(--mantine-cursor-type)",
+	webkitFontSmoothing: "var(--mantine-webkit-font-smoothing)",
+	mozFontSmoothing: "var(--mantine-moz-font-smoothing)",
+	lineHeight: "var(--mantine-line-height)",
+	fontFamily: "var(--mantine-font-family)",
+	fontFamilyMonospace: "var(--mantine-font-family-monospace)",
+	fontFamilyHeadings: "var(--mantine-font-family-headings)",
+	headingFontWeight: "var(--mantine-heading-font-weight)",
+	radiusDefault: "var(--mantine-radius-default)",
+	breakpoints: {
+		xs: "36em",
+		sm: "48em",
+		md: "62em",
+		lg: "75em",
+		xl: "88em"
+	},
+	fontSizes: {
+		xs: "var(--mantine-font-size-xs)",
+		sm: "var(--mantine-font-size-sm)",
+		md: "var(--mantine-font-size-md)",
+		lg: "var(--mantine-font-size-lg)",
+		xl: "var(--mantine-font-size-xl)"
+	},
+	lineHeights: {
+		xs: "var(--mantine-line-height-xs)",
+		sm: "var(--mantine-line-height-sm)",
+		md: "var(--mantine-line-height-md)",
+		lg: "var(--mantine-line-height-lg)",
+		xl: "var(--mantine-line-height-xl)"
+	},
+	shadows: {
+		xs: "var(--mantine-shadow-xs)",
+		sm: "var(--mantine-shadow-sm)",
+		md: "var(--mantine-shadow-md)",
+		lg: "var(--mantine-shadow-lg)",
+		xl: "var(--mantine-shadow-xl)"
+	},
+	radius: {
+		xs: "var(--mantine-radius-xs)",
+		sm: "var(--mantine-radius-sm)",
+		md: "var(--mantine-radius-md)",
+		lg: "var(--mantine-radius-lg)",
+		xl: "var(--mantine-radius-xl)"
+	},
+	headings: {
+		h1: {
+			fontSize: "var(--mantine-h1-font-size)",
+			lineHeight: "var(--mantine-h1-line-height)",
+			fontWeight: "var(--mantine-h1-font-weight)"
+		},
+		h2: {
+			fontSize: "var(--mantine-h2-font-size)",
+			lineHeight: "var(--mantine-h2-line-height)",
+			fontWeight: "var(--mantine-h2-font-weight)"
+		},
+		h3: {
+			fontSize: "var(--mantine-h3-font-size)",
+			lineHeight: "var(--mantine-h3-line-height)",
+			fontWeight: "var(--mantine-h3-font-weight)"
+		},
+		h4: {
+			fontSize: "var(--mantine-h4-font-size)",
+			lineHeight: "var(--mantine-h4-line-height)",
+			fontWeight: "var(--mantine-h4-font-weight)"
+		},
+		h5: {
+			fontSize: "var(--mantine-h5-font-size)",
+			lineHeight: "var(--mantine-h5-line-height)",
+			fontWeight: "var(--mantine-h5-font-weight)"
+		},
+		h6: {
+			fontSize: "var(--mantine-h6-font-size)",
+			lineHeight: "var(--mantine-h6-line-height)",
+			fontWeight: "var(--mantine-h6-font-weight)"
+		}
+	},
+	spacing: {
+		xs: "var(--mantine-spacing-xs)",
+		sm: "var(--mantine-spacing-sm)",
+		md: "var(--mantine-spacing-md)",
+		lg: "var(--mantine-spacing-lg)",
+		xl: "var(--mantine-spacing-xl)"
+	},
+	colors: {
+		primary: "var(--mantine-primary-color-filled)",
+		primaryColors: {
+			"0": "var(--mantine-primary-color-0)",
+			"1": "var(--mantine-primary-color-1)",
+			"2": "var(--mantine-primary-color-2)",
+			"3": "var(--mantine-primary-color-3)",
+			"4": "var(--mantine-primary-color-4)",
+			"5": "var(--mantine-primary-color-5)",
+			"6": "var(--mantine-primary-color-6)",
+			"7": "var(--mantine-primary-color-7)",
+			"8": "var(--mantine-primary-color-8)",
+			"9": "var(--mantine-primary-color-9)",
+			filled: "var(--mantine-primary-color-filled)",
+			filledHover: "var(--mantine-primary-color-filled-hover)",
+			light: "var(--mantine-primary-color-light)",
+			lightHover: "var(--mantine-primary-color-light-hover)",
+			lightColor: "var(--mantine-primary-color-light-color)",
+			outline: "var(--mantine-primary-color-outline)",
+			outlineHover: "var(--mantine-primary-color-outline-hover)"
+		},
+		white: "var(--mantine-color-white)",
+		black: "var(--mantine-color-black)",
+		text: "var(--mantine-color-text)",
+		body: "var(--mantine-color-body)",
+		error: "var(--mantine-color-error)",
+		placeholder: "var(--mantine-color-placeholder)",
+		anchor: "var(--mantine-color-anchor)",
+		default: "var(--mantine-color-default)",
+		defaultHover: "var(--mantine-color-default-hover)",
+		defaultColor: "var(--mantine-color-default-color)",
+		defaultBorder: "var(--mantine-color-default-border)",
+		dimmed: "var(--mantine-color-dimmed)",
+		disabledBody: "var(--mantine-color-disabled)",
+		disabledText: "var(--mantine-color-disabled-color)",
+		disabledBorder: "var(--mantine-color-disabled-border)",
+		dark: {
+			"0": "var(--mantine-color-dark-0)",
+			"1": "var(--mantine-color-dark-1)",
+			"2": "var(--mantine-color-dark-2)",
+			"3": "var(--mantine-color-dark-3)",
+			"4": "var(--mantine-color-dark-4)",
+			"5": "var(--mantine-color-dark-5)",
+			"6": "var(--mantine-color-dark-6)",
+			"7": "var(--mantine-color-dark-7)",
+			"8": "var(--mantine-color-dark-8)",
+			"9": "var(--mantine-color-dark-9)",
+			filled: "var(--mantine-color-dark-filled)",
+			filledHover: "var(--mantine-color-dark-filled-hover)",
+			light: "var(--mantine-color-dark-light)",
+			lightHover: "var(--mantine-color-dark-light-hover)",
+			lightColor: "var(--mantine-color-dark-light-color)",
+			outline: "var(--mantine-color-dark-outline)",
+			outlineHover: "var(--mantine-color-dark-outline-hover)"
+		},
+		gray: {
+			"0": "var(--mantine-color-gray-0)",
+			"1": "var(--mantine-color-gray-1)",
+			"2": "var(--mantine-color-gray-2)",
+			"3": "var(--mantine-color-gray-3)",
+			"4": "var(--mantine-color-gray-4)",
+			"5": "var(--mantine-color-gray-5)",
+			"6": "var(--mantine-color-gray-6)",
+			"7": "var(--mantine-color-gray-7)",
+			"8": "var(--mantine-color-gray-8)",
+			"9": "var(--mantine-color-gray-9)",
+			filled: "var(--mantine-color-gray-filled)",
+			filledHover: "var(--mantine-color-gray-filled-hover)",
+			light: "var(--mantine-color-gray-light)",
+			lightHover: "var(--mantine-color-gray-light-hover)",
+			lightColor: "var(--mantine-color-gray-light-color)",
+			outline: "var(--mantine-color-gray-outline)",
+			outlineHover: "var(--mantine-color-gray-outline-hover)"
+		},
+		red: {
+			"0": "var(--mantine-color-red-0)",
+			"1": "var(--mantine-color-red-1)",
+			"2": "var(--mantine-color-red-2)",
+			"3": "var(--mantine-color-red-3)",
+			"4": "var(--mantine-color-red-4)",
+			"5": "var(--mantine-color-red-5)",
+			"6": "var(--mantine-color-red-6)",
+			"7": "var(--mantine-color-red-7)",
+			"8": "var(--mantine-color-red-8)",
+			"9": "var(--mantine-color-red-9)",
+			filled: "var(--mantine-color-red-filled)",
+			filledHover: "var(--mantine-color-red-filled-hover)",
+			light: "var(--mantine-color-red-light)",
+			lightHover: "var(--mantine-color-red-light-hover)",
+			lightColor: "var(--mantine-color-red-light-color)",
+			outline: "var(--mantine-color-red-outline)",
+			outlineHover: "var(--mantine-color-red-outline-hover)"
+		},
+		pink: {
+			"0": "var(--mantine-color-pink-0)",
+			"1": "var(--mantine-color-pink-1)",
+			"2": "var(--mantine-color-pink-2)",
+			"3": "var(--mantine-color-pink-3)",
+			"4": "var(--mantine-color-pink-4)",
+			"5": "var(--mantine-color-pink-5)",
+			"6": "var(--mantine-color-pink-6)",
+			"7": "var(--mantine-color-pink-7)",
+			"8": "var(--mantine-color-pink-8)",
+			"9": "var(--mantine-color-pink-9)",
+			filled: "var(--mantine-color-pink-filled)",
+			filledHover: "var(--mantine-color-pink-filled-hover)",
+			light: "var(--mantine-color-pink-light)",
+			lightHover: "var(--mantine-color-pink-light-hover)",
+			lightColor: "var(--mantine-color-pink-light-color)",
+			outline: "var(--mantine-color-pink-outline)",
+			outlineHover: "var(--mantine-color-pink-outline-hover)"
+		},
+		grape: {
+			"0": "var(--mantine-color-grape-0)",
+			"1": "var(--mantine-color-grape-1)",
+			"2": "var(--mantine-color-grape-2)",
+			"3": "var(--mantine-color-grape-3)",
+			"4": "var(--mantine-color-grape-4)",
+			"5": "var(--mantine-color-grape-5)",
+			"6": "var(--mantine-color-grape-6)",
+			"7": "var(--mantine-color-grape-7)",
+			"8": "var(--mantine-color-grape-8)",
+			"9": "var(--mantine-color-grape-9)",
+			filled: "var(--mantine-color-grape-filled)",
+			filledHover: "var(--mantine-color-grape-filled-hover)",
+			light: "var(--mantine-color-grape-light)",
+			lightHover: "var(--mantine-color-grape-light-hover)",
+			lightColor: "var(--mantine-color-grape-light-color)",
+			outline: "var(--mantine-color-grape-outline)",
+			outlineHover: "var(--mantine-color-grape-outline-hover)"
+		},
+		violet: {
+			"0": "var(--mantine-color-violet-0)",
+			"1": "var(--mantine-color-violet-1)",
+			"2": "var(--mantine-color-violet-2)",
+			"3": "var(--mantine-color-violet-3)",
+			"4": "var(--mantine-color-violet-4)",
+			"5": "var(--mantine-color-violet-5)",
+			"6": "var(--mantine-color-violet-6)",
+			"7": "var(--mantine-color-violet-7)",
+			"8": "var(--mantine-color-violet-8)",
+			"9": "var(--mantine-color-violet-9)",
+			filled: "var(--mantine-color-violet-filled)",
+			filledHover: "var(--mantine-color-violet-filled-hover)",
+			light: "var(--mantine-color-violet-light)",
+			lightHover: "var(--mantine-color-violet-light-hover)",
+			lightColor: "var(--mantine-color-violet-light-color)",
+			outline: "var(--mantine-color-violet-outline)",
+			outlineHover: "var(--mantine-color-violet-outline-hover)"
+		},
+		indigo: {
+			"0": "var(--mantine-color-indigo-0)",
+			"1": "var(--mantine-color-indigo-1)",
+			"2": "var(--mantine-color-indigo-2)",
+			"3": "var(--mantine-color-indigo-3)",
+			"4": "var(--mantine-color-indigo-4)",
+			"5": "var(--mantine-color-indigo-5)",
+			"6": "var(--mantine-color-indigo-6)",
+			"7": "var(--mantine-color-indigo-7)",
+			"8": "var(--mantine-color-indigo-8)",
+			"9": "var(--mantine-color-indigo-9)",
+			filled: "var(--mantine-color-indigo-filled)",
+			filledHover: "var(--mantine-color-indigo-filled-hover)",
+			light: "var(--mantine-color-indigo-light)",
+			lightHover: "var(--mantine-color-indigo-light-hover)",
+			lightColor: "var(--mantine-color-indigo-light-color)",
+			outline: "var(--mantine-color-indigo-outline)",
+			outlineHover: "var(--mantine-color-indigo-outline-hover)"
+		},
+		blue: {
+			"0": "var(--mantine-color-blue-0)",
+			"1": "var(--mantine-color-blue-1)",
+			"2": "var(--mantine-color-blue-2)",
+			"3": "var(--mantine-color-blue-3)",
+			"4": "var(--mantine-color-blue-4)",
+			"5": "var(--mantine-color-blue-5)",
+			"6": "var(--mantine-color-blue-6)",
+			"7": "var(--mantine-color-blue-7)",
+			"8": "var(--mantine-color-blue-8)",
+			"9": "var(--mantine-color-blue-9)",
+			filled: "var(--mantine-color-blue-filled)",
+			filledHover: "var(--mantine-color-blue-filled-hover)",
+			light: "var(--mantine-color-blue-light)",
+			lightHover: "var(--mantine-color-blue-light-hover)",
+			lightColor: "var(--mantine-color-blue-light-color)",
+			outline: "var(--mantine-color-blue-outline)",
+			outlineHover: "var(--mantine-color-blue-outline-hover)"
+		},
+		cyan: {
+			"0": "var(--mantine-color-cyan-0)",
+			"1": "var(--mantine-color-cyan-1)",
+			"2": "var(--mantine-color-cyan-2)",
+			"3": "var(--mantine-color-cyan-3)",
+			"4": "var(--mantine-color-cyan-4)",
+			"5": "var(--mantine-color-cyan-5)",
+			"6": "var(--mantine-color-cyan-6)",
+			"7": "var(--mantine-color-cyan-7)",
+			"8": "var(--mantine-color-cyan-8)",
+			"9": "var(--mantine-color-cyan-9)",
+			filled: "var(--mantine-color-cyan-filled)",
+			filledHover: "var(--mantine-color-cyan-filled-hover)",
+			light: "var(--mantine-color-cyan-light)",
+			lightHover: "var(--mantine-color-cyan-light-hover)",
+			lightColor: "var(--mantine-color-cyan-light-color)",
+			outline: "var(--mantine-color-cyan-outline)",
+			outlineHover: "var(--mantine-color-cyan-outline-hover)"
+		},
+		teal: {
+			"0": "var(--mantine-color-teal-0)",
+			"1": "var(--mantine-color-teal-1)",
+			"2": "var(--mantine-color-teal-2)",
+			"3": "var(--mantine-color-teal-3)",
+			"4": "var(--mantine-color-teal-4)",
+			"5": "var(--mantine-color-teal-5)",
+			"6": "var(--mantine-color-teal-6)",
+			"7": "var(--mantine-color-teal-7)",
+			"8": "var(--mantine-color-teal-8)",
+			"9": "var(--mantine-color-teal-9)",
+			filled: "var(--mantine-color-teal-filled)",
+			filledHover: "var(--mantine-color-teal-filled-hover)",
+			light: "var(--mantine-color-teal-light)",
+			lightHover: "var(--mantine-color-teal-light-hover)",
+			lightColor: "var(--mantine-color-teal-light-color)",
+			outline: "var(--mantine-color-teal-outline)",
+			outlineHover: "var(--mantine-color-teal-outline-hover)"
+		},
+		green: {
+			"0": "var(--mantine-color-green-0)",
+			"1": "var(--mantine-color-green-1)",
+			"2": "var(--mantine-color-green-2)",
+			"3": "var(--mantine-color-green-3)",
+			"4": "var(--mantine-color-green-4)",
+			"5": "var(--mantine-color-green-5)",
+			"6": "var(--mantine-color-green-6)",
+			"7": "var(--mantine-color-green-7)",
+			"8": "var(--mantine-color-green-8)",
+			"9": "var(--mantine-color-green-9)",
+			filled: "var(--mantine-color-green-filled)",
+			filledHover: "var(--mantine-color-green-filled-hover)",
+			light: "var(--mantine-color-green-light)",
+			lightHover: "var(--mantine-color-green-light-hover)",
+			lightColor: "var(--mantine-color-green-light-color)",
+			outline: "var(--mantine-color-green-outline)",
+			outlineHover: "var(--mantine-color-green-outline-hover)"
+		},
+		lime: {
+			"0": "var(--mantine-color-lime-0)",
+			"1": "var(--mantine-color-lime-1)",
+			"2": "var(--mantine-color-lime-2)",
+			"3": "var(--mantine-color-lime-3)",
+			"4": "var(--mantine-color-lime-4)",
+			"5": "var(--mantine-color-lime-5)",
+			"6": "var(--mantine-color-lime-6)",
+			"7": "var(--mantine-color-lime-7)",
+			"8": "var(--mantine-color-lime-8)",
+			"9": "var(--mantine-color-lime-9)",
+			filled: "var(--mantine-color-lime-filled)",
+			filledHover: "var(--mantine-color-lime-filled-hover)",
+			light: "var(--mantine-color-lime-light)",
+			lightHover: "var(--mantine-color-lime-light-hover)",
+			lightColor: "var(--mantine-color-lime-light-color)",
+			outline: "var(--mantine-color-lime-outline)",
+			outlineHover: "var(--mantine-color-lime-outline-hover)"
+		},
+		yellow: {
+			"0": "var(--mantine-color-yellow-0)",
+			"1": "var(--mantine-color-yellow-1)",
+			"2": "var(--mantine-color-yellow-2)",
+			"3": "var(--mantine-color-yellow-3)",
+			"4": "var(--mantine-color-yellow-4)",
+			"5": "var(--mantine-color-yellow-5)",
+			"6": "var(--mantine-color-yellow-6)",
+			"7": "var(--mantine-color-yellow-7)",
+			"8": "var(--mantine-color-yellow-8)",
+			"9": "var(--mantine-color-yellow-9)",
+			filled: "var(--mantine-color-yellow-filled)",
+			filledHover: "var(--mantine-color-yellow-filled-hover)",
+			light: "var(--mantine-color-yellow-light)",
+			lightHover: "var(--mantine-color-yellow-light-hover)",
+			lightColor: "var(--mantine-color-yellow-light-color)",
+			outline: "var(--mantine-color-yellow-outline)",
+			outlineHover: "var(--mantine-color-yellow-outline-hover)"
+		},
+		orange: {
+			"0": "var(--mantine-color-orange-0)",
+			"1": "var(--mantine-color-orange-1)",
+			"2": "var(--mantine-color-orange-2)",
+			"3": "var(--mantine-color-orange-3)",
+			"4": "var(--mantine-color-orange-4)",
+			"5": "var(--mantine-color-orange-5)",
+			"6": "var(--mantine-color-orange-6)",
+			"7": "var(--mantine-color-orange-7)",
+			"8": "var(--mantine-color-orange-8)",
+			"9": "var(--mantine-color-orange-9)",
+			filled: "var(--mantine-color-orange-filled)",
+			filledHover: "var(--mantine-color-orange-filled-hover)",
+			light: "var(--mantine-color-orange-light)",
+			lightHover: "var(--mantine-color-orange-light-hover)",
+			lightColor: "var(--mantine-color-orange-light-color)",
+			outline: "var(--mantine-color-orange-outline)",
+			outlineHover: "var(--mantine-color-orange-outline-hover)"
+		}
+	},
+	rtlSelector: "[dir=\"rtl\"] &",
+	darkSelector: "[data-mantine-color-scheme=\"dark\"] &",
+	lightSelector: "[data-mantine-color-scheme=\"light\"] &"
+};
+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}}` }])
+};
+const globalCss = { extend: {
+	":where(:root,:host)": { ["--likec4-app-font-default"]: `'IBM Plex Sans Variable',ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"` },
+	...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": {
+			"--mantine-font-family": "var(--likec4-app-font, var(--likec4-app-font-default))",
+			color: "var(--colors-text)"
+		}
+	},
+	".likec4-edge-label-container": {
+		top: 0,
+		left: 0,
+		position: "absolute",
+		width: "auto",
+		height: "auto",
+		display: {
+			_reduceGraphicsOnPan: "none",
+			_smallZoom: "none"
+		},
+		willChange: "transform",
+		zIndex: "likec4.diagram.edge.label"
+	},
+	".likec4-root": {
+		overflow: "hidden",
+		position: "relative",
+		padding: 0,
+		margin: 0,
+		width: "100%",
+		height: "100%",
+		border: "0px solid transparent",
+		background: "transparent",
+		containerName: "likec4-root",
+		containerType: "size",
+		_print: {
+			"& .react-flow__background": { display: "none" },
+			"& .react-flow": {
+				background: "transparent !important",
+				"--xy-background-color": "transparent !important"
+			},
+			"& *": {
+				colorAdjust: "exact!",
+				printColorAdjust: "exact!"
+			}
+		},
+		"& .mantine-ActionIcon-icon .tabler-icon": {
+			width: "75%",
+			height: "75%"
+		},
+		"& .react-flow": {
+			"--xy-background-color": "var(--colors-likec4-background)",
+			"--xy-background-pattern-color": "var(--colors-likec4-background-pattern, var(--colors-likec4-background))",
+			"&:is(.not-initialized)": { opacity: 0 },
+			"&:is(.bg-transparent)": {
+				background: "transparent !important",
+				"--xy-background-color": "transparent !important"
+			},
+			"& .react-flow__pane": { userSelect: "none" },
+			"& :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%!",
+				left: "50%!",
+				right: "unset!",
+				bottom: "unset!",
+				visibility: "hidden!",
+				width: "5px!",
+				height: "5px!",
+				transform: "translate(-50%, -50%)!"
+			}
+		},
+		"& :where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed])": { opacity: .25 },
+		"& .likec4-edge-label-container:is([data-likec4-dimmed])": { opacity: .25 },
+		"& :where(.react-flow__edge, .likec4-edge-container, .likec4-edge-label-container)": {
+			"--xy-edge-stroke-width": 3,
+			"--xy-edge-stroke": __v("palette.relationStroke"),
+			"--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)`
+			},
+			"--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,
+				"--xy-edge-stroke": __v("palette.relationStrokeSelected")
+			}
+		},
+		"&:is([data-likec4-reduced-graphics=\"true\"]) .hide-on-reduced-graphics": { display: "none!" },
+		"&:not([data-likec4-reduced-graphics=\"true\"])": {
+			"& :where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed])": { filter: "grayscale(85%)" },
+			"& :where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed=\"true\"])": {
+				transitionProperty: "opacity, filter",
+				transitionTimingFunction: "cubic-bezier(0.50, 0, 0.2, 1)",
+				transitionDuration: "400ms"
+			},
+			"& .likec4-edge-label-container:is([data-likec4-dimmed])": { filter: "grayscale(85%)" },
+			"& .likec4-edge-label-container:is([data-likec4-dimmed=\"true\"])": {
+				transitionProperty: "opacity, filter",
+				transitionTimingFunction: "cubic-bezier(0.50, 0, 0.2, 1)",
+				transitionDuration: "400ms"
+			},
+			"& :where(.react-flow__edgelabel-renderer) > *": { mixBlendMode: {
+				base: "hard-light",
+				_dark: "screen",
+				_print: "normal!"
+			} },
+			"& :where(.react-flow__edges) > svg": { mixBlendMode: {
+				base: "multiply",
+				_dark: "plus-lighter",
+				_print: "normal!"
+			} },
+			"&:has(.react-flow__node-seq-parallel) :where(.react-flow__edges > svg)": { mixBlendMode: { _light: "color-burn" } },
+			"& .react-flow__node-seq-parallel": { mixBlendMode: {
+				_dark: "luminosity",
+				_light: "color-burn",
+				_print: "normal!"
+			} }
+		}
+	},
+	":where(.likec4-static-view, .relationships-browser, .likec4-relationship-details) .react-flow .react-flow__attribution": { display: "none" }
+} };
+const globalVars = { extend: {
+	[vars.font]: "/*-*/ /*-*/",
+	[vars.spacing]: "/*-*/ /*-*/",
+	[vars.textsize]: rem(defaultTheme.textSizes.md),
+	[vars.palette.fill]: defaultTheme.colors.primary.elements.fill,
+	[vars.palette.stroke]: defaultTheme.colors.primary.elements.stroke,
+	[vars.palette.hiContrast]: defaultTheme.colors.primary.elements.hiContrast,
+	[vars.palette.loContrast]: defaultTheme.colors.primary.elements.loContrast,
+	[vars.palette.relationStroke]: defaultTheme.colors.gray.relationships.line,
+	[vars.palette.relationLabel]: defaultTheme.colors.gray.relationships.label,
+	[vars.palette.relationLabelBg]: defaultTheme.colors.gray.relationships.labelBg,
+	[vars.palette.relationStrokeSelected]: __v("palette.relationStroke"),
+	"--mantine-scale": "1",
+	[vars.palette.outline]: __v("palette.loContrast"),
+	"--text-fz": "/*-*/ /*-*/",
+	[vars.icon.color]: "/*-*/ /*-*/",
+	[vars.icon.size]: "/*-*/ /*-*/"
+} };
+const layerStyles = /* @__PURE__ */ defineLayerStyles({ likec4: {
+	tag: {
+		description: "LikeC4 tag layer",
+		value: {
+			color: "likec4.tag.text",
+			backgroundColor: "likec4.tag.bg",
+			_hover: { backgroundColor: "likec4.tag.bg.hover" },
+			border: "none",
+			borderRadius: 3
+		}
+	},
+	panel: {
+		DEFAULT: {
+			description: "LikeC4 panel layer",
+			value: {
+				padding: "1",
+				borderRadius: "0",
+				backgroundColor: "likec4.panel.bg",
+				border: "1px solid {colors.likec4.panel.border}",
+				"@/sm": {
+					boxShadow: "lg",
+					borderRadius: "md",
+					paddingInline: "2"
+				},
+				_reduceGraphicsOnPan: { boxShadow: "none" }
+			}
+		},
+		action: {
+			DEFAULT: {
+				description: "LikeC4 panel action layer",
+				value: {
+					color: {
+						base: "likec4.panel.action",
+						_disabled: "likec4.panel.action.disabled",
+						_notDisabled: { _hover: "likec4.panel.action.hover" }
+					},
+					cursor: {
+						base: "pointer",
+						_disabled: "not-allowed"
+					},
+					paddingInline: "xxs",
+					paddingBlock: "xxs",
+					border: "transparent",
+					borderRadius: "sm",
+					backgroundColor: { _notDisabled: { _hover: "likec4.panel.action.bg.hover" } }
+				}
+			},
+			filled: {
+				description: "LikeC4 action panel filled layer",
+				value: {
+					color: {
+						base: "likec4.panel.action",
+						_disabled: "likec4.panel.action.disabled",
+						_notDisabled: { _hover: "likec4.panel.action.hover" }
+					},
+					cursor: {
+						base: "pointer",
+						_disabled: "not-allowed"
+					},
+					paddingInline: "xxs",
+					paddingBlock: "xxs",
+					border: "transparent",
+					borderRadius: "sm",
+					backgroundColor: {
+						base: "likec4.panel.action.bg",
+						_disabled: "likec4.panel.action.bg",
+						_notDisabled: { _hover: "likec4.panel.action.bg.hover" }
+					}
+				}
+			}
+		}
+	},
+	dropdown: {
+		description: "LikeC4 dropdown layer",
+		value: {
+			padding: "2",
+			backgroundColor: "likec4.dropdown.bg",
+			border: "1px solid {colors.likec4.dropdown.border}",
+			boxShadow: "lg",
+			borderRadius: "md"
+		}
+	}
+} });
+const patterns = { extend: {
+	vstack: { defaultValues: {
+		alignItems: "stretch",
+		gap: "sm"
+	} },
+	hstack: { defaultValues: { gap: "sm" } },
+	box: { jsx: ["Box", "MarkdownBlock"] },
+	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 radixColorsPreset = /* @__PURE__ */ createPreset({
+	autoP3: false,
+	darkMode: { condition: "[data-mantine-color-scheme=\"dark\"] &" },
+	colorScales: [...DefaultTagColors]
+});
+const actionButtons = defineRecipe({
+	className: "action-buttons",
+	description: "Action Buttons Container within Diagram Node (Bottom-Center)",
+	base: defineParts({
+		root: { selector: "&" },
+		container: { selector: "& > div" }
+	})({
+		root: {
+			display: "flex",
+			flexDirection: "row",
+			position: "absolute",
+			top: "calc(100% - 30px)",
+			transform: "translateX(-50%)",
+			left: `50%`,
+			width: "auto",
+			minHeight: 30,
+			zIndex: 1,
+			justifyContent: "center",
+			alignItems: "center",
+			_smallZoom: { display: "none" }
+		},
+		container: {
+			display: "flex",
+			flexDirection: "row",
+			gap: "1.5",
+			justifyContent: "center",
+			alignItems: "center"
+		}
+	}),
+	staticCss: [{ conditions: ["*"] }]
+});
+const actionBtn = defineRecipe({
+	className: "action-btn",
+	description: "Action Button within Diagram Node (Bottom-Center)",
+	base: {
+		color: "var(--actionbtn-color)",
+		opacity: .75,
+		"--actionbtn-color": "var(--likec4-palette-loContrast)",
+		"--actionbtn-color-hovered": "var(--likec4-palette-loContrast)",
+		"--actionbtn-color-hovered-btn": "var(--likec4-palette-hiContrast)",
+		"--actionbtn-bg-idle": `color-mix(in oklab , var(--likec4-palette-fill),  transparent 99%)`,
+		"--actionbtn-bg-hovered": `color-mix(in oklab , var(--likec4-palette-fill) 65%, var(--likec4-palette-stroke))`,
+		"--actionbtn-bg-hovered-btn": `color-mix(in oklab , var(--likec4-palette-fill) 50%, var(--likec4-palette-stroke))`,
+		"--ai-bg": `var(--actionbtn-bg-idle)`,
+		background: `var(--ai-bg)`,
+		_whenSelectable: {
+			pointerEvents: "all",
+			cursor: "pointer"
+		},
+		_whenHovered: {
+			opacity: 1,
+			color: "var(--actionbtn-color-hovered)",
+			"--ai-bg": `var(--actionbtn-bg-hovered)`
+		},
+		_hover: {
+			opacity: 1,
+			color: "var(--actionbtn-color-hovered-btn)",
+			"--ai-bg": `var(--actionbtn-bg-hovered-btn)`
+		},
+		_reduceGraphicsOnPan: { display: "none" },
+		_smallZoom: { display: "none" },
+		"& *": { pointerEvents: "none" },
+		_print: { display: "none" }
+	},
+	variants: {
+		variant: {
+			transparent: { "--actionbtn-bg-hovered": `var(--actionbtn-bg-idle)` },
+			filled: { boxShadow: {
+				base: "1px 1px 3px 0px transparent",
+				_whenHovered: "1px 1px 3px 0px rgba(0, 0, 0, 0.2)",
+				_reduceGraphics: "none"
+			} }
+		},
+		size: {
+			sm: { ["--ai-size"]: `22px` },
+			md: { ["--ai-size"]: `28px` }
+		},
+		radius: {
+			sm: { "--ai-radius": `{radii.sm}` },
+			md: { "--ai-radius": `{radii.md}` }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		radius: "md",
+		variant: "filled"
+	},
+	staticCss: [{
+		size: ["*"],
+		radius: ["*"],
+		variant: ["*"],
+		conditions: ["*"]
+	}]
+});
+const borderWidth = {
+	var: "--_border-width",
+	ref: "var(--_border-width)"
+};
+const borderRadius$1 = {
+	var: "--_border-radius",
+	ref: "var(--_border-radius)"
+};
+const compoundTransparency = {
+	var: "--_compound-transparency",
+	ref: "var(--_compound-transparency)"
+};
+const borderTransparency = {
+	var: "--_border-transparency",
+	ref: "var(--_border-transparency)"
+};
+const indicatorSpacing = {
+	var: "--_indicator-spacing",
+	ref: "var(--_indicator-spacing)"
+};
+const compoundColor = {
+	var: "--_compound-color",
+	ref: "var(--_compound-color)"
+};
+const parts$5 = defineParts({
+	root: { selector: "&" },
+	titleContainer: { selector: "& .likec4-compound-title-container" },
+	title: { selector: "& .likec4-compound-title" },
+	icon: { selector: "& .likec4-compound-icon" },
+	navigationBtn: { selector: "& .likec4-compound-navigation" },
+	detailsBtn: { selector: "& .likec4-compound-details" },
+	actionBtn: { selector: "& .action-btn" }
+});
+const iconSize = "20px";
+const compoundNode = defineRecipe({
+	className: "likec4-compound-node",
+	base: parts$5({
+		root: {
+			position: "relative",
+			width: "100%",
+			height: "100%",
+			padding: "0",
+			margin: "0",
+			pointerEvents: "none",
+			backgroundClip: "padding-box",
+			borderStyle: "solid",
+			borderWidth: borderWidth.ref,
+			borderRadius: borderRadius$1.ref,
+			boxSizing: "border-box",
+			[vars.palette.outline]: {
+				base: `oklch(from ${__v("palette.stroke")} calc(l - 0.15) c h)`,
+				_dark: `oklch(from ${__v("palette.stroke")} calc(l + 0.2) c h)`
+			},
+			[borderWidth.var]: "3px",
+			[borderRadius$1.var]: "6px",
+			[compoundTransparency.var]: "100%",
+			[borderTransparency.var]: "100%",
+			[indicatorSpacing.var]: `calc(${borderWidth.ref} + 1px)`,
+			[vars.icon.color]: compoundColor.ref,
+			color: compoundColor.ref,
+			_before: {
+				position: "absolute",
+				content: "\" \"",
+				top: `calc(1px - ${indicatorSpacing.ref} - ${borderWidth.ref})`,
+				left: `calc(1px - ${indicatorSpacing.ref} - ${borderWidth.ref})`,
+				width: `calc(100% + 2 * (${indicatorSpacing.ref} + ${borderWidth.ref} - 1px))`,
+				height: `calc(100% + 2 * (${indicatorSpacing.ref} + ${borderWidth.ref} - 1px))`,
+				borderStyle: "solid",
+				borderWidth: `calc(${borderWidth.ref} + 1px)`,
+				borderRadius: `calc(${borderRadius$1.ref} + 4px)`,
+				borderColor: __v("palette.outline"),
+				pointerEvents: "none",
+				display: {
+					base: "none",
+					_whenFocused: "block",
+					_whenSelected: "block"
+				},
+				animationStyle: "indicator",
+				animationPlayState: {
+					base: "paused",
+					_whenFocused: "running",
+					_whenSelected: "running",
+					_whenPanning: "paused"
+				}
+			},
+			[`&:has(.likec4-compound-navigation) .likec4-compound-title-container`]: { paddingLeft: "[24px]" }
+		},
+		titleContainer: {
+			position: "absolute",
+			display: "flex",
+			alignItems: "center",
+			gap: "1.5",
+			left: "2.5",
+			top: "0.5",
+			right: "30px",
+			width: "auto",
+			minHeight: "28px",
+			color: compoundColor.ref,
+			[`:where(.react-flow__node.draggable) &`]: {
+				pointerEvents: "all",
+				cursor: "grab"
+			}
+		},
+		title: {
+			flex: "1",
+			fontFamily: "likec4.compound",
+			fontWeight: 600,
+			fontSize: "15px",
+			textTransform: "uppercase",
+			letterSpacing: "0.25px",
+			lineHeight: "1"
+		},
+		icon: {
+			flex: `0 0 ${iconSize}`,
+			height: `${iconSize}`,
+			width: `${iconSize}`,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			mixBlendMode: {
+				base: "hard-light",
+				_reduceGraphicsOnPan: "normal",
+				_print: "normal!"
+			},
+			[`& svg, & img`]: {
+				width: "100%",
+				height: "auto",
+				maxHeight: "100%",
+				pointerEvents: "none",
+				filter: {
+					base: [
+						"drop-shadow(0 0 3px rgb(0 0 0 / 12%))",
+						"drop-shadow(0 1px 8px rgb(0 0 0 / 8%))",
+						"drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))"
+					].join("\n"),
+					_reduceGraphicsOnPan: "none"
+				}
+			},
+			[`& img`]: { objectFit: "contain" }
+		},
+		actionBtn: {
+			"--actionbtn-color": `oklch(from ${compoundColor.ref} calc(l - 0.1) c h)`,
+			"--actionbtn-color-hovered": compoundColor.ref,
+			"--actionbtn-color-hovered-btn": `oklch(from ${compoundColor.ref} calc(l + 0.2) c h)`,
+			opacity: {
+				base: .6,
+				_whenHovered: .75,
+				_whenSelected: .75,
+				_hover: 1
+			},
+			_noReduceGraphics: { transition: "fast" },
+			_print: { display: "none" }
+		},
+		navigationBtn: {
+			position: "absolute",
+			top: "0.5",
+			left: "0.5",
+			_smallZoom: { display: "none" },
+			_print: { display: "none" }
+		},
+		detailsBtn: {
+			position: "absolute",
+			top: "0.5",
+			right: "0.5",
+			_smallZoom: { display: "none" },
+			_print: { display: "none" }
+		}
+	}),
+	variants: {
+		isTransparent: {
+			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",
+					_whenPanning: "none !important"
+				},
+				backgroundColor: __v("palette.fill"),
+				borderColor: __v("palette.stroke"),
+				[compoundColor.var]: alpha(__v("palette.hiContrast"), 90)
+			} }),
+			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$5({
+				root: {
+					"--_mix": `color-mix(in oklch, ${__v("palette.hiContrast")}, ${__v("palette.stroke")} 60%)`,
+					[compoundColor.var]: {
+						base: "oklch(from var(--_mix) calc(l - 0.2) c h)",
+						_dark: "oklch(from var(--_mix) calc(l + 0.2) c h)"
+					}
+				},
+				actionBtn: {
+					"--actionbtn-color": compoundColor.ref,
+					_light: {
+						"--actionbtn-color-hovered": __v("palette.stroke"),
+						"--actionbtn-color-hovered-btn": __v("palette.hiContrast"),
+						"--actionbtn-bg-hovered": alpha(__v("palette.fill"), 30),
+						"--actionbtn-bg-hovered-btn": __v("palette.fill")
+					}
+				}
+			}),
+			false: {}
+		},
+		borderStyle: {
+			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)`
+			} })
+		}
+	},
+	defaultVariants: {
+		isTransparent: false,
+		inverseColor: false,
+		borderStyle: "none"
+	},
+	staticCss: [{
+		isTransparent: ["*"],
+		inverseColor: ["*"],
+		borderStyle: ["*"]
+	}]
+});
+const edgeActionBtn = defineRecipe({
+	className: "likec4-edge-action-btn",
+	description: "Action Button within Diagram Edge Label",
+	base: {
+		pointerEvents: "all",
+		color: `var(--xy-edge-label-color)`,
+		cursor: "pointer",
+		opacity: .75,
+		transition: "fast",
+		translate: "auto",
+		"--ai-bg": "transparent",
+		"--ai-hover": `color-mix(in oklab , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)`,
+		"--ai-size": `28px`,
+		"--ai-radius": `{radii.sm}`,
+		_hover: {
+			translateY: "[2px]",
+			scale: 1.15
+		},
+		_active: {
+			translateY: "[-1px]",
+			scale: "0.9"
+		},
+		_whenHovered: {
+			"--ai-bg": "var(--xy-edge-label-background-color)",
+			opacity: 1
+		},
+		"& .tabler-icon": {
+			width: "80%",
+			height: "80%",
+			strokeWidth: "2"
+		},
+		_print: { display: "none" }
+	},
+	variants: {},
+	defaultVariants: {},
+	staticCss: [{ conditions: ["*"] }]
+});
+const parts$4 = defineParts({
+	root: { selector: "&" },
+	stepNumber: { selector: "& .likec4-edge-label__step-number" },
+	contents: { selector: "& .likec4-edge-label__contents" },
+	label: { selector: "& .likec4-edge-label__text" },
+	technology: { selector: "& .likec4-edge-label__technology" }
+});
+const edgeLabel = defineRecipe({
+	className: "likec4-edge-label",
+	jsx: [],
+	base: parts$4({
+		root: {
+			fontFamily: "likec4.relation",
+			paddingBlock: "1",
+			paddingInline: "1.5",
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			width: "max-content",
+			maxWidth: "100%",
+			gap: "0.5",
+			color: "var(--xy-edge-label-color)",
+			background: "var(--xy-edge-label-background-color)",
+			border: "0px solid transparent",
+			borderRadius: "4px"
+		},
+		stepNumber: {
+			alignSelf: "stretch",
+			flex: "0 0 auto",
+			fontWeight: 600,
+			fontSize: "14px",
+			padding: "1",
+			textAlign: "center",
+			minWidth: "22px",
+			borderTopLeftRadius: "4px",
+			borderBottomLeftRadius: "4px",
+			_only: {
+				borderRadius: "4px",
+				minWidth: "24px"
+			},
+			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%)]` } }
+		},
+		contents: {
+			display: "contents",
+			_empty: { display: "none !important" }
+		},
+		label: {
+			whiteSpaceCollapse: "preserve-breaks",
+			fontSize: "14px",
+			lineHeight: "1.2",
+			margin: "0"
+		},
+		technology: {
+			textAlign: "center",
+			whiteSpaceCollapse: "preserve-breaks",
+			fontSize: "11px",
+			lineHeight: "1",
+			opacity: .75
+		}
+	}),
+	variants: {
+		pointerEvents: {
+			none: parts$4({ root: { pointerEvents: "none" } }),
+			all: parts$4({ root: { pointerEvents: "all" } })
+		},
+		cursor: {
+			pointer: parts$4({ root: { cursor: "pointer" } }),
+			default: parts$4({ root: { cursor: "default" } })
+		},
+		isStepEdge: {
+			false: {},
+			true: parts$4({
+				root: {
+					flexDirection: "row",
+					gap: "1",
+					padding: "0"
+				},
+				contents: {
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					paddingTop: "0.5",
+					paddingRight: "1",
+					paddingBottom: "1",
+					gap: "0.5"
+				},
+				label: {
+					py: "0.5",
+					paddingRight: "0.5"
+				}
+			})
+		}
+	},
+	defaultVariants: {
+		pointerEvents: "all",
+		isStepEdge: false,
+		cursor: "default"
+	},
+	staticCss: [{
+		conditions: ["*"],
+		isStepEdge: ["*"],
+		cursor: ["*"],
+		pointerEvents: ["*"]
+	}]
+});
+const edgePath = defineSlotRecipe({
+	description: "Recipe for Edge Path",
+	slots: [
+		"path",
+		"pathBg",
+		"markersCtx",
+		"middlePoint"
+	],
+	className: "likec4-edge",
+	jsx: [],
+	base: {
+		path: {
+			fill: "none",
+			strokeDashoffset: 0,
+			_noReduceGraphics: {
+				animationStyle: "xyedgeAnimated",
+				animationPlayState: "paused",
+				transition: "stroke 130ms ease-out,stroke-width 130ms ease-out"
+			},
+			[`:where([data-edge-dir='back']) &`]: { animationDirection: "reverse" },
+			_whenHovered: { _noReduceGraphics: {
+				animationPlayState: "running",
+				animationDelay: "450ms"
+			} },
+			[`:where(.selected, [data-edge-active='true'], [data-edge-animated='true']) &`]: { _noReduceGraphics: {
+				animationPlayState: "running",
+				animationDelay: "0ms"
+			} },
+			_whenDimmed: { animationPlayState: "paused" },
+			_smallZoom: { animationName: "none" },
+			_whenPanning: {
+				strokeDasharray: "none !important",
+				animationPlayState: "paused"
+			}
+		},
+		pathBg: {
+			pointerEvents: "none",
+			fill: "none",
+			strokeWidth: "calc(var(--xy-edge-stroke-width) + 2)",
+			strokeOpacity: .08,
+			_noReduceGraphics: {
+				transitionProperty: "stroke-width, stroke-opacity",
+				transitionDuration: "fast",
+				transitionTimingFunction: "inOut"
+			},
+			_whenHovered: {
+				transitionTimingFunction: "out",
+				strokeWidth: "calc(var(--xy-edge-stroke-width) + 4)",
+				strokeOpacity: .2
+			},
+			_whenSelected: {
+				strokeWidth: "calc(var(--xy-edge-stroke-width) + 6)",
+				strokeOpacity: .25,
+				_whenHovered: { strokeOpacity: .4 }
+			}
+		},
+		markersCtx: {
+			fill: "[var(--xy-edge-stroke)]",
+			stroke: "[var(--xy-edge-stroke)]"
+		},
+		middlePoint: {
+			visibility: "hidden",
+			offsetDistance: "50%",
+			cx: 0,
+			cy: 0,
+			r: 4,
+			pointerEvents: "none"
+		}
+	},
+	staticCss: [{ conditions: ["*"] }]
+});
+const elementNode = defineRecipe({
+	className: "likec4-element-node",
+	jsx: ["ElementNodeContainer", "ElementNode"],
+	base: {
+		position: "relative",
+		width: "full",
+		height: "full",
+		padding: "0",
+		margin: "0",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		pointerEvents: "none",
+		_focusVisible: { outline: "none" },
+		_whenSelectable: {
+			pointerEvents: "all",
+			_before: {
+				content: "\" \"",
+				position: "absolute",
+				top: "calc(100% - 4px)",
+				left: "0",
+				width: "full",
+				height: "24px",
+				background: "transparent",
+				pointerEvents: "all"
+			}
+		},
+		_reduceGraphicsOnPan: { _before: { display: "none" } },
+		[`:where(.react-flow__node.selectable:not(.dragging)) &`]: { cursor: "pointer" },
+		[`&:is([data-likec4-shape="document"])`]: { paddingBottom: "16px" }
+	},
+	staticCss: [{ conditions: ["*"] }]
+});
+const parts$3 = defineParts({
+	root: { selector: "&" },
+	icon: { selector: "& [data-likec4-icon]" },
+	content: { selector: "& .likec4-element-node-content" },
+	title: { selector: "& [data-likec4-node-title]" },
+	description: { selector: "& [data-likec4-node-description]" },
+	technology: { selector: "& [data-likec4-node-technology]" }
+});
+const hasIcon = "&:has([data-likec4-icon])";
+const textAlign = "--__text-align";
+const varTextAlign = `var(${textAlign})`;
+const elementNodeData = defineRecipe({
+	className: "likec4-element-node-data",
+	jsx: [
+		"ElementNodeData",
+		"ElementNodeData.Root",
+		"ElementTitle",
+		"Root"
+	],
+	base: parts$3({
+		root: {
+			position: "relative",
+			flex: "1",
+			height: "fit-content",
+			width: "fit-content",
+			maxHeight: "100%",
+			maxWidth: "100%",
+			margin: "auto",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexDirection: "row",
+			paddingTop: __v("spacing"),
+			paddingBottom: __v("spacing"),
+			paddingLeft: `calc(${__v("spacing")} + 8px)`,
+			paddingRight: `calc(${__v("spacing")} + 8px)`,
+			overflow: "hidden",
+			pointerEvents: "none",
+			gap: "3",
+			[textAlign]: "center",
+			_shapeQueue: {
+				paddingLeft: "46px",
+				paddingRight: "16px"
+			},
+			_shapeMobile: {
+				paddingLeft: "46px",
+				paddingRight: "16px"
+			},
+			_shapeCylinder: { paddingTop: "30px" },
+			_shapeStorage: { paddingTop: "30px" },
+			_shapeBrowser: {
+				paddingTop: "32px",
+				paddingBottom: "28px"
+			},
+			_shapeBucket: {
+				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` },
+			_shapeSizeLg: {
+				[vars.icon.size]: `${defaultSizes.iconSizes.lg}px`,
+				gap: "4"
+			},
+			_shapeSizeXl: {
+				[vars.icon.size]: `${defaultSizes.iconSizes.xl}px`,
+				gap: "4"
+			},
+			[hasIcon]: { gap: "4" }
+		},
+		icon: {
+			flex: `0 0 ${__v("icon.size", "48px")}`,
+			height: __v("icon.size", "48px"),
+			width: __v("icon.size", "48px"),
+			display: "flex",
+			alignSelf: "flex-start",
+			alignItems: "center",
+			justifyContent: "center",
+			pointerEvents: "none",
+			color: __v("icon.color", "palette.hiContrast"),
+			"& svg, & img": {
+				width: "100%",
+				height: "auto",
+				maxHeight: "100%",
+				transition: "fast",
+				filter: {
+					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" }
+		},
+		content: {
+			height: "fit-content",
+			width: "fit-content",
+			maxHeight: "100%",
+			maxWidth: "100%",
+			flex: "0 1 auto",
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "stretch",
+			justifyContent: "center",
+			flexWrap: "nowrap",
+			overflow: "hidden",
+			gap: "2",
+			"&:has([data-likec4-node-description]):has([data-likec4-node-technology])": { gap: "1.5" }
+		},
+		title: {
+			flex: "0 0 auto",
+			fontFamily: "likec4.element",
+			fontWeight: "medium",
+			fontSize: __v("textsize"),
+			lineHeight: "sm",
+			textWrapStyle: "balance",
+			whiteSpace: "preserve-breaks",
+			textAlign: varTextAlign,
+			color: __v("palette.hiContrast"),
+			lineClamp: {
+				base: 3,
+				_shapeSizeXs: 2,
+				_shapeSizeSm: 2
+			}
+		},
+		description: {
+			flexGrow: "0",
+			flexShrink: "1",
+			fontFamily: "likec4.element",
+			fontWeight: "420",
+			fontSize: `calc(${__v("textsize")} * 0.74)`,
+			lineHeight: "xs",
+			textWrapStyle: "pretty",
+			"--text-fz": `calc(${__v("textsize")} * 0.74)`,
+			color: __v("palette.loContrast"),
+			textAlign: varTextAlign,
+			textOverflow: "ellipsis",
+			overflow: "hidden",
+			lineClamp: {
+				base: "5",
+				_shapeSizeSm: "3"
+			},
+			display: {
+				_shapeSizeXs: "none!",
+				_smallZoom: "none!"
+			},
+			"& a": { pointerEvents: "all" },
+			"& .markdown-alert": { mixBlendMode: "screen" }
+		},
+		technology: {
+			flex: "0 0 auto",
+			fontFamily: "likec4.element",
+			fontWeight: "normal",
+			fontSize: `calc(${__v("textsize")} * 0.635)`,
+			lineHeight: "xs",
+			"--text-fz": `calc(${__v("textsize")} * 0.635)`,
+			color: __v("palette.loContrast"),
+			textAlign: varTextAlign,
+			textWrap: "balance",
+			opacity: {
+				base: .92,
+				_whenHovered: 1
+			},
+			display: {
+				_shapeSizeXs: "none!",
+				_shapeSizeSm: "none!",
+				_smallZoom: "none!"
+			}
+		}
+	}),
+	variants: {
+		iconPosition: {
+			left: parts$3({ root: { [hasIcon]: {
+				[textAlign]: "left",
+				"& .likec4-element-node-content": {
+					minWidth: `calc(50% + calc(${__v("icon.size")} / 2))`,
+					alignItems: "flex-start"
+				}
+			} } }),
+			right: parts$3({ root: { [hasIcon]: {
+				flexDirection: "row-reverse",
+				[textAlign]: "right",
+				gap: "4",
+				"& .likec4-element-node-content": {
+					minWidth: `calc(50% - calc(${__v("icon.size")} / 2))`,
+					alignItems: "flex-end"
+				}
+			} } }),
+			top: parts$3({
+				root: { [hasIcon]: {
+					flexDirection: "column",
+					gap: "2",
+					height: "100%",
+					"& .likec4-element-node-content": {
+						minHeight: `calc(50% - ${__v("icon.size")})`,
+						justifyContent: "flex-start"
+					}
+				} },
+				icon: { alignSelf: "center" }
+			}),
+			bottom: parts$3({
+				root: { [hasIcon]: {
+					flexDirection: "column-reverse",
+					gap: "2",
+					height: "100%",
+					"& .likec4-element-node-content": {
+						justifyContent: "flex-end",
+						minHeight: `calc(50% - ${__v("icon.size")})`
+					}
+				} },
+				icon: { alignSelf: "center" }
+			})
+		},
+		withIconColor: {
+			true: parts$3({ icon: { "& svg": { color: __v("icon.color", "palette.stroke") } } }),
+			false: parts$3({ icon: { mixBlendMode: {
+				base: "hard-light",
+				_reduceGraphicsOnPan: "normal"
+			} } })
+		}
+	},
+	defaultVariants: {
+		iconPosition: "left",
+		withIconColor: false
+	},
+	staticCss: [{
+		withIconColor: ["*"],
+		iconPosition: ["*"],
+		conditions: ["*"]
+	}]
+});
+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$2({
+		root: {
+			top: "0",
+			left: "0",
+			position: "absolute",
+			width: "100%",
+			height: "100%",
+			pointerEvents: "none",
+			overflow: "visible",
+			[vars.palette.outline]: {
+				base: `oklch(from ${__v("palette.stroke")} calc(l * 0.9) c h)`,
+				_dark: `oklch(from ${__v("palette.stroke")} calc(l * 1.2) calc(c * 1.05) h)`
+			},
+			["--likec4-outline-size"]: `4px`
+		},
+		outline: {
+			opacity: .8,
+			transitionBehavior: "allow-discrete",
+			visibility: {
+				base: "hidden",
+				_smallZoom: "hidden",
+				_whenSelected: "visible",
+				_whenFocused: "visible",
+				_groupFocusVisible: "visible"
+			},
+			animationPlayState: {
+				base: "paused",
+				_whenSelected: "running",
+				_whenFocused: "running",
+				_groupFocusVisible: "running",
+				_whenPanning: "paused"
+			},
+			pointerEvents: "none"
+		}
+	}),
+	variants: {
+		shapetype: {
+			html: parts$2({
+				root: {
+					backgroundColor: "var(--likec4-palette-fill)",
+					border: "none",
+					borderRadius: "6px",
+					boxShadow: {
+						base: [
+							"0 2px 1px 0 rgb(0 0 0 / 21%)",
+							"0 1px 1px 0 color-mix(in oklab, var(--likec4-palette-stroke) 40%, transparent)",
+							"0 5px 3px 0 rgb(0 0 0 / 10%)"
+						].join(","),
+						_whenHovered: {
+							base: `rgba(38, 57, 77, 95%) 0px 20px 30px -10px`,
+							_dark: `rgba(10, 11, 16, 90%) 0px 20px 30px -10px`
+						},
+						_whenSelected: "none",
+						_smallZoom: "none",
+						_whenPanning: "none"
+					},
+					transition: {
+						base: "background-color 150ms, box-shadow 130ms",
+						_reduceGraphicsOnPan: "none"
+					},
+					transitionTimingFunction: "out",
+					transitionDelay: "0ms"
+				},
+				multipleHtml: {
+					position: "absolute",
+					content: "\" \"",
+					top: "16px",
+					left: "16px",
+					width: "calc(100% - 6px)",
+					height: "calc(100% - 6px)",
+					backgroundColor: "var(--likec4-palette-fill)",
+					borderRadius: "6px",
+					zIndex: -1,
+					filter: "brightness(0.5) !important",
+					visibility: {
+						base: "visible",
+						_smallZoom: "hidden",
+						_whenSelected: "hidden",
+						_whenFocused: "hidden",
+						_reduceGraphicsOnPan: "hidden"
+					},
+					transition: "normal",
+					_whenHovered: { transform: "translate(-14px, -14px)" }
+				},
+				outline: {
+					position: "absolute",
+					content: "\" \"",
+					top: `[calc(-1 * var(--likec4-outline-size) - 1px)]`,
+					left: `[calc(-1 * var(--likec4-outline-size) - 1px)]`,
+					width: `[calc(100% + 2 * var(--likec4-outline-size) + 2px)]`,
+					height: `[calc(100% + 2 * var(--likec4-outline-size) + 2px)]`,
+					borderStyle: "solid",
+					borderWidth: "var(--likec4-outline-size)",
+					borderRadius: "11px",
+					borderColor: "var(--likec4-palette-outline)",
+					animationStyle: "indicator"
+				}
+			}),
+			svg: parts$2({
+				root: {
+					fill: "var(--likec4-palette-fill)",
+					stroke: "var(--likec4-palette-stroke)",
+					transition: `fill 120ms {easings.in}, filter 130ms {easings.in}`,
+					transitionTimingFunction: {
+						base: "out",
+						_whenHovered: "in"
+					},
+					transitionDelay: "0ms",
+					filter: {
+						base: [
+							"drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))",
+							"drop-shadow(0 1px 1px color-mix(in oklab, var(--likec4-palette-stroke) 40%, transparent))",
+							"drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))"
+						].join("\n"),
+						_whenHovered: [
+							"drop-shadow(0 2px 1px rgba(0, 0, 0, 0.12))",
+							"drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.12))",
+							"drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.12))",
+							"drop-shadow(0px 16px 8px rgba(0, 0, 0, 0.1))",
+							"drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09))"
+						].join("\n"),
+						_whenSelected: "none",
+						_smallZoom: "none",
+						_whenPanning: "none"
+					},
+					"& [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))" }
+				},
+				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: {
+						base: "50% 50%",
+						_shapeQueue: "75% 25%",
+						_shapeCylinder: "50% 100%",
+						_shapeStorage: "50% 100%"
+					},
+					transform: {
+						base: "translate(14px, 14px) perspective(200px) translateZ(-4px)",
+						_whenHovered: "translate(2px, 2px) perspective(200px) translateZ(-4px)"
+					},
+					transitionBehavior: "allow-discrete",
+					transitionProperty: "fill, filter, transform",
+					transitionDuration: "faster",
+					filter: "brightness(0.5) !important",
+					stroke: "none",
+					display: {
+						_smallZoom: "none",
+						_reduceGraphicsOnPan: "none",
+						_whenSelected: "none",
+						_whenFocused: "none"
+					},
+					"& [data-likec4-fill=\"mix-stroke\"]": { fill: "var(--likec4-palette-fill)" }
+				},
+				outline: {
+					stroke: "var(--likec4-palette-outline)",
+					fill: "none",
+					strokeWidth: 4,
+					animationStyle: "indicator"
+				}
+			})
+		},
+		withBorder: {
+			true: {},
+			false: {}
+		},
+		withOutline: {
+			true: parts$2({ outline: { display: "block" } }),
+			false: parts$2({ outline: { display: "none" } })
+		}
+	},
+	defaultVariants: {
+		withBorder: false,
+		withOutline: false
+	},
+	compoundVariants: [{
+		shapetype: "html",
+		withBorder: true,
+		css: parts$2({
+			root: {
+				borderStyle: "solid",
+				borderWidth: "3px",
+				borderColor: "var(--likec4-palette-stroke)",
+				"--likec4-outline-size": "6px"
+			},
+			outline: { borderRadius: "10px" }
+		})
+	}],
+	staticCss: [{
+		shapetype: ["*"],
+		withOutline: ["*"],
+		withBorder: ["*"]
+	}]
+});
+const likec4tag = defineRecipe({
+	className: "likec4-tag",
+	base: {
+		pointerEvents: "all",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		minWidth: 40,
+		width: "min-content",
+		transition: "fast",
+		fontSize: "xs",
+		gap: "[1px]",
+		cursor: "default",
+		fontFamily: "likec4",
+		fontWeight: "bold",
+		layerStyle: "likec4.tag",
+		whiteSpace: "nowrap",
+		px: "1",
+		py: "0"
+	},
+	variants: { autoTextColor: {
+		false: { "& > span": {
+			color: "likec4.tag.text",
+			_first: { opacity: .65 }
+		} },
+		true: { "& > span": {
+			color: "transparent",
+			filter: "invert(1) grayscale(1) brightness(1.3) contrast(1000)",
+			background: "inherit",
+			backgroundClip: "text",
+			mixBlendMode: {
+				base: "plus-lighter",
+				_print: "normal!"
+			}
+		} }
+	} },
+	defaultVariants: { autoTextColor: false },
+	staticCss: [{
+		autoTextColor: ["true", "false"],
+		conditions: ["hover"]
+	}]
+});
+const markdownBlock = defineRecipe({
+	className: "likec4-markdown-block",
+	jsx: ["MarkdownBlock", "Markdown"],
+	description: "Block with Markdown content",
+	base: {
+		"--text-fz": "1em",
+		"--text-fz-sm": "calc(var(--text-fz) * var(--mantine-scale, 1) / 1.125)",
+		"--text-fz-md": "calc(var(--text-fz) * var(--mantine-scale, 1))",
+		"--typography-spacing": "calc(0.75 * var(--text-fz-md))",
+		"--text-fw-headings": "600",
+		"--code-background": {
+			base: mantine.colors.gray[2],
+			_dark: mantine.colors.dark[8]
+		},
+		"--code-color": {
+			base: mantine.colors.black,
+			_dark: mantine.colors.white
+		},
+		_dark: {
+			"--color-border-default": "#30363d",
+			"--color-accent-fg": "#58a6ff",
+			"--color-accent-emphasis": "#1f6feb",
+			"--color-danger-fg": "#f85149",
+			"--color-danger-emphasis": "#da3633",
+			"--color-attention-fg": "#d29922",
+			"--color-attention-emphasis": "#9e6a03",
+			"--color-done-fg": "#a371f7",
+			"--color-done-emphasis": "#8957e5",
+			"--color-success-fg": "#3fb950",
+			"--color-success-emphasis": "#238636"
+		},
+		_light: {
+			"--color-border-default": "#d0d7de",
+			"--color-accent-fg": "#0969da",
+			"--color-accent-emphasis": "#0969da",
+			"--color-danger-fg": "#d1242f",
+			"--color-danger-emphasis": "#cf222e",
+			"--color-attention-fg": "#9a6700",
+			"--color-attention-emphasis": "#9a6700",
+			"--color-done-fg": "#8250df",
+			"--color-done-emphasis": "#8250df",
+			"--color-success-fg": "#1a7f37",
+			"--color-success-emphasis": "#1f883d"
+		},
+		fontSize: "var(--text-fz-md)",
+		lineHeight: mantine.lineHeight,
+		"& :first-child": { marginTop: "0" },
+		"& :last-child": { marginBottom: "0" },
+		"& :where(h1, h2, h3, h4, h5, h6)": {
+			lineHeight: "1.5",
+			textWrap: "var(--mantine-heading-text-wrap)",
+			fontFamily: mantine.fontFamilyHeadings,
+			marginBottom: "var(--typography-spacing)"
+		},
+		"& :is(h1, h2, h3, h4, h5, h6):not(:first-child)": { marginTop: "var(--typography-spacing)" },
+		"& :is(h1)": {
+			fontSize: "calc(1.476 * var(--text-fz-md))",
+			fontWeight: "var(--text-fw-headings)"
+		},
+		"& :is(h2)": {
+			fontSize: "calc(1.383 * var(--text-fz-md))",
+			fontWeight: "var(--text-fw-headings)"
+		},
+		"& :is(h3)": {
+			fontSize: "calc(1.296 * var(--text-fz-md))",
+			fontWeight: "var(--text-fw-headings)"
+		},
+		"& :is(h4)": {
+			fontSize: "calc(1.215 * var(--text-fz-md))",
+			fontWeight: "var(--text-fw-headings)"
+		},
+		"& :is(h5)": {
+			fontSize: "calc(1.138 * var(--text-fz-md))",
+			fontWeight: "var(--text-fw-headings)"
+		},
+		"& :is(h6)": {
+			fontSize: "calc(1.067 * var(--text-fz-md))",
+			fontWeight: "var(--text-fw-headings)"
+		},
+		"& :where(img)": {
+			maxWidth: "100%",
+			marginBottom: "var(--typography-spacing)"
+		},
+		"& :where(p)": {
+			fontSize: "var(--text-fz-md)",
+			marginTop: "0",
+			marginBottom: "var(--typography-spacing)"
+		},
+		"& :where(strong)": { fontWeight: "550" },
+		"& :where(mark)": {
+			fontSize: "var(--text-fz-md)",
+			backgroundColor: mantine.colors.yellow[2],
+			color: "inherit",
+			_dark: {
+				backgroundColor: mantine.colors.yellow[5],
+				color: mantine.colors.black
+			}
+		},
+		"& :where(a)": {
+			fontSize: "var(--text-fz-md)",
+			color: mantine.colors.anchor,
+			textDecoration: "none",
+			fontWeight: "450",
+			_hover: { textDecoration: "underline" }
+		},
+		"& :where(hr)": {
+			marginTop: "calc(var(--typography-spacing) / 2)",
+			marginBottom: "calc(var(--typography-spacing) / 2)",
+			border: "none",
+			borderBottom: "1px solid",
+			borderColor: {
+				base: mantine.colors.gray[3],
+				_dark: mantine.colors.dark[3]
+			}
+		},
+		"& :where(pre)": {
+			px: "3",
+			py: "2",
+			lineHeight: mantine.lineHeights.xs,
+			margin: "0",
+			marginTop: "var(--typography-spacing)",
+			marginBottom: "var(--typography-spacing)",
+			overflowX: "auto",
+			fontFamily: "var(--mantine-font-family-monospace)",
+			fontSize: "var(--text-fz-sm)",
+			borderRadius: "sm",
+			backgroundColor: "var(--code-background)",
+			color: "var(--code-color)"
+		},
+		"& :where(code)": {
+			lineHeight: "1",
+			padding: "1px 4px",
+			borderRadius: "xs",
+			fontFamily: "var(--mantine-font-family-monospace)",
+			fontSize: "var(--text-fz-sm)",
+			backgroundColor: "var(--code-background)",
+			color: "var(--code-color)"
+		},
+		"& :where(pre code)": {
+			backgroundColor: "transparent",
+			padding: "0",
+			borderRadius: "0",
+			color: "inherit",
+			border: "0"
+		},
+		"& :where(ul, ol):not([data-type=\"taskList\"])": {
+			marginBottom: "var(--typography-spacing)",
+			paddingInlineStart: "var(--typography-spacing)",
+			listStylePosition: "inside"
+		},
+		"& :where(table)": {
+			width: "100%",
+			borderCollapse: "collapse",
+			captionSide: "bottom",
+			marginBottom: "var(--typography-spacing)",
+			_light: { ["--table-border-color"]: mantine.colors.gray["3"] },
+			_dark: { ["--table-border-color"]: "var(--mantine-color-dark-4)" },
+			"& :where(caption)": {
+				marginTop: "calc(.5 * var(--typography-spacing) + 1px)",
+				fontSize: "var(--text-fz-sm)",
+				color: "var(--mantine-color-dimmed)"
+			},
+			"& :where(th)": {
+				textAlign: "left",
+				fontWeight: "550",
+				fontSize: "var(--text-fz-sm)",
+				padding: "var(--typography-spacing)"
+			},
+			"& :where(thead th)": {
+				borderBottom: "1px solid",
+				borderColor: "var(--table-border-color)"
+			},
+			"& :where(tfoot th)": {
+				borderTop: "1px solid",
+				borderColor: "var(--table-border-color)"
+			},
+			"& :where(td)": {
+				padding: "var(--typography-spacing)",
+				borderBottom: "1px solid",
+				borderColor: "var(--table-border-color)",
+				fontSize: "var(--text-fz-sm)"
+			},
+			"& :where(tr:last-of-type td)": { borderBottom: "0" }
+		},
+		"& :where(blockquote)": {
+			fontSize: "var(--text-fz-md)",
+			margin: "0",
+			borderRadius: "var(--mantine-radius-sm)",
+			padding: "xs",
+			backgroundColor: {
+				base: mantine.colors.gray[1],
+				_dark: mantine.colors.dark[5]
+			},
+			"&:not(:first-child)": { marginTop: "var(--typography-spacing)" }
+		},
+		"& .markdown-alert": {
+			borderLeft: ".25em solid var(--borderColor-default, var(--color-border-default))",
+			color: "inherit",
+			marginBottom: "calc(var(--typography-spacing) * 1.5)",
+			paddingLeft: "1em",
+			paddingRight: ".5em",
+			"&:last-child": { marginBottom: "0!important" },
+			"& .markdown-alert-title": {
+				alignItems: "center",
+				display: "flex",
+				fontSize: "var(--text-fz-md)",
+				fontWeight: "550",
+				lineHeight: "1.5",
+				marginBottom: "0.1em",
+				gap: "2"
+			},
+			"& .markdown-alert-title svg": {
+				height: "var(--text-fz-md)",
+				fill: "currentColor"
+			},
+			"&.markdown-alert-note": { borderLeftColor: "var(--borderColor-accent-emphasis,var(--color-accent-emphasis))" },
+			"&.markdown-alert-note .markdown-alert-title": { color: ["var(--color-accent-fg)", "var(--fgColor-accent,var(--color-accent-fg))"] },
+			"&.markdown-alert-tip": { borderLeftColor: "var(--borderColor-success-emphasis,var(--color-success-emphasis))" },
+			"&.markdown-alert-tip .markdown-alert-title": { color: ["var(--color-success-fg)", "var(--fgColor-success,var(--color-success-fg))"] },
+			"&.markdown-alert-important": { borderLeftColor: "var(--borderColor-done-emphasis,var(--color-done-emphasis))" },
+			"&.markdown-alert-important .markdown-alert-title": { color: ["var(--color-done-fg)", "var(--fgColor-done,var(--color-done-fg))"] },
+			"&.markdown-alert-warning": { borderLeftColor: "var(--borderColor-attention-emphasis,var(--color-attention-emphasis))" },
+			"&.markdown-alert-warning .markdown-alert-title": { color: ["var(--color-attention-fg)", "var(--fgColor-attention,var(--color-attention-fg))"] },
+			"&.markdown-alert-caution": { borderLeftColor: "var(--borderColor-danger-emphasis,var(--color-danger-emphasis))" },
+			"&.markdown-alert-caution .markdown-alert-title": { color: ["var(--color-danger-fg)", "var(--fgColor-danger,var(--color-danger-fg))"] }
+		}
+	},
+	variants: {
+		uselikec4palette: {
+			true: {
+				"--code-background": "color-mix(in oklab , var(--likec4-palette-stroke) 70%, transparent)",
+				"--code-color": "var(--likec4-palette-loContrast)",
+				"--typography-spacing": "calc(0.5 * var(--text-fz-md))",
+				"& :where(a)": {
+					color: "var(--likec4-palette-fill)/45",
+					mixBlendMode: {
+						base: "difference",
+						_print: "normal!"
+					}
+				},
+				"& :where(strong)": { color: `color-mix(in oklab, ${__v("palette.hiContrast")} 50%,  ${__v("palette.loContrast")})` },
+				"& :where(blockquote)": {
+					padding: "xxs",
+					backgroundColor: alpha(__v("palette.stroke"), 65)
+				},
+				"& :where(hr)": { borderColor: alpha(__v("palette.stroke"), 85) }
+			},
+			false: {}
+		},
+		value: {
+			markdown: {},
+			plaintext: { "& :where(p)": { whiteSpace: "preserve-breaks" } }
+		}
+	},
+	defaultVariants: {
+		uselikec4palette: false,
+		value: "markdown"
+	},
+	staticCss: [{
+		uselikec4palette: ["*"],
+		value: ["plaintext"],
+		conditions: ["*"]
+	}]
+});
+const navigationPanelActionIcon = defineRecipe({
+	className: "likec4-navigation-panel-icon",
+	jsx: ["PanelActionIcon"],
+	description: "ActionIcon for navigation panel",
+	base: {
+		color: {
+			base: "likec4.panel.action",
+			_disabled: "likec4.panel.action.disabled",
+			_notDisabled: { _hover: "likec4.panel.action.hover" }
+		},
+		_disabled: { opacity: .5 }
+	},
+	variants: {
+		variant: {
+			"default": { backgroundColor: {
+				base: "transparent",
+				_notDisabled: { _hover: "likec4.panel.action.bg.hover" }
+			} },
+			"filled": { backgroundColor: {
+				base: "likec4.panel.action.bg",
+				_notDisabled: { _hover: "likec4.panel.action.bg.hover" }
+			} }
+		},
+		type: {
+			"default": {},
+			"warning": { color: {
+				base: "likec4.panel.action.warning",
+				_hover: "likec4.panel.action.warning.hover"
+			} }
+		}
+	},
+	compoundVariants: [{
+		type: "warning",
+		variant: "filled",
+		css: { backgroundColor: {
+			base: "likec4.panel.action.warning.bg",
+			_hover: "likec4.panel.action.warning.bg.hover"
+		} }
+	}],
+	defaultVariants: {
+		variant: "default",
+		type: "default"
+	},
+	staticCss: [{
+		variant: ["*"],
+		conditions: ["*"]
+	}]
+});
+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 overlay = defineRecipe({
+	description: "Recipe for Overlay Dialog",
+	className: "likec4-overlay",
+	base: defineParts({
+		dialog: { selector: "&" },
+		body: { selector: "& .likec4-overlay-body" }
+	})({
+		dialog: {
+			boxSizing: "border-box",
+			margin: "0",
+			position: "fixed",
+			width: "100vw",
+			height: "100vh",
+			maxWidth: "100vw",
+			maxHeight: "100vh",
+			background: `likec4.overlay.border`,
+			shadow: "xl",
+			border: "transparent",
+			outline: "none",
+			borderRadius: `var(${borderRadius})`,
+			[backdropBlur]: "0px",
+			[level]: "0",
+			[offset]: "0px",
+			[inset]: "calc((1 + var(--_level) * 0.75) * var(--_offset))",
+			[backdropOpacity]: "0%",
+			[borderRadius]: "0px",
+			_backdrop: { cursor: "zoom-out" },
+			inset: "0",
+			padding: "0"
+		},
+		body: {
+			position: "relative",
+			containerName: "likec4-dialog",
+			containerType: "size",
+			border: `transparent`,
+			overflow: "hidden",
+			width: "100%",
+			height: "100%",
+			background: "likec4.overlay.body"
+		}
+	}),
+	variants: {
+		fullscreen: {
+			false: {
+				dialog: {
+					sm: {
+						inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]",
+						width: "calc(100vw - 2 * var(--_inset))",
+						height: "calc(100vh - var(--_offset) - var(--_inset))",
+						[borderRadius]: "6px",
+						padding: "1.5",
+						[offset]: "{spacing.4}"
+					},
+					md: { [offset]: "{spacing.4}" },
+					lg: { [offset]: "{spacing.8}" },
+					xl: { [offset]: "{spacing.16}" }
+				},
+				body: { sm: { borderRadius: `calc(var(${borderRadius}) - 2px)` } }
+			},
+			true: { dialog: {
+				inset: "0",
+				padding: "0"
+			} }
+		},
+		withBackdrop: {
+			false: { dialog: { _backdrop: { display: "none" } } },
+			true: { dialog: { _backdrop: {
+				backdropFilter: `blur(var(${backdropBlur}))`,
+				background: `color-mix(in oklab, {colors.likec4.overlay.backdrop} var(${backdropOpacity}), transparent)`
+			} } }
+		}
+	},
+	defaultVariants: {
+		fullscreen: false,
+		withBackdrop: true
+	},
+	staticCss: [{
+		fullscreen: ["*"],
+		withBackdrop: ["*"]
+	}]
+});
+var recipes_exports = /* @__PURE__ */ __exportAll({
+	actionBtn: () => actionBtn,
+	actionButtons: () => actionButtons,
+	compoundNode: () => compoundNode,
+	edgeActionBtn: () => edgeActionBtn,
+	edgeLabel: () => edgeLabel,
+	edgePath: () => edgePath,
+	elementNode: () => elementNode,
+	elementNodeData: () => elementNodeData,
+	elementShapeRecipe: () => elementShapeRecipe,
+	likec4tag: () => likec4tag,
+	markdownBlock: () => markdownBlock,
+	navigationPanelActionIcon: () => navigationPanelActionIcon,
+	nodeNotes: () => nodeNotes,
+	overlay: () => overlay
+});
+const navigationLink = defineSlotRecipe({
+	className: "likec4-navlink",
+	description: "Navigation Link (classes for Mantine NavLink)",
+	jsx: ["NavLink"],
+	slots: [
+		"root",
+		"body",
+		"section",
+		"label",
+		"description"
+	],
+	base: {
+		root: {
+			rounded: "sm",
+			px: "xs",
+			py: "xxs",
+			backgroundColor: { _hover: { "&:not([data-active])": {
+				base: mantine.colors.gray[1],
+				_dark: mantine.colors.dark[5]
+			} } }
+		},
+		body: {
+			gap: "0.5",
+			display: "flex",
+			flexDirection: "column"
+		},
+		section: { "&:where([data-position=\"left\"])": { marginInlineEnd: "xxs" } },
+		label: {
+			display: "block",
+			fontSize: "sm",
+			fontWeight: "500",
+			lineHeight: 1.2
+		},
+		description: {
+			display: "block",
+			fontSize: "xxs",
+			lineHeight: 1.2
+		}
+	},
+	variants: { truncateLabel: {
+		"true": {
+			label: {
+				width: "100%",
+				truncate: true
+			},
+			description: {
+				width: "100%",
+				truncate: true
+			}
+		},
+		"false": {}
+	} },
+	defaultVariants: { truncateLabel: false },
+	staticCss: [{
+		truncateLabel: ["*"],
+		conditions: ["*"]
+	}]
+});
+const navigationPanel = defineSlotRecipe({
+	className: "likec4-navigation-panel",
+	jsx: ["NavigationPanel", /NavigationPanel/],
+	slots: [
+		"root",
+		"body",
+		"logo",
+		"label",
+		"dropdown"
+	],
+	description: "LikeC4 Navigation panel",
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "flex-start",
+			pointerEvents: "none",
+			position: "absolute",
+			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})"],
+				maxHeight: ["calc(100vh - 2 * {spacing.xs})", "calc(100cqh - 2 * {spacing.xs})"]
+			},
+			"@/md": {
+				margin: "sm",
+				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" }
+		},
+		body: {
+			display: "flex",
+			flexDirection: "row",
+			alignItems: "center",
+			layerStyle: "likec4.panel",
+			position: "relative",
+			gap: "xs",
+			pointerEvents: "all",
+			width: "100%",
+			"@/sm": { width: "auto" },
+			minHeight: "40px",
+			cursor: "default"
+		},
+		logo: {
+			display: "flex",
+			flexDirection: "row",
+			padding: "0.5",
+			margin: "0",
+			background: "none",
+			border: "none",
+			cursor: "pointer",
+			width: {
+				base: "20px",
+				"@/sm": "64px"
+			},
+			["& > [data-logo-icon]"]: { display: {
+				base: "block",
+				"@/sm": "none"
+			} },
+			["& > [data-logo-full]"]: { display: {
+				base: "none",
+				"@/sm": "block"
+			} }
+		},
+		label: {
+			fontSize: "sm",
+			fontWeight: "500",
+			transition: "fast",
+			userSelect: "none",
+			color: "likec4.panel.text"
+		},
+		dropdown: {
+			display: "flex",
+			height: "auto",
+			width: "auto",
+			flex: "1",
+			flexGrow: 0,
+			overflow: "hidden",
+			layerStyle: "likec4.dropdown",
+			pointerEvents: "all"
+		}
+	},
+	variants: {
+		size: {
+			md: {},
+			lg: {
+				body: { "@/sm": {
+					gap: "sm",
+					minHeight: "48px",
+					paddingInline: "md",
+					_hover: { boxShadow: "xl" }
+				} },
+				label: { "@/sm": { fontSize: "md" } }
+			}
+		},
+		panelPosition: {
+			left: { root: {
+				top: "0",
+				left: "0"
+			} },
+			right: { root: {
+				top: "0",
+				right: "0"
+			} }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		panelPosition: "left"
+	},
+	staticCss: [{
+		size: ["*"],
+		panelPosition: ["*"]
+	}]
+});
+var stot_recipes_exports = /* @__PURE__ */ __exportAll({
+	navigationLink: () => navigationLink,
+	navigationPanel: () => navigationPanel
+});
+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",
+			color: "text.dimmed"
+		} },
+		xs: { value: {
+			fontSize: "xs",
+			lineHeight: "xs",
+			color: "text.dimmed"
+		} },
+		sm: { value: {
+			fontSize: "sm",
+			lineHeight: "sm",
+			color: "text.dimmed"
+		} },
+		md: { value: {
+			fontSize: "md",
+			lineHeight: "md",
+			color: "text.dimmed"
+		} }
+	},
+	xxs: { value: {
+		fontSize: "xxs",
+		lineHeight: "xxs"
+	} },
+	xs: { value: {
+		fontSize: "xs",
+		lineHeight: "xs"
+	} },
+	sm: { value: {
+		fontSize: "sm",
+		lineHeight: "sm"
+	} },
+	md: { value: {
+		fontSize: "md",
+		lineHeight: "md"
+	} },
+	lg: { value: {
+		fontSize: "lg",
+		lineHeight: "lg"
+	} },
+	xl: { value: {
+		fontSize: "xl",
+		lineHeight: "xl"
+	} },
+	likec4: {
+		DEFAULT: {
+			description: "Text style for panel content",
+			value: {
+				fontSize: "md",
+				lineHeight: "md",
+				fontWeight: "normal",
+				color: "text"
+			}
+		},
+		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"
+					}
+				}
+			}
+		}
+	}
+});
+const semanticTokens = defineSemanticTokens({ colors: defineSemanticTokens.colors({
+	white: { value: "#fff" },
+	black: { value: "#000" },
+	body: {
+		description: "Background color",
+		value: mantine.colors.body
+	},
+	text: {
+		DEFAULT: {
+			description: "Default text color",
+			value: mantine.colors.text
+		},
+		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
+		}
+	},
+	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
+		}
+	},
+	disabled: {
+		text: {
+			description: "Disabled text color",
+			value: mantine.colors.disabledText
+		},
+		border: {
+			description: "Disabled border color",
+			value: mantine.colors.disabledBorder
+		},
+		body: {
+			description: "Disabled body color",
+			value: mantine.colors.disabledBody
+		}
+	},
+	likec4: {
+		background: {
+			DEFAULT: {
+				description: "Background color",
+				value: mantine.colors.body
+			},
+			pattern: {
+				description: "Background pattern color",
+				value: {
+					base: mantine.colors.gray[4],
+					_dark: alpha(mantine.colors.dark[4], 70)
+				}
+			}
+		},
+		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}` }
+			},
+			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]
+				}
+			},
+			text: {
+				DEFAULT: {
+					description: "LikeC4 panel text color",
+					value: alpha(mantine.colors.text, 85)
+				},
+				dimmed: {
+					description: "LikeC4 panel dimmed text color",
+					value: "{colors.text.dimmed}"
+				}
+			},
+			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}"
+				},
+				hover: {
+					description: "LikeC4 panel action text color on hover",
+					value: "var(--mantine-color-bright)"
+				},
+				bg: {
+					DEFAULT: {
+						description: "LikeC4 action icon background color",
+						value: {
+							base: mantine.colors.gray[1],
+							_dark: alpha(mantine.colors.dark[7], 70)
+						}
+					},
+					hover: {
+						description: "LikeC4 action icon background color on hover",
+						value: {
+							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]
+				}
+			} },
+			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)`
+				}
+			} },
+			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)
+			}
+		},
+		walkthrough: { parallelFrame: {
+			description: "LikeC4 walkthrough parallel frame color",
+			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)
+					}
+				}
+			},
+			latest: {
+				description: "LikeC4 Compare color for latest changes",
+				value: mantine.colors.green[6]
+			}
+		}
+	}
+}) });
+const colors = defineTokens.colors({
+	mantine: tokens$1.colors.mantine,
+	transparent: { value: "transparent" },
+	none: { value: "none" },
+	inherit: { value: "inherit" }
+});
+const tokens = defineTokens({
+	fontSizes: {
+		"xxs": { value: "10px" },
+		xs: { value: "12px" },
+		sm: { value: "14px" },
+		md: { value: "16px" },
+		lg: { value: "18px" },
+		xl: { value: "20px" },
+		likec4: { ...t$3(defaultTheme.textSizes, (value, key) => ({
+			description: `LikeC4 Diagram Text Size: ${key}`,
+			value: rem(value)
+		})) }
+	},
+	lineHeights: {
+		"xxs": { value: "1.1" },
+		xs: { value: "1.2" },
+		sm: { value: "1.35" },
+		md: { value: "1.45" },
+		lg: { value: "1.55" },
+		xl: { value: "1.6" },
+		"1": { value: "1" }
+	},
+	sizes: {
+		"100%": { value: "100%" },
+		full: { value: "100%" }
+	},
+	borders: {
+		none: { value: "none" },
+		transparent: { value: "0px solid transparent" },
+		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": {
+			description: "Non-scalable spacing value - 0px",
+			value: "0px"
+		},
+		"0.5": {
+			description: "Non-scalable spacing value - (0.5 * 4px)",
+			value: "2px"
+		},
+		"1": {
+			description: "Non-scalable spacing value - (1 * 4px)",
+			value: "4px"
+		},
+		"1.5": {
+			description: "Non-scalable spacing value - (1.5 * 4px)",
+			value: "6px"
+		},
+		"2": {
+			description: "Non-scalable spacing value - (2 * 4px)",
+			value: "8px"
+		},
+		"2.5": {
+			description: "Non-scalable spacing value - (2.5 * 4px)",
+			value: "10px"
+		},
+		"3": {
+			description: "Non-scalable spacing value - (3 * 4px)",
+			value: "12px"
+		},
+		"3.5": {
+			description: "Non-scalable spacing value - (3.5 * 4px)",
+			value: "14px"
+		},
+		"4": {
+			description: "Non-scalable spacing value - (4 * 4px)",
+			value: "16px"
+		},
+		"4.5": {
+			description: "Non-scalable spacing value - (4.5 * 4px)",
+			value: "18px"
+		},
+		"5": {
+			description: "Non-scalable spacing value - (5 * 4px)",
+			value: "20px"
+		},
+		"6": {
+			description: "Non-scalable spacing value - (6 * 4px)",
+			value: "24px"
+		},
+		"7": {
+			description: "Non-scalable spacing value - (7 * 4px)",
+			value: "28px"
+		},
+		"8": {
+			description: "Non-scalable spacing value - (8 * 4px)",
+			value: "32px"
+		},
+		"9": {
+			description: "Non-scalable spacing value - (9 * 4px)",
+			value: "36px"
+		},
+		"10": {
+			description: "Non-scalable spacing value - (10 * 4px)",
+			value: "40px"
+		},
+		"12": {
+			description: "Non-scalable spacing value - (12 * 4px)",
+			value: "48px"
+		},
+		"16": {
+			description: "Non-scalable spacing value - (16 * 4px)",
+			value: "64px"
+		},
+		xxs: {
+			description: "Scalable spacing value - (8px * var(--scale)) (8px)",
+			value: "calc(8px * var(--mantine-scale))"
+		},
+		xs: {
+			description: "Scalable spacing value - (10px * var(--scale)) (10px)",
+			value: "calc(10px * var(--mantine-scale))"
+		},
+		sm: {
+			description: "Scalable spacing value - (12px * var(--scale)) (12px)",
+			value: "calc(12px * var(--mantine-scale))"
+		},
+		md: {
+			description: "Scalable spacing value - (16px * var(--scale)) (16px)",
+			value: "calc(16px * var(--mantine-scale))"
+		},
+		lg: {
+			description: "Scalable spacing value - (20px * var(--scale)) (20px)",
+			value: "calc(20px * var(--mantine-scale))"
+		},
+		xl: {
+			description: "Scalable spacing value - (32px * var(--scale)) (32px)",
+			value: "calc(32px * var(--mantine-scale))"
+		},
+		likec4: { ...t$3(defaultTheme.spacing, (value, key) => ({
+			description: `LikeC4 Diagram Spacing: ${key}`,
+			value: `${value}px`
+		})) }
+	},
+	radii: {
+		"0": { value: "0px" },
+		xs: { value: "2px" },
+		sm: { value: "4px" },
+		md: { value: "8px" },
+		lg: { value: "16px" },
+		xl: { value: "32px" }
+	},
+	colors,
+	fontWeights: {
+		normal: { value: "400" },
+		medium: { value: "500" },
+		bold: { value: "600" },
+		bolder: { value: "700" }
+	},
+	fonts: {
+		mono: { value: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` },
+		body: { value: "var(--likec4-app-font, var(--likec4-app-font-default))" },
+		likec4: {
+			DEFAULT: { value: "var(--likec4-app-font, var(--likec4-app-font-default))" },
+			element: { value: "var(--likec4-element-font, {fonts.likec4})" },
+			compound: { value: "var(--likec4-compound-font, {fonts.likec4})" },
+			relation: { value: "var(--likec4-relation-font, {fonts.likec4})" }
+		}
+	},
+	easings: {
+		default: { value: "cubic-bezier(0.4, 0, 0.2, 1)" },
+		in: { value: "cubic-bezier(0.4, 0, 1, 1)" },
+		out: { value: "cubic-bezier(0, 0, 0.40, 1)" },
+		inOut: { value: "cubic-bezier(0.50, 0, 0.2, 1)" }
+	},
+	durations: {
+		fastest: { value: "50ms" },
+		faster: { value: "100ms" },
+		fast: { value: "130ms" },
+		normal: { value: "170ms" },
+		slow: { value: "300ms" },
+		slower: { value: "400ms" },
+		slowest: { value: "500ms" }
+	},
+	shadows: {
+		none: { value: "none" },
+		xs: { value: "0 1px 3px rgb(0 0 0/5%), 0 1px 2px rgb(0 0 0/10%)" },
+		sm: { value: "0 1px 3px rgb(0 0 0/5%), 0 10px 15px -5px rgb(0 0 0/5%), 0 7px 7px -5px rgb(0 0 0/4%)" },
+		md: { value: "0 1px 3px rgb(0 0 0/5%), 0 20px 25px -5px rgb(0 0 0/5%), 0 10px 10px -5px rgb(0 0 0/4%)" },
+		lg: { value: "0 1px 3px rgb(0 0 0/5%), 0 28px 23px -7px rgb(0 0 0/5%), 0 12px 12px -7px rgb(0 0 0/4%)" },
+		xl: { value: "0 1px 3px rgb(0 0 0/5%), 0 36px 28px -7px rgb(0 0 0/5%), 0 17px 17px -7px rgb(0 0 0/4%)" }
+	},
+	zIndex: {
+		"-1": { value: "-1" },
+		"0": { value: "0" },
+		"1": { value: "1" },
+		likec4: {
+			diagram: {
+				edge: {
+					DEFAULT: { value: "20" },
+					label: { value: "25" },
+					controlPoint: { value: "30" }
+				},
+				node: {
+					compound: { value: "10" },
+					element: { value: "40" }
+				}
+			},
+			dropdown: { value: "200" },
+			panel: {
+				DEFAULT: { value: "100" },
+				dropdown: { value: "200" }
+			}
+		}
+	}
+});
+const durationValues = [
+	"fastest",
+	"faster",
+	"fast",
+	"normal",
+	"slow",
+	"slower",
+	"slowest",
+	"none"
+];
+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 {
+			transitionDuration: token(`durations.${value}`),
+			transitionTimingFunction: token("easings.inOut")
+		};
+	}
+}) } };
+const theme = {
+	breakpoints,
+	textStyles,
+	layerStyles,
+	tokens,
+	semanticTokens,
+	recipes: recipes_exports,
+	slotRecipes: stot_recipes_exports,
+	containerNames: ["likec4-root", "likec4-dialog"],
+	containerSizes: {
+		xs: "384px",
+		sm: "640px",
+		md: "768px",
+		lg: "1024px"
+	},
+	keyframes,
+	animationStyles
+};
+var src_default = /* @__PURE__ */ definePreset({
+	name: "likec4",
+	presets: [radixColorsPreset],
+	globalVars,
+	globalCss,
+	staticCss: { extend: { themes: ["light", "dark"] } },
+	conditions,
+	patterns,
+	utilities,
+	theme: { extend: theme }
+});
+export { src_default as default, theme };