@statewalker/fsm-charts 0.1.5 → 0.1.7

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

@@ -17,7 +17,7 @@ type FsmStateConfig = {
     key: string;
     transitions: Transition[];
     states?: FsmStateConfig[];
-};
+} & Record<string, any>;
 
 /**
  * Provides default functions measuring dimensions for state nodes and transition edges in the graph.

package/dist/{chunk-NLFRNVS3.js → chunk-2BBNBZQI.js}

@@ -2,8 +2,8 @@ import { getPadding } from './chunk-NXWOFQMO.js';
 import { __publicField } from './chunk-XEO3YXBM.js';
 
 // src/utils/toKebabCase.ts
-function toKebabCase2(str) {
-  str = str.trim().replace(/\s+/gim, "-");
+function toKebabCase(str) {
+  str = (str || "").trim().replace(/\s+/gim, "-");
   str = str.replace(
     /([^A-Z]?)([A-Z])/g,
     (_, a, b) => a.toLowerCase() + "-" + b.toLowerCase()
@@ -32,7 +32,7 @@ function serializeCss(obj) {
         if (typeof value === "object") {
           visitStyle({ [key2]: value }, extensions, selectors);
         } else {
-          key2 = toKebabCase2(key2);
+          key2 = toKebabCase(key2);
           selectorRules.push(`  ${key2}: ${value};`);
         }
       }
@@ -294,7 +294,9 @@ function serializeAttrs(attrs = {}, {
     if (value === void 0 || value === null || value === "")
       continue;
     result.push(
-      `${prefix}${escapeValue(key)}${"=" + JSON.stringify(escapeValue(transform ? toKebabCase(value) : value))}`
+      `${prefix}${escapeValue(key)}${"=" + JSON.stringify(
+        escapeValue(transform ? toKebabCase(String(value)) : value)
+      )}`
     );
   }
   return result.join(" ");
@@ -598,4 +600,4 @@ function buildStatechartsPanel({
   }
 }
 
-export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase2 as toKebabCase };
+export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase };

package/dist/chunk-SHSJVXEB.js

@@ -0,0 +1,144 @@
+// src/config/concatTransitionsToString.ts
+function concatTransitionsToString(transitions) {
+  let list = [];
+  let str = "";
+  let prev;
+  for (const [from, event, to] of transitions) {
+    if (prev !== from) {
+      if (str)
+        list.push(str);
+      str = from;
+    }
+    str += ` -${escape(event)}-> ${escape(to)}`;
+    prev = to;
+  }
+  if (str)
+    list.push(str);
+  return list;
+  function escape(str2) {
+    return str2;
+  }
+}
+
+// src/config/serializeProcessConfig.ts
+function serializeProcessConfig(config) {
+  if (!config)
+    return "";
+  let lines = [];
+  visit(config, lines);
+  return lines.join("\n");
+  function visit(config2, lines2, shift = " ") {
+    lines2.push(`${shift}{`);
+    const { key, states, transitions, ...params } = config2;
+    lines2.push(`${shift}  "key": ${JSON.stringify(key)}`);
+    if (transitions && transitions.length > 0) {
+      lines2[lines2.length - 1] += ",";
+      lines2.push(`${shift}  "transitions": [`);
+      for (let i = 0; i < transitions.length; i++) {
+        if (i > 0) {
+          lines2[lines2.length - 1] += ",";
+        }
+        lines2.push(`${shift}    ${JSON.stringify(transitions[i])}`);
+      }
+      lines2.push(`${shift}  ]`);
+    }
+    if (states && states.length > 0) {
+      lines2[lines2.length - 1] += ",";
+      lines2.push(`${shift}  "states": [`);
+      for (let i = 0; i < states.length; i++) {
+        if (i > 0) {
+          lines2[lines2.length - 1] += ",";
+        }
+        visit(states[i], lines2, shift + "    ");
+      }
+      lines2.push(`${shift}  ]`);
+    }
+    if (params && Object.keys(params).length > 0) {
+      lines2[lines2.length - 1] += ",";
+      const str = JSON.stringify(params, null, 2);
+      const paramsLines = str.split("\n");
+      paramsLines.shift();
+      paramsLines.pop();
+      lines2.push(...paramsLines.map((line) => shift + line));
+    }
+    lines2.push(`${shift}}`);
+  }
+}
+
+// src/config/splitTransitionString.ts
+function splitTransitionString(str) {
+  let list = [];
+  let pos = 0;
+  const matches = Array.from(
+    str.matchAll(/-\s*("[^"]*?"|'[^']*?'|[^-]*?)\s*->/g)
+  );
+  for (const match of matches) {
+    list.push(str.substring(pos, match.index));
+    list.push(match[1]);
+    pos = match.index + match[0].length;
+  }
+  list.push(str.substring(pos));
+  list = list.map((str2) => str2.trim());
+  const transitions = [];
+  for (let i = 0; i < list.length - 2; ) {
+    const from = list[i++] || "";
+    const event = list[i++] || "";
+    const to = list[i] || "";
+    transitions.push([from, event, to]);
+  }
+  return transitions;
+}
+
+// src/config/toFsmStateConfig.ts
+function toFsmStateConfig(json) {
+  if (!json || typeof json !== "object")
+    return;
+  const { key, transitions, states, ...options } = json;
+  if (typeof key !== "string")
+    return;
+  const stateTransitions = toFsmTransitions(transitions);
+  const substates = toArray(states).map(toFsmStateConfig).filter((v) => !!v);
+  const state = {
+    key,
+    transitions: stateTransitions
+  };
+  if (substates && substates.length > 0)
+    state.states = substates;
+  return Object.assign(state, options);
+  function toFsmTransitions(json2) {
+    const transitions2 = [];
+    const index = {};
+    const array = toArray(json2);
+    for (let line of array) {
+      const lineTransitions = typeof line === "string" ? splitTransitionString(line) : [toArray(line)];
+      for (const transition of lineTransitions.map(validateTransition)) {
+        if (!transition)
+          continue;
+        const key2 = transition.join("|");
+        if (key2 in index)
+          continue;
+        index[key2] = true;
+        transitions2.push(transition);
+      }
+    }
+    return transitions2;
+  }
+  function validateTransition(value) {
+    const array = toArray(value);
+    if (array.length !== 3)
+      return;
+    const [from, event, to] = array;
+    if (typeof from !== "string" || typeof event !== "string" || typeof to !== "string")
+      return;
+    return [from, event, to];
+  }
+  function toArray(value) {
+    if (value === void 0)
+      return [];
+    if (Array.isArray(value))
+      return value;
+    return [value];
+  }
+}
+
+export { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig };

package/dist/index-config.d.ts

@@ -0,0 +1,12 @@
+import { T as Transition, F as FsmStateConfig } from './StateChart-4_Yew7nT.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-4_Yew7nT.js';
+
+declare function concatTransitionsToString(transitions: Transition[]): string[];
+
+declare function serializeProcessConfig(config: FsmStateConfig | undefined): string;
+
+declare function splitTransitionString(str: string): Transition[];
+
+declare function toFsmStateConfig(json: any): FsmStateConfig | undefined;
+
+export { FsmStateConfig, Transition, concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig };

package/dist/index-config.js

@@ -0,0 +1,2 @@
+export { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig } from './chunk-SHSJVXEB.js';
+import './chunk-XEO3YXBM.js';

package/dist/{index-html-D4UI0s_n.d.ts → index-html-C3JXXoPE.d.ts}

@@ -1,4 +1,4 @@
-import { S as StateChart, d as TransitionsGraph } from './StateChart-PdtJDEPy.js';
+import { S as StateChart, d as TransitionsGraph } from './StateChart-4_Yew7nT.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-PdtJDEPy.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-D4UI0s_n.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-4_Yew7nT.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-C3JXXoPE.js';

package/dist/index-html.js

@@ -1,3 +1,3 @@
-export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle } from './chunk-NLFRNVS3.js';
+export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle } from './chunk-2BBNBZQI.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-PdtJDEPy.js';
-export { D as Dimensions, a as Position, b as StateGraphEdge, c as StateGraphNode } from './StateChart-PdtJDEPy.js';
+import { T as Transition, P as Padding, G as GraphParamsProvider, d as TransitionsGraph, F as FsmStateConfig, S as StateChart } from './StateChart-4_Yew7nT.js';
+export { D as Dimensions, a as Position, b as StateGraphEdge, c as StateGraphNode } from './StateChart-4_Yew7nT.js';
 
 /**
  * Build graphs corresponding to the specified transitions.

package/dist/index-runtime.d.ts

@@ -1,5 +1,5 @@
-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';
+import { S as StateChart, c as StateGraphNode, b as StateGraphEdge } from './StateChart-4_Yew7nT.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-4_Yew7nT.js';
 
 type RuntimeListener = (id: string) => void;
 declare class RuntimeStatechartApi {

package/dist/index.d.ts

@@ -1,8 +1,9 @@
-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 { 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-4_Yew7nT.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-D4UI0s_n.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-C3JXXoPE.js';
 export { RuntimeListener, RuntimeStatechartApi, StateChartIndex } from './index-runtime.js';
 
-declare function toKebabCase(str: string): string;
+declare function toKebabCase(str?: string): string;
 
 export { toKebabCase };

package/dist/index.js

@@ -1,5 +1,6 @@
+export { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig } from './chunk-SHSJVXEB.js';
 export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-OTGN3OYG.js';
-export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase } from './chunk-NLFRNVS3.js';
+export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase } from './chunk-2BBNBZQI.js';
 import './chunk-NXWOFQMO.js';
 export { RuntimeStatechartApi, StateChartIndex } from './chunk-NXS24DZQ.js';
 import './chunk-XEO3YXBM.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statewalker/fsm-charts",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "HFSM Implementation",
   "keywords": [],
   "homepage": "https://github.com/statewalker/statewalker-fsm-charts",
@@ -21,6 +21,13 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./src": {
+      "import": "./src"
+    },
+    "./src/index.ts": {
       "import": "./src/index.ts"
     }
   },

package/src/config/concatTransitionsToString.ts

@@ -0,0 +1,21 @@
+import { type Transition } from "../types/index.ts";
+
+export function concatTransitionsToString(transitions: Transition[]) {
+  let list: string[] = [];
+  let str: string = "";
+  let prev: undefined | string;
+  for (const [from, event, to] of transitions) {
+    if (prev !== from) {
+      if (str) list.push(str);
+      str = from;
+    }
+    str += ` -${escape(event)}-> ${escape(to)}`;
+    prev = to;
+  }
+  if (str) list.push(str);
+  return list;
+
+  function escape(str: string): string {
+    return str;
+  }
+}

package/src/config/index.ts

@@ -0,0 +1,4 @@
+export * from "./concatTransitionsToString.ts";
+export * from "./serializeProcessConfig.ts";
+export * from "./splitTransitionString.ts";
+export * from "./toFsmStateConfig.ts";

package/src/config/serializeProcessConfig.ts

@@ -0,0 +1,47 @@
+import type { FsmStateConfig } from "../types/index.ts";
+
+export function serializeProcessConfig(config: FsmStateConfig | undefined) {
+  if (!config) return "";
+  let lines: string[] = [];
+  visit(config, lines);
+  return lines.join("\n");
+
+  function visit(config: FsmStateConfig, lines: string[], shift = " ") {
+    lines.push(`${shift}{`);
+    const { key, states, transitions, ...params } = config;
+    lines.push(`${shift}  "key": ${JSON.stringify(key)}`);
+    if (transitions && transitions.length > 0) {
+      lines[lines.length - 1] += ",";
+      lines.push(`${shift}  "transitions": [`);
+      for (let i = 0; i < transitions.length; i++) {
+        if (i > 0) {
+          lines[lines.length - 1] += ",";
+        }
+        lines.push(`${shift}    ${JSON.stringify(transitions[i])}`);
+      }
+      lines.push(`${shift}  ]`);
+    }
+
+    if (states && states.length > 0) {
+      lines[lines.length - 1] += ",";
+      lines.push(`${shift}  "states": [`);
+      for (let i = 0; i < states.length; i++) {
+        if (i > 0) {
+          lines[lines.length - 1] += ",";
+        }
+        visit(states[i], lines, shift + "    ");
+      }
+      lines.push(`${shift}  ]`);
+    }
+
+    if (params && Object.keys(params).length > 0) {
+      lines[lines.length - 1] += ",";
+      const str = JSON.stringify(params, null, 2);
+      const paramsLines = str.split("\n");
+      paramsLines.shift();
+      paramsLines.pop();
+      lines.push(...paramsLines.map((line) => shift + line));
+    }
+    lines.push(`${shift}}`);
+  }
+}

package/src/config/splitTransitionString.ts

@@ -0,0 +1,24 @@
+import { type Transition } from "../types/index.ts";
+
+export function splitTransitionString(str: string): Transition[] {
+  let list: string[] = [];
+  let pos = 0;
+  const matches = Array.from(
+    str.matchAll(/-\s*("[^"]*?"|'[^']*?'|[^-]*?)\s*->/g)
+  );
+  for (const match of matches) {
+    list.push(str.substring(pos, match.index));
+    list.push(match[1]);
+    pos = match.index + match[0].length;
+  }
+  list.push(str.substring(pos));
+  list = list.map((str) => str.trim());
+  const transitions: Transition[] = [];
+  for (let i = 0; i < list.length - 2; ) {
+    const from = list[i++] || "";
+    const event = list[i++] || "";
+    const to = list[i] || "";
+    transitions.push([from, event, to]);
+  }
+  return transitions;
+}

package/src/config/toFsmStateConfig.ts

@@ -0,0 +1,57 @@
+import { splitTransitionString } from "./splitTransitionString.ts";
+import type { FsmStateConfig, Transition } from "../types/index.ts";
+
+export function toFsmStateConfig(json: any): FsmStateConfig | undefined {
+  if (!json || typeof json !== "object") return;
+  const { key, transitions, states, ...options } = json;
+  if (typeof key !== "string") return;
+  const stateTransitions = toFsmTransitions(transitions);
+  const substates = toArray(states)
+    .map(toFsmStateConfig)
+    .filter((v) => !!v) as FsmStateConfig[];
+  const state: FsmStateConfig = {
+    key,
+    transitions: stateTransitions,
+  };
+  if (substates && substates.length > 0) state.states = substates;
+  return Object.assign(state, options);
+
+  function toFsmTransitions(json: any): Transition[] {
+    const transitions: Transition[] = [];
+    const index: Record<string, boolean> = {};
+    const array = toArray(json);
+    for (let line of array) {
+      const lineTransitions =
+        typeof line === "string"
+          ? splitTransitionString(line)
+          : [toArray(line)];
+      for (const transition of lineTransitions.map(validateTransition)) {
+        if (!transition) continue;
+        const key = transition.join("|");
+        if (key in index) continue;
+        index[key] = true;
+        transitions.push(transition);
+      }
+    }
+    return transitions;
+  }
+
+  function validateTransition(value: any): Transition | undefined {
+    const array = toArray(value);
+    if (array.length !== 3) return;
+    const [from, event, to] = array;
+    if (
+      typeof from !== "string" ||
+      typeof event !== "string" ||
+      typeof to !== "string"
+    )
+      return;
+    return [from, event, to];
+  }
+
+  function toArray(value: any) {
+    if (value === undefined) return [];
+    if (Array.isArray(value)) return value;
+    return [value];
+  }
+}

package/src/full/index.ts

@@ -0,0 +1 @@
+export * from "./toFsmStateCharts.ts";

package/src/full/toFsmStateCharts.ts

@@ -0,0 +1,118 @@
+import { newId } from "../utils/newId.ts";
+import { newRegistry } from "../utils/newRegistry.ts";
+import { RuntimeStatechartApi, StateChartIndex } from "../runtime/index.ts";
+import {
+  buildStatechartCss,
+  buildStatechartsPanel,
+  FsmStateConfig,
+  StateChart,
+  StateGraphEdge,
+} from "../index-html.ts";
+import { buildCharts, getGraphParamsProvider } from "../index-layout.ts";
+
+export type FsmStateCharts = {
+  api: RuntimeStatechartApi;
+  index: StateChartIndex;
+  statechart: StateChart;
+  html: string;
+  element: HTMLElement;
+
+  register: (action: () => void) => () => void;
+  cleanup: () => void;
+};
+
+export function toFsmStateCharts({
+  config,
+  lodash,
+  onTransitionClick,
+}: {
+  onTransitionClick: (transition: StateGraphEdge) => unknown;
+  config: FsmStateConfig;
+  lodash: any;
+}): FsmStateCharts {
+  const statechart = buildCharts({
+    lodash,
+    newId,
+    config,
+    padding: [15, 15],
+    ...getGraphParamsProvider({
+      // fontSize: 14,
+      stateFontSize: 14,
+      stateTextPadding: [14, 16],
+      transitionsFontSize: 12,
+      transitionsTextPadding: 6,
+    }),
+  });
+  const index = new StateChartIndex({ statechart });
+
+  const lines: string[] = [];
+  buildStatechartsPanel({
+    statechart,
+    newId,
+    println: (str) => lines.push(str),
+  });
+  const html = lines.join("\n");
+  const statechartId = newId("statechart");
+  const css = buildStatechartCss({
+    // prefix: `#${statechartId}`
+  });
+
+  const container = document.createElement("div");
+  container.innerHTML = `${html}
+<style>
+${css}
+#${statechartId} {
+  padding: 0.5em 0;
+}
+</style>`;
+  container.id = statechartId;
+  // const style = container.querySelector("style");
+
+  const [register, cleanup] = newRegistry();
+  register(() => {
+    container.remove();
+  });
+
+  const api = new RuntimeStatechartApi({
+    element: container,
+    statechart,
+  });
+  const topNodeId = index.getStackByStateId(statechart.id)[0].id;
+  // api.selectState(topNodeId);
+  api.openStatePanel(topNodeId);
+
+  register(
+    api.onStateClick((stateId) => {
+      const nodes = index.getStackByStateId(stateId);
+      const nodeIds = nodes.map((n) => n.id);
+      api.deselectTransitions();
+      const selected = api.toggleState(...nodeIds);
+      for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        const stateId = node.id;
+        if (i < nodes.length - 1 || selected) {
+          const transitions = index.getTransitions(stateId);
+          transitions.forEach((t) => api.selectTransition(t.id));
+        }
+      }
+    })
+  );
+
+  if (onTransitionClick) {
+    register(
+      api.onTransitionClick((transitionId) => {
+        const transition = index.getEdgeById(transitionId);
+        transition && onTransitionClick(transition);
+      })
+    );
+  }
+  return {
+    register,
+    cleanup,
+    statechart,
+    api,
+    html,
+    element: container,
+    index,
+  };
+}

package/src/html/buildStatechartStyles.ts

@@ -1,5 +1,4 @@
-import { tail } from "lodash";
-import type { CssTree } from "../utils/serializeCss";
+import type { CssTree } from "../utils/serializeCss.ts";
 
 export const activeStatesStyle = {
   backgroundColor: "white",

package/src/index-config.ts

@@ -0,0 +1,2 @@
+export type * from "./types/index.ts";
+export * from "./config/index.ts";

package/src/index-html.ts

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

package/src/index-layout.ts

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

package/src/index-runtime.ts

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

package/src/index.ts

@@ -1,4 +1,5 @@
-export * from "./types/index.ts";
+export type * from "./types/index.ts";
+export * from "./config/index.ts";
 export * from "./layout/index.ts";
 export * from "./html/index.ts";
 export * from "./runtime/index.ts";

package/src/types/FsmStateConfig.ts

@@ -1,7 +1,16 @@
 import type { Transition } from "./Transition.ts";
 
+// export type FsmStateKey = string;
+// export type FsmEventKey = string;
+// export type FsmTransition = [FsmStateKey, FsmEventKey, FsmStateKey];
+// export type FsmState = {
+//   key: string;
+//   transitions: FsmTransition[];
+//   states?: FsmState[];
+// } & Record<string, any>;
+
 export type FsmStateConfig = {
   key: string;
   transitions: Transition[];
   states?: FsmStateConfig[];
-};
+} & Record<string, any>;

package/src/types/index.ts

@@ -1,10 +1,10 @@
-export * from "./Dimensions.ts";
-export * from "./FsmStateConfig.ts";
-export * from "./GraphParamsProvider.ts";
-export * from "./Padding.ts";
-export * from "./Position.ts";
-export * from "./StateChart.ts";
-export * from "./StateGraphEdge.ts";
-export * from "./StateGraphNode.ts";
-export * from "./Transition.ts";
-export * from "./TransitionsGraph.ts";
+export type * from "./Dimensions.ts";
+export type * from "./FsmStateConfig.ts";
+export type * from "./GraphParamsProvider.ts";
+export type * from "./Padding.ts";
+export type * from "./Position.ts";
+export type * from "./StateChart.ts";
+export type * from "./StateGraphEdge.ts";
+export type * from "./StateGraphNode.ts";
+export type * from "./Transition.ts";
+export type * from "./TransitionsGraph.ts";

package/src/utils/domToText.ts

@@ -0,0 +1,27 @@
+export function domToText(elm: HTMLElement) {
+  const lines: string[] = [];
+  visit(elm, (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      lines.push(node.textContent || "");
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      if (
+        node.nodeName === "BR" ||
+        node.nodeName === "P" ||
+        node.nodeName === "DIV"
+      ) {
+        lines.push("\n");
+      }
+    }
+  });
+  return lines.join("");
+
+  function visit(el: HTMLElement, visitor: (node: Node) => void) {
+    for (var i = 0; i < el.childNodes.length; i++) {
+      const child = el.childNodes[i];
+      const result = visitor(el.childNodes[i]);
+      if (child.nodeType !== Node.ELEMENT_NODE) continue;
+      if (result !== undefined && !Boolean(result)) continue;
+      visit(child as HTMLElement, visitor);
+    }
+  }
+}

package/src/utils/newId.ts

@@ -0,0 +1,5 @@
+export function newId(prefix: string = "id"): string {
+  const ns = newId as any;
+  const id = (ns._idCounter = (ns._idCounter || 0) + 1);
+  return `${prefix}_${id}`;
+}

package/src/utils/newRegistry.ts

@@ -0,0 +1,33 @@
+export type Registry = [
+  register: (action: () => unknown) => (skipCall?: boolean) => void,
+  clear: () => void,
+  unregister: (action: () => unknown) => void,
+];
+
+export function newRegistry(
+  onError: (error: any) => unknown = console.error,
+): Registry {
+  let counter = 0;
+  const registrations: Record<
+    number,
+    ((skip?: boolean) => void) & { action: () => void }
+  > = {};
+  const register = (action: () => unknown) => {
+    const id = counter++;
+    return (registrations[id] = Object.assign(
+      function (skip?: boolean) {
+        try {
+          delete registrations[id];
+          return !skip && action && action();
+        } catch (error) {
+          onError(error);
+        }
+      },
+      { action },
+    ));
+  };
+  const unregister = (action: () => void) =>
+    Object.values(registrations).forEach((r) => r.action === action && r(true));
+  const clear = () => Object.values(registrations).forEach((r) => r());
+  return [register, clear, unregister];
+}

package/src/utils/serializeAttrs.ts

@@ -1,9 +1,11 @@
+import { toKebabCase } from "./toKebabCase.ts";
+
 export function serializeAttrs(
   attrs: Record<string, string | number | undefined> = {},
   {
     prefix = "",
     transform = false,
-  }: { prefix: string; transform: boolean } = {}
+  }: { prefix?: string; transform?: boolean } = {}
 ) {
   const result: string[] = [];
   for (const [key, value] of Object.entries(attrs || {}).sort(([a], [b]) =>
@@ -13,7 +15,9 @@ export function serializeAttrs(
     result.push(
       `${prefix}${escapeValue(key)}${
         "=" +
-        JSON.stringify(escapeValue(transform ? toKebabCase(value) : value))
+        JSON.stringify(
+          escapeValue(transform ? toKebabCase(String(value)) : value)
+        )
       }`
     );
   }

package/src/utils/toKebabCase.ts

@@ -1,13 +1,13 @@
-export function toKebabCase(str: string): string {
+export function toKebabCase(str?: string): string {
   // Remove spaces:
-  str = str.trim().replace(/\s+/gim, "-");
+  str = (str || "").trim().replace(/\s+/gim, "-");
   // Transform to kebab:
   str = str.replace(
     /([^A-Z]?)([A-Z])/g,
     (_, a, b) => a.toLowerCase() + "-" + b.toLowerCase()
   );
   return str;
-  
+
   // return (
   //   str.match(
   //     /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
@@ -15,4 +15,4 @@ export function toKebabCase(str: string): string {
   // )
   //   .join("-")
   //   .toLowerCase();
-}
+}

package/src/lodash-es/_deleteme.js

@@ -1,291 +0,0 @@
-// export function constant(value) {
-//   return function () {
-//     return value;
-//   };
-// }
-// export function clone(obj) {
-//   return Object.assign({}, obj, {});
-//   // return JSON.parse(JSON.stringify(obj));
-// }
-
-// export const cloneDeep = clone;
-// export function defaults(...list) {
-//   const result = {};
-//   for (const obj of list) {
-//     for (const [key, value] of Object.entries(obj)) {
-//       if (!(key in result)) {
-//         result[key] = value;
-//       }
-//     }
-//   }
-//   return result;
-// }
-// export function forEach(array, action) {
-//   if (Array.isArray(array)) array.forEach(action);
-//   else Object.entries(([key, value]) => action(value, key));
-// }
-// export const each = forEach;
-// export function find(list, check) {
-//   const idx = list.indexOf(check);
-//   return idx >= 0 ? list[idx] : undefined;
-// }
-// export function filter(list, accept) {
-//   return list.filter(accept);
-// }
-// // export function flatten(list, accept) {
-// //   return list.flatten(accept);
-// // }
-// // export function forIn(obj, action) {
-// //   for (const [key, value] of Object.entries(obj)) {
-// //     if (action(value, key, obj) === false) break;
-// //   }
-// // }
-// // export function forOwn(obj, action) {
-// //   for (const [key, value] of Object.entries(obj)) {
-// //     if (!Object.hasOwnProperty(key)) continue;
-// //     if (action(value, key, obj) === false) break;
-// //   }
-// // }
-// export function has(obj, field) {
-//   return field in obj;
-// }
-// export function isArray(obj) {
-//   return Array.isArray(obj);
-// }
-// export function isEmpty(obj) {
-//   if (typeof obj !== "object") return true;
-//   if (obj === null || obj === undefined) return true;
-//   if (isArray(obj)) return obj.length === 0;
-//   return Object.keys(obj).length === 0;
-// }
-// export function isFunction(obj) {
-//   return typeof obj === "function";
-// }
-// export function isUndefined(obj) {
-//   return obj === undefined;
-// }
-// export function keys(obj) {
-//   return Object.keys(obj);
-// }
-// // export function last(array) {
-// //   const length = array == null ? 0 : array.length;
-// //   return length ? array[length - 1] : undefined;
-// // }
-// export function map(obj, action) {
-//   if (Array.isArray(obj)) {
-//     return obj.map(action);
-//   } else {
-//     return Object.entries(obj).map(([key, value]) => action(value, key));
-//   }
-// }
-// export function mapValues(obj, action) {
-//   return (Array.isArray(obj) ? obj : Object.values(obj)).map(action);
-// }
-// export function max(list) {
-//   let max = undefined;
-//   for (let i = 0; i < list.length; i++) {
-//     if (i === 0 || list[i] < max) {
-//       max = list[i];
-//     }
-//   }
-//   return max;
-// }
-// export function merge(...list) {
-//   return list.reduce((result, obj) => {
-//     for (const [key, value] of Object.entries(obj)) {
-//       result[key] = value;
-//     }
-//     return result;
-//   }, {});
-// }
-// export function min(list) {
-//   return minBy(list, (d) => d);
-// }
-// export function minBy(list, get) {
-//   let val, min;
-//   for (let i = 0; i < list.length; i++) {
-//     const value = get(list[i], i, list);
-//     if (i === 0 || value > val) {
-//       min = list[i];
-//       val = value;
-//     }
-//   }
-//   return min;
-// }
-// // export function now() {
-// //   return Date.now();
-// // }
-// export function pick(obj, keys) {
-//   return keys.reduce((result, key) => ((result[key] = obj[key]), result), {});
-// }
-// export function range(start, stop, step) {
-//   if (stop === undefined) {
-//     stop = start;
-//     start = 0;
-//     step = start > 0 ? 1 : -1;
-//   } else if (step === undefined) {
-//     step = stop > start ? 1 : -1;
-//   }
-//   const delta = Math.abs(stop - start);
-//   let result = [];
-//   for (let i = 0, val = start; i < delta; i++, val += step) {
-//     result.push(val);
-//   }
-//   return result;
-// }
-// export function reduce(list, action) {
-//   if (Array.isArray(list)) return list.reduce(action, {});
-//   else
-//     Object.entries(list).reduce(
-//       (result, [key, value]) => action(result, value, key),
-//       {}
-//     );
-// }
-
-// export function sortBy(list, get) {
-//   return list.sort((a, b) => {
-//     const keyA = get(a);
-//     const keyB = get(b);
-//     return keyA > keyB ? 1 : keyA === keyB ? 0 : -1;
-//   });
-// }
-// // export function size(list) {
-// //   return (Array.isArray(list) ? list : Object.keys(list)).length;
-// // }
-
-// // export const transform = reduce;
-
-// export function values(obj) {
-//   return Array.isArray(obj) ? [...obj] : Object.values(obj);
-// }
-
-// let idCounter = 0;
-// export function uniqueId(prefix) {
-//   var id = ++idCounter;
-//   return toString(prefix) + id;
-// }
-
-// export function union(...values) {
-//   const set = new Set();
-//   for (const val of values) {
-//     for (const item of toArray(val)) {
-//       set.add(item);
-//     }
-//   }
-//   return [...set];
-// }
-// function toArray(val) {
-//   return Array.isArray(val) ? val : val !== undefined ? [val] : [];
-// }
-// // export { default as zipObject } from "lodash/zipObject.js";
-
-// // export { default as constant } from "lodash/constant.js";
-// // export { default as clone } from "lodash/clone.js";
-// // export { default as cloneDeep } from "lodash/cloneDeep.js";
-// // export { default as defaults } from "lodash/defaults.js";
-// // export { default as each } from "lodash/forEach.js";
-// // export { default as forEach } from "lodash/forEach.js";
-// // export { default as find } from "lodash/find.js";
-// // export { default as filter } from "lodash/filter.js";
-// // export { default as flatten } from "lodash/flatten.js";
-// // export { default as forIn } from "lodash/forIn.js";
-// // export { default as forOwn } from "lodash/forOwn.js";
-// // export { default as has } from "lodash/has.js";
-// // export { default as isArray } from "lodash/isArray.js";
-// // export { default as isEmpty } from "lodash/isEmpty.js";
-// // export { default as isFunction } from "lodash/isFunction.js";
-// // export { default as isUndefined } from "lodash/isUndefined.js";
-// // export { default as keys } from "lodash/keys.js";
-// // export { default as last } from "lodash/last.js";
-// // export { default as map } from "lodash/map.js";
-// // export { default as mapValues } from "lodash/mapValues.js";
-// // export { default as max } from "lodash/max.js";
-// // export { default as merge } from "lodash/merge.js";
-// // export { default as min } from "lodash/min.js";
-// // export { default as minBy } from "lodash/minBy.js";
-// // export { default as now } from "lodash/now.js";
-// // export { default as pick } from "lodash/pick.js";
-// // export { default as range } from "lodash/range.js";
-// // export { default as reduce } from "lodash/reduce.js";
-// // export { default as sortBy } from "lodash/sortBy.js";
-// // export { default as size } from "lodash/size.js";
-// // export { default as transform } from "lodash/transform.js";
-// // export { default as values } from "lodash/values.js";
-// // export { default as uniqueId } from "lodash/uniqueId.js";
-// // export { default as union } from "lodash/union.js";
-// // export { default as zipObject } from "lodash/zipObject.js";
-
-// // ---------------------------------------
-// // export { default as constant } from "lodash.constant";
-// // export { default as clone } from "lodash.clone";
-// // export { default as cloneDeep } from "lodash.clonedeep";
-// // export { default as defaults } from "lodash.defaults";
-// // export { default as each } from "lodash.foreach";
-// // export { default as forEach } from "lodash.foreach";
-// // export { default as find } from "lodash.find";
-// // export { default as filter } from "lodash.filter";
-// // export { default as flatten } from "lodash.flatten";
-// // export { default as forIn } from "lodash.forin";
-// // export { default as forOwn } from "lodash.forown";
-// // export { default as has } from "lodash.has";
-// // export { default as isArray } from "lodash.isarray";
-// // export { default as isEmpty } from "lodash.isempty";
-// // export { default as isFunction } from "lodash.isfunction";
-// // export { default as isUndefined } from "lodash.isundefined";
-// // export { default as keys } from "lodash.keys";
-// // export { default as last } from "lodash.last";
-// // export { default as map } from "lodash.map";
-// // export { default as mapValues } from "lodash.mapvalues";
-// // export { default as max } from "lodash.max";
-// // export { default as merge } from "lodash.merge";
-// // export { default as min } from "lodash.min";
-// // export { default as minBy } from "lodash.minby";
-// // export { default as now } from "lodash.now";
-// // export { default as pick } from "lodash.pick";
-// // export { default as range } from "lodash.range";
-// // export { default as reduce } from "lodash.reduce";
-// // export { default as sortBy } from "lodash.sortby";
-// // export { default as size } from "lodash.size";
-// // export { default as transform } from "lodash.transform";
-// // export { default as values } from "lodash.values";
-// // export { default as uniqueId } from "lodash.uniqueid";
-// // export { default as union } from "lodash.union";
-// // export { default as zipObject } from "lodash.zipobject";
-
-// // export {
-// // constant,
-// // clone,
-// // cloneDeep,
-// // defaults,
-// // each,
-// // find,
-// // filter,
-// // flatten,
-// // forEach,
-// // forIn,
-// // forOwn,
-// // has,
-// // isArray,
-// // isEmpty,
-// // isFunction,
-// // isUndefined,
-// // keys,
-// // last,
-// // map,
-// // mapValues,
-// // max,
-// // merge,
-// // min,
-// // minBy,
-// // now,
-// // pick,
-// // range,
-// // reduce,
-// // sortBy,
-// // size,
-// // transform,
-// // values,
-// // uniqueId,
-// // union,
-// // zipObject,
-// // } from "lodash-es";