@statewalker/fsm-charts 0.1.13 → 0.2.1

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

@@ -53,7 +53,7 @@ type Position = {
 type StateGraphNode = Dimensions & Position & {
     id: string;
     key: string;
-    state: string;
+    text: string;
 } & Record<string, any>;
 
 /**

package/dist/{chunk-NWCC4WSF.js → chunk-AZBRQNTU.js}

@@ -2571,6 +2571,7 @@ function buildCharts({
   config,
   newId,
   getStateParams,
+  getStateLabel = (stateKey) => stateKey.replace(/([a-z])([A-Z])/g, "$1 $2"),
   getTransitionParams,
   padding = [5, 5],
   vertical = false,
@@ -2579,37 +2580,67 @@ 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 buildStateLabel = (state, key = state) => {
+        if (key === initialStateKey || key === finalStateKey) {
+          return "";
+        }
+        let result;
+        for (let i = stack.length - 1; result === void 0 && i >= 0; i--) {
+          const conf = stack[i];
+          if (!conf.states) continue;
+          for (const subState of conf.states) {
+            if (subState.key !== state) continue;
+            result = subState.label ?? getStateLabel(state);
+            break;
+          }
+        }
+        return result ?? getStateLabel(state) ?? state;
+      };
+      const graph = buildFlatCharts({
+        lodash,
+        transitions: config2.transitions || [],
+        newId,
+        getStateParams: (state, key) => {
+          const params = getStateParams(state, key);
+          delete params.state;
+          params.text = buildStateLabel(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 text = config2.label ?? getStateLabel(config2.key) ?? config2.key;
+      const children = [];
+      if (config2.states) {
+        for (const child of config2.states) {
+          const childId = index[child.key];
+          children.push(buildChart(child, childId, [...stack]));
+        }
       }
+      return {
+        id,
+        key: config2.key,
+        // state,
+        text,
+        ...graph,
+        children
+      };
+    } finally {
     }
-    return {
-      id,
-      key: config2.key,
-      state: config2.key,
-      ...graph,
-      children
-    };
   }
 }
 

package/dist/{chunk-GCVBCAOL.js → chunk-G25OZI4I.js}

@@ -94,7 +94,7 @@ function buildStateDetailsStyle({
         fontFamily: "var(--state-label-font-family, sans-serif)",
         fontSize: "var(--state-label-font-size, 14px)"
       },
-      ".state-details__description": {
+      ".state-details__content": {
         display: "flex",
         flexDirection: "column",
         gap: "0.5em"
@@ -577,10 +577,13 @@ function buildStatechartsPanel({
       `  <details class="state-details" data-state-id="${statechart2.id}">`
     );
     println2(
-      `    <summary class="state-details__label">${statechart2.key}</summary>`
+      `    <summary class="state-details__label">${statechart2.text ?? statechart2.state}</summary>`
     );
     println2(
-      `    <div class="state-details__description"><div class="state-details__chart">`
+      `    <div class="state-details__content">`
+    );
+    println2(
+      `      <div class="state-details__chart">`
     );
     const printChildren = (str) => println2(`    ${str}`);
     buildStatechartSvg({
@@ -591,6 +594,10 @@ function buildStatechartsPanel({
       finalStateKey
     });
     println2(`    </div>`);
+    println2(
+      `    <div class="state-details__description">`
+    );
+    println2(`    </div>`);
     for (const child of statechart2.children || []) {
       render(child, printChildren);
     }

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

@@ -1,3 +1,81 @@
+// src/dom/newTreeBuilder.ts
+function newTreeBuilder(context) {
+  let level = -1;
+  return (newLevel, ...params) => {
+    while (level >= 0 && level >= newLevel) {
+      context.exit(level--, ...params);
+    }
+    while (level < newLevel) {
+      context.enter(++level, ...params);
+    }
+  };
+}
+
+// src/dom/buildSections.ts
+function buildSections(root) {
+  const nodes = toDomNodesIterator(root);
+  let top = null;
+  let peek = null;
+  const stack = [];
+  const aligner = newTreeBuilder({
+    enter(level, header) {
+      const section = {
+        header,
+        content: [],
+        children: []
+      };
+      top = top || section;
+      peek && peek.children.push(section);
+      peek = section;
+      stack.push(section);
+    },
+    exit() {
+      stack.pop();
+      peek = stack[stack.length - 1];
+    }
+  });
+  aligner(0);
+  let currentHeaderLevel = 0;
+  let currentLevel = 0;
+  for (const node of nodes) {
+    if (isDomElement(node)) {
+      if (/^H[1-6]$/i.test(node.tagName)) {
+        const headerLevel = +node.tagName.replace(/^H/, "");
+        currentLevel = headerLevel > currentHeaderLevel ? currentLevel + 1 : headerLevel < currentHeaderLevel ? currentLevel - 1 : currentLevel;
+        currentHeaderLevel = headerLevel;
+        aligner(currentLevel, node);
+      } else {
+        peek.content.push(node);
+      }
+    } else {
+      peek.content.push(node);
+    }
+  }
+  return top.content.length === 0 && top.children.length === 1 && !top.header ? top.children[0] : top;
+}
+function isDomElement(node) {
+  return node.nodeType === Node.ELEMENT_NODE;
+}
+function* toDomNodesIterator(root) {
+  yield* root instanceof Node ? visitDom(root) : root;
+}
+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" || node.tagName === "TEMPLATE") {
+        yield* visitDom(node);
+      } else {
+        yield node;
+      }
+    } else {
+      yield node;
+    }
+  }
+}
+
 // src/dom/index.ts
 function getStateDescriptionRenderer({
   element,
@@ -56,22 +134,6 @@ 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" || node.tagName === "TEMPLATE") {
-        yield* visitDom(node);
-      } else {
-        yield node;
-      }
-    } else {
-      yield node;
-    }
-  }
-}
 function* visitSectionNodes(section) {
   if (section.header) yield section.header;
   yield* section.content;
@@ -90,64 +152,6 @@ function findSection(section, accept) {
     if (accept(s) === true) return s;
   }
 }
-function isDomElement(node) {
-  return node.nodeType === Node.ELEMENT_NODE;
-}
-function newAligner(context) {
-  let level = -1;
-  return (newLevel, ...params) => {
-    while (level >= 0 && level >= newLevel) {
-      context.exit(level--, ...params);
-    }
-    while (level < newLevel) {
-      context.enter(++level, ...params);
-    }
-  };
-}
-function* toDomNodesIterator(root) {
-  yield* root instanceof Node ? visitDom(root) : root;
-}
-function buildSections(root) {
-  const nodes = toDomNodesIterator(root);
-  let top = null;
-  let peek = null;
-  const stack = [];
-  const aligner = newAligner({
-    enter(level, header) {
-      const section = {
-        header,
-        content: [],
-        children: []
-      };
-      top = top || section;
-      peek && peek.children.push(section);
-      peek = section;
-      stack.push(section);
-    },
-    exit() {
-      stack.pop();
-      peek = stack[stack.length - 1];
-    }
-  });
-  aligner(0);
-  let currentHeaderLevel = 0;
-  let currentLevel = 0;
-  for (const node of nodes) {
-    if (isDomElement(node)) {
-      if (/^H[1-6]$/i.test(node.tagName)) {
-        const headerLevel = +node.tagName.replace(/^H/, "");
-        currentLevel = headerLevel > currentHeaderLevel ? currentLevel + 1 : headerLevel < currentHeaderLevel ? currentLevel - 1 : currentLevel;
-        currentHeaderLevel = headerLevel;
-        aligner(currentLevel, node);
-      } else {
-        peek.content.push(node);
-      }
-    } else {
-      peek.content.push(node);
-    }
-  }
-  return top.content.length === 0 && top.children.length === 1 && !top.header ? top.children[0] : top;
-}
 function renderSections({
   section,
   deep = (s) => true,
@@ -208,4 +212,4 @@ function renderSections({
   }
 }
 
-export { buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections };
+export { findSection, getStateDescriptionRenderer, renderSections, visitSectionNodes, vistSections };

package/dist/{chunk-N77KKO5K.js → chunk-TZHCBZVP.js}

@@ -55,14 +55,26 @@ var RuntimeStatechartApi = class {
       this.selectState(id);
     }
   }
-  // toggleStatePanel(stateId) {
-  //   const elm = this.element.querySelector(
-  //     `details[data-state-id="${stateId}"]`
-  //   );
-  //   if (elm) {
-  //     elm.open = !elm.open;
-  //   }
-  // }
+  focusStates(...stateIds) {
+    for (let i = 0; i < stateIds.length; i++) {
+      const stateId = stateIds[i];
+      for (const tagName of ["details", "g"]) {
+        const elm = this.element.querySelector(
+          `${tagName}[data-state-id="${stateId}"]`
+        );
+        elm?.scrollIntoView();
+      }
+    }
+  }
+  setStateDescription(stateId, description) {
+    const descriptionContainer = this.element.querySelector(
+      `details[data-state-id="${stateId}"] .state-details__description`
+    );
+    if (descriptionContainer) {
+      descriptionContainer.innerHTML = "";
+      descriptionContainer.append(description ?? "");
+    }
+  }
   closeStatePanel(stateId) {
     this._setStatePanelStatus(`details[data-state-id="${stateId}"]`, false);
   }
@@ -209,13 +221,19 @@ var RuntimeStatechartApi = class {
 
 // src/runtime/StateChartIndex.ts
 var StateChartIndex = class {
-  constructor({ statechart }) {
+  constructor({
+    statechart,
+    initialStateKey = "<initial>",
+    finalStateKey = "<final>"
+  }) {
     this._chartsIndex = {};
     this._nodesIndex = {};
     this._nodesParentsIndex = {};
     this._edgeIndex = {};
     this._edgesParentsIndex = {};
     this.statechart = statechart;
+    this.initialStateKey = initialStateKey;
+    this.finalStateKey = finalStateKey;
     this._buildIndexes();
   }
   /**
@@ -242,6 +260,28 @@ var StateChartIndex = class {
   getEdgeById(id) {
     return this._edgeIndex[id];
   }
+  /**
+   * Returns a list of all nodes in this chart.
+   * @return a list of all nodes
+   */
+  getAllNodes() {
+    return [
+      .../* @__PURE__ */ new Set([
+        ...Object.values(this._chartsIndex),
+        ...Object.values(this._nodesIndex)
+      ])
+    ];
+  }
+  /**
+   * Returns a list of all non-empty state nodes in this chart.
+   * The result excludes nodes for initial and fina states.
+   * @return a list of all non-empty state nodes
+   */
+  getStateNodes() {
+    return this.getAllNodes().filter(
+      (node) => node.key !== this.initialStateKey && node.key !== this.finalStateKey
+    );
+  }
   /**
    * Transforms a stack of state keys to the corresponding identifiers.
    * If a key in the stack was not found then this method returns

package/dist/index-config.d.ts

@@ -1,5 +1,5 @@
-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';
+import { T as Transition, F as FsmStateConfig } from './StateChart-BYBjTmC2.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-BYBjTmC2.js';
 
 declare function concatTransitionsToString(transitions: Transition[]): string[];
 

package/dist/index-dom.d.ts

@@ -3,20 +3,19 @@ type DomSection = {
     content: Node[];
     children: DomSection[];
 };
+
 declare function getStateDescriptionRenderer({ element, rootStateKey, splitHeader, }: {
     element: HTMLElement;
     rootStateKey: string;
     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>;
 declare function findSection(section: DomSection, accept: (section: DomSection) => boolean): DomSection | undefined;
-declare function buildSections(root: HTMLElement | Iterable<Node>): DomSection;
 declare function renderSections({ section, deep, header, }: {
     section: DomSection;
     deep?: (s: DomSection) => boolean;
     header?: (header: HTMLElement) => undefined | string | HTMLElement;
 }): HTMLDivElement;
 
-export { type DomSection, buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections };
+export { findSection, getStateDescriptionRenderer, renderSections, visitSectionNodes, vistSections };

package/dist/index-dom.js

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

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

@@ -1,4 +1,4 @@
-import { S as StateChart, d as TransitionsGraph } from './StateChart-CdOU9XAq.js';
+import { S as StateChart, d as TransitionsGraph } from './StateChart-BYBjTmC2.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, 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';
+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-BYBjTmC2.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-DgSCNHkR.js';

package/dist/index-html.js

@@ -1,2 +1,2 @@
-export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle } from './chunk-GCVBCAOL.js';
+export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle } from './chunk-G25OZI4I.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-CdOU9XAq.js';
-export { D as Dimensions, L as Label, a as Position, b as StateGraphEdge, c as StateGraphNode } from './StateChart-CdOU9XAq.js';
+import { T as Transition, P as Padding, G as GraphParamsProvider, d as TransitionsGraph, F as FsmStateConfig, S as StateChart } from './StateChart-BYBjTmC2.js';
+export { D as Dimensions, L as Label, a as Position, b as StateGraphEdge, c as StateGraphNode } from './StateChart-BYBjTmC2.js';
 
 /**
  * Build graphs corresponding to the specified transitions.
@@ -33,7 +33,7 @@ declare function buildFlatCharts({ lodash, transitions, newId, getStateParams, g
  * @param finalStateKey - The key for the final state.
  * @returns {StateChart} - The graph with nodes and edges.
  */
-declare function buildCharts({ lodash, config, newId, getStateParams, getTransitionParams, padding, vertical, initialStateKey, finalStateKey, direction, }: {
+declare function buildCharts({ lodash, config, newId, getStateParams, getStateLabel, getTransitionParams, padding, vertical, initialStateKey, finalStateKey, direction, }: {
     config: FsmStateConfig;
     lodash: any;
     newId: (prefix: string) => string;
@@ -42,6 +42,7 @@ declare function buildCharts({ lodash, config, newId, getStateParams, getTransit
     padding?: Padding;
     vertical?: boolean;
     direction?: "tb" | "bt" | "lr" | "rl";
+    getStateLabel?: (stateKey: string) => string | undefined;
 } & GraphParamsProvider): StateChart;
 
 /**

package/dist/index-layout.js

@@ -1,2 +1,2 @@
-export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-NWCC4WSF.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-AZBRQNTU.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-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';
+import { S as StateChart, c as StateGraphNode, b as StateGraphEdge } from './StateChart-BYBjTmC2.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-BYBjTmC2.js';
 
 type RuntimeListener = (id: string) => void;
 declare class RuntimeStatechartApi {
@@ -21,6 +21,8 @@ declare class RuntimeStatechartApi {
     isStatePanelOpen(stateId: string): boolean;
     toggleState(...stateIds: string[]): boolean;
     activateStates(...stateIds: string[]): void;
+    focusStates(...stateIds: string[]): void;
+    setStateDescription(stateId: string, description: HTMLElement | string | undefined): void;
     closeStatePanel(stateId: string): void;
     openStatePanel(stateId: string): void;
     deselectTransitions(modifier?: string): void;
@@ -50,8 +52,12 @@ declare class StateChartIndex {
     _nodesParentsIndex: Record<string, string>;
     _edgeIndex: Record<string, StateGraphEdge>;
     _edgesParentsIndex: Record<string, string>;
-    constructor({ statechart }: {
+    initialStateKey: string;
+    finalStateKey: string;
+    constructor({ statechart, initialStateKey, finalStateKey, }: {
         statechart: StateChart;
+        initialStateKey?: string;
+        finalStateKey?: string;
     });
     /**
      * Returns a state node or a chart by the specified identifier.
@@ -71,6 +77,17 @@ declare class StateChartIndex {
      * @returns a graph edge
      */
     getEdgeById(id: string): StateGraphEdge | undefined;
+    /**
+     * Returns a list of all nodes in this chart.
+     * @return a list of all nodes
+     */
+    getAllNodes(): StateGraphNode[];
+    /**
+     * Returns a list of all non-empty state nodes in this chart.
+     * The result excludes nodes for initial and fina states.
+     * @return a list of all non-empty state nodes
+     */
+    getStateNodes(): StateGraphNode[];
     /**
      * Transforms a stack of state keys to the corresponding identifiers.
      * If a key in the stack was not found then this method returns

package/dist/index-runtime.js

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

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-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 { 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-BYBjTmC2.js';
+export { findSection, getStateDescriptionRenderer, renderSections, 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-BKMwwc5Q.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-DgSCNHkR.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-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-NWCC4WSF.js';
+export { findSection, getStateDescriptionRenderer, renderSections, visitSectionNodes, vistSections } from './chunk-LRMTXZ55.js';
+export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase } from './chunk-G25OZI4I.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-AZBRQNTU.js';
 import './chunk-FIQDLBWD.js';
-export { RuntimeStatechartApi, StateChartIndex } from './chunk-N77KKO5K.js';
+export { RuntimeStatechartApi, StateChartIndex } from './chunk-TZHCBZVP.js';

package/package.json

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

package/src/dom/buildSections.ts

@@ -0,0 +1,86 @@
+import { newTreeBuilder } from "./newTreeBuilder.js";
+
+export type DomSection = {
+  header?: HTMLElement;
+  content: Node[];
+  children: DomSection[];
+};
+
+export function buildSections(root: HTMLElement | Iterable<Node>): DomSection {
+  const nodes = toDomNodesIterator(root);
+  let top: DomSection = null!;
+  let peek: DomSection = null!;
+  const stack: DomSection[] = [];
+  const aligner = newTreeBuilder<[HTMLElement?]>({
+    enter(level, header) {
+      const section: DomSection = {
+        header,
+        content: [],
+        children: [],
+      };
+      top = top || section;
+      peek && peek.children.push(section);
+      peek = section;
+      stack.push(section);
+    },
+    exit() {
+      stack.pop();
+      peek = stack[stack.length - 1];
+    },
+  });
+  aligner(0);
+  let currentHeaderLevel = 0;
+  let currentLevel = 0;
+  for (const node of nodes) {
+    if (isDomElement(node)) {
+      if (/^H[1-6]$/i.test(node.tagName)) {
+        const headerLevel = +node.tagName.replace(/^H/, "");
+        currentLevel =
+          headerLevel > currentHeaderLevel
+            ? currentLevel + 1
+            : headerLevel < currentHeaderLevel
+              ? currentLevel - 1
+              : currentLevel;
+        currentHeaderLevel = headerLevel;
+        aligner(currentLevel, node);
+      } else {
+        peek.content.push(node);
+      }
+    } else {
+      peek.content.push(node);
+    }
+  }
+  return top.content.length === 0 && top.children.length === 1 && !top.header
+    ? top.children[0]
+    : top;
+}
+
+// --------------------------------------------
+// DOM Iterator utilities
+
+export function isDomElement(node: Node): node is HTMLElement {
+  return node.nodeType === Node.ELEMENT_NODE;
+}
+
+export function* toDomNodesIterator(
+  root: Node | Iterable<Node>,
+): Iterable<Node> {
+  yield* root instanceof Node ? visitDom(root) : root;
+}
+
+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" || node.tagName === "TEMPLATE") {
+        yield* visitDom(node);
+      } else {
+        yield node;
+      }
+    } else {
+      yield node;
+    }
+  }
+}

package/src/dom/index.ts

@@ -1,8 +1,4 @@
-export type DomSection = {
-  header?: HTMLElement;
-  content: Node[];
-  children: DomSection[];
-};
+import { buildSections, DomSection } from "./buildSections.js";
 
 export function getStateDescriptionRenderer({
   element,
@@ -43,17 +39,6 @@ export function getStateDescriptionRenderer({
     if (node.nodeName[0] === "#") continue;
     node.parentElement?.removeChild(node);
   }
-  //   for (const section of vistSections(rootDescription)) {
-  //     const [key, label] = splitHeader(section.header);
-  //     console.log("??????", section.header?.innerText, key);
-  //     if (!key) continue;
-
-  //     section.header?.remove();
-  //     for (const node of section.content) {
-  //       if (node.nodeName[0] === "#") continue;
-  //       node.parentElement?.removeChild(node);
-  //     }
-  //   }
 
   return (statesStack: string[]) => {
     const stateKey = [...statesStack].pop();
@@ -89,23 +74,6 @@ 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" || node.tagName === "TEMPLATE") {
-        yield* visitDom(node);
-      } else {
-        yield node;
-      }
-    } else {
-      yield node;
-    }
-  }
-}
-
 export function* visitSectionNodes(section: DomSection): Iterable<Node> {
   if (section.header) yield section.header;
   yield* section.content;
@@ -133,78 +101,6 @@ export function findSection(
   }
 }
 
-function isDomElement(node: Node): node is HTMLElement {
-  return node.nodeType === Node.ELEMENT_NODE;
-}
-
-function newAligner<T extends unknown[] = []>(context: {
-  enter: (level: number, ...params: T) => void;
-  exit: (level: number, ...params: T) => void;
-}) {
-  let level = -1;
-  return (newLevel: number, ...params: T) => {
-    while (level >= 0 && level >= newLevel) {
-      context.exit(level--, ...params);
-    }
-    while (level < newLevel) {
-      context.enter(++level, ...params);
-    }
-  };
-}
-
-function* toDomNodesIterator(root: Node | Iterable<Node>): Iterable<Node> {
-  yield* root instanceof Node ? visitDom(root) : root;
-}
-
-export function buildSections(root: HTMLElement | Iterable<Node>): DomSection {
-  const nodes = toDomNodesIterator(root);
-  let top: DomSection = null!;
-  let peek: DomSection = null!;
-  const stack: DomSection[] = [];
-  const aligner = newAligner<[HTMLElement?]>({
-    enter(level, header) {
-      const section: DomSection = {
-        header,
-        content: [],
-        children: [],
-      };
-      top = top || section;
-      peek && peek.children.push(section);
-      peek = section;
-      stack.push(section);
-    },
-    exit() {
-      stack.pop();
-      peek = stack[stack.length - 1];
-    },
-  });
-  aligner(0);
-  let currentHeaderLevel = 0;
-  let currentLevel = 0;
-  for (const node of nodes) {
-    if (isDomElement(node)) {
-      if (/^H[1-6]$/i.test(node.tagName)) {
-        const headerLevel = +node.tagName.replace(/^H/, "");
-        currentLevel =
-          headerLevel > currentHeaderLevel
-            ? currentLevel + 1
-            : headerLevel < currentHeaderLevel
-              ? currentLevel - 1
-              : currentLevel;
-        currentHeaderLevel = headerLevel;
-        aligner(currentLevel, node);
-      } else {
-        peek.content.push(node);
-      }
-    } else {
-      peek.content.push(node);
-    }
-  }
-  return top.content.length === 0 && top.children.length === 1 && !top.header
-    ? top.children[0]
-    : top;
-}
-
 export function renderSections({
   section,
   deep = (s) => true,

package/src/dom/newTreeBuilder.ts

@@ -0,0 +1,14 @@
+export function newTreeBuilder<T extends unknown[] = []>(context: {
+  enter: (level: number, ...params: T) => void;
+  exit: (level: number, ...params: T) => void;
+}) {
+  let level = -1;
+  return (newLevel: number, ...params: T) => {
+    while (level >= 0 && level >= newLevel) {
+      context.exit(level--, ...params);
+    }
+    while (level < newLevel) {
+      context.enter(++level, ...params);
+    }
+  };
+}

package/src/full/toFsmStateCharts.ts

@@ -95,6 +95,7 @@ ${css}
           transitions.forEach((t) => api.selectTransition(t.id));
         }
       }
+      api.focusStates(...nodeIds);
     })
   );
 

package/src/html/buildStatechartStyles.ts

@@ -53,7 +53,7 @@ export function buildStateDetailsStyle({
         fontFamily: "var(--state-label-font-family, sans-serif)",
         fontSize: "var(--state-label-font-size, 14px)",
       },
-      ".state-details__description": {
+      ".state-details__content": {
         display: "flex",
         flexDirection: "column",
         gap: "0.5em",

package/src/html/buildStatechartsPanel.ts

@@ -21,10 +21,13 @@ export function buildStatechartsPanel({
       `  <details class="state-details" data-state-id="${statechart.id}">`
     );
     println(
-      `    <summary class="state-details__label">${statechart.key}</summary>`
+      `    <summary class="state-details__label">${statechart.text ?? statechart.state}</summary>`
     );
     println(
-      `    <div class="state-details__description"><div class="state-details__chart">`
+      `    <div class="state-details__content">`
+    );
+    println(
+      `      <div class="state-details__chart">`
     );
     const printChildren = (str: string) => println(`    ${str}`);
     buildStatechartSvg({
@@ -35,6 +38,10 @@ export function buildStatechartsPanel({
       finalStateKey,
     });
     println(`    </div>`);
+    println(
+      `    <div class="state-details__description">`
+    );
+    println(`    </div>`);
     for (const child of statechart.children || []) {
       render(child, printChildren);
     }

package/src/layout/buildCharts.ts

@@ -19,6 +19,8 @@ export function buildCharts({
   config,
   newId,
   getStateParams,
+  getStateLabel = (stateKey: string) =>
+    stateKey.replace(/([a-z])([A-Z])/g, "$1 $2"),
   getTransitionParams,
   padding = [5, 5],
   vertical = false,
@@ -34,43 +36,81 @@ export function buildCharts({
   padding?: Padding;
   vertical?: boolean;
   direction?: "tb" | "bt" | "lr" | "rl";
+  getStateLabel?: (stateKey: string) => string | undefined;
 } & GraphParamsProvider): StateChart {
   return buildChart(config);
 
   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);
 
-    const children: StateChart[] = [];
-    if (config.states) {
-      for (const child of config.states) {
-        const childId = index[child.key];
-        children.push(buildChart(child, childId));
+    try {
+      const buildStateLabel = (state: string, key: string = state) => {
+        if (key === initialStateKey || key === finalStateKey) {
+          return "";
+        }
+
+        let result: string | undefined;
+        for (let i = stack.length - 1; result === undefined && i >= 0; i--) {
+          const conf = stack[i];
+          if (!conf.states) continue;
+          for (const subState of conf.states) {
+            if (subState.key !== state) continue;
+            result = subState.label ?? getStateLabel(state);
+            break;
+          }
+        }
+
+        return result ?? getStateLabel(state) ?? state;
+      };
+      const graph = buildFlatCharts({
+        lodash,
+        transitions: config.transitions || [],
+        newId,
+        getStateParams: (state: string, key?: string) => {
+          const params = getStateParams(state, key);
+          delete params.state;
+          params.text = buildStateLabel(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 text = config.label ?? getStateLabel(config.key) ?? config.key;
+
+      const children: StateChart[] = [];
+      if (config.states) {
+        for (const child of config.states) {
+          const childId = index[child.key];
+          children.push(buildChart(child, childId, [...stack]));
+        }
       }
+
+      // const state = text;
+      return {
+        id,
+        key: config.key,
+        // state,
+        text,
+        ...graph,
+        children,
+      };
+    } finally {
+      // stack.pop();
     }
-    return {
-      id,
-      key: config.key,
-      state: config.key,
-      ...graph,
-      children,
-    };
   }
 }

package/src/runtime/RuntimeStatechartApi.ts

@@ -43,7 +43,7 @@ export class RuntimeStatechartApi {
   }
   isStatePanelOpen(stateId: string) {
     const elm = this.element.querySelector(
-      `details[data-state-id="${stateId}"]`
+      `details[data-state-id="${stateId}"]`,
     ) as HTMLDetailsElement;
     return elm && !!elm.open;
   }
@@ -68,15 +68,31 @@ export class RuntimeStatechartApi {
       this.selectState(id);
     }
   }
+ 
+  focusStates(...stateIds: string[]) {
+    for (let i = 0; i < stateIds.length; i++) {
+      const stateId = stateIds[i];
+      for (const tagName of ["details", "g"]) {
+        const elm = this.element.querySelector(
+          `${tagName}[data-state-id="${stateId}"]`,
+        );
+        elm?.scrollIntoView();
+      }
+    }
+  }
 
-  // toggleStatePanel(stateId) {
-  //   const elm = this.element.querySelector(
-  //     `details[data-state-id="${stateId}"]`
-  //   );
-  //   if (elm) {
-  //     elm.open = !elm.open;
-  //   }
-  // }
+  setStateDescription(
+    stateId: string,
+    description: HTMLElement | string | undefined,
+  ) {
+    const descriptionContainer = this.element.querySelector(
+      `details[data-state-id="${stateId}"] .state-details__description`,
+    );
+    if (descriptionContainer) {
+      descriptionContainer.innerHTML = "";
+      descriptionContainer.append(description ?? "");
+    }
+  }
 
   closeStatePanel(stateId: string) {
     this._setStatePanelStatus(`details[data-state-id="${stateId}"]`, false);
@@ -138,11 +154,11 @@ export class RuntimeStatechartApi {
     const bindListeners = (
       index: Record<string, RuntimeListener>,
       dataField: string,
-      eventType: string
+      eventType: string,
     ) => {
       function newEventListener(
         index: Record<string, RuntimeListener>,
-        elm: Element
+        elm: Element,
       ) {
         return (ev: Event) => {
           ev.preventDefault();
@@ -162,7 +178,7 @@ export class RuntimeStatechartApi {
         const eventListener = newEventListener(index, elm);
         elm.addEventListener(eventType, eventListener);
         this._addListener(this._registry, () =>
-          elm.removeEventListener(eventType, eventListener)
+          elm.removeEventListener(eventType, eventListener),
         );
       });
     };
@@ -170,7 +186,7 @@ export class RuntimeStatechartApi {
     bindListeners(
       this._transitionsClickListeners,
       "data-transition-id",
-      "click"
+      "click",
     );
   }
 
@@ -185,20 +201,20 @@ export class RuntimeStatechartApi {
     this._applyStateModifier(
       cssSelector,
       modifier,
-      (elm, cls) => elm && elm.classList.add(cls)
+      (elm, cls) => elm && elm.classList.add(cls),
     );
   }
   _removeStateModifier(cssSelector: string, modifier: string = "selected") {
     this._applyStateModifier(
       cssSelector,
       modifier,
-      (elm, cls) => elm && elm.classList.remove(cls)
+      (elm, cls) => elm && elm.classList.remove(cls),
     );
   }
   _applyStateModifier(
     cssSelector: string,
     modifier: string = "selected",
-    apply: (elm: Element | null, className: string) => void
+    apply: (elm: Element | null, className: string) => void,
   ) {
     const detailsModifier = `state-details--${modifier}`;
     const stateLabelsModifier = `state-details__label--${modifier}`;
@@ -218,23 +234,23 @@ export class RuntimeStatechartApi {
     this._applyTransitionsModifier(
       cssSelector,
       modifier,
-      (elm, cls) => elm && elm.classList.add(cls)
+      (elm, cls) => elm && elm.classList.add(cls),
     );
   }
   _removeTransitionsModifier(
     cssSelector: string,
-    modifier: string = "selected"
+    modifier: string = "selected",
   ) {
     this._applyTransitionsModifier(
       cssSelector,
       modifier,
-      (elm, cls) => elm && elm.classList.remove(cls)
+      (elm, cls) => elm && elm.classList.remove(cls),
     );
   }
   _applyTransitionsModifier(
     cssSelector: string,
     modifier: string = "selected",
-    apply: (elm: Element | null, className: string) => void
+    apply: (elm: Element | null, className: string) => void,
   ) {
     const transitionModifier = `transition--${modifier}`;
     const transitionLineModifier = `transition__line--${modifier}`;

package/src/runtime/StateChartIndex.ts

@@ -11,9 +11,22 @@ export class StateChartIndex {
   _nodesParentsIndex: Record<string, string> = {};
   _edgeIndex: Record<string, StateGraphEdge> = {};
   _edgesParentsIndex: Record<string, string> = {};
+  initialStateKey: string;
+  finalStateKey: string;
 
-  constructor({ statechart }: { statechart: StateChart }) {
+  constructor({
+    statechart,
+    initialStateKey = "<initial>",
+    finalStateKey = "<final>",
+  }: {
+    statechart: StateChart;
+    initialStateKey?: string;
+    finalStateKey?: string;
+  }) {
     this.statechart = statechart;
+    this.initialStateKey = initialStateKey;
+    this.finalStateKey = finalStateKey;
+
     this._buildIndexes();
   }
 
@@ -44,6 +57,31 @@ export class StateChartIndex {
     return this._edgeIndex[id];
   }
 
+  /**
+   * Returns a list of all nodes in this chart.
+   * @return a list of all nodes
+   */
+  getAllNodes(): StateGraphNode[] {
+    return [
+      ...new Set([
+        ...Object.values(this._chartsIndex),
+        ...Object.values(this._nodesIndex),
+      ]),
+    ];
+  }
+
+  /**
+   * Returns a list of all non-empty state nodes in this chart.
+   * The result excludes nodes for initial and fina states.
+   * @return a list of all non-empty state nodes
+   */
+  getStateNodes(): StateGraphNode[] {
+    return this.getAllNodes().filter(
+      (node) =>
+        node.key !== this.initialStateKey && node.key !== this.finalStateKey,
+    );
+  }
+
   /**
    * Transforms a stack of state keys to the corresponding identifiers.
    * If a key in the stack was not found then this method returns
@@ -96,7 +134,7 @@ export class StateChartIndex {
     if (!state || !stack.length) return;
     const parent = stack[stack.length - 1];
     const t = parent.edges.find(
-      (t: StateGraphEdge) => t.from === state.key && t.event === event
+      (t: StateGraphEdge) => t.from === state.key && t.event === event,
     );
     return t;
   }
@@ -140,7 +178,7 @@ export class StateChartIndex {
    * @returns an array with two identifiers - [sourceStateId, targetStateId] - the source state id and target state id
    */
   getTransitionStateIds(
-    transition?: StateGraphEdge
+    transition?: StateGraphEdge,
   ): [string | undefined, string | undefined] {
     const result: [string | undefined, string | undefined] = [
       undefined,

package/src/types/StateGraphNode.ts

@@ -8,5 +8,6 @@ export type StateGraphNode = Dimensions &
   Position & {
     id: string;
     key: string;
-    state: string;
+    text: string;
+    // state: string;
   } & Record<string, any>;