@statewalker/fsm-charts 0.2.1 → 0.2.3

package/dist/{chunk-G25OZI4I.js → chunk-36ZLXJVD.js}

@@ -399,6 +399,7 @@ function buildStatechartSvg({
   initialStateKey = "<initial>",
   finalStateKey = "<final>"
 }) {
+  if (!nodes.length && !edges.length) return;
   width = Math.ceil(width);
   height = Math.ceil(height);
   println(
@@ -579,24 +580,20 @@ function buildStatechartsPanel({
     println2(
       `    <summary class="state-details__label">${statechart2.text ?? statechart2.state}</summary>`
     );
-    println2(
-      `    <div class="state-details__content">`
-    );
-    println2(
-      `      <div class="state-details__chart">`
-    );
+    println2(`    <div class="state-details__content">`);
     const printChildren = (str) => println2(`    ${str}`);
-    buildStatechartSvg({
-      graph: statechart2,
-      newId,
-      println: printChildren,
-      initialStateKey,
-      finalStateKey
-    });
-    println2(`    </div>`);
-    println2(
-      `    <div class="state-details__description">`
-    );
+    if (statechart2.nodes.length) {
+      println2(`      <div class="state-details__chart">`);
+      buildStatechartSvg({
+        graph: statechart2,
+        newId,
+        println: printChildren,
+        initialStateKey,
+        finalStateKey
+      });
+      println2(`    </div>`);
+    }
+    println2(`    <div class="state-details__description">`);
     println2(`    </div>`);
     for (const child of statechart2.children || []) {
       render(child, printChildren);

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

@@ -53,6 +53,24 @@ function buildSections(root) {
   }
   return top.content.length === 0 && top.children.length === 1 && !top.header ? top.children[0] : top;
 }
+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;
 }
@@ -76,10 +94,11 @@ function* visitDom(elm) {
   }
 }
 
-// src/dom/index.ts
-function getStateDescriptionRenderer({
+// src/dom/getStatesDescriptions.ts
+function* visitStateDescriptions({
   element,
   rootStateKey,
+  removeFromDom = true,
   splitHeader = (header) => {
     if (!header) return [void 0, ""];
     const text = header.innerText.trim();
@@ -94,29 +113,52 @@ function getStateDescriptionRenderer({
   }
 }) {
   const docSections = buildSections(element);
-  const rootStateFilter = getStateDescriptionFilter(splitHeader, rootStateKey);
-  const rootDescription = findSection(docSections, rootStateFilter);
-  if (!rootDescription) {
-    return (statesStack) => {
-      return void 0;
-    };
+  const rootDescription = findSection(docSections, (section) => {
+    if (!section.header) return false;
+    const [key] = splitHeader(section.header);
+    return key === rootStateKey;
+  });
+  if (!rootDescription) return;
+  if (removeFromDom) {
+    for (const node of visitSectionNodes(rootDescription)) {
+      if (node.nodeName[0] === "#") continue;
+      node.parentElement?.removeChild(node);
+    }
   }
-  for (const node of visitSectionNodes(rootDescription)) {
-    if (node.nodeName[0] === "#") continue;
-    node.parentElement?.removeChild(node);
+  for (const section of vistSections(rootDescription, false)) {
+    if (!section.header) continue;
+    const [state, title] = splitHeader(section.header);
+    if (state)
+      yield {
+        state,
+        title,
+        ...section
+      };
   }
+}
+function getStatesDescriptions(options) {
+  const index = {};
+  for (const description of visitStateDescriptions(options)) {
+    index[description.state] = description;
+  }
+  return index;
+}
+
+// src/dom/description-panels.ts
+function getStateDescriptionRenderer(options) {
+  const descriptionsIndex = getStatesDescriptions(options);
   return (statesStack) => {
     const stateKey = [...statesStack].pop();
-    const filter = getStateDescriptionFilter(splitHeader, stateKey);
-    const description = findSection(rootDescription, filter);
-    if (!description) return;
+    if (!stateKey) return;
+    const section = descriptionsIndex[stateKey];
+    if (!section) return;
     const elm = renderSections({
-      section: description,
-      deep: (s) => !rootStateFilter(s),
-      header: (header) => {
-        const [key, label] = splitHeader(header);
-        if (key === stateKey) {
-          return label || key;
+      section,
+      deep: (section2) => false,
+      // section.state !== options.rootStateKey, // ???
+      header: (section2) => {
+        if (section2.state === stateKey) {
+          return section2.title || section2.state;
         }
         return;
       }
@@ -125,37 +167,11 @@ function getStateDescriptionRenderer({
     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* 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 renderSections({
   section,
   deep = (s) => true,
-  header = (headerElm) => headerElm
+  header = (section2) => section2.header?.cloneNode(true)
 }) {
   const container = document.createElement("div");
   const id = `id-${String(Math.random()).split(".")[1]}-${Date.now()}`;
@@ -197,7 +213,7 @@ function renderSections({
     details.appendChild(summary);
     const content = document.createElement("div");
     details.appendChild(content);
-    const headerElm = header(section2.header);
+    const headerElm = header(section2);
     headerElm && summary.append(headerElm);
     for (const node of section2.content) {
       if (node.nodeName[0] === "#") continue;
@@ -212,4 +228,4 @@ function renderSections({
   }
 }
 
-export { findSection, getStateDescriptionRenderer, renderSections, visitSectionNodes, vistSections };
+export { buildSections, findSection, getStateDescriptionRenderer, getStatesDescriptions, isDomElement, newTreeBuilder, renderSections, toDomNodesIterator, visitDom, visitSectionNodes, visitStateDescriptions, vistSections };

package/dist/index-dom.d.ts

@@ -3,19 +3,47 @@ type DomSection = {
     content: Node[];
     children: DomSection[];
 };
+declare function buildSections(root: HTMLElement | Iterable<Node>): DomSection;
+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 isDomElement(node: Node): node is HTMLElement;
+declare function toDomNodesIterator(root: Node | Iterable<Node>): Iterable<Node>;
+declare function visitDom(elm: Node): Iterable<Node>;
 
-declare function getStateDescriptionRenderer({ element, rootStateKey, splitHeader, }: {
+declare function getStateDescriptionRenderer(options: {
     element: HTMLElement;
     rootStateKey: string;
     splitHeader?: (header?: HTMLElement) => [stateKey: undefined | string, label: string];
 }): (statesStack: string[]) => HTMLDivElement | undefined;
-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 renderSections({ section, deep, header, }: {
-    section: DomSection;
-    deep?: (s: DomSection) => boolean;
-    header?: (header: HTMLElement) => undefined | string | HTMLElement;
+declare function renderSections<T extends DomSection>({ section, deep, header, }: {
+    section: T;
+    deep?: (s: T) => boolean;
+    header?: (section: T) => undefined | string | Node;
 }): HTMLDivElement;
 
-export { findSection, getStateDescriptionRenderer, renderSections, visitSectionNodes, vistSections };
+type StateDescriptionSection = DomSection & {
+    state: string;
+    title?: string;
+};
+declare function visitStateDescriptions({ element, rootStateKey, removeFromDom, splitHeader, }: {
+    element: HTMLElement;
+    rootStateKey: string;
+    removeFromDom?: boolean;
+    splitHeader?: (header?: HTMLElement) => [stateKey: undefined | string, label: string];
+}): Generator<StateDescriptionSection>;
+declare function getStatesDescriptions(options: {
+    element: HTMLElement;
+    rootStateKey: string;
+    removeFromDom?: boolean;
+    splitHeader?: (header?: HTMLElement) => [stateKey: undefined | string, label: string];
+}): {
+    [state: string]: StateDescriptionSection;
+};
+
+declare function newTreeBuilder<T extends unknown[] = []>(context: {
+    enter: (level: number, ...params: T) => void;
+    exit: (level: number, ...params: T) => void;
+}): (newLevel: number, ...params: T) => void;
+
+export { type DomSection, type StateDescriptionSection, buildSections, findSection, getStateDescriptionRenderer, getStatesDescriptions, isDomElement, newTreeBuilder, renderSections, toDomNodesIterator, visitDom, visitSectionNodes, visitStateDescriptions, vistSections };

package/dist/index-dom.js

@@ -1 +1 @@
-export { findSection, getStateDescriptionRenderer, renderSections, visitSectionNodes, vistSections } from './chunk-LRMTXZ55.js';
+export { buildSections, findSection, getStateDescriptionRenderer, getStatesDescriptions, isDomElement, newTreeBuilder, renderSections, toDomNodesIterator, visitDom, visitSectionNodes, visitStateDescriptions, vistSections } from './chunk-VILLJJJD.js';

package/dist/index-html.js

@@ -1,2 +1,2 @@
-export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle } from './chunk-G25OZI4I.js';
+export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle } from './chunk-36ZLXJVD.js';
 import './chunk-FIQDLBWD.js';

package/dist/index-runtime.d.ts

@@ -22,7 +22,7 @@ declare class RuntimeStatechartApi {
     toggleState(...stateIds: string[]): boolean;
     activateStates(...stateIds: string[]): void;
     focusStates(...stateIds: string[]): void;
-    setStateDescription(stateId: string, description: HTMLElement | string | undefined): void;
+    setStateDescription(stateId: string, description: Node | string | undefined): void;
     closeStatePanel(stateId: string): void;
     openStatePanel(stateId: string): void;
     deselectTransitions(modifier?: string): void;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, L as Label, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, T as Transition, d as TransitionsGraph } from './StateChart-BYBjTmC2.js';
-export { findSection, getStateDescriptionRenderer, renderSections, visitSectionNodes, vistSections } from './index-dom.js';
+export { DomSection, StateDescriptionSection, buildSections, findSection, getStateDescriptionRenderer, getStatesDescriptions, isDomElement, newTreeBuilder, renderSections, toDomNodesIterator, visitDom, visitSectionNodes, visitStateDescriptions, 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-DgSCNHkR.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 export { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig } from './chunk-SVKVQY7B.js';
-export { findSection, getStateDescriptionRenderer, renderSections, visitSectionNodes, vistSections } from './chunk-LRMTXZ55.js';
-export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase } from './chunk-G25OZI4I.js';
+export { buildSections, findSection, getStateDescriptionRenderer, getStatesDescriptions, isDomElement, newTreeBuilder, renderSections, toDomNodesIterator, visitDom, visitSectionNodes, visitStateDescriptions, vistSections } from './chunk-VILLJJJD.js';
+export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase } from './chunk-36ZLXJVD.js';
 export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-AZBRQNTU.js';
 import './chunk-FIQDLBWD.js';
 export { RuntimeStatechartApi, StateChartIndex } from './chunk-TZHCBZVP.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statewalker/fsm-charts",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "HFSM Implementation",
   "keywords": [],
   "homepage": "https://github.com/statewalker/statewalker-fsm-charts",
@@ -53,6 +53,7 @@
     "build": "rm -fr ./dist && yarn test && tsup",
     "prepare": "yarn build",
     "watch": "tsup --watch",
+    "watch-for-viewer": "tsup --watch --outDir=../statewalker-fsm-viewer/src/.observablehq/cache/_node/@statewalker/fsm-charts@0.2.1",
     "clean": "rm -rf dist",
     "lint": "eslint",
     "lint:fix": "yarn lint -- --fix",

package/src/dom/buildSections.ts

@@ -55,6 +55,33 @@ export function buildSections(root: HTMLElement | Iterable<Node>): DomSection {
     : top;
 }
 
+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;
+  }
+}
+
 // --------------------------------------------
 // DOM Iterator utilities
 

package/src/dom/description-panels.ts

@@ -0,0 +1,100 @@
+import { type DomSection } from "./buildSections.js";
+import { getStatesDescriptions } from "./getStatesDescriptions.js";
+
+export function getStateDescriptionRenderer(options: {
+  element: HTMLElement;
+  rootStateKey: string;
+  splitHeader?: (
+    header?: HTMLElement,
+  ) => [stateKey: undefined | string, label: string];
+}) {
+  const descriptionsIndex = getStatesDescriptions(options);
+
+  return (statesStack: string[]) => {
+    const stateKey: string | undefined = [...statesStack].pop();
+    if (!stateKey) return;
+
+    const section = descriptionsIndex[stateKey];
+    if (!section) return;
+
+    const elm = renderSections({
+      section,
+      deep: (section) => false, // section.state !== options.rootStateKey, // ???
+      header: (section) => {
+        if (section.state === stateKey) {
+          return section.title || section.state;
+        }
+        return;
+      },
+    });
+    const details = elm?.querySelector("details");
+    details && (details.open = true);
+    return elm;
+  };
+}
+
+export function renderSections<T extends DomSection>({
+  section,
+  deep = (s) => true,
+  header = (section) => section.header?.cloneNode(true) as Node,
+}: {
+  section: T;
+  deep?: (s: T) => boolean;
+  header?: (section: T) => undefined | string | Node;
+}) {
+  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: T) {
+    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);
+    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 as T));
+      }
+    }
+    return details;
+  }
+}

package/src/dom/getStatesDescriptions.ts

@@ -0,0 +1,80 @@
+import {
+  buildSections,
+  findSection,
+  visitSectionNodes,
+  vistSections,
+  type DomSection,
+} from "./buildSections.js";
+
+export type StateDescriptionSection = DomSection & {
+  state: string;
+  title?: string;
+};
+export function* visitStateDescriptions({
+  element,
+  rootStateKey,
+  removeFromDom = true,
+  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;
+  removeFromDom?: boolean; // If true - removes state description nodes from the DOM
+  splitHeader?: (
+    header?: HTMLElement,
+  ) => [stateKey: undefined | string, label: string];
+}): Generator<StateDescriptionSection> {
+  const docSections = buildSections(element);
+  const rootDescription = findSection(docSections, (section: DomSection) => {
+    if (!section.header) return false;
+    const [key] = splitHeader(section.header);
+    return key === rootStateKey;
+  });
+  if (!rootDescription) return;
+
+  // Remove description nodes from DOM
+  if (removeFromDom) {
+    for (const node of visitSectionNodes(rootDescription)) {
+      if (node.nodeName[0] === "#") continue;
+      node.parentElement?.removeChild(node);
+    }
+  }
+
+  for (const section of vistSections(rootDescription, false)) {
+    if (!section.header) continue;
+    const [state, title] = splitHeader(section.header);
+    if (state)
+      yield {
+        state,
+        title,
+        ...section,
+      };
+  }
+}
+
+export function getStatesDescriptions(options: {
+  element: HTMLElement;
+  rootStateKey: string;
+  removeFromDom?: boolean; // If true - removes state description nodes from the DOM
+  splitHeader?: (
+    header?: HTMLElement,
+  ) => [stateKey: undefined | string, label: string];
+}): { [state: string]: StateDescriptionSection } {
+  const index: { [state: string]: StateDescriptionSection } = {};
+  for (const description of visitStateDescriptions(options)) {
+    index[description.state] = description;
+  }
+  return index;
+}

package/src/dom/index.ts

@@ -1,168 +1,4 @@
-import { buildSections, DomSection } from "./buildSections.js";
-
-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 (statesStack: string[]) => {
-      return undefined;
-    };
-  }
-
-  // Remove description nodes from DOM
-  for (const node of visitSectionNodes(rootDescription)) {
-    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* 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;
-  }
-}
-
-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;
-  }
-}
+export * from "./buildSections.js";
+export * from "./description-panels.js";
+export * from "./getStatesDescriptions.js";
+export * from "./newTreeBuilder.js";

package/src/html/buildStatechartSvg.ts

@@ -42,6 +42,7 @@ export function buildStatechartSvg({
   initialStateKey?: string;
   finalStateKey?: string;
 }) {
+  if (!nodes.length && !edges.length) return;
   width = Math.ceil(width);
   height = Math.ceil(height);
   println(

package/src/html/buildStatechartsPanel.ts

@@ -18,29 +18,25 @@ export function buildStatechartsPanel({
 
   function render(statechart: StateChart, println: (str: string) => void) {
     println(
-      `  <details class="state-details" data-state-id="${statechart.id}">`
+      `  <details class="state-details" data-state-id="${statechart.id}">`,
     );
     println(
-      `    <summary class="state-details__label">${statechart.text ?? statechart.state}</summary>`
-    );
-    println(
-      `    <div class="state-details__content">`
-    );
-    println(
-      `      <div class="state-details__chart">`
+      `    <summary class="state-details__label">${statechart.text ?? statechart.state}</summary>`,
     );
+    println(`    <div class="state-details__content">`);
     const printChildren = (str: string) => println(`    ${str}`);
-    buildStatechartSvg({
-      graph: statechart,
-      newId,
-      println: printChildren,
-      initialStateKey,
-      finalStateKey,
-    });
-    println(`    </div>`);
-    println(
-      `    <div class="state-details__description">`
-    );
+    if (statechart.nodes.length) {
+      println(`      <div class="state-details__chart">`);
+      buildStatechartSvg({
+        graph: statechart,
+        newId,
+        println: printChildren,
+        initialStateKey,
+        finalStateKey,
+      });
+      println(`    </div>`);
+    }
+    println(`    <div class="state-details__description">`);
     println(`    </div>`);
     for (const child of statechart.children || []) {
       render(child, printChildren);

package/src/runtime/RuntimeStatechartApi.ts

@@ -83,7 +83,7 @@ export class RuntimeStatechartApi {
 
   setStateDescription(
     stateId: string,
-    description: HTMLElement | string | undefined,
+    description: Node | string | undefined,
   ) {
     const descriptionContainer = this.element.querySelector(
       `details[data-state-id="${stateId}"] .state-details__description`,