@statewalker/fsm-charts 0.1.11 → 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-2OGGKHD6.js → chunk-AVTSJE25.js}

@@ -57,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-SURKRLPB.js → chunk-GCVBCAOL.js}

@@ -422,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>`);
@@ -495,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-HQZXOJPG.js → chunk-GNTY7KMJ.js}

@@ -2579,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
-    };
   }
 }
 
@@ -2664,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
@@ -2684,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-dom.js

@@ -1 +1 @@
-export { buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './chunk-2OGGKHD6.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-SURKRLPB.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-HQZXOJPG.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.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 { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig } from './chunk-SVKVQY7B.js';
-export { buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './chunk-2OGGKHD6.js';
-export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase } from './chunk-SURKRLPB.js';
-export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-HQZXOJPG.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-N77KKO5K.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statewalker/fsm-charts",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "HFSM Implementation",
   "keywords": [],
   "homepage": "https://github.com/statewalker/statewalker-fsm-charts",

package/src/dom/index.ts

@@ -90,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";