@statewalker/fsm-charts 0.1.9 → 0.1.12

package/dist/{StateChart-DlcWaRml.d.ts → StateChart-CdOU9XAq.d.ts}

@@ -19,12 +19,19 @@ type FsmStateConfig = {
     states?: FsmStateConfig[];
 } & Record<string, any>;
 
+/**
+ * Human-readable label
+ */
+type Label = {
+    text: string;
+};
+
 /**
  * Provides default functions measuring dimensions for state nodes and transition edges in the graph.
  */
 type GraphParamsProvider = {
-    getStateParams: (stateKey: string, state?: string) => Dimensions & Record<string, any>;
-    getTransitionParams: (fromStateKey: string, event: string, toStateKey: string) => Dimensions & Record<string, any>;
+    getStateParams: (stateKey: string, state?: string) => Dimensions & Label & Record<string, any>;
+    getTransitionParams: (fromStateKey: string, event: string, toStateKey: string) => Dimensions & Label & Record<string, any>;
 };
 
 /**
@@ -72,4 +79,4 @@ type StateChart = TransitionsGraph & StateGraphNode & {
     children?: StateChart[];
 } & Record<string, any>;
 
-export type { Dimensions as D, FsmStateConfig as F, GraphParamsProvider as G, Padding as P, StateChart as S, Transition as T, Position as a, StateGraphEdge as b, StateGraphNode as c, TransitionsGraph as d };
+export type { Dimensions as D, FsmStateConfig as F, GraphParamsProvider as G, Label as L, Padding as P, StateChart as S, Transition as T, Position as a, StateGraphEdge as b, StateGraphNode as c, TransitionsGraph as d };

package/dist/{chunk-TZRPE2VD.js → chunk-AVTSJE25.js}

@@ -19,7 +19,8 @@ function getStateDescriptionRenderer({
   const rootStateFilter = getStateDescriptionFilter(splitHeader, rootStateKey);
   const rootDescription = findSection(docSections, rootStateFilter);
   if (!rootDescription) {
-    return () => {
+    return (statesStack) => {
+      return void 0;
     };
   }
   for (const node of visitSectionNodes(rootDescription)) {
@@ -56,9 +57,12 @@ function getStateDescriptionRenderer({
   }
 }
 function* visitDom(elm) {
+  if (isDomElement(elm) && elm.tagName === "TEMPLATE") {
+    elm = elm.content;
+  }
   for (let node = elm.firstChild; node; node = node.nextSibling) {
     if (isDomElement(node)) {
-      if (node.tagName === "DIV") {
+      if (node.tagName === "DIV" || node.tagName === "TEMPLATE") {
         yield* visitDom(node);
       } else {
         yield node;

package/dist/{chunk-2XPO6T2M.js → chunk-GCVBCAOL.js}

@@ -338,6 +338,7 @@ var BasisCurve = class {
     switch (this._point) {
       case 3:
         this.$point(this._x1, this._y1);
+      // falls through
       case 2:
         this._context.lineTo(this._x1, this._y1);
         break;
@@ -362,6 +363,7 @@ var BasisCurve = class {
           (5 * this._x0 + this._x1) / 6,
           (5 * this._y0 + this._y1) / 6
         );
+      // falls through
       default:
         this.$point(x, y);
         break;
@@ -420,7 +422,7 @@ function buildStatechartSvg({
     fill: "currentColor"
   });
   for (const edge of edges) {
-    const { id, points, event: text } = edge;
+    const { id, points, text } = edge;
     println(`  <g class="transition" data-transition-id="${id}">`);
     const markerId = newId("marker");
     println(`    <defs>`);
@@ -493,7 +495,7 @@ function buildStatechartSvg({
   const finalStateRadius = initialStateRadius / 2;
   println(`<g class="statechart__states">`);
   for (const node of nodes) {
-    const { key, id, state: text } = node;
+    const { key, id, 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) {

package/dist/{chunk-U5LUJ7JS.js → chunk-GNTY7KMJ.js}

@@ -1008,6 +1008,15 @@ function shiftRanks(t, g, delta) {
   });
 }
 
+// src/graphlib/alg/dijkstra.js
+_.constant(1);
+
+// src/graphlib/alg/floyd-warshall.js
+_.constant(1);
+function CycleException() {
+}
+CycleException.prototype = new Error();
+
 // src/graphlib/alg/dfs.js
 function dfs(g, vs, order2) {
   if (!_.isArray(vs)) {
@@ -2570,37 +2579,62 @@ function buildCharts({
   direction
 }) {
   return buildChart(config);
-  function buildChart(config2, id = newId("s")) {
-    const graph = buildFlatCharts({
-      lodash,
-      transitions: config2.transitions || [],
-      newId,
-      getStateParams,
-      getTransitionParams,
-      padding,
-      initialStateKey,
-      finalStateKey,
-      vertical,
-      direction
-    });
-    const index = graph.nodes.reduce((index2, node) => {
-      index2[node.key] = node.id;
-      return index2;
-    }, {});
-    const children = [];
-    if (config2.states) {
-      for (const child of config2.states) {
-        const childId = index[child.key];
-        children.push(buildChart(child, childId));
+  function buildChart(config2, id = newId("s"), stack = []) {
+    stack.push(config2);
+    try {
+      const getStateLabel = (state, key = state) => {
+        if (key === "<initial>" || key === "<final>") {
+          return "";
+        }
+        let result;
+        for (let i = stack.length - 1; result === void 0 && i >= 0; i--) {
+          const conf = stack[i];
+          console.log("WT", state, key, "=>", conf);
+          if (conf.key !== state) continue;
+          result = conf.label;
+        }
+        return result === void 0 ? state : result;
+      };
+      const graph = buildFlatCharts({
+        lodash,
+        transitions: config2.transitions || [],
+        newId,
+        getStateParams: (state, key) => {
+          const params = getStateParams(state, key);
+          params.text = getStateLabel(state, key);
+          return params;
+        },
+        getTransitionParams,
+        padding,
+        initialStateKey,
+        finalStateKey,
+        vertical,
+        direction
+      });
+      const index = graph.nodes.reduce(
+        (index2, node) => {
+          index2[node.key] = node.id;
+          return index2;
+        },
+        {}
+      );
+      const children = [];
+      if (config2.states) {
+        for (const child of config2.states) {
+          const childId = index[child.key];
+          children.push(buildChart(child, childId));
+        }
       }
+      return {
+        id,
+        key: config2.key,
+        state: config2.key,
+        ...graph,
+        children
+      };
+    } finally {
+      stack.pop();
     }
-    return {
-      id,
-      key: config2.key,
-      state: config2.key,
-      ...graph,
-      children
-    };
   }
 }
 
@@ -2655,18 +2689,22 @@ function getGraphParamsProvider({
   stateFontSize = fontSize,
   stateTextPadding = 0,
   transitionsFontSize = fontSize,
-  transitionsTextPadding = 0
+  transitionsTextPadding = 0,
+  getStateLabel = (state) => state,
+  getTransitionLabel = (fromState, event, toState) => event
 } = {}) {
   return {
     getStateParams: (stateKey, state = stateKey) => {
       const padding = getPadding(stateTextPadding);
       const fontSize2 = stateFontSize;
+      const stateLabel = getStateLabel(state);
       return {
-        ...getLabelDimensions(state, {
+        ...getLabelDimensions(stateLabel, {
           padding,
           fontSize: fontSize2
         }),
         state,
+        text: stateLabel,
         key: stateKey,
         padding,
         fontSize: fontSize2
@@ -2675,14 +2713,16 @@ function getGraphParamsProvider({
     getTransitionParams: (fromStateKey, event, toStateKey) => {
       const padding = getPadding(transitionsTextPadding);
       const fontSize2 = transitionsFontSize;
+      const eventLabel = getTransitionLabel(fromStateKey, event, toStateKey);
       return {
-        ...getLabelDimensions(event, {
+        ...getLabelDimensions(eventLabel, {
           padding,
           fontSize: fontSize2
         }),
         from: fromStateKey,
         event,
         to: toStateKey,
+        text: eventLabel,
         padding,
         fontSize: fontSize2
       };

package/dist/index-config.d.ts

@@ -1,5 +1,5 @@
-import { T as Transition, F as FsmStateConfig } from './StateChart-DlcWaRml.js';
-export { D as Dimensions, G as GraphParamsProvider, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, d as TransitionsGraph } from './StateChart-DlcWaRml.js';
+import { T as Transition, F as FsmStateConfig } from './StateChart-CdOU9XAq.js';
+export { D as Dimensions, G as GraphParamsProvider, L as Label, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, d as TransitionsGraph } from './StateChart-CdOU9XAq.js';
 
 declare function concatTransitionsToString(transitions: Transition[]): string[];
 

package/dist/index-config.js

@@ -1 +1 @@
-export { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig } from './chunk-SLWDNGWK.js';
+export { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig } from './chunk-SVKVQY7B.js';

package/dist/index-dom.d.ts

@@ -6,8 +6,8 @@ type DomSection = {
 declare function getStateDescriptionRenderer({ element, rootStateKey, splitHeader, }: {
     element: HTMLElement;
     rootStateKey: string;
-    splitHeader: (header?: HTMLElement) => [stateKey: undefined | string, label: string];
-}): (() => void) | ((statesStack: string[]) => HTMLDivElement | undefined);
+    splitHeader?: (header?: HTMLElement) => [stateKey: undefined | string, label: string];
+}): (statesStack: string[]) => HTMLDivElement | undefined;
 declare function visitDom(elm: Node): Iterable<Node>;
 declare function visitSectionNodes(section: DomSection): Iterable<Node>;
 declare function vistSections(root: DomSection, ignoreRoot?: boolean): Generator<DomSection>;

package/dist/index-dom.js

@@ -1 +1 @@
-export { buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './chunk-TZRPE2VD.js';
+export { buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './chunk-AVTSJE25.js';

package/dist/{index-html-De8e33ol.d.ts → index-html-BKMwwc5Q.d.ts}

@@ -1,4 +1,4 @@
-import { S as StateChart, d as TransitionsGraph } from './StateChart-DlcWaRml.js';
+import { S as StateChart, d as TransitionsGraph } from './StateChart-CdOU9XAq.js';
 
 declare function buildStatechartCss({ prefix }?: {
     prefix?: string | undefined;

package/dist/index-html.d.ts

@@ -1,2 +1,2 @@
-export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, T as Transition, d as TransitionsGraph } from './StateChart-DlcWaRml.js';
-export { c as activeStatesStyle, d as activeTransitionsStyle, f as buildStateDetailsStyle, g as buildStateDetailsStyleWithModifier, b as buildStatechartCss, i as buildStatechartStyles, h as buildStatechartStylesWithModifier, j as buildStatechartSvg, a as buildStatechartsPanel, s as selectedStatesStyle, e as selectedTransitionsStyle } from './index-html-De8e33ol.js';
+export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, L as Label, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, T as Transition, d as TransitionsGraph } from './StateChart-CdOU9XAq.js';
+export { c as activeStatesStyle, d as activeTransitionsStyle, f as buildStateDetailsStyle, g as buildStateDetailsStyleWithModifier, b as buildStatechartCss, i as buildStatechartStyles, h as buildStatechartStylesWithModifier, j as buildStatechartSvg, a as buildStatechartsPanel, s as selectedStatesStyle, e as selectedTransitionsStyle } from './index-html-BKMwwc5Q.js';

package/dist/index-html.js

@@ -1,2 +1,2 @@
-export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle } from './chunk-2XPO6T2M.js';
+export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle } from './chunk-GCVBCAOL.js';
 import './chunk-FIQDLBWD.js';

package/dist/index-layout.d.ts

@@ -1,5 +1,5 @@
-import { T as Transition, P as Padding, G as GraphParamsProvider, d as TransitionsGraph, F as FsmStateConfig, S as StateChart } from './StateChart-DlcWaRml.js';
-export { D as Dimensions, a as Position, b as StateGraphEdge, c as StateGraphNode } from './StateChart-DlcWaRml.js';
+import { T as Transition, P as Padding, G as GraphParamsProvider, d as TransitionsGraph, F as FsmStateConfig, S as StateChart } from './StateChart-CdOU9XAq.js';
+export { D as Dimensions, L as Label, a as Position, b as StateGraphEdge, c as StateGraphNode } from './StateChart-CdOU9XAq.js';
 
 /**
  * Build graphs corresponding to the specified transitions.
@@ -52,12 +52,14 @@ declare function buildCharts({ lodash, config, newId, getStateParams, getTransit
  * @param transitionsFontSize - The font size for the transition labels.
  * @param transitionsTextPadding - The padding around the transition labels.
  */
-declare function getGraphParamsProvider({ fontSize, stateFontSize, stateTextPadding, transitionsFontSize, transitionsTextPadding, }?: {
+declare function getGraphParamsProvider({ fontSize, stateFontSize, stateTextPadding, transitionsFontSize, transitionsTextPadding, getStateLabel, getTransitionLabel, }?: {
     fontSize?: number;
     stateFontSize?: number;
     stateTextPadding?: Padding;
     transitionsFontSize?: number;
     transitionsTextPadding?: Padding;
+    getStateLabel?: (state: string) => string;
+    getTransitionLabel?: (fromState: string, event: string, toState: string) => string;
 }): GraphParamsProvider;
 
 declare function getLabelDimensions(label: string, { padding, fontSize, getCharWidth, // Golden ratio and all that jazz :-)

package/dist/index-layout.js

@@ -1,2 +1,2 @@
-export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-U5LUJ7JS.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-GNTY7KMJ.js';
 import './chunk-FIQDLBWD.js';

package/dist/index-runtime.d.ts

@@ -1,5 +1,5 @@
-import { S as StateChart, c as StateGraphNode, b as StateGraphEdge } from './StateChart-DlcWaRml.js';
-export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, P as Padding, a as Position, T as Transition, d as TransitionsGraph } from './StateChart-DlcWaRml.js';
+import { S as StateChart, c as StateGraphNode, b as StateGraphEdge } from './StateChart-CdOU9XAq.js';
+export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, L as Label, P as Padding, a as Position, T as Transition, d as TransitionsGraph } from './StateChart-CdOU9XAq.js';
 
 type RuntimeListener = (id: string) => void;
 declare class RuntimeStatechartApi {

package/dist/index-runtime.js

@@ -1 +1 @@
-export { RuntimeStatechartApi, StateChartIndex } from './chunk-FS3L6FBI.js';
+export { RuntimeStatechartApi, StateChartIndex } from './chunk-N77KKO5K.js';

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, T as Transition, d as TransitionsGraph } from './StateChart-DlcWaRml.js';
+export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, L as Label, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, T as Transition, d as TransitionsGraph } from './StateChart-CdOU9XAq.js';
 export { DomSection, buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './index-dom.js';
 export { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig } from './index-config.js';
 export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './index-layout.js';
-export { C as CssTree, c as activeStatesStyle, d as activeTransitionsStyle, f as buildStateDetailsStyle, g as buildStateDetailsStyleWithModifier, b as buildStatechartCss, i as buildStatechartStyles, h as buildStatechartStylesWithModifier, j as buildStatechartSvg, a as buildStatechartsPanel, s as selectedStatesStyle, e as selectedTransitionsStyle, k as serializeCss } from './index-html-De8e33ol.js';
+export { C as CssTree, c as activeStatesStyle, d as activeTransitionsStyle, f as buildStateDetailsStyle, g as buildStateDetailsStyleWithModifier, b as buildStatechartCss, i as buildStatechartStyles, h as buildStatechartStylesWithModifier, j as buildStatechartSvg, a as buildStatechartsPanel, s as selectedStatesStyle, e as selectedTransitionsStyle, k as serializeCss } from './index-html-BKMwwc5Q.js';
 export { RuntimeListener, RuntimeStatechartApi, StateChartIndex } from './index-runtime.js';
 
 declare function toKebabCase(str?: string): string;

package/dist/index.js

@@ -1,6 +1,6 @@
-export { buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './chunk-TZRPE2VD.js';
-export { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig } from './chunk-SLWDNGWK.js';
-export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-U5LUJ7JS.js';
-export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase } from './chunk-2XPO6T2M.js';
+export { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig } from './chunk-SVKVQY7B.js';
+export { buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './chunk-AVTSJE25.js';
+export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase } from './chunk-GCVBCAOL.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-GNTY7KMJ.js';
 import './chunk-FIQDLBWD.js';
-export { RuntimeStatechartApi, StateChartIndex } from './chunk-FS3L6FBI.js';
+export { RuntimeStatechartApi, StateChartIndex } from './chunk-N77KKO5K.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statewalker/fsm-charts",
-  "version": "0.1.9",
+  "version": "0.1.12",
   "description": "HFSM Implementation",
   "keywords": [],
   "homepage": "https://github.com/statewalker/statewalker-fsm-charts",
@@ -14,6 +14,7 @@
     "dist",
     "src"
   ],
+  "source": "./src/index.ts",
   "module": "./dist/index.js",
   "main": "./dist/index.js",
   "jsdelivr": "./dist/index.js",
@@ -21,14 +22,10 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.js"
-    },
-    "./src": {
-      "import": "./src"
-    },
-    "./src/index.ts": {
-      "import": "./src/index.ts"
+      "default": "./dist/index.js"
     }
   },
   "devDependencies": {
@@ -60,9 +57,9 @@
     "lint": "eslint",
     "lint:fix": "yarn lint -- --fix",
     "test": "vitest --run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "prepublish": "yarn build"
   },
-  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   }

package/src/dom/index.ts

@@ -24,7 +24,7 @@ export function getStateDescriptionRenderer({
 }: {
   element: HTMLElement;
   rootStateKey: string;
-  splitHeader: (
+  splitHeader?: (
     header?: HTMLElement,
   ) => [stateKey: undefined | string, label: string];
 }) {
@@ -33,7 +33,9 @@ export function getStateDescriptionRenderer({
   const rootDescription = findSection(docSections, rootStateFilter);
 
   if (!rootDescription) {
-    return () => {};
+    return (statesStack: string[]) => {
+      return undefined;
+    };
   }
 
   // Remove description nodes from DOM
@@ -88,9 +90,12 @@ export function getStateDescriptionRenderer({
 }
 
 export function* visitDom(elm: Node): Iterable<Node> {
+  if (isDomElement(elm) && elm.tagName === "TEMPLATE") {
+    elm = (elm as HTMLTemplateElement).content;
+  }
   for (let node = elm.firstChild; node; node = node.nextSibling) {
     if (isDomElement(node)) {
-      if (node.tagName === "DIV") {
+      if (node.tagName === "DIV" || node.tagName === "TEMPLATE") {
         yield* visitDom(node);
       } else {
         yield node;

package/src/html/buildStatechartSvg.ts

@@ -51,7 +51,7 @@ export function buildStatechartSvg({
       height,
       viewbox: `0 0 ${width} ${height}`,
       xmlns: "http://www.w3.org/2000/svg",
-    })}>`
+    })}>`,
   );
 
   /*
@@ -79,7 +79,7 @@ export function buildStatechartSvg({
   });
 
   for (const edge of edges) {
-    const { id, points, event: text } = edge;
+    const { id, points, text } = edge;
     println(`  <g class="transition" data-transition-id="${id}">`);
     const markerId = newId("marker");
 
@@ -98,7 +98,7 @@ export function buildStatechartSvg({
         x1: number,
         y1: number,
         x2: number,
-        y2: number
+        y2: number,
       ) {
         path.push("C" + round(x0, y0, x1, y1, x2, y2).join(","));
       },
@@ -181,7 +181,7 @@ export function buildStatechartSvg({
 
   println(`<g class="statechart__states">`);
   for (const node of nodes) {
-    const { key, id, state: text } = node;
+    const { key, id, text } = node;
     const { x, y, width, height } = getBoxParams({ ...node, padding: shift });
 
     println(`  <g class="state" data-state-id="${id}">`);

package/src/layout/buildCharts.ts

@@ -39,38 +39,66 @@ export function buildCharts({
 
   function buildChart(
     config: FsmStateConfig,
-    id: string = newId("s")
+    id: string = newId("s"),
+    stack: Array<FsmStateConfig> = [],
   ): StateChart {
-    const graph = buildFlatCharts({
-      lodash,
-      transitions: config.transitions || [],
-      newId,
-      getStateParams,
-      getTransitionParams,
-      padding,
-      initialStateKey,
-      finalStateKey,
-      vertical,
-      direction
-    });
-    const index = graph.nodes.reduce((index, node) => {
-      index[node.key as string] = node.id as string;
-      return index;
-    }, {} as Record<string, string>);
+    stack.push(config);
+    try {
+      const getStateLabel = (state: string, key: string = state) => {
+        if (key === "<initial>" || key === "<final>") {
+          return "";
+        }
+        // TODO: search labels in sub-states of the current state.
+        let result: string | undefined;
+        for (let i = stack.length - 1; result === undefined && i >= 0; i--) {
+          const conf = stack[i];
+          console.log('WT', state, key, '=>', conf)
+          if (conf.key !== state) continue;
+          result = conf.label;
+        }
 
-    const children: StateChart[] = [];
-    if (config.states) {
-      for (const child of config.states) {
-        const childId = index[child.key];
-        children.push(buildChart(child, childId));
+        return result === undefined ? state : result;
+      };
+      const graph = buildFlatCharts({
+        lodash,
+        transitions: config.transitions || [],
+        newId,
+        getStateParams: (state: string, key?: string) => {
+          const params = getStateParams(state, key);
+          params.text = getStateLabel(state, key);
+          return params;
+        },
+        getTransitionParams,
+        padding,
+        initialStateKey,
+        finalStateKey,
+        vertical,
+        direction,
+      });
+      const index = graph.nodes.reduce(
+        (index, node) => {
+          index[node.key as string] = node.id as string;
+          return index;
+        },
+        {} as Record<string, string>,
+      );
+
+      const children: StateChart[] = [];
+      if (config.states) {
+        for (const child of config.states) {
+          const childId = index[child.key];
+          children.push(buildChart(child, childId));
+        }
       }
+      return {
+        id,
+        key: config.key,
+        state: config.key,
+        ...graph,
+        children,
+      };
+    } finally {
+      stack.pop();
     }
-    return {
-      id,
-      key: config.key,
-      state: config.key,
-      ...graph,
-      children,
-    };
   }
 }

package/src/layout/getGraphParamsProvider.ts

@@ -4,6 +4,7 @@ import type { Padding } from "../types/Padding.ts";
 
 import { getLabelDimensions } from "./getLabelDimensions.ts";
 import { getPadding } from "../utils/getPadding.ts";
+import { Label } from "../types/Label.ts";
 
 /**
  * Provides default functions measuring dimensions for state nodes and transition edges in the graph.
@@ -19,23 +20,34 @@ export function getGraphParamsProvider({
   stateTextPadding = 0,
   transitionsFontSize = fontSize,
   transitionsTextPadding = 0,
+  getStateLabel = (state: string) => state,
+  getTransitionLabel = (fromState: string, event: string, toState: string) =>
+    event,
 }: {
   fontSize?: number;
   stateFontSize?: number;
   stateTextPadding?: Padding;
   transitionsFontSize?: number;
   transitionsTextPadding?: Padding;
+  getStateLabel?: (state: string) => string;
+  getTransitionLabel?: (
+    fromState: string,
+    event: string,
+    toState: string,
+  ) => string;
 } = {}): GraphParamsProvider {
   return {
     getStateParams: (stateKey: string, state: string = stateKey) => {
       const padding = getPadding(stateTextPadding);
       const fontSize = stateFontSize;
+      const stateLabel = getStateLabel(state);
       return {
-        ...getLabelDimensions(state, {
+        ...getLabelDimensions(stateLabel, {
           padding,
           fontSize,
         }),
         state,
+        text: stateLabel,
         key: stateKey,
         padding,
         fontSize,
@@ -44,18 +56,20 @@ export function getGraphParamsProvider({
     getTransitionParams: (
       fromStateKey: string,
       event: string,
-      toStateKey: string
-    ): Dimensions & Record<string, any> => {
+      toStateKey: string,
+    ) => {
       const padding = getPadding(transitionsTextPadding);
       const fontSize = transitionsFontSize;
+      const eventLabel = getTransitionLabel(fromStateKey, event, toStateKey);
       return {
-        ...getLabelDimensions(event, {
+        ...getLabelDimensions(eventLabel, {
           padding,
           fontSize,
         }),
         from: fromStateKey,
         event,
         to: toStateKey,
+        text: eventLabel,
         padding,
         fontSize,
       };

package/src/types/GraphParamsProvider.ts

@@ -1,4 +1,5 @@
 import type { Dimensions } from "./Dimensions.ts";
+import { Label } from "./Label.ts";
 
 /**
  * Provides default functions measuring dimensions for state nodes and transition edges in the graph.
@@ -6,12 +7,11 @@ import type { Dimensions } from "./Dimensions.ts";
 export type GraphParamsProvider = {
   getStateParams: (
     stateKey: string,
-    state?: string
-  ) => Dimensions & Record<string, any>;
+    state?: string,
+  ) => Dimensions & Label & Record<string, any>;
   getTransitionParams: (
     fromStateKey: string,
     event: string,
-    toStateKey: string
-  ) => Dimensions & Record<string, any>;
+    toStateKey: string,
+  ) => Dimensions & Label & Record<string, any>;
 };
-

package/src/types/Label.ts

@@ -0,0 +1,7 @@
+/**
+ * Human-readable label
+ */
+export type Label = {
+  // The text of the label
+  text: string;
+};

package/src/types/index.ts

@@ -1,6 +1,7 @@
 export type * from "./Dimensions.ts";
 export type * from "./FsmStateConfig.ts";
 export type * from "./GraphParamsProvider.ts";
+export type * from "./Label.ts";
 export type * from "./Padding.ts";
 export type * from "./Position.ts";
 export type * from "./StateChart.ts";