@statewalker/fsm-charts 0.2.5 → 0.2.7

package/dist/buildStatechartsPanel-BX7e0GzA.js

@@ -0,0 +1,494 @@
+import { t as _defineProperty } from "./defineProperty-C0rC37pP.js";
+import { t as getPadding } from "./getPadding-Cw0e7G2v.js";
+//#region src/utils/toKebabCase.ts
+function toKebabCase(str) {
+	str = (str || "").trim().replace(/\s+/gim, "-");
+	str = str.replace(/([^A-Z]?)([A-Z])/g, (_, a, b) => `${a.toLowerCase()}-${b.toLowerCase()}`);
+	return str;
+}
+//#endregion
+//#region src/utils/serializeCss.ts
+function serializeCss(obj) {
+	return visitStyle(obj).join("\n");
+	function visitStyle(obj, lines = [], prefixes = [""]) {
+		for (const [key, style] of Object.entries(obj)) {
+			const selectors = [];
+			for (const sel of key.split(",").map((_) => _.trim())) for (const prefix of prefixes) {
+				const selector = sel.replace(/^(.)/, (_, ch) => ch === "&" ? prefix : prefix.length > 0 ? `${prefix} ${ch}` : ch);
+				selectors.push(selector);
+			}
+			const selectorRules = [];
+			const extensions = [];
+			for (let [key, value] of Object.entries(style)) if (typeof value === "object") visitStyle({ [key]: value }, extensions, selectors);
+			else {
+				key = toKebabCase(key);
+				selectorRules.push(`  ${key}: ${value};`);
+			}
+			if (selectorRules.length) {
+				lines.push(`${selectors.join(",\n")} {`);
+				lines.push(...selectorRules);
+				lines.push(`}`);
+			}
+			lines.push(...extensions);
+		}
+		return lines;
+	}
+}
+//#endregion
+//#region src/html/buildStatechartStyles.ts
+const activeStatesStyle = {
+	backgroundColor: "white",
+	borderColor: "red",
+	borderWidth: "2px",
+	labelColor: "red"
+};
+const activeTransitionsStyle = {
+	backgroundColor: "#eee",
+	borderColor: "none",
+	borderWidth: "0",
+	lineColor: "red",
+	lineWidth: "1px",
+	labelColor: "red"
+};
+const selectedStatesStyle = {
+	backgroundColor: "white",
+	borderColor: "navy",
+	borderWidth: "2px",
+	labelColor: "navy"
+};
+const selectedTransitionsStyle = {
+	backgroundColor: "#eee",
+	borderColor: "none",
+	borderWidth: "0",
+	lineColor: "navy",
+	lineWidth: "1px",
+	labelColor: "navy"
+};
+function buildStateDetailsStyle({ root = ":root" }) {
+	return { [root]: {
+		".state-details": {
+			backgroundColor: "var(--state-background-color, white)",
+			border: "var(--state-border-width, 1px) solid var(--state-border-color, currentColor)",
+			borderRadius: "0.5em",
+			padding: "0.5em"
+		},
+		".state-details__label": {
+			cursor: "pointer",
+			color: "var(--transition-label-color, currentColor)",
+			fontFamily: "var(--state-label-font-family, sans-serif)",
+			fontSize: "var(--state-label-font-size, 14px)"
+		},
+		".state-details__content": {
+			display: "flex",
+			flexDirection: "column",
+			gap: "0.5em"
+		},
+		".state-details__chart": {
+			maxWidth: "100%",
+			overflow: "auto",
+			scrollbarWidth: "thin"
+		}
+	} };
+}
+function buildStateDetailsStyleWithModifier({ root = ":root", modifier, states }) {
+	return { [root]: {
+		".state-details": { [`&.state-details--${modifier}`]: {
+			backgroundColor: `var(--state-${modifier}-background-color, ${states.backgroundColor})`,
+			border: `var(--state-${modifier}-border-width, 1px) solid var(--state-${modifier}-border-color, currentColor)`
+		} },
+		".state-details__label": { [`&.state-details__label--${modifier}`]: { color: `var(--state-${modifier}-label-color)` } }
+	} };
+}
+function buildStatechartStylesWithModifier({ root = ":root", modifier, states, transitions }) {
+	return { [root]: {
+		[`--transition-${modifier}-background-color`]: transitions.backgroundColor,
+		[`--transition-${modifier}-border-color`]: transitions.borderColor,
+		[`--transition-${modifier}-border-width`]: transitions.borderWidth,
+		[`--transition-${modifier}-line-color`]: transitions.lineColor,
+		[`--transition-${modifier}-line-width`]: transitions.lineWidth,
+		[`--transition-${modifier}-label-color`]: transitions.labelColor,
+		[`--state-${modifier}-background-color`]: states.backgroundColor,
+		[`--state-${modifier}-border-color`]: states.borderColor,
+		[`--state-${modifier}-border-width`]: states.borderWidth,
+		[`--state-${modifier}-label-color`]: states.labelColor,
+		".state": { [`&.state--${modifier}`]: {
+			"--state-background-color": `var(--state-${modifier}-background-color)`,
+			"--state-border-color": `var(--state-${modifier}-border-color)`,
+			"--state-border-width": `var(--state-${modifier}-border-width)`,
+			"--state-label-color": `var(--state-${modifier}-label-color)`
+		} },
+		".transition": { [`&.transition--${modifier}`]: {
+			"--transition-background-color": `var(--transition-${modifier}-background-color)`,
+			"--transition-border-color": `var(--transition-${modifier}-border-color)`,
+			"--transition-border-width": `var(--transition-${modifier}-border-width)`,
+			"--transition-line-color": `var(--transition-${modifier}-line-color)`,
+			"--transition-line-width": `var(--transition-${modifier}-line-width)`,
+			"--transition-label-color": `var(--transition-${modifier}-label-color)`
+		} }
+	} };
+}
+function buildStatechartStyles({ root = ":root" }) {
+	return { [root]: {
+		"--transition-background-color": "rgba(255,255,255,0.7)",
+		"--transition-border-color": "none",
+		"--transition-border-width": "1px",
+		"--transition-line-color": "silver",
+		"--transition-line-width": "1px",
+		"--transition-label-color": "gray",
+		"--transition-label-font-size": "12px",
+		"--transition-label-font-family": "sans-serif",
+		".transition__marker": {
+			fill: "var(--transition-line-color, currentColor)",
+			stroke: "none"
+		},
+		".transition__line": {
+			stroke: "var(--transition-line-color, currentColor)",
+			strokeWidth: "var(--transition-line-width, 1px)"
+		},
+		".transition__box": {
+			fill: "var(--transition-background-color, rgba(255,255,255,0.7))",
+			stroke: "var(--transition-border-color, none)",
+			strokeWidth: "var(--transition-border-width, 1px)",
+			borderRadius: "0.5em",
+			cursor: "pointer"
+		},
+		".transition__label": {
+			fill: "var(--transition-label-color, currentColor)",
+			fontSize: "var(--transition-label-font-size, 12px)",
+			fontFamily: "var(--transition-label-font-family, sans-serif)",
+			cursor: "pointer"
+		},
+		"--state-background-color": "white",
+		"--state-border-color": "silver",
+		"--state-border-width": "1px",
+		"--state-label-color": "gray",
+		"--state-label-font-size": "14px",
+		"--state-label-font-family": "sans-serif",
+		".state__box": {
+			fill: "var(--state-background-color, white)",
+			stroke: "var(--state-border-color, currentColor)",
+			strokeWidth: "var(--state-border-width, 1px)",
+			borderRadius: "0.5em",
+			cursor: "pointer"
+		},
+		".state__label": {
+			color: "var(--state-label-color, currentColor)",
+			fill: "var(--state-label-color, currentColor)",
+			fontSize: "var(--state-label-font-size, 14px)",
+			fontFamily: "var(--state-label-font-family, sans-serif)",
+			cursor: "pointer"
+		},
+		".state__initial": {
+			fill: "var(--state-border-color, currentColor)",
+			stroke: "var(--state-border-color, currentColor)",
+			strokeWidth: "var(--state-border-width, 2px)"
+		},
+		".state__final": {
+			fill: "white",
+			stroke: "var(--state-border-color, currentColor)",
+			strokeWidth: "var(--state-border-width, 2px)",
+			"&.state__final--inner": {
+				fill: "var(--state-border-color, currentColor)",
+				stroke: "none",
+				strokeWidth: "0"
+			}
+		}
+	} };
+}
+//#endregion
+//#region src/html/buildStatechartCss.ts
+function buildStatechartCss({ prefix = "" } = {}) {
+	const root = prefix || ":root";
+	return [
+		buildStatechartStyles({ root }),
+		buildStatechartStylesWithModifier({
+			root,
+			modifier: "selected",
+			states: selectedStatesStyle,
+			transitions: selectedTransitionsStyle
+		}),
+		buildStatechartStylesWithModifier({
+			root,
+			modifier: "active",
+			states: activeStatesStyle,
+			transitions: activeTransitionsStyle
+		}),
+		buildStateDetailsStyle({ root }),
+		buildStateDetailsStyleWithModifier({
+			root,
+			modifier: "selected",
+			states: selectedStatesStyle
+		}),
+		buildStateDetailsStyleWithModifier({
+			root,
+			modifier: "active",
+			states: activeStatesStyle
+		})
+	].map(serializeCss).join("\n");
+}
+//#endregion
+//#region src/utils/BasisCurve.ts
+var BasisCurve = class {
+	constructor(context) {
+		_defineProperty(this, "_context", void 0);
+		_defineProperty(this, "_x0", 0);
+		_defineProperty(this, "_y0", 0);
+		_defineProperty(this, "_x1", 0);
+		_defineProperty(this, "_y1", 0);
+		_defineProperty(this, "_point", 0);
+		_defineProperty(this, "_line", 0);
+		this._context = context;
+	}
+	$point(x, y) {
+		this._context.bezierCurveTo((2 * this._x0 + this._x1) / 3, (2 * this._y0 + this._y1) / 3, (this._x0 + 2 * this._x1) / 3, (this._y0 + 2 * this._y1) / 3, (this._x0 + 4 * this._x1 + x) / 6, (this._y0 + 4 * this._y1 + y) / 6);
+	}
+	areaStart() {
+		this._line = 0;
+	}
+	areaEnd() {
+		this._line = NaN;
+	}
+	lineStart() {
+		this._x0 = this._x1 = this._y0 = this._y1 = NaN;
+		this._point = 0;
+	}
+	lineEnd() {
+		switch (this._point) {
+			case 3: this.$point(this._x1, this._y1);
+			case 2: this._context.lineTo(this._x1, this._y1);
+		}
+		if (this._line || this._line !== 0 && this._point === 1) this._context.closePath();
+		this._line = 1 - this._line;
+	}
+	point(x, y) {
+		x = +x, y = +y;
+		switch (this._point) {
+			case 0:
+				this._point = 1;
+				this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
+				break;
+			case 1:
+				this._point = 2;
+				break;
+			case 2:
+				this._point = 3;
+				this._context.lineTo((5 * this._x0 + this._x1) / 6, (5 * this._y0 + this._y1) / 6);
+			default: this.$point(x, y);
+		}
+		this._x0 = this._x1, this._x1 = x;
+		this._y0 = this._y1, this._y1 = y;
+	}
+};
+//#endregion
+//#region src/utils/serializeAttrs.ts
+function serializeAttrs(attrs = {}, { prefix = "", transform = false } = {}) {
+	const result = [];
+	for (const [key, value] of Object.entries(attrs || {}).sort(([a], [b]) => a > b ? 1 : -1)) {
+		if (value === void 0 || value === null || value === "") continue;
+		result.push(`${prefix}${escapeValue(key)}=${JSON.stringify(escapeValue(transform ? toKebabCase(String(value)) : value))}`);
+	}
+	return result.join(" ");
+	function escapeValue(value) {
+		return String(value).replaceAll(/</gim, "&lt;").replaceAll(/>/gim, "&gt;").replaceAll(/"/gim, "&quot;");
+	}
+}
+//#endregion
+//#region src/html/buildStatechartSvg.ts
+function getBoxParams({ x, y, width, height, padding = 0 }) {
+	const [top, right, bottom, left] = getPadding(padding);
+	const h = Math.ceil(height - top - bottom);
+	return {
+		x: x + left,
+		y: y - bottom - h,
+		width: Math.ceil(width - left - right),
+		height: h
+	};
+}
+function buildStatechartSvg({ graph: { width, height, nodes, edges }, newId, stateFontSize = 14, transitionFontSize = 12, println, initialStateKey = "<initial>", finalStateKey = "<final>" }) {
+	if (!nodes.length && !edges.length) return;
+	width = Math.ceil(width);
+	height = Math.ceil(height);
+	println(`<svg ${serializeAttrs({
+		class: "statechart",
+		width,
+		height,
+		viewbox: `0 0 ${width} ${height}`,
+		xmlns: "http://www.w3.org/2000/svg"
+	})}>`);
+	println(`<g class="statechart__transitions">`);
+	const markerAttrs = serializeAttrs({
+		refX: 19,
+		refY: 7,
+		markerWidth: 20,
+		markerHeight: 14,
+		orient: "auto",
+		class: "transition__marker",
+		stroke: "none",
+		fill: "currentColor"
+	});
+	for (const edge of edges) {
+		const { id, points, text } = edge;
+		println(`  <g class="transition" data-transition-id="${id}">`);
+		const markerId = newId("marker");
+		println(`    <defs>`);
+		println(`      <marker id="${markerId}" ${markerAttrs}>`);
+		println(`        <path d="M 19,7 L9,13 L14,7 L9,1 Z"></path>`);
+		println(`      </marker>`);
+		println(`    </defs>`);
+		const path = [];
+		const round = (...n) => n.map(Math.round);
+		const base = new BasisCurve({
+			bezierCurveTo(x0, y0, x1, y1, x2, y2) {
+				path.push(`C${round(x0, y0, x1, y1, x2, y2).join(",")}`);
+			},
+			moveTo(x, y) {
+				path.push(`M${round(x, y).join(",")}`);
+			},
+			lineTo(x, y) {
+				path.push(`L${round(x, y).join(",")}`);
+			},
+			closePath() {
+				path.push("Z");
+			}
+		});
+		base.lineStart();
+		for (const point of points) base.point(point.x, point.y);
+		base.lineEnd();
+		println(`    <path ${serializeAttrs({
+			class: "transition__line",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1px",
+			d: path.join(""),
+			"marker-end": `url(#${markerId})`
+		})} />`);
+		if (text) {
+			const { x, y, width, height } = getBoxParams({
+				...edge,
+				padding: 0
+			});
+			println(`    <rect ${serializeAttrs({
+				x,
+				y: y - transitionFontSize,
+				width,
+				height,
+				rx: Math.ceil(transitionFontSize / 2),
+				ry: Math.ceil(transitionFontSize / 2),
+				fill: "rgba(255,255,255,0.7)",
+				stroke: "none",
+				strokeWidth: "1",
+				class: "transition__box"
+			})} />`);
+			println(`    <text ${serializeAttrs({
+				class: "transition__label",
+				"text-anchor": "middle",
+				fill: "currentColor",
+				x: Math.round(x + width / 2),
+				y: Math.round(y + height / 2 - transitionFontSize / 2)
+			})}>${text}</text>`);
+		}
+		println(`  </g>`);
+	}
+	println("</g>");
+	const shift = stateFontSize / 4;
+	const initialStateRadius = 6;
+	const finalStateRadius = initialStateRadius / 2;
+	println(`<g class="statechart__states">`);
+	for (const node of nodes) {
+		const { key, id, text } = node;
+		const { x, y, width, height } = getBoxParams({
+			...node,
+			padding: shift
+		});
+		println(`  <g class="state" data-state-id="${id}">`);
+		if (key === initialStateKey || key === finalStateKey) {
+			const cx = Math.round(x + width / 2);
+			const cy = Math.round(y + height / 2);
+			if (key === initialStateKey) println(`    <circle ${serializeAttrs({
+				class: "state__initial",
+				cx,
+				cy,
+				r: initialStateRadius,
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2"
+			})} />`);
+			else {
+				let serializedAttrs = serializeAttrs({
+					class: "state__final",
+					cx,
+					cy,
+					r: initialStateRadius,
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: 2
+				});
+				println(`    <circle ${serializedAttrs} />`);
+				serializedAttrs = serializeAttrs({
+					class: "state__final state__final--inner",
+					cx,
+					cy,
+					r: finalStateRadius,
+					fill: "currentColor",
+					stroke: "none",
+					strokeWidth: 0
+				});
+				println(`    <circle ${serializedAttrs} />`);
+			}
+		} else {
+			println(`    <rect ${serializeAttrs({
+				x,
+				y,
+				width,
+				height,
+				rx: Math.ceil(stateFontSize / 2),
+				ry: Math.ceil(stateFontSize / 2),
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				class: "state__box"
+			})} />`);
+			println(`    <text ${serializeAttrs({
+				class: "state__label",
+				"text-anchor": "middle",
+				fill: "currentColor",
+				x: Math.round(x + width / 2),
+				y: Math.round(y + height / 2 + stateFontSize / 4)
+			})}>${text}</text>`);
+		}
+		println("  </g>");
+	}
+	println("</g>");
+	println("</svg>");
+}
+//#endregion
+//#region src/html/buildStatechartsPanel.ts
+function buildStatechartsPanel({ statechart, newId, println, initialStateKey = "<initial>", finalStateKey = "<final>" }) {
+	render(statechart, println);
+	function render(statechart, println) {
+		println(`  <details class="state-details" data-state-id="${statechart.id}">`);
+		println(`    <summary class="state-details__label">${statechart.text ?? statechart.state}</summary>`);
+		println(`    <div class="state-details__content">`);
+		const printChildren = (str) => println(`    ${str}`);
+		if (statechart.nodes.length) {
+			println(`      <div class="state-details__chart">`);
+			buildStatechartSvg({
+				graph: statechart,
+				newId,
+				println: printChildren,
+				initialStateKey,
+				finalStateKey
+			});
+			println(`    </div>`);
+		}
+		println(`    <div class="state-details__description">`);
+		println(`    </div>`);
+		for (const child of statechart.children || []) render(child, printChildren);
+		println(`    </div>`);
+		println(`  </details>`);
+	}
+}
+//#endregion
+export { activeTransitionsStyle as a, buildStatechartStyles as c, selectedTransitionsStyle as d, serializeCss as f, activeStatesStyle as i, buildStatechartStylesWithModifier as l, buildStatechartSvg as n, buildStateDetailsStyle as o, toKebabCase as p, buildStatechartCss as r, buildStateDetailsStyleWithModifier as s, buildStatechartsPanel as t, selectedStatesStyle as u };
+
+//# sourceMappingURL=buildStatechartsPanel-BX7e0GzA.js.map

package/dist/buildStatechartsPanel-BX7e0GzA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildStatechartsPanel-BX7e0GzA.js","names":[],"sources":["../src/utils/toKebabCase.ts","../src/utils/serializeCss.ts","../src/html/buildStatechartStyles.ts","../src/html/buildStatechartCss.ts","../src/utils/BasisCurve.ts","../src/utils/serializeAttrs.ts","../src/html/buildStatechartSvg.ts","../src/html/buildStatechartsPanel.ts"],"sourcesContent":["export function toKebabCase(str?: string): string {\n  // Remove spaces:\n  str = (str || \"\").trim().replace(/\\s+/gim, \"-\");\n  // Transform to kebab:\n  str = str.replace(/([^A-Z]?)([A-Z])/g, (_, a, b) => `${a.toLowerCase()}-${b.toLowerCase()}`);\n  return str;\n\n  // return (\n  //   str.match(\n  //     /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g\n  //   ) || []\n  // )\n  //   .join(\"-\")\n  //   .toLowerCase();\n}\n","import { toKebabCase } from \"./toKebabCase.js\";\n\nexport interface CssTree extends Record<string, string | number | CssTree> {}\n\nexport function serializeCss(obj: CssTree) {\n  return visitStyle(obj).join(\"\\n\");\n\n  function visitStyle(obj: CssTree, lines: string[] = [], prefixes: string[] = [\"\"]) {\n    for (const [key, style] of Object.entries(obj)) {\n      const selectors = [];\n      for (const sel of key.split(\",\").map((_) => _.trim())) {\n        for (const prefix of prefixes) {\n          const selector = sel.replace(/^(.)/, (_, ch) =>\n            ch === \"&\" ? prefix : prefix.length > 0 ? `${prefix} ${ch}` : ch,\n          );\n          selectors.push(selector);\n        }\n      }\n      const selectorRules = [];\n      const extensions: string[] = [];\n      for (let [key, value] of Object.entries(style)) {\n        if (typeof value === \"object\") {\n          visitStyle({ [key]: value }, extensions, selectors);\n        } else {\n          key = toKebabCase(key);\n          selectorRules.push(`  ${key}: ${value};`);\n        }\n      }\n      if (selectorRules.length) {\n        lines.push(`${selectors.join(\",\\n\")} {`);\n        lines.push(...selectorRules);\n        lines.push(`}`);\n      }\n      lines.push(...extensions);\n    }\n    return lines;\n  }\n}\n","import type { CssTree } from \"../utils/serializeCss.js\";\n\nexport const activeStatesStyle = {\n  backgroundColor: \"white\",\n  borderColor: \"red\",\n  borderWidth: \"2px\",\n  labelColor: \"red\",\n};\nexport const activeTransitionsStyle = {\n  backgroundColor: \"#eee\",\n  borderColor: \"none\",\n  borderWidth: \"0\",\n  lineColor: \"red\",\n  lineWidth: \"1px\",\n  labelColor: \"red\",\n};\n\nexport const selectedStatesStyle = {\n  backgroundColor: \"white\",\n  borderColor: \"navy\",\n  borderWidth: \"2px\",\n  labelColor: \"navy\",\n};\nexport const selectedTransitionsStyle = {\n  backgroundColor: \"#eee\",\n  borderColor: \"none\",\n  borderWidth: \"0\",\n  lineColor: \"navy\",\n  lineWidth: \"1px\",\n  labelColor: \"navy\",\n};\n\nexport function buildStateDetailsStyle({ root = \":root\" }: { root?: string }): CssTree {\n  return {\n    [root]: {\n      // --------------------------\n      // Panels\n\n      \".state-details\": {\n        backgroundColor: \"var(--state-background-color, white)\",\n        border: \"var(--state-border-width, 1px) solid var(--state-border-color, currentColor)\",\n        borderRadius: \"0.5em\",\n        padding: \"0.5em\",\n      },\n      \".state-details__label\": {\n        cursor: \"pointer\",\n        color: \"var(--transition-label-color, currentColor)\",\n        fontFamily: \"var(--state-label-font-family, sans-serif)\",\n        fontSize: \"var(--state-label-font-size, 14px)\",\n      },\n      \".state-details__content\": {\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"0.5em\",\n      },\n      \".state-details__chart\": {\n        maxWidth: \"100%\",\n        overflow: \"auto\",\n        scrollbarWidth: \"thin\",\n      },\n    },\n  };\n}\n\nexport function buildStateDetailsStyleWithModifier({\n  root = \":root\",\n  modifier,\n  states,\n}: {\n  root?: string;\n  modifier: string;\n  states: Record<string, string>;\n}): CssTree {\n  return {\n    [root]: {\n      //\n      \".state-details\": {\n        [`&.state-details--${modifier}`]: {\n          backgroundColor: `var(--state-${modifier}-background-color, ${states.backgroundColor})`,\n          border: `var(--state-${modifier}-border-width, 1px) solid var(--state-${modifier}-border-color, currentColor)`,\n        },\n      },\n      \".state-details__label\": {\n        [`&.state-details__label--${modifier}`]: {\n          color: `var(--state-${modifier}-label-color)`,\n        },\n      },\n    },\n  };\n}\n\nexport function buildStatechartStylesWithModifier({\n  root = \":root\",\n  modifier,\n  states,\n  transitions,\n}: {\n  root?: string;\n  modifier: string;\n  states: Record<string, string>;\n  transitions: Record<string, string>;\n}): CssTree {\n  return {\n    [root]: {\n      // --------------------------------------\n      // Default values for transitions\n      [`--transition-${modifier}-background-color`]: transitions.backgroundColor,\n      [`--transition-${modifier}-border-color`]: transitions.borderColor,\n      [`--transition-${modifier}-border-width`]: transitions.borderWidth,\n      [`--transition-${modifier}-line-color`]: transitions.lineColor,\n      [`--transition-${modifier}-line-width`]: transitions.lineWidth,\n      [`--transition-${modifier}-label-color`]: transitions.labelColor,\n\n      // --------------------------------------\n      // Default values for states\n      [`--state-${modifier}-background-color`]: states.backgroundColor,\n      [`--state-${modifier}-border-color`]: states.borderColor,\n      [`--state-${modifier}-border-width`]: states.borderWidth,\n      [`--state-${modifier}-label-color`]: states.labelColor,\n\n      \".state\": {\n        [`&.state--${modifier}`]: {\n          \"--state-background-color\": `var(--state-${modifier}-background-color)`,\n          \"--state-border-color\": `var(--state-${modifier}-border-color)`,\n          \"--state-border-width\": `var(--state-${modifier}-border-width)`,\n          \"--state-label-color\": `var(--state-${modifier}-label-color)`,\n        },\n      },\n\n      \".transition\": {\n        [`&.transition--${modifier}`]: {\n          \"--transition-background-color\": `var(--transition-${modifier}-background-color)`,\n          \"--transition-border-color\": `var(--transition-${modifier}-border-color)`,\n          \"--transition-border-width\": `var(--transition-${modifier}-border-width)`,\n          \"--transition-line-color\": `var(--transition-${modifier}-line-color)`,\n          \"--transition-line-width\": `var(--transition-${modifier}-line-width)`,\n          \"--transition-label-color\": `var(--transition-${modifier}-label-color)`,\n        },\n      },\n    },\n  };\n}\n\nexport function buildStatechartStyles({ root = \":root\" }: { root?: string }): CssTree {\n  return {\n    [root]: {\n      // --------------------------------------\n      // Transitions\n      \"--transition-background-color\": \"rgba(255,255,255,0.7)\",\n      \"--transition-border-color\": \"none\",\n      \"--transition-border-width\": \"1px\",\n      \"--transition-line-color\": \"silver\",\n      \"--transition-line-width\": \"1px\",\n      \"--transition-label-color\": \"gray\",\n      \"--transition-label-font-size\": \"12px\",\n      \"--transition-label-font-family\": \"sans-serif\",\n\n      \".transition__marker\": {\n        fill: \"var(--transition-line-color, currentColor)\",\n        stroke: \"none\",\n      },\n      \".transition__line\": {\n        stroke: \"var(--transition-line-color, currentColor)\",\n        strokeWidth: \"var(--transition-line-width, 1px)\",\n      },\n      \".transition__box\": {\n        fill: \"var(--transition-background-color, rgba(255,255,255,0.7))\",\n        stroke: \"var(--transition-border-color, none)\",\n        strokeWidth: \"var(--transition-border-width, 1px)\",\n        borderRadius: \"0.5em\",\n        cursor: \"pointer\",\n      },\n      \".transition__label\": {\n        fill: \"var(--transition-label-color, currentColor)\",\n        fontSize: \"var(--transition-label-font-size, 12px)\",\n        fontFamily: \"var(--transition-label-font-family, sans-serif)\",\n        cursor: \"pointer\",\n      },\n\n      // --------------------------------------\n      // Normal states\n      \"--state-background-color\": \"white\",\n      \"--state-border-color\": \"silver\",\n      \"--state-border-width\": \"1px\",\n      \"--state-label-color\": \"gray\",\n      \"--state-label-font-size\": \"14px\",\n      \"--state-label-font-family\": \"sans-serif\",\n\n      \".state__box\": {\n        fill: \"var(--state-background-color, white)\",\n        stroke: \"var(--state-border-color, currentColor)\",\n        strokeWidth: \"var(--state-border-width, 1px)\",\n        borderRadius: \"0.5em\",\n        cursor: \"pointer\",\n      },\n      \".state__label\": {\n        color: \"var(--state-label-color, currentColor)\",\n        fill: \"var(--state-label-color, currentColor)\",\n        fontSize: \"var(--state-label-font-size, 14px)\",\n        fontFamily: \"var(--state-label-font-family, sans-serif)\",\n        cursor: \"pointer\",\n      },\n      \".state__initial\": {\n        fill: \"var(--state-border-color, currentColor)\",\n        stroke: \"var(--state-border-color, currentColor)\",\n        strokeWidth: \"var(--state-border-width, 2px)\",\n      },\n      \".state__final\": {\n        fill: \"white\",\n        stroke: \"var(--state-border-color, currentColor)\",\n        strokeWidth: \"var(--state-border-width, 2px)\",\n        // ---------------------------\n        \"&.state__final--inner\": {\n          fill: \"var(--state-border-color, currentColor)\",\n          stroke: \"none\",\n          strokeWidth: \"0\",\n        },\n      },\n    },\n  };\n}\n","import { serializeCss } from \"../utils/serializeCss.js\";\nimport {\n  activeStatesStyle,\n  activeTransitionsStyle,\n  buildStatechartStyles,\n  buildStatechartStylesWithModifier,\n  buildStateDetailsStyle,\n  buildStateDetailsStyleWithModifier,\n  selectedStatesStyle,\n  selectedTransitionsStyle,\n} from \"./buildStatechartStyles.js\";\n\nexport function buildStatechartCss({ prefix = \"\" } = {}): string {\n  const root = prefix || \":root\";\n  return [\n    buildStatechartStyles({ root }),\n    buildStatechartStylesWithModifier({\n      root,\n      modifier: \"selected\",\n      states: selectedStatesStyle,\n      transitions: selectedTransitionsStyle,\n    }),\n    buildStatechartStylesWithModifier({\n      root,\n      modifier: \"active\",\n      states: activeStatesStyle,\n      transitions: activeTransitionsStyle,\n    }),\n    buildStateDetailsStyle({ root }),\n    buildStateDetailsStyleWithModifier({\n      root,\n      modifier: \"selected\",\n      states: selectedStatesStyle,\n    }),\n    buildStateDetailsStyleWithModifier({\n      root,\n      modifier: \"active\",\n      states: activeStatesStyle,\n    }),\n  ]\n    .map(serializeCss)\n    .join(\"\\n\");\n}\n","// This file contains the implementation of the BasisCurve class\n// copied from d3-shape/src/curve/basis.ts (Mike Bostock, MIT License)\n\nexport type DrawContext = {\n  bezierCurveTo(x0: number, y0: number, x1: number, y1: number, x2: number, y2: number): void;\n  moveTo(x: number, y: number): void;\n  lineTo(x: number, y: number): void;\n  closePath(): void;\n};\n\nexport class BasisCurve {\n  _context: DrawContext;\n  _x0: number = 0;\n  _y0: number = 0;\n  _x1: number = 0;\n  _y1: number = 0;\n  _point: number = 0;\n  _line: number = 0;\n  constructor(context: DrawContext) {\n    this._context = context;\n  }\n  $point(x: number, y: number) {\n    this._context.bezierCurveTo(\n      (2 * this._x0 + this._x1) / 3,\n      (2 * this._y0 + this._y1) / 3,\n      (this._x0 + 2 * this._x1) / 3,\n      (this._y0 + 2 * this._y1) / 3,\n      (this._x0 + 4 * this._x1 + x) / 6,\n      (this._y0 + 4 * this._y1 + y) / 6,\n    );\n  }\n\n  areaStart() {\n    this._line = 0;\n  }\n\n  areaEnd() {\n    this._line = NaN;\n  }\n\n  lineStart() {\n    this._x0 = this._x1 = this._y0 = this._y1 = NaN;\n    this._point = 0;\n  }\n\n  lineEnd() {\n    switch (this._point) {\n      // biome-ignore lint/suspicious/noFallthroughSwitchClause: deliberate fall-through, as in the d3-shape basis curve this ports\n      case 3:\n        this.$point(this._x1, this._y1); // falls through\n      case 2:\n        this._context.lineTo(this._x1, this._y1);\n        break;\n    }\n    if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();\n    this._line = 1 - this._line;\n  }\n\n  point(x: number, y: number) {\n    (x = +x), (y = +y);\n    switch (this._point) {\n      case 0:\n        this._point = 1;\n        this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);\n        break;\n      case 1:\n        this._point = 2;\n        break;\n      // biome-ignore lint/suspicious/noFallthroughSwitchClause: deliberate fall-through, as in the d3-shape basis curve this ports\n      case 2:\n        this._point = 3;\n        this._context.lineTo((5 * this._x0 + this._x1) / 6, (5 * this._y0 + this._y1) / 6); // falls through\n      default:\n        this.$point(x, y);\n        break;\n    }\n    (this._x0 = this._x1), (this._x1 = x);\n    (this._y0 = this._y1), (this._y1 = y);\n  }\n}\n","import { toKebabCase } from \"./toKebabCase.js\";\n\nexport function serializeAttrs(\n  attrs: Record<string, string | number | undefined> = {},\n  { prefix = \"\", transform = false }: { prefix?: string; transform?: boolean } = {},\n) {\n  const result: string[] = [];\n  for (const [key, value] of Object.entries(attrs || {}).sort(([a], [b]) => (a > b ? 1 : -1))) {\n    if (value === undefined || value === null || value === \"\") continue;\n    result.push(\n      `${prefix}${escapeValue(key)}=${JSON.stringify(escapeValue(transform ? toKebabCase(String(value)) : value))}`,\n    );\n  }\n  return result.join(\" \");\n\n  function escapeValue(value: string | number | undefined): string {\n    return String(value)\n      .replaceAll(/</gim, \"&lt;\")\n      .replaceAll(/>/gim, \"&gt;\")\n      .replaceAll(/\"/gim, \"&quot;\");\n  }\n}\n","import type { Dimensions, Padding, Position, TransitionsGraph } from \"../types/index.js\";\nimport { BasisCurve } from \"../utils/BasisCurve.js\";\nimport { getPadding } from \"../utils/getPadding.js\";\nimport { serializeAttrs } from \"../utils/serializeAttrs.js\";\n\nfunction getBoxParams({\n  x,\n  y,\n  width,\n  height,\n  padding = 0,\n}: Position & Dimensions & { padding?: Padding }) {\n  const [top, right, bottom, left] = getPadding(padding);\n  const h = Math.ceil(height - top - bottom);\n  return {\n    x: x + left,\n    y: y - bottom - h,\n    width: Math.ceil(width - left - right),\n    height: h,\n  };\n}\n\nexport function buildStatechartSvg({\n  graph: { width, height, nodes, edges },\n  newId,\n  stateFontSize = 14,\n  transitionFontSize = 12,\n  println,\n  initialStateKey = \"<initial>\",\n  finalStateKey = \"<final>\",\n}: {\n  graph: TransitionsGraph;\n  newId: (prefix: string) => string;\n  println: (str: string) => void;\n  stateFontSize?: number;\n  transitionFontSize?: number;\n  initialStateKey?: string;\n  finalStateKey?: string;\n}) {\n  if (!nodes.length && !edges.length) return;\n  width = Math.ceil(width);\n  height = Math.ceil(height);\n  println(\n    `<svg ${serializeAttrs({\n      class: \"statechart\",\n      width,\n      height,\n      viewbox: `0 0 ${width} ${height}`,\n      xmlns: \"http://www.w3.org/2000/svg\",\n    })}>`,\n  );\n\n  /*\n  --------------------------------------------------- \n  Transitions visualization\n\n  CSS Classes:\n  .transitions .transition-marker\n  .transitions .transition .transition-line\n  .transitions .transition .transition-box\n  .transitions .transition .transition-label\n   --------------------------------------------------- \n  */\n  println(`<g class=\"statechart__transitions\">`);\n\n  const markerAttrs = serializeAttrs({\n    refX: 19,\n    refY: 7,\n    markerWidth: 20,\n    markerHeight: 14,\n    orient: \"auto\",\n    class: \"transition__marker\",\n    stroke: \"none\",\n    fill: \"currentColor\",\n  });\n\n  for (const edge of edges) {\n    const { id, points, text } = edge;\n    println(`  <g class=\"transition\" data-transition-id=\"${id}\">`);\n    const markerId = newId(\"marker\");\n\n    println(`    <defs>`);\n    println(`      <marker id=\"${markerId}\" ${markerAttrs}>`);\n    println(`        <path d=\"M 19,7 L9,13 L14,7 L9,1 Z\"></path>`);\n    println(`      </marker>`);\n    println(`    </defs>`);\n\n    const path: string[] = [];\n    const round = (...n: number[]) => n.map(Math.round);\n    const base = new BasisCurve({\n      bezierCurveTo(x0: number, y0: number, x1: number, y1: number, x2: number, y2: number) {\n        path.push(`C${round(x0, y0, x1, y1, x2, y2).join(\",\")}`);\n      },\n      moveTo(x: number, y: number) {\n        path.push(`M${round(x, y).join(\",\")}`);\n      },\n      lineTo(x: number, y: number) {\n        path.push(`L${round(x, y).join(\",\")}`);\n      },\n      closePath() {\n        path.push(\"Z\");\n      },\n    });\n    base.lineStart();\n    for (const point of points) {\n      base.point(point.x, point.y);\n    }\n    base.lineEnd();\n\n    const serializedAttrs = serializeAttrs({\n      class: \"transition__line\",\n      fill: \"none\",\n      stroke: \"currentColor\",\n      strokeWidth: \"1px\",\n      d: path.join(\"\"),\n      \"marker-end\": `url(#${markerId})`,\n    });\n    println(`    <path ${serializedAttrs} />`);\n\n    if (text) {\n      const { x, y, width, height } = getBoxParams({\n        ...edge,\n        padding: 0,\n      });\n\n      const rectAttrs = serializeAttrs({\n        x,\n        y: y - transitionFontSize,\n        width,\n        height,\n        rx: Math.ceil(transitionFontSize / 2),\n        ry: Math.ceil(transitionFontSize / 2),\n        fill: \"rgba(255,255,255,0.7)\",\n        stroke: \"none\",\n        strokeWidth: \"1\",\n        class: \"transition__box\",\n      });\n      println(`    <rect ${rectAttrs} />`);\n\n      const textAttrs = serializeAttrs({\n        class: \"transition__label\",\n        \"text-anchor\": \"middle\",\n        fill: \"currentColor\",\n        x: Math.round(x + width / 2),\n        y: Math.round(y + height / 2 - transitionFontSize / 2),\n      });\n      println(`    <text ${textAttrs}>${text}</text>`);\n    }\n    println(`  </g>`);\n  }\n  println(\"</g>\");\n\n  /*\n  --------------------------------------------------- \n  States visualization\n\n  CSS Classes:\n  .states .state\n  .states .state .state-box \n  .states .state .state-initial \n  .states .state .state-final \n  .states .state .state-final.inner \n  .states .state .state-label\n   --------------------------------------------------- \n  */\n\n  const shift = stateFontSize / 4;\n  const initialStateRadius = 6;\n  const finalStateRadius = initialStateRadius / 2;\n\n  println(`<g class=\"statechart__states\">`);\n  for (const node of nodes) {\n    const { key, id, text } = node;\n    const { x, y, width, height } = getBoxParams({ ...node, padding: shift });\n\n    println(`  <g class=\"state\" data-state-id=\"${id}\">`);\n    if (key === initialStateKey || key === finalStateKey) {\n      const cx = Math.round(x + width / 2);\n      const cy = Math.round(y + height / 2);\n      if (key === initialStateKey) {\n        const serializedAttrs = serializeAttrs({\n          class: \"state__initial\",\n          cx,\n          cy,\n          r: initialStateRadius,\n          fill: \"none\",\n          stroke: \"currentColor\",\n          strokeWidth: \"2\",\n        });\n        println(`    <circle ${serializedAttrs} />`);\n      } else {\n        let serializedAttrs = serializeAttrs({\n          class: \"state__final\",\n          cx,\n          cy,\n          r: initialStateRadius,\n          fill: \"none\",\n          stroke: \"currentColor\",\n          strokeWidth: 2,\n        });\n        println(`    <circle ${serializedAttrs} />`);\n\n        serializedAttrs = serializeAttrs({\n          class: \"state__final state__final--inner\",\n          cx,\n          cy,\n          r: finalStateRadius,\n          fill: \"currentColor\",\n          stroke: \"none\",\n          strokeWidth: 0,\n        });\n        println(`    <circle ${serializedAttrs} />`);\n      }\n    } else {\n      const rectAttrs = serializeAttrs({\n        x,\n        y,\n        width,\n        height,\n        rx: Math.ceil(stateFontSize / 2),\n        ry: Math.ceil(stateFontSize / 2),\n        fill: \"none\",\n        stroke: \"currentColor\",\n        strokeWidth: \"2\",\n        class: \"state__box\",\n      });\n      println(`    <rect ${rectAttrs} />`);\n\n      const textAttrs = serializeAttrs({\n        class: \"state__label\",\n        \"text-anchor\": \"middle\",\n        fill: \"currentColor\",\n        x: Math.round(x + width / 2),\n        y: Math.round(y + height / 2 + stateFontSize / 4),\n      });\n      println(`    <text ${textAttrs}>${text}</text>`);\n    }\n    println(\"  </g>\");\n  }\n  println(\"</g>\");\n\n  println(\"</svg>\");\n}\n","import type { StateChart } from \"../types/StateChart.js\";\nimport { buildStatechartSvg } from \"./buildStatechartSvg.js\";\n\nexport function buildStatechartsPanel({\n  statechart,\n  newId,\n  println,\n  initialStateKey = \"<initial>\",\n  finalStateKey = \"<final>\",\n}: {\n  statechart: StateChart;\n  newId: (prefix: string) => string;\n  println: (str: string) => void;\n  initialStateKey?: string;\n  finalStateKey?: string;\n}): void {\n  render(statechart, println);\n\n  function render(statechart: StateChart, println: (str: string) => void) {\n    println(`  <details class=\"state-details\" data-state-id=\"${statechart.id}\">`);\n    println(\n      `    <summary class=\"state-details__label\">${statechart.text ?? statechart.state}</summary>`,\n    );\n    println(`    <div class=\"state-details__content\">`);\n    const printChildren = (str: string) => println(`    ${str}`);\n    if (statechart.nodes.length) {\n      println(`      <div class=\"state-details__chart\">`);\n      buildStatechartSvg({\n        graph: statechart,\n        newId,\n        println: printChildren,\n        initialStateKey,\n        finalStateKey,\n      });\n      println(`    </div>`);\n    }\n    println(`    <div class=\"state-details__description\">`);\n    println(`    </div>`);\n    for (const child of statechart.children || []) {\n      render(child, printChildren);\n    }\n    println(`    </div>`);\n    println(`  </details>`);\n  }\n}\n"],"mappings":"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"}

package/dist/buildStatechartsPanel-hCtZbdiF.d.ts

@@ -0,0 +1,79 @@
+import { n as TransitionsGraph, t as StateChart } from "./StateChart-cXyVRcs-.js";
+//#region src/html/buildStatechartCss.d.ts
+declare function buildStatechartCss({ prefix }?: {
+  prefix?: string | undefined;
+}): string;
+//#endregion
+//#region src/utils/serializeCss.d.ts
+interface CssTree extends Record<string, string | number | CssTree> {}
+declare function serializeCss(obj: CssTree): string;
+//#endregion
+//#region src/html/buildStatechartStyles.d.ts
+declare const activeStatesStyle: {
+  backgroundColor: string;
+  borderColor: string;
+  borderWidth: string;
+  labelColor: string;
+};
+declare const activeTransitionsStyle: {
+  backgroundColor: string;
+  borderColor: string;
+  borderWidth: string;
+  lineColor: string;
+  lineWidth: string;
+  labelColor: string;
+};
+declare const selectedStatesStyle: {
+  backgroundColor: string;
+  borderColor: string;
+  borderWidth: string;
+  labelColor: string;
+};
+declare const selectedTransitionsStyle: {
+  backgroundColor: string;
+  borderColor: string;
+  borderWidth: string;
+  lineColor: string;
+  lineWidth: string;
+  labelColor: string;
+};
+declare function buildStateDetailsStyle({ root }: {
+  root?: string;
+}): CssTree;
+declare function buildStateDetailsStyleWithModifier({ root, modifier, states }: {
+  root?: string;
+  modifier: string;
+  states: Record<string, string>;
+}): CssTree;
+declare function buildStatechartStylesWithModifier({ root, modifier, states, transitions }: {
+  root?: string;
+  modifier: string;
+  states: Record<string, string>;
+  transitions: Record<string, string>;
+}): CssTree;
+declare function buildStatechartStyles({ root }: {
+  root?: string;
+}): CssTree;
+//#endregion
+//#region src/html/buildStatechartSvg.d.ts
+declare function buildStatechartSvg({ graph: { width, height, nodes, edges }, newId, stateFontSize, transitionFontSize, println, initialStateKey, finalStateKey }: {
+  graph: TransitionsGraph;
+  newId: (prefix: string) => string;
+  println: (str: string) => void;
+  stateFontSize?: number;
+  transitionFontSize?: number;
+  initialStateKey?: string;
+  finalStateKey?: string;
+}): void;
+//#endregion
+//#region src/html/buildStatechartsPanel.d.ts
+declare function buildStatechartsPanel({ statechart, newId, println, initialStateKey, finalStateKey }: {
+  statechart: StateChart;
+  newId: (prefix: string) => string;
+  println: (str: string) => void;
+  initialStateKey?: string;
+  finalStateKey?: string;
+}): void;
+//#endregion
+export { buildStateDetailsStyle as a, buildStatechartStylesWithModifier as c, CssTree as d, serializeCss as f, activeTransitionsStyle as i, selectedStatesStyle as l, buildStatechartSvg as n, buildStateDetailsStyleWithModifier as o, buildStatechartCss as p, activeStatesStyle as r, buildStatechartStyles as s, buildStatechartsPanel as t, selectedTransitionsStyle as u };
+//# sourceMappingURL=buildStatechartsPanel-hCtZbdiF.d.ts.map

package/dist/buildStatechartsPanel-hCtZbdiF.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildStatechartsPanel-hCtZbdiF.d.ts","names":[],"sources":["../src/html/buildStatechartCss.ts","../src/utils/serializeCss.ts","../src/html/buildStatechartStyles.ts","../src/html/buildStatechartSvg.ts","../src/html/buildStatechartsPanel.ts"],"mappings":";;iBAYgB,qBAAqB;;;;;UCVpB,gBAAgB,iCAAiC;iBAElD,aAAa,KAAK;;;cCFrB;EACX;EACA;EACA;EACA;;cAEW;EACX;EACA;EACA;EACA;EACA;EACA;;cAGW;EACX;EACA;EACA;EACA;;cAEW;EACX;EACA;EACA;EACA;EACA;EACA;;iBAGc,yBAAyB;EAAoB;IAAkB;iBAgC/D,qCACd,MACA,UACA;EAEA;EACA;EACA,QAAQ;IACN;iBAmBY,oCACd,MACA,UACA,QACA;EAEA;EACA;EACA,QAAQ;EACR,aAAa;IACX;iBA0CY,wBAAwB;EAAoB;IAAkB;;;iBCzH9D,qBACd,SAAS,OAAO,QAAQ,OAAO,SAC/B,OACA,eACA,oBACA,SACA,iBACA;EAEA,OAAO;EACP,QAAQ;EACR,UAAU;EACV;EACA;EACA;EACA;;;;iBClCc,wBACd,YACA,OACA,SACA,iBACA;EAEA,YAAY;EACZ,QAAQ;EACR,UAAU;EACV;EACA"}