@statewalker/fsm-charts 0.1.7 → 0.1.9

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

@@ -15,7 +15,7 @@ type Transition = [string, string, string];
 
 type FsmStateConfig = {
     key: string;
-    transitions: Transition[];
+    transitions?: Transition[];
     states?: FsmStateConfig[];
 } & Record<string, any>;
 

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

@@ -1,5 +1,4 @@
-import { getPadding } from './chunk-NXWOFQMO.js';
-import { __publicField } from './chunk-XEO3YXBM.js';
+import { getPadding } from './chunk-FIQDLBWD.js';
 
 // src/utils/toKebabCase.ts
 function toKebabCase(str) {
@@ -291,8 +290,7 @@ function serializeAttrs(attrs = {}, {
   for (const [key, value] of Object.entries(attrs || {}).sort(
     ([a], [b]) => a > b ? 1 : -1
   )) {
-    if (value === void 0 || value === null || value === "")
-      continue;
+    if (value === void 0 || value === null || value === "") continue;
     result.push(
       `${prefix}${escapeValue(key)}${"=" + JSON.stringify(
         escapeValue(transform ? toKebabCase(String(value)) : value)
@@ -308,13 +306,12 @@ function serializeAttrs(attrs = {}, {
 // src/utils/BasisCurve.ts
 var BasisCurve = class {
   constructor(context) {
-    __publicField(this, "_context");
-    __publicField(this, "_x0", 0);
-    __publicField(this, "_y0", 0);
-    __publicField(this, "_x1", 0);
-    __publicField(this, "_y1", 0);
-    __publicField(this, "_point", 0);
-    __publicField(this, "_line", 0);
+    this._x0 = 0;
+    this._y0 = 0;
+    this._x1 = 0;
+    this._y1 = 0;
+    this._point = 0;
+    this._line = 0;
     this._context = context;
   }
   $point(x, y) {

package/dist/{chunk-NXWOFQMO.js → chunk-FIQDLBWD.js}

@@ -1,7 +1,6 @@
 // src/utils/getPadding.ts
 function getPadding(padding) {
-  if (typeof padding === "number")
-    return [padding, padding, padding, padding];
+  if (typeof padding === "number") return [padding, padding, padding, padding];
   if (padding.length === 2)
     return [padding[0], padding[1], padding[0], padding[1]];
   return padding;

package/dist/{chunk-NXS24DZQ.js → chunk-FS3L6FBI.js}

@@ -1,17 +1,13 @@
-import { __publicField } from './chunk-XEO3YXBM.js';
-
 // src/runtime/RuntimeStatechartApi.ts
 var RuntimeStatechartApi = class {
   constructor({
     element,
     statechart
   }) {
-    __publicField(this, "element");
-    __publicField(this, "statechart");
-    __publicField(this, "_listenersCounter", 0);
-    __publicField(this, "_transitionsClickListeners", {});
-    __publicField(this, "_statesClickListeners", {});
-    __publicField(this, "_registry", {});
+    this._listenersCounter = 0;
+    this._transitionsClickListeners = {};
+    this._statesClickListeners = {};
+    this._registry = {};
     this.element = element;
     this.statechart = statechart;
     this._bindListeners();
@@ -151,10 +147,8 @@ var RuntimeStatechartApi = class {
   }
   _setStatePanelStatus(selector, open) {
     [...this.element.querySelectorAll(selector)].forEach((elm) => {
-      if (open)
-        elm.setAttribute("open", "open");
-      else
-        elm.removeAttribute("open");
+      if (open) elm.setAttribute("open", "open");
+      else elm.removeAttribute("open");
     });
   }
   _addStateModifier(cssSelector, modifier = "selected") {
@@ -179,8 +173,7 @@ var RuntimeStatechartApi = class {
       if (elm.tagName.toLowerCase() === "details") {
         apply(elm, detailsModifier);
         const labelElm = elm.querySelector(".state-details__label");
-        if (labelElm)
-          apply(labelElm, stateLabelsModifier);
+        if (labelElm) apply(labelElm, stateLabelsModifier);
       } else {
         apply(elm, stateModifier);
       }
@@ -217,12 +210,11 @@ var RuntimeStatechartApi = class {
 // 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._chartsIndex = {};
+    this._nodesIndex = {};
+    this._nodesParentsIndex = {};
+    this._edgeIndex = {};
+    this._edgesParentsIndex = {};
     this.statechart = statechart;
     this._buildIndexes();
   }
@@ -263,8 +255,7 @@ var StateChartIndex = class {
     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;
+      if (!node) break;
       result.push(node.id);
       list = [...node.children || [], ...node.nodes || []];
     }
@@ -276,16 +267,13 @@ var StateChartIndex = class {
    * @returns a stack of nodes
    */
   getStackByStateId(id) {
-    if (!id)
-      return [];
+    if (!id) return [];
     const node = this._chartsIndex[id] || this._nodesIndex[id];
-    if (!node)
-      return [];
+    if (!node) return [];
     const parentId = this._nodesParentsIndex[id];
     if (parentId) {
       const parentStack = this.getStackByStateId(parentId);
-      if (!parentStack.length)
-        return [];
+      if (!parentStack.length) return [];
       parentStack.push(node);
       return parentStack;
     } else {
@@ -301,8 +289,7 @@ var StateChartIndex = class {
   getTransition(stateId, event) {
     const stack = this.getStackByStateId(stateId);
     const state = stack.pop();
-    if (!state || !stack.length)
-      return;
+    if (!state || !stack.length) return;
     const parent = stack[stack.length - 1];
     const t = parent.edges.find(
       (t2) => t2.from === state.key && t2.event === event
@@ -317,8 +304,7 @@ var StateChartIndex = class {
   getTransitions(stateId) {
     const stack = this.getStackByStateId(stateId);
     const state = stack.pop();
-    if (!state || !stack.length)
-      return [];
+    if (!state || !stack.length) return [];
     const parent = stack[stack.length - 1];
     return parent.edges.filter((t) => t.from === state.key);
   }
@@ -350,14 +336,11 @@ var StateChartIndex = class {
       void 0,
       void 0
     ];
-    if (!transition)
-      return result;
+    if (!transition) return result;
     const parentId = this._edgesParentsIndex[transition.id];
-    if (!parentId)
-      return result;
+    if (!parentId) return result;
     const parent = this._chartsIndex[parentId];
-    if (!parent)
-      return result;
+    if (!parent) return result;
     parent.nodes.forEach((node) => {
       if (node.key === transition.from) {
         result[0] = node.id;

package/dist/{chunk-SHSJVXEB.js → chunk-SLWDNGWK.js}

@@ -5,15 +5,13 @@ function concatTransitionsToString(transitions) {
   let prev;
   for (const [from, event, to] of transitions) {
     if (prev !== from) {
-      if (str)
-        list.push(str);
+      if (str) list.push(str);
       str = from;
     }
     str += ` -${escape(event)}-> ${escape(to)}`;
     prev = to;
   }
-  if (str)
-    list.push(str);
+  if (str) list.push(str);
   return list;
   function escape(str2) {
     return str2;
@@ -22,12 +20,11 @@ function concatTransitionsToString(transitions) {
 
 // src/config/serializeProcessConfig.ts
 function serializeProcessConfig(config) {
-  if (!config)
-    return "";
+  if (!config) return "";
   let lines = [];
   visit(config, lines);
   return lines.join("\n");
-  function visit(config2, lines2, shift = " ") {
+  function visit(config2, lines2, shift = "") {
     lines2.push(`${shift}{`);
     const { key, states, transitions, ...params } = config2;
     lines2.push(`${shift}  "key": ${JSON.stringify(key)}`);
@@ -91,19 +88,16 @@ function splitTransitionString(str) {
 
 // src/config/toFsmStateConfig.ts
 function toFsmStateConfig(json) {
-  if (!json || typeof json !== "object")
-    return;
+  if (!json || typeof json !== "object") return;
   const { key, transitions, states, ...options } = json;
-  if (typeof key !== "string")
-    return;
+  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;
+  if (substates && substates.length > 0) state.states = substates;
   return Object.assign(state, options);
   function toFsmTransitions(json2) {
     const transitions2 = [];
@@ -112,11 +106,9 @@ function toFsmStateConfig(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;
+        if (!transition) continue;
         const key2 = transition.join("|");
-        if (key2 in index)
-          continue;
+        if (key2 in index) continue;
         index[key2] = true;
         transitions2.push(transition);
       }
@@ -125,18 +117,15 @@ function toFsmStateConfig(json) {
   }
   function validateTransition(value) {
     const array = toArray(value);
-    if (array.length !== 3)
-      return;
+    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;
+    if (value === void 0) return [];
+    if (Array.isArray(value)) return value;
     return [value];
   }
 }

package/dist/chunk-TZRPE2VD.js

@@ -0,0 +1,207 @@
+// src/dom/index.ts
+function getStateDescriptionRenderer({
+  element,
+  rootStateKey,
+  splitHeader = (header) => {
+    if (!header) return [void 0, ""];
+    const text = header.innerText.trim();
+    let key;
+    let label = text;
+    text.replace(/^\s*\[(.*)\]\s*(.*)$/, (_, k, l) => {
+      key = k.trim();
+      label = l.trim() || key;
+      return "";
+    });
+    return [key, label];
+  }
+}) {
+  const docSections = buildSections(element);
+  const rootStateFilter = getStateDescriptionFilter(splitHeader, rootStateKey);
+  const rootDescription = findSection(docSections, rootStateFilter);
+  if (!rootDescription) {
+    return () => {
+    };
+  }
+  for (const node of visitSectionNodes(rootDescription)) {
+    if (node.nodeName[0] === "#") continue;
+    node.parentElement?.removeChild(node);
+  }
+  return (statesStack) => {
+    const stateKey = [...statesStack].pop();
+    const filter = getStateDescriptionFilter(splitHeader, stateKey);
+    const description = findSection(rootDescription, filter);
+    if (!description) return;
+    const elm = renderSections({
+      section: description,
+      deep: (s) => !rootStateFilter(s),
+      header: (header) => {
+        const [key, label] = splitHeader(header);
+        if (key === stateKey) {
+          return label || key;
+        }
+        return;
+      }
+    });
+    const details = elm?.querySelector("details");
+    details && (details.open = true);
+    return elm;
+  };
+  function getStateDescriptionFilter(splitHeader2, stateKey) {
+    if (!stateKey) return () => false;
+    return (section) => {
+      if (!section.header) return false;
+      const [key] = splitHeader2(section.header);
+      return key === stateKey;
+    };
+  }
+}
+function* visitDom(elm) {
+  for (let node = elm.firstChild; node; node = node.nextSibling) {
+    if (isDomElement(node)) {
+      if (node.tagName === "DIV") {
+        yield* visitDom(node);
+      } else {
+        yield node;
+      }
+    } else {
+      yield node;
+    }
+  }
+}
+function* visitSectionNodes(section) {
+  if (section.header) yield section.header;
+  yield* section.content;
+  for (const s of vistSections(section, true)) {
+    yield* visitSectionNodes(s);
+  }
+}
+function* vistSections(root, ignoreRoot = false) {
+  !ignoreRoot && (yield root);
+  for (const child of root.children) {
+    yield* vistSections(child, false);
+  }
+}
+function findSection(section, accept) {
+  for (const s of vistSections(section)) {
+    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,
+  header = (headerElm) => headerElm
+}) {
+  const container = document.createElement("div");
+  const id = `id-${String(Math.random()).split(".")[1]}-${Date.now()}`;
+  container.setAttribute("id", id);
+  if (!section) return container;
+  const sectionView = renderSection(section);
+  container.append(sectionView);
+  const style = renderSectionStyles(id);
+  container.append(style);
+  return container;
+  function renderSectionStyles(id2) {
+    const prefix = id2 ? `#${id2}` : "";
+    const style2 = document.createElement("style");
+    container.appendChild(style2);
+    style2.innerHTML = `
+      ${prefix} details {
+          border: 1px solid #aaa;
+          border-radius: 4px;
+          padding: 0.5em 0.5em 0;
+          margin-bottom: 0.5em;
+        }
+        
+      ${prefix} details > summary {
+          font-weight: bold;
+          margin: -0.5em -0.5em 0;
+          padding: 0.5em;
+          cursor: pointer;
+        }
+        
+      ${prefix} details[open] {
+          padding: 0.5em;
+        }
+      `;
+    return style2;
+  }
+  function renderSection(section2) {
+    const details = document.createElement("details");
+    const summary = document.createElement("summary");
+    details.appendChild(summary);
+    const content = document.createElement("div");
+    details.appendChild(content);
+    const headerElm = header(section2.header);
+    headerElm && summary.append(headerElm);
+    for (const node of section2.content) {
+      if (node.nodeName[0] === "#") continue;
+      content.append(node.cloneNode(true));
+    }
+    if (deep(section2)) {
+      for (const child of section2.children) {
+        content.append(renderSection(child));
+      }
+    }
+    return details;
+  }
+}
+
+export { buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections };

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

@@ -1,4 +1,4 @@
-import { getPadding } from './chunk-NXWOFQMO.js';
+import { getPadding } from './chunk-FIQDLBWD.js';
 
 // src/lodash-es/index.ts
 var _ = {
@@ -891,8 +891,7 @@ function normalizeEdge(g, e) {
   var name = e.name;
   var edgeLabel = g.edge(e);
   var labelRank = edgeLabel.labelRank;
-  if (wRank === vRank + 1)
-    return;
+  if (wRank === vRank + 1) return;
   g.removeEdge(e);
   var dummy, attrs, i;
   for (i = 0, ++vRank; vRank < wRank; ++i, ++vRank) {
@@ -1351,8 +1350,7 @@ function buildLayerGraph(g, rank2, relationship) {
 }
 function createRootNode(g) {
   var v;
-  while (g.hasNode(v = _.uniqueId("_root")))
-    ;
+  while (g.hasNode(v = _.uniqueId("_root"))) ;
   return v;
 }
 
@@ -1382,8 +1380,7 @@ function twoLayerCrossCount(g, northLayer, southLayer) {
     })
   );
   var firstIndex = 1;
-  while (firstIndex < southLayer.length)
-    firstIndex <<= 1;
+  while (firstIndex < southLayer.length) firstIndex <<= 1;
   var treeSize = 2 * firstIndex - 1;
   firstIndex -= 1;
   var tree = _.map(new Array(treeSize), function() {
@@ -1424,8 +1421,7 @@ function initOrder(g) {
     return [];
   });
   function dfs3(v) {
-    if (_.has(visited, v))
-      return;
+    if (_.has(visited, v)) return;
     visited[v] = true;
     var node = g.node(v);
     layers[node.rank].push(v);
@@ -1947,8 +1943,7 @@ function alignCoordinates(xss, alignTo) {
   _.forEach(["u", "d"], function(vert) {
     _.forEach(["l", "r"], function(horiz) {
       var alignment = vert + horiz, xs = xss[alignment], delta;
-      if (xs === alignTo)
-        return;
+      if (xs === alignTo) return;
       var xsVals = _.values(xs);
       delta = horiz === "l" ? alignToMin - _.min(xsVals) : alignToMax - _.max(xsVals);
       if (delta) {
@@ -2461,22 +2456,24 @@ function canonicalize(attrs) {
 // src/layout/buildFlatCharts.ts
 function buildFlatCharts({
   lodash,
-  transitions,
+  transitions = [],
   newId,
   getStateParams,
   getTransitionParams,
   padding = [5, 5],
   initialStateKey = "<initial>",
   finalStateKey = "<final>",
-  vertical = false
+  vertical = false,
+  direction
 }) {
   let prevLodash = getLodash();
   try {
     setLodash(lodash);
+    const rankdir = direction || (vertical ? "tb" : "lr");
     const graph = new Graph({
       directed: true,
       multigraph: true
-    }).setGraph({ rankdir: vertical ? "tb" : "lr", multigraph: true });
+    }).setGraph({ rankdir, multigraph: true });
     const nodesIndex = {};
     const getStateNodeId = (key, state = key) => {
       let id = nodesIndex[key];
@@ -2504,7 +2501,7 @@ function buildFlatCharts({
         edgeId
       );
     }
-    layout(graph, { rankdir: "lr" });
+    layout(graph, { rankdir });
     const [top, right, bottom, left] = getPadding(padding);
     const nodes = graph.nodes().map((id) => {
       const n = graph.node(id);
@@ -2567,20 +2564,24 @@ function buildCharts({
   getStateParams,
   getTransitionParams,
   padding = [5, 5],
+  vertical = false,
   initialStateKey = "<initial>",
-  finalStateKey = "<final>"
+  finalStateKey = "<final>",
+  direction
 }) {
   return buildChart(config);
   function buildChart(config2, id = newId("s")) {
     const graph = buildFlatCharts({
       lodash,
-      transitions: config2.transitions,
+      transitions: config2.transitions || [],
       newId,
       getStateParams,
       getTransitionParams,
       padding,
       initialStateKey,
-      finalStateKey
+      finalStateKey,
+      vertical,
+      direction
     });
     const index = graph.nodes.reduce((index2, node) => {
       index2[node.key] = node.id;
@@ -2615,8 +2616,7 @@ function getLabelDimensions(label, {
   let dimensions = { width: 0, height: 0 };
   let lineNumber = 0;
   for (const line of lines) {
-    if (lineNumber++)
-      dimensions.height += lineGap;
+    if (lineNumber++) dimensions.height += lineGap;
     dimensions = expandBox(
       dimensions,
       getLineDimensions({

package/dist/index-config.d.ts

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

package/dist/index-config.js

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

package/dist/index-dom.d.ts

@@ -0,0 +1,22 @@
+type DomSection = {
+    header?: HTMLElement;
+    content: Node[];
+    children: DomSection[];
+};
+declare function getStateDescriptionRenderer({ element, rootStateKey, splitHeader, }: {
+    element: HTMLElement;
+    rootStateKey: string;
+    splitHeader: (header?: HTMLElement) => [stateKey: undefined | string, label: string];
+}): (() => void) | ((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 };

package/dist/index-dom.js

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

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

@@ -1,4 +1,4 @@
-import { S as StateChart, d as TransitionsGraph } from './StateChart-4_Yew7nT.js';
+import { S as StateChart, d as TransitionsGraph } from './StateChart-DlcWaRml.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-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';
+export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, T as Transition, d as TransitionsGraph } from './StateChart-DlcWaRml.js';
+export { c as activeStatesStyle, d as activeTransitionsStyle, f as buildStateDetailsStyle, g as buildStateDetailsStyleWithModifier, b as buildStatechartCss, i as buildStatechartStyles, h as buildStatechartStylesWithModifier, j as buildStatechartSvg, a as buildStatechartsPanel, s as selectedStatesStyle, e as selectedTransitionsStyle } from './index-html-De8e33ol.js';

package/dist/index-html.js

@@ -1,3 +1,2 @@
-export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle } from './chunk-2BBNBZQI.js';
-import './chunk-NXWOFQMO.js';
-import './chunk-XEO3YXBM.js';
+export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle } from './chunk-2XPO6T2M.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-4_Yew7nT.js';
-export { D as Dimensions, a as Position, b as StateGraphEdge, c as StateGraphNode } from './StateChart-4_Yew7nT.js';
+import { T as Transition, P as Padding, G as GraphParamsProvider, d as TransitionsGraph, F as FsmStateConfig, S as StateChart } from './StateChart-DlcWaRml.js';
+export { D as Dimensions, a as Position, b as StateGraphEdge, c as StateGraphNode } from './StateChart-DlcWaRml.js';
 
 /**
  * Build graphs corresponding to the specified transitions.
@@ -12,14 +12,15 @@ export { D as Dimensions, a as Position, b as StateGraphEdge, c as StateGraphNod
  * @param vertical - Whether the graph should be vertical.
  * @returns {TransitionsGraph} - The graph with nodes and edges.
  */
-declare function buildFlatCharts({ lodash, transitions, newId, getStateParams, getTransitionParams, padding, initialStateKey, finalStateKey, vertical, }: {
-    transitions: Transition[];
+declare function buildFlatCharts({ lodash, transitions, newId, getStateParams, getTransitionParams, padding, initialStateKey, finalStateKey, vertical, direction, }: {
+    transitions?: Transition[];
     lodash: any;
     newId: (prefix: string) => string;
     initialStateKey?: string;
     finalStateKey?: string;
     vertical?: boolean;
     padding?: Padding;
+    direction?: "tb" | "bt" | "lr" | "rl";
 } & GraphParamsProvider): TransitionsGraph;
 
 /**
@@ -32,13 +33,15 @@ 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, initialStateKey, finalStateKey, }: {
+declare function buildCharts({ lodash, config, newId, getStateParams, getTransitionParams, padding, vertical, initialStateKey, finalStateKey, direction, }: {
     config: FsmStateConfig;
     lodash: any;
     newId: (prefix: string) => string;
     initialStateKey?: string;
     finalStateKey?: string;
     padding?: Padding;
+    vertical?: boolean;
+    direction?: "tb" | "bt" | "lr" | "rl";
 } & GraphParamsProvider): StateChart;
 
 /**

package/dist/index-layout.js

@@ -1,3 +1,2 @@
-export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-OTGN3OYG.js';
-import './chunk-NXWOFQMO.js';
-import './chunk-XEO3YXBM.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-U5LUJ7JS.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-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';
+import { S as StateChart, c as StateGraphNode, b as StateGraphEdge } from './StateChart-DlcWaRml.js';
+export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, P as Padding, a as Position, T as Transition, d as TransitionsGraph } from './StateChart-DlcWaRml.js';
 
 type RuntimeListener = (id: string) => void;
 declare class RuntimeStatechartApi {

package/dist/index-runtime.js

@@ -1,2 +1 @@
-export { RuntimeStatechartApi, StateChartIndex } from './chunk-NXS24DZQ.js';
-import './chunk-XEO3YXBM.js';
+export { RuntimeStatechartApi, StateChartIndex } from './chunk-FS3L6FBI.js';

package/dist/index.d.ts

@@ -1,7 +1,8 @@
-export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, T as Transition, d as TransitionsGraph } from './StateChart-4_Yew7nT.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-DlcWaRml.js';
+export { DomSection, buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './index-dom.js';
 export { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig } from './index-config.js';
 export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './index-layout.js';
-export { C as CssTree, c as activeStatesStyle, d as activeTransitionsStyle, f as buildStateDetailsStyle, g as buildStateDetailsStyleWithModifier, b as buildStatechartCss, i as buildStatechartStyles, h as buildStatechartStylesWithModifier, j as buildStatechartSvg, a as buildStatechartsPanel, s as selectedStatesStyle, e as selectedTransitionsStyle, k as serializeCss } from './index-html-C3JXXoPE.js';
+export { C as CssTree, c as activeStatesStyle, d as activeTransitionsStyle, f as buildStateDetailsStyle, g as buildStateDetailsStyleWithModifier, b as buildStatechartCss, i as buildStatechartStyles, h as buildStatechartStylesWithModifier, j as buildStatechartSvg, a as buildStatechartsPanel, s as selectedStatesStyle, e as selectedTransitionsStyle, k as serializeCss } from './index-html-De8e33ol.js';
 export { 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-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-2BBNBZQI.js';
-import './chunk-NXWOFQMO.js';
-export { RuntimeStatechartApi, StateChartIndex } from './chunk-NXS24DZQ.js';
-import './chunk-XEO3YXBM.js';
+export { buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './chunk-TZRPE2VD.js';
+export { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig } from './chunk-SLWDNGWK.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-U5LUJ7JS.js';
+export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase } from './chunk-2XPO6T2M.js';
+import './chunk-FIQDLBWD.js';
+export { RuntimeStatechartApi, StateChartIndex } from './chunk-FS3L6FBI.js';

package/package.json

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

package/src/config/serializeProcessConfig.ts

@@ -6,7 +6,7 @@ export function serializeProcessConfig(config: FsmStateConfig | undefined) {
   visit(config, lines);
   return lines.join("\n");
 
-  function visit(config: FsmStateConfig, lines: string[], shift = " ") {
+  function visit(config: FsmStateConfig, lines: string[], shift = "") {
     lines.push(`${shift}{`);
     const { key, states, transitions, ...params } = config;
     lines.push(`${shift}  "key": ${JSON.stringify(key)}`);

package/src/dom/index.ts

@@ -0,0 +1,267 @@
+export type DomSection = {
+  header?: HTMLElement;
+  content: Node[];
+  children: DomSection[];
+};
+
+export function getStateDescriptionRenderer({
+  element,
+  rootStateKey,
+  splitHeader = (
+    header?: HTMLElement,
+  ): [stateKey: undefined | string, label: string] => {
+    if (!header) return [undefined, ""];
+    const text = header.innerText.trim();
+    let key: string | undefined;
+    let label: string = text;
+    text.replace(/^\s*\[(.*)\]\s*(.*)$/, (_, k, l) => {
+      key = k.trim();
+      label = l.trim() || key;
+      return "";
+    });
+    return [key, label];
+  },
+}: {
+  element: HTMLElement;
+  rootStateKey: string;
+  splitHeader: (
+    header?: HTMLElement,
+  ) => [stateKey: undefined | string, label: string];
+}) {
+  const docSections = buildSections(element);
+  const rootStateFilter = getStateDescriptionFilter(splitHeader, rootStateKey);
+  const rootDescription = findSection(docSections, rootStateFilter);
+
+  if (!rootDescription) {
+    return () => {};
+  }
+
+  // Remove description nodes from DOM
+  for (const node of visitSectionNodes(rootDescription)) {
+    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();
+    const filter = getStateDescriptionFilter(splitHeader, stateKey);
+    const description = findSection(rootDescription, filter);
+    if (!description) return;
+    const elm = renderSections({
+      section: description,
+      deep: (s) => !rootStateFilter(s),
+      header: (header) => {
+        const [key, label] = splitHeader(header);
+        if (key === stateKey) {
+          return label || key;
+        }
+        return;
+      },
+    });
+    const details = elm?.querySelector("details");
+    details && (details.open = true);
+    return elm;
+  };
+
+  function getStateDescriptionFilter(
+    splitHeader: (header: HTMLElement) => [stateKey?: string, label?: string],
+    stateKey?: string,
+  ) {
+    if (!stateKey) return () => false;
+    return (section: DomSection) => {
+      if (!section.header) return false;
+      const [key] = splitHeader(section.header);
+      return key === stateKey;
+    };
+  }
+}
+
+export function* visitDom(elm: Node): Iterable<Node> {
+  for (let node = elm.firstChild; node; node = node.nextSibling) {
+    if (isDomElement(node)) {
+      if (node.tagName === "DIV") {
+        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;
+  for (const s of vistSections(section, true)) {
+    yield* visitSectionNodes(s);
+  }
+}
+
+export function* vistSections(
+  root: DomSection,
+  ignoreRoot: boolean = false,
+): Generator<DomSection> {
+  !ignoreRoot && (yield root);
+  for (const child of root.children) {
+    yield* vistSections(child, false);
+  }
+}
+
+export function findSection(
+  section: DomSection,
+  accept: (section: DomSection) => boolean,
+) {
+  for (const s of vistSections(section)) {
+    if (accept(s) === true) return s;
+  }
+}
+
+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,
+  header = (headerElm) => headerElm,
+}: {
+  section: DomSection;
+  deep?: (s: DomSection) => boolean;
+  header?: (header: HTMLElement) => undefined | string | HTMLElement;
+}) {
+  const container = document.createElement("div");
+  const id = `id-${String(Math.random()).split(".")[1]}-${Date.now()}`;
+  container.setAttribute("id", id);
+  if (!section) return container;
+
+  const sectionView = renderSection(section);
+  container.append(sectionView);
+  const style = renderSectionStyles(id);
+  container.append(style);
+  return container;
+
+  function renderSectionStyles(id?: string) {
+    const prefix = id ? `#${id}` : "";
+    const style = document.createElement("style");
+    container.appendChild(style);
+    style.innerHTML = `
+      ${prefix} details {
+          border: 1px solid #aaa;
+          border-radius: 4px;
+          padding: 0.5em 0.5em 0;
+          margin-bottom: 0.5em;
+        }
+        
+      ${prefix} details > summary {
+          font-weight: bold;
+          margin: -0.5em -0.5em 0;
+          padding: 0.5em;
+          cursor: pointer;
+        }
+        
+      ${prefix} details[open] {
+          padding: 0.5em;
+        }
+      `;
+    return style;
+  }
+  function renderSection(section: DomSection) {
+    const details = document.createElement("details");
+    const summary = document.createElement("summary");
+    details.appendChild(summary);
+    const content = document.createElement("div");
+    details.appendChild(content);
+    const headerElm = header(section.header!);
+    headerElm && summary.append(headerElm);
+    for (const node of section.content) {
+      if (node.nodeName[0] === "#") continue;
+      content.append(node.cloneNode(true));
+    }
+    if (deep(section)) {
+      for (const child of section.children) {
+        content.append(renderSection(child));
+      }
+    }
+    return details;
+  }
+}

package/src/index-dom.ts

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

package/src/index.ts

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

package/src/layout/buildCharts.ts

@@ -21,8 +21,10 @@ export function buildCharts({
   getStateParams,
   getTransitionParams,
   padding = [5, 5],
+  vertical = false,
   initialStateKey = "<initial>",
   finalStateKey = "<final>",
+  direction,
 }: {
   config: FsmStateConfig;
   lodash: any;
@@ -30,6 +32,8 @@ export function buildCharts({
   initialStateKey?: string;
   finalStateKey?: string;
   padding?: Padding;
+  vertical?: boolean;
+  direction?: "tb" | "bt" | "lr" | "rl";
 } & GraphParamsProvider): StateChart {
   return buildChart(config);
 
@@ -39,13 +43,15 @@ export function buildCharts({
   ): StateChart {
     const graph = buildFlatCharts({
       lodash,
-      transitions: config.transitions,
+      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;

package/src/layout/buildFlatCharts.ts

@@ -27,7 +27,7 @@ import { getLodash, setLodash } from "../lodash-es/index.ts";
 
 export function buildFlatCharts({
   lodash,
-  transitions,
+  transitions = [],
   newId,
   getStateParams,
   getTransitionParams,
@@ -35,22 +35,25 @@ export function buildFlatCharts({
   initialStateKey = "<initial>",
   finalStateKey = "<final>",
   vertical = false,
+  direction,
 }: {
-  transitions: Transition[];
+  transitions?: Transition[];
   lodash: any;
   newId: (prefix: string) => string;
   initialStateKey?: string;
   finalStateKey?: string;
   vertical?: boolean;
   padding?: Padding;
+  direction?: "tb" | "bt" | "lr" | "rl";
 } & GraphParamsProvider): TransitionsGraph {
   let prevLodash = getLodash();
   try {
     setLodash(lodash);
+    const rankdir = direction || (vertical ? "tb" : "lr");
     const graph = new Graph({
       directed: true,
       multigraph: true,
-    }).setGraph({ rankdir: vertical ? "tb" : "lr", multigraph: true });
+    }).setGraph({ rankdir, multigraph: true });
 
     const nodesIndex: Record<string, string> = {};
 
@@ -78,10 +81,10 @@ export function buildFlatCharts({
           id: edgeId,
           ...params,
         },
-        edgeId
+        edgeId,
       );
     }
-    layout(graph, { rankdir: "lr" });
+    layout(graph, { rankdir });
 
     const [top, right, bottom, left] = getPadding(padding);
 

package/src/types/FsmStateConfig.ts

@@ -11,6 +11,6 @@ import type { Transition } from "./Transition.ts";
 
 export type FsmStateConfig = {
   key: string;
-  transitions: Transition[];
+  transitions?: Transition[];
   states?: FsmStateConfig[];
 } & Record<string, any>;

package/dist/chunk-XEO3YXBM.js

@@ -1,8 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-
-export { __publicField };