@likec4/core 1.47.0 → 1.48.0

package/dist/_chunks/LikeC4Styles.mjs

@@ -0,0 +1,691 @@
+import { B as t, D as e, M as e$3, O as e$1, Q as t$4, Z as t$7, b as t$1, j as e$2, nt as t$2, t as t$5, tt as t$3, w as t$6, z as e$4 } from "./libs/remeda.mjs";
+import { h as memoizeProp } from "./utils.mjs";
+import { r as nonexhaustive, t as invariant } from "./invariant.mjs";
+import { n as chroma_js_default, t as generateColors } from "./libs/@mantine/colors-generator.mjs";
+import { n as import_default_map, r as import_default_weak_map } from "./libs/mnemonist.mjs";
+import { t as defu } from "./libs/defu.mjs";
+import { g as isStepEdgeId } from "./scalar.mjs";
+
+//#region ../../styled-system/preset/dist/_chunks/defaults.mjs
+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 Sizes = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+const IconPositions = [
+	"left",
+	"right",
+	"top",
+	"bottom"
+];
+const BorderStyles = [
+	"solid",
+	"dashed",
+	"dotted",
+	"none"
+];
+const ElementShapes = [
+	"rectangle",
+	"person",
+	"browser",
+	"mobile",
+	"cylinder",
+	"storage",
+	"queue",
+	"bucket",
+	"document"
+];
+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"
+];
+const defaultTheme$1 = {
+	colors: ThemeColors.reduce((acc, key) => {
+		acc[key] = {
+			elements: ElementColors[key],
+			relationships: RelationshipColors[key]
+		};
+		return acc;
+	}, {}),
+	...defaultSizes
+};
+
+//#endregion
+//#region src/styles/compute-color-values.ts
+const CONTRAST_MIN_WITH_FOREGROUND = 60;
+const CONTRAST_START_TONE_DIFFERENCE = 2;
+const CONTRAST_STEP_TONE_DIFFERENCE = 1;
+function computeColorValues(color) {
+	invariant(chroma_js_default.valid(color), `Invalid color: ${color}`);
+	const colors = generateColors(color);
+	const fillColor = colors[6];
+	const contrastedColors = getContrastedColorsAPCA(fillColor);
+	return {
+		elements: {
+			fill: fillColor,
+			stroke: colors[7],
+			...contrastedColors
+		},
+		relationships: {
+			line: colors[4],
+			label: colors[3],
+			labelBg: colors[9]
+		}
+	};
+}
+function getContrastedColorsAPCA(refColor) {
+	const refColorChroma = chroma_js_default(refColor);
+	let lightColorRgb = refColorChroma.brighten(CONTRAST_START_TONE_DIFFERENCE);
+	let darkColorRgb = refColorChroma.darken(CONTRAST_START_TONE_DIFFERENCE);
+	let previousLight;
+	let previousDark;
+	let contrastWithLight;
+	let contrastWithDark;
+	do {
+		previousLight = lightColorRgb;
+		previousDark = darkColorRgb;
+		lightColorRgb = lightColorRgb.brighten(CONTRAST_STEP_TONE_DIFFERENCE);
+		darkColorRgb = darkColorRgb.darken(CONTRAST_STEP_TONE_DIFFERENCE);
+		contrastWithLight = chroma_js_default.contrastAPCA(refColorChroma, lightColorRgb);
+		contrastWithDark = chroma_js_default.contrastAPCA(refColorChroma, darkColorRgb);
+	} while (Math.abs(contrastWithLight) < CONTRAST_MIN_WITH_FOREGROUND && Math.abs(contrastWithDark) < CONTRAST_MIN_WITH_FOREGROUND && (!t(lightColorRgb, previousLight) || !t(darkColorRgb, previousDark)));
+	if (Math.abs(contrastWithLight) > Math.abs(contrastWithDark)) return {
+		hiContrast: lightColorRgb.brighten(.4).hex(),
+		loContrast: lightColorRgb.hex()
+	};
+	else return {
+		hiContrast: darkColorRgb.darken(.4).hex(),
+		loContrast: darkColorRgb.hex()
+	};
+}
+
+//#endregion
+//#region src/styles/defaults.ts
+const styleDefaults = {
+	color: "primary",
+	size: "md",
+	opacity: 15,
+	shape: "rectangle",
+	group: {
+		opacity: 15,
+		border: "dashed"
+	},
+	relationship: {
+		color: "gray",
+		line: "dashed",
+		arrow: "normal"
+	}
+};
+
+//#endregion
+//#region src/styles/theme.ts
+const defaultTheme = defaultTheme$1;
+
+//#endregion
+//#region src/types/_common.ts
+/**
+* Allows only exact properties of `U` to be present in `T` and omits undefined values
+*
+* See {@link Exact} for more details (this version is non-deep)
+*/
+function exact(a) {
+	return t$1(a, (v) => v === void 0);
+}
+
+//#endregion
+//#region src/types/const.ts
+function isOnStage(value, stage) {
+	return value[_stage] === stage;
+}
+/**
+* Property name to store the stage of the model
+*
+* @internal
+*/
+const _stage = "_stage";
+/**
+* Property name to store type information, used to identify the type of the view
+*
+* @internal
+*/
+const _type = "_type";
+/**
+* Property name to store layout type information, used to identify the type of the layout*
+* @internal
+*/
+const _layout = "_layout";
+
+//#endregion
+//#region src/types/model-deployment.ts
+function isDeploymentNode(el) {
+	return e(el.kind) && !e(el.element);
+}
+function isDeployedInstance(el) {
+	return e(el.element) && !e(el.kind);
+}
+
+//#endregion
+//#region src/types/model-logical.ts
+/**
+* Ensures that the sizes are set to default values if they are not set
+*/
+function ensureSizes({ size, padding, textSize, iconSize, ...rest }, defaultSize = defaultStyle.defaults.size) {
+	size ??= defaultSize;
+	textSize ??= size;
+	padding ??= size;
+	iconSize ??= size;
+	return {
+		...rest,
+		size,
+		padding,
+		textSize,
+		iconSize
+	};
+}
+
+//#endregion
+//#region src/types/model-spec.ts
+/**
+* Checks if tag color is defined in the specification
+* Expects HEX, `rgb(...)` or `rgba(...)` color
+*/
+function isTagColorSpecified(spec) {
+	const color = typeof spec === "string" ? spec : spec.color;
+	return color.startsWith("#") || color.startsWith("rgb");
+}
+
+//#endregion
+//#region src/types/operators.ts
+function isTagEqual(operator) {
+	return "tag" in operator;
+}
+function isKindEqual(operator) {
+	return "kind" in operator;
+}
+function isParticipantOperator(operator) {
+	return "participant" in operator;
+}
+function isNotOperator(operator) {
+	return "not" in operator;
+}
+function isAndOperator(operator) {
+	return "and" in operator;
+}
+function isOrOperator(operator) {
+	return "or" in operator;
+}
+function whereOperatorAsPredicate(operator) {
+	switch (true) {
+		case isParticipantOperator(operator): {
+			const participant = operator.participant;
+			return participantIs(participant, whereOperatorAsPredicate(operator.operator));
+		}
+		case isTagEqual(operator): {
+			if (e$1(operator.tag) || "eq" in operator.tag) {
+				const tag = e$1(operator.tag) ? operator.tag : operator.tag.eq;
+				return (value) => {
+					return Array.isArray(value.tags) && value.tags.includes(tag);
+				};
+			}
+			const tag = operator.tag.neq;
+			return (value) => {
+				return !Array.isArray(value.tags) || !value.tags.includes(tag);
+			};
+		}
+		case isKindEqual(operator): {
+			if (e$1(operator.kind) || "eq" in operator.kind) {
+				const kind = e$1(operator.kind) ? operator.kind : operator.kind.eq;
+				return (value) => {
+					return value.kind === kind;
+				};
+			}
+			const kind = operator.kind.neq;
+			return (value) => {
+				return e$2(value.kind) || value.kind !== kind;
+			};
+		}
+		case isNotOperator(operator): return e$3(whereOperatorAsPredicate(operator.not));
+		case isAndOperator(operator): return t$2(operator.and.map(whereOperatorAsPredicate));
+		case isOrOperator(operator): return t$3(operator.or.map(whereOperatorAsPredicate));
+		default: nonexhaustive(operator);
+	}
+}
+function participantIs(participant, predicate) {
+	return (value) => {
+		if (!value.source || !value.target) return false;
+		switch (participant) {
+			case "source": return predicate(value.source);
+			case "target": return predicate(value.target);
+		}
+	};
+}
+
+//#endregion
+//#region src/types/view.ts
+function isViewRulePredicate(rule) {
+	return "include" in rule || "exclude" in rule;
+}
+function isViewRuleStyle(rule) {
+	return "targets" in rule && "style" in rule;
+}
+function isComputedView(view) {
+	return view._stage === "computed";
+}
+function isDiagramView(view) {
+	return view._stage === "layouted";
+}
+function isElementView(view) {
+	return view._type === "element";
+}
+function isScopedElementView(view) {
+	return isElementView(view) && e(view.viewOf);
+}
+function isExtendsElementView(view) {
+	return isElementView(view) && e(view.extends);
+}
+function isDeploymentView(view) {
+	return view._type === "deployment";
+}
+function isDynamicView(view) {
+	return view._type === "dynamic";
+}
+
+//#endregion
+//#region src/types/view-common.ts
+function isViewRuleGlobalStyle(rule) {
+	return "styleId" in rule;
+}
+function isViewRuleGlobalPredicateRef(rule) {
+	return "predicateId" in rule;
+}
+function isAutoLayoutDirection(autoLayout) {
+	return autoLayout === "TB" || autoLayout === "BT" || autoLayout === "LR" || autoLayout === "RL";
+}
+function isViewRuleAutoLayout(rule) {
+	return "direction" in rule;
+}
+
+//#endregion
+//#region src/types/view-parsed.dynamic.ts
+function getParallelStepsPrefix(id) {
+	if (isStepEdgeId(id) && id.includes(".")) return id.slice(0, id.indexOf(".") + 1);
+	return null;
+}
+function isDynamicStep(step) {
+	return !!step && !("__series" in step || "__parallel" in step);
+}
+function isDynamicStepsParallel(step) {
+	return !!step && "__parallel" in step && e$4(step.__parallel);
+}
+function isDynamicStepsSeries(step) {
+	return !!step && "__series" in step && e$4(step.__series);
+}
+
+//#endregion
+//#region src/types/view-parsed.element.ts
+function isViewRuleGroup(rule) {
+	return "title" in rule && "groupRules" in rule && Array.isArray(rule.groupRules);
+}
+function isViewRuleRank(rule) {
+	return "rank" in rule && Array.isArray(rule.targets);
+}
+
+//#endregion
+//#region src/styles/compute-compound-colors.ts
+/**
+* Compute color values for compound nodes (for six depth levels)
+*
+* @param base The base element colors
+*/
+function computeCompoundColorValues(base, depth) {
+	const d = depth ?? 6;
+	let fill = chroma_js_default(base.fill);
+	let stroke = chroma_js_default(base.stroke);
+	const isFillTooLight = fill.luminance() > .8;
+	const colors = t$4(t$5(chroma_js_default.scale(isFillTooLight ? [fill.darken(.02).desaturate(.05), fill.darken(.1).desaturate(.1)] : [fill.shade(.12, "lch").desaturate(.05), fill.shade(.35, "lch").desaturate(.4)]).mode("oklch").correctLightness().colors(d, null), chroma_js_default.scale(isFillTooLight ? [stroke.darken(.04).desaturate(.05), stroke.darken(.12).desaturate(.1)] : [stroke.shade(.15, "lch").desaturate(.08), stroke.shade(.4, "lch").desaturate(.4)]).mode("oklch").correctLightness().colors(d, null)), t$6(([fill, stroke]) => ({
+		...base,
+		fill: fill.hex(),
+		stroke: stroke.hex()
+	})));
+	invariant(colors.length === d, `Expected ${d} colors, got ${colors.length}`);
+	return colors;
+}
+
+//#endregion
+//#region src/styles/LikeC4Styles.ts
+const defaultStyle = {
+	theme: defaultTheme,
+	defaults: styleDefaults
+};
+/**
+* Styles of a LikeC4 project
+*
+* Accepts an array of LikeC4ProjectStylesConfig objects as a parameter
+* and constructs a LikeC4Styles merged with the default styles.
+*
+* The class provides methods to get the default element colors, relationship
+* colors, group colors, font size in pixels, padding in pixels, and to compute
+* the ThemeColorValues from a given color.
+*/
+var LikeC4Styles = class LikeC4Styles {
+	theme;
+	defaults;
+	static DEFAULT = new LikeC4Styles(defaultStyle);
+	static from(...configs) {
+		if (t$7(configs, 1)) return new LikeC4Styles(defu(...configs, defaultStyle));
+		return this.DEFAULT;
+	}
+	constructor(config) {
+		this.config = config;
+		this.theme = config.theme;
+		this.defaults = config.defaults;
+	}
+	/**
+	* Default element colors
+	*/
+	get elementColors() {
+		return this.theme.colors[this.defaults.color].elements;
+	}
+	/**
+	* Default relationship colors
+	*/
+	get relationshipColors() {
+		return this.theme.colors[this.defaults.relationship.color].relationships;
+	}
+	/**
+	* Default group colors
+	*/
+	get groupColors() {
+		const color = this.defaults.group?.color;
+		if (!color) return this.elementColors;
+		return memoizeProp(this, "defaultGroup", () => ({
+			...this.elementColors,
+			...this.theme.colors[color].elements
+		}));
+	}
+	isDefaultColor(color) {
+		return color === this.defaults.color;
+	}
+	/**
+	* Get color values
+	*
+	* @param color - The color to use
+	* @default color From the defaults
+	*/
+	colors(color) {
+		color ??= this.defaults.color;
+		if (this.isThemeColor(color)) return this.theme.colors[color];
+		throw new Error(`Unknown color: ${color}`);
+	}
+	compoundColorsCache = new import_default_weak_map.default((baseElementColors) => new import_default_map.default((depth) => computeCompoundColorValues(baseElementColors, depth)));
+	/**
+	* Get colors for compound nodes
+	*
+	* @param baseElementColors - The base element colors to compute from
+	*/
+	colorsForCompounds(baseElementColors, depth) {
+		return this.compoundColorsCache.get(baseElementColors).get(depth ?? 6);
+	}
+	/**
+	* Get font size in pixels
+	*
+	* @param textSize - The text size to use
+	* @default textSize From the defaults
+	*/
+	fontSize(textSize) {
+		textSize ??= this.defaults.text ?? this.defaults.size;
+		return this.theme.textSizes[textSize];
+	}
+	/**
+	* Get padding in pixels
+	*
+	* @param paddingSize - The padding size to use
+	* @default paddingSize From the defaults
+	*/
+	padding(paddingSize) {
+		paddingSize ??= this.defaults.padding ?? this.defaults.size;
+		return this.theme.spacing[paddingSize];
+	}
+	/**
+	* Get icon size in pixels
+	*
+	* @param iconSize - The icon size to use
+	* @default iconSize From the defaults
+	*/
+	iconSize(iconSize) {
+		iconSize ??= this.defaults.size;
+		return this.theme.iconSizes[iconSize];
+	}
+	isThemeColor(color) {
+		return color in this.theme.colors;
+	}
+	/**
+	* Calculate sizes and values based on the node styles
+	*
+	* @example
+	* ```typescript
+	* const { sizes, values } = styles.nodeSizes(node.style)
+	*
+	* // sizes
+	* sizes.size     // enum Size
+	* sizes.padding  // enum SpacingSize
+	* sizes.textSize // enum TextSize
+	* sizes.iconSize // enum ShapeSize
+	*
+	* // values
+	* values.sizes    // { width: number, height: number }
+	* values.padding  // number
+	* values.textSize // number
+	* values.iconSize // number
+	* ```
+	*/
+	nodeSizes(nodestyles) {
+		const sizes = ensureSizes(nodestyles, this.defaults.size);
+		return {
+			sizes,
+			values: {
+				sizes: this.theme.sizes[sizes.size],
+				padding: this.padding(sizes.padding),
+				textSize: this.fontSize(sizes.textSize),
+				iconSize: this.iconSize(sizes.iconSize)
+			}
+		};
+	}
+	/**
+	* Compute ThemeColorValues from a given color
+	* @param color - HEX, RGB, RGBA, etc.
+	*/
+	computeFrom(color) {
+		if (this.isThemeColor(color)) return this.theme.colors[color];
+		return memoizeProp(this, `compute-${color}`, () => {
+			if (!chroma_js_default.valid(color)) throw new Error(`Invalid color value: "${color}"`);
+			return computeColorValues(color);
+		});
+	}
+	equals(other) {
+		if (other === this) return true;
+		if (this.constructor !== other.constructor) return false;
+		return t(this.config, other.config);
+	}
+};
+
+//#endregion
+export { isDeployedInstance as A, BorderStyles as B, isNotOperator as C, whereOperatorAsPredicate as D, isTagEqual as E, isOnStage as F, ThemeColors as G, ElementShapes as H, exact as I, defaultTheme as L, _layout as M, _stage as N, isTagColorSpecified as O, _type as P, styleDefaults as R, isKindEqual as S, isParticipantOperator as T, IconPositions as U, DefaultTagColors as V, Sizes as W, isExtendsElementView as _, isDynamicStep as a, isViewRuleStyle as b, isAutoLayoutDirection as c, isViewRuleGlobalStyle as d, isComputedView as f, isElementView as g, isDynamicView as h, getParallelStepsPrefix as i, isDeploymentNode as j, ensureSizes as k, isViewRuleAutoLayout as l, isDiagramView as m, isViewRuleGroup as n, isDynamicStepsParallel as o, isDeploymentView as p, isViewRuleRank as r, isDynamicStepsSeries as s, LikeC4Styles as t, isViewRuleGlobalPredicateRef as u, isScopedElementView as v, isOrOperator as w, isAndOperator as x, isViewRulePredicate as y, computeColorValues as z };