@statewalker/fsm-charts 0.0.3 → 0.0.4

package/dist/{chunk-3GGM3ZWL.js → chunk-ASIV3YDZ.js}

@@ -2564,7 +2564,7 @@ function buildCharts({
   finalStateKey = "<final>"
 }) {
   return buildChart(config);
-  function buildChart(config2, id = newId("state")) {
+  function buildChart(config2, id = newId("s")) {
     const graph = buildFlatCharts({
       lodash,
       transitions: config2.transitions,

package/dist/chunk-DX2ZO7QN.js

@@ -0,0 +1,529 @@
+import { getPadding } from './chunk-NXWOFQMO.js';
+
+// src/utils/toKebabCase.ts
+function toKebabCase2(str) {
+  str = str.trim().replace(/\s+/gim, "-");
+  str = str.replace(
+    /([^A-Z]?)([A-Z])/g,
+    (_, a, b) => a.toLowerCase() + "-" + b.toLowerCase()
+  );
+  return str;
+}
+
+// src/utils/serializeCss.ts
+function serializeCss(obj) {
+  return visitStyle(obj).join("\n");
+  function visitStyle(obj2, lines = [], prefixes = [""]) {
+    for (const [key, style] of Object.entries(obj2)) {
+      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 [key2, value] of Object.entries(style)) {
+        if (typeof value === "object") {
+          visitStyle({ [key2]: value }, extensions, selectors);
+        } else {
+          key2 = toKebabCase2(key2);
+          selectorRules.push(`  ${key2}: ${value};`);
+        }
+      }
+      if (selectorRules.length) {
+        lines.push(`${selectors.join(",\n")} {`);
+        lines.push(...selectorRules);
+        lines.push(`}`);
+      }
+      lines.push(...extensions);
+    }
+    return lines;
+  }
+}
+
+// src/svg/buildStatechartStyles.ts
+function buildStateDetailsStyle() {
+  return {
+    ".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__description": {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5em"
+    },
+    ".state-details__chart": {
+      maxWidth: "100%",
+      overflow: "auto",
+      scrollbarWidth: "thin"
+    },
+    //
+    ".state-details--selected": {
+      backgroundColor: "var(--state-selected-background-color, white)",
+      border: "var(--state-selected-border-width, 1px) solid var(--state-selected-border-color, currentColor)"
+    },
+    ".state-details__label--selected": {
+      color: "var(--state-selected-label-color)"
+    }
+  };
+}
+function buildStatechartStyles({
+  root = ":root"
+} = {}) {
+  return {
+    [root]: {
+      // --------------------------------------
+      // Normal states
+      "--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",
+      // Selected states
+      "--state-selected-background-color": "#eee",
+      "--state-selected-border-color": "red",
+      "--state-selected-border-width": "2px",
+      "--state-selected-label-color": "red",
+      // --------------------------------------
+      // Normal transitions
+      "--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",
+      // --------------------------------------
+      // Selected transitions
+      "--transition-selected-background-color": "#eee",
+      "--transition-selected-border-color": "none",
+      "--transition-selected-border-width": "0",
+      "--transition-selected-line-color": "red",
+      "--transition-selected-line-width": "1px",
+      "--transition-selected-label-color": "red",
+      // --------------------------------------
+      // --------------------------------------
+      ...buildStateDetailsStyle(),
+      ".transition": {},
+      ".transition--selected": {
+        "--transition-background-color": "var(--transition-selected-background-color)",
+        "--transition-border-color": "var(--transition-selected-border-color)",
+        "--transition-border-width": "var(--transition-selected-border-width)",
+        "--transition-line-color": "var(--transition-selected-line-color)",
+        "--transition-line-width": "var(--transition-selected-line-width)",
+        "--transition-label-color": "var(--transition-selected-label-color)"
+      },
+      ".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"
+      },
+      ".transition__label": {
+        fill: "var(--transition-label-color, currentColor)",
+        fontSize: "var(--transition-label-font-size, 12px)",
+        fontFamily: "var(--transition-label-font-family, sans-serif)"
+      },
+      // ----------------------------------------------
+      // States
+      ".state": {},
+      ".state--selected": {
+        "--state-background-color": "var(--state-selected-background-color)",
+        "--state-border-color": "var(--state-selected-border-color)",
+        "--state-border-width": "var(--state-selected-border-width)",
+        "--state-label-color": "var(--state-selected-label-color)"
+      },
+      // --------------------------
+      // Panels
+      ".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__description": {
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.5em"
+      },
+      ".state__chart-container": {
+        maxWidth: "100%",
+        overflow: "auto",
+        scrollbarWidth: "thin"
+      },
+      // --------------------------
+      // Statecharts
+      ".state__box": {
+        fill: "var(--state-background-color, white)",
+        stroke: "var(--state-border-color, currentColor)",
+        strokeWidth: "var(--state-border-width, 1px)",
+        borderRadius: "0.5em"
+      },
+      ".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"
+        }
+      }
+    }
+  };
+}
+
+// src/svg/buildStatechartCss.ts
+function buildStatechartCss({ prefix = "" } = {}) {
+  const cssObject = buildStatechartStyles({ root: prefix || ":root" });
+  return serializeCss(cssObject);
+}
+
+// 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(value) : value))}`
+    );
+  }
+  return result.join(" ");
+  function escapeValue(value) {
+    return String(value).replaceAll(/</gim, "&lt;").replaceAll(/>/gim, "&gt;").replaceAll(/"/gim, "&qout;");
+  }
+}
+
+// src/utils/BasisCurve.ts
+var BasisCurve = class {
+  _context;
+  _x0 = 0;
+  _y0 = 0;
+  _x1 = 0;
+  _y1 = 0;
+  _point = 0;
+  _line = 0;
+  constructor(context) {
+    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);
+        break;
+    }
+    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);
+        break;
+    }
+    this._x0 = this._x1, this._x1 = x;
+    this._y0 = this._y1, this._y1 = y;
+  }
+};
+
+// src/svg/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>"
+}) {
+  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, event: 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();
+    const serializedAttrs = serializeAttrs({
+      class: "transition__line",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1px",
+      d: path.join(""),
+      "marker-end": `url(#${markerId})`
+    });
+    println(`    <path ${serializedAttrs} />`);
+    if (text) {
+      const { x, y, width: width2, height: height2 } = getBoxParams({
+        ...edge,
+        padding: 0
+      });
+      const rectAttrs = serializeAttrs({
+        x,
+        y: y - transitionFontSize,
+        width: width2,
+        height: height2,
+        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(`    <rect ${rectAttrs} />`);
+      const textAttrs = serializeAttrs({
+        class: "transition__label",
+        "text-anchor": "middle",
+        fill: "currentColor",
+        x: Math.round(x + width2 / 2),
+        y: Math.round(y + height2 / 2 - transitionFontSize / 2)
+      });
+      println(`    <text ${textAttrs}>${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, state: text } = node;
+    const { x, y, width: width2, height: height2 } = getBoxParams({ ...node, padding: shift });
+    println(`  <g class="state" data-state-id="${id}">`);
+    if (key === initialStateKey || key === finalStateKey) {
+      const cx = Math.round(x + width2 / 2);
+      const cy = Math.round(y + height2 / 2);
+      if (key === initialStateKey) {
+        const serializedAttrs = serializeAttrs({
+          class: "state__initial",
+          cx,
+          cy,
+          r: initialStateRadius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2"
+        });
+        println(`    <circle ${serializedAttrs} />`);
+      } 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 {
+      const rectAttrs = serializeAttrs({
+        x,
+        y,
+        width: width2,
+        height: height2,
+        rx: Math.ceil(stateFontSize / 2),
+        ry: Math.ceil(stateFontSize / 2),
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        class: "state__box"
+      });
+      println(`    <rect ${rectAttrs} />`);
+      const textAttrs = serializeAttrs({
+        class: "state__label",
+        "text-anchor": "middle",
+        fill: "currentColor",
+        x: Math.round(x + width2 / 2),
+        y: Math.round(y + height2 / 2 + stateFontSize / 4)
+      });
+      println(`    <text ${textAttrs}>${text}</text>`);
+    }
+    println("  </g>");
+  }
+  println("</g>");
+  println("</svg>");
+}
+
+// src/svg/buildStatechartsPanel.ts
+function buildStatechartsPanel({
+  statechart,
+  newId,
+  println,
+  initialStateKey = "<initial>",
+  finalStateKey = "<final>"
+}) {
+  render(statechart, println);
+  function render(statechart2, println2) {
+    println2(`  <details class="state-details" data-state-id="${statechart2.id}">`);
+    println2(`    <summary class="state-details__label">${statechart2.key}</summary>`);
+    println2(`    <div class="state-details__description"><div class="state-details__chart">`);
+    const printChildren = (str) => println2(`    ${str}`);
+    buildStatechartSvg({
+      graph: statechart2.graph,
+      newId,
+      println: printChildren,
+      initialStateKey,
+      finalStateKey
+    });
+    println2(`    </div>`);
+    for (const child of statechart2.children || []) {
+      render(child, printChildren);
+    }
+    println2(`    </div>`);
+    println2(`  </details>`);
+  }
+}
+
+export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel, serializeCss, toKebabCase2 as toKebabCase };

package/dist/index-layout.js

@@ -1,2 +1,2 @@
-export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-3GGM3ZWL.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-ASIV3YDZ.js';
 import './chunk-NXWOFQMO.js';

package/dist/index-svg-DW8Cf450.d.ts

@@ -0,0 +1,33 @@
+import { b as StateChart, T as TransitionsGraph } from './StateChart-DNGQd1XG.js';
+
+declare function buildStatechartCss({ prefix }?: {
+    prefix?: string | undefined;
+}): string;
+
+declare function buildStatechartsPanel({ statechart, newId, println, initialStateKey, finalStateKey, }: {
+    statechart: StateChart;
+    newId: (prefix: string) => string;
+    println: (str: string) => void;
+    initialStateKey?: string;
+    finalStateKey?: string;
+}): void;
+
+interface CssTree extends Record<string, string | number | CssTree> {
+}
+declare function serializeCss(obj: CssTree): string;
+
+declare function buildStatechartStyles({ root, }?: {
+    root?: string;
+}): CssTree;
+
+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;
+
+export { type CssTree as C, buildStatechartsPanel as a, buildStatechartCss as b, buildStatechartStyles as c, buildStatechartSvg as d, serializeCss as s };

package/dist/index-svg.d.ts

@@ -1,25 +1,2 @@
-import { b as StateChart, T as TransitionsGraph } from './StateChart-DNGQd1XG.js';
-
-declare function buildStatechartCss({ prefix }?: {
-    prefix?: string | undefined;
-}): string;
-
-declare function buildStatechartsPanel({ statechart, newId, println, initialStateKey, finalStateKey, }: {
-    statechart: StateChart;
-    newId: (prefix: string) => string;
-    println: (str: string) => void;
-    initialStateKey?: string;
-    finalStateKey?: string;
-}): void;
-
-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;
-
-export { buildStatechartCss, buildStatechartSvg, buildStatechartsPanel };
+export { b as buildStatechartCss, c as buildStatechartStyles, d as buildStatechartSvg, a as buildStatechartsPanel } from './index-svg-DW8Cf450.js';
+import './StateChart-DNGQd1XG.js';

package/dist/index-svg.js

@@ -1,2 +1,2 @@
-export { buildStatechartCss, buildStatechartSvg, buildStatechartsPanel } from './chunk-TPNWHU7Y.js';
+export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel } from './chunk-DX2ZO7QN.js';
 import './chunk-NXWOFQMO.js';

package/dist/index.d.ts

@@ -1,3 +1,7 @@
 export { GraphParamsProvider, Padding, Transition, buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './index-layout.js';
 export { D as Dimensions, P as Position, S as StateGraphEdge, a as StateGraphNode, T as TransitionsGraph } from './StateChart-DNGQd1XG.js';
-export { buildStatechartCss, buildStatechartSvg, buildStatechartsPanel } from './index-svg.js';
+export { C as CssTree, b as buildStatechartCss, c as buildStatechartStyles, d as buildStatechartSvg, a as buildStatechartsPanel, s as serializeCss } from './index-svg-DW8Cf450.js';
+
+declare function toKebabCase(str: string): string;
+
+export { toKebabCase };

package/dist/index.js

@@ -1,3 +1,3 @@
-export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-3GGM3ZWL.js';
-export { buildStatechartCss, buildStatechartSvg, buildStatechartsPanel } from './chunk-TPNWHU7Y.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-ASIV3YDZ.js';
+export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel, serializeCss, toKebabCase } from './chunk-DX2ZO7QN.js';
 import './chunk-NXWOFQMO.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statewalker/fsm-charts",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "HFSM Implementation",
   "keywords": [],
   "homepage": "https://github.com/statewalker/statewalker-fsm-charts",
@@ -44,8 +44,8 @@
     "url": "git@github.com:statewalker/statewalker-fsm-charts.git"
   },
   "scripts": {
-    "build_": "yarn test && tsup",
-    "build": "tsup",
+    "build": "rm -fr ./dist && yarn test && tsup",
+    "prepare": "yarn build",
     "watch": "tsup --watch",
     "clean": "rm -rf dist",
     "lint": "eslint",

package/dist/chunk-TPNWHU7Y.js

@@ -1,437 +0,0 @@
-import { getPadding } from './chunk-NXWOFQMO.js';
-
-// src/svg/buildStatechartCss.ts
-function buildStatechartCss({ prefix = "" } = {}) {
-  return `
-    --state--fill: white;
-    --state--stroke-color: silver;
-    --state--stroke-width: 1px;
-
-    --state-initial--fill: var(--state--stroke-color, silver);
-    --state-initial--stroke-color: var(--state--stroke-color, none);
-    --state-initial--stroke-width: var(--state--stroke-width, 0);
-
-    --state-final--fill: var(--state--fill, white);
-    --state-final--stroke-color: var(--state--stroke-color, silver);
-    --state-final--stroke-width: var(--state--stroke-width, 1px);
-
-    --state-label--color: gray;
-    --state-label--font-size: 14px;
-    --state-label--font-family: sans-serif;
-
-    --transition--fill: rgba(255,255,255,0.7);
-    --transition--stroke-color: none;
-    --transition--stroke-width: 1;
-
-    --transition-line--stroke-color: silver;
-    --transition-line--stroke-width: 1px;
-
-    --transition-label--color: gray;
-    --transition-label--font-size: 12px;
-    --transition-label--font-family: sans-serif;
-
-    --transition-marker--fill: var(--transition-line--stroke-color, gray);
-    
-  .state-details {
-    
-  }
-  
-  .state-details  {
-    background-color: var(--state--fill, white);
-    border: var(--state--stroke-width, 1px) solid var(--state--stroke-color, silver);
-    border-radius: 0.5em;
-    padding: 0.5em;
-  }
-
-  .state-details .state-label {
-    cursor: pointer;
-    color: var(--transition-label--color, gray);
-    font-family: var(--state-label--font-family, sans-serif);
-    font-size: var(--state-label--font-size, 14px);
-  }
-  .state-details .state-description {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5em;
-  }
-  .state-details .state-chart-container {
-    max-width: 100%;
-    overflow: auto;
-    scrollbar-width: thin;
-  }
-
-  .state-details  .statechart {
-
-  }
-
-  .state-details  .statechart .transition-marker {
-    fill : var(--transition-marker--fill, silver);
-  }
-
-  .state-details  .statechart .transitions {
-  }
-
-  .state-details  .statechart .transitions .transition .transition-line {
-    stroke: var(--transition-line--stroke-color, silver);
-    stroke-width: var(--transition-line--stroke-width, 1px);
-  }
-
-  .state-details  .statechart .transitions .transition .transition-box {
-    fill: var(--transition--fill, rgba(255,255,255,0.7));
-    stroke: var(--transition--stroke-color, none);
-    stroke-width: var(--transition--stroke-width, 1);
-    border-radius: 0.5em;
-  }
-
-  .state-details  .statechart .transitions .transition .transition-label {
-    fill: var(--transition-label--color, gray);
-    font-size: var(--transition-label--font-size, 12px);
-    font-family: var(--transition-label--font-family, sans-serif);
-  }
-
-  /* ------------------------------------------ */
-  .state-details  .statechart .states .state {
-  }
-  .state-details  .statechart .states .state .state-box {
-    fill: var(--state--fill, white);
-    stroke: var(--state--stroke-color, silver);
-    stroke-width: var(--state--stroke-width, 1px);
-    border-radius: 0.5em;
-  }
-  .state-details  .statechart .states .state .state-initial {
-    fill: var(--state-initial--fill, gray);
-    stroke: var(--state-initial--stroke-color, none); 
-    stroke-width: var(--state-initial--stroke-width, 0);
-  }
-  .state-details  .statechart .states .state .state-final {
-    fill: var(--state-final--fill, white);
-    stroke: var(--state-final--stroke-color, silver);
-    stroke-width: var(--state-final--stroke-width, 2);
-  }
-  .state-details  .statechart .states .state .state-final.inner {
-    fill: var(--state-final--stroke-color, silver);
-    stroke: none;
-    stroke-width: 0;
-  }
-  .state-details  .statechart .states .state .state-label {
-    fill: var(--state-label--color, gray);
-    font-size: var(--state-label--font-size, 14px);
-    font-family: var(--state-label--font-family, sans-serif);
-  }
-
-  `;
-}
-
-// 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(value) : value))}`
-    );
-  }
-  return result.join(" ");
-  function escapeValue(value) {
-    return String(value).replaceAll(/</gim, "&lt;").replaceAll(/>/gim, "&gt;").replaceAll(/"/gim, "&qout;");
-  }
-}
-
-// src/utils/BasisCurve.ts
-var BasisCurve = class {
-  _context;
-  _x0 = 0;
-  _y0 = 0;
-  _x1 = 0;
-  _y1 = 0;
-  _point = 0;
-  _line = 0;
-  constructor(context) {
-    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);
-        break;
-    }
-    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);
-        break;
-    }
-    this._x0 = this._x1, this._x1 = x;
-    this._y0 = this._y1, this._y1 = y;
-  }
-};
-
-// src/svg/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>"
-}) {
-  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="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, event: 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();
-    const serializedAttrs = serializeAttrs({
-      class: "transition-line",
-      "transition-id": id,
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1px",
-      d: path.join(""),
-      "marker-end": `url(#${markerId})`
-    });
-    println(`    <path ${serializedAttrs} />`);
-    if (text) {
-      const { x, y, width: width2, height: height2 } = getBoxParams({
-        ...edge,
-        padding: 0
-      });
-      const rectAttrs = serializeAttrs({
-        x,
-        y: y - transitionFontSize,
-        width: width2,
-        height: height2,
-        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(`    <rect ${rectAttrs} />`);
-      const textAttrs = serializeAttrs({
-        class: "transition-label",
-        "text-anchor": "middle",
-        fill: "currentColor",
-        x: Math.round(x + width2 / 2),
-        y: Math.round(y + height2 / 2 - transitionFontSize / 2)
-      });
-      println(`    <text ${textAttrs}>${text}</text>`);
-    }
-    println(`  </g>`);
-  }
-  println("</g>");
-  const shift = stateFontSize / 4;
-  const initialStateRadius = 6;
-  const finalStateRadius = initialStateRadius / 2;
-  println(`<g class="states">`);
-  for (const node of nodes) {
-    const { key, id, state: text } = node;
-    const { x, y, width: width2, height: height2 } = getBoxParams({ ...node, padding: shift });
-    println(`  <g class="state" data-state-id="${id}">`);
-    if (key === initialStateKey || key === finalStateKey) {
-      const cx = Math.round(x + width2 / 2);
-      const cy = Math.round(y + height2 / 2);
-      if (key === initialStateKey) {
-        const serializedAttrs = serializeAttrs({
-          class: "state-initial",
-          cx,
-          cy,
-          r: initialStateRadius,
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2"
-        });
-        println(`    <circle ${serializedAttrs} />`);
-      } 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 inner",
-          cx,
-          cy,
-          r: finalStateRadius,
-          fill: "currentColor",
-          stroke: "none",
-          strokeWidth: 0
-        });
-        println(`    <circle ${serializedAttrs} />`);
-      }
-    } else {
-      const rectAttrs = serializeAttrs({
-        x,
-        y,
-        width: width2,
-        height: height2,
-        rx: Math.ceil(stateFontSize / 2),
-        ry: Math.ceil(stateFontSize / 2),
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        class: "state-box"
-      });
-      println(`    <rect ${rectAttrs} />`);
-      const textAttrs = serializeAttrs({
-        class: "state-label",
-        "text-anchor": "middle",
-        fill: "currentColor",
-        x: Math.round(x + width2 / 2),
-        y: Math.round(y + height2 / 2 + stateFontSize / 4),
-        "data-state-id": id
-      });
-      println(`    <text ${textAttrs}>${text}</text>`);
-    }
-    println("  </g>");
-  }
-  println("</g>");
-  println("</svg>");
-}
-
-// src/svg/buildStatechartsPanel.ts
-function buildStatechartsPanel({
-  statechart,
-  newId,
-  println,
-  initialStateKey = "<initial>",
-  finalStateKey = "<final>"
-}) {
-  render(statechart, println);
-  function render(statechart2, println2) {
-    println2(`<details class="state-details" data-state-id="${statechart2.id}">`);
-    println2(`  <summary class="state-label">${statechart2.key}</summary>`);
-    println2(`  <div class="state-description"><div class="state-chart-container">`);
-    const printChildren = (str) => println2(`    ${str}`);
-    buildStatechartSvg({
-      graph: statechart2.graph,
-      newId,
-      println: printChildren,
-      initialStateKey,
-      finalStateKey
-    });
-    println2(`  </div>`);
-    for (const child of statechart2.children || []) {
-      render(child, printChildren);
-    }
-    println2(`  </div>`);
-    println2(`</details>`);
-  }
-}
-
-export { buildStatechartCss, buildStatechartSvg, buildStatechartsPanel };