@statewalker/fsm-charts 0.0.6 → 0.1.1

package/dist/{StateChart-pFSQIvtE.d.ts → StateChart-PdtJDEPy.d.ts}

@@ -40,6 +40,15 @@ type Position = {
     y: number;
 };
 
+/**
+ * Information about a state node in the graph.
+ */
+type StateGraphNode = Dimensions & Position & {
+    id: string;
+    key: string;
+    state: string;
+} & Record<string, any>;
+
 /**
  * Information about a state graph edge.
  */
@@ -51,15 +60,6 @@ type StateGraphEdge = Dimensions & Position & {
     points: Position[];
 } & Record<string, any>;
 
-/**
- * Information about a state node in the graph.
- */
-type StateGraphNode = Dimensions & Position & {
-    id: string;
-    key: string;
-    state: string;
-} & Record<string, any>;
-
 /**
  * Coordinates for state nodes and endges corresponding to state transitions.
  */
@@ -68,9 +68,7 @@ type TransitionsGraph = Position & Dimensions & {
     edges: StateGraphEdge[];
 };
 
-type StateChart = TransitionsGraph & {
-    id: string;
-    key: string;
+type StateChart = TransitionsGraph & StateGraphNode & {
     children?: StateChart[];
 } & Record<string, any>;
 

package/dist/chunk-EU64L34M.js

@@ -0,0 +1,163 @@
+import { __publicField } from './chunk-XEO3YXBM.js';
+
+// src/runtime/StateChartIndex.ts
+var StateChartIndex = class {
+  constructor({ statechart }) {
+    __publicField(this, "statechart");
+    __publicField(this, "_chartsIndex", {});
+    __publicField(this, "_nodesIndex", {});
+    __publicField(this, "_nodesParentsIndex", {});
+    __publicField(this, "_edgeIndex", {});
+    __publicField(this, "_edgesParentsIndex", {});
+    this.statechart = statechart;
+    this._buildIndexes();
+  }
+  /**
+   * Transforms a stack of state keys to the corresponding identifiers.
+   * If a key in the stack was not found then this method returns
+   * an empty stack.
+   * @param stack a stack of state keys
+   * @returns a stack of state identifiers for the given states
+   */
+  getStatesIds(...stack) {
+    let result = [];
+    let list = [this.statechart];
+    for (let i = 0; list?.length > 0 && i < stack.length; i++) {
+      const key = stack[i];
+      const node = list.find((node2) => node2.key === key);
+      if (!node)
+        break;
+      result.push(node.id);
+      list = node.children;
+      if (!list?.length)
+        list = node.nodes;
+    }
+    return result.length === stack.length ? result : [];
+  }
+  /**
+   * Returns graph nodes for the specified identifier.
+   * @param id the id of a  node
+   * @returns a stack of nodes
+   */
+  getStackByStateId(id) {
+    if (!id)
+      return [];
+    const node = this._chartsIndex[id] || this._nodesIndex[id];
+    if (!node)
+      return [];
+    const parentId = this._nodesParentsIndex[id];
+    if (parentId) {
+      const parentStack = this.getStackByStateId(parentId);
+      if (!parentStack.length)
+        return [];
+      parentStack.push(node);
+      return parentStack;
+    } else {
+      return [node];
+    }
+  }
+  /**
+   * Returns an edge object corresponding to the transition from the state
+   * @param stateId identifier of the source state
+   * @param event an event triggering the transition
+   * @returns graph edge
+   */
+  getTransition(stateId, event) {
+    const stack = this.getStackByStateId(stateId);
+    const state = stack.pop();
+    if (!state || !stack.length)
+      return;
+    const parent = stack[stack.length - 1];
+    const t = parent.edges.find(
+      (t2) => t2.from === state.key && t2.event === event
+    );
+    return t;
+  }
+  /**
+   * Returns a list of edge objects corresponding to all transitions from the state
+   * @param stateId identifier of the source state
+   * @returns a list of graph edges
+   */
+  getTransitions(stateId) {
+    const stack = this.getStackByStateId(stateId);
+    const state = stack.pop();
+    if (!state || !stack.length)
+      return [];
+    const parent = stack[stack.length - 1];
+    return parent.edges.filter((t) => t.from === state.key);
+  }
+  /**
+   * Returns a graph node corresponding to the specified state id.
+   * @param stateId identifier of the state
+   * @returns graph node
+   * @see getStateChart
+   */
+  getStateNode(stateId) {
+    return stateId ? this._nodesIndex[stateId] : void 0;
+  }
+  /**
+   * Returns a chart corresponding to the specified state id.
+   * @param stateId identifier of the state
+   * @returns graph node
+   * @see getStateNode
+   */
+  getStateChart(stateId) {
+    return stateId ? this._chartsIndex[stateId] : void 0;
+  }
+  /**
+   * Returns ids of the previous and next state for the specified transition
+   * @param transition a graph edge instance defining transition
+   * @returns an array with two identifiers - [sourceStateId, targetStateId] - the source state id and target state id
+   */
+  getTransitionStateIds(transition) {
+    const result = [
+      void 0,
+      void 0
+    ];
+    if (!transition)
+      return result;
+    const parentId = this._edgesParentsIndex[transition.id];
+    if (!parentId)
+      return result;
+    const parent = this._chartsIndex[parentId];
+    if (!parent)
+      return result;
+    parent.nodes.forEach((node) => {
+      if (node.key === transition.from) {
+        result[0] = node.id;
+      }
+      if (node.key === transition.to) {
+        result[1] = node.id;
+      }
+    });
+    return result;
+  }
+  // ----------------------------------------------------------
+  // Internal methods
+  _buildIndexes() {
+    const addToIndex = (chart) => {
+      const chartId = chart.id;
+      this._chartsIndex[chartId] = chart;
+      if (!(chartId in this._nodesIndex)) {
+        this._nodesIndex[chartId] = chart;
+      }
+      chart.nodes.forEach((node) => {
+        const nodeId = node.id;
+        this._nodesIndex[nodeId] = node;
+        this._nodesParentsIndex[nodeId] = chartId;
+      });
+      chart.edges.forEach((edge) => {
+        const edgeId = edge.id;
+        this._edgeIndex[edgeId] = edge;
+        this._edgesParentsIndex[edgeId] = chartId;
+      });
+      (chart.children || []).forEach((child) => {
+        this._nodesParentsIndex[child.id] = chartId;
+        addToIndex(child);
+      });
+    };
+    addToIndex(this.statechart);
+  }
+};
+
+export { StateChartIndex };

package/dist/{chunk-FYTJYHEQ.js → chunk-YYNW6Q2T.js}

@@ -47,7 +47,7 @@ function serializeCss(obj) {
   }
 }
 
-// src/svg/buildStatechartStyles.ts
+// src/html/buildStatechartStyles.ts
 function buildStateDetailsStyle() {
   return {
     ".state-details": {
@@ -214,7 +214,7 @@ function buildStatechartStyles({
   };
 }
 
-// src/svg/buildStatechartCss.ts
+// src/html/buildStatechartCss.ts
 function buildStatechartCss({ prefix = "" } = {}) {
   const cssObject = buildStatechartStyles({ root: prefix || ":root" });
   return serializeCss(cssObject);
@@ -310,7 +310,7 @@ var BasisCurve = class {
   }
 };
 
-// src/svg/buildStatechartSvg.ts
+// src/html/buildStatechartSvg.ts
 function getBoxParams({
   x,
   y,
@@ -500,7 +500,7 @@ function buildStatechartSvg({
   println("</svg>");
 }
 
-// src/svg/buildStatechartsPanel.ts
+// src/html/buildStatechartsPanel.ts
 function buildStatechartsPanel({
   statechart,
   newId,

package/dist/{chunk-IT7GBMYV.js → chunk-ZSGS37QH.js}

@@ -2589,6 +2589,7 @@ function buildCharts({
     return {
       id,
       key: config2.key,
+      state: config2.key,
       ...graph,
       children
     };

package/dist/{index-svg-DCwEyX8X.d.ts → index-html-CbDZzk2n.d.ts}

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

package/dist/{index-svg.d.ts → 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-pFSQIvtE.js';
-export { b as buildStatechartCss, c as buildStatechartStyles, d as buildStatechartSvg, a as buildStatechartsPanel } from './index-svg-DCwEyX8X.js';
+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-PdtJDEPy.js';
+export { b as buildStatechartCss, c as buildStatechartStyles, d as buildStatechartSvg, a as buildStatechartsPanel } from './index-html-CbDZzk2n.js';

package/dist/{index-svg.js → index-html.js}

@@ -1,3 +1,3 @@
-export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel } from './chunk-FYTJYHEQ.js';
+export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel } from './chunk-YYNW6Q2T.js';
 import './chunk-NXWOFQMO.js';
 import './chunk-XEO3YXBM.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-pFSQIvtE.js';
-export { D as Dimensions, a as Position, b as StateGraphEdge, c as StateGraphNode } from './StateChart-pFSQIvtE.js';
+import { T as Transition, P as Padding, G as GraphParamsProvider, d as TransitionsGraph, F as FsmStateConfig, S as StateChart } from './StateChart-PdtJDEPy.js';
+export { D as Dimensions, a as Position, b as StateGraphEdge, c as StateGraphNode } from './StateChart-PdtJDEPy.js';
 
 /**
  * Build graphs corresponding to the specified transitions.

package/dist/index-layout.js

@@ -1,3 +1,3 @@
-export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-IT7GBMYV.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-ZSGS37QH.js';
 import './chunk-NXWOFQMO.js';
 import './chunk-XEO3YXBM.js';

package/dist/index-runtime.d.ts

@@ -1,5 +1,64 @@
-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-pFSQIvtE.js';
+import { S as StateChart, c as StateGraphNode, b as StateGraphEdge } from './StateChart-PdtJDEPy.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-PdtJDEPy.js';
 
-declare const a = "a";
+declare class StateChartIndex {
+    statechart: StateChart;
+    _chartsIndex: Record<string, StateChart>;
+    _nodesIndex: Record<string, StateGraphNode>;
+    _nodesParentsIndex: Record<string, string>;
+    _edgeIndex: Record<string, StateGraphEdge>;
+    _edgesParentsIndex: Record<string, string>;
+    constructor({ statechart }: {
+        statechart: StateChart;
+    });
+    /**
+     * Transforms a stack of state keys to the corresponding identifiers.
+     * If a key in the stack was not found then this method returns
+     * an empty stack.
+     * @param stack a stack of state keys
+     * @returns a stack of state identifiers for the given states
+     */
+    getStatesIds(...stack: string[]): string[];
+    /**
+     * Returns graph nodes for the specified identifier.
+     * @param id the id of a  node
+     * @returns a stack of nodes
+     */
+    getStackByStateId(id?: string): StateGraphNode[];
+    /**
+     * Returns an edge object corresponding to the transition from the state
+     * @param stateId identifier of the source state
+     * @param event an event triggering the transition
+     * @returns graph edge
+     */
+    getTransition(stateId?: string, event?: string): StateGraphEdge | undefined;
+    /**
+     * Returns a list of edge objects corresponding to all transitions from the state
+     * @param stateId identifier of the source state
+     * @returns a list of graph edges
+     */
+    getTransitions(stateId?: string): StateGraphEdge[];
+    /**
+     * Returns a graph node corresponding to the specified state id.
+     * @param stateId identifier of the state
+     * @returns graph node
+     * @see getStateChart
+     */
+    getStateNode(stateId?: string): StateGraphNode | undefined;
+    /**
+     * Returns a chart corresponding to the specified state id.
+     * @param stateId identifier of the state
+     * @returns graph node
+     * @see getStateNode
+     */
+    getStateChart(stateId?: string): StateChart | undefined;
+    /**
+     * Returns ids of the previous and next state for the specified transition
+     * @param transition a graph edge instance defining transition
+     * @returns an array with two identifiers - [sourceStateId, targetStateId] - the source state id and target state id
+     */
+    getTransitionStateIds(transition?: StateGraphEdge): [string | undefined, string | undefined];
+    _buildIndexes(): void;
+}
 
-export { a };
+export { StateChart, StateChartIndex, StateGraphEdge, StateGraphNode };

package/dist/index-runtime.js

@@ -1,2 +1,2 @@
-export { a } from './chunk-X2UPWZLX.js';
+export { StateChartIndex } from './chunk-EU64L34M.js';
 import './chunk-XEO3YXBM.js';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-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-pFSQIvtE.js';
+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-PdtJDEPy.js';
 export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './index-layout.js';
-export { C as CssTree, b as buildStatechartCss, c as buildStatechartStyles, d as buildStatechartSvg, a as buildStatechartsPanel, s as serializeCss } from './index-svg-DCwEyX8X.js';
-export { a } from './index-runtime.js';
+export { C as CssTree, b as buildStatechartCss, c as buildStatechartStyles, d as buildStatechartSvg, a as buildStatechartsPanel, s as serializeCss } from './index-html-CbDZzk2n.js';
+export { StateChartIndex } from './index-runtime.js';
 
 declare function toKebabCase(str: string): string;
 

package/dist/index.js

@@ -1,5 +1,5 @@
-export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-IT7GBMYV.js';
-export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel, serializeCss, toKebabCase } from './chunk-FYTJYHEQ.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-ZSGS37QH.js';
+export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel, serializeCss, toKebabCase } from './chunk-YYNW6Q2T.js';
 import './chunk-NXWOFQMO.js';
-export { a } from './chunk-X2UPWZLX.js';
+export { StateChartIndex } from './chunk-EU64L34M.js';
 import './chunk-XEO3YXBM.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statewalker/fsm-charts",
-  "version": "0.0.6",
+  "version": "0.1.1",
   "description": "HFSM Implementation",
   "keywords": [],
   "homepage": "https://github.com/statewalker/statewalker-fsm-charts",
@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@statewalker/typescript-config": "*",
+    "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "eslint": "^8.0.1",
@@ -33,6 +34,7 @@
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
     "eslint-plugin-promise": "^6.0.0",
+    "jsdom": "^24.1.0",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "tsup": "^8.0.2",

package/src/{svg → html}/buildStatechartStyles.ts

@@ -1,4 +1,4 @@
-import { CssTree } from "../utils/serializeCss";
+import type { CssTree } from "../utils/serializeCss";
 
 function buildStateDetailsStyle() {
   return {

package/src/{index-svg.ts → index-html.ts}

@@ -1,2 +1,2 @@
 export * from "./types/index.ts";
-export * from "./svg/index.ts";
+export * from "./html/index.ts";

package/src/index.ts

@@ -1,6 +1,6 @@
 export * from "./types/index.ts";
 export * from "./layout/index.ts";
-export * from "./svg/index.ts";
+export * from "./html/index.ts";
 export * from "./runtime/index.ts";
 export * from "./utils/toKebabCase.ts";
 export * from "./utils/serializeCss.ts";

package/src/layout/buildCharts.ts

@@ -33,7 +33,10 @@ export function buildCharts({
 } & GraphParamsProvider): StateChart {
   return buildChart(config);
 
-  function buildChart(config: FsmStateConfig, id: string = newId("s")) {
+  function buildChart(
+    config: FsmStateConfig,
+    id: string = newId("s")
+  ): StateChart {
     const graph = buildFlatCharts({
       lodash,
       transitions: config.transitions,
@@ -59,6 +62,7 @@ export function buildCharts({
     return {
       id,
       key: config.key,
+      state: config.key,
       ...graph,
       children,
     };

package/src/runtime/StateChartIndex.ts

@@ -0,0 +1,165 @@
+import type {
+  StateChart,
+  StateGraphNode,
+  StateGraphEdge,
+} from "../types/index.ts";
+
+export class StateChartIndex {
+  statechart: StateChart;
+  _chartsIndex: Record<string, StateChart> = {};
+  _nodesIndex: Record<string, StateGraphNode> = {};
+  _nodesParentsIndex: Record<string, string> = {};
+  _edgeIndex: Record<string, StateGraphEdge> = {};
+  _edgesParentsIndex: Record<string, string> = {};
+
+  constructor({ statechart }: { statechart: StateChart }) {
+    this.statechart = statechart;
+    this._buildIndexes();
+  }
+
+  /**
+   * Transforms a stack of state keys to the corresponding identifiers.
+   * If a key in the stack was not found then this method returns
+   * an empty stack.
+   * @param stack a stack of state keys
+   * @returns a stack of state identifiers for the given states
+   */
+  getStatesIds(...stack: string[]): string[] {
+    let result = [];
+    let list = [this.statechart] as (StateChart | StateGraphNode)[];
+    for (let i = 0; list?.length > 0 && i < stack.length; i++) {
+      const key = stack[i];
+      const node = list.find((node) => node.key === key);
+      if (!node) break;
+      result.push(node.id);
+      list = node.children;
+      if (!list?.length) list = node.nodes;
+    }
+    return result.length === stack.length ? result : [];
+  }
+
+  /**
+   * Returns graph nodes for the specified identifier.
+   * @param id the id of a  node
+   * @returns a stack of nodes
+   */
+  getStackByStateId(id?: string): StateGraphNode[] {
+    if (!id) return [];
+    const node = this._chartsIndex[id] || this._nodesIndex[id];
+    if (!node) return [];
+    const parentId = this._nodesParentsIndex[id];
+    if (parentId) {
+      const parentStack = this.getStackByStateId(parentId);
+      if (!parentStack.length) return [];
+      parentStack.push(node);
+      return parentStack;
+    } else {
+      return [node];
+    }
+  }
+
+  /**
+   * Returns an edge object corresponding to the transition from the state
+   * @param stateId identifier of the source state
+   * @param event an event triggering the transition
+   * @returns graph edge
+   */
+  getTransition(stateId?: string, event?: string): StateGraphEdge | undefined {
+    const stack = this.getStackByStateId(stateId);
+    const state = stack.pop();
+    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
+    );
+    return t;
+  }
+
+  /**
+   * Returns a list of edge objects corresponding to all transitions from the state
+   * @param stateId identifier of the source state
+   * @returns a list of graph edges
+   */
+  getTransitions(stateId?: string): StateGraphEdge[] {
+    const stack = this.getStackByStateId(stateId);
+    const state = stack.pop();
+    if (!state || !stack.length) return [];
+    const parent = stack[stack.length - 1];
+    return parent.edges.filter((t: StateGraphEdge) => t.from === state.key);
+  }
+
+  /**
+   * Returns a graph node corresponding to the specified state id.
+   * @param stateId identifier of the state
+   * @returns graph node
+   * @see getStateChart
+   */
+  getStateNode(stateId?: string): StateGraphNode | undefined {
+    return stateId ? this._nodesIndex[stateId] : undefined;
+  }
+
+  /**
+   * Returns a chart corresponding to the specified state id.
+   * @param stateId identifier of the state
+   * @returns graph node
+   * @see getStateNode
+   */
+  getStateChart(stateId?: string): StateChart | undefined {
+    return stateId ? this._chartsIndex[stateId] : undefined;
+  }
+
+  /**
+   * Returns ids of the previous and next state for the specified transition
+   * @param transition a graph edge instance defining transition
+   * @returns an array with two identifiers - [sourceStateId, targetStateId] - the source state id and target state id
+   */
+  getTransitionStateIds(
+    transition?: StateGraphEdge
+  ): [string | undefined, string | undefined] {
+    const result: [string | undefined, string | undefined] = [
+      undefined,
+      undefined,
+    ];
+    if (!transition) return result;
+    const parentId = this._edgesParentsIndex[transition.id];
+    if (!parentId) return result;
+    const parent = this._chartsIndex[parentId];
+    if (!parent) return result;
+    parent.nodes.forEach((node: StateGraphNode) => {
+      if (node.key === transition.from) {
+        result[0] = node.id;
+      }
+      if (node.key === transition.to) {
+        result[1] = node.id;
+      }
+    });
+    return result;
+  }
+
+  // ----------------------------------------------------------
+  // Internal methods
+  _buildIndexes() {
+    const addToIndex = (chart: StateChart) => {
+      const chartId = chart.id;
+      this._chartsIndex[chartId] = chart;
+      if (!(chartId in this._nodesIndex)) {
+        this._nodesIndex[chartId] = chart;
+      }
+      chart.nodes.forEach((node) => {
+        const nodeId = node.id;
+        this._nodesIndex[nodeId] = node;
+        this._nodesParentsIndex[nodeId] = chartId;
+      });
+      chart.edges.forEach((edge) => {
+        const edgeId = edge.id;
+        this._edgeIndex[edgeId] = edge;
+        this._edgesParentsIndex[edgeId] = chartId;
+      });
+      (chart.children || []).forEach((child) => {
+        this._nodesParentsIndex[child.id] = chartId;
+        addToIndex(child);
+      });
+    };
+    addToIndex(this.statechart);
+  }
+}

package/src/runtime/index.ts

@@ -1,211 +1 @@
-export const a = "a";
-
-// class RuntimeStatechartsApi {
-//   constructor({ element, statechart }) {
-//     this.element = element;
-//     this.statechart = statechart;
-//     // this._statesIndex = {};
-//     // this._transitionsIndex = {};
-//     // this._buildIndexes(this.statechart);
-//   }
-
-//   _applyStateModifier(cssSelector, modifier = "selected", apply) {
-//     const detailsModifier = `state-details--${modifier}`;
-//     const stateLabelsModifier = `state-details__label--${modifier}`;
-//     const stateModifier = `state--${modifier}`;
-//     [...this.element.querySelectorAll(cssSelector)].forEach((elm) => {
-//       if (elm.tagName.toLowerCase() === "details") {
-//         apply(elm, detailsModifier);
-//         const labelElm = elm.querySelector(".state-details__label");
-//         if (labelElm) apply(labelElm, stateLabelsModifier);
-//       } else {
-//         apply(elm, stateModifier);
-//       }
-//     });
-//   }
-
-//   _applyTransitionsModifier(cssSelector, modifier = "selected", action) {}
-
-//   deselectAllTransitions() {
-//     const removeClass = (elm, cls) => elm.classList.remove(cls);
-//     this._applyTransitionsModifier(
-//       "[data-transition-id]",
-//       "selected",
-//       removeClass
-//     );
-//   }
-//   deselectTransitions(...ids) {
-//     const removeClass = (elm, cls) => elm.classList.remove(cls);
-//     for (const id of ids) {
-//       this._applyTransitionsModifier(
-//         `[data-transition-id="${id}"]`,
-//         "selected",
-//         removeClass
-//       );
-//     }
-//   }
-//   selectTransitions(...ids) {
-//     const addClass = (elm, cls) => elm.classList.add(cls);
-//     for (const id of ids) {
-//       this._applyTransitionsModifier(
-//         `[data-transition-id="${id}"]`,
-//         "selected",
-//         addClass
-//       );
-//     }
-//   }
-
-//   deselectAllStates() {
-//     const removeClass = (elm, cls) => elm.classList.remove(cls);
-//     this._applyStateModifier("[data-state-id]", "selected", removeClass);
-//   }
-//   deselectStates(...ids) {
-//     const removeClass = (elm, cls) => elm.classList.remove(cls);
-//     for (const id of ids) {
-//       this._applyStateModifier(
-//         `[data-state-id="${id}"]`,
-//         "selected",
-//         removeClass
-//       );
-//     }
-//   }
-//   selectStates(...ids) {
-//     const addClass = (elm, cls) => elm.classList.add(cls);
-//     for (const id of ids) {
-//       this._applyStateModifier(`[data-state-id="${id}"]`, "selected", addClass);
-//     }
-//   }
-
-//   // -----------------------------------------------
-//   // Access to charts data
-//   // - get state ids by stack of state keys
-//   // - get stack of states by state id
-//   // - get transitionId by stateId + event
-//   // - get targetId, sourceId, event by transitionId
-//   getStatesIds(...stack) {
-//     let statechart = this.statechart;
-//     let result = [];
-//     if (statechart.key === stack[0]) {
-//       result.push(statechart.id);
-//       for (let i = 1; i < stack.length; i++) {
-//         const key = stack[i];
-//         let id = statechart.graph.nodes.find((node) => node.key === key)?.id;
-//         if (!id) break;
-//         result.push(id);
-//         statechart = (statechart.children || []).find(
-//           (child) => child.key === key
-//         );
-//       }
-//     }
-//     return result.length === stack.length ? result : [];
-//   }
-
-//   getStackByStateId(id) {
-//     return this._getStack(id, ({ id, key }) => key);
-//   }
-
-//   getTransition(stateId, event) {
-//     const stack = this._getStack(stateId);
-//     const state = stack.pop();
-//     if (!state || !stack.length) return;
-//     const parent = stack[stack.length - 1];
-//     const t = parent.graph.edges.find(
-//       (t) => t.from === state.key && t.event === event
-//     );
-//     if (!t) return;
-//     const to = parent.graph.nodes.find((n) => n.key === t.to);
-//     return to && { id: t.id, fromId: state.id, event: t.event, toId: to.id };
-//   }
-
-//   _getStack(id, get = (d) => d) {
-//     return findById(this.statechart, id, get);
-
-//     function findById(statechart, id, get, stack = []) {
-//       try {
-//         stack.push(get(statechart));
-//         if (statechart.id === id) {
-//           return [...stack];
-//         } else {
-//           let node = statechart.graph.nodes.find((node) => node.id === id);
-//           if (node) {
-//             return [...stack, get(node)];
-//           } else {
-//             let result;
-//             if (statechart.children) {
-//               for (const child of statechart.children) {
-//                 result = findById(child, id, get, stack);
-//                 if (result) break;
-//               }
-//             }
-//             return result;
-//           }
-//         }
-//       } finally {
-//         stack.pop();
-//       }
-//     }
-//   }
-
-//   // getTransitionId(stateId, event) {
-//   // }
-
-//   //   const stateInfo = this._statesIndex[stateId];
-//   //   if (!stateInfo) return;
-//   //   if (stateInfo.parent) return ;
-//   //   const targetState = stateInfo.parent.
-//   //   const fromId = stateIds.pop();
-//   //   const parentId = stateIds.pop();
-//   //   const parent = parentId ? this._statesIndex[parentId] : null;
-//   //   return parent
-//   //     ? parent.graph?.edges.find(
-//   //         (edge) => edge.from === fromId && edge.event === event
-//   //       )
-//   //     : undefined;
-//   // }
-
-//   // _getInfo(index, id, create) {
-//   //   let info = index[id];
-//   //   if (!info && create) {
-//   //     info = index[id] = { id };
-//   //   }
-//   //   return info;
-//   // }
-//   // _getStateInfo(id, create) {
-//   //   return this._getInfo(this._statesIndex, id, create);
-//   // }
-//   // _getTransitionInfo(id, create) {
-//   //   return this._getInfo(this._transitionsIndex, id, create);
-//   // }
-//   // _buildIndexes(statechart) {
-//   //   const { id, key } = statechart;
-//   //   const stateInfo = this._getStateInfo(id, true);
-//   //   stateInfo.key = key;
-//   //   stateInfo.detailsElement = this.element.querySelector(
-//   //     `details[data-state-id="${id}"]`
-//   //   );
-//   //   for (const node of statechart.graph?.nodes || []) {
-//   //     const info = this._getStateInfo(node.id, true);
-//   //     info.parent = stateInfo;
-//   //     // info.parentId = id;
-//   //     info.node = node;
-//   //     info.key = node.key;
-//   //     info.svgGroupElement = this.element.querySelector(
-//   //       `g[data-state-id="${info.id}"]`
-//   //     );
-//   //   }
-//   //   for (const edge of statechart.graph?.edges || []) {
-//   //     const info = this._getTransitionInfo(edge.id, true);
-//   //     info.transition = edge;
-//   //     info.from = edge.from;
-//   //     info.event = edge.event;
-//   //     info.to = edge.to;
-//   //     info.svgGroupElement = this.element.querySelector(
-//   //       `g[data-transition-id="${info.id}"]`
-//   //     );
-//   //   }
-
-//   //   for (const child of statechart.children) {
-//   //     this._buildIndexes(child);
-//   //   }
-//   // }
-// }
+export * from "./StateChartIndex.ts";

package/src/types/StateChart.ts

@@ -1,7 +1,7 @@
+import type { StateGraphNode } from "./StateGraphNode.ts";
 import type { TransitionsGraph } from "./TransitionsGraph.ts";
 
-export type StateChart = TransitionsGraph & {
-  id: string;
-  key: string;
-  children?: StateChart[];
-} & Record<string, any>;
+export type StateChart = TransitionsGraph &
+  StateGraphNode & {
+    children?: StateChart[];
+  } & Record<string, any>;

package/dist/chunk-X2UPWZLX.js

@@ -1,4 +0,0 @@
-// src/runtime/index.ts
-var a = "a";
-
-export { a };

package/src/{svg → html}/buildStatechartsPanel.ts

@@ -1,5 +1,5 @@
-import { buildStatechartSvg } from "./buildStatechartSvg.ts";
 import type { StateChart } from "../types/StateChart.ts";
+import { buildStatechartSvg } from "./buildStatechartSvg.ts";
 
 export function buildStatechartsPanel({
   statechart,