@statewalker/fsm-charts 0.1.4 → 0.1.6

package/dist/{chunk-YYNW6Q2T.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};`);
         }
       }
@@ -48,60 +48,138 @@ function serializeCss(obj) {
 }
 
 // src/html/buildStatechartStyles.ts
-function buildStateDetailsStyle() {
+var activeStatesStyle = {
+  backgroundColor: "white",
+  borderColor: "red",
+  borderWidth: "2px",
+  labelColor: "red"
+};
+var activeTransitionsStyle = {
+  backgroundColor: "#eee",
+  borderColor: "none",
+  borderWidth: "0",
+  lineColor: "red",
+  lineWidth: "1px",
+  labelColor: "red"
+};
+var selectedStatesStyle = {
+  backgroundColor: "white",
+  borderColor: "navy",
+  borderWidth: "2px",
+  labelColor: "navy"
+};
+var selectedTransitionsStyle = {
+  backgroundColor: "#eee",
+  borderColor: "none",
+  borderWidth: "0",
+  lineColor: "navy",
+  lineWidth: "1px",
+  labelColor: "navy"
+};
+function buildStateDetailsStyle({
+  root = ":root"
+}) {
   return {
-    ".state-details": {
-      backgroundColor: "var(--state-background-color, white)",
-      border: "var(--state-border-width, 1px) solid var(--state-border-color, currentColor)",
-      borderRadius: "0.5em",
-      padding: "0.5em"
-    },
-    ".state-details__label": {
-      cursor: "pointer",
-      color: "var(--transition-label-color, currentColor)",
-      fontFamily: "var(--state-label-font-family, sans-serif)",
-      fontSize: "var(--state-label-font-size, 14px)"
-    },
-    ".state-details__description": {
-      display: "flex",
-      flexDirection: "column",
-      gap: "0.5em"
-    },
-    ".state-details__chart": {
-      maxWidth: "100%",
-      overflow: "auto",
-      scrollbarWidth: "thin"
-    },
-    //
-    ".state-details--selected": {
-      backgroundColor: "var(--state-selected-background-color, white)",
-      border: "var(--state-selected-border-width, 1px) solid var(--state-selected-border-color, currentColor)"
-    },
-    ".state-details__label--selected": {
-      color: "var(--state-selected-label-color)"
+    [root]: {
+      // --------------------------
+      // Panels
+      ".state-details": {
+        backgroundColor: "var(--state-background-color, white)",
+        border: "var(--state-border-width, 1px) solid var(--state-border-color, currentColor)",
+        borderRadius: "0.5em",
+        padding: "0.5em"
+      },
+      ".state-details__label": {
+        cursor: "pointer",
+        color: "var(--transition-label-color, currentColor)",
+        fontFamily: "var(--state-label-font-family, sans-serif)",
+        fontSize: "var(--state-label-font-size, 14px)"
+      },
+      ".state-details__description": {
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.5em"
+      },
+      ".state-details__chart": {
+        maxWidth: "100%",
+        overflow: "auto",
+        scrollbarWidth: "thin"
+      }
+    }
+  };
+}
+function buildStateDetailsStyleWithModifier({
+  root = ":root",
+  modifier,
+  states
+}) {
+  return {
+    [root]: {
+      //
+      ".state-details": {
+        [`&.state-details--${modifier}`]: {
+          backgroundColor: `var(--state-${modifier}-background-color, ${states.backgroundColor})`,
+          border: `var(--state-${modifier}-border-width, 1px) solid var(--state-${modifier}-border-color, currentColor)`
+        }
+      },
+      ".state-details__label": {
+        [`&.state-details__label--${modifier}`]: {
+          color: `var(--state-${modifier}-label-color)`
+        }
+      }
+    }
+  };
+}
+function buildStatechartStylesWithModifier({
+  root = ":root",
+  modifier,
+  states,
+  transitions
+}) {
+  return {
+    [root]: {
+      // --------------------------------------
+      // Default values for transitions
+      [`--transition-${modifier}-background-color`]: transitions.backgroundColor,
+      [`--transition-${modifier}-border-color`]: transitions.borderColor,
+      [`--transition-${modifier}-border-width`]: transitions.borderWidth,
+      [`--transition-${modifier}-line-color`]: transitions.lineColor,
+      [`--transition-${modifier}-line-width`]: transitions.lineWidth,
+      [`--transition-${modifier}-label-color`]: transitions.labelColor,
+      // --------------------------------------
+      // Default values for states
+      [`--state-${modifier}-background-color`]: states.backgroundColor,
+      [`--state-${modifier}-border-color`]: states.borderColor,
+      [`--state-${modifier}-border-width`]: states.borderWidth,
+      [`--state-${modifier}-label-color`]: states.labelColor,
+      ".state": {
+        [`&.state--${modifier}`]: {
+          "--state-background-color": `var(--state-${modifier}-background-color)`,
+          "--state-border-color": `var(--state-${modifier}-border-color)`,
+          "--state-border-width": `var(--state-${modifier}-border-width)`,
+          "--state-label-color": `var(--state-${modifier}-label-color)`
+        }
+      },
+      ".transition": {
+        [`&.transition--${modifier}`]: {
+          "--transition-background-color": `var(--transition-${modifier}-background-color)`,
+          "--transition-border-color": `var(--transition-${modifier}-border-color)`,
+          "--transition-border-width": `var(--transition-${modifier}-border-width)`,
+          "--transition-line-color": `var(--transition-${modifier}-line-color)`,
+          "--transition-line-width": `var(--transition-${modifier}-line-width)`,
+          "--transition-label-color": `var(--transition-${modifier}-label-color)`
+        }
+      }
     }
   };
 }
 function buildStatechartStyles({
   root = ":root"
-} = {}) {
+}) {
   return {
     [root]: {
       // --------------------------------------
-      // Normal states
-      "--state-background-color": "white",
-      "--state-border-color": "silver",
-      "--state-border-width": "1px",
-      "--state-label-color": "gray",
-      "--state-label-font-size": "14px",
-      "--state-label-font-family": "sans-serif",
-      // Selected states
-      "--state-selected-background-color": "#eee",
-      "--state-selected-border-color": "red",
-      "--state-selected-border-width": "2px",
-      "--state-selected-label-color": "red",
-      // --------------------------------------
-      // Normal transitions
+      // Transitions
       "--transition-background-color": "rgba(255,255,255,0.7)",
       "--transition-border-color": "none",
       "--transition-border-width": "1px",
@@ -110,26 +188,6 @@ function buildStatechartStyles({
       "--transition-label-color": "gray",
       "--transition-label-font-size": "12px",
       "--transition-label-font-family": "sans-serif",
-      // --------------------------------------
-      // Selected transitions
-      "--transition-selected-background-color": "#eee",
-      "--transition-selected-border-color": "none",
-      "--transition-selected-border-width": "0",
-      "--transition-selected-line-color": "red",
-      "--transition-selected-line-width": "1px",
-      "--transition-selected-label-color": "red",
-      // --------------------------------------
-      // --------------------------------------
-      ...buildStateDetailsStyle(),
-      ".transition": {},
-      ".transition--selected": {
-        "--transition-background-color": "var(--transition-selected-background-color)",
-        "--transition-border-color": "var(--transition-selected-border-color)",
-        "--transition-border-width": "var(--transition-selected-border-width)",
-        "--transition-line-color": "var(--transition-selected-line-color)",
-        "--transition-line-width": "var(--transition-selected-line-width)",
-        "--transition-label-color": "var(--transition-selected-label-color)"
-      },
       ".transition__marker": {
         fill: "var(--transition-line-color, currentColor)",
         stroke: "none"
@@ -151,35 +209,14 @@ function buildStatechartStyles({
         fontFamily: "var(--transition-label-font-family, sans-serif)",
         cursor: "pointer"
       },
-      // ----------------------------------------------
-      // States
-      ".state": {},
-      ".state--selected": {
-        "--state-background-color": "var(--state-selected-background-color)",
-        "--state-border-color": "var(--state-selected-border-color)",
-        "--state-border-width": "var(--state-selected-border-width)",
-        "--state-label-color": "var(--state-selected-label-color)"
-      },
-      // --------------------------
-      // Panels
-      ".state__details": {
-        backgroundColor: "var(--state-background-color, white)",
-        border: "var(--state-border-width, 1px) solid var(--state-border-color, currentColor)",
-        borderRadius: "0.5em",
-        padding: "0.5em"
-      },
-      ".state__description": {
-        display: "flex",
-        flexDirection: "column",
-        gap: "0.5em"
-      },
-      ".state__chart-container": {
-        maxWidth: "100%",
-        overflow: "auto",
-        scrollbarWidth: "thin"
-      },
-      // --------------------------
-      // Statecharts
+      // --------------------------------------
+      // Normal states
+      "--state-background-color": "white",
+      "--state-border-color": "silver",
+      "--state-border-width": "1px",
+      "--state-label-color": "gray",
+      "--state-label-font-size": "14px",
+      "--state-label-font-family": "sans-serif",
       ".state__box": {
         fill: "var(--state-background-color, white)",
         stroke: "var(--state-border-color, currentColor)",
@@ -216,8 +253,33 @@ function buildStatechartStyles({
 
 // src/html/buildStatechartCss.ts
 function buildStatechartCss({ prefix = "" } = {}) {
-  const cssObject = buildStatechartStyles({ root: prefix || ":root" });
-  return serializeCss(cssObject);
+  const root = prefix || ":root";
+  return [
+    buildStatechartStyles({ root }),
+    buildStatechartStylesWithModifier({
+      root,
+      modifier: "selected",
+      states: selectedStatesStyle,
+      transitions: selectedTransitionsStyle
+    }),
+    buildStatechartStylesWithModifier({
+      root,
+      modifier: "active",
+      states: activeStatesStyle,
+      transitions: activeTransitionsStyle
+    }),
+    buildStateDetailsStyle({ root }),
+    buildStateDetailsStyleWithModifier({
+      root,
+      modifier: "selected",
+      states: selectedStatesStyle
+    }),
+    buildStateDetailsStyleWithModifier({
+      root,
+      modifier: "active",
+      states: activeStatesStyle
+    })
+  ].map(serializeCss).join("\n");
 }
 
 // src/utils/serializeAttrs.ts
@@ -232,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(" ");
@@ -536,4 +600,4 @@ function buildStatechartsPanel({
   }
 }
 
-export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel, serializeCss, toKebabCase2 as toKebabCase };
+export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase };

package/dist/index-html-D4UI0s_n.d.ts

@@ -0,0 +1,75 @@
+import { S as StateChart, d as TransitionsGraph } from './StateChart-PdtJDEPy.js';
+
+declare function buildStatechartCss({ prefix }?: {
+    prefix?: string | undefined;
+}): string;
+
+declare function buildStatechartsPanel({ statechart, newId, println, initialStateKey, finalStateKey, }: {
+    statechart: StateChart;
+    newId: (prefix: string) => string;
+    println: (str: string) => void;
+    initialStateKey?: string;
+    finalStateKey?: string;
+}): void;
+
+interface CssTree extends Record<string, string | number | CssTree> {
+}
+declare function serializeCss(obj: CssTree): string;
+
+declare const activeStatesStyle: {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: string;
+    labelColor: string;
+};
+declare const activeTransitionsStyle: {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: string;
+    lineColor: string;
+    lineWidth: string;
+    labelColor: string;
+};
+declare const selectedStatesStyle: {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: string;
+    labelColor: string;
+};
+declare const selectedTransitionsStyle: {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: string;
+    lineColor: string;
+    lineWidth: string;
+    labelColor: string;
+};
+declare function buildStateDetailsStyle({ root, }: {
+    root?: string;
+}): CssTree;
+declare function buildStateDetailsStyleWithModifier({ root, modifier, states, }: {
+    root?: string;
+    modifier: string;
+    states: Record<string, string>;
+}): CssTree;
+declare function buildStatechartStylesWithModifier({ root, modifier, states, transitions, }: {
+    root?: string;
+    modifier: string;
+    states: Record<string, string>;
+    transitions: Record<string, string>;
+}): CssTree;
+declare function buildStatechartStyles({ root, }: {
+    root?: string;
+}): CssTree;
+
+declare function buildStatechartSvg({ graph: { width, height, nodes, edges }, newId, stateFontSize, transitionFontSize, println, initialStateKey, finalStateKey, }: {
+    graph: TransitionsGraph;
+    newId: (prefix: string) => string;
+    println: (str: string) => void;
+    stateFontSize?: number;
+    transitionFontSize?: number;
+    initialStateKey?: string;
+    finalStateKey?: string;
+}): void;
+
+export { type CssTree as C, buildStatechartsPanel as a, buildStatechartCss as b, activeStatesStyle as c, activeTransitionsStyle as d, selectedTransitionsStyle as e, buildStateDetailsStyle as f, buildStateDetailsStyleWithModifier as g, buildStatechartStylesWithModifier as h, buildStatechartStyles as i, buildStatechartSvg as j, serializeCss as k, selectedStatesStyle as s };

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 { b as buildStatechartCss, c as buildStatechartStyles, d as buildStatechartSvg, a as buildStatechartsPanel } from './index-html-CbDZzk2n.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';

package/dist/index-html.js

@@ -1,3 +1,3 @@
-export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel } from './chunk-YYNW6Q2T.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.d.ts

@@ -1,8 +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-PdtJDEPy.js';
 export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './index-layout.js';
-export { C as CssTree, b as buildStatechartCss, c as buildStatechartStyles, d as buildStatechartSvg, a as buildStatechartsPanel, s as serializeCss } from './index-html-CbDZzk2n.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 { 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,5 @@
 export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-OTGN3OYG.js';
-export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel, serializeCss, toKebabCase } from './chunk-YYNW6Q2T.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.4",
+  "version": "0.1.6",
   "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/html/buildStatechartCss.ts

@@ -1,7 +1,43 @@
-import { serializeCss } from "../utils/serializeCss";
-import { buildStatechartStyles } from "./buildStatechartStyles";
+import { serializeCss } from "../utils/serializeCss.ts";
+import {
+  activeStatesStyle,
+  activeTransitionsStyle,
+  buildStatechartStyles,
+  buildStatechartStylesWithModifier,
+  buildStateDetailsStyle,
+  buildStateDetailsStyleWithModifier,
+  selectedStatesStyle,
+  selectedTransitionsStyle,
+} from "./buildStatechartStyles.ts";
 
 export function buildStatechartCss({ prefix = "" } = {}): string {
-  const cssObject = buildStatechartStyles({ root: prefix || ":root" });
-  return serializeCss(cssObject);
+  const root = prefix || ":root";
+  return [
+    buildStatechartStyles({ root }),
+    buildStatechartStylesWithModifier({
+      root,
+      modifier: "selected",
+      states: selectedStatesStyle,
+      transitions: selectedTransitionsStyle,
+    }),
+    buildStatechartStylesWithModifier({
+      root,
+      modifier: "active",
+      states: activeStatesStyle,
+      transitions: activeTransitionsStyle,
+    }),
+    buildStateDetailsStyle({ root }),
+    buildStateDetailsStyleWithModifier({
+      root,
+      modifier: "selected",
+      states: selectedStatesStyle,
+    }),
+    buildStateDetailsStyleWithModifier({
+      root,
+      modifier: "active",
+      states: activeStatesStyle,
+    }),
+  ]
+    .map(serializeCss)
+    .join("\n");
 }

package/src/html/buildStatechartStyles.ts

@@ -1,63 +1,161 @@
-import type { CssTree } from "../utils/serializeCss";
+import type { CssTree } from "../utils/serializeCss.ts";
 
-function buildStateDetailsStyle() {
+export const activeStatesStyle = {
+  backgroundColor: "white",
+  borderColor: "red",
+  borderWidth: "2px",
+  labelColor: "red",
+};
+export const activeTransitionsStyle = {
+  backgroundColor: "#eee",
+  borderColor: "none",
+  borderWidth: "0",
+  lineColor: "red",
+  lineWidth: "1px",
+  labelColor: "red",
+};
+
+export const selectedStatesStyle = {
+  backgroundColor: "white",
+  borderColor: "navy",
+  borderWidth: "2px",
+  labelColor: "navy",
+};
+export const selectedTransitionsStyle = {
+  backgroundColor: "#eee",
+  borderColor: "none",
+  borderWidth: "0",
+  lineColor: "navy",
+  lineWidth: "1px",
+  labelColor: "navy",
+};
+
+export function buildStateDetailsStyle({
+  root = ":root",
+}: {
+  root?: string;
+}): CssTree {
   return {
-    ".state-details": {
-      backgroundColor: "var(--state-background-color, white)",
-      border:
-        "var(--state-border-width, 1px) solid var(--state-border-color, currentColor)",
-      borderRadius: "0.5em",
-      padding: "0.5em",
-    },
-    ".state-details__label": {
-      cursor: "pointer",
-      color: "var(--transition-label-color, currentColor)",
-      fontFamily: "var(--state-label-font-family, sans-serif)",
-      fontSize: "var(--state-label-font-size, 14px)",
-    },
-    ".state-details__description": {
-      display: "flex",
-      flexDirection: "column",
-      gap: "0.5em",
-    },
-    ".state-details__chart": {
-      maxWidth: "100%",
-      overflow: "auto",
-      scrollbarWidth: "thin",
-    },
-    //
-    ".state-details--selected": {
-      backgroundColor: "var(--state-selected-background-color, white)",
-      border:
-        "var(--state-selected-border-width, 1px) solid var(--state-selected-border-color, currentColor)",
+    [root]: {
+      // --------------------------
+      // Panels
+
+      ".state-details": {
+        backgroundColor: "var(--state-background-color, white)",
+        border:
+          "var(--state-border-width, 1px) solid var(--state-border-color, currentColor)",
+        borderRadius: "0.5em",
+        padding: "0.5em",
+      },
+      ".state-details__label": {
+        cursor: "pointer",
+        color: "var(--transition-label-color, currentColor)",
+        fontFamily: "var(--state-label-font-family, sans-serif)",
+        fontSize: "var(--state-label-font-size, 14px)",
+      },
+      ".state-details__description": {
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.5em",
+      },
+      ".state-details__chart": {
+        maxWidth: "100%",
+        overflow: "auto",
+        scrollbarWidth: "thin",
+      },
     },
-    ".state-details__label--selected": {
-      color: "var(--state-selected-label-color)",
+  };
+}
+
+export function buildStateDetailsStyleWithModifier({
+  root = ":root",
+  modifier,
+  states,
+}: {
+  root?: string;
+  modifier: string;
+  states: Record<string, string>;
+}): CssTree {
+  return {
+    [root]: {
+      //
+      ".state-details": {
+        [`&.state-details--${modifier}`]: {
+          backgroundColor: `var(--state-${modifier}-background-color, ${states.backgroundColor})`,
+          border: `var(--state-${modifier}-border-width, 1px) solid var(--state-${modifier}-border-color, currentColor)`,
+        },
+      },
+      ".state-details__label": {
+        [`&.state-details__label--${modifier}`]: {
+          color: `var(--state-${modifier}-label-color)`,
+        },
+      },
     },
   };
 }
-export function buildStatechartStyles({
+
+export function buildStatechartStylesWithModifier({
   root = ":root",
-}: { root?: string } = {}): CssTree {
+  modifier,
+  states,
+  transitions,
+}: {
+  root?: string;
+  modifier: string;
+  states: Record<string, string>;
+  transitions: Record<string, string>;
+}): CssTree {
   return {
     [root]: {
       // --------------------------------------
-      // Normal states
-      "--state-background-color": "white",
-      "--state-border-color": "silver",
-      "--state-border-width": "1px",
-      "--state-label-color": "gray",
-      "--state-label-font-size": "14px",
-      "--state-label-font-family": "sans-serif",
+      // Default values for transitions
+      [`--transition-${modifier}-background-color`]:
+        transitions.backgroundColor,
+      [`--transition-${modifier}-border-color`]: transitions.borderColor,
+      [`--transition-${modifier}-border-width`]: transitions.borderWidth,
+      [`--transition-${modifier}-line-color`]: transitions.lineColor,
+      [`--transition-${modifier}-line-width`]: transitions.lineWidth,
+      [`--transition-${modifier}-label-color`]: transitions.labelColor,
 
-      // Selected states
-      "--state-selected-background-color": "#eee",
-      "--state-selected-border-color": "red",
-      "--state-selected-border-width": "2px",
-      "--state-selected-label-color": "red",
+      // --------------------------------------
+      // Default values for states
+      [`--state-${modifier}-background-color`]: states.backgroundColor,
+      [`--state-${modifier}-border-color`]: states.borderColor,
+      [`--state-${modifier}-border-width`]: states.borderWidth,
+      [`--state-${modifier}-label-color`]: states.labelColor,
+
+      ".state": {
+        [`&.state--${modifier}`]: {
+          "--state-background-color": `var(--state-${modifier}-background-color)`,
+          "--state-border-color": `var(--state-${modifier}-border-color)`,
+          "--state-border-width": `var(--state-${modifier}-border-width)`,
+          "--state-label-color": `var(--state-${modifier}-label-color)`,
+        },
+      },
+
+      ".transition": {
+        [`&.transition--${modifier}`]: {
+          "--transition-background-color": `var(--transition-${modifier}-background-color)`,
+          "--transition-border-color": `var(--transition-${modifier}-border-color)`,
+          "--transition-border-width": `var(--transition-${modifier}-border-width)`,
+          "--transition-line-color": `var(--transition-${modifier}-line-color)`,
+          "--transition-line-width": `var(--transition-${modifier}-line-width)`,
+          "--transition-label-color": `var(--transition-${modifier}-label-color)`,
+        },
+      },
+    },
+  };
+}
 
+export function buildStatechartStyles({
+  root = ":root",
+}: {
+  root?: string;
+}): CssTree {
+  return {
+    [root]: {
       // --------------------------------------
-      // Normal transitions
+      // Transitions
       "--transition-background-color": "rgba(255,255,255,0.7)",
       "--transition-border-color": "none",
       "--transition-border-width": "1px",
@@ -67,28 +165,6 @@ export function buildStatechartStyles({
       "--transition-label-font-size": "12px",
       "--transition-label-font-family": "sans-serif",
 
-      // --------------------------------------
-      // Selected transitions
-      "--transition-selected-background-color": "#eee",
-      "--transition-selected-border-color": "none",
-      "--transition-selected-border-width": "0",
-      "--transition-selected-line-color": "red",
-      "--transition-selected-line-width": "1px",
-      "--transition-selected-label-color": "red",
-
-      // --------------------------------------
-      // --------------------------------------
-      ...buildStateDetailsStyle(),
-      ".transition": {},
-      ".transition--selected": {
-        "--transition-background-color":
-          "var(--transition-selected-background-color)",
-        "--transition-border-color": "var(--transition-selected-border-color)",
-        "--transition-border-width": "var(--transition-selected-border-width)",
-        "--transition-line-color": "var(--transition-selected-line-color)",
-        "--transition-line-width": "var(--transition-selected-line-width)",
-        "--transition-label-color": "var(--transition-selected-label-color)",
-      },
       ".transition__marker": {
         fill: "var(--transition-line-color, currentColor)",
         stroke: "none",
@@ -111,39 +187,15 @@ export function buildStatechartStyles({
         cursor: "pointer",
       },
 
-      // ----------------------------------------------
-      // States
-
-      ".state": {},
-      ".state--selected": {
-        "--state-background-color": "var(--state-selected-background-color)",
-        "--state-border-color": "var(--state-selected-border-color)",
-        "--state-border-width": "var(--state-selected-border-width)",
-        "--state-label-color": "var(--state-selected-label-color)",
-      },
-
-      // --------------------------
-      // Panels
-      ".state__details": {
-        backgroundColor: "var(--state-background-color, white)",
-        border:
-          "var(--state-border-width, 1px) solid var(--state-border-color, currentColor)",
-        borderRadius: "0.5em",
-        padding: "0.5em",
-      },
-      ".state__description": {
-        display: "flex",
-        flexDirection: "column",
-        gap: "0.5em",
-      },
-      ".state__chart-container": {
-        maxWidth: "100%",
-        overflow: "auto",
-        scrollbarWidth: "thin",
-      },
+      // --------------------------------------
+      // Normal states
+      "--state-background-color": "white",
+      "--state-border-color": "silver",
+      "--state-border-width": "1px",
+      "--state-label-color": "gray",
+      "--state-label-font-size": "14px",
+      "--state-label-font-family": "sans-serif",
 
-      // --------------------------
-      // Statecharts
       ".state__box": {
         fill: "var(--state-background-color, white)",
         stroke: "var(--state-border-color, currentColor)",

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,4 @@
-export * from "./types/index.ts";
+export type * from "./types/index.ts";
 export * from "./layout/index.ts";
 export * from "./html/index.ts";
 export * from "./runtime/index.ts";

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/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/dist/index-html-CbDZzk2n.d.ts

@@ -1,33 +0,0 @@
-import { S as StateChart, d as TransitionsGraph } from './StateChart-PdtJDEPy.js';
-
-declare function buildStatechartCss({ prefix }?: {
-    prefix?: string | undefined;
-}): string;
-
-declare function buildStatechartsPanel({ statechart, newId, println, initialStateKey, finalStateKey, }: {
-    statechart: StateChart;
-    newId: (prefix: string) => string;
-    println: (str: string) => void;
-    initialStateKey?: string;
-    finalStateKey?: string;
-}): void;
-
-interface CssTree extends Record<string, string | number | CssTree> {
-}
-declare function serializeCss(obj: CssTree): string;
-
-declare function buildStatechartStyles({ root, }?: {
-    root?: string;
-}): CssTree;
-
-declare function buildStatechartSvg({ graph: { width, height, nodes, edges }, newId, stateFontSize, transitionFontSize, println, initialStateKey, finalStateKey, }: {
-    graph: TransitionsGraph;
-    newId: (prefix: string) => string;
-    println: (str: string) => void;
-    stateFontSize?: number;
-    transitionFontSize?: number;
-    initialStateKey?: string;
-    finalStateKey?: string;
-}): void;
-
-export { type CssTree as C, buildStatechartsPanel as a, buildStatechartCss as b, buildStatechartStyles as c, buildStatechartSvg as d, serializeCss as s };

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";